/* ==========================================================
   Oriel coming-soon page
   The page frame uses the website's tokens (paper / warm ink,
   Newsreader + DM Sans). Everything drawn inside an
   .o2-window uses Oriel's own interface tokens (--o2-*),
   copied from the desktop app, so the demos look like the app.
   Oriel's realist colours (context, mechanism, outcome) sit
   very close to the site's teal, purple and amber, so those
   three act as the page's shared accent system.
   ========================================================== */

.o2-page {
  --o2-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --o2-serif: "Newsreader", Georgia, serif;
  --o2-bg: #ffffff;
  --o2-soft: #f7f7f6;
  --o2-sidebar: #efeeeb;
  --o2-sidebar-text: #57534e;
  --o2-sidebar-active: #242220;
  --o2-text: #262626;
  --o2-muted: #5e5e5e;
  --o2-border: #e3e3e3;
  --o2-border-strong: #c4c4c4;
  --o2-hover: rgba(0, 0, 0, 0.05);
  --o2-row: #efefef;
  --o2-chip: #e8e8e8;
  --o2-chip-text: #3d3d3d;
  --o2-accent: #3a64b4;
  --o2-accent-solid: #3d68bb;
  --o2-accent-hover: #31559e;
  --o2-on-solid: #ffffff;
  --o2-select: #d3e2fb;
  --o2-i: #2f5f9e;
  --o2-c: #236e6c;
  --o2-a: #9a3f5c;
  --o2-m: #72539a;
  --o2-o: #895d16;
  --o2-sup: #346c40;
  --o2-con: #9e465c;
  --o2-av-i: #1f1f1f;
  --o2-av-p: #3d68bb;
  --o2-pop: 0 8px 28px rgba(0, 0, 0, 0.14);
  --o2-radius: 6px;
}
:root[data-theme="dark"] .o2-page {
  --o2-bg: #1e1e1f;
  --o2-soft: #252526;
  --o2-sidebar: #1a1918;
  --o2-sidebar-text: #b9b6b2;
  --o2-sidebar-active: #ffffff;
  --o2-text: #e4e4e4;
  --o2-muted: #9a9a9a;
  --o2-border: #38383a;
  --o2-border-strong: #4a4a4d;
  --o2-hover: rgba(255, 255, 255, 0.07);
  --o2-row: #2d2d2f;
  --o2-chip: #38383a;
  --o2-chip-text: #d0d0d0;
  --o2-accent: #7c9de0;
  --o2-accent-solid: #4a70c4;
  --o2-accent-hover: #3d61b2;
  --o2-select: #30456a;
  --o2-i: #8fb0e3;
  --o2-c: #78bcb6;
  --o2-a: #e09ab2;
  --o2-m: #b7a0d6;
  --o2-o: #d6b06b;
  --o2-sup: #91bd95;
  --o2-con: #d998a7;
  --o2-av-i: #55555a;
  --o2-av-p: #4a70c4;
  --o2-pop: 0 8px 28px rgba(0, 0, 0, 0.55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .o2-page {
    --o2-bg: #1e1e1f; --o2-soft: #252526; --o2-sidebar: #1a1918; --o2-sidebar-text: #b9b6b2;
    --o2-sidebar-active: #ffffff; --o2-text: #e4e4e4; --o2-muted: #9a9a9a; --o2-border: #38383a;
    --o2-border-strong: #4a4a4d; --o2-hover: rgba(255, 255, 255, 0.07); --o2-row: #2d2d2f;
    --o2-chip: #38383a; --o2-chip-text: #d0d0d0; --o2-accent: #7c9de0; --o2-accent-solid: #4a70c4;
    --o2-accent-hover: #3d61b2; --o2-select: #30456a; --o2-i: #8fb0e3; --o2-c: #78bcb6;
    --o2-a: #e09ab2; --o2-m: #b7a0d6; --o2-o: #d6b06b; --o2-sup: #91bd95; --o2-con: #d998a7;
    --o2-av-i: #55555a; --o2-av-p: #4a70c4; --o2-pop: 0 8px 28px rgba(0, 0, 0, 0.55);
  }
}

.o2-page [hidden] { display: none !important; }
.o2-page section[id] { scroll-margin-top: 90px; }
.o2-page h2 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.025em; font-weight: var(--fw-display); }
.o2-page h1 em, .o2-page h2 em { font-style: italic; color: var(--teal); }
.o2-page p { text-wrap: pretty; }
.o2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.o2-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.o2-dot.c { background: var(--teal); }
.o2-dot.m { background: var(--purple); }
.o2-dot.o { background: var(--amber); }
.o2-label-c { color: var(--teal); }
.o2-label-m { color: var(--purple); }
.o2-label-o { color: var(--amber); }

/* ---------- Hero ---------- */
.o2-hero { padding: var(--sp-14) 0 var(--sp-16); overflow: hidden; }
.o2-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-8); flex-wrap: wrap; }
.o2-mark { width: 52px; height: 52px; border-radius: 12px; }
.o2-wordmark { font-family: var(--display); font-size: 46px; line-height: 1; letter-spacing: -0.04em; font-weight: 500; margin-right: var(--sp-2); }
.o2-soon {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  background: var(--card);
}
.o2-soon-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.o2-soon-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--amber); animation: o2-ping 2.2s var(--ease-out) infinite; }
@keyframes o2-ping { 0% { transform: scale(1); opacity: 0.6; } 80%, 100% { transform: scale(2.8); opacity: 0; } }

.o2-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-8) var(--sp-12); align-items: end; }
.o2-hero h1 { font-size: clamp(42px, 5.6vw, 70px); line-height: 1.02; letter-spacing: -0.035em; font-weight: var(--fw-display); margin: 0; }
.o2-lede { font-size: var(--fs-lede); color: var(--muted); max-width: 34em; line-height: 1.65; margin: 0; }
.o2-hero .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* release facts: price, platform, date */
.o2-release { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: var(--sp-10) 0 var(--sp-10); padding: 0; list-style: none; border-block: 1px solid var(--line); }
.o2-release li { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-4) var(--sp-6); border-left: 1px solid var(--line); }
.o2-release li:first-child { border-left: 0; padding-left: 0; }
.o2-release-k { font-size: var(--fs-eyebrow-sm); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.o2-release-v { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--display); font-size: clamp(20px, 2.4vw, 30px); line-height: 1.2; }

/* the introduction film, on a stage like the app's */
.o2-film { margin: 0; }
.o2-stage {
  position: relative; width: 100%; aspect-ratio: 16 / 10; container-type: inline-size; overflow: hidden;
  border-radius: 14px; border: 1px solid var(--o2-border-strong); background: var(--o2-bg); box-shadow: var(--shadow-lift);
  /* Oriel's own token names, scoped to the stage so the ported film styles work unchanged */
  --realist-context: var(--o2-c); --realist-mechanism: var(--o2-m); --realist-outcome: var(--o2-o);
  --font: var(--o2-font); --text: var(--o2-text); --muted: var(--o2-muted); --bg: var(--o2-bg); --bg-soft: var(--o2-soft);
  --border: var(--o2-border); --border-strong: var(--o2-border-strong); --row: var(--o2-row); --row-active: #e0e0e0;
  --accent: var(--o2-accent); --accent-solid: var(--o2-accent-solid); --accent-solid-hover: var(--o2-accent-hover); --on-solid: #ffffff;
  --sidebar: var(--o2-sidebar); --sidebar-text: var(--o2-sidebar-text); --sidebar-active: var(--o2-sidebar-active);
  --sidebar-line: #d6d3cf; --sidebar-hover: rgba(45, 40, 35, 0.07); --sidebar-tag-line: #aaa59d; --sidebar-avatar: #4a74c9;
  --hl-blue: #5b9bf0; --hl-orange: #f59a42; --hl-green: #4cc27a; --hl-strength: 42%; --flash: rgba(245, 197, 66, 0.45);
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.18); --shadow-soft: 0 2px 14px rgba(0, 0, 0, 0.06);
}
:root[data-theme="dark"] .o2-stage {
  --row-active: #404043; --sidebar-line: rgba(255, 255, 255, 0.1); --sidebar-hover: rgba(255, 255, 255, 0.12);
  --sidebar-tag-line: rgba(255, 255, 255, 0.3); --hl-strength: 34%; --flash: rgba(245, 197, 66, 0.3);
  --shadow: 0 8px 28px rgba(0, 0, 0, 0.55); --shadow-soft: 0 2px 14px rgba(0, 0, 0, 0.4);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .o2-stage {
    --row-active: #404043; --sidebar-line: rgba(255, 255, 255, 0.1); --sidebar-hover: rgba(255, 255, 255, 0.12);
    --sidebar-tag-line: rgba(255, 255, 255, 0.3); --hl-strength: 34%; --flash: rgba(245, 197, 66, 0.3);
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.55); --shadow-soft: 0 2px 14px rgba(0, 0, 0, 0.4);
  }
}
.o2-stage .serif { font-family: var(--o2-serif); }
.o2-film-caption { margin: var(--sp-5) auto 0; min-height: 2.8em; max-width: 760px; text-align: center; font-family: var(--display); font-size: clamp(19px, 2vw, 24px); line-height: 1.4; color: var(--text); }
.o2-film-caption strong { color: var(--teal); font-weight: 600; }
.o2-film-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.o2-film-dots { display: flex; gap: 2px; margin-left: var(--sp-2); }
.o2-film-dot { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.o2-film-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); transition: background var(--dur) ease, transform var(--dur) var(--ease-out); }
.o2-film-dot:hover::before { background: var(--muted); }
.o2-film-dot[aria-current]::before { background: var(--teal); transform: scale(1.25); }

.o2-pause {
  font: var(--fw-semibold) var(--fs-caption) / 1 var(--font); color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 12px; cursor: pointer; transition: border-color var(--dur) ease, color var(--dur) ease;
}
.o2-pause:hover { color: var(--text); border-color: var(--line-hover); }
.o2-pause:disabled { opacity: 0.45; cursor: default; }

/* Pausing the film also stills the ticker */
.o2-still .o2-hero *, .o2-still .o2-hero *::after, .o2-still .o2-ticker-track { animation-play-state: paused !important; }

/* ---------- Ticker ---------- */
.o2-ticker { border-block: 1px solid var(--line); background: var(--bg-alt); overflow: hidden; padding: var(--sp-4) 0; }
.o2-ticker-track { display: flex; width: max-content; animation: o2-marquee 48s linear infinite; }
.o2-ticker:hover .o2-ticker-track, .o2-ticker:focus-within .o2-ticker-track { animation-play-state: paused; }
.o2-ticker ul { display: flex; margin: 0; padding: 0; list-style: none; }
.o2-ticker li { display: flex; align-items: center; gap: var(--sp-6); padding-right: var(--sp-6); font-family: var(--display); font-size: 22px; font-style: italic; color: var(--muted); white-space: nowrap; }
.o2-ticker li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.o2-ticker li:nth-child(3n+2)::after { background: var(--purple); }
.o2-ticker li:nth-child(3n)::after { background: var(--amber); }
@keyframes o2-marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.o2-section { padding: var(--sp-20) 0; }
.o2-heading { max-width: 760px; margin-bottom: var(--sp-10); }
.o2-heading-row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-6); flex-wrap: wrap; }
.o2-intro { font-size: var(--fs-body); color: var(--muted); margin-top: var(--sp-5); max-width: 40em; }

.o2-try { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-body-sm); color: var(--muted); flex-wrap: wrap; }
.o2-try-badge { font-family: var(--display); font-style: italic; font-size: 20px; color: var(--amber); }

/* ---------- Oriel window (shared) ---------- */
.o2-window {
  position: relative; font-family: var(--o2-font); color: var(--o2-text); background: var(--o2-bg);
  border: 1px solid var(--o2-border-strong); border-radius: 10px; box-shadow: var(--shadow-lift); overflow: hidden;
  font-size: 14px; line-height: 1.5;
}
.o2-titlebar { display: flex; align-items: center; gap: var(--sp-3); height: 34px; padding: 0 var(--sp-3); background: var(--o2-sidebar); border-bottom: 1px solid var(--o2-border); font-size: 12px; color: var(--o2-muted); }
.o2-lights { display: inline-flex; gap: 6px; }
.o2-lights i { width: 11px; height: 11px; border-radius: 50%; background: var(--o2-border-strong); }
.o2-titlebar-name { font-weight: 600; color: var(--o2-text); }
.o2-window h3 { font-family: var(--o2-font); }

.o2-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px;
  font: 500 13px / 1 var(--o2-font); color: var(--o2-text); background: var(--o2-bg);
  border: 1px solid var(--o2-border-strong); border-radius: var(--o2-radius); cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.o2-btn:hover { background: var(--o2-soft); }
.o2-btn:active { transform: translateY(1px); }
.o2-btn.primary { background: var(--o2-accent-solid); border-color: var(--o2-accent-solid); color: var(--o2-on-solid); }
.o2-btn.primary:hover { background: var(--o2-accent-hover); }
.o2-btn:disabled { opacity: 0.5; cursor: default; }
.o2-page .o2-window :focus-visible, .o2-page .o2-btn:focus-visible { outline: 2px solid var(--o2-accent); outline-offset: 2px; }

