/* Phone app, design "MOBILE" on the BLUE
   tokens in /kiosk/tokens.css. Sizes are the design's iPhone values; the
   layout is one full-height column that never scrolls sideways.
   Text inputs are exactly 16px so iOS doesn't zoom on focus. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--k-bg); overscroll-behavior: none; }
button, input { font: inherit; color: inherit; }
p, h1 { margin: 0; }
a { color: inherit; text-decoration: none; }

body {
  --pad: 20px;
  /* Maker owns the top of the screen and never moves; the sheet covers the
     rest — about the bottom 40%, so Maker stays the show. */
  --stage-h: 60%;
}
/* Room for the check-in field. The 3D scene leaves empty space above his
   hat: on the welcome screen he sits --lift higher (same size, his box
   grows upward) and everything below moves up with him, so the buttons
   fit without scrolling. */
body[data-state="landing"] { --lift: 5vh; --stage-h: calc(51% - var(--lift)); }
body.demo[data-state="landing"] { --stage-h: calc(66% - var(--lift)); } /* guests in one row: Maker gets the room */
body[data-state="landing"] .avatar { top: calc(28px - var(--lift)); }
/* Chatting: Maker takes about a third of the phone, the
   conversation gets the rest. The welcome screen keeps him big. */
body:is([data-state="empty"], [data-state="thinking"], [data-state="answer"], [data-state="listening"], [data-state="limit"]) { --stage-h: 36%; }  /* Maker big; the welcome right under his feet */
body {
  --t-display: clamp(48px, 14vw, 56px); --t-limit: clamp(44px, 12.8vw, 50px); --t-box: 26px;
  --t-answer: 19px; --t-transcript: 26px; --row: 44px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 370px) { body { --pad: 16px; --t-box: 24px; --t-answer: 18px; --t-transcript: 24px; } }

.app {
  /* The full screen, ignoring the keyboard: only the sheet reacts to it. */
  position: fixed; inset: 0; overflow: hidden;
  padding: var(--safe-top) 0 0;
  background-color: var(--k-bg);
  background-image: linear-gradient(to right, var(--k-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--k-grid) 1px, transparent 1px);
  background-size: 25% 100%, 100% 12.5%;
  color: var(--k-ink); font-family: var(--k-font-body); -webkit-font-smoothing: antialiased;
}

.mono { font-family: var(--k-font-mono); font-size: 16px; }
.dim { color: var(--k-ink2); }
.cursor { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.pix { display: block; flex: none; shape-rendering: crispEdges; }

/* ── Top bar ──────────────────────────────────────────────────────────── */
.top { position: relative; z-index: 3; height: 52px; padding: 0 var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.top-left { display: flex; align-items: center; gap: 4px; min-width: 0; }
.home {
  flex: none; width: 40px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border: 2px solid var(--k-ctl-line); background: transparent; color: var(--k-ink);
  font-family: var(--k-font-mono, monospace); font-weight: 700; font-size: 20px;
}
body[data-state="landing"] .home { display: none; }
.langs { display: flex; }
.langs button {
  height: 44px; padding: 0 7px; border: 0; background: transparent; color: var(--k-ink2); white-space: nowrap;
  font-family: var(--k-font-cjk); font-weight: 700; font-size: 16px; cursor: pointer;
}
.langs button[aria-pressed="true"] { background: var(--k-box-bg); color: var(--k-box-ink); }
.sound {
  height: 44px; padding: 0 12px; display: flex; align-items: center; gap: 8px; cursor: pointer;
  border: 2px solid var(--k-ctl-line); background: transparent; color: var(--k-ink);
  font-family: var(--k-font-cjk); font-weight: 700; font-size: 16px; white-space: nowrap;
}
.sound .pix { width: 22px; height: 14px; }
.sound[aria-pressed="true"] { background: var(--k-btn-bg); color: var(--k-btn-ink); }

.banner {
  position: relative; z-index: 3; margin: 4px var(--pad) 0; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px;
  background: var(--k-box-bg); color: var(--k-box-ink);
}
.banner b { font-family: var(--k-font-mono); font-weight: 800; font-size: 16px; letter-spacing: .04em; }
.banner span[lang] { font-family: var(--k-font-cjk); font-weight: 900; font-size: 18px; line-height: 1.35; }

/* ── Stage: Maker, fixed in place ─────────────────────────────────────── */
.stage { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--safe-top) + 52px); height: calc(var(--stage-h) - var(--safe-top) - 52px); }
/* Hidden, not removed: the 3D session must survive the agenda / offline views. */
[data-stage="none"] .stage { visibility: hidden; }

.crop { position: absolute; width: 16px; height: 16px; border: 0 solid var(--k-stage-line); pointer-events: none; z-index: 1; }
.crop.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.crop.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.crop.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.crop.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.stage-label, .stage-count { position: absolute; top: 6px; z-index: 1; font-family: var(--k-font-mono); font-size: 16px; color: var(--k-ink2); }
.stage-label { left: 22px; }
.stage-label img { height: 18px; width: auto; display: block; }
body[data-brand="label"] .stage-label { top: 8px; line-height: 0; }
body:not([data-brand="label"]) .stage-label { top: 6px; line-height: normal; }
body:not([data-brand="label"]) .brand-label,
body:not([data-brand="mark"]) .brand-mark,
body:not([data-brand="credit"]) .brand-credit,
body:not(:is([data-brand="credit"], [data-brand="label"])) .brand-intro,
body[data-brand="label"] .brand-nolabel { display: none !important; }
/* 3c: the opening credit fills the empty stage until Maker arrives (or until
   app.js gives up waiting and shows his picture instead: .slow-avatar). */
.credit {
  position: absolute; inset: 40px 0 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--k-font-mono); font-size: 16px; transition: opacity .4s;
}
.credit b { font-weight: 700; letter-spacing: .08em; color: var(--k-ink2); }
.credit img { height: 26px; width: auto; display: block; }
.credit span { font-weight: 800; color: var(--k-ink); }
body.avatar-ready .credit, body.slow-avatar .credit { opacity: 0; pointer-events: none; }
body:is([data-brand="credit"], [data-brand="label"]):not(.avatar-ready):not(.slow-avatar) .avatar .placeholder { opacity: 0; }
body:is([data-brand="credit"], [data-brand="label"])[data-state="landing"]:not(.avatar-ready):not(.slow-avatar) #stage-chip { display: none !important; }
/* 3b + intro: the logo opens big in the middle while Maker loads, then flies
   to its corner (app.js); until then the corner is empty. */
body[data-brand="label"]:not(.logo-home) #corner-logo { opacity: 0; }
#corner-logo { transition: opacity .2s; }
.logo-flight { position: fixed; z-index: 30; pointer-events: none; transform-origin: top left; }
/* "by Perxona": a maker's mark stamped under the small print. */
.by { display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--k-ctl-line); }
.by span { font-family: var(--k-font-mono); font-size: 16px; color: var(--k-ink2); }
.by img { height: 18px; width: auto; display: block; }
.stage-count { right: 22px; }

