:root{--lit-edge: rgba(255, 255, 255, .26);--lit-face: rgba(255, 255, 255, .07);--lit-hint: rgba(255, 255, 255, .035);--metal-top: #4b525d;--metal-mid: #2f353d;--metal-bot: #191d23;--cap-top: #464d58;--cap-bot: #2b313a;--well-top: #030405;--well-bot: #070a0d;--engraved: #99a3b1;--engraved-lip: rgba(255, 255, 255, .09);--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E")}.chassis{position:relative;isolation:isolate;border-radius:20px;background-image:radial-gradient(70% 110% at 20% -20%,rgba(255,255,255,.13) 0%,rgba(255,255,255,.035) 30%,transparent 58%),repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px),linear-gradient(180deg,var(--metal-top) 0%,var(--metal-mid) 52%,var(--metal-bot) 100%);box-shadow:inset 0 1px 0 var(--lit-edge),inset 0 -1px #ffffff0b,0 1px 2px #000000b3,0 22px 48px -14px #000000e6,0 48px 96px -36px #000}.chassis:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;border-radius:inherit;background-image:var(--grain);opacity:.042;mix-blend-mode:overlay;pointer-events:none}.chassis:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:inherit;padding:1px;background:linear-gradient(152deg,#ffffff73,#ffffff12 24%,#00000052 60%,#0000009e);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}.chassis>*{position:relative;z-index:1}.well{position:relative;background:linear-gradient(180deg,var(--well-top) 0%,var(--well-bot) 100%);border-radius:12px;box-shadow:inset 0 5px 12px #000000f2,inset 0 2px 4px #000,inset 0 -1px #ffffff0e,inset 0 0 0 1px #000000d9,0 -1px #0000008c,0 1px #ffffff17,0 2px 3px -1px #0006}.well--glass:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;background:linear-gradient(158deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.012) 30%,transparent 55%),radial-gradient(115% 85% at 50% 42%,transparent 45%,rgba(0,0,0,.45) 100%);pointer-events:none}.key{position:relative;border:0;border-radius:10px;background:linear-gradient(180deg,var(--cap-top) 0%,var(--cap-bot) 100%);color:#dfe3e9;box-shadow:inset 0 1px #fff3,inset 0 -1px #00000080,0 0 0 1px #0000009e,0 1px 1px #00000080,0 3px 8px -1px #0000008c;transition:box-shadow 90ms ease,transform 90ms ease,background .14s ease}.key:hover:not(:disabled){background:linear-gradient(180deg,#454c56,#2c323b)}.key:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 5px #000000a6,inset 0 -1px #ffffff0a,0 0 0 1px #000000a6}.key:disabled{opacity:.32;box-shadow:inset 0 1px #ffffff0d,0 0 0 1px #00000080}.led{--led: #6b7280;position:relative;border-radius:50%;background:radial-gradient(circle at 37% 29%,rgba(255,255,255,.16) 0%,transparent 38%),radial-gradient(circle at 50% 56%,color-mix(in srgb,var(--led) 20%,#090c10),#04060a 88%);box-shadow:inset 0 0 0 1px #000000b3,inset 0 1px 1px #ffffff12,0 0 0 1px #ffffff09;transition:background 90ms ease,box-shadow 90ms ease,transform 90ms ease}.led.is-lit{transform:scale(1.07);background:radial-gradient(circle at 38% 27%,#fff 0%,color-mix(in srgb,var(--led) 78%,#fff) 20%,transparent 44%),radial-gradient(circle at 50% 55%,var(--led) 0%,color-mix(in srgb,var(--led) 62%,#000) 80%);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--led) 60%,#fff),inset 0 1px 2px #ffffff80,0 0 0 1px color-mix(in srgb,var(--led) 45%,transparent),0 0 6px var(--led),0 0 16px color-mix(in srgb,var(--led) 80%,transparent),0 0 38px color-mix(in srgb,var(--led) 50%,transparent),0 0 70px color-mix(in srgb,var(--led) 25%,transparent)}@media (prefers-reduced-motion: reduce){.led,.key{transition:none}.led.is-lit{transform:none}}.app{max-width:860px;margin:0 auto;padding:40px 20px 96px;display:flex;flex-direction:column;gap:26px}.device{padding:18px;display:flex;flex-direction:column;gap:16px}.device-plate{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:2px 6px 0}.brand{margin:0;font-size:15px;font-weight:620;letter-spacing:.16em;text-transform:uppercase;color:var(--engraved);text-shadow:0 1px 0 var(--engraved-lip);display:flex;align-items:baseline;gap:10px}.brand-sub{font-size:9.5px;font-weight:500;letter-spacing:.2em;color:#7c8593;text-shadow:0 1px 0 rgba(255,255,255,.07)}.run{display:flex;align-items:center;gap:7px}.run-led{--led: #46e08a;width:7px;height:7px;flex:none}.run-label{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#5a626d;text-shadow:0 1px 0 rgba(255,255,255,.05)}.viz{padding:28px 22px 16px;display:flex;flex-direction:column;align-items:center;gap:18px;min-height:124px;justify-content:center}.viz-bar{display:flex;align-items:flex-end;gap:30px}.viz-group{display:flex;align-items:center;gap:12px;padding-bottom:13px;border-bottom:1px solid rgba(255,255,255,.14);box-shadow:0 1px #000c}.viz-pulse{display:flex;align-items:center;gap:8px}.led--downbeat{--led: #ff8a3d;width:23px;height:23px}.led--beat{--led: #ffcf45;width:17px;height:17px}.led--pulse{--led: #5fb0ff;width:13px;height:13px}.led--sub{--led: #64707e;width:6px;height:6px}.viz-position{margin:0;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:11px;letter-spacing:.09em;color:#6f7d8c;text-shadow:0 0 14px rgba(95,176,255,.16)}.viz-bar.is-live+.viz-position{color:#9fb3c6}.transport{display:flex;align-items:center;gap:14px;padding:14px;border-radius:13px;background:linear-gradient(180deg,#0000005c,#00000029);box-shadow:inset 0 2px 5px #0009,inset 0 0 0 1px #00000073,inset 0 -1px #ffffff0d,0 1px #ffffff13}.play-button{min-width:104px;padding:13px 20px;font-size:12px;font-weight:660;letter-spacing:.13em;text-transform:uppercase}.play-button.is-playing{background:linear-gradient(180deg,#ff9a4a,#e8701d);color:#24140a;text-shadow:0 1px 0 rgba(255,255,255,.28);box-shadow:inset 0 1px #ffffff6b,inset 0 -1px #0000004d,0 0 0 1px #0000008c,0 1px 1px #00000080,0 3px 7px -1px #00000080,0 0 18px #ff8a3d6b,0 0 44px #ff8a3d33}.play-button.is-playing:hover{background:linear-gradient(180deg,#ffa85e,#ef7a25)}.tempo{flex:1;display:flex;align-items:center;gap:12px;min-width:0}.bpm-input{width:78px;padding:9px 10px;border:0;border-radius:8px;background:linear-gradient(180deg,#06080a,#0b0f13);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:19px;font-weight:600;letter-spacing:.03em;text-align:center;color:#ffb060;text-shadow:0 0 10px rgba(255,154,74,.5),0 0 26px rgba(255,154,74,.2);box-shadow:inset 0 2px 6px #000000e6,inset 0 0 0 1px #000000b3,0 1px 0 var(--lit-face)}.bpm-input:focus{outline:none;box-shadow:inset 0 2px 6px #000000e6,inset 0 0 0 1px #5fb0ff80,0 1px 0 var(--lit-face),0 0 0 3px #5fb0ff29}.bpm-slider{flex:1;min-width:0;height:22px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer}.bpm-slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(180deg,#05070a,#0d1116);box-shadow:inset 0 2px 4px #000000e6,inset 0 0 0 1px #000000b3,0 1px 0 var(--lit-face)}.bpm-slider::-moz-range-track{height:6px;border-radius:3px;background:#07090c;box-shadow:inset 0 2px 4px #000000e6}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:17px;height:17px;margin-top:-5.5px;border-radius:5px;background:linear-gradient(180deg,#4a515b,#2b3039);box-shadow:inset 0 1px #ffffff52,inset 0 -1px #00000080,0 0 0 1px #000000a6,0 2px 4px #0009}.bpm-slider::-moz-range-thumb{width:17px;height:17px;border:0;border-radius:5px;background:linear-gradient(180deg,#4a515b,#2b3039);box-shadow:inset 0 1px #ffffff52,0 2px 4px #0009}.bpm-slider:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 1px #ffffff52,0 0 0 1px #000000a6,0 0 0 3px #5fb0ff4d}.tap{padding:12px 16px;font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#aeb6c1}.chain-head{display:flex;align-items:center;justify-content:space-between;padding:0 4px}.chain-head h2{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#7d8694}.add-button{padding:9px 15px;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:#b9c1cc}.chain-empty{padding:26px;text-align:center;color:var(--text-faint);font-size:13px}.chain-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.section-card{padding:15px 16px 16px;border-radius:14px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.01) 0 1px,transparent 1px 3px),linear-gradient(180deg,#2b3138,#1c2026);box-shadow:inset 0 1px #ffffff21,inset 0 0 0 1px #ffffff06,0 1px 2px #0009,0 12px 26px -12px #000c}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.section-title{display:flex;align-items:baseline;gap:10px;font-size:17px;font-weight:640;color:#e2e6ec;font-family:ui-monospace,SF Mono,Menlo,monospace}.section-index{font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:9px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:#78818e}.section-actions{display:flex;gap:6px}.icon-button{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;color:#98a1ad;border-radius:7px}.icon-button--danger:hover:not(:disabled){background:linear-gradient(180deg,#4a2a2c,#33201f);color:#ff8d84}.section-body{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}.meter-picker{display:flex;gap:10px}.field{display:flex;flex-direction:column;gap:6px;min-width:0}.field-label{font-size:8.5px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;color:#7a8391;text-shadow:0 1px 0 rgba(255,255,255,.06)}.num-input,.den-select,.grouping-input{padding:8px 10px;border:0;border-radius:7px;background:linear-gradient(180deg,#07090c,#0c1015);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px;color:#cdd5df;box-shadow:inset 0 2px 5px #000000d9,inset 0 0 0 1px #000000a6,0 1px 0 var(--lit-face)}.num-input{width:56px;text-align:center}.den-select{width:66px;cursor:pointer}.grouping-input{width:138px;letter-spacing:.06em}.num-input:focus,.den-select:focus,.grouping-input:focus{outline:none;box-shadow:inset 0 2px 5px #000000d9,inset 0 0 0 1px #5fb0ff80,0 1px 0 var(--lit-face),0 0 0 3px #5fb0ff26}.grouping-input.is-invalid{color:#ff9b92;box-shadow:inset 0 2px 5px #000000d9,inset 0 0 0 1px #ff5f568c,0 1px 0 var(--lit-face)}.grouping-hint{font-size:10.5px;color:#ff9b92}.segmented{display:flex;border-radius:8px;padding:2px;background:linear-gradient(180deg,#07090c,#0c1015);box-shadow:inset 0 2px 5px #000000d9,inset 0 0 0 1px #000000a6,0 1px 0 var(--lit-face)}.segment{width:32px;padding:6px 0;border:0;border-radius:6px;background:transparent;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px;color:#79828f;transition:color .12s ease,background .12s ease}.segment:hover:not(.is-on){color:#b6bec9}.segment.is-on{color:#f0f4f8;background:linear-gradient(180deg,#3d434c,#2a2f37);box-shadow:inset 0 1px #ffffff2e,0 0 0 1px #00000080,0 1px 3px #00000080}.presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.preset{padding:5px 9px;border:0;border-radius:6px;background:linear-gradient(180deg,#2b3038,#212630);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:10.5px;color:#8f98a5;box-shadow:inset 0 1px #ffffff17,0 0 0 1px #00000080;transition:color .12s ease,background .12s ease}.preset:hover{color:#d6dce4;background:linear-gradient(180deg,#343a44,#272d36)}.preset.is-on{color:#ffd98a;background:linear-gradient(180deg,#3a2f1c,#2a2214);box-shadow:inset 0 1px #ffffff1a,0 0 0 1px #ffbe5a59,0 0 12px #ffb44624}:root{--bg: #0a0b0d;--surface: #171a21;--surface-raised: #1f232c;--border: #2b303b;--text: #e8eaed;--text-dim: #9aa0ac;--text-faint: #626875;--accent-downbeat: #ff8a3d;--accent-beat: #ffd23d;--accent-pulse: #6ea8ff;--accent-subdivision: #4a5262;--focus: #6ea8ff;--danger: #ff5f56;--radius: 8px;--gap: 12px}*{box-sizing:border-box}html,body{margin:0;padding:0;background:radial-gradient(120% 80% at 50% -10%,#14171c 0%,transparent 60%),var(--bg);background-attachment:fixed;color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}button{font:inherit;color:inherit;cursor:pointer}input,select{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}