*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:#000;color:#eef4ff;font-family:Inter,"Segoe UI Variable","SF Pro Display",system-ui,sans-serif;overflow:hidden}
#scene{position:fixed;inset:0;overflow:hidden}
#photo{position:absolute;inset:-3%;background:url(img/night.webp) center 40%/cover;animation:pan 50s ease-in-out infinite alternate;z-index:1}
@media (max-width:900px){#photo{background-image:url(img/night_1280.webp)}}
#sky{position:absolute;width:100%;height:100%;z-index:0}
@keyframes pan{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.07) translateX(-1.5%)}}
#vig{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 75% 70% at 50% 42%,transparent 55%,#000c 100%);backdrop-filter:blur(0);}
#rain{position:absolute;inset:0;width:100%;height:100%;z-index:2}
#pillarL,#pillarR{position:absolute;top:-10%;width:22vw;height:120%;background:#050507;z-index:4}#pillarL{left:-15vw;transform:skewX(-13deg)}#pillarR{right:-15vw;transform:skewX(13deg)}
#scene:before{content:"";position:absolute;left:0;right:0;top:0;height:8vh;background:linear-gradient(#050507 55%,transparent);z-index:4}
#dash{position:fixed;left:0;right:0;bottom:0;height:40vh;min-height:300px;z-index:5;background:linear-gradient(180deg,#1a1b20 0,#0c0c0f 18%,#060607);border-top-left-radius:50% 22%;border-top-right-radius:50% 22%;display:flex;justify-content:center;box-shadow:0 -20px 40px #0009}
.amb{position:absolute;left:8%;right:8%;top:10px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#7b5cff,#2fd3ff,#7b5cff,transparent);box-shadow:0 0 14px #5a7bff;animation:amb 6s ease-in-out infinite alternate}@keyframes amb{to{filter:hue-rotate(60deg);opacity:.7}}
#unit{position:relative;margin-top:26px;width:min(760px,96vw);height:max-content;padding:12px;border-radius:22px;
 background:linear-gradient(145deg,#0b0b0d,#000 60%,#141418);border:1px solid #2a2a30;box-shadow:inset 0 1px 0 #ffffff14,0 18px 40px #000,0 0 0 3px #8a8f98,0 0 0 4px #3a3d44;
 display:grid;grid-template-columns:70px 1fr 70px;gap:14px;align-items:center}
#unit:before{content:"";position:absolute;inset:-3px;border-radius:24px;pointer-events:none;background:repeating-linear-gradient(90deg,#ffffff06 0 1px,transparent 1px 3px)}
#screen{position:relative;border-radius:16px/22px;padding:12px 14px 10px;background:radial-gradient(120% 140% at 30% 0,#14182a,#05060b 70%);overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff12,inset 0 -30px 60px #000a;transform:perspective(900px) rotateX(4deg)}
#glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,#ffffff18 0,#ffffff05 28%,transparent 40%);z-index:3}
#top{display:flex;gap:10px;font-size:11px;letter-spacing:.08em;color:#8e9bb8}#tag{margin-left:auto;color:#ffb86b}
#np{display:flex;gap:14px;align-items:center;margin-top:8px}
#logo{flex:none;width:84px;height:84px;border-radius:16px;display:grid;place-items:center;font-weight:800;font-size:26px;letter-spacing:-.02em;box-shadow:0 8px 24px #0008,inset 0 1px 0 #fff3;transition:background .6s,transform .4s}
#meta{min-width:0;flex:1}#sname{font-size:12px;color:#9fb3ff;letter-spacing:.12em;text-transform:uppercase}
#title{font-size:22px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .4s}#artist{font-size:13px;color:#a8b0c4}
#prog{height:4px;border-radius:4px;background:#ffffff1a;margin-top:10px;overflow:hidden}#prog b{display:block;height:100%;width:0;background:linear-gradient(90deg,#5a7bff,#2fd3ff);box-shadow:0 0 10px #2fd3ff}
#times{display:flex;justify-content:space-between;font-size:10px;color:#7d8699;margin-top:3px;font-variant-numeric:tabular-nums}
#viz{display:block;width:100%;height:46px;margin-top:6px}
#ctrl{display:flex;justify-content:center;gap:12px;margin:4px 0 8px}#ctrl button{width:44px;height:44px;border-radius:50%;border:1px solid #ffffff1a;background:#ffffff0d;color:#dfe6ff;font-size:17px;cursor:pointer;transition:transform .15s,background .3s}
#ctrl button:active{transform:scale(.92)}#power{width:52px!important;height:52px!important;background:linear-gradient(135deg,#5a7bff,#2fd3ff)!important;color:#05060b!important;box-shadow:0 0 18px #2fd3ff66}
#cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 6px;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}#cards::-webkit-scrollbar{display:none}
.card{flex:none;scroll-snap-align:center;width:92px;padding:8px;border-radius:12px;border:1px solid #ffffff14;background:#ffffff08;color:#dfe6ff;font-size:11px;text-align:left;cursor:pointer;transition:transform .3s,border-color .3s,background .3s}
.card .t{width:100%;aspect-ratio:1;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:18px;margin-bottom:6px}.card.act{border-color:#2fd3ff;background:#2fd3ff14;transform:translateY(-3px)}
.knob{width:70px;height:70px;border-radius:50%;border:none;cursor:pointer;position:relative;background:repeating-conic-gradient(#c9cdd4 0 4deg,#7c818a 4deg 8deg);box-shadow:0 6px 14px #000,inset 0 0 0 1px #0006}
.knob:after{content:"";position:absolute;inset:7px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#f4f6f9,#a9aeb6 45%,#6d727a 100%);box-shadow:inset 0 2px 3px #fff8,inset 0 -3px 6px #0005}
.knob i{position:absolute;inset:0;z-index:1;transition:transform .45s cubic-bezier(.2,1.4,.4,1)}.knob i:before{content:"";position:absolute;left:50%;top:11px;width:3px;height:12px;margin-left:-1.5px;border-radius:2px;background:#2fd3ff;box-shadow:0 0 6px #2fd3ff}
#wheel{position:fixed;left:50%;bottom:calc(-1 * min(110vw,900px) + 9vh);width:min(110vw,900px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;border:clamp(22px,4vw,40px) solid #0b0b0e;box-shadow:inset 0 2px 0 #2a2a30,0 -2px 0 #26262c;pointer-events:none;z-index:6}
footer{position:fixed;top:10px;left:0;right:0;text-align:center;font-size:12px;color:#aab;z-index:7;letter-spacing:.04em}footer a{color:#8fb0ff}
@media (max-width:620px){#dash{height:auto;min-height:0;padding-bottom:12vh}#unit{grid-template-columns:1fr 1fr;gap:10px}#screen{grid-column:1/3;grid-row:1}.knob{justify-self:center;width:56px;height:56px}#logo{width:64px;height:64px;font-size:20px}#title{font-size:18px}.card{width:80px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
#dash{height:auto;min-height:0;padding-bottom:9vh}#unit{margin-top:20px}#screen{min-width:0}#viz{height:36px}
#wheel{bottom:calc(-1 * min(110vw,900px) + 7vh)}
@media (max-width:620px){#unit{width:94vw}#dash{padding-bottom:8vh}}
@media (max-width:620px){#unit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:94vw;max-width:94vw}#screen,#cards,#meta{min-width:0;max-width:100%}#pillarL,#pillarR{width:12vw}#pillarL{left:-9vw}#pillarR{right:-9vw}}