:root{color-scheme:dark;font-family:Tahoma,Arial,sans-serif;color:#e6e5db;background:#111310}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#303426,#10120f 65%);min-height:100vh}header{max-width:1280px;margin:auto;padding:28px 24px;display:flex;justify-content:space-between;align-items:center}header strong{font:900 30px Arial;letter-spacing:5px}small{display:block}header small{font:9px Arial;letter-spacing:2px;color:#aeb79e;margin-top:7px}button,input,select{font:inherit}button{cursor:pointer;border:1px solid #525749;background:#282d24;color:#e8ecdf;border-radius:7px;padding:11px 13px}button:hover{background:#414a33}button.active{background:#d7e3a1;color:#1b2113}button:disabled{opacity:.4;cursor:default}main{max-width:1280px;margin:auto;display:grid;grid-template-columns:minmax(340px,1fr) minmax(380px,1.1fr);gap:28px;padding:10px 24px 35px;align-items:start}.deck{background:linear-gradient(120deg,#42463e,#20231f 60%);border:1px solid #666a5d;border-radius:22px;padding:24px;box-shadow:0 20px 55px #0009,inset 0 2px 2px #ffffff25}.deckhead{display:flex;justify-content:space-between;gap:10px;font:12px Arial;color:#d8dbcb;margin-bottom:24px}.deckhead span{font-size:9px;color:#abb099}.glass{padding:25px 14px;background:linear-gradient(135deg,#080b08,#191e18);border:9px solid #141712;border-radius:12px;box-shadow:inset 0 0 25px #000;perspective:850px}.tape{--shell:#785033;--label:#e9d2a2;--ink:#352716;position:relative;aspect-ratio:1.58;background:linear-gradient(155deg,#ffffff25,transparent 35%),var(--shell);border-radius:12px;border:3px solid #0008;box-shadow:0 9px 18px #0009,inset 0 0 0 4px #ffffff12;padding:9% 8% 5%;color:var(--ink);transition:transform .65s,background .3s}.tape.flipping{transform:rotateY(180deg)}.label{height:38%;background:var(--label);border-radius:3px;padding:5px 8px;position:relative;overflow:hidden;border-bottom:6px solid #b65932}.label span{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-left:28px;font-weight:bold;font-size:14px}.label b{position:absolute;left:8px;top:6px;font:700 22px Arial}.label small{font:8px Arial;letter-spacing:2px;margin-top:7px}.window{display:flex;align-items:center;justify-content:space-around;height:44%;background:#14160fd9;border:3px solid #0009;border-radius:24px;margin-top:6%;position:relative;overflow:hidden}.spool{width:28%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#352c20 0 2px,#52402d 3px 4px);display:grid;place-items:center;position:relative;z-index:1}.hub{display:grid;place-items:center;width:55%;aspect-ratio:1;background:#ddd9c8;color:#222;font-size:32px;border-radius:50%;border:4px solid #a29c86;animation:spin 2s linear infinite;animation-play-state:paused}.playing .hub{animation-play-state:running}.winding .hub{animation-play-state:running;animation-duration:.18s}.reverse .hub{animation-direction:reverse}.bridge{position:absolute;width:70%;height:2px;background:#6d482b;bottom:14%}.foot{font:8px Arial;letter-spacing:1px;display:flex;justify-content:space-between;margin-top:7%}.screw{position:absolute;width:9px;height:9px;border-radius:50%;background:linear-gradient(45deg,#b7b6aa 45%,#444 46% 55%,#b7b6aa 56%)}.s1{top:7px;left:7px}.s2{top:7px;right:7px}.s3{bottom:7px;left:7px}.s4{bottom:7px;right:7px}.black{--shell:#222520;--label:#c6c9ae;--ink:#20251a;border-radius:5px}.clear{--shell:#81958899;--label:#e5e5d3;--ink:#374c42;box-shadow:inset 0 0 0 9px #b5c8b333,0 9px 18px #0009}.red{--shell:#9a352c;--label:#171c1d;--ink:#eee4ce;border-radius:17px}.blue{--shell:#27485e;--label:#c4d9dc;--ink:#1a3d4b}.cream{--shell:#d6cba5;--label:#483523;--ink:#f0debb;border-radius:4px}.cream .label{border-bottom-color:#d9a864}.blue .label{border-bottom-color:#2a858b}.red .label{border-bottom-color:#d5b24f}.display{background:#171e0e;border:2px solid #090d06;border-radius:6px;color:#cbdc99;padding:12px;margin:20px 0 8px;display:grid;gap:7px}.display span{font:11px monospace}.display b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}input[type=range]{accent-color:#c6d48c;width:100%}.controls{display:flex;gap:5px;margin-top:12px}.controls button{flex:1;padding:15px 3px;background:linear-gradient(#808474,#4d5345);color:#111810;border-color:#92977e;font:bold 15px Arial;box-shadow:0 3px 0 #10150b}.controls #play{background:#d5e49c}.volume{display:flex;justify-content:space-between;align-items:center;margin-top:20px;gap:20px}.volume label{font-size:11px;flex:1}#status{font-size:11px;color:#c1c8ae;line-height:1.8;min-height:35px}.workspace{background:#191d17;border:1px solid #353b2e;border-radius:17px;padding:20px}nav{display:flex;gap:8px;border-bottom:1px solid #383e30;padding-bottom:16px}.toolbar{display:flex;flex-wrap:wrap;gap:7px;margin:17px 0}.toolbar button{font-size:11px}#shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:22px}.shelfitem{min-height:75px;padding:12px 8px;border-left:6px solid var(--shell);text-align:right;overflow:hidden}.shelfitem small{font:9px Arial;margin-top:9px;opacity:.65}.editor{display:grid;grid-template-columns:1fr 1fr;gap:10px}label{font-size:11px}input:not([type=range]),select{width:100%;padding:10px;border:1px solid #49513a;background:#11160e;color:#e0e7d1;border-radius:5px;margin-top:8px}.sides{display:flex;gap:7px;align-items:center;margin:20px 0}.sides span{font-size:10px;color:#a3ad91;margin-right:auto}.row{display:flex;gap:7px;align-items:center;padding:10px 0;border-bottom:1px solid #303728}.row .title{flex:1;min-width:0;font-size:12px;overflow-wrap:anywhere}.row button{padding:6px 8px;font-size:11px}.row small{color:#a5af94;font-size:10px;margin-top:5px}.hint{font-size:11px;line-height:1.9;color:#9da98e}footer{padding:20px;text-align:center;color:#7f8a72;font-size:10px}body.compact main{display:block;max-width:560px}body.compact .workspace,body.compact footer{display:none}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:850px){main{grid-template-columns:1fr;max-width:600px;padding:0 12px 24px}header{padding:20px 15px}header strong{font-size:25px}.deck{padding:18px}.workspace{padding:15px}}@media(prefers-reduced-motion:reduce){.tape{transition:none}.hub{animation:none}}

/* 0.2.1: circular reels and more detailed physical shells */
.header-actions{display:flex;gap:8px;align-items:center}.header-actions select{width:auto;margin:0;padding:10px;font-size:12px}
.window{direction:ltr;isolation:isolate}.spool{flex:0 0 28%;width:28%;height:auto;aspect-ratio:1 / 1;align-self:center;border-radius:50%;transition:transform .2s linear;box-shadow:inset 0 0 0 2px #0e0b08,0 0 0 1px #ffffff20}.hub{flex:none;width:55%;height:auto;aspect-ratio:1 / 1;font-size:clamp(16px,4vw,30px);background:radial-gradient(circle,#222 0 18%,#d9d6c7 20% 60%,#99977f 63%);border:2px solid #dedcca}
.tape{background-image:repeating-linear-gradient(0deg,#ffffff07 0 1px,transparent 1px 4px),linear-gradient(145deg,#ffffff20,transparent 38%);outline:1px solid #ffffff15;outline-offset:-7px}.tape:before{content:'';position:absolute;left:27%;right:27%;bottom:0;height:13%;background:linear-gradient(#0002,#0005);clip-path:polygon(12% 0,88% 0,100% 100%,0 100%);border-top:1px solid #ffffff20}.tape:after{content:'';position:absolute;left:40%;bottom:3%;width:20%;height:3%;background:radial-gradient(circle at 10% 50%,#111 0 3px,transparent 4px),radial-gradient(circle at 90% 50%,#111 0 3px,transparent 4px)}
.label{background-image:repeating-linear-gradient(0deg,#00000006 0 1px,transparent 1px 3px);box-shadow:0 1px 2px #0007}.label small{letter-spacing:1px}.black .label{border-bottom:8px double #9c4934}.clear{--shell:#8aaca477;background-image:repeating-linear-gradient(90deg,#d1efdf25 0 2px,transparent 2px 14px),linear-gradient(145deg,#b9dcc755,#173d3844)}.clear .label{height:32%;border-bottom:4px solid #498276}.clear .window{border-radius:6px;background:#0d2111aa;height:50%}.red{border-radius:14px;background-image:linear-gradient(125deg,#e8795433,transparent 50%),repeating-linear-gradient(0deg,#0002 0 1px,transparent 1px 5px)}.red .label{border-bottom:7px double #e0bd59}.blue .label{border-bottom:8px solid #327f92;border-radius:10px 10px 0 0}.blue .window{border-radius:9px}.cream .label{border-bottom:8px double #f0b64c}.cream .window{border-radius:9px;border-color:#685333}.brown{--shell:#69472e;--label:#e6d1a5}.brown .label{border-bottom:8px double #a44728}.brown .window{background:#1b1712;border-color:#b1926744}.brown .foot{color:#e7cb9f}
html[dir=ltr] .sides span{margin-right:0;margin-left:auto}html[dir=ltr] .shelfitem{text-align:left}
@media(max-width:430px){header strong{font-size:19px;letter-spacing:3px}header small{font-size:7px}.header-actions{gap:4px}.header-actions button,.header-actions select{font-size:10px;padding:8px}.label span{font-size:12px}}

.hub{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}.hub:active{cursor:grabbing}.manual-wind .hub{animation:none}.sound-option{display:flex;align-items:center;gap:5px;font-size:10px;white-space:nowrap}.sound-option input[type=checkbox]{width:auto;margin:0;accent-color:#c6d48c}.fold-open .glass{border-top-color:#59604b;box-shadow:inset 0 0 25px #000,0 -6px 0 #606747}.fold-open .deckhead:after{content:'OPEN';color:#d7e49f;font:10px monospace}
@media(max-height:550px){body.compact header{padding:6px 12px}body.compact main{padding:0 8px}body.compact .deck{padding:10px}body.compact .deckhead{margin-bottom:6px}body.compact .glass{padding:5px 14px;border-width:5px}body.compact .tape{max-height:190px;max-width:300px;margin:auto}body.compact .display{margin:7px 0 2px;padding:7px;gap:3px}body.compact .controls{margin-top:5px}body.compact .controls button{padding:9px 3px}body.compact .volume{margin-top:8px}body.compact #status{min-height:0;margin:5px 0;font-size:9px}body.compact .header-actions{display:none}}