/* ---------- Quick codes demo ---------- */
.o2-coder-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr) 250px; min-height: 520px; }
.o2-sidebar { background: var(--o2-sidebar); color: var(--o2-sidebar-text); padding: var(--sp-5) var(--sp-4); font-size: 13px; position: relative; }
.o2-sidebar p { margin: 0; }
.o2-sb-project { font-size: 17px; font-weight: 600; color: var(--o2-sidebar-active); margin-bottom: var(--sp-3) !important; }
.o2-sb-item { padding: 5px 0; border-bottom: 1px solid var(--o2-border); font-size: 15px; }
.o2-sb-head { margin-top: var(--sp-4) !important; font-size: 15px; color: var(--o2-sidebar-active); }
.o2-sb-sub { padding: 3px 0; }
.o2-sb-sub.is-current { font-weight: 700; color: var(--o2-sidebar-active); }
.o2-sb-tag { font-size: 10px; border: 1px solid var(--o2-border-strong); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.o2-sb-user { position: absolute; left: var(--sp-4); bottom: var(--sp-4); display: flex; align-items: center; gap: 8px; color: var(--o2-sidebar-active); }
.o2-sb-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--o2-av-p); color: #fff; display: grid; place-items: center; font-size: 12px; }

.o2-doc { min-width: 0; border-right: 1px solid var(--o2-border); display: flex; flex-direction: column; }
.o2-doc-head { padding: var(--sp-4) var(--sp-5) var(--sp-3); border-bottom: 1px solid var(--o2-border); }
.o2-doc-head h3 { font-size: 21px; font-weight: 500; margin: 0 0 var(--sp-3); }
.o2-toolbar { display: flex; flex-wrap: wrap; gap: 6px; }
.o2-tb { font-size: 12px; padding: 4px 9px; border: 1px solid var(--o2-border-strong); border-radius: 5px; color: var(--o2-text); white-space: nowrap; }
.o2-tb.is-on { background: var(--o2-row); }

.o2-transcript { position: relative; padding: var(--sp-5) var(--sp-6) var(--sp-8) var(--sp-5); flex: 1; }
.o2-turn { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-5); padding-right: 22px; }
.o2-turn p { margin: 0; }
.o2-av { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 600; }
.o2-av.i { background: var(--o2-av-i); }
.o2-av.p { background: var(--o2-av-p); }
.o2-who { font-weight: 600; font-size: 14px; }
.o2-codable { font-size: 15.5px; line-height: 2; cursor: text; }
.o2-s { border-radius: 2px; transition: background-color 0.2s ease; background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; }
.o2-s.is-sel { background-color: var(--o2-select); }
.o2-s.is-coded { background-image: linear-gradient(var(--code), var(--code)); background-size: 100% 2px; transition: background-size 0.6s var(--ease-out), background-color 0.2s ease; }
.o2-s.is-flash { animation: o2-flash 0.9s ease; }
@keyframes o2-flash { 0% { background-color: rgba(245, 197, 66, 0.55); } 100% { background-color: transparent; } }
.o2-codable::selection, .o2-codable *::selection { background: var(--o2-select); }

.o2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.o2-chips:empty { display: none; }
.o2-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; font-size: 13px; border-radius: 4px; background: var(--o2-chip); color: var(--o2-chip-text); animation: o2-pop 0.45s var(--ease-out); }
.o2-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--code); }
@keyframes o2-pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: none; } }

.o2-stripes { position: absolute; right: 0; top: 26px; bottom: 4px; display: flex; gap: 3px; }
.o2-stripe { width: 4px; border-radius: 2px; background: var(--code); transform-origin: top; animation: o2-grow 0.6s var(--ease-out); }
@keyframes o2-grow { from { transform: scaleY(0); } }

/* the Quick codes card */
.o2-qp {
  position: absolute; z-index: 5; width: 272px; padding: 6px;
  background: var(--o2-bg); border: 1px solid var(--o2-border-strong); border-radius: 8px; box-shadow: var(--o2-pop);
  animation: o2-qp-in 0.22s var(--ease-out);
  font-size: 13.5px;
}
@keyframes o2-qp-in { from { opacity: 0; transform: translateY(-6px) scale(0.97); } }
.o2-qp-input { width: 100%; height: 30px; padding: 0 8px; font: 13.5px var(--o2-font); color: var(--o2-text); background: var(--o2-bg); border: 1px solid var(--o2-border-strong); border-radius: 5px; text-align: center; }
.o2-qp-input:focus { outline: none; border-color: var(--o2-accent); text-align: left; }
.o2-qp-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; }
.o2-qp-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 5px; cursor: pointer; }
.o2-qp-row:hover, .o2-qp-row.is-hi { background: var(--o2-row); }
.o2-qp-row i { width: 8px; height: 8px; border-radius: 50%; background: var(--code); flex: none; }
.o2-qp-row .o2-qp-path { margin-left: auto; font-size: 11.5px; color: var(--o2-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.o2-qp-row .o2-qp-more { margin-left: auto; color: var(--o2-muted); }
.o2-qp-row.is-back { color: var(--o2-accent); font-size: 12.5px; }
.o2-qp-row.is-back span { color: var(--o2-muted); }
.o2-qp-row.is-create { color: var(--o2-accent); }
.o2-qp-foot { border-top: 1px solid var(--o2-border); margin-top: 6px; padding: 7px 8px 3px; font-size: 11.5px; color: var(--o2-muted); line-height: 1.4; }
.o2-qp-links { display: flex; gap: 14px; color: var(--o2-accent); margin-bottom: 3px; font-size: 12.5px; }
.o2-qp-help { display: block; }

.o2-ghost { position: absolute; z-index: 6; width: 22px; height: 22px; left: 0; top: 0; pointer-events: none; transition: transform 0.7s var(--ease-out); }
.o2-ghost path { fill: #111; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; }

/* codes panel */
.o2-codes { padding: var(--sp-5) var(--sp-4); background: var(--o2-bg); }
.o2-codes-title { font-family: var(--o2-serif) !important; font-size: 30px; font-weight: 500; margin: 0 0 var(--sp-3); }
.o2-codes-search { border: 1px solid var(--o2-border-strong); border-radius: 5px; padding: 6px 10px; font-size: 13px; color: var(--o2-muted); margin-bottom: var(--sp-3); }
.o2-codes-tree { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.o2-codes-tree ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
.o2-code-row {
  position: relative; display: flex; align-items: center; width: 100%; gap: 6px; margin-bottom: 4px; padding: 5px 12px 5px 9px;
  background: var(--o2-row); border: 0; border-radius: 3px; color: var(--o2-text); font: inherit; text-align: left; cursor: pointer;
}
.o2-code-row:hover { background: var(--o2-hover); outline: 1px solid var(--o2-border-strong); }
.o2-code-row::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; border-radius: 0 3px 3px 0; background: var(--code); }
.o2-code-row.is-top { font-weight: 600; }
.o2-code-row .o2-count { color: var(--o2-muted); font-weight: 400; display: inline-block; }
.o2-code-row .o2-count.is-bump { animation: o2-bump 0.5s var(--ease-out); color: var(--o2-accent); }
@keyframes o2-bump { 0% { transform: translateY(0); } 40% { transform: translateY(-5px) scale(1.25); } 100% { transform: none; } }
.o2-code-row.is-new { animation: o2-pop 0.5s var(--ease-out); }
.o2-codes-note { font-size: 12px; color: var(--o2-muted); margin-top: var(--sp-3); }

/* controls under the demo (site frame) */
.o2-coder-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-5); }
.o2-keys { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.o2-key { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-caption); color: var(--muted); padding: 4px 10px 4px 5px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--card); transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s var(--ease-out); }
.o2-key kbd { font: 600 11px / 1 var(--font); min-width: 22px; padding: 4px 6px; text-align: center; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); }
.o2-key.is-on { border-color: var(--teal); color: var(--text); background: rgb(var(--teal-rgb) / 0.12); transform: translateY(-2px); }
.o2-key.is-on kbd { border-color: var(--teal); }
.o2-coder-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.o2-tally { margin-top: var(--sp-3); font-size: var(--fs-body-sm); color: var(--muted); }
.o2-tally strong { color: var(--text); }
.o2-static-shot { display: block; width: 100%; height: auto; border-radius: var(--r-sm); border: 1px solid var(--line); margin-top: var(--sp-4); }

/* ---------- Realist demo ---------- */
.o2-realist { background: var(--bg-alt); border-block: 1px solid var(--line); }
.o2-theory-body { padding: var(--sp-6) var(--sp-6) var(--sp-8); }
.o2-theory-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4); flex-wrap: wrap; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--o2-border); }
.o2-theory-head h3 { font-size: 21px; font-weight: 500; margin: 0; }
.o2-meta { margin: 2px 0 0; font-size: 13px; color: var(--o2-muted); }
.o2-theory-desc { font-size: 14px; color: var(--o2-text); margin: var(--sp-4) 0; }
.o2-seg, .o2-tabs { display: inline-flex; border: 1px solid var(--o2-border-strong); border-radius: var(--o2-radius); overflow: hidden; }
.o2-seg-btn, .o2-tabs [role="tab"] { height: 34px; padding: 0 14px; font: 13px var(--o2-font); color: var(--o2-text); background: var(--o2-bg); border: 0; border-right: 1px solid var(--o2-border-strong); cursor: pointer; transition: background var(--dur-fast) ease, color var(--dur-fast) ease; }
.o2-seg-btn:last-child, .o2-tabs [role="tab"]:last-child { border-right: 0; }
.o2-seg-btn:hover, .o2-tabs [role="tab"]:hover { background: var(--o2-soft); }
.o2-seg-btn[aria-pressed="true"], .o2-tabs [role="tab"][aria-selected="true"] { background: var(--o2-accent-solid); color: var(--o2-on-solid); }
.o2-tabs { margin-bottom: var(--sp-4); }
.o2-panel { animation: o2-panel-in 0.35s var(--ease-out); }
@keyframes o2-panel-in { from { opacity: 0; transform: translateY(6px); } }
.o2-panel-help { font-size: 13px; color: var(--o2-muted); margin: 0 0 var(--sp-4); }
.o2-inline { margin: 0; }

/* diagram */
.o2-diagram { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-10); padding: var(--sp-6); background: var(--o2-soft); border: 1px solid var(--o2-border); border-radius: var(--o2-radius); }
.o2-cmoc {
  position: relative; background: var(--o2-bg); border: 1px solid var(--o2-border-strong); border-radius: var(--o2-radius);
  padding: 12px 14px; font-size: 13.5px; transition: opacity 0.3s ease, box-shadow var(--dur) ease, transform var(--dur) var(--ease-out);
}
.o2-cmoc.is-enter { animation: o2-card-in 0.6s var(--ease-out) both; }
@keyframes o2-card-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
.o2-cmoc:hover { box-shadow: var(--o2-pop); }
.o2-cmoc-title { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.o2-cmoc-flag { font-size: 14px; color: var(--o2-muted); }
.o2-cmoc.is-refuted { opacity: 0.55; }
.o2-cmoc.is-refuted .o2-cmoc-title span:first-child { text-decoration: line-through; }
.o2-part { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s var(--ease-out), opacity 0.35s ease; }
.o2-part > div { overflow: hidden; min-height: 0; }
.o2-part.is-extra { grid-template-rows: 0fr; opacity: 0; }
.o2-icamo .o2-part.is-extra { grid-template-rows: 1fr; opacity: 1; }
.o2-part-inner { display: flex; gap: 6px; padding: 2px 0 2px 8px; margin: 3px 0; border-left: 3px solid var(--k); }
.o2-part-inner b { color: var(--k); font-weight: 700; flex: none; }
.o2-tallyline { margin-top: 8px; font-size: 12.5px; color: var(--o2-muted); }
.o2-tallyline .up, .o2-tallyline .down { display: inline-block; font-variant-numeric: tabular-nums; }
.o2-tallyline .is-flip { animation: o2-flip 0.6s var(--ease-out); color: var(--o2-accent); }
@keyframes o2-flip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
.o2-link { position: absolute; top: 50%; left: 100%; width: var(--sp-10); height: 2px; background: var(--o2-border-strong); transform-origin: left; }
.o2-link.is-dashed { background: repeating-linear-gradient(90deg, var(--o2-muted) 0 6px, transparent 6px 11px); }
.o2-link::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid var(--o2-border-strong); border-right: 0; }
.o2-link.is-dashed::after { border-left-color: var(--o2-muted); }
.o2-link.is-enter { animation: o2-line 0.7s var(--ease-out) 0.4s both; }
@keyframes o2-line { from { transform: scaleX(0); } }