.avatar { position: absolute; left: 0; right: 0; top: 28px; bottom: 0; }
.avatar sv-presenter, .avatar .placeholder { position: absolute; inset: 0; width: 100%; height: 100%; }
.avatar .placeholder { object-fit: contain; object-position: bottom; transition: opacity .4s; }
.avatar sv-presenter { display: block; opacity: 0; transition: opacity .4s; }
body.avatar-shown .avatar sv-presenter { opacity: 1; }
body.avatar-shown .avatar .placeholder { opacity: 0; }

.stage-chip {
  position: absolute; left: 0; bottom: 10px; z-index: 2; padding: 5px 8px;
  font-family: var(--k-font-mono); font-weight: 700; font-size: 16px;
  background: var(--k-box2-bg); color: var(--k-box2-ink);
}
.stage-chip.listen { background: var(--k-listen); color: var(--k-listen-ink); border: 2px solid var(--k-listen-edge); font-weight: 800; padding: 4px 8px; }
.stage-info { display: none; }

/* ── Bottom sheet ─────────────────────────────────────────────────────── */
/* Rests just below Maker; drag the handle to expand. app.js sets --kb to the
   keyboard height so the sheet rides on top of it while Maker stays put. */
.sheet {
  position: absolute; left: 0; right: 0; bottom: var(--kb, 0px); z-index: 2;
  height: var(--sheet-h); max-height: calc(100% - var(--safe-top) - 140px);
  display: flex; flex-direction: column;
  background: var(--k-bg); border-top: 2px solid var(--k-ctl-line);
  box-shadow: 0 -12px 24px rgb(0 0 0 / .18);
  transition: height .28s cubic-bezier(.2, .8, .2, 1), bottom .2s ease;
  --sheet-h: 64%; /* top edge just below Maker's feet (he's a third of the screen while chatting) */
}
/* Expanded still leaves Maker's head and shoulders in view: never hide the show. */
.sheet[data-snap="full"] { --sheet-h: 82%; }
.sheet.dragging { transition: none; }
/* Keyboard up: the field, the latest lines, and Maker's face above them. */
body.kb .sheet { --sheet-h: max(190px, calc(var(--vvh, 100%) - 300px)); }
body.kb .sheet[data-snap="full"] { --sheet-h: calc(var(--vvh, 100%) - 150px); }
.handle {
  flex: none; height: 28px; width: 100%; border: 0; background: transparent; cursor: grab;
  display: flex; align-items: center; justify-content: center; touch-action: none;
}
.handle i { width: 44px; height: 5px; background: var(--k-ink2); }
/* The welcome screen isn't a sheet: it's the page itself, grid and all.
   The sheet only appears once the conversation starts. */
[data-state="landing"] .handle { display: none; }
[data-state="landing"] .sheet { background: transparent; border-top: 0; box-shadow: none; --sheet-h: calc(100% - var(--stage-h)); }
/* The welcome text is a see-through layer over Maker's lower half: it starts
   a little over his feet (--pre) and scrolls up over him (up to --overlap),
   drift words included, instead of being cut off at a hard edge. */
body[data-state="landing"] { --overlap: 20vh; --pre: 4vh; }
[data-state="landing"] .sheet { --sheet-h: calc(100% - var(--stage-h) + var(--overlap)); max-height: none; }
[data-state="landing"] .sheet .pane.landing { padding-top: calc(var(--overlap) - var(--pre)); }
/* A short sheet must never clip its content — let it scroll. */
.sheet .pane { overflow-y: auto; }

