:root {
  color-scheme: light;
  --bg: #FAF3E8;
  --bg-panel: #FFFCF6;
  --bg-panel-2: #F2E8D8;
  --border: #E6D8C4;
  --border-soft: rgba(230,216,196,.72);
  --accent: #C13B6B;
  --accent-dark: #8F2550;
  --accent-tint: rgba(193,59,107,.07);
  --accent-tint-2: rgba(193,59,107,.16);
  --text: #2A1E17;
  --text-muted: #6E5D50;
  --text-faint: rgba(110,93,80,.72);
  --success: #2F8F5B;
  --success-tint: rgba(47,143,91,.12);
  --warn: #C98A14;
  --error: #B4321F;
  --on-accent: #FFFCF6;
  --hero-top: #FDF8EF;
  --hero-bottom: #F4EADB;
  --glass-paper: rgba(253,248,239,.84);
  --glass-strip: rgba(250,243,232,.82);
  --hi: rgba(255,255,255,.92);
  --veil: rgba(42,30,23,.24);
  --ribbon-orange: #F39A3D;
  --ribbon-pink: #EE6A9A;
  --ribbon-purple: #9A72F0;
  --rb-sheen: rgba(255,248,236,.42);
  --rb-shade: rgba(120,72,200,.22);
  --silk: rgba(255,250,240,.58);
  --silk-soft: rgba(255,250,240,.16);
  --mask-on: #000;
  --blob-orange: rgba(243,154,61,.55);
  --blob-pink: rgba(238,106,154,.5);
  --blob-purple: rgba(154,114,240,.48);
  --flag-white: #FFFFFF;
  --flag-red-hk: #DE2910;
  --flag-red-jp: #BC002D;
  --flag-red-sg: #E5323E;
  --flag-red-us: #B22234;
  --flag-blue-us: #3C3B6E;
  --flag-black: #211B17;
  --flag-red-de: #D80E0E;
  --flag-gold: #F7C600;
  --flag-blue-fr: #0055A4;
  --flag-red-fr: #EF4135;
  --flag-edge: rgba(42,30,23,.14);
  --shadow-panel: 0 1px 2px rgba(42,30,23,.05),0 22px 54px -22px rgba(193,59,107,.16);
  --shadow-win: 0 2px 6px rgba(42,30,23,.05),0 14px 30px -14px rgba(42,30,23,.12),0 44px 96px -26px rgba(193,59,107,.12);
  --shadow-btn: 0 1px 0 rgba(255,255,255,.18) inset,0 10px 24px -10px rgba(193,59,107,.42);
  --shadow-hover: 0 28px 64px -24px rgba(193,59,107,.22);
  --shadow-segment: 0 1px 2px rgba(42,30,23,.08);
  --radius-xs: 5px;
  --radius-sm: 7px;
  --radius: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --font-display: "Inter","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --font-body: "Inter","Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono: "JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-brand: 600;
  --text-base: 16px;
  --text-small: 14px;
  --text-caption: 12px;
  --text-lead: 20px;
  --title-size: clamp(52px,4.45vw,64px);
  --section-size: clamp(28px,3vw,36px);
  --tracking-title: -.02em;
  --grain-opacity: .03;
  --header-h: 72px;
  --strip-h: 88px;
  --gutter: 40px;
  --wrap-width: 1280px;
  --toc-offset: 148px;
  --ease-fast: .2s ease;
  --reveal-time: .35s;
}
*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px) }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:var(--text-base); line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased }
html.nav-open { overflow:hidden }
[hidden] { display:none!important }
a { color:inherit; text-decoration:none }
button,input,select,textarea { font:inherit; color:inherit }
button,summary { cursor:pointer }
button { border:0 }
img { display:block; max-width:100%; height:auto }
svg { flex-shrink:0 }
h1,h2,h3,h4,p { margin:0 }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-normal); overflow-wrap:break-word }
h1 { font-size:var(--title-size); line-height:1.12; letter-spacing:var(--tracking-title) }
h2 { font-size:var(--section-size); line-height:1.3; letter-spacing:var(--tracking-title); text-wrap:balance }
h3 { font-size:24px; line-height:1.4 }
ul,ol { padding-left:1.4em }
ul { margin:0 }
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible { outline:2px solid var(--accent); outline-offset:3px }
::selection { color:var(--accent-dark); background:var(--accent-tint-2) }
.wrap { width:100%; max-width:var(--wrap-width); margin-inline:auto; padding-inline:var(--gutter) }
.wrap > *, :where(.grid,.hero-grid,.footer-grid) > * { min-width:0 }
.section { padding-top:88px; padding-bottom:96px }
.section-head { max-width:880px; margin-bottom:32px }
.section-head p { margin-top:16px; color:var(--text-muted); font-size:var(--text-lead) }
.stack > * + * { margin-top:24px }
.grid { display:grid; gap:24px }
.grid-three { grid-template-columns:repeat(3,minmax(0,1fr)) }
.no-break { white-space:nowrap }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums }
.muted { color:var(--text-muted) }
.t-ink { color:var(--text) }
.t-accent { color:var(--accent) }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0 }
.sprite { position:absolute; width:0; height:0; overflow:hidden }
.icon { width:20px; height:20px; display:block }
.no-list { list-style:none; margin:0; padding:0 }
code { font-family:var(--font-mono); font-size:.9em; overflow-wrap:anywhere; color:var(--accent-dark) }
pre { max-width:100%; overflow-x:auto; padding:24px; background:var(--bg-panel-2); border:1px solid var(--border); border-radius:var(--radius) }
pre code { overflow-wrap:normal; color:var(--text) }
.prose { max-width:820px; overflow-wrap:anywhere }
.prose > * + * { margin-top:24px }
.prose h2 { margin-top:48px }
.prose h3 { margin-top:32px }
.prose a:not(.btn) { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px }
.prose li + li { margin-top:8px }
.panel,.card { background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-panel),inset 0 1px 0 var(--hi); padding:28px; min-width:0 }
.decor-section { position:relative; overflow-x:clip }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 24px; border:1px solid transparent; border-radius:var(--radius); font-size:var(--text-base); font-weight:var(--weight-medium); line-height:1.5; flex-shrink:0; white-space:nowrap; transition:background-color var(--ease-fast),border-color var(--ease-fast),box-shadow var(--ease-fast),transform var(--ease-fast) }
.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); transform:translateY(-1px) }
.btn-primary:active { transform:translateY(0) }
.btn-ghost,.btn-secondary { background:var(--bg-panel); color:var(--text); border-color:var(--border); box-shadow:inset 0 1px 0 var(--hi) }
.btn-ghost:hover,.btn-secondary:hover { border-color:var(--accent-tint-2); color:var(--accent-dark) }
.btn svg { width:16px; height:16px; display:block; color:var(--accent) }
.btn-primary svg { color:var(--on-accent) }
.btn .arrow { font-size:20px; line-height:1; transform:translateY(-1px) }
.btn:disabled,.btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; transform:none }
.btn-small { min-height:44px; padding:9px 16px; font-size:var(--text-small) }
.cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }

