:root{
  --bg1:#0b1022; --bg2:#0f172a; --edge:#1e293b; --muted:#94a3b8; --accent:#38bdf8;
}
*{box-sizing:border-box;font-family:system-ui,Segoe UI,Roboto,Arial}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,var(--bg1),var(--bg2));color:#e5e7eb;overflow:hidden}
header{position:fixed;inset:12px auto auto 12px;z-index:3;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:rgba(2,6,23,.45);backdrop-filter: blur(10px);border:1px solid rgba(148,163,184,.2);border-radius:12px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
h1{margin:0;font-size:16px}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
input[type=search]{background:#0b1220;border:1px solid rgba(148,163,184,.35);color:#e5e7eb;border-radius:10px;padding:8px 10px;width:220px}
input[type=range]{width:160px}
label{color:#cbd5e1;font-size:12px}
button{background:#1f2937;border:1px solid rgba(148,163,184,.35);color:#e5e7eb;border-radius:10px;padding:8px 10px;cursor:pointer}
button.primary{background:#0ea5e9;border-color:#38bdf8}
#stage{position:absolute;inset:0;overflow:hidden;z-index:1}
.item{position:absolute;width:var(--size);height:var(--size);animation: floatY var(--dur) ease-in-out infinite alternate;will-change: transform,left,top;touch-action: none}
@keyframes floatY{from{transform: translateY(-6px)}to{transform: translateY(6px)}}
.item canvas{width:100%;height:100%;display:block;border-radius:16px;box-shadow:0 10px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(148,163,184,.25)}
.item.dragging{animation-play-state:paused;box-shadow:0 14px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(148,163,184,.35)}
.tooltip{position:absolute;z-index:4;display:none;background:rgba(2,6,23,.90);color:#e5e7eb;border:1px solid rgba(148,163,184,.3);border-radius:10px;padding:8px 10px;font-size:13px;pointer-events:none;max-width:320px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.tooltip .t{font-weight:600}.tooltip .m{color:#94a3b8;font-size:12px}
footer{position:fixed;inset:auto auto 12px 12px;z-index:2;color:#94a3b8;font-size:12px;opacity:.8}
small.kbd{border:1px solid rgba(148,163,184,.35);padding:1px 6px;border-radius:6px;background:#0b1220;color:#cbd5e1}
.zoom.hidden{display:none}
.zoom{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:rgba(0,0,0,.82)}
.zoom-inner{position:relative;max-width:min(95vw,1300px);max-height:85vh}
.zoom img{max-width:100%;max-height:85vh;border-radius:14px;box-shadow:0 16px 40px rgba(0,0,0,.55);display:block}
.zoom-cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;color:#e5e7eb;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));font-size:14px}
.zoom-close{position:absolute;top:-8px;right:-8px;background:#111827;color:#e5e7eb;border:1px solid rgba(148,163,184,.35);width:40px;height:40px;border-radius:12px;font-size:20px;cursor:pointer}