:root{color-scheme:dark;--bg:#0c0b16;--panel:#151322;--line:#302a44;--text:#f4efff;--muted:#aca3bf;--accent:#db65ff;--cyan:#54e5e0}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0%,#291330 0,transparent 45%),var(--bg);color:var(--text);font:15px system-ui,-apple-system,sans-serif}.instrument{max-width:860px;margin:auto;padding:24px max(12px,env(safe-area-inset-right)) max(32px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}button,input,select{font:inherit}button,select{border:1px solid var(--line);border-radius:10px;color:var(--text);background:#211c31;min-height:44px;padding:10px 12px}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}button[aria-pressed=true]{background:#432855;border-color:var(--accent);color:#fff}h1{font-size:clamp(23px,5vw,36px);letter-spacing:-1px;margin:0}h1 span{font-weight:400}h2{font-size:18px;margin:0}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted);margin:0 0 8px}.heading,.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.heading{margin:8px 0 24px}.badge{border:1px solid #5d356c;border-radius:6px;padding:6px;font-size:10px;letter-spacing:2px;color:var(--accent)}.panel{background:linear-gradient(140deg,#1a1628,var(--panel));border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:14px}.transport{display:flex;align-items:center;gap:18px}.primary{background:linear-gradient(110deg,#ae3dca,#6940b4);border:1px solid #ee8fff;min-width:108px;font-weight:700;box-shadow:0 0 24px #ce4eef20}.tempo{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1px;color:var(--muted)}input[type=number]{width:66px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:#0e0c18;color:var(--text);text-align:center;font-size:18px}.beat-display{margin-left:auto;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--cyan)}.beat-display span{font-size:26px}.beat-display small{color:var(--muted);font-size:11px}.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;border:1px solid var(--line);border-radius:14px;background:#100d1a;margin:0 0 14px}.mode-switch button{border-color:transparent;background:transparent}.mode-switch button[aria-pressed=true]{border-color:#87509d;background:#38213f}.page-controls{display:flex;justify-content:space-between;align-items:center;margin:18px 0 12px}.pages{display:flex;gap:6px}.pages button{min-width:65px}.follow{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;min-height:44px}.follow input{width:20px;height:20px;accent-color:var(--accent)}#matrix{display:grid;grid-template-columns:44px repeat(8,minmax(0,1fr));gap:4px}.row-label{padding:0;border:0;background:transparent;font-size:11px;color:var(--muted);min-height:44px}.step-label{font-size:10px;text-align:center;color:#8c809f;padding:3px 0 8px;font-variant-numeric:tabular-nums}.pad{min-width:0;min-height:44px;padding:0;border-radius:6px;border:1px solid #39304d;background:#211b30}.pad.beat{background:#292137}.pad.on{background:linear-gradient(150deg,#f57ce1,#9f46d6);border-color:#f09dff;box-shadow:0 0 12px #cf4dff30}.drums .pad.on{background:linear-gradient(150deg,#74ebe0,#238b9b);border-color:#a5fff7}.pad.playhead{outline:2px solid #fff;outline-offset:-2px;background-color:#4c3f61}.step-label.current{color:#fff}.hint{font-size:12px;line-height:1.6;color:var(--muted);margin:12px 0}.pattern-tools{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.pattern-tools button{padding:8px 4px;font-size:12px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.controls label{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;min-width:0}.controls select{width:100%;font-size:16px}.controls output{font-size:11px;color:var(--text)}input[type=range]{width:100%;min-height:44px;accent-color:var(--accent);margin:0;cursor:pointer}.small{font-size:9px;letter-spacing:1px;color:var(--muted);text-align:right;max-width:130px}footer{text-align:center;color:var(--muted);font-size:12px;line-height:1.6}.file-tools{display:flex;justify-content:center;gap:8px}.section-head>button{font-size:12px;flex-shrink:0}[hidden]{display:none!important}@media(min-width:700px){.instrument{padding-top:40px}#matrix{gap:7px;grid-template-columns:56px repeat(8,minmax(0,1fr))}.pad{min-height:48px}.controls{grid-template-columns:repeat(4,1fr)}.panel{padding:22px}}@media(max-width:360px){.transport{gap:8px}.primary{min-width:90px}.panel{padding:10px}#matrix{gap:3px;grid-template-columns:36px repeat(8,minmax(0,1fr))}.badge{display:none}}