/* ═══════════════════════════════════════════════════════════════════════════ Cutaway — the editor. EVERY NUMBER AND EVERY COLOUR IN THIS FILE COMES OUT OF THE DESIGN FILE. None of it is a judgement call. The design is inline-styled; this is the same values moved into classes so they can be maintained, not reinterpreted. If a value here disagrees with Template Studio.dc.html, this file is wrong. Layout, left to right: [ 54px rail ] [ 268–384px panel column ] [ canvas stage ] [ 262–352px props ] The rail and the panel column are the platform shell's (assets/css/shell.css and views/rail.php). Everything below is the editor's own. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Surfaces */ --cw-page: #0A1020; /* the app's ground */ --cw-panel: #131C2F; /* an input, a card on the ground */ --cw-stage: #070C17; /* behind the video — the deepest layer */ --cw-props: #0C1324; /* the right-hand column */ --cw-card: #101728; /* a template card, the export dialog */ --cw-strip: #0C1424; /* the filmstrip's floor */ --cw-thumb-bg: #0F1626; /* a card's image well before it loads */ /* Ink */ --cw-ink: #F2F2F3; --cw-ink-92: rgba(242,242,243,.92); --cw-ink-72: rgba(242,242,243,.72); --cw-ink-66: rgba(242,242,243,.66); --cw-ink-62: rgba(242,242,243,.62); --cw-ink-55: rgba(242,242,243,.55); --cw-ink-50: rgba(242,242,243,.5); --cw-ink-45: rgba(242,242,243,.45); --cw-ink-42: rgba(242,242,243,.42); --cw-ink-40: rgba(242,242,243,.4); --cw-ink-32: rgba(242,242,243,.32); --cw-ink-30: rgba(242,242,243,.3); --cw-ink-28: rgba(242,242,243,.28); /* Hairlines */ --cw-line-06: rgba(255,255,255,.06); --cw-line-07: rgba(255,255,255,.07); --cw-line-09: rgba(255,255,255,.09); --cw-line-10: rgba(255,255,255,.1); --cw-line-12: rgba(255,255,255,.12); --cw-line-13: rgba(255,255,255,.13); --cw-line-16: rgba(255,255,255,.16); --cw-line-18: rgba(255,255,255,.18); --cw-line-20: rgba(255,255,255,.2); --cw-line-22: rgba(255,255,255,.22); /* Actions */ --cw-blue: #3D74FF; --cw-blue-hi: #5A8AFF; --cw-bone: #EDEAE4; /* the light button, the playhead, the progress bar */ --cw-bone-70: rgba(237,234,228,.7); --cw-bone-60: rgba(237,234,228,.6); --cw-bone-55: rgba(237,234,228,.55); --cw-bone-45: rgba(237,234,228,.45); --cw-bone-25: rgba(237,234,228,.25); --cw-bone-10: rgba(237,234,228,.1); /* Type */ --cw-body-font: 'Instrument Sans', system-ui, sans-serif; --cw-disp-font: 'Archivo', sans-serif; --cw-mono: ui-monospace, Menlo, monospace; /* Columns */ --cw-rail-w: clamp(268px, 26vw, 384px); --cw-props-w: clamp(262px, 27vw, 352px); /* Set per template by the editor, so the accent bars, pills, grips and the logo mark all follow the template a customer opened. */ --cw-accent: #3D74FF; } @keyframes cw-eq { 0%, 100% { transform: scaleY(.3) } 50% { transform: scaleY(1) } } /* ── `hidden` HAS TO WIN ───────────────────────────────────────────────────── The `hidden` attribute is only `display: none` at the very bottom of the cascade, so ANY class that sets `display` beats it. Three things here do — .cw-gate, .cw-modal and .cw-pane are all flex or block — which meant the unsupported-browser gate sat over the whole editor at full opacity while `el.hidden` was perfectly true. Nothing in the console, nothing wrong with the layout underneath, and half an hour to find. Declared once, here, before anything else can set a display. */ [hidden] { display: none !important } /* ── The frame ───────────────────────────────────────────────────────────── */ .cw { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--cw-page); color: var(--cw-ink); font-family: var(--cw-body-font); -webkit-font-smoothing: antialiased; } .cw ::placeholder { color: var(--cw-ink-28) } .cw input, .cw textarea, .cw button, .cw select { font-family: inherit } /* ── SCROLLBARS ────────────────────────────────────────────────────────────── The default Windows bar is 17px of light grey furniture down the middle of a dark app — it reads as a seam between two programs. These are 6px, on the app's own palette, with no track and no arrows, and they only colour up when the pointer is over the column they belong to. Both syntaxes: `scrollbar-width`/`scrollbar-color` for Firefox, the ::-webkit-scrollbar family for Chrome, Edge and Safari. Neither covers the other, so a thin bar needs both. */ .cw *, .cw { scrollbar-width: thin; scrollbar-color: var(--cw-line-12) transparent; } .cw ::-webkit-scrollbar { width: 6px; height: 6px } .cw ::-webkit-scrollbar-track { background: transparent } .cw ::-webkit-scrollbar-corner { background: transparent } .cw ::-webkit-scrollbar-thumb { background: var(--cw-line-12); border-radius: 999px; } /* Only the column under the pointer brightens, so a still screen has no furniture on it at all. */ .cw-rail:hover::-webkit-scrollbar-thumb, .cw-props-in:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); } .cw ::-webkit-scrollbar-thumb:hover { background: var(--cw-bone-45) } .cw-rail, .cw-props-in { scrollbar-gutter: stable } /* ── Header ──────────────────────────────────────────────────────────────── */ .cw-head { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--cw-line-06); flex: none; } .cw-brand { display: flex; align-items: center; gap: 10px; padding-right: 16px; border-right: 1px solid var(--cw-line-07); } .cw-brand-mk { width: 22px; height: 22px; border-radius: 3px; background: var(--cw-bone); flex: none; overflow: hidden } .cw-brand-mk img { width: 100%; height: 100%; object-fit: cover; display: block } .cw-brand-wd { font-family: var(--cw-disp-font); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .cw-head-name { min-width: 0 } .cw-tpl-name { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cw-tpl-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--cw-ink-42); margin-top: 1px; white-space: nowrap; } .cw-head-sp { flex: 1 } .cw-chips { display: flex; gap: 2px; background: var(--cw-panel); border: 1px solid var(--cw-line-07); border-radius: 5px; padding: 3px; } .cw-chip { border: none; border-radius: 3px; padding: 6px 12px; font-size: 11.5px; cursor: pointer; background: none; color: var(--cw-ink-50); } .cw-chip.on { background: var(--cw-bone); color: var(--cw-page); font-weight: 700 } /* ── SAVE ──────────────────────────────────────────────────────────────────── Where the brand mark used to be. It is the control somebody reaches for most after the words themselves, and it was previously nowhere — the editor saved silently and the customer had to take that on faith. */ .cw-save { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border: 1px solid var(--cw-line-16); border-radius: 5px; background: var(--cw-panel); color: var(--cw-ink-92); font-size: 12px; font-weight: 600; letter-spacing: .02em; cursor: pointer; white-space: nowrap; flex: none; } .cw-save:hover { border-color: var(--cw-line-22); background: #16203A } .cw-save .ic { line-height: 0; color: var(--cw-ink-62) } /* Unsaved work: the button says so rather than a dot somewhere else saying it. */ .cw-save.dirty { border-color: var(--cw-bone-45); color: var(--cw-ink) } .cw-save.dirty .ic { color: var(--cw-bone) } .cw-save.saved { border-color: rgba(79,158,134,.55) } .cw-save.saved .ic { color: #4F9E86 } .cw-save[disabled] { opacity: .5; cursor: default } /* ── DIALOGS ───────────────────────────────────────────────────────────────── EVERY ASK IN THIS APP USES THESE, and none of them use the browser's own. `confirm()` and `alert()` are grey Windows chrome bolted to the top of the window: they name the site, they cannot be styled, they read as a warning from the browser rather than a question from the app, and on a dark full-screen editor they look like something has gone wrong. They also block the whole page, which means a render in the background stops being watched. Same skin as the Publish dialog — 404px, #101728, one hairline, 8px — because an app should ask its questions in one voice. */ /* ── EVERY DIALOG IN THE APP ─────────────────────────────────────────────────── One box carries the name prompt, every confirmation and every refusal, so improving it improves all of them at once. ── THE IDEA, AFTER TWO GOES AT IT ────────────────────────────────────────── The first version was a 404px browser confirm() in a nicer box. The second was 520px with a radial glow, a gradient fill and a blue gradient pill — bigger, and still generic: that IS the stock recipe, and it read as something assembled rather than designed (Uche, 2026-08-12: "too basic… doesn't look like something an AI did"). So this one is not a modal wearing decoration. It is A CARD FROM THIS APP: · it opens with the editor's own block-head — 3px accent bar, wide-tracked label, hairline running out to the edge — the same gesture FOOTAGE, VOICEOVER and BACKGROUND MUSIC open with, three feet to the right · the primary button is BONE (#EDEAE4), which the design file calls "the light button" and already uses for the active aspect chip and the playhead. Blue is kept for where blue means something: Publish, and Render inside it · depth is one hairline of light on the top edge, a 1px accent rule across the very top, and a long shadow. No glow · the foot is its own darker surface, so the buttons sit ON something instead of floating on the same fill as the copy Everything above is borrowed from the app rather than invented for the dialog, which is the whole reason it stops looking like a component library. */ .cw-ask { position: fixed; inset: 0; z-index: 140; background: rgba(3,6,14,.78); -webkit-backdrop-filter: blur(10px) saturate(.85); backdrop-filter: blur(10px) saturate(.85); display: none; align-items: center; justify-content: center; padding: 24px; } .cw-ask.on { display: flex; animation: cw-ask-in .18s ease-out } @keyframes cw-ask-in { from { opacity: 0 } to { opacity: 1 } } /* ── THE BOX ──────────────────────────────────────────────────────────────── Squarer and quieter than a modal usually is. The depth comes from one hairline of light along the top edge and a long shadow underneath — not from a radial glow, which is the thing that made this look generic. */ .cw-ask-box { position: relative; overflow: hidden; width: 520px; max-width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 0; background: linear-gradient(180deg, #151E31 0%, #0D1421 100%); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 32px 70px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.5), 0 100px 120px -60px rgba(0,0,0,.6); animation: cw-ask-rise .22s cubic-bezier(.16,.84,.44,1); } /* The accent edge. One pixel, full width, at the very top — the detail that makes the box read as a made object rather than a rounded rectangle. */ .cw-ask-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--cw-accent, #3D74FF) 18%, var(--cw-accent, #3D74FF) 82%, transparent 100%); opacity: .85; } @keyframes cw-ask-rise { from { transform: translateY(12px) scale(.99); opacity: 0 } to { transform: none; opacity: 1 } } /* ── THE EYEBROW ─────────────────────────────────────────────────────────── The app's own block-head, the same gesture the right panel opens every block with: a 3px accent bar, a wide-tracked label, and a hairline taking the slack. It tells you what KIND of decision this is before you have read a word, and it is the single thing that makes a dialog here look like part of this app. */ .cw-ask-kind { display: flex; align-items: center; gap: 9px; padding: 17px 24px 0; } .cw-ask-kind i { width: 3px; height: 12px; border-radius: 2px; flex: none; background: var(--cw-accent, #3D74FF); } .cw-ask-kind span { font-family: var(--cw-disp-font); font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cw-ink-62); white-space: nowrap; } .cw-ask-kind b { flex: 1; height: 1px; background: var(--cw-line-07) } .cw-ask-body { padding: 13px 24px 0 } .cw-ask-t { font-family: var(--cw-disp-font); font-size: 22px; font-weight: 600; letter-spacing: -.028em; line-height: 1.24; color: #fff; margin: 0; text-wrap: pretty; } .cw-ask-b { font-size: 13.5px; color: rgba(242,242,243,.62); line-height: 1.65; margin: 10px 0 0; max-width: 46em; text-wrap: pretty; } .cw-ask-field { margin: 20px 24px 0 } .cw-ask-field label { display: block; font-family: var(--cw-disp-font); font-size: 9.5px; font-weight: 700; letter-spacing: .2em; color: rgba(242,242,243,.44); margin-bottom: 8px; } .cw-ask-field .cw-input { height: 46px; border-radius: 10px; font-size: 14.5px; padding: 0 14px; background: rgba(5,9,18,.8); border-color: rgba(255,255,255,.1); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); } .cw-ask-field .cw-input:focus { border-color: var(--cw-accent, #3D74FF); box-shadow: inset 0 1px 3px rgba(0,0,0,.45), 0 0 0 3px rgba(61,116,255,.2); } /* ── THE FOOT ────────────────────────────────────────────────────────────── Its own surface, a shade below the body, so the buttons sit ON something. A row of buttons floating on the same fill as the copy above them is the other half of what read as unfinished. */ .cw-ask-foot { display: flex; gap: 9px; justify-content: flex-end; align-items: center; margin-top: 22px; padding: 15px 20px; background: rgba(4,8,16,.42); border-top: 1px solid rgba(255,255,255,.055); } .cw-ask-foot .cw-btn-flat, .cw-ask-foot .cw-btn-solid, .cw-ask-foot .cw-btn-danger { height: 40px; padding: 0 18px; border-radius: 10px; font-size: 13.5px; font-weight: 600; } /* THE PRIMARY IS BONE, not blue. #EDEAE4 is what the design calls "the light button" — it is the active aspect chip and the playhead — so a dialog using it is wearing the app's own clothes. A blue gradient pill is what every framework ships, which is exactly how this looked generic. Blue stays where blue means something: Publish, and Render inside it. */ .cw-ask-foot .cw-btn-solid { background: var(--cw-bone); color: #0A1020; box-shadow: 0 10px 22px -12px rgba(237,234,228,.5), inset 0 1px 0 rgba(255,255,255,.7); } .cw-ask-foot .cw-btn-solid:hover { background: #FFFDF8 } .cw-ask-foot .cw-btn-solid:active { transform: translateY(1px) } /* ── TONE: invite ────────────────────────────────────────────────────────── The account gate, and nothing else. It is the only dialog in this app that is ASKING for something rather than confirming something already decided, and it is the moment the product is sold — so it is allowed to be a size larger and a shade warmer than a confirmation without becoming a different object. Everything here is still the same box: same radius, same accent edge, same eyebrow. What changes is weight — more room, bigger type, more contrast in the body copy, and the primary in the app's BLUE rather than bone, because blue is what Publish already wears and this button is the last step of pressing it. */ .cw-ask-box[data-tone="invite"] { width: 480px; background: linear-gradient(180deg, #18233A 0%, #0D1421 100%); } /* The top edge and the eyebrow bar follow the button rather than the template. Everywhere else in the app the accent IS the template's — gold on the locksmith, green on the estate agent — and that is right, because those surfaces are about the video. This one is about the account, so a gold hairline over a blue button read as two half-finished ideas rather than one object. */ .cw-ask-box[data-tone="invite"]::before { background: linear-gradient(90deg, transparent 0%, var(--cw-blue) 18%, var(--cw-blue) 82%, transparent 100%); } .cw-ask-box[data-tone="invite"] .cw-ask-kind i { background: var(--cw-blue) } .cw-ask-box[data-tone="invite"] .cw-ask-kind { padding-top: 20px } .cw-ask-box[data-tone="invite"] .cw-ask-body { padding: 15px 26px 4px } .cw-ask-box[data-tone="invite"] .cw-ask-t { font-size: 27px; letter-spacing: -.032em; line-height: 1.2; } /* The body was 13.5px at 62% opacity — small and quiet, for the one line somebody is meant to READ before deciding (Uche, 2026-08-15: "even the text is too small"). */ .cw-ask-box[data-tone="invite"] .cw-ask-b { font-size: 15px; line-height: 1.6; color: rgba(242,242,243,.78); margin-top: 11px; } .cw-ask-box[data-tone="invite"] .cw-ask-foot { margin-top: 24px; padding: 16px 22px } .cw-ask-box[data-tone="invite"] .cw-ask-foot .cw-btn-solid, .cw-ask-box[data-tone="invite"] .cw-ask-foot .cw-btn-flat { height: 44px; font-size: 14px; border-radius: 11px; } .cw-ask-box[data-tone="invite"] .cw-ask-foot .cw-btn-solid { /* PUBLISH'S BLUE, not var(--cw-accent). The accent is the TEMPLATE's — gold on the locksmith, green on the estate agent — so this button changed colour with whatever video happened to be open, and on a gold template it stopped reading as the same action the blue Publish button had just started. This is the last step of pressing Publish, so it wears Publish's colour. */ background: var(--cw-blue); color: #fff; padding: 0 22px; box-shadow: 0 12px 26px -12px rgba(61,116,255,.75), inset 0 1px 0 rgba(255,255,255,.22); } .cw-ask-box[data-tone="invite"] .cw-ask-foot .cw-btn-solid:hover { background: #5A8AFF } .cw-ask-foot .cw-btn-danger { background: #F2685A; color: #230704; box-shadow: 0 10px 22px -12px rgba(255,122,108,.6), inset 0 1px 0 rgba(255,255,255,.35); } .cw-ask-foot .cw-btn-danger:hover { background: #FF7D6F } .cw-ask-foot .cw-btn-flat { background: none; border: 1px solid rgba(255,255,255,.12); color: var(--cw-ink-62); } .cw-ask-foot .cw-btn-flat:hover { border-color: rgba(255,255,255,.3); color: var(--cw-ink) } /* A destructive dialog wears its colour on the edge and the bar, and nowhere else. You can tell a delete from a rename across the room, and the box itself stays the same object. */ .cw-ask-box.danger::before { background: linear-gradient(90deg, transparent 0%, #FF7A6C 18%, #FF7A6C 82%, transparent 100%); } .cw-ask-box.danger .cw-ask-kind i { background: #FF7A6C } .cw-ask-box.danger .cw-ask-kind span { color: rgba(255,154,138,.85) } @media (max-width: 560px) { .cw-ask { padding: 14px } .cw-ask-kind { padding: 15px 18px 0 } .cw-ask-body { padding: 12px 18px 0 } .cw-ask-field { margin: 18px 18px 0 } .cw-ask-foot { padding: 13px 16px; flex-wrap: wrap } .cw-ask-foot .cw-btn-flat, .cw-ask-foot .cw-btn-solid, .cw-ask-foot .cw-btn-danger { flex: 1; justify-content: center } .cw-ask-t { font-size: 19px } } /* A destructive answer is the one button that is not bone — you should be able to tell what a dialog is about to do without reading it twice. */ .cw-btn-danger { background: #FF7A6C; border: none; color: #2A0B07; border-radius: 5px; padding: 8px 18px; font-size: 12.5px; font-weight: 700; cursor: pointer; } .cw-btn-danger:hover { background: #FF9488 } /* ── THE RENDER, IN THE TOP BAR ────────────────────────────────────────────── A render is a job, not a modal. It runs in a worker, so the editor stays fully usable while it works — and the only way a customer can BELIEVE that is if the dialog gets out of the way and the progress carries on somewhere they can see it. So the dialog closes and this takes over. Same visual language as the dialog's own bar: a hairline track, a bone fill, and a monospace figure, because it is the same fact shown in a smaller space. */ /* ── COPY A LINK TO WHAT IS ON SCREEN ─────────────────────────────────────── A 20px glyph on the meta line under the template name, not a button in the header row. It was a bordered "Copy template link" button beside Save and read as one of the main things to do here, which it is not (Uche, 2026-08-11). It is nearly invisible until the pointer is near the name, and it never carries words except in the second after it copies — when the label slides out beside the check, then leaves. Nothing about it takes space it has not earned. */ .cw-link { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin-left: -1px; border: 0; border-radius: 6px; background: none; color: var(--cw-ink-42); cursor: pointer; opacity: 0; /* until the name is hovered */ transition: opacity .16s, color .12s, background .12s, width .18s cubic-bezier(.2,.7,.3,1); } .cw-head-name:hover .cw-link, .cw-link:focus-visible { opacity: 1 } .cw-link:hover { color: var(--cw-ink); background: var(--cw-line-07) } .cw-link:focus-visible { outline: 1px solid var(--cw-line-22); outline-offset: 1px } /* Touch and keyboard have no hover to reveal it with. */ @media (hover: none) { .cw-link { opacity: .55 } } .cw-link-k, .cw-link-tip { display: none } /* ── COPIED ──────────────────────────────────────────────────────────────── The glyph becomes a tick, the pill turns green and the label grows out of it. It says WHICH link — a template link is public, a project link is not — and then it is gone, so the header goes back to being four things. */ .cw-link.done { width: auto; padding: 0 8px 0 6px; gap: 5px; opacity: 1; color: #86E7BC; background: rgba(80,210,150,.12); } .cw-link.done .cw-link-i { display: none } .cw-link.done .cw-link-k, .cw-link.done .cw-link-tip { display: inline-flex; align-items: center } .cw-link.done .cw-link-tip { font-size: 10.5px; font-weight: 600; line-height: 1; letter-spacing: .01em; animation: cwLinkIn .18s ease both; } @keyframes cwLinkIn { from { opacity: 0; transform: translateX(-3px) } to { opacity: 1; transform: none } } /* THE JOB PILL, and it has to be noticeable. A render carries on after the dialog closes, so this is the ONLY thing telling somebody their video is still coming — at 34px with a hairline border it read as another piece of chrome and got lost (Uche, 2026-08-09). It is taller, it has the accent on it, and while it is working it breathes. */ .cw-job { display: none; align-items: center; gap: 11px; height: 40px; padding: 0 15px; border: 1px solid rgba(61,116,255,.42); border-radius: 11px; background: linear-gradient(180deg, rgba(61,116,255,.16), rgba(61,116,255,.08)); cursor: pointer; white-space: nowrap; box-shadow: 0 6px 18px -8px rgba(61,116,255,.5), inset 0 1px 0 rgba(255,255,255,.08); } .cw-job.on { display: inline-flex; animation: cw-job-pulse 2.4s ease-in-out infinite } @keyframes cw-job-pulse { 0%, 100% { box-shadow: 0 6px 18px -8px rgba(61,116,255,.5), inset 0 1px 0 rgba(255,255,255,.08) } 50% { box-shadow: 0 6px 26px -6px rgba(61,116,255,.85), inset 0 1px 0 rgba(255,255,255,.12) } } .cw-job:hover { border-color: rgba(110,155,255,.8) } .cw-job-t { font-size: 12.5px; font-weight: 600; color: #fff } .cw-job-bar { width: 82px; height: 6px; border-radius: 4px; background: rgba(6,10,22,.45); overflow: hidden; flex: none; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); } .cw-job-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, #6E9BFF, #fff); transition: width .2s; } .cw-job-pct { font-family: var(--cw-mono); font-size: 11.5px; font-weight: 600; color: rgba(255,255,255,.8); width: 34px; text-align: right; } /* Finished: it stops breathing, turns green, and the whole pill is the download. */ .cw-job.done { animation: none; border-color: rgba(80,210,150,.55); background: linear-gradient(180deg, rgba(80,210,150,.18), rgba(80,210,150,.08)); box-shadow: 0 6px 18px -8px rgba(80,210,150,.55), inset 0 1px 0 rgba(255,255,255,.1); } .cw-job.failed { animation: none; border-color: rgba(255,122,108,.6); background: linear-gradient(180deg, rgba(255,122,108,.18), rgba(255,122,108,.07)); box-shadow: none; } .cw-job.failed .cw-job-t { color: #FFB4AA } /* ── The finished-render notice ────────────────────────────────────────────── Bottom-right, out of the way of the canvas and the panels, and it does not steal focus — the customer may well be typing when the render lands. */ /* ── THE TITLE HAD NO COLOUR, SO IT WAS BLACK ─────────────────────────── .cw-toast-t set a face, a size and a weight and never a colour, and neither did the card it sits in — so the heading inherited whatever the document default was, which is black, on a card that is nearly black. Only the ERROR variant ever named a colour, so the one toast a customer sees most (their voiceover is ready; their video has rendered) was the one they could not read (Uche, 2026-08-17). Everything below states its own colour. A toast is the one piece of interface that appears over anything, at any moment, in any panel — it cannot inherit and hope. */ .cw-toast { position: fixed; right: 20px; bottom: 20px; z-index: 120; width: 340px; max-width: calc(100vw - 40px); color: var(--cw-ink); background: var(--cw-card); border: 1px solid var(--cw-line-13); border-left: 3px solid var(--cw-accent, #3D74FF); border-radius: 10px; padding: 14px 16px 15px; box-shadow: 0 20px 54px rgba(0,0,0,.6); display: none; } .cw-toast.on { display: block; animation: cw-toast-in .18s ease-out } @keyframes cw-toast-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } /* The state is the left edge, so it reads before a single word does. */ .cw-toast.bad { border-left-color: #FF7A6C } .cw-toast.good { border-left-color: #34D399 } .cw-toast-t { font-family: var(--cw-disp-font); font-size: 14px; font-weight: 700; letter-spacing: -.005em; margin-bottom: 5px; color: var(--cw-ink); } .cw-toast.bad .cw-toast-t { color: #FFB4AA } .cw-toast.good .cw-toast-t { color: var(--cw-ink) } .cw-toast-b { font-size: 12.5px; color: var(--cw-ink-62); line-height: 1.55 } .cw-toast-row { display: flex; gap: 8px; margin-top: 13px } .cw-toast-x { position: absolute; top: 7px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; background: none; border: none; border-radius: 7px; color: var(--cw-ink-42); font-size: 15px; line-height: 1; cursor: pointer; padding: 0; } .cw-toast-x:hover { color: var(--cw-ink); background: rgba(255,255,255,.07) } /* ── HIDE THE PANELS ──────────────────────────────────────────────────────── One button, in the header, that gets both side columns out of the way so the video has the whole window. The editor is a three-column tool most of the time and a viewer some of the time, and the moment you want to actually LOOK at what you have made, 736px of the screen is furniture. A class on the frame rather than inline styles, so the layout has one switch and the loop's own resize watcher picks the new frame size up on the next painted frame with nothing to notify. */ .cw-panels-off .cw-rail, .cw-panels-off .cw-props, .cw-panels-off .cw-pagecol { display: none !important } .cw-panels-off .cw-stage { flex: 1 1 100% } .cw-hide { background: none; border: 1px solid var(--cw-line-12); color: var(--cw-ink-62); border-radius: 5px; height: 34px; padding: 0 12px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; } .cw-hide:hover { border-color: var(--cw-line-22); color: var(--cw-ink) } .cw-hide .ic { line-height: 0 } .cw-panels-off .cw-hide { border-color: var(--cw-bone-45); color: var(--cw-ink) } .cw-publish { background: var(--cw-blue); border: none; color: #fff; border-radius: 5px; padding: 10px 24px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; cursor: pointer; white-space: nowrap; box-shadow: 0 6px 18px rgba(61,116,255,.4); } .cw-publish:hover { background: var(--cw-blue-hi) } .cw-publish[disabled] { opacity: .5; cursor: default; box-shadow: none } /* ── Body ────────────────────────────────────────────────────────────────── */ .cw-body { flex: 1; display: flex; min-height: 0 } /* ── The template column ─────────────────────────────────────────────────── */ .cw-rail { box-sizing: border-box; width: var(--cw-rail-w); flex: none; border-right: 1px solid var(--cw-line-06); overflow-y: auto; padding: 18px 14px 28px; display: flex; flex-direction: column; gap: 22px; } .cw-rail-head { display: flex; flex-direction: column; gap: 10px; padding: 0 4px } .cw-rail-headrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px } .cw-eyebrow { font-family: var(--cw-disp-font); font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--cw-ink-42); } .cw-rail-note { font-size: 10.5px; color: var(--cw-ink-30); letter-spacing: .04em; white-space: nowrap } .cw-search { background: var(--cw-panel); border: 1px solid var(--cw-line-07); border-radius: 5px; padding: 8px 11px; color: var(--cw-ink); font-size: 12.5px; outline: none; } .cw-search:focus { border-color: var(--cw-line-22) } /* The shelf is ONE flat grid. .cw-group / .cw-group-head / .cw-group-name went with the category headings — see views/_templates-column.php for why. .cw-hair stays: it is the hairline the rail head and other blocks use too. */ .cw-hair { flex: 1; height: 1px; background: var(--cw-line-06) } /* ── The category browser ──────────────────────────────────────────────────── Rows, visible and scannable — never a dropdown. The header folds the whole list (the accordion that keeps a fifty-category pack tidy) and names the active pick while folded. All tokens are the column's own. */ .cw-cats { display: flex; flex-direction: column; gap: 7px; padding: 0 4px } .cw-cats-head { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font-family: var(--cw-disp-font); font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--cw-ink-42); } .cw-cats-head em { font-style: normal; letter-spacing: .02em; color: var(--cw-ink-62); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; font-weight: 600 } .cw-cats-head svg { flex: none; transition: transform .14s; opacity: .55 } .cw-cats-head.closed svg { transform: rotate(-90deg) } .cw-cats-list { display: flex; flex-direction: column; gap: 2px } .cw-cat { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 5px; background: none; cursor: pointer; text-align: left; padding: 6px 8px; color: var(--cw-ink-62); font-size: 12px; font-weight: 500; transition: background .12s, color .12s; } .cw-cat:hover { background: var(--cw-panel); color: var(--cw-ink) } .cw-cat.on { background: var(--cw-panel); color: var(--cw-ink); font-weight: 600 } .cw-cat em { font-style: normal; margin-left: auto; font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--cw-ink-40); } .cw-cat.on em { color: var(--cw-ink-62) } /* ── A course's lesson list ────────────────────────────────────────────────── The platform tutorials course's vertical design, ported as rows that open the editor: a numbered row, a small thumb where its play box sits, title on the number's baseline, meta underneath. Same geometry (62×40 thumb, 10px numerals), this column's own tokens. */ .cw-lessons { display: flex; flex-direction: column; padding: 0 4px } .cw-lessons-back { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; border: 0; background: none; cursor: pointer; padding: 2px 0 10px; font: 600 11.5px/1 Inter, system-ui, sans-serif; color: var(--cw-ink-55); } .cw-lessons-back:hover { color: var(--cw-ink) } .cw-lessons-head { padding-bottom: 12px; border-bottom: 1px solid var(--cw-line-07); margin-bottom: 4px } .cw-lessons-title { font-size: 15px; font-weight: 700; letter-spacing: -.018em; color: var(--cw-ink) } .cw-lessons-blurb { margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--cw-ink-55) } .cw-lessons-count { margin-top: 9px; font-size: 11.5px; color: var(--cw-ink-40) } .cw-lessons-rows { display: flex; flex-direction: column } .cw-lesson { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--cw-line-06); background: none; cursor: pointer; padding: 10px 2px; transition: background .12s; } .cw-lesson:hover { background: var(--cw-panel) } .cw-lesson-thumb { position: relative; width: 62px; height: 40px; flex: none; border-radius: 7px; background: var(--cw-thumb-bg) center/cover; display: grid; place-items: center; overflow: hidden; color: var(--cw-ink-40); } .cw-lesson-main { flex: 1; min-width: 0; display: block } .cw-lesson-toprow { display: flex; align-items: baseline; gap: 7px } .cw-lesson-toprow em { font: 700 10px/1 Inter, system-ui, sans-serif; font-style: normal; color: var(--cw-ink-30); font-variant-numeric: tabular-nums; } .cw-lesson-name { font-size: 12.5px; font-weight: 600; color: var(--cw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cw-lesson-meta { display: block; margin-top: 4px; font-size: 11px; color: var(--cw-ink-42) } .cw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px } .cw-card { cursor: pointer; border-radius: 6px; overflow: hidden; border: 1px solid var(--cw-line-07); background: var(--cw-card); padding: 0; text-align: left; display: block; width: 100%; } .cw-card.on { border-color: var(--cw-bone-55); box-shadow: 0 0 0 1px var(--cw-bone-25), 0 10px 30px rgba(0,0,0,.5); } .cw-card-well { aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--cw-thumb-bg) } .cw-card-img { position: absolute; inset: 0; background-size: cover; background-position: center } .cw-card-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,10,22,.92) 0%, rgba(6,10,22,.25) 46%, rgba(6,10,22,0) 74%); } .cw-card-txt { position: absolute; left: 10px; right: 10px; bottom: 9px } .cw-card-kick { display: flex; align-items: center; gap: 6px; margin-bottom: 4px } .cw-card-dash { width: 11px; height: 1px; background: rgba(255,255,255,.55); flex: none } .cw-card-kicktx { font-family: var(--cw-disp-font); font-size: 8.5px; font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cw-card-name { font-family: var(--cw-disp-font); font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: -.005em; color: #fff; text-wrap: pretty; } .cw-card-dur { position: absolute; top: 8px; right: 8px; font-family: var(--cw-mono); font-size: 9.5px; color: rgba(255,255,255,.72); background: rgba(6,10,22,.5); border: 1px solid var(--cw-line-12); border-radius: 3px; padding: 2px 6px; } .cw-card-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; display: none } .cw-card.on .cw-card-bar { display: block } /* ── The stage ───────────────────────────────────────────────────────────── */ .cw-stage { box-sizing: border-box; flex: 1 1 420px; display: flex; flex-direction: column; min-width: 318px; min-height: 0; background: var(--cw-stage); } .cw-stage-in { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; padding: 22px; container-type: size; } /* The frame. Sized so it is EXACTLY the chosen ratio inside the stage, which is what lets the painter treat "n percent of frame height" as the whole of the design's container-query sizing. --cw-r is set by the editor. */ .cw-frame { flex: none; position: relative; overflow: hidden; border-radius: 6px; background: #000; width: min(100cqw, calc(100cqh * var(--cw-r))); height: min(100cqh, calc(100cqw / var(--cw-r))); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px var(--cw-line-06); touch-action: none; } /* The canvas IS the video. Footage, scrim, text and logo are all painted by assets/js/paint.js — the same function the exporter runs, so what is on screen and what lands in the MP4 cannot drift apart. */ .cw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block } /* Editor chrome, over the canvas, never in the export. */ .cw-hit { position: absolute; inset: 0 } .cw-box { position: absolute; cursor: grab; touch-action: none; border-radius: 2px; } .cw-box.on { outline: 1px solid var(--cw-accent); outline-offset: 8px } .cw-box.dragging { cursor: grabbing } .cw-handle { position: absolute; left: 0; top: -26px; background: var(--cw-accent); color: var(--cw-page); font-family: var(--cw-disp-font); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; white-space: nowrap; z-index: 2; pointer-events: none; } /* The × that takes a line off, on the box itself. Sits opposite the label so it never covers the words, and only while the box is selected. */ .cw-box-x { position: absolute; right: 0; top: -26px; width: 19px; height: 19px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 3px; background: var(--cw-accent); color: var(--cw-page); font: 700 14px/1 var(--cw-disp-font); cursor: pointer; z-index: 3; opacity: .82; } .cw-box-x:hover { opacity: 1 } .cw-grip { position: absolute; right: -8px; bottom: -8px; width: 12px; height: 12px; border-radius: 2px; background: var(--cw-accent); border: 1.5px solid #fff; cursor: nwse-resize; touch-action: none; z-index: 3; } .cw-box:not(.on) .cw-handle, .cw-box:not(.on) .cw-grip, .cw-box:not(.on) .cw-box-x { display: none } /* The logo's outline is bone rather than the accent — the mark itself is already the accent colour, so an accent outline round it disappears. */ .cw-box.is-logo.on { outline-color: var(--cw-bone) } .cw-box.is-logo .cw-handle { background: var(--cw-bone) } /* ── TYPING INTO A LINE, IN PLACE ──────────────────────────────────────────── The point of editing on the canvas is that NOTHING CHANGES when you start. Same typeface, same size, same weight, same tracking, same line height, same colour, same position — you are typing over the words that were already there. The first version set `font: inherit` and a dark wash behind it, so a double-click swapped a 40px Archivo headline for 13px body text on a grey panel. It worked, and it felt like being thrown into a different application. Every one of those properties is now written by the editor from the SAME numbers paint.js used for that layer (see startInlineEdit), and the canvas text is hidden underneath so there is no doubling. The only things that appear are the caret and the selection. */ .cw-edit { position: absolute; box-sizing: border-box; margin: 0; padding: 0; border: none; outline: none; resize: none; overflow: hidden; background: transparent; /* Everything below is overwritten per layer by startInlineEdit(); these are only a sane floor if that ever fails. */ color: #fff; font: 400 16px/1.3 'Instrument Sans', system-ui, sans-serif; letter-spacing: 0; text-align: left; white-space: pre-wrap; word-break: normal; overflow-wrap: break-word; z-index: 4; /* The caret in the app's accent so it is findable on a busy frame, and a selection that reads on any footage. */ caret-color: var(--cw-accent); } /* A TINT BEHIND THE WORDS, NOT A REPLACEMENT FOR THEM. This forced white text on a 45% slab, so opening an editor on a dark line — a phone number on a light strap, say — repainted it in a colour the design never used, over a band you could not read through. The whole promise of editing in place is that nothing changes except the caret, and this was changing the two things you look at first (Uche, 2026-08-16: "it should show it exactly as it is"). */ .cw-edit::selection { background: rgba(61,116,255,.26); color: inherit } /* While a line is being edited its box is outlined the way a selected layer is, so it is obvious WHICH line you are in without anything moving. */ .cw-box.editing { outline: 1px solid var(--cw-accent); outline-offset: 8px } /* ── Transport ───────────────────────────────────────────────────────────── */ .cw-transport { flex: none; padding: 0 22px 18px; display: flex; flex-direction: column; gap: 10px } .cw-transrow { display: flex; align-items: center; gap: 14px } .cw-play { width: 42px; height: 42px; border-radius: 5px; background: var(--cw-bone); border: none; color: var(--cw-page); font-size: 13px; cursor: pointer; flex: none; display: grid; place-items: center; position: relative; /* the buffering ring below is absolute */ } /* Buffering the first pass of a cold clip — play() waits for readyState 3 before the clock starts, and this says so rather than the button looking dead. */ .cw-play.waiting { opacity: .55; cursor: progress } .cw-play.waiting::after { content: ''; position: absolute; inset: -3px; border: 1.5px solid transparent; border-top-color: currentColor; border-radius: 50%; animation: cw-wait .7s linear infinite; } @keyframes cw-wait { to { transform: rotate(360deg) } } .cw-play:hover { background: #fff } .cw-strip { flex: 1; min-width: 0; position: relative; height: 82px; border-radius: 7px; overflow: hidden; border: 1px solid var(--cw-line-07); cursor: pointer; display: flex; gap: 1px; background: var(--cw-strip); } .cw-strip-cell { flex: 1; min-width: 0; background-size: cover; background-position: center } .cw-strip-cell.ready { filter: saturate(.85) brightness(.9) } .cw-strip-vig { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8,8,10,.5), rgba(8,8,10,0) 26%, rgba(8,8,10,0) 74%, rgba(8,8,10,.5)); } /* The played part, dimmed. It is the fill BEHIND the handle, not the handle. */ .cw-playhead { position: absolute; top: 0; bottom: 0; left: 0; pointer-events: none; background: linear-gradient(90deg, rgba(6,10,22,.55), rgba(6,10,22,.32)); } /* ── THE SCRUBBER ───────────────────────────────────────────────────────────── Was a 1px border on the fill: nothing to aim at, nothing to drag, so getting to a particular moment meant clicking and hoping (Uche, 2026-08-09). Now it is a real handle — a 2px line with a 14px grip you can catch anywhere on the strip's height, a 20px invisible hit area either side of it, and the time riding above so you can see where you are landing while you drag. */ .cw-scrub { position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; /* the strip owns the pointer; see below */ z-index: 3; } .cw-scrub-line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--cw-bone); border-radius: 2px; box-shadow: 0 0 0 1px rgba(6,10,22,.55), 0 0 14px rgba(237,234,228,.35); } .cw-scrub-grip { position: absolute; left: 50%; top: 50%; width: 14px; height: 34px; transform: translate(-50%, -50%); border-radius: 7px; background: var(--cw-bone); box-shadow: 0 2px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.6); transition: height .12s, width .12s; } /* Three grip lines, so it reads as something to hold. */ .cw-scrub-grip::after { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--cw-page), var(--cw-page)) 50% 50% / 1px 12px no-repeat, linear-gradient(var(--cw-page), var(--cw-page)) calc(50% - 4px) 50% / 1px 8px no-repeat, linear-gradient(var(--cw-page), var(--cw-page)) calc(50% + 4px) 50% / 1px 8px no-repeat; opacity: .55; border-radius: 7px; } .cw-strip:hover .cw-scrub-grip { height: 40px } .cw-strip.dragging .cw-scrub-grip { height: 44px; width: 16px } /* The time, above the handle, only while it matters. */ .cw-scrub-t { position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); font-family: var(--cw-mono); font-size: 10.5px; font-weight: 600; color: var(--cw-page); background: var(--cw-bone); padding: 3px 7px; border-radius: 4px; white-space: nowrap; opacity: 0; transition: opacity .12s; box-shadow: 0 4px 12px rgba(0,0,0,.5); } .cw-strip:hover .cw-scrub-t, .cw-strip.dragging .cw-scrub-t { opacity: 1 } .cw-strip.dragging { cursor: grabbing } /* ── The row under the strip ────────────────────────────────────────────────── The clock used to sit in a 92px gutter to the RIGHT of the strip, so the film never reached the end of its own area and the numbers were pinned to the edge. The strip is full width now and this row carries both readouts, opposite the track legend — the other thing here that describes the video rather than driving it. */ .cw-transfoot { display: flex; align-items: center; gap: 14px; min-height: 30px; } .cw-readout { margin-left: auto; flex: none; display: flex; align-items: center; gap: 11px; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--cw-line-07); background: var(--cw-strip); } .cw-clock { font-family: var(--cw-mono); font-size: 11.5px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; } .cw-clock b { color: var(--cw-ink); font-weight: 700 } .cw-clock i { color: var(--cw-ink-40); font-style: normal; margin-left: 4px } .cw-readout-sep { width: 1px; height: 12px; background: var(--cw-line-12); flex: none } .cw-framecount { font-family: var(--cw-mono); font-size: 11px; color: var(--cw-ink-50); font-variant-numeric: tabular-nums; white-space: nowrap; } .cw-stack { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0 } .cw-stack-item { display: flex; align-items: center; gap: 7px; flex: none; border: 1px solid var(--cw-line-10); border-radius: 4px; padding: 5px 10px; } .cw-dot { width: 6px; height: 6px; border-radius: 999px; flex: none } .cw-stack-label { font-size: 12px; font-weight: 600; color: var(--cw-ink-92); white-space: nowrap } .cw-stack-value { font-size: 12px; color: var(--cw-ink-62); white-space: nowrap } .cw-frames { font-family: var(--cw-mono); font-size: 12px; color: var(--cw-ink-55); margin-left: auto } /* ── The properties column ───────────────────────────────────────────────── */ .cw-props { box-sizing: border-box; flex: none; border-left: 1px solid var(--cw-line-06); display: flex; flex-direction: column; min-height: 0; width: var(--cw-props-w); background: var(--cw-props); } .cw-tabs { display: flex; gap: 2px; padding: 14px 16px 0; flex: none } .cw-tab { flex: 1; border: none; border-radius: 5px; padding: 8px 0; font-size: 12px; cursor: pointer; font-weight: 600; letter-spacing: .01em; background: var(--cw-panel); color: var(--cw-ink-50); } .cw-tab.on { background: var(--cw-bone); color: var(--cw-page) } .cw-props-in { flex: 1; overflow-y: auto; padding: 18px 16px 30px } .cw-blocks { display: flex; flex-direction: column; gap: 20px } .cw-block { padding-bottom: 20px; border-bottom: 1px solid var(--cw-line-07) } .cw-block:last-child { padding-bottom: 0; border-bottom: none } .cw-block-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px } .cw-block-bar { width: 3px; height: 13px; border-radius: 2px; background: var(--cw-accent); flex: none } .cw-block-name { font-family: var(--cw-disp-font); font-size: 10px; font-weight: 700; letter-spacing: .18em; color: var(--cw-ink-72); white-space: nowrap; } .cw-block-state { font-size: 10.5px; color: var(--cw-ink-42); white-space: nowrap } .cw-toggle { flex: none; width: 36px; height: 20px; border-radius: 10px; padding: 2px; cursor: pointer; background: var(--cw-line-16); display: flex; justify-content: flex-start; border: none; transition: background .12s; } .cw-toggle.on { background: var(--cw-blue); justify-content: flex-end } .cw-knob { width: 16px; height: 16px; border-radius: 999px; background: var(--cw-page) } .cw-clip { border: 1px solid var(--cw-line-07); border-radius: 6px; overflow: hidden; background: var(--cw-panel); } .cw-clip-well { aspect-ratio: 16/9; position: relative; background-size: cover; background-position: center } .cw-clip-scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,10,22,.85), rgba(6,10,22,0) 60%); } .cw-clip-name { position: absolute; left: 10px; right: 10px; bottom: 8px; font-size: 11.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cw-clip-foot { padding: 10px } /* A file input dressed as a button. The input covers the label so the whole thing is the hit target — no click handler, so it works with the keyboard. */ .cw-file { position: relative; text-align: center; border-radius: 5px; font-size: 11.5px; cursor: pointer; display: block; } .cw-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100% } .cw-file.solid { border: 1px solid var(--cw-line-16); padding: 8px; font-weight: 600; color: rgba(242,242,243,.9); } .cw-file.solid:hover { border-color: rgba(255,255,255,.4) } .cw-file.dashed { border: 1px dashed var(--cw-line-20); padding: 9px; color: var(--cw-ink-66); margin-top: 10px; } .cw-file.dashed:hover { border-color: rgba(255,255,255,.4) } .cw-file.busy { opacity: .55; cursor: progress } /* THE LOGO DROP IS A TARGET, NOT A LINE OF TEXT. Somebody is dragging a file at it, often from a folder window they are holding in the other hand, and a 9px strip is a hard thing to hit. This one is tall enough to aim at and says what it takes. */ .cw-file.drop { border: 1px dashed var(--cw-line-20); border-radius: 7px; margin-top: 10px; padding: 22px 14px; color: var(--cw-ink-66); line-height: 1.5; display: flex; flex-direction: column; align-items: center; gap: 4px; transition: border-color .12s, background .12s; } .cw-file.drop:hover { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.02) } .cw-file.drop.over { border-color: var(--cw-accent); background: rgba(255,255,255,.04) } .cw-file.drop .t { font-size: 12.5px; font-weight: 600; color: var(--cw-ink) } .cw-file.drop .s { font-size: 11px; color: var(--cw-ink-42) } .cw-file.drop .ic { color: var(--cw-ink-42); margin-bottom: 2px; line-height: 0 } /* ══ THEIR OWN FILES, UNDER EACH SLOT ═══════════════════════════════════════ A quiet list, not a gallery. Four of these are on screen at once and every one of them is about a decision already made — the row in use is marked and the rest stay out of the way until somebody wants them. */ .cw-lib { margin-top: 10px } .cw-lib-lb { font-size: 8.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cw-ink-32); margin: 0 2px 6px; } .cw-lib-item { position: relative; display: flex; align-items: center } .cw-lib-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: var(--cw-ink-62); font: 500 11.5px/1.35 inherit; text-align: left; cursor: pointer; transition: background .12s, color .12s; } .cw-lib-row:hover { background: rgba(255,255,255,.05); color: var(--cw-ink) } /* The mark. A ring that fills — the same shape as a radio, because that is what this is: exactly one of them is on the video. */ .cw-lib-tick { flex: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--cw-line-22); box-sizing: border-box; transition: border-color .12s, box-shadow .12s, background .12s; } .cw-lib-row.on, .cw-lib-item.on .cw-lib-row { color: var(--cw-ink) } .cw-lib-row.on .cw-lib-tick, .cw-lib-item.on .cw-lib-tick { border-color: var(--cw-accent, #3D74FF); background: var(--cw-accent, #3D74FF); box-shadow: inset 0 0 0 2px var(--cw-panel, #131C2F); } .cw-lib-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .cw-lib-s { flex: none; font-family: ui-monospace, monospace; font-size: 9.5px; color: var(--cw-ink-32); } /* Remove. Only when you are on the row — a × beside every file is an invitation to lose one by mistake. */ .cw-lib-x { position: absolute; right: 4px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 5px; background: none; color: var(--cw-ink-42); cursor: pointer; opacity: 0; transition: opacity .12s, color .12s, background .12s; } .cw-lib-item:hover .cw-lib-x, .cw-lib-x:focus-visible { opacity: 1 } .cw-lib-x:hover { color: #FF9A8A; background: rgba(255,122,108,.12) } .cw-lib-x[disabled] { opacity: .4; cursor: default } /* The size would sit under the ×; move it out of the way on hover. */ .cw-lib-item:hover .cw-lib-s { opacity: 0 } @media (hover: none) { .cw-lib-x { opacity: .7 } .cw-lib-item .cw-lib-s { display: none } } .cw-note { font-size: 10.5px; color: var(--cw-ink-40); margin-top: 8px; line-height: 1.5 } .cw-note.tight { color: var(--cw-ink-32) } .cw-namerow { display: flex; align-items: baseline; gap: 8px; padding: 0 2px } .cw-name-1 { font-size: 13px; font-weight: 600; color: var(--cw-ink) } .cw-name-2 { font-size: 11.5px; color: var(--cw-ink-45) } .cw-level { display: flex; align-items: center; gap: 10px; margin-top: 10px } .cw-level-lb { font-size: 11px; color: var(--cw-ink-50); flex: none; width: 38px } .cw-level input[type=range] { flex: 1; accent-color: var(--cw-blue) } .cw-level-val { font-family: var(--cw-mono); font-size: 10.5px; color: var(--cw-ink-50); width: 26px; text-align: right; } .cw-bedrow { display: flex; align-items: center; gap: 11px; padding: 0 2px } .cw-bars { display: flex; align-items: flex-end; gap: 2px; height: 13px; flex: none } .cw-bars.off { opacity: .3 } .cw-bars i { width: 2px; height: 100%; border-radius: 1px; display: block; background: var(--cw-accent); transform-origin: bottom; } .cw-bars.off i { background: rgba(255,255,255,.3) } .cw-bars.playing i:nth-child(1) { animation: cw-eq .62s ease-in-out 0s infinite } .cw-bars.playing i:nth-child(2) { animation: cw-eq .62s ease-in-out .14s infinite } .cw-bars.playing i:nth-child(3) { animation: cw-eq .62s ease-in-out .28s infinite } .cw-bed-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .cw-bed-sub { font-size: 11px; color: var(--cw-ink-45); margin-top: 1px } /* Text tab */ .cw-hint { font-size: 11.5px; color: var(--cw-ink-45); margin-bottom: 14px; line-height: 1.5 } .cw-fields { display: flex; flex-direction: column; gap: 10px } .cw-field { padding: 11px; border-radius: 6px; border: 1px solid var(--cw-line-07); background: var(--cw-panel); } .cw-field.on { border-color: var(--cw-bone-45) } .cw-field-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px } .cw-field-lb { font-size: 11px; font-weight: 600; color: rgba(242,242,243,.7) } .cw-sizes { display: flex; gap: 3px } .cw-size { width: 22px; text-align: center; padding: 3px 0; border-radius: 3px; font-size: 10.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--cw-line-09); color: var(--cw-ink-45); background: none; } .cw-size.on { border-color: var(--cw-bone-60); color: var(--cw-ink) } .cw-input { width: 100%; box-sizing: border-box; background: var(--cw-page); border: 1px solid var(--cw-line-09); border-radius: 5px; padding: 9px 11px; color: var(--cw-ink); font-size: 13px; outline: none; } .cw-input:focus { border-color: rgba(255,255,255,.28) } /* ── Taking a line off, and the Advanced drawer ─────────────────────────────── The × is quiet until the row is hovered. A delete control that is always at full contrast is the loudest thing on a panel of eight fields, and it is not the control anybody came for. */ .cw-field-x { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 4px; background: none; cursor: pointer; color: var(--cw-ink-45); opacity: 0; transition: opacity .12s, color .12s, background .12s; } .cw-field:hover .cw-field-x, .cw-field-x:focus-visible { opacity: 1 } .cw-field-x:hover { background: rgba(255,122,108,.14); color: #FF9A8A } /* The disclosure. Folded away by default: timing is for the one person in twenty who wants it, and it is the drawer the next advanced control goes in. */ .cw-adv-t { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; padding: 3px 0; border: 0; background: none; cursor: pointer; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cw-ink-45); } .cw-adv-t:hover { color: rgba(242,242,243,.72) } .cw-adv-cx { transition: transform .14s } .cw-adv-t.on { color: rgba(242,242,243,.72) } .cw-adv-t.on .cw-adv-cx { transform: rotate(90deg) } /* One dot, and it only means "this is not the template's timing any more". */ .cw-adv-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--cw-accent, #3D74FF); margin-left: 2px; } .cw-adv { margin-top: 8px; padding: 10px; border-radius: 5px; background: var(--cw-page); border: 1px solid var(--cw-line-07); } .cw-adv-lb { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; color: rgba(242,242,243,.34); margin-bottom: 8px; } .cw-adv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px } .cw-adv-grid label { display: block } .cw-adv-grid label > span:first-child { display: block; font-size: 10.5px; color: var(--cw-ink-45); margin-bottom: 4px; } /* The unit sits inside the field, so the number is read as seconds without a label taking a third of a 168px column. */ .cw-adv-in { position: relative; display: block } .cw-adv-in i { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 10.5px; color: rgba(242,242,243,.34); pointer-events: none; } .cw-num { width: 100%; box-sizing: border-box; -moz-appearance: textfield; background: var(--cw-panel); border: 1px solid var(--cw-line-09); border-radius: 4px; padding: 6px 20px 6px 8px; color: var(--cw-ink); font-size: 12.5px; outline: none; font-variant-numeric: tabular-nums; } .cw-num:focus { border-color: rgba(255,255,255,.28) } .cw-num::-webkit-outer-spin-button, .cw-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 } .cw-adv-note { margin-top: 8px; font-size: 10.5px; line-height: 1.5; color: rgba(242,242,243,.42); } .cw-adv-reset { margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 10.5px; color: rgba(242,242,243,.5); text-decoration: underline; text-decoration-color: rgba(255,255,255,.2); } .cw-adv-reset:hover { color: var(--cw-ink) } /* What was taken off. A delete with no way back is a trap. */ .cw-gone { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--cw-line-07); } .cw-gone-lb { font-size: 9.5px; font-weight: 700; letter-spacing: .16em; color: rgba(242,242,243,.3); margin-bottom: 7px; } .cw-gone-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 12px; color: var(--cw-ink-45); } .cw-gone-back { flex: none; border: 1px solid var(--cw-line-12); border-radius: 4px; background: none; padding: 3px 8px; font-size: 10.5px; color: rgba(242,242,243,.6); cursor: pointer; } .cw-gone-back:hover { border-color: var(--cw-bone-45); color: var(--cw-ink) } .cw-ghost { margin-top: 14px; background: none; border: 1px solid var(--cw-line-12); color: var(--cw-ink-55); border-radius: 5px; padding: 7px 14px; font-size: 11.5px; cursor: pointer; } .cw-ghost:hover { border-color: rgba(255,255,255,.3) } /* Brand tab */ .cw-brandcols { display: flex; flex-direction: column; gap: 26px } .cw-sub { font-family: var(--cw-disp-font); font-size: 9.5px; font-weight: 700; letter-spacing: .18em; color: var(--cw-ink-40); margin-bottom: 10px; } .cw-logo-well { border: 1px solid var(--cw-line-07); border-radius: 6px; padding: 18px; display: flex; align-items: center; justify-content: center; background: var(--cw-panel); } .cw-lockup { display: flex; align-items: center; gap: 10px } .cw-lockup img { max-height: 34px; max-width: 100%; display: block } .cw-lockup-mk { width: 32px; height: 32px; border-radius: 5px; background: var(--cw-accent); color: var(--cw-page); display: flex; align-items: center; justify-content: center; font-family: var(--cw-disp-font); font-weight: 800; font-size: 16px; flex: none; } .cw-lockup-wd { font-family: var(--cw-disp-font); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--cw-ink); } .cw-swatches { display: flex; gap: 8px; flex-wrap: wrap } .cw-swatch { width: 30px; height: 30px; border-radius: 4px; cursor: pointer; border: 1px solid rgba(255,255,255,.14); padding: 0; } .cw-swatch.on { box-shadow: 0 0 0 2px var(--cw-props), 0 0 0 3px var(--cw-bone) } .cw-fonts { display: flex; flex-direction: column; gap: 6px } .cw-font { font-size: 14.5px; padding: 9px 12px; border-radius: 5px; cursor: pointer; border: 1px solid var(--cw-line-07); background: var(--cw-panel); color: var(--cw-ink); text-align: left; } .cw-font.on { border-color: rgba(237,234,228,.5); background: rgba(237,234,228,.06) } /* ── The Publish dialog ──────────────────────────────────────────────────── */ /* ── THE PUBLISH DIALOG ──────────────────────────────────────────────────────── The same object as .cw-ask, and deliberately so: two dialogs in one app that are almost-but-not-quite alike look like an accident. Same 14px box, same accent rule across the top, same eyebrow, same darker foot the buttons sit on. The ONE difference is which button is loud. Everywhere else the primary is bone, because bone is this app's light button. Here it is blue, because Render is the accent action of the whole product — the moment somebody gets the thing they came for — and it is the only place in the app where blue outranks bone. */ .cw-modal { position: fixed; inset: 0; z-index: 50; background: rgba(3,6,14,.78); -webkit-backdrop-filter: blur(10px) saturate(.85); backdrop-filter: blur(10px) saturate(.85); display: flex; align-items: center; justify-content: center; padding: 24px; animation: cw-ask-in .18s ease-out; } .cw-dialog { position: relative; overflow: hidden; width: 540px; max-width: 100%; box-sizing: border-box; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 0; background: linear-gradient(180deg, #151E31 0%, #0D1421 100%); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 32px 70px -24px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.5), 0 100px 120px -60px rgba(0,0,0,.6); animation: cw-ask-rise .22s cubic-bezier(.16,.84,.44,1); } .cw-dialog::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--cw-accent, #3D74FF) 18%, var(--cw-accent, #3D74FF) 82%, transparent 100%); opacity: .85; } /* The eyebrow, exactly as the ask dialog wears it. */ .cw-dialog-kind { display: flex; align-items: center; gap: 9px; padding: 17px 24px 0; } .cw-dialog-kind i { width: 3px; height: 12px; border-radius: 2px; flex: none; background: var(--cw-accent, #3D74FF); } .cw-dialog-kind span { font-family: var(--cw-disp-font); font-size: 9.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--cw-ink-62); white-space: nowrap; } .cw-dialog-kind b { flex: 1; height: 1px; background: var(--cw-line-07) } /* The frame beside the title, so the dialog is about a video rather than about two dropdowns. */ .cw-dialog-hero { display: flex; gap: 14px; align-items: center; padding: 14px 24px 0; margin-bottom: 22px; } .cw-dialog-shot { flex: none; width: 118px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #0A1020 center/cover no-repeat; border: 1px solid rgba(255,255,255,.09); box-shadow: 0 10px 24px -14px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.06); } .cw-dialog-heroT { min-width: 0 } .cw-dialog-t { font-family: var(--cw-disp-font); font-size: 22px; font-weight: 600; letter-spacing: -.028em; line-height: 1.24; color: #fff; } .cw-dialog-s { font-size: 13px; color: rgba(242,242,243,.5); margin: 7px 0 0; line-height: 1.5 } .cw-dialog-rows { display: flex; flex-direction: column; gap: 16px; padding: 0 24px } .cw-dialog-row { display: flex; flex-direction: column; gap: 9px } .cw-dialog-row .cw-sub { display: flex; align-items: baseline; gap: 8px; font-family: var(--cw-disp-font); font-size: 9.5px; font-weight: 700; letter-spacing: .2em; color: rgba(242,242,243,.44); } /* The label carries the answer beside it, in the app's own timecode face — so the row says "RESOLUTION · 1920 × 1080" and the dead space to the right of a label is doing something. */ .cw-dialog-row .cw-sub em { font-family: var(--cw-mono); font-size: 10.5px; font-weight: 400; font-style: normal; letter-spacing: 0; color: rgba(242,242,243,.34); margin-left: auto; } /* ── SEGMENTED, AND FULL WIDTH ─────────────────────────────────────────────── These were left-aligned pills in a 540px dialog: two small buttons and half a dialog of nothing to the right of them (Uche, 2026-08-12: "there's a lot of space left on the right side"). A segmented control that fills the measure uses the room, makes the options equal in weight — they ARE equal, you are picking one — and matches the aspect switch in the header, which is the same decision in the same shape. */ .cw-pills { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 11px; background: rgba(5,9,18,.66); border: 1px solid rgba(255,255,255,.07); box-shadow: inset 0 1px 3px rgba(0,0,0,.4); } .cw-pill { padding: 0; height: 38px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; background: none; color: rgba(242,242,243,.6); transition: color .12s, background .12s; } .cw-pill:hover { color: var(--cw-ink); background: rgba(255,255,255,.045) } /* The chosen one is BONE, the same as the active aspect chip in the header — one app, one way of showing "this is the one". */ .cw-pill.on { border-color: transparent; color: #0A1020; background: var(--cw-bone); box-shadow: 0 6px 14px -8px rgba(237,234,228,.5), inset 0 1px 0 rgba(255,255,255,.7); } .cw-pill.on:hover { background: #FFFDF8 } .cw-bar { height: 8px; border-radius: 5px; background: rgba(255,255,255,.07); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); } .cw-bar i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, #3D74FF, #6E9BFF); box-shadow: 0 0 14px rgba(61,116,255,.6); transition: width .18s; } .cw-status { font-family: var(--cw-mono); font-size: 11.5px; color: rgba(242,242,243,.5) } .cw-dialog-foot { display: flex; gap: 10px; align-items: center; margin-top: 20px; padding: 15px 20px; background: rgba(4,8,16,.42); border-top: 1px solid rgba(255,255,255,.055); } /* Render takes the room. It is the only reason this dialog is open, and a 90px button tucked into the corner beside an equally-sized Close did not say so. */ .cw-dialog-foot .cw-btn-solid { flex: 1; justify-content: center } .cw-dialog-foot .cw-btn-flat { flex: none } .cw-dialog-foot .cw-btn-flat, .cw-dialog-foot .cw-btn-solid { height: 44px; padding: 0 20px; border-radius: 11px; font-size: 14px; font-weight: 600; } .cw-dialog-foot .cw-btn-solid { background: linear-gradient(180deg, #4A7EFF 0%, #3D74FF 100%); color: #fff; box-shadow: 0 10px 24px -10px rgba(61,116,255,.8), inset 0 1px 0 rgba(255,255,255,.2); } .cw-dialog-foot .cw-btn-solid:hover { background: #5A8AFF } .cw-dialog-foot .cw-btn-flat { border-color: rgba(255,255,255,.14) } .cw-dialog-foot .cw-btn-flat:hover { border-color: rgba(255,255,255,.34); color: var(--cw-ink) } .cw-btn-flat { background: none; border: 1px solid var(--cw-line-13); color: var(--cw-ink-65, rgba(242,242,243,.65)); border-radius: 5px; padding: 8px 16px; font-size: 12.5px; cursor: pointer; } .cw-btn-flat:hover { border-color: rgba(255,255,255,.32) } .cw-btn-solid { background: var(--cw-bone); border: none; color: var(--cw-page); border-radius: 5px; padding: 8px 18px; font-size: 12.5px; font-weight: 700; cursor: pointer; } .cw-btn-solid:hover { background: #fff } .cw-btn-solid[disabled] { opacity: .55; cursor: default } /* The Generate-a-voiceover styles moved out with the feature — they are addons/voiceover-kokoro/addon.css. `.cw-fail` below stays: it is the shape of every refusal in this editor, not that add-on's. */ /* A refusal, said plainly, in the dialog where the attempt was made. */ .cw-fail { border: 1px solid rgba(255,122,108,.4); background: rgba(255,122,108,.08); border-radius: 5px; padding: 10px 12px; font-size: 12px; line-height: 1.55; color: #FFB4AA; } /* ── The unsupported-browser gate ────────────────────────────────────────── */ .cw-gate { position: fixed; inset: 0; z-index: 200; background: var(--cw-page); display: flex; align-items: center; justify-content: center; padding: 24px; } .cw-gate-in { max-width: 460px } .cw-gate-t { font-family: var(--cw-disp-font); font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 10px; } .cw-gate-b { font-size: 13.5px; line-height: 1.65; color: var(--cw-ink-62) } .cw-gate-b code { background: var(--cw-panel); border-radius: 4px; padding: 1px 5px; font-family: var(--cw-mono); font-size: 12px; } /* ── Narrow screens ───────────────────────────────────────────────────────── The editor is a three-column desktop tool and does not pretend otherwise. Below 1100px the properties column moves under the stage; below 820px the template column does too, so it is at least usable on a tablet. Editing video on a phone is not a thing this claims to do, and saying so is kinder than a layout that technically fits and cannot be worked in. */ /* THE WRAPPED LAYOUT NEEDS ITS OWN SCROLL AND ITS OWN HEIGHTS. `.cw-body` is a flex ROW whose height comes from `.cw`, and `.cw` is exactly the viewport. The moment the row is allowed to WRAP, the three columns share that one viewport height between two rows — and because `.cw-stage-in` is `flex:1` of a stage that is now only a fraction as tall, the frame resolves to ZERO and the canvas collapses to 2×2 pixels. Nothing errors. The editor just renders with no video in it. So the wrapped layout stops pretending to be one screen: the body scrolls, and each stacked piece is given a real height instead of a share of nothing. */ @media (max-width: 1100px) { .cw { height: auto; min-height: 100% } .cw-body { flex-wrap: wrap; overflow-y: auto; align-content: flex-start; } .cw-rail { max-height: none } .cw-stage { flex: 1 1 100%; min-height: 62vh } .cw-stage-in { min-height: 46vh } .cw-props { width: 100%; flex: 1 1 100%; border-left: none; border-top: 1px solid var(--cw-line-06); } .cw-props-in { overflow: visible } } @media (max-width: 820px) { .cw-rail { width: 100%; flex: 1 1 100%; border-right: none; border-bottom: 1px solid var(--cw-line-06); } .cw-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) } .cw-head { flex-wrap: wrap; gap: 10px } .cw-transport { padding: 0 14px 14px } .cw-stage { min-height: 54vh } } /* ══ A PHONE ═══════════════════════════════════════════════════════════════════ Everything above this point is the desktop app and is untouched — this layer only takes effect under 640px, so the design nobody asked me to change cannot move (Uche, 2026-08-09: "make it more responsive… the desktop stays the same"). The shape on a phone is one scrolling column in the order somebody needs it: the video — the thing they came to look at the controls — Media / Text / Brand the templates — browsing, which happens once Three specific things had to change, and each of them was broken rather than merely cramped: · `body { overflow: hidden }` and a 100vh flex column meant a phone could not scroll at all — everything below the fold was simply unreachable. · The page column is `clamp(268px, 26vw, 384px)`. On a 390px phone that is 268px of Billing beside 60px of canvas. It goes full width and the canvas gets out of the way while a page is open. · The rail is `position: fixed` at 54px. It stays — it is the navigation — but it becomes a bottom bar, because 54px off the side of a 390px screen is 14% of the width given to five icons, and a thumb cannot reach the top of a phone anyway. */ @media (max-width: 640px) { html, body { height: auto; min-height: 100% } body { overflow-y: auto; -webkit-text-size-adjust: 100% } /* The rail, along the bottom, out of the thumb's way and out of the width. `!important` throughout, and it is not laziness: views/rail.php carries its own `