:root {
  --canvas: #edf1f7;
  --paper: #ffffff;
  --ink: #121522;
  --muted: #72798b;
  --line: #dce1eb;
  --line-strong: #c7cedc;
  --blue: #3f4cff;
  --blue-dark: #2732d9;
  --orange: #ff6542;
  --mint: #baf7d0;
  --violet: #7d67df;
  --shadow: 0 18px 60px rgba(37, 46, 86, .09);
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: "Inter", system-ui, sans-serif; min-width: 320px; }
button, select, input { font: inherit; touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid rgba(63,76,255,.24); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 92px 1fr; }
.tool-rail { position: sticky; top: 0; height: 100vh; background: #151827; color: #fff; display: flex; flex-direction: column; align-items: stretch; border-right: 1px solid #282c40; z-index: 5; }
.app-mark { height: 86px; color: #fff; text-decoration: none; display: grid; place-content: center; text-align: center; border-bottom: 1px solid #2b2f42; }
.app-mark img { width: 42px; height: 42px; display: block; }
.mode-tabs { display: flex; flex-direction: column; }
.mode-tab { min-height: 82px; border: 0; border-bottom: 1px solid #2b2f42; background: transparent; color: #858b9e; display: grid; place-content: center; gap: 6px; font-size: 11px; transition: .18s ease; position: relative; }
.mode-tab::before { content: ""; position: absolute; inset: 16px auto 16px 0; width: 3px; background: transparent; border-radius: 0 4px 4px 0; }
.mode-tab:hover { color: #fff; background: #1c2031; }
.mode-tab.active { color: #fff; background: #21263b; }
.mode-tab.active::before { background: var(--orange); }
.tab-icon { font-size: 22px; line-height: 1; color: #c7ccda; }
.mode-tab.active .tab-icon { color: var(--mint); }
.audio-status { margin-top: auto; min-height: 70px; border: 0; border-top: 1px solid #2b2f42; background: transparent; color: #a5abbd; font-size: 10px; display: grid; place-content: center; gap: 7px; }
.status-dot { width: 7px; height: 7px; margin: auto; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(186,247,208,.12); }

.workbench { min-width: 0; padding: 0 28px 32px; }
.app-view[hidden] { display: none; }
.utility-row { height: 76px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-strong); margin-bottom: 22px; }
.utility-row > div { display: flex; align-items: baseline; gap: 12px; }
.context-label, .reference-pitch span, .micro-label, .section-label, .control-block label, .panel-title span, .metro-grid label, .slider-control > span, .shortcut-note { font: 500 10px/1.2 "DM Mono", monospace; letter-spacing: .1em; color: var(--muted); }
.utility-row strong { font-size: 14px; }
.reference-pitch strong { font: 500 13px/1 "DM Mono", monospace; }
.reference-pitch span { color: var(--blue); }

.dashboard-grid { display: grid; grid-template-columns: minmax(620px, 1fr) minmax(300px, 370px); gap: 18px; align-items: start; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.theory-panel { min-width: 0; }
.control-deck { display: grid; grid-template-columns: minmax(340px, 1.5fr) minmax(190px, .75fr) minmax(120px, .45fr); gap: 18px; align-items: end; padding: 20px 22px; border-bottom: 1px solid var(--line); background: #f9faff; }
.control-block > label, .label-row label { display: block; margin-bottom: 10px; }
.note-grid { display: grid; grid-template-columns: repeat(12, minmax(28px,1fr)); border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.note-button { min-width: 0; height: 38px; border: 0; border-right: 1px solid var(--line); background: #fff; font: 500 11px/1 "DM Mono", monospace; transition: .12s ease; }
.note-button:last-child { border-right: 0; }
.note-button:hover { background: #eef0ff; color: var(--blue); }
.note-button.active { background: var(--blue); color: #fff; }
.select-wrap { position: relative; }
.select-wrap::after { content: "⌄"; position: absolute; right: 12px; top: 50%; transform: translateY(-55%); color: var(--blue); pointer-events: none; }
.select-wrap select, .metro-grid select { width: 100%; height: 40px; appearance: none; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; padding: 0 34px 0 12px; color: var(--ink); font-size: 13px; outline: none; }
.select-wrap select:focus, .metro-grid select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(63,76,255,.1); }
.label-row { display: flex; align-items: center; justify-content: space-between; }
.label-row output { font: 500 12px/1 "DM Mono", monospace; color: var(--blue); }
input[type="range"] { width: 100%; accent-color: var(--blue); }

.visual-stage { min-height: 500px; padding: 24px 26px 18px; background: radial-gradient(circle at 50% 46%, #f8f9ff 0, #fff 58%); position: relative; }
.visual-stage::before { content: ""; position: absolute; inset: 14px; border: 1px dashed #e4e7f0; border-radius: 12px; pointer-events: none; }
.stage-head { position: relative; z-index: 1; display: flex; align-items: start; justify-content: space-between; }
.stage-head h1 { margin: 7px 0 0; font-size: clamp(28px, 3.2vw, 48px); letter-spacing: -.045em; font-weight: 600; }
.formula-pill { background: #eef0ff; color: var(--blue-dark); border: 1px solid #d8dcff; border-radius: 9px; padding: 10px 13px; font: 500 13px/1 "DM Mono", monospace; }
.orbit-wrap { width: min(370px, 60vw); aspect-ratio: 1; margin: -10px auto -4px; position: relative; }
#orbitSvg { width: 100%; height: 100%; overflow: visible; }
.orbit-ring { fill: #fbfcff; stroke: #dfe3ec; stroke-width: 1; }
.orbit-guide { stroke: #e7eaf1; stroke-width: 1; }
.orbit-path { fill: rgba(63,76,255,.055); stroke: var(--blue); stroke-width: 2.4; stroke-dasharray: 5 7; filter: drop-shadow(0 2px 4px rgba(63,76,255,.15)); }
.orbit-node { fill: #fff; stroke: #cfd5e1; stroke-width: 1.5; cursor: pointer; transition: .15s ease; }
.orbit-node.selected { fill: var(--blue); stroke: var(--blue); filter: drop-shadow(0 4px 7px rgba(63,76,255,.28)); }
.orbit-label { fill: #697085; font: 500 13px/1 "DM Mono", monospace; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.orbit-label.selected { fill: #fff; }
.orbit-center { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; }
.orbit-center span { display: block; font: 600 clamp(27px,3vw,39px)/1 "DM Mono", monospace; letter-spacing: -.06em; }
.orbit-center small { display: block; margin-top: 7px; color: var(--muted); font: 500 9px/1 "DM Mono", monospace; letter-spacing: .13em; }
.play-dock { position: relative; z-index: 1; display: flex; justify-content: center; gap: 7px; }
.play-primary, .play-secondary { border: 0; height: 44px; border-radius: 9px; font-size: 13px; font-weight: 600; }
.play-primary { min-width: 160px; background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 8px 20px rgba(63,76,255,.22); }
.play-primary:hover { background: var(--blue-dark); transform: translateY(-1px); }
.play-primary.playing { animation: playflash .45s ease; }
@keyframes playflash { 50% { box-shadow: 0 0 0 8px rgba(63,76,255,.1); } }
.play-icon { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; }
.play-secondary { min-width: 70px; border: 1px solid var(--line); background: #fff; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px; }
.play-secondary:hover { color: var(--blue); border-color: #bcc2ff; }

.math-strip { display: grid; grid-template-columns: .7fr .7fr 1.6fr; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.math-strip div { padding: 16px 20px; border-right: 1px solid var(--line); }
.math-strip div:last-child { border-right: 0; }
.math-strip span { display: block; margin-bottom: 6px; color: var(--muted); font: 500 9px/1 "DM Mono", monospace; letter-spacing: .1em; }
.math-strip strong { font: 500 13px/1.3 "DM Mono", monospace; white-space: nowrap; }
.math-strip div:first-child strong { color: var(--orange); }

.keyboard-section { padding: 18px 22px 22px; }
.section-label { display: flex; justify-content: space-between; margin-bottom: 11px; }
.section-label span:last-child { letter-spacing: 0; text-transform: none; }
.keyboard { height: 132px; position: relative; display: flex; user-select: none; overflow: hidden; border-radius: 8px; border: 1px solid var(--line-strong); }
.white-key { flex: 1; height: 100%; background: #fff; border: 0; border-right: 1px solid var(--line-strong); color: #596075; position: relative; display: flex; justify-content: center; align-items: end; padding-bottom: 9px; font: 500 9px/1 "DM Mono", monospace; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.white-key:last-of-type { border-right: 0; }
.black-key { position: absolute; top: 0; width: 6.2%; height: 61%; background: #202435; border: 0; z-index: 2; cursor: pointer; color: #d6d9e2; display: flex; justify-content: center; align-items: end; padding-bottom: 6px; font: 500 8px/1 "DM Mono", monospace; border-radius: 0 0 5px 5px; touch-action: none; -webkit-tap-highlight-color: transparent; }
.white-key.active { background: var(--mint); color: #183d29; box-shadow: inset 0 -5px 0 rgba(23,89,49,.14); }
.black-key.active { background: var(--orange); color: #fff; box-shadow: 0 4px 14px rgba(255,101,66,.3); }
.key-playing { filter: brightness(.92); transform: translateY(2px); }

.side-stack { display: grid; gap: 18px; }
.metronome-panel { padding: 20px; }
.panel-title { display: flex; align-items: start; justify-content: space-between; }
.panel-title > div { display: grid; gap: 6px; }
.panel-title strong { font-size: 19px; }
.metro-state { background: #f0f2f7; padding: 6px 8px; border-radius: 6px; color: var(--muted) !important; letter-spacing: 0 !important; }
.metro-state.running { color: #1d6b3c !important; background: #e0f9e9; }
.tempo-display { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; margin: 23px 0 8px; }
.tempo-display button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--blue); font-size: 21px; }
.tempo-display button:hover { background: #eef0ff; }
.tempo-display > div { text-align: center; }
.tempo-display output { display: block; font: 600 64px/.9 "DM Mono", monospace; letter-spacing: -.08em; }
.tempo-display span { display: block; margin-top: 9px; color: var(--muted); font: 500 9px/1 "DM Mono", monospace; letter-spacing: .18em; }
.tempo-range { margin: 5px 0 16px; }
.beat-dots { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 20px; margin-bottom: 20px; }
.beat-dot { width: 9px; height: 9px; border-radius: 50%; background: #dde1eb; transition: .08s ease; }
.beat-dot:first-child { width: 12px; height: 12px; border: 2px solid var(--orange); background: transparent; }
.beat-dot.active { background: var(--blue); transform: scale(1.35); box-shadow: 0 0 0 4px rgba(63,76,255,.1); }
.beat-dot:first-child.active { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,101,66,.12); }
.beat-dot.group-start { width: 12px; height: 12px; box-shadow: inset 0 0 0 2px #9199ad; }
.beat-dot.group-start:first-child { box-shadow: none; }
.beat-dot.group-start.active { background: var(--violet); box-shadow: 0 0 0 4px rgba(125,103,223,.12); }
.meter-preset-row { display: grid; grid-template-columns: 1.4fr .8fr; gap: 8px; margin: 0 0 10px; }
.meter-preset-row label, .sound-control { display: grid; gap: 8px; font: 500 10px/1.2 "DM Mono", monospace; letter-spacing: .1em; color: var(--muted); }
.meter-preset-row select, .meter-preset-row input, .sound-control select { width: 100%; height: 39px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; padding: 0 10px; color: var(--ink); font: 500 12px/1 "DM Mono", monospace; outline: none; }
.meter-preset-row input.invalid { border-color: var(--orange); background: #fff3ef; }
.metro-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metro-grid label { display: grid; gap: 8px; }
.metro-grid select { height: 38px; padding: 0 24px 0 8px; font: 500 11px/1 "DM Mono", monospace; }
.sound-control { margin-top: 15px; }
.sound-control select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%); background-position: calc(100% - 15px) 16px,calc(100% - 10px) 16px; background-size: 5px 5px; background-repeat: no-repeat; }
.slider-control { display: grid; gap: 8px; margin-top: 15px; }
.slider-control > span { display: flex; justify-content: space-between; }
.metro-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; margin-top: 18px; }
.metro-actions button { height: 45px; border-radius: 9px; font-weight: 600; font-size: 12px; }
.metro-start { border: 0; background: var(--orange); color: #fff; display: flex; align-items: center; justify-content: center; gap: 9px; box-shadow: 0 8px 20px rgba(255,101,66,.18); }
.metro-start.running { background: #252a3b; }
#tapTempo { border: 1px solid var(--line-strong); background: #fff; }
#tapTempo:active { background: var(--mint); }
.shortcut-note { text-align: center; margin: 13px 0 0; letter-spacing: 0; text-transform: none; font-size: 9px; }

.insight-panel { padding: 22px; background: #171b2c; color: #fff; border-color: #171b2c; }
.insight-panel .micro-label { color: var(--mint); }
.insight-panel h2 { margin: 16px 0 12px; font-size: clamp(20px,2vw,26px); line-height: 1.17; letter-spacing: -.035em; }
.insight-panel p { margin: 0; color: #b9bfce; font-size: 14px; line-height: 1.55; }
.listening-examples { margin-top: 20px; padding-top: 17px; border-top: 1px solid #34394d; }
.examples-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.examples-head span { color: var(--mint); font: 600 9px/1 "DM Mono", monospace; letter-spacing: .13em; }
.examples-head small { color: #777f95; font: 500 9px/1 "DM Mono", monospace; }
.example-list { display: grid; gap: 7px; }
.example-item { display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 10px; align-items: start; padding: 10px; border: 1px solid #34394d; border-radius: 9px; background: #1d2235; }
.example-index { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #292f45; color: var(--mint); font: 500 9px/1 "DM Mono", monospace; }
.example-item div { display: grid; min-width: 0; }
.example-item strong { overflow: hidden; color: #fff; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.example-item div > span { margin-top: 2px; color: #bdc4d5; font-size: 11px; line-height: 1.3; }
.example-item small { margin-top: 6px; color: #8991a6; font: 500 9px/1.35 "DM Mono", monospace; }
.insight-panel .example-note { margin-top: 10px; color: #777f95; font-size: 10px; line-height: 1.45; }
.equation { margin-top: 22px; border-top: 1px solid #34394d; padding-top: 18px; color: #fff; font: 500 20px/1.2 "DM Mono", monospace; }

.sequencer-panel { margin-top: 18px; padding: 22px; }
.sequence-title-row { display: flex; justify-content: space-between; align-items: start; }
.sequence-title-row h2 { margin: 6px 0 0; font-size: 21px; letter-spacing: -.025em; }
.loop-state { padding: 6px 9px; border-radius: 6px; background: #f0f2f7; color: var(--muted); font: 500 10px/1 "DM Mono", monospace; }
.loop-state.running { background: #e0f9e9; color: #1d6b3c; }
.sequence-controls { display: grid; grid-template-columns: .72fr 1fr 1.12fr .82fr .72fr .62fr; gap: 9px; margin: 20px 0 12px; }
.sequence-controls label { display: grid; gap: 7px; color: var(--muted); font: 500 9px/1.2 "DM Mono", monospace; letter-spacing: .1em; }
.sequence-controls select { height: 40px; min-width: 0; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; padding: 0 9px; color: var(--ink); font-size: 12px; outline: none; }
.creative-toolbar { display: grid; grid-template-columns: auto minmax(180px,.8fr) auto minmax(270px,1fr); gap: 10px; align-items: end; padding: 13px; border: 1px solid #272e42; border-radius: 12px; background: #111625; }
.pattern-bank,.session-actions,.midi-actions,.scene-builder { display: flex; align-items: end; gap: 5px; }
.pattern-bank > span,.creative-toolbar label { color: #737c91; font: 500 9px/1.2 "DM Mono",monospace; letter-spacing: .09em; }
.pattern-button,.creative-toolbar button,.chord-layer button,.automation-editor button,.note-inspector button { height: 34px; border: 1px solid #30384e; border-radius: 7px; background: #171d2e; color: #cbd0dd; padding: 0 10px; font-size: 10px; }
.pattern-button { width: 32px; padding: 0; }
.pattern-button.active { border-color: var(--mint); background: #20352e; color: var(--mint); box-shadow: inset 0 0 0 1px rgba(186,247,208,.15); }
.scene-builder label,.midi-actions label { display: grid; gap: 5px; flex: 1; }
.scene-builder input,.midi-actions select,.chord-compose input,.automation-head select,.note-inspector select { height: 34px; min-width: 0; border: 1px solid #30384e; border-radius: 7px; background: #171d2e; color: #eef0f5; padding: 0 9px; font: 500 11px/1 "DM Mono",monospace; outline: none; }
.scene-builder input { width: 100%; }
.scene-builder button.active,#midiRecord.active,#chordSoundToggle.active { border-color: #4d6a5a; color: var(--mint); background: #182a25; }
.session-actions { justify-content: flex-end; }
.midi-actions { justify-content: flex-end; }
.midi-actions button:first-child.connected { color: var(--mint); border-color: #4d6a5a; }
.chord-layer { margin-top: 10px; padding: 15px; border: 1px solid #272e42; border-radius: 12px; background: linear-gradient(135deg,#12182a,#101522); }
.layer-heading,.automation-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.layer-heading > div,.automation-head > div { display: grid; gap: 5px; }
.layer-heading span,.automation-head span,.inspector-heading span { color: #737c91; font: 500 9px/1 "DM Mono",monospace; letter-spacing: .1em; }
.layer-heading strong,.automation-head strong { color: #f0f2f7; font-size: 14px; }
.chord-compose { display: grid; grid-template-columns: minmax(200px,1fr) auto auto; gap: 7px; margin-top: 12px; }
.chord-compose label { display: grid; gap: 6px; color: #737c91; font: 500 9px/1 "DM Mono",monospace; letter-spacing: .1em; }
.chord-suggestions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.chord-suggestions button { height: 27px; border-style: dashed; color: #9fa8bc; font-family: "DM Mono",monospace; }
.chord-lane { display: grid; grid-template-columns: repeat(var(--chord-count,4),1fr); gap: 5px; margin-top: 11px; }
.chord-card { min-width: 0; display: grid; gap: 4px; padding: 10px; border: 1px solid #30384e; border-radius: 8px; background: #171d2e; }
.chord-card strong { color: #fff; font: 600 14px/1 "DM Mono",monospace; }
.chord-card span { overflow: hidden; color: var(--mint); font: 500 10px/1.2 "DM Mono",monospace; text-overflow: ellipsis; white-space: nowrap; }
.tension-legend { display: flex; justify-content: flex-end; gap: 14px; margin-top: 9px; color: #737c91; font: 500 9px/1 "DM Mono",monospace; }
.tension-legend span { display: flex; align-items: center; gap: 5px; }
.tension-legend i { width: 8px; height: 8px; border-radius: 3px; background: var(--orange); }
.tension-legend span:last-child i { background: var(--violet); }
.note-inspector { display: grid; grid-template-columns: 1.05fr repeat(4,minmax(115px,1fr)) auto; gap: 10px; align-items: end; margin-top: 10px; padding: 12px 13px; border: 1px solid #3b3557; border-radius: 12px; background: #18182a; }
.inspector-heading { display: grid; gap: 7px; align-self: center; }
.inspector-heading strong { color: #fff; font: 600 12px/1 "DM Mono",monospace; }
.note-inspector label { display: grid; grid-template-columns: 1fr auto; gap: 6px; color: #858da2; font: 500 8px/1 "DM Mono",monospace; letter-spacing: .07em; }
.note-inspector label input,.note-inspector label select { grid-column: 1/-1; width: 100%; }
.note-inspector output { color: var(--mint); }
.note-inspector #deleteNote { border-color: #623f48; color: #ff947c; }
.sequence-transport { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 10px 0 16px; border-bottom: 1px solid var(--line); }
.sequence-transport button { height: 38px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; padding: 0 14px; font-size: 11px; font-weight: 600; }
.sequence-transport button:hover { border-color: var(--blue); color: var(--blue); }
.sequence-transport .loop-start { border: 0; background: var(--blue); color: #fff; display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 16px rgba(63,76,255,.18); }
.sequence-transport .loop-start.running { background: #252a3b; }
.tempo-sync { display: flex; align-items: center; gap: 7px; margin-left: 6px; color: var(--muted); font: 500 10px/1 "DM Mono", monospace; }
.tempo-sync i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(70,190,111,.1); }
.export-group { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.export-group > span { margin-right: 4px; color: var(--muted); font: 500 9px/1 "DM Mono", monospace; letter-spacing: .1em; }
.sequence-viewport { overflow-x: auto; overscroll-behavior-inline: contain; padding-top: 14px; }
.sequence-head, .sequence-row { display: grid; grid-template-columns: 78px minmax(650px,1fr); align-items: stretch; min-width: 750px; }
.sequence-head > span, .sequence-row > span { display: flex; align-items: center; padding-left: 8px; color: var(--muted); font: 500 9px/1 "DM Mono", monospace; letter-spacing: .07em; }
.step-numbers, .sequence-cells { display: grid; grid-template-columns: repeat(var(--steps), minmax(27px,1fr)); }
.step-numbers span { height: 23px; display: grid; place-items: center; color: #989eae; font: 500 8px/1 "DM Mono", monospace; border-left: 1px solid #edf0f5; }
.sequence-cell { height: 31px; border: 0; border-left: 1px solid #e5e9f0; border-bottom: 1px solid #e5e9f0; background: #f8f9fc; padding: 0; position: relative; }
.sequence-cell:nth-child(4n+1) { border-left-color: #cbd1dd; }
.sequence-cell:hover { background: #eef0ff; }
.sequence-cell.on::after { content: ""; position: absolute; inset: 6px; border-radius: 5px; background: var(--blue); box-shadow: 0 3px 8px rgba(63,76,255,.2); }
.sequence-row.kick .sequence-cell.on::after { background: var(--orange); }
.sequence-row.snare .sequence-cell.on::after { background: var(--violet); }
.sequence-row.hat .sequence-cell.on::after { background: #2ebf76; inset: 9px; border-radius: 50%; }
.sequence-cell.playhead { background: #e9ecff; box-shadow: inset 2px 0 var(--blue); }
.roll-divider { min-width: 750px; margin: 14px 0 5px; display: flex; justify-content: space-between; color: var(--muted); font: 500 9px/1 "DM Mono", monospace; letter-spacing: .08em; }
.roll-divider span:last-child { letter-spacing: 0; text-transform: none; }
.piano-roll .sequence-row > span { color: #4f566a; }
.piano-roll .sequence-cell { height: 27px; background: #fbfcfe; }
.piano-roll .sequence-cell.on::after { display: none; }
.piano-roll .sequence-cell.note-start { z-index: 2; overflow: visible; }
.note-block { --note-span: 1; position: absolute; z-index: 4; inset: 4px auto 4px 4px; width: calc(var(--note-span) * 100% - 8px); min-width: 17px; border-radius: 5px; background: linear-gradient(90deg,#ff6948,#ff977f); box-shadow: 0 3px 10px rgba(255,101,66,.24),inset 0 1px rgba(255,255,255,.26); cursor: pointer; }
.note-block.tension-note { background: linear-gradient(90deg,#7559e8,#a68eff); box-shadow: 0 3px 10px rgba(117,89,232,.28),inset 0 1px rgba(255,255,255,.24); }
.note-block.selected { outline: 2px solid #fff; outline-offset: 1px; }
.note-block.probability-note { border-bottom: 2px dashed rgba(255,255,255,.78); }
.note-block.ratchet-note::after { content: ""; position: absolute; inset: 3px 10px 3px 4px; background: repeating-linear-gradient(90deg,transparent 0 6px,rgba(255,255,255,.28) 6px 7px); pointer-events: none; }
.note-block::before { content: ""; position: absolute; inset: 3px 8px 3px 3px; border-radius: 3px; border: 1px solid rgba(255,255,255,.18); pointer-events: none; }
.note-resize { position: absolute; z-index: 2; top: 2px; right: 1px; bottom: 2px; width: 9px; border-left: 1px solid rgba(91,25,10,.28); border-radius: 0 4px 4px 0; cursor: ew-resize; touch-action: none; }
.note-resize::after { content: ""; position: absolute; top: 50%; left: 3px; width: 2px; height: 9px; border-left: 1px solid rgba(255,255,255,.72); border-right: 1px solid rgba(255,255,255,.72); transform: translateY(-50%); }
.note-block:hover { filter: brightness(1.08); }
.piano-roll .sequence-row:nth-child(odd) .sequence-cell { background: #f6f7fb; }
.automation-editor { min-width: 750px; margin-top: 15px; padding: 13px; border: 1px solid #282f43; border-radius: 10px; background: #101522; }
.automation-head label { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #737c91; font: 500 9px/1 "DM Mono",monospace; letter-spacing: .08em; }
.automation-head select { width: 110px; }
#automationSvg { display: block; width: 100%; height: 120px; margin-top: 10px; border: 1px solid #293146; border-radius: 7px; background: linear-gradient(#171d2e 1px,transparent 1px); background-size: 100% 25%; touch-action: none; cursor: crosshair; }
.automation-grid-line { stroke: #252d42; stroke-width: 1; }
.automation-area { fill: rgba(186,247,208,.08); }
.automation-line { fill: none; stroke: var(--mint); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.automation-point { fill: #111625; stroke: var(--mint); stroke-width: 2; vector-effect: non-scaling-stroke; }
.exporting { opacity: .65; pointer-events: none; }

.loop-view { min-height: calc(100vh - 32px); margin-top: 16px; padding: 22px; border-radius: 24px; color: #f4f5fb; background-color: #0c101c; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),radial-gradient(circle at 10% 0%,rgba(125,103,223,.18),transparent 34rem); background-size: 24px 24px,24px 24px,auto; box-shadow: 0 24px 80px rgba(20,24,45,.2); }
.loop-utility { min-height: 42px; display: flex; align-items: start; justify-content: space-between; color: #7f879c; font: 500 9px/1.3 "DM Mono",monospace; letter-spacing: .11em; }
.loop-utility > div { display: grid; gap: 5px; }
.loop-utility strong { color: #fff; font-size: 13px; letter-spacing: 0; }
.loop-console { display: grid; grid-template-columns: minmax(330px,.85fr) minmax(420px,1.15fr); gap: 14px; margin: 8px 0 14px; }
.pulse-card, .loop-metronome { min-height: 330px; border: 1px solid #252b3e; border-radius: 18px; background: rgba(17,22,37,.88); }
.pulse-card { display:grid;grid-template-rows:auto 1fr auto;place-items:center;padding:18px;overflow:hidden;position:relative;background:radial-gradient(circle at 50% 50%,rgba(92,69,205,.1),transparent 48%),linear-gradient(145deg,rgba(17,22,37,.96),rgba(10,14,26,.98)); }
.pulse-card::before { content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.035);border-radius:12px;pointer-events:none; }
.orbit-title { width:100%;display:flex;justify-content:space-between;align-items:center;color:#8b94a9;font:500 10px/1 "DM Mono",monospace;letter-spacing:.1em; }
.orbit-title strong { color:#c9cfdd;font-size:10px;font-weight:500;letter-spacing:0; }
.pulse-orbit { width:300px;height:300px;position:relative;border-radius:50%;isolation:isolate;background:radial-gradient(circle,rgba(186,247,208,.07) 0 19%,rgba(12,16,28,.3) 20% 100%);box-shadow:inset 0 0 44px rgba(0,0,0,.32); }
.pulse-orbit::before { content:"";position:absolute;inset:7px;border:1px solid rgba(255,255,255,.05);border-radius:50%;pointer-events:none;animation:orbitbreathe 5s ease-in-out infinite; }
.orbit-track { position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none; }
.rhythm-track { width:264px;height:264px;border:1px solid rgba(255,101,66,.28);box-shadow:0 0 14px rgba(255,101,66,.035); }
.melody-track { width:182px;height:182px;border:1px solid rgba(186,247,208,.28);box-shadow:0 0 14px rgba(186,247,208,.035); }
.orbit-spoke { position:absolute;z-index:1;left:calc(50% - .5px);bottom:50%;width:1px;height:142px;transform-origin:50% 100%;transform:rotate(var(--angle));background:linear-gradient(to top,transparent 0 42%,rgba(255,255,255,.08) 43% 76%,transparent 77%); }
.orbit-playhead { position:absolute;z-index:5;left:calc(50% - 1px);bottom:50%;width:2px;height:143px;transform-origin:50% 100%;transform:rotate(var(--play-angle,0deg));background:linear-gradient(to top,transparent 0 30%,rgba(255,255,255,.26) 42%,#fff 100%);filter:drop-shadow(0 0 5px #fff);opacity:0;transition:transform .08s linear,opacity .15s;pointer-events:none; }
.orbit-playhead::after { content:"";position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 13px #fff; }
.orbit-playhead.active { opacity:.9; }
.pulse-core { position:absolute;z-index:6;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:102px;height:102px;display:grid;place-content:center;text-align:center;border-radius:50%;background:radial-gradient(circle at 38% 30%,#222a43,#0e1423 66%);border:1px solid #46506d;box-shadow:0 0 35px rgba(186,247,208,.12),inset 0 0 18px rgba(186,247,208,.04); }
.pulse-core output { font:600 29px/.9 "DM Mono",monospace;letter-spacing:-.06em; }
.pulse-core span { margin-top:6px;color:#778198;font:500 7px/1 "DM Mono",monospace;letter-spacing:.13em; }
.pulse-core small { margin-top:8px;color:var(--mint);font:500 8px/1 "DM Mono",monospace;letter-spacing:.05em; }
.pulse-core small output { font:inherit;letter-spacing:inherit; }
.orbit-node { position:absolute;z-index:3;left:50%;top:50%;transition:opacity .14s,background .14s,box-shadow .14s; }
.rhythm-node { width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#4a5266;opacity:.28;transform:rotate(calc(360deg * var(--i) / var(--count))) translateY(-132px) rotate(calc(-360deg * var(--i) / var(--count))); }
.rhythm-node.hat-hit { border-radius:50%;background:#4ed99a;box-shadow:0 0 7px rgba(78,217,154,.45);opacity:1; }
.rhythm-node.snare-hit { width:8px;height:8px;margin:-4px;transform:rotate(calc(360deg * var(--i) / var(--count))) translateY(-132px) rotate(calc(45deg - 360deg * var(--i) / var(--count)));background:#8f75ff;box-shadow:0 0 9px rgba(143,117,255,.48);opacity:1; }
.rhythm-node.kick-hit { width:11px;height:11px;margin:-5.5px;border-radius:50%;border:2px solid var(--orange);background:#1b1720;box-shadow:0 0 12px rgba(255,101,66,.65);opacity:1; }
.rhythm-node.kick-hit.snare-hit { background:linear-gradient(135deg,var(--orange),#8f75ff);border-color:#fff; }
.melody-node { width:3px;height:3px;margin:-1.5px;border-radius:50%;background:#445267;opacity:.24;transform:rotate(calc(360deg * var(--i) / var(--count))) translateY(calc(-91px - var(--pitch-offset))); }
.melody-node.note-hold { width:4px;height:4px;margin:-2px;background:var(--mint);box-shadow:0 0 5px rgba(186,247,208,.32);opacity:.62; }
.melody-node.note-hit { width:7px;height:11px;margin:-5.5px -3.5px;border-radius:7px;background:linear-gradient(to bottom,#fff,var(--mint));box-shadow:0 0 9px rgba(186,247,208,.5);opacity:1;transform:rotate(calc(360deg * var(--i) / var(--count))) translateY(calc(-91px - var(--pitch-offset))); }
.dense-orbit .orbit-node:not(.kick-hit):not(.snare-hit):not(.hat-hit):not(.note-hit):not(.note-hold) { opacity:.08;width:2px;height:2px;margin:-1px; }
.orbit-node.playing { background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.13),0 0 24px #fff;animation:nodepulse .28s ease-out; }
.pulse-orbit.pulse-hit .pulse-core { animation:corepulse .26s cubic-bezier(.2,.8,.2,1); }
.pulse-orbit.rhythm-pulse .rhythm-track { animation:rhythmpulse .3s ease-out; }
.pulse-orbit.melody-pulse .melody-track { animation:melodypulse .42s ease-out; }
@keyframes orbitbreathe { 0%,100%{transform:scale(.985);opacity:.55}50%{transform:scale(1.025);opacity:1} }
@keyframes corepulse { 0%{transform:translate(-50%,-50%) scale(.94);box-shadow:0 0 10px rgba(186,247,208,.08)}55%{transform:translate(-50%,-50%) scale(1.055);box-shadow:0 0 55px rgba(186,247,208,.32)}100%{transform:translate(-50%,-50%) scale(1)} }
@keyframes nodepulse { 0%{filter:brightness(1)}50%{filter:brightness(2.8);scale:1.8}100%{filter:brightness(1);scale:1} }
@keyframes rhythmpulse { 0%{transform:translate(-50%,-50%) scale(.96);border-color:#fff}55%{transform:translate(-50%,-50%) scale(1.035);box-shadow:0 0 35px rgba(255,101,66,.38)}100%{transform:translate(-50%,-50%) scale(1)} }
@keyframes melodypulse { 0%{transform:translate(-50%,-50%) scale(.94)}50%{transform:translate(-50%,-50%) scale(1.045);box-shadow:0 0 38px rgba(186,247,208,.38)}100%{transform:translate(-50%,-50%) scale(1)} }
.orbit-legend { width:100%; display:flex; justify-content:center; gap:18px; color:#778096; font:500 8px/1 "DM Mono",monospace; }
.orbit-legend span { display:flex; align-items:center; gap:5px; }
.orbit-legend i { width:7px; height:7px; border-radius:50%; display:block; }
.rhythm-key { background:var(--orange); }.melody-key{background:var(--mint)}.play-key{background:#fff}
.loop-metronome { padding:22px; }
.loop-section-title { display:grid; gap:6px; }
.loop-section-title span,.loop-clock-grid label { color:#747d92; font:500 9px/1 "DM Mono",monospace; letter-spacing:.1em; }
.loop-section-title strong { font-size:18px; }
.loop-tempo-control { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; gap:8px; margin:24px 0 8px; }
.loop-tempo-control output { text-align:center; font:600 58px/.9 "DM Mono",monospace; letter-spacing:-.07em; color:var(--mint); }
.loop-tempo-control button { width:40px; height:40px; border:1px solid #374057; border-radius:50%; background:#171d2e; color:var(--mint); font-size:21px; }
.loop-metronome input[type="range"] { accent-color:var(--mint); }
.loop-clock-grid { display:grid; grid-template-columns:1fr 1fr 1.25fr; gap:8px; margin-top:18px; }
.loop-clock-grid label { display:grid; gap:7px; }
.loop-clock-grid select,.loop-view .sequence-controls select { height:40px; min-width:0; border:1px solid #30384e; border-radius:8px; background:#151a2a; color:#e9ebf4; padding:0 9px; font-size:11px; }
.click-toggle { margin-top:13px; height:38px; width:100%; border:1px solid #30384e; border-radius:8px; background:#151a2a; color:#9da5b8; font-size:11px; display:flex; justify-content:center; align-items:center; gap:8px; }
.click-toggle span { width:8px;height:8px;border-radius:50%;background:#555d71; }
.click-toggle.active { color:var(--mint); border-color:#4d6a5a; }.click-toggle.active span{background:var(--mint);box-shadow:0 0 10px var(--mint)}
.loop-view .sequencer-panel { margin:0; background:rgba(15,20,34,.94); border-color:#252b3e; box-shadow:none; }
.loop-view .sequence-title-row h2 { color:#fff; }
.loop-view .micro-label { color:var(--mint); }
.loop-view .sequence-controls label { color:#737c91; }
.loop-view .sequence-transport { border-color:#2a3043; }
.loop-view .sequence-transport button { background:#171d2e; color:#d9dce6; border-color:#30384e; }
.loop-view .sequence-transport .loop-start { background:var(--orange); color:#fff; border:0; }
.loop-view .sequence-transport .loop-start.running { background:#353d53; }
.loop-view .sequence-head > span,.loop-view .sequence-row > span,.loop-view .roll-divider,.loop-view .export-group > span { color:#70798e; }
.loop-view .step-numbers span { color:#626b80; border-color:#252b3d; }
.loop-view .sequence-cell { background:#151a2a; border-color:#262d41; }
.loop-view .sequence-cell:nth-child(4n+1) { border-left-color:#485066; }
.loop-view .sequence-cell:hover { background:#202840; }
.loop-view .sequence-cell.playhead { background:#232d49; box-shadow:inset 2px 0 var(--mint); }
.loop-view .piano-roll .sequence-cell { background:#121725; }
.loop-view .piano-roll .sequence-row:nth-child(odd) .sequence-cell { background:#171c2c; }
.loop-view .piano-roll .sequence-row > span { color:#9ca3b4; }
.loop-view .section-label { color:#747d92; }

@media (max-width: 1120px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .side-stack { grid-template-columns: 1fr 1fr; }
  .insight-panel { min-height: 100%; }
  .loop-console { grid-template-columns:1fr 1fr; }
  .creative-toolbar { grid-template-columns:1fr 1fr; }
  .note-inspector { grid-template-columns:repeat(3,1fr); }
  .inspector-heading { grid-column:1/-1; }
}
@media (max-width: 800px) {
  .app-shell { grid-template-columns: 1fr; }
  .tool-rail { position: sticky; height: 64px; flex-direction: row; align-items: stretch; border-right: 0; border-bottom: 1px solid #282c40; }
  .app-mark { height: 64px; width: 70px; border-bottom: 0; border-right: 1px solid #2b2f42; }
  .app-mark img { width: 36px; height: 36px; }
  .mode-tabs { flex: 1; flex-direction: row; }
  .mode-tab { flex: 1; min-height: 64px; border-bottom: 0; border-right: 1px solid #2b2f42; grid-auto-flow: column; gap: 7px; align-items: center; }
  .mode-tab::before { inset: auto 14px 0; width: auto; height: 3px; }
  .tab-icon { font-size: 17px; }
  .audio-status { width: 62px; min-height: 64px; margin: 0; border-top: 0; border-left: 1px solid #2b2f42; }
  .workbench { padding: 0 14px 24px; }
  .utility-row { height: 62px; }
  .control-deck { grid-template-columns: 1fr 1fr; }
  .root-block { grid-column: 1 / -1; }
  .side-stack { grid-template-columns: 1fr; }
  .sequence-controls { grid-template-columns: 1fr 1fr 1fr; }
  .loop-view { margin-top:12px; padding:14px; border-radius:18px; }
  .loop-console { grid-template-columns:1fr; }
  .creative-toolbar { grid-template-columns:1fr; }
  .session-actions,.midi-actions { justify-content:flex-start; }
  .chord-lane { overflow-x:auto; grid-template-columns:repeat(var(--chord-count,4),minmax(120px,1fr)); }
  .note-inspector { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px) {
  .mode-tab span:last-child, .audio-status span:last-child, .context-label { display: none; }
  .utility-row { margin-bottom: 12px; }
  .control-deck { padding: 15px; gap: 12px; }
  .note-grid { grid-template-columns: repeat(6,1fr); }
  .note-button:nth-child(6) { border-right: 0; }
  .note-button:nth-child(-n+6) { border-bottom: 1px solid var(--line); }
  .visual-stage { min-height: 440px; padding: 20px 16px 15px; }
  .stage-head h1 { font-size: 27px; }
  .orbit-wrap { width: min(330px, 85vw); margin-top: 5px; }
  .math-strip { grid-template-columns: 1fr 1fr; }
  .math-strip div { padding: 13px; }
  .math-strip div:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .keyboard-section { padding: 16px; }
  .keyboard { height: 110px; }
  .side-stack { gap: 12px; }
  select, input[type="text"], input[type="number"] { font-size: 16px !important; }
  .sequencer-panel { padding: 16px; }
  .sequence-controls { grid-template-columns: 1fr 1fr; }
  .sequence-transport { flex-wrap: wrap; }
  .export-group { width: 100%; margin: 3px 0 0; }
  .export-group button { flex: 1; }
  .loop-utility > span { display:none; }
  .loop-clock-grid { grid-template-columns:1fr 1fr; }
  .loop-clock-grid label:last-child { grid-column:1/-1; }
  .chord-compose { grid-template-columns:1fr 1fr; }
  .chord-compose label { grid-column:1/-1; }
  .note-inspector { grid-template-columns:1fr; }
  .inspector-heading { grid-column:auto; }
  .creative-toolbar button { min-height:38px; }
}
@media (max-width: 360px) {
  .pulse-orbit { scale:.8; margin:-28px; }
  .orbit-title { align-items:flex-start;gap:8px; }
  .orbit-title strong { text-align:right;line-height:1.35; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }