:root{color-scheme:dark;color:#fff5df;--muted:#bdcad4;--gold:#ffca72;--line:#4e6273;background:#101a25;font-family:system-ui,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(at 50% 30%,#263d53 0%,#101a25 72%);grid-template-rows:auto 1fr auto;min-height:100svh;margin:0;display:grid}.toolbar{justify-content:flex-end;padding:clamp(.65rem,2.5vw,1.75rem) clamp(.9rem,3vw,2.5rem) 0;display:flex}#sound{border-color:var(--line);color:inherit;background:#192938;padding:.45rem .9rem;font-size:.95rem}#sound:hover:enabled{background:#30475d}#sound span{min-width:1.8em;color:var(--muted);margin-inline-start:.2em;display:inline-block}#sound[aria-pressed=true] span{color:var(--gold)}footer{text-align:center;padding:0 1rem clamp(.8rem,2.5vw,1.5rem)}footer a{min-height:2.75rem;color:var(--muted);text-underline-offset:.2em;align-items:center;display:inline-grid}footer a:hover{color:var(--gold)}main{text-align:center;place-self:center;width:min(100%,104rem);padding:clamp(.6rem,2.5svh,2rem) clamp(.65rem,4vw,3rem)}h1,#reference{letter-spacing:-.055em;text-wrap:balance;margin:0;font:800 clamp(2.9rem,min(10vw,13svh),10rem)/.97 system-ui,sans-serif}.reels{grid-template-columns:minmax(0,1.65fr) repeat(2,minmax(0,1fr));gap:clamp(.4rem,2vw,1.5rem);margin:clamp(1.2rem,4svh,3.75rem) 0 clamp(1rem,3svh,2.5rem);display:grid}.reel{border:1px solid var(--line);background:#152433;border-radius:clamp(.55rem,1.3vw,1rem);min-width:0;padding:clamp(.5rem,1.25vw,1rem) clamp(.2rem,.85vw,.7rem) clamp(.2rem,.85vw,.7rem);box-shadow:0 .65rem 1.5rem #060e1759}.reel-label{color:var(--muted);letter-spacing:.12em;text-transform:uppercase;padding-bottom:clamp(.4rem,1vw,.9rem);font-size:clamp(.68rem,1.6vw,1.35rem);font-weight:750;display:block}.reel-window{--row:clamp(2.5rem, min(8vw, 10svh), 7rem);height:calc(var(--row) * 3);isolation:isolate;background:#0f1c29;border-radius:.55rem;position:relative;overflow:hidden}.reel-window:before{content:"";inset:var(--row) 0;z-index:-1;border-block:1px solid var(--line);background:#23394d;position:absolute}.reel-window:after{content:"";pointer-events:none;background:linear-gradient(#0f1c29 0%,#0000 34% 66%,#0f1c29 100%);position:absolute;inset:0}.reel-strip span{height:var(--row);font-variant-numeric:tabular-nums;place-items:center;padding-inline:.15rem;font-size:clamp(1.25rem,min(6vw,8svh),5.5rem);font-weight:800;line-height:1;display:grid}.reel:first-child .reel-strip span{letter-spacing:-.025em;text-wrap:balance;font-size:clamp(.8rem,min(3.4vw,5.5svh),3.9rem)}.reel[data-state=stopped]{border-color:var(--gold)}.reel[data-state=stopped] .reel-label{color:var(--gold)}@media (prefers-reduced-motion:no-preference){.reel[data-state=spinning] .reel-strip{animation:reel-scroll var(--cycle,.108s) linear infinite}.reel:nth-child(2){--cycle:.126s}.reel:nth-child(3){--cycle:.116s}}@keyframes reel-scroll{to{transform:translateY(calc(-1 * var(--row)))}}button{background:var(--gold);color:#211b10;cursor:pointer;border:1px solid #0000;border-radius:.65rem;min-height:3rem;padding:.7rem 1.65rem;font:750 1rem system-ui,sans-serif}#spin,#spin-again{letter-spacing:.075em;text-transform:uppercase;min-width:clamp(8rem,20vw,19rem);min-height:clamp(3.3rem,8svh,6.25rem);font-size:clamp(1.1rem,min(3vw,4svh),2.5rem)}button:hover:enabled{background:#ffdb9d}button:disabled{opacity:.6;cursor:default}:is(button,a):focus-visible{outline-offset:4px;outline:2px solid #fff2d7}.status{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}dialog{border:1px solid var(--gold);width:min(100% - 1.5rem,88rem);color:inherit;text-align:center;background:#172839;border-radius:clamp(1rem,2vw,1.75rem);padding:clamp(1.5rem,min(7vw,9svh),7rem) clamp(.85rem,4vw,4rem);box-shadow:0 1.5rem 4rem #0007}dialog::backdrop{backdrop-filter:blur(8px);background:#080e16c4}#reference{text-transform:uppercase;margin-bottom:clamp(1.4rem,6svh,4rem);font-size:clamp(2rem,min(9.5vw,15svh),10.5rem);line-height:1.02}@media (height<=460px) and (width>=520px){body{grid-template-rows:1fr auto}.toolbar{position:absolute;inset:0 0 auto auto}h1{font-size:clamp(2rem,11svh,3rem)}.reel-window{--row:clamp(1.8rem, 9svh, 2.5rem)}.reels{margin-block:.8rem}footer{padding-bottom:0}}