/* GENERATED by the opener mock's build-theme.py (trailer/docs/concept-2026-10-21/mock): do not edit here. (opener/scene-core.css, @imports inlined) */
/* Core: the shared desk. Tokens verbatim from frontend/src/index.css (light theme, which is what the
   _ref frames show; the dark set is kept on .op-co-dark for a flip). Sizes are the Tailwind classes in
   the components (tailwind.config.js: rounded-card 12px, rounded-pill 999px, shadow-soft / shadow-pop,
   text-2xs 11/16, font-display Fraunces, font-sans Inter Tight, font-mono JetBrains Mono). The app is laid
   out at 1280×720 and scaled to the 704 stage. */
.op-co-frame { position: relative; width: 100%; max-width: 704px; aspect-ratio: 1280 / 720; overflow: hidden; border-radius: 6px; margin: 0 auto; background: #fbfaf8;
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); }
.op-co-scale { width: 1280px; height: 720px; transform: scale(calc(704 / 1280)); transform-origin: 0 0; }
.op-co { --canvas: 251 250 248; --surface: 255 255 255; --surface-2: 246 244 240; --hairline: 228 224 217; --ink: 28 27 25; --ink-soft: 82 79 73; --ink-muted: 142 137 128;
  --accent: 224 92 46; --accent-soft: 250 233 226; --accent-ink: 178 64 28; --positive: 58 138 92; --warning: 196 138 38; --danger: 198 64 54; --shadow: 40 30 20;
  --note-amber: #fbe7a1; --note-blue: #bfdbfe; --note-green: #bbf7d0; --note-pink: #fbcfe8; --note-gray: #e5e7eb;
  --shadow-soft: 0 1px 2px rgb(var(--shadow) / .04), 0 4px 12px rgb(var(--shadow) / .03); --shadow-pop: 0 8px 30px rgb(var(--shadow) / .10);
  width: 1280px; height: 720px; display: flex; overflow: hidden; position: relative; background: rgb(var(--canvas)); color: rgb(var(--ink));
  font-family: "Inter Tight", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.5; text-align: left; letter-spacing: 0; }
