body{background:var(--bg);color:var(--ink);overflow-x:hidden}
.mp3{--hh:64px;height:calc(100vh - var(--hh));height:calc(100svh - var(--hh));padding:14px 0 10px;box-sizing:border-box;overflow-x:clip;background:radial-gradient(900px 520px at 22% 40%,rgba(160,190,255,.06),transparent 70%)}
.mp3 .box{height:100%;display:flex;flex-direction:column;min-height:0}
.mono-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0}
.num{font-variant-numeric:tabular-nums}

.hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 22px}
.hd .kick{flex-basis:100%;color:var(--gold)}
.hd h2.big{font-family:var(--serif);font-weight:800;font-size:clamp(28px,3.3vw,48px);line-height:1.02;letter-spacing:-.03em;color:#fff;margin:0;font-variation-settings:"opsz" 144}
.hd h2.big em{font-style:italic;font-weight:500;color:var(--gold)}
.hd .sub{font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.45vw,20px);line-height:1.3;color:var(--ink-dim);margin:0}

.grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(330px,.8fr) minmax(0,2fr);gap:18px;margin-top:14px}


.sky{--lit:0;position:relative;display:flex;flex-direction:column;min-height:0;border-radius:18px;border:1px solid var(--rule);overflow:hidden;background:linear-gradient(180deg,#0a1222,#060a12);padding:18px 18px 16px;isolation:isolate}
.sky::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at var(--mx,50%) 30%,#5d7bb0,#2a3f66 45%,#14213a 80%);opacity:calc(var(--lit) * .85);transition:opacity .2s linear}
.skystars{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.read{display:flex;flex-direction:column;gap:2px}
.read .mono-cap{color:#cfd7e6}
.pct{font-family:var(--serif);font-weight:800;font-size:clamp(46px,5vw,72px);line-height:.95;letter-spacing:-.04em;color:#fff;margin:0;font-variation-settings:"opsz" 144}
.pct small{font-size:.32em;font-weight:500;font-style:italic;letter-spacing:0;margin-left:4px;color:var(--ink-dim)}
.band{position:relative;flex:1;min-height:120px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.band.drag{cursor:grabbing}
.arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arc path{fill:none;stroke:rgba(244,185,66,.42);stroke-width:1.3;stroke-dasharray:2 5}
.arc .pm{fill:var(--gold)}
.arc .tick{stroke:var(--ink-dim);stroke-width:1.2}
.arc text{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-dim)}
.moon{position:absolute;left:0;top:0;width:var(--ms,112px);height:var(--ms,112px);margin:calc(var(--ms,112px) / -2) 0 0 calc(var(--ms,112px) / -2);border-radius:50%;will-change:transform;outline:none;box-shadow:0 0 calc(18px + 60px * var(--lit)) calc(4px * var(--lit)) rgba(220,230,255,calc(.08 + .3 * var(--lit)))}
.moon canvas{width:100%;height:100%;display:block;border-radius:50%}
.moon:focus-visible{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--gold)}
.end{position:absolute;bottom:0}
.end.l{left:0}.end.r{right:0}
.say{font-family:var(--hand);font-size:clamp(22px,1.9vw,28px);line-height:1.1;color:var(--gold);margin:6px 0 10px;min-height:1.1em}
.vd{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vd li{display:flex;justify-content:space-between;align-items:center;padding:7px 8px 7px 12px;border-radius:10px;background:rgba(7,11,19,.55);border:1px solid var(--rule);font-family:var(--sans);font-size:14px;color:#e8edf6}
.vd b{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;border-radius:999px;font-weight:600;transition:background .3s,color .3s}
.vd b.go{background:#2f7d4f;color:#e9fff0}
.vd b.meh{background:var(--gold);color:#1a1405}
.vd b.wait{background:var(--stamp-red);color:#fff}
.jump{display:flex;gap:6px;margin-top:12px}
.jump button{flex:1;min-height:36px;border-radius:999px;border:1px solid var(--rule);background:rgba(7,11,19,.6);color:var(--ink);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.jump button:hover{border-color:var(--gold)}
.jump button[aria-pressed="true"]{background:var(--gold);color:#16120a;border-color:var(--gold)}
.jump button:focus-visible,.tile:focus-visible{outline:2px solid var(--gold);outline-offset:3px}


.wall{display:flex;flex-direction:column;min-height:0}
.wall h3{margin:0 0 8px;color:#cfd7e6}
.wall h3 span{color:var(--ink-faint);margin-left:10px}
.tiles{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px}
.tile{position:relative;display:block;min-height:0;padding:0;margin:0;border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:#03050a;cursor:pointer;text-align:left;color:inherit;font:inherit;transition:border-color .25s,box-shadow .25s}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.001);transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s}
.tile:hover img,.tile:hover video{transform:scale(1.04)}
.tile[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 8px 30px rgba(244,185,66,.18)}
.tile .ph{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;border-radius:999px;background:rgba(5,8,14,.72);font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#fff}
.tile .ph svg{width:20px;height:20px;display:block}
.tile .tx{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 10px;background:linear-gradient(rgba(3,5,10,0),rgba(3,5,10,.88) 60%)}
.tile .nm{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(15px,1.35vw,19px);line-height:1.1;color:#fff}
.tile .wy{display:block;margin-top:3px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .kind{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:999px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;background:rgba(199,155,255,.85);color:#170c26}
.tile.planet .kind{background:rgba(244,185,66,.92);color:#1a1405}
.tile.planet{background:#000}
.tile.planet img,.tile.planet video{object-fit:contain}
.tile.planet .stk{opacity:0}
.tile.planet.st .stk{opacity:1}
.tile.planet.st video{opacity:0}
.tile .vlab{position:absolute;right:8px;top:34px;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim)}

.foot{margin:8px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.35;color:var(--ink-faint)}


@media (max-width:1000px){
  .grid{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .sky{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"read jump" "band band" "vd vd";column-gap:12px;padding:12px 14px}
  .read{grid-area:read}.band{grid-area:band;min-height:96px;height:110px}.vd{grid-area:vd}.jump{grid-area:jump;align-self:start;margin:0;justify-self:end;width:min(100%,250px)}
  .say{display:none}
  .vd{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
  .vd li{flex-direction:column;align-items:flex-start;gap:4px;padding:6px 8px;font-size:12px}
}
@media (max-width:640px){
  .mp3{padding:10px 0 8px}
  .hd .kick{display:none}
  .hd h2.big{font-size:27px}
  .hd .sub{font-size:14.5px}
  .grid{margin-top:8px;gap:10px}
  .sky{padding:10px 12px;border-radius:14px}
  .pct{font-size:40px}
  .read .mono-cap{font-size:9.5px;letter-spacing:.12em}
  .jump{gap:4px;width:auto}
  .jump button{min-height:34px;padding:0 9px;font-size:9.5px;letter-spacing:.08em}
  .band{height:92px;min-height:0}
  .vd li{font-size:11.5px;padding:5px 7px;border-radius:8px;flex-direction:row;align-items:center;gap:4px}
  .vd b{font-size:8.5px;padding:3px 6px;letter-spacing:.08em}
  .wall h3{margin-bottom:6px;font-size:9.5px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:6px}
  .tile{border-radius:10px}
  .tile .ph{top:5px;left:5px;font-size:10px;padding:2px 7px 2px 3px;gap:4px}
  .tile .ph svg{width:16px;height:16px}
  .tile .kind{display:none}
  .tile .vlab{top:6px;right:6px;font-size:8.5px}
  .tile .tx{padding:18px 8px 6px}
  .tile .nm{font-size:13.5px}
  .tile .wy{font-size:8.5px;letter-spacing:.02em}
  .foot{font-size:9.5px;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
  .tile img,.tile video,.vd b,.sky::before{transition:none}
  .tile:hover img,.tile:hover video{transform:none}
}