@font-face { font-family: Inter; src: url(/assets/fonts/Inter-Regular.ttf); font-weight: 400; }
@font-face { font-family: Inter; src: url(/assets/fonts/Inter-SemiBold.ttf); font-weight: 600; }
@font-face { font-family: "JetBrains Mono"; src: url(/assets/fonts/JetBrainsMono-Regular.ttf); }
@font-face { font-family: "Space Grotesk"; src: url(/assets/fonts/SpaceGrotesk-Medium.ttf); font-weight: 500; }

:root {
    --bg: #17181c;
    --panel: #101116;
    --well: #0b0c10;
    --border: #26282f;
    --text: #ebeaf0;
    --muted: #9aa0ac;
    --brand: #1e9fad;
    --layer: #69d5e3;
    --transport: #3fe0d0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 13px Inter, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button {
    font: 600 11px Inter, sans-serif;
    letter-spacing: 0.06em;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
}
button:hover { color: var(--text); }

.app { max-width: 1280px; margin: 28px auto; padding: 0 20px; }
.page { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hidden { display: none !important; }

header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.home { display: flex; align-items: center; gap: 14px; flex: none; }
.mark { width: 26px; height: 26px; flex: none; background: url(/assets/logo-mark.svg) no-repeat center / contain; margin-right: -4px; }
.wordmark {
    width: 132px; height: 14px; flex: none;
    background: var(--text);
    -webkit-mask: url(/assets/logo-wordmark.svg) no-repeat left center / contain;
    mask: url(/assets/logo-wordmark.svg) no-repeat left center / contain;
}
.status { flex: 1; text-align: right; font: 11px "JetBrains Mono", monospace; color: var(--muted); }
.play {
    width: 88px; height: 34px; flex: none;
    color: var(--transport);
    border-color: color-mix(in srgb, var(--transport) 45%, var(--border));
    font-size: 12px;
}
.play:active, .play.hit { background: color-mix(in srgb, var(--transport) 22%, var(--panel)); }

.sources { display: flex; gap: 4px; margin-left: 12px; }
.sources button { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; }
.sources .icon { width: 16px; height: 16px; color: var(--layer); }
.sources button.on { color: var(--layer); border-color: var(--layer); background: color-mix(in srgb, var(--layer) 10%, var(--panel)); }

.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 10px; }
.gtitle { font: 600 10px Inter, sans-serif; letter-spacing: 0.12em; color: var(--muted); margin: 0 0 6px 2px; }
.knobs { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.groups { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.knob-name { font: 600 10px Inter, sans-serif; color: var(--text); white-space: nowrap; margin-bottom: 2px; }
.switch { display: flex; align-items: center; padding: 0 6px; }
.switch button { height: 28px; padding: 0 10px; }
.switch button.on { color: var(--layer); border-color: var(--layer); }


.lines { display: block; width: 100%; height: 220px; border-radius: 4px; touch-action: none; }
.scope { grid-template-rows: 220px !important; }

.tabs { display: flex; align-items: stretch; gap: 6px; height: 54px; margin-bottom: 8px; }
.flex { flex: 1; }
.chip {
    display: flex; align-items: center; gap: 4px;
    padding: 0 6px 0 2px;
    border: 1px solid var(--border); border-radius: 5px;
}
.chip > button {
    display: flex; align-items: center; gap: 6px;
    height: 100%; padding: 0 8px;
    border: 0; background: none;
}
.chip.on { border-color: var(--layer); background: color-mix(in srgb, var(--layer) 9%, var(--panel)); }
.chip .k .knob { width: 58px; }
.chip.on > button { color: var(--layer); }
.glyph { width: 30px; height: 18px; }

.knob { display: flex; flex-direction: column; align-items: center; width: 66px; }
.knob canvas { width: 32px; height: 32px; cursor: ns-resize; touch-action: none; }
.knob-value { font: 10px "JetBrains Mono", monospace; color: var(--muted); white-space: nowrap; }

.icon {
    display: inline-block; width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: var(--icon) no-repeat center / contain;
    mask: var(--icon) no-repeat center / contain;
}

.view.hidden { display: none; }
.editor { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: 360px; }
.editor.norange .range { visibility: hidden; }
.editor.nostrip { grid-template-columns: minmax(0, 1fr); }
.editor.nostrip .range { display: none; }
.length.nostrip { grid-template-columns: auto minmax(0, 1fr); }
.range { display: block; width: 100%; height: 100%; cursor: ns-resize; touch-action: none; }
.curve { display: block; width: 100%; height: 100%; border-radius: 4px; touch-action: none; }
.length { display: grid; grid-template-columns: 96px 1fr; align-items: center; height: 26px; margin-top: 6px; }
.caption { font: 600 10px Inter, sans-serif; letter-spacing: 0.1em; color: var(--muted); text-align: right; padding-right: 12px; }
.bar canvas { width: 100%; height: 22px; display: block; border-radius: 3px; cursor: ew-resize; touch-action: none; }

.shapes { display: flex; gap: 4px; align-self: center; }
.shapes button { display: flex; align-items: center; justify-content: center; width: 40px; height: 34px; }
.shapes .icon { width: 20px; height: 20px; }
.shapes button.on { color: var(--layer); border-color: var(--layer); background: color-mix(in srgb, var(--layer) 12%, var(--panel)); }

.help { color: var(--muted); font-size: 12px; margin-top: 12px; }
.intro { padding: 2px 2px 0; }
.iline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.iwhat { color: var(--text); font-size: 13px; }
.igood { color: var(--muted); font-size: 12px; }
.imore { margin-left: auto; height: 22px; padding: 0 10px; font: 600 10px Inter, sans-serif; letter-spacing: 0.1em; color: var(--layer); }
.ibody { max-width: 760px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.ibody p { margin: 6px 0 0; }
.presets { padding: 6px 10px; }
.pick { display: flex; align-items: center; gap: 12px; height: 32px; padding: 0 10px; border: 0; background: none; letter-spacing: 0; }
.pick .gtitle { margin: 0; }
.pname { font: 600 13px Inter, sans-serif; color: var(--text); }
.plist { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 6px; }
.prow { display: flex; flex-wrap: wrap; gap: 4px; }
.prow button { height: 28px; padding: 0 10px; letter-spacing: 0; font: 12px Inter, sans-serif; color: var(--text); }
.prow button.on { color: var(--layer); border-color: var(--layer); }
.timeline { display: block; width: 100%; height: 240px; border-radius: 4px; touch-action: none; }
.struck-top { display: grid; grid-template-columns: minmax(300px, 1fr) 2fr; gap: 12px; }
.struck-mid { display: grid; grid-template-columns: 3fr 1fr; gap: 12px; }
.bodies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.chips button { height: 26px; padding: 0 10px; }
.chips button.on { color: var(--layer); border-color: var(--layer); background: color-mix(in srgb, var(--layer) 12%, var(--panel)); }
.mhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mhead .gtitle, .mhead .chips { margin: 0; }
.mhead .chips button { height: 22px; padding: 0 8px; }
.modes { display: block; width: 100%; height: 190px; border-radius: 4px; touch-action: none; }
.body { cursor: pointer; border-top: 2px solid var(--border); }
.body.on { border-top-color: var(--bc); }
.bhead { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.bhead .gtitle { margin: 0; }
.bcount { font: 10px "JetBrains Mono", monospace; color: var(--muted); }
.toggle { height: 22px; padding: 0 8px; }
.toggle.on { color: var(--layer); border-color: var(--layer); }
.knobs.inline { align-items: center; margin-right: 6px; }
.dice { width: 30px; height: 26px; display: flex; align-items: center; justify-content: center; padding: 0; }
.phase { height: 26px; padding: 0 10px; }
.phase.on { color: var(--layer); }
.stack { display: block; width: 100%; height: 170px; border-radius: 4px; touch-action: none; }
.cells { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin-top: 6px; }
.cell { display: grid; grid-template-columns: 14px 1fr 16px; grid-template-rows: 20px 14px; align-items: center; padding: 2px 4px; background: var(--well); border: 1px solid var(--border); border-radius: 4px; }
.cell .badge { font: 600 10px "JetBrains Mono", monospace; color: var(--layer); text-align: center; }
.cell .ratio { min-width: 0; background: none; border: 0; color: var(--text); font: 600 12px "JetBrains Mono", monospace; outline: none; }
.cell .hz { grid-column: 2 / 4; font: 10px "JetBrains Mono", monospace; color: var(--muted); }
.cell .remove { grid-row: 1; grid-column: 3; padding: 0; height: 16px; border: 0; background: none; font: 11px Inter, sans-serif; }
.cells .add { height: 40px; width: 32px; color: var(--layer); font: 16px Inter, sans-serif; }
.mhead .chips button { letter-spacing: 0.04em; }
.circuits .chips { margin-bottom: 0; }
.circuits button { display: flex; align-items: center; gap: 6px; height: 30px; letter-spacing: 0.04em; }
.circuits .icon { width: 16px; height: 16px; }
.circuits .caret { margin-left: 2px; font-size: 9px; color: var(--muted); }
.circuit { position: relative; }
.circuits .menu { display: none; position: absolute; top: 34px; left: 0; z-index: 10; min-width: 100%; padding: 4px; flex-direction: column; gap: 2px; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }
.circuits .menu.open { display: flex; }
.circuits .menu button { justify-content: flex-start; width: 100%; white-space: nowrap; border-color: transparent; background: none; }
.circuits .menu button:hover { border-color: var(--border); }
.circuits .menu button.on { color: var(--layer); }
.bands { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.band { display: flex; align-items: center; gap: 10px; padding: 2px 6px; background: var(--well); border: 1px solid var(--border); border-radius: 4px; }
.band .badge { width: 52px; font: 600 10px "JetBrains Mono", monospace; color: var(--layer); }
.band .knobs { flex: 1; }
.band .remove { padding: 0 6px; height: 20px; border: 0; background: none; font: 11px Inter, sans-serif; }
.bands .add { align-self: flex-start; height: 28px; padding: 0 12px; color: var(--layer); font: 600 11px Inter, sans-serif; letter-spacing: 0.06em; }
.downloads { display: flex; gap: 6px; align-items: center; }
.downloads::before { content: "DOWNLOAD"; font: 600 10px Inter, sans-serif; letter-spacing: 0.12em; color: var(--muted); margin-right: 4px; }
.download {
    display: flex; align-items: center; height: 34px; padding: 0 12px;
    font: 600 11px Inter, sans-serif; letter-spacing: 0.06em; text-decoration: none;
    color: var(--text); border: 1px solid var(--border); border-radius: 4px; background: var(--panel);
}
.download:hover { border-color: var(--muted); }
.site {
    display: flex; align-items: center; height: 34px; padding: 0 12px; flex: none;
    font: 600 11px Inter, sans-serif; letter-spacing: 0.06em; text-decoration: none;
    color: var(--muted); border: 1px solid var(--border); border-radius: 4px; background: var(--panel);
}
.site:hover { color: var(--text); border-color: var(--muted); }
.gate { margin: 18vh auto; text-align: center; color: var(--muted); font-size: 15px; }
.gate p { margin: 0 0 18px; }
.gate .ask {
    display: inline-block; padding: 9px 16px;
    font: 600 12px Inter, sans-serif; letter-spacing: 0.06em; text-decoration: none; text-transform: uppercase;
    color: var(--text); border: 1px solid var(--border); border-radius: 4px; background: var(--panel);
}
.gate .ask:hover { border-color: var(--muted); }