.op-co.op-co-dark { --canvas: 18 18 17; --surface: 28 28 26; --surface-2: 36 36 33; --hairline: 52 51 47; --ink: 240 238 233; --ink-soft: 184 180 172; --ink-muted: 130 126 118;
  --accent: 235 116 74; --accent-soft: 56 38 30; --accent-ink: 244 168 138; --shadow: 0 0 0; --note-amber: #e3c96a; --note-blue: #a3c2e6; --note-green: #a6dcb3; --note-pink: #e6b3cc; --note-gray: #c8cbd0; }
:where(.op-co *) { box-sizing: border-box; margin: 0; padding: 0; }
:where(.op-co h1, .op-co h2, .op-co h3, .op-co p) { margin: 0; letter-spacing: 0; text-transform: none; font-family: inherit; }
:where(.op-co a) { text-decoration: none; color: inherit; cursor: default; }
:where(.op-co button) { font: inherit; color: inherit; background: none; border: 0; cursor: default; }
:where(.op-co svg) { display: block; }
.op-co .op-co-i14, .op-co .op-co-i16, .op-co .op-co-i18, .op-co .op-co-i24 { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.op-co .op-co-i14 { width: 14px; height: 14px; } .op-co .op-co-i16 { width: 16px; height: 16px; } .op-co .op-co-i18 { width: 18px; height: 18px; } .op-co .op-co-i24 { width: 24px; height: 24px; }
.op-co .op-co-sw2 { stroke-width: 2; } .op-co .op-co-o70 { opacity: .7; } .op-co .op-co-muted { color: rgb(var(--ink-muted)); }
.op-co .op-co-trunc { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.op-co .op-co-font-display, .op-co h1, .op-co h2, .op-co .op-co-brand-name { font-family: Fraunces, Georgia, serif; }

/* ui.tsx::Avatar — identity colour, white initial at .42 of the size */
.op-co .op-co-av { display: grid; place-items: center; flex-shrink: 0; width: var(--sz, 28px); height: var(--sz, 28px); border-radius: 9999px; background: var(--av); color: #fff; font-weight: 600; line-height: 1; font-size: calc(var(--sz, 28px) * .42); user-select: none; }

/* ---------- AppShell.tsx: the sidebar ---------- */
.op-co-side { width: 270px; flex-shrink: 0; border-right: 1px solid rgb(var(--hairline)); background: rgb(var(--surface)); display: flex; flex-direction: column; height: 100%; }
.op-co-brand { display: flex; height: 56px; align-items: center; gap: 8px; padding: 0 16px; }
.op-co-brand-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgb(var(--accent)); }
.op-co-brand-mark i { display: block; width: 14px; height: 14px; border-radius: 9999px; border: 2px solid rgb(var(--canvas)); }
.op-co-brand-name { font-size: 18px; line-height: 28px; font-weight: 600; letter-spacing: -0.025em; color: rgb(var(--ink)); }
.op-co-side-body { position: relative; display: flex; min-height: 0; flex: 1; }
.op-co-wsrail { width: 56px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0; border-right: 1px solid rgb(var(--hairline)); background: rgb(var(--surface)); }
.op-co-ws { position: relative; display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 12px; color: rgb(var(--ink-muted)); }
.op-co-ws.is-active { background: var(--ws-soft); color: var(--ws); }
.op-co-ws-bar { position: absolute; left: -8px; height: 20px; width: 4px; border-radius: 0 9999px 9999px 0; background: var(--ws); }
.op-co-ws-new { margin-top: 4px; display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; border-radius: 12px; border: 1px dashed rgb(var(--hairline)); color: rgb(var(--ink-muted)); }
.op-co-tree { min-width: 0; flex: 1; overflow: hidden; padding: 12px 10px; }
.op-co-tree > * + * { margin-top: 2px; }
.op-co-nav { display: flex; align-items: center; gap: 8px; border-radius: 8px; padding: 6px 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: rgb(var(--ink-soft)); }
.op-co-nav-dot { display: grid; place-items: center; width: 20px; height: 20px; color: rgb(var(--accent)); font-size: 14px; }
.op-co-h2 { height: 8px; }
.op-co-conv { display: flex; align-items: center; gap: 4px; border-radius: 8px; padding: 6px; font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgb(var(--ink-muted)); }
.op-co-conv span { margin-left: 2px; }
.op-co-space-head { display: flex; align-items: center; gap: 4px; border-radius: 8px; padding: 6px; }
.op-co-chev { flex-shrink: 0; color: rgb(var(--ink-muted)); border-radius: 4px; }
.op-co-space-name { display: flex; min-width: 0; flex: 1; align-items: center; gap: 6px; font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgb(var(--ink-muted)); }
.op-co-space-name.is-active { color: rgb(var(--accent-ink)); }
.op-co-pill { flex-shrink: 0; border-radius: 9999px; background: rgb(var(--accent)); padding: 1px 6px; font-size: 10px; font-weight: 600; line-height: 1; color: #fff; letter-spacing: 0; text-transform: none; }
.op-co-ghost { flex-shrink: 0; border-radius: 4px; padding: 2px; color: rgb(var(--ink-muted)); opacity: .4; }
.op-co-lists { margin-left: 8px; border-left: 1px solid rgb(var(--hairline)); padding-left: 8px; }
.op-co-lists > * + * { margin-top: 2px; }
.op-co-list { display: flex; align-items: center; gap: 4px; border-radius: 8px; padding-right: 4px; }
.op-co-list a { display: flex; min-width: 0; flex: 1; align-items: center; gap: 8px; border-radius: 8px; padding: 6px 8px; font-size: 14px; line-height: 20px; color: rgb(var(--ink-soft)); }
.op-co-proj-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 9999px; background: rgb(var(--accent) / .6); }
.op-co-newspace { margin-top: 4px; display: flex; width: 100%; align-items: center; gap: 6px; border-radius: 8px; padding: 6px; font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: rgb(var(--ink-muted)); }
.op-co-foot-user { flex-shrink: 0; border-top: 1px solid rgb(var(--hairline)); padding: 8px; }
.op-co-me { display: flex; width: 100%; align-items: center; gap: 10px; border-radius: 12px; padding: 6px 8px; text-align: left; }
.op-co-me-txt { min-width: 0; flex: 1; display: block; }
.op-co-me-name { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: rgb(var(--ink)); }
.op-co-me-role { display: block; font-size: 11px; line-height: 16px; color: rgb(var(--ink-muted)); }

/* ---------- the top bar + QuickAdd.tsx ---------- */
.op-co-main { display: flex; min-width: 0; flex: 1; flex-direction: column; position: relative; }
.op-co-top { display: flex; height: 56px; flex-shrink: 0; align-items: center; gap: 12px; border-bottom: 1px solid rgb(var(--hairline)); background: rgb(var(--surface) / .8); padding: 0 20px; }
.op-co-top-ws { display: flex; min-width: 0; align-items: center; gap: 10px; }
.op-co-top-glyph { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: rgb(var(--accent)); background: rgb(var(--accent-soft)); }
.op-co-top h1 { font-size: 18px; line-height: 1; font-weight: 600; color: rgb(var(--ink)); white-space: nowrap; }
.op-co-quick { margin-left: auto; width: 100%; max-width: 448px; }
.op-co-quick-box { display: flex; align-items: center; gap: 8px; border-radius: 12px; border: 1px solid rgb(var(--hairline)); background: rgb(var(--surface)); padding: 0 12px; height: 42px; }
.op-co-quick-ph { font-size: 14px; line-height: 40px; color: rgb(var(--ink-muted)); white-space: nowrap; overflow: hidden; }

/* ---------- SpacePage.tsx ---------- */
.op-co-page { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.op-co-space-bar { display: flex; height: 48px; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgb(var(--hairline)); background: rgb(var(--surface) / .6); padding: 0 16px; }
.op-co-space-bar h2 { font-size: 20px; line-height: 28px; font-weight: 600; color: rgb(var(--ink)); }
.op-co-members { display: flex; align-items: center; gap: 8px; }
.op-co-members-avs { display: flex; }
.op-co-members-avs > * + * { margin-left: -6px; }
.op-co-av-ring { display: inline-block; border-radius: 9999px; box-shadow: 0 0 0 2px rgb(var(--surface)); }
.op-co-members-n { font-size: 11px; line-height: 16px; color: rgb(var(--ink-muted)); }
.op-co-deskrail { display: flex; flex-direction: row; height: 616px; min-height: 0; }

/* ---------- Desktop.tsx ---------- */
.op-co-desk { position: relative; overflow: hidden; min-height: 0; flex: 1; }
.op-co .desk-grid { background-color: rgb(var(--canvas)); background-image: radial-gradient(rgb(var(--ink) / .11) 1px, transparent 1px); background-size: 24px 24px; }
.op-co-scroll { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.op-co-world { position: relative; width: 690px; height: 616px; }
.op-co-marks { position: absolute; left: 0; top: 0; pointer-events: none; }
.op-co-items { position: absolute; inset: 0; pointer-events: none; }
.op-co-item { position: absolute; cursor: grab; user-select: none; }
.op-co-item.is-dragging { cursor: grabbing; }
.op-co-tile { position: relative; margin: 0 auto; display: grid; width: 96px; height: 96px; place-items: center; border-radius: 12px; border: 1px solid rgb(var(--hairline)); background: rgb(var(--surface)); box-shadow: var(--shadow-soft); }
.op-co-glyph { width: 40px; height: 40px; color: rgb(var(--ink-muted)); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.op-co-emboss { position: absolute; bottom: 6px; left: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.op-co .embossed { color: rgb(var(--ink) / .38); text-shadow: 0 1px 0 rgb(255 255 255 / .75); }
.op-co.op-co-dark .embossed { color: rgb(var(--ink) / .32); text-shadow: 0 1px 0 rgb(255 255 255 / .08), 0 -1px 0 rgb(0 0 0 / .5); }
.op-co-cap { margin-top: 6px; padding: 0 2px; text-align: center; font-size: 11px; line-height: 1.25; color: rgb(var(--ink-soft)); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; }
.op-co-imgbox { overflow: hidden; border-radius: 12px; border: 1px solid rgb(var(--hairline)); background: rgb(var(--surface)); box-shadow: var(--shadow-soft); }
.op-co-imgbox img { display: block; height: 112px; width: 100%; object-fit: cover; }
.op-co-bubble { position: absolute; right: -6px; top: -6px; z-index: 10; border-radius: 9999px; box-shadow: 0 0 0 2px rgb(var(--surface)); }
/* items.tsx::NoteItem — the sticky; paper colours from index.css (.note-paper / .note-amber) */
.op-co-note-paper { position: relative; border-radius: 6px; padding: 12px 12px 24px; box-shadow: var(--shadow-soft); min-height: 170px; color: #1c1b19; background: var(--note-amber); }
.op-co-note-text { white-space: pre-wrap; overflow-wrap: break-word; font-size: 14px; line-height: 1.375; }
.op-co-note-text.is-editing { min-height: 122px; }
.op-co-note-text .op-co-ph { opacity: .5; }
.op-co-caret { display: inline-block; width: 1px; height: 15px; vertical-align: -3px; background: #1c1b19; margin-left: 1px; animation: op-co-blink 1s steps(2, start) infinite; }
@keyframes op-co-blink { to { visibility: hidden; } }
.op-co-swatch-row { position: absolute; bottom: 6px; right: 8px; display: flex; gap: 4px; opacity: .4; }
.op-co-swatch-row i { display: block; width: 12px; height: 12px; border-radius: 9999px; border: 1px solid rgb(0 0 0 / .15); }
.op-co-swatch-row i.is-on { border-color: rgb(0 0 0 / .5); }
.op-co-item.is-new { animation: op-co-land .22s cubic-bezier(.22,1,.36,1) both; }
@keyframes op-co-land { from { opacity: 0; transform: scale(.96); } }
/* DrawingLayer.tsx — the overlay */
.op-co-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 2000000; }
.op-co-draft { position: absolute; left: 0; top: 0; }
.op-co-mark { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* the floating toolbar (Desktop.tsx) + DrawingTools.tsx */
.op-co-tools { position: absolute; left: 12px; top: 12px; z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 4px; border-radius: 12px; border: 1px solid rgb(var(--hairline)); background: rgb(var(--surface) / .9); padding: 4px; box-shadow: var(--shadow-pop); backdrop-filter: blur(4px); }
.op-co-tool { display: flex; align-items: center; gap: 6px; border-radius: 8px; padding: 6px 8px; font-size: 12px; line-height: 16px; color: rgb(var(--ink-soft)); transition: background .15s, color .15s; white-space: nowrap; }
.op-co-tool.op-hover { background: rgb(var(--surface-2)); color: rgb(var(--ink)); }
.op-co-tool.is-active { background: rgb(var(--accent-soft)); color: rgb(var(--accent-ink)); }
.op-co-tool kbd { margin-left: auto; padding-left: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; font-weight: 400; opacity: .5; }
.op-co-div { margin: 0 4px; border-top: 1px solid rgb(var(--hairline)); }
.op-co-div-y { margin: 2px 4px; }
.op-co-dtools { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.op-co-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px 8px; }
.op-co-sw { display: block; margin: 0 auto; width: 16px; height: 16px; border-radius: 9999px; box-shadow: 0 0 0 1px rgb(0 0 0 / .1); }
.op-co-sw.is-on { box-shadow: 0 0 0 1px rgb(var(--surface)), 0 0 0 3px rgb(var(--ink) / .7); }
.op-co-widths { display: flex; align-items: center; justify-content: space-around; padding: 4px; }
.op-co-wd { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; color: rgb(var(--ink-soft)); }
.op-co-wd.is-on { background: rgb(var(--accent-soft)); color: rgb(var(--accent-ink)); }
.op-co-wd i { display: block; border-radius: 9999px; background: currentColor; }
/* TrashTray.tsx, empty */
.op-co-tray { position: absolute; bottom: 12px; right: 12px; z-index: 30; width: 160px; display: flex; flex-direction: column; border-radius: 12px; border: 2px dashed rgb(var(--hairline)); background: rgb(var(--surface) / .8); padding: 8px; backdrop-filter: blur(4px); }
.op-co-tray-h { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: rgb(var(--ink-muted)); }
.op-co-tray p { margin-top: 4px; padding: 0 4px; font-size: 11px; line-height: 1.375; color: rgb(var(--ink-muted)); }

/* ---------- the chat rail (SpacePage.tsx::ChatRail + SpaceConversation.tsx) ---------- */
.op-co-rail { display: flex; width: 320px; flex-shrink: 0; flex-direction: column; border-left: 1px solid rgb(var(--hairline)); background: rgb(var(--surface)); }
.op-co-rail-h { display: flex; height: 40px; flex-shrink: 0; align-items: center; gap: 8px; border-bottom: 1px solid rgb(var(--hairline)); padding: 0 12px; }
.op-co-rail-h h3 { font-size: 11px; line-height: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: rgb(var(--ink-muted)); }
.op-co-pill-rail { padding: 0 6px; font-size: 11px; line-height: 16px; }
.op-co-rail-shared { margin-left: auto; font-size: 11px; line-height: 16px; color: rgb(var(--ink-muted)); }
.op-co-rail-body { min-height: 0; flex: 1; overflow: hidden; padding: 8px 12px; }
.op-co-notes > * + * { margin-top: 4px; }
.op-co-note { display: flex; gap: 8px; border-radius: 8px; padding: 12px 4px 0; }
.op-co-note.is-new { animation: op-co-land .28s cubic-bezier(.22,1,.36,1) both; }
.op-co-note-av { width: 28px; flex-shrink: 0; }
.op-co-note-c { min-width: 0; flex: 1; }
.op-co-note-who { display: flex; align-items: baseline; gap: 8px; }
.op-co-note-name { font-size: 14px; line-height: 20px; font-weight: 500; color: rgb(var(--ink)); }
.op-co-note-time { font-size: 11px; line-height: 16px; color: rgb(var(--ink-muted)); }
.op-co-note-body { font-size: 14px; line-height: 1.625; color: rgb(var(--ink-soft)); overflow-wrap: anywhere; }
.op-co .prose-core p { margin: 6px 0; }
.op-co .prose-core a { color: rgb(var(--accent)); text-decoration: underline; text-decoration-color: rgb(var(--accent) / .3); text-underline-offset: 2px; }
/* NotePreviewCard.tsx */
.op-co-previews { margin-top: 6px; width: 100%; max-width: 448px; }
.op-co-pv-pending { font-size: 11px; line-height: 16px; color: rgb(var(--ink-muted)); }
.op-co-pv-card { display: flex; max-width: 100%; align-items: stretch; gap: 10px; overflow: hidden; border-radius: 8px; border: 1px solid rgb(var(--hairline)); background: rgb(var(--surface)); padding: 8px; animation: op-co-fade .28s cubic-bezier(.22,1,.36,1) both; }
@keyframes op-co-fade { from { opacity: 0; transform: translateY(4px); } }
.op-co-pv-c { min-width: 0; flex: 1; }
.op-co-pv-site { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; line-height: 16px; color: rgb(var(--ink-muted)); }
.op-co-pv-title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; line-height: 20px; font-weight: 500; color: rgb(var(--ink)); }
.op-co-pv-desc { margin-top: 2px; font-size: 12px; line-height: 16px; color: rgb(var(--ink-soft)); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: break-word; }
.op-co-pv-card img { width: 56px; height: 56px; flex-shrink: 0; align-self: center; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgb(var(--hairline)); }
/* the composer */
.op-co-composer { margin-top: 12px; display: flex; align-items: flex-start; gap: 8px; }
.op-co-composer-c { min-width: 0; flex: 1; }
.op-co-ta { width: 100%; height: 62px; border-radius: 12px; border: 1px solid rgb(var(--hairline)); background: rgb(var(--surface)); padding: 10px; font-size: 14px; line-height: 20px; color: rgb(var(--ink)); overflow: hidden; }
.op-co-ta-ph { color: rgb(var(--ink-muted)); }
.op-co-composer-r { margin-top: 4px; display: flex; justify-content: flex-end; }
.op-co-post { border-radius: 8px; background: rgb(var(--accent)); padding: 4px 12px; font-size: 12px; line-height: 16px; font-weight: 500; color: #fff; }
.op-co-post[disabled] { opacity: .5; }
/* AddMenu.tsx: the FAB */
.op-co-fab { position: absolute; bottom: 24px; right: 24px; z-index: 30; display: grid; width: 56px; height: 56px; place-items: center; border-radius: 9999px; background: rgb(var(--accent)); color: #fff; box-shadow: var(--shadow-pop); }

/* stillness */
html.motion-paused .op-co *, html.motion-paused .op-co { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { .op-co *, .op-co { animation: none !important; transition: none !important; } }
@media (max-width: 0px) /* retired 2026-10-23: the film */ { .op-co-frame { width: 100%; } }