:root {
  --bg:#FDFDFB;
  --bg-panel:#F7F6F3;
  --bg-wash:#FBEFEB;
  --wash-mid:#FCF6F3;
  --surface:#FFFFFF;
  --chrome:#F5F4F1;
  --border:#ECEAE6;
  --border-strong:#DEDBD6;
  --dot-gray:#D6D3CE;
  --skeleton:#ECEAE6;
  --accent:#DC4436;
  --accent-dark:#B12F25;
  --accent-soft:#EC7466;
  --accent-tint:#FBEFEB;
  --accent-lip:#F1B6AD;
  --accent-line:rgba(220,68,54,.38);
  --teal:#2A8C82;
  --teal-ink:#226F67;
  --teal-line:rgba(42,140,130,.38);
  --amber:#E8A33D;
  --amber-ink:#87580D;
  --amber-line:rgba(232,163,61,.50);
  --text:#1F1E1C;
  --text-muted:#6B6966;
  --text-subtle:#9A9792;
  --on-accent:#FFFFFF;
  --phone-bar:#3A3836;
  --scrim:rgba(31,30,28,.06);
  --veil:rgba(31,30,28,.25);
  --camera-ring:rgba(255,255,255,.06);
  --success:#3A9B5C;
  --success-ink:#27683E;
  --warn:#E8A33D;
  --error:#C8352B;
  --clear:transparent;
  --font-display:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Inter","Noto Sans SC","Noto Sans JP","Noto Sans KR",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-base:1rem;
  --fs-lg:1.125rem;
  --fs-h1:clamp(34px,3.4vw,48px);
  --fs-h2:clamp(25px,2.6vw,36px);
  --fs-h3:1.375rem;
  --fs-brand:17px;
  --fs-nav:14.5px;
  --fs-lede:17.5px;
  --fs-chip:13px;
  --fs-plat:13.5px;
  --fs-caption:12.5px;
  --fs-tiny:10.5px;
  --fs-window:21px;
  --fs-window-sub:11.5px;
  --fs-phone:15px;
  --weight-normal:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-heavy:800;
  --leading-body:1.6;
  --leading-title:1.16;
  --tracking-title:-.02em;
  --r-xs:4px;
  --r-sm:8px;
  --r-chip:10px;
  --r-field:12px;
  --r-btn:14px;
  --r-sheet:18px;
  --r-card:20px;
  --r-mobile-canvas:22px;
  --r-canvas:28px;
  --r-screen:27px;
  --r-phone:34px;
  --r-pill:999px;
  --r-circle:50%;
  --shadow-soft:0 1px 2px rgba(31,30,28,.04),0 6px 16px -10px rgba(31,30,28,.12);
  --shadow-card:0 1px 2px rgba(31,30,28,.04),0 10px 24px -8px rgba(31,30,28,.08),0 30px 60px -30px rgba(31,30,28,.20);
  --shadow-float:0 2px 4px rgba(31,30,28,.06),0 20px 36px -12px rgba(31,30,28,.20),0 48px 80px -32px rgba(120,40,30,.32);
  --shadow-sheet:0 -10px 24px -14px rgba(31,30,28,.22);
  --shadow-fab:0 8px 18px -6px rgba(220,68,54,.55);
  --shadow-btn:0 4px 0 var(--accent-lip),0 14px 26px -14px rgba(220,68,54,.60);
  --shadow-btn-press:0 1px 0 var(--accent-lip),0 6px 14px -10px rgba(220,68,54,.50);
  --nav-h:72px;
  --container:1280px;
  --reading:820px;
  --gutter:40px;
  --section-space:96px;
  --motion-fast:.18s;
  --motion-reveal:.55s;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:24px }
html.nav-open { overflow:hidden }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--fs-base);
  line-height:var(--leading-body); -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer }
