@import "https://fonts.googleapis.com/css2?family=Audiowide&family=Rajdhani:wght@500;600;700&display=swap";:root{--bg:#060f23;--bg-ink:#f0f6ff;--text:#e2efff;--text-soft:#b6d1f4;--muted:#8db0d9;--line:#92c1ff57;--line-strong:#92c1ffb3;--panel-bg:#08142be6;--soft-shadow:0 18px 42px #0000006b}*{box-sizing:border-box}body{color:var(--text);background:radial-gradient(circle at 5% 12%,#54a9ff4d,#0000 34%),radial-gradient(circle at 88% 4%,#ff578138,#0000 42%),radial-gradient(circle at 50% 120%,#ffd65f1a,#0000 50%),linear-gradient(#060f23,#020917 48%,#040c1d 100%);min-height:100vh;margin:0;font-family:Rajdhani,Segoe UI,sans-serif}h1,h2,h3{color:var(--bg-ink);margin:0}h1{letter-spacing:.01em;color:#eff7ff;margin-top:.25rem;font-family:Audiowide,Rajdhani,sans-serif;font-size:clamp(1.6rem,2.6vw,2.6rem);line-height:1.1}h2{margin-bottom:.55rem;font-size:1.06rem}h3{margin-top:1rem;font-size:.94rem}p{margin:0;line-height:1.5}.page-shell{width:min(1320px,100% - 2rem);min-width:0;margin:0 auto;padding:clamp(1rem,2.4vw,2rem) 0 4rem}.hero-card{background:linear-gradient(145deg,#350810f5,#12070bf5),repeating-linear-gradient(-18deg,#ffffff14 0 5px,#fff0 5px 12px);border:1px solid #ffd5ab52;border-radius:26px;padding:clamp(1.1rem,2.4vw,1.9rem);animation:.46s ease-out rise-in;position:relative;overflow:hidden;box-shadow:0 20px 52px #00000073}.hero-card:after{content:"";pointer-events:none;background:linear-gradient(90deg,#ff5f4d,#ffc94d,#ff5f4d);height:4px;position:absolute;inset:auto 0 0}.hero-headline{z-index:1;position:relative}.hero-brand-chip{color:#ffe6d4;letter-spacing:.07em;text-transform:uppercase;background:#21070c94;border:1px solid #ffc68273;border-radius:999px;align-items:center;gap:.55rem;padding:.34rem .8rem .34rem .36rem;font-family:Rajdhani,Segoe UI,sans-serif;font-size:.84rem;font-weight:700;display:inline-flex}.hero-brand-icon{object-fit:contain;border-radius:4px;width:auto;max-width:100px;height:44px;box-shadow:0 0 0 1px #ffdab466}.kicker{text-transform:uppercase;letter-spacing:.18em;color:#ffc980;margin:.7rem 0 0;font-size:.72rem;font-weight:700}.lead{color:#ffe8d4;max-width:74ch;margin-top:.8rem}.pill-row{z-index:1;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem;display:flex;position:relative}.pill{color:#ffd9bd;letter-spacing:.02em;background:#22080e80;border:1px solid #ffcc954d;border-radius:999px;padding:.33rem .78rem;font-size:.76rem;font-weight:600}.grid-layout{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(.8rem,1.5vw,1.2rem);margin-top:1.2rem;display:grid}.panel{background:linear-gradient(#09152cdb,#0c1e3ad1);border:1px solid #92c1ff59;border-radius:20px;min-width:0;padding:clamp(.9rem,2vw,1.15rem);animation:.56s ease-out rise-in;box-shadow:0 18px 40px #0000006b}.dropzone{text-align:center;cursor:pointer;background:radial-gradient(circle at 20% 10%,#ff3f682e,#0000 50%),radial-gradient(circle at 80% 90%,#58afff2e,#0000 50%),#0811226b;border:2px dashed #92c1ffb3;border-radius:16px;place-items:center;min-height:170px;padding:1rem;transition:border-color .14s,transform .14s;display:grid}.dropzone.dragging{border-color:#ffe95a;transform:translateY(-2px)}.dropzone input{display:none}.dropzone-title{overflow-wrap:anywhere;font-size:1rem;font-weight:700}.dropzone-subtitle{color:var(--muted);margin-top:.2rem;font-size:.84rem}.meta-row{color:var(--text-soft);margin:.8rem 0 0}.gp-track-box{background:#030c1c6b;border:1px solid #92c1ff4d;border-radius:12px;margin-top:.8rem;padding:.65rem}.gp-warning-note{color:#ffe9a0;background:#503e1273;border:1px solid #f3d773;border-radius:10px;margin:.55rem 0 .35rem;padding:.45rem .55rem;font-size:.8rem;line-height:1.35}.track-details-list{border-top:1px dashed #92c1ff59;max-height:132px;margin-top:.6rem;padding-top:.5rem;overflow:auto}.midi-track-list{gap:.4rem;max-height:180px;margin-top:.5rem;display:grid;overflow:auto}.midi-track-item{color:var(--text-soft);background:#041125b3;border:1px solid #92c1ff47;border-radius:10px;align-items:flex-start;gap:.45rem;padding:.45rem .55rem;font-size:.84rem;display:flex}.midi-track-item input{margin-top:.15rem}.track-details-list p{color:var(--muted);overflow-wrap:anywhere;margin:.18rem 0;font-size:.78rem}.gp-track-box select{max-width:100%}.control-stack{gap:.6rem;display:grid}.toggle-row{align-items:center;gap:.5rem;display:flex}.select-row{gap:.3rem;display:grid}.select-row select{color:var(--text);background:#041125f2;border:1px solid #92c1ffa6;border-radius:12px;padding:.5rem}.remap-editor{border:1px solid #92c1ffa6;border-radius:12px;min-height:108px;max-height:200px;margin-top:0;padding:.55rem;font-family:JetBrains Mono,Consolas,monospace;font-size:.83rem;line-height:1.4}.hint-row{color:var(--muted);font-size:.78rem}.action-row{flex-wrap:wrap;gap:.6rem;margin-top:1rem;display:flex}button{cursor:pointer;font:inherit;border:1px solid #0000;border-radius:12px;padding:.64rem .9rem;transition:transform .12s,filter .12s}button:hover:not(:disabled){filter:brightness(1.05);transform:translateY(-1px)}.primary-btn{color:#1e1600;background:linear-gradient(#ffd94d,#ff9f1c);border-color:#ffe799e6;font-weight:700}.secondary-btn{color:#d8ebff;background:linear-gradient(#173663f2,#0d2344f2);border-color:#92c1ff8c}button:disabled{opacity:.45;cursor:not-allowed}.error-row{color:#ff7f9f;margin-top:.8rem;font-weight:600}.stat-grid{grid-template-columns:repeat(2,1fr);gap:.6rem;margin-top:.8rem;display:grid}.stat-card{background:#041023b3;border:1px solid #92c1ff59;border-radius:14px;padding:.7rem}.stat-card strong{margin-top:.22rem;font-size:1.1rem;display:block}.stat-label{color:var(--muted);font-size:.8rem}.lane-breakdown{color:var(--text-soft);margin-top:.7rem}.lane-breakdown p{margin:.25rem 0}.histogram-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.45rem;margin-top:.5rem;display:grid}.histogram-item{background:#041023a1;border:1px solid #92c1ff54;border-radius:10px;padding:.45rem .55rem}.histogram-item span{color:var(--muted);font-size:.72rem}.histogram-item strong{margin-top:.15rem;display:block}.histogram-item.unmapped{background:#4910217a;border-color:#ff7fa08c}textarea{resize:vertical;width:100%;min-height:300px;color:var(--text);background:#041125f0;border:1px solid #92c1ff99;border-radius:14px;margin-top:.5rem;padding:.7rem;font-family:JetBrains Mono,Consolas,monospace}.empty-state{color:var(--muted);margin-top:1rem}.sequence-row{color:var(--text-soft);margin-top:.6rem;margin-bottom:.5rem;font-size:.86rem}.legend{background:linear-gradient(#08142beb,#0c1e3ae6);border:1px solid #92c1ff57;border-radius:20px;margin-top:1rem;padding:1rem}.timeline-panel{background:linear-gradient(#08142beb,#0c1e3ae6);border:1px solid #92c1ff57;border-radius:20px;margin-top:1rem;padding:.9rem}.timeline-caption{color:var(--text-soft);margin-top:.3rem;font-size:.9rem}.timeline-controls{grid-template-columns:auto auto auto auto 1fr auto;align-items:end;gap:.5rem;margin-top:.6rem;display:grid}.timeline-input{color:var(--muted);gap:.2rem;font-size:.78rem;display:grid}.timeline-input select,.timeline-input input[type=range]{width:100%}.timeline-input.stretch{min-width:180px}.timeline-time{color:var(--text-soft);margin:0;font-size:.82rem}.timeline-wrap{background:linear-gradient(#050e1f,#0c1f3b);border:1px solid #92c1ff61;border-radius:12px;width:100%;min-width:0;margin-top:.5rem;overflow:auto hidden}.timeline-wrap svg{display:block}.timeline-lane{stroke:#a7d8ff59;stroke-width:1px}.timeline-note{opacity:.94}.timeline-note-cymbal{stroke:#ffffff4d;stroke-width:.8px}.timeline-note-drum{stroke:#00000047;stroke-width:.7px}.timeline-note.lane-kick{fill:#ff9f1c}.timeline-note.lane-red{fill:#ff4f6d}.timeline-note.lane-yellow{fill:#ffd94d}.timeline-note.lane-yellow.open-hihat{fill:#ffe67f;stroke:#fff8d1;stroke-width:1.2px;filter:drop-shadow(0 0 6px #ffe67fd9)}.timeline-note.lane-blue{fill:#4fa7ff}.timeline-note.lane-green{fill:#66d37f}.timeline-kick-bar{stroke:#ffb13f;stroke-width:2px;opacity:.45}.timeline-playhead{stroke:#ffe95a;stroke-width:1.5px;opacity:.9}.timeline-legend{color:var(--muted);margin-top:.35rem;font-size:.78rem}.timeline-legend-detail{color:var(--text-soft);margin-top:.1rem}@media (width<=900px){.page-shell{width:calc(100% - 1rem)}.grid-layout{grid-template-columns:1fr}.action-row{grid-template-columns:1fr;display:grid}.timeline-controls{grid-template-columns:1fr;align-items:stretch}.hero-brand-chip{font-size:.75rem}}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}