.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);border:1px solid transparent;border-radius:var(--radius-sm);padding:0 var(--sp-4);height:38px;font-size:14px;font-weight:550;cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}.btn:active{transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-lg{height:46px;padding:0 var(--sp-5);font-size:15px}.btn-primary{background:var(--primary);color:var(--bg);font-weight:600}.btn-primary:hover:not(:disabled){background:color-mix(in srgb,var(--primary) 82%,var(--text));box-shadow:0 0 0 4px var(--primary-glow)}.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--text)}.btn-ghost:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.btn-subtle{background:var(--surface-2);border-color:var(--line);color:var(--text)}.btn-subtle:hover:not(:disabled){background:var(--bg-elevated);border-color:var(--line-strong)}.btn-danger{background:transparent;border-color:var(--line-strong);color:var(--danger)}.btn-danger:hover:not(:disabled){border-color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,transparent)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0000009e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:var(--sp-4);animation:fade-in var(--dur) var(--ease)}.modal{width:100%;max-width:380px;padding:var(--sp-5);box-shadow:var(--shadow);animation:fade-up var(--dur) var(--ease)}.modal-tabs{display:flex;gap:var(--sp-2);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px}.modal-tabs button{flex:1;background:transparent;border:none;color:var(--text-dim);padding:8px;border-radius:4px;cursor:pointer;font-size:13px;font-weight:550}.modal-tabs button.active{background:var(--surface-2);color:var(--text)}.modal-sub{margin:var(--sp-4) 0;font-size:13px}.field{display:block;margin-bottom:var(--sp-3)}.field span{display:block;font-size:12px;color:var(--text-dim);margin-bottom:6px}.field input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);padding:10px 12px;font-family:inherit;font-size:14px}.field input:focus{outline:none;border-color:var(--primary)}.modal-error{background:#e06a5a1f;border:1px solid rgba(224,106,90,.4);color:var(--danger);font-size:13px;padding:8px 10px;border-radius:var(--radius-sm);margin-bottom:var(--sp-3)}.modal-or{display:flex;align-items:center;text-align:center;color:var(--text-faint);font-size:12px;margin:var(--sp-4) 0}.modal-or:before,.modal-or:after{content:"";flex:1;height:1px;background:var(--line)}.modal-or span{padding:0 var(--sp-3)}.topbar{position:sticky;top:0;z-index:50;background:var(--topbar-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}.topbar-inner{display:flex;align-items:center;gap:var(--sp-5);height:58px}.brand{display:flex;align-items:center;gap:var(--sp-2);font-weight:600;letter-spacing:-.02em}.brand-mark{width:16px;height:16px;border-radius:4px;background:conic-gradient(from 220deg,var(--primary),var(--secondary),var(--primary));box-shadow:0 0 0 1px var(--line-strong),0 0 12px var(--primary-glow)}.brand-name{font-size:16px}.topnav{display:flex;align-items:center;gap:var(--sp-2);margin-right:auto}.topnav a{color:var(--text-dim);font-size:14px;font-weight:500;padding:6px 10px;border-radius:var(--radius-sm);transition:color var(--dur-fast),background var(--dur-fast)}.topnav a:hover{color:var(--text);background:var(--surface)}.topnav a.active{color:var(--primary)}.modes-menu{position:relative}.modes-menu-trigger{display:inline-flex;align-items:center;gap:4px;background:none;border:none;cursor:pointer;color:var(--text-dim);font-family:var(--font-ui);font-size:14px;font-weight:500;padding:6px 10px;border-radius:var(--radius-sm);transition:color var(--dur-fast),background var(--dur-fast)}.modes-menu-trigger:hover,.modes-menu-trigger.is-open{color:var(--text);background:var(--surface)}.modes-menu-caret{font-size:10px;line-height:1}.modes-menu-list{position:absolute;top:calc(100% + var(--sp-2));left:0;z-index:60;display:flex;flex-direction:column;min-width:200px;padding:var(--sp-1);background:var(--bg-elevated);box-shadow:var(--shadow);animation:fade-up var(--dur-fast) var(--ease)}.modes-menu-item{text-align:left;background:none;border:none;cursor:pointer;color:var(--text-dim);font-family:var(--font-ui);font-size:14px;font-weight:500;padding:8px 10px;border-radius:var(--radius-sm);transition:color var(--dur-fast),background var(--dur-fast)}.modes-menu-item:hover,.modes-menu-item:focus-visible{color:var(--text);background:var(--surface);outline:none}.topbar-right{display:flex;align-items:center;gap:var(--sp-3)}.topbar-icons{display:flex;align-items:center;gap:var(--sp-1)}.icon-link{color:var(--text-dim);font-size:16px;width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-sm)}button.icon-link{border:none;background:none;padding:0;cursor:pointer;transition:color var(--dur-fast),background var(--dur-fast)}.icon-link:hover{color:var(--text);background:var(--surface)}.signin-btn{background:var(--surface-2);border:1px solid var(--line);color:var(--text);height:34px;padding:0 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:550;cursor:pointer}.signin-btn:hover{border-color:var(--primary);color:var(--primary)}.user-chip{display:flex;align-items:center;gap:var(--sp-3)}.user-name{font-size:13px;font-weight:600}.link-btn{background:none;border:none;color:var(--text-faint);font-size:12px;cursor:pointer}.link-btn:hover{color:var(--danger)}@media (max-width: 720px){.topnav{display:none}}.cm-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:grid;place-items:center;padding:var(--sp-4);background:color-mix(in srgb,var(--void) 78%,transparent)}.cm-modal{width:min(100%,28rem);max-height:min(44rem,calc(100dvh - var(--sp-8)));display:flex;flex-direction:column}.cm-modal .cm-settings{width:100%;overflow-y:auto;flex:1 1 auto;min-height:0}.cm-modal .cm-settings-footer{position:sticky;bottom:0;padding-top:var(--sp-3);background:linear-gradient(to top,var(--surface) calc(100% - var(--sp-2)),color-mix(in srgb,var(--surface) 88%,transparent))}.pick-card{--accent: var(--primary);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-2);box-sizing:border-box;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface) 62%);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line-strong));border-radius:var(--radius);box-shadow:var(--shadow-soft);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none;text-decoration:none;color:inherit;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.pick-card:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--radius) var(--radius) 0 0;background:var(--accent);opacity:.85}.pick-card--draggable{cursor:grab}.pick-card--draggable:hover:not(.pick-card--lifted){transform:translateY(-3px)}.pick-card:hover{border-color:var(--accent);box-shadow:0 10px 24px #00000073,0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}.pick-card:focus-visible{border-color:var(--accent);outline:none}.pick-card--lifted{cursor:grabbing;border-color:var(--accent);filter:brightness(1.08) saturate(1.1);box-shadow:0 22px 48px #0000008c,0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 0 26px color-mix(in srgb,var(--accent) 28%,transparent);z-index:10}.pick-card--lg{padding:var(--sp-4) var(--sp-3);min-height:120px}.pick-card-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);color:var(--text-dim);transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.pick-card--lg .pick-card-icon{width:56px;height:56px}.pick-card:hover .pick-card-icon{color:var(--accent);border-color:var(--accent)}.pick-card-name{font-size:.82rem;font-weight:600;text-align:center;line-height:1.2}.pick-card--lg .pick-card-name{font-size:1rem}.pick-card-sub{font-size:.72rem;color:var(--text-faint);text-align:center}.home-game-card{width:100%;height:100%;box-sizing:border-box;display:flex;flex-direction:column;padding:var(--sp-5) var(--sp-4) var(--sp-4);gap:var(--sp-3);overflow:hidden;-webkit-user-select:none;user-select:none;transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}.home-game-card[role=button]{cursor:pointer}.home-game-card[role=button]:hover{border-color:var(--line-strong)}.home-game-card:focus-visible{outline:none;border-color:var(--primary)}.home-game-card--active{border-color:color-mix(in srgb,var(--primary) 55%,var(--line-strong));box-shadow:var(--shadow-soft),0 0 0 1px color-mix(in srgb,var(--primary) 35%,transparent),0 0 24px var(--primary-glow)}.hgc-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-2);flex:1 1 auto;min-height:0}.hgc-glyph{display:inline-flex;align-items:center;justify-content:center;width:var(--sp-7);height:var(--sp-7);border-radius:var(--radius);color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--surface))}.hgc-name{font-size:clamp(1.375rem,5vw,1.75rem);font-weight:600;line-height:1.1;color:var(--text);margin:0}.hgc-tagline{font-size:.9375rem;font-weight:500;color:var(--primary);margin:0}.hgc-explain{flex:1 1 auto;min-height:0;margin:var(--sp-1) 0 0;font-size:.875rem;line-height:1.45;overflow-y:auto;scrollbar-width:none}.hgc-explain::-webkit-scrollbar{display:none}.hgc-color-summary{margin:0;font-size:.75rem;color:var(--text-dim)}.hgc-stats{width:100%;display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:var(--sp-1) var(--sp-2);padding:var(--sp-2);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-faint);font-size:.6875rem}.hgc-stats strong{color:var(--text);font-weight:600;text-align:right}.hgc-stats-hint{grid-column:1 / -1;color:var(--text-dim)}.hgc-controls{display:flex;flex-direction:column;gap:var(--sp-2);flex-shrink:0;width:100%}.hgc-controls[inert]{pointer-events:none;opacity:.9}.hgc-diff{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-1);padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:999px}.hgc-diff-seg{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;background:none;cursor:pointer;font-family:var(--font-ui);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);padding:5px 0;border-radius:999px;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.hgc-diff-seg:hover{color:var(--text-dim)}.hgc-diff-seg.is-selected{background:var(--surface-2);color:var(--text)}.hgc-diff-seg.is-selected.diff-normal{color:var(--primary)}.hgc-diff-seg.is-selected.diff-hard{color:var(--secondary)}.hgc-seed{display:flex;align-items:center;gap:var(--sp-2)}.hgc-seed-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);flex-shrink:0}.hgc-seed-chip,.hgc-seed-input{flex:1 1 auto;min-width:0;font-size:12px;color:var(--text-dim);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:5px var(--sp-2);text-align:left}.hgc-seed-chip{cursor:text;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:border-color var(--dur-fast) var(--ease)}.hgc-seed-chip:hover{border-color:var(--line-strong)}.hgc-seed-input{color:var(--text);outline:none}.hgc-seed-input:focus{border-color:var(--primary)}.hgc-seed-reroll{flex-shrink:0;display:grid;place-items:center;width:30px;height:30px;color:var(--text-dim);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.hgc-seed-reroll:hover{color:var(--primary);border-color:var(--primary-dim)}.hgc-actions{display:flex;align-items:stretch;gap:var(--sp-2)}.hgc-actions .hgc-start{flex:1 1 auto}.hgc-actions .hgc-daily{flex-shrink:0}.hgc-daily--done,.hgc-start--done{border-color:var(--primary-dim);color:var(--primary)}@media (max-width: 767px){.home-game-card{padding:var(--sp-4) var(--sp-3) var(--sp-3)}}.home-carousel{--carousel-card-width: min(72vw, 280px);--cf-spacing: .98;--cf-depth: .55;--cf-angle: 44;--cf-dim: .34;position:relative;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:0;overflow:hidden}.home-carousel-spotlight{position:absolute;top:50%;left:50%;width:calc(var(--carousel-card-width) * 1.4);height:78%;transform:translate(-50%,-50%);pointer-events:none;z-index:0;background:radial-gradient(ellipse at center,var(--primary-glow) 0%,color-mix(in srgb,var(--primary-glow) 40%,transparent) 40%,transparent 72%);filter:blur(16px)}.home-carousel-stage{position:relative;z-index:1;flex:1;min-width:0;height:100%;perspective:1600px;transform-style:preserve-3d;touch-action:none;cursor:grab}.home-carousel-stage.is-dragging{cursor:grabbing}.home-carousel-slot{position:absolute;top:50%;left:50%;transform-style:preserve-3d;height:min(calc(var(--carousel-card-width) * 19.5 / 9),100%);aspect-ratio:9 / 19.5;transition:transform var(--dur-slow) var(--ease),opacity var(--dur-slow) var(--ease)}.home-carousel-stage.is-dragging .home-carousel-slot{transition:none;will-change:transform}.home-carousel-nav{position:relative;z-index:1100;display:none;flex-shrink:0;min-width:44px;padding:var(--sp-2)}@media (min-width: 768px){.home-carousel-nav{display:inline-flex;align-items:center;justify-content:center}}@media (max-width: 767px){.home-carousel{--cf-spacing: .82;--cf-depth: .4;--cf-angle: 18;--cf-dim: .55;margin:0 calc(-1 * var(--sp-4))}}.page.home{display:flex;flex-direction:column;min-height:0}.home-shell{flex:1;min-height:0;display:flex;flex-direction:column;padding:var(--sp-4) 0 var(--sp-8)}.home .home-carousel{flex:1;min-height:0}@media (max-width: 767px){.page.home{padding:var(--sp-3) 0 0;overflow:hidden;--carousel-max-height: calc(100dvh - 58px - var(--sp-4));--carousel-max-width: min(72vw, 15.5rem);--carousel-card-height: min( var(--carousel-max-height), calc(var(--carousel-max-width) * 19.5 / 9) );--carousel-card-width: calc(var(--carousel-card-height) * 9 / 19.5)}.home-shell{padding:0 0 var(--sp-2)}.home .home-carousel{margin-top:0;align-items:stretch;padding:0}}.game-void{flex:1;min-height:0;display:grid;place-items:center;padding:var(--sp-5) var(--sp-4);background:var(--void)}.game-card{position:relative;aspect-ratio:9 / 19.5;height:100%;max-height:900px;width:auto;max-width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}.game-card:has(.mode-stage):after{content:"";position:absolute;inset-inline:0;bottom:0;height:var(--sp-7);background:linear-gradient(to bottom,transparent,var(--surface));pointer-events:none;z-index:5;opacity:0;transition:opacity var(--dur-fast) var(--ease)}.game-card:has(.mode-stage.has-scroll-below):after{opacity:1}@media (max-width: 640px){.game-void{padding:0}.game-card{aspect-ratio:auto;height:100%;width:100%;max-height:none;border:none;border-radius:0;box-shadow:none}}.mode-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}.mode-bar-left,.mode-bar-right{display:flex;align-items:center}.mode-bar-left{gap:var(--sp-3);min-width:0}.mode-bar-right{gap:var(--sp-2);font-size:.6875rem;flex-shrink:0}.mode-bar-quit{width:2.375rem;padding:0;flex-shrink:0}.mode-name{font-size:1.0625rem;font-weight:600;min-width:0}.diff-pill{font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;padding:var(--sp-1) var(--sp-2);border-radius:999px;font-weight:600;border:1px solid var(--line);color:var(--text-dim)}.diff-normal{color:var(--primary);border-color:var(--primary-dim)}.diff-hard{color:var(--secondary);border-color:var(--secondary-dim)}.daily-pill{font-size:.6875rem;color:var(--text-faint)}.mode-intro-links{display:flex;gap:var(--sp-2);justify-content:center}.mode-intro-links .btn{padding:var(--sp-2);min-width:44px}.mode-intro-links .mil-daily--done{color:var(--primary);border-color:var(--primary-dim)}.mode-intro-panel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3);width:100%;height:100%;min-height:0;padding:var(--sp-6);box-sizing:border-box;color:var(--text-dim)}.mode-intro-panel h2{font-size:clamp(1.375rem,5vw,1.75rem);font-weight:600;line-height:1.15;color:var(--text);margin:0}.mode-intro-panel-desc{flex:1 1 auto;min-height:0;max-width:22rem;margin:0;font-size:.875rem;line-height:1.45}.mode-intro-panel-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-2);width:100%;margin-top:auto;flex-shrink:0;padding-top:var(--sp-2)}.mode-intro-panel-begin{width:100%}.field-error{color:var(--danger);font-size:14px;margin:0}.mode-intro-panel--compact{padding:var(--sp-5) var(--sp-4);gap:var(--sp-2)}.mode-intro-panel--compact .mode-intro-panel-desc{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;flex:1 1 auto}@media (max-width: 767px){.mode-intro-panel{padding:var(--sp-5) var(--sp-4);gap:var(--sp-2)}.mode-intro-panel--compact .mode-intro-panel-desc{-webkit-line-clamp:5}}.result-verdict{margin:0;font-size:14px;color:var(--text-dim);text-align:center;max-width:32ch}.result-rank{margin:0;font-size:13px;display:flex;flex-wrap:wrap;justify-content:center;gap:0 .35ch}.result-rank-pos{color:var(--secondary);font-weight:600}.result-rank-pct{color:var(--text-faint)}.mode-stage{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-4);overflow-y:auto}.mode-instruction{text-align:center;color:var(--text-dim);font-size:15px;margin:0}.field-wrap{position:relative;width:100%;aspect-ratio:1 / 1;display:grid;place-items:center;overflow:hidden}.field-wrap--fill{aspect-ratio:auto;flex:1;min-height:0}.field-wrap--result{aspect-ratio:unset;min-height:0;height:auto;overflow:visible}.split-canvas{display:block;width:100%;height:auto;aspect-ratio:1 / 1;max-width:100%;max-height:100%}.field-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;padding:var(--sp-6);background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:var(--text-dim)}.field-error{color:var(--danger);font-size:14px}.tone-countdown{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2)}.tone-countdown-num{font-size:3rem;font-variant-numeric:tabular-nums;color:var(--primary);letter-spacing:-.02em;line-height:1}.tone-countdown-label{font-size:13px;letter-spacing:.05em}.action-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}.action-target{font-size:13px}.result-panel{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);animation:fade-in var(--dur) var(--ease)}.result-score{display:flex;align-items:baseline;gap:var(--sp-2)}.result-score-num{font-size:64px;font-weight:700;line-height:1}.result-score-max{font-size:18px}.pb-badge{background:var(--primary);color:var(--bg);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:3px 10px;border-radius:999px}.result-explain{margin:0;font-size:14px;color:var(--text-dim);text-align:center}.result-stats{display:flex;gap:var(--sp-5);padding:var(--sp-3) 0}.rs-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);text-align:center}.rs-val{font-size:16px;font-weight:600;text-align:center;margin-top:2px}.result-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:center}.session-rounds{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-2);width:100%}.session-round{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}.session-round-field{width:100%;aspect-ratio:1 / 1;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;display:grid;place-items:center}.session-round-label{font-size:11px;letter-spacing:.06em}.session-round-score{font-size:15px;font-weight:600}.session-scores{display:flex;flex-direction:column;gap:var(--sp-1);width:100%}.session-score-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}.session-score-row-label{font-size:12px;letter-spacing:.06em}.session-score-row-stat{margin-left:auto;font-size:12px;color:var(--text-dim)}.session-score-row-score{font-size:15px;font-weight:600;min-width:3.5ch;text-align:right}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%);background:var(--surface-2);border:1px solid var(--line-strong);color:var(--text);padding:10px 18px;border-radius:999px;font-size:13px;box-shadow:var(--shadow);z-index:80;animation:fade-up var(--dur) var(--ease)}@media (max-width: 640px){.mode-stage{padding-bottom:calc(var(--sp-4) + env(safe-area-inset-bottom))}.result-stats{gap:var(--sp-4)}.result-score-num{font-size:52px}}.area-canvas{display:block;width:100%;height:auto;aspect-ratio:1 / 1;max-width:100%;max-height:100%}.pct-control{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);padding:var(--sp-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg)}.pct-readout{display:flex;align-items:baseline;gap:var(--sp-2)}.pct-num{font-size:44px;font-weight:700;line-height:1;color:var(--accent, var(--primary));letter-spacing:-.01em}.pct-unit{font-size:14px}.pct-row{display:flex;align-items:center;gap:var(--sp-3);width:100%}.pct-track{position:relative;flex:1;height:10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);cursor:pointer}.pct-track:focus-visible{outline:2px solid var(--accent, var(--primary));outline-offset:3px}.pct-fill{position:absolute;top:0;left:0;height:100%;border-radius:999px;background:color-mix(in srgb,var(--accent, var(--primary)) 65%,var(--bg));transition:width var(--dur-fast) var(--ease)}.pct-thumb{position:absolute;top:50%;width:18px;height:18px;border-radius:50%;background:var(--accent, var(--primary));border:2px solid var(--bg-elevated);transform:translate(-50%,-50%);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent, var(--primary)) 16%,transparent);transition:left var(--dur-fast) var(--ease);pointer-events:none}.pct-truth{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--secondary);transform:translate(-50%);pointer-events:none;animation:fade-in var(--dur) var(--ease)}.pct-truth:after{content:"actual";position:absolute;top:-18px;left:50%;transform:translate(-50%);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary);white-space:nowrap}@media (max-width: 640px){.pct-num{font-size:36px}}.angle-canvas{display:block;width:100%;height:100%}.angle-canvas--interactive{cursor:grab;touch-action:none}.angle-canvas--interactive:active{cursor:grabbing}.angle-flash-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:var(--sp-5);pointer-events:none}.angle-flash-label{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint)}.angle-readout{position:absolute;top:var(--sp-4);left:50%;transform:translate(-50%);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.25rem;color:var(--accent, var(--primary));pointer-events:none}.angle-accent:has(.angle-sequence-steps) .angle-readout{top:calc(var(--sp-4) + 32px + var(--sp-2))}.angle-accent{--accent: var(--primary)}.angle-reveal-legend{display:flex;justify-content:center;gap:var(--sp-5);margin-bottom:var(--sp-4)}.angle-reveal-legend-item{display:flex;align-items:center;gap:var(--sp-2);font-size:13px}.angle-reveal-swatch{width:20px;height:3px;border-radius:2px}.field-wrap--result .field-wrap{aspect-ratio:1 / 1;width:100%;max-width:420px;margin:0 auto var(--sp-4)}.angle-sequence-steps{position:absolute;top:var(--sp-4);left:50%;transform:translate(-50%);z-index:2;display:flex;gap:var(--sp-2);pointer-events:none}.angle-sequence-steps .angle-sequence-step{pointer-events:auto}.angle-sequence-step{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--text-dim);font-family:var(--font-mono);font-size:13px;font-variant-numeric:tabular-nums;cursor:default;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.angle-sequence-step--active{border-color:var(--primary);color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,var(--surface))}.angle-sequence-step--done:not(.angle-sequence-step--active){color:var(--text)}.angle-sequence-step:disabled{cursor:default}.angle-sequence-step:not(:disabled):hover{border-color:var(--line-strong);color:var(--text)}.angle-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);width:100%;margin-bottom:var(--sp-4)}.angle-result-cell{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3);min-width:0}.angle-result-cell-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);font-size:12px}.angle-result-cell-field{position:relative;width:100%;aspect-ratio:1 / 1;background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}.angle-result-cell-foot{display:flex;align-items:center;justify-content:center;gap:var(--sp-2);font-size:11px}@media (max-width: 540px){.angle-result-grid{gap:var(--sp-2)}.angle-result-cell{padding:var(--sp-2);gap:var(--sp-1)}.angle-result-cell-head{flex-direction:column;align-items:flex-start;font-size:10px}.angle-result-cell-foot{flex-direction:column;gap:var(--sp-1);font-size:9px}.angle-reveal-legend{gap:var(--sp-4);margin-bottom:var(--sp-3)}}.mode-stage--hold.is-playing .mode-instruction{display:none}.mode-stage--hold .hold-action-bar{position:absolute;inset-inline:0;bottom:0;padding:var(--sp-3) var(--sp-4);pointer-events:none;z-index:1}.mode-stage--hold .hold-action-bar .btn{pointer-events:auto}.hold-field{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-5)}.hold-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3)}.hold-demo-state{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}.hold-pulse{width:80px;height:80px;border-radius:50%;border:2px solid color-mix(in srgb,var(--hold-accent, var(--primary)) 55%,var(--bg));animation:hold-pulse-ring 1.4s var(--ease) infinite}@keyframes hold-pulse-ring{0%{transform:scale(.9);opacity:.5;border-color:color-mix(in srgb,var(--hold-accent, var(--primary)) 55%,var(--bg))}50%{transform:scale(1.1);opacity:1;border-color:var(--hold-accent, var(--primary))}to{transform:scale(.9);opacity:.5;border-color:color-mix(in srgb,var(--hold-accent, var(--primary)) 55%,var(--bg))}}html.reduce-motion .hold-pulse{animation:none;opacity:.7}.hold-label{font-size:14px;letter-spacing:.05em}.hold-btn-wrap{position:relative;display:flex;align-items:center;justify-content:center}.hold-ring{position:absolute;width:140px;height:140px;border-radius:50%;border:1.5px solid var(--hold-accent, var(--primary));pointer-events:none;animation:hold-ring-grow 5s linear forwards,hold-ring-breathe 1.4s var(--ease) infinite}@keyframes hold-ring-grow{0%{transform:scale(1)}to{transform:scale(2)}}@keyframes hold-ring-breathe{0%,to{opacity:.12;border-color:color-mix(in srgb,var(--hold-accent, var(--primary)) 55%,var(--bg))}50%{opacity:.4;border-color:var(--hold-accent, var(--primary))}}html.reduce-motion .hold-ring{animation:none;opacity:.2;transform:scale(1.5)}.hold-btn{width:140px;height:140px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface-2);color:var(--text);font-family:var(--font-ui);font-size:15px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);-webkit-user-select:none;user-select:none;touch-action:none}.hold-btn:hover:not(.hold-btn--active){border-color:color-mix(in srgb,var(--hold-accent, var(--primary)) 55%,var(--bg));background:var(--surface)}.hold-btn--active{border-color:var(--hold-accent, var(--primary));background:color-mix(in srgb,var(--hold-accent, var(--primary)) 35%,var(--surface-2));color:var(--hold-accent, var(--primary));transform:scale(.96);box-shadow:0 0 0 6px color-mix(in srgb,var(--hold-accent, var(--primary)) 12%,transparent)}html.reduce-motion .hold-btn{transition:none}.hold-done-state{font-size:14px}.hold-progress-track{width:min(320px,80%);height:3px;background:var(--line);border-radius:999px;overflow:hidden}.hold-progress-bar{height:100%;background:var(--hold-accent, var(--primary));border-radius:999px;transition:width .05s linear}.hold-timeline{width:100%;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.hold-timeline-row{display:flex;align-items:center;gap:var(--sp-3)}.hold-timeline-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);width:48px;flex-shrink:0;text-align:right}.hold-timeline-track{flex:1;height:6px;background:var(--line);border-radius:999px;overflow:hidden}.hold-timeline-fill{height:100%;border-radius:999px;transition:width .6s var(--ease)}.hold-timeline-fill--target{background:var(--primary)}.hold-timeline-fill--player{background:var(--secondary)}.hold-timeline-ms{font-size:12px;font-family:var(--font-mono);color:var(--text-dim);width:52px;flex-shrink:0}.hold-next{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}.mode-stage--drop .field-wrap{display:block}.mode-stage--drop .field-wrap--fill{display:flex;flex-direction:column;justify-content:center}.drop-field{display:flex;flex-direction:column;justify-content:center;align-items:stretch;width:100%;min-height:0}.mode-stage--drop .field-wrap--fill .drop-field{flex:1 1 auto}.drop-field--live{cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.mode-stage--drop .field-wrap--fill .drop-canvas{flex:0 0 auto;width:100%;height:auto;aspect-ratio:4 / 5;max-height:min(44vh,380px);min-height:200px}.drop-canvas{display:block;width:100%;height:100%}.mode-stage--drop.is-playing{padding:0;gap:0}.mode-stage--drop.is-playing .mode-bar{padding:var(--sp-3) var(--sp-4) 0}.mode-stage--drop.is-playing .mode-instruction{display:none}.mode-stage--drop .drop-action-bar{position:absolute;inset-inline:0;bottom:0;padding:var(--sp-3) var(--sp-4);pointer-events:none;z-index:1}.mode-stage--drop .field-wrap--result{aspect-ratio:unset;flex-shrink:0;min-height:0;height:auto;display:flex;flex-direction:column;overflow:visible}.mode-stage--drop .field-wrap--result .drop-canvas{flex:0 0 auto;width:100%;height:auto;aspect-ratio:4 / 5;max-height:min(42vh,360px);min-height:180px}.mode-stage--drop .field-wrap--result .result-panel{background:none;border:none;border-radius:0;width:100%;box-sizing:border-box}.drop-watch{margin:0;font-size:15px;color:var(--text-dim);letter-spacing:.01em}.drop-watch--solo{font-size:18px;color:var(--text)}.tune-field{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-5);width:100%;height:100%;padding:var(--sp-6) var(--sp-5);box-sizing:border-box}.tune-demo-state{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3)}.tune-pulse{width:72px;height:72px;border-radius:50%;background:color-mix(in srgb,var(--accent, var(--primary)) 35%,var(--surface-2));animation:tune-breathe 1.4s ease-in-out infinite}@keyframes tune-breathe{0%,to{transform:scale(.92);opacity:.6}50%{transform:scale(1.08);opacity:1}}html.reduce-motion .tune-pulse{animation:none;opacity:.7}.tune-slider-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);width:100%;max-width:520px}.tune-hz-display{font-size:2rem;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--accent, var(--primary));letter-spacing:-.02em;min-width:7ch;text-align:center}.tune-hz-unit{font-size:1rem;color:var(--text-dim);margin-left:var(--sp-1)}.tune-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;border-radius:var(--radius-sm);background:var(--surface-2);outline:none;cursor:pointer;transition:background var(--dur-fast) var(--ease)}.tune-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent, var(--primary));cursor:grab;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent, var(--primary)) 45%,var(--bg));transition:box-shadow var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}.tune-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.15);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent, var(--primary)) 45%,var(--bg))}.tune-slider::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:var(--accent, var(--primary));cursor:grab;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent, var(--primary)) 45%,var(--bg))}.tune-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--accent, var(--primary))}.tune-range-labels{display:flex;justify-content:space-between;width:100%;color:var(--text-faint);font-size:.72rem;font-family:var(--font-mono)}.field-wrap--result{aspect-ratio:unset;min-height:0;height:auto}.field-wrap--result .result-panel{background:none;border:none;border-radius:0;width:100%;box-sizing:border-box}.tune-wave-wrap{width:100%;display:flex;justify-content:center;opacity:.85}.pitch-compare{display:flex;gap:var(--sp-4);justify-content:center;flex-wrap:wrap;margin-bottom:var(--sp-2)}.pitch-compare-item{display:flex;flex-direction:column;align-items:center;gap:var(--sp-1)}.pitch-compare-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)}.pitch-compare-val{font-family:var(--font-mono);font-size:1.4rem;font-variant-numeric:tabular-nums}.pitch-compare-val--target{color:var(--accent, var(--primary))}.pitch-compare-val--player{color:var(--text)}.pitch-compare-divider{align-self:center;color:var(--line-strong);font-size:1.4rem;padding-bottom:4px}.pitch-wave-compare{display:flex;flex-direction:column;gap:var(--sp-2);width:100%;margin-bottom:var(--sp-2)}.pitch-wave-compare-row{display:grid;grid-template-columns:32px 52px 1fr 88px;align-items:center;gap:var(--sp-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-1) var(--sp-3)}.tone-play-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line-strong);background:var(--surface-2);color:inherit;cursor:pointer;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}.tone-play-btn:hover{border-color:currentColor;transform:scale(1.06)}.tone-play-btn:active{transform:scale(.94)}.tone-play-btn--active{background:var(--bg-elevated);border-color:currentColor;box-shadow:0 0 0 3px var(--primary-glow)}.pitch-wave-compare-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.pitch-wave-compare-hz{font-size:.82rem;font-variant-numeric:tabular-nums;text-align:right}.pitch-reference{display:inline-flex;align-items:center;gap:var(--sp-2)}.field-wrap:has(.order-stage){display:flex;align-items:stretch;justify-content:stretch}.order-stage{display:flex;flex-direction:column;align-items:stretch;width:100%;height:100%;min-height:0;padding:var(--sp-2) var(--sp-3);box-sizing:border-box}.order-rail{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);flex:1 1 auto;width:100%;min-height:0}.order-rail-end{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;flex:0 0 auto;line-height:1}.order-track{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;flex:1 1 auto;gap:var(--sp-2);width:100%;min-height:0;container-type:size;padding:var(--sp-1) var(--sp-2)}.order-hint{flex:0 0 auto;margin:0;padding-top:var(--sp-2);font-size:.74rem;text-align:center}.tone-card{--accent: var(--primary);position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--sp-3);flex:0 0 auto;width:100%;min-height:clamp(2.75rem,12cqh,3.75rem);padding:var(--sp-2) var(--sp-3);box-sizing:border-box;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface) 62%);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line-strong));border-radius:var(--radius);box-shadow:var(--shadow-soft);cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.tone-card:before{content:"";position:absolute;inset:0 0 auto 0;height:3px;border-radius:var(--radius) var(--radius) 0 0;background:var(--accent);opacity:.85}.tone-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 24px #00000073,0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)}.tone-card:focus-visible{border-color:var(--accent)}.tone-card--playing{border-color:var(--accent);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 26%,var(--bg-elevated)),var(--bg-elevated) 70%);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}.tone-card--lifted{cursor:grabbing;border-color:var(--accent);filter:brightness(1.08) saturate(1.1);box-shadow:0 22px 48px #0000008c,0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),0 0 26px color-mix(in srgb,var(--accent) 28%,transparent)}.tone-card-body{display:flex;flex-direction:column;gap:var(--sp-1);flex:1 1 auto;min-width:0}.tone-card-label{font-size:clamp(.82rem,4.5cqh,.95rem);font-weight:600;color:var(--text);white-space:nowrap}.tone-card-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:clamp(2rem,10cqh,2.75rem);height:clamp(2rem,10cqh,2.75rem);border-radius:50%;border:1px solid var(--line-strong);color:var(--text-dim);transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}.tone-card:hover .tone-card-icon,.tone-card-icon.is-playing{color:var(--accent);border-color:var(--accent)}.tone-card-icon.is-playing{animation:order-breathe 1.4s ease-in-out infinite}@keyframes order-breathe{0%,to{box-shadow:0 0 color-mix(in srgb,var(--accent) 24%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 24%,transparent)}}html.reduce-motion .tone-card-icon.is-playing{animation:none}.tone-card-plays{font-size:clamp(.65rem,3.5cqh,.75rem);color:var(--secondary);line-height:1}.order-compare{display:flex;flex-direction:column;gap:var(--sp-3);width:100%;margin-bottom:var(--sp-3)}.order-compare-row{display:flex;flex-direction:column;gap:var(--sp-2)}.order-compare-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}.order-compare-cards{display:flex;gap:var(--sp-2)}.order-chip{--accent: var(--primary);position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-1);flex:1 1 0;padding:var(--sp-2) var(--sp-1);background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 14%,var(--surface)),var(--surface) 65%);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:var(--radius-sm);color:var(--text);font-weight:600;font-size:.9rem;font-family:var(--font-ui);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}.order-chip:hover{border-color:var(--accent);transform:translateY(-2px)}.order-chip:active{transform:translateY(0)}.order-chip-play{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line-strong));color:var(--accent);transition:box-shadow var(--dur-fast) var(--ease)}.order-chip-letter{line-height:1}.order-chip--playing .order-chip-play{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}.order-chip--playing{border-color:var(--accent)}.order-chip--right{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}.order-chip--wrong{border-color:var(--danger);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--danger) 55%,transparent)}.order-chip--correct{border-color:color-mix(in srgb,var(--accent) 45%,var(--line-strong))}.order-chip-hz{font-size:.68rem;font-weight:400;color:var(--text-faint)}html.hc .tone-card{border-color:var(--text)}.cm-field{display:flex;flex-direction:column;flex:1;width:100%;min-height:0;background:var(--field-color, var(--surface));transition:background var(--dur-fast) var(--ease)}.cm-field-body{flex:1;position:relative;min-height:0}.cm-float-banner{display:flex;align-items:center;justify-content:space-between;margin:var(--sp-4);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.cm-target-chip{position:absolute;top:var(--sp-4);right:var(--sp-4);display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 78%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.cm-target-chip-swatch{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--chip-color);border:1px solid color-mix(in srgb,var(--text) 12%,transparent);flex-shrink:0}.cm-target-chip-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);font-weight:600}.cm-preview-timer{font-size:14px;color:var(--primary)}.cm-split-swatch{width:100%}.cm-split-swatch-fill{position:relative;width:100%;aspect-ratio:5 / 4;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden}.cm-split-half{position:absolute;top:0;right:0;bottom:0;left:0}.cm-split-half--target{background:var(--target-color);clip-path:polygon(0 0,100% 0,0 100%)}.cm-split-half--guess{background:var(--guess-color);clip-path:polygon(100% 0,100% 100%,0 100%)}.cm-split-seam{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.cm-split-seam line{stroke:color-mix(in srgb,var(--text) 22%,transparent);stroke-width:1}.cm-split-swatch--large .cm-split-swatch-fill{aspect-ratio:1 / 1;max-height:min(280px,56vw)}.cm-split-swatch-corner{position:absolute;z-index:1;display:flex;flex-direction:column;gap:2px;padding:var(--sp-2);max-width:46%}.cm-split-swatch-corner--target{top:0;left:0;align-items:flex-start}.cm-split-swatch-corner--guess{right:0;bottom:0;align-items:flex-end;text-align:right}.cm-split-swatch-tag{font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;padding:2px 6px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);border:1px solid color-mix(in srgb,var(--line) 60%,transparent)}.cm-split-swatch-hex{font-size:10px;padding:1px 5px;border-radius:var(--radius-sm);background:color-mix(in srgb,var(--bg) 65%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--text-dim)}.cm-session-rounds{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:var(--sp-3);width:100%;margin:var(--sp-2) 0 var(--sp-4)}.cm-session-rounds--solo{grid-template-columns:1fr;max-width:360px;margin-inline:auto}.cm-session-round{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-2)}.cm-session-round-label{font-size:11px;color:var(--text-faint);text-align:center}.cm-session-round-score{font-size:18px;font-weight:600;text-align:center}.cm-session-round-meta{font-size:11px;text-align:center}.cm-field--input{--cm-dock-height: clamp(9rem, 30vh, 12.5rem)}.cm-field-actions{flex-shrink:0;padding:0}.cm-done-btn{width:100%;border-radius:0;border-left:none;border-right:none;border-bottom:none}.cm-field-dock{margin-top:auto;flex-shrink:0;height:var(--cm-dock-height);border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent);overflow:hidden}.cm-controls{display:flex;flex-direction:column;gap:0;height:100%;margin:0;padding:0}.cm-control-strip{position:relative;flex:1 1 0;min-height:0;width:100%;display:block;cursor:ew-resize;overflow:hidden}.cm-control-strip+.cm-control-strip{border-top:1px solid color-mix(in srgb,var(--bg) 35%,transparent)}.cm-control-strip-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none}.cm-control-strip-marker{position:absolute;top:0;bottom:0;z-index:2;width:1.5px;transform:translate(-50%);pointer-events:none;background:var(--text);box-shadow:0 0 0 1px color-mix(in srgb,var(--bg-elevated) 75%,transparent),0 0 4px color-mix(in srgb,var(--bg) 45%,transparent)}.cm-control-strip-thumb{position:absolute;top:50%;left:50%;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);background:var(--bg-elevated);border:1.5px solid var(--text);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--bg-elevated) 80%,transparent),0 1px 4px color-mix(in srgb,var(--bg) 50%,transparent)}.cm-control-strip-meta{position:absolute;top:var(--sp-1);left:var(--sp-2);right:var(--sp-2);z-index:3;display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-1);pointer-events:none}.cm-control-label{font-size:11px;font-weight:700;color:var(--text);letter-spacing:.06em;text-shadow:0 0 8px color-mix(in srgb,var(--bg) 80%,transparent),0 1px 2px color-mix(in srgb,var(--bg) 65%,transparent)}.cm-control-val{font-size:10px;color:var(--text);text-shadow:0 0 8px color-mix(in srgb,var(--bg) 80%,transparent),0 1px 2px color-mix(in srgb,var(--bg) 65%,transparent)}.cm-control-strip:has(.cm-slider:focus-visible){outline:2px solid var(--primary);outline-offset:-2px}.cm-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;width:100%;height:100%;margin:0;background:transparent;cursor:ew-resize;opacity:0}.cm-slider::-webkit-slider-container{height:100%}.cm-slider::-webkit-slider-runnable-track{width:100%;height:100%;border:none;border-radius:0;background:var(--track-gradient);box-shadow:none}.cm-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;margin-top:calc(50% - 9px);border-radius:50%;background:var(--bg-elevated);border:2px solid color-mix(in srgb,var(--text) 18%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--bg) 50%,transparent),0 2px 8px color-mix(in srgb,var(--bg) 55%,transparent);transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease)}.cm-slider:active::-webkit-slider-thumb{transform:scale(1.08)}.cm-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--primary-glow),0 0 0 1px color-mix(in srgb,var(--bg) 50%,transparent)}.cm-slider::-moz-range-track{width:100%;height:100%;border:none;border-radius:0;background:var(--track-gradient);box-shadow:none}.cm-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--bg-elevated);border:2px solid color-mix(in srgb,var(--text) 18%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--bg) 50%,transparent),0 2px 8px color-mix(in srgb,var(--bg) 55%,transparent)}.cm-slider:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--primary-glow),0 0 0 1px color-mix(in srgb,var(--bg) 50%,transparent)}.cm-slider:disabled{opacity:.45;cursor:not-allowed}.cm-round-bar{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-dim)}.cm-round-dots{display:flex;gap:var(--sp-2)}.cm-round-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background var(--dur-fast) var(--ease)}.cm-round-dot--done{background:var(--primary-dim)}.cm-round-dot--current{background:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.cm-settings{display:flex;flex-direction:column;gap:var(--sp-5);max-width:480px;margin:0 auto;padding:var(--sp-6) 0}.cm-settings--modal{gap:var(--sp-4);padding:var(--sp-5);max-width:none}.cm-settings-group{display:flex;flex-direction:column;gap:var(--sp-2)}.cm-settings-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);font-weight:600}.cm-option-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--sp-2)}.cm-option-row .btn{width:100%;justify-content:center}.cm-option-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:var(--sp-2)}.cm-option-grid .btn{width:100%;justify-content:center}.cm-option{padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--text-dim);font-size:13px;font-weight:500;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)}.cm-option:hover{border-color:var(--line-strong);color:var(--text)}.cm-option--active{border-color:var(--primary-dim);color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface))}.cm-option--disabled{opacity:.45;cursor:not-allowed}.cm-settings-note{font-size:13px;line-height:1.5}.cm-settings-title{margin:0 0 var(--sp-2)}.cm-settings-title--modal{margin:0;font-size:1.125rem;font-weight:600}.cm-settings-lead{margin-bottom:var(--sp-4)}.cm-settings-footer{margin-top:var(--sp-1)}.cm-settings-start{width:100%}.mode-stage--color{position:relative}.field-wrap--color{aspect-ratio:auto;flex:1;min-height:320px;background:transparent;border:1px solid color-mix(in srgb,var(--line) 70%,transparent);border-radius:var(--radius-lg);display:flex;flex-direction:column}.field-wrap--color .cm-field{flex:1;min-height:0;border-radius:inherit}.mode-stage--color.mode-stage--playing{padding:0;gap:0;overflow:hidden}.mode-stage--color.mode-stage--playing .mode-instruction,.mode-stage--color.mode-stage--playing .cm-round-bar{display:none}.mode-stage--color.mode-stage--playing .mode-bar{position:absolute;top:0;left:0;right:0;z-index:3;padding:var(--sp-2) var(--sp-4);background:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent)}.mode-stage--color.mode-stage--playing .field-wrap--color{flex:1;min-height:0;border:none;border-radius:0;box-shadow:none}.mode-stage--color.mode-stage--playing .cm-float-banner,.mode-stage--color.mode-stage--playing .cm-target-chip{margin-top:calc(44px + var(--sp-2))}.draw-canvas{display:block;width:100%;height:auto;aspect-ratio:1 / 1;max-width:100%;max-height:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-elevated)}.draw-canvas--live{cursor:crosshair;touch-action:none;border-color:var(--line-strong)}.draw-legend{display:flex;justify-content:center;gap:var(--sp-5);width:100%;margin-bottom:var(--sp-1);font-size:12px;pointer-events:none}.draw-legend-item{display:flex;align-items:center;gap:var(--sp-2);color:var(--text-dim)}.draw-legend-swatch{width:18px;height:3px;border-radius:2px}.gauntlet-transition{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-3);min-height:360px;padding:var(--sp-6);text-align:center}.gauntlet-transition-glyph{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--accent)}.gauntlet-countdown{font-size:2rem;color:var(--primary)}.gauntlet-summary{padding:var(--sp-4)}.gauntlet-breakdown{display:flex;flex-direction:column;gap:var(--sp-2);width:100%;margin:var(--sp-4) 0}.gauntlet-breakdown-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));color:var(--text)}.gauntlet-breakdown-glyph{display:inline-flex;color:var(--accent)}.gauntlet-breakdown-row .gauntlet-breakdown-score{color:var(--accent);font-weight:600}.lb-title{font-size:clamp(26px,4vw,38px);margin:var(--sp-2) 0 var(--sp-5)}.lb-controls{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4);min-width:0}.seg{display:inline-flex;background:var(--bg-elevated);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px;gap:2px}.lb-mode-seg{flex:1 1 100%;max-width:100%;flex-wrap:wrap}.seg button{background:transparent;border:none;color:var(--text-dim);padding:7px 12px;border-radius:4px;font-size:13px;font-weight:550;cursor:pointer}.seg button.active{background:var(--surface-2);color:var(--text)}.lb-table{overflow:hidden}.lb-head,.lb-row{display:grid;grid-template-columns:44px minmax(0,1fr) 90px 80px 80px 90px;align-items:center;padding:12px var(--sp-5);min-width:0}.lb-head{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);border-bottom:1px solid var(--line)}.lb-row{border-bottom:1px solid var(--line);font-size:14px}.lb-row:last-child{border-bottom:none}.lb-row:nth-child(2) .lb-rank{color:var(--primary);font-weight:700}.num{text-align:right;font-variant-numeric:tabular-nums}.lb-rank{font-family:var(--font-mono);color:var(--text-dim)}.lb-score{font-weight:600;color:var(--primary)}.lb-name{display:flex;align-items:center;gap:var(--sp-2);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-guest{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);border:1px solid var(--line);border-radius:999px;padding:1px 6px}.lb-empty{padding:var(--sp-7);text-align:center;color:var(--text-faint)}@media (max-width: 640px){.lb-mode-seg button{padding:6px 10px;font-size:12px}.lb-head,.lb-row{grid-template-columns:32px minmax(0,1fr) 64px 64px;padding-inline:var(--sp-3)}.lb-head span:nth-child(5),.lb-head span:nth-child(6),.lb-row span:nth-child(5),.lb-row span:nth-child(6){display:none}}.profile-title{font-size:clamp(26px,4vw,38px);margin:var(--sp-2) 0 var(--sp-5)}.profile-guest{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-5);border-color:var(--primary-dim)}.profile-guest p{margin:4px 0 0;font-size:14px}.profile-empty{padding:var(--sp-7);text-align:center;display:flex;flex-direction:column;gap:var(--sp-3);align-items:center}.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-4)}.stat-card{padding:var(--sp-5)}.stat-mode{font-size:13px;color:var(--text-dim);margin-bottom:var(--sp-3)}.stat-best{display:flex;align-items:baseline;gap:var(--sp-2)}.stat-best-num{font-size:38px;font-weight:600;font-family:var(--font-mono);color:var(--primary)}.stat-meta{margin-top:var(--sp-3);display:flex;gap:var(--sp-2);font-size:12px;color:var(--text-dim)}.profile-section{font-size:16px;margin:var(--sp-6) 0 var(--sp-3)}.recent-list{overflow:hidden}.recent-row{display:grid;grid-template-columns:1fr 80px 80px 90px;padding:11px var(--sp-5);border-bottom:1px solid var(--line);font-size:14px}.recent-row:last-child{border-bottom:none}.play-link{color:var(--primary);font-weight:600}.settings{max-width:720px}.settings-title{font-size:clamp(26px,4vw,38px);margin:var(--sp-2) 0 var(--sp-5)}.settings-block{padding:var(--sp-5);margin-bottom:var(--sp-4)}.settings-h{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--text-faint);margin-bottom:var(--sp-4)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) 0;border-top:1px solid var(--line)}.setting-row:first-of-type{border-top:none}.setting-label{font-weight:550;font-size:15px}.setting-hint{font-size:13px;margin-top:2px}.setting-note{font-size:12px;margin:var(--sp-4) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--line)}.seg{display:flex;gap:var(--sp-2);flex-shrink:0}.vol{display:flex;align-items:center;gap:var(--sp-3)}.vol input[type=range]{accent-color:var(--primary);width:130px}.switch{width:46px;height:26px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-strong);position:relative;cursor:pointer;transition:background var(--dur);flex-shrink:0}.switch.on{background:var(--primary);border-color:var(--primary)}.knob{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text);transition:transform var(--dur) var(--ease)}.switch.on .knob{transform:translate(20px);background:#06201d}.about{max-width:680px}.about-title{font-size:clamp(26px,4vw,38px);margin:var(--sp-2) 0 var(--sp-5);line-height:1.15}.about-lead{font-size:17px;margin-bottom:var(--sp-6)}.about-h{font-size:20px;margin:var(--sp-6) 0 var(--sp-3)}.about p{font-size:15px;line-height:1.65}.curve-table{margin:var(--sp-4) 0;overflow:hidden}.curve-row{display:flex;justify-content:space-between;padding:10px var(--sp-5);border-bottom:1px solid var(--line);font-size:14px}.curve-row:last-child{border-bottom:none}.curve-score{color:var(--primary);font-weight:600}.about-foot{font-size:13px}:root{--bg: #0c0e0f;--bg-elevated: #141719;--surface: #181b1d;--surface-2: #1f2326;--line: #2a2f33;--line-strong: #3a4146;--void: #050607;--scrim: color-mix(in srgb, var(--bg) 80%, transparent);--topbar-bg: color-mix(in srgb, var(--bg) 85%, transparent);--text: #e9edee;--text-dim: #9aa3a8;--text-faint: #6b7479;--primary: #54d6c8;--primary-dim: #2f8c83;--primary-glow: rgba(84, 214, 200, .16);--secondary: #e6b25a;--secondary-dim: #9c7838;--danger: #e06a5a;--tone-a: #5ea9d6;--tone-b: #54d6c8;--tone-c: #8ad06a;--tone-d: #e6b25a;--tone-e: #d77fb0;--region-a: rgba(84, 214, 200, .22);--region-a-line: #54d6c8;--region-b: rgba(230, 178, 90, .2);--region-b-line: #e6b25a;--font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--sp-7: 48px;--sp-8: 64px;--radius: 10px;--radius-sm: 6px;--radius-lg: 16px;--shadow: 0 8px 30px rgba(0, 0, 0, .4);--shadow-soft: 0 2px 12px rgba(0, 0, 0, .25);--ease: cubic-bezier(.22, 1, .36, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--dur-fast: .12s;--dur: .22s;--dur-slow: .42s;--maxw: 1080px}html.light{--bg: #f3f1ed;--bg-elevated: #ffffff;--surface: #ffffff;--surface-2: #f4f2ee;--line: #ddd9d2;--line-strong: #c4bfb5;--void: #e6e3dd;--text: #16191a;--text-dim: #565d62;--text-faint: #878d92;--primary: #15a394;--primary-dim: #0f7a6f;--primary-glow: rgba(21, 163, 148, .18);--secondary: #b07d28;--secondary-dim: #876019;--danger: #c4503f;--shadow: 0 8px 30px rgba(20, 20, 20, .14);--shadow-soft: 0 2px 12px rgba(20, 20, 20, .1)}html.hc{--bg: #000;--surface: #0a0c0d;--void: #000;--text: #ffffff;--text-dim: #cfd6da;--line: #45505a;--primary: #6ff0e0}html.light.hc{--bg: #ffffff;--surface: #ffffff;--void: #d6d2ca;--text: #000000;--text-dim: #2c3236;--line: #7a766e;--primary: #0c6f64}html.reduce-motion *{animation-duration:.001ms!important;transition-duration:.001ms!important}*{box-sizing:border-box}html,body{height:100%}html,body{overscroll-behavior-x:none}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-.01em}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background:radial-gradient(1200px 700px at 50% -10%,rgba(84,214,200,.05),transparent 70%),radial-gradient(900px 600px at 100% 110%,rgba(230,178,90,.03),transparent 70%)}html.light body:before{background:radial-gradient(1200px 700px at 50% -10%,rgba(21,163,148,.05),transparent 70%),radial-gradient(900px 600px at 100% 110%,rgba(176,125,40,.04),transparent 70%)}#root{position:relative;z-index:1;display:flex;flex-direction:column;height:100vh;height:100dvh}a{color:inherit;text-decoration:none}h1,h2,h3{font-weight:600;letter-spacing:-.02em;margin:0}button{font-family:inherit}::selection{background:var(--primary-glow)}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}.dim{color:var(--text-dim)}.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--sp-5)}.page{flex:1;width:100%;padding:var(--sp-7) 0 var(--sp-8);animation:fade-up var(--dur) var(--ease)}@keyframes fade-up{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);font-weight:600}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}.play-main{flex:1;display:flex;flex-direction:column;min-height:0}.app-footer{padding:var(--sp-6) var(--sp-5);color:var(--text-faint);font-size:12px;display:flex;justify-content:space-between}@media (max-width: 640px){.app-footer{padding-block:var(--sp-2);padding-inline:0;font-size:11px}body:has(.home) .app-footer{display:none}}body:has(.mode-stage.is-playing){background:var(--void)}body:has(.mode-stage.is-playing) .topbar,body:has(.mode-stage.is-playing) .app-footer{visibility:hidden;pointer-events:none}