@charset "UTF-8";

:root {
  color-scheme: light;
  --paper: #f8f5ee;
  --white: #fffdf8;
  --ink: #292b32;
  --muted: #686960;
  --blue: #4968de;
  --blue-dark: #354fb4;
  --yellow: #f4d879;
  --coral: #ef7868;
  --line: #deddd4;
  --soft-blue: #e8ebf6;
  --soft-peach: #f3e6d9;
  --radius: 18px;
  --shadow: 0 8px 30px #292b3207;
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
button, input, textarea, select { font: inherit; }
button, select, input[type="color"], input[type="checkbox"], input[type="range"] { cursor: pointer; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button:disabled, input:disabled { cursor: not-allowed; }
button:disabled { opacity: .53; }
img, canvas { display: block; max-width: 100%; }
button, a { touch-action: manipulation; }
[hidden] { display: none !important; }
::selection { color: var(--ink); background: var(--yellow); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 650; }
h1 { font-size: clamp(2.8rem, 5.2vw, 5.2rem); line-height: 1.04; letter-spacing: -.065em; }
h2 { font-size: clamp(2rem, 3.5vw, 3.1rem); line-height: 1.12; letter-spacing: -.055em; }
h3 { font-size: 1.12rem; line-height: 1.35; letter-spacing: -.025em; }
p { line-height: 1.65; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 20; padding: 12px 20px; background: var(--ink); color: white; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 18px; padding: 13px 23px; border: 1px solid transparent; border-radius: 9px; font-size: .9rem; font-weight: 650; line-height: 1.4; text-decoration: none; transition: background .18s, transform .18s, border-color .18s; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: var(--white); }
.button-dark:hover:not(:disabled) { background: #41434a; }
.button-blue { background: var(--blue); color: white; }
.button-blue:hover:not(:disabled) { background: var(--blue-dark); }
.button-outline { background: transparent; border-color: #c7c8bf; color: var(--ink); }
.button-outline:hover:not(:disabled) { background: #efeee7; border-color: var(--ink); }
.button-text { padding-inline: 4px; gap: 9px; background: transparent; }
.button-small { min-height: 44px; padding: 11px 18px; font-size: .8rem; }
.button-full { width: 100%; }
.text-link { display: inline-flex; min-height: 44px; align-items: center; font-size: .87rem; font-weight: 600; }
.eyebrow { color: var(--muted); font-family: "SFMono-Regular", Consolas, monospace; font-size: .64rem; font-weight: 600; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--coral); vertical-align: 1px; }
.heading-dot { color: var(--coral); }
.subtle-label { color: var(--muted); font-size: .8rem; }

/* Shared shell */
.site-header { display: flex; max-width: 1328px; height: 104px; align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto; padding: 0 48px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; min-height: 44px; white-space: nowrap; font-size: 1.4rem; font-weight: 750; letter-spacing: -.06em; text-decoration: none; }
.wordmark-light { font-weight: 450; }
.brand-mark { position: relative; display: grid; width: 31px; height: 31px; place-items: center; border: 1.8px solid var(--ink); border-radius: 10px; font-size: 1.6rem; line-height: 1; transform: rotate(-9deg); }
.brand-mark > span { position: absolute; top: -8px; right: -3px; color: var(--coral); font-size: 1.8rem; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { position: relative; display: flex; min-height: 44px; align-items: center; font-size: .8rem; font-weight: 500; text-decoration: none; }
.site-nav a:hover { color: var(--blue); }
.site-nav a[aria-current]::after { position: absolute; right: 0; bottom: 5px; left: 0; height: 2px; background: var(--coral); content: ""; }
.site-footer { max-width: 1232px; margin: 0 auto; padding: 58px 0 28px; border-top: 1px solid var(--line); }
.footer-top, .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-top > p { color: var(--muted); font-size: .87rem; }
.footer-links, .footer-product-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 18px; }
.footer-links { padding-bottom: 25px; }
.footer-links > a, .footer-product-links > a, .footer-bottom a { display: inline-flex; min-height: 44px; align-items: center; font-size: .75rem; text-decoration: none; }
.footer-links > a { color: var(--muted); }
.footer-bottom { padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .7rem; }
.footer-bottom > div { display: flex; gap: 24px; }
.local-badge { padding: 6px 10px; border: 1px solid var(--line); border-radius: 50px; font-family: monospace; font-size: .63rem; letter-spacing: .05em; text-transform: uppercase; }

/* Homepage */
.hero { display: grid; max-width: 1232px; grid-template-columns: 1.02fr 1fr; align-items: center; gap: 65px; margin: 38px auto 64px; }
.hero-copy { padding-bottom: 14px; }
.hero-copy > .eyebrow { margin-bottom: 26px; }
.hero h1 { font-size: clamp(3.8rem, 6.6vw, 6.4rem); font-weight: 650; line-height: .99; letter-spacing: -.075em; }
.highlight-word { position: relative; z-index: 0; }
.highlight-word::after { position: absolute; z-index: -1; right: -8px; bottom: 5px; left: -4px; height: .27em; background: var(--yellow); transform: rotate(-4deg); content: ""; }
.hero-description { max-width: 380px; margin-top: 27px; color: var(--muted); font-size: .99rem; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px 21px; margin-top: 27px; }
.hero-note { max-width: 390px; margin-top: 17px; color: var(--muted); font-size: .67rem; line-height: 1.7; }
.hero-how-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); font-size: .7rem; text-decoration: none; }
.play-icon { color: var(--blue); font-size: 1.1rem; }
.hero-preview { position: relative; min-width: 0; overflow: hidden; padding: 20px 22px 16px; border: 1px solid #e1dfd5; border-radius: 22px; background: #eeece2; box-shadow: 0 12px 28px #37353006; transform: rotate(1deg); }
.preview-topline, .preview-bottom, .stage-topline { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.live-label { display: inline-flex; align-items: center; gap: 8px; color: #5b5d54; font-family: monospace; font-size: .62rem; font-weight: 600; letter-spacing: .08em; }
.live-label > span { width: 6px; height: 6px; border-radius: 50%; background: #6e927b; }
.preview-index { color: #7b7e72; font-family: monospace; font-size: .65rem; }
.hero-character-wrap { position: relative; min-height: 360px; margin-top: 8px; }
.hero-character-wrap::before { position: absolute; top: 10%; left: 12%; width: 76%; aspect-ratio: 1; border: 1px solid #deded2; border-radius: 50%; content: ""; }
#hero-avatar { position: relative; z-index: 1; width: 100%; aspect-ratio: 1; object-fit: contain; }
.preview-spark { position: absolute; z-index: 2; }
.spark-one { top: 14%; left: 3%; color: var(--blue); font-size: 2.6rem; transform: rotate(12deg); }
.spark-two { right: 7%; bottom: 24%; color: var(--coral); font-size: 3.3rem; transform: rotate(-10deg); }
.preview-sticker { position: absolute; z-index: 2; top: 10%; right: 2%; padding: 15px 13px; border: 1px solid var(--ink); border-radius: 6px; background: var(--yellow); box-shadow: 3px 3px 0 #292b32; font-family: monospace; font-size: .7rem; font-weight: 700; line-height: 1.2; transform: rotate(10deg); }
.character-label { position: absolute; z-index: 2; bottom: 5%; left: 3%; padding: 8px 14px; border: 1px solid #deddd2; border-radius: 50px; background: #fffdf8de; font-size: .8rem; font-weight: 650; transform: rotate(-4deg); }
.character-label > span { color: var(--muted); font-size: .65rem; font-weight: 400; }
.preview-bottom { position: relative; z-index: 3; padding-top: 10px; border-top: 1px solid #d8d9cc; }
.preview-controls { display: flex; padding: 3px; border: 1px solid #d8d9cc; border-radius: 50px; background: #f8f5eea0; }
.preview-controls > button { min-height: 44px; padding: 6px 15px; border: 0; border-radius: 30px; background: transparent; font-size: .7rem; }
.preview-controls > button[aria-pressed="true"] { background: var(--ink); color: white; }
.hero-template-picker { display: flex; gap: 0; }
.hero-template-picker > button { display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.hero-template-picker > button::before { width: 21px; height: 21px; border: 2px solid var(--paper); border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px #b7b8ab; content: ""; }
.hero-template-picker > button[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--ink); }
.value-strip { display: flex; max-width: 1232px; justify-content: space-between; gap: 20px; margin: 0 auto; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.value-strip > span { display: inline-flex; align-items: center; gap: 10px; font-size: .75rem; }
.value-strip i { color: var(--blue); font-size: 1.3rem; font-style: normal; }
.value-strip > span:nth-child(2) i { color: #b9745f; }
.value-strip > span:nth-child(3) i { color: #827025; }
.value-strip > span:nth-child(4) i { color: #5a8068; }
.section { max-width: 1232px; margin: 0 auto; padding: 78px 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 34px; }
.section-heading .eyebrow { margin-bottom: 14px; }
.section-heading > p { max-width: 340px; color: var(--muted); font-size: .86rem; }
.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.template-card { display: block; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: #faf8f2; text-decoration: none; transition: transform .18s, box-shadow .18s, border-color .18s; }
.template-card:hover { border-color: #bbbdb2; box-shadow: var(--shadow); transform: translateY(-5px); }
.template-art { position: relative; height: 245px; overflow: hidden; background: #ece9df; }
.template-tone-1 .template-art { background: #e7e9ed; }
.template-tone-2 .template-art { background: #eee3dd; }
.template-art::before { position: absolute; top: 18%; left: 20%; width: 60%; aspect-ratio: 1; border: 1px solid #ffffff8c; border-radius: 50%; content: ""; }
.template-art canvas { position: relative; width: 100%; height: 100%; object-fit: contain; }
.template-arrow { position: absolute; top: 13px; right: 13px; display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid #ffffffa1; border-radius: 50%; background: #ffffff44; font-size: .9rem; }
.template-card-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px 19px; }
.template-card h3 { margin-bottom: 4px; font-size: 1rem; }
.template-card-copy > div > span { color: var(--muted); font-size: .69rem; }
.template-pill { padding: 6px 9px; border: 1px solid var(--line); border-radius: 50px; font-size: .61rem; }
.section-footnote { margin-top: 23px; color: var(--muted); font-size: .74rem; line-height: 1.8; }
.section-footnote a { color: var(--ink); }
.how-section { border-top: 1px solid var(--line); }
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.step-card { position: relative; padding: 28px 28px 31px; border: 1px solid var(--line); border-radius: 13px; }
.step-number { color: #8b8d82; font-family: monospace; font-size: .7rem; }
.step-symbol { margin: 26px 0 20px; color: var(--blue); font-size: 2.5rem; line-height: 1; }
.step-card:nth-child(2) .step-symbol { color: #bf6d56; }
.step-card:nth-child(3) .step-symbol { color: #968039; }
.step-card h3 { margin-bottom: 12px; font-size: 1rem; }
.step-card p { max-width: 285px; color: var(--muted); font-size: .82rem; }
.faq-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; padding-top: 45px; }
.faq-section .section-heading { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 22px; }
.faq-list > details { border-bottom: 1px solid var(--line); }
.faq-list > details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; font-size: .88rem; font-weight: 600; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { font-size: 1.3rem; font-weight: 400; }
.faq-list details[open] summary > span { transform: rotate(45deg); }
.faq-list p { padding: 0 30px 20px 0; color: var(--muted); font-size: .82rem; }
.cta-section { position: relative; max-width: 1232px; overflow: hidden; margin: 6px auto 78px; padding: 52px 64px; border: 1px solid #ded5bb; border-radius: 15px; background: #f1e8cc; }
.cta-section > .eyebrow { color: #746c50; }
.cta-section h2 { margin: 18px 0 25px; font-size: clamp(2.7rem, 4.3vw, 4.2rem); }
.cta-doodle { position: absolute; top: 34px; right: 85px; color: var(--coral); font-size: 13rem; line-height: 1; transform: rotate(-10deg); }

/* Studio controls */
.studio-main { max-width: 1460px; margin: 24px auto 55px; padding: 0 34px; }
.studio-heading, .workspace-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 28px; }
.studio-heading h1 { margin-top: 8px; font-size: 2.6rem; }
.studio-heading > p { color: var(--muted); font-size: .85rem; }
.studio-save-note { color: var(--muted); font-size: .65rem; }
.studio-shell { display: grid; grid-template-columns: 280px minmax(280px, 1fr) 320px; align-items: start; gap: 18px; }
.studio-controls, .studio-output, .panel { min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.panel-heading h2 { font-size: 1.13rem; letter-spacing: -.035em; }
.panel-heading > span { color: #92938a; font-family: monospace; font-size: .65rem; }
.field-label { display: block; margin: 18px 0 8px; font-size: .72rem; font-weight: 600; }
.panel-heading + .field-label { margin-top: 0; }
input[type="text"], textarea, select { width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid #d4d5cb; border-radius: 7px; background: #fcfbf6; color: var(--ink); font-size: .81rem; }
input::placeholder, textarea::placeholder { color: #7a7c72; opacity: 1; }
textarea { resize: vertical; line-height: 1.6; }
select { padding-right: 27px; }
.mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 20px 0; padding: 4px; border: 1px solid var(--line); border-radius: 9px; background: #f0f0e9; }
.mode-tabs > button { min-height: 44px; padding: 9px 5px; border: 0; border-radius: 6px; background: transparent; font-size: .68rem; font-weight: 600; }
.mode-tabs > button[aria-pressed="true"] { background: var(--white); box-shadow: 0 2px 5px #292b3210; }
.species-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.species-grid > button { display: flex; min-height: 49px; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fcfbf6; font-size: .76rem; }
.species-grid > button > span { font-size: 1.1rem; }
.species-grid > button[aria-pressed="true"] { border-color: var(--blue); background: #edf0fc; color: #354fb4; }
.color-heading { margin-top: 24px; }
.color-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.color-field { display: flex; min-height: 50px; align-items: center; justify-content: space-between; gap: 4px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; font-size: .66rem; }
input[type="color"] { width: 32px; height: 32px; padding: 2px; border: 0; border-radius: 50%; background: transparent; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border: 1px solid #00000020; border-radius: 50%; }
input[type="color"]::-moz-color-swatch { border: 1px solid #00000020; border-radius: 50%; }
.control-note { margin-top: 10px; color: var(--muted); font-size: .68rem; line-height: 1.65; }
#reset-avatar { margin-top: 24px; font-size: .75rem; }
.upload-field { display: block; margin-top: 15px; padding: 14px; border: 1px dashed #bfc3b7; border-radius: 9px; background: #f7f7f1; }
.upload-field > span { display: block; margin-bottom: 10px; font-size: .75rem; font-weight: 650; }
.upload-field small { display: block; margin-top: 4px; color: var(--muted); font-size: .62rem; font-weight: 400; line-height: 1.5; }
.upload-field input { max-width: 100%; color: var(--muted); font-size: .65rem; }
.upload-field input::file-selector-button { min-height: 44px; margin-right: 6px; padding: 7px 10px; border: 1px solid #ced1c4; border-radius: 5px; background: var(--white); color: var(--ink); font: inherit; }
.studio-stage { position: sticky; top: 20px; min-width: 0; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius); background: #eeede5; }
.stage-size { color: var(--muted); font-family: monospace; font-size: .59rem; }
.stage-canvas-wrap { position: relative; width: 100%; margin-top: 14px; border-radius: 10px; background-color: #faf9f4; background-image: linear-gradient(45deg, #eaeae140 25%, transparent 25%), linear-gradient(-45deg, #eaeae140 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eaeae140 75%), linear-gradient(-45deg, transparent 75%, #eaeae140 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
#studio-avatar { width: 100%; height: auto; aspect-ratio: 1; }
.stage-corner { position: absolute; width: 13px; height: 13px; border-color: #c5c7bb; border-style: solid; }
.corner-tl { top: 13px; left: 13px; border-width: 1px 0 0 1px; }
.corner-tr { top: 13px; right: 13px; border-width: 1px 1px 0 0; }
.corner-bl { bottom: 13px; left: 13px; border-width: 0 0 1px 1px; }
.corner-br { right: 13px; bottom: 13px; border-width: 0 1px 1px 0; }
.state-controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 15px; padding: 4px; border: 1px solid #d9dbcf; border-radius: 8px; background: #f8f7f0; }
.state-controls button { min-height: 44px; padding: 6px 3px; border: 0; border-radius: 5px; background: transparent; font-size: .66rem; white-space: nowrap; }
.state-controls button[aria-pressed="true"] { background: var(--ink); color: white; }
.stage-status { min-height: 22px; margin: 11px 0 16px; color: var(--muted); font-size: .69rem; text-align: center; }
.mic-panel { padding: 17px; border: 1px solid #d7d9cd; border-radius: 10px; background: #f8f7f0; }
.mic-panel-heading { display: flex; justify-content: space-between; gap: 10px; font-size: .75rem; font-weight: 600; }
.mic-local-label { color: var(--muted); font-size: .6rem; font-weight: 400; }
.mic-meter-track { height: 6px; overflow: hidden; margin: 14px 0; border-radius: 5px; background: #dedfd4; }
#mic-meter { width: 0; height: 100%; max-width: 100%; border-radius: inherit; background: #78977a; transition: width .08s linear; }
.mic-actions { display: flex; align-items: center; gap: 9px; }
.mic-actions .button { min-height: 44px; flex: 1 0 auto; padding: 10px 12px; font-size: .67rem; }
.mic-actions select { min-width: 0; flex: 1 1 110px; font-size: .65rem; }
.mic-error:empty { display: none; }
.mic-error { margin-top: 10px; color: #a74038; font-size: .7rem; line-height: 1.5; }
.output-section { padding: 20px 0; border-top: 1px solid var(--line); }
.output-section h3 { margin-bottom: 15px; font-size: .82rem; }
.output-section .button { min-height: 44px; margin-top: 9px; padding-inline: 13px; font-size: .72rem; }
.range-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 2px; font-size: .68rem; }
.range-label > span:last-child { color: var(--muted); font-family: monospace; font-size: .61rem; }
input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--blue); }
.checkbox-field { display: flex; min-height: 44px; align-items: center; gap: 9px; margin-top: 10px; font-size: .71rem; }
input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--blue); }
.copy-field { display: flex; gap: 5px; }
.copy-field input { min-width: 0; font-family: monospace; font-size: .62rem; }
.copy-field button { min-width: 48px; min-height: 44px; padding: 6px; border: 1px solid #d1d4c7; border-radius: 6px; background: #f1f2e8; font-size: .68rem; }
.relay-status { margin-top: 10px; color: var(--muted); font-size: .65rem; line-height: 1.6; }
.output-section .text-link { margin-top: 6px; font-size: .68rem; }
.toast:empty { display: none; }
.toast { padding: 12px; border: 1px solid #c3cdbb; border-radius: 8px; background: #ecf0e6; color: #45543b; font-size: .72rem; line-height: 1.5; overflow-wrap: anywhere; }
.studio-bottom-note { margin-top: 19px; color: var(--muted); font-size: .67rem; text-align: center; }

/* Resource and guide pages */
.guide-main, .models-main { max-width: 1232px; margin: 45px auto 70px; }
.guide-hero { max-width: 850px; padding: 20px 0 45px; }
.guide-hero > .eyebrow { margin-bottom: 20px; }
.guide-hero h1 { font-size: clamp(2.7rem, 4.6vw, 4.6rem); }
.guide-intro { max-width: 670px; margin: 24px 0; color: var(--muted); font-size: 1rem; }
.guide-content { max-width: 820px; padding: 12px 0 40px; }
.guide-content > h2 { margin: 35px 0 16px; font-size: 1.8rem; }
.guide-content > p, .guide-content > ul, .guide-content > ol { margin: 0 0 20px; color: var(--muted); font-size: .93rem; line-height: 1.85; }
.guide-content a { color: var(--blue-dark); }
.guide-content strong { color: var(--ink); font-weight: 600; }
.guide-steps { padding-left: 23px; }
.guide-steps > li { margin-bottom: 14px; padding-left: 6px; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin: 25px 0 30px; }
.info-grid > article { padding: 22px; border: 1px solid var(--line); border-radius: 11px; background: #fdfbf4; }
.info-grid h3 { margin-bottom: 10px; font-size: .95rem; }
.info-grid p { color: var(--muted); font-size: .83rem; }
.comparison-table-wrap { max-width: 100%; overflow-x: auto; margin: 20px 0 30px; border: 1px solid var(--line); border-radius: 10px; }
.comparison-table { width: 100%; border-collapse: collapse; font-size: .81rem; text-align: left; }
.comparison-table th, .comparison-table td { padding: 16px; border-bottom: 1px solid var(--line); }
.comparison-table th { background: #eeede4; font-size: .72rem; }
.comparison-table td { color: var(--muted); }
.comparison-table tr:last-child td { border-bottom: 0; }
.related-section { padding-top: 30px; border-top: 1px solid var(--line); }
.related-section h2 { margin-bottom: 24px; font-size: 1.7rem; }
.related-links { display: flex; flex-wrap: wrap; gap: 12px; }
.related-links a { display: inline-flex; min-height: 48px; align-items: center; gap: 20px; padding: 13px 17px; border: 1px solid var(--line); border-radius: 8px; font-size: .79rem; text-decoration: none; }
.related-links a:hover { border-color: var(--blue); }
.models-section { padding-top: 15px; }
.model-scope { color: var(--muted); font-family: monospace; font-size: .7rem; line-height: 1.8; }
.check-list { margin: 24px 0; padding: 0; list-style: none; }
.check-list > li { position: relative; margin-bottom: 13px; padding-left: 25px; color: var(--muted); font-size: .83rem; line-height: 1.6; }
.check-list > li::before { position: absolute; left: 0; color: var(--blue-dark); font-size: .8rem; content: "✓"; }

/* AI creation workshop */
.create-main, .dashboard-main, .pricing-main { max-width: 1232px; margin: 36px auto 75px; }
.workspace-heading h1 { margin-top: 9px; font-size: clamp(2.4rem, 3.8vw, 3.65rem); }
.workspace-heading p:not(.eyebrow) { margin-top: 14px; color: var(--muted); font-size: .9rem; }
.credit-pill { display: inline-flex; min-height: 44px; align-items: center; padding: 10px 18px; border: 1px solid #cdd2e4; border-radius: 50px; background: #edf0fa; color: var(--blue-dark); font-size: .75rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.create-layout { display: grid; grid-template-columns: 335px minmax(0, 1fr); align-items: start; gap: 35px; }
.create-controls .panel-heading { margin-bottom: 16px; }
.create-controls .field-label { margin-top: 15px; }
.create-controls textarea { min-height: 141px; background: var(--paper); font-size: .77rem; }
.prompt-group { margin-top: 16px; }
.prompt-group .field-label { margin-bottom: 7px; font-size: .66rem; }
.prompt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.prompt-chips > button { min-height: 44px; padding: 8px 10px; border: 1px solid #d8dbd0; border-radius: 50px; background: #faf9f3; color: #565c50; font-size: .62rem; }
.prompt-chips > button:hover { border-color: var(--blue); color: var(--blue-dark); }
.form-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.form-row select { font-size: .72rem; }
.reference-upload { margin-top: 19px; }
#generate-avatar { margin-top: 17px; font-size: .78rem; }
.generation-cost { margin-top: 9px; color: var(--muted); font-family: monospace; font-size: .62rem; text-align: center; }
.service-status { margin: 18px 0 0; padding: 13px 15px; border: 1px solid #dfd9bd; border-radius: 8px; background: #f6f0dc; color: #73623f; font-size: .72rem; line-height: 1.7; overflow-wrap: anywhere; }
.service-status:empty { display: none; }
.create-controls .text-link { margin-top: 7px; font-size: .72rem; }
.candidates-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 9px 0 21px; }
.candidates-heading h2 { margin-top: 10px; font-size: 1.8rem; }
.candidates-heading .subtle-label { padding-bottom: 3px; font-size: .65rem; }
.candidate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.candidate-placeholder { position: relative; display: flex; min-height: 225px; aspect-ratio: 1; flex-direction: column; align-items: center; justify-content: center; padding: 18px; border: 1px dashed #d1d3c8; border-radius: 14px; background: #f1f0e8; }
.candidate-number { position: absolute; top: 16px; left: 18px; color: #8c8e82; font-family: monospace; font-size: .65rem; }
.placeholder-shape { margin-bottom: 20px; color: #c6cabd; font-size: 3.4rem; line-height: 1; }
.candidate-placeholder:nth-child(2) .placeholder-shape { color: #d4c9b5; }
.candidate-placeholder:nth-child(3) .placeholder-shape { color: #cbc5c0; }
.candidate-placeholder p { color: #74796a; font-size: .7rem; text-align: center; }
.candidate-help { margin-top: 15px; color: var(--muted); font-size: .7rem; line-height: 1.7; }
.candidate-card, .candidate-grid > button { position: relative; min-width: 0; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: #eeede5; }
.candidate-card img, .candidate-grid > button img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.candidate-card[aria-pressed="true"], .candidate-card.selected, .candidate-grid > button.selected, .candidate-grid > button[aria-pressed="true"] { border: 3px solid var(--blue); }
.candidate-card > span, .candidate-grid > button > span { display: block; padding: 13px; background: var(--white); font-size: .75rem; }
.candidate-card > button { min-height: 44px; }
.create-tip { display: flex; gap: 17px; margin-top: 26px; padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: #f3ead8; }
.create-tip > span { color: #a1803f; font-size: 2rem; line-height: 1; }
.create-tip h3 { margin-bottom: 6px; font-size: .88rem; }
.create-tip p { color: var(--muted); font-size: .75rem; }
.pack-workspace { margin-top: 27px; }
.pack-workspace .panel-heading { margin-bottom: 13px; }
.pack-workspace h2 { margin-top: 9px; }
.pack-workspace > p { margin-bottom: 16px; color: var(--muted); font-size: .78rem; }
.expression-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 23px 0; }
.expression-grid > * { overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: #f3f2ea; }
.expression-grid img, .expression-grid canvas { width: 100%; aspect-ratio: 1; object-fit: contain; }
.expression-grid p, .expression-grid figcaption, .expression-grid > div > span { display: block; padding: 9px; font-size: .67rem; text-align: center; }

/* Sign-in and dashboard */
.login-main { display: grid; max-width: 1040px; min-height: 590px; grid-template-columns: 1fr 1fr; overflow: hidden; margin: 35px auto 85px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.login-art { position: relative; overflow: hidden; padding: 52px 42px; background: #e9e8dc; }
.login-art > p { position: relative; z-index: 1; margin-top: 145px; font-size: clamp(2.7rem, 4vw, 3.9rem); font-weight: 700; line-height: 1; letter-spacing: -.065em; }
.login-art > p > span { color: var(--blue); }
.login-spark { position: absolute; z-index: 1; top: 40px; right: 55px; color: var(--coral); font-size: 7rem; line-height: 1; transform: rotate(12deg); }
.login-orbit { position: absolute; top: 15%; left: -20%; width: 125%; aspect-ratio: 1; border: 1px solid #ced0be; border-radius: 50%; }
.login-art-note { position: absolute; right: 30px; bottom: 37px; left: 42px; color: var(--muted); font-size: .76rem; }
.login-panel { padding: 58px 44px 38px; }
.login-panel > h1 { margin: 16px 0; font-size: 2.75rem; }
.login-panel > p:not(.eyebrow) { color: var(--muted); font-size: .83rem; }
.provider-buttons { display: grid; gap: 11px; margin-top: 30px; }
.provider-button { display: flex; min-height: 54px; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border: 1px solid #d1d5c9; border-radius: 8px; background: #faf9f3; font-size: .8rem; font-weight: 500; }
.provider-letter { display: grid; width: 25px; place-items: center; color: var(--blue); font-size: 1rem; font-weight: 700; }
.provider-button[data-provider="discord"] .provider-letter { color: #475e98; }
.provider-button[data-provider="twitch"] .provider-letter { color: var(--ink); }
.login-panel .service-status { font-size: .68rem; }
.login-panel .login-note { margin-top: 24px; font-size: .76rem; }
.login-note a { display: inline-flex; min-height: 44px; align-items: center; color: var(--blue-dark); }
.login-panel .legal-note { margin-top: 18px; font-size: .64rem; }
.dashboard-summary { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; margin: 32px 0 55px; }
.balance-card { padding: 30px; border: 1px solid #d1d8eb; border-radius: 14px; background: #e7ebf6; }
.balance-card .eyebrow { color: #5f6f9b; }
.balance-number { margin: 20px 0 15px; font-size: 2.4rem; font-weight: 650; letter-spacing: -.055em; }
.balance-card a { display: inline-flex; min-height: 44px; align-items: center; color: #4e6095; font-size: .75rem; }
.dashboard-note { display: flex; align-items: center; gap: 25px; padding: 30px; border: 1px solid var(--line); border-radius: 14px; }
.note-symbol { color: var(--coral); font-size: 3rem; }
.dashboard-note h2 { margin-bottom: 10px; font-size: 1.4rem; }
.dashboard-note p { color: var(--muted); font-size: .8rem; }
.dashboard-note .text-link { margin-top: 8px; font-size: .75rem; }
.avatar-library .section-heading { margin-bottom: 20px; }
.avatar-library h2 { font-size: 1.7rem; }
.avatar-history { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.dashboard-empty { grid-column: 1 / -1; padding: 65px 25px; border: 1px dashed #c8cdbd; border-radius: 14px; text-align: center; }
.dashboard-empty > span { display: block; margin-bottom: 18px; color: #b0b6a6; font-size: 3.8rem; line-height: 1; }
.dashboard-empty p { color: var(--muted); font-size: .83rem; }
.avatar-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); text-decoration: none; }
.avatar-card img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #eeede5; }
.avatar-card h3, .avatar-card p { padding: 10px 17px 0; }
.avatar-card p { padding-bottom: 17px; color: var(--muted); font-size: .73rem; }
.avatar-card > a, .avatar-card > button { display: inline-flex; min-height: 44px; align-items: center; margin: 6px 17px 15px; font-size: .75rem; }

/* Honest preview pricing */
.pricing-heading { max-width: 680px; margin: 0 auto 44px; padding-top: 20px; text-align: center; }
.pricing-heading h1 { margin: 20px 0; font-size: clamp(3rem, 4.8vw, 4.8rem); }
.pricing-heading > p:not(.eyebrow) { max-width: 450px; margin: 0 auto; color: var(--muted); font-size: .9rem; }
.preview-notice { display: inline-flex; align-items: center; gap: 10px; margin-top: 25px; padding: 11px 17px; border: 1px solid #e1d2a8; border-radius: 50px; background: #f5edda; color: #705e36; font-size: .73rem; }
.pricing-grid { display: grid; max-width: 890px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0 auto 80px; }
.pricing-card { position: relative; padding: 35px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.pricing-featured { border: 1.5px solid var(--blue); background: #f0f2fb; }
.plan-kicker { color: var(--muted); font-family: monospace; font-size: .65rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pricing-card h2 { margin-top: 18px; font-size: 1.7rem; }
.plan-price { display: flex; align-items: baseline; gap: 9px; margin: 22px 0 17px; font-size: 3.5rem; font-weight: 650; letter-spacing: -.065em; }
.plan-price > span { color: var(--muted); font-size: .78rem; font-weight: 400; letter-spacing: 0; }
.pricing-card > p { color: var(--muted); font-size: .78rem; }
.pricing-card .check-list { min-height: 168px; margin-top: 28px; }
.pricing-card .check-list > li { font-size: .77rem; }
.plan-badge { position: absolute; top: -13px; right: 26px; padding: 7px 13px; border-radius: 50px; background: var(--blue); color: white; font-family: monospace; font-size: .59rem; letter-spacing: .07em; }
.pricing-card .plan-fine-print { margin-top: 17px; font-size: .65rem; line-height: 1.7; }
.topup-section { padding-top: 20px; border-top: 1px solid var(--line); }
.topup-section .section-heading { margin-top: 22px; }
.topup-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.topup-card { padding: 24px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
.topup-card h3 { margin: 20px 0; font-size: 1.85rem; font-weight: 650; letter-spacing: -.055em; }
.topup-card h3 > span { display: block; margin-top: 4px; color: var(--muted); font-size: .7rem; font-weight: 400; letter-spacing: 0; }
.topup-card > strong { display: block; margin-bottom: 18px; font-size: 1.15rem; }
.topup-card .button { padding-inline: 12px; font-size: .7rem; }
.pricing-details { max-width: 750px; margin: 65px auto 0; }
.pricing-details > h2 { margin-bottom: 25px; font-size: 1.8rem; }
.credit-costs > div { display: flex; justify-content: space-between; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line); font-size: .82rem; }
.credit-costs strong { color: var(--blue-dark); font-size: .78rem; }

/* Shared detail widgets for generated-character pages. */
.avatar-detail-main { max-width: 1232px; margin: 35px auto 75px; }
.avatar-detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 28px; }
.avatar-preview { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #eeede5; }
.avatar-preview canvas { width: 100%; aspect-ratio: 1; }
.avatar-detail-controls { padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.avatar-detail-controls h2 { margin-bottom: 20px; font-size: 1.5rem; }
.avatar-detail-controls .button { margin-top: 12px; }
.error-state { padding: 22px; border: 1px solid #e3beb3; border-radius: 10px; background: #f9eae5; color: #8a4639; }
.loading-state { color: var(--muted); }

/* User-approved channel architecture and visible navigation hierarchy. */
.site-nav { min-width: 0; gap: 23px; }
.site-nav a { flex: 0 0 auto; white-space: nowrap; }
.breadcrumbs { margin: 0 0 26px; }
.breadcrumbs > ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); font-size: .69rem; }
.breadcrumbs li + li::before { margin: 0 12px; color: #a7ab9d; content: "/"; }
.breadcrumbs a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink); text-decoration: none; }
.breadcrumbs a:hover { color: var(--blue-dark); text-decoration: underline; }
.channel-section { padding-top: 62px; padding-bottom: 10px; }
.channel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px; }
.channel-card { position: relative; min-width: 0; padding: 25px 22px 30px; border: 1px solid var(--line); border-radius: 13px; background: #fffdf875; text-decoration: none; transition: border-color .18s, transform .18s; }
.channel-card:hover { border-color: var(--blue); transform: translateY(-3px); }
.channel-number { display: block; margin-bottom: 25px; color: #8a8d80; font-family: monospace; font-size: .65rem; }
.channel-card h3 { padding-right: 5px; font-size: .97rem; }
.channel-card p { margin-top: 13px; color: var(--muted); font-size: .75rem; line-height: 1.7; }
.channel-arrow { position: absolute; top: 22px; right: 22px; color: var(--blue); font-size: 1rem; }
.platform-jumps { display: flex; flex-wrap: wrap; gap: 11px; margin: 0 0 30px; }
.platform-jumps a { display: inline-flex; min-height: 44px; align-items: center; padding: 11px 17px; border: 1px solid var(--line); border-radius: 50px; background: var(--white); font-size: .76rem; text-decoration: none; }
.platform-jumps a:hover { border-color: var(--blue); }
.guide-content > section { margin-bottom: 32px; scroll-margin-top: 22px; }
.guide-content > section > h2 { margin: 30px 0 16px; font-size: 1.8rem; }
.guide-content > section > p, .guide-content > section > ol { margin-bottom: 18px; color: var(--muted); font-size: .93rem; line-height: 1.85; }
.models-section .section-heading { margin-bottom: 26px; }
.models-section .section-heading > h2 { font-size: 1.9rem; }

@media (min-width: 1600px) {
  .hero { margin-top: 60px; }
  .hero h1 { font-size: 6.8rem; }
}

@media (max-width: 1328px) {
  .hero, .value-strip, .section, .site-footer, .cta-section, .guide-main, .models-main, .create-main, .dashboard-main, .pricing-main, .avatar-detail-main { margin-right: 48px; margin-left: 48px; }
  .hero { gap: 45px; }
  .hero h1 { font-size: clamp(3.6rem, 6.2vw, 5.6rem); }
  .hero-character-wrap { min-height: 0; }
  .faq-section { gap: 65px; }
  .studio-main { padding: 0 25px; }
  .studio-shell { grid-template-columns: 255px minmax(260px, 1fr) 285px; gap: 14px; }
  .studio-controls, .studio-output { padding: 20px; }
  .studio-stage { padding: 17px; }
}

@media (max-width: 1100px) {
  .site-header { height: 92px; padding: 0 32px; }
  .site-nav { gap: 20px; }
  .hero, .value-strip, .section, .site-footer, .cta-section, .guide-main, .models-main, .create-main, .dashboard-main, .pricing-main, .avatar-detail-main { margin-right: 32px; margin-left: 32px; }
  .hero { gap: 30px; margin-top: 30px; }
  .hero h1 { font-size: 4.2rem; }
  .hero-description { font-size: .91rem; }
  .hero-actions { gap: 8px; }
  .hero-actions .button { padding-inline: 15px; font-size: .8rem; }
  .hero-preview { padding: 17px 15px 13px; }
  .preview-controls > button { padding-inline: 11px; font-size: .65rem; }
  .hero-template-picker > button { width: 44px; }
  .preview-sticker { padding: 12px; font-size: .6rem; }
  .value-strip { flex-wrap: wrap; justify-content: center; gap: 15px 35px; }
  .template-art { height: 210px; }
  .template-grid { gap: 18px; }
  .faq-section { gap: 35px; }
  .cta-doodle { right: 45px; font-size: 11rem; }
  .studio-shell { grid-template-columns: 250px minmax(0, 1fr); }
  .studio-controls { grid-column: 1; grid-row: 1; }
  .studio-stage { grid-column: 2; grid-row: 1 / 3; }
  .studio-output { grid-column: 1; grid-row: 2; }
  .studio-heading > p { display: none; }
  .create-layout { grid-template-columns: 310px minmax(0, 1fr); gap: 24px; }
  .create-controls { padding: 20px; }
  .candidate-placeholder { min-height: 180px; }
  .login-main { margin-right: 45px; margin-left: 45px; }
  .topup-card { padding: 20px; }
}

@media (max-width: 800px) {
  .site-header { flex-wrap: wrap; height: auto; min-height: 94px; gap: 6px 20px; padding-top: 20px; padding-bottom: 14px; }
  .site-nav { order: 3; width: 100%; justify-content: flex-start; gap: 30px; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; }
  .site-nav a { font-size: .75rem; }
  .header-cta { margin-left: auto; }
  .hero { grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; margin-top: 24px; }
  .hero h1 { font-size: 3.1rem; }
  .hero-copy > .eyebrow { margin-bottom: 20px; font-size: .55rem; }
  .hero-description { margin-top: 20px; font-size: .82rem; }
  .hero-actions { flex-direction: column; align-items: flex-start; margin-top: 20px; }
  .hero-actions .button { font-size: .74rem; }
  .hero-note { font-size: .61rem; }
  .hero-preview { padding: 12px; }
  .preview-bottom { flex-direction: column; gap: 2px; }
  .preview-topline { gap: 6px; }
  .live-label { font-size: .52rem; }
  .preview-index { font-size: .55rem; }
  .preview-sticker { top: 8%; right: 0; padding: 9px; font-size: .48rem; }
  .spark-one { font-size: 1.8rem; }
  .spark-two { font-size: 2.3rem; }
  .character-label { padding: 6px 9px; font-size: .64rem; }
  .character-label > span { font-size: .55rem; }
  .section { padding-top: 58px; padding-bottom: 58px; }
  .section-heading { align-items: flex-start; gap: 20px; }
  .section-heading > p { max-width: 230px; font-size: .76rem; }
  .section-heading h2 { font-size: 2.15rem; }
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-art { height: 235px; }
  .steps-grid { gap: 14px; }
  .step-card { padding: 22px 20px; }
  .step-card h3 { font-size: .88rem; }
  .step-card p { font-size: .75rem; }
  .faq-section { grid-template-columns: 1fr; gap: 15px; }
  .faq-section .section-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .faq-section .text-link { max-width: 170px; font-size: .7rem; }
  .cta-section { padding: 40px; }
  .cta-doodle { top: 75px; right: 30px; font-size: 7.5rem; }
  .footer-top > p { font-size: .75rem; }
  .footer-links, .footer-product-links { gap: 0 20px; }
  .studio-main { margin-top: 18px; padding: 0 22px; }
  .studio-shell { grid-template-columns: 225px minmax(0, 1fr); gap: 13px; }
  .studio-controls, .studio-output { padding: 18px; }
  .studio-stage { padding: 14px; }
  .studio-heading h1 { font-size: 2.2rem; }
  .studio-save-note { font-size: .58rem; }
  .stage-topline { flex-wrap: wrap; gap: 6px; }
  .stage-size { font-size: .54rem; }
  .mic-panel { padding: 12px; }
  .mic-actions { flex-wrap: wrap; }
  .mic-actions .button, .mic-actions select { flex-basis: 100%; }
  .mic-panel-heading { font-size: .68rem; }
  .mic-local-label { font-size: .55rem; }
  .state-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-hero { padding-bottom: 30px; }
  .guide-hero h1 { font-size: 3.1rem; }
  .guide-intro { font-size: .9rem; }
  .create-layout { grid-template-columns: 1fr; gap: 30px; }
  .create-controls { display: block; padding: 25px; }
  .prompt-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .prompt-chips > button { font-size: .64rem; }
  .reference-upload { max-width: 450px; }
  .create-controls .service-status { max-width: 100%; }
  .candidate-placeholder { min-height: 200px; }
  .candidate-grid { gap: 20px; }
  .workspace-heading { align-items: center; }
  .workspace-heading h1 { font-size: 2.5rem; }
  .workspace-heading p:not(.eyebrow) { font-size: .8rem; }
  .credit-pill { padding-inline: 13px; font-size: .65rem; }
  .login-main { grid-template-columns: .85fr 1.15fr; min-height: 570px; margin: 22px 32px 65px; }
  .login-art { padding: 40px 25px; }
  .login-art > p { margin-top: 165px; font-size: 2.4rem; }
  .login-spark { right: 20px; font-size: 6rem; }
  .login-art-note { left: 25px; font-size: .63rem; }
  .login-panel { padding: 45px 27px 32px; }
  .login-panel > h1 { font-size: 2.35rem; }
  .provider-button { font-size: .72rem; }
  .dashboard-summary { grid-template-columns: 1fr 1fr; gap: 18px; }
  .balance-card { padding: 24px; }
  .dashboard-note { padding: 24px; }
  .note-symbol { display: none; }
  .dashboard-note h2 { font-size: 1.2rem; }
  .dashboard-note p { font-size: .74rem; }
  .avatar-history { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-card { padding: 27px; }
  .topup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avatar-detail-grid { grid-template-columns: 1fr; }
  .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  h1 { font-size: 2.7rem; }
  .site-header { min-height: 112px; padding: 18px 20px 10px; }
  .wordmark { gap: 9px; font-size: 1.21rem; }
  .brand-mark { width: 27px; height: 27px; border-radius: 8px; font-size: 1.4rem; }
  .header-cta { padding: 10px 12px; font-size: .66rem; }
  .site-nav { justify-content: flex-start; gap: 22px; }
  .site-nav a { font-size: .7rem; }
  .hero, .value-strip, .section, .site-footer, .cta-section, .guide-main, .models-main, .create-main, .dashboard-main, .pricing-main, .avatar-detail-main { margin-right: 22px; margin-left: 22px; }
  .hero { grid-template-columns: 1fr; gap: 30px; margin-top: 28px; margin-bottom: 35px; }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { font-size: clamp(3.5rem, 12.6vw, 4.5rem); line-height: .99; }
  .hero-copy > .eyebrow { margin-bottom: 23px; font-size: .59rem; }
  .hero-description { max-width: 320px; margin-top: 23px; font-size: .91rem; }
  .hero-actions { flex-direction: row; align-items: center; gap: 9px; margin-top: 23px; }
  .hero-actions .button { gap: 11px; padding-inline: 15px; font-size: .73rem; }
  .hero-actions .button-text { padding-inline: 4px; font-size: .69rem; }
  .hero-note { max-width: 340px; font-size: .63rem; }
  .hero-preview { max-width: 440px; padding: 18px 17px 13px; transform: rotate(.7deg); }
  .preview-topline { gap: 12px; }
  .live-label { font-size: .58rem; }
  .preview-index { font-size: .59rem; }
  .preview-bottom { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .preview-controls > button { min-height: 44px; padding-inline: 11px; font-size: .64rem; }
  .hero-template-picker > button { width: 44px; }
  .preview-sticker { right: 3%; padding: 11px; font-size: .6rem; }
  .spark-one { font-size: 2.3rem; }
  .spark-two { font-size: 2.6rem; }
  .character-label { padding: 7px 12px; font-size: .76rem; }
  .character-label > span { font-size: .61rem; }
  .value-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 14px; padding: 23px 0; }
  .value-strip > span { gap: 7px; font-size: .64rem; }
  .value-strip i { font-size: 1.1rem; }
  .section { padding-top: 45px; padding-bottom: 45px; }
  .section-heading { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 25px; }
  .section-heading h2 { font-size: 2rem; }
  .section-heading .eyebrow { font-size: .57rem; }
  .section-heading > p { max-width: 330px; font-size: .77rem; }
  .template-grid { gap: 12px; }
  .template-art { height: clamp(150px, 43vw, 225px); }
  .template-card { border-radius: 10px; }
  .template-card-copy { align-items: flex-start; padding: 13px 12px; }
  .template-card h3 { font-size: .88rem; }
  .template-card-copy > div > span { font-size: .61rem; }
  .template-pill { display: none; }
  .template-arrow { top: 9px; right: 9px; width: 25px; height: 25px; font-size: .75rem; }
  .section-footnote { margin-top: 18px; font-size: .68rem; }
  .steps-grid { grid-template-columns: 1fr; gap: 13px; }
  .step-card { display: grid; grid-template-columns: 35px 1fr; gap: 0 14px; padding: 23px; }
  .step-number { grid-column: 1; grid-row: 1; padding-top: 4px; }
  .step-symbol { grid-column: 1; grid-row: 2; margin: 15px 0 0; font-size: 1.8rem; }
  .step-card h3 { grid-column: 2; grid-row: 1; margin-bottom: 9px; font-size: .98rem; }
  .step-card p { max-width: none; grid-column: 2; grid-row: 2; font-size: .79rem; }
  .faq-section .section-heading { flex-direction: column; align-items: flex-start; gap: 10px; }
  .faq-section .text-link { max-width: none; }
  .faq-list summary { min-height: 65px; font-size: .8rem; }
  .faq-list p { font-size: .76rem; }
  .cta-section { margin-bottom: 50px; padding: 33px 28px; }
  .cta-section h2 { font-size: 2.3rem; }
  .cta-section .eyebrow { font-size: .55rem; }
  .cta-section .button { font-size: .75rem; }
  .cta-doodle { top: 90px; right: -15px; font-size: 5rem; opacity: .7; }
  .site-footer { padding: 35px 0 20px; }
  .footer-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-top > p { font-size: .74rem; }
  .footer-links, .footer-product-links { gap: 0 19px; margin-top: 13px; }
  .footer-links > a, .footer-product-links > a { font-size: .66rem; }
  .footer-bottom { flex-wrap: wrap; gap: 10px 20px; font-size: .62rem; }
  .footer-bottom > div { margin-left: auto; gap: 17px; }
  .footer-bottom a { font-size: .64rem; }
  .local-badge { font-size: .55rem; }
  .studio-main { margin-top: 20px; padding: 0 17px; }
  .studio-heading { align-items: flex-start; margin-bottom: 20px; }
  .studio-heading h1 { font-size: 2rem; }
  .studio-heading .eyebrow { font-size: .54rem; }
  .studio-save-note { max-width: 65px; padding-top: 14px; font-size: .55rem; line-height: 1.5; text-align: right; }
  .studio-shell { display: flex; flex-direction: column; gap: 17px; }
  .studio-stage { position: static; order: 0; width: 100%; padding: 17px; }
  .studio-controls { order: 1; width: 100%; padding: 23px; }
  .studio-output { order: 2; width: 100%; padding: 23px; }
  .stage-topline { flex-wrap: nowrap; }
  .stage-size { font-size: .57rem; }
  .stage-canvas-wrap { max-height: 380px; aspect-ratio: 1; margin-right: auto; margin-left: auto; }
  #studio-avatar { height: 100%; object-fit: contain; }
  .state-controls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .state-controls button { font-size: .64rem; }
  .mic-panel { padding: 15px; }
  .mic-actions { flex-wrap: nowrap; }
  .mic-actions .button { flex: 1 0 auto; font-size: .66rem; }
  .mic-actions select { flex: 1 1 90px; }
  .mic-panel-heading { font-size: .73rem; }
  .mic-local-label { font-size: .6rem; }
  .mode-tabs > button { font-size: .76rem; }
  .field-label { font-size: .78rem; }
  .species-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .species-grid > button { min-height: 57px; flex-direction: column; gap: 2px; padding: 9px 5px; font-size: .67rem; }
  .color-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .color-field { min-height: 55px; padding: 9px 13px; font-size: .72rem; }
  input[type="color"] { width: 36px; height: 36px; }
  .control-note { font-size: .73rem; }
  .range-label, .checkbox-field { font-size: .76rem; }
  .output-section h3 { font-size: .95rem; }
  .output-section .button { min-height: 48px; font-size: .8rem; }
  .output-section .text-link { font-size: .75rem; }
  .upload-field > span { font-size: .81rem; }
  .upload-field small { font-size: .67rem; }
  .studio-bottom-note { font-size: .6rem; line-height: 1.7; }
  .guide-main, .models-main { margin-top: 24px; margin-bottom: 45px; }
  .guide-hero { padding-top: 10px; padding-bottom: 20px; }
  .guide-hero h1 { font-size: 2.65rem; }
  .guide-hero .eyebrow { margin-bottom: 17px; font-size: .57rem; }
  .guide-intro { margin: 21px 0; font-size: .87rem; }
  .guide-hero .button { font-size: .77rem; }
  .guide-content > h2 { margin-top: 28px; font-size: 1.5rem; }
  .guide-content > p, .guide-content > ul, .guide-content > ol { font-size: .85rem; }
  .info-grid { grid-template-columns: 1fr; gap: 12px; }
  .comparison-table { min-width: 480px; font-size: .76rem; }
  .comparison-table th, .comparison-table td { padding: 12px; }
  .related-section h2 { font-size: 1.5rem; }
  .related-links { flex-direction: column; gap: 9px; }
  .related-links a { justify-content: space-between; }
  .model-scope { font-size: .63rem; }
  .create-main, .dashboard-main, .pricing-main { margin-top: 25px; margin-bottom: 48px; }
  .workspace-heading { flex-wrap: wrap; gap: 18px; }
  .workspace-heading h1 { font-size: 2.35rem; }
  .workspace-heading .eyebrow { font-size: .55rem; }
  .workspace-heading p:not(.eyebrow) { font-size: .8rem; }
  .workspace-heading > .button { min-height: 44px; font-size: .73rem; }
  .create-controls { padding: 22px; }
  .prompt-groups { grid-template-columns: 1fr; gap: 0; }
  .prompt-group { margin-top: 13px; }
  .prompt-group .field-label { font-size: .69rem; }
  .prompt-chips > button { min-height: 44px; padding-inline: 10px; font-size: .66rem; }
  .form-row select { font-size: .75rem; }
  .create-controls textarea { font-size: .84rem; }
  .candidates-heading { align-items: flex-start; gap: 15px; }
  .candidates-heading h2 { font-size: 1.65rem; }
  .candidates-heading .eyebrow { font-size: .53rem; }
  .candidates-heading .subtle-label { max-width: 70px; padding-top: 9px; font-size: .59rem; text-align: right; }
  .candidate-grid { gap: 12px; }
  .candidate-placeholder { min-height: 145px; padding: 12px; }
  .candidate-number { top: 12px; left: 12px; font-size: .57rem; }
  .placeholder-shape { margin-top: 15px; margin-bottom: 10px; font-size: 2.5rem; }
  .candidate-placeholder p { font-size: .6rem; line-height: 1.5; }
  .candidate-help { font-size: .65rem; }
  .create-tip { gap: 13px; padding: 20px; }
  .create-tip h3 { font-size: .82rem; }
  .create-tip p { font-size: .72rem; }
  .expression-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pack-workspace { padding: 20px; }
  .pack-workspace .button { width: 100%; gap: 9px; padding-inline: 10px; font-size: .7rem; }
  .login-main { display: flex; min-height: 0; flex-direction: column; margin: 20px 22px 48px; }
  .login-art { min-height: 180px; padding: 25px; }
  .login-art > p { margin: 15px 0 0; font-size: 2.3rem; }
  .login-spark { top: 30px; right: 30px; font-size: 5rem; }
  .login-orbit { top: -100%; left: 10%; width: 100%; }
  .login-art-note { bottom: 20px; font-size: .58rem; }
  .login-panel { padding: 32px 25px; }
  .login-panel h1 { font-size: 2.3rem; }
  .login-panel .eyebrow { font-size: .57rem; }
  .provider-button { min-height: 54px; font-size: .77rem; }
  .dashboard-summary { grid-template-columns: 1fr; gap: 15px; margin: 26px 0 38px; }
  .balance-number { font-size: 2.3rem; }
  .dashboard-note { padding: 25px; }
  .dashboard-note h2 { font-size: 1.3rem; }
  .dashboard-note p { font-size: .78rem; }
  .avatar-library .section-heading { gap: 10px; }
  .avatar-library h2 { font-size: 1.6rem; }
  .avatar-library .subtle-label { font-size: .72rem; }
  .avatar-history { gap: 12px; }
  .dashboard-empty { padding: 45px 20px; }
  .pricing-heading { margin-bottom: 35px; padding-top: 10px; }
  .pricing-heading h1 { font-size: 2.85rem; }
  .pricing-heading .eyebrow { font-size: .56rem; }
  .pricing-heading > p:not(.eyebrow) { font-size: .82rem; }
  .preview-notice { padding: 11px 13px; border-radius: 10px; font-size: .66rem; text-align: left; }
  .pricing-grid { grid-template-columns: 1fr; gap: 28px; margin-bottom: 45px; }
  .pricing-card { padding: 30px; }
  .pricing-card .check-list { min-height: 0; }
  .plan-price { font-size: 3.2rem; }
  .topup-grid { gap: 12px; }
  .topup-card { padding: 18px; }
  .topup-card .plan-kicker { font-size: .57rem; }
  .topup-card h3 { font-size: 1.65rem; }
  .topup-card .button { min-height: 44px; padding-inline: 5px; font-size: .62rem; }
  .pricing-details { margin-top: 45px; }
  .pricing-details h2 { font-size: 1.5rem; }
  .credit-costs > div { font-size: .74rem; }
  .credit-costs strong { font-size: .7rem; }
  .breadcrumbs { margin-bottom: 17px; }
  .breadcrumbs li { font-size: .61rem; }
  .breadcrumbs li + li::before { margin-inline: 8px; }
  .channel-section { padding-top: 42px; padding-bottom: 0; }
  .channel-grid { gap: 12px; }
  .channel-card { padding: 21px 16px 23px; }
  .channel-number { margin-bottom: 20px; font-size: .59rem; }
  .channel-card h3 { padding-right: 0; font-size: .88rem; }
  .channel-card p { margin-top: 10px; font-size: .69rem; }
  .channel-arrow { top: 18px; right: 16px; font-size: .9rem; }
  .guide-content > section > h2 { margin-top: 25px; font-size: 1.5rem; }
  .guide-content > section > p, .guide-content > section > ol { font-size: .85rem; }
  .platform-jumps { gap: 8px; }
  .platform-jumps a { padding-inline: 14px; font-size: .69rem; }
  .models-section .section-heading > h2 { font-size: 1.6rem; }
}

@media (max-width: 360px) {
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button-text { justify-content: flex-start; }
  .preview-controls > button { padding-inline: 8px; }
  .hero-template-picker > button { width: 44px; }
  .mic-actions { flex-wrap: wrap; }
  .mic-actions .button, .mic-actions select { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* One-time credit packs and verified Stripe test returns. */
.test-mode-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 11px; border: 1px solid #dfcf9c; border-radius: 50px; background: #f6edcf; color: #6c592e; font-family: monospace; font-size: .62rem; line-height: 1.4; }
.billing-account-panel { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border: 1px solid #d2d8e8; border-radius: 13px; background: #edf0f8; }
.billing-account-panel strong { display: block; margin-top: 8px; font-size: 1.85rem; letter-spacing: -.055em; }
.billing-account-panel .text-link { font-size: .75rem; }
.wallet-breakdown { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 9px; }
.wallet-bucket { color: #5c6681; font-size: .67rem; line-height: 1.7; }
.billing-topups { margin-top: 40px; }
.billing-topups .topup-card h3 > [data-package-credits] { display: inline; margin: 0; color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.billing-topups .topup-card .button { min-height: 48px; font-size: .69rem; }
.topup-test-note { display: block; margin-top: 11px; color: var(--muted); font-size: .61rem; text-align: center; }
.billing-plans { margin-top: 65px; margin-bottom: 55px; }
.billing-plans .pricing-card .check-list { min-height: 0; }
.billing-plans .pricing-card .button { margin-top: 22px; }
.billing-plans .pricing-card p + p { margin-top: 20px; }
.billing-transactions-section { margin-top: 55px; padding-top: 30px; border-top: 1px solid var(--line); }
.billing-transactions-section .section-heading { margin-bottom: 17px; }
.billing-transactions-section h2 { font-size: 1.8rem; }
.billing-transactions { max-width: 100%; overflow-x: auto; margin-top: 18px; border-radius: 10px; }
.billing-table { width: 100%; min-width: 650px; border-collapse: collapse; background: var(--white); font-size: .76rem; text-align: left; }
.billing-table th { padding: 15px 18px; border-bottom: 1px solid var(--line); background: #eeede4; color: #606354; font-size: .67rem; font-weight: 600; }
.billing-table td { padding: 17px 18px; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.6; }
.billing-table td.order-credited { color: #3f6b4a; font-weight: 600; }
.billing-empty { padding: 24px; border: 1px dashed #c8cdbd; border-radius: 10px; color: var(--muted); font-size: .8rem; }
.billing-main { max-width: 1232px; margin: 36px auto 75px; }
.billing-return-card { max-width: 780px; margin: 0 auto; padding: 45px; }
.billing-return-card > .eyebrow { margin-top: 27px; }
.billing-return-card h1 { margin-top: 15px; font-size: clamp(2.5rem, 4.5vw, 3.7rem); }
.billing-return-card #billing-sign-in { margin-top: 20px; }
.billing-receipt { display: flex; align-items: center; gap: 15px; margin-top: 25px; padding: 21px; border: 1px solid #c2d1bd; border-radius: 11px; background: #eaf1e5; }
.receipt-check { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #6a8c62; color: white; font-size: 1rem; }
.billing-receipt strong { color: #3c5e37; font-size: 1.25rem; letter-spacing: -.035em; }
.billing-return-balance { margin-top: 28px; padding: 23px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.billing-return-balance > strong { display: block; margin-top: 9px; font-size: 2rem; font-weight: 650; letter-spacing: -.055em; }
.billing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.billing-actions .button { font-size: .77rem; }
.billing-actions .text-link { font-size: .74rem; }

@media (max-width: 1328px) {
  .billing-main { margin-inline: 48px; }
}
@media (max-width: 800px) {
  .billing-main { margin-inline: 32px; }
  .billing-account-panel { flex-wrap: wrap; gap: 13px 20px; padding: 23px; }
  .billing-account-panel > div { width: 100%; }
  .billing-return-card { padding: 34px; }
  .billing-transactions-section .section-heading { align-items: flex-start; }
}
@media (max-width: 580px) {
  .billing-main { margin: 25px 22px 48px; }
  .billing-account-panel { padding: 20px; }
  .billing-account-panel strong { font-size: 1.6rem; }
  .billing-account-panel .button { font-size: .7rem; }
  .billing-topups { margin-top: 30px; }
  .billing-topups .topup-card .button { padding-inline: 7px; font-size: .62rem; }
  .topup-test-note { font-size: .55rem; line-height: 1.5; }
  .billing-plans { margin-top: 45px; }
  .billing-return-card { padding: 26px 22px; }
  .billing-return-card h1 { font-size: 2.45rem; }
  .billing-return-card .test-mode-badge { font-size: .56rem; }
  .billing-return-card .service-status { font-size: .72rem; }
  .billing-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .billing-actions .text-link { justify-content: center; }
  .billing-transactions-section { margin-top: 38px; padding-top: 24px; }
  .billing-transactions-section h2 { font-size: 1.5rem; }
  .billing-transactions-section .section-heading { gap: 12px; }
  .wallet-bucket { font-size: .62rem; }
}