:root{--bg:#e8e3da;--ink:#0d0d0c;--panel:#161615;--panel2:#25231f;--cream:#d8cdb7;--cream2:#f1eadb;--orange:#e25c2f;--orange2:#ff784a;--muted:#8c8375;--green:#a6cf4e;--line:#4a443b;--mono:"Arial Narrow",Arial,sans-serif}
*{box-sizing:border-box}html,body{min-height:100%}html{background:var(--bg)}body{margin:0;background:radial-gradient(circle at 50% 10%,#f5f1e9 0,#e6e0d6 58%,#d1cabf 100%);color:#111;font-family:var(--mono);overflow-x:hidden}
button,select{font:inherit}button{cursor:pointer}.app-shell{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:clamp(14px,3vw,36px)}
.device{position:relative;width:min(920px,96vw);border:8px solid #111;border-radius:25px;background:linear-gradient(#161615,#22201d);box-shadow:0 30px 70px #0006,inset 0 0 0 2px #4e4941;padding:18px;color:var(--cream2);overflow:hidden}
.device:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.15;background-image:radial-gradient(#fff 0.6px,transparent .8px);background-size:6px 7px;mix-blend-mode:soft-light}
.screw{position:absolute;width:18px;height:18px;border-radius:50%;z-index:5;background:radial-gradient(circle at 35% 35%,#96918a 0 16%,#292826 20% 45%,#050505 48% 62%,#6c6861 65%);box-shadow:0 1px 2px #000}.screw:after{content:"";position:absolute;left:3px;right:3px;top:8px;height:2px;background:#090909;transform:rotate(-22deg)}.screw-a{left:9px;top:9px}.screw-b{right:9px;top:9px}.screw-c{left:9px;bottom:9px}.screw-d{right:9px;bottom:9px}
.nameplate{position:relative;z-index:1;margin:4px 16px 12px;padding:15px 22px;background:linear-gradient(110deg,#eee5d3,#c9bda6);border:3px solid #292724;border-radius:8px;color:#111;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px #fff8e7,0 4px 0 #0a0a0a}.nameplate strong{font-size:clamp(28px,5vw,48px);letter-spacing:-.03em}.nameplate span{position:absolute;right:22px;font-size:12px;letter-spacing:.08em}
.reel-bay{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:center;gap:10px;margin:0 16px;border:4px solid #080808;border-radius:14px;background:linear-gradient(#111,#1f1b18);box-shadow:inset 0 0 0 3px #4f4a42,0 5px 0 #090909;padding:14px 16px;min-height:330px}.reel-side{position:relative;display:grid;place-items:center}.reel-label{position:absolute;top:2px;z-index:2;font-size:11px;letter-spacing:.12em;color:#f2e9d7}.reel{width:min(100%,240px);aspect-ratio:1;filter:drop-shadow(0 8px 8px #0008)}.playing .reel{animation:spin 1.8s linear infinite}.playing .reel.right{animation-direction:reverse}@keyframes spin{to{transform:rotate(360deg)}}
.reel-center{min-width:0}.state{display:none;text-align:center;place-content:center;min-height:210px}.state.active{display:grid}.upload-arrow{font-size:44px;color:var(--orange)}.state strong{font-size:18px;letter-spacing:.08em}.state small{margin-top:6px;color:#b8ae9d;letter-spacing:.12em}.progress{width:100%;max-width:230px;height:13px;border:2px solid var(--cream);margin:15px auto 0;padding:2px}.progress span{display:block;height:100%;width:0;background:var(--orange)}#wave{width:100%;height:105px;display:block}.time-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;font-size:10px;color:#c9beaa}.time-row span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selector-strip{position:relative;z-index:1;margin:12px 16px 0;padding:12px 16px;background:linear-gradient(#e5dac6,#c8bba4);color:#141414;border:3px solid #171614;border-radius:6px;display:grid;grid-template-columns:1fr 1fr .65fr;gap:14px;box-shadow:inset 0 0 0 2px #fff7e6}.select-group,.random-group{display:grid;gap:5px;font-size:10px;letter-spacing:.09em}.select-group select{appearance:none;border:1px solid #6d6559;background:#efe6d5;color:#111;padding:8px 32px 8px 9px;background-image:linear-gradient(45deg,transparent 50%,#111 50%),linear-gradient(135deg,#111 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.random-group{align-items:center;grid-template-columns:1fr auto}.random-group span{grid-column:1/-1}.toggle-btn{width:48px;height:25px;border-radius:13px;border:2px solid #3c3932;background:#1b1a18;padding:2px}.toggle-btn i{display:block;width:17px;height:17px;border-radius:50%;background:var(--cream);transition:.15s}.toggle-btn.active i{transform:translateX(21px);background:var(--orange)}
.transport-strip{position:relative;z-index:1;margin:12px 16px 4px;display:grid;grid-template-columns:1.1fr .48fr 1.25fr 1.15fr 1.1fr;gap:8px}.action,.icon-btn,.ab-switch button{min-height:64px;border:3px solid #060606;background:linear-gradient(#292724,#111);color:var(--cream2);box-shadow:inset 0 0 0 2px #4e4941,0 4px 0 #070707;font-weight:800;letter-spacing:.04em}.action{display:flex;align-items:center;justify-content:space-between;padding:9px 12px}.action b{font-size:26px}.action.process{justify-content:center;background:linear-gradient(#f07443,#c94924);color:#111;font-size:18px}.action.process.dirty{box-shadow:inset 0 0 0 2px #ffb08a,0 4px 0 #070707,0 0 22px #e25c2f55}.action.download{background:linear-gradient(#2a2926,#131313)}.action.share{background:#283224}.action.share[hidden]{display:none!important}.icon-btn{font-size:24px}.ab-switch{display:grid;grid-template-columns:1fr 1fr}.ab-switch button{font-size:10px;padding:0 6px}.ab-switch button.active{color:var(--orange);background:#0c0c0b}.action:disabled,.icon-btn:disabled,.ab-switch button:disabled,.toggle-btn:disabled{opacity:.38;cursor:not-allowed}
.status-strip{position:relative;z-index:1;margin:12px 16px 0;padding:9px 12px;border-top:1px solid #4b463e;display:flex;justify-content:flex-end;gap:16px;color:#b8ae9c;font-size:9px;letter-spacing:.1em}.status-strip span{display:flex;align-items:center;gap:6px}.led{display:inline-block;width:8px;height:8px;border-radius:50%;background:#332d26;box-shadow:inset 0 0 2px #000}.led.on{background:var(--green);box-shadow:0 0 8px var(--green)}.led.red.on{background:#f33;box-shadow:0 0 8px #f33}.toast{position:fixed;left:50%;bottom:18px;z-index:50;transform:translate(-50%,120px);opacity:0;background:#111;color:#f0e7d5;border:2px solid var(--orange);padding:11px 16px;font-size:12px;transition:.18s;max-width:90vw}.toast.show{transform:translate(-50%,0);opacity:1}
.footer{min-height:76px;display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;padding:15px 20px;background:#11110f;color:#8f8678;border-top:1px solid #322f2a;font-size:10px;letter-spacing:.12em}.footer strong{color:#d8cdb7}.footer a{color:#d8cdb7;text-decoration:none;border-bottom:1px solid #5f594f;padding-bottom:3px}.footer a:hover{color:var(--orange);border-color:var(--orange)}
@media(max-width:720px){.app-shell{min-height:calc(100vh - 92px);padding:8px}.device{width:100%;border-radius:16px;padding:11px 7px}.nameplate{margin:3px 8px 9px;padding:12px}.nameplate strong{font-size:31px}.nameplate span{right:12px;font-size:9px}.reel-bay{margin:0 8px;padding:10px 6px;grid-template-columns:.9fr 1.2fr .9fr;min-height:240px}.reel{width:100%}.reel-label{font-size:8px}.state{min-height:150px}.upload-arrow{font-size:34px}.state strong{font-size:13px}#wave{height:80px}.selector-strip{margin:9px 8px 0;grid-template-columns:1fr 1fr .7fr;padding:9px;gap:7px}.select-group,.random-group{font-size:8px}.select-group select{font-size:11px;padding:7px 26px 7px 7px}.transport-strip{margin:9px 8px 3px;grid-template-columns:1fr .55fr 1.25fr}.action,.icon-btn,.ab-switch button{min-height:52px}.action{font-size:9px}.action.process{font-size:14px}.transport-strip .process{grid-column:1/3}.transport-strip .download{grid-column:3}.transport-strip .share{grid-column:1/-1;justify-content:center}.status-strip{margin:8px 8px 0;font-size:8px;gap:9px}.footer{min-height:92px}}
@media(max-width:430px){.reel-bay{grid-template-columns:.8fr 1.4fr .8fr;min-height:205px}.nameplate strong{font-size:27px}.selector-strip{grid-template-columns:1fr 1fr}.random-group{grid-column:1/-1;grid-template-columns:1fr auto}.random-group span{grid-column:auto}.transport-strip{grid-template-columns:1fr 1fr}.transport-strip .upload{grid-column:1}.transport-strip .icon-btn{grid-column:2}.transport-strip .ab-switch{grid-column:1/-1}.transport-strip .process{grid-column:1}.transport-strip .download{grid-column:2}.action,.icon-btn,.ab-switch button{min-height:48px}.reel-label{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}