/* Dak Duck · Planygo Software — site styles.
   Layout: one left-aligned reading column (max 1080px); legal pages use a narrower .prose column.
   No external fonts or requests: system rounded face for display, system sans for body (CJK-aware). */
:root {
  --bg: #F3F8F7;          /* mint-tinted white */
  --surface: #FFFFFF;
  --ink: #163A3A;         /* deep teal ink */
  --muted: #587170;
  --brand: #23807A;       /* Dak Duck teal, darkened for AA text contrast */
  --brand-strong: #1F5E63;
  --brand-soft: #DCEFEC;
  --accent: #E8962A;      /* beak orange */
  --line: #CFE2DF;
  --font-display: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F1D1D; --surface: #162A2A; --ink: #E6F1F0; --muted: #9DB8B6;
    --brand: #5EC2BA; --brand-strong: #8AD6CF; --brand-soft: #1F3A39; --accent: #F2B25A; --line: #27413F;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-strong); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
p { margin: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin: 0; text-wrap: balance; letter-spacing: -0.005em; }
h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.8vw, 1.95rem); }
h3 { font-size: 1.2rem; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.95em; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 60ch; }

/* language switch: only the active language renders; .all-lang always shows */
[data-lang="en"] .zh { display: none !important; }
[data-lang="zh"] .en { display: none !important; }

.wrap {
  max-width: 1080px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }

/* header */
.site-head { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; gap: 16px 24px; padding-block: 10px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; }
.brand b { font-family: var(--font-display); font-size: 1.1rem; display: block; line-height: 1.15; }
.brand small { display: block; font-size: 0.72rem; color: var(--muted); letter-spacing: 0.02em; line-height: 1.2; }
.main-nav { display: flex; gap: 6px 18px; margin-left: auto; flex-wrap: wrap; }
.main-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 4px 0; border-bottom: 2px solid transparent; }
.main-nav a:hover { color: var(--brand); }
.main-nav a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--surface); }
.lang button { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.85rem; font-weight: 600; padding: 6px 12px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--brand); color: #fff; }

/* sections */
main { display: block; }
.section { padding-block: 56px; }
.section + .section { border-top: 1px solid var(--line); }
.sec-head { display: grid; gap: 10px; margin-bottom: 28px; max-width: 64ch; }
.stack { display: grid; gap: 14px; }

/* hero */
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: 48px 40px; }
.hero-copy { display: grid; gap: 20px; min-width: 0; }
.hero-art { display: grid; place-items: center; min-width: 0; }
.hero-art img { width: min(100%, 360px); border-radius: 28px; background: #fff; box-shadow: 0 20px 50px -30px rgba(22, 58, 58, 0.45); }

/* buttons */
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--surface); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }

/* cards (product lines etc.) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.card img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--brand-soft); }
.card-body { padding: 16px 18px 18px; display: grid; gap: 8px; align-content: start; }
.card-body h3 { font-size: 1.12rem; }
.meta { font-size: 0.9rem; color: var(--muted); }
.price { font-family: var(--font-display); font-weight: 700; color: var(--brand-strong); font-variant-numeric: tabular-nums; }
.tag { display: inline-flex; align-self: start; justify-self: start; background: var(--brand-soft); color: var(--brand-strong); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; padding: 3px 10px; border-radius: 999px; }

/* facts (company page) */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; border-top: 1px solid var(--line); margin: 0; }
.facts > div { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 12px; padding-block: 14px; border-bottom: 1px solid var(--line); min-width: 0; }
.facts dt { color: var(--muted); font-size: 0.9rem; padding-top: 2px; }
.facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { background: var(--brand-soft); font-weight: 700; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }

/* notices */
.notice { background: var(--brand-soft); border-radius: 12px; padding: 14px 18px; font-size: 0.95rem; max-width: 72ch; }
.notice.warn { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); }

