@font-face{font-family:'Exo 2';font-weight:800;font-display:swap;src:url(fonts/Exo2-800.woff) format('woff')}
@font-face{font-family:'Exo 2';font-weight:700;font-display:swap;src:url(fonts/Exo2-700.woff) format('woff')}
@font-face{font-family:Manrope;font-weight:700;font-display:swap;src:url(fonts/Manrope-700.woff) format('woff')}
@font-face{font-family:Manrope;font-weight:600;font-display:swap;src:url(fonts/Manrope-600.woff) format('woff')}

:root{
  --ground:#06070B;--text:#F5F7FA;--card-ink:#080A10;--knob-ink:#141A26;
  --ink-strong:rgba(245,247,250,.9);--ink-chip:rgba(245,247,250,.86);--ink-body:rgba(245,247,250,.82);
  --ink-hint:rgba(245,247,250,.78);--ink-sub:rgba(245,247,250,.76);--ink-label:rgba(245,247,250,.74);
  --ink-caption:rgba(245,247,250,.72);--ink-tick:rgba(245,247,250,.66);--ink-dim:rgba(245,247,250,.62);
  --settle:cubic-bezier(.3,.8,.3,1);--slide:cubic-bezier(.3,1.15,.45,1);--rise:cubic-bezier(.2,.8,.2,1);
  --t:min(calc(1rem/16),1.3px);--wait:1s;--stall:8s;
  --safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);
  --glass:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 24px rgba(0,0,0,.3);
}
:root,[data-lane=high]{--light:#FF6B2C;--lane-ink:#FFCDB2;--lane-end:#D99A7A;--lane-arrow:#FFB38A;
  --plate:linear-gradient(180deg,#FF9A62 0%,#F4621C 60%,#DB4E0C 100%);
  --plate-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(120,36,0,.45),0 3px 0 #B83F08,0 6px 0 #8E2F05,0 12px 18px rgba(255,107,44,.45);
  --on-plate:#1D0A00;--plate-deep:#6B2200;--rail-fill:linear-gradient(90deg,#FF6B2C,#FF9A62);--rail-glow:0 0 14px rgba(255,107,44,.85);
  --chip-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(120,36,0,.4),0 2px 0 #A33707,0 4px 0 #8E2F05,0 10px 18px rgba(255,107,44,.35);
  --figure-glow:0 0 54px rgba(255,107,44,.55);--value-glow:0 0 26px rgba(255,107,44,.5);
  --plate-bright:linear-gradient(180deg,#FFBC78 0%,#FF7822 60%,#FF5F0F 100%);
  --plate-bright-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(146,44,0,.45),0 3px 0 #E04D0A,0 6px 0 #AD3906,0 12px 18px rgba(255,131,54,.45);
  --plate-held:linear-gradient(180deg,#D7926B 0%,#C56030 60%,#AF4E20 100%);
  --plate-held-shadow:inset 0 2px 0 rgba(235,235,235,.55),inset 0 -3px 0 rgba(95,37,12,.45),0 3px 0 #923F19,0 6px 0 #712F12,0 12px 18px rgba(207,105,61,.45);
  --held-ink:#170A03;--held-edge:#55220B}
[data-lane=low]{--light:#3BD2FF;--lane-ink:#CFF4FF;--lane-end:#8FDFFA;--lane-arrow:#8FE4FF;
  --plate:linear-gradient(180deg,#B4F1FF 0%,#3BD2FF 55%,#1AA6D8 100%);
  --plate-shadow:inset 0 2px 0 rgba(255,255,255,.65),inset 0 -3px 0 rgba(0,60,90,.4),0 3px 0 #1183AE,0 6px 0 #0B5F80,0 12px 18px rgba(59,210,255,.45);
  --on-plate:#00222E;--plate-deep:#0B5F80;--rail-fill:linear-gradient(270deg,#3BD2FF,#B4F1FF);--rail-glow:0 0 14px rgba(59,210,255,.85);
  --chip-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,60,90,.4),0 2px 0 #1183AE,0 4px 0 #0B5F80,0 10px 18px rgba(59,210,255,.35);
  --figure-glow:0 0 54px rgba(59,210,255,.55);--value-glow:0 0 26px rgba(59,210,255,.5);
  --plate-bright:linear-gradient(180deg,#DCFFFF 0%,#48FFFF 55%,#20CBFF 100%);
  --plate-bright-shadow:inset 0 2px 0 rgba(255,255,255,.65),inset 0 -3px 0 rgba(0,73,110,.4),0 3px 0 #15A0D4,0 6px 0 #0D749C,0 12px 18px rgba(72,255,255,.45);
  --plate-held:linear-gradient(180deg,#B1DBE5 0%,#52BBDA 55%,#3293B5 100%);
  --plate-held-shadow:inset 0 2px 0 rgba(235,235,235,.65),inset 0 -3px 0 rgba(11,53,73,.4),0 3px 0 #257491,0 6px 0 #1A546B,0 12px 18px rgba(82,187,218,.45);
  --held-ink:#061E26;--held-edge:#1A546B}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;background:var(--ground)}
html,body{margin:0;min-height:100%;overscroll-behavior:none}
html[data-round],html[data-round] body{overflow:hidden}
body{background:var(--ground);color:var(--text);font-family:Manrope,system-ui,sans-serif;font-weight:600;font-size:calc(14*var(--t));font-synthesis:none}
h1,h2,p{margin:0;font:inherit}
button{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:0;color:inherit;font:inherit;cursor:pointer}
a{color:inherit}
dialog{border:0;padding:0;max-width:none;max-height:none;background:none;color:inherit}
svg{display:block}
:focus-visible{outline:2px solid #fff;outline-offset:2px}
::selection{color:#fff;background:rgba(255,255,255,.22)}
[hidden]:not(#door,.fault){display:none!important}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.hush{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.sky{position:fixed;left:0;right:0;top:0;height:100lvh;overflow:hidden;pointer-events:none;background:var(--ground)}
.light{--size:clamp(480px,133vw,1100px);position:absolute;display:block;border-radius:50%;width:var(--size);height:var(--size);left:calc(var(--x) - var(--size)/2);top:calc(var(--y) - var(--size)/2)}
.light.ember{--x:22vw;--y:9vh;background:radial-gradient(circle,rgba(255,107,44,.62) 0%,rgba(255,107,44,.2) 42%,rgba(255,107,44,0) 68%)}
.light.frost{--size:clamp(520px,144vw,1180px);--x:80vw;--y:80vh;background:radial-gradient(circle,rgba(59,210,255,.52) 0%,rgba(59,210,255,.16) 42%,rgba(59,210,255,0) 68%)}
[data-view=count] .light.ember,[data-view=table] .light.ember{--x:11vw;--y:2.5vh;background:radial-gradient(circle,rgba(255,107,44,.5) 0%,rgba(255,107,44,.16) 42%,rgba(255,107,44,0) 68%)}
[data-view=count] .light.frost,[data-view=table] .light.frost{--x:92vw;--y:86vh;background:radial-gradient(circle,rgba(59,210,255,.4) 0%,rgba(59,210,255,.13) 42%,rgba(59,210,255,0) 68%)}
[data-view=result] .light.ember{--size:clamp(520px,144vw,1180px);--x:30.5vw;--y:9vh}
[data-view=result] .light.frost{--x:94.5vw;--y:91vh;background:radial-gradient(circle,rgba(59,210,255,.36) 0%,rgba(59,210,255,.12) 42%,rgba(59,210,255,0) 68%)}
[data-scene=low] .light.ember{--size:clamp(520px,144vw,1180px);--x:5.5vw;--y:91vh;background:radial-gradient(circle,rgba(255,107,44,.36) 0%,rgba(255,107,44,.12) 42%,rgba(255,107,44,0) 68%)}
[data-scene=low] .light.frost{--x:69.5vw;--y:9vh;background:radial-gradient(circle,rgba(59,210,255,.46) 0%,rgba(59,210,255,.148) 42%,rgba(59,210,255,0) 68%)}
.grain{position:absolute;inset:0;opacity:.035;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAQMAAACQp+OdAAAABlBMVEUAAAD///+l2Z/dAAACS0lEQVR42gFAAr/9AByq1HJLUKSaAONKzUt08xXjABUlMtgRDWsUALt8JQ+XatRaANKHrOFytQNlAAphbVrJgn5SAFL8gKYue5ClAPsFXz2QTNV+AAS7aUFr0lcCAG6gpLsmB1XbAMjfWqqpeUgYABqKlaJszV7nALVkcjtNlZKYAMs016pSUFNWANKXAEVbX2kkAFyt3pVUgxdOAFXQOfyr6VSzAEMbhELINnW0AL5U+wy6lSKHAJCjJX5F0a0qAEvLGaFbJjNoAPS85haQvaJuABYSWPFuwT0lAKLDJw7LOqWpAFttWXIozMitAGx1UU1WZmtkAIOIrwmrErU7AFxN0PZS3QSJAElqJlJWJO3UAOtOd3aqpJVXACUxkQWp23JIAFqNnKQrFxW3ALTYVvfaUFrRAAWn4lghuuEaAPUwKwatxi7HACSXmerMG6lwAFvVTUyxqGsbAMpk6JSXK6iGALEsi1N07ov0AK1rmzqGUDQUAKuSdGRzk2anACRUyaWcPuW0AOrWjs2xyRiSAIkKuKkHYs9mALbx01N4LVJaAFSMjS0mpmzIAM61OdUVaomOADGS4jP6kmpzAJTOm8wi3NaSAKZJTCUWS1dsAHrc8V3tJKCTAAWTF5FJrVzMANqSqFo0s7NdAFjlS0qnKQtRAKc6tWusqmSGAKUVFtKRmtW2ACmt5ByeyZp5AH1hDUnQ6mWDACKVafISFqlaAJK+bg7vaVdUAO7BiTCJWtCnAFiaWbfail9YAIbbmqQRsoTGAOqoo03WTvpUzVH7IsdXiRoAAAAASUVORK5CYII=);background-size:64px 64px}
@keyframes driftA{50%{transform:translate(30px,26px) scale(1.1)}}
@keyframes driftB{50%{transform:translate(-34px,-28px) scale(1.12)}}

#top{position:absolute;left:0;right:0;top:0;z-index:2;padding:calc(var(--safe-t) + 10px) calc(var(--safe-r) + 12px) 0 calc(var(--safe-l) + 12px)}
[data-view=count] #top,[data-view=table] #top{display:none}
#top .bar{display:flex;align-items:center;max-width:1080px;margin:0 auto}
#top .home{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 8px;color:var(--ink-body);text-decoration:none}
#top .back{width:10px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#top .home:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:8px}
.wm-art{display:inline-flex;align-items:baseline;gap:.22em;font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:24px;line-height:1;white-space:nowrap}
.wm-art .w,.wm-art .o,.wm-art .r{position:relative;display:inline-block;color:transparent}
.wm-art .w::before,.wm-art .w::after,.wm-art .o::before,.wm-art .o::after,.wm-art .r::before,.wm-art .r::after{position:absolute;left:0;top:0;color:transparent;-webkit-background-clip:text;background-clip:text}
.wm-art .t::before,.wm-art .t::after{content:"TWENTY"}
.wm-art .e::before,.wm-art .e::after{content:"ONE"}
.wm-art .o::before,.wm-art .o::after{content:"o"}
.wm-art .r::before,.wm-art .r::after{content:"r"}
.wm-art .w::after,.wm-art .o::after,.wm-art .r::after{background-image:linear-gradient(168deg,rgba(255,255,255,.85) 6%,rgba(255,255,255,0) 34%)}
.wm-art .w{letter-spacing:.03em;filter:drop-shadow(.0513em 0 0 #141A26) drop-shadow(-.0513em 0 0 #141A26) drop-shadow(0 .0513em 0 #141A26) drop-shadow(0 -.0513em 0 #141A26) drop-shadow(0 .0769em 0 #141A26) drop-shadow(0 .0769em 0 #0A0E15) drop-shadow(0 .2308em .2051em rgba(0,0,0,.5)) drop-shadow(0 0 .5641em rgba(255,255,255,.16))}
.wm-art .w::before{background-image:linear-gradient(180deg,#FFFFFF 0%,#EEF2F7 55%,#BCC6D3 100%)}
.wm-art .or{position:relative;top:-.3174em;display:inline-flex;align-items:baseline;font-size:.6154em}
.wm-art .o{filter:drop-shadow(.0417em 0 0 #4A1700) drop-shadow(-.0417em 0 0 #4A1700) drop-shadow(0 .0417em 0 #4A1700) drop-shadow(0 -.0417em 0 #4A1700) drop-shadow(0 .0833em 0 #4A1700) drop-shadow(0 .0833em 0 #2E0E00) drop-shadow(0 .25em .25em rgba(0,0,0,.5)) drop-shadow(0 0 .9167em rgba(255,107,44,.5))}
.wm-art .o::before{background-image:linear-gradient(180deg,#FFE1CC 0%,#FF9A5C 38%,#F2601B 74%,#D94C0B 100%)}
.wm-art .r{filter:drop-shadow(.0417em 0 0 #063A50) drop-shadow(-.0417em 0 0 #063A50) drop-shadow(0 .0417em 0 #063A50) drop-shadow(0 -.0417em 0 #063A50) drop-shadow(0 .0833em 0 #063A50) drop-shadow(0 .0833em 0 #03222F) drop-shadow(0 .25em .25em rgba(0,0,0,.5)) drop-shadow(0 0 .9167em rgba(59,210,255,.5))}
.wm-art .r::before{background-image:linear-gradient(180deg,#E8FBFF 0%,#8AE6FF 38%,#2FB8E8 74%,#1290BF 100%)}

#stop,#wait{visibility:hidden}
#door[hidden]{display:grid}
html:not([data-open]) #door{animation:gone 1ms var(--stall) forwards}
html:not([data-open]) #stop{animation:shown 1ms var(--stall) forwards}
html:not([data-open]) #wait{animation:shown 1ms var(--wait) forwards,gone 1ms var(--stall) forwards}
@keyframes shown{from,to{visibility:visible}}
@keyframes gone{from,to{visibility:hidden}}
[data-open=failed] #door,[data-open=failed] .shell,[data-open=failed] .count,[data-open=fault] .shell,[data-open=fault] .count,[data-open=fault] #door{display:none}
[data-open=failed] #stop,[data-open=fault] #stop{visibility:visible}
[data-open=fault] #stop .h10{display:none}
[data-open=fault] #stop .fault[hidden]{display:block}
@media (scripting:none){#door[hidden]{display:none}#stop{visibility:visible}#stop .key{display:none}}
@supports not ((width:1cqh) and (width:1svh)){#door[hidden],.shell{display:none}#stop{visibility:visible}#stop .key{display:none}}

#stop{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;text-align:center}
#stop h2{font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(22*var(--t));letter-spacing:.06em}
#stop p{color:var(--ink-body);font-size:calc(16*var(--t));max-width:320px}
#stop .again{margin-top:10px;width:min(280px,100%)}

#door{--bd:max(.5px,min(1.15px,calc(100vw/360),calc((100svh - 246px)/314)));position:fixed;left:0;right:0;top:0;height:100svh;
  padding:calc(var(--safe-t) + 12px) calc(var(--safe-r) + 16px) var(--safe-b) calc(var(--safe-l) + 16px);
  grid-template-rows:minmax(0,1fr) 44px;justify-items:center;overflow:clip}
[data-view=count] #door,[data-view=table] #door,[data-view=result] #door{display:none}
.doorstack{display:flex;flex-direction:column;align-items:center;width:100%;max-width:calc(324*var(--bd));
  margin-top:max(0px,calc(68svh - var(--safe-t) - 12px - 362*var(--bd)))}
.head{display:flex;flex-direction:column;align-items:center;gap:calc(16*var(--bd));width:100%}
.mark{position:relative;width:100%;height:calc(150*var(--bd))}
.markshade{position:absolute;left:50%;bottom:calc(-26*var(--bd));width:calc(214*var(--bd));height:calc(56*var(--bd));margin-left:calc(-107*var(--bd));
  background:radial-gradient(closest-side,rgba(0,0,0,.576) 0%,rgba(0,0,0,.475) 20%,rgba(0,0,0,.266) 40%,rgba(0,0,0,.101) 60%,rgba(0,0,0,.026) 80%,rgba(0,0,0,0) 100%);opacity:.55}
.mark .art{position:absolute;left:50%;top:50%;display:flex;align-items:center;width:max-content;transform:translate(-50%,-50%) scale(.697);--m:calc(1*var(--bd))}
.mark .num,.boltbox{position:relative;flex:none}
.mark .twenty{top:calc(-26*var(--m));width:calc(156.6*var(--m));height:calc(132*var(--m))}
.mark .one{top:calc(26*var(--m));width:calc(57.9*var(--m));height:calc(132*var(--m))}
.boltbox{z-index:2;margin:0 calc(-9*var(--m));width:calc(84*var(--m));height:calc(184*var(--m))}
.sway,.seen,.boltturn,.boltwhole,.mark .lit,.mark .flash{position:absolute;inset:0}
.mark .lit,.mark .flash{width:100%;height:100%}
.boltturn{transform:rotate(17deg)}
.twenty .lit{filter:drop-shadow(0 calc(5*var(--m)) 0 #5E1E03) drop-shadow(0 calc(15*var(--m)) calc(12*var(--m)) rgba(0,0,0,.5)) drop-shadow(0 0 calc(22*var(--m)) rgba(255,107,44,.55))}
.one .lit{filter:drop-shadow(0 calc(5*var(--m)) 0 #074760) drop-shadow(0 calc(15*var(--m)) calc(12*var(--m)) rgba(0,0,0,.5)) drop-shadow(0 0 calc(22*var(--m)) rgba(59,210,255,.55))}
.boltwhole .lit{filter:drop-shadow(0 calc(4*var(--m)) 0 #1B2230) drop-shadow(0 calc(12*var(--m)) calc(10*var(--m)) rgba(0,0,0,.5))}
.seen{opacity:.28}
.boltwhole,.mark .flash{opacity:0}
[data-open=ready] .seen,[data-open=ready] .boltwhole{opacity:1}
.storm{position:absolute;opacity:0;pointer-events:none}
i.storm{border-radius:50%}
.mark svg{overflow:visible}
.mark .twenty,.mark .one{stroke-width:45}
.wordmark{display:flex;flex-direction:column;align-items:center;gap:calc(4*var(--bd));font-family:'Exo 2',system-ui,sans-serif;font-weight:800;line-height:1}
.wordmark span{display:block;white-space:nowrap}
.wordmark .big{font-size:calc(39*var(--bd));letter-spacing:.03em;background:linear-gradient(180deg,#FFF 0%,#EEF2F7 55%,#BCC6D3 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(calc(2*var(--bd)) 0 0 #141A26) drop-shadow(calc(-2*var(--bd)) 0 0 #141A26) drop-shadow(0 calc(2*var(--bd)) 0 #141A26) drop-shadow(0 calc(-2*var(--bd)) 0 #141A26) drop-shadow(0 calc(3*var(--bd)) 0 #0A0E15) drop-shadow(0 calc(9*var(--bd)) calc(8*var(--bd)) rgba(0,0,0,.5))}
.wordmark .or{display:inline-flex;align-items:baseline;font-size:calc(24*var(--bd))}
.wordmark .o,.wordmark .r{-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark .o{background-image:linear-gradient(180deg,#FFE1CC 0%,#FF9A5C 38%,#F2601B 74%,#D94C0B 100%);filter:drop-shadow(calc(1*var(--bd)) 0 0 #4A1700) drop-shadow(calc(-1*var(--bd)) 0 0 #4A1700) drop-shadow(0 calc(2*var(--bd)) 0 #2E0E00)}
.wordmark .r{background-image:linear-gradient(180deg,#E8FBFF 0%,#8AE6FF 38%,#2FB8E8 74%,#1290BF 100%);filter:drop-shadow(calc(1*var(--bd)) 0 0 #063A50) drop-shadow(calc(-1*var(--bd)) 0 0 #063A50) drop-shadow(0 calc(2*var(--bd)) 0 #03222F)}
.doorline{margin-top:calc(14*var(--bd));min-height:calc(22*var(--t));color:var(--ink-body);font-size:calc(16*var(--t));text-align:center}
#slot{position:relative;width:100%;height:calc(84*var(--u,1px));margin-top:calc(16*var(--bd));display:flex;align-items:flex-start;justify-content:center;--u:max(1px,var(--bd))}
#wait{position:absolute;left:0;right:0;top:0;height:calc(72*var(--u));display:flex;align-items:center;justify-content:center;color:var(--ink-sub);border-radius:calc(36*var(--u));background:rgba(255,255,255,.06)}
.nopuzzle{align-self:center;color:var(--ink-body);font-size:calc(16*var(--t));text-align:center}
.small{display:flex;flex-direction:column;align-items:center;gap:calc(2*var(--bd));margin-top:calc(6*var(--bd))}
.dailyname{font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(13*var(--t));letter-spacing:.12em;color:var(--ink-label)}
.dailyname b{font-weight:800;letter-spacing:0;color:var(--text)}
.quiet{min-height:44px;padding:0 14px;font-weight:700;font-size:calc(12*var(--t));letter-spacing:.1em;color:var(--ink-sub);text-decoration:underline;text-underline-offset:3px}

@media (max-height:480px) and (min-aspect-ratio:5/4){
  #door{--bd:min(1.15px,calc(100svh/320));padding-top:calc(var(--safe-t) + 8px)}
  .doorstack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-content:center;align-items:center;max-width:calc(664*var(--bd));margin-top:0}
  .head{grid-column:1;grid-row:1/4;gap:calc(8*var(--bd))}
  .doorline,#slot,.small{grid-column:2}
  .doorline{margin-top:0}
  #slot{margin-top:calc(8*var(--bd))}
  .wordmark{flex-direction:row;align-items:baseline;gap:.28em}
  .wordmark .big{font-size:calc(27*var(--bd))}
  .wordmark .or{font-size:calc(18*var(--bd))}
}

.key{position:relative;display:block;width:100%;height:calc(84*var(--u));color:var(--card-ink);text-decoration:none;--u:max(1px,var(--bd,1px))}
.key::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(72*var(--u));border-radius:calc(36*var(--u));background:#98A2B1;box-shadow:0 3px 0 #C3CBD6,0 6px 0 #AEB7C4,0 9px 0 #98A2B1,0 18px 24px rgba(0,0,0,.45)}
.key .glow{position:absolute;left:calc(12*var(--u));right:calc(12*var(--u));top:calc(24*var(--u));bottom:calc(14*var(--u));opacity:.8}
.key .glow::before,.key .glow::after{content:'';position:absolute;top:0;bottom:0;box-shadow:0 0 calc(44*var(--u)) calc(4*var(--u)) var(--g)}
.key .glow::before{--g:rgba(255,107,44,.9);left:0;right:50%;border-radius:calc(30*var(--u)) 0 0 calc(30*var(--u))}
.key .glow::after{--g:rgba(59,210,255,.9);left:50%;right:0;border-radius:0 calc(30*var(--u)) calc(30*var(--u)) 0}
.key .face{position:absolute;left:0;right:0;top:0;height:calc(72*var(--u));display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:calc(36*var(--u));background:linear-gradient(180deg,#FFF 0%,#F1F4F8 50%,#DCE2EA 100%);box-shadow:inset 0 2px 0 #FFF,inset 0 -4px 0 rgba(120,134,155,.35);font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(24*var(--u));letter-spacing:.1em;transition:transform 140ms var(--settle)}
.key:active .face{transform:translateY(5px);transition-duration:40ms}
.key:focus-visible{outline-offset:6px}

.count{--bd:min(1.1px,calc(100vw/360),calc(100svh/340));position:fixed;left:0;right:0;top:0;height:100lvh;display:flex;flex-direction:column;align-items:center;justify-content:center;outline:0;padding-bottom:calc(100lvh - 100svh)}
.countground{position:absolute;inset:0;background:var(--ground)}
.count .figure,.count .numbers{position:relative}
.count[data-lifting]{pointer-events:none}
.count[hidden]{display:none}
.count .figure{font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(160*var(--bd));line-height:1;font-variant-numeric:tabular-nums;font-kerning:none;color:var(--text);text-shadow:0 calc(4*var(--bd)) 0 rgba(0,0,0,.5)}
.count .numbers{display:flex;gap:calc(8*var(--bd));margin-top:calc(36*var(--bd))}
.count .card{--w:60;--h:72;--fs:36}

.shell{position:fixed;left:0;right:0;top:0;height:100svh;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);touch-action:manipulation}
[data-view=door] .shell,html:not([data-view]) .shell{display:none}
.stage{container:stage/size;height:100%}
[data-view=result] .shell{position:relative;height:auto;padding-top:calc(var(--safe-t) + 54px);padding-bottom:0}
[data-view=result] .stage{container:stage/inline-size;height:auto}
.table,.count{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:pinch-zoom}
.table button{touch-action:none}
.table{--pad:clamp(8px,calc(8px + (100cqh - 696px)/8),14px);--gap:clamp(6px,calc(6px + (100cqh - 696px)/12),10px);
  --fixed:calc(248px + 8*var(--gap) + 2*var(--pad));--across:calc((100cqw - 28px)/312);
  --fit:max(min(.6px,var(--across)),min(1px,var(--across),calc((100cqh - var(--fixed))/404)));
  --over:min(1.5px,calc(100cqw/360),calc(100cqh/800));--bd:calc(var(--fit) + max(0px,var(--over) - 1px));--u:max(1px,var(--bd));
  position:relative;height:100%;display:flex;flex-direction:column;gap:var(--gap);padding:var(--pad) 14px;max-width:calc(560*var(--u));margin:0 auto}
.reads,.acts{display:flex;flex-direction:column;gap:var(--gap);min-height:0}
.acts{flex:1}
.top{display:flex;flex-direction:column;align-items:center;gap:var(--gap)}
.clock{position:relative;flex:none;width:calc(92*var(--u));height:calc(92*var(--u));contain:strict;border-radius:50%;background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.14),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -6px 10px rgba(0,0,0,.45),0 5px 0 rgba(0,0,0,.45),0 14px 22px rgba(0,0,0,.4)}
.clock svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.clock circle{fill:none;stroke-linecap:round}
.clock .track{stroke:rgba(0,0,0,.6)}
.clock .halo{stroke:rgba(255,255,255,.7)}
.clock .ink{stroke:#fff}
.clock .digits{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(38*var(--u));font-variant-numeric:tabular-nums;font-kerning:none;text-shadow:0 2px 0 rgba(0,0,0,.55)}
[data-alarm] .clock .ink{stroke:#FF3355}
[data-alarm] .clock .halo{stroke:rgba(255,51,85,.7)}
[data-alarm] .clock .digits{color:#FF8DA3}
.puzzlerow{height:calc(14*var(--u));line-height:calc(14*var(--u));text-align:center;font-weight:700;font-size:calc(11*max(var(--t),var(--u)));letter-spacing:.12em;color:var(--ink-label)}
.puzzlerow b{font-weight:700;letter-spacing:0;color:var(--text)}
.narrator{position:relative;height:calc(40*var(--u));display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Exo 2',system-ui,sans-serif;font-weight:700;font-size:calc(19*max(var(--t),var(--u)));color:var(--ink-chip)}
.narrator.value{font-weight:800;font-size:calc(31*max(var(--t),var(--u)));font-variant-numeric:tabular-nums;color:var(--text);text-shadow:0 2px 0 rgba(0,0,0,.5),var(--value-glow)}

.narrator .say{display:block}
.saidout{position:absolute;inset:0;display:flex;align-items:center;justify-content:inherit;text-align:inherit;font-weight:700;font-size:calc(19*max(var(--t),var(--u)));color:var(--ink-chip);text-shadow:none}

.rail{position:relative;flex:none;height:calc(64*var(--bd));display:flex;align-items:flex-start;gap:calc(8*var(--bd))}
.railend{flex:none;width:calc(30*var(--bd));height:calc(20*var(--bd));margin-top:calc(22*var(--bd));stroke-width:70}
.railend svg{width:100%;height:100%;overflow:visible}
.railend .veil{opacity:0}
.railtrack{position:relative;flex:1;height:100%;container-type:inline-size}
.railbar{position:absolute;left:0;right:0;top:calc(36*var(--bd));height:calc(12*var(--bd));border-radius:calc(6*var(--bd));background:rgba(0,0,0,.6);box-shadow:inset 0 2px 3px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.16)}
.railtick{position:absolute;top:calc(39*var(--bd));width:calc(2*var(--bd));height:calc(6*var(--bd));background:rgba(255,255,255,.3);transform:translateX(-50%)}
.railtick.a{left:26.32%}.railtick.b{left:52.63%}.railtick.c{left:78.95%}
.raillabel{position:absolute;top:calc(51*var(--bd));transform:translateX(-50%);font-size:calc(10*var(--bd));color:var(--ink-tick)}
.raillabel.a{left:26.32%}.raillabel.b{left:52.63%}.raillabel.c{left:78.95%}
.railgap{position:absolute;top:calc(36*var(--bd));height:calc(12*var(--bd));border-radius:calc(6*var(--bd));left:calc(var(--from)*100%);width:calc((var(--to) - var(--from))*100%);background:var(--rail-fill);box-shadow:var(--rail-glow)}
.railmark{position:absolute;left:0;top:0;width:0;height:100%;transform:translateX(calc(var(--share)*100cqw));pointer-events:none}
.railpin{position:absolute;left:calc(-3*var(--bd));top:calc(32*var(--bd));width:calc(6*var(--bd));height:calc(20*var(--bd));border-radius:calc(3*var(--bd));background:#fff;box-shadow:0 0 0 2px var(--ground),0 0 12px rgba(255,255,255,.8)}
.railbubble{position:absolute;left:0;top:0;width:max-content;white-space:nowrap;min-width:calc(48*var(--bd));height:calc(27*var(--bd));padding:0 calc(8*var(--bd));display:flex;align-items:center;justify-content:center;gap:calc(2*var(--bd));transform:translateX(calc(var(--shift,0px) - 50%));border-radius:calc(14*var(--bd));background:linear-gradient(180deg,#FFF,#E1E7EE);box-shadow:inset 0 1px 0 #FFF,0 2px 0 #AEB7C4,0 4px 0 #8E99A9,0 8px 12px rgba(0,0,0,.45);color:var(--card-ink);font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(15*var(--bd));font-variant-numeric:tabular-nums}
.railring{position:absolute;left:calc(-12*var(--bd));top:calc(30*var(--bd));width:calc(24*var(--bd));height:calc(24*var(--bd));border-radius:50%;border:2px solid var(--lane-arrow);opacity:0;pointer-events:none}
.railbubble svg{width:calc(7*var(--bd));height:calc(7*var(--bd));fill:var(--card-ink)}

.clearrow{flex:none;height:calc(30*var(--u));margin-bottom:calc(-4*var(--u));display:flex;justify-content:flex-end;align-items:center;position:relative;z-index:2}
.clear{position:relative;display:flex;align-items:center;height:calc(44*var(--u));margin:calc(-7*var(--u)) 0;padding:0 2px}
.clear .chip{display:flex;align-items:center;gap:calc(6*var(--u));height:calc(28*var(--u));padding:0 calc(12*var(--u));border-radius:calc(14*var(--u));background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 0 rgba(0,0,0,.4);font-family:'Exo 2',system-ui,sans-serif;font-weight:700;font-size:calc(12*max(var(--t),var(--u)))}
.clear svg{width:calc(13*var(--u));height:calc(13*var(--u));fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.clear[data-pressed] .chip{transform:translateY(2px)}
.line{--wide:min(calc(100cqw - 28px),max(calc(312*var(--bd)),340px));--cell:calc((var(--wide) - 16*var(--bd) - 2px)/7);flex:none;position:relative;height:calc(88*var(--bd));width:var(--wide);margin:0 auto;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;padding:0 calc(8*var(--bd));border-radius:calc(22*var(--bd));background:var(--glass);border:1px solid rgba(255,255,255,.16);box-shadow:var(--glass-shadow)}
.socket{position:relative;display:flex;justify-content:center}
.seat{position:relative;flex:none;border-radius:calc(11*var(--bd));background:rgba(0,0,0,.4);box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.1)}
.seat::after{content:'';position:absolute;inset:calc(-2*var(--bd));border-radius:inherit;border:calc(2*var(--bd)) solid rgba(255,255,255,.85);opacity:0;pointer-events:none;transition:opacity 120ms var(--settle)}
.socket[data-lit] .seat::after{opacity:1}
.socket.number .seat{width:calc(44*var(--bd));height:calc(62*var(--bd))}
.socket.operator .seat{width:calc(30*var(--bd));height:calc(46*var(--bd));border-radius:calc(9*var(--bd))}
.socket .card{--r:11}
.socket.number .card{--w:44;--h:56;--fs:28}
.socket.operator .card{--w:30;--h:41;--fs:21;--r:9}

.card{--w:60;--h:72;--fs:36;--r:13;position:relative;display:block;flex:none;width:calc(var(--w)*var(--bd));height:calc(var(--h)*var(--bd));border-radius:calc(var(--r)*var(--bd));color:var(--card-ink)}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;background:#8B96A6;box-shadow:0 calc(2*var(--bd)) 0 #B4BECB,0 calc(4*var(--bd)) 0 #9EA9B8,0 calc(6*var(--bd)) 0 #8B96A6,0 calc(8*var(--bd)) 0 #7A8596,0 calc(14*var(--bd)) calc(14*var(--bd)) rgba(0,0,0,.5)}
.card::after{content:'';position:absolute;left:50%;top:50%;width:max(100%,58px);height:max(100%,64px);transform:translate(-50%,-50%)}
.card.operator::after{width:max(100%,44px);height:max(100%,44px)}
.socket .card::after,.socket .card.operator::after{width:var(--cell);height:max(100%,calc(88*var(--bd)))}
.card .face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:inherit;background:linear-gradient(180deg,#FFF 0%,#F0F3F8 60%,#DDE3EB 100%);box-shadow:inset 0 2px 0 #FFF,inset 0 -2px 0 rgba(140,152,170,.4);font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(var(--fs)*var(--bd));line-height:1;transition:transform 140ms var(--settle);font-variant-numeric:tabular-nums}
.card.operator{color:#fff}
.card.operator{--w:50;--h:48;--fs:26;--r:12}
.card.operator::before{background:#11151D;box-shadow:0 calc(2*var(--bd)) 0 #1A202B,0 calc(4*var(--bd)) 0 #141922,0 calc(6*var(--bd)) 0 #0E1218,0 calc(11*var(--bd)) calc(12*var(--bd)) rgba(0,0,0,.5)}
.card.operator .face{background:linear-gradient(180deg,#4E5A6E,#323B4B 60%,#232B38);box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.35)}
.card[data-pressed] .face{transform:translateY(calc(5*var(--bd)));transition-duration:40ms}
.card.operator .face{backface-visibility:hidden}
.card[data-carried]{opacity:0}
.card[data-flying]{z-index:30}
.socket .card{position:absolute;left:0;top:0}
.socket.number .card{height:calc(56*var(--bd))}

.selector{flex:none;height:calc(84*var(--bd))}
.lanes{position:relative;height:calc(76*var(--bd));border-radius:calc(38*var(--bd));background:rgba(0,0,0,.5);box-shadow:inset 0 3px 6px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.16)}
.half{position:absolute;top:0;width:50%;height:100%;display:flex;align-items:center;gap:calc(8*var(--bd))}
.half.high{left:0;justify-content:flex-start;padding-left:calc(10*var(--bd));border-radius:calc(38*var(--bd)) 0 0 calc(38*var(--bd))}
.half.low{right:0;justify-content:flex-end;padding-right:calc(10*var(--bd));border-radius:0 calc(38*var(--bd)) calc(38*var(--bd)) 0}
.half .num{font-family:'Exo 2',system-ui,sans-serif;font-weight:700;font-size:calc(30*var(--bd));line-height:1;letter-spacing:-.02em;text-shadow:0 2px 0 rgba(0,0,0,.6)}
.half.high .num{color:#D99A7A}.half.low .num{color:#8FDFFA}
.half .word{display:flex;align-items:center;gap:calc(5*var(--bd));font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(15*var(--bd));letter-spacing:.04em;color:var(--ink-strong)}
.half[data-pressed]{background:rgba(255,255,255,.06)}
.half svg{width:calc(10*var(--bd));height:calc(10*var(--bd))}
.half.high svg{fill:#FFB38A}.half.low svg{fill:#8FE4FF}
.lanes[data-held] .half{opacity:.38}
.plate{position:absolute;left:calc(6*var(--bd));top:calc(8*var(--bd));width:calc(50% - 8*var(--bd));height:calc(60*var(--bd));display:flex;align-items:center;justify-content:center;gap:calc(10*var(--bd));border-radius:calc(30*var(--bd));pointer-events:none;color:var(--on-plate);opacity:0;transform:translateX(var(--to,0%))}
.lanes[data-side=low] .plate{--to:calc(100% + 4*var(--bd))}
.lanes[data-side=high] .plate.high,.lanes[data-side=low] .plate.low{opacity:1}
.plate .look{position:absolute;inset:0;border-radius:inherit}
.plate .own{background:var(--plate);box-shadow:var(--plate-shadow)}
.plate .bright{background:var(--plate-bright);box-shadow:var(--plate-bright-shadow);opacity:0}
.plate .held{background:var(--plate-held);box-shadow:var(--plate-held-shadow);opacity:0}
.plate .num,.plate .word{position:relative}
.plate .num{font-family:'Exo 2',system-ui,sans-serif;font-weight:700;font-size:calc(36*var(--bd));line-height:1;letter-spacing:-.02em;color:#fff;text-shadow:0 calc(2*var(--bd)) 0 var(--plate-deep),calc(1*var(--bd)) 0 0 var(--plate-deep),calc(-1*var(--bd)) 0 0 var(--plate-deep),0 calc(3*var(--bd)) 0 var(--plate-deep)}
.plate .word{display:flex;align-items:center;gap:calc(5*var(--bd));font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(15*var(--bd));letter-spacing:.04em}
.plate svg{width:calc(10*var(--bd));height:calc(10*var(--bd));fill:currentColor}
.lanes[data-held] .plate{color:var(--held-ink);--plate-deep:var(--held-edge)}
.lanes[data-held] .plate .held{opacity:1}
.lanes[data-held] .plate .own{opacity:0}
.lanes::after{content:'';position:absolute;inset:calc(-3*var(--bd));border-radius:calc(41*var(--bd));border:calc(2*var(--bd)) solid #9EA9B8;opacity:0;pointer-events:none}
.lanes[data-held]::after{opacity:1}
.plate .padlock{position:absolute;top:calc(-10*var(--bd));right:calc(-6*var(--bd));width:calc(26*var(--bd));height:calc(26*var(--bd));display:flex;opacity:0;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(180deg,#E2E3E5 0%,#AFB6BF 100%);box-shadow:0 2px 0 #4A5360,0 4px 8px rgba(0,0,0,.5);color:#141820}
.plate .padlock svg{width:calc(14*var(--bd));height:calc(14*var(--bd))}
.lanes[data-held] .padlock{opacity:1}
.knob{position:absolute;left:50%;top:calc(10*var(--bd));width:calc(56*var(--bd));height:calc(56*var(--bd));margin-left:calc(-28*var(--bd));border-radius:50%;background:radial-gradient(circle at 34% 26%,#FFF 0%,#EEF2F7 34%,#BCC6D3 68%,#8B96A6 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.9),inset 0 -4px 6px rgba(20,26,38,.3),0 3px 0 #6B7686,0 6px 0 #3A4352,0 12px 16px rgba(0,0,0,.55);pointer-events:none}
.lanes:not([data-side=none]) .knob{opacity:0}
.knob svg{position:absolute;fill:none;stroke-linecap:round;stroke-linejoin:round}
.knob .arrows{left:50%;top:50%;width:calc(30*var(--bd));height:calc(16*var(--bd));margin:calc(-8*var(--bd)) 0 0 calc(-15*var(--bd));stroke:var(--knob-ink);stroke-width:2.8}
.knob .run{top:calc(20*var(--bd));width:calc(10*var(--bd));height:calc(16*var(--bd));stroke-width:2.6}
.knob .run.left{left:calc(-14*var(--bd));stroke:#FF9A62}
.knob .run.right{right:calc(-14*var(--bd));stroke:#8FE4FF}

.hand{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10*var(--bd));padding:calc(12*var(--bd));border-radius:calc(26*var(--bd));background:var(--glass);border:1px solid rgba(255,255,255,.16);box-shadow:var(--glass-shadow)}
.handrow{display:flex;justify-content:center;gap:max(calc(8*var(--bd)),calc(58px - 60*var(--bd)))}
.handrow.operators{gap:max(calc(8*var(--bd)),calc(44px - 50*var(--bd)))}
.tile{position:relative;flex:none;border-radius:calc(13*var(--bd));background:rgba(0,0,0,.38);box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.1)}
.tile.number{width:calc(60*var(--bd));height:calc(80*var(--bd))}
.tile.operator{width:calc(50*var(--bd));height:calc(54*var(--bd));border-radius:calc(12*var(--bd))}
.tile .card{position:absolute;left:0;top:0;transition:opacity 200ms var(--settle),transform 200ms var(--settle)}
.hand[data-shut] .card{opacity:.5;transform:scale(.98)}

.lock{position:relative;flex:none;display:block;width:100%;height:calc(76*var(--u))}
.lock::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(68*var(--u));border-radius:calc(26*var(--u));box-shadow:0 4px 0 rgba(0,0,0,.45)}
.lock .face{position:absolute;left:0;right:0;top:0;height:calc(68*var(--u));overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:calc(26*var(--u));background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.18);transition:transform 140ms var(--settle)}
.lock .word{font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(21*var(--u));letter-spacing:.1em;color:var(--ink-dim)}
.lock .reason{font-weight:600;font-size:calc(11.5*max(var(--t),var(--u)));color:var(--ink-dim)}
.lock[data-armed]::before{background:#98A2B1;box-shadow:0 3px 0 #C3CBD6,0 6px 0 #AEB7C4,0 8px 0 #98A2B1}
.lock .glow{position:absolute;left:calc(14*var(--u));right:calc(14*var(--u));top:calc(22*var(--u));bottom:calc(10*var(--u));border-radius:calc(30*var(--u));box-shadow:0 0 calc(40*var(--u)) calc(4*var(--u)) var(--light);opacity:0}
.lock[data-armed] .glow{opacity:.75}
.lock[data-armed] .face{background:linear-gradient(180deg,#FFF 0%,#F1F4F8 50%,#DCE2EA 100%);border:0;box-shadow:inset 0 2px 0 #FFF,inset 0 -4px 0 rgba(120,134,155,.35)}
.lock[data-armed] .word{font-size:calc(22*var(--u));color:var(--ground)}
.lock[data-pressed] .face{transform:translateY(5px);transition-duration:40ms}
.sheen{position:absolute;top:-20%;left:-30%;width:20%;height:140%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0));transform:skewX(-18deg);pointer-events:none}

@container stage (max-height:695.98px){
  .table{--fixed:calc(194px + 6*var(--gap) + 2*var(--pad))}
  .top{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:0;align-items:center}
  .clock{grid-row:1/3}
  .puzzlerow{text-align:left;align-self:end}
  .top .narrator{height:auto;min-height:calc(40*var(--u));justify-content:flex-start;text-align:left;align-self:start}
}

@media (min-aspect-ratio:5/4){
  .table{--fit:clamp(.6px,min(calc((100cqh - 198px)/152),calc((100cqh - 122px)/228),calc((100cqw - 28px)/724)),1px);
    --over:min(1.5px,calc((100cqw - 28px)/724),calc(100cqh/378));--pad:8px;--gap:6px;
    flex-direction:row;align-items:stretch;justify-content:center;gap:calc(24*var(--bd));max-width:none;padding:var(--pad) 14px}
  .reads,.acts{width:calc(350*var(--bd));flex:none}
  .reads{justify-content:center;position:relative}
  .acts{justify-content:center}
  .top{position:relative;display:flex;flex-direction:row;gap:12px;align-items:center}
  .top .puzzlerow{position:absolute;left:0;bottom:calc(100% + 2px)}
  .clock{grid-row:auto}
  .top .narrator{flex:1;min-width:0;height:calc(92*var(--u));justify-content:flex-start;text-align:left}
  .hand{flex:none;padding:calc(6*var(--bd))}
  .line{--wide:calc(350*var(--bd))}
}

.result{--across:calc((100cqw - 28px)/312);--bd:min(1.15px,max(.85px,var(--across)));--u:max(1px,var(--bd));
  display:flex;flex-direction:column;gap:calc(12*var(--bd));padding:14px;max-width:calc(420*var(--u));margin:0 auto}
.rhead{display:flex;flex-direction:column;gap:2px;min-width:0}
.rhead .puzzlerow{text-align:left;height:auto;line-height:1.3}
.lanechip{flex:none;height:calc(34*var(--bd));display:inline-flex;align-items:center;gap:calc(6*var(--bd));padding:0 calc(14*var(--bd));border-radius:calc(17*var(--bd));background:var(--plate);box-shadow:var(--chip-shadow);color:var(--on-plate);font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(13*max(var(--t),var(--bd)));letter-spacing:.08em;white-space:nowrap}
.lanechip svg{width:calc(10*var(--bd));height:calc(10*var(--bd));fill:currentColor}
.hero{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(8*var(--bd))}
.herofigure{--size:84;position:relative;width:100%;text-align:center;outline:0;white-space:nowrap;font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(var(--size)*var(--bd));line-height:calc(88/84);font-variant-numeric:tabular-nums;color:#fff;text-shadow:0 1px 0 #D5DCE6,0 2px 0 #BFC8D4,0 3px 0 #A8B2C1,0 4px 0 #919CAD,0 5px 0 #7B8799,0 6px 0 #667284,0 16px 22px rgba(0,0,0,.6),var(--figure-glow)}
.herofigure[data-fit=small]{--size:64}
.herofigure.plain{--figure-glow:0 0 0 transparent}
.lanechip b{font-weight:800;letter-spacing:0;font-size:calc(16*max(var(--t),var(--bd)))}
.herolines{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink-body);font-size:calc(14*max(var(--t),var(--bd)));text-align:center}
.herolines .at{display:inline-flex;align-items:center;gap:calc(5*var(--bd))}
.herolines svg{width:calc(10*var(--bd));height:calc(10*var(--bd));fill:var(--lane-arrow)}
.result .rail{height:calc(48*var(--bd));width:100%}
.result .railbar{top:calc(30*var(--bd));height:calc(10*var(--bd));border-radius:calc(5*var(--bd))}
.result .railgap{top:calc(30*var(--bd));height:calc(10*var(--bd));border-radius:calc(5*var(--bd))}
.result .railpin{top:calc(27*var(--bd));height:calc(16*var(--bd))}
.result .railbubble{min-width:calc(44*var(--bd));height:calc(24*var(--bd));border-radius:calc(12*var(--bd));font-size:calc(14*var(--bd))}
.result .railtick,.result .raillabel{display:none}
.result .railend{width:calc(28*var(--bd));height:calc(18*var(--bd));margin-top:calc(22*var(--bd))}
.panel{display:flex;flex-direction:column;gap:calc(12*var(--bd));padding:calc(13*var(--bd)) calc(14*var(--bd));border-radius:calc(24*var(--bd));background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 14px 28px rgba(0,0,0,.3)}
.lines{display:flex;flex-direction:column;gap:calc(12*var(--bd))}
.row{display:flex;flex-direction:column;gap:calc(6*var(--bd))}
.rowhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.rowlabel{font-weight:700;font-size:calc(11*max(var(--t),var(--bd)));letter-spacing:.12em;color:var(--ink-hint)}
.rowoff{font-weight:700;font-size:calc(11.5*max(var(--t),var(--bd)));color:var(--ink-body)}
.row.best .rowlabel,.row.best .rowoff,.row.best .rowvalue{color:var(--lane-ink)}
.rowcards{display:flex;align-items:center;gap:calc(3*var(--bd))}
.mini{position:relative;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-variant-numeric:tabular-nums}
.mini.number{width:calc(28*var(--bd));height:calc(34*var(--bd));border-radius:calc(7*var(--bd));background:linear-gradient(180deg,#FFF,#DDE3EB);box-shadow:inset 0 1px 0 #FFF,0 2px 0 #9EA9B8,0 3px 0 #8B96A6;color:var(--card-ink);font-size:calc(18*var(--bd))}
.mini.operator{width:calc(20*var(--bd));height:calc(26*var(--bd));border-radius:calc(6*var(--bd));background:linear-gradient(180deg,#4E5A6E,#232B38);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 2px 0 #11151D;color:#fff;font-size:calc(14*var(--bd))}
.mini[data-differs].number{background:linear-gradient(180deg,#FFF,#FFE3D2);box-shadow:inset 0 1px 0 #FFF,0 2px 0 #D98A5C,0 3px 0 #C0703F}
.mini[data-differs]::after{content:'';position:absolute;inset:calc(-3*var(--bd)) calc(-3*var(--bd)) calc(-6*var(--bd));border-radius:calc(10*var(--bd));border:2px solid var(--light);box-shadow:0 0 10px var(--light)}
.rowvalue{flex:1;text-align:right;font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(19*max(var(--t),var(--bd)));font-variant-numeric:tabular-nums}
.rowwords{color:var(--ink-body);font-size:calc(14*max(var(--t),var(--bd)))}
.tray{padding:calc(12*var(--bd)) calc(16*var(--bd));border-radius:calc(22*var(--bd));background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 2px 4px rgba(0,0,0,.5);color:var(--ink-body);font-size:calc(14*max(var(--t),var(--bd)));white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
.sharesaid{min-height:calc(20*var(--t));text-align:center;color:var(--ink-body);font-size:calc(13*var(--t))}
.offer{--badge:48px;display:flex;flex-direction:column;align-items:center;gap:calc(var(--badge)/4);text-align:center;color:var(--ink-body);font-size:calc(14*max(var(--t),var(--bd)))}
.badges{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:calc(var(--badge)/4)}
.install{display:block;height:var(--badge);background-repeat:no-repeat}
.install.appstore{width:calc(var(--badge)*119.664/40);background-image:url(badges/app-store.svg);background-size:contain;background-position:center}
.install.store{width:calc(var(--badge)*564/168);background-image:url(badges/google-play.png);background-size:calc(var(--badge)*646/168) auto;background-position:calc(var(--badge)*-41/168) calc(var(--badge)*-41/168)}
.install:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px}
@media (max-width:380px){.offer{--badge:44px}}
footer{position:relative;display:flex;justify-content:center;padding-bottom:var(--safe-b)}
[data-view=door] footer,html:not([data-view]) footer{position:fixed;left:0;right:0;bottom:0}
footer a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink-body);font-size:calc(13*var(--t));text-underline-offset:3px}
[data-view=count] #foot,[data-view=table] #foot{display:none}
@container stage (min-width:660px){.result{max-width:760px}.lines{display:grid;grid-template-columns:1fr 1fr;gap:calc(12*var(--bd))}.lines .row.yours{grid-column:1/-1}}

#ghost{position:fixed;left:0;top:0;width:100vw;height:100svh;padding:var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);pointer-events:none}
#ghostfield{container:stage/size;height:100%}
#ghost *{animation:none}
.ghostlight{position:absolute;display:block;border-radius:50%}
.puff{position:absolute;left:0;right:0;display:flex;justify-content:center;align-items:flex-start;pointer-events:none}
.puff i{flex:none;border-radius:1px;background:var(--light);opacity:0}

.carry{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none}
.carrier{position:absolute;left:0;top:0;width:0;height:0}
.carrier .card{position:absolute;left:0;top:0;transform:translate(-50%,-50%);transition:transform 120ms var(--settle)}
.carrier .card.number[data-form=line]{transform:translate(-50%,-50%) scale(.733,.778)}
.carrier .card.operator[data-form=line]{transform:translate(-50%,-50%) scale(.6,.854)}

dialog::backdrop{background:rgba(6,7,11,.4)}
#ask{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;margin:0;padding:0 14px calc(var(--safe-b) + 14px)}
.askpane{max-width:520px;margin:0 auto;padding:18px 16px 14px;border-radius:26px;background:linear-gradient(180deg,#1C2230,#141923);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 24px rgba(0,0,0,.45)}
.askpane h2{font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(19*var(--t));text-align:center}
.askpane p{margin-top:6px;color:var(--ink-body);text-align:center}
.askpane .leave{display:block;width:100%;min-height:52px;margin-top:14px;border-radius:26px;background:var(--glass);border:1px solid rgba(255,255,255,.18);font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(16*var(--t));letter-spacing:.08em}
.askpane .key{margin-top:12px}
#sheet{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;margin:0;padding:0 14px calc(var(--safe-b) + 14px)}
.sheetpane{position:relative;max-width:520px;margin:0 auto;padding:20px 18px 22px;border-radius:26px;background:linear-gradient(180deg,#1C2230,#141923);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 24px rgba(0,0,0,.45)}
.sheetpane h2{font-family:'Exo 2',system-ui,sans-serif;font-weight:800;font-size:calc(18*var(--t));letter-spacing:.08em}
.sheetpane p{margin-top:12px;color:var(--ink-body);font-size:calc(15*var(--t));line-height:1.45}
.sheetclose{position:absolute;right:6px;top:6px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.sheetclose svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}

@keyframes neon{50%{opacity:1}}
@keyframes veil{50%{opacity:.22}}
@keyframes rock{0%,28%{transform:translateX(0)}46%{transform:translateX(calc(-9*var(--bd)))}64%{transform:translateX(0)}82%{transform:translateX(calc(9*var(--bd)))}100%{transform:translateX(0)}}
@keyframes runL{0%{opacity:0;transform:translateX(6px)}25%{opacity:1}100%{opacity:0;transform:translateX(-12px)}}
@keyframes runR{0%{opacity:0;transform:translateX(-6px)}25%{opacity:1}100%{opacity:0;transform:translateX(12px)}}
@keyframes bob{50%{transform:translateY(calc(-5*var(--bd)))}}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}
@keyframes sheen{0%,56%{transform:skewX(-18deg) translateX(0)}84%,100%{transform:skewX(-18deg) translateX(520%)}}
@keyframes swayHigh{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(calc(-7*var(--m))) rotate(0deg)}}
@keyframes swayLow{0%,100%{transform:translateY(calc(-5*var(--m))) rotate(2deg)}50%{transform:translateY(calc(2*var(--m))) rotate(0deg)}}
@keyframes shade{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(.88);opacity:.36}}
@keyframes breathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
@keyframes wake{0%,100%{opacity:.45;transform:scale(.97)}50%{opacity:.95;transform:scale(1.04)}}
@media (prefers-reduced-motion:no-preference){
  html:not([data-still]) .light.ember{animation:driftA 16s ease-in-out infinite}
  html:not([data-still]) .light.frost{animation:driftB 19s ease-in-out infinite}
  html:not([data-still]) .lanes:not([data-held]) .plate .bright{animation:neon 2.4s ease-in-out infinite}
  html:not([data-still]) .table[data-lane=high] .railend:first-child .veil,html:not([data-still]) .table[data-lane=low] .railend:last-child .veil{animation:veil 2.4s ease-in-out infinite}
  html:not([data-still]) .lanes[data-side=none]:not([data-dragging]) .knob{animation:rock 3s ease-in-out infinite}
  html:not([data-still]) .lanes[data-side=none]:not([data-dragging]) .run.left{animation:runL 1.5s linear infinite}
  html:not([data-still]) .lanes[data-side=none]:not([data-dragging]) .run.right{animation:runR 1.5s linear .75s infinite both}
  html:not([data-still]) .hand:not([data-shut]) .tile .card:not([data-flying],[data-carried]){animation:bob 1.8s ease-in-out calc(var(--i)*300ms) infinite}
  html:not([data-still]) .lock[data-armed] .glow{animation:pulse 1.5s ease-in-out infinite}
  html:not([data-still]) .lock[data-armed] .sheen{animation:sheen 3.6s ease-in-out infinite}
  html:not([data-still]) .twenty .sway{animation:swayHigh 4.4s ease-in-out infinite}
  html:not([data-still]) .one .sway{animation:swayLow 4.9s ease-in-out infinite}
  html:not([data-still]) .markshade{animation:shade 4.4s ease-in-out infinite}
  html:not([data-still]) #slot .glow{animation:breathe 2.8s ease-in-out infinite}
  html:not([data-still]) #slot .sheen{animation:sheen 4.2s ease-in-out .6s infinite}
  html:not([data-still]) .result[data-fresh] .sharekey .glow{animation:wake 1.8s ease-in-out infinite}
  html:not([data-still]) .result[data-fresh] .sharekey .sheen{animation:sheen 3.8s ease-in-out infinite}
}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{transition-duration:0s!important}
  .seen,.boltwhole{opacity:1}
}