:root{--u: min(1px, calc(100dvh / 844));--font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;--font-body: "Space Grotesk", system-ui, -apple-system, sans-serif;--font-mono: "Space Mono", ui-monospace, "SF Mono", Menlo, monospace;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--fw-bold: 700;--fs-display: calc(56 * var(--u));--fs-h1: calc(40 * var(--u));--fs-h2: calc(30 * var(--u));--fs-h3: calc(22 * var(--u));--fs-title: calc(18 * var(--u));--fs-body: calc(16 * var(--u));--fs-sm: calc(14 * var(--u));--fs-xs: calc(12 * var(--u));--fs-micro: calc(10 * var(--u));--fs-score-xl: calc(64 * var(--u));--fs-score-lg: calc(40 * var(--u));--fs-score-md: calc(24 * var(--u));--lh-tight: 1;--lh-snug: 1.15;--lh-normal: 1.45;--lh-relaxed: 1.6;--ls-display: -.02em;--ls-normal: 0em;--ls-wide: .08em;--ls-caps: .22em;--neon-cyan: #00F0FF;--neon-cyan-bright: #6CF9FF;--neon-cyan-deep: #00A6B8;--neon-magenta: #FF1B8D;--neon-magenta-bright: #FF63B3;--neon-magenta-deep: #B80E60;--neon-gold: #FFD34A;--neon-gold-deep: #C6971C;--glow-gold-sm: 0 0 4px rgba(255, 211, 74, .45), 0 0 12px rgba(255, 211, 74, .3);--glow-gold: 0 0 6px rgba(255, 211, 74, .64), 0 0 18px rgba(255, 211, 74, .38), 0 0 40px rgba(255, 211, 74, .21);--neon-lime: #5CFF7A;--neon-yellow: #FFE234;--neon-violet: #B26BFF;--neon-orange: #FF8A3D;--glow-violet-sm: 0 0 4px rgba(178, 107, 255, .45), 0 0 12px rgba(178, 107, 255, .3);--glow-violet: 0 0 6px rgba(178, 107, 255, .6), 0 0 18px rgba(178, 107, 255, .36), 0 0 40px rgba(178, 107, 255, .2);--glow-orange-sm: 0 0 4px rgba(255, 138, 61, .45), 0 0 12px rgba(255, 138, 61, .3);--glow-orange: 0 0 6px rgba(255, 138, 61, .6), 0 0 18px rgba(255, 138, 61, .36), 0 0 40px rgba(255, 138, 61, .2);--ink-900: #07070B;--ink-800: #0A0A0F;--ink-700: #101019;--ink-600: #16161F;--ink-500: #1E1E2A;--ink-400: #2A2A3A;--ink-300: #3A3A4E;--text-100: #FFFFFF;--text-200: #E7E8F2;--text-300: #9FA1B8;--text-400: #686A82;--text-500: #45475C;--line-soft: rgba(255, 255, 255, .06);--line: rgba(255, 255, 255, .1);--line-strong: rgba(255, 255, 255, .18);--success: #5CFF7A;--warning: #FFE234;--danger: #FF3B5C;--info: var(--neon-cyan);--bg-app: var(--ink-900);--bg-base: var(--ink-800);--bg-raised: var(--ink-700);--surface-card: var(--ink-600);--surface-input: var(--ink-500);--surface-overlay: rgba(7, 7, 11, .72);--brand-primary: var(--neon-cyan);--brand-secondary: var(--neon-magenta);--text-display: var(--text-100);--text-body: var(--text-200);--text-muted: var(--text-300);--text-subtle: var(--text-400);--border-card: var(--line);--border-input: var(--line-strong);--accent-on-cyan: var(--ink-900);--accent-on-magenta: #FFFFFF;--space-0: 0;--space-1: calc(4 * var(--u));--space-2: calc(8 * var(--u));--space-3: calc(12 * var(--u));--space-4: calc(16 * var(--u));--space-5: calc(24 * var(--u));--space-6: calc(32 * var(--u));--space-7: calc(48 * var(--u));--space-8: calc(64 * var(--u));--space-9: calc(96 * var(--u));--gutter: calc(20 * var(--u));--device-width: 390px;--device-height: 844px;--app-max: 1800px;--play-max: 500px;--content-max: 560px;--radius-xs: calc(6 * var(--u));--radius-sm: calc(10 * var(--u));--radius-md: calc(16 * var(--u));--radius-lg: calc(24 * var(--u));--radius-xl: calc(32 * var(--u));--radius-pill: 999px;--radius-block: calc(8 * var(--u));--control-h-sm: calc(40 * var(--u));--control-h: calc(52 * var(--u));--control-h-lg: calc(60 * var(--u));--icon-sm: calc(18 * var(--u));--icon-md: calc(22 * var(--u));--icon-lg: calc(28 * var(--u));--tap-min: calc(44 * var(--u));--bw-hair: 1px;--bw: 1.5px;--bw-neon: 2px;--shadow-1: 0 1px 2px rgba(0, 0, 0, .4);--shadow-2: 0 4px 16px rgba(0, 0, 0, .45);--shadow-3: 0 12px 40px rgba(0, 0, 0, .55);--shadow-sheet: 0 -8px 48px rgba(0, 0, 0, .6);--glow-cyan-sm: 0 0 4px rgba(0, 240, 255, .41), 0 0 12px rgba(0, 240, 255, .26);--glow-cyan: 0 0 6px rgba(0, 240, 255, .56), 0 0 18px rgba(0, 240, 255, .34), 0 0 40px rgba(0, 240, 255, .18);--glow-cyan-lg: 0 0 8px rgba(108, 249, 255, .68), 0 0 28px rgba(0, 240, 255, .41), 0 0 64px rgba(0, 240, 255, .22);--glow-magenta-sm: 0 0 4px rgba(255, 27, 141, .41), 0 0 12px rgba(255, 27, 141, .26);--glow-magenta: 0 0 6px rgba(255, 27, 141, .56), 0 0 18px rgba(255, 27, 141, .34), 0 0 40px rgba(255, 27, 141, .18);--glow-magenta-lg: 0 0 8px rgba(255, 99, 179, .68), 0 0 28px rgba(255, 27, 141, .41), 0 0 64px rgba(255, 27, 141, .22);--glow-inset-cyan: inset 0 0 12px rgba(0, 240, 255, .19);--glow-inset-magenta: inset 0 0 12px rgba(255, 27, 141, .19);--text-glow-cyan: 0 0 8px rgba(0, 240, 255, .45), 0 0 24px rgba(0, 240, 255, .26);--text-glow-magenta: 0 0 8px rgba(255, 27, 141, .45), 0 0 24px rgba(255, 27, 141, .26);--blur-sm: 8px;--blur-md: 16px;--blur-lg: 28px;--glass-tint: rgba(20, 20, 30, .55);--scene-wash: radial-gradient(120% 80% at 18% 0%, rgba(0, 240, 255, .004), transparent 55%), radial-gradient(120% 80% at 90% 12%, rgba(255, 27, 141, .004), transparent 55%);--dur-fast: .12s;--dur: .2s;--dur-slow: .36s;--dur-glow: 1.8s;--ease-out: cubic-bezier(.22, 1, .36, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--ease-snap: cubic-bezier(.34, 1.56, .64, 1)}@media (pointer: coarse){:root{--tap-min: max(44px, calc(44 * var(--u)))}}*,*:before,*:after{box-sizing:border-box}html,body,#root,*,*:before,*:after{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}input,textarea,[contenteditable=true]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}html,body,#root{margin:0;padding:0;width:100%;max-width:100%;height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch}body{background:var(--bg-app);color:var(--text-body);font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#root{position:relative;background:var(--scene-wash),var(--bg-app)}.bon-stage{position:relative;width:100%;max-width:var(--app-max);height:100dvh;margin:0 auto;display:flex;flex-direction:column;overflow:hidden}.bon-board-cell{transition:background 90ms var(--ease-out)}.bon-board[data-dragging="1"] .bon-board-cell{transition:none}:root[data-bg-hidden="1"] *,:root[data-bg-hidden="1"] *:before,:root[data-bg-hidden="1"] *:after{animation-play-state:paused!important}@keyframes bon-float{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes bon-breathe{0%,to{opacity:.86}50%{opacity:1}}@keyframes bon-halo{0%,to{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:.85;transform:translate(-50%,-50%) scale(1.06)}}.bon-float-anim{animation:bon-float 6s var(--ease-in-out) infinite}.bon-breathe-anim{animation:bon-breathe var(--dur-glow) var(--ease-in-out) infinite}.bon-halo-anim{animation:bon-halo var(--dur-glow) var(--ease-in-out) infinite}@keyframes bon-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.055)}}@keyframes bon-bloom{0%{opacity:0;transform:scale(.9);filter:brightness(.5) saturate(.6)}55%{opacity:1}to{opacity:1;transform:scale(1);filter:brightness(1) saturate(1)}}.bon-pulse-anim{animation:bon-pulse 1.4s var(--ease-in-out) infinite}.bon-bloom-anim{animation:bon-bloom var(--dur-slow) var(--ease-snap) both}@keyframes bon-reino-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.bon-reino-in{animation:bon-reino-in .62s var(--ease-out) .12s both}@keyframes bon-play-glow{0%,to{opacity:.4;transform:translate(-50%,-50%) scale(.98)}50%{opacity:.78;transform:translate(-50%,-50%) scale(1.05)}}.bon-play-glow-anim{animation:bon-play-glow 1.6s var(--ease-in-out) infinite}@keyframes bon-play-shard{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--ang)) translateY(0) scale(1)}18%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) rotate(var(--ang)) translateY(-88px) scale(.35)}}.bon-play-shard{position:absolute;left:50%;top:50%;width:7px;height:12px;border-radius:3px;will-change:transform,opacity;animation:bon-play-shard .46s var(--ease-out) forwards}.bon-landing{flex:1;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + var(--space-7)) var(--gutter) calc(env(safe-area-inset-bottom,0px) + var(--space-7))}.bon-landing__inner{position:relative;z-index:1;width:100%;max-width:var(--content-max);flex:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:var(--space-7)}.bon-landing-ambient{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;background:radial-gradient(60% 55% at 14% 16%,rgba(0,240,255,.2),transparent 70%),radial-gradient(58% 55% at 86% 84%,rgba(255,27,141,.18),transparent 72%),radial-gradient(48% 45% at 88% 12%,rgba(0,240,255,.1),transparent 70%),radial-gradient(48% 45% at 12% 88%,rgba(255,27,141,.1),transparent 72%)}@keyframes bon-ambient-drift{0%,to{opacity:.82;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}.bon-landing-ambient--live{animation:bon-ambient-drift 18s var(--ease-in-out) infinite}.bon-landing-legal{background:none;border:0;padding:14px 4px;margin:-14px 0;font:inherit;color:var(--text-subtle);text-decoration:underline;text-underline-offset:2px;cursor:pointer;transition:color .16s var(--ease-out)}.bon-landing-legal:hover,.bon-landing-legal:focus-visible{color:var(--neon-cyan)}