/* Kumo theme layer: loaded after each tool's own stylesheet and maps its design tokens onto Kumo's,
   so every tool shares one palette, one type pair, one light source (upper left) and one set of shadows.
   Each tool keeps a single accent: its Kumo colour. Selectors carry :root + :not() so they outrank the
   tools' own dark-mode rules (Kumo is a light site; a visitor's explicit dark choice in a tool still wins). */
:root[data-kumo]:not([data-theme="dark"]) {
  --k-ink: #1f2135; --k-ink-2: #4a4e66; --k-ink-3: #676c86; --k-line: rgba(60, 64, 110, .13);
  --k-bg: #fbfaff; --k-card: #ffffff; --k-sunk: #eef1fa; --k-hover: #e7ebf7;
  --k-brand: #6b4fd8; --k-brand-hover: #5a3fc6; --k-soft: #f3f1fb; --k-soft-ink: #4b33b0;
  --k-sh-1: 0 1px 2px rgba(40, 50, 100, .06), 0 2px 8px rgba(40, 50, 100, .05);
  --k-sh-2: 0 2px 4px rgba(40, 50, 100, .06), 0 8px 24px rgba(40, 50, 100, .08);
  --k-sh-3: 0 4px 8px rgba(40, 50, 100, .06), 0 16px 48px rgba(40, 50, 100, .12);
  --k-round: "M PLUS Rounded 1c", system-ui, -apple-system, "PingFang SC", "Hiragino Sans", sans-serif;
  --k-body: system-ui, -apple-system, "PingFang SC", "Hiragino Sans", "Segoe UI", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}
:root[data-kumo]:not([data-theme="dark"]) body { background: var(--k-bg); }

/* /image (Lumi) */
:root[data-kumo="image"]:not([data-theme="dark"]) {
  --bg: var(--k-bg); --surface: var(--k-card); --sunk: var(--k-sunk); --ink: var(--k-ink); --muted: var(--k-ink-2); --line: var(--k-line);
  --accent: #f2668f; --accent-ink: #fff; --focus: #6aa8ff;
  --display: var(--k-round); --body: var(--k-body);
}

/* /cutout (Pluck): its violet becomes Kumo mint */
:root[data-kumo="cutout"]:not([data-theme="dark"]) {
  --bg: var(--k-bg); --surface: var(--k-card); --sunk: var(--k-sunk); --ink: var(--k-ink); --sub: var(--k-ink-2); --faint: var(--k-ink-3); --line: var(--k-line);
  --violet: #1f9e91; --violet-ink: #fff; --violet-soft: #ddf3f0;
  --display: var(--k-round); --body: var(--k-body);
  --r: 16px; --shadow: var(--k-sh-2);
}

/* /subtitles (Cue): the dark editor keeps its own colours; only the light pages and accent change */
:root[data-kumo="subtitles"]:not([data-theme="dark"]) {
  --paper: var(--k-bg); --card: var(--k-card); --ink: var(--k-ink); --sub: var(--k-ink-2); --faint: var(--k-ink-3); --line: var(--k-line);
  --amber: #f0a52a; --amber-ink: #2a1a00; --amber-soft: #fdf0d8; --coral: #f2668f;
  --display: var(--k-round); --body: var(--k-body);
}

/* /chat (Kith): Kumo brand gradient, cool shadows, rounded display type */
:root[data-kumo="chat"]:not([data-theme="dark"]) {
  --bg: var(--k-bg); --surface: var(--k-card); --sunk: var(--k-sunk); --ink: var(--k-ink); --muted: var(--k-ink-2); --faint: var(--k-ink-3);
  --line: var(--k-line); --ring: rgba(60, 70, 120, .06);
  --rose: #f2668f; --violet: #5b8cff; --brand: var(--k-brand);
  --sh-1: var(--k-sh-1); --sh-2: var(--k-sh-2); --sh-3: var(--k-sh-3);
  --display: var(--k-round); --body: var(--k-body);
}

