*{box-sizing:border-box} :root{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg);--bg:#f5f6f0;--paper:#fff;--ink:#193e34;--muted:#64766d;--line:#dce4db;--accent:#225b46;--soft:#edf3e6;--scene:#eaf0df;--warm:#e5b76d;--shadow:0 16px 50px #234c3210;--red:#aa344b}
html[data-theme=color]{--bg:#f8f1eb;--paper:#fffdf8;--ink:#383956;--muted:#706e81;--line:#e7dedb;--accent:#6569a2;--soft:#f0e8f2;--scene:#ede5f2;--warm:#e8ac85;--shadow:0 16px 50px #76628e12;--red:#ad3554}
html[data-theme=dark]{--bg:#101d1b;--paper:#172724;--ink:#e1f0df;--muted:#a4b9ad;--line:#31433b;--accent:#afdba0;--soft:#263b31;--scene:#203b32;--warm:#edbf76;--shadow:0 16px 50px #87c2920a;--red:#ff9baa;color-scheme:dark}
body{margin:0}button,input,textarea,select{font:inherit}button,select,.file-button{min-height:42px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);padding:9px 13px}button,.file-button{cursor:pointer}button:hover,.file-button:hover{border-color:var(--accent);background:var(--soft)}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.file-button:focus-within{outline:3px solid var(--warm);outline-offset:3px}a{color:inherit}h1,h2,p{margin:0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[hidden]{display:none!important}.skip{position:absolute;left:10px;top:-100px;background:var(--paper);padding:12px;z-index:20}.skip:focus{top:10px}
.top{max-width:1280px;margin:auto;display:flex;align-items:center;gap:24px;padding:25px 40px;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:29px;font-weight:750;letter-spacing:-1.3px;white-space:nowrap}.brand span{color:var(--accent);font-size:37px;vertical-align:-2px}.product{border-left:1px solid var(--line);padding-left:24px;font-size:14px;color:var(--muted)}.top-actions{margin-left:auto;display:flex;gap:12px}.quiet{background:transparent;font-size:13px}main{max-width:1280px;margin:auto;padding:48px 40px 0}.intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:32px}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:750;color:var(--muted)}h1{font-size:clamp(32px,4vw,48px);font-weight:630;letter-spacing:-1.8px;line-height:1.13;margin:12px 0}.intro-copy{color:var(--muted);font-size:15px}.local{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px;padding-bottom:5px}.local i{width:6px;height:6px;border-radius:50%;background:var(--accent)}#modes{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 24px}#modes a{display:flex;gap:8px;align-items:center;font-size:13px;text-decoration:none;padding:11px 15px;border:1px solid transparent;border-radius:12px;color:var(--muted)}#modes a:hover{background:var(--soft)}#modes a[aria-current=page]{background:var(--ink);color:var(--bg)}.nav-icon{font-size:20px;line-height:1}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}.stage{border:1px solid var(--line);background:var(--paper);border-radius:24px;padding:25px;min-width:0;box-shadow:var(--shadow);overflow:hidden}.stage-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.stage-head h2{font-size:18px;font-weight:550;letter-spacing:-.4px;margin-top:5px;overflow-wrap:anywhere}.scene{min-height:300px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px 12px 15px;position:relative}.number-disc{width:238px;height:238px;background:var(--scene);border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;box-shadow:inset 0 0 0 13px var(--paper),inset 0 0 0 14px var(--line)}.number-disc:before,.number-disc:after{content:'✳';position:absolute;left:18px;top:100px;font-size:18px;color:var(--muted)}.number-disc:after{left:auto;right:18px}.big-number{font-size:min(84px,calc(66cqw / var(--number-length,1) / .64));letter-spacing:-.035em;font-weight:620;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1;text-align:center}.placeholder{color:var(--muted)}.scene-tag{font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:17px}.result-caption{text-align:center;min-height:62px;padding:10px 0 18px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}#old{display:inline-block;color:var(--red);margin-top:8px;font-weight:650}.stage-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.primary{background:var(--accent);color:var(--paper);border-color:var(--accent);min-width:230px;min-height:52px;font-weight:650;font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:12px 20px}.primary:hover{background:var(--ink);color:var(--bg)}html[data-theme=dark] .primary{color:#10241b}.primary span{font-size:21px}.presentation{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:center;padding-top:19px;font-size:12px;color:var(--muted)}input[type=checkbox]{accent-color:var(--accent);vertical-align:-2px}.presentation label{min-height:28px;display:flex;align-items:center;gap:5px}#round-status{flex-basis:100%;text-align:center}.editor{border:1px solid var(--line);border-radius:24px;padding:24px;background:var(--paper);min-width:0}.editor-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}.editor-heading h2{font-size:16px;font-weight:650}.editor-heading span{font-size:10px;color:var(--muted)}fieldset{border:0;padding:0;margin:0;min-width:0}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;font-size:12px}.field>span{font-weight:600}.field input,.field textarea,.field select{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:var(--bg)}.field textarea{resize:vertical;min-height:145px;line-height:1.55;font-size:13px}.field small{color:var(--muted);font-size:10px;line-height:1.5}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.editor-note{font-size:11px;line-height:1.65;color:var(--muted);padding:15px 0;border-top:1px solid var(--line)}.projects{font-size:12px;padding-top:15px;border-top:1px solid var(--line)}summary{cursor:pointer;padding:7px 0}.projects p{font-size:11px;color:var(--muted);line-height:1.6;margin:10px 0}.button-row{display:flex;gap:5px;flex-wrap:wrap;margin:8px 0}.button-row button,.file-button{font-size:11px;padding:8px;min-height:36px}.file-button input{position:absolute;opacity:0;width:1px;height:1px}#error{border:1px solid var(--red);color:var(--red);background:var(--paper);border-radius:10px;padding:12px;margin-top:18px;font-size:13px;line-height:1.5}.result-tools{display:flex;flex-wrap:wrap;gap:5px;border-top:1px solid var(--line);margin-top:22px;padding-top:15px;align-items:center}.result-tools button{font-size:11px;padding:7px 10px;min-height:36px}#page-info{font-size:10px;color:var(--muted);margin-left:auto}.explain{display:grid;grid-template-columns:1fr 1.5fr;gap:65px;border-top:1px solid var(--line);margin-top:58px;padding:35px 0 45px}.explain>div:first-child{position:relative;padding-left:45px}.small-symbol{position:absolute;left:0;font-size:31px;color:var(--accent)}.explain h2{font-size:22px;letter-spacing:-.7px;font-weight:550;line-height:1.4}.explain p{font-size:12px;color:var(--muted);line-height:1.8;margin-bottom:12px}footer{max-width:1280px;margin:auto;border-top:1px solid var(--line);padding:22px 40px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}
.tokens{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:center;width:100%}.token{border:1px solid var(--line);background:var(--scene);border-radius:12px;padding:14px;min-width:65px;text-align:center;font-size:24px;font-weight:600;overflow-wrap:anywhere;max-width:100%}.draw-card{width:min(330px,100%);min-height:195px;background:var(--scene);border:1px solid var(--line);border-radius:20px;padding:35px 24px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;box-shadow:9px 9px 0 -2px var(--paper),9px 9px 0 -1px var(--line),17px 17px 0 -3px var(--soft);margin-bottom:18px}.draw-card b{font-size:clamp(22px,3vw,36px);letter-spacing:-.6px;overflow-wrap:anywhere;max-width:100%;line-height:1.25}.draw-card small{color:var(--muted);font-size:10px;margin-top:17px}.draw-card:before{content:'✳';position:absolute;left:15px;top:10px;font-size:20px;color:var(--muted)}.result-list{list-style:none;padding:0;margin:0;width:100%;display:flex;flex-direction:column;gap:7px;counter-reset:item}.result-list li{display:flex;align-items:center;gap:12px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px;overflow-wrap:anywhere}.position{font-size:11px;color:var(--muted);min-width:25px}.item-label{min-width:0;flex:1;white-space:pre-wrap;overflow-wrap:anywhere}.entry-id{color:var(--muted);font-size:10px;white-space:nowrap}.group-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:12px}.group{background:var(--soft);padding:14px;border:1px solid var(--line);border-radius:14px;min-width:0}.group h3{font-size:13px;margin:0 0 12px;border-bottom:2px solid var(--warm);padding-bottom:9px}.group ul{list-style:none;padding:0;margin:0}.group li{font-size:12px;line-height:1.6;overflow-wrap:anywhere;margin:5px 0}.coin{--coin-light:#fff3cc;width:218px;height:218px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 35% 25%,#ffecc0 0,#ebca82 46%,#d7ae60 100%);color:#755020;border:3px solid #b8914d;box-shadow:inset 0 0 0 4px #f9e3ab,inset 0 0 0 7px #bf995b,inset 0 0 0 9px #f9e3ab,0 5px 0 #aa8443,0 12px 22px #78552422;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;max-width:100%;aspect-ratio:1}.coin:before{content:'';position:absolute;inset:13px;border:1px dashed #b58d4c;border-radius:50%;pointer-events:none}.coin.tails{background:radial-gradient(circle at 35% 25%,#f5e5b8,#dcc089 52%,#c6a46b)}.coin-art{width:118px;height:98px;filter:drop-shadow(0 1px 0 #fff1c8);margin-top:-7px}.coin b.coin-label{font-size:18px;letter-spacing:2.5px;margin-top:7px;text-shadow:0 1px 0 #fff1c8;line-height:1.2}.coin-detail{font-size:7px;letter-spacing:1.2px;margin-top:9px;color:#805d2c}.coin.mini{width:110px;height:110px;border-width:2px;box-shadow:inset 0 0 0 3px #f9e3ab,inset 0 0 0 5px #bf995b,0 3px 0 #aa8443,0 6px 12px #78552418;margin-bottom:4px}.coin.mini:before{inset:9px}.coin.mini .coin-art{width:64px;height:53px;margin-top:0}.coin.mini b.coin-label{font-size:11px;letter-spacing:1.3px;margin-top:3px}.coin.mini .coin-detail{display:none}.dice{position:relative;width:94px;height:94px;background:var(--scene);border:1px solid var(--line);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:39px;font-weight:600}.dice.poly{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);border-radius:0}.dice svg{width:80%;height:80%;fill:var(--ink)}.playing-card{width:110px;height:154px;border:1px solid var(--line);background:var(--paper);border-radius:12px;box-shadow:0 6px 15px #152b2310;position:relative;display:flex;align-items:center;justify-content:center;color:var(--ink)}.playing-card.red{color:var(--red)}.card-corner{position:absolute;top:8px;left:9px;display:flex;flex-direction:column;align-items:center;font-size:18px;font-weight:650;line-height:1.1}.card-corner.bottom{top:auto;left:auto;bottom:8px;right:9px;transform:rotate(180deg)}.playing-card svg{width:47px;height:52px;fill:currentColor}.wheel-wrap{position:relative;width:min(280px,100%);aspect-ratio:1;margin-bottom:14px}.wheel-wrap:before{content:'';position:absolute;z-index:2;left:calc(50% - 9px);top:-5px;border-left:9px solid transparent;border-right:9px solid transparent;border-top:22px solid var(--ink);filter:drop-shadow(0 1px 1px #ffffff70)}.wheel-wrap svg{width:100%;height:100%;display:block;overflow:visible;transform:rotate(var(--rotation,0deg))}.wheel-wrap .wheel-center{position:absolute;inset:42%;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 0 0 5px #ffffff40}.wheel-answer{text-align:center;font-size:24px;font-weight:650;overflow-wrap:anywhere;max-width:100%;padding:8px}.wheel-table{width:100%;font-size:11px;color:var(--muted);line-height:1.6}.wheel-table summary{text-align:center}.scene.effect .draw-card,.scene.effect .token,.scene.effect .playing-card{animation:reveal .65s ease both}.scene.effect .coin{animation:flip .75s ease both}.scene.effect .dice,.scene.effect .number-disc{animation:tumble .65s ease both}.scene.effect .result-list,.scene.effect .group-board{animation:reveal .45s ease both}.scene.effect .wheel-wrap svg{animation:wheel .9s cubic-bezier(.13,.7,.1,1) both}@keyframes wheel{from{transform:rotate(calc(var(--rotation) - 720deg))}to{transform:rotate(var(--rotation))}}@keyframes reveal{from{opacity:.4;transform:translateY(-18px) rotate(-3deg)}to{opacity:1;transform:none}}@keyframes tumble{from{transform:translateY(-12px) rotate(-12deg);opacity:.5}to{transform:none;opacity:1}}@keyframes flip{from{transform:rotateY(540deg) scale(.9)}to{transform:rotateY(0) scale(1)}}.editor-hidden .workbench{grid-template-columns:minmax(0,1fr)}.editor-hidden #editor{display:none}.demo-mode .intro,.demo-mode .explain,.demo-mode footer,.demo-mode .product{display:none}.demo-mode main{padding-top:22px}.demo-mode .scene{min-height:50vh}.demo-mode .big-number{font-size:min(105px,calc(66cqw / var(--number-length,1) / .64))}.demo-mode .number-disc{width:280px;height:280px}.demo-mode .number-disc:before,.demo-mode .number-disc:after{top:120px}.demo-mode .wheel-wrap{width:min(390px,100%)}
.number-disc{max-width:100%;height:auto;aspect-ratio:1;flex-shrink:0;container-type:inline-size}.number-disc:before,.number-disc:after,.demo-mode .number-disc:before,.demo-mode .number-disc:after{top:50%;transform:translateY(-50%)}.demo-mode .number-disc{max-width:100%;height:auto}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:850px){.top{padding:18px 24px}.product{display:none}main{padding:30px 24px 0}.workbench{grid-template-columns:minmax(0,1fr) 275px;gap:14px}.stage{padding:20px}.editor{padding:20px}.local{display:none}#modes a{padding:10px 11px}.explain{gap:30px}.top-actions button{font-size:11px}.scene{min-height:285px}.stage-head .quiet{max-width:105px;font-size:11px}}
@media(max-width:650px){.top{padding:15px 16px;gap:10px}.brand{font-size:24px}.brand span{font-size:29px}.top-actions{gap:7px}.top-actions select{max-width:113px;font-size:11px;padding:8px}.top-actions button{max-width:108px;padding:6px;font-size:10px;line-height:1.3}main{padding:28px 16px 0}h1{font-size:33px;letter-spacing:-1.2px}.intro{margin-bottom:23px}#modes{gap:4px;margin-bottom:18px}#modes a{flex:1 0 22%;justify-content:center;gap:5px;padding:10px 4px;font-size:11px}.nav-icon{font-size:17px}.workbench{grid-template-columns:1fr;gap:16px}.stage{padding:20px 16px;border-radius:20px}.scene{padding:25px 0 10px;min-height:285px}.stage-head h2{font-size:16px}.stage-head .quiet{padding:7px;max-width:96px}.primary{min-width:200px}.stage-actions{gap:6px}.stage-actions .quiet{font-size:11px;padding:8px}.editor{border-radius:20px}.field textarea{min-height:130px}.explain{grid-template-columns:1fr;gap:20px;margin-top:35px;padding:28px 0}.explain h2{font-size:20px}.explain>div:first-child{padding-left:40px}footer{padding:20px 16px;flex-direction:column;gap:8px}.presentation{gap:14px;font-size:11px}.group-board{grid-template-columns:1fr}.playing-card{width:92px;height:134px}.token{font-size:18px}.result-tools{gap:5px}.demo-mode .scene{min-height:45vh}.demo-mode main{padding-top:16px}}