/* long-form legal / policy text */
.doc { padding-block: 40px 64px; }
.doc-head { display: grid; gap: 10px; margin-bottom: 24px; max-width: 72ch; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 28px; }
.toc a { text-decoration: none; border: 1px solid var(--line); background: var(--surface); padding: 5px 12px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.toc a:hover { border-color: var(--brand); color: var(--brand); }
.prose { max-width: 72ch; display: grid; gap: 14px; }
.prose h2 { font-size: 1.35rem; margin-top: 18px; }
.prose h3 { font-size: 1.08rem; margin-top: 8px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.prose li > p { margin: 0; }
.lang-version { border-top: 3px solid var(--brand); padding-top: 18px; margin-top: 28px; scroll-margin-top: 90px; }
.lang-version:first-of-type { margin-top: 0; }
.lang-version > .lang-label { font-family: var(--font-display); font-weight: 700; color: var(--brand); letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; }

/* contact */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.contact-card .big { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; overflow-wrap: anywhere; }
.copy { appearance: none; justify-self: start; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 0.85rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.copy:hover { border-color: var(--brand); color: var(--brand); }
.copy .done { display: none; }
.copy.copied .idle { display: none; }
.copy.copied .done { display: inline; }

/* footer */
.site-foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: 24px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px 40px; padding-block: 28px 36px; font-size: 0.9rem; }
.foot-legal { display: grid; gap: 6px; min-width: 0; }
.foot-s30 strong { font-weight: 700; }
.foot-links { display: grid; gap: 6px; align-content: start; }
.foot-links a { color: var(--ink); text-decoration: none; }
.foot-links a:hover, .foot-links a[aria-current="page"] { color: var(--brand); text-decoration: underline; }
.foot-copy { grid-column: 1 / -1; font-size: 0.82rem; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero .wrap { grid-template-columns: 1fr; padding-block: 28px 28px; gap: 24px; }
  .hero-art { order: -1; }
  .hero-art img { width: min(62%, 240px); }
  .head-row { flex-wrap: wrap; gap: 8px 10px; }
  .brand { flex: 1 1 0; min-width: 0; }
  .brand img { width: 38px; height: 38px; }
  .brand-text { min-width: 0; }
  .brand small { font-size: 0.66rem; }
  .lang { flex: 0 0 auto; }
  .lang button { padding: 6px 10px; }
  .main-nav { order: 3; width: 100%; margin-left: 0; gap: 4px 18px; }
  .facts { grid-template-columns: 1fr; }
  .facts > div { grid-template-columns: minmax(0, 130px) minmax(0, 1fr); }
  .foot-grid { grid-template-columns: 1fr; }
  .section { padding-block: 40px; }
}
@media (prefers-reduced-motion: no-preference) {
  .btn, .card { transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }
  .card:hover { transform: translateY(-2px); }
}
@media print {
  .site-head, .lang, .skip, .btn-row { display: none !important; }
  [data-lang] .zh, [data-lang] .en { display: revert !important; }
}

/* ===================== v2 components (2026-10-23) ===================== */
/* The dotted teal ground from the Dak Duck logo, as a reusable band. */
.band-dots {
  background-color: var(--brand-soft);
  background-image: radial-gradient(color-mix(in srgb, var(--brand) 26%, transparent) 2px, transparent 2.6px);
  background-size: 22px 22px;
}
.band-surface { background: var(--surface); }
.section.band-dots, .section.band-surface { border-top: 0; }

/* hero v2: copy + stage panel with Dak on the dotted ground */
.hero2 .wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 36px; align-items: center; padding-block: 44px 36px; }
.hero2 .hero-copy { display: grid; gap: 18px; min-width: 0; }
.stage { position: relative; border-radius: 32px; min-height: 340px; display: grid; place-items: center; overflow: hidden; }
.stage img.stage-dak { width: min(78%, 300px); filter: drop-shadow(0 18px 24px rgba(22, 58, 58, 0.18)); }
.speech { position: relative; display: inline-block; background: var(--surface); color: var(--ink); border: 2px solid var(--ink); border-radius: 18px; padding: 10px 16px; font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; line-height: 1.35; max-width: 28ch; box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--ink) 18%, transparent); }
.speech::after { content: ""; position: absolute; left: 26px; bottom: -11px; width: 18px; height: 18px; background: var(--surface); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); }
.stage .speech { position: absolute; top: 22px; left: 22px; }

