:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f0f7f5;background:#062631}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}#app{position:relative}canvas{width:100%;height:100%;display:block;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,18,30,.52),transparent 22%,transparent 68%,rgba(3,17,22,.58)),radial-gradient(ellipse at center,transparent 45%,rgba(4,19,30,.18) 100%)}.topbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:26px 33px;gap:15px;pointer-events:none}.brand{display:flex;align-items:center;gap:14px}.brand-icon{display:grid;place-items:center;width:44px;height:44px;border:1px solid #8cd3c8;border-radius:50%;color:#a1f5e9;font-size:28px;line-height:1}.brand small,.brand strong{display:block}.brand small{font-size:9px;letter-spacing:.29em;color:#a7c2c1;font-weight:700}.brand strong{font-size:25px;letter-spacing:.13em;font-weight:800}.conditions{display:flex;gap:12px;align-items:center;font-size:10px;letter-spacing:.14em;font-weight:700;background:rgba(6,39,48,.38);padding:13px 19px;border-radius:100px;border:1px solid rgba(195,242,240,.2);backdrop-filter:blur(12px)}.conditions i{height:4px;width:4px;background:#97b4b2;border-radius:50%}.conditions b{font-size:13px;letter-spacing:.04em}.live-dot{width:7px;height:7px;background:#5dedc9;box-shadow:0 0 0 4px rgba(93,237,201,.12);border-radius:50%}.camera-btn{font-size:10px;letter-spacing:.09em;pointer-events:auto;background:rgba(9,51,59,.54);border:1px solid rgba(192,237,230,.29);color:#fff;backdrop-filter:blur(10px);border-radius:8px;padding:12px 14px;cursor:pointer}.camera-btn:hover{background:rgba(36,85,89,.76)}.top-center{position:absolute;top:112px;width:100%;text-align:center;pointer-events:none;text-shadow:0 2px 20px #123b45}.phase-label{font-size:11px;font-weight:800;letter-spacing:.32em;color:#b4f5eb}.instruction{font-size:18px;font-weight:550;margin-top:8px}.warning{margin-top:9px;color:#ffdaaa;font-weight:700;letter-spacing:.08em;font-size:12px}.left-metrics{position:absolute;left:33px;bottom:108px;display:grid;gap:15px;pointer-events:none}.metric{background:rgba(2,33,42,.37);border-left:2px solid rgba(161,234,220,.6);padding:10px 15px;width:175px;backdrop-filter:blur(4px)}.metric small{font-size:9px;letter-spacing:.14em;color:#c8d5ce}.metric strong{font-size:27px;letter-spacing:-.02em}.metric span{font-size:12px;margin-left:4px;color:#b8d2d4}.meter-track{margin-top:5px;height:3px;background:rgba(210,239,235,.22);border-radius:10px;overflow:hidden}.meter-track>div{height:100%;width:0%;background:#8fffea;transition:width .13s linear}.meter-track.teal>div{background:#4bdddd}.meter-track.amber>div{background:#f1b97d}.barrel-callout{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%) scale(.85);font-size:38px;font-weight:900;letter-spacing:.17em;color:#edfff8;text-shadow:0 2px 25px #1ba39d,0 4px 6px #16474d;opacity:0;transition:opacity .2s,transform .25s;pointer-events:none;white-space:nowrap}.barrel-callout.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.bottom{position:absolute;bottom:0;left:0;right:0;padding:21px 33px;display:flex;align-items:end;justify-content:space-between;gap:10px;pointer-events:none}.help{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:10px;letter-spacing:.035em;color:#d5e7e5}.help-title{font-size:10px;letter-spacing:.18em;color:#88c9c0}.help>span:not(.help-title){white-space:nowrap}kbd{display:inline-block;font:700 10px ui-monospace,monospace;padding:4px 6px;margin-right:3px;border:1px solid rgba(223,252,243,.46);border-bottom-width:2px;border-radius:4px;background:rgba(13,63,68,.43);color:#fff}.session{text-align:right;font-size:9px;letter-spacing:.14em;color:#d1e8e8;white-space:nowrap}.session b{color:#8acac1}.session span{display:block;margin-top:6px;color:#80b4b6}.intro{position:absolute;inset:0;background:linear-gradient(100deg,rgba(3,24,33,.94),rgba(7,36,46,.66) 46%,rgba(6,35,41,.1) 85%);display:flex;align-items:center;padding:clamp(25px,7vw,110px);transition:opacity .65s ease,visibility .65s}.intro.hidden{opacity:0;visibility:hidden;pointer-events:none}.intro-panel{width:min(440px,100%)}.eyebrow{font-size:10px;letter-spacing:.3em;font-weight:800;color:#8ef1df}.intro h1{font-size:clamp(70px,8vw,116px);line-height:.85;letter-spacing:-.07em;margin:24px 0;font-weight:800;text-shadow:0 5px 40px #05323d}.intro h1 em{font-weight:300;font-family:Georgia,serif;color:#8bdacb;letter-spacing:-.06em}.intro p{font-size:15px;line-height:1.8;color:#c9d7d7;margin:24px 0 29px;max-width:400px}.specs{display:flex;gap:30px;margin-bottom:32px}.specs>div{display:grid;gap:1px}.specs strong{font-size:22px;letter-spacing:.01em}.specs strong span{font-size:13px;margin-left:2px}.specs small{font-size:9px;letter-spacing:.1em;color:#93bbb7}.start{width:min(310px,100%);background:#c8f3dc;border:0;padding:18px 20px;color:#0c3337;font-weight:900;letter-spacing:.15em;font-size:12px;cursor:pointer;text-align:left;transition:transform .2s,background .2s}.start span{float:right;font-size:20px;line-height:12px}.start:hover{transform:translateY(-2px);background:#ecffef}.hint{font-size:11px;color:#bed7d4;margin-top:14px;line-height:1.6}.fatal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0a2e37;padding:28px;border:1px solid #a2d5cd;max-width:430px}.fatal[hidden]{display:none}@media(max-width:900px){.conditions{display:none}.topbar{padding:16px}.brand strong{font-size:20px}.left-metrics{left:16px;bottom:135px;gap:4px}.metric{width:138px;padding:6px 10px}.metric strong{font-size:18px}.bottom{padding:12px 16px}.help{gap:8px}.session{display:none}.top-center{top:90px}.instruction{font-size:14px;padding:0 12px}}@media(max-height:690px){.intro h1{font-size:66px;margin:12px 0}.intro p{margin:10px 0}.specs{margin-bottom:15px}.left-metrics{bottom:92px}.bottom{padding:10px 18px}}