/* /voice (Wren): lavender accent, Kumo ink buttons */
:root[data-kumo="voice"]:not([data-theme="dark"]) {
  --bg: var(--k-bg); --surface: var(--k-card); --sunk: var(--k-sunk); --hover: var(--k-hover); --ink: var(--k-ink); --ink2: #3a3e55;
  --muted: var(--k-ink-2); --faint: var(--k-ink-3); --line: var(--k-line); --line2: rgba(60, 70, 120, .18);
  --accent: #8467e8; --accent-soft: #efeafd; --accent-ink: #5b3fc4;
  --btn: #7a5ce0; --btn-ink: #fff; --shadow: var(--k-sh-2);
  --font: var(--k-body); --r: 16px; --r-s: 12px;
}
:root[data-kumo="voice"]:not([data-theme="dark"]) h1, :root[data-kumo="voice"]:not([data-theme="dark"]) h2 { font-family: var(--k-round); }

/* headings never leave a single character on the last line */
:root[data-kumo] h1, :root[data-kumo] h2, :root[data-kumo] h3 { text-wrap: balance; }

/* the tool's own logo becomes its name in Kumo (bar.js swaps the text); the Kumo bar carries the brand */
.kumo-tool-name .mark, .kumo-tool-name svg { display: none !important; }
.kumo-tool-name::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: var(--kumo-c); vertical-align: middle; flex: none; }
.kumo-tool-name { font-family: var(--k-round) !important; letter-spacing: .01em; }

/* no dashed outlines anywhere: drop zones and empty slots get a soft solid edge and a light tint instead;
   while a file is dragged over, the edge takes the tool colour */
