:root{color:#f4f0e8;font-synthesis:none;text-rendering:optimizelegibility;--background:#08090b;--surface:#0d0e11;--surface-raised:#121318;--text:#f4f0e8;--muted:#aaa6af;--subtle:#77737d;--border:#3a3840;--border-strong:#73657f;--lime:#c8ff2e;--lime-ink:#111604;--lilac:#b89adb;--danger:#ff846f;--warning:#ffd477;--page-gutter:clamp(1.1rem, 3vw, 3rem);--max-width:1500px;--ease:.18s cubic-bezier(.2, .7, .2, 1);background:#08090b;font-family:Helvetica Neue,Segoe UI,Helvetica,Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--background);min-width:320px}body{background:var(--background);min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit;text-underline-offset:.22em}a:hover{color:var(--lime)}button:focus-visible,a:focus-visible{outline:3px solid var(--lime);outline-offset:4px}.site-header{border-bottom:1px solid var(--border);width:100%}.header-inner{width:min(100%, var(--max-width));min-height:64px;padding:0 var(--page-gutter);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.brand{color:var(--text);letter-spacing:-.045em;align-items:baseline;font-size:1.48rem;font-weight:700;text-decoration:none;display:inline-flex}.brand-domain{color:var(--lime);letter-spacing:-.03em;margin-left:.18rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.64em;font-weight:500}.site-nav{color:var(--text);gap:clamp(1.25rem,3vw,3rem);font-size:.94rem;font-weight:550;display:flex}.site-nav a{text-decoration:none}.page{width:min(100%, var(--max-width));padding:0 var(--page-gutter);margin:0 auto}.intro{grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr);align-items:end;gap:clamp(2rem,4vw,5rem);padding:clamp(1.55rem,3.4vh,2.6rem) 0 1.65rem;display:grid}.intro h1{max-width:9ch;color:var(--text);letter-spacing:-.075em;margin:0;font-size:clamp(4.6rem,8.3vw,8.7rem);font-weight:760;line-height:.82}.intro-copy{color:var(--text);letter-spacing:-.025em;margin:1.05rem 0 0;font-size:clamp(1.15rem,1.7vw,1.52rem);font-weight:430;line-height:1.3}.identity-copy{max-width:62ch;color:var(--muted);margin:.7rem 0 0;font-size:.84rem;line-height:1.45}.start-zone{padding-bottom:.1rem}.start-button{border:2px solid var(--lime);width:100%;min-height:70px;color:var(--lime-ink);background:var(--lime);cursor:pointer;letter-spacing:-.025em;transition:transform var(--ease), box-shadow var(--ease), background var(--ease);border-radius:5px;justify-content:center;align-items:center;padding:.85rem 1.25rem;font-size:clamp(1rem,1.35vw,1.28rem);font-weight:720;display:inline-flex;box-shadow:0 0 0 3px #0000}.start-button:hover:not(:disabled){box-shadow:0 0 0 3px var(--background), 0 0 0 5px var(--lime);transform:translateY(-2px)}.start-button:active:not(:disabled){transform:translateY(0)}.start-button:disabled{color:#1b2011;cursor:progress;opacity:.72;background:#91ad42}.start-icons{gap:.42rem;margin-right:.75rem;display:inline-flex}.microcopy{color:var(--muted);gap:.52rem;margin:.82rem 0 0;font-size:.84rem;line-height:1.35;display:grid}.microcopy span{align-items:flex-start;gap:.52rem;display:flex}.microcopy .icon{flex:none;margin-top:.05rem}.mediapipe-consent{color:var(--subtle);font-size:.74rem}.instrument-shell{width:100%}.instrument-grid{border:1px solid var(--border-strong);background:var(--surface);border-radius:6px 6px 0 0;grid-template-columns:minmax(380px,1.35fr) minmax(150px,.36fr) minmax(330px,.9fr);min-height:clamp(350px,43vh,455px);display:grid;overflow:hidden}.camera-stage{border-right:1px solid var(--border);isolation:isolate;background:#09090d;min-width:0;min-height:340px;position:relative;overflow:hidden}.camera-stage:after{z-index:-1;content:"";background:radial-gradient(circle at 50% 45%,#b89adb12,#0000 50%);position:absolute;inset:0}.camera-video,.hand-overlay,.camera-grid{width:100%;height:100%;position:absolute;inset:0}.camera-video{object-fit:cover;transform:scaleX(-1)}.camera-video.is-hidden{opacity:0}.camera-grid{z-index:1;opacity:.11;pointer-events:none;background-image:linear-gradient(90deg,#b89adb 1px,#0000 1px),linear-gradient(#b89adb 1px,#0000 1px);background-size:16.666% 25%}.hand-overlay{z-index:2;pointer-events:none}.tracking-chip,.inference-readout{z-index:3;border:1px solid var(--border);min-height:31px;color:var(--muted);letter-spacing:.01em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#08090bd1;border-radius:4px;align-items:center;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.72rem;display:inline-flex;position:absolute;top:1rem}.tracking-chip{gap:.5rem;padding:0 .7rem;left:1rem}.tracking-chip--tracking{color:var(--lime)}.tracking-chip--lost{color:var(--warning)}.inference-readout{padding:0 .6rem;right:1rem}.status-dot{background:currentColor;border-radius:50%;flex:none;width:.58rem;height:.58rem;display:inline-block}.metric-rail{border-right:1px solid var(--border);background:#0b0c0f;grid-template-rows:auto auto 1fr auto;min-width:0;display:grid}.metric{border-bottom:1px solid var(--border);flex-direction:column;gap:.35rem;min-width:0;padding:1.05rem 1rem;display:flex}.metric--gate{justify-content:center}.metric-label{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.68rem}.metric-value{color:var(--text);letter-spacing:-.08em;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:clamp(1.8rem,3vw,3rem);font-weight:500;line-height:1}.metric-value--accent{color:var(--lime)}.metric-detail{color:var(--subtle);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.67rem}.tone-meter{background:#292a2e;width:100%;height:5px;margin-top:.4rem;overflow:hidden}.tone-meter span{background:var(--lime);height:100%;transition:width 90ms linear;display:block}.gate-state{color:var(--lime);align-items:center;gap:.48rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.94rem;font-weight:500;display:flex}.stop-button{border:1px solid var(--lilac);min-height:48px;color:var(--text);cursor:pointer;transition:color var(--ease), background var(--ease);background:0 0;border-radius:4px;justify-content:center;align-items:center;margin:.8rem;font-size:.84rem;font-weight:600;display:flex}.stop-button:hover{color:var(--background);background:var(--lilac)}.stop-square{background:currentColor;width:.58rem;height:.58rem;margin-right:.55rem}.signal-panel{background:#0a0b0e;grid-template-rows:1fr 1fr;min-width:0;display:grid}.signal-panel>div{min-width:0;padding:1.25rem 1.35rem}.signal-panel>div+div{border-top:1px solid var(--border)}.axis-labels{color:var(--muted);justify-content:space-between;margin:.9rem 0 .25rem;font-size:.68rem;display:flex}.pitch-lane{grid-template-columns:repeat(8,minmax(0,1fr));align-items:start;padding-top:1.2rem;display:grid;position:relative}.pitch-line{background:var(--border-strong);height:1px;position:absolute;top:1.52rem;left:4%;right:4%}.pitch-step{z-index:1;color:var(--subtle);justify-items:center;gap:.75rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.63rem;display:grid;position:relative}.pitch-dot{background:var(--lilac);border:2px solid #0a0b0e;border-radius:50%;width:8px;height:8px;display:block}.pitch-step--active{color:var(--lime)}.pitch-step--active .pitch-dot{border:2px solid var(--lime);background:var(--surface);width:18px;height:18px;margin-top:-5px;box-shadow:0 0 0 2px #0a0b0e}.signal-block{flex-direction:column;min-height:0;display:flex}.signal-trace{flex:auto;width:100%;min-height:90px;margin-top:.8rem;overflow:visible}.signal-baseline{stroke:var(--border);stroke-width:.4px}.signal-wave{fill:none;stroke:var(--lilac);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px;vector-effect:non-scaling-stroke}.instrument-status{border:1px solid var(--border);min-height:52px;color:var(--muted);background:#0b0c0f;border-top:0;border-radius:0 0 5px 5px;grid-template-columns:auto 1fr auto;align-items:center;gap:.78rem;padding:.62rem 1rem;font-size:.82rem;line-height:1.35;display:grid}.instrument-status--error{color:#ffd2ca;border-color:#8a4d44}.instrument-status--warning{color:var(--warning);border-color:#7b6436}.status-action{min-height:36px;color:var(--text);cursor:pointer;background:0 0;border:1px solid;border-radius:3px;padding:0 .85rem;font-size:.75rem;font-weight:650}.status-action:hover{color:var(--background);background:var(--text)}.how-to-section{border-bottom:1px solid var(--border);grid-template-columns:minmax(200px,.55fr) minmax(0,1.45fr);gap:clamp(2rem,5vw,6rem);padding:clamp(3.8rem,8vw,8rem) 0;display:grid}.section-heading h2,.detail-band h2{color:var(--text);letter-spacing:-.055em;margin:0;font-size:clamp(2.2rem,4vw,4rem);font-weight:710;line-height:.95}.section-heading p{max-width:34ch;color:var(--muted);margin:1rem 0 0;font-size:.98rem;line-height:1.55}.steps-list{border-top:1px solid var(--border);gap:0;margin:0;padding:0;list-style:none;display:grid}.steps-list li{border-bottom:1px solid var(--border);grid-template-columns:3.8rem 1fr;gap:1.2rem;padding:1.35rem 0;display:grid}.step-number{border:1px solid var(--border-strong);width:2.8rem;height:2.8rem;color:var(--lime);border-radius:4px;place-items:center;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9rem;display:grid}.steps-list h3{color:var(--text);letter-spacing:-.025em;margin:0 0 .38rem;font-size:1.05rem}.steps-list p,.detail-band p{color:var(--muted);margin:0;font-size:.93rem;line-height:1.55}.detail-band{grid-template-columns:1fr 1fr;gap:0;padding:clamp(3.8rem,8vw,7.5rem) 0;display:grid}.detail-band article{padding-right:clamp(2rem,6vw,6rem)}.detail-band article+article{border-left:1px solid var(--border);padding-left:clamp(2rem,6vw,6rem);padding-right:0}.detail-band h2{margin-bottom:1.2rem;font-size:clamp(1.8rem,3vw,3rem)}.detail-band .fine-print{color:var(--subtle);margin-top:1rem;font-size:.78rem}.site-footer{border-top:1px solid var(--border)}.footer-inner{width:min(100%, var(--max-width));min-height:86px;padding:0 var(--page-gutter);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.footer-links{color:var(--muted);gap:clamp(1.3rem,3vw,2.5rem);font-size:.82rem;display:flex}.footer-links a{text-decoration:none}@media (width<=1050px){.intro{grid-template-columns:1fr;gap:1.6rem}.intro h1{font-size:clamp(4.7rem,12vw,7.5rem)}.start-zone{grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr);align-items:center;gap:1.25rem;display:grid}.microcopy{margin:0}.instrument-grid{grid-template-columns:minmax(360px,1.35fr) minmax(145px,.45fr) minmax(270px,.8fr)}}@media (width<=800px){.site-nav{gap:1.25rem;font-size:.84rem}.intro{padding-top:2rem}.intro h1{font-size:clamp(4rem,17vw,6.2rem)}.start-zone{grid-template-columns:1fr;gap:.75rem}.instrument-grid{grid-template-columns:1fr;min-height:0}.camera-stage{aspect-ratio:16/10;border-right:0;border-bottom:1px solid var(--border);min-height:0}.metric-rail{border-right:0;border-bottom:1px solid var(--border);grid-template-rows:auto auto;grid-template-columns:repeat(3,minmax(0,1fr))}.metric{border-right:1px solid var(--border);border-bottom:0}.metric--gate{border-right:0}.metric-value{font-size:2rem}.stop-button{grid-column:1/-1}.signal-panel{grid-template-rows:auto;grid-template-columns:1fr 1fr}.signal-panel>div+div{border-top:0;border-left:1px solid var(--border)}.how-to-section{grid-template-columns:1fr}}@media (width<=560px){:root{--page-gutter:1rem}.header-inner{min-height:58px}.brand{font-size:1.28rem}.site-nav{gap:.85rem;font-size:.72rem}.site-nav a:first-child{display:none}.intro{gap:1.2rem;padding:1.45rem 0 1.15rem}.intro h1{max-width:none;font-size:clamp(3.55rem,17.3vw,5.2rem);line-height:.88}.intro-copy{max-width:24ch;margin-top:.75rem;font-size:1.05rem}.start-button{min-height:56px;font-size:.98rem}.microcopy{gap:.38rem;font-size:.72rem}.mediapipe-consent{font-size:.66rem}.instrument-grid{border-radius:4px 4px 0 0}.camera-stage{aspect-ratio:4/3}.tracking-chip,.inference-readout{min-height:27px;font-size:.63rem;top:.65rem}.tracking-chip{left:.65rem}.inference-readout{right:.65rem}.metric{min-height:102px;padding:.85rem .72rem}.metric-label{font-size:.57rem}.metric-value{font-size:1.55rem}.gate-state{font-size:.75rem}.signal-panel{display:none}.instrument-status{grid-template-columns:auto 1fr;min-height:56px;padding:.58rem .72rem;font-size:.72rem}.status-action{grid-column:2;justify-self:start;min-height:34px}.how-to-section{gap:2.2rem;padding:4.2rem 0}.steps-list li{grid-template-columns:3rem 1fr;gap:.8rem}.detail-band{grid-template-columns:1fr;gap:3.5rem;padding:4.2rem 0}.detail-band article{padding-right:0}.detail-band article+article{border-top:1px solid var(--border);border-left:0;padding:3.5rem 0 0}.footer-inner{flex-direction:column;justify-content:center;align-items:flex-start;gap:1rem;min-height:100px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}