:root{--paper:#f5f5f2;--surface:#fbfbf8;--surface-2:#eeeee9;--ink:#242522;--muted:#777873;--line:#d9d9d3;--blue:#3478f6;--purple:#7b52e8;--teal:#139eaf;--orange:#f47b20;color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{min-width:320px;margin:0;color:var(--ink);background:var(--paper);font-size:16px;line-height:1.6}a{color:inherit}::selection{color:#fff;background:var(--blue)}.product-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;min-height:72px;padding:0 clamp(22px,6vw,96px);border-bottom:1px solid rgba(36,37,34,.1);background:rgba(245,245,242,.88);backdrop-filter:blur(20px)}.product-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.01em}.product-brand small{display:block;color:var(--muted);font-size:8px;letter-spacing:.16em}.vs-mark{display:grid;width:30px;height:30px;place-items:center;color:#fff;background:var(--ink);font-family:Georgia,serif;font-size:18px;font-weight:400}.product-nav{display:flex;align-items:center;gap:28px;color:var(--muted);font-size:13px}.product-nav a{text-decoration:none}.product-nav a:hover{color:var(--blue)}.product-nav .nav-download{color:#fff;padding:9px 14px;border-radius:8px;background:var(--ink)}.product-nav-toggle{display:none;border:0;color:var(--ink);background:transparent;font:inherit}.product-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);gap:clamp(44px,8vw,120px);align-items:center;max-width:1400px;min-height:720px;margin:0 auto;padding:clamp(70px,10vw,140px) clamp(22px,8vw,120px);overflow:hidden}.eyebrow{display:flex;align-items:center;gap:8px;margin:0 0 20px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}h1,h2{margin:0;letter-spacing:-.06em;line-height:1.02}h1{max-width:620px;font-size:clamp(58px,7.6vw,110px);font-weight:650}h1 em{color:var(--blue);font-style:normal}.hero-copy{max-width:520px;margin:28px 0 0;color:#656660;font-size:clamp(17px,1.7vw,20px);line-height:1.7}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:22px;margin-top:36px}.button{display:inline-flex;align-items:center;justify-content:space-between;min-width:188px;min-height:48px;padding:0 16px;border-radius:9px;text-decoration:none;font-size:13px;font-weight:700;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button span{margin-left:20px;font-size:17px}.button-primary{color:#fff;background:var(--blue)}.button-primary:hover{background:#2468e8}.quiet-link{font-size:13px;font-weight:700;text-decoration:none}.quiet-link span{margin-left:7px;color:var(--blue)}.hero-meta{margin-top:44px;color:#979893;font-size:11px;letter-spacing:.03em}.search-stage{min-width:0}.stage-surface{padding:16px;border:1px solid rgba(36,37,34,.2);border-radius:28px;background:rgba(251,251,248,.84);box-shadow:0 26px 70px rgba(64,67,61,.18),0 2px 4px rgba(64,67,61,.08);backdrop-filter:blur(22px)}.stage-header,.stage-brand,.stage-footer,.stage-search,.stage-result{display:flex;align-items:center}.stage-header{justify-content:space-between;padding:3px 8px 16px;color:#74756f;font-size:12px}.stage-brand{gap:8px;font-weight:650}.stage-app-icon{display:grid;width:25px;height:25px;place-items:center;color:#fff;border-radius:7px;background:var(--blue);font-size:18px}.stage-header kbd{padding:5px 8px;border:1px solid var(--line);border-radius:6px;color:#858680;font:11px ui-monospace,SFMono-Regular,monospace}.stage-search{gap:10px;padding:18px;border:1px solid #d1d2cb;border-radius:15px;background:rgba(255,255,255,.75);font-size:22px}.stage-search-icon{color:var(--blue);font-size:26px}.stage-query{font-weight:520}.query-caret{width:1px;height:23px;background:var(--blue)}.stage-esc{margin-left:auto;color:#a8a9a2;font-size:11px}.stage-results{margin:16px 2px 0}.result-group-label{padding:0 11px 7px;color:#a0a19b;font-size:10px;font-weight:700;letter-spacing:.12em}.stage-result{gap:12px;padding:10px;border-radius:11px;color:#5e605b}.stage-result.selected{background:#e5edff}.stage-result strong,.stage-result small{display:block}.stage-result strong{font-size:14px;color:var(--ink)}.stage-result small{color:#8a8b84;font-size:11px}.stage-result>b{margin-left:auto;color:var(--blue);font-size:14px}.result-icon{display:grid;width:36px;height:36px;place-items:center;border-radius:9px;color:#fff;font-weight:750}.result-icon.figma{background:#242522}.result-icon.folder{color:#6d7d91;background:#dbe7f6}.result-icon.file{background:#a7b1bd}.stage-modes{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:21px;padding:4px;border-radius:13px;background:#e9e9e4}.stage-modes button{padding:9px 3px;border:0;border-radius:9px;color:#777873;background:transparent;font:inherit;font-size:11px;cursor:pointer}.stage-modes button span{margin-left:3px}.stage-modes button.active{color:#fff;background:var(--blue)}.stage-footer{justify-content:space-between;padding:16px 5px 0;color:#9a9b94;font-size:10px}.stage-footer i{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background:var(--blue)}.stage-footer b{color:#60615c}.stage-surface[data-mode=purple] .stage-search-icon,.stage-surface[data-mode=purple] .stage-footer i{color:var(--purple);background:var(--purple)}.stage-surface[data-mode=teal] .stage-search-icon,.stage-surface[data-mode=teal] .stage-footer i{color:var(--teal);background:var(--teal)}.stage-surface[data-mode=orange] .stage-search-icon,.stage-surface[data-mode=orange] .stage-footer i{color:var(--orange);background:var(--orange)}.result-icon.web{color:#fff;background:var(--teal)}.result-icon.ai{color:#fff;background:var(--orange)}.stage-surface[data-mode=purple] .stage-modes button.active{background:var(--purple)}.stage-surface[data-mode=teal] .stage-modes button.active{background:var(--teal)}.stage-surface[data-mode=orange] .stage-modes button.active{background:var(--orange)}.feature-intro{border-top:1px solid var(--line);padding:clamp(90px,12vw,170px) 0;background:var(--paper)}.section-shell{max-width:1280px;margin:0 auto;padding-right:clamp(22px,7vw,100px);padding-left:clamp(22px,7vw,100px)}.feature-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,12vw,180px);align-items:end}.section-title h2{font-size:clamp(48px,6vw,82px);font-weight:620}.feature-lead{max-width:430px;color:#656660;font-size:20px;line-height:1.65}.key-hint{display:inline-flex;align-items:center;gap:10px;margin-top:28px;color:var(--ink);font:650 16px ui-monospace,SFMono-Regular,monospace}.key-hint small{color:var(--muted);font:13px -apple-system,BlinkMacSystemFont,sans-serif}.mode-section{border-top:1px solid var(--line);padding:clamp(90px,12vw,160px) 0;background:var(--paper);color:var(--ink)}.mode-section .eyebrow{color:var(--muted)}.mode-section h2{color:var(--ink)}.section-copy{max-width:440px;margin:22px 0 0;color:#656660}.mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:70px}.mode-card{min-height:300px;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:transform .25s,background .25s}.mode-card:hover{transform:translateY(-5px);background:#fff}.mode-icon{display:block;margin-top:45px;font-size:30px}.mode-card h3{margin:20px 0 8px;font-size:24px;font-weight:600}.mode-card p{min-height:82px;margin:0;color:#656660;font-size:13px;line-height:1.7}.card-tail{display:block;margin-top:28px;color:#a9aaa3;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.mode-local .mode-icon,.mode-local .card-tail{color:#78a5ff}.mode-content .mode-icon,.mode-content .card-tail{color:#b69dff}.mode-web .mode-icon,.mode-web .card-tail{color:#62cfda}.mode-ai .mode-icon,.mode-ai .card-tail{color:#ffad70}.privacy-section{border-top:1px solid var(--line);padding:clamp(90px,12vw,160px) 0;background:var(--paper);color:var(--ink)}.privacy-grid,.release-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(50px,12vw,180px)}.privacy-section .eyebrow{color:var(--blue)}.privacy-section h2{color:var(--ink);font-size:clamp(48px,6vw,82px)}.privacy-copy>p:not(.eyebrow){max-width:500px;margin:28px 0;color:#515b68;font-size:17px;line-height:1.8}.dark-link{color:var(--ink)}.dark-link span{color:var(--blue)}.privacy-list{border-top:1px solid rgba(36,37,34,.2)}.privacy-list div{display:grid;grid-template-columns:40px 1fr;gap:10px;padding:19px 0;border-bottom:1px solid rgba(36,37,34,.2)}.privacy-list span{color:var(--blue);font:11px ui-monospace,monospace}.privacy-list strong{font-size:17px}.privacy-list p{grid-column:2;margin:-5px 0 0;color:#5b6571;font-size:13px}.release-section{border-top:1px solid var(--line);padding:clamp(90px,12vw,160px) 0;background:var(--paper)}.release-section h2{font-size:clamp(48px,6vw,82px)}.release-copy>p:not(.eyebrow){max-width:510px;margin:28px 0;color:#666761;font-size:17px;line-height:1.8}.release-links{display:flex;align-items:center;flex-wrap:wrap;gap:22px}.release-facts{margin:0;border-top:1px solid var(--line)}.release-facts div{display:grid;grid-template-columns:125px 1fr;gap:15px;padding:16px 0;border-bottom:1px solid var(--line)}.release-facts dt{color:#8b8c85;font-size:12px}.release-facts dd{margin:0;color:var(--ink);font:13px ui-monospace,SFMono-Regular,monospace}.release-facts .pending{color:var(--blue)}.product-footer{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:30px;padding:42px clamp(22px,7vw,100px) 55px;color:#aeb0aa;background:var(--ink);font-size:12px}.footer-brand{display:flex;align-items:center;gap:8px;color:#fff;font-size:14px;font-weight:700}.footer-brand .vs-mark{width:24px;height:24px;font-size:14px}.product-footer p{margin:12px 0 0;color:#9db9f5;font-size:15px}.footer-links{display:flex;flex-wrap:wrap;gap:20px}.footer-links a{text-decoration:none}.footer-links a:hover{color:#fff}.footer-copy{text-align:right}.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible{opacity:1;transform:none}.reveal-delay-1{transition-delay:.12s}.reveal-delay-2{transition-delay:.24s}.reveal-delay-3{transition-delay:.36s}@media(max-width:900px){.product-hero,.feature-intro-grid,.privacy-grid,.release-grid{grid-template-columns:1fr}.product-hero{min-height:auto}.search-stage{width:min(100%,620px)}.mode-grid{grid-template-columns:1fr 1fr}.product-nav{display:none;position:absolute;top:72px;right:0;left:0;flex-direction:column;gap:0;padding:8px 22px 18px;border-bottom:1px solid var(--line);background:rgba(245,245,242,.98)}.product-nav.is-open{display:flex}.product-nav a{padding:11px 0}.product-nav .nav-download{padding:11px 0;color:var(--blue);background:transparent}.product-nav-toggle{display:block}}@media(max-width:560px){.product-header{min-height:66px}.product-hero{padding-top:70px}.stage-surface{border-radius:20px}.stage-modes button span{display:none}.mode-grid{grid-template-columns:1fr}.mode-card{min-height:240px}.mode-icon{margin-top:25px}.product-footer{grid-template-columns:1fr}.footer-copy{text-align:left}.footer-links{gap:13px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.brand-symbol{width:30px;height:30px;display:block}.footer-brand .brand-symbol{width:24px;height:24px}.stage-app-icon img{width:19px;height:19px;display:block;filter:brightness(0) invert(1)}
.footer-symbol{padding:4px;border-radius:7px;background:#343536}

/* Product pass: predictable controls, calm surfaces, and a legible keyboard path. */
body.veraseek-site { -webkit-font-smoothing: antialiased; }
body.veraseek-site h1, body.veraseek-site h2 { text-wrap: balance; }
body.veraseek-site p { text-wrap: pretty; }
.product-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.product-nav-toggle, .stage-modes button { min-height: 44px; }
.button:active, .stage-modes button:active { transform: scale(.96); }
.product-nav a:focus-visible, .product-nav-toggle:focus-visible, .button:focus-visible, .quiet-link:focus-visible, .stage-modes button:focus-visible, .footer-links a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.stage-surface { box-shadow: 0 22px 56px rgba(64,67,61,.14), 0 2px 4px rgba(64,67,61,.07); }
.stage-modes button { transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.mode-card { transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.mode-card:hover { border-color: #c7c9c1; }
@media (prefers-reduced-transparency: reduce) {
  .product-header { background: var(--paper); backdrop-filter: none; }
  .stage-surface { background: var(--surface); backdrop-filter: none; }
}

/* VeraSeek product pass: Swiss hierarchy, verified beta state, and semantic icons. */
:root {
  --paper: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --ink: #0f172a;
  --muted: #475569;
  --line: #cbd5e1;
  --navy: #1e3a5f;
  --blue: #2563eb;
  --purple: #6d4aff;
  --teal: #0f9fae;
  --orange: #a16207;
}
html { scroll-padding-top: 84px; }
.product-header { background: rgba(247,248,250,.93); border-bottom-color: rgba(15,23,42,.12); }
.product-nav a, .product-nav-toggle, .button, .quiet-link, .stage-modes button, .footer-links a { cursor: pointer; }
.product-nav .nav-download { background: var(--navy); }
.button-primary { background: var(--blue); }
.button-primary:hover { background: #1d4ed8; }
.stage-surface { border-radius: 20px; border-color: rgba(15,23,42,.18); box-shadow: 0 22px 56px rgba(30,58,95,.14), 0 2px 4px rgba(15,23,42,.07); }
.stage-search-icon { display: inline-flex; align-items: center; color: var(--blue); }
.ui-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mode-svg { display: block; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stage-modes button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; }
.stage-modes button .mode-svg { width: 16px; height: 16px; }
.mode-icon { margin-top: 45px; }
.mode-card:hover { border-color: #b9c4d2; }
.section-title h2, .privacy-section h2, .release-section h2 { color: var(--ink); }
.privacy-list strong, .release-facts dd { color: var(--ink); }
.release-facts .pending { color: var(--blue); }
.product-footer { background: var(--navy); }
@media (max-width: 560px) { .stage-modes button { padding-inline: 8px; }.stage-modes button span { display: inline; }.mode-icon { margin-top: 25px; } }

/* Final reading and interaction layer, shared by both languages. */
.skip-link { position: fixed; z-index: 30; top: 12px; left: 12px; padding: 10px 16px; color: white; background: var(--navy); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.product-hero { gap: clamp(40px, 6vw, 80px); }
.hero-meta { color: var(--muted); font-size: 12px; }
.demo-caption { margin: 18px 0 0; text-align: center; color: var(--muted); font-size: 12px; letter-spacing: .02em; }
.stage-modes { background: var(--surface-2); }
.stage-modes button { color: var(--muted); }
.stage-modes button.active { color: white; }
.stage-header, .stage-header kbd, .result-group-label, .stage-result small, .stage-footer, .stage-footer b, .stage-esc, .release-facts dt { color: var(--muted); }
.stage-result > span:nth-child(2) { min-width: 0; }
.stage-result strong, .stage-result small { overflow-wrap: anywhere; }
.result-icon { flex-shrink: 0; }
.result-icon .ui-icon { width: 18px; height: 18px; }
.stage-query { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.query-caret { flex-shrink: 0; }
.stage-esc { flex-shrink: 0; }
.stage-surface[data-mode=purple] .stage-search-icon { background: transparent; color: #7041bd; }
.stage-surface[data-mode=teal] .stage-search-icon { background: transparent; color: #087886; }
.stage-surface[data-mode=orange] .stage-search-icon { background: transparent; color: #946009; }
.stage-surface[data-mode=purple] .stage-modes button.active { background: #7041bd; }
.stage-surface[data-mode=teal] .stage-modes button.active { background: #087886; }
.stage-surface[data-mode=orange] .stage-modes button.active { background: #946009; }
.mode-local .mode-icon, .mode-local .card-tail { color: #2563eb; }
.mode-content .mode-icon, .mode-content .card-tail { color: #7041bd; }
.mode-web .mode-icon, .mode-web .card-tail { color: #087886; }
.mode-ai .mode-icon, .mode-ai .card-tail { color: #946009; }
.mode-card { display: flex; flex-direction: column; border-radius: 12px; }
.mode-card:hover { transform: none; }
.mode-card p { min-height: 0; margin-bottom: 28px; }
.mode-card .card-tail { margin-top: auto; padding-top: 12px; }
.privacy-section { background: #eef2f7; }
.release-facts { padding: 16px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); align-self: start; }
.release-facts div:last-child { border-bottom: 0; }
.product-footer .footer-links a, .quiet-link { display: inline-flex; align-items: center; min-height: 44px; }
.product-nav-toggle { min-width: 48px; cursor: pointer; }
.reveal { opacity: 1; transform: none; }
.reveal.reveal-pending { opacity: 0; transform: translateY(12px); }
@media (min-width: 901px) and (max-width: 1100px) {
  .product-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-inline: 44px; }
  .product-hero h1 { font-size: 70px; }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .product-nav { background: var(--paper); }
  .product-nav a { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  .product-nav { top: 66px; }
  .stage-surface { padding: 12px; }
  .stage-search { padding: 14px 10px; font-size: 18px; gap: 8px; }
  .stage-modes button { gap: 3px; padding-inline: 2px; }
  .stage-modes button span { margin-left: 0; }
  .stage-footer { flex-wrap: wrap; gap: 6px; font-size: 11px; }
  .release-facts { padding-inline: 16px; }
  .release-facts div { grid-template-columns: 70px minmax(0, 1fr); }
  .release-facts dd { overflow-wrap: anywhere; }
  html[lang=zh-CN] h1, html[lang=zh-Hant] h1 { font-size: clamp(44px, 12vw, 64px); line-height: 1.14; letter-spacing: -.045em; }
}
@media (prefers-reduced-motion: reduce) { .reveal.reveal-pending { opacity: 1; transform: none; } }

/* Raycast-inspired product storytelling: floating navigation, shortcut rhythm, and a focused showcase. */
.product-header {
  width: min(calc(100% - 32px), 1240px);
  margin: 12px auto 0;
  min-height: 60px;
  padding-inline: 18px;
  border: 1px solid rgba(15,23,42,.14);
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(30,58,95,.08);
}
.product-header + .language-dialog + main { padding-top: 0; }
.shortcut-section {
  padding: clamp(80px, 11vw, 150px) 0;
  color: #f8fafc;
  background: var(--navy);
  overflow: hidden;
}
.shortcut-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .85fr); gap: clamp(48px, 10vw, 150px); align-items: center; }
.shortcut-section .eyebrow { color: #9db9f5; }
.shortcut-section h2 { max-width: 720px; color: #f8fafc; font-size: clamp(46px, 6.8vw, 92px); }
.shortcut-copy > p:not(.eyebrow) { max-width: 510px; margin: 28px 0 0; color: #c4d1e5; font-size: 17px; line-height: 1.8; }
.shortcut-key { display: flex; align-items: center; gap: 12px; margin-top: 34px; color: #a8b9d1; font-size: 13px; }
.shortcut-key kbd { padding: 10px 14px; border: 1px solid rgba(255,255,255,.24); border-radius: 9px; color: #fff; background: rgba(255,255,255,.08); font: 600 12px ui-monospace, SFMono-Regular, monospace; }
.shortcut-steps { border-top: 1px solid rgba(255,255,255,.24); }
.shortcut-step { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: start; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.24); }
.step-index { color: #9db9f5; font: 11px ui-monospace, SFMono-Regular, monospace; }
.shortcut-step strong { font-size: 18px; font-weight: 650; }
.shortcut-step p { margin: 4px 0 0; color: #b5c4d9; font-size: 13px; line-height: 1.55; }
.step-arrow { color: #9db9f5; font-size: 18px; }
.showcase-section { padding: clamp(86px, 12vw, 160px) 0; border-top: 1px solid var(--line); background: #eaf0f7; }
.showcase-head { display: grid; grid-template-columns: 1fr .7fr; gap: 40px; align-items: end; }
.showcase-head h2 { font-size: clamp(44px, 5.6vw, 78px); }
.showcase-head > p { max-width: 350px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.showcase-grid { display: grid; grid-template-columns: minmax(170px, .35fr) minmax(0, 1fr); gap: 16px; margin-top: 64px; }
.showcase-tabs { display: flex; flex-direction: column; gap: 6px; }
.showcase-tabs button { min-height: 48px; padding: 0 16px; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; font: 650 13px -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; text-align: left; cursor: pointer; transition: color .18s, background .18s, border-color .18s; }
.showcase-tabs button:hover, .showcase-tabs button.is-active { border-color: #b8c5d6; color: var(--ink); background: rgba(255,255,255,.8); }
.showcase-tabs button.is-active::before { content: '↗'; margin-right: 8px; color: var(--blue); }
.showcase-window { min-height: 340px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #273a57; border-radius: 18px; color: #e7eef8; background: #0f172a; box-shadow: 0 24px 60px rgba(30,58,95,.18); transition: background .22s ease; }
.showcase-window[data-tone="purple"] { background: #19142e; }
.showcase-window[data-tone="teal"] { background: #102a31; }
.showcase-window[data-tone="orange"] { background: #2a1d14; }
.showcase-window-bar { display: flex; align-items: center; gap: 6px; padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.12); color: #9db1ce; font-size: 11px; }
.window-dot { width: 7px; height: 7px; border-radius: 50%; background: #6881a6; }
.window-title { margin-left: 12px; color: #c7d4e6; font: 700 10px ui-monospace, SFMono-Regular, monospace; letter-spacing: .12em; }
.window-status { margin-left: auto; color: #8094b1; }
.showcase-window-body { display: grid; grid-template-columns: 88px 1fr; gap: 24px; align-items: center; flex: 1; padding: 42px clamp(26px, 6vw, 90px); }
.showcase-icon { display: grid; width: 80px; height: 80px; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; color: #fff; background: rgba(37,99,235,.72); font-size: 42px; box-shadow: 0 18px 35px rgba(0,0,0,.24); }
.showcase-kicker { margin: 0 0 12px; color: #8fb0e9; font: 700 11px ui-monospace, SFMono-Regular, monospace; letter-spacing: .12em; text-transform: uppercase; }
.showcase-window h3 { margin: 0; color: #f8fafc; font-size: clamp(26px, 3.4vw, 50px); letter-spacing: -.045em; line-height: 1.06; }
.showcase-window-body p:last-child { max-width: 520px; margin: 18px 0 0; color: #b7c6d9; font-size: 15px; line-height: 1.65; }
.showcase-window-footer { display: flex; justify-content: space-between; gap: 12px; padding: 16px 18px; border-top: 1px solid rgba(255,255,255,.12); color: #8fa4c1; font-size: 12px; }
.showcase-return b { display: inline-grid; width: 22px; height: 22px; margin-left: 5px; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 5px; color: #fff; background: rgba(255,255,255,.08); }
.showcase-tabs button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (max-width: 900px) {
  .product-header { margin-top: 10px; }
  .shortcut-grid, .showcase-head { grid-template-columns: 1fr; }
  .showcase-head > p { margin-top: -16px; }
  .showcase-grid { grid-template-columns: 1fr; margin-top: 42px; }
  .showcase-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-tabs button { text-align: center; }
  .showcase-tabs button.is-active::before { display: none; }
}
@media (max-width: 560px) {
  .product-header { width: calc(100% - 20px); padding-inline: 14px; }
  .shortcut-section { padding-block: 82px; }
  .shortcut-section h2 { font-size: clamp(42px, 12vw, 64px); }
  .shortcut-copy > p:not(.eyebrow) { font-size: 15px; }
  .showcase-section { padding-block: 82px; }
  .showcase-head h2 { font-size: clamp(40px, 11vw, 58px); }
  .showcase-window-body { grid-template-columns: 1fr; gap: 22px; padding: 30px 24px 42px; }
  .showcase-icon { width: 64px; height: 64px; border-radius: 18px; font-size: 32px; }
  .showcase-window h3 { font-size: 30px; }
  .showcase-window-footer { flex-wrap: wrap; }
}

/* Language picker: keep the choice explicit and easy to scan. */
.language-trigger {
  min-height: 44px;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.language-trigger:hover { color: var(--blue); }
.language-dialog {
  width: min(430px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15,23,42,.22);
}
.language-dialog::backdrop { background: rgba(15,23,42,.35); backdrop-filter: blur(4px); }
.language-dialog-inner { padding: 28px; }
.language-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.language-dialog-header .eyebrow { margin-bottom: 9px; color: var(--blue); }
.language-dialog-header h2 { font-size: clamp(28px, 5vw, 38px); letter-spacing: -.04em; }
.language-close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.language-options { display: grid; gap: 8px; padding-top: 18px; }
.language-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 60px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  transition: background .18s, border-color .18s;
}
.language-option:hover, .language-option[aria-current="page"] { border-color: #b9c4d2; background: #eef2f7; }
.language-option span:first-child { display: grid; gap: 2px; }
.language-option strong { font-size: 15px; font-weight: 650; }
.language-option small { color: var(--muted); font-size: 12px; }
.language-option > span:last-child { color: var(--blue); font-size: 18px; }
@media (max-width: 900px) { .language-trigger { width: 100%; text-align: center; } }
@media (max-width: 560px) {
  .language-dialog-inner { padding: 22px; }
  .language-dialog-header h2 { font-size: 30px; }
  .language-option { min-height: 56px; }
}

/* The preview browser does not expose HTMLDialogElement; this overlay keeps the same modal contract everywhere. */
body.language-open { overflow: hidden; }
.language-dialog[hidden] { display: none; }
.language-dialog {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  width: auto;
  max-width: none;
  padding: 16px;
  border: 0;
  border-radius: 0;
  background: rgba(15,23,42,.35);
  backdrop-filter: blur(4px);
}
.language-dialog-inner {
  width: min(430px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15,23,42,.22);
}
@media (max-width: 560px) { .language-dialog-inner { padding: 22px; } }