:root[data-kumo] .drop, :root[data-kumo] .drop-empty, :root[data-kumo] .pws-empty, :root[data-kumo] .scn.up, :root[data-kumo] .xempty, :root[data-kumo] .bar-box.drag {
  border-style: solid !important;
}
:root[data-kumo="cutout"] .drop { border: 1.5px solid color-mix(in srgb, var(--violet) 28%, var(--line)) !important; background: color-mix(in srgb, var(--violet) 4%, #fff); }
:root[data-kumo="subtitles"] .drop { border: 1.5px solid color-mix(in srgb, var(--amber) 35%, var(--line)) !important; background: color-mix(in srgb, var(--amber) 5%, #fff); }
:root[data-kumo="image"] .drop-empty, :root[data-kumo="image"] .pws-empty { border: 1.5px solid var(--line) !important; }
:root[data-kumo] .ptxt.note { border-top-style: solid !important; }

/* ===== One look for every tool: the same components as the Kumo home page ===== */
/* primary actions: the Kumo gradient pill, everywhere */
:root[data-kumo]:not([data-theme="dark"]) :is(.btn.primary, .act.primary, .go, .head-btn) {
  background: var(--k-brand) !important; color: #fff !important; border-color: transparent !important; border-radius: 999px !important;
  font-family: var(--k-round) !important; font-weight: 700 !important; letter-spacing: .01em; box-shadow: none !important; filter: none !important;
  transition: background-color 200ms cubic-bezier(.2, .7, .2, 1);
}
:root[data-kumo]:not([data-theme="dark"]) :is(.btn.primary, .act.primary, .go, .head-btn):hover:not(:disabled) { background: var(--k-brand-hover) !important; }
/* second actions: a light lavender tint; rare actions stay text-like (ghost) */
:root[data-kumo]:not([data-theme="dark"]) :is(.btn, .act):not(.primary):not(.ghost):not(.danger) { border-radius: 999px; background: var(--k-soft); border-color: transparent; color: var(--k-ink); }
:root[data-kumo]:not([data-theme="dark"]) :is(.btn, .act).ghost { border-radius: 999px; }
:root[data-kumo]:not([data-theme="dark"]) .chip { border-radius: 999px; }

/* each tool's header row: the same white glass strip under the Kumo bar */
:root[data-kumo]:not([data-theme="dark"]) :is(.top, .htop, .lhead) { background: rgba(255, 255, 255, .72) !important; border-bottom: 1px solid var(--k-line) !important; box-shadow: none !important; }

/* the small label above each hero heading: Kumo's kicker chip */
/* the line above each hero heading: a plain lavender label, the same as on the home page */
:root[data-kumo]:not([data-theme="dark"]) :is(.hero .kick, .hero .eyebrow) {
  display: block; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none;
  color: var(--k-soft-ink); font: 700 14px/1.4 var(--k-round); letter-spacing: .04em;
}
:root[data-kumo] .hero h1 { font-family: var(--k-round) !important; font-weight: 800 !important; letter-spacing: .01em !important; color: var(--k-ink); }

/* the mascot sticker that opens every tool's hero (bar.js puts it in) */
.kumo-sticker { display: block; width: 88px; height: 88px; margin: 0 0 16px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, var(--k-sh-2); }
:root[data-kumo="image"] .kumo-sticker { margin-inline: auto; }
@media (max-width: 640px) { .kumo-sticker { width: 64px; height: 64px; margin-bottom: 12px; } }

/* /image: the mode tabs use Kumo's segmented style (white on a soft track), not a black block */
:root[data-kumo="image"]:not([data-theme="dark"]) .tabs { background: var(--k-sunk); border-color: transparent; }
:root[data-kumo="image"]:not([data-theme="dark"]) .tab[aria-selected="true"] { background: #fff; color: var(--k-ink); box-shadow: var(--k-sh-1); }

/* /subtitles: the editor is light like the rest of Kumo (the video itself stays on black) */
:root[data-kumo="subtitles"]:not([data-theme="dark"]) {
  --ed: #ffffff; --ed2: #f6f7fc; --ed3: #eef1fa; --edline: rgba(60, 70, 120, .12); --edtext: #23263a; --edsub: #5b6078;
}
:root[data-kumo="subtitles"]:not([data-theme="dark"]) .badge { background: rgba(242, 102, 143, .12); color: #c2344f; }
:root[data-kumo="subtitles"]:not([data-theme="dark"]) .badge.long { background: rgba(240, 165, 42, .16); color: #9a5a00; }

/* /voice: one light theme for the site, so the dark-mode switch is hidden */
:root[data-kumo="voice"] #themeBtn { display: none !important; }

/* the mascot keeps visitors company while something loads, when a list is empty, and when something fails */
:root[data-kumo="image"] .card.loading::after { content: ""; position: absolute; left: 50%; top: 42%; width: 44%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: url(/img/mascot-busy.jpg) center / cover; box-shadow: 0 0 0 4px #fff; }
:root[data-kumo="image"] .err::before { content: ""; width: 40px; height: 40px; flex: none; border-radius: 50%; background: url(/img/mascot-sorry.jpg) center / cover; }
:root[data-kumo] :is(.empty:not(.sm), .vs-empty, .pws-empty, .empty-note, .nomedia)::before { content: ""; display: block; width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; background: url(/img/mascot-sleep.jpg) center / cover; box-shadow: var(--k-sh-1); }
:root[data-kumo="cutout"] .ovl .work .spin { display: none; }
:root[data-kumo="cutout"] .ovl .work::before { content: ""; display: block; width: 96px; height: 96px; margin: 0 auto 4px; border-radius: 50%; background: url(/img/mascot-busy.jpg) center / cover; animation: kumo-bob 1.6s ease-in-out infinite; }
:root[data-kumo="cutout"] .ovl .work.err::before { background-image: url(/img/mascot-sorry.jpg); animation: none; }
@keyframes kumo-bob { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { :root[data-kumo] .ovl .work::before { animation: none; } }
/* /voice: the rounded type is wider, so the hero heading steps down a size to keep its two lines */
:root[data-kumo="voice"] .hero h1 { font-size: clamp(32px, 3.6vw, 48px) !important; }
/* /subtitles timeline (drawn on a canvas; Cue reads these) */
:root[data-kumo="subtitles"]:not([data-theme="dark"]) {
  --tl-ruler: #eef1fa; --tl-text: #6f7590; --tl-tick: #d5daea; --tl-wave: rgba(91, 96, 120, .28); --tl-after: rgba(60, 70, 120, .06);
  --tl-block: rgba(240, 165, 42, .34); --tl-block-text: #5a3a00;
}

/* ===== One menu, no repeats ===== */
/* the tools' own header rows go: the Kumo menu is the only top bar (editor bars and section tabs stay) */
:root[data-kumo="image"] header.top,
:root[data-kumo="cutout"] header.top:not(.ed),
:root[data-kumo="subtitles"] header.htop,
:root[data-kumo="voice"] .lhead { display: none !important; }
/* /chat keeps its section tabs as a light second row; its logo, language and the Kumo menu don't repeat */
:root[data-kumo="chat"] header.top .logo { display: none !important; }
:root[data-kumo="chat"] header.top { background: rgba(255, 255, 255, .6) !important; }
/* /voice: the sidebar is the tool's own section list; brand and language live in the Kumo menu */
:root[data-kumo="voice"] .side-top .brand { visibility: hidden; }
/* one language switch for the site, in the Kumo menu */
:root[data-kumo] :is(.lang, #langBtn) { display: none !important; }

/* /image: pictures become videos in Studio, so the drawing tool's own video maker is not shown twice */
:root[data-kumo="image"] .tab[data-mode="video"], :root[data-kumo="image"] #mineVideo, :root[data-kumo="image"] [data-vw="video"], :root[data-kumo="image"] .how-video { display: none !important; }
:root[data-kumo="image"] .tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kumo-all { margin-left: auto; align-self: center; color: var(--k-ink-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.kumo-all:hover { color: var(--k-ink); }

/* tool pages open straight on the tool: the long how-to, feature and privacy blocks are said once on the home page */
:root[data-kumo="image"] .how, :root[data-kumo="image"] footer.foot,
:root[data-kumo="cutout"] section.steps, :root[data-kumo="cutout"] section.privacy, :root[data-kumo="cutout"] footer.foot,
:root[data-kumo="subtitles"] section.how, :root[data-kumo="subtitles"] section.feats, :root[data-kumo="subtitles"] section.limits, :root[data-kumo="subtitles"] footer.foot,
:root[data-kumo="chat"] footer.foot { display: none !important; }

/* questions fold into one block (bar.js) */
:root[data-kumo] section.faq { padding-block: 24px 48px !important; background: none !important; }
.kumo-faq { max-width: 880px; margin: 0 auto; padding: 0 24px; border-radius: 16px; background: #fff; box-shadow: var(--k-sh-1); }
.kumo-faq > summary { display: flex; align-items: center; justify-content: space-between; height: 64px; cursor: pointer; list-style: none; font: 800 18px/1 var(--k-round); color: var(--k-ink); }
.kumo-faq > summary::-webkit-details-marker { display: none; }
.kumo-faq > summary::after { content: "+"; font: 400 24px/1 var(--k-body); color: var(--k-ink-3); }
.kumo-faq[open] > summary::after { content: "−"; }
.kumo-faq[open] { padding-bottom: 16px; }

/* the one Kumo footer at the end of every tool page */
.kumo-foot { margin-top: 48px; padding: 32px 24px 48px; border-top: 1px solid var(--k-line, rgba(60, 70, 120, .12)); color: #8a8fa6; font: 400 14px/1.6 system-ui, -apple-system, "PingFang SC", sans-serif; }
.kf-in { max-width: 1200px; margin: 0 auto; display: grid; gap: 12px; }
.kf-logo { font: 800 18px/1 "M PLUS Rounded 1c", system-ui, sans-serif; color: #23263a; text-decoration: none; }
.kumo-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.kumo-foot nav a { color: #5b6078; text-decoration: none; }
.kumo-foot nav a:hover { color: #23263a; }
.kumo-foot p { margin: 0; max-width: 680px; }


/* ===== One compact scale for every page (the home, Studio and My works use the same numbers) =====
   headline 44 → section title 26 → body 16; 40px between sections; hero starts 32px under the menu */
:root[data-kumo] { --k-h1: clamp(30px, 3.4vw, 44px); --k-h2: clamp(22px, 2.2vw, 26px); --k-sec: 40px; }
@media (max-width: 760px) { :root[data-kumo] { --k-sec: 32px; } }
:root[data-kumo] .hero h1 { font-size: var(--k-h1) !important; line-height: 1.18 !important; margin-bottom: 12px !important; }
:root[data-kumo] :is(.head h2, .sec-h h2, .faq h2, section > h2) { font: 800 var(--k-h2)/1.25 var(--k-round) !important; letter-spacing: .01em !important; color: var(--k-ink); }
.kumo-sticker { width: 72px; height: 72px; margin-bottom: 12px; }
@media (max-width: 640px) { .kumo-sticker { width: 56px; height: 56px; } }
/* no tinted bands: every section sits on the same sky, cards carry the contrast */
:root[data-kumo] .band { background: none !important; box-shadow: none !important; clip-path: none !important; }
:root[data-kumo="image"] .band :is(.sc, .mock, .ex) { background: var(--surface); }

/* /image */
:root[data-kumo="image"] .hero { padding-block: 32px 24px !important; }
:root[data-kumo="image"] body > section:not(.hero) { padding-block: var(--k-sec) !important; }
:root[data-kumo="image"] .uses-wrap { display: none !important; } /* the size picker in the box already shows every size */
/* /cutout */
:root[data-kumo="cutout"] .hero { padding-block: 32px 24px !important; }
:root[data-kumo="cutout"] section.make, :root[data-kumo="cutout"] section.faq { margin-top: var(--k-sec) !important; }
/* /subtitles */
:root[data-kumo="subtitles"] .hero { padding-top: 32px !important; }
:root[data-kumo="subtitles"] section.recent, :root[data-kumo="subtitles"] section.faq { margin-top: var(--k-sec) !important; }
/* /chat */
:root[data-kumo="chat"] { --sec: var(--k-sec); }
:root[data-kumo="chat"] .hero { padding: 32px 0 var(--k-sec) !important; }
:root[data-kumo="chat"] .head { margin-bottom: 16px; }
/* /chat: the feed has its own tab, so the square doesn't repeat it as a preview */
:root[data-kumo="chat"] section.sec:has(.fgrid3) { display: none !important; }
/* /chat on a phone: characters two to a row, so the square doesn't run on for screens */
@media (max-width: 640px) {
  :root[data-kumo="chat"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  :root[data-kumo="chat"] .card-body { padding: 12px; gap: 6px; }
  :root[data-kumo="chat"] .card-name b { font-size: 16px; }
  :root[data-kumo="chat"] .card-body > p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
  :root[data-kumo="chat"] .card-acts .btn { height: 32px; padding: 0 10px; font-size: 13px; }
}
/* /chat on a phone: scene doors, the four sample conversations and the "how to play" cards sit in rows you
   swipe sideways, instead of stacking into a page many screens long */
@media (max-width: 640px) {
  :root[data-kumo="chat"] :is(.dgrid3, .fgrid, .pgrid) {
    display: grid !important; grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px !important;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px 12px; scroll-padding-inline: 16px;
  }
  :root[data-kumo="chat"] .pgrid { grid-auto-columns: 72%; }
  :root[data-kumo="chat"] :is(.dgrid3, .fgrid, .pgrid)::-webkit-scrollbar { display: none; }
  :root[data-kumo="chat"] :is(.dgrid3, .fgrid, .pgrid) > * { scroll-snap-align: start; min-width: 0; }
}
/* /subtitles on a phone: the demo already opens the page, so the mascot sticker would sit mid-way down */
@media (max-width: 900px) { :root[data-kumo="subtitles"] .kumo-sticker { display: none; } }
/* /chat below 860px: the section tabs move to the bottom bar, which left a 56px top row holding only the persona
   chip (Personas is already a bottom tab). Collapse that row so short and zoomed windows keep the height for content. */
@media (max-width: 860px) {
  :root[data-kumo="chat"] header.top { box-shadow: none !important; background: transparent !important; }
  :root[data-kumo="chat"] header.top .top-in { height: 0; padding: 0; }
  :root[data-kumo="chat"] header.top .top-in > :not(.tnav) { display: none !important; }
}
/* /chat character page, one column: the 5:4 portrait spans the full width and was taller than a short or zoomed
   window (550px in a 450px view), pushing the name and Start button out of sight. Cap it to part of the screen. */
@media (max-width: 860px) {
  :root[data-kumo="chat"] .dpic .ph.dp { width: 100%; max-height: 58dvh; }
  :root[data-kumo="chat"] .dpic .ph.dp img { object-position: 50% 30%; }
}