/* Audio Tune — chrome around the pads. * * Text in rem so the SDK's --font-scale hook scales everything for free; * colours key off [data-theme], which the SDK maintains on . Each board * sets --hue on the view; pads derive their colour from it, so a board reads * as one place. */ :root { --font-scale: 1; --bg: #f3f0ea; --fg: #221f2b; --muted: rgba(34, 31, 43, 0.62); --card: #ffffff; --line: rgba(34, 31, 43, 0.12); --hue: 250; --pad-l: 88%; --pad-l-hover: 82%; --pad-s: 45%; --pad-ink: #221f2b; --accent: hsl(var(--hue) 60% 45%); } :root[data-theme="dark"] { --bg: #181622; --fg: #ece8f4; --muted: rgba(236, 232, 244, 0.6); --card: #221f2e; --line: rgba(236, 232, 244, 0.12); --pad-l: 22%; --pad-l-hover: 28%; --pad-s: 35%; --pad-ink: #ece8f4; --accent: hsl(var(--hue) 70% 68%); } * { box-sizing: border-box; } html { font-size: calc(100% * var(--font-scale)); } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--fg); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; } .app { max-width: 64rem; margin: 0 auto; padding: 0.75rem 0.75rem 3rem; } .topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.25rem 0.25rem 0.75rem; } .brand { margin: 0; font-size: 1.25rem; letter-spacing: 0.02em; } .tabs { display: flex; gap: 0.25rem; } .tab { font: inherit; font-size: 0.9rem; padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--fg); cursor: pointer; } .tab[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); } .hint { font-size: 0.85rem; color: var(--muted); } /* ── boards ─────────────────────────────────────────────────────────── */ .packs { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.25rem 0.25rem 0.75rem; scrollbar-width: thin; } .pack-tab { font: inherit; font-size: 0.85rem; white-space: nowrap; padding: 0.35rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--fg); cursor: pointer; border-left: 0.35rem solid hsl(var(--hue) 60% 55%); } .pack-tab[aria-selected="true"] { background: hsl(var(--hue) var(--pad-s) var(--pad-l)); border-color: hsl(var(--hue) 60% 55%); } .board-head { padding: 0.25rem 0.25rem 0.75rem; } .board-name { margin: 0; font-size: 1.4rem; } .board-place { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.95rem; max-width: 40rem; } .board-status { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--muted); } .board-status.is-error { color: #c8433c; } .board-tools { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.6rem; } .tool { font: inherit; font-size: 0.85rem; padding: 0.4rem 0.8rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--card); color: var(--fg); cursor: pointer; } .tool-primary { background: var(--fg); color: var(--bg); border-color: var(--fg); } .tool-hint { font-size: 0.8rem; color: var(--muted); } .pads { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); } .pad { position: relative; min-height: 5.25rem; padding: 0.5rem 0.55rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 0.15rem; font: inherit; text-align: left; cursor: pointer; user-select: none; touch-action: manipulation; border: 1px solid hsl(var(--hue) 40% 50% / 0.35); border-radius: 0.8rem; background: hsl(var(--hue) var(--pad-s) var(--pad-l)); color: var(--pad-ink); transition: transform 0.06s ease, background-color 0.12s ease, box-shadow 0.12s ease; } .pad:hover { background: hsl(var(--hue) var(--pad-s) var(--pad-l-hover)); } .pad:active { transform: scale(0.96); } .pad:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } .pad-key { position: absolute; top: 0.4rem; right: 0.5rem; font-size: 0.7rem; opacity: 0.55; font-variant-numeric: tabular-nums; } .pad-name { font-weight: 600; font-size: 0.95rem; line-height: 1.15; word-break: break-word; } .pad-meta { font-size: 0.7rem; opacity: 0.6; min-height: 0.9rem; } .pad.is-bed { border-style: dashed; } .pad.is-live { box-shadow: 0 0 0 3px var(--accent) inset; } .pad.has-params::after { content: ""; position: absolute; left: 0.55rem; top: 0.55rem; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); } /* The hit flash: a finite pulse, one iteration, so it says "that one fired" * and then rests. Reduced motion collapses it via the SDK's kill switch. */ .pad.hit { animation: pad-hit 0.28s ease-out; animation-iteration-count: 1; } @keyframes pad-hit { 0% { box-shadow: 0 0 0 0 hsl(var(--hue) 80% 60% / 0.9); } 100% { box-shadow: 0 0 0 0.9rem hsl(var(--hue) 80% 60% / 0); } } @media (prefers-reduced-motion: reduce) { .pad, .tab { transition: none; } .pad:active { transform: none; } } /* ── pad sheet ──────────────────────────────────────────────────────── */ .sheet { border: 1px solid var(--line); border-radius: 1rem; padding: 0; background: var(--card); color: var(--fg); width: min(26rem, calc(100vw - 2rem)); } .sheet::backdrop { background: rgba(0, 0, 0, 0.45); } .sheet-body { padding: 1rem 1.1rem 1.1rem; display: flex; flex-direction: column; gap: 0.7rem; } .sheet-title { margin: 0; font-size: 1.15rem; } .sheet-title small { font-weight: 400; color: var(--muted); font-size: 0.85rem; } .sheet-note { margin: 0; color: var(--muted); font-size: 0.9rem; } .ctl { display: grid; grid-template-columns: 6rem 1fr 3rem; align-items: center; gap: 0.5rem; font-size: 0.9rem; } .ctl-name { font-variant: small-caps; letter-spacing: 0.03em; } .ctl input[type="range"] { width: 100%; accent-color: var(--accent); } .ctl output { text-align: right; font-variant-numeric: tabular-nums; } .ctl select, .ctl-row input[type="number"] { font: inherit; padding: 0.3rem 0.4rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg); color: var(--fg); } .ctl-check { display: flex; gap: 0.5rem; } .ctl-row { display: grid; grid-template-columns: auto 6rem; gap: 0.5rem 0.75rem; align-items: center; font-size: 0.9rem; } .ctl-row input[type="number"] { width: 6rem; } .ctl-hint { grid-column: 1 / -1; font-size: 0.8rem; color: var(--muted); } .sheet-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.3rem; } /* ── element lab ────────────────────────────────────────────────────── */ .lab { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: start; } @media (max-width: 40rem) { .lab { grid-template-columns: 1fr; } } .lab-side { display: flex; flex-direction: column; gap: 0.25rem; position: sticky; top: 0.5rem; } @media (max-width: 40rem) { .lab-side { flex-direction: row; flex-wrap: wrap; position: static; } } .lab-el { font: inherit; font-size: 0.9rem; text-align: left; padding: 0.4rem 0.7rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--card); color: var(--fg); cursor: pointer; } .lab-el.is-current { background: hsl(var(--hue) var(--pad-s) var(--pad-l)); border-color: hsl(var(--hue) 60% 55%); font-weight: 600; } .lab-el:disabled { opacity: 0.4; cursor: default; } .lab-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; } .lab-panel, .lab-room, .lab-scope, .lab-viewer { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.1rem; } .lab-h { margin: 0 0 0.35rem; font-size: 1.05rem; display: flex; align-items: baseline; gap: 0.75rem; } .lab-tag { font-size: 0.75rem; font-weight: 400; color: var(--muted); } .lab-knobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.35rem 1.25rem; margin: 0.75rem 0; } .lab-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.5rem 0; } .ctl-inline { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; } .ctl-inline input { width: 4.5rem; font: inherit; padding: 0.25rem 0.35rem; border: 1px solid var(--line); border-radius: 0.4rem; background: var(--bg); color: var(--fg); } .lab-actions select { font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); color: var(--fg); max-width: 100%; } .lab-note { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); min-width: 2.5rem; } .lab-code { margin: 0.5rem 0 0; padding: 0.7rem 0.85rem; border-radius: 0.6rem; background: var(--bg); color: var(--fg); font: 0.8rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; word-break: break-word; overflow-x: auto; } .lab-canvas { width: 100%; height: 8rem; display: block; border-radius: 0.6rem; background: var(--bg); } .lab-meter { font-size: 0.8rem; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; } .lab-cueinfo { min-height: 1rem; } /* ── explore: cards, subtabs, transport ─────────────────────────────── */ .subtabs { display: flex; gap: 0.35rem; padding: 0 0.25rem 0.9rem; flex-wrap: wrap; } .subtab { font: inherit; font-size: 0.9rem; padding: 0.4rem 0.95rem; border: 1px solid var(--line); border-radius: 0.6rem; background: var(--card); color: var(--fg); cursor: pointer; } .subtab[aria-selected="true"] { background: hsl(var(--hue) var(--pad-s) var(--pad-l)); border-color: hsl(var(--hue) 60% 55%); font-weight: 600; } .lab-body { display: flex; flex-direction: column; gap: 1rem; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.1rem; min-width: 0; } .card-h { margin: 0; font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .card-h small { font-weight: 400; color: var(--muted); font-size: 0.85rem; } .card-sub { margin: 0.3rem 0 0.6rem; color: var(--muted); font-size: 0.92rem; max-width: 46rem; } .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.4rem 0; } .row select, .transport select { font: inherit; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); color: var(--fg); max-width: 100%; } .transport { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0.3rem; } .take-label { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; } .recipe { display: flex; flex-direction: column; gap: 1rem; } .recipe-facts { margin: 0 0 0.25rem; font-size: 0.85rem; color: var(--muted); } .cue-params { margin-top: 0.5rem; } .cue-params .control { min-width: 14rem; } /* controls */ .controls { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0.6rem 1.25rem; margin: 0.6rem 0 0.2rem; } .control { position: relative; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.45rem 0.55rem 0.5rem; border-radius: 0.7rem; border: 1px solid transparent; } .control:focus-within { border-color: var(--accent); } .control.is-changed { border-color: hsl(var(--hue) 60% 55% / 0.5); } .control-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; } .control-label { font-weight: 600; letter-spacing: 0.01em; } .control-value { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .control-varied { font-size: 0.7rem; color: hsl(40 80% 45%); border: 1px solid hsl(40 80% 45% / 0.4); border-radius: 999px; padding: 0.05rem 0.4rem; } :root[data-theme="dark"] .control-varied { color: hsl(42 90% 70%); border-color: hsl(42 90% 70% / 0.4); } .control-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent); opacity: 0; } .control.is-changed .control-dot { opacity: 1; } .control-body { position: relative; } .control-opt { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--muted); } .control-poles { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); padding: 0 0.1rem; } .pole.is-near { color: var(--fg); font-weight: 600; } .control-chips, .chip { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; } .chip { font: inherit; font-size: 0.75rem; padding: 0.2rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg); cursor: pointer; } .chip:hover { border-color: var(--accent); } .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .num { width: 100%; accent-color: var(--accent); } .optional { display: flex; flex-direction: column; gap: 0.2rem; } .pic { width: 100%; height: auto; display: block; border-radius: 0.5rem; background: var(--bg); touch-action: none; cursor: ew-resize; user-select: none; } .pic-sweep, .pic-partials, .pic-env, .pic-filter { cursor: crosshair; } .pic-track { fill: var(--line); } .pic-bar { fill: var(--accent); } .pic-grid { stroke: var(--line); stroke-width: 1; fill: none; } .pic-line { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linecap: round; } .pic-area { fill: var(--accent); opacity: 0.18; } .pic-handle { fill: var(--card); stroke: var(--accent); stroke-width: 2.5; } .pic-marker { fill: var(--accent); } .pic-tick { font-size: 9px; fill: var(--muted); text-anchor: middle; font-family: system-ui, sans-serif; } .pic-tick-box { fill: var(--line); } .pic-tick-box.is-on { fill: var(--accent); } .key-w { fill: var(--card); stroke: var(--line); stroke-width: 0.5; } .key-b { fill: var(--muted); opacity: 0.5; } :root[data-theme="dark"] .key-w { fill: rgba(255,255,255,0.08); } .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 0.6rem; overflow: hidden; } .seg-btn { font: inherit; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.6rem; border: 0; background: var(--bg); color: var(--fg); cursor: pointer; } .seg-btn + .seg-btn { border-left: 1px solid var(--line); } .seg-btn[aria-checked="true"] { background: hsl(var(--hue) var(--pad-s) var(--pad-l)); font-weight: 600; } .glyph { width: 1.6rem; height: 1.1rem; } .switch { display: inline-flex; align-items: center; cursor: pointer; } .switch input { position: absolute; opacity: 0; } .switch-track { width: 2.4rem; height: 1.3rem; border-radius: 999px; background: var(--line); position: relative; transition: background 0.15s; } .switch-track::after { content: ""; position: absolute; top: 0.15rem; left: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--card); transition: transform 0.15s; } .switch input:checked + .switch-track { background: var(--accent); } .switch input:checked + .switch-track::after { transform: translateX(1.1rem); } .switch input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; } .dice-row { display: flex; gap: 0.6rem; align-items: center; } /* help */ .help-btn { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1px solid var(--line); background: var(--bg); color: var(--muted); font: inherit; font-size: 0.75rem; line-height: 1; cursor: pointer; flex: none; } .help-btn[aria-expanded="true"], .help-btn:hover { color: var(--fg); border-color: var(--accent); } .help-pop { position: absolute; z-index: 5; top: 2rem; right: 0.4rem; width: min(22rem, 90vw); padding: 0.7rem 0.85rem; background: var(--card); color: var(--fg); border: 1px solid var(--line); border-radius: 0.7rem; box-shadow: 0 8px 28px rgba(0,0,0,0.25); font-size: 0.85rem; line-height: 1.45; } .help-pop strong { display: block; margin-bottom: 0.25rem; } .help-pop p { margin: 0; color: var(--muted); } .panel-help { position: relative; display: inline-flex; } .panel-help .help-pop { top: 1.7rem; left: 0; right: auto; } .card-h .panel-help { margin-left: 0.15rem; } /* timeline */ .timeline { position: relative; height: 3.2rem; background: var(--bg); border-radius: 0.6rem; margin-top: 0.5rem; overflow: hidden; } .tl-block { position: absolute; top: 0.45rem; height: 2.3rem; border: 0; border-radius: 0.4rem; cursor: grab; touch-action: none; padding: 0 0.4rem; background: hsl(calc(var(--hue) + var(--i) * 37) 55% 55% / 0.85); color: #fff; font: inherit; font-size: 0.75rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; min-width: 1.2rem; } .tl-block:active { cursor: grabbing; } .tl-block.is-varied { outline: 1px dashed rgba(255,255,255,0.6); outline-offset: -3px; } .tl-room { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, var(--line) 0 2px, transparent 2px 8px); opacity: 0.7; } .tl-room span { position: absolute; right: 0.4rem; bottom: 0.15rem; font-size: 0.65rem; color: var(--muted); } .tl-ruler { position: relative; height: 1rem; font-size: 0.65rem; color: var(--muted); } .tl-ruler span { position: absolute; transform: translateX(-50%); } .layer .layer-no { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0.8rem; color: #fff; background: hsl(calc(var(--hue) + var(--i) * 37) 55% 55%); } /* guide */ .guide { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; align-items: start; } @media (max-width: 40rem) { .guide { grid-template-columns: 1fr; } } .guide-nav { display: flex; flex-direction: column; gap: 0.25rem; position: sticky; top: 0.5rem; } .guide-link { font-size: 0.9rem; color: var(--fg); text-decoration: none; padding: 0.35rem 0.6rem; border-radius: 0.5rem; border: 1px solid var(--line); background: var(--card); } .guide-link:hover { border-color: var(--accent); } .guide-main { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .guide-p { margin: 0.5rem 0 0; line-height: 1.5; max-width: 46rem; } .legend { margin: 0.5rem 0 0; display: grid; grid-template-columns: 9rem 1fr; gap: 0.35rem 0.8rem; font-size: 0.9rem; } .legend dt { font-weight: 600; } .legend dd { margin: 0; color: var(--muted); } .side-h { font-size: 0.95rem; margin-bottom: 0.25rem; } /* ── compose ────────────────────────────────────────────────────────── */ .song-name { font: inherit; font-size: 1rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); color: var(--fg); min-width: 12rem; } .saved { font-size: 0.75rem; color: var(--muted); margin-left: auto; } .seq-pos { font-variant-numeric: tabular-nums; font-size: 0.85rem; color: var(--muted); min-width: 9rem; } .seq-controls { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .tempo-wrap { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.4rem; } .tempo-wrap .tool { margin-bottom: 0.5rem; } .tool.is-rec { background: hsl(0 70% 50%); color: #fff; border-color: hsl(0 70% 50%); } .pattern-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.5rem 0; } .chain-h { font-size: 0.95rem; margin-top: 0.5rem; } .chain { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chain-chip { display: inline-flex; align-items: center; gap: 0.1rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.15rem 0.35rem; background: var(--bg); font-size: 0.85rem; } .chain-chip.is-playing { border-color: var(--accent); box-shadow: 0 0 0 2px hsl(var(--hue) 60% 55% / 0.35); } .chip-name { font-weight: 700; padding: 0 0.3rem; } .chip-count { font-variant-numeric: tabular-nums; color: var(--muted); padding: 0 0.15rem; } .chip-move, .chip-rep, .chip-x { font: inherit; font-size: 0.75rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 0; background: transparent; color: var(--fg); cursor: pointer; } .chip-move:hover, .chip-rep:hover, .chip-x:hover { background: var(--line); } .chip-move:disabled, .chip-x:disabled { opacity: 0.3; cursor: default; } .seq-scroll { overflow-x: auto; padding-bottom: 0.4rem; } .seq-grid { display: grid; grid-template-columns: 13rem repeat(var(--steps), minmax(1.55rem, 1fr)); gap: 0.2rem; min-width: calc(13rem + var(--steps) * 1.7rem); } .seq-row { display: contents; } .seq-rowhead { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.15rem 0.4rem 0.15rem 0; min-width: 0; position: sticky; left: 0; background: var(--card); z-index: 1; } .seq-head .seq-rowhead { justify-content: flex-end; } .seq-colhead { text-align: center; font-size: 0.7rem; color: var(--muted); align-self: end; padding-bottom: 0.15rem; border-bottom: 2px solid transparent; } .seq-colhead.is-beat { color: var(--fg); font-weight: 600; } .seq-colhead.is-playhead { border-bottom-color: var(--accent); } .seq-name { display: flex; align-items: center; gap: 0.4rem; font: inherit; font-size: 0.9rem; font-weight: 600; text-align: left; border: 0; background: transparent; color: var(--fg); cursor: pointer; padding: 0; min-width: 0; } .seq-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .seq-swatch { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: hsl(var(--hue) 60% 55%); flex: none; } .seq-key { font-size: 0.7rem; color: var(--muted); width: 0.8rem; flex: none; font-variant-numeric: tabular-nums; } .seq-meta { font-size: 0.7rem; color: var(--muted); padding-left: 1.1rem; } .seq-ms { display: flex; gap: 0.25rem; padding-left: 1.1rem; } .mini { font: inherit; font-size: 0.65rem; font-weight: 700; width: 1.4rem; height: 1.2rem; border: 1px solid var(--line); border-radius: 0.3rem; background: var(--bg); color: var(--muted); cursor: pointer; } .mini.is-on { background: var(--accent); color: var(--bg); border-color: var(--accent); } .seq-row.is-muted .seq-cell { opacity: 0.35; } .seq-cell { position: relative; height: 2.6rem; border: 1px solid var(--line); border-radius: 0.35rem; background: var(--bg); padding: 0; cursor: pointer; overflow: hidden; touch-action: none; } .seq-cell.is-beat { border-color: hsl(var(--hue) 40% 50% / 0.5); } .seq-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .seq-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: hsl(var(--hue) 60% 55%); transition: height 0.08s; } .seq-cell.is-on { border-color: hsl(var(--hue) 60% 55%); } .seq-cell.is-playhead { box-shadow: inset 0 0 0 2px var(--accent); } .seq-cell.is-on.is-playhead .seq-fill { filter: brightness(1.3); } .picker { margin-top: 0.75rem; } @media (prefers-reduced-motion: reduce) { .seq-fill { transition: none; } } /* ── my boards, import, riff ────────────────────────────────────────── */ .tab-sep { width: 1px; align-self: stretch; background: var(--line); margin: 0 0.2rem; flex: none; } .pack-tab.is-mine { border-left-color: hsl(48 80% 55%); } .pack-tab.is-new { border-left-width: 1px; color: var(--muted); } .pad.is-empty { border-style: dashed; background: transparent; color: var(--muted); justify-content: center; align-items: center; font-size: 1.4rem; } .pads.is-editing .pad { outline: 2px dashed hsl(var(--hue) 60% 55% / 0.5); outline-offset: -4px; cursor: cell; } .pad.is-missing { opacity: 0.45; } .sheet-wide { width: min(38rem, calc(100vw - 2rem)); } .cue-grid { display: flex; flex-wrap: wrap; gap: 0.35rem; max-height: 14rem; overflow-y: auto; padding: 0.25rem 0; } .cue-chip { font: inherit; font-size: 0.85rem; padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--fg); cursor: pointer; } .cue-chip:hover { border-color: var(--accent); } .cue-chip.is-picked { background: hsl(var(--hue) var(--pad-s) var(--pad-l)); border-color: var(--accent); font-weight: 600; } .code-in { font: 0.8rem ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0.5rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); color: var(--fg); width: 100%; resize: vertical; } .riff-card { margin-top: 1rem; } .riff-card .card-h .ctl-hint { margin-left: auto; font-weight: 400; } /* ── composer ───────────────────────────────────────────────────────── */ .layer-tools { margin-left: auto; display: inline-flex; gap: 0.25rem; } .layer .card-h select { font: inherit; font-weight: 600; padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: 0.5rem; background: var(--bg); color: var(--fg); } .lab-side .tool { margin-top: 0.4rem; } /* ── daily kit, jam, render ─────────────────────────────────────────── */ .pack-tab.is-daily { border-left-color: hsl(300 60% 60%); } .pad.is-empty.is-fixed { opacity: 0.25; pointer-events: none; } .jam-card { margin-top: 1rem; } .jam-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line); } .jam-dot.is-connected { background: hsl(140 60% 50%); } .jam-dot.is-interrupted, .jam-dot.is-connecting { background: hsl(40 80% 55%); } .render-status { min-width: 6rem; } /* ── welcome ────────────────────────────────────────────────────────── */ .welcome { margin: 0 0 1rem; border-color: hsl(var(--hue) 60% 55% / 0.5); } .welcome .card-sub { max-width: 52rem; } .welcome .tool { margin-top: 0.4rem; }