:root{--slate:#1f2937;--steel:#58759d;--mist:#f3f4f6;--orange:#ff842b;--orange-deep:color-mix(in srgb, var(--orange) 84%, var(--slate));--orange-light:color-mix(in srgb, var(--orange) 72%, var(--mist));--amber:#f59e0b;--gold:#f59e0b;--gold-light:#fef3c7;--green:#59897c;--neutral:#94a3b8;--cream:#fef3c7;--line:#94a3b84d;--panel:#182437e6;--font:"Noto Sans Variable", "Noto Sans", system-ui, -apple-system, sans-serif;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--min:68%;--max:86%}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--mist);font-family:var(--font);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;background:linear-gradient(172deg,#2a3c56 0%,#3a5374 52%,#58759d 100%);font-size:16px;line-height:1.45;overflow:hidden}#machine{width:100%;height:100%;display:block;position:fixed;inset:0}[hidden]{display:none!important}.display{letter-spacing:.01em;text-transform:uppercase;margin:0;font-weight:850;font-stretch:66%;line-height:.9}h2{margin:0;font-size:26px;font-weight:780;font-stretch:80%;line-height:1.1}p{margin:0}.brand{z-index:5;top:calc(var(--safe-t) + 16px);pointer-events:none;width:112px;position:fixed;left:18px}.brand svg{width:100%;height:auto;display:block}body[data-mode=play] .brand{display:none}.icon-btn{appearance:none;width:44px;height:44px;color:var(--mist);box-shadow:inset 0 0 0 1px var(--line);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);cursor:pointer;background:#0f1621b3;border:0;place-items:center;display:grid}.icon-btn svg{width:22px;height:22px}.icon-btn:focus-visible{box-shadow:inset 0 0 0 3px var(--cream);outline:none}.mute{z-index:8;top:calc(var(--safe-t) + 10px);position:fixed;right:12px}.hud{z-index:4;padding:calc(var(--safe-t) + 6px) 64px 20px;text-align:center;pointer-events:none;background:linear-gradient(#0f1621f0 58%,#0f162100);position:fixed;top:0;left:0;right:0}.timer{font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:56px;font-weight:800;font-stretch:70%;line-height:1}.steps{grid-template-columns:1.35fr 1fr 1fr;gap:6px;margin:10px -48px 0;padding:0;list-style:none;display:grid}.steps li{color:var(--neutral);white-space:nowrap;border-bottom:3px solid #94a3b840;justify-content:center;align-items:center;gap:6px;padding:4px 4px 7px;font-size:13px;font-weight:650;display:flex}.steps b{font-variant-numeric:tabular-nums}.steps .n{clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);background:#94a3b833;place-items:center;width:20px;height:20px;font-size:12px;font-weight:800;display:inline-grid}.steps li[data-state=active]{color:var(--mist);border-color:var(--orange)}.steps li[data-state=active] .n{background:var(--orange);color:var(--slate)}.steps li[data-state=done]{color:var(--mist);border-color:var(--green)}.steps li[data-state=done] .n{background:var(--green);color:var(--mist)}.caption{z-index:6;left:14px;right:14px;top:calc(var(--safe-t) + 66px);max-width:520px;box-shadow:inset 3px 0 0 var(--orange);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;background:#0a0f18d6;margin:0 auto;padding:9px 13px;font-size:14.5px;line-height:1.35;position:fixed}body[data-mode=play] .caption{top:calc(var(--safe-t) + 124px)}.controls{z-index:4;padding:26px 16px calc(var(--safe-b) + 16px);pointer-events:none;background:linear-gradient(#0f162100,#0f1621f2 38%);justify-items:center;gap:12px;display:grid;position:fixed;bottom:0;left:0;right:0}.controls>*{pointer-events:auto}.hint{text-align:center;pointer-events:none;max-width:34ch;min-height:1.45em;font-size:15px;font-weight:650}.oil-controls{grid-template-columns:1fr 64px;gap:14px;width:100%;max-width:460px;display:grid}.btn{appearance:none;min-height:54px;font:inherit;color:var(--mist);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);cursor:pointer;background:0 0;border:0;padding:0 22px;font-size:17px;font-weight:750;transition:background-color .12s,transform 80ms}.btn:focus-visible{box-shadow:inset 0 0 0 3px var(--cream);outline:none}.btn.primary{background:var(--orange);color:var(--slate)}.btn.primary:active{background:var(--orange-deep);transform:translateY(1px)}.btn.secondary{box-shadow:inset 0 0 0 1px var(--line);background:#94a3b824}.btn.secondary:focus-visible{box-shadow:inset 0 0 0 3px var(--cream)}.btn:disabled{opacity:.55;cursor:default}.pour{background:var(--orange);min-height:150px;color:var(--slate);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;place-content:center;justify-items:center;gap:8px;display:grid}.pour .pour-icon svg{width:44px;height:44px}.pour.active{background:var(--orange);box-shadow:inset 0 0 0 3px var(--mist);transform:translateY(2px)}.pour:disabled{opacity:.5}.gauge{height:150px;box-shadow:inset 0 0 0 1px var(--line);clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);background:#0d141f;position:relative}.gauge-zone{left:0;right:0;bottom:var(--min);height:calc(var(--max) - var(--min));box-shadow:inset 0 2px 0 var(--green), inset 0 -2px 0 var(--green);background:#59897c59;position:absolute}.gauge-fill{background:linear-gradient(to top, var(--amber), var(--amber) 60%, var(--gold-light));height:25%;position:absolute;bottom:0;left:12px;right:12px}.gauge[data-zone=ok] .gauge-fill{box-shadow:0 0 14px #fef3c7bf}.gauge[data-zone=over] .gauge-fill{background:repeating-linear-gradient(135deg, var(--orange) 0 8px, var(--slate) 8px 16px)}.gauge-mark{color:var(--mist);text-shadow:0 1px 2px #000;font-size:10px;font-weight:750;line-height:1;position:absolute;right:3px}.gauge-mark.max{bottom:calc(var(--max) + 3px)}.gauge-mark.min{bottom:calc(var(--min) - 13px)}.start{width:148px;height:148px;font:inherit;letter-spacing:.03em;text-transform:uppercase;color:var(--slate);background:radial-gradient(circle at 50% 36%, var(--orange-light), var(--orange) 56%, var(--orange-deep));cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;border-radius:50%;place-content:center;justify-items:center;gap:2px;margin:4px 0 2px;font-size:22px;font-weight:850;font-stretch:70%;display:grid;position:relative;box-shadow:0 0 0 9px #3a4a60,0 0 0 11px #0d141f,0 12px 30px #0000008c,inset 0 -7px 12px #00000040}.start:after{content:"";pointer-events:none;border-radius:50%;animation:1.1s ease-out infinite ring;position:absolute;inset:-11px}.start .start-icon svg{stroke-width:2.6px;width:40px;height:40px}.start:active{transform:translateY(3px);box-shadow:0 0 0 9px #3a4a60,0 0 0 11px #0d141f,0 6px 18px #0000008c,inset 0 -3px 8px #0000004d}.start:focus-visible{outline:3px solid var(--cream);outline-offset:14px}@keyframes ring{0%{box-shadow:0 0 #ff842b99}to{box-shadow:0 0 0 26px #ff842b00}}.countdown{z-index:7;pointer-events:none;color:var(--mist);text-shadow:0 8px 40px #0000008c;place-items:center;font-size:190px;font-weight:850;font-stretch:62.5%;line-height:1;display:grid;position:fixed;inset:0}.countdown span{animation:.95s ease-out both count}.countdown .go{color:var(--orange);font-size:120px}@keyframes count{0%{opacity:0;transform:scale(1.7)}18%{opacity:1}to{opacity:0;transform:scale(.92)}}.burst{z-index:7;text-align:center;pointer-events:none;background:linear-gradient(#0000 30%,#0f1621c7 38% 62%,#0000 70%),radial-gradient(circle at 50% 42%,#f59e0b4d,#0f162126 62%);align-content:center;justify-items:center;gap:12px;padding:0 16px;display:grid;position:fixed;inset:0}.burst-title{color:var(--gold-light);text-shadow:0 0 26px #f59e0be6,0 4px #1f2937;font-size:clamp(46px,15vw,76px);animation:.55s cubic-bezier(.2,1.5,.4,1) both slam}.burst-time{color:var(--gold);font-variant-numeric:tabular-nums;font-size:34px;font-weight:800;font-stretch:75%;animation:.55s cubic-bezier(.2,1.5,.4,1) .12s both slam}@keyframes slam{0%{opacity:0;transform:scale(2.1)}to{opacity:1;transform:scale(1)}}.sheet{z-index:5;max-height:80dvh;padding:24px 20px calc(var(--safe-b) + 22px);background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px);box-shadow:inset 0 2px 0 var(--gold);animation:.36s cubic-bezier(.2,.9,.3,1) both sheet-in;position:fixed;bottom:0;left:0;right:0;overflow-y:auto}@keyframes sheet-in{0%{opacity:0;transform:translateY(40px)}}.panel{gap:14px;max-width:460px;margin:0 auto;display:grid}.panel .display{font-size:clamp(40px,12.5vw,58px)}.lead{color:var(--mist);max-width:38ch;font-size:16.5px}.muted{color:var(--neutral);font-size:14.5px}.motto{color:var(--neutral);font-size:13.5px}.actions{gap:10px;margin-top:4px;display:grid}.sheet .actions{z-index:1;background:linear-gradient(#18243700,#182437 22%);padding-top:10px;position:sticky;bottom:0}@media (height<=700px){.sheet{max-height:86dvh;padding-top:18px}.panel{gap:10px}.mission li{padding:7px 10px}.mission .ico{width:36px;height:36px}}.field{gap:6px;display:grid}.field label{font-size:14px;font-weight:650}.field input{width:100%;min-height:50px;font:inherit;color:var(--mist);border:1px solid var(--line);background:#080d15a6;border-radius:2px;padding:0 14px;font-size:16px}.field input:focus{border-color:var(--orange);outline:none;box-shadow:0 0 0 3px #ff842b99}.check input:focus-visible{outline:2px solid var(--orange);outline-offset:2px}.field .help{color:var(--neutral);font-size:13px}.check{cursor:pointer;grid-template-columns:24px 1fr;align-items:start;gap:10px;font-size:14px;display:grid}.check input{width:22px;height:22px;accent-color:var(--orange);margin:1px 0 0}.error{color:#ffc192;font-size:14.5px;font-weight:650}.error:empty{display:none}.mission{gap:8px;margin:0;padding:0;list-style:none;display:grid}.mission li{box-shadow:inset 3px 0 0 var(--steel);background:#58759d26;grid-template-columns:44px 1fr;align-items:center;gap:12px;padding:10px 12px;display:grid}.mission .ico{width:44px;height:44px;color:var(--orange);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);background:#ff842b24;place-items:center;display:grid}.mission .ico svg{width:26px;height:26px}.mission strong{font-size:16px;display:block}.mission span{color:var(--neutral);font-size:14px}.meta{color:var(--neutral);flex-wrap:wrap;gap:6px 18px;font-size:14.5px;display:flex}.meta b{color:var(--gold-light);font-variant-numeric:tabular-nums}.result .display{color:var(--gold);font-size:clamp(38px,11.5vw,54px)}.result-line{font-size:17px}.result-time{align-items:baseline;gap:10px;margin-top:-8px;display:flex}.result-time .num{color:var(--gold-light);font-variant-numeric:tabular-nums;font-size:104px;font-weight:850;font-stretch:62.5%;line-height:.9}.result-time .unit{color:var(--neutral);font-size:22px;font-weight:700;font-stretch:80%}.rank{box-shadow:inset 3px 0 0 var(--gold);background:#58759d33;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:12px 14px;display:flex}.rank-num{font-size:30px;font-weight:850;font-stretch:72%}.badges{flex-wrap:wrap;gap:8px;display:flex}.badge{color:var(--gold-light);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);background:#f59e0b33;align-items:center;gap:6px;padding:6px 10px;font-size:13.5px;font-weight:700;display:inline-flex}.badge svg{width:16px;height:16px}.board{gap:4px;margin:0;padding:0;list-style:none;display:grid}.board li{background:#58759d1f;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;padding:8px 10px;display:grid}.board .pos{text-align:center;color:var(--neutral);font-size:20px;font-weight:850;font-stretch:70%}.board li:nth-child(-n+3) .pos{color:var(--gold)}.board .who{min-width:0}.board .who b,.board .who small{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.board .who small{color:var(--neutral);font-size:12.5px}.board .t{font-variant-numeric:tabular-nums;font-weight:800;font-stretch:80%}.board li.me{box-shadow:inset 3px 0 0 var(--orange);background:#ff842b29}.board-gap{text-align:center;color:var(--neutral);font-size:13px}@media (prefers-reduced-motion:reduce){.sheet,.countdown span,.burst-title,.burst-time,.start:after{animation:none}}