:root{--ink:#e8f4f2;--muted:#9ec4c0;--deep:#031018;--gold:#e4c36a;--danger:#e36a4a}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--deep);width:100%;height:100%;color:var(--ink);-webkit-user-select:none;user-select:none;cursor:crosshair;font-family:Outfit,system-ui,sans-serif;overflow:hidden}canvas{width:100%;height:100%;display:block}#vignette{pointer-events:none;z-index:2;transition:box-shadow .4s;position:fixed;inset:0;box-shadow:inset 0 0 18vh 6vh #030c1473}#vignette.low{box-shadow:inset 0 0 22vh 10vh #78140a80}#hud{z-index:3;pointer-events:none;text-shadow:0 2px 12px #00000073;justify-content:space-between;align-items:flex-start;padding:22px 28px;display:flex;position:fixed;top:0;left:0;right:0}#hud[hidden],#log[hidden]{display:none!important}.hud-block{min-width:140px}.hud-center{text-align:center}.hud-right{text-align:right;flex-direction:column;align-items:flex-end;display:flex}.label{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;font-size:11px;display:block}#hud strong{font-family:Fraunces,Georgia,serif;font-size:34px;font-weight:500;line-height:1}#combo{letter-spacing:.08em;text-transform:uppercase;color:var(--gold);min-height:1em;margin-top:6px;font-size:13px;font-style:normal;display:block}#depth{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px;font-size:12px}.oxygen{background:#00000040;border:1px solid #e8f4f247;border-radius:99px;width:148px;height:8px;overflow:hidden}.oxygen i{transform-origin:0;background:linear-gradient(90deg,#3ec7b1,#d7e37a);width:100%;height:100%;transition:width .12s linear,background .3s;display:block}.oxygen.danger i{background:linear-gradient(90deg, #9a2a22, var(--danger))}#log{z-index:3;pointer-events:none;color:var(--ink);text-shadow:0 2px 10px #00000080;flex-direction:column;gap:4px;font-size:13px;display:flex;position:fixed;bottom:24px;left:28px}#log span{opacity:.92}#log span em{color:var(--gold);margin-left:8px;font-style:normal}.overlay{z-index:5;text-align:center;cursor:default;background:radial-gradient(at 50% 30%,#0c364447,#030a10b8);flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.overlay[hidden]{display:none}.kicker,.tag,.best,.how{color:var(--muted)}.kicker{letter-spacing:.28em;text-transform:uppercase;font-size:12px}.overlay h1{letter-spacing:-.03em;margin:14px 0 8px;font-family:Fraunces,Georgia,serif;font-size:clamp(64px,10vw,120px);font-weight:500;line-height:.9}.tag{margin-bottom:28px;font-family:Fraunces,Georgia,serif;font-size:22px;font-style:italic}.how{margin-bottom:28px;font-size:15px;line-height:1.7}kbd{letter-spacing:.08em;border:1px solid #e8f4f247;border-radius:4px;padding:2px 7px;font-family:Outfit,sans-serif;font-size:12px}#start{appearance:none;background:var(--ink);color:var(--deep);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;border:0;border-radius:999px;padding:14px 42px;font-family:inherit;font-size:15px;font-weight:600}#start:hover{background:var(--gold)}.best{letter-spacing:.08em;margin-top:22px;font-size:13px}.overlay.over h1{font-size:clamp(48px,8vw,84px)}
