/* DeepSeek API — shared, dependency-free UI. All geometry and colours live here.
   No remote fonts. Breakpoints are content-driven; default theme is dark. */
@layer reset, tokens, base, layout, components, pages, utilities, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, figure, blockquote, pre { margin: 0; }
  ul, ol { padding: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input, select, textarea { font: inherit; }
  button, a, input, select, summary { -webkit-tap-highlight-color: transparent; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
  [hidden] { display: none !important; }
}
@layer tokens {
  :root {
    color-scheme: dark;
    --bg: #040d18; --surface: #0a1727; --raised: #102038;
    --surface-soft: #0b192c; --text: #f2f5ff; --muted: #b0c2dd;
    --subtle: #8fa7c7; --border: #283e5a; --border-soft: #172b43;
    --primary: #a294ff; --primary-strong: #7355ff; --blue: #77baff;
    --success: #55eac0; --warning: #f5cf83; --danger: #ff9ab0;
    --focus: #ccbbff; --card-top: #0c1b2e; --card-end: #07121f;
    --button-start: #6545f5; --button-end: #4a27de; --on-button: #fff;
    --shadow: 0 18px 54px #00000026;
    --radius-sm: 10px; --radius: 18px; --radius-lg: 24px;
    --container: 1240px; --section: 88px;
    --font: Inter, "Segoe UI", "Noto Sans", Arial, sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  }
  :root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f7fc; --surface: #fff; --raised: #e9eef9; --surface-soft: #eef2fc;
    --text: #13213a; --muted: #465b79; --subtle: #526582;
    --border: #bdcce1; --border-soft: #d9e2f1;
    --primary: #583bcb; --primary-strong: #6440e2; --blue: #215ba9;
    --success: #096b55; --warning: #815407; --danger: #b52146;
    --focus: #6541cd; --card-top: #fff; --card-end: #f4f7ff;
    --shadow: 0 18px 54px #2033630d;
  }
}
@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: 120px; }
  body { min-width: 320px; background: var(--bg); color: var(--text); font: 16px/1.65 var(--font); -webkit-font-smoothing: antialiased; }
  body::before { content: ""; position: absolute; inset: 0 0 auto; height: 880px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 78% 15%, #30287718, transparent 52%), radial-gradient(ellipse at 5% 0, #12427c10, transparent 50%); }
  h1, h2, h3, h4 { line-height: 1.15; font-weight: 700; text-wrap: balance; }
  h1 { font-size: clamp(2.4rem, 4.5vw, 4.5rem); letter-spacing: -.045em; }
  h2 { font-size: clamp(1.7rem, 2.7vw, 2.4rem); letter-spacing: -.028em; }
  h3 { font-size: 1.25rem; letter-spacing: -.02em; }
  p { text-wrap: pretty; }
  p + p { margin-top: 1rem; }
  code, pre { font-family: var(--mono); }
  code { font-size: .9em; }
  strong { font-weight: 650; }
  button { border: 0; }
  a, button, summary, input, select, textarea { touch-action: manipulation; }
  :focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
  ::selection { background: #775cff66; color: var(--text); }
  input, select, textarea { min-width: 0; max-width: 100%; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 13px 16px; min-height: 48px; }
  input::placeholder, textarea::placeholder { color: var(--subtle); opacity: 1; }
  input[aria-invalid="true"] { border-color: var(--danger); }
  label { display: block; font-size: .9rem; font-weight: 550; }
  label + input, label + select, label + textarea { margin-top: 8px; }
  select { width: 100%; }
  button:disabled { cursor: not-allowed; opacity: .65; }
  hr { height: 1px; border: 0; background: var(--border-soft); margin: 24px 0; }
  small { font-size: .8125rem; }
}
@layer layout {
  .container { width: min(var(--container), calc(100% - 64px)); margin-inline: auto; }
  .narrow { max-width: 960px; }
  .reading { max-width: 800px; }
  .section { padding-block: var(--section); }
  .section-top { padding-top: 24px; }
  .section-header { max-width: 680px; margin-bottom: 36px; }
  .section-header p { margin-top: 14px; color: var(--muted); }
  .section-header.center { margin-inline: auto; text-align: center; }
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .stack { display: grid; gap: 22px; }
  .actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
  .row { display: flex; align-items: center; gap: 14px; }
  .between { justify-content: space-between; }
  .site-header { position: sticky; top: 14px; z-index: 30; width: min(1360px, calc(100% - 32px)); min-height: 76px; margin: 14px auto 0; padding: 14px 24px; border: 1px solid var(--border-soft); border-radius: 20px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(20px); display: flex; align-items: center; gap: 30px; box-shadow: 0 8px 25px #00000010; }
  .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
  .brand-mark { width: 36px; height: 40px; color: var(--primary); filter: drop-shadow(0 0 12px #7055ff45); }
  .brand-name { font-size: 22px; font-weight: 750; letter-spacing: -.035em; line-height: 1.1; }
  .brand-subtitle { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); margin-top: 5px; }
  .site-nav { display: flex; gap: 23px; margin-inline: auto; }
  .site-nav a { position: relative; display: flex; align-items: center; min-height: 44px; font-size: 13px; font-weight: 550; white-space: nowrap; }
  .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--primary); }
  .site-nav a[aria-current="page"]::after { content: ""; height: 2px; position: absolute; inset: auto 0 -15px; background: var(--primary); }
  .header-tools { display: flex; gap: 10px; align-items: center; }
  .site-footer { border-top: 1px solid var(--border-soft); position: relative; margin-top: 28px; background: linear-gradient(0deg, var(--bg), var(--surface-soft)); }
  .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.25fr; gap: 40px; padding: 48px 0 38px; }
  .footer-intro p { margin-top: 16px; color: var(--muted); font-size: .875rem; max-width: 250px; }
  .footer-title { font-size: .875rem; font-weight: 650; margin-bottom: 12px; }
  .footer-links { display: grid; list-style: none; gap: 4px; font-size: .85rem; color: var(--muted); }
  .footer-links a { display: inline-flex; align-items: center; min-height: 32px; }
  .footer-links a:hover { color: var(--primary); }
  .footer-note { border: 1px solid var(--border); background: radial-gradient(circle at 100% 0, #7258ff20, transparent 75%); border-radius: 14px; padding: 20px; font-size: .875rem; }
  .footer-note p { font-size: .8125rem; color: var(--muted); margin-top: 8px; }
  .footer-bottom { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border-soft); padding: 20px 0; color: var(--muted); font-size: .75rem; }
  .mountains { height: 96px; background: url('../img/mountains.webp') center bottom / cover no-repeat; opacity: .45; margin-top: 56px; mask-image: linear-gradient(transparent, #000); }
  .mountains + .site-footer { margin-top: 0; }
  [data-theme="light"] .mountains { opacity: .12; }
}
@layer components {
  .icon { width: 22px; height: 22px; flex: 0 0 auto; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .icon-sm { width: 17px; height: 17px; }
  .icon-xl { width: 35px; height: 35px; }
  .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 10px; flex: 0 0 auto; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 10px; color: var(--primary); }
  .icon-button:hover { background: var(--raised); border-color: var(--primary); }
  .button { display: inline-flex; gap: 12px; min-height: 50px; padding: 12px 23px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text); font-size: .9rem; line-height: 1.5; font-weight: 600; transition: background-color 160ms, border-color 160ms, box-shadow 160ms, transform 160ms; text-align: center; }
  .button:hover { background: var(--raised); border-color: #657697; }
  .button.primary { border-color: #927aff; background: linear-gradient(120deg, var(--button-start), var(--button-end)); color: var(--on-button); box-shadow: 0 6px 25px #5b35ff16, inset 0 1px #ffffff16; }
  .button.primary:hover { box-shadow: 0 8px 26px #6646ff44; background: linear-gradient(120deg, #7656ff, #512ee6); transform: translateY(-1px); }
  .button.small { min-height: 44px; padding: 9px 16px; font-size: .8rem; }
  .button.full { width: 100%; }
  .button.quiet { padding-inline: 8px; border-color: transparent; color: var(--primary); }
  .text-link { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; }
  .text-link:hover { text-decoration-thickness: 2px; }
  .eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 11px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); font-size: .75rem; font-weight: 500; letter-spacing: .01em; margin-bottom: 22px; background: #16224a16; }
  .eyebrow .icon { width: 15px; height: 15px; color: var(--primary); }
  .gradient-text { color: var(--primary); background: linear-gradient(100deg, #74acff 0%, #9a7bff 65%, #b293ff); background-clip: text; -webkit-text-fill-color: transparent; }
  [data-theme="light"] .gradient-text { background-image: linear-gradient(100deg, #2157be, #6740cf); }
  .tag { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-soft); padding: 5px 12px; font-size: .75rem; font-weight: 500; color: var(--muted); line-height: 1.4; }
  .tag .icon { width: 13px; height: 13px; }
  .tag.success { color: var(--success); background: color-mix(in srgb, var(--success) 8%, var(--surface)); border-color: color-mix(in srgb, var(--success) 24%, var(--border)); }
  .tag.warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 8%, var(--surface)); }
  .tag.primary { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
  .tags { display: flex; gap: 8px; flex-wrap: wrap; }
  .panel { padding: 28px; border: 1px solid var(--border); background: linear-gradient(130deg, var(--card-top), var(--card-end)); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
  .panel-title { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
  .panel-title .icon { color: var(--primary); }
  .icon-tile { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid #6453b94d; border-radius: 17px; background: radial-gradient(circle at 45% 15%, #5c39fc35, #17163420 85%); color: var(--primary); flex: 0 0 auto; box-shadow: inset 0 1px 1px #a498ff20; }
  .icon-tile.blue { color: #77baff; background: radial-gradient(circle at 40% 20%, #255cec45, #14225030); border-color: #35599380; }
  .icon-tile .icon { width: 31px; height: 31px; filter: drop-shadow(0 0 7px #947aff55); }
  .check-list { list-style: none; display: grid; gap: 10px; color: var(--muted); font-size: .875rem; }
  .check-list li { display: flex; gap: 9px; align-items: flex-start; }
  .check-list .icon { color: var(--success); width: 17px; height: 17px; margin-top: 3px; }
  .notice { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; font-size: .875rem; color: var(--muted); }
  .notice .icon { color: var(--primary); margin-top: 2px; }
  .notice.warning { border-color: color-mix(in srgb, var(--warning) 26%, var(--border)); background: color-mix(in srgb, var(--warning) 4%, var(--surface)); }
  .notice.warning .icon { color: var(--warning); }
  .notice.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
  .notice.success { border-color: color-mix(in srgb, var(--success) 25%, var(--border)); }
  .notice.success .icon { color: var(--success); }
  .notice strong { color: var(--text); }
  .callout { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: radial-gradient(ellipse at 100% 40%, #4130d52a, transparent 65%), var(--surface); }
  .callout > .row { align-items: center; }
  .callout p { color: var(--muted); font-size: .875rem; margin-top: 6px; }
  .callout .button { flex-shrink: 0; }
  .benefit-strip { border: 1px solid var(--border-soft); border-radius: var(--radius); background: var(--surface); display: grid; grid-template-columns: repeat(4, 1fr); padding: 24px 0; }
  .benefit { display: flex; gap: 14px; padding: 0 24px; align-items: flex-start; border-right: 1px solid var(--border-soft); }
  .benefit:last-child { border-right: 0; }
  .benefit > .icon { width: 28px; height: 28px; color: var(--primary); margin-top: 3px; }
  .benefit strong { display: block; font-size: .8rem; }
  .benefit p { font-size: .75rem; color: var(--muted); margin-top: 3px; }
  .inline-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; border: 1px solid var(--border); background: var(--bg); border-radius: 10px; }
  .inline-code code { overflow-wrap: anywhere; color: var(--muted); }
  .inline-code .icon-button { border: 0; background: var(--surface-soft); }
  .copy-label { font-size: .75rem; color: var(--muted); }
  .step-number { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; flex: 0 0 auto; color: #fff; background: linear-gradient(130deg, #7654ff, #4524dc); border: 1px solid #a18fff; box-shadow: 0 0 24px #6545ff20; font-weight: 600; }
  .step-number.small { width: 32px; height: 32px; font-size: .875rem; }
  .field-help { display: block; font-size: .8rem; color: var(--muted); margin-top: 9px; }
  .field-error { color: var(--danger); font-size: .875rem; margin-top: 10px; }
  .table-scroll { overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
  table { width: 100%; border-collapse: collapse; text-align: left; font-size: .875rem; }
  caption { text-align: left; padding: 16px; color: var(--muted); font-size: .8125rem; background: var(--surface); }
  th { font-size: .75rem; color: var(--muted); font-weight: 600; background: var(--raised); }
  th, td { padding: 15px 18px; border-bottom: 1px solid var(--border-soft); }
  tr:last-child td { border-bottom: 0; }
  td code { white-space: nowrap; }
  .numeric { font-variant-numeric: tabular-nums; }
  details.accordion { border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(120deg, var(--card-top), var(--card-end)); }
  details.accordion + details.accordion { margin-top: 12px; }
  details.accordion summary { display: flex; align-items: center; gap: 18px; padding: 20px 23px; cursor: pointer; list-style: none; font-weight: 550; font-size: .95rem; min-height: 74px; }
  details.accordion summary::-webkit-details-marker { display: none; }
  details.accordion summary::marker { content: ""; }
  .accordion summary > .icon:last-child { margin-left: auto; transition: transform 160ms; color: var(--muted); }
  .accordion[open] summary > .icon:last-child { transform: rotate(180deg); }
  .accordion[open] { border-color: #6a58ba; }
  .accordion-number { font-size: .8rem; color: var(--muted); background: var(--raised); border: 1px solid var(--border); border-radius: 999px; padding: 4px 11px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
  .accordion-body { padding: 0 24px 24px 88px; color: var(--muted); font-size: .9rem; max-width: 880px; }
  .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100% - 32px); border: 1px solid var(--border); border-radius: 12px; padding: 12px 20px; color: var(--text); background: var(--raised); box-shadow: var(--shadow); z-index: 100; font-size: .875rem; text-align: center; }
  .modal { width: min(520px, calc(100% - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 20px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
  .modal::backdrop { background: #00091bbc; backdrop-filter: blur(5px); }
  .modal-inner { padding: 28px; }
  .modal-head { display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
  .modal p { color: var(--muted); font-size: .9rem; }
  .modal .actions { margin-top: 24px; }
}
@layer pages {
  /* All hero artwork is actual CSS / inline SVG, not a screenshot of a page. */
  .hero { padding: 64px 0 56px; display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; gap: 32px; position: relative; }
  .hero-copy { position: relative; z-index: 2; }
  .hero-copy > p { color: var(--muted); font-size: 1.1rem; max-width: 530px; margin-top: 23px; }
  .hero-copy .actions { margin-top: 34px; }
  .hero-features { list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 18px 32px; margin-top: 27px; font-size: .85rem; }
  .hero-features li { display: flex; align-items: center; gap: 10px; }
  .hero-features .icon { color: var(--primary); padding: 6px; width: 32px; height: 32px; background: #6246f22b; border-radius: 50%; }
  .hero.small { padding-block: 44px 32px; min-height: 350px; }
  .hero.small h1 { font-size: clamp(2.4rem, 4vw, 3.65rem); }
  .hero.small .api-scene { height: 330px; min-height: 0; }
  .hero.small .api-chip { transform: translate(-50%, -50%) perspective(800px) rotateY(-20deg) rotateX(8deg) rotateZ(8deg) scale(.72); }
  .hero.small .orbit-lines { transform: scale(.9); }
  .hero.small .scene-label { display: none; }
  .api-scene { position: relative; height: 515px; isolation: isolate; overflow: clip; }
  .scene-glow { position: absolute; inset: 6% -3% 2%; background: radial-gradient(ellipse at 50% 58%, #253cfa45, #13259c22 44%, transparent 68%); filter: blur(8px); z-index: -1; }
  .orbit-lines { position: absolute; width: 118%; max-width: none; height: 100%; left: -9%; top: 0; opacity: .9; }
  .api-chip { width: 280px; height: 327px; position: absolute; left: 52%; top: 47%; border-radius: 44px; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 24px; color: #dbe9ff; border: 2px solid #8babff; background: radial-gradient(ellipse at 5% 0, #64bbff70, transparent 45%), linear-gradient(135deg, #184ae7 0%, #111958 60%, #281065 100%); transform: translate(-50%, -50%) perspective(800px) rotateY(-20deg) rotateX(8deg) rotateZ(8deg); box-shadow: -5px -3px 4px #a6f5ff, -10px -5px 21px #166fff, 5px 5px 8px #8356ff, 16px 14px 40px #3025e790, inset 0 0 28px #5a6eff80; }
  .api-chip::before { content: ""; position: absolute; z-index: -1; inset: 12px -21px -10px 20px; border-radius: 39px; border: 1px solid #8878ff; background: linear-gradient(90deg, transparent 75%, #100c4d); box-shadow: 8px 5px 25px #5a2cfb66; }
  .chip-glyph { width: 90px; height: 90px; color: #a4b3ff; filter: drop-shadow(0 0 12px #5877ff66); }
  .chip-word { font-size: 31px; font-weight: 750; letter-spacing: -.035em; margin-top: 17px; }
  .chip-description { font-size: 12px; color: #a9c4ff; margin-top: 10px; letter-spacing: .11em; text-transform: uppercase; }
  .chip-mini { margin-top: 26px; border: 1px solid #7589ff80; background: #6178ff15; border-radius: 20px; padding: 4px 14px; color: #d7e3ff; font-size: 11px; letter-spacing: .05em; }
  .scene-label { position: absolute; right: 0; bottom: 58px; display: flex; gap: 5px; flex-direction: column; transform: rotate(-10deg); font-family: var(--mono); font-size: 12px; color: #b9c6ff; }
  .scene-label span { padding: 7px 12px; border: 1px solid #4b63c5; background: #071222; border-radius: 8px; width: max-content; }
  .scene-label span + span { margin-left: 18px; }
  .scene-caption { position: absolute; left: 14px; bottom: 40px; color: var(--subtle); font: 11px var(--mono); letter-spacing: .1em; }
  .chat-scene .api-chip { width: 225px; height: 182px; border-radius: 34px; left: 45%; top: 42%; font: 80px/1 var(--font); }
  .chat-scene .api-chip::after { content: ""; width: 35px; height: 40px; position: absolute; bottom: -25px; left: 30px; background: #172886; border-left: 2px solid #809bff; border-bottom: 2px solid #809bff; transform: skewY(-40deg); border-radius: 0 0 0 5px; box-shadow: -4px 3px 8px #3668ff77; }
  .chat-scene .api-chip.back { width: 197px; height: 163px; left: 67%; top: 61%; z-index: -1; opacity: .8; transform: translate(-50%, -50%) perspective(800px) rotateY(-20deg) rotateX(8deg) rotateZ(8deg) scale(.85); font-size: 45px; }
  .chat-dots { display: flex; gap: 15px; }
  .chat-dots i { width: 18px; height: 18px; background: #9aa9ff; border-radius: 50%; box-shadow: 0 0 15px #6785ff55; }
  .market-card { display: flex; flex-direction: column; min-height: 286px; }
  .market-card h3 { margin-top: 17px; }
  .market-card > p { margin-top: 10px; color: var(--muted); font-size: .875rem; }
  .market-card .button { margin-top: auto; }
  .market-card .market-footnote { margin: 12px 0 22px; color: var(--subtle); font-size: .75rem; }
  .market-logo { width: 58px; height: 58px; border-radius: 16px; display: flex; justify-content: center; align-items: center; border: 1px solid #4ce99270; background: linear-gradient(135deg, #0ba05c, #05734a); box-shadow: inset 0 1px #b2ffcc40; color: #fff; font-weight: 750; font-size: 36px; }
  .market-logo.plati { background: linear-gradient(135deg, #d05f27, #ab3b1d); border-color: #eaa56480; }
  .market-logo.funpay { background: linear-gradient(135deg, #166be0, #1e44b8); border-color: #699dff80; }
  .market-logo.other { background: var(--raised); border-color: var(--border); color: var(--primary); }
  .market-card.large { min-height: 310px; }
  .market-card.large .market-heading { display: flex; gap: 20px; align-items: center; }
  .market-card.large h3 { margin-top: 0; font-size: 1.4rem; }
  .market-card.large .tag { margin-top: 6px; }
  .market-card.large .check-list { margin-block: 22px 24px; }
  .market-card.pending .market-logo { filter: saturate(.6); }
  .market-grid-note { margin-top: 20px; }
  .model-head { display: flex; gap: 22px; align-items: flex-start; }
  .model-head .icon-tile { width: 80px; height: 80px; }
  .model-head .icon { width: 43px; height: 43px; }
  .model-head h2 { color: var(--primary); font-size: clamp(1.3rem, 2.2vw, 1.7rem); overflow-wrap: anywhere; margin: 7px 0 10px; }
  .model-card p { color: var(--muted); font-size: .875rem; }
  .model-card .tags { margin-top: 24px; }
  .model-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-block: 1px solid var(--border-soft); padding-block: 24px; margin-block: 24px; }
  .model-detail > div + div { border-left: 1px solid var(--border-soft); padding-left: 24px; }
  .model-detail h3 { font-size: .9rem; margin-bottom: 15px; }
  .model-code { margin-top: 15px; }
  .model-billing { margin-top: 18px; font-size: .8rem; color: var(--muted); }
  .docs-layout { display: grid; grid-template-columns: 238px minmax(0,1fr); gap: 36px; align-items: start; padding-top: 32px; padding-bottom: 64px; }
  .docs-sidebar { position: sticky; top: 118px; border: 1px solid var(--border); background: linear-gradient(145deg, var(--surface), var(--bg)); padding: 20px 14px; border-radius: 16px; }
  .docs-sidebar h2 { font-size: 1rem; padding: 4px 10px 18px; }
  .docs-nav { display: grid; gap: 5px; }
  .docs-nav a { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 46px; color: var(--muted); font-size: .8rem; border: 1px solid transparent; border-radius: 8px; }
  .docs-nav a .icon { color: var(--primary); width: 18px; height: 18px; }
  .docs-nav a:hover, .docs-nav a[aria-current="location"] { color: var(--text); border-color: #5944bc77; background: #6651eb26; }
  .docs-sidebar-note { margin: 26px 8px 6px; padding-top: 24px; border-top: 1px solid var(--border-soft); color: var(--muted); font-size: .8rem; }
  .docs-sidebar-note .icon { color: var(--primary); margin-bottom: 14px; width: 32px; height: 32px; }
  .docs-main { min-width: 0; }
  .breadcrumb { display: flex; gap: 10px; align-items: center; font-size: .8rem; color: var(--muted); margin-bottom: 28px; }
  .breadcrumb .icon { width: 13px; height: 13px; }
  .docs-heading h1 { font-size: clamp(2.3rem, 3.4vw, 3.2rem); }
  .docs-heading p { margin-top: 16px; max-width: 730px; color: var(--muted); }
  .steps-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 30px 0; list-style: none; }
  .steps-line li { display: flex; align-items: center; gap: 10px; font-size: .85rem; }
  .steps-line small { display: block; color: var(--muted); font-size: .7rem; }
  .doc-section { margin-top: 20px; scroll-margin-top: 118px; }
  .doc-section .panel-title h2 { font-size: 1.2rem; }
  .doc-section > p { color: var(--muted); font-size: .9rem; margin-bottom: 18px; }
  .doc-section .notice { margin-top: 16px; }
  .code-shell { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg); }
  .code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 16px; background: var(--surface-soft); border-bottom: 1px solid var(--border); }
  .code-head .icon-button { height: 44px; width: 44px; }
  .code-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
  .code-tab { padding: 9px 12px; min-height: 44px; border-radius: 7px; color: var(--muted); background: transparent; font-size: .8rem; }
  .code-tab[aria-selected="true"] { color: var(--text); background: var(--raised); box-shadow: inset 0 -2px var(--primary); }
  .code-panel { padding: 22px; overflow: auto; line-height: 1.9; font-size: .75rem; white-space: pre; tab-size: 2; color: #c8d8f9; }
  [data-theme="light"] .code-panel { color: #244772; }
  .code-panel .hl-key { color: #c8a6ff; }
  .code-panel .hl-string { color: #70e8c3; }
  .key-heading { text-align: center; max-width: 820px; margin: 64px auto 40px; }
  .key-heading p { color: var(--muted); margin: 22px auto 0; font-size: 1.05rem; max-width: 690px; }
  .key-form-row { display: flex; align-items: stretch; gap: 14px; margin-top: 12px; }
  .key-input-wrap { display: flex; flex: 1; align-items: center; min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); padding: 5px 6px 5px 14px; }
  .key-input-wrap > .icon { color: var(--primary); }
  .key-input-wrap:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
  .key-input-wrap input { width: 100%; border: 0; background: transparent; padding: 11px 12px; font-family: var(--mono); font-size: .9rem; }
  .key-input-wrap input:focus-visible { outline: 0; }
  .key-input-wrap .icon-button { background: transparent; border: 0; }
  .key-demo-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
  .key-demo-bar p { color: var(--muted); font-size: .8rem; }
  .balance-card { border-color: #25645c; background: radial-gradient(ellipse at 0 0, #00c29312, transparent 65%), linear-gradient(130deg, var(--card-top), var(--card-end)); }
  .balance-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
  .balance-heading h2 { font-size: 1.55rem; color: var(--success); }
  .balance-heading p { color: var(--muted); font-size: .8rem; margin-top: 6px; }
  .status-icon { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: #00d4a120; border: 1px solid #45dfb84a; border-radius: 50%; color: var(--success); }
  .stats-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); padding: 23px 8px; }
  .stat { padding: 0 20px; border-right: 1px solid var(--border); min-width: 0; }
  .stat:last-child { border: 0; }
  .stat dt { color: var(--muted); font-size: .75rem; }
  .stat dd { margin: 7px 0 0; font-size: clamp(1.3rem, 2.2vw, 1.85rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; font-variant-numeric: tabular-nums; }
  .stat:first-child dd { color: var(--success); }
  .stat small { display: block; margin-top: 7px; font-size: .7rem; color: var(--subtle); }
  .balance-progress { width: 100%; height: 6px; appearance: none; display: block; border: 0; margin: 20px 0 12px; background: var(--raised); border-radius: 9px; overflow: hidden; }
  .balance-progress::-webkit-progress-bar { background: var(--raised); }
  .balance-progress::-webkit-progress-value { background: linear-gradient(90deg, #28a895, #5bd5af); border-radius: 9px; }
  .balance-progress::-moz-progress-bar { background: #3fcca2; }
  .balance-meta { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin-top: 22px; }
  .balance-meta p { font-size: .75rem; color: var(--muted); margin-bottom: 8px; }
  .empty-state { text-align: center; padding: 40px 24px; border: 1px dashed var(--border); border-radius: 16px; color: var(--muted); }
  .empty-state .icon { width: 36px; height: 36px; color: var(--primary); margin: 0 auto 14px; }
  .empty-state h2 { font-size: 1.2rem; color: var(--text); }
  .empty-state p { margin: 12px auto 0; font-size: .875rem; max-width: 570px; }
  .support-grid .panel { display: flex; align-items: center; flex-direction: column; text-align: center; padding: 30px 24px 24px; }
  .support-grid h2 { font-size: 1.35rem; margin-top: 19px; }
  .support-grid p { color: var(--muted); font-size: .875rem; margin: 14px 0 24px; }
  .support-grid .tag { margin-top: 10px; }
  .support-grid .button { margin-top: auto; width: 100%; }
  .support-shortcut { display: flex; align-items: center; gap: 16px; padding: 23px; }
  .support-shortcut h3 { font-size: .95rem; }
  .support-shortcut p { margin-top: 6px; color: var(--muted); font-size: .8rem; }
  .support-shortcut .icon-tile { width: 48px; height: 48px; border-radius: 12px; }
  .support-shortcut .icon-tile .icon { width: 24px; height: 24px; }
  .support-shortcut > .icon { margin-left: auto; color: var(--primary); width: 16px; height: 16px; }
  .faq-hero { grid-template-columns: 1.4fr 1fr; }
  .faq-hero .hero-copy > p { max-width: 620px; }
  .faq-list { margin-bottom: 42px; }
  .calculator-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; }
  .fields-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
  .fields-grid .span-2 { grid-column: 1 / -1; }
  .fields-grid input { width: 100%; }
  .calculator-result { border: 1px solid #6d53ba77; border-radius: 14px; padding: 28px; background: radial-gradient(ellipse at 50% 0, #5839cf23, transparent 85%), var(--bg); display: flex; flex-direction: column; justify-content: center; }
  .calculator-result h3 { font-size: .9rem; color: var(--muted); }
  .calculator-result output { font-weight: 750; font-size: clamp(2rem, 3.5vw, 3rem); color: var(--primary); margin-top: 15px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.15; }
  .calculator-result p { color: var(--muted); font-size: .8125rem; margin-top: 14px; }
  .calculator-result code { font-size: .75rem; line-height: 1.8; }
  .formula-box { margin-top: 18px; background: var(--surface-soft); border-radius: 10px; padding: 14px; overflow-wrap: anywhere; }
  .plain-header { padding: 64px 0 32px; }
  .plain-header p { margin-top: 18px; color: var(--muted); max-width: 760px; }
  .prose > h2 { font-size: 1.45rem; margin-top: 34px; margin-bottom: 16px; }
  .prose p, .prose li { color: var(--muted); font-size: .95rem; }
  .prose ul, .prose ol { padding-left: 24px; margin-top: 12px; }
  .prose li + li { margin-top: 8px; }
  .status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--border-soft); }
  .status-row:last-child { border-bottom: 0; }
  .status-row .icon { color: var(--muted); }
  .error-page { padding-block: 100px; text-align: center; }
  .error-code { font-size: 8rem; line-height: 1; font-weight: 750; color: var(--primary); letter-spacing: -.06em; margin-bottom: 20px; }
}
@layer utilities {
  .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; left: 20px; top: -100px; background: var(--surface); border: 2px solid var(--focus); padding: 12px 18px; border-radius: 10px; z-index: 200; }
  .skip-link:focus { top: 14px; }
  .muted { color: var(--muted); }
  .fine { font-size: .8rem; }
  .mt-12 { margin-top: 12px; }
  .mt-20 { margin-top: 20px; }
  .mt-32 { margin-top: 32px; }
  .mt-48 { margin-top: 48px; }
  .mb-20 { margin-bottom: 20px; }
  .mb-32 { margin-bottom: 32px; }
  .text-center { text-align: center; }
  .no-margin { margin: 0 !important; }
  .align-center { align-items: center; }
  .flex-1 { flex: 1; }
  .wrap-anywhere { overflow-wrap: anywhere; }
}
@layer responsive {
  .menu-toggle { display: none; }
  @media (min-width: 1600px) { .hero { padding-block: 80px 70px; } }
  @media (max-width: 1180px) {
    .site-header { gap: 20px; padding-inline: 18px; }
    .site-nav { gap: 15px; }
    .site-nav a { font-size: .75rem; }
    .header-check { display: none; }
    .container { width: calc(100% - 48px); }
    .api-chip { width: 250px; height: 300px; }
    .scene-label { right: 0; bottom: 62px; font-size: 11px; }
    .hero-features { gap: 16px 20px; font-size: .8rem; }
    .hero { gap: 20px; }
    .benefit { padding-inline: 18px; gap: 10px; }
    .footer-grid { gap: 25px; }
    .model-detail { gap: 18px; }
    .model-detail > div + div { padding-left: 18px; }
    .docs-layout { grid-template-columns: 212px minmax(0,1fr); gap: 24px; }
    .docs-nav a { padding-inline: 8px; }
  }
  @media (max-width: 960px) {
    :root { --section: 60px; }
    .site-header { min-height: 68px; }
    .brand-name { font-size: 20px; }
    .brand-mark { width: 30px; height: 34px; }
    .header-tools { margin-left: auto; }
    .menu-toggle { display: inline-flex; }
    .site-nav { display: none; position: absolute; inset: calc(100% + 8px) 0 auto; padding: 14px; border: 1px solid var(--border); background: var(--surface); border-radius: 16px; box-shadow: var(--shadow); }
    .site-nav.is-open { display: flex; flex-direction: column; gap: 2px; }
    .site-nav a { padding: 12px 16px; font-size: .95rem; border-radius: 8px; }
    .site-nav a[aria-current="page"] { background: var(--raised); }
    .site-nav a[aria-current="page"]::after { display: none; }
    .hero { padding-top: 45px; }
    .hero h1 { font-size: 3.25rem; }
    .hero-copy > p { font-size: 1rem; }
    .hero-features { grid-template-columns: 1fr; gap: 10px; }
    .api-scene { height: 460px; }
    .api-chip { transform: translate(-50%, -50%) perspective(800px) rotateY(-20deg) rotateX(8deg) rotateZ(8deg) scale(.82); }
    .scene-label { right: 0; bottom: 85px; }
    .scene-caption { display: none; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .benefit-strip { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
    .benefit:nth-child(2) { border-right: 0; }
    .model-detail { grid-template-columns: 1fr; }
    .model-detail > div + div { border: 0; padding: 0; }
    .model-head { gap: 14px; }
    .model-head .icon-tile { width: 54px; height: 60px; border-radius: 14px; }
    .model-head .icon { width: 30px; height: 30px; }
    .model-head h2 { font-size: 1.2rem; }
    .panel { padding: 24px; }
    .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; }
    .footer-note { grid-column: 1/-1; }
    .docs-layout { grid-template-columns: minmax(0,1fr); }
    .docs-sidebar { position: static; }
    .docs-sidebar-note { display: none; }
    .docs-nav { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .docs-sidebar h2 { padding-bottom: 10px; }
    .docs-nav a { font-size: .75rem; gap: 8px; }
    .docs-nav a .icon { width: 16px; height: 16px; }
    .support-grid { gap: 14px; }
    .support-grid .panel { padding-inline: 18px; }
    .support-shortcut { flex-wrap: wrap; }
    .support-shortcut > .icon { display: none; }
    .calculator-grid { gap: 22px; }
  }
  @media (max-width: 700px) {
    :root { --section: 48px; }
    html { scroll-padding-top: 100px; }
    .container { width: calc(100% - 36px); }
    .site-header { top: 8px; width: calc(100% - 20px); margin-top: 8px; min-height: 68px; padding: 10px 12px; border-radius: 15px; }
    .brand { gap: 8px; }
    .brand-name { font-size: 18px; }
    .brand-subtitle { font-size: 9px; letter-spacing: .11em; margin-top: 4px; }
    .brand-mark { width: 28px; }
    .header-tools { gap: 7px; }
    .icon-button { width: 44px; height: 44px; }
    .hero, .hero.small, .faq-hero { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 36px 0 28px; }
    .hero h1, .hero.small h1 { font-size: clamp(2.55rem, 8vw, 3.6rem); }
    .hero-copy > p { font-size: .975rem; margin-top: 20px; }
    .eyebrow { font-size: .69rem; margin-bottom: 19px; }
    .hero-features { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 10px; font-size: .76rem; }
    .hero-features .icon { width: 29px; height: 29px; }
    .hero-copy .actions { margin-top: 26px; }
    .hero .actions .button { flex: 1; padding-inline: 14px; font-size: .8rem; }
    .api-scene { height: 320px; max-width: 420px; width: 100%; margin-inline: auto; overflow: hidden; }
    .api-chip { width: 250px; height: 280px; top: 48%; transform: translate(-50%, -50%) perspective(800px) rotateY(-20deg) rotateX(8deg) rotateZ(8deg) scale(.75); }
    .scene-label { font-size: 9px; bottom: 25px; right: 4px; gap: 4px; }
    .scene-label span { padding: 4px 9px; }
    .orbit-lines { width: 105%; left: -3%; }
    .hero.small .api-scene { height: 242px; }
    .hero.small .api-chip { transform: translate(-50%, -50%) perspective(800px) rotateY(-20deg) rotateX(8deg) rotateZ(8deg) scale(.61); }
    .hero.small .chat-scene { height: 225px; }
    .hero.small .chat-scene .api-chip.back { transform: translate(-50%, -50%) perspective(800px) rotateY(-20deg) rotateX(8deg) rotateZ(8deg) scale(.66); }
    .section-header { margin-bottom: 26px; }
    .section-header p { font-size: .9rem; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); gap: 16px; }
    .market-card { min-height: 0; }
    .market-card .button { margin-top: 10px; }
    .market-card.large { min-height: 0; }
    .market-card.large .market-heading { gap: 16px; }
    .market-card.large h3 { font-size: 1.25rem; }
    .panel { padding: 21px; border-radius: 15px; }
    .benefit-strip { grid-template-columns: minmax(0,1fr); gap: 0; padding: 6px 0; }
    .benefit { border: 0; padding: 18px 22px; }
    .benefit + .benefit { border-top: 1px solid var(--border-soft); }
    .benefit strong { font-size: .875rem; }
    .benefit p { font-size: .8rem; }
    .benefit > .icon { margin-right: 6px; }
    .callout { flex-direction: column; align-items: stretch; gap: 22px; padding: 22px; }
    .callout .row { align-items: flex-start; }
    .callout .icon-tile { width: 48px; height: 48px; border-radius: 12px; }
    .callout h3 { font-size: 1.1rem; }
    .callout .button { width: 100%; }
    .model-head { gap: 17px; }
    .model-head h2 { font-size: 1.35rem; }
    .model-detail { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
    .model-detail .check-list { font-size: .8rem; }
    .model-code code { font-size: .75rem; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-top: 32px; }
    .footer-intro { grid-column: 1/-1; }
    .footer-intro p { max-width: 100%; font-size: .8rem; }
    .footer-bottom { flex-direction: column; font-size: .7rem; gap: 8px; }
    .footer-links a { min-height: 38px; font-size: .8rem; }
    .footer-note { padding: 18px; }
    .mountains { height: 66px; margin-top: 36px; }
    .docs-layout { gap: 26px; padding-top: 22px; }
    .docs-sidebar { padding: 15px 10px; }
    .docs-nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .docs-nav a { min-height: 45px; }
    .docs-heading h1 { font-size: 2.3rem; }
    .docs-heading p { font-size: .9rem; }
    .breadcrumb { margin-bottom: 20px; }
    .steps-line { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
    .steps-line li { font-size: .8rem; }
    .step-number { width: 35px; height: 35px; }
    .doc-section .panel-title { align-items: flex-start; }
    .doc-section .panel-title h2 { font-size: 1.1rem; line-height: 1.4; }
    .doc-section { scroll-margin-top: 100px; }
    .code-panel { padding: 17px; font-size: .72rem; }
    .code-head { padding: 7px; gap: 5px; }
    .code-tab { padding-inline: 9px; font-size: .7rem; }
    .inline-code { padding-left: 10px; gap: 7px; }
    .inline-code code { font-size: .75rem; }
    .key-heading { margin: 42px auto 28px; }
    .key-heading h1 { font-size: 2.55rem; }
    .key-heading p { font-size: .95rem; }
    .key-form-row { flex-direction: column; }
    .key-input-wrap input { font-size: .8rem; padding-inline: 9px; }
    .key-demo-bar { flex-direction: column; align-items: stretch; }
    .key-demo-bar .button { width: 100%; }
    .balance-heading { align-items: flex-start; flex-direction: column; }
    .balance-heading h2 { font-size: 1.3rem; }
    .stats-grid { grid-template-columns: minmax(0,1fr); padding: 0 20px; }
    .stat { padding: 18px 0; border: 0; }
    .stat + .stat { border-top: 1px solid var(--border); }
    .stat dd { font-size: 1.85rem; }
    .balance-meta { flex-direction: column; }
    .balance-meta .tags { gap: 6px; }
    .balance-meta .tag { font-size: .7rem; }
    .accordion summary { padding: 17px 16px !important; gap: 12px !important; font-size: .875rem !important; }
    .accordion-number { padding: 4px 8px; font-size: .7rem; }
    .accordion-body { padding: 0 18px 22px; font-size: .875rem; }
    .support-grid .panel { padding: 26px; }
    .support-shortcut { flex-wrap: nowrap; }
    .support-shortcut > .icon { display: block; }
    .calculator-grid { grid-template-columns: minmax(0,1fr); }
    .fields-grid { grid-template-columns: minmax(0,1fr); }
    .fields-grid .span-2 { grid-column: auto; }
    .calculator-result { padding: 22px; }
    th, td { padding: 14px; white-space: nowrap; }
    .plain-header { padding-top: 42px; }
    .plain-header h1 { font-size: 2.4rem; }
    .plain-header p { font-size: .9rem; }
    .status-row { align-items: flex-start; }
    .status-row .row { gap: 9px; font-size: .875rem; }
    .status-row .tag { font-size: .68rem; }
    .notice { padding: 14px; font-size: .8rem; }
    .error-code { font-size: 6rem; }
  }
  @media (max-width: 380px) {
    .container { width: calc(100% - 28px); }
    .hero .actions { flex-direction: column; align-items: stretch; }
    .hero .actions .button { width: 100%; }
    .hero-features { font-size: .7rem; gap: 12px 6px; }
    .hero-features li { gap: 7px; }
    .panel { padding: 18px; }
    .model-detail { grid-template-columns: minmax(0,1fr); }
    .brand-subtitle { font-size: 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .button.primary:hover { transform: none; }
  }
  @media (forced-colors: active) {
    .gradient-text { background: none; -webkit-text-fill-color: currentColor; }
    .button, .tag, .panel { border: 1px solid CanvasText; }
    .api-scene, .mountains { display: none; }
  }
  @media print {
    .site-header, .site-footer, .mountains, .api-scene, .header-tools, .toast, .docs-sidebar { display: none !important; }
    body { background: #fff; color: #111; }
    .container { width: 100%; }
    .docs-layout, .hero { display: block; }
    .panel { box-shadow: none; break-inside: avoid; }
    .gradient-text { background: none; -webkit-text-fill-color: #111; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9px; overflow-wrap: anywhere; }
  }
}
@layer base { fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } }
@layer components { .callout-title { font-size: 1.15rem; } .form-title { font-size: 1.15rem; line-height: 1.4; } .center-actions { justify-content: center; } }
@layer utilities { .clipboard-fallback { position: fixed; top: -1000px; left: -1000px; width: 1px; height: 1px; } }

@layer responsive { @media (max-width:700px) { .reading .plain-header h1 { font-size: clamp(1.625rem, 6vw, 2.4rem); overflow-wrap: anywhere; } } }