@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;800&display=swap');
:root{--paper:#eee9df;--ink:#161616;--acid:#e8ff3d;--line:rgba(22,22,22,.18)}
*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}
body{height:100svh;margin:0;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:radial-gradient(circle at 80% 20%,#fff 0,transparent 30%),linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:auto,40px 40px,40px 40px}
header{padding:clamp(20px,3vw,42px) clamp(24px,5vw,72px) 10px;display:grid;grid-template-columns:1.4fr 1fr;gap:8px 6vw;align-items:end;position:relative;z-index:100;pointer-events:none}
.eyebrow{grid-column:1/-1;font:500 11px DM Mono,monospace;letter-spacing:.16em;margin:0}h1{font-size:clamp(52px,8vw,105px);line-height:.8;letter-spacing:-.07em;margin:0}h1 span{color:#df3c2f}.intro{max-width:460px;font-size:clamp(13px,1.3vw,17px);line-height:1.45;margin:0 0 5px;padding-right:220px}
.drive{position:absolute;
right:clamp(24px,5vw,72px);
bottom:12px;
z-index:10001;
width:clamp(155px,18vw,235px);
height:82px;
border:4px solid #24221f;
border-radius:10px 10px 5px 5px;
background:linear-gradient(145deg,#c8b79a 0 12%,#8f806c 13% 72%,#655b4e 73%);
box-shadow:inset 3px 3px #e5d5b9,inset -4px -4px #4a433a,6px 7px 0 rgba(0,0,0,.2);
pointer-events:none}.drive:before{content:"";
position:absolute;
inset:8px 10px 18px;
border:1px solid #544c40;
border-radius:4px;
background:linear-gradient(#766b5c,#9b8d77);
box-shadow:inset 0 2px 3px #4b443a}.drive:after{content:"";
position:absolute;
left:50%;
width:88%;
transform:translateX(-50%);
bottom:-8px;
height:12px;
border:3px solid #24221f;
border-top:0;
border-radius:0 0 7px 7px;
background:#50483e;
box-shadow:0 4px 0 rgba(0,0,0,.18)}.drive-slot{position:absolute;
z-index:3;
left:50%;
width:80%;
transform:translateX(-50%);
bottom:-4px;
height:10px;
border-radius:5px;
background:#090909;
box-shadow:inset 0 4px 4px #000,0 -2px #b2a38b}.drive-light{position:absolute;
z-index:4;
width:8px;
height:8px;border:1px solid #303820;border-radius:50%;right:13px;top:13px;background:#b5ff3d;box-shadow:0 0 7px #b5ff3d}.drive small{position:absolute;z-index:4;left:15px;top:13px;color:#211f1c;font:700 8px DM Mono,monospace;letter-spacing:.1em;text-shadow:0 1px #c9baa0}
.drive.loading .drive-light{background:#ff493d;box-shadow:0 0 10px #ff493d;animation:blink .85s steps(2) infinite}@keyframes blink{50%{opacity:.2}}
main{min-height:0;position:relative}.disk-pile{position:absolute;inset:0 2vw;isolation:isolate}
.disk{position:absolute;left:var(--px);top:var(--py);width:clamp(125px,14vw,205px);aspect-ratio:1;transform:translate(calc(-50% + var(--x) * .12),calc(-50% + var(--y) * .12)) rotate(var(--r));filter:drop-shadow(0 10px 8px rgba(0,0,0,.2));transition:left .6s cubic-bezier(.2,.8,.2,1),top .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1),filter .3s;z-index:var(--i);outline:none;animation:drop-in .82s cubic-bezier(.2,.72,.3,1.12) both;animation-delay:calc(var(--i) * 38ms)}
@keyframes drop-in{0%{transform:translate(calc(-50% + var(--x) * .12),-120vh) rotate(calc(var(--r) * 3));opacity:0}65%{opacity:1}82%{transform:translate(calc(-50% + var(--x) * .12),calc(-47% + var(--y) * .12)) rotate(calc(var(--r) * .8))}100%{transform:translate(calc(-50% + var(--x) * .12),calc(-50% + var(--y) * .12)) rotate(var(--r));opacity:1}}
.disk img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}.label{position:absolute;left:22%;right:19%;top:50%;height:37%;display:flex;flex-direction:column;align-items:center;text-align:center;color:#17233b;font-family:Caveat,'Comic Sans MS',cursive;overflow:hidden;transform:rotate(-1deg)}
.label strong{font-size:clamp(13px,1.45vw,18px);line-height:.9;font-weight:700;text-transform:capitalize;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.label em{font-size:clamp(9px,.9vw,12px);line-height:1;margin-top:3px;font-style:normal;white-space:nowrap}.label small{font-size:clamp(9px,.85vw,11px);line-height:.95;margin-top:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.empty-disk .label{left:20%;right:17%;overflow:visible;padding-inline:4px}.empty-disk .label strong{text-transform:none;display:block;overflow:visible;padding-inline:5px;font-size:clamp(12px,1.32vw,17px);line-height:.95;text-wrap:balance;overflow-wrap:anywhere}.empty-disk .empty-note{display:block;overflow:visible;margin-top:7px;padding-inline:6px;font-size:clamp(8px,.82vw,11px);line-height:1.05;letter-spacing:.01em;text-wrap:balance;overflow-wrap:anywhere}
.disk-pile.organized .disk{animation:none;left:var(--clean-x);top:var(--clean-y);transform:translate(-50%,-50%) rotate(var(--clean-r))}.disk-pile.organized .empty-disk{z-index:calc(100 + var(--i));filter:drop-shadow(0 5px 4px rgba(0,0,0,.22))}.disk-pile.organized .disk:not(.empty-disk){z-index:700}.clean-up{position:fixed;right:24px;bottom:58px;z-index:9500;border:2px solid var(--ink);background:var(--acid);color:var(--ink);padding:12px 17px;box-shadow:4px 4px 0 var(--ink);font:500 11px DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}.clean-up:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}.clean-up[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.disk:hover,.disk:focus-visible{z-index:999;transform:translate(calc(-50% + var(--x) * .12),calc(-57% + var(--y) * .12)) rotate(0) scale(1.13);filter:drop-shadow(0 24px 18px rgba(0,0,0,.34))}.disk:focus-visible{outline:4px solid var(--acid);outline-offset:8px}
.disk-preview{position:fixed!important;left:50%!important;top:53%!important;width:min(42vw,430px)!important;z-index:9000!important;pointer-events:none!important;animation:preview-in .38s cubic-bezier(.2,.8,.2,1) both!important;filter:drop-shadow(0 35px 28px rgba(0,0,0,.42))!important}.disk-preview .label strong{font-size:clamp(22px,3vw,34px)}.disk-preview .label em{font-size:clamp(14px,1.6vw,19px)}.disk-preview .label small{font-size:clamp(13px,1.45vw,17px)}@keyframes preview-in{from{transform:translate(-50%,-45%) rotate(var(--r)) scale(.72);opacity:0}to{transform:translate(-50%,-50%) rotate(0) scale(1);opacity:1}}
.empty{padding:40px;border:1px solid var(--ink);background:var(--acid);transform:rotate(-1deg);box-shadow:8px 8px 0 var(--ink)}.empty p{font-size:28px;font-weight:800;margin:0 0 8px}.empty small{font-family:DM Mono,monospace}footer{border-top:1px solid var(--ink);padding:16px clamp(28px,5vw,72px);display:flex;justify-content:space-between;font:500 11px DM Mono,monospace;text-transform:uppercase;letter-spacing:.1em}
@media(max-width:650px){header{grid-template-columns:1fr;padding-top:18px}.intro{display:none}.drive{width:130px;height:60px;bottom:8px}.disk-pile{inset:0}.disk{width:clamp(105px,31vw,155px)}.label small{display:none}.disk-preview{width:min(78vw,340px)!important}.disk-preview .label small{display:block}footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.disk{transition:none;animation:none}}