/* ── Content panes ────────────────────────────────────────────────────── */
.content { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.sheet .pane, .sheet .thread { padding-top: 4px; }
/* "safe": if it doesn't fit, start at the top and scroll — never clip the top. */
.pane { position: absolute; inset: 0; padding: 12px var(--pad); display: none; flex-direction: column; justify-content: safe flex-end; gap: 14px; }
/* In the sheet the welcome line would repeat the landing page; the title is enough. */
.sheet .pane.empty #greet-sub { display: none; }
[data-state="landing"] .pane.landing,
[data-state="empty"] .pane.empty,
[data-state="listening"] .pane.listening,
[data-state="limit"] .pane.limit,
:is([data-state="agenda"], [data-state="offline"]) .pane.agenda { display: flex; }
/* Title sits midway between Maker's feet and START, not tucked under the shoes. */
.pane.landing { justify-content: flex-start; gap: 10px; padding-top: 4px; }
.pane.landing .display { font-size: clamp(36px, 10.5vw, 46px); }
.box.match { font-size: clamp(22px, 6.6vw, 28px); }
.pane.agenda { justify-content: flex-start; gap: 8px; overflow-y: auto; }

.display { font-family: var(--k-font-display); font-stretch: 125%; font-weight: 900; font-size: var(--t-display); line-height: .9; color: var(--k-display); }
.display.small { font-size: var(--t-limit); line-height: .92; }
.display.tiny { font-size: 26px; line-height: 1; }
.lead { font-size: 17px; font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.pane.landing .lead { font-size: 18px; font-weight: 600; }
.box {
  align-self: flex-start; padding: .2em .34em; line-height: 1.1;
  background: var(--k-box-bg); color: var(--k-box-ink); font-family: var(--k-font-cjk); font-weight: 900; font-size: var(--t-box);
}
.box.listen { background: var(--k-listen); color: var(--k-listen-ink); border: 2px solid var(--k-listen-edge); padding: .18em .34em; }
.push { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
/* Check-in on the landing: name field above the button. */
.pane.landing #land-text, .pane.landing #print2 { display: none; } /* the field says it; room for Maker */
#checkin { gap: 10px; }
.field.ci-field { flex: none; height: 56px; }
.field.ci-field input { font-size: 18px; }
body.checked .ci-field { display: none; }
body:not(.checked) #notme { display: none; }
.ci-msg { font-size: 15px; line-height: 1.4; font-weight: 700; background: var(--k-box-bg); color: var(--k-box-ink); padding: 8px 10px; }
.ci-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.ci-choices[hidden] { display: none; }
.ci-choices button {
  height: 48px; padding: 0 16px; cursor: pointer; border: 2px solid var(--k-box-bg);
  background: var(--k-box-bg); color: var(--k-box-ink); font-family: var(--k-font-cjk); font-weight: 900; font-size: 18px;
}
.ci-choices button.none { background: transparent; color: var(--k-ink); border-color: var(--k-ctl-line); font-weight: 700; font-size: 15px; }
.pane.landing:has(#ci-choices:not([hidden])) #hi { display: none; }
/* Demo: no name to type, only the made-up guests to pick. */
body.demo:not(.checked) .ci-field, body.demo:not(.checked) #start { display: none; }
body.demo:not(.checked) .pane.landing:has(#ci-choices:not([hidden])) #hi { display: revert; }
/* What can be tapped looks like a button (a full-width bar with →, like
   CHECK IN); what can't is plain text. The tagline and the demo's
   instruction used to be white boxes too, and people tapped them. */
.pane.landing .box.match { background: transparent; color: var(--k-ink); padding: 0; }
body.demo .ci-msg { background: transparent; color: var(--k-ink); padding: 0; font-size: 16px; }
.cta.small { height: 48px; }
.cta.small b { font-size: 17px; }
.textlink { align-self: flex-start; border: 0; background: none; padding: 2px 0; color: var(--k-ink); font-size: 15px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.consent { display: flex; gap: 8px; animation: rise .35s ease-out both; }
.consent .cta { height: 52px; flex: 1; justify-content: center; }
.consent .cta b { font-size: 18px; }
.inapp { margin: 0 0 12px; padding: 10px 12px; background: var(--k-box-bg); color: var(--k-box-ink); font-size: 15px; line-height: 1.45; font-weight: 700; }
.fine { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.45; color: var(--k-ink2); }

.cta {
  width: 100%; height: 64px; padding: 0 20px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--k-btn-bg); color: var(--k-btn-ink);
}
.cta b { font-family: var(--k-font-cjk); font-weight: 900; font-size: 22px; }
#start b { font-size: 24px; }
/* Both languages of the start button at the same size and weight. */
#start small { font-family: var(--k-font-cjk); font-weight: 900; font-size: 24px; letter-spacing: 0; }
#start > span:first-child { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
.cta small { font-family: var(--k-font-mono); font-weight: 800; font-size: 16px; letter-spacing: .06em; }
.cta .arrow { font-family: var(--k-font-mono); font-weight: 800; font-size: 28px; }
.cta.ghost { background: transparent; color: var(--k-ink); border: 2px solid var(--k-ctl-line); justify-content: flex-start; }

.optin {
  height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--k-rule); font-size: 16px; font-weight: 600; color: var(--k-ink2);
}
.optin b { font-family: var(--k-font-mono); font-weight: 700; color: var(--k-ink); white-space: nowrap; }

.transcript { font-size: var(--t-transcript); font-weight: 700; line-height: 1.3; text-wrap: pretty; }
.meter { display: flex; align-items: center; gap: 5px; height: 48px; }
.meter i { width: 12px; background: var(--k-listen); border: 2px solid var(--k-listen-edge); transition: height .12s; }

/* ── Thread ───────────────────────────────────────────────────────────── */
.thread {
  position: absolute; inset: 0; padding: 12px var(--pad); overflow-y: auto; display: none;
  flex-direction: column; gap: 16px; overscroll-behavior: contain;
}
:is([data-state="thinking"], [data-state="answer"]) .thread { display: flex; }
.thread > :first-child { margin-top: auto; } /* short threads sit at the bottom */
.q {
  align-self: flex-end; max-width: 82%; padding: 12px 14px; flex: none;
  background: var(--k-box2-bg); color: var(--k-box2-ink); font-size: 17px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere;
}
.a { display: flex; flex-direction: column; gap: 6px; flex: none; }
.who { font-family: var(--k-font-mono); font-size: 16px; color: var(--k-ink2); }
.a p { font-size: var(--t-answer); font-weight: 600; line-height: 1.5; text-wrap: pretty; overflow-wrap: anywhere; }
.a.old p { font-weight: 500; }
.a .box { font-size: var(--t-box); }
.a .mono { font-weight: 700; line-height: 1.6; }

.card {
  flex: none; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  background: var(--k-card-bg); border: 2px solid var(--k-card-line); color: var(--k-card-ink);
  animation: rise .35s ease-out both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.card-head b { font-family: var(--k-font-display); font-stretch: 125%; font-weight: 900; font-size: 22px; line-height: 1; color: var(--k-card-accent); text-transform: uppercase; overflow-wrap: anywhere; }
.card-head span { font-family: var(--k-font-mono); font-size: 14px; color: var(--k-card-meta); text-align: right; }
.card p { font-size: 16px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card a {
  height: 48px; margin-top: 4px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between;
  background: var(--m-cta-bg); color: var(--m-cta-ink); font-weight: 700; font-size: 16px;
}
.agenda-card {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 8px; cursor: pointer; text-align: left;
  border: 2px solid var(--k-ctl-line); background: transparent; color: var(--k-ink);
  font-family: var(--k-font-cjk); font-weight: 700; font-size: 16px; animation: rise .35s ease-out both;
}
.agenda-card img { width: 64px; height: 80px; object-fit: cover; object-position: top; flex: none; background: var(--k-grid); }
.lightbox {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: calc(var(--safe-top) + 56px) var(--pad) calc(var(--safe-bottom) + 16px); background: rgb(11 12 16 / .92);
}
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; min-height: 0; flex: 0 1 auto; object-fit: contain; -webkit-touch-callout: default; user-select: auto; }
.lb-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; flex: none; }
.lb-actions .cta { justify-content: center; font-family: var(--k-font-cjk); font-weight: 900; font-size: 20px; }
.lb-close {
  position: absolute; top: calc(var(--safe-top) + 8px); right: var(--pad); width: 44px; height: 44px; cursor: pointer;
  border: 2px solid var(--k-ctl-line); background: transparent; color: #fff; font-size: 20px;
}
.tablebar { flex: none; display: flex; align-items: stretch; border: 2px solid var(--k-ctl-line); animation: rise .35s ease-out both; }
.tablebar b { background: var(--k-box-bg); color: var(--k-box-ink); font-family: var(--k-font-mono); font-weight: 800; font-size: 16px; padding: 0 12px; display: flex; align-items: center; white-space: nowrap; }
.tablebar span { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.tablebar small { font-family: var(--k-font-mono); font-weight: 400; font-size: 16px; color: var(--k-ink2); }

/* ── Agenda ───────────────────────────────────────────────────────────── */
.agenda-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sched { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--k-rule); }
.sched li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: var(--row); padding: 6px 10px; border-top: 1px solid var(--k-rule); }
.sched time { font-family: var(--k-font-mono); font-weight: 800; font-size: 16px; color: var(--k-num); }
.sched span { font-weight: 600; font-size: 16px; line-height: 1.3; }
.sched em { font-style: normal; font-family: var(--k-font-mono); font-weight: 800; font-size: 14px; }
.sched li.now { background: var(--k-box-bg); color: var(--k-box-ink); }
.sched li.now time { color: var(--k-box-ink); }

/* ── Bottom: chips, input, release bar ────────────────────────────────── */
/* One row that scrolls sideways, so the answer keeps the room. */
.chips { flex: none; padding: 8px var(--pad) 0; display: none; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; }
body.kb .chips { display: none !important; } /* typing: the field and the answer matter */
:is([data-state="empty"], [data-state="answer"]) .chips { display: flex; }
.chips button.main { background: var(--k-box-bg); color: var(--k-box-ink); border-color: var(--k-box-bg); font-weight: 900; }
.chips button {
  height: 44px; padding: 0 8px; cursor: pointer; background: transparent; color: var(--k-ink);
  border: 2px solid var(--k-ctl-line); font-family: var(--k-font-cjk); font-weight: 700; font-size: 16px; white-space: nowrap;
}

.inputbar { flex: none; padding: 10px var(--pad) calc(10px + var(--safe-bottom)); display: none; gap: 8px; margin: 0; }
:is([data-state="empty"], [data-state="thinking"], [data-state="answer"]) .inputbar { display: flex; }
body.kb .inputbar, body.kb .releasebar { padding-bottom: 10px; } /* the keyboard covers the home indicator */
.field { flex: 1; min-width: 0; height: 64px; display: flex; align-items: center; border: 2px solid var(--k-field-line); background: var(--k-field-bg); }
.field:focus-within { border-width: 3px; }
.field input {
  flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; outline: 0; background: transparent;
  font-family: var(--k-font-cjk); font-size: 16px; color: var(--k-ink);
}
.field input::placeholder { color: var(--k-field-ph); }
.field button {
  width: 48px; height: 48px; margin-right: 6px; flex: none; cursor: pointer;
  font-family: var(--k-font-mono); font-weight: 800; font-size: 24px;
  background: transparent; color: var(--k-field-ph); border: 2px solid var(--k-rule);
}
.field:focus-within button, .field.has-text button { background: var(--k-btn-bg); color: var(--k-btn-ink); border-color: var(--k-btn-bg); }
.hold {
  width: 72px; height: 64px; flex: none; border: 0; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--k-btn-bg); color: var(--k-btn-ink);
}
.hold .pix { width: 18px; height: 24px; }
.hold b { font-family: var(--k-font-cjk); font-weight: 900; font-size: 16px; line-height: 1; }
.inputbar :disabled { opacity: .5; }

.releasebar { flex: none; padding: 10px var(--pad) calc(10px + var(--safe-bottom)); display: none; gap: 8px; }
[data-state="listening"] .releasebar { display: flex; }
.releasebar button { height: 72px; border: 0; cursor: pointer; display: flex; align-items: center; }
.rb-cancel {
  flex: none; padding: 0 18px; background: transparent; color: var(--k-ink); border: 2px solid var(--k-ctl-line) !important;
  font-family: var(--k-font-cjk); font-weight: 800; font-size: 18px;
}
.rb-send {
  flex: 1; min-width: 0; gap: 14px; padding: 0 16px;
  background: var(--k-listen); color: var(--k-listen-ink); border: 3px solid var(--k-listen-edge) !important;
}
.rb-send .pix { width: 22px; height: 30px; }
.rb-send > span:not(.arrow) { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; }
.rb-send b { font-family: var(--k-font-cjk); font-weight: 900; font-size: 22px; line-height: 1; }
.rb-send small { font-family: var(--k-font-mono); font-weight: 800; font-size: 16px; }
.rb-send .arrow { margin-left: auto; font-family: var(--k-font-mono); font-weight: 800; font-size: 26px; }

.bottombar { flex: none; padding: 10px var(--pad) calc(10px + var(--safe-bottom)); display: none; }
[data-state="limit"] .limitbar, [data-state="agenda"] .agendabar { display: block; }
[data-state="offline"] .offlinebar { display: flex; height: calc(52px + var(--safe-bottom)); align-items: center; justify-content: space-between; }
/* A check-in message is showing: make room for it. */
.pane.landing:has(#ci-msg:not([hidden])) #hi { display: none; }

/* Tap-to-ask next steps under Maker's newest answer. */
.followups { flex: none; display: flex; flex-wrap: wrap; gap: 8px; animation: rise .35s ease-out both; }
.followups button {
  height: 44px; padding: 0 14px; cursor: pointer; border: 2px solid var(--k-box-bg);
  background: var(--k-box-bg); color: var(--k-box-ink); font-family: var(--k-font-cjk); font-weight: 900; font-size: 16px;
}

/* Which topic table interests you (after check-in). */
/* What to ask next, under the newest answer. */
.follow { flex: none; display: flex; flex-wrap: wrap; gap: 8px; animation: rise .35s ease-out both; }
.follow button {
  min-height: 44px; max-width: 100%; padding: 8px 12px; cursor: pointer; text-align: left; white-space: normal; background: transparent; color: var(--k-ink);
  border: 2px solid var(--k-box-bg); font-family: var(--k-font-cjk); font-weight: 700; font-size: 16px; line-height: 1.3;
}
.follow button::before { content: "> "; font-family: var(--k-font-mono, monospace); opacity: .7; }
.interest { flex: none; display: flex; flex-direction: column; gap: 8px; animation: rise .35s ease-out both; }
.interest p { font-size: 17px; font-weight: 700; line-height: 1.4; }
.interest button {
  min-height: 46px; padding: 8px 14px; text-align: left; cursor: pointer; border: 2px solid var(--k-box-bg);
  background: var(--k-box-bg); color: var(--k-box-ink); font-family: var(--k-font-cjk); font-weight: 800; font-size: 16px; line-height: 1.3;
}
.interest button.ghost { background: transparent; color: var(--k-ink); border-color: var(--k-ctl-line); }

/* Labels over each group in an answer: people vs topic tables. */
.group-label { flex: none; margin-top: 6px; font-family: var(--k-font-mono); font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--k-ink2); }
.table-card .table-title { font-weight: 800; -webkit-line-clamp: 3; }
.table-card .table-host { font-family: var(--k-font-mono); font-size: 14px; color: var(--k-card-meta); }

/* Speakers & table hosts: photo + who they are tonight. */
.host-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: var(--k-grid); }
.host-photo.big { width: 64px; height: 64px; }
.table-host-row { display: flex; align-items: center; gap: 10px; }
.featured-top { display: flex; align-items: center; gap: 14px; }
.featured-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.featured-who b { font-family: var(--k-font-display); font-stretch: 125%; font-weight: 900; font-size: 22px; line-height: 1; color: var(--k-card-accent); text-transform: uppercase; }
.featured-who span { font-family: var(--k-font-mono); font-size: 14px; color: var(--k-card-meta); }

/* Maker is off (48 h after the event): only the goodbye message stays. */
body.closed .ci-field, body.closed #start, body.closed #notme, body.closed #ci-choices { display: none; }

/* A featured person's role tonight (host / special guest / speaker / Topic Lead). */
.featured-role { font-weight: 700; }

/* Last quick button once checked in: tonight's program (opens a new tab). */
.chips a.program {
  flex: none; height: 44px; padding: 0 8px; display: inline-flex; align-items: center; text-decoration: none;
  color: var(--k-ink); border: 2px solid var(--k-ctl-line); font-family: var(--k-font-cjk); font-weight: 700; font-size: 16px; white-space: nowrap;
}

/* Tonight's program over the chat (an iframe of guide.html). */
.guide-overlay { position: fixed; inset: 0; z-index: 50; background: var(--k-bg, #1f3bff); }
.guide-overlay[hidden] { display: none; }
.guide-overlay iframe { width: 100%; height: 100%; border: 0; display: block; }

/* A Topic Lead's title under their name on a table card. */
.table-host-title { display: block; font-weight: 700; color: var(--k-accent, #1f3bff); margin-top: 2px; }

/* Trial (?face): chatting, the avatar's canvas is drawn much bigger than the
   stage and the stage crops it to his face and hat, so his face sits on the
   chat box. The welcome screen keeps the full body. */
body.face:is([data-state="empty"], [data-state="thinking"], [data-state="answer"], [data-state="listening"], [data-state="limit"]) .stage { overflow: hidden; }
body.face:is([data-state="empty"], [data-state="thinking"], [data-state="answer"], [data-state="listening"], [data-state="limit"]) .avatar { top: -40%; bottom: auto; height: 230%; left: -30%; right: -30%; }
body.face .sheet[data-snap="full"] { --sheet-h: 70%; } /* keep his eyes in view */

/* Chat box dragged down: the conversation shrinks to its last lines and
   Maker gets the room back, whole body (also in the ?face trial). */
.sheet[data-snap="low"] { --sheet-h: 34%; }
body:has(.sheet[data-snap="low"]):is([data-state="empty"], [data-state="thinking"], [data-state="answer"], [data-state="listening"], [data-state="limit"]) { --stage-h: 66%; }
body.face:has(.sheet[data-snap="low"]) .avatar { top: 28px; bottom: 0; height: auto; left: 0; right: 0; }

/* No Perxona key on this server: an invitation instead of the 3D avatar. */
.no-perxona {
  position: absolute; left: 12px; right: 12px; top: 40px; z-index: 3; padding: 10px 12px;
  background: var(--k-box-bg); color: var(--k-box-ink); font-family: var(--k-font-cjk); font-weight: 800; font-size: 15px;
  line-height: 1.35; text-decoration: none; text-align: center;
}
.no-perxona[hidden] { display: none; }

body.no-perxona #stage-chip { display: none !important; }

.langs button[hidden] { display: none; }

/* ── Welcome-screen motion (fx.js; ?fx=a / ?fx=b) ───────────────────── */
/* a: letters slam in */
.fx-word { display: inline-block; white-space: nowrap; }
.fx-slam { display: inline-block; animation: fx-slam .42s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes fx-slam { from { opacity: 0; transform: translateY(-35%) scale(2.2); } to { opacity: 1; transform: none; } }
/* a: huge outlined words drift behind */
/* (.pane is already position: absolute, the drift's containing block.
   Overriding it to relative shrank the welcome screen to its content and
   left the bottom empty.) */
body[data-fx="a"] .pane.landing > *:not(.fx-drift) { position: relative; z-index: 1; }
.fx-drift { position: absolute; left: -10%; right: -10%; top: calc(var(--overlap, 0px) - var(--pre, 0px) - 24px); overflow: hidden; pointer-events: none; z-index: 0; opacity: .3; transform: rotate(-5deg); }
.fx-row {
  white-space: nowrap; font-family: var(--k-font-display); font-stretch: 125%; font-weight: 900; font-size: 64px; line-height: 1.05;
  color: transparent; -webkit-text-stroke: 1.5px var(--k-ink); will-change: transform;
}
.fx-row.l { animation: fx-left 14s linear infinite; }
.fx-row.r { animation: fx-right 17s linear infinite; -webkit-text-stroke-color: #FFD400; }
@keyframes fx-left { to { transform: translateX(-50%); } }
@keyframes fx-right { from { transform: translateX(-50%); } to { transform: none; } }
/* a: the tagline flips like a departure board; one line, so nothing below jumps */
body[data-fx] .pane.landing .box.match { white-space: nowrap; font-size: clamp(18px, 5.6vw, 26px); }
.fx-flip.out { animation: fx-out .26s ease-in both; }
.fx-flip.in { animation: fx-in .32s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes fx-out { to { transform: perspective(400px) rotateX(90deg); opacity: .2; } }
@keyframes fx-in { from { transform: perspective(400px) rotateX(-90deg); opacity: .2; } to { transform: none; opacity: 1; } }
.fx-flip { display: inline-block; }
/* b: the tagline types itself, then a marker sweeps under it */
.fx-type, .pane.landing .box.match.fx-type {
  display: inline-block; min-height: 1.2em;
  background-image: linear-gradient(transparent 70%, #FFD400 70%, #FFD400 92%, transparent 92%);
  background-repeat: no-repeat; background-size: 0% 100%; transition: background-size .55s ease-out;
}
.fx-type.marked, .pane.landing .box.match.fx-type.marked { background-size: 100% 100%; }
.fx-type::after { content: "▍"; margin-left: 2px; animation: fx-blink .9s steps(1) infinite; }
.fx-type.marked::after { opacity: 0; animation: none; }
@keyframes fx-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-slam, .fx-row, .fx-flip { animation: none !important; } }


/* ── Welcome screen, "Maker is the star" ────────────────────────────────
   Maker big at the top; everything else stacks up from the bottom and
   overlaps his legs as a see-through layer; streamers drift BEHIND him. */
[data-state="landing"] .pane.landing { justify-content: flex-end; gap: 0; }
[data-state="landing"] .pane.landing .push { margin-top: 0; }
.pane.landing #hi { font-size: clamp(46px, 14.4vw, 62px); line-height: .88; letter-spacing: -.01em; text-align: left; }
.pane.landing .box.match { margin-top: 8px; font-size: clamp(19px, 5.6vw, 24px); font-weight: 800; }
.pane.landing #checkin { margin-top: 14px; gap: 14px; }
body.demo .ci-msg { font-size: 17px; font-weight: 600; line-height: 1.4; }
/* The guests: three sticker cards. */
body.demo .ci-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ci-choices button.guest {
  height: clamp(104px, 30vw, 124px); min-width: 0; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch;
  background: #FFFFFF; color: #0B0C10; border: 2px solid #0B0C10; text-align: left; cursor: pointer; transition: transform .12s ease-out;
}
.ci-choices button.guest:active { transform: scale(.95); }
.guest .g-top { display: flex; align-items: flex-start; justify-content: space-between; }
.guest .g-icon { height: 22px; display: block; color: var(--k-bg, #1F3BFF); }
.guest .g-go { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--k-bg, #1F3BFF); color: #FFFFFF; font-family: var(--k-font-mono); font-weight: 800; font-size: 16px; }
.guest .g-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guest .g-role { font-size: 16px; font-weight: 700; line-height: 1.2; color: #464B5E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guest .g-name { font-family: var(--k-font-display); font-stretch: 112%; font-weight: 900; font-size: clamp(21px, 6.2vw, 26px); line-height: 1.05; white-space: nowrap; }
.guest .g-name.cjk { font-family: var(--k-font-cjk); }
/* "About Maker →": a real link. */
#about-link { height: 44px; font-size: 16px; text-decoration-thickness: 2px; text-underline-offset: 5px; }
body.demo .pane.landing .fine { font-size: 16px; font-weight: 500; color: var(--k-ink2); }
/* Streamers: three rows behind Maker (inside the stage, under the canvas). */
.fx-drift {
  position: absolute; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); top: 44%; height: 70%;
  overflow: hidden; pointer-events: none; z-index: 0; opacity: 1; transform: none;
}
.fx-row {
  position: absolute; left: -20%; width: 140%; white-space: nowrap; font-family: var(--k-font-display); font-stretch: 125%; font-weight: 900;
  font-size: clamp(70px, 21.5vw, 92px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px #8C9DFF; will-change: transform;
}
.fx-row:nth-child(1) { top: 0; animation: fx-left 14s linear infinite; }
.fx-row:nth-child(2) { top: 1.05em; animation: fx-right 18s linear infinite; -webkit-text-stroke-color: #FFD43B; }
.fx-row:nth-child(3) { top: 2.1em; animation: fx-left 11s linear infinite; }
@keyframes fx-left { from { transform: none; } to { transform: translateX(-50%); } }
@keyframes fx-right { from { transform: translateX(-50%); } to { transform: none; } }
.stage .avatar { z-index: 1; }
/* Letters slam in; the tagline flips (timings from the design). */
.fx-slam { animation: fx-slam .38s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes fx-slam { 0% { opacity: 0; transform: translateY(-28px) scale(1.9); } 60% { opacity: 1; transform: translateY(2px) scale(.94); } 100% { opacity: 1; transform: none; } }
.fx-flip.in { animation: fx-in .42s cubic-bezier(.3, 1.5, .5, 1) both; }
.pane.landing #checkin, .pane.landing .ci-msg, .pane.landing .fine { text-align: left; }
/* Real event check-in: label above the field, a standing hint below the button. */
.ci-label { font-size: 16px; font-weight: 700; color: var(--k-ink); margin-bottom: -6px; }
body.checked .ci-label, body.demo .ci-label { display: none; }
.ci-hint { display: flex; gap: 8px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--k-ink); }
.ci-hint[hidden] { display: none; }
.ci-hint b { font-family: var(--k-font-mono); font-weight: 800; color: #FFD43B; }

/* ── About Maker ───────────────────────────────────────────────────────── */
body.about-open[data-state], body.demo.about-open[data-state] { --ab-h: 300px; --ab-over: 72px; --lift: 0px; --stage-h: calc(var(--safe-top) + 52px + var(--ab-h)); }
body.about-open.about-compact[data-state], body.demo.about-open.about-compact[data-state] { --ab-h: 136px; --ab-over: 36px; }
body.about-open .avatar { top: 4px; }
body.about-open .sheet, body.about-open #no-perxona, body.about-open .stage-count { visibility: hidden; }
.stage { transition: height .3s cubic-bezier(.2, .8, .2, 1); }
.about-back { width: 44px; height: 44px; flex: none; border: 0; background: transparent; color: var(--k-ink); font-family: var(--k-font-mono); font-weight: 800; font-size: 22px; cursor: pointer; }
.about-back[hidden] { display: none; }
.about {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  top: calc(var(--safe-top) + 52px + var(--ab-h) - var(--ab-over)); transition: top .3s cubic-bezier(.2, .8, .2, 1);
  color: var(--k-ink); text-align: left; font-family: 'Archivo', 'Noto Sans TC', sans-serif;
}
.about:lang(zh-Hant) { font-family: var(--k-font-cjk); }
.about:lang(ja) { font-family: 'Noto Sans JP', var(--k-font-cjk); }
.about[hidden] { display: none; }
.about::-webkit-scrollbar { display: none; }
.about-head { padding: 0 var(--pad) 8px; display: flex; flex-direction: column; gap: 12px; }
.about-head .display { font-size: clamp(42px, 12.8vw, 56px); line-height: .88; }
.about-intro { font-size: 20px; font-weight: 600; line-height: 1.45; }
.about mark { background: none; color: #FFD43B; font-weight: 800; }
.about-sec { padding: 28px var(--pad) 8px; display: flex; flex-direction: column; gap: 14px; }
.about-num { display: flex; align-items: baseline; gap: 14px; padding-top: 12px; border-top: 2px solid #7086FF; }
.about-num b { font-family: var(--k-font-mono); font-weight: 800; font-size: 44px; line-height: 1; }
.about-num span { font-family: var(--k-font-mono); font-weight: 700; font-size: 14px; letter-spacing: .08em; color: var(--k-ink2); }
.about-h { font-family: var(--k-font-display); font-stretch: 125%; font-weight: 900; font-size: clamp(26px, 7.8vw, 34px); line-height: 1.02; text-wrap: balance; }
.about:lang(zh-Hant) .about-h, .about:lang(ja) .about-h { font-family: var(--k-font-cjk); font-stretch: 100%; }
.about-text { font-size: 18px; font-weight: 500; line-height: 1.6; }
.about-tags { display: flex; flex-wrap: wrap; gap: 6px 16px; font-family: var(--k-font-mono); font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.about-author { padding: 36px var(--pad) 32px; display: flex; flex-direction: column; gap: 10px; }
.about-author[hidden], .about-build[hidden] { display: none; }
.about-kicker { padding-top: 12px; font-family: var(--k-font-mono); font-weight: 700; font-size: 14px; letter-spacing: .08em; color: var(--k-ink2); }
.about-author .about-kicker { border-top: 2px solid #7086FF; }
.about-author .display { font-size: 36px; line-height: 1; }
.about-role { font-size: 18px; font-weight: 500; color: var(--k-ink2); }
.about-btn {
  margin-top: 6px; align-self: flex-start; height: 52px; padding: 0 18px; display: flex; align-items: center; gap: 18px;
  background: var(--k-btn-bg); color: var(--k-btn-ink); font-weight: 800; font-size: 17px; text-decoration: none;
}
.about-build { background: #0B0C10; color: #FFFFFF; padding: 32px var(--pad) calc(var(--safe-bottom) + 28px); display: flex; flex-direction: column; gap: 16px; }
.about-build .about-kicker { color: #FFD43B; padding-top: 0; }
.about-own { font-family: var(--k-font-display); font-stretch: 125%; font-weight: 900; font-size: clamp(32px, 10vw, 40px); line-height: .98; color: #FFD43B; text-wrap: balance; }
.about:lang(zh-Hant) .about-own, .about:lang(ja) .about-own { font-family: var(--k-font-cjk); font-stretch: 100%; }
.about-build p { font-size: 18px; font-weight: 500; line-height: 1.55; }
.about-btn.yellow { align-self: stretch; height: 60px; justify-content: space-between; background: #FFD43B; color: #0B0C10; font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .stage, .about { transition: none; } }
body.about-open .fx-drift { display: none; }
.about h2, .about h3, .about p { margin: 0; }

/* ── Welcome, second version ─────────────────────────────────────────────
   Maker has his own stage above the text (which overlaps it by 30px), so
   his arms no longer cover the title or the cards; app.js measures the
   text into --land-h. */
body[data-state="landing"], body.demo[data-state="landing"] {
  --lift: 0px; --stage-h: max(calc(var(--safe-top) + 52px + 200px), calc(100% - var(--land-h, 380px) + 30px));
}
[data-state="landing"] .sheet { --sheet-h: var(--land-h, 380px); max-height: none; }
[data-state="landing"] .sheet .pane.landing { padding-top: 0; padding-bottom: 6px; overflow: visible; }
body[data-state="landing"] .avatar { top: 28px; }
[data-state="landing"] .crop.bl, [data-state="landing"] .crop.br, [data-state="landing"] .stage-count { display: none; }
.pane.landing .box.match { margin-top: 6px; }
.pane.landing #checkin { margin-top: 10px; gap: 12px; }
body.demo .ci-msg { font-size: 16px; line-height: 1.35; }
.ci-choices button.guest { height: clamp(96px, 26.7vw, 112px); }
/* Not you? · About Maker, on one row; no underlines. */
.ci-links { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; margin-top: -4px; }
.ci-links .textlink { height: 44px; text-decoration: none; font-size: 16px; font-weight: 700; }
#start b { font-size: 22px; font-weight: 900; }
/* Streamers: two rows a third of the way down the stage, behind Maker. */
.fx-drift { top: 34%; bottom: 0; height: auto; }
.fx-row:nth-child(1) { top: 0; animation-duration: 16s; }
.fx-row:nth-child(2) { top: 1.1em; animation-duration: 20s; }
.fx-row:nth-child(3) { display: none; }
/* Loading: LIVE 3D BY / Perxona / ten cells / LOADING MAKER, inside the stage. */
.credit { inset: 28px 0 40px; gap: 16px; }
.credit-cells { display: flex; gap: 4px; }
.credit-cells i { width: 16px; height: 10px; box-sizing: border-box; border: 2px solid #7086FF; }
.credit-cells i.on { background: var(--k-ink); border-color: var(--k-ink); }
.credit-label { font-family: var(--k-font-mono); font-weight: 700; font-size: 16px; letter-spacing: .06em; color: var(--k-ink); }
/* Streamers start once Maker is on stage (the loading credit stands alone). */
body:not(.avatar-ready):not(.slow-avatar) .fx-drift { display: none; }

/* ── About Maker, second version: Maker floats over the page ──────────── */
body.about-open .about { top: calc(var(--safe-top) + 52px); }
.about-head { padding: 16px 148px 8px var(--pad); }            /* room for Maker on the right */
body.float-left .about-head { padding: 16px var(--pad) 8px 148px; }
.about-head .display { font-size: clamp(36px, 10.3vw, 44px); }
/* The stage itself floats: same live 3D canvas, a small framed box. */
body.about-open .stage {
  position: fixed; right: auto; width: 132px; height: 188px; z-index: 70; touch-action: none; cursor: grab;
  transition: left .26s cubic-bezier(.2, 1.3, .4, 1), top .26s cubic-bezier(.2, 1.3, .4, 1), opacity .2s, transform .16s;
}
body.float-closing .stage { transition: none; }
body.about-open .avatar { inset: 0 0 6px; top: 0; z-index: 1; pointer-events: none; }
body.about-open .stage-label, body.about-open .stage-count, body.about-open .credit, body.about-open .stage-chip { display: none; }
body.about-open .crop { width: 12px; height: 12px; }
body.about-open .stage::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 84px; height: 12px; margin-left: -42px; border-radius: 50%; background: rgb(11 12 16 / .28); }
body.float-fade:not(.float-dragging) .stage { opacity: .5; }
body.float-dragging .stage { transform: scale(1.06) rotate(-3deg); cursor: grabbing; transition: transform .12s ease-out; }
body.float-dragging .crop { border-color: #FFD43B; }
/* – shrinks him to a card; the bubble talks. */
.float-min { position: absolute; top: -8px; left: -8px; z-index: 3; width: 44px; height: 44px; border: 0; background: none; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.float-min span { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--k-btn-bg); color: var(--k-btn-ink); font-family: var(--k-font-mono); font-weight: 800; font-size: 18px; line-height: 1; }
.float-min[hidden], .float-bubble[hidden] { display: none; }
.float-bubble {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 3; margin: 0; max-width: 200px; width: max-content; box-sizing: border-box;
  padding: 8px 12px; background: var(--k-btn-bg); color: var(--k-btn-ink); border: 2px solid #0B0C10;
  font-weight: 700; font-size: 16px; line-height: 1.3; text-align: left;
}
body.float-left .float-bubble { right: auto; left: 0; }
body.float-dragging .float-bubble, body.float-dragging .float-min { display: none; }
/* Minimized: a white card at the edge with his head peeking out. */
body.float-mini .stage { width: 60px; height: 68px; background: #FFFFFF; border: 2px solid #0B0C10; overflow: hidden; cursor: pointer; }
body.float-mini .avatar { top: 2px; bottom: auto; left: -40px; right: -40px; height: 150px; }
body.float-mini .crop, body.float-mini .float-min, body.float-mini .float-bubble, body.float-mini .stage::after { display: none; }
/* While dragging: dashed guides on both sides, the nearer one yellow. */
.float-guide { position: fixed; top: calc(var(--safe-top) + 52px); bottom: var(--safe-bottom); width: 0; z-index: 65; border-left: 2px dashed #7086FF; display: none; }
.float-guide.l { left: 6px; }
.float-guide.r { right: 6px; }
.float-guide.near { border-color: #FFD43B; }
body.float-dragging .float-guide:not([hidden]) { display: block; }

/* ── Welcome spacing ──────────────────────────────────────────────────── */
/* Room under the top bar: the stage's corners and Perxona label breathe. */
body[data-state="landing"] .stage { top: calc(var(--safe-top) + 52px + 14px); height: calc(var(--stage-h) - var(--safe-top) - 52px - 14px); }
/* HI, I'M / MAKER.: more space between the lines, so the comma clears the A. */
.pane.landing #hi { line-height: 1.02; }
/* The guest cards sit a little lower. */
body.demo .ci-choices { margin-top: 6px; }
/* "About Maker →": a yellow chip with black text, a little lower. */
.pane.landing #about-link {
  margin-top: 6px; height: 40px; padding: 0 14px; display: inline-flex; align-items: center;
  background: #FFD43B; color: #0B0C10; font-weight: 800;
}
.pane.landing #about-link[hidden] { display: none; }
.ci-links { margin-top: 2px; row-gap: 8px; }
/* Streamers: centered on Maker, a little above his middle. */
.fx-drift { top: 50%; bottom: auto; height: 2.2em; font-size: clamp(70px, 21.5vw, 92px); transform: translateY(-62%); }
.fx-row { font-size: 1em; }
/* The demo hint keeps its own line break (EN: two short lines). */
body.demo .ci-msg { white-space: pre-line; }
/* Streamers 30% faster, only on the welcome
   screen; "Match me" first and yellow. */
.fx-row:nth-child(1) { animation-duration: 12.3s; }
.fx-row:nth-child(2) { animation-duration: 15.4s; }
body:not([data-state="landing"]) .fx-drift { display: none; }
.chips button.main { background: #FFD43B; color: #0B0C10; border-color: #FFD43B; font-weight: 900; }
/* Chat buttons: one row under the chat (yellow
   Match me, then Maker's 💬 questions), the program behind ☰, and the way
   into the program as a line under the answer instead of a big white box. */
.chips button.ask { display: inline-flex; align-items: center; gap: 8px; }
.chips button.ask .g-icon { height: 14px; width: auto !important; flex: none; }
.inputbar { position: relative; }
.menu-btn {
  width: 52px; height: 64px; flex: none; cursor: pointer; background: transparent; color: var(--k-ink);
  border: 2px solid var(--k-ctl-line); font-size: 24px; line-height: 1;
}
.menu-btn[aria-expanded="true"] { background: var(--k-ink); color: var(--k-bg, #2433F2); }
.menu-pop {
  position: absolute; left: var(--pad); bottom: calc(100% - 4px); z-index: 20; min-width: 200px;
  display: flex; flex-direction: column; background: #fff; border: 2px solid #0B0C10; animation: rise .2s ease-out both;
}
.menu-pop[hidden] { display: none; }
.menu-pop button {
  height: 52px; padding: 0 16px; text-align: left; cursor: pointer; background: #fff; color: #0B0C10; border: 0;
  border-top: 1px solid rgba(11, 12, 16, .15); font-family: var(--k-font-cjk); font-weight: 800; font-size: 17px;
}
.menu-pop button:first-child { border-top: 0; }
.card.link-card { background: transparent; border: 0; padding: 0; box-shadow: none; }
.card.link-card a { background: transparent; color: #FFD43B; border: 0; padding: 4px 0; height: auto; min-height: 44px; justify-content: flex-start; gap: 6px; font-weight: 800; text-decoration: none; }
.card.link-card a { align-self: flex-start; display: inline-flex; }
.card.link-card a .mono { margin-left: 4px; }
/* "Not Alex? Switch" and "About Maker" on one line, centred on each other;
   the builder icon after "About Maker" instead of an arrow. */
.ci-links { align-items: center; }
.pane.landing .ci-links .textlink { margin: 0; height: 40px; display: inline-flex; align-items: center; align-self: center; }
.pane.landing #about-link, .pane.landing #notme { margin: 0; }
.pane.landing #about-link { gap: 8px; }
.pane.landing #about-link .g-icon { height: 18px; width: auto !important; flex: none; }
/* Tonight's quest: the way into the program as an RPG
   quest list, ticked off as each part is opened. */
.quest { flex: none; display: flex; flex-direction: column; border: 2px solid #FFD43B; animation: rise .35s ease-out both; }
.quest-head {
  display: flex; justify-content: space-between; padding: 6px 12px; background: #FFD43B; color: #0B0C10;
  font-family: var(--k-font-mono); font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.quest-row {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; cursor: pointer; text-align: left;
  background: transparent; color: var(--k-ink); border: 0; border-top: 1px solid rgba(255, 212, 59, .35);
  font-family: var(--k-font-cjk); font-size: 16px; font-weight: 700;
}
.quest-row:first-of-type { border-top: 0; }
.quest-box { width: 20px; height: 20px; flex: none; border: 2px solid currentColor; display: flex; align-items: center; justify-content: center; }
.quest-box .g-icon { height: 10px; width: auto !important; }
.quest-text { flex: 1; }
.quest-go { font-family: var(--k-font-mono); color: #FFD43B; }
.quest-row.now { background: rgba(255, 212, 59, .14); color: #FFD43B; }
.quest-row.done .quest-text { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .65; }
.quest-row.done .quest-box { background: #FFD43B; border-color: #FFD43B; color: #0B0C10; }
.quest.complete .quest-head { animation: quest-yay .6s steps(4) 2; }
@keyframes quest-yay { 50% { background: #fff; } }
@media (prefers-reduced-motion: reduce) { .quest.complete .quest-head { animation: none; } }
/* The creator card as a signature: the creator's pixel logo
   in a frame with crop-mark corners like the stage's, then a dashed pixel
   rule, her name and LinkedIn on one line. */
.about-author.signed { margin: 28px var(--pad) 36px; padding: 28px 20px 20px; gap: 22px; position: relative; border: 2px solid rgba(255, 255, 255, .35); }
.about-author.signed::before, .about-author.signed::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid #FFD43B;
}
.about-author.signed::before { top: -2px; left: -2px; border-top-width: 4px; border-left-width: 4px; }
.about-author.signed::after { bottom: -2px; right: -2px; border-bottom-width: 4px; border-right-width: 4px; }
.about-author .about-logo { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.about-sig-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 6px, transparent 6px 12px) top / 100% 2px no-repeat;
}
.about-sig { font-family: var(--k-font-display); font-stretch: 125%; font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: .02em; white-space: nowrap; }
.about-sig-row .about-btn { margin: 0; height: 44px; padding: 0 14px; gap: 10px; font-size: 16px; }
/* Sound starts off: the button asks to be tapped (yellow, a gentle pulse)
   until it is; then it's the plain white "on" state. */
.sound[aria-pressed="false"] { background: #FFD43B; color: #0B0C10; border-color: #FFD43B; animation: sound-ask 1.6s ease-in-out infinite; }
@keyframes sound-ask { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 59, .7); } 60% { box-shadow: 0 0 0 8px rgba(255, 212, 59, 0); } }
@media (prefers-reduced-motion: reduce) { .sound[aria-pressed="false"] { animation: none; } }
/* The offline banner, in the page's language. */
#banner [data-l] { display: none; }
html[lang="zh-Hant"] #banner [data-l="zh"], html[lang="en"] #banner [data-l="en"], html[lang="ja"] #banner [data-l="ja"] { display: inline; }