.nube-tape-host{color-scheme:dark; color:#e7e7e5;font-family:Arial,Helvetica,sans-serif;margin:36px 0;--bg:#101114;--panel:#18191d;--ink:#e7e7e5;--muted:#929399;--line:#38393e;--accent:#edc6ce}
.nube-tape-host{color-scheme:dark;--bg:#101114;--panel:#18191d;--ink:#e7e7e5;--muted:#929399;--line:#38393e;--accent:#edc6ce}.nube-tape-host *{box-sizing:border-box}.nube-tape-host button,.nube-tape-host input,.nube-tape-host a{font:inherit}.nube-tape-host button{cursor:pointer}.nube-tape-host .player{max-width:920px;margin:auto;background:var(--bg);border:1px solid var(--line);padding:clamp(16px,3vw,36px)}.mast{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:20px}.mast strong{font-size:clamp(19px,3vw,28px);letter-spacing:.08em}.mast span{font-size:20px;color:#c8c8c8}.mast small{margin-left:auto;color:var(--muted);letter-spacing:.15em}.deck{position:relative;background:#15161a;border-bottom:1px solid var(--line);margin-top:18px}.deck svg{display:block;width:100%;height:auto;touch-action:none}.belt{stroke:#797b80;stroke-width:2}.reel-ring{fill:none;stroke:#57595f;stroke-width:8}.tape-pack{fill:#36383d;stroke:#85868a;stroke-width:1;transition:r .08s linear}.rotor-disc{fill:#191a1e;stroke:#d4d4d1;stroke-width:2}.spokes{stroke:#d8d8d4;stroke-width:3}.hub{fill:#d9d9d6;stroke:#1a1a1c;stroke-width:6}.pin{fill:#17181a}.tape-guide{fill:none;stroke:#e4e4e1;stroke-width:2.5}.roller{fill:#bcbcb9;stroke:#111;stroke-width:3}.head{fill:#ecece9}.head-line{stroke:#eee;stroke-width:2}.deck-label{font-size:11px;letter-spacing:2px;fill:#898b90}.touch{fill:transparent;cursor:grab;touch-action:none}.touch:active{cursor:grabbing}.deck-hint{position:absolute;bottom:10px;right:12px;font-size:10px;letter-spacing:.14em;color:var(--muted)}.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:20px 0;border-bottom:1px solid var(--line)}.controls button{background:#26272b;color:var(--ink);border:1px solid #494a4f;border-radius:2px;min-width:50px;min-height:48px;font-size:20px}.controls button:hover{background:#414248}.controls .play{background:var(--accent);color:#19191b;border-color:var(--accent)}.status{margin-left:auto;font-size:11px;letter-spacing:.13em;color:var(--muted)}.information{padding:24px 0}.track-head{display:flex;gap:18px;align-items:baseline}.track-head span{font-size:12px;color:var(--muted);white-space:nowrap}.track-head strong{font-size:clamp(17px,3vw,26px);font-weight:400}.timeline{display:flex;align-items:center;gap:12px;margin-top:22px}.timeline time{font-variant-numeric:tabular-nums;font-size:13px;color:#bfc0c3}input[type=range]{accent-color:var(--accent);min-width:0}.timeline input{flex:1}.volume{display:flex;align-items:center;gap:10px;margin-top:18px;color:var(--muted);font-size:11px}.volume input{width:130px}.section-head{font-size:12px;letter-spacing:.16em;color:#b4b5b9;border-bottom:1px solid var(--line);padding-bottom:13px;display:flex;justify-content:space-between}.tracks ol{list-style:none;margin:0;padding:0;max-height:380px;overflow:auto}.tracks li button{display:flex;gap:18px;width:100%;padding:14px 12px;border:0;border-bottom:1px solid #292a2e;background:transparent;color:#b9b9bd;text-align:left}.tracks li button:hover,.tracks li.selected button{background:#25262a;color:#fff}.tracks .num{color:#8c8d92;font-size:12px}.sharing{margin-top:28px}.share-actions{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.share-actions button,.share-actions a{padding:11px 12px;border:1px solid #62636a;background:transparent;color:#e4e4e4;text-decoration:none;font-size:11px;letter-spacing:.05em}.sharing p{font-size:12px;color:var(--muted);line-height:1.5}.upload{display:inline-block;cursor:pointer;font-size:11px;border:1px dashed #62636a;padding:10px;margin:6px 8px 0 0;color:#c6c6c9}.upload input{display:none}.nube-tape-host footer{border-top:1px solid var(--line);margin-top:30px;padding-top:16px;color:var(--muted);font-size:10px;letter-spacing:.1em;display:flex;justify-content:space-between;gap:15px}@media(max-width:560px){.nube-tape-host .player{padding:14px;border:0}.mast{gap:7px 14px}.mast small{margin-left:0;width:100%}.deck-label{font-size:13px}.controls{gap:5px}.controls button{flex:1;min-width:0;min-height:44px;font-size:18px}.status{width:100%;text-align:right;padding-top:7px}.track-head{display:block}.track-head strong{display:block;margin-top:8px}.share-actions>*{flex:1 1 100%;text-align:center}.nube-tape-host footer{flex-direction:column}}

/* v0.6: responsive to the Kirby layout COLUMN, not viewport */
.nube-tape-host{container-type:inline-size;width:100%;min-width:0;margin:12px 0}
.nube-tape-host .player{width:100%;max-width:none;min-width:0;padding:clamp(12px,2.5cqw,30px)}
.nube-tape-host .mast{gap:8px 14px;padding-bottom:12px;align-items:baseline}
.nube-tape-host .mast strong{font-size:clamp(16px,3cqw,27px)}
.nube-tape-host .mast span{font-size:clamp(12px,2.2cqw,19px)}
.nube-tape-host .mast small{font-size:clamp(9px,1.2cqw,11px)}
.nube-tape-host .controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(3px,.8cqw,8px);padding:14px 0}
.nube-tape-host .controls button{width:100%;min-width:0;min-height:0;aspect-ratio:1.12;font-size:clamp(12px,2.3cqw,20px);padding:0}
.nube-tape-host .controls .status{grid-column:1/-1;margin:0;text-align:right;font-size:10px;min-width:0}
.nube-tape-host .track-head{display:flex;align-items:flex-start;gap:9px;min-width:0}
.nube-tape-host .track-head strong{font-size:clamp(14px,2.5cqw,24px);line-height:1.2;overflow-wrap:anywhere;min-width:0}
.nube-tape-host .information{padding:16px 0}
.nube-tape-host .timeline{gap:7px;margin-top:16px}
.nube-tape-host .timeline time{font-size:clamp(10px,1.4cqw,13px)}
.nube-tape-host .tracks li button{gap:10px;padding:10px 8px;font-size:clamp(11px,1.5cqw,14px);overflow-wrap:anywhere}
.nube-tape-host .sharing{margin-top:20px}
.nube-tape-host .share-actions{margin:12px 0;gap:6px}
.nube-tape-host .share-actions>*{min-width:0;flex:1 1 155px;font-size:10px;padding:9px 7px;text-align:center}
.nube-tape-host .deck-hint{font-size:clamp(7px,1.3cqw,10px);bottom:4px;right:5px}
.nube-tape-host .volume{margin-top:14px}
.nube-tape-host .volume input{max-width:65%}
.nube-tape-host .timeline input{width:100%;min-width:0}
.nube-tape-host .buffer-track{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.nube-tape-host .buffer-track:before{content:'';position:absolute;left:0;top:50%;width:var(--buffered,0%);height:4px;transform:translateY(-50%);background:#898a90;border-radius:4px;pointer-events:none}
.nube-tape-host .buffer-track input{position:relative;background:transparent;margin:0}
.nube-tape-host .reel-ring{stroke-width:12}
@container (max-width:460px){
 .nube-tape-host .player{padding:12px}
 .nube-tape-host .mast{gap:4px 9px}
 .nube-tape-host .mast small{margin-left:0;width:100%;font-size:9px}
 .nube-tape-host .deck{margin-top:10px}
 .nube-tape-host .track-head strong{font-size:15px}
 .nube-tape-host .controls{padding:11px 0}
 .nube-tape-host .share-actions{display:grid;grid-template-columns:1fr}
 .nube-tape-host .share-actions>*{width:100%}
 .nube-tape-host footer{font-size:9px;flex-wrap:wrap}
}

/* v0.7 — AKAI-inspired six-window reel face. Visual changes only. */
.nube-tape-host .reel-ring{stroke:#a7a8ac;stroke-width:13;fill:none}
.nube-tape-host .rotor-disc{fill:#c5c5c3;stroke:#e1e1de;stroke-width:2.4}
.nube-tape-host .reel-window{fill:#191a1e;stroke:#96979a;stroke-width:.65;stroke-linejoin:round}
.nube-tape-host .hub{fill:#dededb;stroke:#25262a;stroke-width:5}
.nube-tape-host .pin{fill:#191a1e}
/* Preserve tape thickness and responsive column behavior from v0.6. */