:root {
  color-scheme: dark;
  --bg:#3A57FB;
  --panel:#243CC9;
  --panel-alt:#1D32AA;
  --border:#8294FF;
  --blue:#D9E0FF;
  --blue-dark:#FFFFFF;
  --orange:#FFB15C;
  --orange-dark:#FFD19C;
  --blue-tint:#5069F5;
  --orange-tint:#704C55;
  --ink:#FFFFFF;
  --muted:#E1E6FF;
  --success:#8FF0BD;
  --warn:#FFE08A;
  --error:#FFABB8;
  --slab-top:#314BE0;
  --slab-bottom:#253BC1;
  --slab-edge:#91A1FF;
  --glow-blue:rgba(12,24,105,.28);
  --glow-orange:rgba(255,177,92,.18);
  --shadow-blue:rgba(10,20,88,.28);
  --shadow-deep:rgba(8,16,70,.22);
  --veil:rgba(8,14,56,.62);
  --clear:transparent;
  --flag-red:#DE2939;
  --flag-white:#FFFFFF;
  --flag-blue:#244275;
  --flag-nl:#21468B;
  --font:'Inter','Noto Sans SC','Noto Sans JP','Noto Sans KR',system-ui,sans-serif;
  --font-display:var(--font);
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --r-sm:6px;
  --r-md:8px;
  --r-round:50%;
  --text-tiny:10px;
  --text-mini:11px;
  --text-xs:12px;
  --text-sm:13px;
  --text-md:14px;
  --text-base:16px;
  --text-lg:18px;
  --text-xl:20px;
  --text-2xl:24px;
  --text-h3:22px;
  --text-h2:32px;
  --display:64px;
  --display-mobile:36px;
  --weight-normal:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-heavy:900;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:32px;
  --space-5:40px;
  --space-6:48px;
  --space-7:56px;
  --space-8:64px;
  --space-10:80px;
  --gutter:48px;
  --content-max:1376px;
  --header-height:88px;
  --anchor-offset:104px;
  --toc-offset:80px;
  --shadow-card:0 24px 56px var(--shadow-blue),0 4px 12px var(--shadow-deep);
  --shadow-panel:0 8px 20px var(--shadow-deep);
  --focus-ring:3px solid var(--blue);
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --transition-fast:160ms;
  --transition-reveal:480ms;
}
* { box-sizing:border-box }
html { scroll-padding-top:var(--anchor-offset); -webkit-text-size-adjust:100% }
html.nav-open { overflow:hidden }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:var(--text-base); line-height:1.65; -webkit-font-smoothing:antialiased }
main,section,article,aside,nav,header,footer,div { min-width:0 }
img { max-width:100%; height:auto }
svg { width:20px; height:20px; flex-shrink:0; vertical-align:middle }
a { color:inherit; text-decoration:none }
a:hover { color:var(--blue-dark) }
button,input,select,textarea { font:inherit; color:inherit }
button { cursor:pointer }
button,a,summary { -webkit-tap-highlight-color:var(--blue-tint) }
button { border:1px solid var(--border); background:var(--panel); border-radius:var(--r-sm) }
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible { outline:var(--focus-ring); outline-offset:4px }
[hidden] { display:none!important }
h1,h2,h3,h4,p { margin-top:0 }
h1,h2,h3 { font-family:var(--font-display); overflow-wrap:break-word }
h1 { font-size:var(--display); font-weight:var(--weight-heavy); line-height:1.18; letter-spacing:-.02em; margin-bottom:32px }
h2 { font-size:var(--text-h2); font-weight:var(--weight-bold); line-height:1.3; letter-spacing:-.02em; margin-bottom:24px }
h3 { font-size:var(--text-h3); font-weight:var(--weight-bold); line-height:1.4; margin-bottom:16px }
p { margin-bottom:20px }
ul,ol { padding-left:24px }
strong,b { font-weight:var(--weight-bold) }
small { font-size:var(--text-xs) }
code { font-family:var(--mono); font-size:.9em; overflow-wrap:anywhere; background:var(--panel-alt); border-radius:var(--r-sm); padding:2px 5px }
pre { max-width:100%; overflow-x:auto; padding:24px; background:var(--panel-alt); border:1px solid var(--border); border-radius:var(--r-md); tab-size:2 }
pre code { padding:0; background:var(--clear); white-space:pre; overflow-wrap:normal }
hr { border:0; border-top:1px solid var(--border); margin-block:32px }
::selection { color:var(--blue-dark); background:var(--blue-tint) }
.no-break { white-space:nowrap }
.shell,.wrap { width:100%; max-width:var(--content-max); padding-inline:var(--gutter); margin-inline:auto }
.section { padding-top:var(--space-8); padding-bottom:var(--space-8) }
.stack > * + * { margin-top:var(--space-3) }
.muted { color:var(--muted) }
.mono { font-family:var(--mono); font-variant-numeric:tabular-nums }
.text-link { color:var(--blue-dark); text-decoration:underline; text-underline-offset:4px }
.symbol-bank { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none }
.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:fixed; top:8px; left:16px; z-index:100; padding:12px 16px; background:var(--panel); color:var(--blue-dark); border-radius:var(--r-sm); transform:translateY(-200%) }
.skip-link:focus { transform:none }
.panel,.card { min-width:0; border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel); padding:var(--space-3); box-shadow:var(--shadow-panel) }
.panel-alt { background:var(--panel-alt); box-shadow:none }
.actions { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:24px }
.button { display:inline-flex; align-items:center; justify-content:center; gap:26px; min-height:56px; min-width:24px; padding:12px 28px; border:1px solid var(--border); border-radius:var(--r-sm); font-size:var(--text-base); font-weight:var(--weight-bold); line-height:1.4; background:var(--panel); text-align:center }
.button-primary { background:var(--orange); border-color:var(--orange); color:var(--panel); box-shadow:0 4px 0 var(--orange-dark),0 10px 24px var(--glow-orange) }
.button-primary:hover,.button-primary.is-hover { background:var(--orange-dark); border-color:var(--orange-dark); color:var(--panel) }
.button-primary:active,.button-primary.is-active { background:var(--orange-dark); color:var(--panel); box-shadow:0 2px 0 var(--orange-dark) }
.button-secondary:hover,.button-secondary.is-hover { border-color:var(--blue); color:var(--blue-dark) }
.button-small { min-height:44px; padding:10px 16px; gap:10px; font-size:var(--text-sm) }
.button:disabled,.button[aria-disabled=true] { color:var(--muted); background:var(--panel-alt); border-color:var(--border); box-shadow:none; cursor:not-allowed }
.button.is-focus { outline:var(--focus-ring); outline-offset:4px }
.masthead { position:relative; z-index:20; border-bottom:1px solid var(--border); background:var(--bg) }
.masthead-inner { width:100%; max-width:1408px; padding-inline:32px; min-height:var(--header-height); margin:auto; display:flex; align-items:center; gap:32px }
.brand { display:inline-flex; align-items:center; gap:10px; flex-shrink:0; font-size:var(--text-2xl); font-weight:var(--weight-heavy); letter-spacing:-.035em; line-height:1.2 }
.brand img { width:36px; height:36px; flex-shrink:0 }
.brand-local { color:var(--muted); font-weight:var(--weight-medium) }
.main-nav { display:flex; align-items:center; justify-content:center; gap:22px; flex:1 }
.main-nav a { display:flex; align-items:center; gap:6px; white-space:nowrap; font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--muted); min-height:44px; position:relative }
.main-nav svg { width:16px; height:16px }
.main-nav a[aria-current=page] { color:var(--blue-dark); font-weight:var(--weight-bold) }
.main-nav a[aria-current=page]::after { content:''; position:absolute; bottom:-22px; left:0; right:0; height:3px; background:var(--blue) }
.main-nav a:hover { color:var(--blue) }
.header-tools { display:flex; align-items:center; gap:20px; flex-shrink:0; margin-left:auto }
.language { position:relative; font-size:var(--text-sm); color:var(--muted) }
.language-toggle { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:44px; padding:6px 0; background:var(--clear); border:0; white-space:nowrap }
.language-toggle svg { width:14px; height:14px }
.language-list { position:absolute; right:0; top:calc(100% + 8px); min-width:180px; margin:0; padding:8px; list-style:none; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-card); z-index:25 }
.language-list a { display:flex; align-items:center; min-height:44px; padding:8px 12px; border-radius:var(--r-sm) }
.language-list a:hover,.language-list a[aria-current=true] { color:var(--blue-dark); background:var(--blue-tint) }
.login { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--border); background:var(--panel); border-radius:var(--r-sm); padding:11px 21px; font-size:var(--text-md); font-weight:var(--weight-semibold); line-height:1.4; white-space:nowrap }
.login:hover { border-color:var(--blue); color:var(--blue) }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:10px }
.mobile-drawer { display:none }
.nav-veil { position:fixed; inset:var(--header-height) 0 0; background:var(--veil); z-index:1; border:0; border-radius:0 }
.static-menu { display:none }
.site-footer { background:linear-gradient(180deg,var(--panel),var(--slab-top)); border-top:1px solid var(--border); padding-top:48px; padding-bottom:32px }
.footer-grid { display:grid; grid-template-columns:1.3fr 1fr 1.25fr .8fr; gap:40px }
.footer-brand p { margin-top:20px; max-width:300px; color:var(--muted); font-size:var(--text-md) }
.footer-heading { margin-bottom:16px; font-size:var(--text-md); font-weight:var(--weight-bold) }
.footer-links { list-style:none; padding:0; margin:0; display:grid; gap:6px }
.footer-links a { display:inline-flex; align-items:center; min-height:32px; padding-block:3px; font-size:var(--text-sm); color:var(--muted) }
.footer-links a:hover { color:var(--blue-dark); text-decoration:underline; text-underline-offset:4px }
.footer-bottom { margin-top:32px; border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-size:var(--text-xs); color:var(--muted) }
.footer-legal { display:flex; flex-wrap:wrap; gap:20px }
.footer-legal a { display:inline-flex; align-items:center; min-height:24px }
.prose { max-width:880px; overflow-wrap:break-word }
.prose p,.prose li { line-height:1.9 }
.prose h2 { margin-top:48px }
.prose h3 { margin-top:32px }
.prose a:not(.button) { color:var(--blue-dark); text-decoration:underline; text-underline-offset:4px }
.prose img { display:block; height:auto }
.reveal { transition:opacity var(--transition-reveal) var(--ease-out),transform var(--transition-reveal) var(--ease-out) }
.reveal.pending { opacity:0; transform:translateY(16px) }
.reveal.shown { opacity:1; transform:none }
#server-status { position:relative; display:block; min-width:0; max-width:100%; min-height:64px; overflow:hidden; margin-block:24px }
#server-status + * { margin-top:24px }
#server-status > * { min-width:0; max-width:100% }
.decoration-zone { position:relative; overflow-x:clip; max-width:100% }
@media (max-width:1250px) {
  :root { --gutter:32px }
  .masthead-inner { gap:20px }
  .main-nav { gap:14px }
  .main-nav a { font-size:var(--text-xs) }
  .header-tools { gap:12px }
}
@media (max-width:1100px) {
  :root { --header-height:80px; --anchor-offset:96px }
  .masthead-inner { gap:16px }
  .main-nav { display:none }
  .header-tools { margin-left:auto }
  .menu-toggle { display:inline-flex }
  .mobile-drawer:not([hidden]) { position:absolute; top:100%; left:0; right:0; z-index:3; display:block; padding:16px var(--gutter) 24px; max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain; background:var(--panel); border-bottom:1px solid var(--border); box-shadow:var(--shadow-card) }
  .mobile-drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:12px 16px; gap:12px; border-radius:var(--r-sm); color:var(--ink); font-size:var(--text-md) }
  .mobile-drawer a:hover,.mobile-drawer a[aria-current=page] { background:var(--blue-tint); color:var(--blue-dark) }
  .drawer-languages { border-top:1px solid var(--border); margin-top:16px; padding-top:16px }
  .drawer-label { margin:0 16px 8px; font-size:var(--text-xs); color:var(--muted) }
  .static-menu { display:block }
  .static-menu summary { display:flex; align-items:center; min-height:44px; min-width:44px; padding:10px; cursor:pointer; border:1px solid var(--border); border-radius:var(--r-sm) }
  .static-menu nav { position:absolute; top:100%; left:0; right:0; background:var(--panel); border-bottom:1px solid var(--border); padding:16px; max-height:calc(100dvh - var(--header-height)); overflow:auto }
  .static-menu nav a { display:flex; align-items:center; width:100%; min-height:44px; padding:10px 16px; gap:12px }
  .footer-grid { grid-template-columns:1fr 1fr }
}
@media (max-width:768px) {
  h1 { font-size:var(--display-mobile); line-height:1.25 }
  h2 { font-size:28px }
  .section { padding-top:48px; padding-bottom:48px }
}
@media (max-width:640px) {
  :root { --gutter:20px; --header-height:72px; --anchor-offset:88px; --text-h2:28px }
  .no-break { white-space:normal }
  .masthead-inner { padding-inline:16px; gap:8px }
  .brand { font-size:21px; gap:7px }
  .brand img { width:32px; height:32px }
  .header-tools { margin-left:auto; gap:6px }
  .language { font-size:var(--text-mini) }
  .language-toggle { gap:2px }
  .login { padding:9px 14px; font-size:var(--text-xs) }
  .menu-toggle { padding:10px }
  .actions { gap:12px }
  .button { padding:12px 22px; min-height:50px; font-size:var(--text-md); gap:18px }
  .button-small { min-height:44px; padding:10px 14px; font-size:var(--text-xs) }
  .footer-grid { gap:32px 24px }
  .footer-brand { grid-column:1/-1 }
  .footer-bottom { display:block }
  .footer-legal { margin-top:16px; gap:16px }
  .panel,.card { padding:20px }
  .tilt { transform:none!important }
  .decoration-zone { max-width:100% }
  pre { padding:16px }
}
@media (max-width:360px) {
  .brand { font-size:var(--text-lg) }
  .brand img { width:28px; height:28px }
  .language-toggle { font-size:var(--text-tiny) }
  .language-toggle svg { display:none }
  .login { padding-inline:10px }
  .footer-grid { grid-template-columns:1fr }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  .reveal,.reveal.pending,.reveal.shown { opacity:1; transform:none; transition:none }
}