:root{--gc-blue-500: #3d5aff;--gc-cyan-400: #00c2ff;--gc-violet-500: #8d3dff;--gc-indigo-400: #4d6aff;--gc-magenta-500: #ff2db8;--gc-purple-400: #9b3dff;--gc-orange-400: #ff7a3d;--gc-rose-400: #ff3d8a;--gc-blue-600: #2743ff;--gc-purple-600: #a326d4;--gc-pink-500: #ff2d78;--gc-teal-400: #2dd8c8;--gc-teal-600: #0e6e7a;--gc-green-500: #22c55e;--gc-lime-400: #b8e83d;--gc-amber-400: #ffc23d;--gc-orange-500: #ff5c2d;--gc-red-500: #ff3d55;--gc-indigo-600: #31249f;--gc-lavender-400: #a78bfa;--gc-ice-300: #9fd0ff;--gc-mint-300: #8fe8d8;--gc-plum-500: #8a56c9;--gc-rose-300: #ffb1c9;--gc-night-900: #07070c;--gc-night-850: #0b0b0e;--gc-night-800: #101018;--gc-white: #fff;--gc-white-a04: rgba(255, 255, 255, .04);--gc-white-a05: rgba(255, 255, 255, .05);--gc-white-a06: rgba(255, 255, 255, .06);--gc-white-a07: rgba(255, 255, 255, .07);--gc-white-a08: rgba(255, 255, 255, .08);--gc-white-a10: rgba(255, 255, 255, .1);--gc-white-a14: rgba(255, 255, 255, .14);--gc-white-a16: rgba(255, 255, 255, .16);--gc-white-a18: rgba(255, 255, 255, .18);--gc-white-a25: rgba(255, 255, 255, .25);--gc-white-a38: rgba(255, 255, 255, .38);--gc-white-a40: rgba(255, 255, 255, .4);--gc-white-a45: rgba(255, 255, 255, .45);--gc-white-a55: rgba(255, 255, 255, .55);--gc-white-a80: rgba(255, 255, 255, .8);--gc-white-a92: rgba(255, 255, 255, .92);--gc-black-a10: rgba(0, 0, 0, .1);--gc-black-a28: rgba(0, 0, 0, .28);--gc-black-a30: rgba(0, 0, 0, .3);--gc-black-a45: rgba(0, 0, 0, .45);--gc-black-a50: rgba(0, 0, 0, .5);--gc-radius-1: 8px;--gc-radius-2: 10px;--gc-radius-3: 12px;--gc-radius-4: 16px;--gc-radius-5: 24px;--gc-radius-pill: 999px;--gc-space-1: 2px;--gc-space-2: 4px;--gc-space-3: 8px;--gc-space-4: 12px;--gc-space-5: 16px;--gc-space-6: 24px;--gc-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;--gc-text-xs: 10px;--gc-text-sm: 11px;--gc-text-md: 12.5px;--gc-text-base: 13px;--gc-text-lg: 16px;--gc-weight-medium: 500;--gc-weight-semibold: 600;--gc-track-tight: -.2px;--gc-track-label: .6px;--gc-track-zlabel: 1px;--gc-blur-1: 28px;--gc-blur-2: 90px;--gc-dur-instant: 40ms;--gc-dur-quick: 60ms;--gc-dur-fast: .12s;--gc-dur-control: .18s;--gc-dur-flash: .2s;--gc-dur-settle: .4s;--gc-dur-glow: .5s;--gc-ease: ease;--gc-ease-out: cubic-bezier(.2, .7, .3, 1)}:root{--surface-app: var(--gc-night-850);--surface-cell: var(--gc-white-a04);--surface-cell-on: var(--gc-white-a14);--stroke-cell: var(--gc-white-a08);--stroke-cell-on: var(--gc-white-a25);--stroke-dead: var(--gc-white-a04);--surface-frame: var(--gc-white-a04);--stroke-frame: var(--gc-white-a25);--ink-primary: var(--gc-white-a92);--ink-strong: var(--gc-white-a80);--ink-muted: var(--gc-white-a45);--ink-faint: var(--gc-white-a25);--dot-root: var(--gc-white-a25);--focus-ring: 0 0 0 2px color-mix(in srgb, var(--gc-cyan-400) 70%, transparent);--led-bg: 14%;--led-stroke: 55%;--led-glow: 30%;--led-bg-lit: 24%;--led-stroke-lit: 85%;--led-glow-lit: 55%;--motion-instant: var(--gc-dur-instant);--motion-quick: var(--gc-dur-quick);--motion-fast: var(--gc-dur-fast);--motion-control: var(--gc-dur-control);--motion-flash: var(--gc-dur-flash);--motion-settle: var(--gc-dur-settle);--motion-glow: var(--gc-dur-glow);--motion-ease: var(--gc-ease)}:root.vibe-lit{--surface-cell: hsl(var(--vibe-h) 45% 62% / .06);--surface-cell-on: hsl(var(--vibe-h) 50% 66% / .16);--stroke-cell: hsl(var(--vibe-h) 45% 68% / .1);--stroke-cell-on: hsl(var(--vibe-h) 55% 72% / .3);--stroke-dead: hsl(var(--vibe-h) 40% 60% / .05);--surface-frame: hsl(var(--vibe-h) 45% 62% / .05);--stroke-frame: hsl(var(--vibe-h) 50% 72% / .3);--dot-root: hsl(var(--vibe-h) 50% 72% / .3)}:root,:root[data-theme=liquid-glass]{--ambient-blob-1: var(--gc-blue-600);--ambient-blob-2: var(--gc-purple-600);--ambient-blob-3: var(--gc-pink-500);--ambient-opacity: .55;--ambient-blob-3-opacity: .7;--ambient-blur: var(--gc-blur-2);--chord-1-a: var(--gc-blue-500);--chord-1-b: var(--gc-cyan-400);--chord-2-a: var(--gc-violet-500);--chord-2-b: var(--gc-indigo-400);--chord-3-a: var(--gc-magenta-500);--chord-3-b: var(--gc-purple-400);--chord-4-a: var(--gc-orange-400);--chord-4-b: var(--gc-rose-400);--melody-hue-start: 225;--melody-hue-end: 25;--melody-hue-offset: 28;--melody-sat: 95%;--melody-light: 58%;--melody-light-hi: 62%}:root[data-theme=club]{--ambient-blob-1: var(--gc-teal-600);--ambient-blob-2: var(--gc-green-500);--ambient-blob-3: var(--gc-blue-600);--chord-1-a: var(--gc-teal-400);--chord-1-b: var(--gc-cyan-400);--chord-2-a: var(--gc-green-500);--chord-2-b: var(--gc-lime-400);--chord-3-a: var(--gc-blue-500);--chord-3-b: var(--gc-teal-400);--chord-4-a: var(--gc-amber-400);--chord-4-b: var(--gc-lime-400);--melody-hue-start: 170;--melody-hue-end: 60}:root[data-theme=sunset]{--ambient-blob-1: var(--gc-indigo-600);--ambient-blob-2: var(--gc-magenta-500);--ambient-blob-3: var(--gc-orange-500);--chord-1-a: var(--gc-violet-500);--chord-1-b: var(--gc-magenta-500);--chord-2-a: var(--gc-magenta-500);--chord-2-b: var(--gc-rose-400);--chord-3-a: var(--gc-indigo-600);--chord-3-b: var(--gc-violet-500);--chord-4-a: var(--gc-orange-500);--chord-4-b: var(--gc-amber-400);--melody-hue-start: 285;--melody-hue-end: 15}:root[data-theme=mist]{--ambient-blob-1: var(--gc-lavender-400);--ambient-blob-2: var(--gc-ice-300);--ambient-blob-3: var(--gc-mint-300);--ambient-opacity: .38;--ambient-blob-3-opacity: .55;--chord-1-a: var(--gc-lavender-400);--chord-1-b: var(--gc-ice-300);--chord-2-a: var(--gc-ice-300);--chord-2-b: var(--gc-mint-300);--chord-3-a: var(--gc-plum-500);--chord-3-b: var(--gc-lavender-400);--chord-4-a: var(--gc-rose-300);--chord-4-b: var(--gc-ice-300);--melody-hue-start: 220;--melody-hue-end: -20;--melody-sat: 70%;--melody-light: 64%;--melody-light-hi: 68%}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}html,body{margin:0;height:100%}body{font-family:var(--gc-font-sans);background:var(--surface-app);color:var(--ink-primary);min-height:100vh;min-height:100dvh;display:flex;justify-content:center;overflow:hidden;overscroll-behavior:none}#root{display:contents}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}.app{position:relative;z-index:1;width:100%;max-width:440px;display:flex;flex-direction:column;gap:var(--gc-space-3);height:100dvh;padding:max(var(--gc-space-4),env(safe-area-inset-top)) var(--gc-space-4) max(var(--gc-space-4),env(safe-area-inset-bottom))}.app>*{animation:rise-in .36s var(--gc-ease-out) backwards}.app>:nth-child(2){animation-delay:50ms}.app>:nth-child(3){animation-delay:.1s}@keyframes rise-in{0%{opacity:0;transform:translateY(6px)}}.icon{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}.hw-btn{appearance:none;cursor:pointer;font-family:inherit;background:var(--surface-cell);border:1px solid var(--stroke-cell);color:var(--ink-muted);display:flex;align-items:center;justify-content:center;transition:background var(--motion-control),color var(--motion-control),border-color var(--motion-control),box-shadow var(--motion-control),transform var(--motion-quick) var(--gc-ease-out);touch-action:manipulation}.hw-btn.on{background:var(--surface-cell-on);border-color:var(--stroke-cell-on);color:var(--ink-primary)}.hw-btn:disabled{opacity:.35;cursor:default;pointer-events:none}.hw-btn:active{color:var(--ink-primary);transform:scale(.96)}.hw-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.ambient{position:fixed;inset:-12%;z-index:0;pointer-events:none;--amb: var(--gc-white);--level: 0;animation:amb-breathe 11s var(--gc-ease) infinite;will-change:transform}.ambient.tinted{--amb: hsl(var(--vibe-h, 0) 50% 60%)}.ambient[data-chord="0"]{--amb: var(--chord-1-a)}.ambient[data-chord="1"]{--amb: var(--chord-2-a)}.ambient[data-chord="2"]{--amb: var(--chord-3-a)}.ambient[data-chord="3"]{--amb: var(--chord-4-a)}.amb-glow{position:absolute;inset:0;opacity:calc(.28 + var(--level) * .72);background:radial-gradient(115% 90% at 50% 104%,color-mix(in srgb,var(--amb) 13%,transparent),transparent 64%),radial-gradient(85% 60% at 82% -8%,color-mix(in srgb,var(--amb) 7%,transparent),transparent 60%);transition:transform var(--motion-settle) var(--gc-ease-out);will-change:transform,opacity}.ambient.tinted:not([data-chord]) .amb-glow{background:radial-gradient(115% 90% at 50% 104%,color-mix(in srgb,var(--amb) 22%,transparent),transparent 66%),radial-gradient(85% 60% at 82% -8%,color-mix(in srgb,var(--amb) 11%,transparent),transparent 61%)}.ambient[data-chord] .amb-glow{background:radial-gradient(115% 90% at 50% 104%,color-mix(in srgb,var(--amb) 34%,transparent),transparent 68%),radial-gradient(85% 60% at 82% -8%,color-mix(in srgb,var(--amb) 16%,transparent),transparent 62%)}.amb-glow.thump{transform:scale(1.06);transition:transform var(--motion-quick) var(--gc-ease-out)}.amb-aurora{position:absolute;left:50%;top:50%;width:170vmax;height:170vmax;margin:-85vmax;opacity:calc(.05 + var(--level) * .2);background:linear-gradient(115deg,transparent 32%,color-mix(in srgb,var(--amb) 9%,transparent) 46%,transparent 60%),linear-gradient(245deg,transparent 38%,color-mix(in srgb,var(--amb) 5%,transparent) 50%,transparent 62%);animation:amb-drift 45s linear infinite;will-change:transform}.ambient.tinted:not([data-chord]) .amb-aurora{opacity:calc(.09 + var(--level) * .22)}.ambient[data-chord] .amb-aurora{opacity:calc(.12 + var(--level) * .25)}@keyframes amb-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.035)}}@keyframes amb-drift{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.18)}to{transform:rotate(360deg) scale(1)}}.top{display:flex;align-items:baseline;justify-content:space-between;padding:0 var(--gc-space-1)}.top h1{margin:0;font-size:var(--gc-text-md);font-weight:var(--gc-weight-semibold);letter-spacing:3px;text-transform:uppercase;color:var(--ink-strong)}.status{font-size:var(--gc-text-sm);color:var(--ink-muted);font-variant-numeric:tabular-nums;letter-spacing:.4px;transition:color var(--motion-flash)}.status.active{color:var(--ink-primary)}.lovenote{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));z-index:20;display:flex;align-items:center;gap:8px;pointer-events:none}.lovenote-msg{font-size:var(--gc-text-sm);letter-spacing:.2px;color:var(--ink-strong);background:color-mix(in srgb,var(--gc-pink-500) 14%,var(--surface-frame));border:1px solid color-mix(in srgb,var(--gc-pink-500) 32%,transparent);padding:5px 10px;border-radius:var(--gc-radius-pill);white-space:nowrap;opacity:0;transform:translate(6px);transition:opacity var(--motion-control),transform var(--motion-control)}.lovenote-msg.show{opacity:1;transform:translate(0)}.lovenote-btn{pointer-events:auto;appearance:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--ink-faint);opacity:.55;transition:color var(--motion-control),opacity var(--motion-control),transform var(--motion-quick) var(--gc-ease-out)}.lovenote-btn .icon{width:16px;height:16px}.lovenote-btn:active{transform:scale(.88)}.lovenote-btn.open{color:var(--gc-pink-500);opacity:1}.lovenote-btn.open .icon{fill:currentColor;animation:heartbeat 1.15s var(--gc-ease) infinite}@keyframes heartbeat{0%,55%,to{transform:scale(1)}20%{transform:scale(1.18)}35%{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.lovenote-btn.open .icon{animation:none}}.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}.faceplate{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);gap:var(--gc-space-3);padding:var(--gc-space-4);width:100%;max-width:416px;aspect-ratio:414 / 612;max-height:100%;background:var(--surface-frame);border:1px solid var(--stroke-frame);border-radius:var(--gc-radius-5);touch-action:none}.loop-ring{position:absolute;top:-1px;left:-1px;width:calc(100% + 2px);height:calc(100% + 2px);overflow:visible;pointer-events:none;opacity:0;transition:opacity var(--motion-settle) var(--motion-ease),filter var(--motion-settle) var(--motion-ease);--ring-c: var(--gc-white-a55)}.loop-ring.on{opacity:1}.vibe-lit .loop-ring{--ring-c: hsl(var(--vibe-h) 55% 75% / .6)}.loop-ring.rec{--ring-c: var(--gc-red-500);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--gc-red-500) 60%,transparent))}.lr-under,.lr-sweep{fill:none;stroke-width:2}.lr-under{stroke:color-mix(in srgb,var(--ring-c) 22%,transparent)}.lr-sweep{stroke:var(--ring-c);stroke-dasharray:100 100;stroke-dashoffset:100}.loop-ring.run .lr-sweep{animation:loop-sweep var(--loop-dur, 4s) linear forwards}.loop-ring.wrap{filter:brightness(2.2);transition:filter var(--motion-instant)}.loop-ring.rec.wrap{filter:brightness(2.2) drop-shadow(0 0 6px color-mix(in srgb,var(--gc-red-500) 60%,transparent))}@keyframes loop-sweep{0%{stroke-dashoffset:100}to{stroke-dashoffset:0}}.deck{display:contents}.mbtn{border-radius:var(--gc-radius-3);color:var(--ink-faint)}.mbtn.on{color:var(--ink-primary)}.mbtn .icon{width:30px;height:30px}.mbtn.loop{touch-action:none;-webkit-user-select:none;user-select:none}.mbtn.loop.has{background:var(--surface-cell-on);border-color:var(--stroke-cell-on);color:var(--ink-primary)}.mbtn.loop.rec{background:color-mix(in srgb,var(--gc-red-500) var(--led-bg),transparent);border-color:color-mix(in srgb,var(--gc-red-500) var(--led-stroke),transparent);box-shadow:0 0 12px color-mix(in srgb,var(--gc-red-500) var(--led-glow),transparent);color:color-mix(in srgb,var(--gc-red-500) 80%,var(--gc-white));animation:rec-pulse 1.1s var(--gc-ease) infinite alternate}@keyframes rec-pulse{to{opacity:.6}}.pcells{display:contents}.pcells>.cell,.pcells>.gcell{min-width:0;min-height:0}.pcells>.cell,.pcells>.gcell{animation:cell-in .2s var(--gc-ease-out) backwards}.pcells>:nth-child(n+5){animation-delay:30ms}.pcells>:nth-child(n+9){animation-delay:60ms}.pcells>:nth-child(n+13){animation-delay:90ms}@keyframes cell-in{0%{opacity:0;transform:translateY(4px)}}.gcell{border-radius:var(--gc-radius-3);flex-direction:column;gap:2px;padding-inline:4px;overflow:hidden;font-size:var(--gc-text-md);font-weight:var(--gc-weight-semibold);letter-spacing:.2px;font-variant-numeric:tabular-nums}.gval,.gsub{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gcell.dead{background:transparent;border:1px solid var(--stroke-dead)}.gsub{font-size:var(--gc-text-xs);font-weight:var(--gc-weight-medium);color:var(--ink-faint)}.cell{border-radius:var(--gc-radius-3);background:var(--surface-cell);border:1px solid var(--stroke-cell);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:background var(--motion-settle) var(--motion-ease),box-shadow var(--motion-glow) var(--motion-ease),border-color var(--motion-settle) var(--motion-ease)}.cell.asleep{opacity:.35;pointer-events:none}.cell.root:after{content:"";position:absolute;left:50%;bottom:8px;transform:translate(-50%);width:3px;height:3px;border-radius:50%;background:var(--dot-root)}.cell.melody{--h: calc( var(--melody-hue-start) - (var(--pad-i) / 15) * (var(--melody-hue-start) - var(--melody-hue-end)) );--led: hsl(var(--h) var(--melody-sat) var(--melody-light))}.cell.chord-slot-0{--led: var(--chord-1-a)}.cell.chord-slot-1{--led: var(--chord-2-a)}.cell.chord-slot-2{--led: var(--chord-3-a)}.cell.chord-slot-3{--led: var(--chord-4-a)}.cell.chord .mood{font-size:var(--gc-text-md);font-weight:var(--gc-weight-semibold);letter-spacing:.2px;color:var(--ink-muted)}.cell.hold,.cell.pending{background:color-mix(in srgb,var(--led) var(--led-bg),transparent);border-color:color-mix(in srgb,var(--led) var(--led-stroke),transparent);box-shadow:0 0 16px color-mix(in srgb,var(--led) var(--led-glow),transparent)}.cell.hold .mood,.cell.pending .mood{color:var(--ink-primary)}.cell.pending{animation:pending-blink .5s var(--gc-ease) infinite alternate}@keyframes pending-blink{to{opacity:.55}}.cell.lit{background:color-mix(in srgb,var(--led) var(--led-bg-lit),transparent);border-color:color-mix(in srgb,var(--led) var(--led-stroke-lit),transparent);box-shadow:0 0 20px color-mix(in srgb,var(--led) var(--led-glow-lit),transparent),inset 0 0 12px color-mix(in srgb,var(--led) 10%,transparent);transition:background var(--motion-instant),box-shadow var(--motion-instant),border-color var(--motion-instant)}.crow{display:contents}