@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--cyan:#54f5ff;--pink:#ff63d8;--lime:#d6ff3f;--muted:#a2b2ba;--line:#35464e;--surface:#091116;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;color:#f5fbff;background:radial-gradient(ellipse at 32% 45%,#063b4555,transparent 55%),radial-gradient(#31515c66 .6px,transparent .7px),#030609;background-size:auto,6px 6px,auto;font:13px 'Noto Sans KR',sans-serif}
body:after{content:'';position:fixed;inset:0;pointer-events:none;z-index:10;background:repeating-linear-gradient(0deg,transparent 0 3px,#00000014 3px 4px)}
button,input{font:inherit}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:#101c24;transition:background .15s,box-shadow .15s}button:disabled{opacity:.4;cursor:default}button:not(:disabled):hover{background:#15343e;border-color:var(--lime)}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--lime);outline-offset:3px}a{color:var(--lime);text-underline-offset:3px}::selection{background:var(--cyan);color:white}
header{height:56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #315963;padding:0 24px;background:linear-gradient(#0b1820,#060b10)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#f5fbff;font:700 24px var(--mono);letter-spacing:3px}.logo{color:var(--cyan);font-size:34px;text-shadow:2px 0 var(--lime)}.studio{font-size:8px;line-height:1.6;letter-spacing:2px;border-left:1px solid var(--line);padding-left:12px;width:76px}.header-note{color:var(--muted);font-size:11px}i{display:inline-block;width:5px;height:5px;background:var(--cyan);margin-right:8px;box-shadow:2px 2px 0 #54f5ff44}header button,#copy,#reset{padding:7px 9px;font-size:10px;color:var(--lime)}
main{max-width:1800px;margin:auto;padding:0 24px;height:calc(100svh - 56px);min-height:590px;display:grid;grid-template-rows:88px minmax(0,1fr) 38px}.intro{display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{font:9px var(--mono);letter-spacing:2px;color:var(--cyan)}h1{font-size:26px;font-weight:900;letter-spacing:-1.2px;margin:5px 0;line-height:1.25}h1 span{color:var(--cyan)}.intro p{color:var(--muted);font-size:11px;margin:0}.edition{font:700 30px/.8 var(--mono);color:var(--lime);text-align:right}.edition small{font-size:8px;letter-spacing:2px}
.workspace{display:grid;grid-template-columns:330px minmax(300px,1fr) minmax(295px,.85fr);gap:14px;min-height:0}.workspace>section,.settings{min-width:0;min-height:0;border:1px solid var(--line);background:linear-gradient(125deg,#18384244,transparent 60%),#080e13;box-shadow:inset 0 1px #54f5ff33,0 5px 20px #0005}.view-switch{display:none}
.machine{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:18px;background:radial-gradient(ellipse at 50% 45%,#063b4555,transparent 70%),#050c11!important;border-top:2px solid var(--cyan)!important}.machine:before,.machine:after{content:'';position:absolute;pointer-events:none;width:60px;height:60px;border-color:#54f5ff;border-style:solid;opacity:.6}.machine:before{left:7px;top:7px;border-width:1px 0 0 1px}.machine:after{right:7px;bottom:7px;border-width:0 1px 1px 0}.section-top{display:flex;justify-content:space-between;gap:8px;font:9px var(--mono);letter-spacing:1px;color:var(--lime);z-index:1}.section-top span:last-child{color:var(--muted)}
.slot-stage{display:flex;flex:1;flex-direction:column;justify-content:center;min-height:280px;padding:20px 0}.slot-machine{position:relative;width:100%;padding:18px 12px;border:1px solid #54f5ff88;background:linear-gradient(135deg,#102833,#080f18 70%);box-shadow:0 0 0 5px #54f5ff08,0 0 40px #54f5ff0d,inset 0 1px #54f5ff55}.slot-machine:before,.slot-machine:after{content:'';position:absolute;top:calc(50% - 5px);width:5px;height:10px;background:var(--lime)}.slot-machine:before{left:-3px}.slot-machine:after{right:-3px}.slot-label,.slot-progress{display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);color:var(--cyan);letter-spacing:1px}.slot-label{margin-bottom:20px}.slot-label span:first-child{color:var(--lime)}.slot-progress{margin-top:18px;font-size:9px;letter-spacing:.5px}.pixel-leds{color:var(--pink);letter-spacing:3px}.reels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.reel{min-width:0;border:1px solid #355765;background:#040b10;transition:border-color .15s,box-shadow .15s}.reel.locked{border-color:var(--lime);box-shadow:0 0 12px #d6ff3f16}.reel-window{height:120px;position:relative;overflow:hidden}.reel-window:before{content:'';position:absolute;inset:40px 0;z-index:2;border-top:1px solid #54f5ff66;border-bottom:1px solid #54f5ff66;background:#54f5ff08;pointer-events:none}.reel-window:after{content:'';position:absolute;inset:0;z-index:3;background:linear-gradient(#040b10ee,transparent 38%,transparent 62%,#040b10ee);pointer-events:none}.reel.locked .reel-window:before{border-color:#d6ff3f77;background:#d6ff3f09}.reel-track{will-change:transform}.reel-symbol{height:40px;display:grid;place-items:center;color:var(--number,#d1edf5);font:600 clamp(20px,2.3vw,30px)/1 var(--mono),'Apple Color Emoji','Segoe UI Emoji',sans-serif}.reel.locked .reel-symbol:nth-child(2){color:var(--number,#d1edf5);text-shadow:0 0 12px color-mix(in srgb,var(--number) 30%,transparent)}.reel-index{display:block;text-align:center;padding:7px 0;border-top:1px solid #223944;font:8px var(--mono);letter-spacing:1px;color:#93aab7}.slot-caption{text-align:center;font-size:10px;color:var(--muted);margin:20px 0 0}
.balls{display:flex;justify-content:center;gap:7px;margin:12px 0 18px}.ball{display:inline-grid;place-items:center;width:38px;height:42px;border:1px solid #45636e;background:linear-gradient(#102732,#071017);color:#9fbac4;font:600 18px var(--mono);box-shadow:inset 0 2px #54f5ff22}.ball.revealed{background:linear-gradient(#ffffff18,transparent),#09161e;color:var(--ball);border-color:var(--ball);box-shadow:inset 0 -3px #0008;animation:pop .1171875s steps(3,end) both}.action{margin-top:auto;text-align:center;z-index:2}.action button{width:100%;padding:14px;background:var(--lime);border:1px solid var(--lime);color:#081004;font-size:15px;font-weight:900;box-shadow:3px 3px 0 #d6ff3f33;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}.action button:not(:disabled):hover{background:var(--cyan);border-color:var(--cyan);box-shadow:3px 3px 0 #ff63d8}.action button span{float:right}
.action p{font-size:10px;color:var(--muted);margin:10px 0 0}
.settings{padding:16px;display:flex;flex-direction:column;border-top:2px solid #ff63d8!important}.panel-title,.results-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}h2{font-size:13px;letter-spacing:-.3px;margin:0}.condition-tabs{display:flex;gap:3px;margin-bottom:12px}.condition-tabs button{flex:1;padding:9px 3px;color:var(--muted);font-size:11px}.condition-tabs [aria-selected=true]{background:#173b3c;border-color:var(--lime);color:var(--lime);box-shadow:inset 0 -2px var(--lime)}.condition-panel{min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#35606f #081116;padding:2px 3px 2px 0;flex:1}.label{display:flex;justify-content:space-between;margin:10px 0 8px;font-size:11px;color:#d1dfe5}.label b{color:var(--lime);font-size:10px}.segments{display:flex;gap:5px}.segments button{flex:1;padding:7px;font:12px var(--mono)}.segments .selected{background:#193c40;border-color:var(--lime);color:var(--lime)}input[type=range]{width:100%;height:5px;accent-color:var(--cyan);margin:7px 0}.range-caption{display:flex;justify-content:space-between;color:var(--muted);font-size:9px}.helper{color:var(--muted);font-size:10px;line-height:1.7}.option{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #263c46;padding:12px 0}.option strong{font-size:11px;font-weight:600}.option small{display:block;color:var(--muted);font-size:10px;line-height:1.5;margin-top:4px}.option>div{min-width:0}em{font:9px var(--mono);color:var(--lime);margin-left:4px}.option input{appearance:none;position:relative;width:32px;height:19px;flex-shrink:0;border:1px solid #547582;background:#0d1e27;cursor:pointer}.option input:before{content:'';position:absolute;width:11px;height:11px;top:3px;left:3px;background:#afc0ca;transition:transform .15s}.option input:checked{background:#d6ff3f;border-color:#d6ff3f}.option input:checked:before{transform:translateX(13px);background:#142009}
#previousBox{font-size:10px;color:var(--muted);line-height:1.6;padding-bottom:8px}#previousBox p{margin:0 0 6px}#previousBox small{font-size:9px}details{border-top:1px solid var(--line);padding:12px 0}summary{font-size:11px;cursor:pointer;list-style:none}summary span{float:right;color:var(--lime)}.analysis-details .helper{overflow-wrap:anywhere}.numbers-heading{font-size:12px;color:var(--lime);margin:10px 0}.legend{display:flex;gap:16px;font-size:10px;color:var(--lime)}.legend span+span{color:#ff83dc}#numberGrid{display:grid;grid-template-columns:repeat(9,1fr);gap:4px;margin:16px 0}#numberGrid button{padding:9px 0;font:11px var(--mono);background:#10202a}#numberGrid .fixed{color:#030b0d;background:var(--lime);border-color:var(--lime)}#numberGrid .excluded{color:#ff83dc;text-decoration:line-through;border-color:var(--cyan);background:#30172c}
.results{padding:16px;display:flex;flex-direction:column;border-top:2px solid #d6ff3f!important}.results-title h2 span{font:10px var(--mono);color:var(--lime);margin-left:4px}.results-title #copy{font-size:9px;padding:7px}#result{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#35606f #081116}#result:has(.empty){display:grid;place-items:center}.empty{text-align:center;padding:22px 8px}.empty>span{display:inline-grid;place-items:center;width:70px;height:70px;border:1px solid #365767;color:#54f5ff;transform:rotate(45deg);font-size:32px;margin-bottom:18px;box-shadow:0 0 0 6px #54f5ff0d}.empty h3{font-size:12px;font-weight:500;color:#d6e8ef}.empty p{font-size:10px;color:var(--muted);line-height:1.8}.ticket{display:grid;grid-template-columns:37px minmax(0,1fr);align-items:center;column-gap:8px;border:1px solid #354b57;background:linear-gradient(100deg,#12242d,#0b1219);padding:8px;margin-bottom:7px;animation:pop .1171875s both}.ticket>strong{font:9px/1.5 var(--mono);color:var(--lime)}.ticket-numbers{display:flex;justify-content:space-between;gap:3px}.ticket .ball{width:28px;height:29px;font-size:12px}.ticket small{grid-column:2;color:var(--muted);font-size:8px;margin-top:5px}#result:has(.ticket:nth-child(6)) .ticket{padding:5px 7px;margin-bottom:4px}#result:has(.ticket:nth-child(6)) .ticket small{display:none}#result:has(.ticket:nth-child(6)) .ball{height:25px}#error{color:#ff9bdb;font-size:11px;line-height:1.7}#error:not(:empty){border:1px solid var(--cyan);padding:10px;margin-bottom:10px}
footer{display:flex;align-items:center;justify-content:space-between;gap:14px;color:#94a8b3;font:8px var(--mono)}footer p{font:9px 'Noto Sans KR',sans-serif;margin:0;line-height:1.6}
body{overflow-x:clip}#particles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:20;contain:strict}#confetti-canvas{display:block;width:100%;height:100%;pointer-events:none}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(min-width:1051px) and (max-height:740px){main{grid-template-rows:78px minmax(0,1fr) 34px}.machine,.settings,.results{padding:13px}.option{padding:10px 0}.condition-tabs{margin-bottom:8px}.panel-title,.results-title{margin-bottom:10px}.ticket{padding:6px;margin-bottom:5px}.balls{margin:8px 0 12px}.intro h1{font-size:24px}}
@media(max-width:1050px){main{max-width:760px;padding:0 16px;grid-template-rows:88px 40px minmax(0,1fr) 46px;gap:8px;min-height:650px;height:calc(100svh - 56px)}.view-switch{display:flex;gap:5px}.view-switch button{flex:1;font-size:12px}.view-switch [aria-pressed=true]{background:#133b40;border-color:var(--cyan);color:#d6ff3f}.workspace{grid-template-columns:1fr}.workspace[data-view=machine]>.settings,.workspace[data-view=machine]>.results,.workspace[data-view=settings]>.machine,.workspace[data-view=settings]>.results,.workspace[data-view=results]>.machine,.workspace[data-view=results]>.settings{display:none}.settings,.results{padding:16px}.condition-panel{padding-right:4px}.option{padding:12px 0}.header-note{display:none}.balls{margin:10px 0 14px}.ticket{grid-template-columns:45px minmax(0,1fr);padding:9px 12px}.ticket-numbers{justify-content:start;gap:12px}.ticket .ball{width:35px;height:32px}footer>span:last-child{display:none}footer p{font-size:8px}.edition{font-size:24px}.intro h1{font-size:24px}}
@media(max-width:440px){header{padding:0 16px}.brand{font-size:22px}.studio{font-size:7px;width:66px;padding-left:8px}.intro h1{font-size:21px;letter-spacing:-1px}.intro p{font-size:10px}.eyebrow{font-size:8px;letter-spacing:1px}.edition{display:none}.section-top{font-size:8px}.ticket-numbers{gap:7px}.ticket .ball{width:29px}.results-title h2{font-size:12px}footer{gap:10px}footer>span{flex-shrink:0}#numberGrid button{padding:9px 0}.slot-machine{padding:12px 8px}.reels{gap:4px}.reel-symbol{font-size:23px}.slot-label{font-size:8px}.slot-stage{min-height:250px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.active-options{align-self:flex-end;width:min(100%,280px);margin-top:14px;z-index:1;min-height:0;flex-shrink:0}
.active-options{padding:0;border-top:0}
.active-options summary{margin:0;text-align:right;font-size:10px;font-weight:500;color:var(--muted);min-height:28px}
.active-options summary span{float:none;margin-left:8px;font-size:9px}
.active-options[open] summary{margin-bottom:6px}
.active-options ul{list-style:none;margin:0;padding:0 8px 0 0;border-right:2px solid #54f5ff55;max-height:112px;overflow:auto;scrollbar-width:thin;scrollbar-color:#35606f #081116;text-align:right}
.active-options li{font-size:10px;line-height:1.7;color:#c6dce4;overflow-wrap:anywhere}
.machine{overflow-y:auto}
.slot-stage{min-height:min-content;flex-shrink:0}
.action,.section-top{flex-shrink:0}
#viewResults{margin-bottom:10px}
@media(max-width:1050px){.active-options{width:100%;margin-top:12px}.active-options ul{max-height:90px}.slot-stage{padding:16px 0}.slot-caption{margin-top:12px}.ticket-numbers{gap:clamp(2px,1.7vw,12px)}.ticket .ball{min-width:0;flex-shrink:1}}

/* High-tension stage: quiet controls, concentrated motion at the reveal. */
:root{--pink:#ee64ff;--surface:#090b14}
body{background:radial-gradient(ellipse at 52% 42%,#40216a26,transparent 58%),radial-gradient(#53647b30 .6px,transparent .7px),#05060b;background-size:auto,8px 8px,auto}
header{background:#080a12;border-bottom-color:#282e42}.logo{color:var(--lime);text-shadow:2px 0 var(--pink)}
.eyebrow{color:var(--pink)}h1 span{color:var(--lime)}
.workspace>section,.settings{background:linear-gradient(130deg,#25203a35,transparent 65%),#0a0d15;border-color:#303447}
.settings{border-top-color:var(--pink)!important}.results{border-top-color:var(--lime)!important}
.machine{background:radial-gradient(ellipse at 50% 52%,#55258038,transparent 65%),#080b13!important;border-top-color:var(--cyan)!important}
.slot-stage{position:relative;isolation:isolate;gap:0;min-height:370px;margin:14px 0 18px;padding:50px 0 40px;perspective:900px}
.slot-stage:before{content:'';position:absolute;inset:20% -18% 0;z-index:-2;pointer-events:none;background:linear-gradient(#9d50ff18 1px,transparent 1px),linear-gradient(90deg,#9d50ff18 1px,transparent 1px);background-size:28px 28px;transform:rotateX(58deg);mask-image:radial-gradient(ellipse,#000,transparent 68%)}
.stage-heading{position:relative;z-index:1;margin:0 0 22px;text-align:center;pointer-events:none}
.stage-heading>span{display:block;color:var(--pink);font:8px var(--mono);letter-spacing:2px;margin-bottom:10px}
.stage-heading strong{display:block;color:var(--lime);font:900 clamp(30px,3.2vw,56px)/.92 var(--mono);letter-spacing:-2px;text-shadow:3px 3px 0 #672580,0 0 26px #d6ff3f1c}
.stage-heading strong span{display:block;font:800 11px/1.3 'Noto Sans KR',sans-serif;letter-spacing:4px;color:#dce7f1;text-shadow:none;margin-top:10px}
.stage-ribbon{position:absolute;left:-22px;right:-22px;height:21px;overflow:hidden;pointer-events:none;z-index:-1;border-block:1px solid #d6ff3f66;background:#d6ff3f;color:#0a0c12;opacity:.8}
.stage-ribbon span{display:block;width:max-content;font:700 10px/19px var(--mono);letter-spacing:2px}
.ribbon-top{top:6px;transform:rotate(-5deg)}.ribbon-bottom{bottom:3px;transform:rotate(-5deg);background:var(--pink);border-color:var(--pink);opacity:.55}
.slot-machine{z-index:1;border-color:#8f78bb;background:linear-gradient(130deg,#25233d,#0b101c 70%);box-shadow:-4px 4px 0 #9c4dff24,4px -3px 0 #54f5ff15,0 18px 40px #0008,inset 0 1px #d1b3ff33}
.slot-label span:last-child{color:#c09cfc}.slot-caption{position:relative;color:#b1aec5;margin-top:14px}
.reel{background:#070a13;border-color:#47405d}.reel.locked{border-color:var(--lime);box-shadow:0 0 17px #d6ff3f22,inset 0 0 14px #d6ff3f08}
.reel.locked .reel-symbol:nth-child(2){text-shadow:0 0 17px color-mix(in srgb,var(--number) 55%,transparent)}
.slot-stage[data-phase=drawing] .stage-heading strong{color:var(--cyan);text-shadow:3px 3px 0 #7735ad,0 0 28px #54f5ff30}
.slot-stage[data-phase=complete] .stage-heading strong{color:var(--lime);text-shadow:3px 3px 0 #8c36a9,0 0 30px #d6ff3f44}
.slot-stage[data-phase=complete] .slot-machine{border-color:var(--lime);box-shadow:0 0 28px #d6ff3f14,5px 5px 0 #d6ff3f13}
.action button{letter-spacing:.5px;box-shadow:4px 4px 0 #af46e64d}.action button:disabled{opacity:.65}
#viewResults{background:#17152a;color:var(--lime);border-color:#8f6abc;box-shadow:none}
.ticket{border-color:#45405b;background:linear-gradient(110deg,#242039,#0b101a);animation:ticket-reveal .234375s cubic-bezier(.16,1,.3,1) both}
.ticket>strong{color:var(--pink)}
@keyframes ribbon-drift{to{transform:translateX(-50%)}}
@keyframes ticket-reveal{from{opacity:0;transform:perspective(700px) rotateX(-12deg) translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:1051px) and (max-height:820px){.slot-stage{min-height:305px;padding:35px 0 30px;margin:12px 0}.stage-heading{margin-bottom:14px}.stage-heading strong{font-size:34px}.stage-heading>span{margin-bottom:7px}.stage-heading strong span{margin-top:7px}.slot-label{margin-bottom:12px}.slot-progress{margin-top:12px}.active-options ul{max-height:76px}}
@media(max-width:1050px){.slot-stage{min-height:330px;padding:40px 0 32px;margin:10px 0 16px}.stage-heading strong{font-size:46px}.stage-heading{margin-bottom:20px}.stage-ribbon{left:-18px;right:-18px}.active-options summary{min-height:22px}}
@media(max-width:440px){.stage-heading strong{font-size:39px}.stage-heading strong span{font-size:10px;letter-spacing:3px}.stage-heading>span{font-size:7px;letter-spacing:1.5px}.slot-stage{min-height:320px}.stage-ribbon span{font-size:9px}.slot-machine{padding:12px 8px}}
@media(prefers-reduced-motion:reduce){.slot-stage .stage-ribbon span,.ticket{animation:none!important}.speed-lines{display:none}}
/* Size the stage from its content so decoration never pushes over the action. */
.slot-stage{flex:1 0 auto}
@media(min-width:1051px) and (max-height:820px){.slot-stage{padding:32px 0 28px;min-height:0;margin:8px 0 12px}.stage-heading{margin-bottom:12px}.stage-heading strong{font-size:32px}.stage-heading strong span{font-size:9px}.slot-machine{padding:10px}.slot-label{margin-bottom:8px}.slot-progress{margin-top:8px}.slot-caption{margin-top:10px}.stage-heading>span{font-size:7px}.active-options ul{max-height:56px}.active-options{margin-top:10px}}
@media(min-width:1051px){#viewResults{display:none}}
.ribbon-top,.ribbon-bottom{transform:rotate(-3deg)}
@media(max-width:1050px){.slot-stage{padding:36px 0 30px;margin:8px 0 12px;min-height:0}.stage-heading{margin-bottom:14px}.slot-label{margin-bottom:12px}.slot-progress{margin-top:12px}.slot-caption{margin-top:10px}}

/* 128 BPM: number emphasis lasts a quarter beat. */
.reel.locked{animation:number-lock .1171875s ease-out}
@keyframes number-lock{from{filter:brightness(1.8)}to{filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.reel.locked{animation:none}}

/* Two equal ribbon groups make the wrap point invisible at any panel width. */
.ribbon-track{display:flex;width:max-content;animation:ribbon-drift 30s linear infinite}
.stage-ribbon .ribbon-group{flex:none;white-space:pre;padding-right:0}
.ribbon-bottom .ribbon-track{animation-duration:36s;animation-direction:reverse}
.slot-stage>.active-options{align-self:stretch;width:100%;margin:14px 0 0;padding:10px 0 0;border-top:1px solid #504362;z-index:2}
.slot-stage>.active-options summary{text-align:left;min-height:20px}.slot-stage>.active-options summary span{float:right}
.slot-stage>.active-options ul{display:flex;flex-wrap:wrap;gap:4px 6px;max-height:72px;padding:0;border:0;text-align:left}
.slot-stage>.active-options li{padding:2px 6px;border:1px solid #403951;background:#100e1b;font-size:9px}
.pixel-field{position:absolute;inset:-30px;pointer-events:none;z-index:4;overflow:hidden}
.pixel-field i{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:0;background:var(--cyan);box-shadow:0 0 5px #54f5ff66;opacity:0;animation:pixel-gather 3.75s var(--offset) linear infinite}
.pixel-field i:nth-child(3n){background:var(--pink);width:4px;height:4px}.pixel-field i:nth-child(3n+1){background:var(--lime)}
.slot-stage[data-phase=drawing] .pixel-field i{animation-duration:.9375s}
.slot-stage[data-phase=complete] .pixel-field{display:none}
@keyframes pixel-gather{0%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}15%{opacity:.75}80%{opacity:.8}100%{opacity:0;transform:translate(0,0) scale(.25)}}
.ticket{animation:none}
.ticket .ball.revealed{transform-origin:center bottom;animation:number-place .46s calc(var(--order)*.09s) both cubic-bezier(.22,.7,.3,1)}
@keyframes number-place{0%{opacity:0;transform:translate(-10px,-22px) rotate(-12deg)}55%{opacity:1;transform:translate(0,2px) scale(1.08,.86) rotate(0)}78%{transform:translate(0,-3px) scale(.98,1.03)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ribbon-track,.ticket .ball.revealed{animation:none!important}.pixel-field{display:none}}

/* The gathering field lives behind the entire stage, never over the numbers. */
.slot-stage>.pixel-field{inset:0 -18px;z-index:-1;container-type:size;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);background:radial-gradient(ellipse at 50% var(--focus-y,55%),#60eed421 0%,#7554c918 28%,#34215d0a 55%,transparent 75%)}
.slot-stage>.pixel-field:before{content:'';position:absolute;inset:0;background:linear-gradient(145deg,#54f5ff12,transparent 40%,#bd65ff16);pointer-events:none}
.slot-stage>.pixel-field i{top:var(--focus-y,55%);width:3px;height:3px;background:linear-gradient(135deg,#8bfff0,#54aaff);box-shadow:0 0 7px #66dcff44;animation-duration:4.6875s}
.slot-stage>.pixel-field i:nth-child(3n){background:linear-gradient(135deg,#e8a5ff,#825eff);width:4px;height:4px}
.slot-stage>.pixel-field i:nth-child(3n+1){background:linear-gradient(135deg,#d6ff91,#53e6c2)}
.slot-stage[data-phase=drawing]>.pixel-field i{animation-duration:1.875s}
.slot-stage[data-phase=complete]>.pixel-field{display:block}.slot-stage[data-phase=complete]>.pixel-field i{animation:none;opacity:0}
.pixel-leds{display:flex;gap:6px;letter-spacing:0}.number-check{display:grid;place-items:center;width:14px;height:16px;color:#746583;font:700 12px var(--mono)}
.number-check.confirmed{color:#91ffb2;text-shadow:0 0 7px #62ff9d66}
@media(prefers-reduced-motion:reduce){.slot-stage>.pixel-field{display:block}.slot-stage>.pixel-field i{animation:none!important;opacity:0}}

/* Earned seals only; shared artwork is generated in seal-assets. */
.result-column{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}.result-column>.results{flex:1;min-height:0;border:1px solid var(--line);background:#080e13;box-shadow:inset 0 1px #54f5ff33,0 5px 20px #0005}
.achievement-board{flex:none;padding:16px;border:1px solid #45405b;border-top:2px solid var(--pink);background:#0b1019}.achievement-board-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.achievement-board h2{font-size:12px;margin:0}.achievement-board-heading>span{font:11px var(--mono);color:var(--lime)}.achievement-seals{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px;max-height:210px;overflow-y:auto;padding:4px;scrollbar-width:thin}.achievement-seal{display:block;aspect-ratio:1;width:100%;max-width:80px;min-height:64px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;transition:border-color .15s,background .15s}.achievement-seal:hover,.achievement-seal:focus-visible{background:#1d2c2b;border-color:var(--lime)}
.achievement-tooltip{position:fixed;z-index:50;width:min(300px,calc(100vw - 16px));max-height:calc(100svh - 16px);overflow:auto;padding:16px 18px;border:1px solid #71804c;background:#101c23;box-shadow:0 12px 40px #0009;overflow-wrap:anywhere}.achievement-tooltip h3{font-size:15px;margin:0 0 10px;color:var(--lime)}.achievement-tooltip p{font-size:11px;line-height:1.8;margin:8px 0}.achievement-condition{color:#c4d0d9}.achievement-line{color:#f0f5f7}.achievement-evidence{color:var(--lime);font-family:var(--mono)}.achievement-date{color:var(--muted);font-size:10px!important}
#connectNumbers,#openAchievementSettings{font:inherit;color:inherit;background:none;border:0;padding:6px 0;flex-shrink:0}
#achievementSettings{width:min(480px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:24px;border:1px solid #45505f;background:#0a0f17;color:#f5fbff;overscroll-behavior:contain}#achievementSettings::backdrop{background:#02050ac9}body:has(#achievementSettings[open]){overflow:hidden}.achievement-dialog-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.achievement-dialog-top h2{font-size:20px;margin:0}.achievement-dialog-top button{padding:10px;white-space:nowrap}#achievementSettings p{font-size:11px;line-height:1.9;color:var(--muted)}#achievementSettings label{display:flex;align-items:center;gap:8px;margin:20px 0;font-size:12px}#achievementSettings input{accent-color:var(--lime)}.achievement-actions{display:flex;flex-wrap:wrap;gap:8px}.achievement-actions button{font-size:11px;padding:9px 12px}#achievementReset{color:#f3a8b9}.storage-error{color:#ffb3c4!important}
.achievement-toast{position:fixed;right:24px;bottom:24px;z-index:30;width:min(380px,calc(100vw - 32px));padding:18px 20px;border:1px solid #829556;background:#111c22;box-shadow:0 12px 40px #0008}.achievement-toast strong{display:block;font-size:16px;margin-top:7px}.achievement-toast p{font-size:12px;line-height:1.8;color:#c5d2db;margin:8px 0}.achievement-toast-actions{display:flex;justify-content:space-between;gap:12px;margin-top:12px}.achievement-toast-actions button{padding:6px 10px;font-size:11px}
.ticket-numbers{position:relative;isolation:isolate}.numbers-connected .ticket-numbers:before{content:'';position:absolute;left:12px;right:12px;top:50%;height:1px;background:var(--lime);z-index:-1}.numbers-connected{border-color:var(--lime)}.ticket button.ball{padding:0}
@media(max-width:1050px){.workspace[data-view=machine]>.result-column,.workspace[data-view=settings]>.result-column{display:none}.achievement-board{padding:14px}.achievement-seals{max-height:170px}}
@media(max-width:600px){.achievement-toast{right:16px;bottom:16px}.studio{display:none}footer{flex-wrap:wrap;gap:2px 10px}footer p{order:4;flex-basis:100%}#openAchievementSettings{margin-left:auto}.achievement-seals{gap:8px}.result-column{gap:10px}}

/* Independent, beat-timed notification cards. */
.achievement-toast-stack{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;flex-direction:column;gap:10px;width:min(350px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow-y:auto;overflow-x:clip;pointer-events:none;scrollbar-width:thin;padding:4px}
.achievement-toast-stack:empty{display:none}.achievement-toast-stack>.achievement-toast{position:relative;inset:auto;width:100%;flex:none;pointer-events:auto;padding:14px 16px;box-shadow:0 6px 20px #0005}.achievement-toast-stack .achievement-toast strong{font-size:14px}.achievement-toast-stack .achievement-toast p{font-size:11px;margin:6px 0}.achievement-toast-stack .achievement-toast-actions{margin-top:8px}
/* Six inclined ellipses: outer vertical extent is 60% above the slot center. */
.orbital-system{position:absolute;left:50%;top:var(--focus-y,55%);width:145%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);z-index:-1;overflow:visible;pointer-events:none}.orbit-track{fill:none;stroke-width:1;stroke-opacity:.32;vector-effect:non-scaling-stroke}.orbit-planet{opacity:.95}.slot-stage>.pixel-field{z-index:-2}.slot-stage:before{opacity:.45}
@media(max-width:600px){.achievement-toast-stack{right:12px;bottom:12px;width:min(330px,calc(100vw - 24px));gap:8px}.orbital-system{width:155%}.orbit-track{stroke-opacity:.25}}

/* Keep the orbital backdrop subdued behind the slot readout. */
.orbital-system{opacity:.38;filter:blur(.65px)}.orbit-track{stroke-opacity:.24}.orbit-planet{opacity:.65}

.achievement-seal-art{display:block;width:100%;height:auto;pointer-events:none}

/* Sponsorship slots stay outside the panels' scrolling content. */
.ad-banner{flex:none;min-width:0;margin-top:14px;border-top:1px solid #303d46;padding-top:12px}
.ad-banner[hidden]{display:none}
.ad-creative{position:relative;display:flex;align-items:center;gap:10px;min-height:72px;padding:24px 12px 12px;border:1px solid #354550;background:linear-gradient(115deg,#16303980,#18203155);color:var(--text,#f5fbff);text-decoration:none;overflow:hidden}
a.ad-creative:hover{border-color:var(--cyan)}
.ad-badge{position:absolute;top:7px;left:12px;color:#99abb5;font:8px var(--mono);letter-spacing:1px}
.ad-copy{position:relative;display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}.ad-copy small{color:var(--cyan);font:8px var(--mono);letter-spacing:1.5px}.ad-copy strong{font-size:11px;line-height:1.5;font-weight:500}.ad-description{display:none}.ad-mark{position:relative;color:var(--lime);font:26px var(--mono)}
.ad-creative img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.22}
#adDialog{width:min(440px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:20px;border:1px solid #496371;border-top:2px solid var(--cyan);background:#0a1019;color:#f5fbff;overscroll-behavior:contain}
#adDialog::backdrop{background:#02050ade;backdrop-filter:blur(5px)}body:has(#adDialog[open]){overflow:hidden}
.ad-dialog-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.ad-dialog-top>span{font:10px var(--mono);letter-spacing:1px;color:var(--muted)}#closeAd{min-height:44px;padding:8px 12px;font-size:12px}
#adCreative .ad-creative{min-height:240px;padding:45px 24px;flex-direction:column;justify-content:center;text-align:center;background:radial-gradient(ellipse at 50% 100%,#35433588,transparent 80%),#101c27}#adCreative .ad-copy{flex:0;gap:16px}#adCreative .ad-copy strong{font-size:24px;line-height:1.5;word-break:keep-all}#adCreative .ad-description{display:block;font-size:12px;line-height:1.7;color:#b2c2cd}#adCreative .ad-mark{font-size:38px;margin-top:16px}#adMessage{font-size:11px;color:var(--muted);text-align:center;line-height:1.7;margin:18px 0}#continueAd{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:var(--lime);border-color:var(--lime);color:#09100b;font-size:13px;font-weight:700}

.ad-network-label{display:block;margin-bottom:7px;font-size:9px;color:var(--muted)}
.ad-banner[data-ad-provider=adsense]{position:relative;z-index:11;min-height:80px}