:root{font-family:Tahoma,Verdana,sans-serif;color:#e6f3ff;background:#192d46;--pink:#ed55cf;--cyan:#50dafa}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#9dbed2,#597c9a 55%,#263e58);min-height:100vh;padding:22px 14px 38px}main{max-width:1040px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 14px}header strong{font-size:21px;letter-spacing:.03em;text-shadow:0 2px #29415b}small{display:block;font-size:12px;margin-top:5px;color:#e1effa}button,input{font:inherit}button,.open{cursor:pointer}button:focus-visible,.open:focus-within{outline:3px solid #ff7cec;outline-offset:3px}button{border:1px solid #8098ad;background:linear-gradient(#ecf5fb,#adbdc9 48%,#788e9e 52%,#bacad6);color:#162b40;border-radius:8px;padding:10px 13px;font-size:14px;box-shadow:inset 0 1px #fff,0 2px 3px #07152766}button:active{transform:translateY(1px)}button[aria-pressed=true]{background:linear-gradient(#f9dcff,#d785d4);box-shadow:0 0 10px #ea56d888}.silver{background:linear-gradient(#f6fbff,#bdcdda);color:#1d354d;border:1px solid #60829b;border-radius:9px;padding:11px 15px;font-size:14px;font-weight:bold}.open input{position:absolute;width:1px;height:1px;opacity:0}
.stage{background:#fff;border:3px solid #b6c7d4;box-shadow:0 12px 30px #122b4c55;border-radius:16px;overflow:hidden}#cat{position:relative;width:100%;aspect-ratio:4/3;isolation:isolate}.skin{display:block;width:100%;height:100%;object-fit:contain}
#visual{position:absolute;left:23.5%;top:9%;width:53%;height:31%;clip-path:polygon(0 72%,5% 44%,16% 20%,32% 5%,50% 0,68% 5%,84% 20%,95% 44%,100% 72%,94% 86%,76% 97%,50% 100%,24% 97%,6% 86%);pointer-events:none}
.iris{position:absolute;top:54.4%;width:10%;height:11%;background-image:url("cat-player.jpg");background-size:1000% 909.09%;border-radius:50%;pointer-events:none;opacity:0;transition:filter 1s,opacity .4s}.iris.left{left:30%;background-position:33.333% 61.1236%}.iris.right{left:60%;background-position:66.666% 61.1236%}
.hotspot{position:absolute;left:var(--x);top:var(--y);width:6%;height:7.8%;transform:translate(-50%,-50%);border-radius:50%;background:transparent;border:0;box-shadow:none;padding:0}.hotspot:active{transform:translate(-50%,-50%) scale(.96)}.hotspot:hover,.hotspot:focus-visible{background:#e2fcff25;box-shadow:0 0 15px #67dcfa}.hotspot[aria-pressed=true]{background:#e14bcc22;box-shadow:0 0 14px #f773de}.purr{--x:49.7%;--y:14.8%;width:6.8%;height:9%}.mute{--x:19.4%;--y:38.8%;width:4%;height:4%}
#skin-volume{position:absolute;left:17.4%;top:42%;width:3.9%;height:18.6%;writing-mode:vertical-lr;direction:rtl;opacity:.85;accent-color:#67ddff}
#slots{position:absolute;left:77.2%;top:43%;width:7.3%;height:19.5%;display:grid;grid-template-rows:repeat(7,1fr);gap:2px}#slots button{font-size:clamp(8px,1.1vw,12px);padding:0;border:0;background:#04142b70;color:white;box-shadow:none;text-shadow:0 1px #000;overflow:hidden}
.console{margin:18px 0 14px;background:linear-gradient(#182c40,#071724);border:2px solid #b4c6d4;border-radius:12px;padding:16px;box-shadow:0 6px 16px #142b4d50}.now{display:flex;align-items:center;gap:12px}.now strong{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px}#state{font-size:11px;letter-spacing:.1em;color:#90eada}.seek{display:flex;gap:12px;align-items:center;margin:15px 0}.seek input{flex:1;min-width:0}output{font:13px monospace;color:#7bdfff}input[type=range]{accent-color:#e950cc;cursor:pointer}.controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.controls .play{min-width:54px;background:linear-gradient(#ffd9f5,#e756b5);font-size:18px}.volume-label{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px}.volume-label input{width:90px}.mode-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px;padding-top:13px;border-top:1px solid #334f61}.mode-row button{font-size:12px;padding:8px}#message{flex:1;min-width:200px;font-size:12px;line-height:1.5;color:#c0d3e2}
.queue{background:#0b1c2ed9;border:1px solid #a6bfd1;border-radius:10px;overflow:hidden}.queue-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#142f48}.queue-head h2{font-size:15px;margin:0}.queue-head span{font-size:12px;color:#bad0e1}#count{margin-left:8px}ol{list-style:none;margin:0;padding:0;max-height:240px;overflow:auto}.track{width:100%;border:0;border-radius:0;box-shadow:none;text-align:left;padding:13px 16px;background:transparent;color:#e5f2fc;display:flex;gap:12px;align-items:center}.track:hover{background:#ffffff12}.track.active{background:#ffffff16;border-left:4px solid var(--color);padding-left:12px}.swatch{width:9px;height:9px;border-radius:50%;background:var(--color);box-shadow:0 0 8px var(--color);flex:none}.track .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty{padding:18px;color:#adc7db;font-size:14px}details{font-size:13px;line-height:1.6;margin-top:15px;color:#e3edf5}summary{cursor:pointer}
@media(max-width:600px){body{padding:12px 8px 28px}header strong{font-size:18px}.silver{font-size:12px;padding:10px}.stage{border-radius:10px}.console{padding:12px}.now{flex-wrap:wrap}.now strong{font-size:14px}.now #demo{margin-left:auto}.controls{gap:7px}.controls button{padding:10px;font-size:12px}.volume-label{margin-left:0}.queue-head>span{display:none}.mode-row #message{flex-basis:100%}.iris{transition:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.file-picker{display:flex;flex-direction:column;gap:6px;max-width:55%;font-size:14px}.file-picker input{width:100%;min-height:44px;font-size:14px;color:#edf7ff}.file-picker input::file-selector-button{cursor:pointer;min-height:44px;padding:10px 14px;border:1px solid #60829b;border-radius:9px;background:linear-gradient(#f6fbff,#bdcdda);color:#1d354d;font:inherit;margin-right:8px}
.tabs{display:flex;gap:6px;margin-left:auto}.tab{padding:9px 13px;font-size:13px;border-radius:7px}.tab.active{background:linear-gradient(#f9dcff,#d785d4);color:#32123a}.view[hidden]{display:none}.movie-view{max-width:1040px}.movie-shell{background:#0a1020;border:3px solid #bcc9d6;border-radius:12px;box-shadow:0 12px 30px #122b4c66;overflow:hidden}.movie-titlebar{display:flex;justify-content:space-between;padding:8px 12px;background:linear-gradient(90deg,#203f82,#7397ce 52%,#294779);font-weight:bold;color:#fff;font-size:14px;text-shadow:1px 1px #14254f}.window-buttons{letter-spacing:4px;font-weight:normal}.movie-toolbar{display:flex;align-items:center;gap:10px;padding:10px;background:linear-gradient(#dbe8f2,#8da5ba);color:#172c45}.movie-toolbar input{display:none}.movie-toolbar button{padding:7px 11px}.movie-toolbar span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.movie-screen{position:relative;aspect-ratio:16/9;background:radial-gradient(ellipse at center,#243958,#020713 75%);display:grid;place-items:center;color:#91b6e3;text-align:center}.movie-screen video{width:100%;height:100%;object-fit:contain;display:none}.movie-screen video.ready{display:block}.movie-screen small{color:#7493b8}.movie-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;background:linear-gradient(#314b6a,#101c31);color:#dcecff}.movie-controls button{padding:8px 10px;font-size:13px}.movie-controls output{color:#b6d7ff}.movie-controls input[type=range]{min-width:90px;flex:1}.movie-volume{display:flex;align-items:center;gap:5px;font-size:14px}.movie-volume input{width:80px}.movie-playlist{margin-top:15px;background:#0b1c2ed9;border:1px solid #a6bfd1;border-radius:10px;overflow:hidden}.movie-playlist .track.active{border-left-color:#5ec4ff}.movie-note{font-size:12px;color:#d6e5f2}.movie-view .empty{padding:18px}
@media(max-width:600px){header{flex-wrap:wrap}.tabs{order:3;width:100%;margin:0}.tabs .tab{flex:1}.music-picker{max-width:100%;width:100%}.movie-toolbar{flex-wrap:wrap}.movie-toolbar span{width:100%}.movie-controls{gap:6px}.movie-controls input[type=range]{min-width:70px}.movie-volume{margin-left:auto}}