/* the walking duck: 16-frame sprite (189x260 per frame) */
.walker {
  --w: 189px; --h: 260px;
  width: var(--w); height: var(--h);
  background: url("/assets/img/dak-walk-sprite.png") 0 0 / calc(var(--w) * 16) var(--h) no-repeat;
  animation: dak-walk 1.05s steps(16) infinite;
}
.walker.sm { --w: 95px; --h: 131px; }
.walker.xs { --w: 63px; --h: 87px; }
@keyframes dak-walk { to { background-position: calc(var(--w) * -16) 0; } }
.walk-lane { position: relative; overflow: hidden; height: 140px; border-bottom: 3px dashed color-mix(in srgb, var(--brand) 45%, transparent); }
.walk-track { position: absolute; left: 0; bottom: 4px; width: 100%; animation: dak-cross 22s linear -7s infinite; }
@keyframes dak-cross { from { transform: translateX(-120px); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .walker { animation: none; background-position: calc(var(--w) * -4) 0; }
  .walk-track { animation: none; transform: translateX(12%); }
}

/* three pillars */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.pillar .pillar-icon { width: 64px; height: 64px; border-radius: 18px; background: var(--brand-soft); display: grid; place-items: center; overflow: hidden; }
.pillar .pillar-icon img { width: 100%; height: 100%; object-fit: cover; }
.pillar h3 { font-size: 1.15rem; }
.pillar .more { font-weight: 700; text-decoration: none; }

/* image + text split, alternating */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.split + .split { margin-top: 40px; }
.split.reverse > :first-child { order: 2; }
.split figure { margin: 0; }
.split img { border-radius: 20px; border: 1px solid var(--line); background: #fff; width: 100%; }
.split .stack { min-width: 0; }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 16px; }
.gallery figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #fff; }
.gallery.wide img { aspect-ratio: 4 / 3; }
.gallery figcaption { padding: 10px 12px 12px; font-size: 0.88rem; color: var(--muted); }

/* small fact chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.chips li { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 0.88rem; font-weight: 600; }
.band-dots .chips li { background: var(--surface); }

/* numbered flow (order is information) */
.flow { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.flow li { counter-increment: step; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 16px 16px 56px; position: relative; min-width: 0; }
.flow li::before { content: counter(step); position: absolute; left: 14px; top: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-family: var(--font-display); font-weight: 700; display: grid; place-items: center; font-size: 0.95rem; }
.flow li strong { display: block; font-family: var(--font-display); margin-bottom: 4px; }

/* diagrams (inline SVG) */
.diagram { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; overflow-x: auto; }
.diagram svg { display: block; width: 100%; min-width: 640px; height: auto; }
.diagram figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--muted); }
.diagram svg text { fill: var(--ink); font-family: var(--font-body); }
.diagram svg .box { fill: var(--bg); stroke: var(--line); stroke-width: 2; }
.diagram svg .box-brand { fill: var(--brand-soft); stroke: var(--brand); stroke-width: 2; }
.diagram svg .box-accent { fill: color-mix(in srgb, var(--accent) 16%, var(--surface)); stroke: var(--accent); stroke-width: 2; }
.diagram svg .arrow { stroke: var(--muted); stroke-width: 2; fill: none; }
.diagram svg .arrow-head { fill: var(--muted); }
.diagram svg .label-sm { font-size: 13px; fill: var(--muted); }