/* Header chrome and drawers are separate stacking contexts. */
#site-header { position:relative; z-index:50; min-height:var(--header-h) }
.site-header { position:relative; z-index:50; height:var(--header-h); background:var(--glass-paper); -webkit-backdrop-filter:blur(16px) saturate(1.15); backdrop-filter:blur(16px) saturate(1.15); border-bottom:1px solid var(--border-soft) }
.header-row { height:100%; display:flex; align-items:center; flex-wrap:nowrap; gap:40px }
.brand { display:flex; align-items:center; gap:10px; flex-shrink:0; min-height:44px }
.brand-mark { width:32px; height:32px; display:block }
.brand-en { font-family:var(--font-display); font-weight:var(--weight-brand); font-size:19px; letter-spacing:-.01em; color:var(--text) }
.desktop-nav { flex:1; min-width:0 }
.nav-links { display:flex; align-items:center; list-style:none; margin:0; padding:0; gap:6px; font-size:15px; font-weight:var(--weight-medium) }
.nav-links > li { min-width:0 }
.nav-links > li > a,.nav-more > summary { display:flex; align-items:center; gap:6px; min-height:40px; padding:0 12px; border-radius:var(--radius); white-space:nowrap; color:var(--text); transition:background-color var(--ease-fast),color var(--ease-fast) }
.nav-links a:hover,.nav-more > summary:hover { background:var(--accent-tint); color:var(--accent-dark) }
.nav-links a[aria-current="page"] { color:var(--accent-dark) }
.nav-links > li > a[aria-current="page"]::after { content:""; width:4px; height:4px; border-radius:var(--radius-round); background:var(--accent); margin-left:2px; flex-shrink:0 }
.nav-more { position:relative }
.nav-more > summary { list-style:none }
.nav-more > summary::-webkit-details-marker { display:none }
.chev { width:10px; height:10px; display:block; transition:transform var(--ease-fast) }
.nav-more[open] .chev { transform:rotate(180deg) }
.more-panel { position:absolute; z-index:54; top:48px; left:-8px; width:340px; display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:14px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-panel) }
.more-group h3 { margin:0 0 6px; padding:0 10px; font-size:var(--text-caption); font-weight:var(--weight-medium); color:var(--text-muted); letter-spacing:.02em }
.more-group a { display:block; padding:7px 10px; border-radius:var(--radius-sm); font-size:var(--text-small); font-weight:var(--weight-normal) }
.header-tools { margin-left:auto; display:flex; align-items:center; flex-shrink:0; gap:12px }
.language-picker { position:relative }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; width:auto; padding:0 12px; border:0; background:transparent; border-radius:var(--radius); font-size:var(--text-small); color:var(--text-muted); white-space:nowrap }
.lang:hover { background:var(--accent-tint); color:var(--accent-dark) }
.lang svg { width:16px; height:16px; display:block }
.lang-name { white-space:nowrap }
.language-panel { position:absolute; right:0; top:48px; z-index:56; width:180px; padding:8px; background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-panel) }
.language-panel a { display:flex; align-items:center; width:100%; min-height:44px; padding:8px 12px; border-radius:var(--radius-sm) }
.language-panel a:hover,.language-panel a[aria-current] { background:var(--accent-tint); color:var(--accent-dark) }
.btn-login { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 18px; flex-shrink:0; white-space:nowrap; border-radius:var(--radius); background:var(--bg-panel); border:1px solid var(--border); color:var(--accent); font-size:15px; font-weight:var(--weight-medium); box-shadow:inset 0 1px 0 var(--hi) }
.btn-login:hover { border-color:var(--accent-tint-2); color:var(--accent-dark) }
.menu-toggle { display:none; align-items:center; justify-content:center; flex-direction:column; gap:4px; min-width:44px; min-height:44px; border-radius:var(--radius); border:1px solid var(--border); background:var(--bg-panel) }
.menu-line { display:block; width:20px; height:2px; background:currentColor }
.nav-veil { position:fixed; z-index:40; inset:var(--header-h) 0 0; background:var(--veil) }
.mobile-drawer { position:fixed; z-index:45; top:var(--header-h); right:0; width:min(100%,420px); height:calc(100dvh - var(--header-h)); max-height:calc(100dvh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain; padding:16px 20px 32px; background:var(--bg-panel); border-left:1px solid var(--border); box-shadow:var(--shadow-panel) }
.mobile-drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:10px 12px; border-radius:var(--radius-sm) }
.mobile-drawer a:hover,.mobile-drawer a[aria-current] { background:var(--accent-tint); color:var(--accent-dark) }
.drawer-languages { margin-top:16px; padding-top:16px; border-top:1px solid var(--border) }

