:root{color:#f3f6ef;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;background:#05060a;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;min-width:1024px;height:100%;margin:0;overflow:hidden}body:before{content:"";z-index:1;pointer-events:none;background:linear-gradient(90deg,#05060af5 0%,#05060ae6 36%,#05060a6b 68%,#05060a1f 100%),radial-gradient(circle at 28% 42%,#00000075,#0000 44%);position:fixed;inset:0}button{font:inherit}canvas{display:block}#root>canvas{inset:0;position:fixed!important}.content{--scroll-y:0px;--page-zoom:1;z-index:2;pointer-events:none;position:fixed;inset:0;overflow:hidden}.scroll-plane{width:min(820px,100vw - 460px);min-height:430vh;transform:translate3d(0, var(--scroll-y), 0) scale(var(--page-zoom));transform-origin:28% 34%;will-change:transform;margin-left:clamp(64px,8vw,118px);padding:18vh 0 28vh}.story-section{text-shadow:0 2px 24px #000000bf;border-left:1px solid #f4f6ef52;flex-direction:column;justify-content:center;min-height:92vh;padding-left:clamp(34px,4vw,64px);display:flex;position:relative}.kicker,.accent,.gesture-grid,.debug,.status-row{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace}.kicker{color:#8fffe0;text-transform:uppercase;margin:0 0 22px;font-size:13px;font-weight:600}h1{color:#fbfff8;letter-spacing:0;max-width:760px;margin:0;font-family:Instrument Serif,Georgia,serif;font-size:clamp(58px,6.4vw,104px);font-weight:400;line-height:.94}.body{color:#fbfff8f0;max-width:610px;margin:28px 0 0;font-size:clamp(18px,1.22vw,22px);font-weight:400;line-height:1.58}.accent{color:#ffe08a;width:-moz-fit-content;width:fit-content;margin:30px 0 0;font-size:13px;font-weight:600}.section-mark{color:#f4f6ef6b;background:#05060a;border:1px solid #f4f6ef47;border-radius:50%;place-items:center;width:26px;height:26px;font-size:12px;transition:border-color .22s,color .22s,background .22s;display:grid;position:absolute;top:50%;left:-13px;transform:translateY(-50%)}.section-mark.active{color:#06120e;background:#6fffcc;border-color:#6fffcc}.control-panel{z-index:5;-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);pointer-events:auto;background:#080a0edb;border:1px solid #f3f6ef29;border-radius:8px;width:304px;padding:18px;position:fixed;top:28px;right:28px;box-shadow:0 24px 80px #0000005c}.brand{font-family:Instrument Serif,Georgia,serif;font-size:34px}.status-row{color:#f3f6efc2;text-transform:uppercase;align-items:center;gap:9px;min-height:28px;margin-top:12px;font-size:12px;display:flex}.status-dot{background:#f7d06f;border-radius:50%;width:8px;height:8px;box-shadow:0 0 18px}.status-dot.running{color:#6fffcc;background:#6fffcc}.status-dot.error,.status-dot.unsupported{color:#ff6f8c;background:#ff6f8c}.start-button,.stop-button{cursor:pointer;border-radius:6px;width:100%;min-height:46px;margin-top:16px;font-weight:700}.start-button{color:#07110e;background:#6fffcc;border:0}.start-button:hover{background:#99ffda}.stop-button{color:#ffd8de;background:#ff6f8c21;border:1px solid #ff9cad94}.stop-button:hover{background:#ff6f8c38;border-color:#ffb8c4d1}.meter{background:#f3f6ef1f;border-radius:999px;height:4px;margin-top:16px;overflow:hidden}.meter span{background:#6fffcc;height:100%;display:block}.gesture-grid{color:#f3f6ef8a;border-top:1px solid #f3f6ef1f;grid-template-columns:1fr auto;gap:9px 14px;margin-top:18px;padding-top:16px;font-size:12px;display:grid}.gesture-grid b{color:#f3f6efe6;font-weight:500}.error{color:#ff9cad;margin:14px 0 0;font-size:13px;line-height:1.4}.camera{z-index:4;aspect-ratio:16/10;background:#030408db;border:1px solid #f3f6ef2e;border-radius:8px;width:304px;position:fixed;bottom:28px;right:28px;overflow:hidden;box-shadow:0 20px 70px #00000057}.camera video{display:none}.camera canvas{width:100%;height:100%}.debug{z-index:7;color:#f3f6efbd;background:#080a0ec2;border:1px solid #f3f6ef24;border-radius:6px;gap:14px;padding:10px 12px;font-size:11px;display:flex;position:fixed;bottom:20px;left:24px}.hint{z-index:4;color:#fbfff8e6;pointer-events:none;background:#05060ac7;border-radius:6px;padding:9px 13px;font-size:14px;transition:opacity .3s;position:fixed;bottom:34px;left:50%;transform:translate(-50%)}.hint.hidden{opacity:0}.switch-link{color:#8fffe0;margin-top:16px;font-size:13px;text-decoration:none;display:block}.switch-link:hover{color:#c2fff0}.panel-note{color:#f3f6ef8a;margin:14px 0 0;font-size:12px;line-height:1.45}.game{z-index:2;align-items:center;padding:0 380px 0 clamp(40px,6vw,96px);display:grid;position:fixed;inset:0}.game-stage{width:100%;max-width:1080px}.game-canvas{aspect-ratio:4;border:1px solid #f3f6ef29;border-radius:8px;width:100%;box-shadow:0 24px 80px #0000005c}.game-debug{color:#f3f6efbd;white-space:pre-wrap;min-height:1.5em;margin:14px 0 0;font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.game-debug.hidden{visibility:hidden}@media (max-width:1023px){html,body,#root{min-width:0}#root:before{content:"Hands Free is tuned for desktop webcams. Open it on a laptop or desktop display.";z-index:20;color:#f3f6ef;text-align:center;background:#05060a;place-items:center;padding:32px;font-size:20px;line-height:1.4;display:grid;position:fixed;inset:0}}