:root {
  --bg:#FAFAFA;
  --panel:#FFFFFF;
  --panel-2:#F3F3F4;
  --panel-soft:#F8F8F9;
  --border:#E6E6E8;
  --border-strong:#D4D4D8;
  --accent:#D9338A;
  --accent-dark:#9E1F63;
  --text:#18171C;
  --text-2:#3B3A41;
  --muted:#67666E;
  --faint:#85848C;
  --success:#1F9D63;
  --warn:#C77A12;
  --error:#D33A2C;
  --violet:#8C6BFF;
  --apricot:#FF9466;
  --on-accent:#FFFFFF;
  --toggle-off:#D7D7DB;
  --violet-rgb:140,107,255;
  --orchid-rgb:178,79,197;
  --magenta-rgb:217,51,138;
  --apricot-rgb:255,148,102;
  --white-rgb:255,255,255;
  --ink-rgb:24,23,28;
  --plum-rgb:76,38,110;
  --wine-rgb:158,31,99;
  --accent-wash:rgba(217,51,138,.07);
  --accent-ring:rgba(217,51,138,.16);
  --accent-line:rgba(217,51,138,.38);
  --success-ring:rgba(31,157,99,.16);
  --glass-2:rgba(255,255,255,.66);
  --glass-3:rgba(255,255,255,.42);
  --glass-chip:rgba(255,255,255,.72);
  --glass-line:rgba(255,255,255,.78);
  --rim:rgba(255,255,255,.55);
  --mask-on:#000000;
  --mask-low:rgba(0,0,0,.12);
  --clear:transparent;
  --veil:rgba(24,23,28,.28);
  --grad:linear-gradient(90deg,var(--violet) 0%,var(--accent) 55%,var(--apricot) 100%);
  --grad-soft:linear-gradient(125deg,rgba(var(--violet-rgb),.14),rgba(var(--magenta-rgb),.12) 55%,rgba(var(--apricot-rgb),.22));
  --font-display:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans','Yu Gothic','Apple SD Gothic Neo','Malgun Gothic','Microsoft YaHei',system-ui,sans-serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans','Yu Gothic','Apple SD Gothic Neo','Malgun Gothic','Microsoft YaHei',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular','Cascadia Mono',Consolas,'Liberation Mono',monospace;
  --f-11:11px;
  --f-115:11.5px;
  --f-12:12px;
  --f-125:12.5px;
  --f-13:13px;
  --f-135:13.5px;
  --f-14:14px;
  --f-15:15px;
  --f-16:16px;
  --f-17:17px;
  --f-18:18px;
  --f-22:22px;
  --f-26:26px;
  --f-h1:clamp(34px,1rem + 2.4vw,46px);
  --f-h1-mobile:clamp(24px,6.4vw,30px);
  --f-h2:clamp(26px,2.4vw,36px);
  --f-h3:22px;
  --weight-normal:400;
  --weight-medium:500;
  --weight-strong:600;
  --r-box:28px;
  --r-card:22px;
  --r-win:24px;
  --r-md:14px;
  --r-12:12px;
  --r-sm:10px;
  --r-9:9px;
  --r-8:8px;
  --r-xs:7px;
  --r-6:6px;
  --r-4:4px;
  --r-pill:999px;
  --r-round:50%;
  --shadow-xs:0 1px 2px rgba(var(--ink-rgb),.06);
  --shadow-1:0 1px 2px rgba(var(--ink-rgb),.05),0 8px 22px -12px rgba(var(--ink-rgb),.12);
  --shadow-2:0 2px 4px rgba(var(--ink-rgb),.05),0 18px 36px -16px rgba(var(--plum-rgb),.28);
  --shadow-win:0 0 0 7px var(--rim),0 2px 6px rgba(var(--ink-rgb),.05),0 18px 36px -18px rgba(var(--ink-rgb),.14),0 44px 96px -30px rgba(var(--plum-rgb),.42);
  --shadow-drawer:0 0 0 6px var(--rim),0 2px 4px rgba(var(--ink-rgb),.06),0 14px 28px -14px rgba(var(--ink-rgb),.24),0 34px 64px -18px rgba(var(--plum-rgb),.52);
  --shadow-cta:inset 0 1px 0 rgba(var(--white-rgb),.25),0 1px 2px rgba(var(--wine-rgb),.3),0 10px 22px -10px rgba(var(--magenta-rgb),.7);
  --gutter:32px;
  --content-width:1280px;
  --reading-width:800px;
  --header-height:68px;
  --ease:180ms ease;
}
*,*::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(--f-16); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
[hidden] { display:none !important }
img,svg { max-width:100%; vertical-align:middle }
img { height:auto }
button,input,select,textarea { font:inherit; color:inherit }
button,summary { cursor:pointer }
button { border:0 }
a { color:inherit; text-decoration:none }
a:hover { color:var(--accent-dark) }
:focus-visible { outline:2px solid var(--accent-dark); outline-offset:4px }
::selection { background:var(--accent-ring); color:var(--text) }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-normal); text-wrap:balance; overflow-wrap:break-word }
h1 { margin:18px 0 0; font-size:var(--f-h1); line-height:1.12; letter-spacing:-.02em }
h2 { margin:0 0 24px; font-size:var(--f-h2); line-height:1.2; letter-spacing:-.02em }
h3 { margin:0 0 14px; font-size:var(--f-h3); line-height:1.35 }
p { margin:0 0 1em }
strong,b { font-weight:var(--weight-strong) }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere; font-size:.9em }
pre { max-width:100%; min-width:0; overflow-x:auto; padding:20px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel-2); color:var(--text); font-size:var(--f-13); line-height:1.7; tab-size:2 }
pre code { overflow-wrap:normal; white-space:pre; font-size:inherit }
hr { margin:32px 0; border:0; border-top:1px solid var(--border) }
.wrap { width:100%; max-width:calc(var(--content-width) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter) }
.reading { max-width:calc(var(--reading-width) + var(--gutter) * 2); margin-inline:auto; padding-inline:var(--gutter) }
.wrap > *, .reading > *, .grid > *, .split > * { min-width:0 }
.section { padding-top:88px; padding-bottom:88px; border-bottom:1px solid var(--border) }
.decorated { position:relative; isolation:isolate; overflow-x:clip }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; align-items:center }
.stack { display:grid; gap:20px }
.nowrap { white-space:nowrap }
.h1-line { display:block }
.hl { font-style:normal; color:var(--accent) }
.muted,.meta { color:var(--muted) }
.meta { font-size:var(--f-13) }
.lead { margin:14px 0 0; max-width:33em; font-size:var(--f-16); line-height:1.7; color:var(--muted) }
.lead strong { font-weight:var(--weight-medium); color:var(--text) }
.prose { min-width:0; line-height:1.85 }
.prose h2 { margin-top:2em }
.prose h3 { margin-top:1.6em }
.prose a,.text-link { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px }
.prose li + li { margin-top:8px }
.prose :is(h2,h3,h4) { scroll-margin-top:24px }
.card,.panel { min-width:0; padding:28px; background:var(--panel); color:var(--text); border:1px solid var(--border); box-shadow:var(--shadow-1) }
.card { border-radius:var(--r-card) }
.panel { border-radius:var(--r-box) }
.cta,.button-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.cta { margin-top:22px }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:46px; padding:12px 22px; border:1px solid var(--clear); border-radius:var(--r-pill); font-family:var(--font-body); font-size:var(--f-15); font-weight:var(--weight-medium); letter-spacing:-.005em; line-height:1.3; text-align:center; transition:background-color var(--ease),border-color var(--ease),box-shadow var(--ease) }
.btn svg { flex-shrink:0; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.btn-primary { background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-cta) }
.btn-primary:hover,.btn-primary.is-hover { background:var(--accent-dark); color:var(--on-accent) }
.btn-ghost { background:var(--panel-2); color:var(--text); border-color:var(--border) }
.btn-ghost:hover,.btn-ghost.is-hover { background:var(--panel); color:var(--text); border-color:var(--border-strong) }
.btn-link { background:var(--clear); color:var(--accent-dark) }
.btn:disabled,.btn[aria-disabled="true"] { background:var(--panel-2); color:var(--muted); border-color:var(--border); box-shadow:none; cursor:not-allowed }
.is-focus { outline:2px solid var(--accent-dark); outline-offset:4px }
.site-top { position:relative; z-index:50; background:var(--panel); color:var(--text); border-bottom:1px solid var(--border) }
.header-wrap { position:relative; display:flex; align-items:center; gap:28px; width:100%; max-width:min(100%,calc(1280px + var(--gutter) * 2)); min-height:var(--header-height); margin-inline:auto; padding-inline:var(--gutter) }
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; font-size:var(--f-17); font-weight:var(--weight-medium); letter-spacing:-.01em; color:var(--text) }
.brand img { display:block; width:30px; height:30px; flex-shrink:0 }
.main-nav { margin-left:auto; min-width:0 }
.main-nav ul { display:flex; align-items:center; gap:30px; list-style:none; margin:0; padding:0 }
.main-nav a { display:block; padding:8px 0; font-size:var(--f-15); line-height:1; white-space:nowrap; color:var(--text-2); transition:color var(--ease) }
.main-nav a:hover { color:var(--text) }
.main-nav a[aria-current="page"] { color:var(--accent); font-weight:var(--weight-medium) }
.header-tools { display:flex; align-items:center; gap:10px; flex-shrink:0 }
.language-control { position:relative }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:34px; padding:6px 14px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--panel); color:var(--text-2); font-size:var(--f-14); line-height:1.4; white-space:nowrap }
.lang:hover { border-color:var(--border-strong) }
.lang-short { display:none }
.language-menu { position:absolute; top:calc(100% + 12px); right:0; z-index:4; width:190px; margin:0; padding:8px; list-style:none; border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel); color:var(--text); box-shadow:var(--shadow-2) }
.language-menu a { display:block; min-height:44px; padding:10px 12px; border-radius:var(--r-8) }
.language-menu a:hover,.language-menu a[aria-current="true"] { background:var(--panel-2); color:var(--accent-dark) }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel); color:var(--text) }
.menu-toggle svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6 }
.mobile-drawer { position:absolute; top:100%; left:0; right:0; z-index:3; max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain; padding:16px var(--gutter) 24px; border-bottom:1px solid var(--border); background:var(--panel); color:var(--text); box-shadow:var(--shadow-2) }
.mobile-drawer ul { list-style:none; margin:0; padding:0 }
.mobile-drawer a { display:block; width:100%; min-height:44px; padding:12px 8px; border-bottom:1px solid var(--border); font-size:var(--f-15) }
.mobile-drawer a[aria-current] { color:var(--accent-dark) }
.drawer-label { margin:24px 8px 8px; color:var(--muted); font-size:var(--f-13) }
.nav-veil { position:fixed; inset:var(--header-height) 0 0; z-index:40; border:0; background:var(--veil); color:var(--text) }
.preview-menu { display:none }
.site-footer { padding-top:56px; padding-bottom:28px; border-top:1px solid var(--border); background:var(--panel); color:var(--text) }
.footer-grid { display:grid; grid-template-columns:1.2fr .8fr 1.3fr .7fr; gap:40px }
.footer-grid > * { min-width:0 }
.footer-about p { margin:18px 0 0; max-width:27em; color:var(--muted); font-size:var(--f-14) }
.footer-title { margin:0 0 16px; font-size:var(--f-14); font-weight:var(--weight-medium) }
.footer-links { display:grid; gap:10px; margin:0; padding:0; list-style:none; font-size:var(--f-14); color:var(--muted) }
.footer-links a { display:inline-block; padding-top:3px; padding-bottom:3px }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:40px; padding-top:24px; border-top:1px solid var(--border); font-size:var(--f-13); color:var(--muted) }
.reveal { opacity:1; transform:none }
.reveal.reveal-ready { opacity:0; transform:translateY(12px); transition:opacity 500ms ease,transform 500ms ease }
.reveal.shown { opacity:1; transform:none }
@media (max-width:1100px) {
  .main-nav { display:none }
  .header-tools { margin-left:auto }
  .menu-toggle { display:inline-flex }
  .preview-menu { display:block }
  .preview-menu > summary { display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; list-style:none; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel); color:var(--text) }
  .preview-menu > summary::-webkit-details-marker { display:none }
}
@media (min-width:1101px) {
  .mobile-drawer,.nav-veil { display:none !important }
}
@media (max-width:900px) {
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .split { grid-template-columns:minmax(0,1fr); gap:28px }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:768px) {
  h1 { font-size:var(--f-h1-mobile) }
  .section { padding-top:56px; padding-bottom:56px }
}
@media (max-width:640px) {
  :root { --gutter:16px }
  .grid { grid-template-columns:minmax(0,1fr) }
  .header-wrap { gap:10px }
  .header-tools { margin-left:auto; gap:6px }
  .lang-full { display:none }
  .lang-short { display:inline }
  .brand { font-size:var(--f-15) }
  .lang { padding-inline:12px }
  .footer-grid { grid-template-columns:minmax(0,1fr); gap:28px }
  .card,.panel { padding:22px }
  .tilt,.rig,[data-tilt] { transform:none !important }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition:none !important; animation:none !important }
  .reveal.reveal-ready { opacity:1; transform:none }
}