/* Footer */
.site-footer { padding-top:56px; padding-bottom:24px; background:var(--bg-panel-2); border-top:1px solid var(--border); box-shadow:inset 0 1px 0 var(--hi) }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:40px }
.footer-brand p { margin-top:16px; max-width:320px; color:var(--text-muted); font-size:var(--text-small) }
.footer-column h2 { font-size:var(--text-small); font-weight:var(--weight-medium); margin-bottom:12px }
.footer-column ul { list-style:none; padding:0; margin:0 }
.footer-column a { display:inline-flex; align-items:center; min-height:32px; padding-block:4px; color:var(--text-muted); font-size:var(--text-small) }
.footer-column a:hover,.footer-bottom a:hover { color:var(--accent-dark); text-decoration:underline; text-underline-offset:3px }
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:40px; padding-top:20px; border-top:1px solid var(--border); color:var(--text-muted); font-size:var(--text-caption) }
.footer-legal { display:flex; flex-wrap:wrap; gap:20px }
.footer-legal a { display:inline-flex; align-items:center; min-height:24px }

/* Progressive enhancement only. */
.reveal { transition:opacity var(--reveal-time) ease,transform var(--reveal-time) ease }
.reveal.pending { opacity:0; transform:translateY(16px) }
.reveal.shown { opacity:1; transform:none }
#server-status { position:relative; display:block; min-height:120px; max-width:100%; overflow:hidden; margin-top:24px; margin-bottom:24px }
#server-status + * { margin-top:32px }
@media (max-width:1199px) {
  :root { --gutter:32px; --title-size:56px }
  .header-row { gap:24px }
  .nav-links > li > a,.nav-more > summary { padding-inline:9px }
}
@media (max-width:1080px) {
  .desktop-nav { display:none }
  .header-tools { margin-left:auto; gap:8px }
  .menu-toggle { display:flex }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (min-width:1081px) {
  .mobile-drawer,.nav-veil { display:none!important }
}
@media (max-width:768px) {
  :root { --gutter:20px; --title-size:40px }
  .section { padding-top:56px; padding-bottom:64px }
  .grid-three { grid-template-columns:1fr }
  .header-row { gap:12px }
  .header-tools { margin-left:auto; gap:6px }
  .lang { padding-inline:8px }
}
@media (max-width:640px) {
  .no-break { white-space:normal }
  .tilt,.decor-tilt { transform:none }
  .decor-section > :where(.halo,.stripe-halo) { max-width:100%; inset-inline:0 }
  .footer-grid { grid-template-columns:1fr 1fr; gap:28px 20px }
  .footer-brand { grid-column:1 / -1 }
  .panel,.card { padding:20px }
  .lang-name { display:none }
  .brand { gap:7px }
  .brand-en { font-size:17px }
  .brand-mark { width:28px; height:28px }
  .btn-login { padding-inline:12px; font-size:var(--text-small) }
  .header-row { gap:8px }
}
@media (max-width:360px) {
  :root { --gutter:16px }
  .header-tools { gap:4px }
  .lang { padding-inline:6px }
  .btn-login { padding-inline:10px }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .reveal,.reveal.pending { opacity:1; transform:none; transition:none }
  .btn,.chev { transition:none }
  .btn-primary:hover { transform:none }
}