/* evidence */
.o2-evidence { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-6); }
.o2-quote { padding: 14px 16px; border: 1px solid var(--o2-border-strong); border-radius: var(--o2-radius); background: var(--o2-bg); border-left: 4px solid var(--o2-accent); }
.o2-quote blockquote { margin: 0 0 6px; font-family: var(--o2-serif); font-size: 19px; line-height: 1.4; }
.o2-quote p { margin: 0; font-size: 12.5px; color: var(--o2-muted); }
.o2-quote.is-in { animation: o2-panel-in 0.4s var(--ease-out); }
.o2-ev-form { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); }
.o2-field { display: grid; gap: 4px; }
.o2-field-label { font-size: 12px; color: var(--o2-muted); }
.o2-chipset { display: flex; flex-wrap: wrap; gap: 6px; }
.o2-choice { height: 30px; padding: 0 12px; font: 13px var(--o2-font); color: var(--o2-text); background: var(--o2-bg); border: 1px solid var(--o2-border-strong); border-radius: 999px; cursor: pointer; }
.o2-choice:hover { background: var(--o2-soft); }
.o2-choice[aria-checked="true"] { background: var(--o2-text); color: var(--o2-bg); border-color: var(--o2-text); }
.o2-choice[data-v="supports"][aria-checked="true"] { background: var(--o2-sup); border-color: var(--o2-sup); color: var(--o2-bg); }
.o2-choice[data-v="contradicts"][aria-checked="true"] { background: var(--o2-con); border-color: var(--o2-con); color: var(--o2-bg); }
.o2-ev-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.o2-ev-targets { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); align-content: start; }
.o2-ev-target { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; font: inherit; font-size: 13.5px; text-align: left; color: var(--o2-text); background: var(--o2-bg); border: 1px solid var(--o2-border-strong); border-radius: var(--o2-radius); cursor: pointer; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.o2-ev-target[aria-pressed="true"] { border-color: var(--o2-accent); box-shadow: 0 0 0 1px var(--o2-accent); }
.o2-ev-target b { font-weight: 600; }
.o2-ev-target span { color: var(--o2-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o2-ev-target.is-hit { animation: o2-hit 0.6s var(--ease-out); }
@keyframes o2-hit { 40% { transform: scale(1.03); } }
.o2-flyer { position: fixed; z-index: 50; pointer-events: none; padding: 6px 10px; font: 13px var(--o2-font); color: var(--o2-text); background: var(--o2-bg); border: 1px solid var(--o2-accent); border-radius: 6px; box-shadow: var(--o2-pop); max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 0.7s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.7s ease; }

/* testing board */
.o2-test-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap; font-size: 14px; margin-bottom: var(--sp-2); }
.o2-progress { height: 5px; border-radius: 3px; background: var(--o2-row); overflow: hidden; margin-bottom: var(--sp-4); }
.o2-progress span { display: block; height: 100%; width: 25%; background: var(--o2-accent-solid); transition: width 0.6s var(--ease-out); }
.o2-board { display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); }
.o2-col { background: var(--o2-soft); border: 1px solid var(--o2-border); border-radius: var(--o2-radius); padding: 10px 8px; min-height: 260px; }
.o2-col h4 { font-family: var(--o2-font); font-size: 15px; font-weight: 600; margin: 0 2px 8px; }
.o2-col-empty { font-size: 12.5px; color: var(--o2-muted); margin: 0 2px; }
.o2-tcard { position: relative; z-index: 0; background: var(--o2-bg); border: 1px solid var(--o2-border); border-radius: 5px; padding: 10px; margin-bottom: 8px; font-size: 13px; }
.o2-tcard.is-new { animation: o2-card-in 0.5s var(--ease-out); }
.o2-tcard-id { color: var(--o2-accent); font-size: 12.5px; }
.o2-tcard p { margin: 6px 0; line-height: 1.4; }
.o2-tcard .o2-tallyline { margin: 0 0 8px; }
.o2-tcard-child { display: block; font-size: 12.5px; color: var(--o2-accent); margin: -2px 0 8px; }
.o2-tcard-reason { font-size: 12px; color: var(--o2-muted); font-style: italic; margin: 0 0 8px !important; }
.o2-verdict { position: relative; }
.o2-verdict > button { height: 28px; padding: 0 10px; font: 12.5px var(--o2-font); color: var(--o2-text); background: var(--o2-bg); border: 1px solid var(--o2-border-strong); border-radius: 5px; cursor: pointer; }
.o2-menu { position: absolute; z-index: 4; left: 0; top: calc(100% + 4px); min-width: 140px; margin: 0; padding: 4px; list-style: none; background: var(--o2-bg); border: 1px solid var(--o2-border-strong); border-radius: 6px; box-shadow: var(--o2-pop); animation: o2-qp-in 0.18s var(--ease-out); }
.o2-tcard.has-menu { z-index: 3; }
.o2-menu.is-up { top: auto; bottom: calc(100% + 4px); }
.o2-menu button { display: block; width: 100%; padding: 6px 9px; font: 13px var(--o2-font); color: var(--o2-text); text-align: left; background: none; border: 0; border-radius: 4px; cursor: pointer; }
.o2-menu button:hover, .o2-menu button:focus-visible { background: var(--o2-row); outline: none; }

/* versions */
.o2-versions { display: grid; gap: var(--sp-2); }
.o2-versions input[type="range"] { width: 100%; accent-color: var(--o2-accent-solid); }
.o2-ver-ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--o2-muted); }
.o2-ver-view { margin-top: var(--sp-4); display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-6); animation: o2-panel-in 0.35s var(--ease-out); }
.o2-ver-view h4 { font-family: var(--o2-font); font-size: 13px; font-weight: 600; color: var(--o2-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px; }
.o2-ver-statement { font-family: var(--o2-serif); font-size: 19px; line-height: 1.5; margin: 0 0 var(--sp-3); }
.o2-ver-statement ins { text-decoration: none; background: color-mix(in srgb, var(--o2-sup) 22%, transparent); color: var(--o2-text); border-radius: 3px; padding: 0 2px; }
.o2-ver-statement del { color: var(--o2-con); text-decoration-thickness: 1.5px; }
.o2-ver-meta { font-size: 13px; color: var(--o2-muted); margin: 0; }
.o2-lineage { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.o2-lineage li { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; border: 1px solid var(--o2-border); border-radius: 5px; background: var(--o2-soft); }
.o2-lineage b { font-weight: 600; flex: none; }

/* cards under the realist window (site frame) */
.o2-realist-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-10); }
.o2-realist-cards article { padding: var(--sp-6); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); }
.o2-realist-cards h3 { font-size: var(--fs-h3); margin: var(--sp-2) 0; }
.o2-realist-cards p { font-size: var(--fs-body-sm); color: var(--muted); margin: 0; }
.o2-subhead { margin-top: var(--sp-10); max-width: 62ch; }
.o2-subhead h3 { font-family: var(--display); font-size: var(--fs-h3); font-weight: 400; margin: var(--sp-2) 0; }
.o2-subhead p:last-child { font-size: var(--fs-body-sm); color: var(--muted); margin: 0; }
.o2-subhead + .o2-realist-cards { margin-top: var(--sp-5); }
.o2-realist-cards-two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-4); }
.o2-realist-cards-two article:nth-child(2) .o2-card-tag { color: var(--teal); }
.o2-realist-cards-two article:nth-child(3) .o2-card-tag { color: var(--teal); }
.o2-realist-cards-two article:nth-child(4) .o2-card-tag { color: var(--amber); }
.o2-card-tag { font-size: var(--fs-eyebrow-sm); font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--purple); }
.o2-realist-cards article:nth-child(1) .o2-card-tag { color: var(--teal); }
.o2-realist-cards article:nth-child(3) .o2-card-tag { color: var(--amber); }

/* ---------- Toolkit tiles ---------- */
.o2-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
/* Let the final pair fill the row when the desktop grid has eight tiles. */
@media (min-width: 861px) {
  .o2-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .o2-tiles > .o2-tile { grid-column: span 2; }
  .o2-tiles > .o2-tile:nth-child(3n + 1):nth-last-child(2),
  .o2-tiles > .o2-tile:nth-child(3n + 1):nth-last-child(2) + .o2-tile { grid-column: span 3; }
}
.o2-tile { padding: var(--sp-5); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--dur) ease, transform var(--dur) var(--ease-out); }
.o2-tile:hover { border-color: var(--line-hover); transform: translateY(-3px); }
.o2-tile h3 { font-size: var(--fs-h3); margin: var(--sp-4) 0 var(--sp-2); }
.o2-tile p { font-size: var(--fs-body-sm); color: var(--muted); margin: 0; }
.o2-features-link { margin: var(--sp-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.o2-features-link p { margin: 0; max-width: 46ch; color: var(--muted); font-size: var(--fs-body-sm); }
.o2-tile-art { position: relative; height: 120px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.o2-tile-art * { animation-play-state: paused !important; }
.o2-tile.is-live .o2-tile-art * { animation-play-state: running !important; }
.o2-section.is-paused .o2-tile-art * { animation-play-state: paused !important; }

.o2-art-wave { grid-template-columns: 1fr 1fr; gap: 14px; padding: 0 18px; }
.o2-bars { display: flex; align-items: center; gap: 3px; height: 60px; }
.o2-bars i { width: 4px; height: 100%; border-radius: 2px; background: var(--teal); animation: o2-wave 1.1s ease-in-out infinite alternate; }
.o2-bars i:nth-child(odd) { animation-duration: 0.8s; }
.o2-bars i:nth-child(3n) { animation-duration: 1.4s; background: var(--purple); }
.o2-bars i:nth-child(4n) { animation-delay: -0.5s; }
@keyframes o2-wave { from { transform: scaleY(0.15); } to { transform: scaleY(1); } }
.o2-lines { display: grid; gap: 9px; }
.o2-lines i { height: 7px; border-radius: 4px; background: var(--line-strong); transform-origin: left; animation: o2-type 3.6s var(--ease-out) infinite; }
.o2-lines i:nth-child(2) { width: 80%; animation-delay: 0.4s; }
.o2-lines i:nth-child(3) { width: 60%; animation-delay: 0.8s; }
@keyframes o2-type { 0% { transform: scaleX(0); } 40%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }

.o2-grid { display: grid; grid-template-columns: repeat(4, 30px); gap: 5px; }
.o2-grid i { height: 18px; border-radius: 3px; background: var(--teal); opacity: 0.1; animation: o2-heat 4s ease-in-out infinite; }
.o2-grid i:nth-child(3n) { animation-delay: 0.6s; }
.o2-grid i:nth-child(4n+1) { animation-delay: 1.2s; background: var(--amber); }
.o2-grid i:nth-child(5n) { animation-delay: 1.8s; }
.o2-grid i:nth-child(7n) { animation-delay: 2.4s; background: var(--purple); }
@keyframes o2-heat { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.85; } }

.o2-art-net svg, .o2-art-sat svg { width: 100%; height: 100%; }
.o2-art-net .edges path { stroke: var(--line-strong); stroke-width: 2; }
.o2-art-net circle { fill: var(--teal); transform-box: fill-box; transform-origin: center; animation: o2-node 2.4s ease-in-out infinite; }
.o2-art-net .n2 { fill: var(--purple); animation-delay: 0.6s; }
.o2-art-net .n3 { fill: var(--amber); animation-delay: 1.2s; }
.o2-art-net .n4 { animation-delay: 1.8s; }
@keyframes o2-node { 0%, 100% { transform: scale(0.85); } 50% { transform: scale(1.15); } }

.o2-art-sat .axis { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.o2-art-sat .curve { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; animation: o2-sat 4s var(--ease-out) infinite; }
@keyframes o2-sat { 0% { stroke-dashoffset: 1; } 55%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }

.o2-art-import { place-items: center; }
.o2-target { width: 92px; height: 62px; border: 2px solid var(--text); border-radius: 6px; opacity: 0.75; }
.o2-file { position: absolute; left: 14%; top: 34%; padding: 4px 8px; font: 600 12px var(--font); color: var(--on-light); background: var(--amber); border-radius: 4px; animation: o2-slide 3.6s var(--ease-out) infinite; }
.o2-file.two { background: var(--teal); animation-delay: 1.8s; }
@keyframes o2-slide { 0% { transform: translateX(-40px); opacity: 0; } 20% { opacity: 1; } 55%, 75% { transform: translateX(90px); opacity: 1; } 100% { transform: translateX(90px) scale(0.6); opacity: 0; } }

.o2-art-report { place-items: center; }
.o2-art-report .o2-sheet { position: absolute; width: 58px; height: 76px; background: var(--card); border: 1.5px solid var(--text); border-radius: 3px; background-image: repeating-linear-gradient(transparent 0 10px, var(--line-strong) 10px 12px); background-size: 70% 100%; background-position: 50% 12px; background-repeat: no-repeat; animation: o2-stack 4.2s var(--ease-out) infinite; }
.o2-art-report .o2-sheet:nth-child(2) { animation-delay: 0.5s; }
.o2-art-report .o2-sheet:nth-child(3) { animation-delay: 1s; }
@keyframes o2-stack { 0% { transform: translateY(50px) rotate(0deg); opacity: 0; } 25% { opacity: 1; } 45%, 85% { transform: translateY(0) rotate(var(--r, -4deg)); opacity: 1; } 100% { opacity: 0; } }
.o2-art-report .o2-sheet:nth-child(2) { --r: 3deg; }
.o2-art-report .o2-sheet:nth-child(3) { --r: -1deg; }

.o2-promise { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-top: var(--sp-4); padding: var(--sp-6); border-radius: var(--r-md); background: var(--text); color: var(--on-light); }
.o2-promise p { margin: var(--sp-1) 0 0; font-size: var(--fs-body-sm); opacity: 0.85; }
.o2-promise-kicker { font-family: var(--display); font-size: 24px; font-style: italic; }

/* ---------- Gallery ---------- */
.o2-gallery-section { padding-bottom: var(--sp-12); }
.o2-gallery-nav { display: flex; gap: var(--sp-2); }
.o2-gallery-nav .icon-btn { font-size: 18px; }
.o2-gallery {
  display: flex; gap: var(--sp-6); list-style: none; margin: 0; padding: var(--sp-2) max(var(--sp-6), calc((100vw - var(--maxw)) / 2 + var(--sp-6))) var(--sp-6);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--sp-6), calc((100vw - var(--maxw)) / 2 + var(--sp-6))); scrollbar-width: thin;
}
.o2-gallery li { flex: 0 0 min(720px, 82vw); scroll-snap-align: start; }
.o2-gallery figure { margin: 0; }
.o2-gallery a { display: block; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-card); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) ease; }
.o2-gallery a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.o2-gallery img { display: block; width: 100%; height: auto; }
.o2-gallery figcaption { margin-top: var(--sp-3); font-size: var(--fs-body-sm); color: var(--muted); }
.o2-gallery figcaption b { color: var(--text); margin-right: var(--sp-2); }
.o2-gallery-note { font-size: var(--fs-caption); color: var(--faint); }

