@gtanczyk/diorama 0.0.0-stage → 0.2.0

package/app/studio/style.css

@@ -0,0 +1,1390 @@
+:root {
+  /* The atelier: paper, ink and lamplight. Paintings carry the colour; the Studio around them stays quiet. */
+  --bg: #f2ece1; --panel: #faf6ee; --raised: #ebe3d5; --line: #e2d9ca; --line-strong: #cfc3ae;
+  --text: #2b2723; --muted: #6f675d; --faint: #998f82;
+  --accent: #b86f22; --amber: #c27a2c; --ok: #4f8a6e; --bad: #b5523f; --indigo: #3d4b7c; --ink: #2b2723;
+  --display: "Fraunces", Georgia, "Iowan Old Style", serif; --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
+  color-scheme: light;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--body); }
+/* The page itself never scrolls: the app is exactly the window, top bar then content, and long content scrolls inside its own panel. */
+html, body { height: 100%; overflow: hidden; }
+#app { height: 100dvh; display: flex; flex-direction: column; }
+#app > .top { flex: none; }
+#app > main { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; }
+h1, h2 { font-family: var(--display); font-weight: 500; margin: 0; letter-spacing: -0.01em; }
+h1 { font-size: 30px; }
+h2 { font-size: 18px; }
+a { color: var(--accent); }
+code, pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
+pre { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--panel); white-space: pre-wrap; }
+button, input, select, textarea { font: inherit; color: inherit; }
+button { min-height: 40px; padding: 0 18px; border-radius: 20px; cursor: pointer; border: 1px solid var(--line-strong); background: transparent; }
+button.primary { background: var(--ink); color: var(--panel); border: 0; font-weight: 600; }
+button.amber { background: var(--amber); color: #fff; border: 0; font-weight: 600; }
+button.small { min-height: 32px; padding: 0 12px; font-size: 13px; }
+button:disabled { opacity: 0.5; cursor: default; }
+input, select, textarea { background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 10px; }
+/* One drawn chevron, inset like the text, instead of each browser's own arrow hugging the edge. */
+select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 15px center, right 10px center; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
+select:disabled { cursor: default; opacity: 0.7; }
+textarea { width: 100%; resize: vertical; font-size: 17px; line-height: 1.4; }
+.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
+.grow { flex: 1; }
+.lead { color: var(--muted); font-size: 16px; margin: 6px 0 0; }
+.note, .detail { color: var(--faint); font-size: 13px; }
+.error { color: var(--bad); }
+.flag { color: var(--accent); font-size: 13px; margin: 4px 0; }
+
+.top { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-bottom: 1px solid var(--raised); flex-wrap: wrap; }
+.brand { display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; font-family: Georgia, serif; font-size: 18px; }
+.brand svg { color: var(--accent); }
+.sep { color: var(--line-strong); }
+.navlink { color: var(--muted); text-decoration: none; padding: 6px 12px; border-radius: 16px; }
+.navlink:hover { background: var(--raised); }
+.live { font-size: 12px; color: var(--faint); }
+.live.on { color: var(--ok); }
+.follow { font-size: 13px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
+
+/* Full width so their scrollbar sits at the window's edge; the column stays centred by its padding. */
+main.narrow { width: 100%; padding: 36px max(20px, calc((100% - 820px) / 2)); display: flex; flex-direction: column; gap: 18px; }
+main.setup { width: 100%; display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 28px; padding: 28px max(20px, calc((100% - 1240px) / 2)); overflow: hidden; }
+main.setup > .side { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow: auto; }
+.setup-heading { display: flex; align-items: center; gap: 12px; }
+.setup-back { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--text); text-decoration: none; font-size: 21px; }
+.setup-back:hover { background: var(--raised); }
+main.setup > .checks { min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
+@media (max-width: 860px) { main.setup { display: flex; flex-direction: column; overflow: auto; } main.setup > .side, main.setup > .checks { overflow: visible; } }
+main.wide { width: 100%; padding: 28px max(20px, calc((100% - 1160px) / 2)); display: flex; flex-direction: column; gap: 28px; }
+
+.mark { width: 24px; height: 24px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 1.5px solid var(--line-strong); }
+.mark.ok { background: rgba(108, 195, 181, 0.18); color: var(--ok); border-color: transparent; }
+.mark.missing, .mark.run { background: rgba(232, 168, 92, 0.2); color: var(--accent); border-color: transparent; }
+.mark.fail { background: rgba(229, 154, 154, 0.18); color: var(--bad); border-color: transparent; }
+.mark.run { animation: pulse 1.2s ease-in-out infinite; }
+@keyframes pulse { 50% { opacity: 0.4; } }
+
+.checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.checks li { display: flex; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
+.checks li.missing, .checks li.fail { border-color: var(--accent); background: rgba(232, 168, 92, 0.06); }
+.checks .body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
+.checks .detail { color: var(--muted); }
+.fix { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
+.fix pre { flex: 1; }
+
+.banner { display: block; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--accent); background: rgba(232, 168, 92, 0.08); text-decoration: none; }
+.idea { display: flex; flex-direction: column; gap: 12px; }
+.idea label { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
+.worlds { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
+.worlds a { display: flex; flex-direction: column; gap: 4px; color: var(--text); text-decoration: none; }
+.worlds img, .worlds .noimg { width: 100%; aspect-ratio: 1200 / 896; object-fit: cover; border-radius: 10px; background: var(--raised); }
+
+main.workshop { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 20px; padding: 20px; }
+@media (max-width: 960px) { main.workshop { grid-template-columns: 1fr; } }
+.left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+.steps li { display: flex; gap: 6px; align-items: center; padding: 4px 10px 4px 4px; border-radius: 16px; background: var(--panel); font-size: 13px; color: var(--muted); }
+.steps li.ok { color: var(--text); }
+.steps .mark { width: 20px; height: 20px; font-size: 11px; }
+.places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
+.places .card { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 6px; width: 100%; }
+.places img, .places .noimg { width: 100%; aspect-ratio: 1200 / 896; object-fit: cover; border-radius: 10px; background: var(--raised); display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 13px; }
+.places li.focus img { outline: 2px solid var(--accent); }
+.places .name { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.badge { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--raised); color: var(--muted); }
+.badge.ok { color: var(--ok); }
+.badge.fail { color: var(--bad); }
+.badge.run { color: var(--accent); }
+.inspect { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
+.inspect p { margin: 6px 0; }
+
+.right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
+.right section, .right details.log { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); padding: 14px; }
+.log summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; min-width: 0; }
+.log summary::-webkit-details-marker { display: none; }
+.log summary h2 { font-size: 15px; flex: none; }
+.log summary h2::before { content: "▸ "; color: var(--faint); font-size: 12px; }
+.log[open] summary h2::before { content: "▾ "; }
+.log summary .latest { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.log[open] summary .latest { display: none; }
+.log > .row { margin-top: 6px; }
+.log ol { list-style: none; margin: 10px 0 0; padding: 0; max-height: 60vh; overflow: auto; font-family: ui-monospace, Menlo, monospace; font-size: 12px; display: flex; flex-direction: column-reverse; }
+.log li { padding: 1px 0; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
+.log li.step, .log li.job { color: var(--text); }
+.log li.err { color: var(--bad); }
+.log li.agent { color: var(--accent); }
+
+.agent { display: flex; flex-direction: column; gap: 10px; }
+.chat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 42vh; overflow: auto; }
+.chat li { font-size: 14px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
+.chat li.user { align-self: flex-end; max-width: 85%; padding: 6px 10px; border-radius: 12px 12px 2px 12px; background: var(--raised); }
+.chat li.agent { max-width: 92%; }
+.chat li.streaming { color: var(--muted); }
+.chat li.tool { display: flex; gap: 6px; align-items: center; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--accent); }
+.chat li.tool .mark { width: 18px; height: 18px; font-size: 10px; }
+.chat li.error { color: var(--bad); }
+.ask { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--accent); border-radius: 10px; background: rgba(232, 168, 92, 0.06); font-size: 13px; }
+.say { display: flex; flex-direction: column; gap: 6px; }
+.say textarea { font-size: 14px; }
+
+.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden; }
+.seg button { border: 0; border-radius: 0; min-height: 32px; padding: 0 12px; font-size: 13px; color: var(--muted); }
+.seg button + button { border-left: 1px solid var(--line-strong); }
+.seg button.on { background: var(--raised); color: var(--text); }
+.seg.tools { flex-wrap: wrap; }
+.editor { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
+.editor label { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
+.stage { position: relative; width: 100%; aspect-ratio: 1200 / 896; border-radius: 10px; overflow: hidden; background: var(--raised); user-select: none; }
+.stage img, .stage .noimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
+.stage svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
+.stage:not(.tool-look) svg { cursor: crosshair; }
+.stage .sel { fill: rgba(232, 168, 92, 0.15); stroke: var(--accent); stroke-width: 3; stroke-dasharray: 10 6; }
+.stage .sel.repaint { fill: rgba(108, 195, 181, 0.15); stroke: var(--ok); }
+.stage .sel.npc { fill: none; stroke: var(--muted); stroke-width: 2; }
+.stage .sel.npc.on { stroke: var(--accent); stroke-width: 3; }
+.stage .stroke { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
+.stage .stroke.add { stroke: #3ddc84; }
+.stage .stroke.erase { stroke: #ff5a5a; }
+.stage .stand { fill: #fff; stroke: #000; stroke-width: 2; }
+.stage .pin { fill: var(--accent); stroke: #000; stroke-width: 3; }
+table.things { width: 100%; border-collapse: collapse; font-size: 13px; }
+table.things th { text-align: left; color: var(--faint); font-weight: 500; padding: 4px 6px; }
+table.things td { padding: 4px 6px; border-top: 1px solid var(--line); vertical-align: middle; }
+table.things input { width: 100%; min-width: 120px; padding: 4px 8px; }
+table.things form { flex-wrap: nowrap; }
+table.things select { padding: 4px 6px; }
+.fixes ul, .notes ul { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
+.fixes li, .notes li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+.notes { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; }
+.notes li.done { color: var(--faint); }
+.notes input { flex: 1; min-width: 200px; }
+.failed { padding: 12px 14px; border: 1px solid var(--bad); border-radius: 12px; background: rgba(229, 154, 154, 0.07); display: flex; flex-direction: column; gap: 8px; }
+.failed p { margin: 0; }
+.ask code { word-break: break-word; }
+.ask pre { max-height: 200px; overflow: auto; font-size: 12px; }
+.budget { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; }
+.budget .prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
+.budget label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
+.chat { scroll-behavior: smooth; }
+.chat li.thinking { color: var(--faint); font-size: 13px; animation: pulse 1.6s ease-in-out infinite; }
+.chat li.steps-card { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-left: 2px solid var(--line-strong); }
+.chat li.steps-card ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
+.chat .step summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; font-size: 13px; padding: 2px 0; }
+.chat .step summary::-webkit-details-marker { display: none; }
+.chat .step summary.plain { cursor: default; }
+.chat .step .mark { width: 18px; height: 18px; font-size: 10px; align-self: center; }
+.chat .step .what { color: var(--text); }
+.chat .step.fail .what { color: var(--bad); }
+.chat .step .args { color: var(--faint); font-family: ui-monospace, Menlo, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
+.chat .step .io { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 8px 26px; }
+.chat .step .io pre { max-height: 220px; overflow: auto; font-size: 11.5px; padding: 8px 10px; }
+button.link { all: unset; cursor: pointer; color: var(--accent); font-size: 12px; }
+button.link:focus-visible { outline: 2px solid var(--accent); }
+
+/* genaicode's chat in the Studio's colours. */
+section.agent { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
+section.agent > .gc-chat { --gc-bg: var(--panel); --gc-panel: var(--raised); --gc-border: var(--line); --gc-text: var(--text); --gc-muted: var(--muted);
+  --gc-accent: var(--ink); --gc-accent-text: var(--panel); --gc-ok: var(--ok); --gc-error: var(--bad); --gc-font-size: 14px; flex: 1; min-height: 360px; }
+section.agent .row { padding: 12px 14px 0; }
+.agent-pick { font-family: Georgia, "Iowan Old Style", serif; font-size: 17px; padding: 4px 8px; }
+.play { display: flex; flex-direction: column; gap: 8px; }
+.play iframe { width: 100%; aspect-ratio: 1200 / 896; max-width: 100%; border: 0; border-radius: 10px; background: #0b0b0e; }
+.log li.play { color: var(--ok); }
+.replays { padding: 0 14px 12px; font-size: 13px; color: var(--muted); }
+.replays summary { cursor: pointer; padding: 6px 0; }
+.replays ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+.cast { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
+.cast .who { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
+.cast .who.narrator { grid-template-columns: minmax(0, 1fr); }
+.cast img, .cast .noimg { width: 140px; height: 210px; object-fit: contain; border-radius: 10px; background: var(--raised); display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 13px; text-align: center; }
+.cast .body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
+.cast textarea { font-size: 14px; }
+.cast .voice label { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 13px; }
+.cast .voice select { max-width: 320px; }
+.cast .sample { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.cast audio { height: 32px; max-width: 100%; }
+.items { margin-top: 22px; }
+.items h3 { margin: 0 0 10px; font-size: 15px; }
+.items ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
+.items li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
+.items li.focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(194, 122, 44, 0.15); }
+.items img, .items .noimg { width: 88px; height: 88px; object-fit: contain; border-radius: 10px; background: var(--raised); display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 12px; text-align: center; }
+.items .body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.items .row { display: flex; flex-wrap: wrap; gap: 6px; }
+.items input { flex: 1 1 140px; min-width: 0; }
+/* A character moving as the game moves them: 3D model, 2D rig, painted sheets. */
+:is(.cast, .cw-focus) .figure-preview { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
+:is(.cast, .cw-focus) .figure-preview .moves { display: flex; flex-direction: column; gap: 10px; }
+:is(.cast, .cw-focus) .figure-preview .turntable { min-height: 340px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--raised); cursor: grab; touch-action: none; user-select: none; }
+:is(.cast, .cw-focus) .figure-preview .turntable:active { cursor: grabbing; }
+:is(.cast, .cw-focus) .figure-preview canvas.rig { height: 300px; width: auto; align-self: flex-start; border-radius: 10px; background: var(--raised); }
+:is(.cast, .cw-focus) .figure-preview .sheets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
+:is(.cast, .cw-focus) .figure-preview .sheets li { display: flex; flex-direction: column; align-items: center; gap: 4px; }
+:is(.cast, .cw-focus) .figure-preview .sheets canvas { height: 220px; width: auto; border-radius: 10px; background: var(--raised); }
+@media (max-width: 600px) { .cast .who { grid-template-columns: 1fr; } }
+
+.story { display: flex; flex-direction: column; gap: 14px; }
+.story-writing { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--accent); background: var(--panel); }
+.story-log { margin: 0; padding-left: 20px; max-height: 22vh; overflow: auto; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
+.story-log li.check { color: var(--text); }
+.story .plan-places { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; overflow: auto; min-height: 0; }
+.story .plan-places li { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
+.story .verdict { display: flex; flex-direction: column; gap: 8px; }
+.story .issues { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
+.story-map { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
+.story .map { overflow: auto; max-height: 48vh; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overscroll-behavior: contain; }
+.story .map-tools label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
+.story .map-tools select { max-width: min(280px, 100%); min-width: 0; }
+.story .map-help { margin: 0; }
+.story .map svg { display: block; max-width: none; }
+.story .join path { fill: none; stroke: var(--line-strong); stroke-width: 2; }
+.story .join.locked path { stroke: var(--accent); stroke-dasharray: 6 5; }
+.story .join text { fill: var(--accent); font-size: 11px; }
+.story .lock-label rect { fill: var(--panel); stroke: var(--accent); }
+.story .to-end path { stroke: var(--faint); stroke-width: 1.5; stroke-dasharray: 2 4; }
+.story .node { cursor: pointer; }
+.story .dim { opacity: 0.3; }
+.story .dim:hover, .story .dim:focus-visible { opacity: 1; }
+.story .node rect { fill: var(--raised); stroke: var(--line-strong); }
+.story .node.start rect { stroke: var(--ok); }
+.story .node.ending rect { fill: var(--panel); stroke: var(--accent); }
+.story .node.on rect { stroke: var(--text); stroke-width: 2; }
+.story .node:focus-visible { outline: none; }
+.story .node:focus-visible rect { stroke: var(--text); stroke-width: 2; }
+.story .map-name { color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
+.story .map-sub { color: var(--muted); font-size: 11px; margin-top: 7px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
+.story-place { display: flex; flex-direction: column; gap: 12px; }
+.story-place h2 { margin: 0; }
+.story .beat { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
+.story .act { display: flex; flex-direction: column; gap: 4px; padding-left: 12px; }
+.story .verb { font: 12px ui-monospace, Menlo, monospace; color: var(--accent); }
+.story .facts, .story .effects { font-size: 12px; color: var(--muted); }
+.story .line { display: flex; flex-direction: column; gap: 2px; }
+.story .line textarea { font-size: 14px; resize: vertical; }
+.story .over { font-size: 12px; color: var(--warn, var(--accent)); }
+.story .choices, .story .items { list-style: none; margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 6px; }
+.story .route { margin: 0; padding-left: 22px; color: var(--muted); font-size: 13px; }
+
+.progress { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); }
+.progress .steps li { background: var(--raised); }
+.progress .tail { font-family: ui-monospace, Menlo, monospace; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
+/* A turn that ended well: a step that failed on the way was retried, so its summary says no "errors" (the step itself still shows it). */
+/* A refused or failed step mid-turn is the agent finding its way; "errors" in the fold is for a turn that ended badly. */
+section.agent .gc-turn:not(:has(.gc-turn-footer.gc-bad)) .gc-fold summary .gc-err { display: none; }
+section.agent .gc-fold > summary { display: block; cursor: pointer; }
+/* A workshop with children: drawings, recordings, their story. */
+.tabs { display: flex; gap: 6px; }
+.tabs button.on { border-color: var(--accent); color: var(--text); }
+.kids { display: flex; flex-direction: column; gap: 16px; }
+.kids section { display: flex; flex-direction: column; gap: 12px; }
+.kids .card { padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; opacity: 0.72; transition: opacity .3s; }
+.kids .card.now, .kids .card:focus-within, .kids .card:hover { opacity: 1; }
+.kids .card.now { border-color: var(--accent); }
+.kids h2 { margin: 0; font-size: 22px; display: flex; align-items: center; gap: 12px; }
+.kids h2 .n { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--raised); font-size: 17px; flex: none; }
+.kids .card.now h2 .n { background: var(--accent); color: #121417; }
+.kids .row.big button, .kids .row.big .button { min-height: 52px; padding: 0 26px; font-size: 18px; border-radius: 26px; }
+.kids label.button { display: inline-flex; align-items: center; cursor: pointer; border: 1px solid var(--line-strong); }
+.kids label.button input { display: none; }
+.kids .busy { position: sticky; top: 8px; z-index: 3; align-self: center; margin: 0; padding: 8px 18px; border-radius: 999px; background: var(--raised); border: 1px solid var(--accent); }
+.kids .story { font-size: 18px; line-height: 1.5; margin: 0; cursor: text; white-space: pre-wrap; }
+.kids .empty { grid-column: 1 / -1; margin: 0; }
+.kids .more { padding: 0 4px; display: flex; flex-direction: column; gap: 10px; }
+.kids .more[open] { gap: 12px; }
+.kids .more summary { cursor: pointer; color: var(--muted); }
+.kids .told ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.drawings { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
+.drawings figure { position: relative; margin: 0; display: flex; flex-direction: column; gap: 4px; }
+.drawings img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--raised); }
+.drawings figure button { position: absolute; top: 4px; right: 4px; }
+.drawings figcaption { font-size: 13px; color: var(--muted); }
+.drawings .add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; aspect-ratio: 3 / 4; border: 2px dashed var(--line); border-radius: 10px; cursor: pointer; color: var(--muted); text-align: center; padding: 8px; }
+.drawings .add input { display: none; }
+.camera { display: flex; flex-direction: column; gap: 8px; }
+.camera video { width: 100%; max-width: 720px; border-radius: 10px; background: #000; }
+.record { font-size: 20px; min-height: 60px; padding: 0 30px; border-radius: 999px; }
+.record.on { background: var(--bad); border-color: var(--bad); color: #fff; }
+.told li { display: flex; gap: 10px; align-items: center; }
+.told audio { height: 32px; flex: none; width: 220px; }
+.drawings figcaption select { width: 100%; min-height: 32px; padding: 2px 6px; font-size: 14px; border-radius: 8px; }
+.drawings figure > button.small { background: var(--bg); width: 32px; padding: 0; opacity: 0.85; }
+.play-hint { margin: 2px 0 8px; } .play-hint summary { cursor: pointer; color: var(--accent); font-size: 13px; } .play-hint p { margin: 4px 0; }
+.drawings .pic { position: relative; padding: 0; border: 0; min-height: 0; border-radius: 10px; background: none; display: block; width: 100%; }
+.drawings .pic img.alive { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: rgba(255, 255, 255, 0.92); border-radius: 10px; animation: alive 0.9s ease-out; }
+.drawings .pic img.alive.place { object-fit: cover; }
+.drawings .pic:hover img.alive { opacity: 0; transition: opacity 0.2s; }
+.drawings .spark { position: absolute; inset: auto 0 8px; text-align: center; font-size: 13px; color: #121417; background: var(--accent); border-radius: 999px; margin: 0 12px; padding: 2px 8px; animation: pulse 1.2s ease-in-out infinite; }
+@keyframes alive { from { opacity: 0; transform: scale(0.9) rotate(-2deg); } to { opacity: 1; transform: none; } }
+@keyframes pulse { 50% { opacity: 0.55; } }
+.show { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: grid; grid-template-columns: 1fr auto 1.4fr; align-items: center; gap: 24px; padding: 4vh 4vw; cursor: zoom-out; }
+.show img { max-width: 100%; max-height: 82vh; margin: auto; border-radius: 14px; }
+.show img.alive { animation: alive 1.1s ease-out; background: #fff; }
+.show .arrow { font-size: 64px; color: var(--accent); }
+.show p { grid-column: 1 / -1; text-align: center; font-size: 22px; margin: 0; color: var(--text); }
+@media (prefers-reduced-motion: reduce) { .drawings .pic img.alive, .show img.alive, .drawings .spark { animation: none; } }
+.share { position: relative; }
+.share-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; width: 300px; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 10px; background: var(--raised); border: 1px solid var(--line); }
+.share-menu p { margin: 0 0 6px; }
+.share-menu.history { width: 380px; max-height: 70vh; overflow: auto; }
+.share-menu.style-menu { width: 380px; max-height: 70vh; overflow: auto; gap: 8px; }
+.style-menu p { margin: 0; }
+.style-menu .row.wrap { flex-wrap: wrap; gap: 6px; }
+.style-menu textarea, .style-menu select { width: 100%; box-sizing: border-box; }
+.history ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
+.history li { display: flex; flex-direction: column; gap: 4px; padding: 10px 2px; border-top: 1px solid var(--line); }
+.history li:first-child { border-top: 0; }
+.history li p { margin: 0; }
+.history li > button { align-self: flex-start; }
+
+/* A note from the Studio to the agent, not a bubble from the person. */
+.gc-prompt:has(> .studio-note) { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; color: var(--muted); }
+.gc-steer:has(> .studio-note) > small { display: none; }
+.studio-note { font-size: 12px; color: var(--muted); }
+.studio-note summary { cursor: pointer; list-style: none; }
+.studio-note summary::before { content: 'ⓘ '; }
+.studio-note[open] { white-space: pre-wrap; }
+.studio-note[open] summary { margin-bottom: 4px; }
+
+/* Pictures for the agent: the tray under the composer and the thumbnails in a sent prompt. */
+.agent .pics { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.agent .pic { position: relative; display: inline-flex; }
+.agent .pics img { height: 48px; max-width: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
+.agent .pic button { position: absolute; top: -6px; right: -6px; padding: 0 6px; min-height: 0; line-height: 18px; background: var(--panel); }
+.agent .pics.sent { margin-bottom: 6px; }
+.agent .pics.sent img { height: 72px; max-width: 120px; }
+.agent .camera video { width: 100%; border-radius: 8px; }
+
+/* The wait while a workshop world builds: a show for the children, the hero walking the road to the end. */
+.wait { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; gap: 2vh; padding: 3vh 4vw; }
+.wait h1 { font-size: clamp(24px, 4vw, 48px); margin: 0; }
+.wait .screen { flex: 1; min-height: 0; display: grid; place-items: center; }
+.wait figure { margin: 0; display: grid; grid-template-columns: 1fr auto 1.5fr; align-items: center; gap: 2vh 3vw; width: 100%; animation: arrive 1.2s ease-out; }
+.wait figure.place, .wait figure.telling { grid-template-columns: 1fr; }
+.wait .telling-text { margin: 0 auto; max-width: 40ch; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.45; text-align: center; text-wrap: pretty; }
+.wait figure img { max-width: 100%; max-height: 54vh; margin: auto; border-radius: 16px; object-fit: contain; }
+.wait figure img.to { background: #fff; }
+.wait figure.place img.to { background: none; }
+.wait figure .arrow { font-size: 72px; color: var(--accent); }
+.wait figcaption { grid-column: 1 / -1; text-align: center; font-size: clamp(22px, 3vw, 40px); font-weight: 600; min-height: 1.2em; }
+.wait figcaption::first-letter { text-transform: uppercase; }
+.wait .road { position: relative; flex: none; height: 18px; margin: 12vh 6vw 4vh; border-radius: 9px; background: var(--raised); border: 1px solid var(--line); }
+.wait .road .done { height: 100%; border-radius: 9px; background: var(--accent); transition: width 2s ease; }
+.wait .road .walker { position: absolute; bottom: 4px; height: 11vh; transform: translateX(-50%); transition: left 2s ease; animation: hop .7s ease-in-out infinite alternate; }
+.wait .road .flag { position: absolute; right: -10px; bottom: 6px; font-size: 6vh; line-height: 1; }
+.wait .road .detail { position: absolute; top: 26px; left: 0; right: 0; text-align: center; font-size: 20px; }
+.wait .go { align-self: center; flex: none; margin: 2vh 0; font-size: clamp(28px, 4vw, 52px); padding: 2vh 6vw; border-radius: 999px; animation: beckon 1.2s ease-in-out infinite alternate; }
+.wait .oops { text-align: center; font-size: 22px; }
+@keyframes arrive { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
+@keyframes hop { from { transform: translateX(-50%) translateY(0); } to { transform: translateX(-50%) translateY(-8px); } }
+@keyframes beckon { from { transform: scale(1); } to { transform: scale(1.06); } }
+@media (prefers-reduced-motion: reduce) { .wait figure, .wait .road .walker, .wait .go { animation: none; } }
+
+/* The build stage (studio/build.tsx): one progress line, the place being built, the story beside it. */
+:root { --spark: #7fb2ff; --image: #e8a85c; --sam: #6cc3b5; }
+.model { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; padding: 1px 7px 1px 6px; border-radius: 9px; background: var(--raised); color: var(--muted); white-space: nowrap; }
+.model::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--faint); }
+.model.spark { color: var(--spark); } .model.spark::before { background: var(--spark); }
+.model.image { color: var(--image); } .model.image::before { background: var(--image); }
+.model.sam { color: var(--sam); } .model.sam::before { background: var(--sam); }
+
+.pipeline { container-type: inline-size; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
+.pipeline .phases { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+/* Narrow (a wide agent panel, a small window): the phases wrap to two lines, their model tags cut short. */
+@container (max-width: 760px) { .pipeline .phases li { min-width: 88px; } }
+.pipeline .phases li { flex-basis: 0; min-width: 124px; display: flex; flex-direction: column; gap: 5px; }
+.pipeline .bar { position: relative; height: 8px; border-radius: 4px; background: var(--raised); overflow: hidden; }
+.pipeline .fill { position: absolute; inset: 0 auto 0 0; background: var(--ok); border-radius: 4px; transition: width 1s linear; }
+.pipeline .fill.existing { opacity: 0.55; }
+.pipeline .tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--panel); }
+.pipeline .fill.run, .extension-pipeline li.run .fill { background: linear-gradient(90deg, var(--accent), #ffd59a, var(--accent)); background-size: 200% 100%; animation: flow 1.6s linear infinite; }
+.stage-live .wanted { max-width: 70%; padding: 6px 10px; border-radius: 8px; background: rgba(20, 16, 10, 0.72); color: #fff; font-size: 13px; }
+.stage-live .wanted.trouble { background: rgba(120, 40, 20, 0.85); }
+.pipeline .fill.warn { background: repeating-linear-gradient(135deg, var(--ok) 0 6px, var(--accent) 6px 12px); }
+.pipeline li.warn .name { color: var(--accent); }
+.pipeline .fill.fail, .extension-pipeline li.fail .fill { background: var(--bad); }
+.pipeline li.skip { opacity: 0.45; }
+.pipeline li.todo .name, .pipeline li.skip .name { color: var(--faint); }
+.pipeline li.run .name { color: var(--accent); }
+.pipeline .label { display: flex; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, #000 85%, transparent); }
+.pipeline .name { font-size: 13px; font-weight: 600; margin-right: 2px; }
+.pipeline .head { flex-wrap: nowrap; gap: 8px; font-size: 13px; }
+.pipeline .head strong { white-space: nowrap; margin-right: 6px; }
+.pipeline .head .when { white-space: nowrap; }
+.pipeline .head .tail { flex: 1; min-width: 0; text-align: right; }
+.pipeline li.todo .model, .pipeline li.skip .model { opacity: 0.6; }
+.pipeline .phases li .model { font-size: 10px; padding: 0 6px 0 5px; }
+.pipeline .count { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; color: var(--muted); transition: transform 0.2s; }
+.pipeline .count.hot { transform: scale(1.08); color: var(--text); }
+.pipeline .tail { font-family: ui-monospace, Menlo, monospace; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+@keyframes flow { to { background-position: -200% 0; } }
+
+.build-grid { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(220px, 1fr); grid-template-rows: auto auto; grid-template-areas: "stage tale" "strip tale"; gap: 12px 16px; align-items: stretch; }
+.build-grid > .stage-live { grid-area: stage; }
+.build-grid > .tale { grid-area: tale; }
+.build-grid > .strip { grid-area: strip; }
+.stage-live { margin: 0; display: flex; flex-direction: column; gap: 8px; }
+.stage-live .frame { position: relative; width: min(100%, calc(64vh * 1200 / 896)); margin: 0 auto; aspect-ratio: 1200 / 896; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #232831, #15181c); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
+.stage-live .layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
+.stage-live .layer.depth { opacity: 0.78; }
+.stage-live .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px; text-align: center; font-family: Georgia, serif; font-size: 20px; color: var(--muted); }
+.stage-live .empty span { animation: pulse 2.4s ease-in-out infinite; max-width: 32em; }
+.stage-live .empty.waiting { flex-direction: column; gap: 10px; background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, 0.02) 18px 36px); }
+.stage-live .empty.waiting strong { font-size: 30px; font-weight: 400; color: var(--text); }
+.stage-live .empty.waiting span { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 14px; }
+.stage-live figcaption { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 16px; background: rgba(12, 14, 17, 0.72); backdrop-filter: blur(6px); font-size: 14px; }
+.stage-live figcaption .model { font-size: 12px; background: rgba(255, 255, 255, 0.08); }
+.stage-live .where { position: absolute; right: 14px; bottom: 14px; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border-radius: 12px; background: rgba(12, 14, 17, 0.6); font-size: 12px; color: var(--muted); }
+.stage-live .over { position: absolute; left: 12px; top: 10px; right: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
+.stage-live .over > * { pointer-events: auto; }
+.stage-live .layers { display: flex; flex-wrap: wrap; gap: 4px; }
+.stage-live .layers button { min-height: 26px; padding: 0 10px; font-size: 12px; border: 0; background: rgba(12, 14, 17, 0.6); color: var(--muted); backdrop-filter: blur(6px); }
+.stage-live .layers .on { background: rgba(12, 14, 17, 0.85); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent); }
+.enter-fade { animation: enter-fade 0.9s ease-out both; }
+.enter-wipe { animation: enter-wipe 1.8s cubic-bezier(0.6, 0, 0.3, 1) both; }
+.enter-iris { animation: enter-iris 1.4s ease-out both; }
+.enter-sweep { animation: enter-sweep 1.6s ease-in-out both; }
+@keyframes enter-fade { from { opacity: 0; } }
+@keyframes enter-wipe { from { clip-path: inset(0 100% 0 0); filter: saturate(0.4) brightness(1.3); } }
+@keyframes enter-iris { from { clip-path: circle(0% at 50% 62%); } to { clip-path: circle(80% at 50% 62%); } }
+@keyframes enter-sweep { from { clip-path: inset(0 0 100% 0); } }
+.scan { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 2px rgba(232, 168, 92, 0.7); animation: pulse 1.8s ease-in-out infinite; }
+.scan.masks { box-shadow: inset 0 0 0 2px rgba(108, 195, 181, 0.7); }
+.scan.layout { box-shadow: inset 0 0 0 2px rgba(127, 178, 255, 0.7); }
+.stage-live .finds { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
+.finds g { animation: enter-fade 0.5s ease-out both; }
+.finds rect { fill: none; stroke: rgba(160, 196, 255, 0.85); stroke-width: 3; stroke-dasharray: 12 8; vector-effect: non-scaling-stroke; }
+.finds .cut rect { fill: rgba(108, 195, 181, 0.22); stroke: rgb(108, 195, 181); stroke-dasharray: none; transition: fill 0.4s, stroke 0.4s; }
+.finds text { font: 600 22px system-ui, sans-serif; fill: #fff; paint-order: stroke; stroke: rgba(0, 0, 0, 0.7); stroke-width: 5px; }
+
+.tale { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); overflow: auto; contain: size; }
+.tale > * { animation: rise 0.6s ease-out both; }
+.tale .kicker { margin: 0; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--faint); }
+.tale .pitch { margin: 0; font-family: Georgia, serif; font-size: 17px; line-height: 1.4; }
+.tale blockquote { margin: 0; padding-left: 12px; border-left: 2px solid var(--accent); font-family: Georgia, serif; font-style: italic; color: var(--muted); }
+.tale ul, .tale ol { list-style: none; margin: 0; padding: 0; }
+.tale li { animation: rise 0.5s ease-out both; }
+.tale .people { display: flex; flex-wrap: wrap; gap: 10px; }
+.tale .people li { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); max-width: 64px; text-align: center; overflow-wrap: anywhere; }
+.tale .people img, .tale .noface { width: 48px; height: 64px; object-fit: contain; border-radius: 8px; background: var(--raised); }
+.tale .noface { display: flex; align-items: center; justify-content: center; font-family: Georgia, serif; font-size: 20px; color: var(--faint); text-transform: uppercase; }
+.tale .where-list { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
+.tale .where-list strong { color: var(--text); font-weight: 600; margin-right: 4px; }
+.tale .finds { display: flex; flex-wrap: wrap; gap: 8px; }
+.tale .finds li { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 16px; background: var(--raised); font-size: 12px; }
+.tale .finds img, .tale .noicon { width: 26px; height: 26px; object-fit: contain; border-radius: 13px; background: rgba(255, 255, 255, 0.05); }
+.tale .endings { margin: 0; font-size: 13px; color: var(--muted); }
+@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
+
+.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
+.strip .card { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 5px; width: 100%; }
+.strip .thumb { position: relative; display: block; aspect-ratio: 1200 / 896; border-radius: 10px; overflow: hidden; background: var(--raised); }
+.strip .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; animation: enter-fade 0.8s ease-out both; }
+.strip .noimg { position: absolute; inset: 0; overflow: hidden; padding: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-style: italic; color: var(--faint); background: repeating-linear-gradient(135deg, transparent 0 10px, rgba(255, 255, 255, 0.025) 10px 20px); }
+.strip li.focus .thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
+.strip .name { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 6px; font-size: 13px; min-width: 0; }
+.strip .name strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.strip .name .badge { flex: none; white-space: nowrap; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
+.strip .dots { display: flex; gap: 3px; }
+.strip li { position: relative; }
+/* Fix it sits over the bottom of the thumbnail, so a failed card is no taller than the others. */
+.strip .fixit { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1200 / 896; display: flex; align-items: flex-end; overflow: hidden; border-radius: 10px; pointer-events: none; }
+.strip .fixit .panel { pointer-events: auto; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 4px; padding: 5px 6px; border-radius: 8px; background: rgba(18, 20, 23, 0.88); border: 1px solid var(--bad); }
+.strip .fixit .why { font-size: 11px; line-height: 1.25; color: var(--bad); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
+.strip .fixit button { padding: 2px 8px; }
+.strip .dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-strong); }
+.strip .dots i.on { background: var(--ok); }
+@media (max-width: 1100px) { .build-grid { grid-template-columns: 1fr; grid-template-areas: "stage" "strip" "tale"; } .tale { contain: none; } }
+
+/* The Workshop fits the window (main.workshop.fit): the stage takes the height that is left; the tale and the Story, Cast and Notes tabs scroll inside. */
+@media (min-width: 961px) and (min-height: 560px) {
+  main.workshop.fit { height: calc(100dvh - var(--top-h, 55px)); padding-block: 14px; overflow: hidden; }
+  main.workshop.fit > .left { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
+  main.workshop.fit > .left > * { flex: none; margin: 0; }
+  main.workshop.fit > .left > .row h1 { font-size: 26px; }
+  main.workshop.fit .lead { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
+  main.workshop.fit .seg { align-self: flex-start; }
+  /* The stage column is as wide as the picture the height allows; the story takes the rest. */
+  main.workshop.fit > .left > .build-stage { flex: 1 1 0; min-height: 0; container-type: size; }
+  /* Also on a narrow window: the picture shrinks before the story drops under it, so nothing goes below the fold. */
+  main.workshop.fit .build-grid { height: 100%; grid-template-rows: minmax(0, 1fr) 132px; grid-template-areas: "stage tale" "strip tale";
+    grid-template-columns: min(calc(100cqw - clamp(220px, 34cqw, 316px)), calc((100cqh - 144px) * 1200 / 896)) minmax(0, 1fr); }
+  main.workshop.fit .tale { contain: size; }
+  main.workshop.fit .build-grid > .inspect { grid-area: tale; min-height: 0; overflow: auto; overscroll-behavior: contain; margin: 0; }
+  main.workshop.fit .stage-live { min-height: 0; }
+  main.workshop.fit .stage-live .frame { width: 100%; margin: 0; }
+  main.workshop.fit .strip { display: flex; gap: 10px; overflow-x: auto; }
+  main.workshop.fit .strip li { flex: 0 0 132px; }
+  main.workshop.fit .strip .name { font-size: 12px; }
+  main.workshop.fit .tale { min-height: 0; }
+  main.workshop.fit > .right { min-height: 0; }
+  main.workshop.fit > .left > .play { flex: 1 1 0; min-height: 0; }
+  main.workshop.fit > .left > .tab-body { flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
+  main.workshop.fit .play .screen { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }
+  main.workshop.fit .play iframe { width: min(100cqw, calc(100cqh * 1200 / 896)); }
+  main.workshop.fit > .right .dock-body { flex: 1 1 0; min-height: 0; overflow: hidden; }
+}
+
+/* The agent's dock (studio/dock.tsx): right or left at a dragged width, floating, or folded to a bar. */
+main.workshop.dock-right { grid-template-columns: minmax(0, 1fr) var(--dock-w, 380px); }
+main.workshop.dock-left { grid-template-columns: var(--dock-w, 380px) minmax(0, 1fr); }
+main.workshop.dock-left > .dock { order: -1; }
+main.workshop.dock-right-folded { grid-template-columns: minmax(0, 1fr) 44px; }
+main.workshop.dock-left-folded { grid-template-columns: 44px minmax(0, 1fr); }
+main.workshop.dock-left-folded > .dock { order: -1; }
+main.workshop.dock-float { grid-template-columns: minmax(0, 1fr); }
+.dock { position: relative; }
+/* Docked, the agent keeps the window's height whatever the tab and however long the page: it stays put while the page scrolls. */
+main.workshop:not(.fit) > .dock:not(.float) { position: sticky; top: 20px; align-self: start; height: calc(100dvh - var(--top-h, 55px) - 40px); min-height: 0; }
+main.workshop:not(.fit) > .dock:not(.float):not(.folded) .dock-body { flex: 1 1 0; min-height: 0; overflow: hidden; }
+.dock-body { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
+.dock-body[hidden] { display: none; }
+.dock-body > section.agent { flex: 1 1 0; min-height: 200px; max-height: none; }
+.dock-body > .log { flex: none; }
+.dock-body > .log[open] { flex: 0 1 40%; min-height: 140px; display: flex; flex-direction: column; overflow: hidden; }
+.dock-body > .log[open] ol { flex: 1; min-height: 0; max-height: none; }
+.dockbar { display: flex; align-items: center; gap: 2px; min-height: 28px; padding: 0 2px; color: var(--faint); font-size: 12px; user-select: none; }
+.dock-title { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
+button.tiny { min-height: 26px; min-width: 28px; padding: 0 6px; border: 0; border-radius: 8px; font-size: 14px; color: var(--faint); }
+button.tiny:hover, button.tiny.on { color: var(--text); background: var(--raised); }
+.dock-edge { position: absolute; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 2; }
+.dock.right .dock-edge { left: -12px; }
+.dock.left .dock-edge { right: -12px; }
+.dock-edge:hover, body.dragging .dock-edge { background: linear-gradient(90deg, transparent 4px, var(--accent) 4px, var(--accent) 6px, transparent 6px); }
+body.dragging { cursor: grabbing; user-select: none; }
+body.dragging iframe { pointer-events: none; }
+.dock.folded { flex-direction: column; align-items: center; }
+.dock.folded .dockbar { flex-direction: column; gap: 8px; padding-top: 4px; }
+.dock.folded .dock-title { writing-mode: vertical-rl; transform: rotate(180deg); }
+.dock.float { position: fixed; z-index: 30; padding: 8px 10px 10px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); overflow: visible; display: flex; flex-direction: column; }
+.dock.float .dockbar { cursor: grab; }
+.dock.float .dock-body { flex: 1 1 0; min-height: 0; overflow: hidden; }
+/* Inside the dock the chat takes whatever height there is, its input pinned at the bottom. */
+.dock-body section.agent > .gc-chat { min-height: 0; }
+.grip { position: absolute; z-index: 3; }
+.grip.n, .grip.s { left: 10px; right: 10px; height: 8px; cursor: ns-resize; }
+.grip.e, .grip.w { top: 10px; bottom: 10px; width: 8px; cursor: ew-resize; }
+.grip.n { top: -4px; } .grip.s { bottom: -4px; } .grip.e { right: -4px; } .grip.w { left: -4px; }
+.grip.ne, .grip.nw, .grip.se, .grip.sw { width: 16px; height: 16px; }
+.grip.ne { top: -5px; right: -5px; cursor: nesw-resize; } .grip.sw { bottom: -5px; left: -5px; cursor: nesw-resize; }
+.grip.nw { top: -5px; left: -5px; cursor: nwse-resize; } .grip.se { bottom: -5px; right: -5px; cursor: nwse-resize; }
+.dock.float.folded { width: auto; height: auto; flex-direction: row; }
+.dock.float.folded .dockbar { flex-direction: row; }
+.dock.float.folded .dock-title { writing-mode: horizontal-tb; transform: none; }
+@media (max-width: 960px) { main.workshop[class*="dock-"] { grid-template-columns: 1fr; } .dock-edge { display: none; } }
+
+/* Top bar: a live dot, Activity, and the seldom-used options behind ☰. */
+.live-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--faint); }
+.live-dot.on { background: var(--ok); box-shadow: 0 0 0 3px rgba(108, 195, 181, 0.18); }
+.menu-button { font-size: 16px; }
+.share-menu.top-menu { width: 220px; gap: 4px; }
+.top-menu .navlink { padding: 6px 4px; border-radius: 8px; }
+.top-menu .follow { padding: 6px 4px; }
+/* Activity as a drawer from the right, scrolling inside. */
+.drawer-back { position: fixed; inset: 0; z-index: 50; background: rgba(8, 9, 11, 0.5); display: flex; justify-content: flex-end; }
+.drawer { width: min(560px, 92vw); height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--panel); border-left: 1px solid var(--line-strong); box-shadow: -20px 0 50px rgba(0, 0, 0, 0.45); animation: drawer-in 0.18s ease-out; }
+.drawer.log ol { flex: 1; min-height: 0; max-height: none; overflow: auto; }
+@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } }
+.share-menu.top-menu:has(.menu-group) { width: 300px; }
+.menu-group { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
+.menu-group p { margin: 0; }
+.menu-head { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
+/* One tooltip for the whole Studio (tip.tsx): what a control does and what it costs. */
+.tip { position: fixed; left: 0; top: 0; z-index: 1000; max-width: 300px; padding: 7px 10px; border-radius: 8px; background: var(--raised); color: var(--text); border: 1px solid var(--line-strong); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); font-size: 13px; line-height: 1.4; white-space: pre-line; pointer-events: none; opacity: 0; transition: opacity 0.12s; }
+.tip.on { opacity: 1; }
+
+/* The agent's side during a build: what the models do now; after it, ideas to ask. */
+.crew { flex: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
+.crew.live { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
+.crew .row strong { font-size: 13px; }
+.crew.live .row strong::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 4px; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; }
+.crew .feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; max-height: 40vh; overflow: hidden; }
+.crew .feed li { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); animation: rise 0.4s ease-out both; white-space: nowrap; overflow: hidden; }
+.crew .feed li span:last-child { overflow: hidden; text-overflow: ellipsis; }
+.crew .feed li:nth-child(n + 5) { opacity: 0.6; }
+.crew .feed li.step { color: var(--ok); }
+.crew .detail { margin: 0; }
+.crew .ideas { display: flex; flex-wrap: wrap; gap: 6px; }
+.crew .ideas button { font-size: 12px; }
+.things td.remove { width: 1%; text-align: right; }
+.things tr.confirm td { padding-top: 0; }
+.things tr.confirm .row { flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
+.things .add-thing input { width: 100%; }
+button.danger { color: var(--bad); }
+/* Start: one idea box up top, the worlds below scroll inside, the page itself never scrolls. */
+main.start { max-width: 1100px; margin: 0 auto; padding: 32px 20px 0; height: calc(100dvh - var(--top-h, 55px)); display: flex; flex-direction: column; gap: 22px; overflow: hidden; }
+main.start .hero { display: flex; flex-direction: column; gap: 14px; flex: none; }
+main.start .hero h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -0.01em; text-wrap: balance; }
+main.start .hero h1 em { color: var(--accent); }
+main.start .lead { margin: 0; }
+.prompt { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 12px; border: 1px solid var(--line-strong); border-radius: 22px; background: var(--panel); transition: border-color .2s, box-shadow .2s; }
+.prompt:focus-within, .prompt.drop { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(232, 168, 92, 0.13), 0 20px 60px rgba(232, 168, 92, 0.06); }
+.prompt textarea { border: 0; background: transparent; padding: 0; resize: none; font: 21px/1.45 Georgia, "Iowan Old Style", serif; min-height: 96px; }
+.prompt textarea:focus { outline: none; }
+.prompt .attached { display: flex; gap: 8px; flex-wrap: wrap; }
+.prompt .att { display: inline-flex; align-items: center; gap: 8px; padding: 4px 4px 4px 4px; border-radius: 12px; background: var(--raised); font-size: 13px; color: var(--muted); }
+.prompt .att img { width: 36px; height: 36px; object-fit: cover; border-radius: 8px; }
+.prompt .row > .primary { min-height: 44px; padding: 0 24px; border-radius: 22px; }
+.prompt label.button { display: inline-flex; align-items: center; cursor: pointer; }
+.prompt label.button input { display: none; }
+button.bare, label.bare { border-color: transparent; color: var(--muted); min-height: 36px; padding: 0 12px; border-radius: 18px; }
+button.bare:hover, label.bare:hover { background: var(--raised); color: var(--text); }
+button.bare.rec { color: var(--bad); }
+.ideas { gap: 8px; }
+.chip { min-height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; color: var(--muted); border-color: var(--line); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chip:hover { color: var(--text); border-color: var(--accent); }
+main.start .more summary { cursor: pointer; color: var(--faint); font-size: 14px; }
+main.start .more .row { margin-top: 10px; }
+main.start .more label, .workshop-start label { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 14px; }
+.start-worlds { flex: 1; min-height: 0; overflow: auto; padding-bottom: 24px; }
+.start-worlds .worlds { margin-top: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
+main.workshop-start { overflow: auto; }
+main.workshop-start > * { flex: none; }
+main.workshop-start .start-worlds { flex: none; overflow: visible; }
+/* In a narrow column the things table drops the mask column; narrower still, each thing is a small card: its key over its controls. */
+.editor { container-type: inline-size; }
+@container (max-width: 640px) {
+  .things th:nth-child(4), .things td:nth-child(4):not([colspan]) { display: none; }
+  .things select { max-width: 110px; }
+}
+@container (max-width: 520px) {
+  table.things thead { display: none; }
+  table.things tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 6px; padding: 6px 0; border-top: 1px solid var(--line); }
+  table.things td { border: 0; padding: 0; }
+  table.things td:first-child, table.things tr.confirm td, table.things tr.add-thing td:nth-child(2) { grid-column: 1 / -1; }
+  table.things tr.add-thing td:last-child { display: none; }
+  table.things tr.confirm { border-top: 0; padding-top: 0; }
+  table.things input { min-width: 0; }
+}
+
+/* ── The atelier ───────────────────────────────────────────────────────────────────────────────────────────
+   The worlds rail on the left, then the page. A world is the conversation beside its stage. Paper is the
+   ground and the mat around paintings; type and controls stay plain. Nothing scrolls as a page. */
+body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .33 0 0 0 0 .22 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); }
+button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
+.atelier { flex: 1; min-height: 0; display: grid; grid-template-columns: 88px minmax(0, 1fr); }
+.atelier-page { min-width: 0; min-height: 0; display: flex; flex-direction: column; position: relative; }
+.atelier-page > main { flex: 1 1 0; min-height: 0; }
+.logo { color: var(--ink); flex: none; }
+
+.rail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 14px 0 10px; border-right: 1px solid var(--line); min-height: 0; }
+.rail .mark-link { display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); text-decoration: none; font-family: var(--display); font-size: 13px; }
+.rail .new { width: 40px; height: 40px; min-height: 0; padding: 0; border-radius: 50%; font-size: 20px; background: var(--panel); border-color: var(--line); }
+.rail .new:hover { border-color: var(--amber); }
+.rail-worlds { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 6px 0 12px; width: 100%; scrollbar-width: none; }
+.rail-world { position: relative; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--muted); font-size: 11px; line-height: 1.2; text-align: center; }
+.rail-world .th { width: 62px; height: 46px; border-radius: 5px; background: var(--raised) center / cover; box-shadow: 0 0 0 3px var(--panel), 0 2px 6px rgba(60, 40, 20, 0.22); transition: box-shadow .15s; }
+.rail-world:hover .th { box-shadow: 0 0 0 3px var(--panel), 0 0 0 4px var(--line-strong), 0 4px 10px rgba(60, 40, 20, 0.25); }
+.rail-world.on .th { box-shadow: 0 0 0 3px var(--amber), 0 2px 6px rgba(60, 40, 20, 0.22); }
+.rail-world.on { color: var(--text); }
+.rail-world .lb { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 76px; }
+.rail-world .ring { position: absolute; top: -8px; right: -10px; }
+.ring .track { fill: var(--panel); stroke: var(--line); stroke-width: 3; }
+.ring .done { fill: none; stroke: var(--amber); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 1s; }
+.rail-world .dot-needs { position: absolute; top: -6px; right: -6px; width: 17px; height: 17px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--panel); }
+
+.corner { position: absolute; top: 14px; right: 18px; display: flex; gap: 8px; z-index: 6; }
+.bell-wrap { position: relative; }
+.bell { width: 38px; min-height: 38px; padding: 0; border-radius: 50%; background: var(--panel); border-color: var(--line); color: var(--muted); display: grid; place-items: center; position: relative; }
+.bell.loud { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
+.bell b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 10.5px; line-height: 18px; }
+.bell:not(.loud) b { background: var(--amber); }
+.bell-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 360px; max-height: 70vh; overflow: auto; z-index: 20; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 44px rgba(60, 40, 20, 0.18); padding: 6px; }
+.bell-pop .detail { padding: 10px; margin: 0; }
+.bell-row { display: flex; align-items: center; gap: 2px; }
+.bell-row .bell-item { flex: 1; min-width: 0; }
+.bell-x { flex: none; align-self: flex-start; margin-top: 8px; }
+.bell-clear { display: block; margin: 4px 6px 4px auto; }
+.bell-item { display: flex; gap: 10px; align-items: center; padding: 9px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 13.5px; }
+.bell-item:hover { background: var(--bg); }
+.bell-item .th { width: 48px; height: 36px; border-radius: 4px; flex: none; background: var(--raised) center / cover; }
+.bell-pop .bell-item small { display: block; color: var(--muted); font-size: 12px; white-space: normal; overflow: visible; }
+.bell-item > span:last-child { flex: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
+.bell-item.needs strong { color: var(--bad); }
+.menu-wrap > .menu-button, .share-wrap > button { min-height: 38px; border-color: var(--line); background: var(--panel); }
+.top-menu { width: 280px; }
+.top-menu .share { width: 100%; }
+.top-menu .share > button, .top-menu > button { width: 100%; justify-content: flex-start; text-align: left; }
+
+/* The front door. */
+main.start { max-width: none; width: 100%; height: auto; padding: 24px max(24px, calc((100% - 780px) / 2)); justify-content: center; gap: 18px; overflow: auto; }
+main.start .hero { align-items: center; text-align: center; gap: 16px; }
+main.start .hero h1 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 400; }
+main.start .hero h1 em { color: var(--amber); font-style: italic; }
+main.start .lead { max-width: 60ch; }
+main.start .prompt { width: 100%; text-align: left; background: var(--panel); border-color: var(--line); border-radius: 18px; box-shadow: 0 1px 0 #fff inset, 0 18px 50px rgba(80, 55, 25, 0.12); }
+main.start .prompt:focus-within, main.start .prompt.drop { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(194, 122, 44, 0.12), 0 18px 50px rgba(80, 55, 25, 0.14); }
+main.start .prompt textarea { font-family: var(--display); }
+main.start .prompt .row > .primary { background: var(--amber); color: #fff; }
+main.start .ideas { justify-content: center; }
+main.start .chip { background: transparent; }
+main.start .more { align-self: center; }
+main.start .banner { align-self: stretch; }
+
+main.start .hero[hidden] { display: none; }
+main.start.reviewing { justify-content: flex-start; scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
+.video-picker { display: none; }
+.video-status { flex: 0 0 100%; order: 1; min-width: 0; padding-top: 14px; border-top: 1px solid var(--line); }
+.video-status video { display: block; border-radius: 12px; }
+.video-filename { display: flex; align-items: center; gap: 8px; overflow-wrap: anywhere; color: var(--muted); }
+.video-status details { margin-top: 12px; }
+/* Review feels like a drawing table: a note, loose studies, then the chosen world. */
+.idea-review { width: 100%; max-width: 780px; margin: 0 auto; padding-bottom: calc(150px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; outline: none; animation: review-in .4s ease-out; }
+.idea-review:focus-visible { outline: none; }
+.review-header { display: flex; align-items: center; gap: 10px; padding: 8px 0 18px; margin-bottom: 28px; color: var(--muted); border-bottom: 1px solid var(--line); }
+.review-header button { margin-right: auto; border: 0; padding-left: 0; background: transparent; }
+.review-header span { font: 18px var(--display); }
+.review-header .logo { width: 23px; }
+.idea-review-body { min-width: 0; }
+.review-style-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
+.review-style-actions .amber { background: var(--amber); color: #fffdf7; border-color: var(--amber); }
+.review-style-cancel { border-color: transparent; background: transparent; color: var(--muted); }
+.review-style-cancel:hover:not(:disabled) { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
+.review-question-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-top: 16px; }
+.review-question-actions:empty { display: none; }
+.review-question-actions .review-explore-looks { display: inline-flex; align-items: center; gap: 8px; border-color: transparent; background: transparent; color: #996022; }
+.review-question-actions .review-explore-looks:hover:not(:disabled) { background: #c47b2510; border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
+.review-text-options { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
+.review-text-option { display: inline-flex; align-items: baseline; gap: 9px; max-width: 100%; padding: 13px 18px; border-radius: 7px; background: var(--panel); text-align: left; font: 19px/1.4 var(--display); box-shadow: 0 3px 10px #59442808; white-space: normal; overflow-wrap: anywhere; }
+.review-text-option:hover:not(:disabled), .review-text-option.selected { border-color: var(--amber); background: #f7eddd; }
+.review-text-option.selected > span:first-child { color: var(--amber); font: 14px var(--body); }
+.review-text-option[hidden] { display: none; }
+.review-origin { position: relative; margin: 8px 8px 38px; padding: 22px 28px 24px; background: var(--panel); border: 1px solid #e2d8c7; border-radius: 3px 7px 5px 2px; box-shadow: 0 2px 3px #59442806, 0 14px 28px -20px #59442850; transform: rotate(-.45deg); }
+.review-origin::before { content: ''; position: absolute; top: -9px; left: calc(50% - 24px); width: 48px; height: 18px; background: #d9cbaa70; transform: rotate(3deg); border-inline: 1px solid #f5efdf80; }
+.review-kicker { display: block; font: 10px/1.4 var(--body); text-transform: uppercase; letter-spacing: .18em; color: #94734c; }
+.review-origin > .review-reply { padding: 0; margin: 9px 0 0; width: auto; max-width: none; background: transparent; color: var(--ink); font: italic 24px/1.45 var(--display); border-radius: 0; }
+.review-attachments { display: flex; gap: 9px; max-width: 100%; margin: 18px 0 0; width: fit-content; overflow-x: auto; padding: 4px; }
+.review-attachments img { flex: none; width: 64px; height: 60px; object-fit: contain; padding: 4px 4px 9px; border-radius: 2px; background: #fffcf4; box-shadow: 0 2px 5px #59442820; }
+.review-attachments img:nth-child(even) { transform: rotate(3deg); }
+.review-expand { display: block; color: var(--muted); margin-top: 8px; font: 12px var(--body); }
+.review-exchange { margin: 0 8px 24px; padding-left: 18px; border-left: 1px solid var(--line-strong); }
+.review-exchange .review-says { font-size: 18px; color: var(--muted); margin: 0 0 4px; }
+.review-says { font: 400 32px/1.2 var(--display); letter-spacing: -.02em; margin: 12px 0 24px; text-wrap: pretty; }
+.review-says em { color: var(--amber); font-weight: 400; }
+.review-reply { margin: 0; font: italic 21px/1.4 var(--display); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
+.review-thinking { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 22px; min-height: 292px; margin: -6px 0 16px; }
+.review-thinking-copy { padding: 12px 18px 24px 0; }
+.review-thinking .review-says { font-size: clamp(27px, 3vw, 37px); margin: 14px 0; }
+.review-aside { font: italic 16px/1.5 var(--display); color: var(--muted); margin: 0; }
+.review-ink-trail { display: block; width: 62px; height: 9px; margin-top: 22px; border-top: 2px solid var(--amber); border-radius: 50%; transform: rotate(-4deg); transform-origin: left; animation: review-ink-breathe 3s ease-in-out infinite; }
+.review-sketch { display: block; width: 100%; max-width: 440px; margin: 0 auto; }
+.review-sketch svg { display: block; width: 100%; height: auto; overflow: visible; }
+.sketch-leaf { transform-box: fill-box; transform-origin: center; animation: review-paper-drift 6s ease-in-out infinite; }
+.sketch-leaf-right { animation-delay: -3s; }
+.sketch-theatre { animation: review-theatre-in .8s ease-out both; }
+.sketch-sun { animation: review-sun 5s ease-in-out infinite; }
+.sketch-ink { stroke-dasharray: 1; stroke-dashoffset: 0; animation: review-pencil-line 5s ease-in-out infinite; }
+.sketch-ink-late { animation-delay: -.8s; }
+.review-sketch.compact { max-width: 180px; }
+.review-sketch.compact .sketch-leaf, .review-sketch.compact .sketch-pencil { display: none; }
+.review-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 16px; padding: 10px 10px 22px; margin-bottom: 10px; counter-reset: study; }
+.idea-card { --paper-angle: -1.3deg; position: relative; min-width: 0; padding: 9px 9px 18px; display: flex; flex-direction: column; gap: 8px; align-items: center; border: 1px solid #ded3bf; border-radius: 3px; background: #fffcf4; box-shadow: 0 2px 4px #5944280a, 0 14px 25px -14px #59442845; transform: rotate(var(--paper-angle)); transition: transform .25s, box-shadow .25s, border-color .2s; animation: review-study-in .5s ease-out both; }
+.idea-card:nth-child(2n) { --paper-angle: 1.2deg; animation-delay: .08s; }
+.idea-card:nth-child(3n) { --paper-angle: -.6deg; animation-delay: .16s; }
+.idea-card:hover:not(:disabled), .idea-card:focus-visible { transform: translateY(-6px) rotate(0); border-color: var(--amber); box-shadow: 0 5px 8px #5944280c, 0 18px 30px -12px #59442845; }
+.idea-card:active:not(:disabled) { transform: translateY(-2px) rotate(0); }
+.idea-card-picture { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; background: #eee8dc; overflow: hidden; margin-bottom: 6px; border-radius: 1px; }
+.idea-card-picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; animation: review-image-in .6s ease-out both; }
+.idea-card strong { padding: 0 10px; font: 400 21px/1.2 var(--display); color: var(--ink); }
+.idea-card small { font-size: 9px; letter-spacing: .08em; color: var(--muted); }
+.idea-card-placeholder { display: grid; justify-items: center; gap: 0; color: var(--faint); width: 100%; }
+.idea-card-placeholder > small { position: absolute; bottom: 8px; }
+.review-compose { display: flex; align-items: center; gap: 6px; border: 0; border-bottom: 1px solid var(--line-strong); padding: 3px; margin: 8px 0 18px; }
+.review-compose input { min-width: 0; flex: 1; border: 0; background: transparent; }
+.review-compose button { flex: none; }
+.review-reference { max-width: 150px; max-height: 110px; object-fit: contain; border-radius: 3px; margin-bottom: 12px; }
+.review-chosen { display: flex; gap: 6px; align-items: center; }
+.idea-review footer { display: flex; justify-content: center; align-items: center; padding: 9px; position: fixed; bottom: calc(16px + env(safe-area-inset-bottom)); left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); background: #e7ddcbcc; backdrop-filter: blur(18px); border: 1px solid #bca88740; border-radius: 32px; box-shadow: 0 8px 28px #59442816; margin: 0; z-index: 20; gap: 10px; flex-wrap: wrap; }
+.idea-review footer button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
+.review-spinner { width: 15px; height: 15px; flex: 0 0 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: review-spin .85s linear infinite; }
+@keyframes review-spin { to { transform: rotate(360deg); } }
+.idea-review footer button[aria-busy=true]:disabled { opacity: .85; cursor: progress; }
+.idea-review footer .ghost { border-color: transparent; color: var(--muted); font-size: 13px; }
+.idea-review footer .ghost:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
+.idea-review footer .primary { background: var(--amber); color: #fffdf7; border-color: var(--amber); padding: 13px 24px; box-shadow: 0 4px 10px #bc7a2420; }
+.idea-review footer .primary:hover:not(:disabled) { background: #ac6925; transform: translateY(-1px); }
+/* Keep the viewport dock outside a transformed containing block, including on entry. */
+@keyframes review-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes review-study-in { from { opacity: 0; transform: translateY(12px) rotate(0); } to { opacity: 1; transform: rotate(var(--paper-angle)); } }
+@keyframes review-image-in { from { opacity: 0; } to { opacity: 1; } }
+@keyframes review-paper-drift { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
+@keyframes review-theatre-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
+@keyframes review-pencil-line { 0%, 12% { stroke-dashoffset: 1; } 58%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
+@keyframes review-sun { 0%, 100% { opacity: .8; } 50% { opacity: .55; } }
+@keyframes review-ink-breathe { 0%, 100% { transform: rotate(-4deg) scaleX(.7); opacity: .5; } 50% { transform: rotate(-4deg) scaleX(1); opacity: 1; } }
+@media (max-width: 520px) {
+  .review-header { margin-bottom: 18px; padding-top: 2px; }
+  .review-header span { font-size: 14px; max-width: 130px; }
+  .review-header .logo { display: none; }
+  .review-says { font-size: 27px; }
+  .review-origin { margin: 8px 4px 24px; padding: 20px; }
+  .review-origin > .review-reply { font-size: 21px; }
+  .review-thinking { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: -10px; }
+  .review-thinking > .review-sketch { max-width: 260px; }
+  .review-thinking-copy { padding: 0 8px 16px; text-align: center; }
+  .review-thinking .review-says { font-size: 28px; margin: 10px 0; }
+  .review-ink-trail { margin: 16px auto 0; }
+  .review-cards { gap: 12px; padding: 8px 6px 20px; }
+  .idea-card { padding: 6px 6px 14px; }
+  .idea-card strong { font-size: 19px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .idea-review, .idea-review *, .idea-review *::before, .idea-review *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
+}
+
+/* A world: the conversation, then the stage. */
+main.world { display: grid; grid-template-columns: minmax(340px, 30%) minmax(0, 1fr); overflow: hidden; }
+@media (min-width: 1500px) { main.world { grid-template-columns: 440px minmax(0, 1fr); } }
+.convo { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 55%, transparent); }
+.convo > header { flex: none; padding: 16px 18px 10px; border-bottom: 1px solid var(--line); }
+.convo > header h1 { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.convo > header small { color: var(--muted); font-size: 12.5px; }
+.convo section.agent { flex: 1; min-height: 0; border: 0; border-radius: 0; background: none; }
+.convo section.agent > .gc-chat { --gc-bg: transparent; --gc-panel: var(--panel); --gc-border: var(--line); --gc-text: var(--text); --gc-muted: var(--muted); --gc-ok: var(--ok); --gc-error: var(--bad); --gc-font-size: 14.5px; min-height: 0; font-family: var(--body); background: none; }
+.convo section.agent .row { padding: 10px 14px 0; }
+.convo .gc-prompt { background: var(--ink); color: var(--panel); border: 0; border-radius: 16px 16px 4px 16px; }
+.convo .gc-prompt a { color: var(--panel); }
+.convo .replays { display: none; }
+.convo .agent-pick { font-family: var(--body); font-size: 13px; border: 0; background: transparent; color: var(--muted); padding: 2px 0; }
+.idea-bubble { margin: 4px 0 2px auto; max-width: 88%; width: fit-content; background: var(--ink); color: var(--panel); padding: 9px 13px; border-radius: 16px 16px 4px 16px; font-size: 14.5px; }
+.creator-idea .idea-bubble { white-space: pre-wrap; overflow-wrap: anywhere; }
+.creator-choices { max-width: 88%; margin: 8px 0 12px auto; color: var(--muted); font-size: 12px; }
+.creator-choices summary { cursor: pointer; padding: 6px 0; }
+.creator-choices summary:hover { color: var(--ink); }
+.creator-choices dl { margin: 8px 0 0; padding: 4px 0 4px 14px; border-left: 2px solid var(--line-strong); }
+.creator-choices dl > div + div { margin-top: 14px; }
+.creator-choices dt { font-size: 12px; color: var(--muted); }
+.creator-choices dd { margin: 3px 0 0; color: var(--ink); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
+
+.wcard { display: block; margin: 6px 0; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--text); transition: border-color .15s; }
+.wcard.click { cursor: pointer; }
+.wcard.click:hover, .wcard.on { border-color: var(--amber); }
+.wcard .k { display: flex; gap: 6px; align-items: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
+.wcard .k .by { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--indigo); }
+.wcard h3 { font-family: var(--display); font-weight: 500; font-size: 17px; margin: 0 0 4px; }
+.wcard p { margin: 0 0 6px; font-size: 13.5px; color: var(--muted); }
+.wcard.ask { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
+.wcard.ask .k { color: var(--bad); }
+.wcard.ask section.failed { border: 0; padding: 0; background: none; }
+.wcard .btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
+.wcard .bar { height: 5px; border-radius: 3px; background: var(--raised); overflow: hidden; margin: 6px 0; }
+.wcard .bar i { display: block; height: 100%; background: var(--amber); transition: width 1s linear; }
+.wcard .thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
+.wcard .thumb { aspect-ratio: 1200 / 896; min-height: 0; padding: 0; border-radius: 4px; border: 2px solid transparent; background: var(--raised) center / cover; display: grid; place-items: center; font-size: 11px; color: var(--muted); }
+.wcard .thumb.on { border-color: var(--amber); }
+/* A place verify let through: playable, even while the build still makes the others. */
+.wcard .thumb.ready { position: relative; }
+.wcard .thumb.ready::after { content: '▶'; position: absolute; right: 4px; bottom: 3px; font-size: 10px; line-height: 1; padding: 3px 4px; border-radius: 6px; background: var(--ok); color: #fff; }
+.wcard .thumb.trouble { box-shadow: inset 0 0 0 2px var(--bad); }
+/* Any number of figures fits the card: each shrinks in width (drawn whole, feet on one line), none spills over. */
+.wcard .lineup-mini { display: flex; align-items: flex-end; gap: 4px; height: 84px; overflow: hidden; }
+.wcard .lineup-mini img { flex: 0 1 auto; min-width: 0; height: 100%; width: auto; object-fit: contain; object-position: bottom; }
+.wcard.play { padding: 0; overflow: hidden; border: 0; background: var(--ink) center / cover; color: #fff; }
+.wcard.play .in { display: flex; align-items: flex-end; gap: 10px; padding: 68px 14px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); }
+.wcard.play .k { color: #e9dcc6; }
+.wcard.play h3 { color: #fff; margin: 0; }
+.world-footer { display: flex; flex-direction: column; gap: 2px; }
+.world-note { font-size: 12.5px; color: var(--muted); margin: 4px 0; }
+
+.theatre { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 18px 16px; }
+.stage-top { flex: none; display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; min-width: 0; }
+.stage-top h2 { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.stage-top small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.stage-top > button { min-height: 38px; padding: 0 14px; white-space: nowrap; flex: none; }
+.stage-top > button.ghost { background: var(--panel); border-color: var(--line); }
+@media (max-width: 1250px) { .stage-top small { display: none; } }
+.stage-body { flex: 1; min-height: 0; display: flex; flex-direction: column; container-type: size; }
+.stage-body:fullscreen { background: #000; padding: 0; }
+.stage-body:fullscreen .mat .frame { padding: 0; box-shadow: none; }
+.mat { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; position: relative; }
+.mat .frame { position: relative; width: min(100cqw, 100cqh * 1200 / 896); aspect-ratio: 1200 / 896; padding: 14px; background: var(--panel); border-radius: 3px; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.15), 0 22px 50px rgba(60, 40, 20, 0.22); }
+.mat .pic { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--raised); }
+.mat .pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
+.mat .pic .empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-family: var(--display); }
+.mat .pic .empty strong { font-size: 28px; font-weight: 400; color: var(--text); }
+.mat .glow { position: absolute; inset: 0; background: rgba(255, 214, 150, 0.42); mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-mode: luminance; pointer-events: none; mix-blend-mode: screen; }
+.mat .spot { position: absolute; min-height: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: pointer; }
+.mat .spot:hover, .mat .spot:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.85); outline-offset: 0; box-shadow: 0 0 0 4px var(--amber); }
+.mat .spot .name { position: absolute; left: 0; top: -26px; background: var(--panel); color: var(--text); font-size: 12px; padding: 2px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
+.mat.lineup { gap: clamp(16px, 4cqw, 48px); align-items: flex-end; padding-bottom: 6cqh; }
+.mat.lineup .who { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 0; padding: 10px; border: 2px solid transparent; border-radius: 14px; background: none; color: var(--muted); font-size: 13.5px; }
+.mat.lineup .who:hover, .mat.lineup .who:focus-visible { border-color: var(--amber); color: var(--text); }
+.mat.lineup .who img { height: 52cqh; max-width: 26cqw; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(60, 40, 20, 0.25)); }
+.paper-panel { flex: 1; min-height: 0; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
+.build-on-stage { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
+.build-on-stage > .stage-live { flex: 1; min-height: 0; container-type: size; }
+.build-places { display: flex; flex-direction: column; gap: 4px; flex: none; min-width: 0; }
+.build-places-head { display: flex; align-items: center; gap: 10px; min-height: 0; }
+.build-places-head .sums { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
+.build-places-head .sum { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
+.build-places-head .sum i, .place-chip .state { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--line); }
+.sum.sum-working i, .place-chip.st-working .state, .place-chip.st-repairing .state { background: var(--amber); box-shadow: 0 0 0 0 rgba(194, 122, 44, 0.6); animation: chip-live 1.4s ease-out infinite; }
+.sum.sum-waiting i, .place-chip.st-waiting .state { background: #e2bf8e; }
+.sum.sum-queued i, .place-chip.st-queued .state { background: transparent; border: 1.5px dashed var(--muted); }
+.sum.sum-done i, .place-chip.st-done .state { background: var(--ok); }
+.sum.sum-failed i, .place-chip.st-failed .state { background: var(--bad); }
+@keyframes chip-live { 70% { box-shadow: 0 0 0 7px rgba(194, 122, 44, 0); } 100% { box-shadow: 0 0 0 0 rgba(194, 122, 44, 0); } }
+.build-follow { flex: none; }
+.build-place-row { position: relative; min-width: 0; }
+.build-place-list { display: flex; align-items: stretch; gap: 7px; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 40px; padding: 3px; scrollbar-width: thin; }
+.build-place-row.more-left .build-place-list { mask-image: linear-gradient(to right, transparent 0, #000 56px); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px); }
+.build-place-row.more-right .build-place-list { mask-image: linear-gradient(to left, transparent 0, #000 56px); -webkit-mask-image: linear-gradient(to left, transparent 0, #000 56px); }
+.build-place-row.more-left.more-right .build-place-list { mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 56px, #000 calc(100% - 56px), transparent 100%); }
+.scroll-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 32px; min-height: 32px; padding: 0; border-radius: 50%; background: var(--panel); font-size: 20px; line-height: 1; box-shadow: 0 2px 8px rgba(60, 40, 20, 0.2); }
+.scroll-arrow.left { left: 0; } .scroll-arrow.right { right: 0; }
+.place-chip { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 0; padding: 4px 12px 4px 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--text); text-align: left; scroll-snap-align: start; }
+.place-chip .thumb { position: relative; flex: none; }
+.place-chip img, .place-chip .none { display: block; width: 38px; height: 28px; object-fit: cover; border-radius: 999px 6px 6px 999px; background: var(--line); }
+.place-chip .state { position: absolute; right: -3px; bottom: -2px; border: 2px solid var(--panel); width: 11px; height: 11px; box-sizing: border-box; }
+.place-chip.st-queued .state { border: 1.5px dashed var(--muted); background: var(--panel); }
+.place-chip .words { display: flex; flex-direction: column; line-height: 1.15; white-space: nowrap; }
+.place-chip .words b { font-weight: 500; font-size: 13.5px; }
+.place-chip .words small { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); }
+.place-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); animation: pulse 1s ease-in-out infinite; }
+.place-chip.st-queued { opacity: 0.62; }
+.place-chip.st-queued img { filter: grayscale(0.7); }
+.place-chip.st-working { border-color: var(--amber); background: linear-gradient(90deg, #fbf1e2, var(--panel) 60%, #fbf1e2) 0 0 / 200% 100%; animation: flow 2.4s linear infinite; }
+.place-chip.st-working .words small, .place-chip.st-repairing .words small { color: var(--accent); font-weight: 500; }
+.place-chip.st-done .words small { color: var(--ok); }
+.place-chip.st-failed { border-color: color-mix(in srgb, var(--bad) 45%, var(--line)); }
+.place-chip.st-failed .words small { color: var(--bad); }
+.place-chip[aria-pressed=true] { outline: 2px solid var(--amber); outline-offset: 1px; background-color: #f3e5cf; }
+@media (prefers-reduced-motion: reduce) { .place-chip.st-working, .place-chip .dot, .place-chip .state, .sum i { animation: none !important; } }
+@media (max-width: 540px) { .build-follow { padding-inline: 8px; font-size: 12px; } .place-chip .words b { font-size: 12.5px; } }
+.build-on-stage > .stage-live .frame { width: min(100cqw, (100cqh - 8px) * 1200 / 896); border-radius: 3px; box-shadow: 0 1px 2px rgba(60, 40, 20, 0.15), 0 22px 50px rgba(60, 40, 20, 0.22); outline: 14px solid var(--panel); margin-top: 14px; }
+.stage-body.play > .play { flex: 1; min-height: 0; }
+.stage-body.play > .play .screen { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }
+.stage-body.play > .play iframe { width: min(100cqw, calc(100cqh * 1200 / 896)); }
+.stage-body.play > .play > .row { flex-wrap: wrap; }
+.drawer.by-hand { width: min(1100px, 92vw); }
+.drawer > .notes, .drawer.by-hand > .editor { flex: 1; min-height: 0; overflow: auto; }
+
+/* Opening cards and turn cards ride in genaicode notices: no dashed box, the chat's own font. */
+.convo .gc-notice:has(> .wcard, > .idea-bubble, > .creator-idea, > div > .wcard) { align-self: stretch; background: none; border: 0; padding: 0; color: inherit; font-size: inherit; white-space: normal; font-family: var(--body); }
+.convo .gc-notice .wcard, .convo .gc-notice .wcard * { font-family: var(--body); }
+.convo .gc-notice .wcard h3 { font-family: var(--display); }
+.wcard .thumb { height: auto; width: 100%; align-self: start; overflow: hidden; }
+.stage-top h2 { flex: 1 1 auto; }
+.stage-top > :not(h2) { flex: none; }
+@media (max-width: 1100px) { .stage-top > button.ghost.wide { display: none; } }
+
+/* The Studio's own words to the agent: a quiet line in the conversation, never the person's ink bubble. */
+.convo .gc-prompt:has(> .studio-note) { align-self: stretch; background: none; color: var(--muted); border: 0; border-radius: 0; box-shadow: none; padding: 0; max-width: none; }
+.convo .studio-note { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
+.convo .studio-note summary { display: flex; gap: 6px; align-items: baseline; padding: 2px 0; }
+.convo .studio-note summary::before { content: 'ⓘ'; color: var(--faint); }
+.convo .studio-note summary::after { content: 'show'; margin-left: auto; color: var(--faint); text-decoration: underline; text-underline-offset: 2px; }
+.convo .studio-note[open] summary::after { content: 'hide'; }
+.convo .studio-note[open] { padding: 8px 12px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--text); }
+
+/* ☰: whole-diorama and studio operations as a quiet list; one row each, a hover on every row. */
+.share-menu.top-menu { width: 260px; gap: 0; padding: 6px; background: var(--panel); border-color: var(--line-strong); box-shadow: 0 12px 34px rgba(60, 40, 20, 0.18); max-height: calc(100vh - 90px); overflow: auto; }
+.top-menu .menu-head { margin: 6px 10px 2px; font-size: 11px; }
+.top-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
+.top-menu .mi, .top-menu .share > button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 14px; font-weight: 400; text-align: left; justify-content: flex-start; text-decoration: none; cursor: pointer; }
+.top-menu .mi:hover, .top-menu .share > button:hover, .top-menu .share > button[aria-expanded="true"] { background: var(--raised); }
+.top-menu .mi.danger { color: var(--bad); }
+.top-menu .share-menu { position: static; width: auto; margin: 2px 0 6px; box-shadow: none; background: var(--bg); max-height: 50vh; }
+.mi-confirm { margin: 2px 0; padding: 10px; border-radius: 8px; background: color-mix(in srgb, var(--bad) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--line)); }
+.mi-confirm p { margin: 0 0 8px; font-size: 12.5px; color: var(--muted); }
+.mi-confirm .row { gap: 6px; }
+button.danger-fill { background: var(--bad); color: #fff; border: 0; font-weight: 600; }
+.top-menu .mi-confirm .mi.go { width: auto; display: inline-flex; padding: 0 12px; color: #fff; }
+/* A switch, not a raw checkbox. */
+.mi.switch { justify-content: space-between; }
+.budget .switch-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text); cursor: pointer; }
+.budget.blender { gap: 8px; }
+.budget.blender p { margin: 0; }
+.mi.switch input, .switch-row input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 32px; height: 18px; margin: 0; border-radius: 9px; background: var(--line-strong); cursor: pointer; transition: background .15s; }
+.mi.switch input::after, .switch-row input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
+.mi.switch input:checked, .switch-row input:checked { background: var(--ok); }
+.mi.switch input:checked::after, .switch-row input:checked::after { transform: translateX(14px); }
+.switch-row input:disabled { opacity: .5; cursor: default; }
+/* Hand tools sit on the stage they work on, not in ☰. */
+.stage-body { position: relative; }
+.stage-tool { position: absolute; right: 8px; bottom: 6px; z-index: 2; min-height: 32px; padding: 0 12px; font-size: 13px; border-color: var(--line); background: color-mix(in srgb, var(--panel) 88%, transparent); color: var(--muted); backdrop-filter: blur(4px); }
+.stage-tool:hover { color: var(--text); background: var(--panel); border-color: var(--line-strong); }
+
+/* Every button answers the pointer. Class rules for special buttons (spots, thumbs, the cast) still win. */
+button:where(:hover:not(:disabled)) { background-color: var(--raised); border-color: var(--line-strong); }
+button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 82%, var(--panel)); }
+button.amber:hover:not(:disabled) { background: color-mix(in srgb, var(--amber) 86%, #000); }
+button.danger-fill:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 86%, #000); }
+.stage-top > button.ghost:hover:not(:disabled), .menu-wrap > .menu-button:hover, .share-wrap > button:hover, .bell:hover { background: var(--raised); border-color: var(--line-strong); }
+button:not(.spot, .thumb, .who):active:not(:disabled) { transform: translateY(1px); }
+.convo .studio-note summary::after { flex: none; white-space: nowrap; }
+.top-menu .mi-confirm .mi.go { background: var(--bad); border-radius: 16px; min-height: 30px; font-weight: 600; }
+.top-menu .mi-confirm .mi.go:hover { background: color-mix(in srgb, var(--bad) 86%, #000); }
+.convo .agent-says { margin: -2px 0 4px 46px; font-size: 14.5px; color: var(--text); }
+
+/* Pictures in the conversation open over the Studio. */
+.agent .pic-open { min-height: 0; padding: 0; border: 0; border-radius: 6px; background: none; cursor: zoom-in; }
+.agent .gc-tool summary .tool-pic { flex: none; margin-left: auto; min-height: 0; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: none; overflow: hidden; cursor: zoom-in; }
+.agent .gc-tool summary .tool-pic img { display: block; height: 34px; width: auto; max-width: 64px; object-fit: cover; }
+.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 32px; background: rgba(28, 24, 20, 0.78); animation: enter-fade .15s ease-out; cursor: zoom-out; }
+.lightbox img { max-width: calc(100vw - 64px); max-height: calc(100vh - 64px); object-fit: contain; border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); cursor: default; }
+.lightbox .close { position: absolute; top: 16px; right: 16px; width: 40px; padding: 0; border-radius: 50%; background: var(--panel); border-color: var(--line); }
+
+/* Handing the conversation to another agent: a quiet control in the header, and a line where it changed hands. */
+.convo .agent-hand { font-family: var(--body); font-size: 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); padding: 2px 8px; margin-left: 8px; cursor: pointer; }
+.convo .agent-hand:hover:not(:disabled) { color: var(--ink); border-color: var(--muted); }
+.convo .handover { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 12px; color: var(--muted); }
+.convo .handover::before, .convo .handover::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
+
+/* Start: many photos (a class's drawings), the camera that keeps taking them, and the quiet options under More. */
+main.start .prompt .attached { max-height: 96px; overflow: auto; }
+main.start .prompt .att { padding: 3px 3px 3px 3px; gap: 2px; }
+main.start .prompt .att > button.bare { min-height: 0; padding: 0; border: 0; background: none; line-height: 0; }
+main.start .prompt .att > button.remove-photo { min-width: 20px; min-height: 24px; line-height: 1; }
+main.start .shoot { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; background: rgba(43, 39, 35, 0.72); backdrop-filter: blur(6px); }
+main.start .shoot .camera { width: min(960px, 100%); padding: 14px; border-radius: 18px; background: var(--panel); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); }
+main.start .shoot .camera video { max-width: none; max-height: calc(100dvh - 260px); object-fit: contain; }
+main.start .shoot .camera .row { align-items: center; gap: 10px; }
+main.start .shoot .camera .primary { background: var(--amber); color: #fff; border-color: var(--amber); }
+main.start .shoot .taken { display: flex; gap: 6px; max-width: min(960px, 100%); overflow-x: auto; padding: 2px; }
+main.start .shoot .taken img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 2px solid #fff; flex: none; }
+main.start .more { display: flex; flex-direction: column; align-items: center; gap: 12px; }
+main.start .more summary { list-style: none; padding: 6px 14px; border-radius: 999px; color: var(--muted); font-size: 13px; user-select: none; }
+main.start .more summary::-webkit-details-marker { display: none; }
+main.start .more summary::after { content: " ▾"; color: var(--faint); }
+main.start .more[open] summary::after { content: " ▴"; }
+main.start .more summary:hover { background: var(--raised); color: var(--text); }
+main.start .more .fields { display: grid; grid-template-columns: 1.4fr 0.8fr 1.2fr; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 8px 24px rgba(80, 55, 25, 0.06); }
+main.start .more .fields label { text-align: left; display: flex; flex-direction: column; align-items: stretch; gap: 5px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
+main.start .more .fields input, main.start .more .fields select { min-width: 0; height: 38px; padding: 0 12px; font-size: 14px; letter-spacing: normal; text-transform: none; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
+main.start .more .fields select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: right 15px top 17px, right 10px top 17px; background-size: 5px 5px; background-repeat: no-repeat; cursor: pointer; }
+main.start .more .fields input:focus, main.start .more .fields select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(194, 122, 44, 0.15); }
+@media (max-width: 640px) { main.start .more .fields { grid-template-columns: 1fr; } }
+
+/* The build bar is clickable: a phase's name puts what it made on the stage, a segment what that step made. */
+.pipeline .phases li .label { min-height: 0; padding: 0; border: 0; border-radius: 6px; background: none; font: inherit; color: inherit; text-align: left; }
+.pipeline .phases li.open .label { cursor: pointer; }
+.pipeline .phases li.open .label:hover .name { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
+.pipeline .phases li.open .bar { transition: height 0.15s, margin 0.15s; }
+.pipeline .phases li.open:hover .bar { height: 12px; margin: -2px 0; }
+.pipeline .seg { position: absolute; top: -6px; bottom: -6px; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
+.pipeline .seg.later { cursor: help; }
+.pipeline .seg.later:hover { background: rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 1px var(--line-strong); }
+.pipeline .seg:hover, .pipeline .seg:focus-visible { background: rgba(255, 255, 255, 0.35); box-shadow: inset 0 0 0 1.5px var(--ink); outline: none; }
+
+/* A button's ask in the chat: its gist in the bubble, the whole wording under it on a click. */
+.ask-note summary { cursor: pointer; list-style: none; }
+.ask-note summary::-webkit-details-marker { display: none; }
+.ask-note summary::after { content: ' ▸'; opacity: 0.55; font-size: 0.85em; }
+.ask-note[open] summary::after { content: ' ▾'; }
+.ask-note p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; opacity: 0.72; white-space: pre-wrap; word-break: break-word; }
+
+/* By hand: whatever the drawer holds (a place's editor, the cast) scrolls inside it, under its title row. */
+.drawer.by-hand > :not(.row) { flex: 1; min-height: 0; overflow: auto; }
+.mat.lineup .who-at { position: relative; display: flex; flex-direction: column; align-items: center; }
+.drawer.by-hand .cast-view { display: flex; flex-direction: column; gap: 14px; }
+.drawer.by-hand .cast { scroll-margin-top: 0; }
+
+/* The cast stage: figures on a row, the story's items on a shelf under them. */
+.mat.lineup { flex-direction: column; align-items: center; justify-content: center; gap: 4cqh; padding-bottom: 3cqh; }
+.mat.lineup .figures { --gap: clamp(8px, calc(16cqw / var(--per-row, 1)), 48px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 2cqh var(--gap); max-width: 96cqw; }
+.mat.lineup .who-at { min-width: 0; max-width: calc((96cqw - var(--gap) * (var(--per-row, 1) - 1)) / var(--per-row, 1)); }
+.mat.lineup .who { max-width: 100%; }
+.mat.lineup .who span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mat.lineup .who img { height: calc(44cqh / var(--rows, 1) + 6cqh * (var(--rows, 1) - 1) / var(--rows, 1)); max-width: 100%; }
+.mat.lineup .shelf { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 92cqw; padding-top: 16px; border-top: 1px solid var(--line); }
+.mat.lineup .item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 0; width: 92px; padding: 6px 4px; border: 2px solid transparent; border-radius: 12px; background: none; color: var(--muted); font-size: 12px; line-height: 1.25; text-align: center; }
+.mat.lineup .item:hover, .mat.lineup .item:focus-visible { border-color: var(--amber); color: var(--text); }
+.mat.lineup .item img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(60, 40, 20, 0.2)); }
+.mat.lineup .item .noicon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: var(--raised); color: var(--faint); font-size: 18px; }
+/* Cast details: signs for what a character has, a round play button, and the one opened from the stage. */
+.cast .who .has { display: inline-flex; gap: 4px; }
+.cast .who .sign { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--raised); font-size: 14px; cursor: help; }
+.cast .who button.round { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; font-size: 12px; }
+.cast .who.focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(194, 122, 44, 0.15); scroll-margin-top: 8px; }
+
+/* A long conversation: the world pinned under the agent's header once its opening cards scrolled away. */
+.world-strip { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: 0 6px 16px rgba(80, 55, 25, 0.08); animation: drawer-in 0.15s ease-out; }
+.world-strip button { min-height: 0; padding: 0; border: 2px solid transparent; background: none; }
+.world-strip .ws-story { flex: 1; min-width: 0; padding: 4px 6px; border-radius: 8px; font-family: var(--display); font-size: 14px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.world-strip .ws-places { display: flex; align-items: center; gap: 5px; flex: none; padding: 3px 5px; border-radius: 8px; }
+.world-strip .ws-stack { position: relative; display: block; width: 55px; height: 38px; }
+.world-strip .ws-sheet { position: absolute; top: 3px; left: 0; width: 40px; height: 30px; border: 2px solid var(--panel); border-radius: 5px; background: var(--raised) center / cover; box-shadow: 0 1px 3px rgba(60, 40, 20, 0.25); transform: rotate(-7deg); }
+.world-strip .ws-sheet:nth-child(2) { left: 7px; top: 2px; transform: rotate(4deg); }
+.world-strip .ws-sheet:nth-child(3) { left: 14px; top: 4px; transform: rotate(10deg); }
+.world-strip .ws-count, .world-strip .ws-building { color: var(--muted); font-size: 12px; white-space: nowrap; }
+.world-strip .ws-building { color: var(--accent); }
+.wcard .thumb.pending-place { border: 1px dashed var(--amber); color: var(--accent); }
+.world-strip .ws-cast { display: flex; align-items: flex-end; height: 42px; padding: 0 4px; border-radius: 8px; flex: none; }
+.world-strip .ws-cast img { height: 100%; max-width: 26px; object-fit: contain; }
+.world-strip .ws-cast img + img { margin-left: -6px; }
+.world-strip .ws-cast img:nth-child(even) { transform: translateY(-3px); }
+.world-strip button:hover, .world-strip button.on { border-color: var(--amber); background: var(--raised); }
+
+/* Layer chips over the picture: dark glass, so their words are light whatever the page's theme. */
+.stage-live .layers button { color: rgba(255, 255, 255, 0.78); background: rgba(20, 18, 16, 0.55); }
+.stage-live .layers button:hover:not(:disabled) { color: #fff; background: rgba(20, 18, 16, 0.75); }
+.stage-live .layers .on, .stage-live .layers .on:hover:not(:disabled) { color: #fff; background: rgba(20, 18, 16, 0.85); box-shadow: inset 0 0 0 1.5px var(--amber); }
+/* The same for the caption and the place's name at the bottom, and the model tag inside the caption. */
+.stage-live figcaption { color: #fff; background: rgba(20, 18, 16, 0.72); }
+.stage-live figcaption .model { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.14); }
+.stage-live .where { color: rgba(255, 255, 255, 0.85); background: rgba(20, 18, 16, 0.6); }
+
+/* Activity: one row per job with its steps folded under it, the agent's and your clicks folded per run. */
+.drawer.log .mi.switch { display: flex; align-items: center; gap: 10px; justify-content: flex-start; font-size: 13px; color: var(--muted); }
+.drawer.log .activity { flex: 1; min-height: 0; overflow: auto; list-style: none; margin: 6px 0 0; padding: 0 2px 0 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--body); font-size: 13px; }
+.activity > li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; color: var(--text); white-space: normal; }
+.activity .a-sign { flex: none; width: 24px; text-align: center; font-size: 15px; line-height: 20px; }
+.activity .a-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
+.activity .a-what small { font-size: 11.5px; color: var(--faint); }
+.activity .a-job { display: block; padding: 0; border: 1px solid var(--line); background: var(--panel); }
+.activity .a-job summary { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; cursor: pointer; list-style: none; }
+.activity .a-job summary::-webkit-details-marker { display: none; }
+.activity .a-job strong { font-weight: 600; }
+.activity .a-state { flex: none; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--raised); color: var(--muted); white-space: nowrap; }
+.activity .a-state.done { color: var(--ok); }
+.activity .a-state.running { color: var(--amber); }
+.activity .a-state.failed { color: #fff; background: var(--bad); }
+.activity .a-job.failed { border-color: var(--bad); }
+.activity .a-error { margin: 0 12px 8px 44px; color: var(--bad); font-size: 12.5px; word-break: break-word; }
+.activity .a-steps { list-style: none; margin: 0; padding: 0 12px 10px 44px; display: flex; flex-direction: column; gap: 2px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--muted); }
+.activity .a-steps li { white-space: pre-wrap; word-break: break-word; }
+.activity .a-steps li.err { color: var(--bad); }
+.activity .a-steps li.step { color: var(--text); }
+.activity .a-acts .a-what span { color: var(--muted); }
+.activity .a-line.err { color: var(--bad); }
+.activity .a-line.play .a-what span { color: var(--ok); font-style: italic; }
+.activity .a-more { flex: none; width: 16px; text-align: center; color: var(--faint); line-height: 20px; }
+.activity .a-more::before { content: '▸'; }
+.activity details[open] .a-more::before { content: '▾'; }
+
+/* A cast step at work: the character being made, each picture as it lands, then the result moving. */
+.cast-work { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
+.cw-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+.cw-head strong { font-family: var(--display); font-size: 18px; font-weight: 400; }
+.cw-wait { flex: 1; display: grid; place-items: center; color: var(--muted); font-family: var(--display); font-size: 18px; text-align: center; padding: 30px; }
+.cw-wait span { animation: pulse 2.4s ease-in-out infinite; }
+.cw-focus { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 12px; background: var(--panel); box-shadow: 0 1px 2px rgba(60, 40, 20, 0.12); }
+.cw-who { display: flex; gap: 14px; align-items: flex-start; }
+.cw-who > img, .cw-who > .noimg { width: 84px; height: 110px; object-fit: contain; flex: none; border-radius: 8px; background: var(--raised); }
+.cw-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.cw-text h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 22px; }
+.cw-stages { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
+.cw-stages li { padding: 3px 10px; border-radius: 999px; background: var(--raised); color: var(--muted); font-size: 12.5px; }
+.cw-stages li small { opacity: 0.7; margin-left: 2px; }
+.cw-stages li.on { background: var(--amber); color: #2a1d0a; animation: pulse 2.4s ease-in-out infinite; }
+.cw-stages li.ok { color: var(--text); }
+.cw-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 40%), 1fr)); gap: 10px; }
+.cw-slots figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
+.cw-slots img, .cw-slots .to-come { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; background: var(--raised); }
+.cw-slots img { animation: land 0.5s ease-out; }
+.cw-slots .to-come { background: repeating-linear-gradient(135deg, var(--raised) 0 14px, transparent 14px 28px); animation: pulse 2.4s ease-in-out infinite; }
+.cw-slots figcaption { font-size: 12px; color: var(--muted); text-align: center; }
+.cw-others { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
+.cw-others button { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; }
+.cw-others img, .cw-others .noimg { width: 30px; height: 38px; object-fit: contain; border-radius: 4px; background: var(--raised); }
+.cw-others small { color: var(--muted); }
+@keyframes land { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
+.cw-stages li.stop { background: #f3d9d2; color: #8a2b17; }
+.cw-slots .to-come.still { animation: none; opacity: 0.5; }
+.stage-top .back { flex: none; width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; }
+table.things tr.focus td { background: color-mix(in srgb, var(--amber) 16%, transparent); }
+/* The editor scrolls as a whole: none of its rows (the tool tabs above all) is squeezed to fit. */
+.editor > * { flex-shrink: 0; }
+/* Every select keeps room for its chevron, whatever padding a panel gives it. */
+select:not([multiple]) { padding-right: 28px !important; }
+.lightbox .prev, .lightbox .next { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; padding: 0; border-radius: 50%; font-size: 26px; line-height: 1; background: var(--panel); border-color: var(--line); }
+.lightbox .prev { left: 16px; } .lightbox .next { right: 16px; }
+.lightbox .count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; }
+.cast-work img[data-lightbox], .figure-preview canvas[data-lightbox] { cursor: zoom-in; }
+.step-work .sw-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px; }
+.step-work .sw-cards li { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--panel); box-shadow: 0 1px 2px rgba(60, 40, 20, 0.12); min-width: 0; }
+.step-work .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; align-items: start; }
+.step-work .pair figure { margin: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.step-work .pair figcaption { font-size: 12px; color: var(--muted); text-align: center; }
+.step-work .sw-crop { position: relative; width: 100%; overflow: hidden; border-radius: 8px; background: var(--raised); cursor: zoom-in; }
+.step-work .sw-crop img { position: absolute; max-width: none; height: auto; display: block; }
+.step-work .sw-crop img.dim { filter: brightness(0.42) saturate(0.6); }
+.step-work .sw-crop img.cut { mask-mode: luminance; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; filter: drop-shadow(0 0 3px rgba(255, 230, 170, 0.9)); }
+.step-work .sw-icon, .step-work .pair .to-come, .step-work .sw-none { width: 100%; aspect-ratio: 1; max-height: 180px; object-fit: contain; border-radius: 8px; background: var(--raised); }
+.step-work .sw-icon { animation: land 0.5s ease-out; cursor: zoom-in; }
+.step-work .pair .to-come { background: repeating-linear-gradient(135deg, var(--raised) 0 14px, transparent 14px 28px); animation: pulse 2.4s ease-in-out infinite; }
+.step-work .pair .to-come.still { animation: none; opacity: 0.6; }
+.step-work .sw-none { display: grid; place-items: center; color: var(--muted); font-size: 13px; text-align: center; padding: 8px; box-sizing: border-box; }
+.step-work .words { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.step-work .words strong { font-family: var(--display); font-weight: 400; font-size: 17px; }
+.step-work .words .detail { font-size: 12.5px; overflow-wrap: anywhere; }
+.step-work .sw-sounds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
+.step-work .sw-sounds li { display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(0, 240px); gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--panel); }
+.step-work .sw-sounds .kind { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
+.step-work .sw-sounds .what { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.step-work .sw-sounds audio { width: 100%; height: 30px; }
+.step-work .sw-sounds li.fail .detail:last-child { color: var(--red, #b0412e); }
+/* History in its own drawer: one card per job, the newest on top. */
+.drawer.history { display: flex; flex-direction: column; }
+.drawer.history > .history-list, .drawer.history > .note { flex: 1; min-height: 0; overflow: auto; }
+.history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.history-list li { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
+.convo header small.to-build { cursor: pointer; }
+.convo header small.to-build:hover { color: var(--text); text-decoration: underline; }
+/* The Studio's own "are you sure": a card over a dimmed page; typing the slug wakes a delete. */
+.sure-back { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(28, 24, 20, 0.45); animation: enter-fade .12s ease-out; }
+.sure { width: min(460px, 100%); display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(40, 25, 10, 0.3); }
+.sure h2 { margin: 0; font-size: 20px; }
+.sure p { margin: 0; color: var(--muted); }
+.sure label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
+.sure code { color: var(--text); font-weight: 600; }
+.sure input { font-size: 15px; }
+/* Style in its own drawer: now beside a picture of it, presets as cards, wide words. */
+.drawer.style { width: min(760px, 94vw); display: flex; flex-direction: column; }
+.style-view { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
+.sv-now { display: flex; gap: 14px; align-items: flex-start; }
+.sv-now img { width: 220px; aspect-ratio: 1200 / 896; object-fit: cover; border-radius: 10px; cursor: zoom-in; flex: none; }
+.sv-now p { margin: 4px 0; }
+.sv-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; }
+.sv-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 12px; text-align: left; border-radius: 12px; border: 1px solid var(--line); background: var(--raised); color: var(--text); white-space: normal; }
+.sv-card span { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
+.sv-card.on { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); background: var(--panel); }
+.sv-words { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
+.sv-words textarea { width: 100%; font-size: 15px; color: var(--text); }
+.sv-est { margin: 0; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--amber) 14%, transparent); }
+@media (max-width: 600px) { .sv-now { flex-direction: column; } .sv-now img { width: 100%; } }
+
+/* Line icons (icons.tsx) sit on the text's baseline and take its colour. */
+.icon { vertical-align: -3px; flex: none; }
+button > .icon, .detail > .icon { margin-right: 2px; }
+.a-sign .icon { vertical-align: middle; }
+.cast .who .sign .icon { vertical-align: 0; }
+
+/* The 4 painted sides under a 3D model preview. */
+.fig-sides { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
+.fig-sides .row { gap: 8px; flex-wrap: wrap; }
+.fig-sides figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.fig-sides img { width: 96px; height: 128px; object-fit: contain; background: var(--raised); border-radius: 8px; cursor: zoom-in; }
+.fig-sides figcaption { font-size: 12px; color: var(--muted, inherit); }
+
+/* A contact sheet before production, kept inside the start conversation. */
+.idea-storyboard { margin-top: 28px; }
+.storyboard-pitch { margin: 0 0 8px; color: var(--muted); line-height: 1.5; }
+.concept-group { margin: 30px 0; }
+.concept-group h3 { font: italic 21px var(--display); color: var(--muted); margin: 0 0 14px; }
+.concept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; align-items: start; }
+.concept-grid.place { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.concept-card { min-width: 0; padding: 9px 9px 14px; border-radius: 3px; background: #fffcf4; border: 1px solid #ded3bf; box-shadow: 0 2px 4px #59442808, 0 12px 24px -16px #59442840; overflow: hidden; animation: review-image-in .5s ease-out both; }
+.concept-picture { position: relative; aspect-ratio: 4 / 3; background: #eee5d6; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
+.concept-picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
+.concept-placeholder { display: grid; justify-items: center; color: #81786c; font-size: 12px; }
+.concept-watermark { position: absolute; bottom: 10px; right: 10px; font-size: 10px; letter-spacing: .16em; padding: 4px 7px; border: 1px solid #fff9; border-radius: 2px; color: #66543b; background: #fff9e9cf; pointer-events: none; transform: rotate(-5deg); }
+.concept-loading { position: absolute; left: 8px; right: 8px; bottom: 9px; display: grid; justify-items: center; gap: 6px; padding: 10px; border-radius: 3px; background: #faf6eef2; font-size: 12px; box-shadow: 0 2px 8px #59442815; }
+.concept-caption { padding: 14px 14px 8px; display: grid; gap: 4px; }
+.concept-caption strong { font: 400 23px var(--display); line-height: 1.25; overflow-wrap: anywhere; }
+.concept-caption > span { color: #81786c; font-size: 12px; }
+.concept-card > button, .concept-error { margin: 4px 12px 0; }
+.concept-error details { padding: 8px 0; overflow-wrap: anywhere; }
+.concept-versions { display: flex; gap: 6px; padding: 4px 12px; overflow-x: auto; }
+.concept-versions button { padding: 0; width: 44px; height: 34px; flex: 0 0 44px; overflow: hidden; border-radius: 7px; border: 2px solid transparent; }
+.concept-versions button[aria-pressed=true] { border-color: #c47b25; }
+.concept-versions img { width: 100%; height: 100%; object-fit: contain; }
+.idea-review footer { gap: 10px; flex-wrap: wrap; }
+@media (max-width: 540px) {
+  .concept-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
+  .concept-grid.place { grid-template-columns: minmax(0, 1fr); }
+  .concept-caption { padding: 10px; }
+  .concept-caption strong { font-size: 19px; }
+  .concept-card > button { font-size: 12px; padding: 8px 10px; margin-left: 8px; }
+  .idea-review footer { justify-content: center; border-radius: 24px; gap: 4px; }
+  .idea-review footer button { font-size: 14px; padding: 12px 16px; }
+}
+
+/* A decision keeps its picture on the table; opening it reveals the original alternatives. */
+.idea-card[hidden] { display: none; }
+.idea-card-caption { display: grid; gap: 7px; }
+.idea-card.selected { border-color: var(--amber); }
+.idea-card-zoom { position: absolute; right: 8px; bottom: 8px; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fff9e9e6; color: #66543b; box-shadow: 0 1px 4px #59442830; cursor: zoom-in; opacity: .82; transition: opacity .15s, transform .15s, background .15s; }
+.idea-card:hover .idea-card-zoom, .idea-card-zoom:focus-visible { opacity: 1; }
+.idea-card-zoom:hover { background: #fff; color: var(--ink); transform: scale(1.1); }
+.idea-card-zoom:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
+.review-exchange.is-collapsed .idea-card-zoom { right: 4px; bottom: 4px; width: 24px; height: 24px; }
+.review-exchange.is-collapsed .idea-card-zoom .icon { width: 14px; height: 14px; }
+.idea-card-mark { position: absolute; right: 8px; top: 8px; width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: #fff; font: 14px var(--body); box-shadow: 0 1px 4px #59442825; }
+.review-decision-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
+.review-decision-heading .review-says { margin: 0; }
+.review-decision-heading > button { flex: none; border-color: transparent; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
+.review-exchange.is-collapsed .review-cards { display: block; padding: 10px 6px 8px; margin: 0; }
+.review-exchange.is-collapsed .idea-card { flex-direction: row; align-items: center; width: min(100%, 420px); padding: 7px; gap: 14px; text-align: left; animation: none; }
+.review-exchange.is-collapsed .idea-card-picture { width: 116px; flex: none; margin: 0; }
+.review-exchange.is-collapsed .idea-card-caption { min-width: 0; padding: 6px 8px 6px 0; }
+.review-exchange.is-collapsed .idea-card strong { font-size: 21px; padding: 0; }
+.review-exchange.is-editing { border-left-color: var(--amber); }
+.review-written-choice { border: 0; border-bottom: 1px dashed var(--line-strong); border-radius: 0; padding: 8px 0; font: italic 21px/1.4 var(--display); text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
+@media (max-width: 520px) {
+  .review-exchange.is-collapsed .idea-card-picture { width: 88px; }
+  .review-exchange.is-collapsed .idea-card strong { font-size: 18px; }
+  .review-decision-heading { align-items: center; }
+  .review-decision-heading > button { padding-inline: 8px; }
+}
+
+
+/* The sketch table stays alive while two brushes work through the queue. */
+.concept-art { animation: concept-art-reveal .85s cubic-bezier(.2,.65,.25,1) both; }
+.concept-previous { pointer-events: none; }
+.concept-placeholder { width: 100%; height: 100%; box-sizing: border-box; padding: 8px; gap: 5px; grid-template-rows: minmax(0, 1fr) auto auto; align-items: center; text-align: center; }
+.concept-placeholder .review-sketch.compact { width: auto; height: 100%; max-width: 70%; max-height: 120px; }
+.concept-placeholder .review-sketch.compact svg { width: 100%; height: 100%; }
+.concept-brush-trail { position: relative; display: block; width: 64px; height: 3px; border-radius: 50%; background: #c18a3e24; overflow: hidden; }
+.concept-brush-trail::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--amber); transform-origin: left; animation: concept-brush-stroke 2s ease-in-out infinite; }
+.is-queued .concept-brush-trail { opacity: .45; }
+.is-queued .concept-brush-trail::after { animation-duration: 3.5s; }
+.concept-paper-stack { position: relative; display: block; width: 80px; height: min(82px, 100%); margin: 0; }
+.concept-paper-stack i { position: absolute; inset: 8px 12px; border: 1px solid #d0c2a9; border-radius: 2px; background: #faf6ed; box-shadow: 0 5px 8px #5944280b; transform: rotate(-8deg); }
+.concept-paper-stack i:nth-child(2) { transform: translate(5px, -3px) rotate(8deg); }
+.concept-paper-stack i:last-child { transform: translate(0, -6px) rotate(-2deg); animation: concept-paper-breathe 3.5s ease-in-out infinite; }
+.concept-paper-stack i:last-child::after { content: ''; position: absolute; inset: 12px 10px; border-bottom: 1px solid #d7c8ae; border-top: 1px solid #d7c8ae; opacity: .5; }
+.concept-card { transition: box-shadow .25s ease, border-color .25s ease; }
+.concept-card:hover { border-color: #cdb488; box-shadow: 0 3px 8px #5944280b, 0 16px 28px -16px #59442850; }
+@keyframes concept-art-reveal { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
+@keyframes concept-brush-stroke { 0% { transform: translateX(-100%) scaleX(.3); opacity: .25; } 45% { transform: translateX(0) scaleX(.85); opacity: .85; } 100% { transform: translateX(100%) scaleX(.4); opacity: .25; } }
+@keyframes concept-paper-breathe { 0%, 100% { transform: translate(0, -6px) rotate(-2deg); } 50% { transform: translate(0, -10px) rotate(1deg); } }
+.concept-zoom { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: zoom-in; }
+.concept-zoom:hover { background: transparent; }
+.concept-zoom > span { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #fff9e9df; color: #66543b; font-size: 21px; }
+.concept-zoom:focus-visible { outline: 2px solid var(--amber); outline-offset: -3px; }
+.concept-card > .concept-change { margin-left: 4px; }
+.concept-edit { margin: 14px 3px 0; padding: 14px 7px 0; border-top: 1px solid var(--line-strong); }
+.concept-edit label { display: grid; gap: 8px; font: italic 19px var(--display); }
+.concept-edit textarea { width: 100%; min-width: 0; resize: vertical; box-sizing: border-box; padding: 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #faf6ee; color: var(--ink); font: 14px/1.5 var(--body); }
+.concept-edit textarea:focus { outline: 2px solid #c47b2540; border-color: var(--amber); }
+.concept-edit > p { margin: 8px 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
+.concept-edit-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
+.concept-edit-tools button { padding: 8px 10px; font-size: 12px; }
+.concept-reference { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
+.concept-reference img { display: block; width: 60px; height: 60px; object-fit: contain; }
+.concept-direction { margin: 2px 14px 10px; font: italic 14px/1.4 var(--display); color: var(--muted); overflow-wrap: anywhere; max-height: 6em; overflow: auto; }
+.concept-grid.character .concept-card.is-editing { grid-column: span 2; }
+.concept-card.is-editing .concept-picture { max-height: 300px; }
+@media (max-width: 540px) {
+  .concept-placeholder { gap: 4px; font-size: 11px; }
+  .concept-placeholder .review-sketch.compact { max-width: 100px; }
+  .concept-paper-stack { width: 60px; height: 48px; margin: 4px 0; }
+}
+
+.custom-look { margin: 20px 0; }
+.custom-look .concept-edit { margin: 0; }
+.custom-look > [role=status] { display: flex; align-items: center; gap: 10px; color: var(--muted); }
+.custom-look-preview { max-width: 480px; margin: 20px auto; text-align: center; }
+.custom-look-preview img { width: 100%; display: block; border-radius: 5px; }
+.custom-look-preview p { color: var(--muted); font-size: 14px; line-height: 1.5; }
+
+.storyboard-expand { margin: 24px 0; }
+.storyboard-expand form { max-width: 600px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
+.storyboard-expand label { display: grid; gap: 8px; font: italic 20px var(--display); }
+.storyboard-expand textarea { width: 100%; min-height: 76px; box-sizing: border-box; padding: 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: #faf6ee; color: var(--ink); font: 14px/1.5 var(--body); }
+
+/* The places strip above a place on stage and atop the Places drawer: the same chips as the build room. */
+.theatre > .build-places { margin-bottom: -2px; }
+.drawer.by-hand > .build-places { flex: none; overflow: visible; margin-bottom: 4px; }
+.cw-faces { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; overflow: auto; min-height: 0; }
+.cw-faces > li { display: flex; gap: 12px; align-items: flex-start; padding: 8px; border-radius: 10px; background: var(--raised); }
+.cw-faces > li > img { width: 72px; height: 96px; object-fit: contain; flex: none; }
+.cw-faces > li.fail .detail { color: var(--warn, #b5651d); }
+.mouths .sheets { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 4px 0 0; }
+.mouths .sheets li { display: flex; flex-direction: column; align-items: center; gap: 2px; }
+.mouths canvas { border-radius: 6px; background: var(--paper, #fff); max-width: 120px; }
+
+.pipeline .head .calls-kicker { font-size: 12px; cursor: help; }
+.pipeline .head .count .of { color: var(--faint, var(--muted)); font-size: 0.85em; }