:root{--bg:#0a0c11;--bg-2:#11151d;--panel:#151a24;--panel-2:#1b2130;--line:#252d3d;--line-soft:#1e2532;--text:#e7eaf2;--muted:#8b95ab;--accent:#f2a93b;--accent-dim:#7a5518;--accent-2:#3fb8c9;--ok:#5cc48a;--warn:#e8b84b;--danger:#e2594c;--radius:12px;--radius-sm:8px;--shadow:0 10px 30px #00000073;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);color:var(--text);overscroll-behavior-y:none;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Inter,Roboto,Helvetica Neue,Arial,sans-serif;font-size:15px;line-height:1.45}body{min-height:100dvh;padding-bottom:env(safe-area-inset-bottom)}h1,h2,h3,h4{letter-spacing:-.01em;margin:0;font-weight:650}h1{font-size:1.35rem}h2{font-size:1.05rem}h3{font-size:.92rem}p{margin:0 0 .6em}a{color:var(--accent);text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}.app{max-width:1040px;margin:0 auto;padding:0 14px 96px}.topbar{z-index:40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft);background:linear-gradient(#0a0c11f7,#0a0c11d1);align-items:center;gap:10px;padding:12px 14px;display:flex;position:sticky;top:0}.brand{letter-spacing:.02em;align-items:baseline;gap:8px;font-weight:700;display:flex}.brand small{color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-size:.62rem;font-weight:500}.nav{z-index:50;padding:6px 6px calc(6px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);background:#0c0f15f0;grid-template-columns:repeat(6,1fr);gap:2px;display:grid;position:fixed;bottom:0;left:0;right:0}.nav a{border-radius:var(--radius-sm);color:var(--muted);letter-spacing:.01em;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;font-size:.62rem;font-weight:600;display:flex}.nav a.active{color:var(--accent);background:#f2a93b1a}.nav svg{width:19px;height:19px}.card{background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);margin-top:12px;padding:14px}.card>h2,.card>h3{margin-bottom:10px}.card-head{justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.hint{color:var(--muted);font-size:.78rem;line-height:1.4}.row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.row-between{justify-content:space-between;align-items:center;gap:10px;display:flex}.grid-2{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;display:grid}.stack{flex-direction:column;gap:10px;display:flex}.btn{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel-2);color:var(--text);cursor:pointer;justify-content:center;align-items:center;gap:6px;padding:9px 13px;font-size:.84rem;font-weight:600;transition:background .12s,border-color .12s,transform 60ms;display:inline-flex}.btn:active{transform:scale(.97)}.btn:hover{border-color:#35405a}.btn.primary{background:var(--accent);border-color:var(--accent);color:#1a1204}.btn.ghost{background:0 0}.btn.on{border-color:var(--accent);color:var(--accent);background:#f2a93b1f}.btn.small{padding:5px 9px;font-size:.76rem}.btn.danger{color:var(--danger);border-color:#4a2a28}.btn:disabled{opacity:.4;cursor:default}.field{flex-direction:column;gap:5px;display:flex}.field label,.label{text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-size:.68rem;font-weight:700}input[type=number],input[type=text],select,textarea{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-sm);outline:none;width:100%;padding:8px 10px}input:focus,select:focus,textarea:focus{border-color:var(--accent)}input[type=range]{appearance:none;background:0 0;width:100%;height:26px}input[type=range]::-webkit-slider-runnable-track{background:var(--line);border-radius:3px;height:5px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border:2px solid #2a1d06;border-radius:50%;width:22px;height:22px;margin-top:-8.5px}input[type=range]::-moz-range-track{background:var(--line);border-radius:3px;height:5px}input[type=range]::-moz-range-thumb{background:var(--accent);border:2px solid #2a1d06;border-radius:50%;width:20px;height:20px}.seg{border:1px solid var(--line);border-radius:var(--radius-sm);flex-wrap:wrap;display:inline-flex;overflow:hidden}.seg button{border:none;border-right:1px solid var(--line);color:var(--muted);cursor:pointer;background:0 0;padding:7px 11px;font-size:.8rem;font-weight:600}.seg button:last-child{border-right:none}.seg button.on{color:var(--accent);background:#f2a93b29}.switch{cursor:pointer;align-items:center;gap:8px;font-size:.84rem;display:inline-flex}.switch input{display:none}.switch .track{background:var(--line);border-radius:11px;flex:none;width:38px;height:22px;transition:background .15s;position:relative}.switch .track:after{content:"";background:#7b8398;border-radius:50%;width:16px;height:16px;transition:transform .15s,background .15s;position:absolute;top:3px;left:3px}.switch input:checked+.track{background:var(--accent-dim)}.switch input:checked+.track:after{background:var(--accent);transform:translate(16px)}.tempo{justify-content:center;align-items:center;gap:14px;display:flex}.tempo-value{font-variant-numeric:tabular-nums;letter-spacing:-.04em;font-size:4.2rem;font-weight:750;line-height:1}.tempo-unit{color:var(--muted);letter-spacing:.15em;text-transform:uppercase;font-size:.72rem}.transport{grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:10px;margin-top:12px;display:grid}.play{border-radius:14px;height:58px;font-size:.95rem}.beats{flex-wrap:wrap;justify-content:center;gap:6px;margin:14px 0 4px;display:flex}.beat{aspect-ratio:1;border:1px solid var(--line);background:var(--panel-2);width:100%;max-width:54px;color:var(--muted);border-radius:10px;justify-content:center;align-items:center;font-size:.85rem;font-weight:700;transition:background 60ms,color 60ms,border-color 60ms;display:flex}.beat.active{background:var(--accent);border-color:var(--accent);color:#1a1204;transform:scale(1.04)}.beat.muted{opacity:.35}.steps{flex-wrap:nowrap;gap:3px;padding-bottom:4px;display:flex;overflow-x:auto}.step{border:1px solid var(--line);background:var(--bg-2);min-width:20px;height:34px;color:var(--muted);cursor:pointer;border-radius:6px;flex:1 1 0;justify-content:center;align-items:center;padding:0;font-size:.62rem;font-weight:700;display:flex}.step.a1{color:#b9c3d6;background:#232b3b}.step.a2{color:#f0c274;background:#4c3a12;border-color:#6c5217}.step.a3{background:var(--accent);border-color:var(--accent);color:#1a1204}.step.now{outline:2px solid var(--accent-2);outline-offset:1px}.step.beatline{border-left:2px solid #3b465e}.badge{background:var(--panel-2);border:1px solid var(--line);color:var(--muted);border-radius:99px;align-items:center;gap:5px;padding:3px 8px;font-size:.7rem;font-weight:700;display:inline-flex}.badge.on{color:var(--accent);border-color:var(--accent-dim)}.badge.ok{color:var(--ok);border-color:#274a37}.badge.warn{color:var(--warn)}.badge.danger{color:var(--danger)}.layer{border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--bg-2);margin-bottom:8px;padding:10px}.layer.off{opacity:.5}.list{flex-direction:column;gap:8px;display:flex}.item{border:1px solid var(--line-soft);border-radius:var(--radius-sm);background:var(--panel);cursor:pointer;text-align:left;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:11px 12px;display:flex}.item:hover{border-color:var(--line)}.item.sel{border-color:var(--accent);background:#f2a93b12}.item .t{font-size:.88rem;font-weight:650}.item .s{color:var(--muted);font-size:.75rem}.chips{flex-wrap:wrap;gap:6px;display:flex}.chip{border:1px solid var(--line);background:var(--panel-2);color:var(--muted);cursor:pointer;border-radius:99px;padding:5px 10px;font-size:.74rem;font-weight:600}.chip.on{color:var(--accent);border-color:var(--accent-dim);background:#f2a93b1a}.sticking{gap:3px;padding-bottom:4px;display:flex;overflow-x:auto}.stick{text-align:center;min-width:20px;color:var(--muted);border-radius:5px;flex:1 1 0;padding:3px 0;font-size:.72rem;font-weight:800}.stick.R{color:#7fc7ff}.stick.L{color:#f7a0b8}.stick.grace{opacity:.55;font-size:.6rem}.stick.now{background:#3fb8c92e}.lane{grid-template-columns:92px 1fr;align-items:center;gap:8px;margin-bottom:6px;display:grid}.lane-name{color:var(--muted);text-align:right;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;font-weight:700;overflow:hidden}.stats{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;display:grid}.stat{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);padding:9px 10px}.stat .v{font-variant-numeric:tabular-nums;font-size:1.35rem;font-weight:750;line-height:1.1}.stat .k{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-size:.63rem;font-weight:700}canvas{border-radius:var(--radius-sm);width:100%;display:block}table{border-collapse:collapse;width:100%;font-size:.82rem}th,td{text-align:left;border-bottom:1px solid var(--line-soft);padding:7px 8px}th{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.68rem}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}.sep{background:var(--line-soft);height:1px;margin:12px 0}.scroll-x{overflow-x:auto}@media (min-width:720px){.nav{grid-template-columns:repeat(6,minmax(0,108px));justify-content:center}.tempo-value{font-size:5rem}}