/* ---------- Frequently asked questions ---------- */
.o2-faq-list { border-top: 1px solid var(--line); }
.o2-faq-list details { border-bottom: 1px solid var(--line); }
.o2-faq-list summary { padding: var(--sp-5) var(--sp-2); color: var(--text); font-size: var(--fs-h3); font-weight: var(--fw-semibold); cursor: pointer; overflow-wrap: anywhere; }
.o2-faq-list summary::marker { color: var(--teal); }
.o2-faq-list summary:hover { color: var(--teal); }
.o2-faq-list summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: var(--r-sm); }
.o2-faq-list details[open] { background: var(--card); }
.o2-faq-list p { max-width: 75ch; margin: 0; padding: 0 var(--sp-5) var(--sp-5); color: var(--muted); }
.o2-faq-contact { margin: var(--sp-6) 0 0; color: var(--muted); }
.o2-faq-contact a { color: var(--text); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; }

/* ---------- Maker + CTA ---------- */
.o2-end { border-top: 1px solid var(--line); }
.o2-end-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-12); align-items: center; }
.o2-maker p { color: var(--muted); }
.o2-maker a { color: var(--text); text-decoration: underline; text-decoration-color: var(--teal); text-underline-offset: 3px; }
.o2-facts { display: flex; flex-wrap: wrap; gap: var(--sp-2); padding: 0; margin: var(--sp-5) 0 0; list-style: none; }
.o2-facts li { padding: 5px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.o2-cta { padding: var(--sp-10); border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); position: relative; overflow: hidden; }
.o2-cta::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--teal-rgb) / 0.18), transparent 70%); }
.o2-cta-kicker { font-size: var(--fs-eyebrow-sm); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal); margin: 0 0 var(--sp-3); }
.o2-cta-big { font-family: var(--display); font-size: clamp(48px, 7vw, 88px); line-height: 0.95; letter-spacing: -0.04em; margin: 0 0 var(--sp-5); color: var(--text); }
.o2-cta-big em { color: var(--teal); }
.o2-cta p { color: var(--muted); max-width: 34em; }
.o2-cta .btn { margin-top: var(--sp-3); }

