:root{--bg:#07090d;--card:#10141c;--line:#1e2633;--text:#e8edf5;--muted:#8a96a8;--aqua:#22d3ee;--fire:#f97316;--grad:linear-gradient(90deg,#22d3ee,#a855f7,#f97316)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(1200px 600px at 50% -200px,#13233a 0,var(--bg) 60%);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:var(--aqua)}
.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem 1.2rem;background:rgba(7,9,13,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.5rem;color:var(--text);text-decoration:none;font-weight:600;font-size:1.1rem}.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}nav a{color:var(--muted);text-decoration:none;font-size:.92rem}nav a:hover{color:var(--text)}
nav .cta{color:#000;background:var(--grad);padding:.35rem .8rem;border-radius:99px;font-weight:600}
main{max-width:1150px;margin:0 auto;padding:1rem}
.hero{text-align:center;padding:2rem 1rem 1rem}.hero h1{font-size:clamp(1.8rem,5vw,3rem);margin:.2rem 0}.hero p{color:var(--muted);max-width:640px;margin:0 auto}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.3rem;margin:1rem 0}
h2{margin:.1rem 0 .5rem;font-size:1.3rem}.muted{color:var(--muted)}.small{font-size:.85rem}
.wheel-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.5rem;align-items:center}
.wheel-wrap{max-width:560px;width:100%;margin:auto}#wheel{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(34,211,238,.15))}
.seg{cursor:pointer;outline:none}.seg path{stroke:#fff;stroke-width:1.5;transition:opacity .2s,filter .2s}
.seg:hover path,.seg:focus path{filter:brightness(1.2)}
.seg-code{fill:#fff;font-weight:800;font-size:19px;text-anchor:middle;pointer-events:none}.seg-name{fill:#fff;font-size:11.5px;font-weight:600;text-anchor:middle;pointer-events:none;opacity:.92}
.seg.dim path{opacity:.18}.seg.dim text{opacity:.35}
.seg.same path{stroke:#fff;stroke-width:5}.seg.adjacent path{stroke:#22d3ee;stroke-width:4}.seg.relative path{stroke:#facc15;stroke-width:4}.seg.boost path{stroke:#f97316;stroke-width:4;stroke-dasharray:6 4}
.legend{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}.legend span{font-size:.8rem;padding:.15rem .6rem;border-radius:99px;border:2px solid}
.l-same{border-color:#fff}.l-adjacent{border-color:#22d3ee}.l-relative{border-color:#facc15}.l-boost{border-color:#f97316;border-style:dashed!important}
#keyinfo ul{list-style:none;padding:0;margin:.4rem 0}#keyinfo li{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;padding:.35rem .6rem;border-left:3px solid;margin:.3rem 0;background:#0b0f16;border-radius:6px}
#keyinfo li span{color:var(--muted);font-size:.85rem;margin-left:auto}#keyinfo h3{margin:.3rem 0}
.t-same{border-color:#fff}.t-adjacent{border-color:#22d3ee}.t-relative{border-color:#facc15}.t-boost{border-color:#f97316}
.check{display:flex;gap:.5rem;align-items:center;cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.grid .card{margin:0}
label{display:block;color:var(--muted);font-size:.85rem;margin:.4rem 0}
input,select{display:block;width:100%;margin-top:.25rem;padding:.6rem .7rem;background:#0b0f16;border:1px solid var(--line);border-radius:10px;color:var(--text);font-size:1rem}
input:focus,select:focus{outline:2px solid var(--aqua);border-color:transparent}
.row{display:flex;gap:.6rem}.row label{flex:1}
.btn{display:inline-block;border:0;cursor:pointer;background:var(--grad);color:#000;font-weight:700;padding:.6rem 1.1rem;border-radius:99px;text-decoration:none;font-size:.95rem}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line);font-weight:500}
.tap{display:block;width:100%;aspect-ratio:2/1;max-height:170px;border:0;border-radius:16px;font-size:2.2rem;font-weight:900;letter-spacing:.2em;color:#fff;cursor:pointer;background:linear-gradient(135deg,#0e7490,#7c3aed,#ea580c);user-select:none;touch-action:manipulation}
.tap.pulse{animation:pulse .18s}@keyframes pulse{50%{transform:scale(.97);filter:brightness(1.3)}}
.tapread{font-size:1.1rem;margin:.6rem 0}.tapread b{font-size:2.4rem}
.stat{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.45rem 0;border-bottom:1px solid var(--line)}.stat span{color:var(--muted);font-size:.88rem}.stat b{font-size:1.15rem;text-align:right}
.stat.big b{font-size:1.6rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mini{width:100%;border-collapse:collapse;margin-top:.5rem;font-size:.88rem}.mini td{padding:.2rem 0;border-bottom:1px dashed var(--line)}.mini td:last-child{text-align:right}
.drop{border:2px dashed #2b3647;border-radius:14px;padding:2.2rem 1rem;text-align:center;cursor:pointer;color:var(--muted);transition:.2s}.drop:hover,.drop.over{border-color:var(--aqua);color:var(--text);background:#0b141c}
.progress{height:6px;background:#0b0f16;border-radius:9px;overflow:hidden;margin:.8rem 0}.progress i{display:block;height:100%;width:0;background:var(--grad);transition:width .2s}
.chroma{display:flex;gap:4px;height:90px;align-items:flex-end;margin:.8rem 0}.chroma div{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end}
.chroma i{display:block;width:100%;background:var(--grad);border-radius:4px 4px 0 0;min-height:2px}.chroma small{font-size:.65rem;color:var(--muted)}
.err{color:#fca5a5}
.ad-slot{display:flex;align-items:center;justify-content:center;margin:1rem auto;border:1px dashed #334155;border-radius:10px;color:#475569;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}
.ad-leader{max-width:728px;min-height:90px}.ad-rect{max-width:336px;min-height:250px}
.aff-list{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}.aff-placeholder{border:1px dashed #334155;border-radius:10px;padding:1rem;text-align:center;color:#475569;font-size:.85rem}
.promo{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.promo div{flex:1;min-width:200px}
kbd{background:#1e2633;padding:.05rem .4rem;border-radius:4px;font-size:.85em}
footer{text-align:center;padding:2rem 1rem;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line);margin-top:2rem}
@media(max-width:900px){.wheel-card{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.aff-list{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid{grid-template-columns:1fr}nav a:not(.cta):not(.new):not(.on){display:none}.row{flex-wrap:wrap}.ad-leader{max-width:320px;min-height:100px}main{padding:.6rem}}
[hidden]{display:none!important}
input[type=checkbox]{display:inline-block;width:auto;margin:0;accent-color:var(--aqua)}
.check{color:var(--text);font-size:.95rem}
.advertise{display:flex;justify-content:space-between;align-items:center;gap:1rem;max-width:520px;margin:1.5rem auto .5rem;padding:.65rem 1.1rem;border-radius:99px;text-decoration:none;color:var(--text);font-size:.9rem;border:1px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;transition:transform .15s}
.advertise b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.advertise .arrow{color:var(--fire);font-weight:700}.advertise:hover{transform:translateY(-1px)}
/* Set planner */
nav a.new{color:var(--text)}nav a.new::after{content:"new";margin-left:.3rem;font-size:.62rem;padding:.05rem .35rem;border-radius:99px;background:var(--fire);color:#000;font-weight:700;vertical-align:middle}
nav a.on{color:var(--text);border-bottom:2px solid var(--aqua)}
.plan-promo{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;text-decoration:none;color:var(--text);padding:.9rem 1.3rem;background:linear-gradient(var(--card),var(--card)) padding-box,var(--grad) border-box;border:1px solid transparent}
textarea{display:block;width:100%;min-height:240px;box-sizing:border-box;padding:.7rem;background:#0b0f16;border:1px solid var(--line);border-radius:10px;color:var(--text);font:14px/1.45 ui-monospace,Menlo,monospace;resize:vertical}
textarea:focus{outline:none;border-color:var(--aqua);box-shadow:0 0 0 3px rgba(34,211,238,.25),0 0 0 1px rgba(168,85,247,.5)}
textarea::placeholder{color:var(--muted)}
.btns{display:flex;flex-wrap:wrap;gap:.5rem;margin:.7rem 0}.btn:disabled{opacity:.4;cursor:default}
.small-drop{padding:1.2rem 1rem;margin-top:.5rem}.center{text-align:center}.mt{margin-top:1.4rem}
.planbar{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center}
.flowbox{min-width:170px}.flowbox b{display:block;font-size:2.4rem;line-height:1}.flowbox b.g{color:#4ade80}.flowbox b.y{color:#facc15}.flowbox b.r{color:#f87171}
.fbar{height:6px;background:#0b0f16;border-radius:9px;overflow:hidden;margin:.4rem 0}.fbar i{display:block;height:100%;width:0;background:var(--grad);transition:width .3s}
.planopts{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:center}.planopts label:first-child{min-width:180px}
.c{margin-right:.6rem}.c.g{color:#4ade80}.c.y{color:#facc15}.c.r{color:#f87171}
.status{color:var(--aqua);min-height:1.2em;margin:.3rem 0}
.thead,.trk{display:grid;grid-template-columns:22px 44px minmax(0,1fr) minmax(0,1.4fr) 70px 64px 46px 96px;gap:.4rem;align-items:center}
.thead{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:0 .5rem}
.trk{position:relative;background:#0b0f16;border:1px solid var(--line);border-radius:10px;padding:.3rem .5rem}
.trk input{margin:0;padding:.4rem .5rem;font-size:.92rem;background:transparent;border-color:transparent}.trk input:hover{border-color:var(--line)}
.trk .f-key{border-left:4px solid var(--kc);font-weight:700}.trk.locked{border-color:#475569}
.trk.dragging{opacity:.4}.trk.over{outline:2px dashed var(--aqua)}
.grip{cursor:grab;color:var(--muted);user-select:none;text-align:center}.num{color:var(--muted);font-size:.85rem}
.acts{display:flex;gap:.2rem;justify-content:flex-end}.acts button{background:none;border:1px solid var(--line);color:var(--muted);border-radius:6px;width:28px;height:28px;cursor:pointer}.acts button:hover{color:var(--text);border-color:var(--aqua)}
.est{position:absolute;top:-7px;right:8px;font-size:.62rem;background:#334155;color:#cbd5e1;padding:0 .35rem;border-radius:99px}
.trans{display:flex;gap:.6rem;align-items:center;font-size:.78rem;color:var(--muted);padding:.22rem 0 .22rem 3.6rem}
.trans .dot{width:9px;height:9px;border-radius:50%}.trans.green .dot{background:#4ade80;box-shadow:0 0 8px #4ade80}.trans.yellow .dot{background:#facc15}.trans.red .dot{background:#f87171;box-shadow:0 0 8px #f87171}
.trans .tk{padding:.02rem .45rem;border-radius:99px;border:1px solid var(--line);color:var(--text)}
.trans.red span:not(.dot){color:#fca5a5}
.legend{margin:.8rem 0 0;color:var(--muted)}
@media(max-width:900px){.planbar{grid-template-columns:1fr}}
@media(max-width:700px){
  .thead{display:none}
  .trk{grid-template-columns:20px 34px 1fr 1fr;grid-template-areas:"g n a a" "g n t t" "g n b k" "g n e x"}
  .grip{grid-area:g}.num{grid-area:n}.f-artist{grid-area:a}.f-title{grid-area:t}.f-bpm{grid-area:b}.f-key{grid-area:k}.f-energy{grid-area:e}.acts{grid-area:x}
  .trans{padding-left:2.4rem}
}