button,input,select,textarea { max-width:100% }
button { border:0 }
img,svg { vertical-align:middle }
img { max-width:100%; height:auto }
svg { flex-shrink:0 }
[hidden] { display:none!important }
::selection { background:var(--accent-tint); color:var(--accent-dark) }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm) }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-heavy); text-wrap:balance; line-height:1.25 }
h1 { font-size:var(--fs-h1); letter-spacing:var(--tracking-title) }
h2 { font-size:var(--fs-h2); letter-spacing:var(--tracking-title) }
h3 { font-size:var(--fs-h3) }
p { margin:0 0 1.1em }
h1,h2,h3 { margin-top:0 }
.keyword { white-space:nowrap }
.wrap { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter) }
.reading { max-width:calc(var(--reading) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter) }
.section { padding-top:var(--section-space); padding-bottom:var(--section-space) }
.section-head { max-width:720px; margin-bottom:36px }
.eyebrow { display:block; margin-bottom:12px; color:var(--accent-dark); font-size:var(--fs-sm); font-weight:var(--weight-bold) }
.muted { color:var(--text-muted) }
.accent-text { color:var(--accent-dark) }
.mono { font-family:var(--font-mono) }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
.skip-link { position:absolute; top:8px; left:var(--gutter); z-index:100; padding:10px 16px; background:var(--surface); color:var(--accent-dark); border-radius:var(--r-sm); transform:translateY(-160%) }
.skip-link:focus { transform:none }
.grid { display:grid; gap:24px }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid>* , .hero-grid>* , .footer-grid>* { min-width:0 }
.card { padding:28px; border:1px solid var(--border); border-radius:var(--r-card); background:var(--surface); color:var(--text); box-shadow:var(--shadow-soft) }
.panel { padding:36px; border:1px solid var(--border); border-radius:var(--r-canvas); background:var(--bg-panel); color:var(--text) }
.wash-panel { background:linear-gradient(140deg,var(--bg-wash),var(--bg)); color:var(--text) }
.decorated { position:relative; overflow-x:clip }
.prose { min-width:0; line-height:1.85 }
.prose h2 { margin-top:2.1em; margin-bottom:.75em }
.prose h3 { margin-top:1.6em }
.prose a { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px }
.prose img { height:auto }
.prose li+li { margin-top:.45em }
.prose :where(div,section,article) { min-width:0; max-width:100% }
code { font-family:var(--font-mono); font-size:.9em; overflow-wrap:anywhere }
:not(pre)>code { padding:2px 5px; border-radius:var(--r-xs); background:var(--bg-panel); color:var(--text) }
pre { max-width:100%; min-width:0; padding:22px; overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-btn); background:var(--bg-panel); color:var(--text); font-family:var(--font-mono); font-size:var(--fs-sm); line-height:1.7; tab-size:2 }
pre code { padding:0; white-space:pre; overflow-wrap:normal; word-break:normal }
input,select,textarea { border:1px solid var(--border-strong); border-radius:var(--r-sm); padding:10px 12px; background:var(--surface); color:var(--text); min-width:0 }
input[type="checkbox"],input[type="radio"] { accent-color:var(--accent); flex-shrink:0 }
.btn {
  display:inline-flex; justify-content:center; align-items:center; gap:9px;
  min-height:54px; padding:0 26px; border:1px solid var(--clear);
  border-radius:var(--r-btn); font-size:var(--fs-base); font-weight:var(--weight-bold);
  letter-spacing:.005em; text-align:center;
  transition:transform var(--motion-fast) ease,box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease,border-color var(--motion-fast) ease;
}
.btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.btn-primary { background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-btn) }
.btn-primary:hover,.btn-primary.is-hover { background:var(--accent-dark); color:var(--on-accent); transform:translateY(-1px) }
.btn-primary:active,.btn-primary.is-pressed { transform:translateY(3px); box-shadow:var(--shadow-btn-press) }
.btn-ghost { background:var(--surface); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-soft) }
.btn-ghost:hover { border-color:var(--border-strong); transform:translateY(-1px) }
.btn-ghost svg { color:var(--text-muted) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--bg-panel); color:var(--text-muted); border-color:var(--border); box-shadow:none; cursor:not-allowed; transform:none }
.btn.is-focus { outline:2px solid var(--accent); outline-offset:3px }
.cta-row { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px }
.topbar { position:relative; z-index:30; height:var(--nav-h); background:var(--bg); color:var(--text) }
.header-wrap { width:100%; max-width:min(100%,calc(1280px + var(--gutter) * 2)); margin-inline:auto; padding-inline:var(--gutter) }
.topbar-row { height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px }
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0 }
.brand-mark { display:block; width:36px; height:36px; flex-shrink:0 }
.brand-name { font-family:var(--font-display); font-weight:var(--weight-heavy); font-size:var(--fs-brand); letter-spacing:-.01em }
.mainnav { display:flex; align-items:center; min-width:0; margin-left:auto }
.mainnav ul { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:2px }
.navlink { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:8px 12px; border-radius:var(--r-pill); font-size:var(--fs-nav); font-weight:var(--weight-medium); color:var(--text-muted); white-space:nowrap; transition:background-color var(--motion-fast),color var(--motion-fast) }
.navlink svg,.drawer svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.navlink:hover { background:var(--bg-panel); color:var(--text) }
.navlink.is-current { background:var(--accent-tint); color:var(--accent-dark); font-weight:var(--weight-semibold) }
.header-tools { display:flex; align-items:center; gap:14px; flex-shrink:0 }
.nav-sep { width:1px; height:22px; background:var(--border-strong); flex-shrink:0 }
.language-picker { position:relative }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 12px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--text); font-size:var(--fs-sm); font-weight:var(--weight-medium); cursor:pointer; white-space:nowrap; box-shadow:var(--shadow-soft); list-style:none }
.lang::-webkit-details-marker { display:none }
.lang svg { width:15px; height:15px; fill:none; stroke:var(--text-muted); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.lang-caret { color:var(--text-muted); font-size:var(--fs-xs) }
.lang-short { display:none }
.language-menu { position:absolute; top:calc(100% + 10px); right:0; width:190px; margin:0; padding:8px; list-style:none; border:1px solid var(--border); border-radius:var(--r-btn); background:var(--surface); color:var(--text); box-shadow:var(--shadow-card); z-index:40 }
.language-menu a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-sm); font-size:var(--fs-sm) }
.language-menu a:hover,.language-menu a[aria-current] { background:var(--accent-tint); color:var(--accent-dark) }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:10px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-chip); list-style:none }
.menu-toggle::-webkit-details-marker { display:none }
.menu-toggle svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round }
.drawer { position:absolute; top:var(--nav-h); left:0; right:0; padding:20px var(--gutter) 28px; border-bottom:1px solid var(--border); background:var(--bg); color:var(--text); max-height:calc(100dvh - var(--nav-h)); overflow-y:auto; overscroll-behavior:contain; box-shadow:var(--shadow-card); z-index:32 }
.drawer ul { list-style:none; margin:0; padding:0 }
.drawer a { display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:12px 16px; border-radius:var(--r-sm) }
.drawer a:hover,.drawer a[aria-current] { background:var(--accent-tint); color:var(--accent-dark) }
.drawer-languages { margin-top:20px; border-top:1px solid var(--border); padding-top:16px }
.drawer-languages p { margin:0 16px 8px; font-size:var(--fs-sm); color:var(--text-muted) }
.nav-veil { position:fixed; inset:var(--nav-h) 0 0; z-index:20; background:var(--veil); color:var(--text) }
.preview-mobile { display:none }
.site-footer { padding-top:64px; padding-bottom:28px; border-top:1px solid var(--border); background:var(--bg-panel); color:var(--text) }
.footer-grid { display:grid; grid-template-columns:1.2fr .8fr 1.2fr .8fr; gap:40px }
.footer-brand p { margin-top:20px; max-width:310px; color:var(--text-muted); font-size:var(--fs-sm) }
.footer-title { font-size:var(--fs-sm); font-weight:var(--weight-bold); margin:0 0 16px }
.footer-list { list-style:none; padding:0; margin:0 }
.footer-list a { display:inline-block; padding-top:5px; padding-bottom:5px; font-size:var(--fs-sm); color:var(--text-muted); overflow-wrap:anywhere }
.footer-list a:hover { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px 24px; margin-top:42px; padding-top:22px; border-top:1px solid var(--border-strong); font-size:var(--fs-sm); color:var(--text-muted) }
.footer-legal { display:flex; flex-wrap:wrap; gap:20px }
.reveal { opacity:1; transform:none }
html.reveal-ready .reveal:not(.shown) { opacity:0; transform:translateY(18px) }
.reveal { transition:opacity var(--motion-reveal) ease,transform var(--motion-reveal) ease }
.reveal.shown { opacity:1; transform:none }
/* 首页装置：固定尺寸舞台在画布内等比缩放，不让示意窗口撑宽页面。 */
.hero { position:relative; overflow-x:clip; min-height:clamp(640px,calc(100vh - var(--nav-h) - 48px),820px); display:flex; align-items:center; padding-top:20px; padding-bottom:24px }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:72px; align-items:center; width:100% }
.hero-deco { position:absolute; pointer-events:none }
.hero-deco-star { width:22px; height:22px; right:6%; top:9%; fill:var(--amber) }
.hero-deco-dot { width:8px; height:8px; right:calc(6% + 34px); top:calc(9% + 30px); border-radius:var(--r-circle); background:var(--amber); opacity:.7 }
.hero-deco-ring { width:14px; height:14px; right:3.4%; bottom:16%; border-radius:var(--r-circle); border:2px solid var(--teal); opacity:.45 }
.canvas { position:relative; height:600px; margin:0; border-radius:var(--r-canvas); border:1px solid var(--border); background:linear-gradient(140deg,var(--bg-wash) 0%,var(--wash-mid) 44%,var(--bg) 100%); color:var(--text); overflow:hidden }
.canvas-bands { position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.band-a { fill:none; stroke:var(--accent); stroke-width:96; stroke-linecap:round; opacity:.07 }
.band-b { fill:none; stroke:var(--accent); stroke-width:40; stroke-linecap:round; opacity:.05 }
.geo { position:absolute; pointer-events:none }
.geo-star { width:26px; height:26px; top:34px; right:46px; fill:var(--amber) }
.geo-star-sm { width:13px; height:13px; top:78px; right:96px; fill:var(--amber); opacity:.75 }
.geo-ring { left:40px; bottom:44px; width:18px; height:18px; border-radius:var(--r-circle); border:2px solid var(--teal); opacity:.55 }
.geo-ring-sm { left:74px; bottom:70px; width:9px; height:9px; border-radius:var(--r-circle); border:2px solid var(--teal); opacity:.4 }
.geo-dot { left:110px; bottom:38px; width:7px; height:7px; border-radius:var(--r-circle); background:var(--accent); opacity:.35 }
.stage { position:absolute; top:0; left:0; width:680px; height:600px; transform-origin:0 0 }
.win { position:absolute; left:28px; top:44px; width:520px; height:452px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-card); overflow:hidden; display:flex; flex-direction:column }
.win-chrome { position:relative; height:38px; flex-shrink:0; display:flex; align-items:center; padding:0 14px; background:var(--chrome); color:var(--text-muted); border-bottom:1px solid var(--border) }
.win-dots { display:flex; gap:7px }
.win-dots i { width:10px; height:10px; border-radius:var(--r-circle); background:var(--dot-gray) }
.win-title { position:absolute; left:0; right:0; text-align:center; font-size:var(--fs-caption); font-weight:var(--weight-semibold); letter-spacing:.01em }
.win-body { flex:1; display:flex; min-height:0 }
.win-side { width:136px; flex-shrink:0; padding:16px 10px; background:var(--bg-panel); color:var(--text-muted); border-right:1px solid var(--border) }
.side-add { display:flex; align-items:center; gap:7px; padding:6px 8px; margin-bottom:10px; font-size:var(--fs-xs); font-weight:var(--weight-semibold); color:var(--accent-dark) }
.side-add b { width:16px; height:16px; border-radius:var(--r-circle); background:var(--accent); color:var(--on-accent); display:inline-flex; align-items:center; justify-content:center }
.side-add svg { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round }
.side-item { display:flex; align-items:center; gap:8px; padding:7px 8px; margin-bottom:2px; border-radius:var(--r-sm); font-size:var(--fs-xs); white-space:nowrap }
.side-item svg { width:14px; height:14px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.side-item.is-on { background:var(--accent-tint); color:var(--accent-dark); font-weight:var(--weight-semibold) }
.win-main { flex:1; min-width:0; padding:22px 22px 0 }
.win-h { margin:0; font-size:var(--fs-window); font-weight:var(--weight-heavy); letter-spacing:var(--tracking-title); line-height:1.3 }
.win-sub { margin:4px 0 12px; font-size:var(--fs-window-sub); color:var(--text-muted) }
.todo { display:flex; align-items:flex-start; gap:12px; padding:10px 0 9px; border-bottom:1px solid var(--border) }
.todo:last-child { border-bottom:0 }
.tick { width:18px; height:18px; flex-shrink:0; margin-top:1px; border-radius:var(--r-circle); border:1.5px solid var(--border-strong); display:inline-flex; align-items:center; justify-content:center; background:var(--surface); color:var(--text) }
.tick svg { width:12px; height:12px; fill:none; stroke:var(--on-accent); stroke-width:3; stroke-linecap:round; stroke-linejoin:round }
.tick.is-done { background:var(--accent); color:var(--on-accent); border-color:var(--accent) }
.tick.is-next { border-color:var(--accent) }
.todo-body { min-width:0 }
.todo-text { display:block; font-size:var(--fs-chip); font-weight:var(--weight-medium); white-space:nowrap; line-height:1.45 }
.todo.is-done .todo-text { color:var(--text-muted); text-decoration:line-through }
.tag { display:inline-block; max-width:100%; overflow:hidden; overflow-wrap:anywhere; margin-top:4px; padding:0 7px; border-radius:var(--r-pill); border:1px solid currentColor; font-size:var(--fs-tiny); font-weight:var(--weight-semibold); line-height:17px; background:var(--surface); color:var(--accent-dark); vertical-align:middle }
.tag-coral { color:var(--accent-dark) }
.tag-teal { color:var(--teal-ink) }
.tag-amber { color:var(--amber-ink) }
.phone { position:absolute; left:452px; top:168px; width:204px; height:396px; padding:7px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-phone); box-shadow:var(--shadow-float); transform:rotate(6deg); animation:phoneFloat 7s ease-in-out infinite }
@keyframes phoneFloat { 0%,100% { transform:rotate(6deg) translateY(0) } 50% { transform:rotate(6deg) translateY(-8px) } }
.screen { position:relative; height:100%; border-radius:var(--r-screen); overflow:hidden; background:var(--bg-panel); color:var(--text); display:flex; flex-direction:column }
.p-status { height:24px; flex-shrink:0; background:var(--phone-bar); color:var(--on-accent); display:flex; align-items:center; justify-content:center }
.p-status i { width:9px; height:9px; border-radius:var(--r-circle); background:var(--text); box-shadow:0 0 0 2px var(--camera-ring) }
.p-bar { display:flex; align-items:center; justify-content:space-between; padding:11px 14px 10px; background:var(--surface); color:var(--text); border-bottom:1px solid var(--border) }
.p-title { font-weight:var(--weight-heavy); font-size:var(--fs-phone); letter-spacing:-.01em }
.p-actions { display:flex; gap:10px; align-items:center }
.p-actions svg { width:15px; height:15px; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.p-act-add { stroke:var(--accent) }
.p-act-more { stroke:var(--text-muted) }
.p-list { position:relative; flex:1; padding:10px 10px 0 }
.p-list::after { content:""; position:absolute; inset:0; background:var(--scrim) }
.skel { display:flex; align-items:center; gap:9px; padding:10px; margin-bottom:7px; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:var(--r-field) }
.skel i { width:14px; height:14px; border-radius:var(--r-circle); border:1.5px solid var(--border-strong); flex-shrink:0 }
.skel span { display:block; height:6px; border-radius:var(--r-xs); background:var(--skeleton) }
.skel-lines { flex:1; display:grid; gap:5px }
.skel-lines span:last-child { width:58% }
.sheet { position:relative; z-index:1; padding:8px 12px 66px; background:var(--surface); color:var(--text); border-radius:var(--r-sheet) var(--r-sheet) 0 0; box-shadow:var(--shadow-sheet) }
.sheet-handle { width:32px; height:4px; margin:0 auto 8px; border-radius:var(--r-xs); background:var(--dot-gray) }
.sheet-opt { display:flex; align-items:center; gap:10px; padding:8px 4px; font-size:var(--fs-xs); font-weight:var(--weight-semibold); white-space:nowrap }
.sheet-opt+.sheet-opt { border-top:1px solid var(--border) }
.sheet-opt svg { width:16px; height:16px; flex-shrink:0; fill:none; stroke:var(--text-muted); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.fab { position:absolute; right:12px; bottom:14px; width:44px; height:44px; border-radius:var(--r-circle); background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-fab); display:flex; align-items:center; justify-content:center }
.fab svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.hero-copy { max-width:540px }
.chips { display:flex; flex-wrap:wrap; gap:8px }
.chip { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:5px 12px; border-radius:var(--r-pill); border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:var(--fs-chip); font-weight:var(--weight-semibold); line-height:1.4; overflow-wrap:anywhere }
.chip::before { content:""; width:6px; height:6px; border-radius:var(--r-circle); background:currentColor; flex-shrink:0 }
.chip-teal { color:var(--teal-ink); border-color:var(--teal-line) }
.chip-amber { color:var(--amber-ink); border-color:var(--amber-line) }
.chip-coral { color:var(--accent-dark); border-color:var(--accent-line) }
.hero-h1 { margin:22px 0 0; font-size:var(--fs-h1); line-height:var(--leading-title); letter-spacing:var(--tracking-title) }
.hero-h1>span { display:block }
.hero-h1 em { font-style:normal; color:var(--accent-dark) }
.hero-lede { margin:20px 0 0; max-width:500px; font-size:var(--fs-lede); line-height:1.75; color:var(--text-muted) }
.hero-lede strong { color:var(--text); font-weight:var(--weight-semibold) }
.plat-block { margin-top:30px }
.plat-label { display:block; margin-bottom:10px; font-size:var(--fs-caption); font-weight:var(--weight-semibold); color:var(--text-muted); letter-spacing:.04em }
.plat-row { display:flex; flex-wrap:wrap; gap:8px }
.plat { display:inline-flex; align-items:center; gap:8px; padding:7px 13px 7px 11px; border:1px solid var(--border); border-radius:var(--r-chip); background:var(--surface); color:var(--text); font-size:var(--fs-plat); font-weight:var(--weight-semibold); transition:border-color var(--motion-fast),color var(--motion-fast) }
.plat svg { width:16px; height:16px; color:var(--text-muted); flex-shrink:0 }
.plat:hover { border-color:var(--accent-line); color:var(--accent-dark) }
.plat:hover svg { color:var(--accent) }
.facts { padding-top:4px; padding-bottom:88px }
.facts-strip { display:flex; flex-wrap:wrap; align-items:center; gap:12px 40px; margin:0; padding:18px 28px; list-style:none; background:var(--bg-panel); color:var(--text-muted); border:1px solid var(--border); border-radius:var(--r-card); font-family:var(--font-mono); font-size:var(--fs-chip) }
.facts-strip li { display:inline-flex; flex-wrap:wrap; align-items:center; gap:9px; min-width:0 }
.fdot { width:7px; height:7px; border-radius:var(--r-circle); flex-shrink:0 }
.fdot-coral { background:var(--accent) }
.fdot-teal { background:var(--teal) }
.fdot-amber { background:var(--amber) }
.fk { color:var(--text-muted) }
.fv { color:var(--text); font-weight:var(--weight-medium) }
@media(max-width:1360px) {
  .canvas { height:540px }
  .stage { transform:scale(.9) }
}
@media(max-width:1279px) {
  .mainnav { display:none }
  .header-tools { margin-left:auto; gap:10px }
  .menu-toggle { display:inline-flex }
  .preview-mobile { display:block }
}
@media(min-width:1280px) {
  .drawer,.nav-veil { display:none!important }
}
@media(max-width:1200px) {
  .hero-grid { gap:48px }
  .canvas { height:510px }
  .stage { transform:scale(.85) }
}
@media(max-width:1080px) {
  .hero { min-height:0; padding-top:32px; padding-bottom:48px }
  .hero-grid { grid-template-columns:minmax(0,1fr); gap:44px }
  .hero-copy { order:-1; max-width:640px }
  .canvas { width:100%; max-width:720px; height:600px; margin-inline:auto }
  .stage { left:50%; transform-origin:50% 0; transform:translateX(-50%) }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:768px) {
  :root { --gutter:20px; --section-space:64px; --fs-h1:clamp(24px,4vw,30px); --fs-h2:clamp(23px,4vw,28px) }
  .topbar-row { gap:12px }
  .brand-name { font-size:var(--fs-phone) }
  .nav-sep { display:none }
  .canvas { height:450px }
  .stage { transform:translateX(-50%) scale(.75) }
  .hero-lede { font-size:var(--fs-base) }
  .facts-strip { padding:16px 18px; gap:10px 24px; font-size:var(--fs-xs) }
  .grid-3 { grid-template-columns:minmax(0,1fr) }
}
@media(max-width:640px) {
  .grid-2 { grid-template-columns:minmax(0,1fr) }
  .tilt,[data-tilt] { transform:none!important }
  .lang-full { display:none }
  .lang-short { display:inline }
  .card { padding:22px }
  .panel { padding:24px }
  .footer-grid { gap:32px 24px }
  .footer-brand { grid-column:1/-1 }
  .chips { flex-direction:row; flex-wrap:wrap }
}
@media(max-width:540px) {
  .canvas { height:305px; border-radius:var(--r-mobile-canvas) }
  .stage { transform:translateX(-50%) scale(.5) }
  .btn { min-height:50px; padding:0 20px; font-size:var(--fs-phone) }
  .hero { padding-top:24px }
  .hero-grid { gap:32px }
}
@media(max-width:400px) {
  .canvas { height:282px }
  .stage { transform:translateX(-50%) scale(.46) }
  .brand { gap:7px }
  .brand-mark { width:30px; height:30px }
  .brand-name { font-size:var(--fs-sm) }
  .header-tools { gap:6px }
  .lang { padding:8px 10px }
  .footer-grid { grid-template-columns:minmax(0,1fr) }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { animation:none!important; transition:none!important }
  html.reveal-ready .reveal:not(.shown) { opacity:1; transform:none }
}