:root{--p-neutral-0: #ffffff;--p-neutral-50: #f7f7f7;--p-neutral-100: #efefef;--p-neutral-150: #e6e6e6;--p-neutral-200: #d9d9d9;--p-neutral-300: #c4c4c4;--p-neutral-400: #a3a3a3;--p-neutral-500: #8d8d8d;--p-neutral-600: #6d6d6d;--p-neutral-700: #4a4a4a;--p-neutral-800: #333333;--p-neutral-850: #2a2a2a;--p-neutral-900: #222222;--p-neutral-925: #1c1c1c;--p-neutral-950: #141414;--p-neutral-1000: #000000;--p-red-400: #ff6b6b;--p-red-600: #d93f3f;--p-frost-light: #e4e4e4cc;--p-frost-dark: #262626cc;--chord-C-maj: oklch(.77 .13 25);--chord-G-maj: oklch(.77 .13 55);--chord-D-maj: oklch(.77 .13 85);--chord-A-maj: oklch(.77 .13 115);--chord-E-maj: oklch(.77 .13 145);--chord-B-maj: oklch(.77 .13 175);--chord-Fs-maj: oklch(.77 .13 205);--chord-Cs-maj: oklch(.77 .13 235);--chord-Ab-maj: oklch(.77 .13 265);--chord-Eb-maj: oklch(.77 .13 295);--chord-Bb-maj: oklch(.77 .13 325);--chord-F-maj: oklch(.77 .13 355);--chord-C-min: oklch(.66 .13 25);--chord-G-min: oklch(.66 .13 55);--chord-D-min: oklch(.66 .13 85);--chord-A-min: oklch(.66 .13 115);--chord-E-min: oklch(.66 .13 145);--chord-B-min: oklch(.66 .13 175);--chord-Fs-min: oklch(.66 .13 205);--chord-Cs-min: oklch(.66 .13 235);--chord-Ab-min: oklch(.66 .13 265);--chord-Eb-min: oklch(.66 .13 295);--chord-Bb-min: oklch(.66 .13 325);--chord-F-min: oklch(.66 .13 355);--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-32: 32px;--space-40: 40px;--space-48: 48px;--space-64: 64px;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-full: 999px;--layout-margin: 28px;--size-touch: 44px;--size-icon: 24px;--font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;--font-label: "Inter", system-ui, -apple-system, sans-serif;--serif-opsz: "opsz" 20;--elevation-disc: 0 12px 44px #00000024, 0 2px 6px #0000000f;--elevation-knob: 0 2px 10px #00000038;--elevation-float: 0 8px 28px #00000029;--blur-frosted: blur(12px);--motion-press: .1s;--motion-fade: .2s;--motion-sheet: .25s}:root{--color-bg-app: var(--p-neutral-50);--color-bg-surface: var(--p-neutral-0);--color-bg-raised: var(--p-neutral-0);--color-bg-pressed: var(--p-neutral-150);--color-bg-hover: var(--p-neutral-100);--color-bg-frosted: var(--p-frost-light);--color-bg-inverse: var(--p-neutral-900);--color-bg-inverse-pressed: var(--p-neutral-700);--color-text-primary: var(--p-neutral-900);--color-text-hover: var(--p-neutral-1000);--color-text-secondary: var(--p-neutral-600);--color-text-tertiary: var(--p-neutral-500);--color-text-inverse: var(--p-neutral-50);--color-text-on-chord: var(--p-neutral-900);--color-icon-primary: var(--p-neutral-900);--color-icon-inverse: var(--p-neutral-50);--color-line-subtle: var(--p-neutral-300);--color-line-strong: var(--p-neutral-900);--color-indicator-off: var(--p-neutral-200);--color-indicator-on: var(--p-neutral-900);--color-signal-error: var(--p-red-600);--color-signal-trace: var(--p-neutral-900);--color-signal-orbit: var(--p-neutral-0);--hairline-frosted: #ffffffb2;color-scheme:light}:root[data-theme=dark]{--color-bg-app: var(--p-neutral-950);--color-bg-surface: var(--p-neutral-925);--color-bg-raised: var(--p-neutral-850);--color-bg-pressed: var(--p-neutral-800);--color-bg-hover: var(--p-neutral-850);--color-bg-frosted: var(--p-frost-dark);--color-bg-inverse: var(--p-neutral-50);--color-bg-inverse-pressed: var(--p-neutral-300);--color-text-primary: var(--p-neutral-50);--color-text-hover: var(--p-neutral-0);--color-text-secondary: var(--p-neutral-400);--color-text-tertiary: var(--p-neutral-600);--color-text-inverse: var(--p-neutral-900);--color-text-on-chord: var(--p-neutral-900);--color-icon-primary: var(--p-neutral-50);--color-icon-inverse: var(--p-neutral-900);--color-line-subtle: var(--p-neutral-700);--color-line-strong: var(--p-neutral-50);--color-indicator-off: var(--p-neutral-700);--color-indicator-on: var(--p-neutral-50);--color-signal-error: var(--p-red-400);--color-signal-trace: var(--p-neutral-50);--color-signal-orbit: var(--p-neutral-0);color-scheme:dark}@media (prefers-color-scheme: dark){:root[data-theme=auto]{--color-bg-app: var(--p-neutral-950);--color-bg-surface: var(--p-neutral-925);--color-bg-raised: var(--p-neutral-850);--color-bg-pressed: var(--p-neutral-800);--color-bg-hover: var(--p-neutral-850);--color-bg-frosted: var(--p-frost-dark);--color-bg-inverse: var(--p-neutral-50);--color-bg-inverse-pressed: var(--p-neutral-300);--color-text-primary: var(--p-neutral-50);--color-text-hover: var(--p-neutral-0);--color-text-secondary: var(--p-neutral-400);--color-text-tertiary: var(--p-neutral-600);--color-text-inverse: var(--p-neutral-900);--color-text-on-chord: var(--p-neutral-900);--color-icon-primary: var(--p-neutral-50);--color-icon-inverse: var(--p-neutral-900);--color-line-subtle: var(--p-neutral-700);--color-line-strong: var(--p-neutral-50);--color-indicator-off: var(--p-neutral-700);--color-indicator-on: var(--p-neutral-50);--color-signal-error: var(--p-red-400);--color-signal-trace: var(--p-neutral-50);--color-signal-orbit: var(--p-neutral-0);color-scheme:dark}}.t-wordmark,.t-display-xl,.t-display-l,.t-title-l,.t-title-m,.t-title-s,.t-heading,.t-body-l,.t-body-m{font-family:var(--font-serif);font-weight:400;font-optical-sizing:none;font-variation-settings:var(--serif-opsz)}.t-wordmark{font-size:96px;line-height:.9;font-weight:700}.t-display-xl{font-size:96px;line-height:.9}.t-display-l{font-size:56px;line-height:1.05;letter-spacing:-.01em}.t-title-l{font-size:40px;line-height:1.1;letter-spacing:-.005em}.t-title-m{font-size:34px;line-height:1.15}.t-title-s{font-size:26px;line-height:1.2}.t-heading{font-size:21px;line-height:1.25}.t-body-l{font-size:17px;line-height:1.5}.t-body-m{font-size:15px;line-height:1.4}.t-label-m,.t-label-s{font-family:var(--font-label);font-variation-settings:normal;text-transform:uppercase;line-height:1.2}.t-label-m{font-size:13px;font-weight:400;letter-spacing:.3em}.t-label-s{font-size:11px;font-weight:500;letter-spacing:.2em}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{margin:0;background:var(--color-bg-app);color:var(--color-text-primary);font-family:var(--font-serif);font-optical-sizing:none;font-variation-settings:var(--serif-opsz);font-size:15px;line-height:1.4;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;transition:background-color var(--motion-fade)}button,select,input,output{font:inherit;color:inherit}button{cursor:pointer}h1,h2,h3,p{margin:0;font-weight:inherit}.secondary{color:var(--color-text-secondary)}button:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.icon{display:block;flex:none}.icon-btn{position:relative;display:grid;place-items:center;width:var(--size-touch);height:var(--size-touch);padding:0;border:0;border-radius:var(--radius-full);background:transparent;color:var(--color-icon-primary);transition:background-color var(--motion-press)}@media (hover: hover){.icon-btn:hover:not(:disabled){background:var(--color-bg-hover)}}.icon-btn:active{background:var(--color-bg-pressed)}.icon-btn:disabled{opacity:.35;cursor:default}.app{position:relative;height:100vh;height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);display:flex;flex-direction:column;align-items:center;overflow:hidden;-webkit-user-select:none;user-select:none}.fades{transition:opacity var(--motion-fade) ease-out}.app[data-screen=recording] .fades,.app[data-screen=playing] .wordmark,.app[data-screen=playing] .cross,.app[data-screen=playing] .value{opacity:0;pointer-events:none}.top{flex:none;padding-top:clamp(8px,3.82dvh,30px)}.wordmark{display:flex;flex-direction:column;align-items:center;font-size:min(96px,max(56px,12.2dvh));line-height:.9;white-space:nowrap;color:var(--color-text-primary)}.wordmark-sing{display:block;font-weight:700;margin-bottom:-.0625em}.wordmark-thing{display:block;font-weight:400}.wordmark-s{font-size:48px;align-self:flex-start}.wordmark-s .wordmark-sing{margin-bottom:-.0625em}.status{position:absolute;top:calc(env(safe-area-inset-top) + 66px);left:0;right:0;text-align:center;color:var(--color-text-secondary);opacity:0;transition:opacity var(--motion-fade)}.app[data-screen=recording] .status{opacity:1}.spacer{min-height:0}.spacer-a{flex:140 1 0}.spacer-b{flex:42 1 0}.scene{position:relative;flex:none;width:340px;height:340px;transition:transform .35s cubic-bezier(.2,.7,.2,1)}.app[data-screen=playing] .scene{transform:translateY(calc(-1 * var(--playroom-lift, 38px)))}.cross{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.cross:before,.cross:after{content:"";position:absolute;background:var(--color-line-subtle)}.cross:before{left:169.5px;top:14px;width:1px;height:312px}.cross:after{top:169.5px;left:14px;height:1px;width:312px}.value{position:absolute;width:132px;height:88px;padding:0;border:0;border-radius:20px;background:transparent;color:var(--color-text-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);text-align:center;white-space:nowrap;transition:background-color var(--motion-press),opacity var(--motion-fade) ease-out}.value:active{background:var(--color-bg-pressed)}.value:disabled{cursor:default}.value-tl{left:4px;top:22px}.value-tr{left:204px;top:22px}.value-bl{left:4px;top:230px}.value-br{left:204px;top:230px}.value-label{color:var(--color-text-secondary)}.value[aria-expanded=true] .value-label{color:var(--color-text-primary)}.value[aria-expanded=true]:after{content:"";position:absolute;left:54px;top:72.5px;width:24px;height:2px;background:var(--color-line-strong)}.orbit{position:absolute;top:0;right:0;bottom:0;left:0;width:340px;height:340px;opacity:0;transition:opacity var(--motion-fade);pointer-events:none}.app[data-screen=recording] .orbit{opacity:1}.centre{position:absolute;left:94px;top:94px;width:152px;height:152px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--color-icon-primary);touch-action:manipulation;z-index:2}.centre:focus-visible{outline-offset:-8px}.centre-ring{position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:50%;border:2px solid var(--color-line-strong);opacity:0;transform:scale(var(--ring, .84));transition:opacity var(--motion-fade)}.centre[data-state=ready] .centre-ring{opacity:.35}.centre-face{position:absolute;top:12px;right:12px;bottom:12px;left:12px;border-radius:50%;background:var(--color-bg-raised);box-shadow:var(--elevation-disc);transition:transform var(--motion-press) ease-out,box-shadow var(--motion-fade),background-color var(--motion-fade),opacity .3s}.centre:active .centre-face{transform:scale(.96)}.centre[data-state=blocked] .centre-face{box-shadow:inset 0 0 0 1.5px var(--color-signal-error),var(--elevation-disc)}.glyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .15s;pointer-events:none}.centre[data-state=ready] .glyph-record,.centre[data-state=recording] .glyph-record,.centre[data-state=asking] .glyph-mic,.centre[data-state=blocked] .glyph-micoff,.centre[data-state=count-in] .glyph-count,.centre[data-state=listening] .glyph-spinner,.centre[data-state=paused] .glyph-play,.centre[data-state=playing] .glyph-pause{opacity:1}.glyph-record{width:56px;height:56px;border-radius:50%;background:var(--color-icon-primary);transition:opacity .15s,transform var(--motion-fade) ease-out}.centre[data-state=recording] .glyph-record{transform:translate(-50%,-50%) scale(calc(48 / 56))}.glyph-micoff{color:var(--color-signal-error)}.glyph-count{color:var(--color-text-primary);font-variant-numeric:lining-nums}.glyph-spinner{width:48px;height:48px}.glyph-spinner svg{display:block;transform:rotate(-90deg)}.centre[data-state=listening] .glyph-spinner svg{animation:spin 1s linear infinite}.glyph-play{margin-left:3px}@keyframes spin{0%{transform:rotate(-90deg)}to{transform:rotate(270deg)}}.playroom{position:absolute;top:env(safe-area-inset-top);left:env(safe-area-inset-left);right:env(safe-area-inset-right);height:300px;opacity:0;pointer-events:none;transition:opacity var(--motion-fade) ease-out}.app[data-screen=playing] .playroom{opacity:1}.app[data-screen=playing] .playroom>*{pointer-events:auto}.band-line,.mood-line{position:absolute;left:56px;right:56px;display:flex;justify-content:center;color:var(--color-text-primary);white-space:nowrap;touch-action:pan-y;cursor:pointer;outline:none}.band-line{top:38px;height:59px}.mood-line{top:340px;left:0;right:0;height:31px;opacity:0;pointer-events:none;transition:opacity var(--motion-fade) ease-out}.app[data-screen=playing] .mood-line{opacity:1;pointer-events:auto}.mood-reset{position:absolute;top:372px;left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:var(--space-4);height:40px;padding:0 var(--space-12);border:0;border-radius:var(--radius-full);background:transparent;color:var(--color-text-secondary);white-space:nowrap;cursor:pointer;transition:background-color var(--motion-press),color var(--motion-press)}.app:not([data-screen=playing]) .mood-reset{visibility:hidden}@media (hover: hover){.mood-reset:hover{color:var(--color-text-hover)}}.mood-reset:active{background:var(--color-bg-pressed)}.mood-reset:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:2px}.band-line:focus-visible .swipe-words,.mood-line:focus-visible .swipe-words{outline:2px solid var(--color-line-strong);outline-offset:4px}.swipe-words{display:block;padding:0 var(--space-12);border-radius:var(--radius-full);will-change:transform;transition:background-color var(--motion-press),color var(--motion-press)}@media (hover: hover){.band-line:hover .swipe-words,.mood-line:hover .swipe-words,.band-line:active .swipe-words,.mood-line:active .swipe-words{color:var(--color-text-hover)}}@media (hover: none){.band-line:active .swipe-words,.mood-line:active .swipe-words{background:var(--color-bg-pressed)}}.swipe-words.settling{transition:transform .18s ease-out,opacity .18s ease-out}.parts{position:absolute;top:260px;left:0;right:0;height:56px;overflow:hidden;touch-action:pan-y;z-index:2}.parts-track{display:flex;align-items:flex-start;gap:var(--space-4);width:max-content;will-change:transform}.parts-track.settling{transition:transform .26s cubic-bezier(.2,.7,.2,1)}.part{flex:none;height:56px;padding:6px var(--space-8) 0;border:0;border-radius:var(--radius-full);background:transparent;display:flex;flex-direction:column;align-items:center;font-family:var(--font-serif);font-size:26px;line-height:1.2;color:var(--color-text-tertiary);white-space:nowrap;transition:background-color var(--motion-press),color var(--motion-fade)}.part-tag{height:13px;color:var(--color-text-primary);opacity:0;margin-left:.2em;transition:opacity var(--motion-fade)}.part.current{padding-top:2px;font-size:34px;line-height:1.15;color:var(--color-text-primary)}.part.next{color:var(--color-text-primary)}.part.next .part-tag{opacity:1}.part.pressed{background:var(--color-bg-pressed);color:var(--color-text-secondary)}.part-sep{flex:none;width:4px;height:4px;margin-top:32.5px;border-radius:50%;background:var(--color-text-tertiary)}.parts:not(.open){visibility:hidden}.part-rest{position:absolute;top:150px;left:0;right:0;height:56px;display:flex;justify-content:center;align-items:flex-start;gap:var(--space-16);z-index:2}.part-rest .part{cursor:pointer}.part-band{position:absolute;top:214px;left:0;right:0;height:126px;background:var(--color-bg-frosted);-webkit-backdrop-filter:var(--blur-frosted);backdrop-filter:var(--blur-frosted);border-top:1px solid var(--hairline-frosted);border-bottom:1px solid var(--hairline-frosted);z-index:1;animation:quick-in var(--motion-fade) ease-out}.part-band.closing{animation:quick-out .16s ease-in forwards}.part-band-title{position:absolute;top:18px;left:0;right:0;text-align:center;color:var(--color-text-primary)}.part-tick{position:absolute;top:118px;left:50%;width:1px;height:24px;margin-left:-.5px;background:var(--color-line-strong)}.part-hint{position:absolute;top:150px;left:0;right:0;text-align:center;color:var(--color-text-secondary);white-space:nowrap}.wheel{position:absolute;top:0;right:0;bottom:0;left:0;width:340px;height:340px;overflow:visible;opacity:0;pointer-events:none;transition:opacity .3s ease-out;-webkit-user-select:none;user-select:none}.app[data-screen=playing] .wheel{opacity:1;pointer-events:auto}.wheel-slice{cursor:pointer;transition:fill .3s,opacity var(--motion-press);outline:none}.wheel-slice:active{opacity:.85}.wheel-slice:focus-visible{stroke:var(--color-line-strong);stroke-width:2}.wheel-rim{stroke:var(--color-bg-app);stroke-width:2}.wheel-separators line{stroke:var(--color-bg-app);stroke-width:2}.wheel-name{fill:var(--color-text-on-chord);font-family:var(--font-serif);font-variation-settings:var(--serif-opsz);text-anchor:middle;dominant-baseline:central;pointer-events:none}.wheel-lock{color:var(--color-text-on-chord);pointer-events:none;overflow:visible}.playhead{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--color-signal-orbit);box-shadow:var(--elevation-knob);opacity:0;pointer-events:none;z-index:3;transition:opacity .3s}.app[data-screen=playing] .playhead{opacity:1}.settings-open{position:absolute;right:calc(env(safe-area-inset-right) + 12px);bottom:calc(env(safe-area-inset-bottom) + 8px);opacity:0;pointer-events:none;transition:opacity var(--motion-fade);z-index:14}.app[data-screen=playing] .settings-open{opacity:1;pointer-events:auto}.app[data-screen=playing] .notice{left:calc(env(safe-area-inset-left) + 12px);right:auto;width:min(318px,calc(100% - 84px));margin:0}.quick{position:absolute;left:50%;width:100vw;margin-left:-50vw;height:179px;padding:var(--layout-margin);display:flex;flex-direction:column;align-items:center;gap:var(--space-16);background:var(--color-bg-frosted);-webkit-backdrop-filter:var(--blur-frosted);backdrop-filter:var(--blur-frosted);border-top:1px solid var(--hairline-frosted);border-bottom:1px solid var(--hairline-frosted);z-index:5;animation:quick-in var(--motion-fade) ease-out}.quick[data-kind=tempo]{top:118px}.quick[data-kind=beats],.quick[data-kind=bars]{top:43px}.quick.closing{animation:quick-out .16s ease-in forwards}.quick-title{color:var(--color-text-primary);white-space:nowrap}.quick-slot{width:100%;max-width:346px}@keyframes quick-in{0%{opacity:0}to{opacity:1}}@keyframes quick-out{to{opacity:0}}.slider{--f: 0;position:relative;display:flex;flex-direction:column;gap:var(--space-4);touch-action:none;outline:none}.slider-area{position:relative;height:44px}.slider-track{position:absolute;left:14px;right:14px;top:21.5px;height:1px;background:var(--color-line-subtle)}.slider-mark{position:absolute;top:19.5px;left:calc(14px + var(--f) * (100% - 28px));width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--color-line-subtle)}.slider-knob{position:absolute;top:22px;left:calc(14px + var(--f) * (100% - 28px));width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--color-bg-raised);box-shadow:var(--elevation-knob);transition:transform var(--motion-press) ease-out}.slider.magnetic .slider-knob{transition:left .12s ease-out,transform var(--motion-press) ease-out}.slider-knob:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:calc(1.5px * 28 / 36) solid var(--color-line-strong);opacity:0;transition:opacity var(--motion-press)}.slider.dragging .slider-knob{transform:scale(calc(36 / 28))}.slider.dragging .slider-knob:after{opacity:1}.slider:focus-visible .slider-knob{outline:2px solid var(--color-line-strong);outline-offset:3px}.slider-ticks{position:relative;height:13px}.slider-tick{position:absolute;top:0;left:calc(14px + var(--f) * (100% - 28px));transform:translate(-50%);margin-left:.1em;color:var(--color-text-tertiary);line-height:13px}.slider-tick.current{color:var(--color-text-primary)}.hint{flex:none;width:300px;height:68px;text-align:center;color:var(--color-text-secondary);transition:opacity var(--motion-fade)}.hint.error{color:var(--color-signal-error)}.app:has(.notice-fold:not([hidden])) .hint{width:270px}.app.notice-open .hint{opacity:0}.notice{position:absolute;left:var(--layout-margin);right:var(--layout-margin);bottom:calc(env(safe-area-inset-bottom) + 18px);max-width:346px;min-height:58px;margin:0 auto;padding:var(--space-8) var(--space-8) var(--space-8) var(--space-12);display:flex;align-items:center;gap:10px;border-radius:26px;background:var(--color-bg-inverse);color:var(--color-text-inverse);box-shadow:var(--elevation-float);transform-origin:22px 50%;z-index:15}.notice.shown{animation:notice-in var(--motion-fade) ease-out}.notice.folding{animation:notice-fold .22s ease-in forwards}.notice-icon{color:var(--color-icon-inverse);flex:none}.notice-text{flex:1 1 auto;min-width:0;padding:var(--space-2) 0}.notice-undo{flex:none;height:40px;padding:0 10.5px;border:0;border-radius:20px;background:transparent;color:var(--color-text-inverse)}.notice-undo:active{background:var(--color-bg-inverse-pressed)}.notice-fold{position:absolute;left:calc(env(safe-area-inset-left) + 12px);bottom:calc(env(safe-area-inset-bottom) + 8px);z-index:14}.notice-dot{position:absolute;left:30px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--color-indicator-on)}@keyframes notice-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes notice-fold{to{opacity:0;transform:scale(.15,.75)}}.menu-open{position:absolute;top:calc(env(safe-area-inset-top) + 4px);left:calc(env(safe-area-inset-left) + 12px);z-index:12}.menu{position:absolute;top:calc(env(safe-area-inset-top) + 52px);left:calc(env(safe-area-inset-left) + 12px);width:256px;padding:var(--space-8);display:flex;flex-direction:column;border-radius:var(--radius-md);background:var(--color-bg-raised);box-shadow:var(--elevation-float);z-index:20;transform-origin:22px 0;animation:menu-in .16s ease-out}.menu-item{display:flex;align-items:center;gap:14px;width:100%;height:52px;padding:0 var(--space-16);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-primary);text-align:left;transition:background-color var(--motion-press)}.menu-item:active{background:var(--color-bg-pressed)}.menu-item:disabled{opacity:.4;cursor:default}.menu-item:disabled:active{background:transparent}.menu-item .t-heading{flex:1 1 auto}.menu-tag{color:var(--color-text-secondary)}.menu-divider{height:1px;margin:var(--space-4) 0;background:var(--color-line-subtle)}@keyframes menu-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}.app[data-screen=splash] .wordmark{transform:translateY(var(--splash-shift, 216px))}.app[data-screen=splash] .fades:not(.wordmark),.app[data-screen=splash] .centre-ring,.app[data-screen=splash] .hint{opacity:0;transition:none}.app[data-screen=splash] .centre-face{background-color:transparent;box-shadow:none;transition:none}.app[data-screen=splash] .glyph{opacity:0;transition:none}.app[data-screen=splash] .glyph-record{opacity:1}.app.leaving-splash .wordmark{transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity var(--motion-fade)}.app.leaving-splash .fades:not(.wordmark),.app.leaving-splash .hint{transition:opacity .35s ease-out .25s}.app.leaving-splash .centre-face{transition:background-color .35s ease-out .25s,box-shadow .35s ease-out .25s}.sheet{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;max-width:100%;height:100%;max-height:100%;margin:0;padding:0;border:0;background:var(--color-bg-surface);color:var(--color-text-primary);overflow:hidden}.sheet[open]{display:flex;flex-direction:column;animation:sheet-up var(--motion-sheet) cubic-bezier(.2,.7,.2,1)}.sheet.closing{animation:sheet-down .2s ease-in forwards}.sheet::backdrop{background:transparent}.sheet-bar{flex:none;height:calc(60px + env(safe-area-inset-top));padding:env(safe-area-inset-top) var(--space-16) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);background:var(--color-bg-surface);transition:box-shadow var(--motion-fade)}.sheet-spacer{width:var(--size-touch);height:var(--size-touch);flex:none}.sheet-chapter{opacity:0;transition:opacity var(--motion-fade)}.sheet.scrolled .sheet-chapter{opacity:1}.sheet.scrolled .sheet-bar{box-shadow:0 1px 0 var(--color-line-subtle)}.sheet-body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 max(var(--layout-margin),calc((100% - 346px)/2)) calc(var(--space-48) + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:var(--space-32);-webkit-user-select:text;user-select:text}.sheet-part{top:auto;height:auto;max-height:72dvh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--elevation-float);z-index:30}.sheet-part .sheet-bar{height:60px;padding:0 var(--space-8) 0 var(--layout-margin);border-radius:var(--radius-lg) var(--radius-lg) 0 0}.sheet-part .sheet-body{gap:var(--space-16);padding-bottom:calc(var(--space-24) + env(safe-area-inset-bottom))}@keyframes sheet-up{0%{transform:translateY(100%)}to{transform:none}}@keyframes sheet-down{to{transform:translateY(100%)}}@media (min-width: 900px){.sheet.side,.sheet-part.side{inset:0 0 0 auto;width:400px;max-width:400px;height:100%;max-height:100%;border-radius:0;box-shadow:-1px 0 0 var(--color-line-subtle),var(--elevation-float);z-index:30}.sheet.side[open]{animation:panel-in var(--motion-sheet) cubic-bezier(.2,.7,.2,1)}.sheet.side.closing{animation:panel-out .2s ease-in forwards}.sheet-part.side .sheet-bar{border-radius:0}.sheet.side .sheet-body{padding-left:var(--layout-margin);padding-right:var(--layout-margin)}.sheet.side .card-bar,.sheet.side .carousel{margin:0 calc(-1 * var(--layout-margin));padding-left:var(--layout-margin);padding-right:var(--layout-margin);scroll-padding-inline:var(--layout-margin)}.app>.top,.app>.status,.app>.playroom,.app>.hint{transition:opacity var(--motion-fade) ease-out,translate .3s cubic-bezier(.2,.7,.2,1)}.app>.scene{transition:transform .35s cubic-bezier(.2,.7,.2,1),translate .3s cubic-bezier(.2,.7,.2,1)}html:has(.sheet.side[open]:not(.closing)) :is(.app>.top,.app>.status,.app>.playroom,.app>.scene,.app>.hint){translate:min(0px,calc(50vw - 625px)) 0}}@keyframes panel-in{0%{transform:translate(100%)}to{transform:none}}@keyframes panel-out{to{transform:translate(100%)}}.section-header{color:var(--color-text-primary)}.about-group{display:flex;flex-direction:column;gap:var(--space-12)}.about-item{display:flex;flex-direction:column;gap:var(--space-2)}.group{display:flex;flex-direction:column;gap:var(--space-12)}.lab-head{display:flex;flex-direction:column;gap:var(--space-8)}.field-label{color:var(--color-text-secondary);margin-top:var(--space-4)}.field-row{display:flex;gap:var(--space-8);align-items:center}.field-row>*{flex:1 1 0;min-width:0}.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-8)}.tabs{display:flex;gap:var(--space-24)}.tab,.seg button{position:relative;height:44px;padding:0;border:0;background:transparent;color:var(--color-text-tertiary);font-family:var(--font-label);font-variation-settings:normal;font-size:13px;letter-spacing:.3em;text-transform:uppercase;white-space:nowrap}.tab:after,.seg button:after{content:"";position:absolute;left:0;right:.3em;bottom:0;height:2px;background:transparent}.tab:active,.seg button:active{color:var(--color-text-secondary)}.tab:active:after,.seg button:active:after{background:var(--color-line-subtle)}.tab[aria-pressed=true],.seg button[aria-pressed=true]{color:var(--color-text-primary)}.tab[aria-pressed=true]:after,.seg button[aria-pressed=true]:after{background:var(--color-line-strong)}.seg{display:flex;flex-wrap:wrap;column-gap:var(--space-20)}.seg button{letter-spacing:.2em;font-size:12px}.seg button:disabled{opacity:.35;cursor:default}.button-secondary{height:48px;padding:0 var(--space-24);border:1px solid var(--color-line-strong);border-radius:var(--radius-full);background:transparent;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color var(--motion-press)}.button-secondary:active{background:var(--color-bg-pressed)}.button-secondary:disabled{opacity:.35;cursor:default}.button-text{height:48px;padding:0 var(--space-12);border:0;border-radius:var(--radius-full);background:transparent;color:var(--color-text-primary);white-space:nowrap;transition:background-color var(--motion-press)}.button-text:active{background:var(--color-bg-pressed)}.chip{min-height:44px;padding:0 var(--space-16);border:1px solid var(--color-line-subtle);border-radius:var(--radius-full);background:transparent;color:var(--color-text-primary);font-size:15px;white-space:nowrap;transition:background-color var(--motion-press)}.chip:active{background:var(--color-bg-pressed)}.chip[aria-pressed=true]{background:var(--color-bg-inverse);border-color:var(--color-bg-inverse);color:var(--color-text-inverse)}.chip:disabled{opacity:.35;cursor:default}.select{position:relative;display:block}.select select{width:100%;min-height:44px;padding:0 40px 0 var(--space-16);border:1px solid var(--color-line-subtle);border-radius:var(--radius-full);background:transparent;color:var(--color-text-primary);font-size:15px;-moz-appearance:none;appearance:none;-webkit-appearance:none;text-overflow:ellipsis}.select select:disabled{opacity:.35}.select:after{content:"";position:absolute;right:14px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--color-icon-primary);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5L12 15.5L18 9.5'/%3E%3C/svg%3E") center / contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5L12 15.5L18 9.5'/%3E%3C/svg%3E") center / contain no-repeat;pointer-events:none}.value-out,.info dd,.cents,.key{font-variant-numeric:tabular-nums}.note{font-size:21px}.cents{color:var(--color-text-secondary)}.chips-scroll{display:flex;align-items:center;gap:var(--space-8);overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--layout-margin));padding:0 var(--layout-margin)}.chips-scroll::-webkit-scrollbar{display:none}.chips-scroll .chip{flex:none}.song-strip .chip[aria-current=true]{border-color:var(--color-line-strong);box-shadow:inset 0 0 0 .5px var(--color-line-strong)}.song-strip .chip[data-next]{border-style:dashed;border-color:var(--color-line-strong)}.song-strip .hold{margin-left:var(--space-8)}.rate{display:flex;gap:var(--space-8)}.rate .icon-btn{border:1px solid var(--color-line-subtle)}.rate .icon-btn[aria-pressed=true]{background:var(--color-bg-inverse);border-color:var(--color-bg-inverse);color:var(--color-icon-inverse)}.lead-shape{position:relative;height:112px;border:1px solid var(--color-line-subtle);border-radius:var(--radius-md);touch-action:none;cursor:crosshair}.lead-shape-label{position:absolute;color:var(--color-text-tertiary);pointer-events:none}.lead-shape-label.left{left:10px;top:50%;transform:translateY(-50%)}.lead-shape-label.right{right:10px;top:50%;transform:translateY(-50%)}.lead-shape-label.top{top:8px;left:50%;transform:translate(-50%)}.lead-shape-label.bottom{bottom:8px;left:50%;transform:translate(-50%)}.lead-shape-dot{position:absolute;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--color-bg-raised);box-shadow:inset 0 0 0 1.5px var(--color-line-strong),var(--elevation-knob);pointer-events:none}.card-bar{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:max(var(--layout-margin),(100% - 346px) / 2);margin:0 calc(-1*max(var(--layout-margin),(100vw - 346px) / 2));padding:2px max(var(--layout-margin),(100vw - 346px) / 2);overscroll-behavior-x:contain}.card-bar::-webkit-scrollbar{display:none}.card-check{position:absolute;top:8px;right:8px;width:22px;height:22px;display:grid;place-items:center;border-radius:var(--radius-full);background:var(--color-bg-inverse);color:var(--color-icon-inverse);opacity:0;transform:scale(.6);transition:opacity var(--motion-fade),transform var(--motion-fade)}[aria-pressed=true]>.card-check{opacity:1;transform:none}.pick-rows{display:flex;flex-direction:column;gap:var(--space-16)}.pick-row{display:flex;flex-direction:column;gap:var(--space-8)}.pick-chord{position:relative;flex:none;width:116px;min-height:76px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-12);border:1px solid var(--color-line-subtle);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text-primary);text-align:left;scroll-snap-align:start;transition:background-color var(--motion-press),border-color var(--motion-press)}.pick-chord:active{background:var(--color-bg-pressed)}.pick-chord[aria-pressed=true]{border-color:var(--color-line-strong);box-shadow:inset 0 0 0 .5px var(--color-line-strong);background:var(--color-bg-app);cursor:default}.pick-name{display:flex;align-items:center;gap:var(--space-8);padding-right:22px;font-size:21px;line-height:1.2;white-space:nowrap}.pick-swatch{width:12px;height:12px;border-radius:50%;flex:none}.pick-why{font-size:13px;color:var(--color-text-secondary);line-height:1.25}.pick-custom{border-style:dashed}.pick-custom.editing{border-style:solid;border-color:var(--color-line-strong);width:152px}.pick-input{width:100%;min-width:0;padding:0;border:0;border-bottom:1px solid var(--color-line-strong);background:transparent;color:var(--color-text-primary);font:21px/1.2 var(--font-serif);outline:none}.pick-input::placeholder{color:var(--color-text-tertiary);font-size:17px}.pick-out{min-height:1.4em}.pick-free{align-self:flex-start}.toggle-row{display:flex;align-items:center;gap:var(--space-16);padding:var(--space-8) 0;cursor:pointer}.toggle-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--space-2)}.switch{-moz-appearance:none;appearance:none;-webkit-appearance:none;flex:none;position:relative;width:44px;height:26px;margin:0;border-radius:var(--radius-full);background:var(--color-indicator-off);cursor:pointer;transition:background-color var(--motion-fade)}.switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--color-bg-raised);box-shadow:var(--elevation-knob);transition:transform var(--motion-fade)}.switch:checked{background:var(--color-indicator-on)}.switch:checked:after{transform:translate(18px)}.switch:focus-visible{outline:2px solid var(--color-line-strong);outline-offset:2px}.settings-body{gap:56px;padding-top:var(--space-8)}.settings-group{display:flex;flex-direction:column;gap:var(--space-12)}.settings-group.tight{gap:var(--space-4)}.section-row{display:flex;align-items:center;justify-content:space-between}.page-dots{display:flex;gap:var(--space-8)}.page-dots span{width:6px;height:6px;border-radius:var(--radius-full);background:var(--color-indicator-off);transition:background-color var(--motion-fade)}.page-dots span.on{background:var(--color-indicator-on)}.carousel{display:flex;gap:var(--space-12);overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-inline:var(--layout-margin);margin:0 calc(-1*max(var(--layout-margin),(100vw - 346px) / 2));padding:0 max(var(--layout-margin),(100vw - 346px) / 2);overscroll-behavior-x:contain}.carousel::-webkit-scrollbar{display:none}.band-card{flex:none;width:300px;height:168px;padding:0 var(--space-16) var(--space-12);border:0;background:var(--color-bg-pressed);display:flex;align-items:flex-end;scroll-snap-align:start;transition:opacity var(--motion-fade)}.band-card-label{color:var(--color-text-tertiary)}.mood-card{flex:none;min-width:244px;min-height:132px;padding:var(--space-12);border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-primary);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-12);text-align:left;scroll-snap-align:start;transition:opacity var(--motion-fade),background-color var(--motion-press)}.mood-card:active{background:var(--color-bg-pressed)}.mood-card[aria-pressed=false]{opacity:.4}.mood-card-head{display:flex;align-items:baseline;gap:var(--space-8);white-space:nowrap}.chord-tokens{display:flex;gap:14px}.chord-token{display:flex;flex-direction:column;gap:6px;min-width:32px;white-space:nowrap}.chord-token-bar{height:5px;border-radius:var(--radius-full)}.mood-more{min-width:160px;justify-content:center;align-items:center;color:var(--color-text-secondary);box-shadow:inset 0 0 0 1px var(--color-line-subtle)}.mood-more[aria-pressed]{opacity:1}.choices{display:flex;flex-direction:column}.choice{display:flex;align-items:center;gap:var(--space-12);width:100%;padding:14px var(--space-12);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-primary);text-align:left;transition:background-color var(--motion-press)}.choice:active{background:var(--color-bg-pressed)}.choice-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--space-4)}.choice-head{display:flex;align-items:baseline;gap:10px}.choice-tag{color:var(--color-text-secondary)}.choice-tag:empty{display:none}.choice-check{flex:none;color:var(--color-icon-primary);opacity:0;transition:opacity var(--motion-fade)}.choice[aria-pressed=true] .choice-check{opacity:1}.lead-sound{display:flex;flex-direction:column;gap:var(--space-8);padding-top:var(--space-16)}.card-bar.choices{flex-direction:row}.card-bar .choice{position:relative;flex:none;width:168px;min-height:132px;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:var(--space-12) var(--space-12) var(--space-16);border:1px solid var(--color-line-subtle);border-radius:var(--radius-md);background:var(--color-bg-surface);scroll-snap-align:start}.card-bar .choice[aria-pressed=true]{border-color:var(--color-line-strong);box-shadow:inset 0 0 0 .5px var(--color-line-strong);background:var(--color-bg-app)}.card-bar .choice-head{flex-direction:column;align-items:flex-start;gap:var(--space-2);padding-right:26px}.card-bar .choice-text{padding-right:0}.card-bar.small .choice{width:132px;min-height:80px}.instrument-card{position:relative;flex:none;width:140px;min-height:108px;display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-12);border:1px solid var(--color-line-subtle);border-radius:var(--radius-md);background:var(--color-bg-surface);color:var(--color-text-primary);text-align:left;scroll-snap-align:start;transition:background-color var(--motion-press),border-color var(--motion-press)}.instrument-card:active{background:var(--color-bg-pressed)}.instrument-card[aria-expanded=true]{border-color:var(--color-line-strong);box-shadow:inset 0 0 0 .5px var(--color-line-strong);background:var(--color-bg-app)}.instrument-card .light{margin-bottom:var(--space-4)}.instrument-options{display:flex;flex-direction:column;gap:var(--space-8);padding-top:var(--space-16)}.light{--level: 0;position:relative;flex:none;width:18px;height:18px}.light-glow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--color-indicator-on);opacity:min(.16,calc(var(--level) * .5));transform:scale(calc(.7 + .3*min(1,var(--level) * 3)))}.light-core{position:absolute;left:5px;top:5px;width:8px;height:8px;border-radius:50%;background:var(--color-indicator-off)}.light-core:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:var(--color-indicator-on);opacity:min(1,calc(var(--level) * 3))}.info{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4) var(--space-16);font-size:13px}.info dt{color:var(--color-text-secondary)}.info dd{margin:0;overflow-wrap:anywhere}.device-verdict[data-level=overloaded]{color:var(--color-signal-error)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:1ms!important;transition-duration:1ms!important}}.demo-jump{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 16px);left:50%;transform:translate(-50%);white-space:nowrap;height:36px;padding:0 var(--space-16);border:1px solid var(--color-line-strong);border-radius:var(--radius-full);background:transparent;color:var(--color-text-primary);cursor:pointer;z-index:20}.demo-jump:disabled{opacity:.4}.app:not([data-screen=home]) .demo-jump{display:none}