/* timeline */
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: 72ch; }
.timeline li { position: relative; padding: 0 0 22px 30px; border-left: 2px solid var(--line); margin-left: 8px; }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--bg); }
.timeline time { display: block; font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline strong { display: block; font-family: var(--font-display); }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 78ch; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; }
.faq summary { cursor: pointer; list-style: none; padding: 14px 28px 14px 0; position: relative; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 2px; top: 10px; font-size: 1.3rem; color: var(--brand); font-family: var(--font-display); }
.faq details[open] summary::after { content: "–"; }
.faq details > :not(summary) { padding-bottom: 14px; }
.faq details p + p { margin-top: 8px; }

/* download card */
.download-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; background: var(--surface); border: 2px dashed var(--brand); border-radius: var(--radius); padding: 18px 20px; }
.download-card img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.download-card .btn-row { margin-top: 6px; }

/* sticker badge */
.sticker { display: inline-block; background: var(--accent); color: #1B1B1B; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; padding: 6px 12px; border-radius: 999px; transform: rotate(-3deg); }

@media (max-width: 760px) {
  .hero2 .wrap { grid-template-columns: 1fr; padding-block: 24px 28px; gap: 22px; }
  .stage { min-height: 260px; }
  .stage .speech { top: 14px; left: 14px; font-size: 0.9rem; }
  .split { grid-template-columns: 1fr; gap: 18px; }
  .split.reverse > :first-child { order: 0; }
  .download-card { grid-template-columns: 1fr; }
}

/* ===================== v2.1 fixes (2026-10-23, review round) ===================== */
/* AA contrast. Light mode: --brand 5.25:1 on --bg, 4.72:1 on --brand-soft; --muted 5.74:1 / 5.16:1.
   Text on a --brand fill uses --on-brand (white in light mode, deep teal in dark mode: 8.16:1 on #5EC2BA). */
:root { --brand: #1D736E; --muted: #4E6665; --on-brand: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root { --brand: #5EC2BA; --muted: #9DB8B6; --on-brand: #0F1D1D; }
}
.btn-primary, .btn-primary:hover, .lang button[aria-pressed="true"], .flow li::before { color: var(--on-brand); }
.brand-zh { white-space: nowrap; }

/* in-page anchors land below the sticky header */
[id] { scroll-margin-top: 88px; }

/* portrait colouring pages: show the whole 3:4 page instead of a square crop */
.gallery.tall img { aspect-ratio: 3 / 4; }

/* scrollable figures and tables: readable labels while scrolling sideways */
.diagram svg { min-width: 760px; }
.diagram:focus-visible, .table-wrap:focus-visible { outline-offset: 2px; }

/* a hint shown only where a wide table actually scrolls */
.scroll-hint { display: none; font-size: 0.88rem; }

@media (max-width: 760px) {
  /* the two-row header scrolls away on phones instead of covering ~17% of the screen */
  .site-head { position: static; }
  [id] { scroll-margin-top: 16px; }
  /* Dak first on phones, with room above the hat for the speech bubble */
  .hero2 .stage { order: -1; }
  .stage { padding-top: 64px; min-height: 0; }
  .stage img.stage-dak { width: min(56%, 210px); }
  .gallery.tall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .scroll-hint { display: block; }
}

/* hero stage v2.1 (2026-10-23): the brand artwork itself, identical in light and dark,
   with a white comic bubble near Dak's head. Replaces the frozen mid-stride pose. */
.stage { display: block; position: relative; width: min(100%, 440px); justify-self: center; aspect-ratio: 1 / 1; min-height: 0; overflow: visible; border-radius: 32px; background: none; }
.stage .stage-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 32px; box-shadow: 0 24px 48px -28px rgba(22, 58, 58, 0.55); }
.stage .speech { z-index: 1; }
.stage .speech { position: absolute; top: 3%; right: 2%; left: auto; max-width: 58%; background: #FFFFFF; color: #163A3A; border-color: #163A3A; box-shadow: 0 6px 0 -2px rgba(22, 58, 58, 0.22); }
.stage .speech::after { left: 22%; background: #FFFFFF; border-color: #163A3A; }
@media (max-width: 760px) {
  .stage { width: min(100%, 360px); }
  .stage .speech { top: 2%; right: 2%; font-size: 0.88rem; max-width: 64%; }
}