/* Syzygy studio — one visual system for a focused creator workspace. */ /* Self-hosted fonts (fixes the missing-Inter bug — Inter was never actually loaded). Files ship from app/assets/fonts/ via a copy-dir in index.html (integrator-owned). */ @font-face { font-family: "Inter"; src: url("/app/fonts/InterVariable.woff2") format("woff2-variations"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/app/fonts/JetBrainsMono.woff2") format("woff2-variations"); font-weight: 100 800; font-style: normal; font-display: swap; } /* The four faces the RENDER actually draws overlay text with. remotion/src/ fonts.js registers the proprietary-sounding family names against these exact open-licensed files (TikTokDisplayMedium → Montserrat 500, ArialBrat → Arimo, TimesNewRoman → Tinos, InstrumentSerif), so registering the same file under the same family here makes the preview measure glyphs the way the export does. Without them the preview fell back to a system face ~8% narrower than Montserrat, so correctly-sized text still under-reported how much room it needs. Same files, copied from remotion/public/fonts (licences in RENDER-FONTS-LICENSES.md); ~68 KB total. */ @font-face { font-family: "TikTokDisplayMedium"; src: url("/app/fonts/Montserrat-500.woff2") format("woff2"); font-weight: 500; font-display: swap; } @font-face { font-family: "ArialBrat"; src: url("/app/fonts/Arimo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "TimesNewRoman"; src: url("/app/fonts/Tinos-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "InstrumentSerif"; src: url("/app/fonts/InstrumentSerif-400.woff2") format("woff2"); font-weight: 400; font-display: swap; } /* ── Structure ───────────────────────────────────────────────────────────── Type, spacing, radii and layout metrics belong to the PRODUCT, not to a theme. They lived inside the dark block, so narrowing that selector left light with no fonts, no spacing scale and no sidebar width — the page collapsed. Split out so both themes inherit one skeleton and differ only in colour, which is what "design both themes" actually requires. */ :root { /* Safe-zone bands paint on the 9:16 stage, which is dark in both themes, so they belong with the product skeleton rather than with either palette. `--band-shorts` is violet on purpose: the three bands have to be told apart at a glance at micro size, and warm/cyan/violet do that without colliding with the brand accent and making "YouTube Shorts" read as "selected". */ --band-hook: rgba(255, 180, 94, 0.9); --band-tiktok: rgba(54, 217, 207, 0.9); --band-shorts: rgba(167, 139, 250, 0.9); /* Opaque enough that the frame behind it no longer matters: at a=0.92 over pure white the composite is #1b1d21 and the pair still holds 7.93:1. */ --stage-scrim: rgba(7, 9, 14, 0.92); --stage-warn: #e0a75a; --ease-field: cubic-bezier(0.45, 0.05, 0.55, 0.95); --shadow-sm: var(--elev-1); --shadow-md: var(--elev-3); --shadow-lg: var(--elev-4); /* ── INTERFACE TYPE ─────────────────────────────────────────────────────── The system stack LEADS; Inter is the fallback, not the lead. HIG typography.md: "Don't embed system fonts in your app". Apple's licence does not permit serving SF Pro as a webfont either, so the only legitimate route to Apple's own type is the face already installed on the reader's machine: `-apple-system` / `BlinkMacSystemFont` resolve to San Francisco on macOS and iOS, `system-ui` and "Segoe UI" resolve to the native face elsewhere. That also buys what typography.md calls out as SF's advantage — "Both available as variable fonts … supporting dynamic optical sizes" — which a static webfont cannot give us at any size. Inter stays third in line, ahead of the generic families, because it is the one face we actually ship: it guarantees a known-good rendering on the platforms where `system-ui` resolves to something poor. Leading with Inter instead would override real SF on every Apple device, which is the exact opposite of the goal. Nine faces in app/assets/fonts/ are CONTENT faces drawn inside rendered videos (TikTokDisplayMedium, ArialBrat, …). They are not interface type and are untouched by this stack. */ --system-sans: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; --display: var(--system-sans); --sans: var(--system-sans); /* SF Mono on Apple hardware via ui-monospace, then the platform's fixed face, then the bundled JetBrains Mono. All of these carry tabular figures, which the .stat-num / .num alignment rule below depends on. */ --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "JetBrains Mono", monospace; --num: var(--mono); /* ── TYPE SCALE ─────────────────────────────────────────────────────────── typography.md gives macOS its own built-in text styles — Body 13pt, Title 3 15, Title 2 17, Title 1 22, Large Title 26, Caption 10 — and a hard floor: "macOS | 13pt default | 10pt minimum" (iOS: 17/11). The honest web translation of a 13pt macOS body is a 16px browser body, so the whole ladder is Apple's macOS ratios re-based on 16px, expressed in rem so a reader who raises their browser's default font size scales the entire interface — the closest the web gets to "Support Dynamic Type". --text-micro (10px) is Apple's macOS minimum and is for NON-INTERACTIVE labels only. Nothing you can click, type in or focus goes below --text-caption-2 (11px), which is Apple's iOS minimum. */ --text-large-title: 2rem; /* 32px — Large Title 26pt */ --text-title-1: 1.6875rem; /* 27px — Title 1 22pt */ --text-title-2: 1.3125rem; /* 21px — Title 2 17pt */ --text-title-3: 1.125rem; /* 18px — Title 3 15pt */ --text-headline: 1rem; /* 16px — Headline 13pt, emphasised */ --text-body: 1rem; /* 16px — Body 13pt */ --text-callout: 0.9375rem; /* 15px — Callout 12pt */ --text-subhead: 0.875rem; /* 14px — Subheadline 11pt */ --text-footnote: 0.8125rem; /* 13px — Footnote 10pt */ --text-caption: 0.75rem; /* 12px — Caption 1 */ --text-caption-2: 0.6875rem; /* 11px — floor for ANY interactive text */ --text-micro: 0.625rem; /* 10px — macOS floor; non-interactive only */ --leading-tight: 1.2; --leading-body: 1.5; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --sidebar-width: 304px; --header-height: 88px; --content-max: 1240px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; /* ── MOTION ─────────────────────────────────────────────────────────────── Four durations, three curves, and nothing else. Before this table existed the file carried 160ms, 150ms, 220ms, 240ms, 260ms and 360ms, each picked in isolation, so two controls a centimetre apart answered the hand at visibly different speeds and half the app entered while the other half blinked. The numbers below are not preferences; they are the four jobs motion does here, and every rule in this file now names one of them. --dur-press 90ms the hand is ON the control. Anything slower reads as lag rather than as feedback, so this is the floor and the press state is the only thing that uses it. --dur-state 140ms hover, focus ring, colour and elevation changes, and anything LEAVING. Well inside the 180ms ceiling the premium ledger sets for a control state (P-4). --dur-enter 220ms something ARRIVING: a menu, a toast, a list item, a screen. Enters are allowed to be slower than exits because arriving is information and leaving is not. --dur-stage 320ms reserved for the one big surface a screen is about — the finished render. Exactly one thing at a time may move this slowly, the same way exactly one thing at a time may sit on elevation rung 5. Curves. `--ease` is the house curve and stays as it was — it is in a hundred declarations and it is good. `--ease-out` decelerates harder and is for ENTERS only: an element that arrives should be fastest at the moment it first appears and settle into place, which is what makes an interface feel answered rather than animated. `--ease-in` is its mirror and is for exits. `--stagger-step` is the gap between one list item's entrance and the next. 34ms is deliberately below the ~50ms where a stagger stops reading as one movement and starts reading as items counting themselves in. */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-press: 90ms; --dur-state: 140ms; --dur-enter: 220ms; --dur-stage: 320ms; --stagger-step: 34ms; --transition: var(--dur-state) var(--ease); /* The two composed patterns the rest of the file reaches for by name. */ --transition-press: var(--dur-press) var(--ease-out); --enter: var(--dur-enter) var(--ease-out) both; /* Platform safe-area band hues. These identify a PLATFORM, not our brand, and they paint on the 9:16 stage, which is dark in both themes — so they belong with the product skeleton, not with either palette. `--band-shorts` is violet on purpose. It is not leftover v1 accent: the three bands have to be told apart at a glance at 8px, and warm/cyan/violet is the only triple here that survives that. Recolouring it green would collide with the brand accent and make "YouTube Shorts" read as "selected". Named so nobody has to guess that again. */ --band-hook: rgba(255, 180, 94, 0.9); --band-tiktok: rgba(54, 217, 207, 0.9); --band-shorts: rgba(167, 139, 250, 0.9); /* Same reasoning, one rung up: `.stage-unsaved` is a warning that paints ON the stage, so it is light-on-dark in BOTH themes and must not follow the palette's `--warm`. Light's `--warm` is tuned for a white card; over the stage scrim it measured 3.86:1 on the empty stage and 1.98:1 once a bright frame was loaded under it — an "unsaved" warning you could not see on the screen it warns about. The old α=0.76 scrim was the other half: it let the frame lift the ground. This is the dark-theme warm, pinned, over a scrim opaque enough that the frame no longer matters — at α=0.92 over pure white the composite is #1b1d21 and the pair still holds 7.93:1. */ --stage-scrim: rgba(7, 9, 14, 0.92); --stage-warn: #e0a75a; } /* Dark is the DEFAULT, carried by bare :root as well as its own attribute — so the first paint is correct before any script runs, and stays correct if one never does. The light attribute selector (0,2,0) outranks bare :root (0,1,0), so the toggle still wins in both directions regardless of source order. Dark — the premium default. This palette is shared with the live Rising Tides and ShipStream products: near-black #060606, cool slate surfaces, #FAFCFF ink, and the magenta→violet brand ramp. See docs/BRAND-SYSTEM.md for the measured reference and the accessibility-safe fill variants used by controls. */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #060606; --bg-soft: #090a0d; --sidebar: #060606; --surface: #0c0e13; --surface-2: #12151b; --surface-3: #1c212b; --surface-hover: #222833; --ink: #fafcff; --ink-soft: #d9dbe0; --muted: #b8b9bb; --muted-2: #a6a9b3; --rule: #2a2e37; --rule-strong: #3a4150; /* PRIMARY is the brand action. The live brand begins at #E100C3, but white on that exact stop is 4.21:1. Controls therefore start at its measured AA-safe companion #B000C8; decorative glows retain the exact brand stop. */ --primary: #b000c8; --primary-hover: #9900bd; --primary-press: #8500d7; --primary-ink: #ffffff; /* ACCENT carries selection, focus, active state and quiet emphasis — the active nav link, the selected chip, the workspace kicker, `.card--float`, `::selection`, the One-Shot step numbers, the progress bar. Same family as primary on purpose. What marks MONEY is not the accent, it is `--accent-gradient` on `.btn--upsell`; nothing else in the file uses it. This is stated identically in the light block below. The two used to disagree — light claimed the accent "must never be the colour of an ordinary action" while both themes were painting every ordinary selection with it — and comments that contradict each other are exactly how the cross-product palette drift survived for months. If the doctrine changes, both blocks change together, and the code has to change with them. */ --accent: #ee2bd1; --accent-strong: #f251df; --accent-soft: rgba(225, 0, 195, 0.14); --accent-fill: #b000c8; --accent-fill-hover: #9900bd; --accent-fill-press: #8500d7; --accent-ink: #ffffff; /* A softer label on the same fill still clears 4.5:1 at every interactive state (4.82:1 at the brightest stop). Guarded in theme_contrast.rs. */ --accent-ink-soft: #fbe5ff; --accent-gradient: linear-gradient(96deg, #d500b8 0%, #b000c8 52%, #8500d7 100%); --cyan: #a77bfa; --warm: #e0a75a; --success: #1ed760; --danger: #f0736b; --stage-1: #1c212b; --stage-2: #060606; --clip-fill: #3a2f50; --glass-bg: rgba(12, 14, 19, 0.93); /* ≥0.93 keeps --muted-2 ≥4.5:1 even over pure-white media under the glass */ --thumb-backing: #12151b; --mode-dry-bg: #221a09; --mode-live-bg: #04120a; /* Ambient field — the depth that makes a flat dark page read as premium. Kept low-alpha so it never competes with content. */ --field-base: #060606; --field-glow-1: rgba(225, 0, 195, 0.1); --field-glow-2: rgba(133, 0, 215, 0.08); --field-ember: rgba(224, 167, 90, 0.035); /* Depth in dark comes from a light rim plus a deep shadow, not shadow alone — a shadow on a near-black ground is invisible. */ --rim: inset 0 1px 0 rgba(255, 255, 255, 0.05); --rim-strong: inset 0 1px 0 rgba(225, 0, 195, 0.12); --ring: rgba(225, 0, 195, 0.95); /* ONE ladder, one shadow colour. Rungs 5 and the inset used to live in the structural :root block above and were tinted rgba(2, 3, 6, …) while rungs 1–4 here were pure black — so a modal (rung 5) sat under a differently coloured shadow from every card beneath it, AND rung 5's near shadow was LIGHTER (0.5) than rung 4's (0.6), which is a ladder that goes down at the top. Both are dark-theme values, so they belong in the dark block; light defines its own. */ --elev-0: none; --elev-1: 0 1px 2px rgba(0, 0, 0, 0.5); --elev-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 10px 28px rgba(0, 0, 0, 0.42); --elev-3: 0 6px 16px rgba(0, 0, 0, 0.55), 0 22px 56px rgba(0, 0, 0, 0.5); --elev-4: 0 10px 28px rgba(0, 0, 0, 0.6), 0 40px 96px rgba(0, 0, 0, 0.58); --elev-5: 0 16px 40px rgba(0, 0, 0, 0.64), 0 48px 120px rgba(0, 0, 0, 0.66); --elev-inset: inset 0 2px 24px rgba(0, 0, 0, 0.55); } /* Light — a first-class theme, applied by the toggle. */ :root[data-theme="light"] { color-scheme: light; /* Light is a first-class theme, not an inverted dark one. Vocabulary matches the same cross-product system: white page, near-black text, cool hairline rules, and the deep end of the brand ramp for actions. */ --bg: #ffffff; --bg-soft: #fafafa; --sidebar: #ffffff; --surface: #ffffff; --surface-2: #fafafa; --surface-3: #f4f4f5; --surface-hover: #f4f4f5; --ink: #111111; --ink-soft: #3f3f46; /* Was #6b7280 — 4.83:1 on --surface, so every guard that measured the card said green. But `.badge`/`.pill` declare `background: var(--surface-3)`, and on #f4f4f5 the same token measured 4.40:1 at 10px. Same hue, darkened 4%: 5.19:1 on --surface, 4.97:1 on --surface-2, 4.72:1 on --surface-3. The guard now reads all four grounds, not just the card. */ --muted: #676d7b; --muted-2: #59606e; --rule: #ececec; --rule-strong: #d9d9d9; /* PRIMARY is the thing you click to move forward. Deep magenta retains the Rising Tides identity while keeping white labels above 4.5:1. */ --primary: #9900bd; --primary-hover: #8500d7; --primary-press: #6f00a8; --primary-ink: #ffffff; /* ACCENT carries selection, focus, active state and quiet emphasis — the same job it does in dark, and the same job the code has always given it here. This comment used to read "reserved for paid / upsell surfaces … must never be the colour of an ordinary action", which was never true of the code in either theme: `--accent-fill` paints `::selection` and the active nav link, `--accent-strong` paints the workspace kicker and the render-job link. What is genuinely reserved for paid is `--accent-gradient` on `.btn--upsell` — that is the line that keeps "upgrade" meaning something, and it is the only one the file actually enforces. Same magenta/violet family as dark, seated deep enough to remain readable as text and icons on white and pale raised surfaces. */ --accent: #9900bd; --accent-strong: #8500d7; --accent-soft: rgba(225, 0, 195, 0.1); --accent-fill: #9900bd; --accent-fill-hover: #8500d7; --accent-fill-press: #6f00a8; --accent-ink: #ffffff; --accent-ink-soft: #fbe5ff; --accent-gradient: linear-gradient(96deg, #d500b8 0%, #b000c8 52%, #8500d7 100%); --cyan: #6941c6; /* Status inks are measured on the chip they ship in, not on the card. Both of these failed on `.badge`/`.pill`'s own `--surface-3` ground and are darkened along their exact hue until they clear it: --warm #a16207 → 4.48:1 on --surface-3; #9b5e07 → 4.78:1 --success #15803d → 4.12:1 on its own 8% tint; #137337 → 4.84:1 `--success` is measured on the tint because `.badge--success` repaints the ground as 8% of itself, which is a DARKER ground than --surface-3, so the plain-ground number was never the pair that shipped. */ --warm: #9b5e07; --success: #137337; --danger: #b91c1c; --stage-1: #27272a; --stage-2: #18181b; --clip-fill: #71717a; --glass-bg: rgba(255, 255, 255, 0.93); /* ≥0.93 keeps --muted-2 ≥4.5:1 even over black media/stage under the glass (measured 4.65) */ --thumb-backing: #f4f4f5; --mode-dry-bg: #fffbeb; --mode-live-bg: #f0fdf4; /* Field — light must stay ≤ 0.04 alpha (contrast hard cap, see spec §4.3). Hue follows dark's magenta + violet field plus a warm ember. */ --field-base: #ffffff; --field-glow-1: rgba(225, 0, 195, 0.03); --field-glow-2: rgba(133, 0, 215, 0.025); --field-ember: rgba(224, 167, 90, 0.02); /* Shadows carry hierarchy in light where borders carry it in dark. ONE ladder, one shadow colour — the same rule dark states, now actually held here. Rungs 1–4 were neutral rgba(16, 16, 20, …) while rung 5 and the inset were still the blue-navy rgba(24, 31, 48, …) they were first drafted as for the violet product. So the one surface that floats above everything — the modal — cast a shadow of a different HUE from every card beneath it, and the stage's recess did too. Alphas are untouched (the ladder already climbs 0.05 → 0.06 → 0.07/0.09 → 0.09/0.12 → 0.12/0.18); only the tint moved onto the ladder's own colour. */ --elev-0: none; --elev-1: 0 1px 2px rgba(16, 16, 20, 0.05); --elev-2: 0 1px 3px rgba(16, 16, 20, 0.06), 0 8px 24px rgba(16, 16, 20, 0.06); --elev-3: 0 4px 12px rgba(16, 16, 20, 0.07), 0 20px 48px rgba(16, 16, 20, 0.09); --elev-4: 0 8px 24px rgba(16, 16, 20, 0.09), 0 32px 80px rgba(16, 16, 20, 0.12); --elev-5: 0 16px 40px rgba(16, 16, 20, 0.12), 0 48px 120px rgba(16, 16, 20, 0.18); --elev-inset: inset 0 2px 24px rgba(16, 16, 20, 0.1); --rim: inset 0 1px 0 rgba(255, 255, 255, 0.85); --rim-strong: inset 0 1px 0 rgba(255, 255, 255, 1); --shadow-sm: var(--elev-1); --shadow-md: var(--elev-3); --shadow-lg: var(--elev-4); /* Deep brand magenta, raised to 0.9 alpha so it clears the 3:1 non-text floor on the page and both raised surfaces. Guarded in theme_contrast.rs. */ --ring: rgba(153, 0, 189, 0.9); } * { box-sizing: border-box; } html { min-width: 320px; -webkit-text-size-adjust: 100%; background: var(--field-base); } body { margin: 0; /* `dvh`, not `vh`. On a mobile browser `100vh` is the tallest the viewport ever gets — the height it has with the chrome collapsed — so a `100vh` floor on the body guarantees a screenful of empty scroll under every short page for as long as the toolbar is showing. `100dvh` is the height the glass actually has right now. */ min-height: 100dvh; /* LOAD-BEARING. `body`'s own background paints at Appendix E step 3, AFTER the negative-`z-index` pseudo-elements below at step 2 — so any opaque colour here deletes the field. It is not a tidy-up; it is the switch. */ background: transparent; color: var(--ink); font-family: var(--sans); font-size: var(--text-body); line-height: var(--leading-body); text-rendering: optimizeLegibility; } /* ── THE FIELD ────────────────────────────────────────────────────────────── Two inert pseudo-elements behind everything. Pure CSS, zero bytes, our green. Layer 1 is static and always on; layer 2 is a transform-only drift. The base colour lives on so body::before can sit behind content but above the fill. This is the ONLY field. A second one used to live in the "Depth" section near the end of the file as a `body { background-image: … }` and, being later at equal specificity on a step that paints on top, it hid this one completely — for as long as both existed, `field-drift` never ran where anyone could see it. If the ambient background ever needs to change, it changes here. Both layers are `position: fixed`, which is why the glow belongs to the window rather than to the scroll position. `body::after`'s drift is frozen by hand under `prefers-reduced-motion: reduce` further down — `animation: none` plus a fixed `scale(1.02)`, so the composition is identical and only the motion stops. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-color: var(--field-base); background-image: radial-gradient(circle at 18% 12%, var(--field-glow-1), transparent 48%), radial-gradient(circle at 84% 30%, var(--field-glow-2), transparent 52%), radial-gradient(circle at 62% 92%, var(--field-ember), transparent 46%); background-repeat: no-repeat; } body::after { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; opacity: 0.55; will-change: transform; background-image: radial-gradient(circle at 30% 70%, var(--field-glow-1), transparent 44%), radial-gradient(circle at 70% 20%, var(--field-glow-2), transparent 50%); background-repeat: no-repeat; animation: field-drift 48s var(--ease-field) infinite alternate; } @keyframes field-drift { from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); } to { transform: translate3d(2.5%, 2%, 0) scale(1.06); } } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } a { color: inherit; } img { max-width: 100%; } ::selection { background: var(--accent-fill); color: var(--accent-ink); } /* ── App shell ────────────────────────────────────────────────────────────── The studio is height-bounded to the viewport and does not scroll as a document. Only #studio-workspace and #studio-nav scroll, each within its own grid row. This is the difference between a page and an application. With `min-height` the whole studio was one tall document: the chrome was `position: sticky`, so it drifted a few pixels on every wheel tick, the browser's own scrollbar ran the full height of the app, and there was no way to scroll a pane without moving the header. Every desktop tool this product sits beside — an editor, a library, a board — pins its chrome and scrolls its content. That is a layout property, not a decoration, and no amount of type and colour work substitutes for it. `dvh`, not `vh`: on mobile browsers `100vh` is the tallest the viewport ever gets, which puts the bottom of the shell under the URL bar. Below 820px the media query at the end of this file hands scrolling back to the document, where a phone expects it. */ #syzygy-app { height: 100dvh; overflow: hidden; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: var(--header-height) minmax(0, 1fr); grid-template-areas: "masthead wordmark" "nav workspace"; } #masthead { grid-area: masthead; z-index: 30; /* Exact, not min-: the shell's first grid row is --header-height and the mobile block's sticky offsets are calc()ed from it, so drift here mis-pins them. On desktop the shell row holds this in place; nothing is sticky. */ height: var(--header-height); min-height: var(--header-height); display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-content: center; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); background: color-mix(in srgb, var(--sidebar) 88%, transparent); backdrop-filter: blur(20px); border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .brand-lockup { min-width: 0; display: flex; align-items: center; gap: var(--space-2); text-decoration: none; } #rt-logo { flex: 0 1 120px; width: 120px; min-width: 100px; max-height: 28px; height: auto; display: block; object-fit: contain; } .brand-product { min-width: 0; padding-left: var(--space-2); border-left: 1px solid var(--rule-strong); color: var(--ink); font: 750 var(--text-caption-2)/1 var(--display); letter-spacing: 0.12em; white-space: nowrap; } .brand-caption { grid-column: 1; } #theme-toggle { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); } #theme-toggle:hover { background: var(--surface-hover); color: var(--ink); border-color: var(--rule-strong); } #mobile-menu-toggle { display: none; } :root[data-theme="light"] #rt-logo { filter: invert(1); } /* Preserve room for the brand at compact desktop widths without surrendering the theme control or shrinking either control below its touch target. */ @media (min-width: 821px) and (max-width: 1100px) { #syzygy-app { --sidebar-width: 264px; } .brand-product { display: none; } } #studio-nav { grid-area: nav; /* Fills its shell row and scrolls inside it. It used to be sized against the viewport (`100vh - header`) and pinned with `sticky`, which is the same arithmetic done twice — once here and once by the browser — and drifted whenever --header-height did. */ min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-3) var(--space-4); background: color-mix(in srgb, var(--sidebar) 88%, transparent); backdrop-filter: blur(20px); border-right: 1px solid var(--rule); scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; } .nav-group-label { margin: 10px var(--space-3) 6px; color: var(--muted-2); font: 800 var(--text-micro)/1 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; } .nav-group-label:first-child { margin-top: 2px; } .nav-group-label--accent { color: var(--accent-strong); } .nav-link { /* 36px keeps every group (through Brand & system) on-screen on ~900px-tall laptops without giving up a comfortable hit target. */ min-height: 36px; display: flex; align-items: center; gap: var(--space-3); padding: 6px var(--space-3); border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); text-decoration: none; font-size: var(--text-footnote); font-weight: 700; transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition); } .nav-link:hover { color: var(--ink); background: var(--surface); transform: translateX(2px); } .nav-link.is-active { color: var(--accent-ink); background: var(--accent-fill); border-color: rgba(255, 255, 255, 0.16); box-shadow: var(--elev-2), var(--rim-strong); } .nav-mark { width: 24px; flex: 0 0 24px; text-align: left; color: var(--muted-2); font: 800 var(--text-micro)/1 var(--mono); letter-spacing: 0.08em; } .nav-link.is-active .nav-mark { color: var(--accent-ink-soft); } /* One-Shot hero nav + quiet nav (classes set in main.rs — integrator-owned). */ .nav-link--hero { flex-direction: column; align-items: flex-start; gap: 5px; min-height: auto; padding: var(--space-3); margin-bottom: var(--space-2); background: var(--accent-fill); color: var(--accent-ink); border-color: rgba(255, 255, 255, 0.16); box-shadow: var(--elev-3), var(--rim-strong); font-size: var(--text-callout); font-weight: 800; letter-spacing: -0.2px; } .nav-link--hero:hover { background: var(--accent-fill-hover); color: var(--accent-ink); transform: translateX(2px); } .nav-link--hero.is-active { outline: 2px solid var(--accent-strong); outline-offset: 2px; } .nav-link--hero .nav-link-sub { font: 600 var(--text-caption-2)/1.35 var(--sans); letter-spacing: 0; text-transform: none; color: var(--accent-ink-soft); } .nav-link--quiet { font-size: var(--text-caption); color: var(--muted); } .nav-link--quiet.is-active { color: var(--accent-ink); } /* Sign out pins to the sidebar's floor, past a hairline, off the main path. */ .nav-signout { margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--rule); } .nav-signout .nav-link { width: 100%; background: transparent; cursor: pointer; text-align: left; } .nav-signout .nav-link:hover { background: var(--surface); } #wordmark { grid-area: wordmark; min-width: 0; /* Same exact height as #masthead: both live in the shared header grid row, so either one growing past --header-height breaks every sticky offset. */ height: var(--header-height); min-height: var(--header-height); overflow: hidden; display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) clamp(var(--space-6), 4vw, var(--space-12)); border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--bg) 88%, transparent); } .workspace-heading { min-width: 0; width: 100%; display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(320px, 1.2fr); grid-template-rows: auto auto; align-items: center; column-gap: var(--space-12); } .micro { color: var(--muted-2); font: 800 var(--text-micro)/1.3 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; } .workspace-kicker { grid-column: 1; color: var(--accent-strong); } #workspace-title { grid-column: 1; margin: var(--space-1) 0; color: var(--ink); font: 900 clamp(1.7rem, 3.2vw, 2.3rem)/1.02 var(--display); letter-spacing: -0.032em; } #definition { grid-column: 2; grid-row: 1 / span 2; max-width: 64ch; margin: 0; color: var(--muted); font-size: var(--text-footnote); } #studio-workspace { grid-area: workspace; min-width: 0; /* The application's scroll container. `min-height: 0` is load-bearing: a grid item's default `min-height: auto` refuses to shrink below its content, so without it this pane grows to fit and pushes the scrollbar back onto the document — exactly the layout this shell exists to remove. `overscroll-behavior` stops a wheel gesture that reaches the end of this pane from continuing into the page behind it. */ min-height: 0; overflow-y: auto; overscroll-behavior: contain; /* Bottom gutter reserves the always-mounted #render-tray pill's footprint (fixed, bottom-right) so trailing content — including bottom-right mode banners — never underlaps it. The pill is not moved. */ padding: var(--space-8) clamp(var(--space-6), 4vw, var(--space-12)) calc(var(--space-16) + var(--space-12)); } #studio-workspace > * { width: min(100%, var(--content-max)); margin-inline: auto; } /* Shared type, controls, and surfaces */ .screen { width: min(100%, var(--content-max)); display: grid; gap: var(--space-6); margin: 0 auto; } .screen > *, #studio-workspace > * > * { min-width: 0; } .section-title { margin: var(--space-1) 0 0; color: var(--ink); font: 800 var(--text-caption)/1.3 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; } .section-head, .row, .row-actions, .row-main, .btn-row, .field-row, .chip-group, .bulk-bar, .bulk-actions, .inspector-head, .inspector-actions { display: flex; align-items: center; } .section-head, .inspector-head { justify-content: space-between; gap: var(--space-4); } .row-main { min-width: 0; flex: 1; align-items: flex-start; flex-direction: column; gap: var(--space-1); } .row-main strong, .row-main h1 { overflow-wrap: anywhere; } /* Screen titles are real

s now. Strip UA heading defaults so an h1 renders byte-identically to the it replaced: inherited size/line box, no margins, weight 700 (what strong's `bolder` resolved to on the 400 body). `#oneshot-intro h1` (id specificity) still wins its display-face rule. */ .screen h1 { margin: 0; font-size: inherit; line-height: inherit; font-weight: 700; } /* Campaigns and Not-found already had a real heading — an

with no rule of its own, i.e. pure UA metrics. Promoted to

so every screen has exactly one; these pin the UA h2 box (1.5em, 0.83em block margins, bold) so nothing moves. Longhands on purpose, so the design-freeze font extractor never sees them. */ #campaigns-title, #notfound-heading { margin: 0.83em 0; font-size: 1.5em; font-weight: 700; } .row-actions, .btn-row, .field-row, .chip-group, .bulk-bar, .bulk-actions, .inspector-actions { flex-wrap: wrap; gap: var(--space-2); } .dim { color: var(--muted); font-size: var(--text-caption); } .status { min-height: 1.2em; margin: 0; color: var(--warm); font-size: var(--text-caption); } .error, .render-job-error { color: var(--danger); } /* ── ELEVATION — the lift rule. Cards float on the field; the field NEVER shows through a card (opaque --surface). One rung per surface, no freelancing. */ .card, .panel, .stat, .cell, .template-card, .editor-rail, .editor-inspector, #page-agent, #generate-panel, #oneshot-intro { background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--elev-2), var(--rim); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition); } .card:hover, .stat:hover, .template-card:hover, .look-card:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--elev-3), var(--rim-strong); border-color: var(--rule-strong); } .card--float { border-color: color-mix(in srgb, var(--accent) 32%, transparent); box-shadow: var(--elev-3), var(--rim-strong), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent); } /* In-flow furniture — rung 1. Present, not floating. */ .row, .bulk-bar, .editor-timeline { border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--elev-1); } .card, .panel { padding: var(--space-6); border-radius: var(--radius-md); } .card { display: flex; flex-direction: column; gap: var(--space-4); } .panel { display: grid; gap: var(--space-4); } .row { gap: var(--space-4); margin: 0; padding: var(--space-4); border-radius: var(--radius-sm); } .row:hover { border-color: var(--rule-strong); background: var(--surface-2); } .rows { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } /* The row's title IS the door — an wrapping the row's . It must not look like body copy that happens to be blue, and it must not carry the link underline across the whole row-main block. */ .row-open { color: inherit; text-decoration: none; } .row-open:hover { text-decoration: underline; text-underline-offset: 2px; } .row-open:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; } /* A hook is user content — the subject of its row, never uppercased (§3.2). */ .hook-text { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; } /* Reschedule opens INSIDE the row's action cluster, so it takes the whole width and reads as a tray rather than a control that wandered into the button row. `display` stays off this rule on purpose: send.rs toggles flex/none inline. */ .reschedule-editor { flex-wrap: wrap; align-items: center; gap: var(--space-2); flex-basis: 100%; /* min-width:0 on both is load-bearing: .row is a non-wrapping flex box and .row-main can shrink to zero, so anything in .row-actions that refuses to narrow crushes the row's own title. The global `input { width: 100% }` already did exactly that here. */ min-width: 0; margin-top: var(--space-2); padding: 10px 11px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--bg-soft); } .reschedule-editor input { width: auto; min-width: 0; flex: 1 1 168px; } .glass { backdrop-filter: blur(18px); background: var(--glass-bg); box-shadow: var(--elev-4); } .btn, .btn-sm, .panel button, .oneshot-make-btn, #agent-run, #gen-run { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); text-decoration: none; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); } .btn, .panel button, #agent-run, #gen-run { min-height: 40px; padding: var(--space-2) var(--space-4); font-size: var(--text-footnote); } .btn-sm { min-height: 32px; padding: var(--space-2) var(--space-3); font-size: var(--text-caption-2); letter-spacing: 0.08em; text-transform: uppercase; } .btn:hover, .btn-sm:hover, .panel button:hover, #agent-run:hover, #gen-run:hover { transform: translateY(-1px); background: var(--surface-hover); border-color: var(--rule-strong); } /* The press state itself lives with the rest of the motion vocabulary at "P-4 · CONTROLS ANSWER THE HAND". All this rule has to do here is cancel the hover lift before that push-down is applied on top of it. */ .btn:active, .btn-sm:active, .panel button:active { transform: translateY(0); } .btn--primary, .btn.primary, button.primary, .btn-sm.accent, .oneshot-make-btn, #agent-run, #gen-run, .panel button.btn--primary, .panel button.primary { border-color: transparent; /* The core action is PRIMARY, never the upsell accent. Using the paid colour for ordinary buttons is what made "upgrade" invisible and the whole app feel arbitrary — the reference reserves its gradient strictly for paid CTAs. */ background: var(--primary); color: var(--primary-ink); box-shadow: var(--elev-2); } .btn--primary:hover, .btn.primary:hover, button.primary:hover, .btn-sm.accent:hover, .oneshot-make-btn:hover, #agent-run:hover, #gen-run:hover { background: var(--primary-hover); color: var(--primary-ink); box-shadow: var(--elev-3); } .btn--primary:active, .btn.primary:active, button.primary:active, .btn-sm.accent:active, .oneshot-make-btn:active, #agent-run:active, #gen-run:active { background: var(--primary-press); color: var(--primary-ink); } .btn--ghost { background: transparent; } .btn--danger, .btn.danger, button.danger { border-color: color-mix(in srgb, var(--danger) 42%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); } .btn--danger:hover, .btn.danger:hover, button.danger:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); border-color: var(--danger); } button:disabled, .btn:disabled, .btn-sm:disabled { transform: none !important; box-shadow: none !important; opacity: 0.42; cursor: not-allowed; filter: saturate(0.55); } /* `summary` is in this list because it is focusable by default and therefore opts OUT of a ring it was never named in: `summary#editor-hook-style-head` drew the user agent's own `outline: auto 1px` instead of the 2px `--ring` at offset 2px that every other control here gets. Line ~1386 covers `.oneshot-stock > summary` only, which is why one disclosure looked right and the other did not. */ button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } label, .field-label { color: var(--muted); font-size: var(--text-caption-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } input, select, textarea, .panel input, .panel select, .panel textarea, #agent-task, #gen-prompt, #gen-format, .rail-head select, .editor-inspector .field input, .lyric-row input, .timing-row .clip-dur-input { width: 100%; min-height: 40px; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--ink); font-size: var(--text-footnote); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); } textarea { min-height: 96px; resize: vertical; } input::placeholder, textarea::placeholder { color: var(--muted-2); } input:hover, select:hover, textarea:hover { border-color: var(--rule-strong); } input[type="checkbox"], input[type="radio"] { width: 17px; min-height: 17px; accent-color: var(--accent); } input[type="file"] { padding: var(--space-2); } input[type="file"]::file-selector-button { margin-right: 10px; padding: 7px 10px; border: 0; border-radius: 7px; background: var(--surface-3); color: var(--ink-soft); font-weight: 700; cursor: pointer; } .field { display: flex; min-width: 0; flex-direction: column; gap: 6px; } .field-row > .field, .form-grid > .field { flex: 1 1 180px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); } .field-toggle, .check-row, .bulk-all { display: inline-flex; align-items: center; gap: var(--space-2); } /* Shared control-panel grammar. These classes are emitted by the style panels, FX/ADSR dialogs and crop controls; without rules, panel groups collapsed together,
used a UA border, and both colour inputs and crop silhouettes had no intentional shape. */ .stack { min-width: 0; display: grid; gap: var(--space-3); } .divider { width: 100%; height: 0; margin: var(--space-1) 0; border: 0; border-top: 1px solid var(--rule); } .swatch { flex: 0 0 auto; display: inline-block; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--surface-3); } .swatch--dashed { border-style: dashed; } input.swatch { width: 32px; height: 32px; min-height: 32px; padding: 2px; cursor: pointer; } .badge, .pill { display: inline-flex; width: fit-content; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface-3); color: var(--muted); box-shadow: var(--elev-1); font: 800 var(--text-caption-2)/1.2 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; } .badge--success, .pill.posted, .pill.status-posted, .pill.status-rendered { border-color: color-mix(in srgb, var(--success) 28%, transparent); background: color-mix(in srgb, var(--success) 8%, transparent); color: var(--success); } .badge--danger, .pill.failed { border-color: color-mix(in srgb, var(--danger) 28%, transparent); background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--danger); } .pill.status-scheduled { color: var(--warm); } /* A simulated (dry-run) send is a normal state, not a fault: it borrows the same colour-only treatment as .status-scheduled — an existing token, no new surface or border — so it reads as distinct from a real publish (green) without borrowing the danger red. */ .pill.status-simulated { color: var(--cyan); } .chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; } .chips button.pill { cursor: pointer; } .chips button.pill.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); } /* Overview, dashboard, and content grids */ .launchpad, #dashboard, .screen[aria-label="Publishing"] { grid-template-columns: repeat(12, minmax(0, 1fr)); } .launchpad > *, #dashboard > *, .screen[aria-label="Publishing"] > * { grid-column: 1 / -1; } #launchpad-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #launchpad-grid .card { height: 100%; } #launchpad-grid .card .btn { width: 100%; margin-top: auto; } #dashboard-aesthetics { grid-column: span 6; } /* Dashboard orientation rail — Set up → Make → Ship, one primary next action per region. Reuses existing tokens; only the rail's own layout is new. */ #dashboard-orient { display: grid; gap: var(--space-3); } .orient-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); } .orient-region { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--surface-2); } .orient-region-head { display: flex; flex-direction: column; gap: var(--space-1); } .orient-label { color: var(--accent-strong); } .orient-cta { min-height: 44px; width: 100%; } .orient-links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .orient-links a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--muted); font-size: 12px; font-weight: 700; text-decoration: none; } .orient-links a:hover { color: var(--ink); background: var(--surface-hover); } .orient-links a:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } #dashboard-in-progress { color: var(--warm); font-weight: 700; } #dashboard-attention { grid-column: span 6; } .screen[aria-label="Publishing"] #send-accounts, .screen[aria-label="Publishing"] #send-actions, .screen[aria-label="Publishing"] #ai-caption-studio, .screen[aria-label="Publishing"] #connect-accounts { grid-column: span 6; align-content: start; } #create-draft { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; } #create-draft > label:first-child, #create-draft-hint, #create-draft > .status { grid-column: 1 / -1; } #draft-open-modal { grid-column: span 3; width: 100%; white-space: nowrap; } #draft-kind { grid-column: span 3; } #draft-count { grid-column: span 2; } #draft-preset { grid-column: span 4; } #draft-run { grid-column: span 3; width: 100%; } #media-upload { grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; } #media-upload > label, #media-upload > .status { grid-column: 1 / -1; } #media-upload-run, #media-phone-upload { white-space: nowrap; } .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); gap: var(--space-4); } .stat { min-height: 92px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); color: var(--ink); text-decoration: none; } .stat:hover { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--surface-2); } .stat-num { font: 800 var(--text-large-title)/1 var(--num); letter-spacing: -0.02em; font-variant-numeric: tabular-nums slashed-zero; } .stat-label { color: var(--muted); font: 800 var(--text-micro)/1.2 var(--mono); letter-spacing: 0.11em; text-transform: uppercase; } .stat--danger .stat-num { color: var(--danger); } .grid, .card-grid, .template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: var(--space-4); } /* A .card that is a link and reads as one line: label left, arrow right. .card is a column flex box, so the row direction has to be said out loud. */ .media-oneshot-hint { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--ink); text-decoration: none; } .media-oneshot-hint:hover { border-color: var(--rule-strong); } #media-summary, #media-empty, #media-error { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; } .cell { margin: 0; overflow: hidden; border-radius: var(--radius-md); box-shadow: var(--elev-2), var(--rim); } .cell:hover { border-color: var(--rule-strong); } .cell img { width: 100%; aspect-ratio: 9 / 13; display: block; object-fit: cover; background: var(--thumb-backing); } .cell figcaption { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; color: var(--muted); font-size: var(--text-caption-2); overflow-wrap: anywhere; } .cell.audio { min-height: 180px; display: grid; place-items: center; } .audio-glyph { color: var(--cyan); font-size: 2.2rem; text-shadow: 0 0 28px color-mix(in srgb, var(--cyan) 32%, transparent); } /* ── P-3 · WAITING LOOKS DESIGNED ────────────────────────────────────────── A skeleton is a promise about SHAPE. Its whole job is that when the content lands, nothing under it moves — so a skeleton that is not the size of the thing it stands in for is worse than no skeleton at all: it reserves the wrong space and then jolts the page when the real answer arrives. `background-size: 200% 100%` on a three-stop gradient is deliberate and is not a dead sweep waiting to be animated. At 200% only the left half of the ramp is on screen, so the tile reads as `--surface` easing up to `--surface-3` across its width — a soft internal highlight rather than a flat grey block. Doubling the size is what makes that ramp gentle instead of a hard band. WHY THESE PULSE AND THE BOOT SHELL DOES NOT. `app/index.html` says of its own rail placeholders: "No pulse: a skeleton that animates draws the eye to the wait." That is right THERE and wrong here, and the difference is what else is on the screen. The boot shell is the only thing painted — there is no content to be distinguished from, the wait is unavoidable and total, and a pulsing outline would be the single moving thing in an otherwise dead window, which is precisely "look how long this is taking". An in-app skeleton sits INSIDE a screen that has already arrived, beside live controls and real copy. Static grey next to live content does not read as "still loading", it reads as "this loaded broken". The breath is what carries the meaning, and `pulse` is deliberately 0.62→1 over 1.6s — slower and shallower than any other loop in the file — so it says "working" without competing with the content around it. The two decisions disagree on purpose and for the same reason: put motion where it is information. */ .skeleton { background: linear-gradient(90deg, var(--surface), var(--surface-3), var(--surface)); background-size: 200% 100%; } /* Empty skeleton placeholders have no content to size them — give each the footprint of the card it stands in for so loading grids don't collapse. Every number below is the measured resting height of the real component, not a round guess: `.cell` is a 9:13 media tile, `.stat` already declares its own 92px floor and needs nothing here, and the three added below were each collapsing to their padding alone. */ .cell.skeleton { aspect-ratio: 9 / 13; } .template-card.skeleton { min-height: 200px; } /* A `.row` is 16px padding, a title line, a meta line and an action cluster. Empty it was 33px tall, so a loading list of six rows occupied a third of the space the answer needed and the screen jumped when it came. */ .row.skeleton { min-height: 76px; } /* `#formats-loading` — a whole panel standing in for a screen's worth of content. 24px padding on its own made a 49px bar that read as a broken divider rather than as a panel on its way. */ .panel.skeleton { min-height: 240px; } /* Deliberately NOT added: `.look-card.skeleton`. The look gallery's loading state uses `.cell skeleton`, which already has the 9:13 shape, and a rule with no markup behind it is the same rot as markup with no rule — see the handoff note at the foot of this file. */ .board-toolbar { display: flex; flex-direction: column; gap: var(--space-3); } .chip-group > .micro { min-width: 66px; } .date-window { display: inline-flex; align-items: center; gap: var(--space-2); } #date-window-label { min-width: 150px; text-align: center; color: var(--muted); } .bulk-bar { padding: var(--space-3) 14px; border-radius: var(--radius-sm); } .bulk-bar .status, .bulk-bar .micro { flex-basis: 100%; } .bulk-check { flex: 0 0 17px; } @media (hover: hover) { .row .row-actions { opacity: 0.55; transition: opacity var(--transition); } .row:hover .row-actions, .row:focus-within .row-actions { opacity: 1; } } .caption-text { user-select: all; color: var(--ink-soft); line-height: 1.55; } .hashtag-line { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--bg-soft); } /* ── HONESTY SURFACES — beauty is not an excuse to lie. These read LOUDER after the redesign: opaque, on the page (never behind it), never dimmed or pulsed, and carried on size AND colour AND a bar so no single failure can erase them. Every colour here is now derived from the THEME's own --warm / --success, not from a frozen literal. It used to be `rgba(255, 180, 94, .55)` — the retired dark palette's amber — applied to both themes, so in light the banner's outline measured 1.34:1 against its own fill and 1.39:1 against the page: a DRY-RUN banner whose extent nobody could see. The fill itself carries only 1.04:1 in light (#fffbeb on white), so the outline IS the surface's edge; it is drawn at full token strength rather than a fraction of a colour that no longer exists. Measured light 4.75 / 4.79:1, dark 8.07 / 7.20:1. */ .mode-banner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 14px; border: 1px solid var(--rule); border-radius: var(--radius-sm); box-shadow: var(--elev-1); font-size: var(--text-footnote); font-weight: 600; } .mode-banner.mode-dry, .mode-dry { border-color: color-mix(in srgb, var(--warm) 55%, transparent); border-left: 4px solid var(--warm); background: var(--mode-dry-bg); color: var(--warm); } .mode-banner.mode-live, .mode-live { border-color: color-mix(in srgb, var(--success) 52%, transparent); border-left: 4px solid var(--success); background: var(--mode-live-bg); color: var(--success); } .badge--warn { border-color: color-mix(in srgb, var(--warm) 55%, transparent); background: var(--mode-dry-bg); color: var(--warm); font-weight: 800; } .badge--warn::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } /* A caution note, as opposed to a caution chip. `fx_modal.rs` renders `

