:root{--primary:#171717;--on-primary:#fff;--ink:#171717;--body:#4d4d4d;--hairline:#ebebeb;--hairline-strong:#a1a1a1;--canvas:#fff;--canvas-soft:#fafafa;--canvas-soft-2:#f5f5f5;--link-deep:#0761d1;--error-deep:#c50000;--selection-bg:#171717;--selection-fg:#f2f2f2;--font-sans:Geist, Inter, system-ui, -apple-system, sans-serif;--font-mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;--text-display-xl:48px;--track-display-xl:-2.4px;--text-display-lg:32px;--track-display-lg:-1.28px;--text-display-md:24px;--track-display-md:-.96px;--text-display-sm:20px;--track-display-sm:-.6px;--text-body-lg:18px;--text-body-md:16px;--text-body-sm:14px;--track-body-sm:-.28px;--text-caption:12px;--lh-display-lg:40px;--lh-display-md:32px;--lh-display-sm:28px;--lh-body-lg:28px;--lh-body-md:24px;--lh-body-sm:20px;--lh-caption:16px;--rounded-xs:4px;--rounded-sm:6px;--rounded-lg:12px;--rounded-full:9999px;--space-xxs:4px;--space-xs:8px;--space-sm:12px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-3xl:48px;--space-4xl:64px;--elevation-1:inset 0 0 0 1px #00000014;--elevation-2:0px 1px 1px #00000005, 0px 2px 2px #0000000a, inset 0 0 0 1px #00000014;--elevation-3:0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a, inset 0 0 0 1px #00000014;--elevation-5:0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, inset 0 0 0 1px #00000014;--tap:44px;--motion-hover:.12s;--motion-control:.18s;--motion-progress:.32s;--motion-flip:.55s;--ease:cubic-bezier(.25, 0, .3, 1);--ease-out:cubic-bezier(0, 0, .3, 1)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--canvas-soft);color:var(--ink);font-family:var(--font-sans);font-size:var(--text-body-md);line-height:var(--lh-body-md);-webkit-font-smoothing:antialiased;margin:0}::selection{background:var(--selection-bg);color:var(--selection-fg)}button,input{font:inherit;color:inherit}[hidden]{display:none!important}kbd{font-family:var(--font-mono);font-size:var(--text-caption);line-height:var(--lh-caption);padding:2px var(--space-xxs);border-radius:var(--rounded-xs);background:var(--canvas-soft-2);box-shadow:var(--elevation-1);color:var(--body)}.app{width:min(100% - var(--space-xl), 768px);padding:max(var(--space-md), env(safe-area-inset-top)) 0 calc(var(--space-lg) + env(safe-area-inset-bottom));gap:var(--space-md);flex-direction:column;min-height:100svh;margin-inline:auto;display:flex}.topbar{justify-content:space-between;align-items:center;gap:var(--space-md);display:flex}.brand{align-items:center;gap:var(--space-xs);font-family:var(--font-sans);font-size:var(--text-display-sm);line-height:var(--lh-display-sm);letter-spacing:var(--track-display-sm);margin:0;font-weight:600;display:flex}.brand-link{align-items:center;gap:var(--space-xs);border-radius:var(--rounded-sm);color:inherit;transition:color var(--motion-hover) var(--ease);text-decoration:none;display:inline-flex}.brand-link:hover{color:var(--body)}.brand-link[aria-current=page]{color:inherit;cursor:default}.brand-mark{width:1.05em;color:var(--primary);display:block}.brand-mark svg{width:100%;height:auto;display:block}@media (max-width:24rem){.brand-text{display:none}}.icon-button{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-md);min-height:var(--tap);border:1px solid var(--hairline);border-radius:var(--rounded-full);background:var(--canvas);color:var(--body);font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);cursor:pointer;transition:color var(--motion-hover) var(--ease), border-color var(--motion-hover) var(--ease);display:inline-flex}.icon-button svg{width:1.15em;height:1.15em}.icon-button:hover{color:var(--ink);border-color:var(--body)}.welcome{justify-content:center;gap:var(--space-lg);flex-direction:column;flex:auto;min-height:0;display:flex}.welcome-head{gap:var(--space-xs);flex-direction:column;display:flex}.welcome-title{font-size:var(--text-display-lg);line-height:var(--lh-display-lg);letter-spacing:var(--track-display-lg);margin:0;font-weight:600}.welcome-lead{max-width:34rem;font-size:var(--text-body-lg);line-height:var(--lh-body-lg);color:var(--body);margin:0}.choices{gap:var(--space-xs);flex-direction:column;display:flex}.choice{align-items:center;gap:var(--space-md);width:100%;padding:var(--space-md);border-radius:var(--rounded-lg);background:var(--canvas);box-shadow:var(--elevation-1);color:var(--ink);text-align:left;cursor:pointer;transition:background var(--motion-hover) var(--ease), box-shadow var(--motion-hover) var(--ease);text-decoration:none;display:flex}.choice:hover{background:var(--canvas-soft-2);box-shadow:var(--elevation-2)}.choice-body{gap:var(--space-xxs);flex-direction:column;flex:1;display:flex}.choice-title{font-size:var(--text-display-sm);line-height:var(--lh-display-sm);letter-spacing:var(--track-display-sm);font-weight:600}.choice-blurb{font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);color:var(--body)}.choice[data-emphasis=quiet]{padding:var(--space-sm) var(--space-md)}.choice[data-emphasis=quiet] .choice-title{font-size:var(--text-body-md);line-height:var(--lh-body-md);letter-spacing:0;font-weight:500}.choice kbd{flex:none}.welcome-note{margin:0}@media (pointer:coarse),(max-width:30rem){.choice kbd{display:none}}.scoreboard{gap:var(--space-xs);flex-direction:column;display:flex}.progress{height:var(--space-xxs);border-radius:var(--rounded-full);background:var(--canvas-soft-2);overflow:hidden}.progress-fill{border-radius:inherit;background:var(--primary);width:0;height:100%;transition:width var(--motion-progress) var(--ease)}.stat-row{gap:var(--space-lg);margin:0;display:flex}.stat{align-items:baseline;gap:var(--space-xxs);display:flex}.stat dt{font-size:var(--text-caption);color:var(--body)}.stat dd{font-variant-numeric:tabular-nums;font-weight:500;font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);margin:0}.stage{flex:auto;align-items:center;min-height:0;display:flex}.card{perspective:1600px;width:100%;height:clamp(15rem,48svh,27rem);container:card/size}.card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform var(--motion-flip) var(--ease-out);position:relative}.card[data-flipped=true] .card-inner{transform:rotateY(180deg)}.card.no-anim .card-inner{transition:none}.card-face{justify-content:center;align-items:center;gap:var(--space-md);padding:var(--space-lg);border:1px solid var(--hairline);border-radius:var(--rounded-lg);background:var(--canvas);box-shadow:var(--elevation-3);backface-visibility:hidden;flex-direction:column;display:flex;position:absolute;inset:0;overflow:hidden}.card-back{transform:rotateY(180deg)}.card-face>*{flex:none}.face-text{justify-content:center;align-items:center;gap:var(--space-xs);flex-direction:column;min-width:0;display:flex}.face-media{width:100%;min-height:var(--space-4xl);flex:auto;justify-content:center;align-items:center;min-width:0;display:flex}.staves{justify-content:center;align-items:flex-start;gap:var(--space-xs);flex-direction:column;width:100%;height:100%;display:flex}.staves .staff-wrap{min-height:0;width:var(--share);gap:var(--space-xxs);flex-direction:column;flex:0 auto;max-width:100%;max-height:100%;margin:0;display:flex}.staves .staff{flex:0 auto;width:100%;height:auto;min-height:0}.staves figcaption{font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--body);flex:none}@container card (width>=30rem){.staves{align-items:center;gap:var(--space-lg);flex-direction:row}.staves .staff-wrap{flex-basis:0;flex-grow:var(--grow);width:auto}}.card-eyebrow{font-size:var(--text-body-md);line-height:var(--lh-body-md);color:var(--body);margin:0}.acc{margin-inline:.06em .02em}.acc-glyph{width:auto;display:inline-block}.acc-sharp{vertical-align:-.09em;height:.74em}.acc-flat{vertical-align:.05em;height:.82em}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tonality{font-family:var(--font-sans);text-align:center;font-weight:600;line-height:1.1;font-size:clamp(var(--text-display-md), 12vw, var(--text-display-xl));letter-spacing:var(--track-display-xl);margin:0}.tonality--answer{font-size:clamp(var(--text-display-sm), 8vw, var(--text-display-lg));letter-spacing:var(--track-display-lg)}.tonality-sub{font-family:var(--font-sans);font-size:var(--text-display-sm);line-height:var(--lh-display-sm);letter-spacing:var(--track-display-sm);text-align:center;margin:0}.mode-chip{padding:var(--space-xs) var(--space-lg);border-radius:var(--rounded-full);background:var(--canvas-soft);box-shadow:var(--elevation-1);color:var(--body);font-size:var(--text-display-sm);line-height:var(--lh-display-sm);letter-spacing:var(--track-display-sm)}.staff-wrap{justify-content:center;width:100%;max-width:26rem;height:100%;display:flex}.staff{width:100%;height:100%;color:var(--ink);display:block}.signature-label{font-size:var(--text-body-md);color:var(--body);text-align:center;margin:0}.scale-notes{justify-content:center;gap:var(--space-xxs);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.scale-notes li{min-width:var(--space-xl);padding:var(--space-xxs) var(--space-sm);border-radius:var(--rounded-full);background:var(--canvas-soft);box-shadow:var(--elevation-1);color:var(--body);font-size:var(--text-body-md);line-height:var(--lh-body-md);text-align:center}.scale-notes li:first-child{background:var(--primary);color:var(--on-primary);box-shadow:none;font-weight:500}.play{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-lg);min-height:var(--tap);border:1px solid var(--hairline);border-radius:var(--rounded-full);background:var(--canvas);cursor:pointer;font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);transition:border-color var(--motion-hover) var(--ease), color var(--motion-hover) var(--ease);display:inline-flex}.play:hover{border-color:var(--primary)}.play svg{width:1.1em;height:1.1em}.play[data-state=playing]{border-color:var(--primary)}.play[data-state=playing] .play-icon{animation:pulse 1s var(--ease) infinite}.play[data-state=loading]{color:var(--body)}@keyframes pulse{50%{opacity:.35}}@container card (height<=21rem){.scale-notes{display:none}}@container card (width<=30rem){.scale-notes{display:none}}@container card (width<=30rem) and (height<=20rem){.staves .staff-wrap--signature,.staves figcaption{display:none}}@container card (height<=17rem){.card-eyebrow{display:none}.card-face{gap:var(--space-xs)}}.controls{gap:var(--space-xs);flex-direction:column;display:flex}.btn{justify-content:center;align-items:center;gap:var(--space-xs);width:100%;min-height:var(--space-3xl);padding:0 var(--space-sm);border-radius:var(--rounded-sm);font-size:var(--text-body-md);line-height:var(--lh-body-md);cursor:pointer;transition:background var(--motion-hover) var(--ease), box-shadow var(--motion-hover) var(--ease);border:0;font-weight:500;display:inline-flex}.btn kbd{box-shadow:none;color:var(--body);background:0 0}.btn-primary{background:var(--primary);color:var(--on-primary)}.btn-primary:hover{background:var(--body)}.btn-again,.btn-good{background:var(--canvas);box-shadow:var(--elevation-1)}.btn-again{color:var(--error-deep)}.btn-good{color:var(--link-deep)}.btn-again:hover,.btn-good:hover{background:var(--canvas-soft-2);box-shadow:var(--elevation-2)}.grade-row{gap:var(--space-xs);grid-template-columns:1fr 1fr;display:grid}.shortcuts{text-align:center;font-size:var(--text-caption);color:var(--body);margin:0}.shortcuts .dot{margin:0 var(--space-xs)}@media (pointer:coarse),(max-width:30rem){.shortcuts,.btn kbd{display:none}}.summary{align-items:center;gap:var(--space-xs);padding:var(--space-lg);border:1px solid var(--hairline);border-radius:var(--rounded-lg);background:var(--canvas);text-align:center;animation:summary-in var(--motion-progress) var(--ease-out) both;flex-direction:column;margin-block:auto;display:flex;position:relative;overflow:hidden}@keyframes summary-in{0%{opacity:0;transform:translateY(10px)scale(.985)}}.summary-title{font-size:var(--text-body-md);line-height:var(--lh-body-md);color:var(--body);margin:0;font-weight:500}.summary-time{font-weight:600;font-size:clamp(var(--text-display-lg), 11vw, var(--text-display-xl));letter-spacing:var(--track-display-xl);font-variant-numeric:tabular-nums;margin:0;line-height:1.1;position:relative}.time-unit{letter-spacing:0;color:var(--body);font-size:.46em;font-weight:500}.summary-flag{margin:var(--space-xxs) 0 0;padding:var(--space-xxs) var(--space-sm);border-radius:var(--rounded-full);font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);animation:flag-in var(--motion-control) var(--ease-out) .24s both;font-weight:500;position:relative;overflow:hidden}@keyframes flag-in{0%{opacity:0;transform:translateY(4px)scale(.94)}}.summary-flag[data-tone=best]{background:var(--primary);color:var(--on-primary)}.summary-flag[data-tone=neutral]{background:var(--canvas-soft);box-shadow:var(--elevation-1);color:var(--body)}.summary-flag[data-tone=quiet]{color:var(--body)}.summary-flag[data-tone=best]:after{content:"";background:linear-gradient(100deg, transparent 24%, color-mix(in srgb, var(--on-primary) 30%, transparent) 50%, transparent 76%);animation:sheen .9s var(--ease) .52s both;position:absolute;inset:0}@keyframes sheen{0%{transform:translate(-110%)}to{transform:translate(110%)}}.summary-detail{font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);color:var(--body);margin:0}.summary .btn{margin-top:var(--space-md)}.burst{pointer-events:none;z-index:-1;width:0;height:0;position:absolute;top:50%;left:50%}.spark{color:var(--ink);animation:spark-out 1s var(--ease-out) var(--delay) both;position:absolute;top:0;left:0}.spark[data-tone=accent]{color:var(--link-deep)}.spark[data-tone=quiet]{color:var(--hairline-strong)}.spark svg{height:var(--size);width:auto;display:block}@keyframes spark-out{0%{transform:translate(-50%, -50%) rotate(var(--angle)) translateY(0) rotate(0deg) scale(.5);opacity:0}15%,55%{opacity:1}to{transform:translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--distance))) rotate(var(--spin)) scale(1);opacity:0}}.ring{border:1px solid var(--hairline-strong);border-radius:var(--rounded-full);width:88px;height:88px;animation:ring-out .8s var(--ease-out) var(--delay) both;position:absolute;top:0;left:0}@keyframes ring-out{0%{opacity:.85;transform:translate(-50%,-50%)scale(.3)}to{opacity:0;transform:translate(-50%,-50%)scale(2.6)}}.board{margin-top:var(--space-sm);padding-top:var(--space-md);border-top:1px solid var(--hairline);text-align:left;flex-direction:column;align-self:stretch;display:flex}.board-head{align-items:baseline;gap:var(--space-xxs) var(--space-sm);margin-bottom:var(--space-xs);flex-wrap:wrap;display:flex}.board-title{font-size:var(--text-body-md);line-height:var(--lh-body-md);margin:0;font-weight:500}.board-scope{font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--body);flex:12rem;margin:0}.board-list{border-bottom:1px solid var(--hairline);margin:0;padding:0;list-style:none}.board-row{align-items:baseline;gap:var(--space-sm);padding:var(--space-xs);border-top:1px solid var(--hairline);font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);animation:row-in var(--motion-control) var(--ease-out) calc(var(--row) * 40ms + .3s) both;display:flex}.board-row:first-child{border-top:0}@keyframes row-in{0%{opacity:0;transform:translateY(6px)}}.board-rank{width:1.6em;color:var(--body);font-variant-numeric:tabular-nums;flex:none}.board-time{font-variant-numeric:tabular-nums;font-weight:500}.board-when{padding-left:var(--space-xs);color:var(--body);font-size:var(--text-caption);line-height:var(--lh-caption);text-align:right;margin-left:auto}.board-tag{padding:0 var(--space-xs);border-radius:var(--rounded-full);background:var(--canvas-soft-2);color:var(--body);font-size:var(--text-caption);line-height:var(--lh-caption)}.board-row[data-current=true]{box-shadow:inset 2px 0 0 var(--primary);animation:row-in var(--motion-control) var(--ease-out) calc(var(--row) * 40ms + .3s) both, row-lit 1.4s var(--ease) calc(var(--row) * 40ms + .38s) both}.board-row[data-current=true] .board-time{color:var(--ink);font-weight:600}@keyframes row-lit{0%,25%{background:var(--canvas-soft-2)}to{background:0 0}}.board-note{text-align:left}.sheet{width:min(100% - var(--space-xl), 34rem);border:1px solid var(--hairline);border-radius:var(--rounded-lg);background:var(--canvas);max-height:min(90svh,46rem);color:var(--ink);box-shadow:var(--elevation-5);padding:0;overflow:hidden}.sheet::backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#17171773}.sheet-inner{flex-direction:column;max-height:min(90svh,46rem);display:flex}.sheet-body{gap:var(--space-lg);padding:0 var(--space-lg) var(--space-lg);flex-direction:column;flex:1;display:flex;overflow-y:auto}.sheet-head{padding:var(--space-lg) var(--space-lg) var(--space-md);justify-content:space-between;align-items:center;display:flex}.sheet-head h2{font-family:var(--font-sans);font-size:var(--text-display-sm);margin:0}.sheet-head .icon-button{padding:var(--space-xs)}.field{border:0;margin:0;padding:0}.field legend{margin-bottom:var(--space-xs);font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--body);padding:0}.field-note{margin:var(--space-xs) 0 0;font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);color:var(--body)}.segmented label,.chips label,.switch{position:relative}.segmented{gap:var(--space-xxs);padding:var(--space-xxs);border-radius:var(--rounded-sm);background:var(--canvas-soft);grid-template-columns:1fr;display:grid}@media (min-width:30rem){.segmented{grid-template-columns:repeat(3,1fr)}}.segmented--compact{grid-template-columns:repeat(3,1fr)}.segmented label{min-height:var(--tap);padding:var(--space-xxs) var(--space-xs);border-radius:var(--rounded-xs);font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);text-align:center;cursor:pointer;transition:background var(--motion-control) var(--ease), color var(--motion-control) var(--ease);justify-content:center;align-items:center;display:flex}.segmented input{opacity:0;pointer-events:none;position:absolute}.segmented label:has(input:checked){background:var(--canvas-soft-2);color:var(--ink);box-shadow:var(--elevation-1);font-weight:600}.segmented label:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}.chips{gap:var(--space-xs);flex-wrap:wrap;display:flex}.chips label{align-items:center;gap:var(--space-xxs);min-height:var(--tap);padding:var(--space-xxs) var(--space-md);border:1px solid var(--hairline);border-radius:var(--rounded-full);font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);cursor:pointer;transition:background var(--motion-control) var(--ease), border-color var(--motion-control) var(--ease), color var(--motion-control) var(--ease);display:inline-flex}.chips input{opacity:0;pointer-events:none;position:absolute}.chips label:has(input:checked){background:var(--primary);color:var(--on-primary);box-shadow:none;font-weight:500}.chips label:has(input:focus-visible){outline:2px solid var(--primary);outline-offset:2px}.chips small{color:var(--body);font-weight:400}.chips label:has(input:checked) small{color:var(--hairline-strong)}.chips--grid{gap:var(--space-xs);grid-template-columns:repeat(auto-fill,minmax(3.5rem,1fr));display:grid}.chips--grid label{padding-inline:var(--space-xs);justify-content:center}.chips--grid label:not(:has(input:checked)){border-style:dashed;border-color:var(--hairline-strong);color:var(--body)}.key-groups{gap:var(--space-md);flex-direction:column;display:flex}.key-group-head{align-items:center;gap:var(--space-xs);margin-bottom:var(--space-xs);display:flex}.key-group-title{font-size:var(--text-body-sm);line-height:var(--lh-body-sm);letter-spacing:var(--track-body-sm);font-weight:600}.key-count{font-size:var(--text-caption);line-height:var(--lh-caption);color:var(--body);flex:1}.key-bulk{min-height:var(--space-xl);padding:0 var(--space-xs);border-radius:var(--rounded-xs);color:var(--ink);font:inherit;font-size:var(--text-caption);cursor:pointer;transition:background var(--motion-hover) var(--ease);background:0 0;border:0;flex:none;font-weight:500}.key-bulk:hover{background:var(--canvas-soft-2)}.field-note--lead{margin:0 0 var(--space-sm)}.switch{align-items:center;gap:var(--space-xs);margin-top:var(--space-md);cursor:pointer;display:flex}.switch input{opacity:0;pointer-events:none;position:absolute}.switch-track{width:var(--space-3xl);height:var(--space-lg);border-radius:var(--rounded-full);background:var(--canvas-soft-2);border:1px solid var(--hairline);transition:background var(--motion-control) var(--ease), border-color var(--motion-control) var(--ease);flex:none;position:relative}.switch-thumb{top:50%;left:calc((var(--space-lg) - var(--space-lg)) / 2);width:var(--space-lg);height:var(--space-lg);background:var(--body);transition:transform var(--motion-control) var(--ease), background var(--motion-control) var(--ease);border-radius:50%;position:absolute;transform:translateY(-50%)}.switch:has(input:checked) .switch-track{background:var(--primary);box-shadow:none}.switch:has(input:checked) .switch-thumb{transform:translate(var(--space-lg), -50%);background:var(--primary)}.switch:has(input:focus-visible) .switch-track{outline:2px solid var(--primary);outline-offset:2px}.switch-label{font-size:var(--text-body-md)}.switch-label small{font-size:var(--text-caption);color:var(--body);display:block}.slider-label{margin-bottom:var(--space-xs);font-size:var(--text-body-md);display:block}input[type=range]{width:100%;accent-color:var(--primary);height:var(--tap);background:0 0}.sheet-foot{padding:var(--space-md) var(--space-lg) calc(var(--space-lg) + env(safe-area-inset-bottom));border-top:1px solid var(--hairline);background:var(--canvas)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@media (max-height:34rem){.card-eyebrow,.shortcuts,.scale-notes{display:none}.welcome{gap:var(--space-md)}.welcome-title{font-size:var(--text-display-md);line-height:var(--lh-display-md);letter-spacing:var(--track-display-md)}.welcome-lead,.choice-blurb{display:none}.card-face{gap:var(--space-xs);padding:var(--space-md)}.app{gap:var(--space-xs)}.tonality{font-size:clamp(var(--text-display-sm), 5vw, var(--text-display-md))}}@media (max-height:30rem){.stat-row{display:none}.app{padding-top:var(--space-xs);gap:var(--space-xs)}.card{height:clamp(11rem,58svh,27rem)}.brand{font-size:var(--text-body-md)}.icon-button,.btn{min-height:var(--space-xl)}}@media (max-height:34rem) and (min-width:34rem){.card-face{gap:var(--space-lg);flex-direction:row}.face-media{flex:auto;height:100%}.face-text{flex:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}