/* Without JavaScript the theory window shows only its heading; a screenshot follows it. */
html:not(.js) .o2-theory .o2-panel { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .o2-coder-grid { grid-template-columns: minmax(0, 1fr) 230px; }
  .o2-sidebar { display: none; }
  .o2-diagram { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .o2-hero-grid, .o2-end-grid { grid-template-columns: 1fr; }
  .o2-release li { padding: var(--sp-3) var(--sp-4); }
  .o2-tiles, .o2-realist-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o2-realist-cards:not(.o2-realist-cards-two) article:last-child { grid-column: 1 / -1; }
  .o2-evidence, .o2-ver-view { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .o2-section { padding: var(--sp-14) 0; }
  /* minmax(0, 1fr): a bare 1fr lets the code tree's minimum width stretch the column past the window */
  .o2-coder-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .o2-codes { border-top: 1px solid var(--o2-border); }
  .o2-codes-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 0 8px; }
  .o2-doc { border-right: 0; }
  .o2-toolbar .o2-tb:nth-child(-n+3) { display: none; }
  .o2-transcript { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
  .o2-codable { line-height: 1.85; }
  .o2-board { grid-template-columns: repeat(6, minmax(min(190px, 70%), 1fr)); scroll-snap-type: x proximity; }
  .o2-col { scroll-snap-align: start; }
  .o2-qp { width: min(272px, calc(100% - 24px)); }
  .o2-diagram { grid-template-columns: 1fr; padding: var(--sp-4); gap: var(--sp-8); }
  .o2-link { top: 100%; left: 50%; width: 2px; height: var(--sp-8); transform-origin: top; }
  .o2-link.is-dashed { background: repeating-linear-gradient(180deg, var(--o2-muted) 0 6px, transparent 6px 11px); }
  .o2-link::after { right: auto; top: auto; bottom: -1px; left: -4px; border: 5px solid transparent; border-top: 7px solid var(--o2-border-strong); border-bottom: 0; }
  .o2-link.is-dashed::after { border-top-color: var(--o2-muted); border-left-color: transparent; }
  .o2-theory-body { padding: var(--sp-4); }
  .o2-tabs { display: flex; width: 100%; }
  .o2-tabs [role="tab"] { flex: 1 1 0; padding: 0 4px; }
  .o2-tiles, .o2-realist-cards, .o2-realist-cards-two, .o2-promise { grid-template-columns: 1fr; }
  .o2-cta { padding: var(--sp-6); }
  .o2-ticker li { font-size: 18px; }
}
@keyframes o2-line-v { from { transform: scaleY(0); } }
@media (max-width: 680px) { .o2-link.is-enter { animation-name: o2-line-v; } }

/* Phones: the three release facts become a tidy key/value list, and the hero buttons share a full-width row each */
@media (max-width: 560px) {
  .o2-release { grid-template-columns: 1fr; margin: var(--sp-8) 0; }
  .o2-release li { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) 0; border-left: 0; }
  .o2-release li + li { border-top: 1px solid var(--line); }
  .o2-release-v { font-size: 22px; }
}
@media (max-width: 480px) {
  .o2-hero .hero-actions .btn { flex: 1 1 100%; justify-content: center; }
  /* give the transcript more reading width: smaller avatars and a narrower stripe gutter */
  .o2-turn { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding-right: 16px; }
  .o2-av { width: 24px; height: 24px; font-size: 12px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .o2-page *:not(.o2-stage *), .o2-page *::before, .o2-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  /* as in the app: the film's scenes jump straight to their finished picture */
  .o2-stage .mini * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .o2-ticker-track { width: auto; flex-wrap: wrap; justify-content: center; }
  .o2-ticker ul[aria-hidden="true"] { display: none; }
  .o2-ticker ul { flex-wrap: wrap; justify-content: center; row-gap: var(--sp-2); }
  .o2-art-sat .curve { stroke-dasharray: none; }
  .o2-lines i, .o2-grid i { opacity: 0.6; }
}

@media print {
  .o2-ticker, .o2-coder-bar, .o2-tally, .o2-pause, .o2-gallery-nav, .o2-film-controls { display: none !important; }
}

/* Introduction artwork from Oriel 0.8 Beta, ui/src/intro/scenes.css. */
/* The introduction film's artwork: a miniature Oriel drawn at stage size.
   - Every length is in cqw, so the picture scales with the stage (100cqw wide, 62.5cqw tall).
   - Each scene is one keyframe animation per moving part, as long as the scene (--d), timed by percentage
     and never by delay. Reduce motion collapses durations, so every scene must end on a complete picture.
   - Colours come from the theme tokens in styles.css. */

.mini { position:absolute; inset:0; overflow:hidden; container-type:inline-size; user-select:none; pointer-events:none; color:var(--text); font-family:var(--font); }
.mini > * { font-size:1.15cqw; line-height:1.3; }
.mini p { margin:0; }
.mini i { display:block; font-style:normal; }
.mini img { display:block; }
.mini small { font-size:inherit; }
.mini * { animation-duration:var(--d); animation-fill-mode:both; animation-timing-function:cubic-bezier(.3,.7,.3,1); }
/* With reduce motion the timeline never runs, so the stage always reads as paused; the stills must still reach their end state. */
@media (prefers-reduced-motion: no-preference) { .o2-stage[data-paused] .mini * { animation-play-state:paused; } }

/* ---- shared pieces ---- */
.mini-btn { display:inline-block; height:2.4cqw; line-height:2.25cqw; padding:0 .9cqw; box-sizing:border-box; border-radius:.5cqw; border:.08cqw solid var(--border-strong); background:var(--bg); font-size:.95cqw; font-weight:500; white-space:nowrap; text-align:center; }
.mini-btn-primary { border-color:transparent; background:var(--accent-solid); color:var(--on-solid); }
.mini-muted { color:var(--muted); font-size:.9cqw; }
.mini-field-label { color:var(--muted); font-size:.85cqw; }
.mini-actions { display:flex; justify-content:flex-end; gap:.6cqw; }
.mini-check, .mini-radio { display:flex; align-items:center; gap:.6cqw; font-size:.95cqw; }
.mini-check::before, .mini-radio::before { content:""; flex:none; width:.95cqw; height:.95cqw; box-sizing:border-box; border:.1cqw solid var(--border-strong); border-radius:.2cqw; background:var(--bg); }
.mini-radio::before { border-radius:50%; }
.mini-check.mini-checked::before { border-color:transparent; background:var(--accent-solid); }
.mini-radio.mini-checked::before { border:.3cqw solid var(--accent-solid); }
.mini-chip { align-self:flex-start; padding:.1cqw .6cqw; border-radius:.4cqw; background:var(--row); font-size:.85cqw; }
.mini-bar { height:.75cqw; border-radius:.4cqw; background:var(--row); }

/* ---- backdrop and title cards ---- */
.mini-haze { position:absolute; inset:0; opacity:.5; transition:opacity .9s;
  background:
    radial-gradient(60% 45% at 50% 108%, color-mix(in srgb, var(--accent) 34%, var(--bg)) 0%, transparent 100%),
    linear-gradient(to top, color-mix(in srgb, var(--accent) 22%, var(--bg-soft)) 0%, var(--bg-soft) 62%); }
.mini[data-scene="title"] .mini-haze, .mini[data-scene="end"] .mini-haze { opacity:1; }

.mini-lockup { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2cqw; opacity:0; scale:1.08; filter:blur(.8cqw); transition:opacity .6s, scale .8s, filter .6s; }
.mini-lockup img { width:9cqw; height:9cqw; border-radius:2cqw; box-shadow:var(--shadow); }
.mini-lockup b { font-size:5cqw; font-weight:700; line-height:1.1; }
.mini-lockup span { font-size:1.6cqw; color:var(--muted); }
.mini[data-scene="title"] .mini-title { animation-name:mini-title; opacity:1; scale:1; filter:none; }
.mini[data-scene="end"] .mini-end { animation-name:mini-end; opacity:1; scale:1; filter:none; }
.mini-end { padding-bottom:4cqw; }
@keyframes mini-title {
  0% { opacity:0; translate:0 9cqw; filter:blur(1.2cqw); }
  40% { opacity:1; translate:0 0; filter:blur(0); }
  100% { opacity:1; translate:0 -.8cqw; filter:blur(0); }
}
@keyframes mini-end {
  0%, 30% { opacity:0; translate:0 3cqw; filter:blur(1cqw); }
  80%, 100% { opacity:1; translate:0 0; filter:blur(0); }
}

/* ---- camera ---- */
.mini-camera { position:absolute; inset:0; transform-origin:0 0; }
.mini[data-scene="title"] .mini-camera { animation-name:mini-cam-title; }
.mini[data-scene="window"] .mini-camera { animation-name:mini-cam-window; }
.mini[data-scene="project"] .mini-camera { animation-name:mini-cam-project; }
.mini[data-scene="import"] .mini-camera { animation-name:mini-cam-import; }
.mini[data-scene="code"] .mini-camera { animation-name:mini-cam-code; }
.mini[data-scene="ai"] .mini-camera { animation-name:mini-cam-ai; }
.mini[data-scene="explore"] .mini-camera { animation-name:mini-cam-explore; }
.mini[data-scene="realist"] .mini-camera { animation-name:mini-cam-realist; }
.mini[data-scene="guide"] .mini-camera { animation-name:mini-cam-guide; }
.mini[data-scene="end"] .mini-camera { animation-name:mini-cam-end; }
.mini-camera { animation-timing-function:cubic-bezier(.45,0,.2,1); }
@keyframes mini-cam-title { 0%, 100% { transform:none; } }
@keyframes mini-cam-window {
  0% { transform:none; filter:blur(.7cqw); }
  6% { filter:blur(0); }
  10% { transform:none; }
  20%, 36% { transform:translate(-5.6cqw, -6cqw) scale(1.45); }
  46%, 62% { transform:translate(-21cqw, -10cqw) scale(1.45); }
  72%, 88% { transform:translate(-39.4cqw, -7cqw) scale(1.45); }
  100% { transform:none; filter:blur(0); }
}
@keyframes mini-cam-project {
  0% { transform:none; filter:blur(.7cqw); }
  8% { filter:blur(0); }
  30%, 100% { transform:translate(-6cqw, -3.84cqw) scale(1.12); filter:blur(0); }
}
@keyframes mini-cam-import {
  0% { transform:translate(-6cqw, -3.84cqw) scale(1.12); filter:blur(.7cqw); }
  7% { filter:blur(0); }
  14%, 56% { transform:translate(-9cqw, -4cqw) scale(1.5); }
  70%, 100% { transform:translate(-6cqw, -4cqw) scale(1.12); filter:blur(0); }
}
@keyframes mini-cam-code {
  0% { transform:translate(-6cqw, -4cqw) scale(1.12); filter:blur(.7cqw); }
  5% { filter:blur(0); }
  9%, 100% { transform:translate(-23.6cqw, -11cqw) scale(1.3); filter:blur(0); }
}
@keyframes mini-cam-ai {
  0% { transform:translate(-23.6cqw, -11cqw) scale(1.3); filter:blur(.7cqw); }
  5% { filter:blur(0); }
  10%, 100% { transform:translate(-31cqw, -11cqw) scale(1.3); filter:blur(0); }
}
@keyframes mini-cam-explore {
  0% { transform:translate(-31cqw, -11cqw) scale(1.3); filter:blur(.7cqw); }
  6% { filter:blur(0); }
  14%, 100% { transform:translate(-6cqw, -8cqw) scale(1.4); filter:blur(0); }
}
@keyframes mini-cam-realist {
  0% { transform:translate(-6cqw, -8cqw) scale(1.4); filter:blur(.7cqw); }
  6% { filter:blur(0); }
  12%, 22% { transform:translate(-4cqw, -10cqw) scale(1.4); }
  32%, 100% { transform:translate(-22cqw, -9cqw) scale(1.3); filter:blur(0); }
}
@keyframes mini-cam-guide {
  0% { transform:translate(-22cqw, -9cqw) scale(1.3); filter:blur(.7cqw); }
  7% { filter:blur(0); }
  13%, 56% { transform:translate(0, 0) scale(1.25); }
  70%, 100% { transform:translate(-25cqw, 0) scale(1.25); filter:blur(0); }
}
@keyframes mini-cam-end {
  0% { transform:translate(-25cqw, 0) scale(1.25); }
  60%, 100% { transform:translate(5cqw, 3.1cqw) scale(.9); }
}

/* ---- menu bar and menus ---- */
.mini-menubar { position:absolute; left:0; top:0; width:100cqw; height:2.4cqw; display:flex; align-items:center; padding-left:1.5cqw; box-sizing:border-box; background:color-mix(in srgb, var(--bg) 70%, transparent); border-bottom:.08cqw solid var(--border); transition:opacity .6s; }
.mini-menubar > * { width:5cqw; text-align:center; line-height:1.9cqw; border-radius:.4cqw; }
.mini[data-scene="title"] .mini-menubar, .mini[data-scene="end"] .mini-menubar { opacity:0; }
.mini-menu { position:absolute; width:17cqw; padding:.4cqw; box-sizing:border-box; background:var(--bg); border:.08cqw solid var(--border); border-radius:.7cqw; box-shadow:var(--shadow); opacity:0; z-index:2; }
.mini-menu > span { display:block; height:2.6cqw; line-height:2.6cqw; padding:0 .9cqw; border-radius:.45cqw; white-space:nowrap; }
.mini-help-menu { left:21.5cqw; top:2.4cqw; }
.mini-more-menu { left:66.5cqw; top:3.5cqw; }
.mini[data-scene="guide"] .mini-help { animation-name:mini-help; }
.mini[data-scene="guide"] .mini-help-menu { animation-name:mini-help-menu; }
.mini[data-scene="guide"] .mini-help-menu .mini-menu-pick { animation-name:mini-help-pick; }
.mini[data-scene="guide"] .mini-more { animation-name:mini-more; }
.mini[data-scene="guide"] .mini-more-menu { animation-name:mini-more-menu; }
.mini[data-scene="guide"] .mini-more-menu .mini-menu-pick { animation-name:mini-more-pick; }
@keyframes mini-help { 0%, 19% { background:transparent; } 21%, 100% { background:var(--row-active); } }
@keyframes mini-help-menu { 0%, 20% { opacity:0; translate:0 -.6cqw; } 24%, 100% { opacity:1; translate:0 0; } }
@keyframes mini-help-pick { 0%, 33% { background:transparent; color:inherit; } 37%, 100% { background:var(--accent-solid); color:var(--on-solid); } }
@keyframes mini-more { 0%, 78% { background:transparent; } 80%, 100% { background:var(--row-active); } }
@keyframes mini-more-menu { 0%, 79% { opacity:0; translate:0 -.6cqw; } 83%, 100% { opacity:1; translate:0 0; } }
@keyframes mini-more-pick { 0%, 91% { background:transparent; color:inherit; } 94%, 100% { background:var(--accent-solid); color:var(--on-solid); } }

/* ---- the Welcome window, shown only while starting a project ---- */
.mini-welcome { position:absolute; left:18cqw; top:9cqw; width:64cqw; height:46cqw; display:flex; border-radius:1.3cqw; background:var(--bg); border:.08cqw solid var(--border); box-shadow:var(--shadow); overflow:hidden; opacity:0; scale:.96; transition:opacity .7s, scale .9s cubic-bezier(.16,1,.3,1); }
.mini[data-scene="project"] .mini-welcome { opacity:1; scale:1; }
.mini-welcome-side { flex:none; width:22cqw; display:flex; flex-direction:column; gap:.5cqw; padding:2.4cqw 1.6cqw 1.4cqw; box-sizing:border-box; background:var(--bg-soft); border-right:.08cqw solid var(--border); }
.mini-welcome-brand { display:flex; align-items:center; gap:.9cqw; }
.mini-welcome-brand img { width:2.8cqw; height:2.8cqw; border-radius:.6cqw; }
.mini-welcome-brand b { font-size:2.4cqw; }
.mini-welcome-tagline { color:var(--muted); font-size:.95cqw; margin:.3cqw 0 .8cqw; }
.mini-welcome-side > .mini-btn { width:100%; }
.mini-welcome-label { margin-top:1.4cqw; color:var(--muted); font-size:.85cqw; }
.mini-welcome-row { font-size:.95cqw; line-height:2.1cqw; padding-left:.4cqw; }
.mini-welcome-foot { margin-top:auto; padding-top:.8cqw; border-top:.08cqw solid var(--border); display:flex; flex-direction:column; }
.mini-welcome-main { flex:1; display:flex; flex-direction:column; gap:.8cqw; padding:2.6cqw 2cqw; }
.mini-welcome-main > b { font-size:1.3cqw; }
.mini-ai-card { margin-top:1.2cqw; display:flex; flex-direction:column; gap:.8cqw; padding:1.4cqw; border:.08cqw solid var(--border); border-radius:.7cqw; background:var(--bg-soft); }
.mini-ai-card .mini-bar { background:var(--border); }
.mini-bar-short { width:70%; }
.mini-ai-card .mini-actions { margin-top:.6cqw; }
.mini[data-scene="project"] .mini-new { animation-name:mini-press-34; }
@keyframes mini-press-34 {
  0%, 32% { scale:1; box-shadow:0 0 0 0 transparent; }
  35% { scale:.95; box-shadow:0 0 0 .2cqw color-mix(in srgb, var(--accent) 45%, transparent); }
  39%, 100% { scale:1; box-shadow:0 0 0 0 transparent; }
}
.mini-scrim { position:absolute; inset:0; background:color-mix(in srgb, var(--text) 28%, transparent); opacity:0; }
.mini-dialog { position:absolute; left:16cqw; top:6.5cqw; width:32cqw; display:flex; flex-direction:column; gap:.8cqw; padding:1.6cqw 1.8cqw; box-sizing:border-box; background:var(--bg); border:.08cqw solid var(--border); border-radius:.9cqw; box-shadow:var(--shadow); opacity:0; }
.mini-dialog > b { font-size:1.3cqw; margin-bottom:.3cqw; }
.mini-dialog .mini-field-label { margin-top:.4cqw; }
.mini-dialog .mini-actions { margin-top:1cqw; }
.mini[data-scene="project"] .mini-scrim { animation-name:mini-dialog-scrim; }
.mini[data-scene="project"] .mini-new-project { animation-name:mini-dialog; }
.mini[data-scene="project"] .mini-choose { animation-name:mini-press-88; }
@keyframes mini-dialog-scrim { 0%, 38% { opacity:0; } 42%, 100% { opacity:1; } }
@keyframes mini-dialog { 0%, 39% { opacity:0; scale:.96; } 43%, 100% { opacity:1; scale:1; } }
@keyframes mini-press-88 {
  0%, 86% { scale:1; box-shadow:0 0 0 0 transparent; }
  89% { scale:.95; box-shadow:0 0 0 .2cqw color-mix(in srgb, var(--accent) 45%, transparent); }
  93%, 100% { scale:1; box-shadow:0 0 0 0 transparent; }
}

/* ---- window ---- */
.mini-window { position:absolute; left:8cqw; top:5.5cqw; width:84cqw; height:52cqw; border-radius:1.3cqw; background:var(--bg); border:.08cqw solid var(--border); box-shadow:var(--shadow); overflow:hidden; transition:opacity .8s, translate 1s cubic-bezier(.16,1,.3,1), scale 1s cubic-bezier(.16,1,.3,1), filter .8s; }
.mini[data-scene="title"] .mini-window { opacity:0; translate:0 7cqw; scale:.96; }
/* While the Welcome window shows, the working window is folded away: it grows back as the project opens. */
.mini[data-scene="project"] .mini-window { opacity:0; scale:.78; }
.mini[data-scene="end"] .mini-window { opacity:.35; filter:blur(.5cqw); }
.mini-window > *, .mini-shell > * { position:absolute; }
.mini-shell { inset:0; }

/* sidebar */
.mini-sidebar { left:0; top:0; width:18cqw; height:52cqw; background:var(--sidebar); color:var(--sidebar-text); border-right:.08cqw solid var(--sidebar-line); }
.mini-sidebar > * { position:absolute; left:1.2cqw; width:15.6cqw; box-sizing:border-box; }
.mini-project { top:1.6cqw; font-size:1.3cqw; color:var(--sidebar-active); }
.mini-project::after { content:" ▾"; font-size:.8cqw; color:var(--sidebar-text); }
.mini-nav { height:2.2cqw; line-height:2.2cqw; font-size:1.05cqw; padding-left:1.1cqw; transition:translate .7s cubic-bezier(.16,1,.3,1), opacity .5s; }
.mini-nav::before { content:"⌄"; position:absolute; left:.1cqw; top:-.25cqw; font-size:.8cqw; opacity:.7; }
.mini-nav-item { height:2cqw; line-height:2cqw; padding:0 .4cqw; border-radius:.45cqw; font-size:.95cqw; transition:opacity .5s; }
.mini-nav-sources { top:5cqw; }
.mini-nav-coding { top:10.2cqw; } .mini-nav-codes { top:12.5cqw; } .mini-nav-excerpts { top:14.5cqw; }
.mini-nav-cases { top:17.2cqw; } .mini-nav-sets { top:19.8cqw; } .mini-nav-notes { top:22.4cqw; }
.mini-nav-queries { top:25cqw; } .mini-nav-theory { top:27.6cqw; } .mini-theory-row { top:29.9cqw; } .mini-nav-outputs { top:27.6cqw; }
.mini-nav-theory, .mini-theory-row { opacity:0; }
.mini-plus { position:absolute; right:0; top:.2cqw; width:1.8cqw; height:1.8cqw; line-height:1.7cqw; text-align:center; border-radius:.4cqw; font-size:1.4cqw; font-weight:400; }
.mini-sidebar > .mini-plus-ring { left:14.5cqw; top:4.7cqw; width:2.8cqw; height:2.8cqw; border-radius:50%; border:.22cqw solid var(--accent); opacity:0; }
.mini-import-btn, .mini-source-row { top:7.4cqw; height:2.2cqw; line-height:2.2cqw; padding:0 .7cqw; border-radius:.5cqw; white-space:nowrap; font-size:.95cqw; }
.mini-import-btn { opacity:0; border:.08cqw dashed var(--sidebar-tag-line); line-height:2.05cqw; }
.mini-source-row { background:var(--sidebar-hover); color:var(--sidebar-active); font-weight:600; }
.mini-user { top:48.2cqw; display:flex; align-items:center; gap:.7cqw; }
.mini-user i { width:2.2cqw; height:2.2cqw; border-radius:50%; background:var(--sidebar-avatar); }
.mini-user span { width:6cqw; height:.7cqw; border-radius:.4cqw; background:var(--sidebar-line); }

/* header and tabs */
.mini-header { left:18cqw; top:0; width:66cqw; height:3.2cqw; }
.mini-header > * { position:absolute; }
.mini-toggle { left:1.4cqw; top:.55cqw; width:2.1cqw; height:2.1cqw; box-sizing:border-box; border:.08cqw solid var(--border-strong); border-radius:.45cqw; }
.mini-header-title { left:4.4cqw; top:0; line-height:3.2cqw; font-size:1.4cqw; transition:opacity .5s; }
.mini-collab { left:52.4cqw; top:.4cqw; }
.mini-more { left:62.4cqw; top:.5cqw; width:2.4cqw; height:2.2cqw; line-height:2.1cqw; text-align:center; border-radius:.45cqw; font-size:.8cqw; letter-spacing:.08cqw; border:.08cqw solid var(--border-strong); box-sizing:border-box; }
.mini-tabs { left:18cqw; top:3.2cqw; width:66cqw; height:2cqw; background:var(--bg-soft); border-top:.08cqw solid var(--border); border-bottom:.08cqw solid var(--border); box-sizing:border-box; }
.mini-tab { position:absolute; left:1.2cqw; bottom:-.08cqw; height:1.95cqw; line-height:1.9cqw; padding:0 .9cqw; font-size:.85cqw; border-bottom:.15cqw solid var(--accent); background:var(--bg); transition:opacity .5s; }
.mini-tab::after { content:" ×"; color:var(--muted); }
.mini-tab-theory { opacity:0; }

/* document */
.mini-doc { left:18cqw; top:5.2cqw; width:46cqw; height:46.8cqw; }
.mini-doc > *, .mini-doc-text > * { position:absolute; }
.mini-doc-empty { left:0; top:18cqw; width:46cqw; text-align:center; color:var(--muted); opacity:0; }
.mini-doc-text { left:0; top:4.4cqw; width:46cqw; height:42.4cqw; }
.mini-toolbar { left:1.6cqw; top:-3.9cqw; width:43cqw; display:flex; align-items:center; gap:1cqw; }
.mini-toolbar-hint { flex:1; color:var(--muted); font-size:.9cqw; white-space:nowrap; }
.mini-doc-title { left:4cqw; top:1.8cqw; font-size:1.9cqw; }
.mini-line { left:4cqw; height:2.3cqw; line-height:2.3cqw; white-space:nowrap; }
.mini-l1 { top:5.8cqw; } .mini-l2 { top:8.1cqw; } .mini-l3 { top:10.4cqw; }
.mini-l4 { top:14.3cqw; } .mini-l5 { top:16.6cqw; } .mini-l6 { top:18.9cqw; }
/* The two lines that get selected have a fixed width, so the cursor's drag can end exactly on their last letter. */
.mini-pick-1, .mini-pick-2 { text-align:justify; text-align-last:justify; }
.mini-pick-1 { width:28.2cqw; } .mini-pick-2 { width:24.8cqw; }
.mini-pick > span { position:relative; }
.mini-sel, .mini-hl, .mini-suggest { position:absolute; inset:.15cqw -.2cqw; border-radius:.25cqw; transform-origin:0 50%; }
.mini-sel { background:color-mix(in srgb, var(--accent) 30%, transparent); opacity:0; }
.mini-hl { background:color-mix(in srgb, var(--hl-blue) var(--hl-strength), transparent); }
.mini-suggest { border:.12cqw dashed var(--accent); opacity:0; }
.mini-doc-text > .mini-bar { left:4cqw; }
.mini-bar-1 { top:23.6cqw; width:34cqw; } .mini-bar-2 { top:25.9cqw; width:30cqw; } .mini-bar-3 { top:28.2cqw; width:22cqw; }
.mini-bar-4 { top:32.4cqw; width:33cqw; } .mini-bar-5 { top:34.7cqw; width:26cqw; }
.mini-stripe { left:43.6cqw; width:.45cqw; height:2.1cqw; border-radius:.3cqw; background:var(--hl-blue); }
.mini-stripe-1 { top:8.2cqw; } .mini-stripe-3 { top:10.5cqw; } .mini-stripe-2 { top:16.7cqw; }

/* quick code picker */
.mini-picker { left:14cqw; top:11cqw; width:17cqw; padding:.5cqw; box-sizing:border-box; background:var(--bg); border:.08cqw solid var(--border-strong); border-radius:.7cqw; box-shadow:var(--shadow); opacity:0; transform-origin:20% 0; z-index:1; }
.mini-picker-search { position:relative; height:2.3cqw; display:flex; align-items:center; justify-content:center; border:.08cqw solid var(--border-strong); border-radius:.45cqw; white-space:nowrap; }
.mini-placeholder { position:absolute; left:0; right:0; text-align:center; color:var(--muted); }
.mini-typed { display:inline-block; overflow:hidden; max-width:8cqw; }
.mini-caret { width:.1cqw; height:1.4cqw; background:var(--text); margin-left:.1cqw; }
.mini-picker-list { position:relative; height:2.4cqw; margin:.4cqw 0; }
.mini-picker-list > * { position:absolute; left:0; right:0; top:0; height:2.4cqw; line-height:2.4cqw; padding:0 .7cqw; border-radius:.45cqw; }
.mini-picker-empty { color:var(--muted); }
.mini-picker-create { opacity:0; }
.mini-enter { left:auto; right:.4cqw; top:.45cqw; height:auto; line-height:1.3; font:inherit; font-size:.85cqw; padding:.1cqw .5cqw; border-radius:.35cqw; border:.08cqw solid var(--border-strong); background:var(--bg-soft); color:var(--muted); opacity:0; }
.mini-picker-more { display:flex; gap:1cqw; padding:.5cqw .7cqw 0; border-top:.08cqw solid var(--border); color:var(--accent); font-size:.9cqw; }

/* codes panel */
.mini-codes { left:64cqw; top:5.2cqw; width:20cqw; height:46.8cqw; border-left:.08cqw solid var(--border); box-sizing:border-box; background:var(--bg); transition:opacity .5s; }
.mini-codes > * { position:absolute; left:1.5cqw; width:17cqw; box-sizing:border-box; }
.mini-codes-head { top:1.2cqw; display:flex; align-items:center; gap:.35cqw; }
.mini-codes-head b { flex:1; font-size:2.2cqw; }
.mini-codes-head i { width:1.8cqw; height:1.8cqw; box-sizing:border-box; border:.08cqw solid var(--border-strong); border-radius:.4cqw; }
.mini-codes-search { top:4.8cqw; height:2.6cqw; line-height:2.5cqw; padding:0 .8cqw; border:.08cqw solid var(--border-strong); border-radius:.5cqw; color:var(--muted); font-size:.95cqw; }
.mini-codes-hint { top:8.4cqw; color:var(--muted); font-size:.9cqw; opacity:0; }
.mini-code { height:2.6cqw; line-height:2.6cqw; display:flex; align-items:center; gap:.3cqw; padding:0 .8cqw; border-radius:.3cqw; background:var(--row); overflow:hidden; font-size:.95cqw; }
.mini-code > i { position:absolute; right:0; top:0; bottom:0; width:.35cqw; background:var(--hl-blue); }
.mini-code > span { font-weight:600; }
.mini-code > em { position:relative; flex:1; height:2.6cqw; font-style:normal; color:var(--text); }
.mini-code > em > b { position:absolute; left:0; top:0; font-weight:600; }
.mini-code-a { top:8.2cqw; }
.mini-code-b { top:11.2cqw; opacity:0; transition:opacity .5s; } .mini-code-b > i { background:var(--hl-orange); }
.mini-code-c { top:14.2cqw; opacity:0; transition:opacity .5s; } .mini-code-c > i { background:var(--hl-green); }
.mini[data-scene="window"] .mini-code-b, .mini[data-scene="window"] .mini-code-c { opacity:1; }
.mini-count-1, .mini-count-2 { opacity:0; }

/* ---- scene: the window ---- */
.mini-ring { box-sizing:border-box; border:.25cqw solid var(--accent); border-radius:.9cqw; opacity:0; }
.mini-ring-1 { left:.3cqw; top:.3cqw; width:17.4cqw; height:51.4cqw; }
.mini-ring-2 { left:18.3cqw; top:5.5cqw; width:45.4cqw; height:46.2cqw; }
.mini-ring-3 { left:64.3cqw; top:5.5cqw; width:19.4cqw; height:46.2cqw; }
.mini-tag { top:32cqw; height:2.6cqw; line-height:2.6cqw; padding:0 1.1cqw; border-radius:1.3cqw; background:var(--accent-solid); color:var(--on-solid); font-weight:600; box-shadow:var(--shadow-soft); opacity:0; white-space:nowrap; }
.mini-tag-1 { left:4.6cqw; } .mini-tag-2 { left:35.5cqw; } .mini-tag-3 { left:70.6cqw; }
.mini[data-scene="window"] .mini-ring-1 { animation-name:mini-ring-1; }
.mini[data-scene="window"] .mini-ring-2 { animation-name:mini-ring-2; }
.mini[data-scene="window"] .mini-ring-3 { animation-name:mini-ring-3; }
.mini[data-scene="window"] .mini-tag-1 { animation-name:mini-tag-1; }
.mini[data-scene="window"] .mini-tag-2 { animation-name:mini-tag-2; }
.mini[data-scene="window"] .mini-tag-3 { animation-name:mini-tag-3; }
@keyframes mini-ring-1 { 0%, 16% { opacity:0; } 21%, 35% { opacity:1; } 40%, 100% { opacity:0; } }
@keyframes mini-ring-2 { 0%, 42% { opacity:0; } 47%, 61% { opacity:1; } 66%, 100% { opacity:0; } }
@keyframes mini-ring-3 { 0%, 68% { opacity:0; } 73%, 87% { opacity:1; } 92%, 100% { opacity:0; } }
@keyframes mini-tag-1 { 0%, 18% { opacity:0; translate:0 1cqw; } 23%, 100% { opacity:1; translate:0 0; } }
@keyframes mini-tag-2 { 0%, 44% { opacity:0; translate:0 1cqw; } 49%, 100% { opacity:1; translate:0 0; } }
@keyframes mini-tag-3 { 0%, 70% { opacity:0; translate:0 1cqw; } 75%, 100% { opacity:1; translate:0 0; } }

/* ---- scene: import ---- */
.mini-file { position:absolute; left:38cqw; top:24cqw; height:2.8cqw; line-height:2.8cqw; padding:0 1cqw; border-radius:.6cqw; background:var(--bg); border:.08cqw solid var(--border-strong); box-shadow:var(--shadow); font-weight:600; opacity:0; white-space:nowrap; transform-origin:0 0; }
.mini[data-scene="import"] .mini-file { animation-name:mini-file; }
.mini[data-scene="import"] .mini-import-btn { animation-name:mini-import-btn; }
.mini[data-scene="import"] .mini-source-row { animation-name:mini-source-row; }
.mini[data-scene="import"] .mini-header-title, .mini[data-scene="import"] .mini-tabs { animation-name:mini-appear-58; }
.mini[data-scene="import"] .mini-doc-empty { animation-name:mini-doc-empty; }
.mini[data-scene="import"] .mini-doc-text { animation-name:mini-doc-text; }
.mini[data-scene="import"] .mini-codes { animation-name:mini-codes-in; }
.mini[data-scene="import"] .mini-plus-ring { animation-name:mini-plus-ring; }
.mini[data-scene="import"] .mini-hl, .mini[data-scene="import"] .mini-stripe, .mini[data-scene="import"] .mini-code-a { opacity:0; }
.mini[data-scene="import"] .mini-codes-hint { opacity:1; }
@keyframes mini-import-btn {
  0%, 25% { opacity:1; background:transparent; }
  28% { opacity:1; background:var(--sidebar-hover); }
  50% { opacity:1; }
  55%, 100% { opacity:0; }
}
@keyframes mini-file {
  0%, 31% { opacity:0; translate:0 -4cqw; scale:1.1; }
  37%, 42% { opacity:1; translate:0 0; scale:1; }
  52% { opacity:1; translate:-28.5cqw -10.6cqw; scale:.8; }
  56%, 100% { opacity:0; translate:-28.5cqw -10.6cqw; scale:.8; }
}
@keyframes mini-source-row {
  0%, 52% { opacity:0; background:var(--sidebar-hover); }
  57% { opacity:1; background:color-mix(in srgb, var(--accent) 30%, transparent); }
  70%, 100% { opacity:1; background:var(--sidebar-hover); }
}
@keyframes mini-appear-58 { 0%, 58% { opacity:0; } 63%, 100% { opacity:1; } }
@keyframes mini-doc-empty { 0%, 56% { opacity:1; } 60%, 100% { opacity:0; } }
@keyframes mini-doc-text { 0%, 59% { opacity:0; translate:0 1.2cqw; } 68%, 100% { opacity:1; translate:0 0; } }
@keyframes mini-codes-in { 0%, 68% { opacity:0; translate:4cqw 0; } 78%, 100% { opacity:1; translate:0 0; } }
@keyframes mini-plus-ring {
  0%, 84% { opacity:0; scale:.5; }
  89% { opacity:1; scale:1.25; }
  94%, 100% { opacity:1; scale:1; }
}

/* ---- scene: code ---- */
.mini[data-scene="code"] .mini-pick-1 .mini-sel { animation-name:mini-sel-1; }
.mini[data-scene="code"] .mini-pick-2 .mini-sel { animation-name:mini-sel-2; }
.mini[data-scene="code"] .mini-pick-1 .mini-hl, .mini[data-scene="code"] .mini-stripe-1 { animation-name:mini-coded-1; }
.mini[data-scene="code"] .mini-pick-2 .mini-hl, .mini[data-scene="code"] .mini-stripe-2 { animation-name:mini-coded-2; }
.mini[data-scene="code"] .mini-pick-3 .mini-hl, .mini[data-scene="code"] .mini-stripe-3, .mini[data-scene="code"] .mini-count-3 { opacity:0; }
.mini[data-scene="code"] .mini-picker { animation-name:mini-picker; }
.mini[data-scene="code"] .mini-placeholder, .mini[data-scene="code"] .mini-picker-empty { animation-name:mini-placeholder; }
.mini[data-scene="code"] .mini-typed { animation-name:mini-typed; }
.mini[data-scene="code"] .mini-picker-create { animation-name:mini-create; }
.mini[data-scene="code"] .mini-enter { animation-name:mini-enter; }
.mini[data-scene="code"] .mini-codes-hint { animation-name:mini-hint-out; }
.mini[data-scene="code"] .mini-code-a { animation-name:mini-code-a; }
.mini[data-scene="code"] .mini-count-1 { animation-name:mini-count-1; }
.mini[data-scene="code"] .mini-count-2 { animation-name:mini-coded-2; }
@keyframes mini-sel-1 {
  0%, 9% { opacity:1; transform:scaleX(0); animation-timing-function:linear; }
  20%, 45% { opacity:1; transform:scaleX(1); }
  47%, 100% { opacity:0; transform:scaleX(1); }
}
@keyframes mini-sel-2 {
  0%, 63% { opacity:1; transform:scaleX(0); animation-timing-function:linear; }
  74%, 90% { opacity:1; transform:scaleX(1); }
  92%, 100% { opacity:0; transform:scaleX(1); }
}
@keyframes mini-coded-1 { 0%, 45% { opacity:0; } 48%, 100% { opacity:1; } }
@keyframes mini-coded-2 { 0%, 90% { opacity:0; } 93%, 100% { opacity:1; } }
@keyframes mini-picker {
  0%, 21% { opacity:0; scale:.92; }
  24%, 45% { opacity:1; scale:1; }
  47%, 100% { opacity:0; scale:.96; }
}
@keyframes mini-placeholder { 0%, 27% { opacity:1; } 28%, 100% { opacity:0; } }
@keyframes mini-typed { 0%, 27% { max-width:0; animation-timing-function:linear; } 38%, 100% { max-width:8cqw; } }
@keyframes mini-create {
  0%, 29% { opacity:0; background:transparent; color:inherit; }
  32%, 100% { opacity:1; background:var(--accent-solid); color:var(--on-solid); }
}
@keyframes mini-enter {
  0%, 36% { opacity:0; scale:1; }
  39%, 41% { opacity:1; scale:1; }
  43% { opacity:1; scale:.86; }
  45%, 100% { opacity:1; scale:1; }
}
@keyframes mini-hint-out { 0%, 45% { opacity:1; } 47%, 100% { opacity:0; } }
@keyframes mini-code-a {
  0%, 45% { opacity:0; background:var(--row); }
  48% { opacity:1; background:var(--flash); }
  56%, 90% { opacity:1; background:var(--row); }
  93% { opacity:1; background:var(--flash); }
  100% { opacity:1; background:var(--row); }
}
@keyframes mini-count-1 { 0%, 45% { opacity:0; } 48%, 90% { opacity:1; } 92%, 100% { opacity:0; } }

/* ---- scene: AI suggestions ---- */
.mini-ai-menu { left:45.2cqw; top:8.5cqw; width:17.5cqw; }
.mini-ai-panel { left:64cqw; top:5.2cqw; width:20cqw; height:46.8cqw; display:flex; flex-direction:column; gap:.8cqw; padding:1.4cqw 1.3cqw; box-sizing:border-box; border-left:.08cqw solid var(--border); background:var(--bg); opacity:0; transition:opacity .5s; }
.mini-ai-head { display:flex; align-items:center; justify-content:space-between; }
.mini-ai-head b { font-size:1.05cqw; }
.mini-ai-cards { position:relative; }
.mini-ai-sugg { position:absolute; left:0; right:0; display:flex; flex-direction:column; gap:.55cqw; padding:1cqw; box-sizing:border-box; border:.08cqw solid var(--border); border-radius:.6cqw; background:var(--bg); }
.mini-ai-sugg-1 { top:0; } .mini-ai-sugg-2 { top:13.6cqw; }
.mini-quote { font-size:.95cqw; white-space:normal; }
.mini[data-scene="ai"] .mini-ai-btn { animation-name:mini-ai-btn; }
.mini[data-scene="ai"] .mini-ai-menu { animation-name:mini-ai-menu; }
.mini[data-scene="ai"] .mini-ai-menu .mini-menu-pick { animation-name:mini-ai-pick; }
.mini[data-scene="ai"] .mini-ai-panel { animation-name:mini-ai-panel; }
.mini[data-scene="ai"] .mini-codes { animation-name:mini-ai-codes; }
.mini[data-scene="ai"] .mini-pick-3 .mini-suggest { animation-name:mini-ai-suggest-1; }
.mini[data-scene="ai"] .mini-pick-4 .mini-suggest { animation-name:mini-ai-suggest-2; }
.mini[data-scene="ai"] .mini-pick-3 .mini-hl, .mini[data-scene="ai"] .mini-stripe-3 { animation-name:mini-ai-coded; }
.mini[data-scene="ai"] .mini-ai-sugg-1 { animation-name:mini-ai-sugg-1; }
.mini[data-scene="ai"] .mini-ai-sugg-2 { animation-name:mini-ai-sugg-2; }
.mini[data-scene="ai"] .mini-accept { animation-name:mini-ai-accept; }
@keyframes mini-ai-btn { 0%, 15% { background:var(--bg); } 17%, 30% { background:var(--row-active); } 32%, 100% { background:var(--bg); } }
@keyframes mini-ai-menu { 0%, 16% { opacity:0; translate:0 -.6cqw; } 20%, 30% { opacity:1; translate:0 0; } 32%, 100% { opacity:0; translate:0 0; } }
@keyframes mini-ai-pick { 0%, 25% { background:transparent; color:inherit; } 27%, 100% { background:var(--accent-solid); color:var(--on-solid); } }
@keyframes mini-ai-panel { 0%, 33% { opacity:0; translate:3cqw 0; } 40%, 100% { opacity:1; translate:0 0; } }
@keyframes mini-ai-codes { 0%, 36% { opacity:1; } 40%, 100% { opacity:0; } }
@keyframes mini-ai-suggest-1 { 0%, 40% { opacity:0; } 44%, 72% { opacity:1; } 75%, 100% { opacity:0; } }
@keyframes mini-ai-suggest-2 { 0%, 42% { opacity:0; } 46%, 100% { opacity:1; } }
@keyframes mini-ai-coded { 0%, 73% { opacity:0; } 76%, 100% { opacity:1; } }
@keyframes mini-ai-sugg-1 { 0%, 38% { opacity:0; translate:0 1cqw; } 42%, 72% { opacity:1; translate:0 0; } 76%, 100% { opacity:0; translate:-2cqw 0; } }
@keyframes mini-ai-sugg-2 { 0%, 40% { opacity:0; translate:0 1cqw; } 44%, 76% { opacity:1; translate:0 0; } 84%, 100% { opacity:1; translate:0 -13.6cqw; } }
@keyframes mini-ai-accept {
  0%, 68% { scale:1; background:var(--bg); }
  71% { scale:.93; background:var(--row-active); }
  74%, 100% { scale:1; background:var(--bg); }
}

/* ---- scene: explore ---- */
.mini-note { height:2cqw; line-height:2cqw; padding:0 .9cqw; border-radius:1cqw; background:var(--accent-solid); color:var(--on-solid); font-weight:600; font-size:.95cqw; box-shadow:var(--shadow-soft); white-space:nowrap; opacity:0; left:19cqw; }
.mini-note::before { content:""; position:absolute; left:-.9cqw; top:.55cqw; border:.45cqw solid transparent; border-right-color:var(--accent-solid); }
.mini-note-cases { top:17.3cqw; } .mini-note-notes { top:22.5cqw; } .mini-note-queries { top:25.1cqw; } .mini-note-outputs { top:27.7cqw; }
.mini[data-scene="explore"] .mini-nav-cases { animation-name:mini-row-20; }
.mini[data-scene="explore"] .mini-nav-notes { animation-name:mini-row-38; }
.mini[data-scene="explore"] .mini-nav-queries { animation-name:mini-row-56; }
.mini[data-scene="explore"] .mini-nav-outputs { animation-name:mini-row-74; }
.mini[data-scene="explore"] .mini-note-cases { animation-name:mini-note-20; }
.mini[data-scene="explore"] .mini-note-notes { animation-name:mini-note-38; }
.mini[data-scene="explore"] .mini-note-queries { animation-name:mini-note-56; }
.mini[data-scene="explore"] .mini-note-outputs { animation-name:mini-note-74; }
@keyframes mini-row-20 { 0%, 18% { color:inherit; } 21%, 100% { color:var(--sidebar-active); font-weight:600; } }
@keyframes mini-row-38 { 0%, 36% { color:inherit; } 39%, 100% { color:var(--sidebar-active); font-weight:600; } }
@keyframes mini-row-56 { 0%, 54% { color:inherit; } 57%, 100% { color:var(--sidebar-active); font-weight:600; } }
@keyframes mini-row-74 { 0%, 72% { color:inherit; } 75%, 100% { color:var(--sidebar-active); font-weight:600; } }
/* The rest of the window steps back while the sidebar's sections are introduced. */
.mini-header, .mini-tabs, .mini-doc { transition:opacity .6s; }
.mini[data-scene="explore"] .mini-header, .mini[data-scene="explore"] .mini-tabs, .mini[data-scene="explore"] .mini-doc, .mini[data-scene="explore"] .mini-codes { opacity:.2; }
@keyframes mini-note-20 { 0%, 18% { opacity:0; translate:-1cqw 0; } 23%, 100% { opacity:1; translate:0 0; } }
@keyframes mini-note-38 { 0%, 36% { opacity:0; translate:-1cqw 0; } 41%, 100% { opacity:1; translate:0 0; } }
@keyframes mini-note-56 { 0%, 54% { opacity:0; translate:-1cqw 0; } 59%, 100% { opacity:1; translate:0 0; } }
@keyframes mini-note-74 { 0%, 72% { opacity:0; translate:-1cqw 0; } 77%, 100% { opacity:1; translate:0 0; } }

/* ---- scene: realist ---- */
.mini-theory { left:18cqw; top:5.2cqw; width:66cqw; height:46.8cqw; padding:1.6cqw 2.2cqw; box-sizing:border-box; background:var(--bg); opacity:0; transition:opacity .5s; overflow:hidden; }
.mini-theory > * { position:absolute; left:2.2cqw; right:2.2cqw; }
.mini-theory-head { top:1.6cqw; display:flex; align-items:flex-start; gap:.6cqw; }
.mini-theory-head > div { flex:1; display:flex; flex-direction:column; gap:.2cqw; }
.mini-theory-head b { font-size:1.6cqw; font-weight:500; }
.mini-suggested { top:6.4cqw; display:flex; flex-direction:column; gap:.6cqw; padding:1cqw 1.2cqw; box-sizing:border-box; border:.08cqw solid var(--border); border-radius:.7cqw; background:var(--bg-soft); opacity:0; }
.mini-suggested > b { font-size:1cqw; }
.mini-suggested-card { display:flex; align-items:flex-end; justify-content:space-between; padding:.8cqw 1cqw; border:.08cqw solid var(--border); border-radius:.6cqw; background:var(--bg); }
.mini-cmoc-rows { display:flex; flex-direction:column; gap:.25cqw; }
.mini-cmoc-c, .mini-cmoc-m, .mini-cmoc-o { padding-left:.7cqw; border-left:.25cqw solid var(--realist-context); font-size:.9cqw; line-height:1.4cqw; white-space:nowrap; }
.mini-cmoc-m { border-color:var(--realist-mechanism); }
.mini-cmoc-o { border-color:var(--realist-outcome); }
.mini-theory-body { top:6.4cqw; bottom:0; }
.mini-theory-body > * { position:absolute; left:0; right:0; }
.mini-view-tabs { top:0; display:flex; gap:1.6cqw; padding-bottom:.5cqw; border-bottom:.08cqw solid var(--border); font-size:.95cqw; color:var(--muted); }
.mini-view-on { color:var(--text); box-shadow:0 .55cqw 0 -.4cqw var(--accent); }
.mini-canvas-actions { top:2.9cqw; display:flex; gap:.6cqw; }
.mini-canvas { top:6.2cqw; height:26cqw; border:.08cqw solid var(--border); border-radius:.7cqw; background:var(--bg-soft); }
.mini-canvas > * { position:absolute; }
.mini-cmoc { top:3cqw; width:17cqw; display:flex; flex-direction:column; gap:.4cqw; padding:1cqw 1.2cqw; box-sizing:border-box; background:var(--bg); border:.08cqw solid var(--border-strong); border-radius:.4cqw; }
.mini-cmoc > b { font-size:1.05cqw; font-weight:600; }
.mini-cmoc > small { margin-top:.3cqw; color:var(--muted); font-size:.85cqw; }
.mini-cmoc-1 { left:3cqw; } .mini-cmoc-2 { left:31cqw; opacity:0; }
.mini-link { left:20cqw; top:7.6cqw; width:11cqw; height:.15cqw; background:var(--muted); opacity:0; transform-origin:0 50%; }
.mini-link::after { content:""; position:absolute; right:-.1cqw; top:-.45cqw; border:.5cqw solid transparent; border-right:0; border-left:.8cqw solid var(--muted); }
.mini[data-scene="realist"] .mini-theory { opacity:1; animation-name:mini-theory; }
.mini[data-scene="realist"] .mini-nav-theory, .mini[data-scene="realist"] .mini-theory-row { opacity:1; animation-name:mini-theory-nav; }
.mini[data-scene="realist"] .mini-nav-outputs { translate:0 5cqw; animation-name:mini-outputs-down; }
.mini[data-scene="realist"] .mini-theory-row { animation-name:mini-theory-row; }
.mini[data-scene="realist"] .mini-source-row { animation-name:mini-source-off; }
.mini[data-scene="realist"] .mini-header-title, .mini[data-scene="realist"] .mini-tab-source { opacity:0; }
.mini[data-scene="realist"] .mini-tab-theory { animation-name:mini-theory; }
.mini[data-scene="realist"] .mini-suggest-cmocs { animation-name:mini-press-42; }
.mini[data-scene="realist"] .mini-suggested { animation-name:mini-suggested; }
.mini[data-scene="realist"] .mini-theory-body { animation-name:mini-theory-body; }
.mini[data-scene="realist"] .mini-add-cmoc { animation-name:mini-press-70; }
.mini[data-scene="realist"] .mini-cmoc-2 { animation-name:mini-cmoc-2; }
.mini[data-scene="realist"] .mini-link { animation-name:mini-link; }
@keyframes mini-theory-nav { 0%, 6% { opacity:0; } 11%, 100% { opacity:1; } }
@keyframes mini-outputs-down { 0%, 4% { translate:0 0; } 10%, 100% { translate:0 5cqw; } }
@keyframes mini-theory-row {
  0%, 6% { opacity:0; background:transparent; }
  11%, 17% { opacity:1; background:transparent; }
  19%, 100% { opacity:1; background:var(--sidebar-hover); color:var(--sidebar-active); }
}
@keyframes mini-source-off { 0%, 17% { background:var(--sidebar-hover); } 19%, 100% { background:transparent; font-weight:400; } }
@keyframes mini-theory { 0%, 19% { opacity:0; } 24%, 100% { opacity:1; } }
@keyframes mini-press-42 {
  0%, 40% { scale:1; background:var(--bg); }
  43% { scale:.95; background:var(--row-active); }
  46%, 100% { scale:1; background:var(--bg); }
}
@keyframes mini-suggested { 0%, 46% { opacity:0; translate:0 -1cqw; } 51%, 72% { opacity:1; translate:0 0; } 76%, 100% { opacity:0; translate:0 0; } }
@keyframes mini-theory-body { 0%, 45% { translate:0 0; } 51%, 73% { translate:0 10.4cqw; } 79%, 100% { translate:0 0; } }
@keyframes mini-press-70 {
  0%, 68% { scale:1; box-shadow:0 0 0 0 transparent; }
  71% { scale:.95; box-shadow:0 0 0 .2cqw color-mix(in srgb, var(--accent) 45%, transparent); }
  74%, 100% { scale:1; box-shadow:0 0 0 0 transparent; }
}
@keyframes mini-cmoc-2 {
  0%, 77% { opacity:0; scale:.9; }
  82% { opacity:1; scale:1; border-color:var(--accent); }
  92%, 100% { opacity:1; scale:1; border-color:var(--border-strong); }
}
@keyframes mini-link { 0%, 84% { opacity:0; transform:scaleX(0); } 90%, 100% { opacity:1; transform:scaleX(1); } }

/* ---- the AI scene starts before its suggestion is accepted; later scenes show it accepted ---- */
.mini[data-scene="ai"] .mini-count-3 { opacity:0; }
.mini[data-scene="ai"] .mini-count-2 { opacity:1; }

/* ---- cursor ---- */
.mini-cursor { position:absolute; z-index:3; left:0; top:0; width:1.9cqw; height:2.47cqw; margin:-.19cqw 0 0 -.19cqw; overflow:visible; opacity:0; transform-origin:10% 8%; filter:drop-shadow(0 .15cqw .25cqw color-mix(in srgb, var(--text) 35%, transparent)); animation-timing-function:cubic-bezier(.45,0,.25,1); }
.mini-cursor path { fill:var(--text); stroke:var(--bg); stroke-width:1.6; stroke-linejoin:round; paint-order:stroke; }
.mini[data-scene="project"] .mini-cursor { animation-name:mini-cursor-project; }
.mini[data-scene="import"] .mini-cursor { animation-name:mini-cursor-import; }
.mini[data-scene="code"] .mini-cursor { animation-name:mini-cursor-code; }
.mini[data-scene="ai"] .mini-cursor { animation-name:mini-cursor-ai; }
.mini[data-scene="realist"] .mini-cursor { animation-name:mini-cursor-realist; }
.mini[data-scene="guide"] .mini-cursor { animation-name:mini-cursor-guide; }
@keyframes mini-cursor-project {
  0% { opacity:0; translate:66cqw 50cqw; scale:1; }
  10% { opacity:1; translate:66cqw 50cqw; scale:1; }
  30% { opacity:1; translate:var(--new-x) var(--new-y); scale:1; }
  33% { opacity:1; translate:var(--new-x) var(--new-y); scale:1.2; }
  36% { opacity:1; translate:var(--new-x) var(--new-y); scale:.9; }
  40% { opacity:1; translate:var(--new-x) var(--new-y); scale:1; }
  56%, 68% { opacity:1; translate:var(--type-x) var(--type-y); scale:1; }
  84% { opacity:1; translate:var(--choose-x) var(--choose-y); scale:1; }
  87% { opacity:1; translate:var(--choose-x) var(--choose-y); scale:1.2; }
  90% { opacity:1; translate:var(--choose-x) var(--choose-y); scale:.9; }
  94%, 100% { opacity:1; translate:var(--choose-x) var(--choose-y); scale:1; }
}
@keyframes mini-cursor-import {
  0% { opacity:0; translate:44cqw 37cqw; scale:1; }
  6% { opacity:1; translate:44cqw 37cqw; scale:1; }
  21% { opacity:1; translate:15cqw 14cqw; scale:1; }
  24% { opacity:1; translate:15cqw 14cqw; scale:1.2; }
  27% { opacity:1; translate:15cqw 14cqw; scale:.9; }
  31%, 44% { opacity:1; translate:15cqw 14cqw; scale:1; }
  58%, 76% { opacity:1; translate:36cqw 34cqw; scale:1; }
  88% { opacity:1; translate:23.9cqw 11.6cqw; scale:1; }
  93%, 100% { opacity:1; translate:23.9cqw 11.6cqw; scale:1.2; }
}
@keyframes mini-cursor-code {
  0% { opacity:0; translate:48cqw 38cqw; scale:1; }
  3% { opacity:1; translate:48cqw 38cqw; scale:1; }
  8% { opacity:1; translate:30cqw 24.35cqw; scale:1; }
  9% { opacity:1; translate:30cqw 24.35cqw; scale:.9; animation-timing-function:linear; }
  20% { opacity:1; translate:58.2cqw 24.35cqw; scale:.9; }
  22% { opacity:1; translate:58.2cqw 24.35cqw; scale:1; }
  27%, 51% { opacity:1; translate:60cqw 30cqw; scale:1; }
  62% { opacity:1; translate:30cqw 32.85cqw; scale:1; }
  63% { opacity:1; translate:30cqw 32.85cqw; scale:.9; animation-timing-function:linear; }
  74% { opacity:1; translate:54.8cqw 32.85cqw; scale:.9; }
  76% { opacity:1; translate:54.8cqw 32.85cqw; scale:1; }
  87% { opacity:1; translate:81cqw 20.2cqw; scale:1.2; }
  90% { opacity:1; translate:81cqw 20.2cqw; scale:.9; }
  94%, 100% { opacity:1; translate:81cqw 20.2cqw; scale:1.1; }
}
@keyframes mini-cursor-ai {
  0% { opacity:0; translate:81cqw 20.2cqw; scale:1; }
  4% { opacity:1; translate:81cqw 20.2cqw; scale:1; }
  14% { opacity:1; translate:var(--ai-x) var(--ai-y); scale:1; }
  16% { opacity:1; translate:var(--ai-x) var(--ai-y); scale:.9; }
  18% { opacity:1; translate:var(--ai-x) var(--ai-y); scale:1; }
  25% { opacity:1; translate:var(--pick-x) var(--pick-y); scale:1; }
  28% { opacity:1; translate:var(--pick-x) var(--pick-y); scale:.9; }
  31%, 52% { opacity:1; translate:var(--pick-x) var(--pick-y); scale:1; }
  66% { opacity:1; translate:var(--accept-x) var(--accept-y); scale:1; }
  69% { opacity:1; translate:var(--accept-x) var(--accept-y); scale:1.2; }
  72% { opacity:1; translate:var(--accept-x) var(--accept-y); scale:.9; }
  76%, 100% { opacity:1; translate:var(--accept-x) var(--accept-y); scale:1; }
}
@keyframes mini-cursor-realist {
  0% { opacity:0; translate:40cqw 40cqw; scale:1; }
  6% { opacity:1; translate:40cqw 40cqw; scale:1; }
  15% { opacity:1; translate:var(--theory-x) var(--theory-y); scale:1; }
  17% { opacity:1; translate:var(--theory-x) var(--theory-y); scale:.9; }
  20% { opacity:1; translate:var(--theory-x) var(--theory-y); scale:1; }
  38% { opacity:1; translate:var(--cmocs-x) var(--cmocs-y); scale:1; }
  41% { opacity:1; translate:var(--cmocs-x) var(--cmocs-y); scale:1.2; }
  44% { opacity:1; translate:var(--cmocs-x) var(--cmocs-y); scale:.9; }
  48% { opacity:1; translate:var(--cmocs-x) var(--cmocs-y); scale:1; }
  64% { opacity:1; translate:var(--add-x) var(--add-y); scale:1; }
  68% { opacity:1; translate:var(--add-x) var(--add-y); scale:1.2; }
  71% { opacity:1; translate:var(--add-x) var(--add-y); scale:.9; }
  75% { opacity:1; translate:var(--add-x) var(--add-y); scale:1; }
  92%, 100% { opacity:1; translate:var(--rest-x) var(--rest-y); scale:1; }
}
@keyframes mini-cursor-guide {
  0% { opacity:0; translate:48cqw 24cqw; scale:1; }
  6% { opacity:1; translate:48cqw 24cqw; scale:1; }
  17% { opacity:1; translate:24cqw 1.5cqw; scale:1.2; }
  20% { opacity:1; translate:24cqw 1.5cqw; scale:.9; }
  23% { opacity:1; translate:24cqw 1.5cqw; scale:1; }
  34%, 58% { opacity:1; translate:27cqw 4.4cqw; scale:1; }
  76% { opacity:1; translate:89.6cqw 7.1cqw; scale:1.2; }
  79% { opacity:1; translate:89.6cqw 7.1cqw; scale:.9; }
  82% { opacity:1; translate:89.6cqw 7.1cqw; scale:1; }
  92%, 100% { opacity:1; translate:79cqw 13.6cqw; scale:1; }
}
/* Where the cursor clicks, measured from the drawing above (camera coordinates). */
.mini-cursor {
  --new-x:29cqw; --new-y:20.4cqw; --choose-x:59cqw; --choose-y:35cqw; --type-x:44cqw; --type-y:23.4cqw;
  --ai-x:65.4cqw; --ai-y:12.5cqw; --pick-x:62cqw; --pick-y:15.7cqw; --accept-x:86.6cqw; --accept-y:29.1cqw;
  --theory-x:14cqw; --theory-y:36.5cqw; --cmocs-x:78.4cqw; --cmocs-y:13.6cqw; --add-x:83.4cqw; --add-y:24.6cqw; --rest-x:66cqw; --rest-y:36cqw;
}

/* Keep the website paragraph wrapping rule out of the film artwork. */
.o2-page .mini .mini-line { text-wrap:nowrap; }

/* ---------- Collaboration (shared with the feature guide) ---------- */
.o2-collab { background: var(--bg-alt); border-block: 1px solid var(--line); }
.o2-promise a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.o2-collab-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(40px, .5fr) minmax(0, 1.5fr) minmax(40px, .5fr) minmax(0, 1fr); align-items: center; gap: var(--sp-2); padding: var(--sp-6); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.o2-collab-peer, .o2-collab-folder { display: grid; justify-items: center; gap: var(--sp-1); text-align: center; }
.o2-collab-peer svg, .o2-collab-folder svg { width: 64px; height: 48px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.o2-collab-folder svg { width: 84px; height: 63px; fill: rgb(var(--teal-rgb) / .1); }
.o2-collab-ink { stroke: var(--teal); }
.o2-collab-peer b, .o2-collab-folder b { font-size: var(--fs-body-sm); }
.o2-collab-peer span { color: var(--muted); font-size: var(--fs-caption); line-height: 1.4; }
.o2-collab-providers { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.o2-collab-providers li { padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--bg); font-size: var(--fs-caption); font-weight: var(--fw-semibold); animation: o2-collab-glow 9s ease-in-out infinite; }
.o2-collab-providers li:nth-child(2) { animation-delay: 1.5s; }
.o2-collab-providers li:nth-child(3) { animation-delay: 3s; }
.o2-collab-providers li:nth-child(4) { animation-delay: 4.5s; }
.o2-collab-providers li:nth-child(5) { animation-delay: 6s; }
.o2-collab-providers li:nth-child(6) { animation-delay: 7.5s; }
@keyframes o2-collab-glow { 0%, 20%, 100% { border-color: var(--line-strong); color: var(--text); } 8% { border-color: var(--teal); color: var(--teal); } }
.o2-collab-wire { position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--line-hover) 0 6px, transparent 6px 11px); }
.o2-collab-wire i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); animation: o2-collab-send 3.6s linear infinite; }
.o2-collab-wire i:nth-child(2) { animation-delay: 1.2s; background: var(--amber); }
.o2-collab-wire i:nth-child(3) { animation-delay: 2.4s; }
.o2-collab-wire-back i { animation-direction: reverse; }
@keyframes o2-collab-send { 0% { left: 0; opacity: 0; } 10%, 90% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
.o2-collab-flow:hover i, .o2-collab-flow:hover li { animation-play-state: paused; }
.o2-collab-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.o2-collab-steps li { position: relative; padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.o2-collab-steps li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--purple); color: var(--on-light); font-weight: var(--fw-bold); font-size: var(--fs-caption); }
.o2-collab-steps h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--fs-h3); }
.o2-collab-steps p { margin: 0; color: var(--muted); font-size: var(--fs-body-sm); }
.o2-collab-steps strong { color: var(--text); }
.o2-collab .o2-realist-cards { margin-top: var(--sp-6); }
.o2-collab-note { margin: var(--sp-6) 0 0; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--amber); background: var(--card); color: var(--muted); font-size: var(--fs-body-sm); line-height: 1.7; max-width: none; }
.o2-collab-note strong { color: var(--text); }
@media (max-width: 860px) {
  .o2-collab-flow { grid-template-columns: 1fr; justify-items: center; padding: var(--sp-5); }
  .o2-collab-wire { width: 2px; height: 36px; background: repeating-linear-gradient(180deg, var(--line-hover) 0 6px, transparent 6px 11px); }
  .o2-collab-wire i { left: -3px; animation-name: o2-collab-send-v; }
  .o2-collab-steps { grid-template-columns: 1fr; }
}
@keyframes o2-collab-send-v { 0% { top: 0; opacity: 0; } 10%, 90% { opacity: 1; } 100% { top: calc(100% - 8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .o2-collab-wire i, .o2-collab-providers li { animation: none; }
  .o2-collab-wire i { display: none; }
}