` for "this opacity will make the overlay invisible" and "this shadow offset puts the shadow outside the frame", and `.warn` matched nothing — so both rendered as ordinary `.micro`: 9px, `--muted-2`, indistinguishable from the help text above them. A warning nobody can see is the same defect as a DRY-RUN banner with an invisible boundary. Not colour alone. `.micro` is 9px and these sit directly under the control they are about, so the rule down the leading edge — the same mark `.mode-banner` already uses to say "state, not decoration" — is what separates "advice" from "this setting is currently broken" for anyone who cannot use the hue. `--warm` measures 5.25:1 on the card in light and 8.28:1 in dark. A border rather than a `::before` glyph on purpose: both call sites render the `

` unconditionally and put an empty string in it when there is nothing to warn about, so generated content would leave a marker floating under a healthy control. An empty block is zero-height, so its border draws nothing — the treatment appears exactly when there is a warning to carry. Ordering matters and is not accidental: `.warn` and `.micro` are both one class, so this rule wins on the colour only because it is LATER in the file. Do not move it above `.micro`. */ .warn { border-inline-start: 3px solid var(--warm); padding-inline-start: var(--space-2); color: var(--warm); font-weight: 800; } .mode-banner, .badge--warn, .badge--danger, .warn, .status, .error, .render-job-error { opacity: 1 !important; animation: none !important; filter: none !important; } button:disabled .badge--warn, .is-loading .mode-banner { opacity: 1 !important; } /* One-Shot: guided, obvious, and prerequisite-aware. */ .oneshot { grid-template-columns: repeat(12, minmax(0, 1fr)); } .oneshot > * { grid-column: 1 / -1; } #oneshot-intro { padding: var(--space-6); } #oneshot-intro strong, #oneshot-intro h1 { font: 900 clamp(1.5rem, 3vw, 2.15rem)/1 var(--display); letter-spacing: -0.032em; } #oneshot-step-song, #oneshot-step-photos { grid-column: span 6; } #oneshot-step-look { grid-column: 1 / -1; } #oneshot-step-make { grid-column: 1 / -1; padding: clamp(20px, 3vw, 28px); } .oneshot-step-head { display: flex; align-items: center; gap: 10px; } .oneshot-step-head strong { flex: 1; font-size: var(--text-callout); } .oneshot-step-num { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); border-radius: 9px; background: var(--accent-soft); color: var(--accent-strong); font: 700 var(--text-caption-2)/1 var(--mono); } .oneshot-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px var(--space-3); } .oneshot-controls input[type="file"], .oneshot-controls button { grid-column: 1 / -1; } .oneshot-start { width: 100%; min-width: 0; } .oneshot-start input { min-width: 120px; flex: 1 1 180px; } .oneshot-lyrics-search { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); align-items: center; gap: var(--space-2) var(--space-3); } .oneshot-lyrics-search .btn { grid-column: 2; justify-self: start; } /* `.oneshot-controls` is a grid, so it overrides the browser's default details disclosure rule. Restore the closed state explicitly; optional stock search should not occupy the same visual tier as the required uploads. */ details.oneshot-stock:not([open]) > .oneshot-controls { display: none; } .oneshot-songs, .oneshot-aesthetics { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .oneshot-song, .oneshot-aesthetic { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--bg-soft); } .oneshot-song-name, .oneshot-aesthetic-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oneshot-make-btn { width: 100%; min-height: 58px; font-size: var(--text-callout); } .action-readiness { display: flex; align-items: center; gap: 9px; padding: 10px var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--muted); font-size: var(--text-caption); } .readiness-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--muted-2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted-2) 12%, transparent); } .action-readiness.is-ready { border-color: color-mix(in srgb, var(--success) 28%, transparent); color: var(--success); background: color-mix(in srgb, var(--success) 7%, transparent); } .action-readiness.is-ready .readiness-dot { background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 12%, transparent), 0 0 16px color-mix(in srgb, var(--success) 38%, transparent); } .oneshot-progress, progress { width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 999px; background: var(--surface-3); accent-color: var(--accent); } progress::-webkit-progress-bar { background: var(--surface-3); } progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--cyan)); border-radius: inherit; } /* ── P-8 · NUMBERS MOVE ───────────────────────────────────────────────────── A render's progress arrives as a poll: the server is asked every couple of seconds and answers 5, then 5, then 5, then 88, then 100. Written straight to the element that is a HARD CUT — the bar teleports two thirds of the way across the panel between two frames, which reads as a glitch rather than as work being done, and it is the most-watched pixel in the product because it is what a person stares at while they wait. THE OBVIOUS FIX DOES NOT WORK, AND IT WAS MEASURED RATHER THAN ASSUMED. `progress::-webkit-progress-value { transition: width … }` is the standard recipe for this and it is quoted everywhere. It was written here, shipped into a real Chrome against a real build, and instrumented: a `` was moved from value 5 to value 95 and its `transitionrun` / `transitionstart` / `transitionend` listeners — which do fire for pseudo-elements, and report which one via `event.pseudoElement` — recorded NOTHING. Not with the rule on the pseudo alone, and not with `appearance: none` on the host, which is the usual explanation offered when it fails. In the same page, in the same frame, a plain `

