:root{font-family:'Segoe UI',Arial,sans-serif;color:#eff5ff;background:#080c20;--cyan:#77dbff;--violet:#b89aff;--muted:#aebbd5;--line:#293957}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 12% 0%,#1d3462aa,transparent 55%),radial-gradient(ellipse at 95% 60%,#40255c88,transparent 55%),#080c20}body:before{content:'';position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(#9cdcff88 1px,transparent 1px);background-size:77px 89px;opacity:.3;z-index:0}main{position:relative;z-index:1;max-width:1160px;margin:auto;padding:26px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:20px;border-bottom:1px solid var(--line)}nav{display:flex;gap:16px;flex-wrap:wrap}nav a{color:var(--muted);text-decoration:none;padding:8px 0}nav a[aria-current=page]{color:var(--cyan);border-bottom:2px solid var(--cyan)}.brand{font-weight:750;letter-spacing:.14em;color:var(--cyan)}h1{font-size:44px;letter-spacing:-.035em;margin:12px 0}h2{font-size:26px;margin:12px 0}h3{margin:10px 0;font-size:20px}p{line-height:1.6}.muted,small{color:var(--muted)}small{font-size:13px}.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);font-weight:700}.panel{padding:26px;margin:22px 0;background:linear-gradient(135deg,#14213de8,#11152de8);border:1px solid var(--line);border-radius:20px;box-shadow:0 15px 65px #0003}.hero{padding:36px 0 12px;max-width:800px}.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.mode{display:flex;flex-direction:column;padding:24px;border-radius:20px;border:1px solid #425580;background:linear-gradient(150deg,#1f3257,#141a32);min-height:335px;transition:transform .18s,border-color .18s}.mode:hover{transform:translateY(-4px);border-color:var(--cyan)}.mode .glyph{font-size:32px;color:var(--cyan)}.mode p{color:var(--muted)}.mode button{margin-top:auto}.chips,.bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.chip{font-size:12px;border-radius:30px;background:#78dcff18;color:#c2ecff;padding:7px 12px}.bar{margin:14px 0}button,.button{font:inherit;border:1px solid #51658c;color:#f1f7ff;background:#202d4c;padding:12px 18px;border-radius:11px;cursor:pointer;text-decoration:none;display:inline-block}button:hover:not(:disabled){background:#2b4067}button.primary{background:linear-gradient(100deg,#59beeb,#a699f0);color:#08112b;border:0;font-weight:700}button:disabled{opacity:.42;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ffe08b;outline-offset:3px}input,select{font:inherit;background:#10192f;color:#f2f6ff;border:1px solid #51658c;border-radius:8px;padding:10px;max-width:100%}input[type=number]{width:100px}input[type=checkbox]{accent-color:var(--cyan)}label{display:block;line-height:1.7}a{color:var(--cyan)}.hide{display:none!important}#message{color:#ffcfb0;min-height:24px}#timer{font-size:38px;font-variant-numeric:tabular-nums;color:#ffe3a0}.timer-label{font-size:12px;text-transform:uppercase;letter-spacing:.14em}.round-top{display:flex;justify-content:space-between;align-items:center;gap:18px}.orb-wrap{height:190px;display:grid;place-items:center;position:relative;overflow:hidden}.orb{width:126px;height:126px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#a7eeff,#4483ae44 50%,#6653af22 65%,transparent 70%);box-shadow:0 0 60px #69c8fc33;outline:1px solid #8cdfff44;outline-offset:12px}.orb-wrap.is-playing .orb{animation:breathe 2.3s ease-in-out infinite}.equalizer{display:flex;gap:6px;align-items:center;height:45px;position:absolute;bottom:8px}.equalizer i{height:14px;width:4px;background:var(--cyan);border-radius:4px}.is-playing .equalizer i{animation:wave .8s ease-in-out infinite alternate}.equalizer i:nth-child(2n){animation-delay:.2s}.equalizer i:nth-child(3n){animation-delay:.5s}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0}.choice{text-align:left;min-height:66px;font-size:15px}.choice[aria-pressed=true]{border-color:var(--cyan);background:#285674;box-shadow:0 0 18px #75dbff24}.composer-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.hint{border-left:3px solid #ffd487;background:#ffcc7010;padding:14px;color:#ffe4b6;border-radius:6px}.reveal-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:20px;margin-top:20px}.art{height:220px;border:1px solid #445a7c;border-radius:14px;background:radial-gradient(circle at 50% 30%,#385b88,#151c39 75%);display:grid;place-items:center;position:relative;overflow:hidden}.art .symbol{font-size:100px;filter:drop-shadow(0 0 22px #d6e9ff55)}.art.cover img{object-fit:contain;background:#0c142c}.art img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.portrait img{object-fit:contain;background:#0c142c}.credits{font-size:12px;display:block;margin:6px 0;color:var(--muted)}.score{font-size:40px;font-weight:700}.tablewrap{overflow:auto}table{border-collapse:collapse;width:100%}th,td{padding:12px 8px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px}.good{color:#9fe8c1}.wrong{color:#ffd0a0}.setting-row{padding:18px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr 1.15fr;gap:20px}.setting-controls{display:grid;gap:10px}.setting-controls input[type=file]{width:100%;font-size:13px}.hint-edit input{width:100%;font-size:13px}.setting-controls .bar{margin:4px 0}details summary{cursor:pointer;color:var(--cyan)}progress{width:100%;height:10px;accent-color:var(--cyan)}.sheetgrid{display:grid;grid-template-columns:2fr 1fr;gap:25px}.sheetrow{display:grid;grid-template-columns:40px 1fr 40px;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.line{border-bottom:1px solid #aec0de;height:20px}.composerrow{padding:9px 0}.printheading{display:none}footer{padding:26px 0;color:var(--muted);font-size:12px}.warning{border-left:3px solid #ffd487;padding:10px 15px;background:#ffd4870a}.motion-switch{font-size:13px;color:var(--muted)}@keyframes breathe{50%{transform:scale(1.08);box-shadow:0 0 95px #88c9ff55}}@keyframes wave{to{height:40px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}body.calm *{animation:none!important;transition:none!important}@media(max-width:760px){main{padding:16px}h1{font-size:33px}.mode-grid,.setting-row,.reveal-grid{grid-template-columns:1fr}.choices{grid-template-columns:repeat(2,1fr)}.composer-grid{grid-template-columns:repeat(2,1fr)}.panel{padding:20px}.mode{min-height:260px}.sheetgrid{grid-template-columns:1fr}}
@media print{html{background:white!important}@page{size:letter;margin:.5in}body{background:white!important;color:black}body:before{display:none}main{padding:0;max-width:none}.no-print,header,footer,#message{display:none!important}.panel{background:white;color:black;border:0;box-shadow:none;padding:0;margin:0}.printheading{display:block}.sheetgrid{display:grid;grid-template-columns:2fr 1fr}.sheetrow{padding:9px 0;font-size:11px;border-color:#ccc;break-inside:avoid}.line{border-color:black}.composerrow{font-size:11px;padding:9px 0}.key{break-before:page}table{font-size:11px}th,td{font-size:11px;padding:8px;border-color:#ccc}h1{font-size:22px}h2{font-size:16px}.muted{color:#444}}

.answering .orb-wrap{display:none}.round-top{position:sticky;top:0;z-index:3;background:#132039ee;border-radius:12px;padding:8px 0}progress{appearance:none;border:0;border-radius:10px;overflow:hidden;background:#25324f}progress::-webkit-progress-bar{background:#25324f}progress::-webkit-progress-value{background:linear-gradient(90deg,#65d5ee,#b6a1ff)}progress::-moz-progress-bar{background:#7bd8f8}

.art{box-shadow:0 0 45px color-mix(in srgb,var(--piece-color,#77dbff) 12%,transparent)}#reveal:not(.hide){animation:reveal-rise .5s ease-out}@keyframes reveal-rise{from{opacity:.3;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.choice-title{display:block}.instrument-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.instrument-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#b7d9f6}.instrument-badge svg{width:23px;height:23px;flex-shrink:0}.choice[aria-pressed="true"] .instrument-badge{color:#fff}

.collection-details>summary{font-size:1.3rem;font-weight:600}.piece-details{border-bottom:1px solid #ffffff22;padding:12px 0}.piece-details>summary{cursor:pointer;padding:8px}.piece-edit-form{padding:16px;display:grid;gap:14px}.order-row{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #ffffff22}.order-row>span{flex:1}.order-row select{min-width:65px}.settings-tabs [aria-selected="true"]{border-color:#75d8ff;background:#20455d}@media(max-width:600px){.order-row{flex-wrap:wrap}.order-row>span{min-width:60%;font-size:14px}}

#choices,#composerChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin:20px auto;gap:16px}#choices .choice,#composerChoices .choice{width:100%;min-width:0;text-align:center;min-height:100px;overflow-wrap:anywhere}#choices .instrument-badges{justify-content:center}.song-enabled{display:flex;align-items:center;gap:6px}.song-enabled input{width:auto}.song-disabled>span{opacity:.5}@media(max-width:600px){#choices,#composerChoices{gap:10px}#choices .choice,#composerChoices .choice{padding:12px 8px;font-size:14px}}

.mode-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.session-songs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.session-songs label{display:flex;gap:8px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:8px}.session-songs input{width:auto}.play-layout.with-history{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px}.play-layout .play-main{min-width:0}#playedPanel{align-self:start;position:sticky;top:12px}#playedSongs p{border-bottom:1px solid var(--line);padding:10px 0}#answerClock{color:var(--cyan)}fieldset{border:1px solid var(--line);border-radius:12px;padding:15px}#listeningInstruments .instrument-badge{font-size:15px}@media(max-width:850px){.play-layout.with-history{grid-template-columns:1fr}#playedPanel{position:static}.session-songs{grid-template-columns:1fr}}

/* iPad and Home Screen layout */
html{-webkit-text-size-adjust:100%}body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}button,.button,summary,input[type=checkbox],select{touch-action:manipulation}button,.button,select,summary{min-height:44px}input,select,textarea{font-size:16px}input[type=checkbox]{min-width:22px;min-height:22px}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #77dbff;outline-offset:3px}audio{max-width:100%}@media(hover:none){.mode:hover{transform:none}}@media(max-width:1024px){main{padding:18px}.panel{padding:20px}.play-layout.with-history{grid-template-columns:1fr}#playedPanel{position:static}.settings-tabs{gap:8px}.settings-tabs button{flex:1 1 40%;font-size:14px}}