/* ============================================================================ My Pocket Studio design system ---------------------------------------------------------------------------- One spine, three surfaces. Set data-surface on : Keepsake — personalized song gifts Console — beat in, chorus out (producers) Instrument — lyric writing THE RULE: everything structural lives in §1–§2 and is identical on every surface. A surface may only redefine the tokens in §3. If you find yourself writing a component rule scoped to one surface, the token set is missing something — add the token instead. That discipline is what keeps three looks reading as one company. ========================================================================== */ /* ===== §1 INVARIANTS ==================================================== */ :root { /* Type scale — major third (1.25). Same ratio on every surface. */ --t-xs: 0.72rem; --t-sm: 0.84rem; --t-base: 1rem; --t-md: 1.25rem; --t-lg: 1.6rem; --t-xl: 2rem; --t-2xl: 2.6rem; /* Spacing — 4px base. */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --measure: 34rem; /* readable line length */ --shell: 42rem; /* flow column */ --shell-wide: 62rem; /* landing column */ /* Motion — one timing function everywhere. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --fast: 140ms; --slow: 380ms; /* Utility face is shared; display and body are per-surface. */ --f-mono: "SF Mono", Menlo, ui-monospace, monospace; } * { box-sizing: border-box; } /* The hidden attribute must always win — without this, any class that sets display (flex, grid, block) silently overrides it and "hidden" UI shows. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--f-body); font-size: var(--t-base); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ===== §2 COMPONENT ANATOMY ============================================= */ /* Identical structure on every surface — only tokens differ. */ .shell { max-width: var(--shell); margin: 0 auto; padding: 0 var(--s-5) var(--s-8); text-align: var(--align, left); } .shell .lede, .shell .review { margin-left: var(--align-gutter, 0); margin-right: var(--align-gutter, 0); } .shell-wide { max-width: var(--shell-wide); margin: 0 auto; padding: 0 var(--s-5) var(--s-8); } /* The desk uses the whole window — maximise it and the session grows with it. Same rule on a phone: the layout is fluid, so there is one app, not two. */ .shell-full { max-width: none; width: 100%; padding: 0 var(--s-5) var(--s-8); } body[data-full] .appbar-inner { max-width: none; } /* --- masthead --- */ .masthead { max-width: var(--shell); margin: 0 auto; padding: var(--s-5) var(--s-5) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); } .wordmark { font-family: var(--f-display); font-size: var(--t-base); font-weight: var(--w-display); letter-spacing: var(--ls-mark); text-transform: var(--tt-mark); color: var(--ink); text-decoration: none; white-space: nowrap; } .masthead-wide { max-width: var(--shell-wide); } .wordmark-power { display: block; font-family: var(--f-mono); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 1px; } .powered-line { margin-top: var(--s-6); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--faint); } .surface-nav { display: flex; gap: var(--s-4); font-size: var(--t-sm); color: var(--muted); white-space: nowrap; } @media (max-width: 560px) { .masthead { flex-wrap: wrap; } .status-pill { display: none; } } .surface-nav a { color: inherit; text-decoration: none; transition: color var(--fast) var(--ease); } .surface-nav a:hover, .surface-nav a[aria-current="page"] { color: var(--accent); } .status-pill { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* --- headings --- */ .display { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(1.6rem, 4.6vw, var(--t-2xl)); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: var(--tt-display); margin: 0 0 var(--s-3); text-wrap: balance; } .display-sm { font-size: clamp(1.4rem, 3.6vw, var(--t-lg)); } .lede { margin: 0 0 var(--s-6); color: var(--muted); max-width: var(--measure); } .eyebrow { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3); } .label { display: block; font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-2); } /* --- fields --- */ .field { display: block; margin-bottom: var(--s-5); } input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]), textarea, select { width: 100%; font: inherit; color: var(--ink); background: var(--field-bg); border: var(--field-border); border-radius: var(--r-field); padding: var(--s-3) var(--s-4); transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); } input::placeholder, textarea::placeholder { color: var(--faint); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); } .field-lg { font-family: var(--f-display); font-size: var(--t-md); } /* --- chips --- */ .chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .chip { font: inherit; font-family: var(--f-chip); font-size: var(--t-sm); letter-spacing: var(--ls-chip); text-transform: var(--tt-chip); cursor: pointer; background: var(--chip-bg); color: var(--muted); border: var(--field-border); border-radius: var(--r-chip); padding: var(--s-2) var(--s-4); transition: all var(--fast) var(--ease); } .chip:hover { color: var(--ink); border-color: var(--line-strong); } .chip[aria-checked="true"] { background: var(--chip-on-bg); border-color: var(--chip-on-border); color: var(--chip-on-ink); } /* --- buttons --- */ .btn { font: inherit; font-family: var(--f-chip); font-weight: 600; font-size: var(--t-sm); letter-spacing: var(--ls-chip); text-transform: var(--tt-chip); cursor: pointer; border-radius: var(--r-field); padding: var(--s-3) var(--s-5); background: var(--btn-bg); color: var(--btn-ink); border: 1px solid var(--btn-bg); transition: all var(--fast) var(--ease); } .btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); } .btn:disabled { opacity: 0.5; cursor: default; } .btn-quiet { background: transparent; color: var(--muted); border-color: transparent; } .btn-quiet:hover { background: transparent; color: var(--ink); border-color: transparent; } /* --- cards --- */ .card { background: var(--surface); border: var(--card-border); border-radius: var(--r-card); padding: var(--s-5); } /* --- progress --- */ .progress { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-6); } .progress-track { flex: 1; height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; } .progress-fill { display: block; height: 100%; background: var(--accent); transition: width var(--slow) var(--ease); } .progress-count { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* --- audio --- */ audio { width: 100%; } .waveform { display: block; width: 100%; height: 56px; } .timecode { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } /* --- feedback --- */ .error { margin: var(--s-3) 0 0; color: var(--bad); font-size: var(--t-sm); } .ok-text { color: var(--good); } /* --- shared behaviours --- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .step { border: 0; margin: 0; padding: 0; display: none; } .step.is-active { display: block; animation: rise var(--slow) var(--ease) both; } @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* --- write pad --- */ .write-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(15rem, 1fr); gap: var(--s-6); padding-top: var(--s-6); align-items: start; } .write-layout:has(#side[hidden]) { grid-template-columns: 1fr; max-width: 46rem; } @media (max-width: 820px) { .write-layout { grid-template-columns: 1fr; } } .write-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); } .write-title { font-family: var(--f-display); font-size: var(--t-lg); font-weight: var(--w-display); letter-spacing: var(--ls-display); border: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; } .write-editor.no-gutter .write-gutter { display: none; } .write-editor { display: flex; padding: 0; overflow: hidden; min-height: 24rem; } .write-gutter { flex: none; width: 3rem; padding: var(--s-4) 0; text-align: right; overflow: hidden; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 60%, var(--ground)); } .gutter-row { font-family: var(--f-mono); font-size: 0.68rem; line-height: 1.7rem; height: 1.7rem; color: var(--faint); padding-right: var(--s-3); font-variant-numeric: tabular-nums; } .write-editor textarea { flex: 1; border: 0 !important; box-shadow: none !important; border-radius: 0; resize: none; min-height: 24rem; line-height: 1.7rem; padding: var(--s-4) var(--s-5); font-size: 1rem; } .write-hint { color: var(--faint); font-size: var(--t-xs); margin-top: var(--s-3); } .write-side { position: sticky; top: 5rem; } .write-side-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); } .rhyme-cols-stacked { grid-template-columns: 1fr 1fr; } /* --- tools grid --- */ .tools-list { display: grid; gap: var(--s-3); padding-top: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); } .tool-card { display: flex; flex-direction: column; gap: var(--s-2); } .tool-card h2 { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-base); letter-spacing: var(--ls-display); margin: 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); } .tool-price { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); white-space: nowrap; } .tool-price.free { color: var(--good); } .tool-body { margin-top: var(--s-2); } .tool-result { margin-top: var(--s-3); font-size: var(--t-sm); } .tool-result dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.2rem var(--s-4); } .tool-result dt { color: var(--muted); } .tool-result dd { margin: 0; font-variant-numeric: tabular-nums; } .soon { opacity: 0.55; } .gift-footer { margin: var(--s-8) 0 var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--muted); } .gift-footer a { color: var(--accent); text-decoration: none; } .btn.dirty { box-shadow: 0 0 0 3px var(--accent-wash); } .place-wave { display: block; width: 100%; height: 96px; cursor: pointer; border-radius: 6px; } /* Header actions on the write pad: title yields, actions never wrap. */ .write-head { align-items: center; } .write-head .write-title { flex: 1 1 auto; min-width: 0; width: auto; } .write-head > span { flex: none; } .write-head .btn { white-space: nowrap; padding: 0.5rem 1.1rem; } .write-head .chip { white-space: nowrap; } .write-head .edit { white-space: nowrap; } .write-head select { width: auto; padding: 0.45rem 0.6rem; } .tabwrap { position: relative; display: flex; align-items: center; flex: none; } .tab-x { position: absolute; top: -4px; right: -4px; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); font-size: 0.72rem; line-height: 1; display: grid; place-items: center; cursor: pointer; z-index: 2; padding: 0; } .tab-x:hover { color: var(--bad); border-color: var(--bad); } .tab-more { display: flex; align-items: center; gap: 0.45rem; font: inherit; font-size: var(--t-sm); font-weight: 550; color: var(--muted); background: none; border: 0; padding: var(--s-2) var(--s-4); border-radius: 999px; cursor: pointer; white-space: nowrap; } .tab-more:hover { color: var(--ink); background: var(--accent-wash); } .tabwrap.more { position: sticky; right: 0; margin-left: auto; background: linear-gradient(90deg, transparent, var(--ground) 22%); padding-left: var(--s-4); } .tab-more svg { width: 17px; height: 17px; } .tabbar { overflow-x: auto; scrollbar-width: none; max-width: 100%; } .tabbar::-webkit-scrollbar { display: none; } @media (max-width: 640px) { .tab-more { flex-direction: column; gap: 0.2rem; font-size: 0.66rem; padding: var(--s-1) var(--s-3); border-radius: 10px; } .tab-more svg { width: 21px; height: 21px; } } .dock-menu { position: fixed; z-index: 90; min-width: 13rem; max-height: 60vh; overflow-y: auto; background: color-mix(in srgb, var(--elev, var(--surface)) 96%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.55); padding: 0.35rem; } .dock-menu button { display: flex; align-items: center; gap: 0.6rem; width: 100%; font: inherit; font-size: var(--t-sm); color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 0.5rem 0.7rem; cursor: pointer; text-align: left; } .dock-menu button:hover { background: var(--accent-wash); } .dock-menu button svg { width: 16px; height: 16px; color: var(--muted); flex: none; } .dock-menu hr { border: 0; border-top: 1px solid var(--line); margin: 0.3rem 0; } /* --- hover tips --- */ .tip-bubble { position: fixed; z-index: 120; max-width: 17rem; background: color-mix(in srgb, var(--elev, var(--surface)) 97%, transparent); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.5); padding: 0.5rem 0.7rem; font-size: 0.8rem; line-height: 1.45; pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity 120ms var(--ease), transform 120ms var(--ease); } .tip-lead { display: block; margin-bottom: 0.4rem; } .tip-stack { display: grid; gap: 2px; } .tip-stack i { font-style: normal; font-family: var(--f-mono); font-size: 0.68rem; line-height: 1.5; padding: 1px 0.4rem; border-left: 3px solid var(--tc, var(--accent)); background: color-mix(in srgb, var(--tc, var(--accent)) 12%, transparent); border-radius: 0 3px 3px 0; white-space: nowrap; } .tip-foot { display: block; margin-top: 0.4rem; font-family: var(--f-mono); font-size: 0.62rem; color: var(--faint); } .tip-bubble.below { transform: translateY(-3px); } .tip-bubble.aside { transform: translateX(-3px); } .tip-bubble.aside.show { transform: translateX(0); } .tip-bubble.show { opacity: 1; transform: translateY(0); } /* --- settings --- */ .setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--line); cursor: pointer; } .setting-row:first-of-type { border-top: 0; } .setting-name { display: block; font-weight: 550; } .setting-desc { display: block; color: var(--muted); font-size: var(--t-sm); margin-top: 0.15rem; } .switch { position: relative; flex: none; } .switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .switch i { display: block; width: 46px; height: 27px; border-radius: 999px; background: var(--line-strong); border: 1px solid transparent; transition: background var(--fast) var(--ease); } .switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.4); transition: transform var(--fast) var(--ease); } .switch input:checked + i { background: var(--accent); } .switch input:checked + i::after { transform: translateX(19px); } .t-field.locked { opacity: 0.42; cursor: pointer; position: relative; } .t-field.locked input { pointer-events: none; } .t-field.locked::after { content: '\2191'; font-size: 0.62rem; margin-left: 0.15rem; color: var(--accent); opacity: 0.9; } .preview-bar { display: grid; gap: var(--s-2); margin-bottom: var(--s-4); padding: var(--s-3); border: 1px dashed var(--line-strong); border-radius: 12px; } .preview-flag { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(9.5rem + env(safe-area-inset-bottom)); z-index: 65; display: flex; align-items: center; gap: var(--s-3); padding: 0.4rem 0.5rem 0.4rem 0.9rem; font-size: var(--t-xs); color: var(--ink); background: color-mix(in srgb, var(--accent) 18%, var(--surface)); border: 1px solid var(--accent); border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,0.45); } @media (min-width: 641px) { .preview-flag { bottom: 5.5rem; } } .preview-flag button { font: inherit; font-size: var(--t-xs); color: var(--btn-ink); background: var(--accent); border: 0; border-radius: 999px; padding: 0.25rem 0.7rem; cursor: pointer; } .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s-3); } .plan-card { display: flex; flex-direction: column; gap: 0.3rem; background: var(--surface); border: var(--card-border); border-radius: var(--r-card); padding: var(--s-4); } .plan-card.current { border-color: var(--accent); } .plan-name { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-md); } .plan-price { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--accent); } .plan-price i { font-style: normal; color: var(--muted); } .plan-blurb { margin: 0.2rem 0 0.4rem; font-size: var(--t-sm); color: var(--muted); } .plan-list { list-style: none; margin: 0 0 var(--s-3); padding: 0; font-size: var(--t-sm); color: var(--muted); display: grid; gap: 0.2rem; } .plan-list li::before { content: '\2713 '; color: var(--accent); } .plan-bonus { color: var(--ink); } .plan-card .btn { margin-top: auto; } .plan-current { margin-top: auto; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .tpl-picker { display: flex; gap: var(--s-2); align-items: center; margin-top: var(--s-2); } .tpl-trigger { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font: inherit; color: var(--ink); background: var(--field-bg); border: var(--field-border); border-radius: var(--r-field); padding: var(--s-3) var(--s-4); cursor: pointer; text-align: left; } .tpl-trigger:hover { border-color: var(--accent); } .tpl-trigger i { font-style: normal; color: var(--muted); flex: none; } .tpl-menu { max-width: 22rem; } .tpl-menu button { display: grid; gap: 0.1rem; } .tpl-menu-label { font-weight: 550; } .tpl-menu-sub { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); } .tpl-picker .btn { flex: none; white-space: nowrap; } .pick-all { display: flex; align-items: center; gap: 0.5rem; margin-top: var(--s-4); font-size: var(--t-sm); color: var(--muted); cursor: pointer; user-select: none; } .songs .pick { flex: none; margin-right: 0.2rem; cursor: pointer; } /* Panels that belong over the session, not under it. */ .studio-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 82; width: min(30rem, calc(100vw - 2rem)); max-height: min(78vh, 44rem); overflow-y: auto; box-shadow: 0 24px 70px rgba(0,0,0,0.6); } .studio-modal.wide { width: min(52rem, calc(100vw - 2rem)); } .modal-veil { position: fixed; inset: 0; z-index: 81; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* The mixer belongs along the bottom of the window, the way a console sits below the arrangement — every strip visible at once, scrolling sideways. */ .studio-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 82; height: min(46vh, 26rem); border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; display: flex; flex-direction: column; box-shadow: 0 -18px 50px rgba(0,0,0,0.55); } .studio-dock .bus-strips { flex: 1; align-items: stretch; gap: 1px; overflow-x: auto; /* The half console is a window onto a taller console: it scrolls up and down inside itself, so the fader tails and name plates at the bottom are reachable without opening the whole desk. */ overflow-y: auto; } /* Every strip is the same height — as tall as the tallest strip's natural content, never shorter. Capping them at the dock's height squashed the fader deck to make room, which is backwards: the strip keeps its size and the half console scrolls to reach the rest of it. align-items: stretch on the row makes the tallest one set the height for all. */ .studio-dock .mx-strip { height: auto; min-height: 100%; } /* The fader deck never gives up its travel to make room for plates. */ .studio-dock .mx-strip .mx-deck { min-height: 8rem; } /* Opened full, the console fills the window and every strip shows its inserts and where it is routed. */ .studio-dock.full { top: 0; height: auto; } .studio-dock.full .mx-strip { width: 86px; } .mx-slot { width: 100%; font-size: 0.58rem; text-align: center; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 0.1rem 0.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mx-slot.out { color: var(--ink); } .mx-inserts { display: grid; gap: 1px; width: 100%; min-height: 2.6rem; } .mx-inserts i { font-style: normal; font-size: 0.55rem; text-align: center; color: var(--btn-ink); background: color-mix(in srgb, var(--accent) 80%, transparent); border-radius: 2px; padding: 0.05rem 0; } .mx-strip { flex: none; width: 74px; display: grid; grid-template-rows: auto auto auto 1fr auto auto auto auto; justify-items: center; gap: 0.25rem; padding: 0.35rem 0.2rem 0; background: var(--ground); border-top: 3px solid var(--tc, var(--accent)); } .mx-strip.muted { opacity: 0.45; } .mx-strip.master { background: var(--surface); border-top-color: var(--accent); } .mx-icon { color: color-mix(in srgb, var(--tc, var(--accent)) 85%, #fff); } .mx-icon svg { width: 17px; height: 17px; } .mx-knob { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 50% 32%, #5a5a62, #2a2a2e); border: 1px solid var(--line-strong); position: relative; cursor: ns-resize; } .mx-knob i { position: absolute; left: 50%; top: 3px; width: 2px; height: 8px; background: #e4e4e8; transform-origin: 50% 10px; transform: translateX(-50%) rotate(var(--turn, 0deg)); } .mx-db { font-family: var(--f-mono); font-size: 0.62rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 0 0.3rem; min-width: 2.6rem; text-align: center; } .mx-fader { -webkit-appearance: slider-vertical; appearance: slider-vertical; width: 22px; height: 100%; min-height: 4rem; padding: 0 !important; border: 0 !important; background: transparent !important; } .mx-btns { display: flex; gap: 0.2rem; } .mx-name { width: 100%; font-size: 0.6rem; text-align: center; color: var(--btn-ink); background: var(--accent); padding: 0.15rem 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mx-num { width: 100%; font-family: var(--f-mono); font-size: 0.55rem; text-align: center; color: var(--faint); padding-bottom: 0.2rem; } .mixer { margin-top: var(--s-3); } .set-group { padding-top: var(--s-3); margin-top: var(--s-3); border-top: 1px solid var(--line); } .set-group:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; } .set-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); } .io-list { display: grid; gap: 0.3rem; } .io-pick { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.55rem; font-size: var(--t-sm); color: var(--ink); cursor: pointer; } .io-pick.unavailable { opacity: 0.45; cursor: default; } .io-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .io-detail { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); } .io-warn { margin: 0.6rem 0 0; padding: var(--s-3); font-size: var(--t-xs); line-height: 1.5; color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; } .io-row { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); font-size: var(--t-sm); color: var(--muted); } .mixer-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); } .bus-strips { display: flex; gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); } .bus-strip { position: relative; flex: none; width: 11.5rem; display: grid; gap: 0.35rem; padding: var(--s-3); background: var(--ground); border: 1px solid var(--line-strong); border-left: 3px solid var(--tc, var(--accent)); border-radius: 10px; } .bus-strip.muted { opacity: 0.5; } .bus-strip.master { border-left-color: var(--accent); background: var(--surface); } .master-name { font-family: var(--f-display); font-weight: var(--w-display); } .bus-count { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--faint); } .route-btn.on { border-color: var(--accent); color: var(--accent); } .route-menu { min-width: 11rem; } /* --- the plugin rack --- */ .fx-btn.on { border-color: var(--accent); color: var(--accent); } /* The plug-in panel floats above everything, and is opaque. * * It was positioned absolutely against whatever it was appended to, and it had * no background of its own. Two faults from one rule. Inside the channel strip, * which is 6.4rem wide and clips what overflows, the panel was cut out of * existence: clicking a plug-in there appeared to do nothing at all. In the * mixer it opened but you could read the desk straight through it, because * nothing had ever given it a surface. * * Fixed to the window and placed by hand, so no ancestor can clip it, and with * a surface of its own so nothing shows through. */ .fx-panel { position: fixed; z-index: 300; width: 17rem; max-height: 70vh; overflow-y: auto; padding: var(--s-3); display: grid; gap: var(--s-3); background: var(--elev, var(--surface)); border: 1px solid var(--line-strong); border-radius: var(--r-card, 10px); box-shadow: 0 18px 52px rgba(0, 0, 0, 0.62); } @media (max-width: 780px) { .fx-panel { width: min(17rem, 92vw); } } .fx-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .fx-all { display: flex; align-items: center; gap: 0.45rem; font-size: var(--t-xs); color: var(--muted); cursor: pointer; } .fx-all .switch i { width: 34px; height: 20px; } .fx-all .switch i::after { width: 15px; height: 15px; top: 2px; left: 2px; } .fx-all .switch input:checked + i::after { transform: translateX(14px); } /* Bypassed: the settings are all still there, just out of the path. */ .fx-panel.bypassed .fx-unit { opacity: 0.4; } .fx-presets .chip { font-size: var(--t-xs); padding: 0.25rem 0.6rem; } .fx-unit { display: grid; gap: 0.3rem; padding-top: var(--s-2); border-top: 1px solid var(--line); } .fx-on { display: flex; align-items: center; gap: 0.45rem; font-size: var(--t-sm); font-weight: 600; cursor: pointer; } .fx-knob { display: grid; grid-template-columns: 4.6rem 1fr 3.4rem; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--muted); } .fx-knob input[type="range"] { width: 100%; } .fx-knob select { padding: 0.15rem 0.3rem; font-size: var(--t-xs); } .fx-knob b { font-family: var(--f-mono); font-weight: 500; color: var(--ink); text-align: right; } .track-head { position: relative; } /* Trim and fade handles. Invisible until the clip is under the pointer, so a busy session stays readable. */ .clip .grip { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; opacity: 0; background: color-mix(in srgb, var(--tc, var(--accent)) 70%, #fff); transition: opacity var(--fast) var(--ease); } .clip .grip.left { left: 0; border-radius: 4px 0 0 4px; } .clip .grip.right { right: 0; border-radius: 0 4px 4px 0; } .clip .fade-grip { position: absolute; top: 0; width: 12px; height: 12px; cursor: col-resize; opacity: 0; background: #fff; border-radius: 50%; transform: translateY(-3px); transition: opacity var(--fast) var(--ease); } .clip .fade-grip.in { left: 2px; } .clip .fade-grip.out { right: 2px; } .clip:hover .grip, .clip:hover .fade-grip { opacity: 0.85; } /* The fade itself, drawn as the shape it is. */ .clip .fade { position: absolute; top: 0; bottom: 0; pointer-events: none; background: linear-gradient(90deg, var(--ground) 0%, transparent 100%); opacity: 0.75; } .clip .fade.in { left: 0; } .clip .fade.out { right: 0; background: linear-gradient(270deg, var(--ground) 0%, transparent 100%); } .beat-license { margin: var(--s-3) 0 0; padding: var(--s-3); background: color-mix(in srgb, var(--accent) 6%, transparent); border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 0 8px 8px 0; font-size: var(--t-xs); line-height: 1.5; color: var(--muted); } .beat-license strong { color: var(--ink); font-weight: 600; } .beat-license.small { font-size: 0.68rem; } .owner-only { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 4px; padding: 0 0.25rem; margin-left: 0.3rem; } .tag-block { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); } .tag-state { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); } .tag-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); } .tag-row .btn { padding: var(--s-2) var(--s-3); } #tag-record.recording { color: var(--bad, #e5484d); border-color: currentColor; background: color-mix(in srgb, var(--bad, #e5484d) 12%, transparent); } .tag-level { display: grid; grid-template-columns: 3.2rem 1fr 4rem; align-items: center; gap: var(--s-2); font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s-2); } .tag-level b { font-family: var(--f-mono); font-weight: 500; color: var(--ink); text-align: right; } .tag-auto { display: flex; align-items: center; gap: 0.5rem; font-size: var(--t-sm); color: var(--muted); cursor: pointer; } .beat-library { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); } .beat-lib-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); } .beat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); } .beat-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); background: var(--ground); border: 1px solid var(--line); border-radius: 10px; } .beat-play { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: 0.7rem; cursor: pointer; display: grid; place-items: center; padding: 0; } .beat-play:hover { border-color: var(--accent); color: var(--accent); } .beat-info { flex: 1; min-width: 0; display: grid; } .beat-name { font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .beat-sub { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .beat-target { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-2) 0 var(--s-3); } .beat-target-label { font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); } .beat-pick { position: absolute; z-index: 50; margin-top: 0.4rem; min-width: 15rem; max-height: 17rem; overflow-y: auto; padding: var(--s-3); box-shadow: 0 12px 40px rgba(0,0,0,0.5); } .beat-pick-row { display: grid; width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 0.4rem 0.5rem; cursor: pointer; } .beat-pick-row:hover { background: var(--accent-wash); } .beat-plan { margin: 0 0 var(--s-4); font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--muted); } .tool-saverow { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); } .tool-saverow .save-name { flex: 1; min-width: 0; font: inherit; font-size: var(--t-sm); color: var(--ink); background: var(--field-bg, var(--ground)); border: 1px solid var(--line-strong); border-radius: 8px; padding: 0.45rem 0.6rem; } .tool-saved { margin-top: var(--s-3); } .tool-saved summary { cursor: pointer; font-size: var(--t-sm); color: var(--muted); user-select: none; } .tool-saved summary:hover { color: var(--ink); } .tool-saved .save-count::before { content: '('; } .tool-saved .save-count::after { content: ')'; } .tool-saved .songs { margin-top: var(--s-2); } .save-del { font: inherit; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 0 0.3rem; } .save-del:hover { color: var(--bad); } .tools-list.solo { grid-template-columns: minmax(0, 34rem); justify-content: center; padding-top: var(--s-6); } /* --- pin to tabs --- */ .pin-btn { font: inherit; font-size: 0.95rem; background: none; border: 0; color: var(--faint); cursor: pointer; padding: 0 0.2rem; margin-left: 0.4rem; transition: color var(--fast) var(--ease), transform var(--fast) var(--ease); } .pin-btn:hover { color: var(--accent); transform: scale(1.15); } .pin-btn.on { color: var(--accent); } .focus-card { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-wash); } /* --- home dashboard --- */ .hb-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin: var(--s-5) 0 var(--s-4); } .hb-hello { font-family: var(--f-display); font-weight: var(--w-display); font-size: clamp(1.4rem, 3.5vw, 1.9rem); letter-spacing: var(--ls-display); } .hb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-3); } .hb-tile { display: flex; flex-direction: column; gap: 0.35rem; text-decoration: none; color: inherit; text-align: left; cursor: pointer; font: inherit; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); position: relative; overflow: hidden; } .hb-tile:hover { border-color: var(--accent); transform: translateY(-2px); } .hb-wide { grid-column: span 2; } @media (max-width: 700px) { .hb-wide { grid-column: span 1; } } .hb-big { font-family: var(--f-display); font-weight: var(--w-display); font-size: 1.25rem; letter-spacing: var(--ls-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hb-meta { color: var(--muted); font-size: var(--t-sm); } .hb-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 0.4rem; background: color-mix(in srgb, var(--ico, var(--accent)) 15%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ico, var(--accent)) 32%, transparent); color: color-mix(in srgb, var(--ico, var(--accent)) 80%, #ffffff); flex: none; } .hb-ico svg { width: 22px; height: 22px; } .hb-lanes { position: absolute; right: var(--s-4); top: 50%; transform: translateY(-50%); width: 34%; display: flex; flex-direction: column; gap: 6px; opacity: 0.65; } .hb-lanes i { height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--tc) 45%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tc) 70%, transparent); } .hb-lanes i:nth-child(2) { width: 70%; } .hb-lanes i:nth-child(3) { width: 85%; } .msg-dot { position: absolute; top: -2px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); border: 2px solid var(--ground); } /* --- Lumen: bottom centre, every screen. Her signature. --- */ .lumen-orb { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(4.3rem + env(safe-area-inset-bottom)); z-index: 70; width: 58px; height: 58px; border-radius: 50%; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; filter: drop-shadow(0 6px 18px rgba(0,0,0,0.5)) drop-shadow(0 0 12px rgba(11,122,96,0.35)); transition: transform var(--fast) var(--ease), filter var(--fast) var(--ease); } .lumen-face { width: 100%; height: 100%; border-radius: 50%; display: block; grid-area: 1 / 1; animation: lumen-breathe 4.4s var(--ease) infinite; user-select: none; -webkit-user-drag: none; } .lumen-face.sm { width: 22px; height: 22px; animation: none; } @media (min-width: 641px) { .lumen-orb { bottom: 1.1rem; } } .lumen-orb:hover { transform: translateX(-50%) translateY(-2px); } .lumen-orb.active { filter: drop-shadow(0 6px 20px rgba(0,0,0,0.55)) drop-shadow(0 0 18px rgba(212,175,55,0.5)); } .lumen-ring { grid-area: 1 / 1; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(212, 175, 55, 0.55); animation: lumen-pulse 4.4s var(--ease) infinite; pointer-events: none; } @keyframes lumen-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } @keyframes lumen-pulse { 0%, 100% { transform: scale(1); opacity: 0.45; } 50% { transform: scale(1.28); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .lumen-face, .lumen-ring { animation: none; } } .lumen-sheet { position: fixed; left: 50%; bottom: 0; z-index: 75; width: min(34rem, 100vw); max-height: min(78vh, 40rem); transform: translateX(-50%) translateY(102%); display: flex; flex-direction: column; background: color-mix(in srgb, var(--surface) 97%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -14px 50px rgba(0,0,0,0.55); transition: transform var(--slow) var(--ease); padding-bottom: env(safe-area-inset-bottom); } .lumen-sheet.open { transform: translateX(-50%) translateY(0); } .lumen-grab { padding: 0.55rem 0 0.2rem; display: grid; place-items: center; } .lumen-grab span { width: 34px; height: 4px; border-radius: 2px; background: var(--line-strong); } .lumen-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-4) var(--s-2); border-bottom: 1px solid var(--line); } .lumen-mark { display: flex; align-items: center; gap: 0.5rem; font-family: var(--f-display); font-weight: var(--w-display); } .lumen-close { font-size: 1.1rem; line-height: 1; color: var(--muted); padding: 0.2rem 0.6rem; } .lumen-close:hover { color: var(--ink); } .lumen-log { flex: 1; overflow-y: auto; padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); min-height: 9rem; } .lumen-msg p { margin: 0; padding: var(--s-3) var(--s-4); border-radius: 14px; font-size: var(--t-sm); line-height: 1.55; max-width: 90%; white-space: pre-wrap; } .lumen-msg.lumen p { background: var(--elev, color-mix(in srgb, var(--ink) 7%, var(--surface))); border: 1px solid var(--line); border-bottom-left-radius: 5px; } .lumen-msg.me { align-items: flex-end; display: flex; flex-direction: column; } .lumen-msg.me p { background: var(--accent); color: #fff; border-bottom-right-radius: 5px; } .lumen-msg.thinking p { color: var(--faint); letter-spacing: 0.2em; } .lumen-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); } .lumen-acts .chip { text-decoration: none; } .lumen-ask { display: flex; gap: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); border-top: 1px solid var(--line); } .lumen-input { flex: 1; min-width: 0; } .lumen-send { flex: none; padding: var(--s-3) var(--s-4); } /* --- the sliding pad --- */ .pad-tab { position: fixed; right: var(--s-4); bottom: calc(4.6rem + env(safe-area-inset-bottom)); z-index: 60; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.45rem 1.1rem 0.5rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; box-shadow: 0 4px 18px rgba(0,0,0,0.35); transition: transform var(--slow) var(--ease), opacity var(--slow) var(--ease); } @media (min-width: 641px) { .pad-tab { bottom: 1.1rem; } } .pad-tab.hidden { transform: translateY(140%); opacity: 0; pointer-events: none; } .pad-tab-grip { width: 26px; height: 3px; border-radius: 2px; background: var(--faint); } /* The pad, at whichever size he wants it. * * It sat at z-index 70 under a transport at 75, so the bar he uses to record * was drawn straight over the words he was writing. And it was always most of * the screen: fine on a phone, wrong on a desk, where he wants to see the * timeline and the lyric at once. * * Three sizes now, and it is above the transport in all of them. */ .pad-panel { --pad-alpha: 1; position: fixed; left: 0; right: 0; bottom: 0; top: 9vh; z-index: 210; display: flex; flex-direction: column; background: color-mix(in srgb, var(--ground) calc(var(--pad-alpha) * 100%), transparent); border-top: 1px solid var(--line-strong); border-radius: 16px 16px 0 0; box-shadow: 0 -16px 48px rgba(0,0,0,0.5); transform: translateY(104%); transition: transform 420ms cubic-bezier(0.32, 0.72, 0.22, 1); } .pad-panel.open { transform: translateY(0); } /* Full: the whole screen, for writing and nothing else. */ .pad-panel[data-size="full"] { top: 4vh; } /* Half: the lyric under the timeline, both readable at once. */ .pad-panel[data-size="half"] { top: 52vh; } /* Small: a window the size of a chat, parked out of the way. It keeps its own corners because it is no longer a sheet rising from the bottom edge. */ .pad-panel[data-size="small"] { left: auto; right: var(--s-4); width: min(23rem, 92vw); top: auto; height: min(28rem, 62vh); bottom: calc(4.6rem + env(safe-area-inset-bottom)); border-radius: 14px; border: 1px solid var(--line-strong); } /* A phone has no room for a choice: the pad is the screen there. */ @media (max-width: 640px) { .pad-panel[data-size="half"], .pad-panel[data-size="small"] { left: 0; right: 0; width: auto; top: 9vh; height: auto; bottom: 0; border-radius: 16px 16px 0 0; } .pad-size { display: none; } } .pad-size { display: inline-flex; gap: 2px; margin-right: var(--s-2); } .pad-size button { font: inherit; font-size: 0.62rem; color: var(--muted); background: transparent; border: 1px solid var(--line); padding: 0.15rem 0.4rem; cursor: pointer; } .pad-size button:first-child { border-radius: 6px 0 0 6px; } .pad-size button:last-child { border-radius: 0 6px 6px 0; } .pad-size button[aria-pressed="true"] { color: var(--ink); background: var(--accent-wash); border-color: var(--accent); } @media (prefers-reduced-motion: reduce) { .pad-panel { transition: none; } .pad-tab { transition: none; } } .pad-grab { padding: 0.55rem 0 0.35rem; display: grid; place-items: center; cursor: grab; } .pad-grab span { width: 42px; height: 4px; border-radius: 3px; background: var(--line-strong); } .pad-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0 var(--s-4) var(--s-2); flex-wrap: wrap; } .pad-title { flex: 1 1 10rem; min-width: 0; font-family: var(--f-display) !important; font-size: 1.05rem !important; font-weight: 650; border: 0 !important; background: transparent !important; padding: 0.2rem 0.3rem !important; box-shadow: none !important; } .pad-actions { display: flex; align-items: center; gap: var(--s-2); flex: none; } .pad-alpha { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); } .pad-alpha input { width: 74px; margin: 0; } .pad-actions .pad-folder { width: auto; padding: 0.4rem 0.5rem; max-width: 9rem; } .pad-actions .btn { padding: 0.45rem 0.95rem; } .pad-text { flex: 1; margin: 0 var(--s-4) var(--s-3); border-radius: var(--r-card) !important; background: color-mix(in srgb, var(--field-bg) calc(var(--pad-alpha) * 100%), transparent) !important; resize: none; font-size: 1.02rem; line-height: 1.7; } .pad-rhymes { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0 var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom)); max-height: 6.5rem; overflow-y: auto; } /* --- messages --- */ .msg-layout { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(0, 1.8fr); gap: var(--s-4); padding-top: var(--s-4); min-height: 60vh; } @media (max-width: 720px) { .msg-layout { grid-template-columns: 1fr; } .msg-layout.chatting .msg-side { display: none; } } .msg-thread-item { display: flex; align-items: center; gap: 0.7rem; width: 100%; font: inherit; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: var(--s-3) var(--s-2); cursor: pointer; color: inherit; } .msg-thread-item:hover { background: var(--surface); } .msg-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); display: grid; place-items: center; font-weight: 650; color: var(--muted); flex: none; overflow: hidden; } .msg-ava img { width: 100%; height: 100%; object-fit: cover; } .msg-prev { min-width: 0; flex: 1; } .msg-prev .name { font-weight: 600; display: block; } .msg-prev .last { color: var(--muted); font-size: var(--t-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .msg-unread { background: var(--accent); color: #fff; border-radius: 999px; font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.5rem; flex: none; } .msg-chat { display: flex; flex-direction: column; min-height: 50vh; } .msg-scroll { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 0.45rem; padding: var(--s-3); } .bubble { max-width: 75%; padding: 0.5rem 0.85rem; border-radius: 16px; font-size: 0.95rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .bubble.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; } .bubble.mine { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; } .bubble time { display: block; font-size: 0.62rem; opacity: 0.6; margin-top: 0.2rem; } .msg-compose { display: flex; gap: var(--s-2); padding: var(--s-3); border-top: 1px solid var(--line); } .msg-compose textarea { flex: 1; resize: none; min-height: 2.7rem; max-height: 8rem; } /* --- avatar --- */ .avatar { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); overflow: hidden; cursor: pointer; display: grid; place-items: center; font-family: var(--f-display); font-weight: 650; font-size: 1.2rem; color: var(--muted); flex: none; padding: 0; } .avatar img { width: 100%; height: 100%; object-fit: cover; } /* --- the desk (multitrack studio) --- */ .studio-top { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 var(--s-3); } .transport { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: linear-gradient(180deg, var(--elev, var(--surface)), var(--surface)); /* One line, always. Everything the artist reaches for mid-take is in reach without hunting a second row; a narrow window scrolls it instead. */ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; /* Stays under the app bar while the session scrolls beneath it — the controls you reach for mid-take should never be somewhere else. */ position: sticky; top: 0; z-index: 30; box-shadow: 0 6px 18px rgba(0,0,0,0.35); } @media (min-width: 641px) { .transport { top: 3.5rem; } } .zoom-pair { display: flex; align-items: center; gap: 0.4rem; font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); } .zoom-pair input[type="range"] { width: 4rem; } .transport::-webkit-scrollbar { display: none; } .transport .btn { white-space: nowrap; padding: var(--s-2) var(--s-3); } .transport .t-field { white-space: nowrap; } .transport #t-bpm { width: 3.4rem; padding: 0.3rem 0.4rem; } /* Volume and pan: just the minus, the number, the plus. Nothing around it. */ .stepper { display: inline-flex; align-items: center; gap: 0.15rem; } .stepper .nudge { font: inherit; font-size: var(--t-sm); line-height: 1; color: var(--muted); background: none; border: 0; padding: 0.1rem 0.25rem; cursor: pointer; } .stepper .nudge:hover { color: var(--ink); } /* The global input rule is specific enough to win otherwise, and it would put a box around a number that should just sit there. */ .stepper input.step-val { border: 0 !important; background: transparent !important; box-shadow: none !important; width: 2.1rem; font-family: var(--f-mono); font-size: var(--t-xs); text-align: center; color: var(--ink); background: none; border: 0; padding: 0; } .stepper input.step-val:focus { outline: none; color: var(--accent); box-shadow: none; } .t-btn { font: inherit; font-size: 0.9rem; width: 38px; height: 34px; display: grid; place-items: center; background: var(--field-bg); color: var(--ink); border: 1px solid var(--line); border-radius: 7px; cursor: pointer; transition: all var(--fast) var(--ease); } .t-btn:hover { border-color: var(--line-strong); } .t-btn.rec { color: var(--bad); font-size: 1.1rem; } .t-btn.rec.recording { background: var(--bad); color: #fff; animation: recpulse 1.2s ease-in-out infinite; } @keyframes recpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,84,74,0.5); } 50% { box-shadow: 0 0 0 7px rgba(245,84,74,0); } } .timecode.big { background: var(--lcd-bg, #101010); color: var(--lcd-ink, #f5b73d); border: 1px solid #000; border-radius: 5px; padding: 0.35rem 0.8rem; font-size: 1.05rem; letter-spacing: 0.06em; box-shadow: inset 0 1px 4px rgba(0,0,0,0.7); min-width: 6.5rem; text-align: center; } .t-sep { width: 1px; height: 26px; background: var(--line); } .t-field { display: flex; align-items: center; gap: 0.45rem; font-size: var(--t-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .t-field input[type="number"] { width: 4.2rem; padding: 0.35rem 0.5rem; } /* --- arrangement area --- */ .daw { display: flex; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin-top: var(--s-3); background: var(--ground); min-height: 220px; } .daw-heads { flex: none; /* Wide enough for the arm, mute, solo, volume and pan to sit side by side without any of them collapsing. */ width: 248px; background: linear-gradient(90deg, var(--surface), var(--elev, var(--surface))); border-right: 1px solid var(--line-strong); z-index: 2; } .ruler-spacer { height: 38px; border-bottom: 1px solid var(--line); } .track-head { height: var(--lane-h, 68px); padding: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); display: flex; align-items: stretch; /* Real gear reads top-lit: a little light at the top, shadow at the foot. */ background: linear-gradient(180deg, #2b2b30, #232327); } .th-num { flex: none; width: 1.7rem; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 0.62rem; color: var(--faint); background: rgba(0, 0, 0, 0.22); border-right: 3px solid var(--tc, transparent); } .th-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; padding: 0 0.45rem; } .th-top { display: flex; align-items: center; gap: 0.4rem; min-width: 0; } .th-icon { flex: none; display: flex; color: color-mix(in srgb, var(--tc, var(--accent)) 80%, #fff); } .th-icon svg { width: 16px; height: 16px; } .th-controls { display: flex; align-items: center; gap: 0.3rem; } .th-btn { flex: none; width: 1.15rem; height: 1.15rem; display: grid; place-items: center; font: inherit; font-size: 0.58rem; font-weight: 700; color: var(--muted); background: linear-gradient(180deg, #3a3a40, #2d2d32); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); cursor: pointer; padding: 0; } .th-btn:hover { color: var(--ink); } .th-btn.on { color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18); } .th-btn.on.mute { background: linear-gradient(180deg, #8f8f96, #74747a); color: #16161a; } .th-btn.on.solo { background: linear-gradient(180deg, #e8b42c, #c8931a); color: #16161a; } .th-btn.arm.on { background: linear-gradient(180deg, #f0565a, #cf3439); } .track-head.armed { background: linear-gradient(180deg, #3a2b2d, #2b2325); } .track-head.ghost { justify-content: center; align-items: flex-start; border-left: 0; } .th-row { display: flex; align-items: center; gap: 0.45rem; } .th-row .stepper { flex: none; } .th-name { border: 0 !important; background: transparent !important; padding: 0.1rem 0.2rem !important; font-size: 0.85rem !important; font-weight: 600; min-width: 0; } .arm { font: inherit; color: var(--bad); background: none; border: 1px solid var(--line); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; cursor: pointer; font-size: 0.7rem; flex: none; } .chip.mini { padding: 0.1rem 0.5rem; font-size: 0.68rem; border-radius: 4px; font-weight: 600; } .chip.mini.on { background: var(--accent); border-color: var(--accent); color: #fff; } .track-head input[type="range"] { margin: 0; flex: 1; min-width: 0; } .track-head input[type="range"].pan { max-width: 46px; } .daw-scroll { flex: 1; overflow-x: auto; overflow-y: hidden; position: relative; } /* Three zones live in here — the cycle bar, the shape of the song, and the markers — and at 26px they were each too thin to see or to hit. */ .ruler { display: block; height: 38px; border-bottom: 1px solid var(--line); } .lane { height: var(--lane-h, 68px); border-bottom: 1px solid var(--line); position: relative; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--px-sec, 60px) - 1px), rgba(255,255,255,0.02) calc(var(--px-sec, 60px) - 1px), rgba(255,255,255,0.02) var(--px-sec, 60px)); } /* Regions: the Logic-style colored blocks. */ .clip { position: absolute; top: 5px; bottom: 5px; border-radius: 5px; background: color-mix(in srgb, var(--tc, var(--accent)) 30%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tc, var(--accent)) 65%, transparent); overflow: hidden; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; } .clip:active { cursor: grabbing; } .clip canvas { position: absolute; inset: 18px 0 0 0; width: 100%; height: calc(100% - 18px); } .clip-label { position: absolute; top: 0; left: 0; right: 0; height: 18px; padding: 0 6px; font-size: 0.64rem; font-weight: 600; line-height: 18px; color: #fff; background: color-mix(in srgb, var(--tc, var(--accent)) 55%, var(--surface)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 1.5px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.6); pointer-events: none; z-index: 3; } @media (max-width: 640px) { /* Narrow enough that the controls stack rather than shrink — a phone should still show the same buttons, just in two rows. */ .daw-heads { width: 168px; } .th-row { flex-wrap: wrap; row-gap: 0.2rem; } .stepper .step-val { width: 1.8rem; } } /* --- back office --- */ .admin-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); } .admin-table th { text-align: left; font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); font-weight: 600; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line-strong); } .admin-table td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; } .admin-table select { width: auto; padding: var(--s-1) var(--s-2); } .appbar .account-link { display: flex; align-items: center; color: var(--muted); } .appbar .account-link:hover, .appbar .account-link[aria-current="page"] { color: var(--accent); } .appbar .account-link svg { width: 19px; height: 19px; } /* --- fix a line --- */ .fixline-lines { list-style: none; margin: 0; padding: 0; max-height: 13rem; overflow-y: auto; border: var(--card-border); border-radius: var(--r-field); } .fixline-lines li { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-2) var(--s-3); font-size: var(--t-sm); cursor: pointer; border-bottom: 1px solid var(--line); } .fixline-lines li:last-child { border-bottom: 0; } .fixline-lines li:hover { background: var(--accent-wash); } .fixline-lines li[aria-selected="true"] { background: var(--accent-wash); box-shadow: inset 3px 0 0 var(--accent); } .fixline-lines .t { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--faint); flex: none; font-variant-numeric: tabular-nums; } /* --- studio home --- */ .studio-hero { padding: var(--s-7) 0 var(--s-6); max-width: 40rem; } .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--s-4); margin-bottom: var(--s-7); } .tool { display: flex; flex-direction: column; gap: var(--s-3); text-decoration: none; color: inherit; transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease); } a.tool:hover { border-color: var(--accent); transform: translateY(-2px); } .tool-name { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-md); letter-spacing: var(--ls-display); text-transform: var(--tt-display); margin: 0; } .tool-desc { margin: 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.6; } .tool-cta { margin-top: auto; font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); } .tool-soon { opacity: 0.6; } .tool-soon .tool-cta { color: var(--faint); } .powered { margin-bottom: var(--s-8); } .powered-card { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); text-decoration: none; color: inherit; transition: border-color var(--fast) var(--ease); } .powered-card:hover { border-color: var(--accent); } .powered-name { font-family: var(--f-display); font-size: var(--t-base); letter-spacing: var(--ls-display); text-transform: var(--tt-display); display: block; margin-bottom: var(--s-1); } @media (max-width: 560px) { .powered-card { flex-direction: column; align-items: flex-start; } } /* --- rhyme dictionary --- */ .rhyme-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); gap: var(--s-7); padding-top: var(--s-6); } @media (max-width: 820px) { .rhyme-layout { grid-template-columns: 1fr; } } .rhyme-search { position: relative; margin-bottom: var(--s-5); } .typeahead { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin: var(--s-1) 0 0; padding: var(--s-1); list-style: none; background: var(--surface); border: var(--card-border); border-radius: var(--r-field); } .typeahead button { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-radius: calc(var(--r-field) - 2px); padding: var(--s-2) var(--s-3); cursor: pointer; } .typeahead button:hover { background: var(--accent-wash); } .word-info { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); } .word-name { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-lg); letter-spacing: var(--ls-display); } .rhyme-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); } @media (max-width: 560px) { .rhyme-cols { grid-template-columns: 1fr; } } .rhyme-list { list-style: none; margin: 0; padding: 0; } .rhyme-list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); padding: calc(var(--s-1) + 1px) 0; } .rhyme-word { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; border-radius: 3px; transition: color var(--fast) var(--ease); } .rhyme-word:hover { color: var(--accent); } .rhyme-word.added { color: var(--good); } .rhyme-meta { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .rhyme-empty { color: var(--muted); font-size: var(--t-sm); font-style: italic; } .rhyme-pad textarea { resize: vertical; margin-bottom: var(--s-2); } /* --- drop zone --- */ .drop { text-align: center; padding: var(--s-6) var(--s-5); color: var(--muted); font-size: var(--t-sm); cursor: pointer; border-style: dashed; transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); } .drop:hover, .drop.drag { border-color: var(--accent); color: var(--ink); } /* --- sliders --- */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; margin: var(--s-3) 0; background: var(--line-strong); border-radius: 2px; outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: none; cursor: pointer; } input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-wash); } /* --- review list (questionnaire summary) --- */ .review { margin: 0 0 var(--s-4); border-top: 1px solid var(--line); } .review > div { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: var(--s-4); align-items: baseline; padding: var(--s-3) 0; border-bottom: 1px solid var(--line); } .review dt { font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); } .review dd { margin: 0; color: var(--ink); } .review dd ul { margin: 0; padding-left: var(--s-4); } .review dd li { margin-bottom: var(--s-1); } .review dd .none { color: var(--faint); font-style: italic; } .edit { font: inherit; font-size: var(--t-sm); background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; } /* --- progress stages (studio) --- */ .stages { list-style: none; margin: 0 0 var(--s-6); padding: 0; } .stages li { position: relative; padding: var(--s-2) 0 var(--s-2) var(--s-6); color: var(--faint); font-size: var(--t-sm); transition: color 200ms var(--ease); } .stages li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: all 200ms var(--ease); } .stages li.done { color: var(--muted); } .stages li.done::before { background: var(--good); } .stages li.active { color: var(--ink); font-weight: 600; } .stages li.active::before { background: var(--accent); animation: throb 1.7s ease-in-out infinite; } @keyframes throb { 0%, 100% { box-shadow: 0 0 0 3px var(--accent-wash); } 50% { box-shadow: 0 0 0 7px var(--accent-wash); } } /* --- takes (delivered audio) --- */ .takes { margin-bottom: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); } .take { background: var(--surface); border: var(--card-border); border-radius: var(--r-card); padding: var(--s-4) var(--s-5); } .take-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); margin-bottom: var(--s-3); } .take-name { font-family: var(--f-display); font-weight: var(--w-display); font-size: var(--t-base); letter-spacing: var(--ls-display); } .take-meta { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } /* --- library list --- */ .section-label { font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 0 0 var(--s-3); } .songs { list-style: none; margin: 0; padding: 0; } .songs li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); } .songs li:last-child { border-bottom: 0; } .songs .name { color: var(--ink); } .songs a { color: inherit; text-decoration: none; } .songs a:hover .name { color: var(--accent); } .songs .state { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .songs .state.ready { color: var(--good); } .songs .state.failed { color: var(--bad); } /* --- controls row --- */ .controls { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); justify-content: var(--controls-justify, flex-start); } .controls .btn { margin-left: auto; order: 2; } .controls .btn-quiet { order: 1; padding-left: 0; margin-left: 0; } @media (max-width: 520px) { .review > div { grid-template-columns: 1fr auto; } .review dt { grid-column: 1 / -1; margin-bottom: calc(var(--s-2) * -1); } } /* ===== §3 SURFACES ====================================================== */ /* The only place a surface is allowed to differ. */ /* --- APP · the unified studio surface ----------------------------------- The product. System font stack means SF on Apple devices, Roboto on Android — native feel on both app stores' hardware. */ [data-surface="app"] { /* Studio charcoal — committed dark, the way a control room stays dark. */ --ground: #0d0e10; --surface: #111214; --elev: #16181b; --ink: #eceef1; --muted: #9aa1a9; --faint: #666d75; --line: #1b1e21; --line-strong: #2a2e33; --accent: #5b7cfa; --accent-wash: rgba(91, 124, 250, 0.13); --good: #37d267; --bad: #f5544a; /* LCD readout — the transport's amber-on-black display. */ --lcd-bg: #101010; --lcd-ink: #f5b73d; /* Region palette — one per track, cycling. */ --tc-0: #4f9cf7; --tc-1: #4fc678; --tc-2: #3fc4c4; --tc-3: #ef9b45; --tc-4: #a98cf2; --tc-5: #ef6a6a; --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif; --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; --f-label: var(--f-body); --f-chip: var(--f-body); --w-display: 650; --lh-display: 1.08; --ls-display: -0.025em; --tt-display: none; --ls-mark: -0.01em; --tt-mark: none; --ls-label: 0.08em; --ls-chip: 0; --tt-chip: none; --r-field: 9px; --r-chip: 999px; --r-card: 14px; --field-bg: rgba(255, 255, 255, 0.045); --field-border: 1px solid var(--line); --card-border: 1px solid var(--line); --chip-bg: rgba(255, 255, 255, 0.045); --chip-on-bg: var(--accent); --chip-on-border: var(--accent); --chip-on-ink: #ffffff; --btn-bg: var(--accent); --btn-bg-hover: #4a6ae8; --btn-ink: #ffffff; /* Surfaces built from light, not paint. * * The landing page makes every panel a thin wash of white over a near-black * ground, with a one-pixel edge of the same. The studio painted opaque greys * instead, and beside it looked heavier and flatter. These are the two values * the whole look rests on. */ --glass: rgba(255, 255, 255, 0.045); --edge: rgba(255, 255, 255, 0.07); } /* --- app navigation: top bar on wide screens, tab bar on narrow --- */ .appbar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--ground) 85%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .appbar-inner { max-width: var(--shell-wide); margin: 0 auto; padding: var(--s-3) var(--s-5); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); } /* The balance lives with the account controls, never in the tabs' column. */ .appbar .status-pill { order: 3; flex: none; white-space: nowrap; font-size: 0.62rem; padding-left: var(--s-2); border-left: 1px solid var(--line); color: var(--muted); } .tabbar { display: flex; gap: var(--s-2); } .tabbar a { display: flex; align-items: center; gap: 0.45rem; font-size: var(--t-sm); font-weight: 550; color: var(--muted); text-decoration: none; padding: var(--s-2) var(--s-4); border-radius: 999px; transition: color var(--fast) var(--ease), background var(--fast) var(--ease); } .tabbar a:hover { color: var(--ink); } .tabbar a[aria-current="page"] { color: var(--ink); background: var(--accent-wash); } .tabbar svg { width: 17px; height: 17px; flex: none; } @media (max-width: 640px) { .appbar { top: auto; bottom: 0; border-bottom: 0; border-top: 1px solid var(--line); position: fixed; left: 0; right: 0; } .appbar-inner { padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom)); } .appbar .wordmark { display: none; } .appbar .status-pill { display: none; } .appbar-inner { grid-template-columns: minmax(0, 1fr) auto; } .tabbar { width: 100%; justify-content: flex-start; } .tabbar a { flex-direction: column; gap: 0.2rem; font-size: 0.66rem; padding: var(--s-1) var(--s-3); border-radius: 10px; } .tabbar svg { width: 21px; height: 21px; } body[data-has-tabbar] { padding-bottom: 5rem; } } /* --- GIFT · "Keepsake" --------------------------------------------------- Plum and brass, Didot cut large. Single-theme by choice: a keepsake has one look, and a light mode would make it feel like software. */ [data-surface="gift"] { --ground: #221d17; --surface: #1a1611; --ink: #f2ede4; --muted: #b3a89a; --faint: #7d7468; --line: rgba(242, 237, 228, 0.16); --line-strong: rgba(242, 237, 228, 0.32); --accent: #c9a227; --accent-wash: rgba(201, 162, 39, 0.22); --good: #8fbf9f; --bad: #de8272; --f-display: Didot, "Bodoni 72", Baskerville, "Times New Roman", serif; --f-body: Optima, Candara, "Gill Sans", "Avenir Next", sans-serif; --f-label: var(--f-body); --f-chip: var(--f-body); --w-display: 400; --lh-display: 1.16; --ls-display: 0.005em; --tt-display: none; --ls-mark: 0.42em; --tt-mark: uppercase; --ls-label: 0.3em; --ls-chip: 0.06em; --tt-chip: none; --r-field: 2px; --r-chip: 2px; --r-card: 3px; --field-bg: transparent; --field-border: 1px solid rgba(242, 237, 228, 0.22); --card-border: 1px solid rgba(201, 162, 39, 0.28); --chip-bg: transparent; --chip-on-bg: rgba(201, 162, 39, 0.14); --chip-on-border: var(--accent); --chip-on-ink: var(--accent); --btn-bg: var(--accent); --btn-bg-hover: #b6911f; --btn-ink: #221d17; --align: center; --align-gutter: auto; --controls-justify: center; } /* Centred composition: the chip rows and review grid have to follow the text-align, or they float against an otherwise symmetrical page. */ [data-surface="gift"] .chips { justify-content: center; } [data-surface="gift"] .controls .btn { margin-left: 0; } [data-surface="gift"] .review > div { text-align: left; } [data-surface="gift"] .stages { display: inline-block; text-align: left; } /* --- HOOK · "Console" ---------------------------------------------------- Meter bridge. Two accents so it reads as hardware channels rather than a single pop on black. Dark-committed. */ [data-surface="hook"] { --ground: #0b0d0c; --surface: #14181a; --ink: #e6e9e7; --muted: #8b9694; --faint: #5a6462; --line: #232a2c; --line-strong: #343d3f; --accent: #e8703a; --accent-wash: rgba(232, 112, 58, 0.18); --accent-cool: #4fd1c5; --good: #4fd1c5; --bad: #ff6b6b; --f-display: Futura, Jost, "Century Gothic", "Avenir Next", sans-serif; --f-body: var(--f-mono); --f-label: var(--f-mono); --f-chip: var(--f-mono); --w-display: 500; --lh-display: 1.04; --ls-display: 0.02em; --tt-display: uppercase; --ls-mark: 0.24em; --tt-mark: uppercase; --ls-label: 0.18em; --ls-chip: 0.08em; --tt-chip: uppercase; --r-field: 3px; --r-chip: 3px; --r-card: 6px; --field-bg: #0e1112; --field-border: 1px solid var(--line); --card-border: 1px solid var(--line); --chip-bg: transparent; --chip-on-bg: rgba(232, 112, 58, 0.09); --chip-on-border: var(--accent); --chip-on-ink: var(--accent); --btn-bg: var(--accent); --btn-bg-hover: #d1602e; --btn-ink: #0b0d0c; } /* --- LYRIC · "Instrument" ------------------------------------------------ Precision hardware. The only surface with a real light/dark pair, because it's the one people will sit inside for a long time. */ [data-surface="lyric"] { --ground: #ffffff; --surface: #f4f6f9; --ink: #12141a; --muted: #5b6270; --faint: #9aa2b0; --line: #e2e7ee; --line-strong: #cbd3de; --accent: #a66a0b; --accent-wash: rgba(232, 163, 61, 0.22); --good: #2e7d5b; --bad: #a3352b; --f-display: "Avenir Next", Avenir, system-ui, sans-serif; --f-body: system-ui, -apple-system, "Segoe UI", sans-serif; --f-label: var(--f-mono); --f-chip: var(--f-body); --w-display: 600; --lh-display: 1.08; --ls-display: -0.03em; --tt-display: none; --ls-mark: -0.02em; --tt-mark: none; --ls-label: 0.12em; --ls-chip: 0; --tt-chip: none; --r-field: 7px; --r-chip: 7px; --r-card: 12px; --field-bg: #ffffff; --field-border: 1px solid var(--line); --card-border: 1px solid var(--line); --chip-bg: #ffffff; --chip-on-bg: var(--ink); --chip-on-border: var(--ink); --chip-on-ink: #ffffff; --btn-bg: var(--ink); --btn-bg-hover: #000000; --btn-ink: #ffffff; } @media (prefers-color-scheme: dark) { [data-surface="lyric"] { --ground: #0f1114; --surface: #171a1f; --ink: #e9ecf1; --muted: #98a1b0; --faint: #6b7484; --line: #262b33; --line-strong: #39414d; --accent: #e8a33d; --good: #57b98a; --bad: #e08579; --field-bg: #12151a; --chip-bg: #12151a; --chip-on-bg: var(--accent); --chip-on-border: var(--accent); --chip-on-ink: #0f1114; --btn-bg: var(--accent); --btn-bg-hover: #d8942f; --btn-ink: #0f1114; } } /* --- the desk: track heads that read like studio gear --------------------- Appended as one block. Earlier attempts anchored on selectors that did not exist yet, so the rules were silently dropped — this is the whole set. */ .track-head { height: var(--lane-h, 68px); padding: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); display: flex; align-items: stretch; background: linear-gradient(180deg, #2b2b30, #232327); } .track-head.armed { background: linear-gradient(180deg, #3a2b2d, #2b2325); } .th-num { flex: none; width: 1.7rem; display: flex; align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 0.62rem; color: var(--faint); background: rgba(0, 0, 0, 0.22); border-right: 3px solid var(--tc, transparent); } .th-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 0.3rem; padding: 0 0.45rem; } .th-top { display: flex; align-items: center; gap: 0.4rem; min-width: 0; } .th-icon { flex: none; display: flex; color: color-mix(in srgb, var(--tc, var(--accent)) 80%, #fff); } .th-icon svg { width: 16px; height: 16px; } .th-controls { display: flex; align-items: center; gap: 0.3rem; } .th-btn { flex: none; width: 1.15rem; height: 1.15rem; display: grid; place-items: center; font: inherit; font-size: 0.58rem; font-weight: 700; color: var(--muted); background: linear-gradient(180deg, #3a3a40, #2d2d32); border: 1px solid rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); cursor: pointer; padding: 0; } .th-btn:hover { color: var(--ink); } .th-btn.on { color: #fff; } .th-btn.on.mute { background: linear-gradient(180deg, #8f8f96, #74747a); color: #16161a; } .th-btn.on.solo { background: linear-gradient(180deg, #e8b42c, #c8931a); color: #16161a; } .th-btn.arm.on { background: linear-gradient(180deg, #f0565a, #cf3439); } .ctl { position: relative; display: flex; align-items: center; flex: 1; min-width: 2.4rem; } .ctl:has(.th-knob) { flex: none; } .ctl-read { position: absolute; bottom: calc(100% - 1px); left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 0.58rem; line-height: 1; color: var(--ink); background: #16161a; border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 3px; padding: 0.08rem 0.28rem; white-space: nowrap; opacity: 0; cursor: text; transition: opacity var(--fast) var(--ease); z-index: 4; } .ctl-read.live, .ctl:hover .ctl-read, .mx-strip:hover .ctl-read { opacity: 1; } .ctl-type { width: 3rem; font-family: var(--f-mono); font-size: 0.6rem; text-align: center; color: var(--ink) !important; background: #16161a !important; border: 1px solid var(--accent) !important; border-radius: 3px; padding: 0.05rem 0.2rem !important; } .track-head input[type="range"].th-fader { flex: 1; width: 100%; min-width: 2.4rem; height: 6px; -webkit-appearance: none; appearance: none; background: linear-gradient(180deg, #131317, #262629); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); padding: 0; margin: 0; } .track-head input[type="range"].th-fader::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, #f2f2f4, #b4b4ba); border: 1px solid rgba(0, 0, 0, 0.55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); cursor: ew-resize; } .th-knob { flex: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #63636d, #26262b 70%); border: 1px solid rgba(0, 0, 0, 0.55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12); position: relative; cursor: ns-resize; } .th-knob i { position: absolute; left: 50%; top: 2px; width: 2px; height: 6px; background: #eaeaee; border-radius: 1px; transform-origin: 50% 7px; transform: translateX(-50%) rotate(var(--turn, 0deg)); } /* --- the console: strips that look like a desk ---------------------------- */ .studio-dock { background: linear-gradient(180deg, #26262b, #1b1b1f 40%, #17171a); border-top: 1px solid rgba(255, 255, 255, 0.07); } .studio-dock .bus-strips { padding: 0; gap: 0; } .mx-strip { width: 78px; padding: 0.4rem 0.25rem 0; gap: 0.3rem; background: linear-gradient(180deg, #2c2c31, #212125); border-top: 3px solid var(--tc, var(--accent)); border-right: 1px solid rgba(0, 0, 0, 0.55); box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.03); } .mx-strip.master { background: linear-gradient(180deg, #34343a, #26262b); } /* A knob you could put a finger on: milled edge, dished face, pointer line. */ .mx-knob { width: 30px; height: 30px; background: radial-gradient(circle at 50% 28%, #6e6e79 0%, #3a3a41 55%, #202024 100%); border: 1px solid rgba(0, 0, 0, 0.65); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 4px rgba(0, 0, 0, 0.5); } .mx-knob i { top: 3px; width: 2px; height: 9px; background: #f2f2f5; border-radius: 1px; box-shadow: 0 0 3px rgba(255, 255, 255, 0.35); transform-origin: 50% 12px; } .mx-db { font-family: var(--f-mono); font-size: 0.6rem; color: #cfe6d2; background: #101014; border: 1px solid rgba(0, 0, 0, 0.7); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); border-radius: 2px; min-width: 2.8rem; } /* The fader deck: printed scale, slot, and the meter beside it. */ .mx-deck { display: grid; grid-template-columns: 1.35rem 1.5rem 0.5rem; align-items: stretch; justify-items: center; gap: 0.15rem; width: 100%; min-height: 6rem; } .mx-scale { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; font-family: var(--f-mono); font-size: 0.42rem; line-height: 1; color: #6f6f79; padding: 0.35rem 0; } .studio-dock input[type="range"].mx-fader { -webkit-appearance: none; appearance: none; writing-mode: vertical-lr; direction: rtl; width: 22px; height: 100%; padding: 0; margin: 0; border: 0; background: linear-gradient(90deg, transparent 46%, #0d0d10 46%, #0d0d10 54%, transparent 54%); cursor: ns-resize; } .studio-dock input[type="range"].mx-fader::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 13px; border-radius: 2px; background: linear-gradient(180deg, #e9e9ec 0%, #c9c9cf 45%, #9a9aa2 50%, #d6d6dc 55%, #a8a8b0 100%); border: 1px solid rgba(0, 0, 0, 0.6); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6); } .mx-meter { width: 7px; height: 100%; display: flex; align-items: flex-end; background: #0d0d10; border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 2px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); overflow: hidden; } .mx-meter i { display: block; width: 100%; height: 0%; background: linear-gradient(180deg, #ffd84d 0%, #7ee787 28%, #35c05a 100%); transition: height 60ms linear; } .mx-meter i.hot { background: linear-gradient(180deg, #ff5f56 0%, #ffd84d 40%, #35c05a 100%); } .mx-name { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.01em; background: linear-gradient(180deg, var(--accent), #2569d8); border-top: 1px solid rgba(0, 0, 0, 0.4); } .mx-strip.master .mx-name { background: linear-gradient(180deg, #6f6f7a, #4c4c56); } .mx-num { font-size: 0.5rem; background: rgba(0, 0, 0, 0.25); } /* --- the transport: a control surface, not a toolbar ---------------------- */ .transport { background: linear-gradient(180deg, #313138 0%, #26262b 46%, #1e1e22 100%); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07); padding: var(--s-3) var(--s-4); gap: var(--s-4); } /* Play, stop, record: round, lit from above, and they sink when pressed. */ .transport .t-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 0.85rem; color: #d6d6dc; background: linear-gradient(180deg, #45454d, #2c2c32); border: 1px solid rgba(0, 0, 0, 0.65); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14); cursor: pointer; transition: transform 60ms var(--ease), box-shadow 60ms var(--ease); } .transport .t-btn:hover { color: #fff; } .transport .t-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6); } .transport .t-btn.rec { color: #ff6b66; } .transport .t-btn.rec.recording, .transport .t-btn.recording { color: #fff; background: linear-gradient(180deg, #f0565a, #cf3439); box-shadow: 0 0 12px rgba(240, 86, 90, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25); } /* The timecode window: glass over a backlit display. */ .transport .timecode.big, .transport #t-clock { font-family: var(--f-mono); font-size: 1.05rem; letter-spacing: 0.06em; color: #ffc861; text-shadow: 0 0 8px rgba(255, 200, 97, 0.45); background: linear-gradient(180deg, #121215, #0b0b0e); border: 1px solid rgba(0, 0, 0, 0.75); border-radius: 4px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.05); padding: 0.3rem 0.7rem; } .transport .t-field { font-family: var(--f-label); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8e8e98; display: flex; align-items: center; gap: 0.35rem; } .transport #t-bpm { font-family: var(--f-mono); font-size: 0.8rem; color: #ffc861; text-align: center; background: linear-gradient(180deg, #121215, #0b0b0e) !important; border: 1px solid rgba(0, 0, 0, 0.75) !important; border-radius: 3px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8); } /* The working buttons read as panel switches. */ .transport .btn-quiet.btn, .transport .btn:not(.t-btn) { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; color: #c8c8d0; background: linear-gradient(180deg, #3c3c43, #2b2b31); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); padding: 0.4rem 0.7rem; } .transport .btn-quiet.btn:hover, .transport .btn:not(.t-btn):hover { color: #fff; background: linear-gradient(180deg, #46464e, #33333a); } .transport #t-export { color: #fff; background: linear-gradient(180deg, #3f86f7, #2569d8); border-color: rgba(0, 0, 0, 0.5); } .transport .zoom-pair { color: #8e8e98; } .transport input[type="range"] { -webkit-appearance: none; appearance: none; height: 5px; background: linear-gradient(180deg, #121215, #232327); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 3px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7); } .transport input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 15px; border-radius: 2px; background: linear-gradient(180deg, #f0f0f2, #b4b4ba); border: 1px solid rgba(0, 0, 0, 0.55); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } /* --- clips: audio on a desk, not boxes on a page -------------------------- */ .clip { border-radius: 4px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--tc, var(--accent)) 34%, #1b1b1f), color-mix(in srgb, var(--tc, var(--accent)) 18%, #151518)); border: 1px solid rgba(0, 0, 0, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 3px rgba(0, 0, 0, 0.45); } .clip canvas { display: block; width: 100%; } .clip-label { position: absolute; top: 1px; left: 4px; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75); pointer-events: none; white-space: nowrap; } .lane { background: repeating-linear-gradient(90deg, transparent 0, transparent calc(var(--px-sec, 60px) - 1px), rgba(255, 255, 255, 0.035) calc(var(--px-sec, 60px) - 1px), rgba(255, 255, 255, 0.035) var(--px-sec, 60px)), linear-gradient(180deg, #1c1c20, #17171b); border-bottom: 1px solid rgba(0, 0, 0, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); } /* Lumen at the desk: lit when she is listening. */ .transport #t-producer.on { color: #fff; background: linear-gradient(180deg, #2f9e6a, #1d7a4f); border-color: rgba(0, 0, 0, 0.5); box-shadow: 0 0 12px rgba(47, 158, 106, 0.45), inset 0 1px 0 rgba(255,255,255,0.2); } .how-we-work { margin-top: var(--s-4); padding: var(--s-4); background: linear-gradient(180deg, #26262b, #1e1e22); border: 1px solid rgba(0, 0, 0, 0.5); border-left: 3px solid var(--accent); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } .how-we-work p { margin: 0 0 var(--s-2); font-size: var(--t-sm); line-height: 1.6; color: var(--muted); max-width: 46rem; } .how-we-work p:last-child { margin-bottom: 0; } .how-we-work strong { color: var(--ink); font-weight: 600; } .how-we-work em { color: #ffc861; font-style: normal; } /* The shortcut sheet. */ .key-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-5); } .key-group { display: grid; gap: 0.2rem; align-content: start; } .key-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); font-size: var(--t-sm); color: var(--muted); padding: 0.15rem 0; } .key-row kbd { font-family: var(--f-mono); font-size: 0.68rem; color: var(--ink); background: linear-gradient(180deg, #3a3a41, #2b2b31); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.4); padding: 0.1rem 0.4rem; white-space: nowrap; } /* Nothing in the transport stretches or squashes with the window. Every control keeps the size it was designed at; when the row runs out of room it scrolls, which is what the overflow was always for. */ .transport > * { flex: 0 0 auto; } .transport .t-btn { flex: 0 0 34px; width: 34px; } .transport .timecode.big, .transport #t-clock { flex: 0 0 auto; min-width: 6.2rem; text-align: center; } .transport #t-bpm { flex: 0 0 3.4rem; width: 3.4rem; } .transport .zoom-pair { flex: 0 0 auto; } .transport .zoom-pair input[type="range"] { flex: 0 0 4rem; width: 4rem; } .transport .btn, .transport .btn-quiet.btn { flex: 0 0 auto; } /* ============================================================================ The house palette — taken from the app icon. Sampled from the icon itself: the waveform runs #367df2 through #5396fc, with the amber power light at #ffb840. Those two on graphite are the whole scheme — blue for anything you act on, amber for anything you read. ========================================================================== */ [data-surface="app"] { --accent: #367df2; /* the waveform */ --accent-strong: #226ceb; --accent-wash: rgba(54, 125, 242, 0.14); --amber: #ffb840; /* the power light */ --amber-soft: rgba(255, 184, 64, 0.16); --btn-bg: #367df2; --btn-bg-hover: #226ceb; --btn-ink: #ffffff; } /* Filled buttons take the blue; quiet ones stay quiet. */ [data-surface="app"] .btn:not(.btn-quiet) { background: linear-gradient(180deg, #4a8ff8, #226ceb); border-color: rgba(0,0,0,0.45); } [data-surface="app"] .btn:not(.btn-quiet):hover { background: linear-gradient(180deg, #5396fc, #2a76ef); } [data-surface="app"] .btn-quiet { background: transparent; border-color: transparent; color: var(--muted); } [data-surface="app"] .btn-quiet:hover { background: transparent; color: var(--ink); } [data-surface="app"] .edit { color: var(--accent); } /* The desk. */ .transport #t-export { background: linear-gradient(180deg, #4a8ff8, #226ceb); } .th-btn.on { background: linear-gradient(180deg, #4a8ff8, #226ceb); } .th-btn.on.solo { background: linear-gradient(180deg, #ffc55e, #d9932a); color: #16161a; } .th-btn.arm.on { background: linear-gradient(180deg, #f0565a, #cf3439); } .route-btn.on, .fx-btn.on { border-color: var(--accent); color: var(--accent); } /* Amber is the readout colour — displays, timecode, scales. */ .transport .timecode.big, .transport #t-clock, .transport #t-bpm { color: var(--amber); text-shadow: 0 0 8px rgba(255, 184, 64, 0.4); } .mx-db { color: var(--amber); } .how-we-work em { color: var(--amber); } /* Console strips. */ .mx-name { background: linear-gradient(180deg, #4a8ff8, #226ceb); } .mx-meter i { background: linear-gradient(180deg, #ffb840 0%, #6fb0ff 30%, #367df2 100%); } .mx-meter i.hot { background: linear-gradient(180deg, #f0565a 0%, #ffb840 35%, #367df2 100%); } /* Track colours: the icon's blues, with amber and grey to tell them apart. */ [data-surface="app"] { --tc-0: #367df2; --tc-1: #5396fc; --tc-2: #ffb840; --tc-3: #7fa8d8; --tc-4: #c99a3f; --tc-5: #6b7b90; } /* A selected track, lit along its edge the way a channel is picked on a desk. */ .track-head.picked { background: linear-gradient(180deg, #2b323d, #232830); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 3px 0 0 var(--accent); } .track-head.picked .th-num { color: var(--accent); background: rgba(54, 125, 242, 0.18); } .track-head.armed.picked { background: linear-gradient(180deg, #3a2f31, #2b2528); } /* Lumen keeps her own colour when she is listening. */ .transport #t-producer.on { background: linear-gradient(180deg, #4a8ff8, #226ceb); box-shadow: 0 0 12px rgba(54, 125, 242, 0.5), inset 0 1px 0 rgba(255,255,255,0.2); } /* --- the first-run tutorial --- */ .tour { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 92; width: min(30rem, calc(100vw - 2rem)); padding: var(--s-5); background: linear-gradient(180deg, #2b2b31, #212126); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 14px; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.07); } .tour-veil { z-index: 91; } .tour-art { background: linear-gradient(180deg, #1a1a1e, #141417); border: 1px solid rgba(0, 0, 0, 0.55); border-radius: 10px; padding: var(--s-4); margin-bottom: var(--s-4); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6); } .tour-art svg { display: block; width: 100%; height: auto; } .tour-title { font-family: var(--f-display); font-weight: var(--w-display); font-size: 1.15rem; margin: 0 0 var(--s-2); } .tour-body { margin: 0 0 var(--s-5); font-size: var(--t-sm); line-height: 1.65; color: var(--muted); } .tour-body b { color: var(--ink); font-weight: 600; } .tour-body em { color: var(--amber); font-style: normal; } .tour-body kbd, .how-we-work kbd, .write-hint kbd { font-family: var(--f-mono); font-size: 0.68rem; color: var(--ink); background: linear-gradient(180deg, #3a3a41, #2b2b31); border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 4px; padding: 0.05rem 0.35rem; white-space: nowrap; } .tour-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); } .tour-dots { display: flex; gap: 0.35rem; } .tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: #3a3a42; } .tour-dots i.on { background: var(--accent); } .tour-buttons { display: flex; gap: var(--s-2); } .tour-skip { position: absolute; top: var(--s-3); right: var(--s-4); font: inherit; font-size: var(--t-xs); color: var(--faint); background: none; border: 0; cursor: pointer; } .tour-skip:hover { color: var(--ink); } /* --- take folders --- */ .clip.folder { border-color: var(--amber); } .take-count { font-family: var(--f-mono); font-size: 0.52rem; font-weight: 500; color: #16161a; background: var(--amber); border-radius: 2px; padding: 0 0.25rem; margin-left: 0.3rem; } .clip.open { z-index: 6; } .take-rows { position: absolute; top: 100%; left: -1px; right: -1px; display: grid; gap: 1px; padding: 2px 0; background: #16161a; border: 1px solid rgba(0, 0, 0, 0.6); border-top: 0; border-radius: 0 0 4px 4px; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55); } .take-row { position: relative; height: 18px; background: linear-gradient(180deg, #26262b, #1e1e22); cursor: crosshair; } .take-row:hover { background: linear-gradient(180deg, #2e2e35, #24242a); } .take-name { position: absolute; left: 4px; top: 2px; font-family: var(--f-mono); font-size: 0.5rem; color: var(--muted); pointer-events: none; z-index: 2; } /* The stretch of this take that is actually heard. */ .take-live { position: absolute; top: 0; bottom: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 30%, transparent)); border-left: 1px solid var(--accent); border-right: 1px solid var(--accent); pointer-events: none; } /* --- the rack: plugins drawn as gear ------------------------------------- */ .fx-panel.rack { width: 19rem; padding: var(--s-3); display: grid; gap: var(--s-3); background: linear-gradient(180deg, #24242a, #1a1a1e); } .rack-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); } .rack-for { font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); } /* One faceplate per processor. */ .plugin { background: linear-gradient(180deg, #33333a 0%, #2a2a30 42%, #232328 100%); border: 1px solid rgba(0, 0, 0, 0.65); border-radius: 7px; padding: var(--s-3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 2px 6px rgba(0, 0, 0, 0.45); } .plugin.off { opacity: 0.5; } .plugin-top { display: flex; align-items: center; gap: 0.45rem; } /* The lamp that says it is in the path. */ .plugin-lamp { width: 7px; height: 7px; border-radius: 50%; background: #2a2a30; border: 1px solid rgba(0, 0, 0, 0.6); flex: none; } .plugin:not(.off) .plugin-lamp { background: var(--amber); box-shadow: 0 0 6px rgba(255, 184, 64, 0.8); } .plugin-name { flex: 1; min-width: 0; font-family: var(--f-display); font-weight: var(--w-display); font-size: 0.82rem; letter-spacing: 0.01em; color: #e8e8ec; display: flex; flex-direction: column; line-height: 1.15; } .plugin-name em { font-family: var(--f-mono); font-style: normal; font-size: 0.48rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .plugin-power { flex: none; cursor: pointer; } .plugin-power input { position: absolute; opacity: 0; pointer-events: none; } .plugin-power span { display: block; width: 26px; height: 14px; border-radius: 999px; background: #16161a; border: 1px solid rgba(0, 0, 0, 0.7); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); position: relative; } .plugin-power span::after { content: ''; position: absolute; top: 1px; left: 1px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(180deg, #d8d8dc, #9a9aa2); transition: transform var(--fast) var(--ease); } .plugin-power input:checked + span { background: color-mix(in srgb, var(--accent) 45%, #16161a); } .plugin-power input:checked + span::after { transform: translateX(12px); } .plugin-kind { display: block; font-family: var(--f-mono); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin: 0.15rem 0 var(--s-3); } .plugin-face { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); } /* Knobs on the faceplate. */ .pg-knob-wrap { display: grid; justify-items: center; gap: 0.12rem; width: 3rem; } .pg-knob { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 26%, #74747f 0%, #3d3d45 52%, #1e1e22 100%); border: 1px solid rgba(0, 0, 0, 0.7); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -3px 5px rgba(0, 0, 0, 0.55); position: relative; cursor: ns-resize; } .pg-knob i { position: absolute; left: 50%; top: 3px; width: 2px; height: 10px; background: var(--amber); border-radius: 1px; box-shadow: 0 0 4px rgba(255, 184, 64, 0.7); transform-origin: 50% 14px; transform: translateX(-50%) rotate(var(--turn, 0deg)); } .pg-val { font-family: var(--f-mono); font-size: 0.56rem; font-weight: 500; color: var(--amber); background: #101014; border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 2px; padding: 0 0.25rem; min-width: 2.6rem; text-align: center; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); } .pg-label { font-family: var(--f-label); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .pg-select { display: grid; justify-items: center; gap: 0.15rem; width: 4rem; } .pg-select select { font-size: 0.62rem; padding: 0.15rem 0.25rem; text-align: center; } .pg-select span { font-family: var(--f-label); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* The compressor's gain-reduction meter. */ .gr-meter { width: 10px; height: 46px; align-self: center; display: flex; flex-direction: column-reverse; position: relative; background: #101014; border: 1px solid rgba(0, 0, 0, 0.7); border-radius: 2px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); } .gr-meter i { display: block; width: 100%; height: 0%; background: linear-gradient(180deg, #ffb840, #f0565a); transition: height 70ms linear; } .gr-meter b { position: absolute; bottom: -0.8rem; left: 50%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 0.42rem; font-weight: 500; color: var(--faint); } /* --- the beat menu: floats above everything, previews on a rest ----------- */ .beat-pick { position: fixed; z-index: 95; min-width: 17rem; max-width: 22rem; max-height: 60vh; overflow-y: auto; padding: var(--s-2); background: linear-gradient(180deg, #2a2a30, #1e1e23); border: 1px solid rgba(0, 0, 0, 0.65); border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .beat-pick-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: 0.3rem 0.5rem 0.5rem; font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); } .beat-pick-head em { font-family: var(--f-mono); font-style: normal; font-size: 0.5rem; letter-spacing: 0.06em; text-transform: none; color: var(--faint); } .beat-pick-row { position: relative; display: grid; width: 100%; gap: 0.1rem; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-radius: 7px; padding: 0.4rem 0.55rem; cursor: pointer; overflow: hidden; } .beat-pick-row:hover { background: rgba(255, 255, 255, 0.05); } .beat-pick-row.playing { background: color-mix(in srgb, var(--accent) 18%, transparent); } .beat-pick-name { font-weight: 550; font-size: var(--t-sm); } .beat-pick-meta { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); } /* Fills across while the pointer rests, so the wait is visible not silent. */ .beat-pick-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: transparent; } .beat-pick-row:hover .beat-pick-bar i { display: block; height: 100%; width: 0; background: var(--accent); animation: beat-rest 3s linear forwards; } .beat-pick-row.playing .beat-pick-bar i { animation: none; width: 100%; background: var(--amber); } @keyframes beat-rest { from { width: 0; } to { width: 100%; } } /* --- what's cooking: work that outlives the tab you started it in -------- */ .jobdock { position: fixed; left: var(--s-4); bottom: var(--s-4); z-index: 90; width: 19rem; max-height: 60vh; overflow-y: auto; display: grid; gap: 1px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 10px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); backdrop-filter: blur(14px); overflow: hidden; } .jobdock-head { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0.7rem; font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink); background: rgba(255, 255, 255, 0.05); border: 0; cursor: pointer; } .jobdock-caret { margin-left: auto; color: var(--muted); } .jobdock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); } .jobdock-dot.live { background: var(--accent); animation: job-pulse 1.6s ease-in-out infinite; } @keyframes job-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } .jobrow { display: grid; gap: 0.25rem; padding: 0.55rem 0.7rem 0.65rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .jobrow-top { display: flex; align-items: baseline; gap: 0.45rem; font-size: var(--t-sm); } .jobrow-state { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); } .jobrow.ready .jobrow-state { color: var(--accent); } .jobrow.failed .jobrow-state { color: var(--bad, #e5484d); } .jobrow-x { margin-left: auto; padding: 0 0.2rem; font-size: var(--t-sm); line-height: 1; color: var(--muted); background: none; border: 0; cursor: pointer; } .jobrow-x:hover { color: var(--ink); } .jobrow-label { font-size: var(--t-xs); color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .jobrow-err { font-size: var(--t-xs); color: var(--bad, #e5484d); } /* Indeterminate: a beat gives no percentage, so don't invent one. */ .jobrow-bar { display: block; height: 2px; margin-top: 0.15rem; background: rgba(255, 255, 255, 0.09); border-radius: 2px; overflow: hidden; } .jobrow-bar i { display: block; width: 35%; height: 100%; background: var(--accent); animation: job-slide 1.5s ease-in-out infinite; } @keyframes job-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } .job-acts { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.2rem; } .job-acts button { padding: 0.2rem 0.45rem; font-size: var(--t-xs); color: var(--ink); background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 5px; cursor: pointer; } .job-acts button:hover { background: rgba(255, 255, 255, 0.13); } .job-acts button:disabled { opacity: 0.5; cursor: default; } /* The take as it happens — drawn live, so you can see the mic is hearing you. */ .clip.recording { background: color-mix(in srgb, var(--bad, #e5484d) 16%, transparent); border-color: color-mix(in srgb, var(--bad, #e5484d) 55%, transparent); pointer-events: none; animation: rec-breathe 2s ease-in-out infinite; } .clip.recording .clip-label { color: var(--bad, #e5484d); font-family: var(--f-mono); letter-spacing: 0.04em; } @keyframes rec-breathe { 0%, 100% { border-color: color-mix(in srgb, var(--bad, #e5484d) 55%, transparent); } 50% { border-color: color-mix(in srgb, var(--bad, #e5484d) 95%, transparent); } } /* --- the desk: transport on the ceiling, session name on the floor ------- The transport used to sit below a header, so scrolling slid the header away and the transport travelled up to take its place — the controls you reach for mid-take moving under your hand. Nothing sits above it now, so it has nowhere to travel to. The session name went to the floor instead, where it is always readable and never in the way. */ :root { --session-bar-h: 0rem; } body.at-the-desk { --session-bar-h: 2.6rem; } .session-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: var(--s-3); height: calc(2.6rem + env(safe-area-inset-bottom)); padding: 0 var(--s-4) env(safe-area-inset-bottom); background: linear-gradient(180deg, var(--elev, var(--surface)), var(--surface)); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.28); } .session-name { flex: 1; min-width: 0; font-family: var(--f-display, inherit); font-size: var(--t-sm); font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0.2rem 0.3rem; border-radius: 5px; } .session-name:hover { background: rgba(255, 255, 255, 0.05); } .session-name:focus { background: rgba(255, 255, 255, 0.07); outline: 1px solid var(--accent); } .session-bar .btn { padding: 0.25rem var(--s-3); font-size: var(--t-xs); } /* Everything that lives on the floor steps up to make room for it. */ .lumen-orb { bottom: calc(4.3rem + var(--session-bar-h) + env(safe-area-inset-bottom)); } .pad-tab { bottom: calc(4.6rem + var(--session-bar-h) + env(safe-area-inset-bottom)); } .jobdock { bottom: calc(var(--s-4) + var(--session-bar-h)); } /* The desk's own scroller stops short of the bar rather than sliding under. */ body.at-the-desk .daw { padding-bottom: var(--session-bar-h); } /* The app bar holds its place at the desk, so the transport beneath it has nowhere to slide to. Its real height is measured at runtime rather than guessed at, because a guess is what left the transport with ten pixels of travel — small, but you feel it under your hand mid-take. */ body.at-the-desk .appbar { position: sticky; top: 0; z-index: 80; background: var(--surface); } body.at-the-desk .transport { top: var(--app-header-h, 3.5rem); z-index: 75; } /* --- the taskbar: where Lumen lives, and the session with her ----------- A floating medallion covers whatever scrolls under it. In a bar it covers nothing, and still holds the middle — her signature place. Session-level controls sit either side of her, which is what took them off the transport. */ :root { --taskbar-h: 3.1rem; } .taskbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-3); min-height: calc(var(--taskbar-h) + env(safe-area-inset-bottom)); padding: 0 var(--s-4) env(safe-area-inset-bottom); background: linear-gradient(180deg, var(--elev, var(--surface)), var(--surface)); border-top: 1px solid var(--line); box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.3); } .taskbar-zone { display: flex; align-items: center; gap: var(--s-2); min-width: 0; } .taskbar-zone.middle { justify-content: center; } .taskbar-zone.right { justify-content: flex-end; } .taskbar .btn { padding: 0.28rem var(--s-3); font-size: var(--t-xs); white-space: nowrap; } .taskbar .t-field { white-space: nowrap; font-size: var(--t-xs); } .taskbar .timecode { font-size: var(--t-xs); color: var(--muted); } /* The session name: quiet until you want it. */ .taskbar #project-name { flex: 1; min-width: 4rem; max-width: 22rem; font-family: var(--f-display, inherit); font-size: var(--t-sm); font-weight: 600; color: var(--ink); background: none; border: 0; padding: 0.2rem 0.35rem; border-radius: 5px; } .taskbar #project-name:hover { background: rgba(255, 255, 255, 0.05); } .taskbar #project-name:focus { background: rgba(255, 255, 255, 0.08); outline: 1px solid var(--accent); } /* She sits in the bar rather than over the page, and rides a little proud of it so the medallion still reads as hers rather than as another button. */ .taskbar .lumen-orb { position: static; transform: none; bottom: auto; left: auto; width: 46px; height: 46px; margin-top: -0.7rem; } .taskbar .lumen-orb:hover { transform: translateY(-2px); } .taskbar .lumen-face { width: 40px; height: 40px; } /* Everything else on the floor clears the bar. */ .pad-tab { bottom: calc(var(--taskbar-h) + 0.6rem + env(safe-area-inset-bottom)); } .jobdock { bottom: calc(var(--taskbar-h) + 0.6rem + env(safe-area-inset-bottom)); } .lumen-sheet { bottom: calc(var(--taskbar-h) + env(safe-area-inset-bottom)); } body { padding-bottom: calc(var(--taskbar-h) + env(safe-area-inset-bottom)); } /* --- the channel strips: selected track left, master right --------------- Laid out the way a desk is. The fader you want is in the same place every time instead of behind a console you have to open first, and the master is never further than a glance to the right. */ .deck { min-height: 0; } .strip-side { width: 6.4rem; flex: none; padding: var(--s-2); background: linear-gradient(180deg, #232329, #1b1b20); border-right: 1px solid rgba(0, 0, 0, 0.6); } .strip-side.right { border-right: 0; border-left: 1px solid rgba(0, 0, 0, 0.6); } .cs-empty { margin: var(--s-4) 0 0; font-size: var(--t-xs); color: var(--faint); text-align: center; line-height: 1.5; } .cs-strip { display: grid; gap: 0.3rem; justify-items: stretch; padding: 0.35rem 0.3rem 0.5rem; background: linear-gradient(180deg, #2b2b32, #202026); border: 1px solid rgba(0, 0, 0, 0.55); border-radius: 7px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .cs-strip.master { border-color: color-mix(in srgb, var(--amber, #ffb840) 40%, transparent); } .cs-title { font-family: var(--f-label); font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink); text-align: center; padding: 0.2rem 0.15rem 0.3rem; border-bottom: 2px solid var(--tc, var(--accent)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-strip.master .cs-title { border-bottom-color: var(--amber, #ffb840); } .cs-label { font-family: var(--f-mono); font-size: 0.5rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); margin-top: 0.15rem; } .cs-slots { display: grid; gap: 2px; } .cs-slot { font: inherit; font-size: 0.58rem; text-align: left; padding: 0.22rem 0.35rem; color: var(--muted); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 3px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-slot:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); } .cs-slot.lit { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .cs-route, .cs-check { font: inherit; font-size: 0.6rem; padding: 0.24rem 0.35rem; color: var(--ink); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 3px; cursor: pointer; display: flex; align-items: center; gap: 0.3rem; } .cs-knob-row { display: grid; justify-items: center; gap: 0.15rem; margin-top: 0.2rem; } .th-knob.big { width: 34px; height: 34px; } .cs-read, .cs-db { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--muted); text-align: center; } .cs-db { color: var(--ink); background: rgba(0, 0, 0, 0.45); border-radius: 3px; padding: 0.1rem 0; } /* The fader stands up, with the meter beside it — a strip you read vertically. */ .cs-fader-row { display: flex; justify-content: center; align-items: stretch; gap: 0.4rem; height: 9rem; padding: 0.25rem 0; } .cs-fader { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 100%; accent-color: var(--tc, var(--accent)); } .cs-meter { width: 7px; border-radius: 2px; background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); display: flex; align-items: flex-end; overflow: hidden; } .cs-meter i { display: block; width: 100%; height: 0; background: linear-gradient(0deg, #2ecc71, #b7e774 62%, var(--amber, #ffb840) 84%, #e5484d); transition: height 60ms linear; } .cs-btns { display: flex; justify-content: center; gap: 3px; } .cs-bounce { margin-top: 0.3rem; font-size: 0.62rem; text-align: center; } /* Half console: it sits above the taskbar and takes nothing over. Nothing is dimmed and nothing is blocked — the tracks stay right there to work on. */ body.mixer-open .studio-dock { bottom: calc(var(--taskbar-h) + env(safe-area-inset-bottom)); box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.45); } body.mixer-open .deck { padding-bottom: min(46vh, 26rem); } .th-btn.fx { font-size: 0.58rem; letter-spacing: 0.02em; } @media (max-width: 900px) { .strip-side { display: none; } } /* The base range rule lays every slider out flat and full-width, which left the strip fader 107px across and 2px tall. These stand it back up, and hold the meter's width against a flex row that was collapsing it to nothing. */ .cs-fader-row input[type="range"].cs-fader { -webkit-appearance: slider-vertical; appearance: slider-vertical; writing-mode: vertical-lr; direction: rtl; width: 26px; height: 100%; margin: 0; flex: none; background: transparent; } .cs-fader-row .cs-meter { flex: none; width: 8px; } /* The master keeps out of the way until you want it — the desk is for the track you're working on. The tab on the right edge brings it back. */ body:not(.master-open) .strip-side.right { display: none; } .master-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 68; writing-mode: vertical-rl; font-family: var(--f-label); font-size: 0.58rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); background: linear-gradient(180deg, #2a2a30, #1e1e23); border: 1px solid rgba(0, 0, 0, 0.6); border-right: 0; border-radius: 6px 0 0 6px; padding: 0.7rem 0.28rem; cursor: pointer; } .master-tab:hover { color: var(--ink); } body.master-open .master-tab { color: var(--amber, #ffb840); } /* --- the plugin picker: one at a time, the rack when you want it --------- */ .fx-menu, .fx-one { display: grid; gap: 0.3rem; } .fx-chain { display: grid; gap: 2px; } .fx-line { display: flex; align-items: stretch; gap: 2px; } .fx-line-name { flex: 1; text-align: left; font: inherit; font-size: var(--t-xs); padding: 0.3rem 0.45rem; color: var(--accent); background: rgba(0, 0, 0, 0.35); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 4px; cursor: pointer; } .fx-line-name:hover { background: rgba(255, 255, 255, 0.07); } .fx-line-off { width: 1.6rem; font: inherit; color: var(--muted); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 4px; cursor: pointer; } .fx-line-off:hover { color: var(--bad, #e5484d); } .fx-add { display: grid; gap: 2px; } .fx-add-btn { display: grid; gap: 0.05rem; text-align: left; font: inherit; padding: 0.3rem 0.45rem; color: var(--ink); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 4px; cursor: pointer; } .fx-add-btn:hover { background: rgba(255, 255, 255, 0.09); } .fx-add-btn b { font-size: var(--t-xs); font-weight: 600; } .fx-add-btn span { font-size: 0.55rem; color: var(--muted); } .fx-full { margin-top: 0.2rem; font-size: 0.62rem; text-align: center; } /* A lit slot is in the path; an unlit one is not. */ .cs-slot.lit::before { content: '● '; color: var(--accent); } .cs-slot:not(.lit)::before { content: '○ '; color: var(--faint); } /* --- insert slots: a strip you fill yourself ---------------------------- */ .fx-slots { display: grid; gap: 2px; } .fx-slot { display: flex; align-items: stretch; gap: 2px; } .fx-slot.bypassed { opacity: 0.55; } .fx-slot-power { width: 1.5rem; font: inherit; font-size: 0.6rem; color: var(--accent); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 4px 0 0 4px; cursor: pointer; } .fx-slot.bypassed .fx-slot-power { color: var(--faint); } .fx-slot-name { flex: 1; text-align: left; font: inherit; font-size: var(--t-xs); padding: 0.3rem 0.45rem; color: var(--ink); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); cursor: pointer; } .fx-slot-name:hover { background: rgba(255, 255, 255, 0.08); } /* The empty slot sits at half height, so there is always a next one to click and the strip never looks full. Straight from the manual. */ .fx-slot.empty { display: block; width: 100%; padding: 0.16rem 0.45rem; font: inherit; font-size: 0.6rem; text-align: left; color: var(--faint); background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: 4px; cursor: pointer; } .fx-slot.empty:hover { color: var(--ink); border-color: var(--accent); } .cs-slot.empty { color: var(--faint); font-style: italic; } .plugin-top .fx-line-off { margin-left: 0.3rem; } .fx-slot-swap { width: 1.2rem; font: inherit; font-size: 0.6rem; color: var(--muted); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); cursor: pointer; } .fx-slot-swap:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); } /* Where a dragged plugin will land. */ .track-head.fx-target { outline: 2px solid var(--accent); outline-offset: -2px; background: color-mix(in srgb, var(--accent) 10%, transparent); } /* --- the strips hold their place ----------------------------------------- The fader for the track you are working on should be where you left it, not somewhere up the page. Both strips stick under the transport and stay there however far the arrangement runs. */ /* Fixed, not sticky. Sticky can only travel inside its parent, and the strip is nearly as tall as the deck — so it stuck for a moment and then rode up with everything else. Taken out of the flow it cannot move at all, and the timeline is given the width back as padding. */ .strip-side { position: fixed; top: calc(var(--app-header-h, 3.5rem) + var(--transport-h, 4rem)); bottom: calc(var(--taskbar-h) + env(safe-area-inset-bottom)); width: 6.4rem; overflow-y: auto; overflow-x: hidden; z-index: 66; } .strip-side.left { left: 0; } .strip-side.right { right: 0; } body.at-the-desk .deck { padding-left: 6.4rem; } body.at-the-desk.master-open .deck { padding-right: 6.4rem; } /* --- the slot menu: opens where you clicked ------------------------------ */ .plug-menu { position: fixed; z-index: 96; min-width: 12rem; padding: var(--s-2); display: grid; gap: 2px; background: linear-gradient(180deg, #2a2a30, #1e1e23); border: 1px solid rgba(0, 0, 0, 0.65); border-radius: 8px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); } .plug-menu-head { padding: 0.15rem 0.4rem 0.35rem; font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); } .plug-menu button { display: grid; gap: 0.05rem; text-align: left; font: inherit; padding: 0.32rem 0.45rem; color: var(--ink); background: none; border: 0; border-radius: 5px; cursor: pointer; } .plug-menu button:hover { background: rgba(255, 255, 255, 0.08); } .plug-menu button b { font-size: var(--t-sm); font-weight: 550; } .plug-menu button span { font-size: 0.58rem; color: var(--muted); } /* An empty insert on the strip: half height, as the manual has it. */ .cs-slot.empty { padding: 0.1rem 0.35rem; font-size: 0.6rem; color: var(--faint); font-style: normal; background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.13); } .cs-slot.empty::before { content: ''; } .cs-slot.empty:hover { color: var(--ink); border-color: var(--accent); } /* A take being moved, and the lane it will land on. */ .clip.dragging { opacity: 0.85; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5); z-index: 5; } .lane.landing { background: color-mix(in srgb, var(--accent) 8%, transparent); } /* --- the tools ----------------------------------------------------------- */ .toolbox { display: flex; gap: 1px; flex: none; } .tool-btn { position: relative; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; color: var(--muted); background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; } .tool-btn:first-child { border-radius: 5px 0 0 5px; } .tool-btn:last-child { border-radius: 0 5px 5px 0; } .tool-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); } .tool-btn.on { color: #fff; background: var(--accent); border-color: var(--accent); } .tool-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* The number that picks it, small enough to ignore once you know it. */ .tool-key { position: absolute; right: 1px; bottom: 0; font-family: var(--f-mono); font-size: 0.4rem; opacity: 0.5; } /* A take that is selected, and the box you drew to select it. */ .clip.picked { outline: 2px solid var(--accent); outline-offset: -2px; } .rubber { position: absolute; z-index: 6; pointer-events: none; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); } .rubber.zoom { border-color: var(--amber, #ffb840); background: color-mix(in srgb, var(--amber, #ffb840) 14%, transparent); } .clip.muted { opacity: 0.4; filter: grayscale(0.6); } /* Inserts on a console strip: the same slots as the channel strip, sized to fit a narrow lane. Every one of them answers to a click. */ .mx-slots { display: grid; gap: 1px; width: 100%; padding: 0 2px 3px; /* The insert window is a fixed region, like the slot block on a console: plugins stack from the top, the empty slot sits under them, and whatever is left stays visibly empty plate. More plugins than fit and the window scrolls inside itself — the strip never grows or shrinks. */ height: 6.2rem; flex: none; overflow-y: auto; align-content: start; scrollbar-width: thin; } .studio-dock.full .mx-slots { height: 9rem; } .mx-slots .cs-slot { font-size: 0.52rem; padding: 0.12rem 0.25rem; border-radius: 2px; text-align: left; } .mx-slots .cs-slot.empty { text-align: center; } .mx-strip { position: relative; } /* The panel opens inside whichever strip you clicked, and over its neighbours rather than squeezing them. */ .mx-strip .fx-panel, .cs-strip .fx-panel { position: absolute; left: 100%; top: 0; z-index: 94; width: 15rem; margin-left: 4px; } .mx-strip:nth-last-child(-n + 3) .fx-panel { left: auto; right: 100%; margin: 0 4px 0 0; } /* Mono or stereo, said plainly on the strip. */ .cs-format { font: inherit; font-size: 0.58rem; letter-spacing: 0.04em; padding: 0.18rem 0.35rem; color: var(--muted); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 3px; cursor: pointer; } .cs-format:hover { color: var(--ink); } .mx-format { font-family: var(--f-mono); font-style: normal; font-size: 0.5rem; color: var(--faint); } /* A bus's name, editable right on the console strip. */ /* A bus label is a strip label. Editable, but drawn exactly like every other name plate on the console — same size, same plate, same weight — so a bus reads as one more channel rather than a different species. The !importants are earned: the base form-field rule carries four :not() qualifiers, so no sane selector outweighs it, and this is a name plate that happens to be editable — not a form field. */ .mx-name-edit { font-family: inherit; font-size: 0.58rem !important; font-weight: 600 !important; letter-spacing: 0.01em; width: 100%; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--btn-ink) !important; background: linear-gradient(180deg, var(--accent), #2569d8) !important; border: 0 !important; border-top: 1px solid rgba(0, 0, 0, 0.4) !important; border-radius: 0 !important; padding: 0.15rem 0.1rem !important; cursor: text; } .mx-name-edit:focus { outline: 1px solid #fff; outline-offset: -1px; } /* Name plates never get crushed when the strip's height is fixed — the slack comes out of the fader deck, which is the part built to flex. */ .mx-strip .mx-name, .mx-strip .mx-name-edit, .mx-strip .mx-btns, .mx-strip .mx-db, .mx-strip .mx-slots { flex: none; } .mx-strip .mx-deck { flex: 1; min-height: 2.5rem; } /* The strip's old grid counted rows that no longer line up with its children, so with a fixed height the name plates were the rows that got crushed. A column of plates with one flexing deck is what this actually is. */ .studio-dock .mx-strip { display: flex; flex-direction: column; align-items: center; } /* Buses read as buses at a glance: the body of the strip is a step lighter than the track channels, the way a desk paints its groups. */ .studio-dock .mx-strip.bus { background: #33333b; border-top-color: var(--tc, var(--accent)); } .mx-bus-plate { display: flex; align-items: stretch; width: 100%; flex: none; } .mx-bus-plate .mx-name-edit { flex: 1; } /* The swatch wears the bus's colour and cycles it on a click. */ .mx-swatch { flex: none; width: 0.9rem; border: 0; border-top: 1px solid rgba(0, 0, 0, 0.4); background: var(--tc, var(--accent)); cursor: pointer; } .mx-swatch:hover { filter: brightness(1.25); } /* The bus name plate follows the chosen colour too. */ .mx-strip.bus .mx-name-edit { background: linear-gradient(180deg, var(--tc, var(--accent)), color-mix(in srgb, var(--tc, var(--accent)) 70%, #000)) !important; } /* The full console trades a fifth of the fader's travel for plugin room — still a fader that reads as one, with more window left for the racks. */ .studio-dock.full .mx-strip .mx-deck { min-height: 6.4rem; } .studio-dock.full .mx-scale { display: none; } /* The full console fits the screen whole: strips size to the window and only a screen genuinely too short for them brings scrolling back as a fallback. The half console is the one that scrolls by design — it is a window onto the taller desk. */ .studio-dock.full .mx-strip { height: 100%; min-height: 0; } /* --- the console, laid out like the reference ----------------------------- A gutter of row names on the left, and every strip's rows aligned to it: format, the FX stack, sends, output, pan, level, fader, plate. One strip design for both consoles — the half one is a shorter window, not a lesser strip. */ .mx-gutter { flex: none; width: 4.6rem; display: flex; flex-direction: column; align-items: flex-end; padding: 0.35rem 0.5rem 0 0.2rem; background: var(--ground); border-top: 3px solid transparent; } .mx-gutter .g { font-family: var(--f-label); font-size: 0.52rem; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--faint); text-align: right; } /* Row heights are fixed so the gutter and every strip stay in register. */ .mx-row.fmt, .mx-gutter .g.fmt { height: 1.3rem; } .mx-slots, .mx-gutter .g.fx { height: 6.2rem; } .studio-dock.full .mx-slots, .studio-dock.full .mx-gutter .g.fx { height: 9rem; } .mx-sends, .mx-gutter .g.sends { height: 3.4rem; } .mx-row.out, .mx-gutter .g.out { height: 1.3rem; } .mx-gutter .g.pan { height: 2.6rem; } .mx-gutter .g.db { height: 1.2rem; } .mx-gutter .g.deck { flex: 1; } .mx-row { display: grid; place-items: center; width: 100%; flex: none; } .mx-mini { font-family: var(--f-mono); font-size: 0.52rem; letter-spacing: 0.03em; padding: 0.12rem 0.3rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 3px; cursor: pointer; } .mx-mini.quiet { color: var(--faint); background: none; border-color: transparent; cursor: default; font-style: normal; } .mx-sends { display: grid; gap: 1px; width: 100%; padding: 0 2px; flex: none; overflow-y: auto; align-content: start; scrollbar-width: thin; } .cs-slot.send { display: flex; justify-content: space-between; gap: 0.2rem; cursor: ns-resize; } .cs-slot.send i { font-style: normal; color: var(--amber, #ffb840); font-family: var(--f-mono); } .cs-slot.empty.none { text-align: center; color: var(--line-strong); border-style: solid; cursor: default; } .mx-knob.quiet { visibility: hidden; } /* A loop pass: the take again, drawn quieter — it plays, but the original is the one you edit. */ .clip.ghost { opacity: 0.45; pointer-events: none; border-style: dashed; } /* The automation lane: a ride drawn over the audio. */ .lane { position: relative; } .auto-lane { position: absolute; inset: 0; z-index: 7; cursor: crosshair; } .auto-lane path { fill: none; stroke: var(--amber, #ffb840); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .auto-lane.off path { stroke: var(--faint); stroke-dasharray: 3 3; } .auto-lane circle { fill: var(--amber, #ffb840); stroke: #000; stroke-width: 1; cursor: grab; } .auto-lane.off circle { fill: var(--faint); } .mx-mini.read { color: #7ee787; border-color: color-mix(in srgb, #7ee787 40%, transparent); } .mx-row.auto, .mx-gutter .g.auto { height: 1.3rem; } /* Every row of a strip keeps its natural size in both consoles — the knob in the half console is the same knob, in a shorter window you scroll. Only the fader deck flexes; nothing else may be squeezed to fit. */ .studio-dock .mx-strip > * { flex: none; } .studio-dock .mx-strip > .mx-deck { flex: 1 1 auto; } /* In the full console the deck gives a fifth of its slack to the insert window: the fader reads a little shorter, the racks gain the room. */ .studio-dock.full .mx-strip > .mx-deck { flex: 1.2 1 auto; } .studio-dock.full .mx-slots { flex: 1 1 auto; height: auto; min-height: 9rem; } /* Two tools, two buttons: the main pick and the right-click pick. */ .toolbox { display: flex; gap: 3px; } .tool-pick { display: flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.3rem; background: rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 5px; } .tool-pick.alt { opacity: 0.85; } .tool-pick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; } .tool-pick select { font: inherit; font-size: 0.62rem; color: var(--ink); background: none; border: 0; padding: 0.1rem; width: 5.4rem; } /* Input monitoring, lit amber so it never reads as armed. */ .th-btn.mon.on { color: #14100a; background: var(--amber, #ffb840); border-color: var(--amber, #ffb840); } /* A corner set to varispeed reads differently from one set to fade. */ .fade-grip.speed { background: var(--amber, #ffb840); border-radius: 2px; } .clip-speed { font-family: var(--f-mono); font-style: normal; font-size: 0.55rem; color: var(--amber, #ffb840); } /* The fade line drawn on the region, and the handle that bends it. */ .fade-svg { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: visible; } .fade-svg polyline { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; vector-effect: non-scaling-stroke; } .fade-mid { pointer-events: all; fill: #fff; stroke: rgba(0, 0, 0, 0.6); stroke-width: 1; cursor: ns-resize; } .fade-mid:hover { fill: var(--amber, #ffb840); } /* The library bar: where your sessions actually live. */ .library-bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 8px; } .library-where { display: grid; gap: 0.15rem; min-width: 0; } .library-where b { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--ink); word-break: break-all; } .library-where em { font-style: normal; font-size: var(--t-xs); color: var(--muted); } .library-acts { display: flex; gap: var(--s-3); flex: none; } /* --------------------------------------------------------------------------- ON A PHONE The desk was laid out for a window, and on a 375px screen that showed: the track heads took 168px of it and left the timeline a 55px slit, while the taskbar's three zones fought over the same row and printed on top of each other. What follows is not a smaller desk — it is the same desk with the timeline given the room, because the timeline is the thing being worked on. --------------------------------------------------------------------------- */ @media (max-width: 520px) { /* The heads keep their name and their buttons; everything else gives way to the timeline, which is what he is actually looking at. */ .daw-heads { width: 132px; } .track-head { padding: 0.35rem 0.4rem; } .track-head .name { font-size: var(--t-sm); } /* Faders and pans belong to the mixer on a screen this size — they are a tap away there and unusable at 30 pixels here, and left in place they overran the head and painted across the timeline. */ .track-head input[type="range"] { display: none; } .track-head .th-knob { display: none; } /* Whatever else a head holds, it stays inside its own column. The timeline next to it is not spare room. */ .daw-heads, .track-head { overflow: hidden; } /* Five buttons — mute, solo, arm, input, rack — have to fit the width, and all five matter: clipping one off is the same as removing it. */ .th-row { gap: 0.12rem; flex-wrap: nowrap; } /* Five buttons — mute, solo, arm, input, rack — share the width evenly and all five stay reachable. Clipping one off is the same as removing it. */ .th-btn { flex: 1 1 auto; /* A finger needs something to land on: no button shrinks below this, whatever the row is trying to fit. */ min-width: 1.35rem; padding: 0.2rem 0; font-size: 0.6rem; text-align: center; } /* The gain and pan readouts are numbers for a mouse. The mixer shows them properly; here they only push the buttons off the edge. */ .track-head .ctl-read { display: none; } /* The taskbar stops being three columns competing for one row: the session name gets its own line, the controls sit under it and scroll if they must. Lumen stays where she has always been — the middle of the bar — so the empty third column on her row is deliberate, not a gap left over. */ .taskbar { grid-template-columns: 1fr auto 1fr; grid-template-areas: 'left middle .' 'right right right'; row-gap: 0.15rem; padding-top: 0.25rem; } .taskbar-zone.left { grid-area: left; min-width: 0; } .taskbar-zone.middle { grid-area: middle; } .taskbar-zone.right { grid-area: right; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.2rem; } .taskbar-zone.right::-webkit-scrollbar { display: none; } /* Two rows of taskbar means the page needs to end above two rows of it. */ :root { --taskbar-h: 4.6rem; } #project-name { max-width: 100%; min-width: 0; font-size: var(--t-sm); } /* Progress lines have less room to say things in. */ .work-bar { grid-template-columns: minmax(0, 1fr) 2.5rem; padding: 0.35rem var(--s-3); } .work-rail { grid-column: 1 / -1; } .work-pct { grid-row: 1; grid-column: 2; } /* The instructions are a footnote on a phone, not half the screen. */ .how-we-work { font-size: var(--t-xs); padding: var(--s-3); } } /* The left rail is hidden below 900px, but the deck went on reserving 6.4rem of room for it — a hundred pixels of nothing, taken from the timeline on the narrowest screens. If the rail is not there, the space is not either. */ @media (max-width: 900px) { body.at-the-desk .deck { padding-left: 0; } body.at-the-desk.master-open .deck { padding-right: 0; } } /* --------------------------------------------------------------------------- THE WORKING PANEL What a studio does while it is busy: a box in the middle of the room naming the job, what it is on, and how far in it is. Modelled on the panels Logic and Pro Tools put up for an import — deliberate, centred, and impossible to miss, rather than a status line at the edge that the artist has to notice. --------------------------------------------------------------------------- */ .work-scrim { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: var(--s-4); background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(2px); animation: work-in 0.12s ease-out; } .work-scrim[hidden] { display: none; } .work-panel { width: min(26rem, 100%); display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-4) calc(var(--s-4) + 0.15rem); border-radius: 14px; background: linear-gradient(180deg, #26262c, #1c1c21); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06); animation: work-rise 0.14s ease-out; } .work-head { font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); } .work-job { display: grid; gap: 0.45rem; } .work-what { font-size: var(--t-sm); color: var(--ink); /* A long filename shortens rather than stretching the panel. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .work-rail { position: relative; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; } .work-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: linear-gradient(180deg, #6ea8ff, #3f7ede); box-shadow: 0 0 10px rgba(80, 140, 255, 0.4); transition: width 0.16s linear; } .work-foot { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--t-xs); color: var(--muted); } .work-pct { font-family: var(--f-mono); color: var(--ink); margin-left: auto; } /* Size unknown: sweep, and say nothing about a percentage we haven't got. */ .work-job.sweeping .work-fill { width: 32%; animation: work-sweep 1.15s ease-in-out infinite; } @keyframes work-sweep { 0% { transform: translateX(-115%); } 100% { transform: translateX(330%); } } @keyframes work-in { from { opacity: 0; } } @keyframes work-rise { from { opacity: 0; transform: translateY(6px) scale(0.98); } } @media (prefers-reduced-motion: reduce) { .work-scrim, .work-panel { animation: none; } .work-job.sweeping .work-fill { animation-duration: 2.6s; } } /* --------------------------------------------------------------------------- THE TOP OF A PHONE Inside the native app the web view owns the whole screen, notch and all, so the status bar and the Dynamic Island sit on top of whatever is drawn first — in our case the wordmark and the session title, sliced in half. The page gives that strip back. On a desktop browser these insets are zero and none of this changes anything. --------------------------------------------------------------------------- */ /* Every page, not just the ones with a bar at the top: a signed-out landing page has no app bar and was losing its first line to the island just the same. On a desktop browser this inset is zero. */ body { padding-top: env(safe-area-inset-top); } /* The transport sticks under the app bar, which is now taller by the inset. */ @media (max-width: 640px) { .transport { top: env(safe-area-inset-top); } } /* A panel in the middle of the screen keeps clear of both ends. */ .work-scrim { padding-top: calc(var(--s-4) + env(safe-area-inset-top)); padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); } /* Two ways in, side by side: signing in and creating an account are different errands and each should be named. On a phone they stack full-width. */ .guest-doors { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); } .guest-doors .btn { text-decoration: none; display: inline-block; } @media (max-width: 520px) { .guest-doors { flex-direction: column; } .guest-doors .btn { width: 100%; text-align: center; } } /* --------------------------------------------------------------------------- NAVIGATION ON A PHONE The bar was already meant to sit at the foot of the screen on a phone — that part was right. What was wrong is that Lumen's taskbar is fixed to the same edge and sits above it, so the navigation was underneath her, invisible. Signing in dropped you on your profile with no way out but turning the phone sideways, which is not navigation. The bar now rides directly above the taskbar, and every section is on it at once — icon over name, sharing the width — so nothing has to be scrolled to be discovered. An iPad has the room for the original single row at the top and keeps it. --------------------------------------------------------------------------- */ @media (max-width: 640px) { /* The sections sit on the floor of the screen, and Lumen sits in the middle of them — not on a second bar underneath, which put her below the edge of the phone and left two bars competing for the same inch. One bar, her in the centre of it, the way she is on every other screen. The desk pins this bar to the top on a wide screen, where there is room above the transport for it. On a phone there is not, and the floor is where a thumb reaches. */ .appbar, body.at-the-desk .appbar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--line); border-bottom: 0; z-index: 71; } /* One row, laid out by flex rather than by columns, so the sections and the two account destinations sit on the same line and share the width. */ .appbar-inner { display: flex; align-items: stretch; padding: 0.25rem var(--s-2); gap: 0.1rem; } /* On a phone the wordmark is the icon on the home screen, not a line of text taking a row of a bar this small. */ .appbar-inner > .wordmark { display: none; } /* Messages and Account are destinations like the rest, so they ride the same row rather than crowding one end of it. */ .appbar-inner > span:last-of-type { display: flex; align-items: stretch; gap: 0.1rem; flex: none; } .tabbar { flex: 1 1 auto; min-width: 0; } .appbar .status-pill { display: none; } .tabbar { display: flex; justify-content: space-between; gap: 0.1rem; overflow-x: auto; } .tabbar a { flex: 1 1 0; min-width: 2.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0.3rem 0.1rem; font-size: 0.55rem; font-weight: 600; border-radius: 10px; text-align: center; line-height: 1.15; } .tabbar a svg { width: 21px; height: 21px; flex: none; } .appbar .account-link { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; min-width: 2.1rem; padding: 0.3rem 0.1rem; border-radius: 10px; } .appbar .account-link svg { width: 21px; height: 21px; flex: none; } /* The page ends above the one bar there now is. */ body { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom)); } /* The taskbar's own row folds away on a phone: its session controls move into the transport, and Lumen moves into the bar of sections. */ .taskbar { position: static; display: flex; justify-content: space-between; align-items: center; min-height: 0; padding: 0.3rem var(--s-4) 0; background: none; border-top: 0; box-shadow: none; } .taskbar-zone.middle { display: none; } /* Her place: the exact centre of the bar he actually has. */ .appbar-inner { position: relative; } .appbar .lumen-orb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.5rem; height: 2.5rem; margin: 0; z-index: 2; } /* The room held open for her among the sections. */ .tab-gap { flex: 0 0 3rem; } } /* "Studio Tools" is two words too many for a phone's bar — it swamped the tabs either side of it. The same button says "Tools" there. */ .tab-narrow-name { display: none; } @media (max-width: 640px) { .tab-wide-name { display: none; } .tab-narrow-name { display: inline; } /* Nothing on this row is allowed to grow into its neighbour. */ .tabbar a, .appbar .tab-more, .appbar .account-link { overflow: hidden; } .tabbar a > :not(svg), .appbar .tab-more > :not(svg) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .appbar .tab-more { flex: 1 1 0; min-width: 2.6rem; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0.3rem 0.1rem; font-size: 0.55rem; border-radius: 10px; } .appbar .tab-more svg { width: 21px; height: 21px; flex: none; } } /* A phone's bar holds the four sections and the Tools menu. Anything pinned beyond that is still one tap away inside Tools — better there than as a sliver of a word nobody can read. The pins come back on a wider screen. */ @media (max-width: 640px) { .tabwrap.custom { display: none; } /* The session name yields to Lumen rather than running underneath her. */ .taskbar-zone.left { overflow: hidden; min-width: 0; } /* The way back keeps its whole name; only the session title gives ground. */ .taskbar-zone.left > #back-to-picker { flex: none; } .taskbar-zone.left > #project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 3rem; } } /* Her voice, her ears, and the record of what she did. */ .lumen-head-acts { display: flex; align-items: center; gap: var(--s-2); } .lumen-voice-toggle.on { color: var(--amber, #ffb840); } .lumen-ask { display: flex; align-items: center; gap: var(--s-2); } .lumen-mic { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; touch-action: none; transition: color var(--fast) var(--ease), background var(--fast) var(--ease), transform var(--fast) var(--ease); } .lumen-mic svg { width: 20px; height: 20px; } .lumen-mic:hover { color: var(--ink); } /* Holding it should look like being heard. */ .lumen-mic.hot { color: #fff; background: #d5453f; border-color: #d5453f; transform: scale(1.06); animation: lumen-hearing 1.2s ease-in-out infinite; } @keyframes lumen-hearing { 50% { box-shadow: 0 0 0 6px rgba(213, 69, 63, 0.18); } } .lumen-sheet.hearing .lumen-input::placeholder { color: #d5453f; } /* What she actually did, under what she said. */ .lumen-did { margin-top: 0.25rem; font-size: var(--t-xs); color: var(--muted); font-style: italic; } @media (prefers-reduced-motion: reduce) { .lumen-mic.hot { animation: none; } } /* --------------------------------------------------------------------------- THE ORB, WHILE SHE IS IN THE ROOM She sits in the middle of the screen already, so she carries her own state rather than a strip of chrome under the transport. Still when she is not in the session; breathing while she listens; swelling with his voice when she hears him; her own colour while she speaks; red while the tape rolls. --------------------------------------------------------------------------- */ .lumen-orb.in-the-room .lumen-ring { opacity: 1; animation: orb-breathe 2.6s ease-in-out infinite; } /* His voice, on her. --heard is 0 to 1, written by the desk. */ .lumen-orb.in-the-room::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent, #4c8dff); opacity: calc(0.15 + (var(--heard, 0) * 0.85)); transform: scale(calc(1 + (var(--heard, 0) * 0.16))); transition: transform 0.08s linear, opacity 0.08s linear; pointer-events: none; } .lumen-orb.hearing::after { border-color: #d5453f; } .lumen-orb.her-turn::after { border-color: var(--amber, #ffb840); } /* Tape rolling: unmistakable, and steady rather than flashing — a booth does not need something blinking at the artist mid-take. */ .lumen-orb.rolling::after { border-color: #d5453f; border-width: 3px; opacity: 1; } .lumen-orb.rolling .lumen-ring { animation: none; box-shadow: 0 0 0 3px rgba(213, 69, 63, 0.25); } @keyframes orb-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(120, 200, 170, 0.25); } 50% { box-shadow: 0 0 0 7px rgba(120, 200, 170, 0); } } @media (prefers-reduced-motion: reduce) { .lumen-orb.in-the-room .lumen-ring { animation: none; } .lumen-orb.in-the-room::after { transition: none; } } /* His own phrases, in settings: what he says, and what she does about it. */ .phrase-table { display: grid; gap: 1px; margin-top: 0.5rem; } .phrase-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: 0.45rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm); } .phrase-row.phrase-head { font-family: var(--f-label); font-size: var(--t-xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); border-bottom-color: transparent; } .phrase-said { color: var(--ink); overflow: hidden; text-overflow: ellipsis; } .phrase-does { color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .phrase-new { left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: min(22rem, 92vw); padding: var(--s-4); } @media (max-width: 520px) { .phrase-row { grid-template-columns: minmax(0, 1fr) auto; } .phrase-does { grid-column: 1; color: var(--muted); font-size: var(--t-xs); } } /* --- Settings, in four rooms --------------------------------------------- Audio settings used to sit inside the Lumen group, Lumen's own sat between two audio ones, and the count-in existed twice in two places writing the same preference. One long scroll with no order to it. These are tabs. */ .set-tabs { display: flex; gap: var(--s-1); padding: 0 0 var(--s-3); margin: 0 0 var(--s-4); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; } .set-tabs::-webkit-scrollbar { display: none; } .set-tab { flex: 0 0 auto; appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: var(--t-sm); padding: var(--s-2) var(--s-3); border-radius: 8px; cursor: pointer; white-space: nowrap; transition: color var(--fast) var(--ease), background var(--fast) var(--ease); } .set-tab:hover { color: var(--ink); } .set-tab[aria-selected="true"] { color: var(--ink); background: var(--accent-wash); } .set-page { display: block; } .set-page[hidden] { display: none; } .plan-body .plan-line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); } .plan-body .plan-line:last-of-type { border-bottom: 0; } .plan-body .plan-line b { font-weight: 600; } /* --- Daylight ------------------------------------------------------------- The studio is dark by choice and stays that way by default — a control room does. But dark is a preference, not a law, and somebody writing on a train in the sun should be able to see the screen. Because every component reads its colours from these tokens rather than naming them, the whole app turns over by redefining the tokens and nothing else. */ [data-surface="app"][data-theme="light"] { --ground: #f4f4f6; --surface: #ffffff; --elev: #ffffff; --ink: #1b1b1f; --muted: #5c5c66; --faint: #8a8a94; --line: #dcdce2; --line-strong: #bcbcc6; --accent: #1c5fd0; --accent-wash: rgba(28, 95, 208, 0.14); /* These are set as flat colours rather than derived, so they do not follow the ones above and have to be named again. A field left at #1f1f22 on a white panel is a black slab — which is exactly how the first attempt at this looked. */ --field-bg: #ffffff; --chip-bg: #ececf1; --btn-bg-hover: #164ba8; /* Green and red picked for a dark ground are too bright to read on paper. */ --good: #1a8a44; --bad: #c8332a; } /* The little key caps are drawn as a dark gradient, not from tokens. */ [data-surface="app"][data-theme="light"] .tour-body kbd, [data-surface="app"][data-theme="light"] .how-we-work kbd, [data-surface="app"][data-theme="light"] .write-hint kbd, [data-surface="app"][data-theme="light"] .key-row kbd { background: linear-gradient(180deg, #ffffff, #e9e9ef); border: 1px solid var(--line-strong); color: var(--ink); } /* The waveform and lane furniture are drawn against the dark ground, so they need the opposite hand in daylight — otherwise the takes disappear. */ [data-surface="app"][data-theme="light"] .lane { background: var(--surface); } [data-surface="app"][data-theme="light"] .clip { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); } [data-surface="app"][data-theme="light"] .ruler { background: var(--ground); } /* The take menu — what a right click, or a held finger, offers. */ .clip-menu { min-width: 12rem; } .clip-menu hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-1) 0; } /* What a right click, or a held finger, offers on a plugin. */ .plug-ctx { min-width: 11rem; } .plug-ctx hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-1) 0; } /* --- Nothing hides behind the channel strips ------------------------------- The strips are fixed to the sides of the window, so the deck is padded to clear them. Everything BELOW the deck is a sibling of it and got no padding at all — so "How to record here", which is the first thing a new artist needs, sat underneath the strip and could not be read. The instructions were there the whole time; the strip was on top of them. This clears the same width for anything else in the desk. Modals are left alone: they are centred over the whole window on purpose. */ /* The transport is excluded because the strips begin BELOW it — indenting the transport would push the play button inwards to clear something that is not beside it. The docks and modals place themselves. */ body.at-the-desk #desk > :not(.deck):not(.studio-modal):not(.studio-dock):not(.transport) { margin-left: 6.4rem; } body.at-the-desk.master-open #desk > :not(.deck):not(.studio-modal):not(.studio-dock):not(.transport) { margin-right: 6.4rem; } /* Below 900px the strips are hidden, so the room they were given goes back. */ @media (max-width: 900px) { body.at-the-desk #desk > :not(.deck):not(.studio-modal):not(.studio-dock):not(.transport), body.at-the-desk.master-open #desk > :not(.deck):not(.studio-modal):not(.studio-dock):not(.transport) { margin-left: 0; margin-right: 0; } } /* The app asking him something, since Electron has no prompt(). */ .ask-box { position: fixed; left: 50%; top: 22%; transform: translateX(-50%); min-width: min(26rem, 92vw); z-index: 900; } .ask-box .ask-input { width: 100%; } /* Plug-ins grouped by who made them, the way Logic groups them. Fifty-one in one flat list is a haystack; he knows he wants Antares before he knows which Antares. */ .plug-maker { border-top: 1px solid var(--line); } .plug-maker > summary { cursor: pointer; list-style: none; padding: 0.4rem 0.6rem; font-size: var(--t-xs); color: var(--muted); display: flex; justify-content: space-between; align-items: center; } .plug-maker > summary::-webkit-details-marker { display: none; } .plug-maker > summary:hover { color: var(--ink); background: var(--accent-wash); } .plug-maker > summary i { font-style: normal; color: var(--faint); font-size: 0.62rem; } .plug-maker[open] > summary { color: var(--ink); } .plug-mine { max-height: 46vh; overflow-y: auto; } /* --- Panels lit from behind ------------------------------------------------ Taken from the landing page, which builds every surface from a thin wash of white over a near-black ground rather than painting an opaque grey. Beside it the studio looked heavier and flatter, and the reason was this one decision repeated everywhere. Blur is used sparingly and only on things that FLOAT above the desk: menus, the plug-in panel, the pad. A landing page renders six still panels; this renders twelve tracks, a mixer, meters at sixty frames and a waveform canvas, and a backdrop-filter over a live timeline costs real frames. The look is worth having, dropped frames while he is recording are not. --------------------------------------------------------------------------- */ [data-surface="app"] .card, [data-surface="app"] .cs-strip, [data-surface="app"] .mx-strip, [data-surface="app"] .track-head, [data-surface="app"] .transport { background: var(--glass); border: 1px solid var(--edge); } /* The transport keeps its own weight: it is the one bar that must never be mistaken for part of the timeline. */ [data-surface="app"] .transport { background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)); } [data-surface="app"] .clip { border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.09); } [data-surface="app"] .cs-slot, [data-surface="app"] .fx-slot { border-radius: 9px; border: 1px solid var(--edge); background: var(--glass); } /* Things that float, and can afford the blur. */ [data-surface="app"] .fx-panel, [data-surface="app"] .plug-menu, [data-surface="app"] .dock-menu, [data-surface="app"] .ask-box, [data-surface="app"] .pad-panel { background: color-mix(in srgb, var(--elev) 92%, transparent); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--edge); } /* Labels carry their weight through tracking, the way the landing page does. */ [data-surface="app"] .label, [data-surface="app"] .plug-menu-head, [data-surface="app"] .set-head > span { letter-spacing: 0.09em; text-transform: uppercase; font-size: var(--t-xs); color: var(--muted); } /* Daylight keeps the same structure, with the light coming from the other side: a wash of black over white rather than white over black. */ [data-surface="app"][data-theme="light"] { --glass: rgba(0, 0, 0, 0.028); --edge: rgba(0, 0, 0, 0.09); } /* --- Plug-ins with weight -------------------------------------------------- He liked how the landing page draws its panels and asked for realism on top of it: depth, and a bit of shine. The device it uses is one gradient and one inset line. Light falls from the top left across the face, and a single bright pixel along the top edge reads as the lit lip of a real object. The deep, wide, offset shadow does the rest: it lifts the thing off the desk rather than drawing a box around it. Kept to the plug-in faces and their knobs. Applied to everything it would just be noise, and the desk would stop being a desk. --------------------------------------------------------------------------- */ [data-surface="app"] .fx-panel, [data-surface="app"] .plugin { background: linear-gradient(160deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)), color-mix(in srgb, var(--elev) 92%, transparent); border: 1px solid var(--edge); border-radius: 16px; box-shadow: 0 30px 62px -28px rgba(0, 0, 0, 0.95), 0 1px 0 rgba(255, 255, 255, 0.12) inset; } /* The plug-in's own name plate, lit the same way. */ [data-surface="app"] .plugin-kind, [data-surface="app"] .plug-menu-head { background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)); border-radius: 8px; padding: 0.25rem 0.5rem; } /* Knobs read as machined metal: a top-lit face, a dark rim, a soft cast. */ [data-surface="app"] .pg-knob { background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04) 58%), linear-gradient(180deg, #2b2e33, #1a1c20); border: 1px solid rgba(0, 0, 0, 0.55); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.14) inset; } [data-surface="app"] .pg-knob i { background: var(--accent); box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent); } /* A slot in the strip gets the same lit lip, at a smaller scale. */ [data-surface="app"] .cs-slot, [data-surface="app"] .fx-slot { background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset; } [data-surface="app"] .cs-slot.lit { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.09) inset, 0 0 12px -4px color-mix(in srgb, var(--accent) 60%, transparent); } /* Daylight: the light still comes from above, but the shadow is a whisper. */ [data-surface="app"][data-theme="light"] .fx-panel, [data-surface="app"][data-theme="light"] .plugin { background: linear-gradient(160deg, #ffffff, #f4f4f7); box-shadow: 0 24px 48px -30px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.9) inset; } /* --- The sections at the bottom, on every size ------------------------------ He liked the tablet layout, where the sections sit along the bottom edge, and asked for the desk to work that way at full size too. He is right, and for a reason beyond taste: a bar at the top and a transport under it spend two rows of the screen before a single track is drawn. Moving the sections to the bottom hands that height back to the timeline, which is what a desk should spend its screen on. More tracks, more waveform, same furniture. The narrow layout already did this. This is the same arrangement, given room to breathe: the wordmark and the session state stay, because on a wide screen there is space for them and they tell him where he is. --------------------------------------------------------------------------- */ @media (min-width: 641px) { body.at-the-desk .appbar { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 71; border-top: 1px solid var(--edge); border-bottom: 0; background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); padding-bottom: env(safe-area-inset-bottom); } /* The transport takes the top, where the app bar used to be. It is the thing he reaches for most, and it belongs at the edge he looks at first. */ body.at-the-desk .transport { top: 0; border-radius: 0; } /* The room the bottom bar occupies, given back to everything above it. */ body.at-the-desk { --appbar-h: 4.1rem; padding-bottom: calc(var(--appbar-h) + env(safe-area-inset-bottom)); } /* The strips run from under the transport to just above the sections. */ body.at-the-desk .strip-side { top: var(--transport-h, 4rem); bottom: calc(var(--appbar-h) + var(--session-bar-h) + env(safe-area-inset-bottom)); } /* Lumen, the pad and the job dock all sit above the bar rather than under it. */ body.at-the-desk .lumen-orb { bottom: calc(var(--appbar-h) + var(--session-bar-h) + 0.5rem + env(safe-area-inset-bottom)); } body.at-the-desk .pad-tab { bottom: calc(var(--appbar-h) + var(--session-bar-h) + 0.8rem + env(safe-area-inset-bottom)); } body.at-the-desk .jobdock { bottom: calc(var(--appbar-h) + var(--session-bar-h) + var(--s-3)); } body.at-the-desk .pad-panel[data-size="small"] { bottom: calc(var(--appbar-h) + var(--session-bar-h) + 0.8rem + env(safe-area-inset-bottom)); } /* The session bar sits directly on top of the sections. */ body.at-the-desk .session-bar { bottom: calc(var(--appbar-h) + env(safe-area-inset-bottom)); } /* Icon over label, the way the tablet draws it: it reads faster and takes less width, which leaves room for the sections to breathe. */ body.at-the-desk .tabbar a { flex-direction: column; gap: 0.22rem; font-size: 0.68rem; padding: var(--s-1) var(--s-4); border-radius: 12px; } body.at-the-desk .tabbar svg { width: 20px; height: 20px; } } /* The plug-in menu holds fifty-eight things. It is capped to the window and scrolls inside itself rather than running off the foot of the app, which is what put the last makers out of reach. */ .plug-menu { max-height: min(70vh, 34rem); overflow-y: auto; overscroll-behavior: contain; }