` with `transition: width 320ms` fired `transitionend` at 0.32s exactly. The engine simply does not run author transitions on the width the UA computes for that pseudo-element any more. So the rule is NOT here. A declaration that provably does nothing is worse than an absent one: the next person reads it, believes the bar ticks, and stops looking. This is the honest state instead — the classes for a bar that CAN tick, and a named wiring job. WIRING JOB (P-8, open). `` cannot be animated, so the two callers need the ordinary two-element bar below, which is also the WAI-ARIA `progressbar` pattern and keeps everything a screen reader had:
Indeterminate — which is the honest state for most of a Syzygy render, because the server parks at 5 until it is done — is the same track with no `aria-valuenow` and no `.progress-fill`, so nothing claims a percentage it does not have. That distinction already exists in the Rust (`render_tray.rs::progress_view`, `ProgressView::Indeterminate`) and must survive the swap. · `oneshot.rs:3727` and `:3739` — the determinate and indeterminate ``. · `render_tray.rs:246` and `:250` — the same pair, per job. `--dur-stage`, not a new number. The ledger's ceiling is 600ms and the temptation is to spend all of it, but this file has four durations and inventing a fifth for one bar is the exact drift the motion table was written to stop. 320ms is already reserved for "the one surface this screen is about", and while a render is running the progress bar IS that surface. Eased OUT, so a jump from 5% to 88% leaves fast and settles, which is what makes it read as catching up rather than as sliding. `width` here is not a P-10 violation: P-10 is about hover and enter states moving a box under the cursor. This is a progress indicator whose entire purpose is to change width, it sits inside its own fixed-height track, and it shifts nothing around it. `app/motion-check.mjs` scopes its layout ban to `:hover` / `:active` selectors for exactly that reason. Reduced motion snaps: the wildcard in the reduce block collapses `transition-duration` for every element in the document, so a reader who asked for less motion gets the number immediately. */ .progress-track { width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: var(--surface-3); } .progress-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--cyan)); transition: width var(--dur-stage) var(--ease-out); } /* The other half of P-8 — a number printed as TEXT (the quota counters, the render count, the line count) — cannot be tweened by CSS from an element that simply contains new text. It needs the value handed over as a number rather than as a string, which is a markup change and therefore not this file's to make. The class and its contract are defined here so the markup pass is a one-line edit rather than a design decision; it is listed with the other open wiring jobs at the foot of this file, and it is applied to nothing yet, so it costs nothing until it is. Contract: The element must be EMPTY — the digits are drawn by the counter, so a value in the markup would print twice. Registering `--tick` as an `` is what makes it animatable at all; an unregistered custom property is a string and jumps. `counter-reset` re-reads it every frame of the transition, so the digits count rather than cross-fade, and the integer syntax means only whole numbers are ever shown on the way. A browser without `@property` ignores the at-rule and lands on the final value with no transition, which is the correct degradation: the number is right, it just does not travel. */ @property --tick { syntax: ""; inherits: false; initial-value: 0; } .num-tick { /* 480ms, inside the ledger's 600ms ceiling and deliberately slower than the bar. This is the one duration outside the table and the justification is legibility, not taste: at 320ms a three-digit counter renders about eight distinct values and reads as flicker, where half a second lets the eye follow the run. Named as its own token so the next person changes it here and once. */ --tick-dur: 480ms; transition: --tick var(--tick-dur) var(--ease-out); counter-reset: tick var(--tick); font-variant-numeric: tabular-nums slashed-zero; } .num-tick::after { content: counter(tick); } .oneshot-result { display: flex; flex-wrap: wrap; gap: 9px; } /* The finished render, playable in the page. Takes the whole row so the download/signup controls wrap underneath it. Renders are 9:16, so it is capped by height rather than width or a tall phone frame fills the viewport. */ .oneshot-player { flex: 1 0 100%; width: 100%; max-height: 58dvh; border-radius: var(--radius-md); background: #000; object-fit: contain; } /* Optional stock search, folded away until asked for. `display` is deliberately NOT set on the
itself: overriding it to flex/grid makes Chromium and WebKit paint the closed content, which would put a search box the user never opened in the middle of the photo step. */ .oneshot-stock { margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--bg-soft); } .oneshot-stock > summary { cursor: pointer; color: var(--muted); font: 800 10px/1.2 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; } .oneshot-stock > summary:hover { color: var(--ink); } .oneshot-stock > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; } .oneshot-stock[open] > summary { margin-bottom: var(--space-3); color: var(--ink); } .oneshot-stock > *:not(summary) + * { margin-top: var(--space-3); } /* Generate/agent panels */ #page-agent, #generate-panel { display: grid; gap: var(--space-3); padding: 18px; border-radius: var(--radius-md); } #agent-log, #gen-log { display: grid; gap: var(--space-2); max-height: 45dvh; overflow: auto; margin: 0; padding: 0; list-style: none; } #agent-log li, #gen-log li { padding: 10px var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--bg-soft); color: var(--muted); font-size: var(--text-caption); } /* Templates and previews */ .template-card { overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 13px; border-radius: var(--radius-md); } .template-editor { display: grid; gap: var(--space-4); } .template-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .template-meta, .template-descriptor { color: var(--muted); font-size: var(--text-caption-2); } .template-thumb { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); background: var(--thumb-backing); } .tpl-stage { position: relative; width: min(259px, 100%); aspect-ratio: 9 / 16; margin: var(--space-1) auto; overflow: hidden; border: 1px solid var(--rule); border-radius: var(--radius-md); background: linear-gradient(160deg, var(--stage-1), var(--stage-2)); box-shadow: var(--elev-inset); } .tpl-overlay { position: absolute; left: 5%; width: 90%; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15; font-weight: 700; pointer-events: none; } .tpl-overlay span { max-width: 100%; overflow-wrap: anywhere; } .repurpose-platforms, .repurpose-variants { display: grid; gap: var(--space-2); } .repurpose-platform-row, .repurpose-variant, .repurpose-schedule { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--bg-soft); } .repurpose-platform-row > label, .repurpose-variant > label { flex: 1; } .cut-structure, .effect-list, .overlay-list { display: grid; gap: var(--space-2); } .effect-intensity, .overlay-timing { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); } .overlay-row { align-items: stretch; flex-direction: column; } .overlay-row-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .overlay-type, .overlay-lottie-src { width: 100%; } /* Modals, menus, tabs, and notifications */ .modal-overlay { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 18px; background: rgba(3, 5, 8, 0.72); backdrop-filter: blur(12px); } .modal-card { width: min(100%, 520px); max-height: min(90dvh, 760px); overflow: auto; padding: 20px; border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--elev-5), var(--rim); } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: 14px; } .modal-title { font-size: var(--text-headline); font-weight: 800; letter-spacing: -0.2px; } .modal-body { display: grid; gap: 13px; } /* PP-5. A dialog is `width: min(100%, 520px)`, which is a promise it cannot keep on its own: one unbreakable string inside it sets the content's min-content width and the card then scrolls sideways behind its own rounded corner. Measured on a 390px phone, the "Upload from your phone" dialog's card was 354px wide around 759px of content — the QR code, which is the only thing that dialog exists for, was cut off mid-pattern, the link ran off the edge and both sentences under it were clipped mid-word. Nothing about that is visible in the numbers: the DOCUMENT does not scroll, because the card already carries `overflow: auto` and absorbed it. `anywhere`, not `break-word`: a 64-character hex token has no break opportunity at all, so only `anywhere` may split it. The image cap is the same defect's other half — a QR is served at a fixed pixel size and has no reason to be larger than the card holding it. */ #phone-upload-link { overflow-wrap: anywhere; } .modal-body img { max-width: 100%; height: auto; } /* The OTHER dialog. `shared_block.rs` renders a bare `