:root{--bg: #131316;--panel: #1c1c21;--panel-2: #24242b;--line: #33333d;--text: #e8e8ea;--dim: #8a8a96;--accent: #ff6a3d;--accent-dim: #7a3520;--on: #f2c14e;--radius: 10px;--pad-gap: 8px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;background:var(--panel-2);border:1px solid var(--line);border-radius:6px;cursor:pointer}button:hover{border-color:var(--dim)}button:disabled{opacity:.5;cursor:default}.app{max-width:1100px;margin:0 auto;padding:20px 16px 40px;display:flex;flex-direction:column;gap:18px}.transport{display:flex;align-items:center;gap:18px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}.play{width:56px;height:44px;font-size:18px;background:var(--accent);border-color:transparent;color:#16130f;font-weight:700}.play.is-playing{background:var(--on)}.tempo{display:flex;align-items:center;gap:8px;color:var(--dim)}.tempo input{width:74px;padding:8px 10px;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:6px;font:inherit}.tempo .unit{font-size:12px}.status{margin-left:auto;color:var(--dim);font-size:12px}.status .error{color:#ff6b6b}.share-bar{display:flex;align-items:center;gap:8px;margin-top:-8px}.project-name{flex:1;max-width:260px;padding:8px 10px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:6px;font:inherit}.project-name:focus{outline:none;border-color:var(--accent)}.share-bar .ghost{border:1px solid var(--line);padding:8px 12px}main{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:18px;align-items:start}.pad-section,.grid-section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}.group-tabs{display:flex;gap:8px;margin-bottom:12px;align-items:center}.group-tab{display:flex;flex-direction:column;align-items:stretch;gap:2px}.group-tab>button:first-child{width:44px;padding:8px 0;font-weight:700;letter-spacing:.05em}.group-tab.is-active>button:first-child{background:var(--accent);border-color:transparent;color:#16130f}.group-tab .mute{font-size:10px;padding:2px 0;color:var(--dim)}.group-tab.is-muted .mute{color:var(--accent)}.group-tab.is-muted>button:first-child{opacity:.45}.rec{margin-left:auto;padding:8px 12px;color:var(--dim)}.rec.is-armed{background:var(--accent-dim);color:#ffd9cb;border-color:var(--accent)}.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pad-gap)}.pad{aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:8px;background:var(--panel-2);border-radius:8px;text-align:left;transition:background 60ms,transform 60ms}.pad:active{background:var(--accent);color:#16130f;transform:scale(.97)}.pad.is-selected{border-color:var(--accent)}.pad-label{font-size:11px;line-height:1.2}.pad-key{font-size:10px;color:var(--dim);align-self:flex-end}.step-readout{margin-top:12px;font-size:11px;color:var(--dim)}.grid-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.grid-head h2{font-size:12px;font-weight:600;color:var(--dim);margin:0;letter-spacing:.04em}.ghost{background:none;padding:6px 10px;font-size:11px;color:var(--dim)}.grid{display:flex;flex-direction:column;gap:4px}.grid-row{display:grid;grid-template-columns:62px repeat(var(--steps),1fr);gap:4px;align-items:center}.row-label{font-size:10px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step{height:26px;padding:0;background:var(--panel-2);border:1px solid transparent;border-radius:4px}.step.is-beat{background:#2b2b33}.step.is-on{background:var(--on)}.step.is-head{box-shadow:inset 0 0 0 2px var(--accent)}.column{display:flex;flex-direction:column;gap:18px;min-width:0}.fx-panel,.inspector{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px}.section-label{font-size:11px;color:var(--dim);letter-spacing:.06em;text-transform:uppercase}.fx-head,.inspector-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.fx-types{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}.fx-type{padding:8px 4px;font-size:11px;color:var(--dim)}.fx-type.is-active{background:var(--accent);border-color:transparent;color:#16130f;font-weight:600}.slider{display:grid;grid-template-columns:46px 1fr 38px;align-items:center;gap:10px;margin-top:8px}.slider>span:first-child{font-size:11px;color:var(--dim)}.slider .value{font-size:11px;color:var(--dim);text-align:right;font-variant-numeric:tabular-nums}.slider input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--panel-2);outline:none}.slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer}.slider input[type=range]:disabled{opacity:.4}.slider input[type=range]:disabled::-webkit-slider-thumb{background:var(--dim)}.inspector.is-empty{color:var(--dim)}.hint{font-size:11px;color:var(--dim);margin:10px 0 0;line-height:1.5}.pad-name{width:100%;padding:8px 10px;margin-bottom:10px;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:6px;font:inherit}.pad-name:focus{outline:none;border-color:var(--accent)}.sample-actions{display:flex;gap:8px;margin-bottom:10px}.sample-actions button{flex:1;padding:9px 8px;font-size:12px}.rec-btn{color:var(--dim)}.rec-btn.is-recording{background:var(--accent);border-color:transparent;color:#16130f;font-weight:600;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.72}}.sound-source{font-size:11px;color:var(--dim);margin-bottom:10px}.waveform{width:100%;height:72px;display:block;background:var(--panel-2);border-radius:6px;margin-bottom:6px}.help-open{width:34px;height:34px;border-radius:50%;font-size:14px;color:var(--dim);flex-shrink:0}.help-open:hover{color:var(--text);border-color:var(--accent)}.help-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;background:#08080ad1;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto}.help{width:min(760px,100%);max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}.help-body{overflow-y:auto;min-height:0}.help-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.help-head h2{margin:0;font-size:19px;letter-spacing:-.01em}.help-head .ghost{border:1px solid var(--line);padding:4px 10px}.help-lead{color:var(--dim);line-height:1.6;margin:10px 0 20px;max-width:60ch}.help-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px}.help-step-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}.help-step h3{margin:0;font-size:13px;letter-spacing:.01em}.help-step p{margin:0;font-size:12px;line-height:1.65;color:var(--dim)}.help-step b{color:var(--text);font-weight:600}.help-num{width:20px;height:20px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#16130f;font-size:11px;font-weight:700}kbd{display:inline-block;padding:1px 5px;margin:0 1px;background:var(--panel-2);border:1px solid var(--line);border-radius:4px;font:inherit;font-size:10px;color:var(--text)}.help-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;font-size:12px;line-height:1.6;color:var(--dim)}.help-foot b{color:var(--text)}.help-dim{opacity:.7}.help-start{margin-top:18px;flex-shrink:0;width:100%;padding:12px;background:var(--accent);border-color:transparent;color:#16130f;font-weight:700;font-size:14px}@media(max-width:640px){.help-grid{grid-template-columns:1fr}.help{padding:18px}}.tour-spotlight,.tour-dim{position:fixed;z-index:30;pointer-events:none;box-shadow:0 0 0 9999px #08080ab8;border-radius:12px;border:2px solid var(--accent);transition:top .18s ease,left .18s ease,width .18s ease,height .18s ease}.tour-dim{top:0;right:0;bottom:0;left:0;border:none;border-radius:0;box-shadow:none;background:#08080ab8}.tour-tip{position:fixed;z-index:31;width:320px;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 40px #00000080}.tour-tip.is-centred{top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 32px))}.tour-tip h3{margin:10px 0 6px;font-size:15px}.tour-tip p{margin:0;font-size:12px;line-height:1.6;color:var(--dim)}.tour-progress{display:flex;gap:4px}.tour-dot{width:14px;height:3px;border-radius:2px;background:var(--panel-2)}.tour-dot.is-done{background:var(--accent-dim)}.tour-dot.is-current{background:var(--accent)}.tour-action{margin-top:12px;padding:8px 10px;border-radius:6px;background:var(--panel-2);border:1px dashed var(--line);font-size:11px;color:var(--on)}.tour-action.is-done{color:#16130f;background:var(--on);border-style:solid;border-color:transparent;font-weight:600}.tour-buttons{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px}.tour-nav{display:flex;gap:6px}.tour-skip{background:none;border:none;padding:6px 4px;font-size:11px;color:var(--dim)}.tour-skip:hover{color:var(--text)}.tour-nav .ghost{border:1px solid var(--line);padding:7px 12px;font-size:12px}.tour-next{padding:7px 14px;font-size:12px;font-weight:600;background:var(--accent);border-color:transparent;color:#16130f}.lessons-open{padding:8px 12px;font-size:12px;color:var(--dim);flex-shrink:0}.lessons-open:hover{color:var(--text);border-color:var(--accent)}.lessons{width:min(560px,100%);max-height:calc(100vh - 48px);overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}.lesson-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}.lesson{display:flex;align-items:center;gap:14px;padding:14px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px}.lesson.is-done{border-color:var(--accent-dim)}.lesson-num{width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:var(--panel);border:1px solid var(--line);font-size:12px;color:var(--dim)}.lesson.is-done .lesson-num{background:var(--accent);border-color:transparent;color:#16130f;font-weight:700}.lesson-text{flex:1;min-width:0}.lesson-text h3{margin:0 0 2px;font-size:13px}.lesson-text p{margin:0;font-size:11px;color:var(--dim);line-height:1.5}.lesson-meta{font-size:10px;color:var(--dim);opacity:.75}.lesson .tour-next,.lesson .ghost{flex-shrink:0;padding:8px 14px;font-size:12px}.lesson .ghost{border:1px solid var(--line)}.tour-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.tour-lesson{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent)}.tour-count{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums}.tour-next.is-quiet{background:var(--panel-2);border:1px solid var(--line);color:var(--dim);font-weight:400}.help-actions{display:flex;gap:8px;flex-shrink:0;margin-top:18px}.help-tour{flex:1;padding:12px;font-size:14px;font-weight:700;background:var(--accent);border-color:transparent;color:#16130f}.help-actions .help-start{flex:1;margin-top:0;background:var(--panel-2);border:1px solid var(--line);color:var(--text);font-weight:600}@media(max-width:640px){.tour-tip{width:min(320px,calc(100vw - 24px))}.help-actions{flex-direction:column-reverse}}footer{color:var(--dim);font-size:11px;text-align:center}footer a{color:inherit;text-decoration:underline;text-underline-offset:2px}footer a:hover,footer a:focus-visible{color:var(--text)}@media(max-width:860px){main{grid-template-columns:1fr}.grid-row{grid-template-columns:48px repeat(var(--steps),1fr)}.row-label{font-size:9px}}