/* The creation tool's own look (spec 0202). The type, the ground and the `.px` pixel-corner
   box come from assets/shell.css; plan 22 sets the sizes. Class prefixes: mt- the frame and
   world, cw- the chat. */

/* the tool takes the window: the page's nav and footer step aside */
html[data-make-tool] .hm-nav, html[data-make-tool] .hm-foot, html[data-make-tool] .hm-flockwrap { display: none !important; }
html[data-make-tool] body { overflow: hidden; }
html[data-make-tool] [data-make-root] { position: fixed; inset: 0; z-index: 30; display: block; width: auto; max-width: none;
  margin: 0; padding: 0; background: #0b0a09; text-align: left; } /* the address page's <main class="dead"> centres its text */

.mt { position: absolute; inset: 0; overflow: hidden; background: #2b2a2e; color: #fff;
  font: 600 14.5px/1.45 'Nunito', 'Nunito Fallback', system-ui, sans-serif; }
.mt-ico { display: block; flex: none; image-rendering: pixelated; }

/* ---- the world slot ---- */
.mt-world { position: absolute; inset: 0; }
.mt-world iframe { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .5s; }
.mt-world[data-world="live"] iframe { opacity: 1; pointer-events: auto; }
.mt-still { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }

/* ---- the rail: 44 px tiles, 14 px from the right and bottom ---- */
.mt-rail { position: fixed; right: 14px; bottom: 14px; z-index: 40; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mt-tile { box-sizing: border-box; width: 44px; display: grid; place-items: center; padding: 0; border: 0; margin: 0;
  background: rgba(12,12,14,.88); color: #fff; text-decoration: none; cursor: pointer; font: inherit; }
.mt-tile:hover { --px-line: rgba(255,255,255,.4); }
.mt-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.mt-home, .mt-tools { height: 44px; }
.mt-home .mt-ico { opacity: 1; }
.mt-tools .mt-ico { opacity: .86; }
.mt-tab { height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; padding: 0 2px; }
.mt-tab .mt-ico { opacity: .86; }
.mt-tab span { font: 700 9px/1.15 'Nunito', 'Nunito Fallback', system-ui, sans-serif; color: rgba(255,255,255,.75); text-align: center; }
.mt-tip { position: fixed; z-index: 45; pointer-events: none; background: rgba(12,12,14,.92); color: #fff; padding: 9px 12px; white-space: nowrap;
  font: 600 13px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; opacity: 0; transition: opacity .12s ease; }
.mt-tip.on { opacity: 1; }
.mt-panel { position: fixed; right: 66px; z-index: 41; width: 220px; box-sizing: border-box; padding: 14px 16px 16px;
  background: rgba(12,12,14,.92); color: #fff; font: 700 13px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; }
.mt-panel[hidden] { display: none; }
.mt-panel label { display: flex; justify-content: space-between; align-items: baseline; }
.mt-volval { font-variant-numeric: tabular-nums; color: rgba(255,255,255,.7); }
.mt-vol { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 16px; margin: 12px 0 0; padding: 0; background: transparent; cursor: pointer; --v: 80%; }
.mt-vol:focus { outline: none; }
.mt-vol:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #eb3e28; }
.mt-vol::-webkit-slider-runnable-track { height: 6px; border: 0; border-radius: 0;
  background: linear-gradient(90deg, #eb3e28 0, #eb3e28 var(--v), rgba(255,255,255,.16) var(--v), rgba(255,255,255,.16) 100%); }
.mt-vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 8px; height: 16px; margin-top: -5px; border: 0; border-radius: 0; background: #fff;
  clip-path: polygon(2px 0, 6px 0, 6px 2px, 8px 2px, 8px 14px, 6px 14px, 6px 16px, 2px 16px, 2px 14px, 0 14px, 0 2px, 2px 2px); }
.mt-vol::-moz-range-track { height: 6px; border: 0; border-radius: 0; background: rgba(255,255,255,.16); }
.mt-vol::-moz-range-progress { height: 6px; background: #eb3e28; }
.mt-vol::-moz-range-thumb { width: 8px; height: 16px; border: 0; border-radius: 0; background: #fff; }

/* ---- the Tab bar: 56 px tall, items 40 px, 8 px apart ---- */
.mt-barwrap { position: fixed; left: 0; right: 0; top: 16px; z-index: 42; display: flex; justify-content: center; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.mt[data-open="true"] .mt-barwrap { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.mt-bar { pointer-events: auto; display: flex; align-items: center; gap: 8px; box-sizing: border-box; height: 56px; padding: 0 8px;
  background: rgba(12,12,14,.92); color: #fff; font: 600 14.5px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; white-space: nowrap; user-select: none; -webkit-user-select: none; }
.mt-btn, .mt-title { box-sizing: border-box; height: 40px; display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0 14px 0 12px;
  border: 0; background: transparent; color: rgba(255,255,255,.86); font: inherit; letter-spacing: .01em; cursor: pointer; --px-line: transparent;
  transition: background-color .15s ease, color .15s ease; }
.mt-btn:hover, .mt-title:hover, .mt-btn.active { background: rgba(255,255,255,.08); color: #fff; }
.mt-btn:focus-visible { --px-line: #fff; }
.mt-btn:active { background: rgba(255,255,255,.12); }
.mt-btn .mt-ico { width: 20px; height: 20px; opacity: .72; transition: opacity .15s ease; }
.mt-btn:hover .mt-ico, .mt-btn:focus-visible .mt-ico, .mt-btn.active .mt-ico { opacity: 1; }
.mt-btn span { display: block; line-height: 16px; margin-top: -1px; }
.mt-title { cursor: text; padding: 0 14px; margin-left: 20px; font-weight: 700; color: #fff; }
.mt-title.editing { background: rgba(255,255,255,.08); --px-line: rgba(255,255,255,.3); }
.mt-name { display: block; max-width: 260px; min-width: 24px; overflow: hidden; text-overflow: ellipsis; line-height: 18px; margin-top: -3px; outline: 0;
  caret-color: #eb3e28; -webkit-user-select: text; user-select: text; }
.mt-title.editing .mt-name { text-overflow: clip; max-width: 420px; }
/* the bug button: a quiet 32 px square before Publish (28 px after the title, 8 before Publish), its 14 px beetle
   (option A, a 7 by 7 grid at 2 px a cell) muted until hovered. The glyph is one swappable entry, `bug`, in icons.mjs. */
.mt-bug { width: 32px; height: 32px; margin-left: 20px; padding: 0; justify-content: center; position: relative; }
.mt-bug .mt-ico { width: 14px; height: 14px; opacity: .45; }
.mt-bug.pressed { background: #fff; color: #0c0c0e; --px-line: #fff; }
.mt-bug.pressed .mt-ico { opacity: 1; }
.mt-bug.pressed::after { content: ""; position: absolute; inset: -6px; border: 2px solid rgba(255,255,255,.55); pointer-events: none; animation: mt-bug-ring .7s steps(5, end) both; }
@keyframes mt-bug-ring { from { inset: 0; opacity: 1; } to { inset: -8px; opacity: 0; } }
.mt-bugtip { position: fixed; z-index: 46; padding: 9px 12px; background: rgba(12,12,14,.94); color: #fff; font-weight: 600; font-size: 13px; line-height: 1;
  white-space: nowrap; --px-line: rgba(255,255,255,.2); opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.mt-bugtip.on { opacity: 1; }
/* the blink after the tap: a white wash and a pixel frame round the world, for a moment */
.mt-snap { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.mt-snap b { position: absolute; inset: 0; background: #fff; opacity: 0; animation: mt-flash .5s ease-out both; }
.mt-snap i { position: absolute; width: 30px; height: 30px; border: 0 solid rgba(255,255,255,.8); animation: cw-in .3s ease both; }
.mt-snap i:nth-of-type(1) { left: 76px; top: 18px; border-width: 3px 0 0 3px; }
.mt-snap i:nth-of-type(2) { right: 76px; top: 18px; border-width: 3px 3px 0 0; }
.mt-snap i:nth-of-type(3) { left: 76px; bottom: 18px; border-width: 0 0 3px 3px; }
.mt-snap i:nth-of-type(4) { right: 76px; bottom: 18px; border-width: 0 3px 3px 0; }
@keyframes mt-flash { 0% { opacity: .5; } 100% { opacity: 0; } }
/* Publish: muted until the summary says everything is built, then white; quiet once tapped */
.mt-pub { padding: 0 18px; justify-content: center; font-weight: 700; color: rgba(255,255,255,.38); background: rgba(255,255,255,.06); cursor: not-allowed; }
.mt-pub:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.38); }
.mt-pub.ready { background: #fff; color: #0c0c0e; cursor: pointer; }
.mt-pub.ready:hover { background: #ececee; color: #0c0c0e; }
.mt-pub.ready:focus-visible { --px-line: #eb3e28; }
.mt-pub[data-state="sent"] { color: rgba(255,255,255,.7); animation: mt-pub-wait 1.6s ease-in-out infinite; }
.mt-pub[data-state="done"] { color: rgba(255,255,255,.55); }
@keyframes mt-pub-wait { 50% { background: rgba(255,255,255,.14); } }
@media (prefers-reduced-motion: reduce) { .mt-pub[data-state="sent"] { animation: none; } }

/* ---- the chat: the column of the approved design page ----
   The column is the input's own width, sized from the screen and not from the tab bar: 0.8 x 0.8 x 1.07 of
   min(902 px, the screen less 64) x 1.1 for Saaim's later ask of 10 percent wider, which is 680 px at 1440 (x 380 to 1060). The creator's bubbles end at the
   input's right edge; the sprite's bubbles and every card under them start at its left edge. The ONE sprite sits in the gutter 8 px left of that edge (36 px, x 336 to 372 at 1440), centred on the typing bar; no
   message carries an avatar. A bubble is at most 458 px wide. */
.mt-chat { position: fixed; left: 0; right: 0; top: 84px; bottom: 24px; z-index: 42; display: flex; justify-content: center; align-items: flex-end; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.mt[data-open="true"] .mt-chat { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.cw-panel { --cw-col: calc(min(902px, 100vw - 64px) * .7539); pointer-events: auto; width: min(var(--cw-col), calc(100vw - 32px)); max-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px;
  color: #fff; text-align: left; font: 600 14.5px/1.45 'Nunito', 'Nunito Fallback', system-ui, sans-serif; }
.cw-say { min-height: 0; flex: 0 1 auto; display: flex; }
.cw-say[hidden], .cw-media[hidden], .cw-choices[hidden], .cw-answers[hidden], .cw-jobs[hidden], .cw-more[hidden], .cw-send[hidden] { display: none; }
.cw-media, .cw-choices, .cw-answers, .cw-jobs, .cw-inrow { flex: none; }
/* the history: a messaging app's. It grows with the conversation, newest at the bottom just above the input, until it
   reaches just below the top bar (the chat box above stops at 84 px from the top, the bar ends at 72), and then older
   messages scroll up. A 34 px
   strip at the top fades only while older messages are hidden above (data-more); the newest messages sit at the bottom,
   so their text is never in it. */
.cw-hist { flex: 1; min-width: 0; min-height: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.cw-hist::-webkit-scrollbar { display: none; }
.cw-hist[data-more="true"] { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34px); mask-image: linear-gradient(to bottom, transparent 0, #000 34px); }
.cw-row { position: relative; flex: none; display: flex; align-items: flex-end; animation: cw-in .22s ease both; }
.cw-row[data-who="you"] { justify-content: flex-end; padding-left: 56px; }
.cw-inrow { position: relative; }
.cw-sprite { position: absolute; left: -44px; top: 50%; width: 36px; height: 36px; margin-top: -18px; display: grid; place-items: center; background: rgba(12,12,14,.92); }
.cw-sprite svg { width: 20px; height: 20px; }
.cw-msg { box-sizing: border-box; min-width: 0; max-width: min(458px, 100%); padding: 10px 14px; background: rgba(12,12,14,.92);
  color: rgba(255,255,255,.92); text-align: left; text-wrap: pretty; overflow-wrap: anywhere; }
.cw-msg[data-who="you"] { background: rgba(66,66,76,.95); color: #fff; }
.cw-row[data-state="working"] .cw-msg { color: rgba(255,255,255,.7); font-style: italic; }
@keyframes cw-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cw-media { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.cw-item { flex: none; box-sizing: border-box; width: 200px; padding: 10px 12px; background: rgba(12,12,14,.92); color: rgba(255,255,255,.9); }
.cw-item img, .cw-item video { display: block; width: 100%; max-height: 120px; object-fit: cover; margin-bottom: 6px; }
.cw-item audio { display: block; width: 100%; margin-bottom: 6px; }
.cw-head { margin: 0 0 2px; font-weight: 700; }
.cw-body, .cw-note, .cw-cue { margin: 0; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.7); }
.cw-cue { text-transform: uppercase; font-size: 11.5px; letter-spacing: .04em; }
.cw-opts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cw-opt { padding: 2px 8px; background: rgba(255,255,255,.08); font-size: 12.5px; }
/* The cards and the button (docs/creation-tool/chat-rows.css, the approved look): ONE system for everything a message shows outside its text box. The column is
   the input's own width; a card is a shade lighter than a bubble; the picture is cut from the creator's own screen; and there is ONE button for every tappable
   answer and choice: 40 px, a solid fill, no outline box, a row splits the column evenly. */
.mt-chat { --k-line: rgba(255,255,255,.18); --k-hi: rgba(255,255,255,.72); --k-dim: rgba(255,255,255,.66); --k-red: #eb3e28; --k-btn: #2a2a32; }
.cw-choices, .cw-answers { width: 100%; box-sizing: border-box; animation: cw-in .22s ease both; }
.cw-choices { filter: drop-shadow(0 4px 0 rgba(0,0,0,.38)); }
.cw-choices .ck-grid { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 8px; width: 100%; }
.cw-choices .ck { position: relative; box-sizing: border-box; max-width: 100%; margin: 0; padding: 12px; border: 0; background: rgba(22,22,27,.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  color: #fff; text-align: left; font: 600 14px/20px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; --px-line: var(--k-line); }
.cw-choices .ck-grid > .ck { width: auto; min-width: 0; }
.cw-choices .ans-card { display: flex; flex-direction: column; gap: 8px; cursor: default; transition: opacity .15s ease; }
.cw-choices .ans-card.dim { opacity: .45; }
.cw-choices .ck-im { position: relative; display: block; overflow: hidden; width: 100%; height: 176px; background: #0b1230 center / cover no-repeat; }
.cw-choices .ck-none { display: grid; place-items: center; box-sizing: border-box; width: 100%; height: 176px; padding: 0 12px; background: #0b1230; }
.cw-choices .ck-none .k-m { text-align: center; }
.cw-choices .k-m { display: block; font: 700 13px/16px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; color: var(--k-dim); text-wrap: balance; }
.ck-btns { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 8px; width: 100%; }
.ck-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 0; margin: 0; padding: 0 16px; box-sizing: border-box; border: 0; background: var(--k-btn);
  box-shadow: none; color: #fff; font: 800 14px/20px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; white-space: nowrap; text-decoration: none; cursor: pointer; --px-line: transparent;
  transition: background-color .15s ease, color .15s ease; }
.ck-btn .lb { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ck-btn:hover, .ck-btn:focus-visible { background: #fff; color: #0c0c0e; outline: 0; }
.cw-choices .ans-card .ck-btn { margin-top: auto; width: 100%; }   /* the buttons sit on one line across the cards, whatever sits above them */
.cw-field { display: flex; align-items: flex-end; gap: 8px; box-sizing: border-box; min-height: 48px; padding: 0 8px 0 16px; background: rgba(12,12,14,.92); }
.cw-field:focus-within { --px-line: rgba(255,255,255,.3); }
.cw-box { flex: 1; min-width: 0; display: block; resize: none; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; line-height: 20px; padding: 14px 0; max-height: 140px; caret-color: #eb3e28; }
.cw-box::placeholder { color: rgba(255,255,255,.4); }
.cw-send { flex: none; height: 32px; margin-bottom: 8px; padding: 0 14px; border: 0; background: #fff; color: #0c0c0e; font: 700 13px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; cursor: pointer; --px-line: transparent; }
.cw-send:hover { background: #ececee; }

/* the bug bar (spec 0211): ONE box under the message it follows, in the history and outside the text box:
   "Bug report saved", "Show the team in Discord" under it, and Copy link on the right */
.cw-bugbar { flex: none; align-self: stretch; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 12px 14px; background: rgba(12,12,14,.92); color: #fff; animation: cw-in .22s ease both; }
.cw-bb-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cw-bb-t { font-weight: 800; line-height: 18px; }
.cw-bb-link { width: fit-content; white-space: nowrap; font-weight: 700; font-size: 13px; line-height: 16px; color: rgba(255,255,255,.72); text-decoration: none; }
.cw-bb-link:hover, .cw-bb-link:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; outline: 0; }
.cw-bb-copy { flex: none; height: 32px; padding: 0 14px; border: 0; background: rgba(66,66,76,.95); color: #fff; font: 700 13px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; cursor: pointer; --px-line: transparent; }
.cw-bb-copy:hover { background: rgba(96,96,108,.95); }
.cw-bb-copy:focus-visible { --px-line: #eb3e28; outline: 0; }

/* a picture or short video being added (spec 0205): a small picture above the box with an x, the upload button under it. Never inside the box. */
.cw-drop[hidden], .cw-tools[hidden] { display: none; }
.cw-drop, .cw-tools { flex: none; display: flex; align-items: center; gap: 8px; }
.cw-drop { align-self: flex-start; padding: 6px; background: rgba(12,12,14,.92); animation: cw-in .2s ease both; }
.cw-thumb { display: block; width: 64px; height: 64px; object-fit: cover; background: #0b1230; }
.cw-x { flex: none; align-self: flex-start; width: 24px; height: 24px; padding: 0; border: 0; background: rgba(255,255,255,.12); color: #fff; font: 700 13px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; cursor: pointer; --px-line: transparent; }
.cw-x:hover { background: rgba(255,255,255,.22); }
.cw-up { width: 32px; height: 32px; padding: 0; border: 0; background: rgba(12,12,14,.92); color: rgba(255,255,255,.85); font: 700 18px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; cursor: pointer; --px-line: transparent; }
.cw-up:hover { background: rgba(38,38,44,.96); color: #fff; }
.cw-file { display: none; }
.mt-chat[data-drop="true"] .cw-field { --px-line: rgba(255,255,255,.55); }   /* the drop zone lights only for a picture or video being dragged over it */

/* what is being made: labelled chips. The row is the column less the 56 px "+N" button and its gap, so the
   chips grow with the column: exactly three whole chips (about 203 px at 1440, 8 px apart), and the "+N" ends
   at the column's right edge. The row snaps chip by chip and fades at its edge while more are past it. */
.cw-jobs { display: flex; gap: 8px; width: 100%; }
.cw-jobs-row { flex: 0 0 calc(100% - 56px); min-width: 0; display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
.cw-jobs-row::-webkit-scrollbar { display: none; }
.cw-jobs[data-more="true"] .cw-jobs-row { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 12px), transparent); }
.cw-chip { flex: 0 0 calc((100% - 16px) / 3); min-width: 0; display: flex; align-items: center; gap: 8px; height: 48px; box-sizing: border-box; padding: 0 12px 0 8px;
  background: rgba(12,12,14,.92); scroll-snap-align: start; animation: cw-in .3s ease both; }
.cw-more { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 0; padding: 0; background: #2a2a32; color: #fff; cursor: pointer;
  font: 800 14px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; --px-line: transparent; }
.cw-more:hover, .cw-more:focus-visible { background: #fff; color: #0c0c0e; outline: 0; }
.cw-spr { position: relative; flex: none; width: 44px; height: 32px; }
.cw-s { position: absolute; left: 0; bottom: 4px; width: 22px; height: 22px; animation: cw-bob 1.2s ease-in-out var(--dl, 0s) infinite; }
.cw-s svg { display: block; width: 22px; height: 22px; }
.cw-tool { position: absolute; left: 26px; bottom: 4px; width: 16px; height: 16px; transform-origin: 50% 100%; animation: cw-wag 1s ease-in-out var(--dl, 0s) infinite; }
.cw-tool svg { display: block; width: 16px; height: 16px; }
.cw-task { flex: 1; min-width: 0; font: 600 13px/16px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; color: rgba(255,255,255,.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes cw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes cw-wag { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(8deg); } 75% { transform: rotate(-6deg); } }

/* ---- the windows (P5): Characters, Script, Worlds ----
   One box under the Tab bar (which ends at 72 px), 24 px from the bottom; the chat (history and
   input) is hidden while one is open and comes back when it closes; the world behind
   dims. mw- the frame, mwc- characters, mws- script, mww- worlds. */
.mw-scrim { position: fixed; inset: 0; z-index: 39; background: rgba(5,5,9,.55); opacity: 0; visibility: hidden;
  transition: opacity .15s ease, visibility 0s linear .15s; }
.mw-scrim.on { opacity: 1; visibility: visible; transition: opacity .15s ease, visibility 0s; }
.mw { position: fixed; left: 0; right: 0; top: 88px; bottom: 24px; z-index: 43; margin: 0 auto; box-sizing: border-box;
  width: min(1200px, calc(100vw - 176px)); min-width: 560px; max-width: calc(100vw - 32px); display: flex; flex-direction: column;
  background: rgba(12,12,14,.92); color: #fff; text-align: left; --px-line: rgba(255,255,255,.38);
  font: 600 14.5px/1.45 'Nunito', 'Nunito Fallback', system-ui, sans-serif; }
.mt[data-window][data-open] .mt-chat { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.mw[hidden] { display: none; }
.mw-hd { flex: none; height: 48px; box-sizing: border-box; display: flex; align-items: center; padding: 0 12px 0 24px; border-bottom: 1px solid rgba(255,255,255,.14); }
.mw-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font: 700 14px/20px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; }
.mw-crumb { margin: 0; padding: 0; border: 0; background: none; color: #fff; font: inherit; }
.mw-up { color: rgba(255,255,255,.55); cursor: pointer; transition: color .15s ease; }
.mw-up:hover, .mw-up:focus-visible { color: #fff; outline: 0; }
.mw-chev { display: flex; opacity: .45; }
.mw-count { margin-left: auto; margin-right: 12px; font: 600 13px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; color: rgba(255,255,255,.5); white-space: nowrap; }
.mw-x { flex: none; width: 32px; height: 32px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; background: transparent;
  color: rgba(255,255,255,.72); cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.mw-x:hover, .mw-x:focus-visible { color: #fff; background: rgba(255,255,255,.08); outline: 0; }
.mw-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
.mw-empty { margin: 0; padding: 48px 24px; text-align: center; color: rgba(255,255,255,.5); }

/* characters: a grid of tiles, then one page */
.mwc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; padding: 24px; }
.mwc-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px; min-height: 120px; margin: 0; padding: 16px 12px;
  border: 0; background: rgba(255,255,255,.04); color: rgba(255,255,255,.9); font: inherit; cursor: pointer; --px-line: rgba(255,255,255,.1); transition: background-color .15s ease; }
.mwc-tile:hover, .mwc-tile:focus-visible { background: rgba(255,255,255,.09); --px-line: rgba(255,255,255,.3); outline: 0; }
.mwc-fig { display: block; width: 100%; height: 200px; }
.mwc-pic { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.mwc-name { font: 700 14px/18px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; text-align: center; overflow-wrap: anywhere; }
.mwc-page { display: flex; justify-content: center; align-items: flex-start; gap: 72px; padding: 40px 32px; box-sizing: border-box; }
.mwc-hero { flex: none; width: 260px; height: 440px; }
.mwc-col { flex: 0 1 424px; min-width: 0; padding-top: 16px; }
.mwc-h { margin: 0; font: 700 40px/48px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mwc-voice { position: relative; margin-top: 32px; padding: 24px 0; display: flex; gap: 16px; align-items: center; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.mwc-play { flex: none; width: 40px; height: 40px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; --px-line: rgba(255,255,255,.4); }
.mwc-play:hover, .mwc-play:focus-visible { background: rgba(255,255,255,.08); outline: 0; }
.mwc-vtx { flex: 1; min-width: 0; display: flex; justify-content: space-between; gap: 12px; font: 600 14px/20px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; color: rgba(255,255,255,.86); }
.mwc-time { color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mwc-prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: #eb3e28; }
.mwc-scenes { margin: 24px 0 0; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 24px;
  font: 700 15px/24px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; color: rgba(255,255,255,.86); }
.mwc-scenes svg { display: block; opacity: .6; transition: transform .15s ease, opacity .15s ease; }
.mwc-scenes:hover, .mwc-scenes:focus-visible { color: #fff; outline: 0; }
.mwc-scenes:hover svg { opacity: 1; transform: translateX(2px); }

/* worlds: tiles, one grows to the screen */
.mww-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding: 24px; }
.mww-tile { align-self: start; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 12px; border: 0; background: rgba(255,255,255,.04); color: rgba(255,255,255,.9);
  font: inherit; text-align: left; --px-line: rgba(255,255,255,.1); }
button.mww-tile { cursor: pointer; transition: background-color .15s ease; }
button.mww-tile:hover, button.mww-tile:focus-visible { background: rgba(255,255,255,.09); --px-line: rgba(255,255,255,.3); outline: 0; }
.mww-pic { display: block; width: 100%; aspect-ratio: 16 / 10; background: rgba(255,255,255,.05); overflow: hidden; }
.mww-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mww-name { font: 700 14px/18px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; overflow-wrap: anywhere; }
.mww-full { position: fixed; z-index: 60; background: #000; overflow: hidden; cursor: pointer; }
.mww-fullpic { display: block; width: 100%; height: 100%; object-fit: cover; }
.mww-cap { position: absolute; left: 32px; bottom: 28px; margin: 0; padding: 8px 14px; background: rgba(12,12,14,.8); font: 700 16px/22px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; color: #fff; }
.mww-back { position: absolute; left: 32px; top: 28px; height: 36px; padding: 0 16px; border: 0; background: rgba(12,12,14,.8); color: #fff; font: 700 13px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; cursor: pointer; }
.mww-back:hover, .mww-back:focus-visible { background: rgba(12,12,14,.95); outline: 2px solid #fff; }

/* script: plain text down one column */
.mws { box-sizing: border-box; max-width: 720px; margin: 0 auto; padding: 32px 32px 96px; }
.mws-title { margin: 0 0 32px; font: 700 28px/36px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; overflow-wrap: anywhere; }
.mws-scene { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.1); }
.mws-scene[data-focus] { border-top-color: rgba(235,62,40,.8); }
.mws-h { margin: 0; font: 700 18px/26px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; overflow-wrap: anywhere; }
.mws-note { margin: 4px 0 0; color: rgba(255,255,255,.5); font-size: 13px; }
.mws-lines { margin: 12px 0 0; padding: 0; list-style: none; }
.mws-line { display: flex; gap: 12px; padding: 2px 0; color: rgba(255,255,255,.86); }
.mws-time { color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mws-ways { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.mws-way { margin: 0; padding: 4px 0; border: 0; background: none; color: rgba(255,255,255,.72); font: 700 14px/20px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; text-align: left; cursor: pointer; }
.mws-way:hover, .mws-way:focus-visible { color: #fff; outline: 0; }

/* ---- Play: a black layer over everything, the site's player in the middle, one way back ---- */
.mt[data-playing] .mt-rail, .mt[data-playing] .mt-barwrap, .mt[data-playing] .mt-chat,
.mt[data-playing] .mt-panel, .mt[data-playing] .mt-tip { visibility: hidden !important; }
.mt-playing { position: fixed; inset: 0; z-index: 60; background: #000; color: #fff; opacity: 0; outline: 0; cursor: default;
  font: 600 18px/1.5 'Nunito', 'Nunito Fallback', system-ui, sans-serif; transition: opacity .45s ease; }
.mt-playing.on { opacity: 1; }
.mt-playing.idle { cursor: none; }
.mt-pmount { display: contents; }
.mt-pback { position: absolute; left: 20px; top: 20px; z-index: 5; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0;
  background: rgba(12,12,14,.55); color: rgba(255,255,255,.85); cursor: pointer; opacity: 1; transition: opacity .4s ease, background-color .15s ease; --px-line: transparent; }
.mt-pback:hover { background: rgba(12,12,14,.85); color: #fff; }
.mt-pback:focus-visible { --px-line: #fff; }
.mt-playing.idle .mt-pback { opacity: 0; pointer-events: none; }
.mt-prest { position: absolute; left: 50%; bottom: 11vh; z-index: 4; transform: translateX(-50%); text-align: center; pointer-events: none;
  font: 700 16px/1.3 'Nunito', 'Nunito Fallback', system-ui, sans-serif; letter-spacing: .02em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 2px 16px rgba(0,0,0,.7); }
.mt-prest[hidden] { display: none; }
.mt-pnote { position: absolute; left: 50%; top: 22px; z-index: 5; transform: translate(-50%, -8px); width: min(440px, calc(100% - 140px)); opacity: 0; visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; }
.mt-pnote.on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s ease, transform .18s ease, visibility 0s; }
.mt-pnote input { width: 100%; box-sizing: border-box; height: 44px; padding: 0 16px; border: 0; outline: 0; background: rgba(12,12,14,.9); color: #fff;
  font: 600 14.5px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; caret-color: #eb3e28; }
.mt-pnote input::placeholder { color: rgba(255,255,255,.45); }
.mt-pkept { position: absolute; left: 50%; top: 30px; z-index: 6; transform: translateX(-50%); font: 700 13px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif;
  letter-spacing: .02em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8); opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.mt-pkept.on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .cw-row, .cw-chip, .cw-s, .cw-tool, .cw-bugbar, .mt-snap b, .mt-snap i { animation: none; }
  .mt-playing, .mt-pback, .mt-pnote { transition: none; }
  .mt-barwrap, .mt[data-open="true"] .mt-barwrap, .mt-chat, .mt[data-open="true"] .mt-chat { transition: none; transform: none; }
  .mt-btn, .mt-title, .mt-btn .mt-ico, .mw-scrim { transition: none; }
}

/* ---- show me others (spec 0208 D-f, D-g; docs/creation-tool/show-me-others-mockup.html) ----
   A row of big cards OUTSIDE the text box and above the chat, centred on it: cards 240 px wide, up to five to a row, two rows at most.
   The box stays text only. Only while a tray is open does the chat stack (tray over panel); with none, nothing here applies. */
.mt-chat[data-others="true"] { flex-direction: column; justify-content: flex-end; align-items: center; gap: 20px; }
.mt-chat[data-others="true"] .cw-panel { flex: 0 1 auto; min-height: 0; }
.cw-others { pointer-events: auto; position: relative; flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  width: min(1248px, calc(100vw - 96px)); box-sizing: border-box; animation: cw-in .22s ease both; }
.cw-others[hidden] { display: none; }
.cw-others .op { position: relative; flex: none; width: 240px; box-sizing: border-box; margin: 0; padding: 0; border: 0; text-align: left; color: #fff;
  background: rgba(10,10,12,.95); --px-line: rgba(255,255,255,.55); transition: background-color .15s ease, color .15s ease, opacity .15s ease; }
.cw-others .op:hover { --px-line: #fff; }
.cw-others .op .pick { display: block; width: 100%; box-sizing: border-box; margin: 0; padding: 18px 18px 16px; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; }
.cw-others .op .pick:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.cw-others .op .face { display: block; }
.cw-others .op .lab { display: block; font: 700 22px/1.15 'Nunito', 'Nunito Fallback', system-ui, sans-serif; overflow-wrap: anywhere; }
.cw-others .op .lab.txt { font: 700 16px/1.3 'Nunito', 'Nunito Fallback', system-ui, sans-serif; }
.cw-others .op .pro { display: block; margin-top: 8px; font: 600 13px/1.35 'Nunito', 'Nunito Fallback', system-ui, sans-serif; color: rgba(255,255,255,.6); }
.cw-others .op.on { background: #fff; color: #0c0c0e; --px-line: #fff; }
.cw-others .op.on .pro { color: rgba(12,12,14,.66); }
.cw-others .op.dim { opacity: .45; }
.cw-others .op .n { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; display: grid; place-items: center; background: #0c0c0e; color: #fff;
  font: 700 12px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; pointer-events: none; }
.cw-others .op .n[hidden] { display: none; }
.cw-others .op.vo { min-height: 132px; padding: 18px 18px 16px; }
.cw-others .op.vo .row { display: flex; align-items: center; gap: 14px; }
.cw-others .op.vo .pick { flex: 1; width: auto; padding: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.cw-others .op.vo .pick:hover .w { text-decoration: underline; }
.cw-others .op.vo .w { display: block; font: 700 16px/1.25 'Nunito', 'Nunito Fallback', system-ui, sans-serif; }
.cw-others .op.vo .t { display: block; font: 600 13px/16px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; color: rgba(255,255,255,.5); }
.cw-others .op.on .t { color: rgba(12,12,14,.6); }
.cw-others .play { flex: none; width: 40px; height: 40px; display: grid; place-items: center; margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
  --px-line: rgba(255,255,255,.4); cursor: pointer; }
.cw-others .play:hover { background: rgba(255,255,255,.08); }
.cw-others .prog { position: absolute; left: 18px; right: 18px; bottom: 12px; height: 2px; background: rgba(255,255,255,.12); }
.cw-others .prog[hidden] { display: none; }
.cw-others .prog i { display: block; height: 2px; width: 0; background: #e5484d; }
.cw-others .use { align-self: center; height: 40px; padding: 0 22px; border: 0; background: rgba(255,255,255,.18); color: rgba(255,255,255,.6);
  font: 700 14.5px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; cursor: default; }
.cw-others .use.lit { background: #fff; color: #0c0c0e; cursor: pointer; }
.cw-others .x { position: absolute; right: -44px; top: 0; width: 32px; height: 32px; display: grid; place-items: center; margin: 0; padding: 0; border: 0;
  background: rgba(10,10,12,.95); color: #fff; --px-line: rgba(255,255,255,.3); cursor: pointer; }

/* ---- what an answer shows and plays, outside the box (spec 0210 D-b). Sizes are Saaim's "bigger pictures" (2026-10-26): a clip 560 by 315 (16:9, never wider
   than the chat), cards 240 wide with a 224 by 144 picture, a portrait 224 by 298 beside its words, a voice or a line up to 620 wide. Single things line up with the
   line's left edge; a row of cards centres on the chat and may run wider than it. The media row keeps no history: the next message, Esc or a tapped answer clears it. ---- */
.cw-media.cx-media:not([hidden]) { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; overflow: visible; animation: cw-in .22s ease both; }
.cx-media .cx-item { box-sizing: border-box; max-width: 100%; margin: 0; padding: 12px; background: rgba(22,22,27,.95); color: #fff; filter: drop-shadow(0 4px 0 rgba(0,0,0,.38));
  font: 600 14px/20px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; text-align: left; }
.cx-media .cx-note { margin: 4px 0 0; font-size: 12.5px; line-height: 16px; color: var(--k-dim, rgba(255,255,255,.66)); }
.cx-media .cx-name { margin: 0; font-weight: 800; }
.cx-media .cx-about, .cx-media .cx-how, .cx-media .cx-where, .cx-media .cx-cardabout, .cx-media .cx-cap { margin: 2px 0 0; font-size: 13px; line-height: 17px; color: var(--k-dim, rgba(255,255,255,.66)); }
.cx-media .cx-play { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; background: var(--k-btn, #2a2a32); color: #fff; cursor: pointer; --px-line: transparent; }
.cx-media .cx-play[data-playing="true"] { background: var(--k-red, #eb3e28); }
.cx-media .cx-clip { width: min(560px, 100%); padding: 0; }
.cx-media .cx-clip .cx-cap { padding: 8px 12px 10px; }
.cx-media .cx-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0b1230; }
.cx-media .cx-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0b1230; }
.cx-media .cx-stage .cx-play { position: absolute; left: 12px; bottom: 12px; }
.cx-media .cx-clip .cx-from { display: block; margin: 0; padding: 0 12px 10px; border: 0; background: none; color: var(--k-hi, rgba(255,255,255,.72)); font: 800 13px/18px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; text-align: left; text-decoration: underline; cursor: pointer; }
.cx-media .cx-choices, .cx-media .cx-people { align-self: center; max-width: none; width: max-content; }
.cx-media .cx-prompt { margin: 0 0 8px; font-weight: 700; }
.cx-media .cx-cards { display: grid; grid-template-columns: repeat(var(--n, 3), 240px); gap: 8px; }
.cx-media .cx-card, .cx-media .cx-person { box-sizing: border-box; width: 240px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: rgba(34,34,41,.95); position: relative; text-align: left; }
.cx-media .cx-card[data-playable="true"] { cursor: pointer; }
.cx-media .cx-cardpic { position: relative; display: block; width: 224px; height: 144px; background: #0b1230; overflow: hidden; }
.cx-media .cx-cardpic .cx-still, .cx-media .cx-cardpic .cx-img, .cx-media .cx-cardpic .cx-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.cx-media .cx-card .cx-play { position: absolute; right: 16px; top: 112px; width: 32px; height: 32px; }
.cx-media .cx-card[data-playing="true"] .cx-still { display: none; }
.cx-media .cx-cardlabel { margin: 0; font-weight: 800; }
.cx-media .cx-voice, .cx-media .cx-line, .cx-media .cx-scene { width: min(620px, 100%); }
.cx-media .cx-vtop { display: flex; align-items: center; gap: 12px; }
.cx-media .cx-words { margin: 6px 0 0; font-style: italic; }
.cx-media .cx-line .cx-stage { width: min(320px, 100%); margin-bottom: 10px; }
.cx-media .cx-script, .cx-media .cx-scene { font-family: 'Courier New', Courier, monospace; }
.cx-media .cx-cue { margin: 0; text-align: center; text-transform: uppercase; letter-spacing: .06em; }
.cx-media .cx-paren { margin: 0; text-align: center; color: var(--k-dim, rgba(255,255,255,.66)); }
.cx-media .cx-dialogue { margin: 0; font-family: 'Courier New', Courier, monospace; font-weight: 600; }
.cx-media .cx-script .cx-dialogue { max-width: 36ch; margin: 0 auto; text-align: left; }
.cx-media .cx-heading { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .06em; font-family: 'Courier New', Courier, monospace; }
.cx-media .cx-picture { display: flex; gap: 12px; align-items: flex-start; width: min(620px, 100%); }
.cx-media .cx-portrait { flex: none; display: block; width: 224px; height: 298px; background: #0b1230; overflow: hidden; }
.cx-media .cx-portrait .cx-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cx-media .cx-person .cx-portrait { width: 224px; height: 120px; }
.cx-media .cx-person .cx-play { align-self: flex-start; }
.cx-media .cx-audio { display: none; }
.cx-media [data-pending] .cx-note { font-style: italic; }