:root {
  --bg:#F7F0E5;
  --bg-top:#FBF7EF;
  --bg-bottom:#F1E7D6;
  --panel:#FFFBF4;
  --panel-2:#EFE5D4;
  --border:#E2D5C1;
  --accent:#A23A2A;
  --accent-deep:#8A3022;
  --accent-dark:#7C2A1F;
  --accent-wash:rgba(162,58,42,.09);
  --accent-mist:rgba(162,58,42,.06);
  --text:#2A1F17;
  --text-deep:#1B130D;
  --muted:#6E5F51;
  --link:#2F5FA8;
  --notice:#E9EEF3;
  --success:#2F7D4E;
  --warn:#B7791F;
  --error:#C0262D;
  --success-halo:rgba(47,125,78,.2);
  --on-accent:#FFFBF4;
  --on-accent-soft:rgba(255,251,244,.82);
  --on-accent-faint:rgba(255,251,244,.6);
  --glass:rgba(255,251,244,.14);
  --glass-strong:rgba(255,251,244,.24);
  --glass-line:rgba(255,251,244,.32);
  --glass-hi:rgba(255,251,244,.6);
  --glass-paper:rgba(255,251,244,.74);
  --panel-hi:rgba(255,251,244,.42);
  --panel-glow:rgba(255,251,244,.13);
  --panel-veil:rgba(124,42,31,.55);
  --shadow-brick:rgba(162,58,42,.12);
  --shadow-brick-2:rgba(162,58,42,.18);
  --shadow-deep:rgba(58,18,10,.34);
  --hairline:rgba(42,31,23,.1);
  --btn-edge:rgba(42,31,23,.62);
  --grain:#3A2A1E;
  --flag-red:#C3352B;
  --flag-blue:#2C4F8F;
  --flag-white:#FFFDF8;
  --flag-green:#2F7A4C;
  --flag-edge:rgba(42,31,23,.16);
  --clear:transparent;
  --font-display:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans','Microsoft YaHei','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --font-body:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans','Yu Gothic','Microsoft YaHei','Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --fs-micro:10.5px;
  --fs-tiny:11px;
  --fs-caption:12px;
  --fs-label:13px;
  --fs-small:14px;
  --fs-nav:15px;
  --fs-body:16px;
  --fs-mid:17px;
  --fs-brand:18px;
  --fs-lede:20px;
  --fs-panel:22px;
  --fs-h3:24px;
  --fs-h2:clamp(28px,3.1vw,40px);
  --fs-h1:clamp(52px,5vw,64px);
  --fs-price:40px;
  --weight-normal:400;
  --weight-medium:500;
  --weight-strong:600;
  --r-btn:8px;
  --r-sm:6px;
  --r-card:16px;
  --r-panel:28px;
  --r-tag:12px;
  --r-pill:999px;
  --r-round:50%;
  --r-flag:3px;
  --r-mini:2px;
  --r-dot:1px;
  --gutter:40px;
  --page-width:1280px;
  --reading-width:800px;
  --header-height:96px;
  --anchor-offset:112px;
  --toc-offset:88px;
  --space-section:88px;
  --ease:ease;
  --duration:.2s;
  --shadow-card:0 18px 44px -26px var(--shadow-brick);
  --brick-surface:radial-gradient(70% 90% at 0% 0%,var(--panel-glow),var(--clear) 60%),radial-gradient(80% 70% at 100% 100%,var(--panel-veil),var(--clear) 65%),linear-gradient(168deg,var(--accent) 0%,var(--accent-deep) 100%);
}
*,*::before,*::after { box-sizing:border-box }
html { color-scheme:light; background:var(--bg); scroll-padding-top:var(--anchor-offset); scroll-behavior:smooth }
body { margin:0; font-family:var(--font-body); font-size:var(--fs-body); line-height:1.7; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
[hidden] { display:none !important }
img { max-width:100%; height:auto }
svg { flex-shrink:0 }
button,input,select,textarea { font:inherit }
button { cursor:pointer }
a { color:var(--link); text-underline-offset:3px }
:focus-visible { outline:2px solid var(--link); outline-offset:3px }
button:disabled,.btn[aria-disabled="true"] { cursor:not-allowed; opacity:.55 }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:var(--weight-normal); color:var(--text); text-wrap:balance; overflow-wrap:break-word }
h1 { font-size:var(--fs-h1); line-height:1.12; letter-spacing:-.02em }
h2 { font-size:var(--fs-h2); line-height:1.25; letter-spacing:-.02em; margin:0 0 24px }
h3 { font-size:var(--fs-h3); line-height:1.4; margin:0 0 16px }
p { margin:0 0 20px }
strong,b { font-weight:var(--weight-strong) }
code,kbd,pre { font-family:var(--font-mono) }
code { overflow-wrap:anywhere; font-size:.9em }
pre { overflow-x:auto; max-width:100%; padding:20px; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-btn) }
pre code { overflow-wrap:normal; white-space:pre }
table { border-collapse:collapse }
th,td { text-align:left }
.no-break { white-space:nowrap }
.wrap { width:100%; max-width:var(--page-width); margin-inline:auto; padding-inline:var(--gutter) }
.reading-wrap { width:100%; max-width:var(--reading-width); margin-inline:auto; padding-inline:var(--gutter) }
.section { padding-top:var(--space-section); padding-bottom:var(--space-section) }
.section-head { max-width:760px; margin-bottom:40px }
.kicker { display:block; margin-bottom:16px; color:var(--accent); font-family:var(--font-mono); font-size:var(--fs-label); letter-spacing:.08em }
.muted { color:var(--muted) }
.accent { color:var(--accent) }
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums }
.grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px }
.grid > *, .wrap > *, .reading-wrap > *, .prose > * { min-width:0 }
.card,.panel { background:var(--panel); border:1px solid var(--border); box-shadow:var(--shadow-card),inset 0 1px 0 var(--panel-hi) }
.card { padding:28px; border-radius:var(--r-card) }
.panel { padding:40px; border-radius:var(--r-panel) }
.panel-sunken { background:var(--panel-2) }
.decor-region { position:relative; overflow-x:clip }
.paper-decor { position:absolute; inset:12% 8% 18%; pointer-events:none; border-radius:var(--r-panel); background:radial-gradient(ellipse,var(--accent-mist),var(--clear) 70%) }
.sprite { position:absolute; width:0; height:0; overflow:hidden }
.btn { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; gap:8px; min-height:46px; padding:0 24px; border-radius:var(--r-btn); font-family:var(--font-body); font-size:var(--fs-body); font-weight:var(--weight-medium); line-height:1.2; text-decoration:none; white-space:nowrap; transition:background-color var(--duration) var(--ease),border-color var(--duration) var(--ease),box-shadow var(--duration) var(--ease) }
.btn-solid,.btn-primary { background:var(--text); color:var(--panel); border:1px solid var(--text); box-shadow:0 10px 22px -14px var(--shadow-deep) }
.btn-solid:hover,.btn-primary:hover,.btn-solid.is-hover { background:var(--text-deep); border-color:var(--text-deep) }
.btn-line,.btn-secondary { background:var(--panel); color:var(--text); border:1px solid var(--btn-edge) }
.btn-line:hover,.btn-secondary:hover { border-color:var(--text) }
.btn-sm { min-height:38px; padding-inline:16px; font-size:var(--fs-small) }
.btn-paper { background:var(--panel); color:var(--text); border:1px solid var(--panel); box-shadow:0 8px 18px -10px var(--shadow-deep) }
.btn-paper:hover { background:var(--bg-top) }
.btn.is-focus { outline:2px solid var(--link); outline-offset:3px }
.notice { height:36px; display:flex; align-items:center; justify-content:center; background:var(--notice); color:var(--text); font-size:var(--fs-small); line-height:20px }
.notice-inner { display:flex; align-items:center; gap:12px; max-width:100%; padding-inline:20px; min-width:0 }
.notice-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
.notice a { display:inline-flex; align-items:center; gap:4px; color:var(--link); font-weight:var(--weight-medium); text-decoration:none; white-space:nowrap; flex:none }
.notice a:hover { text-decoration:underline }
.notice svg { width:14px; height:14px }
#site-header { position:relative; z-index:40 }
.top { height:60px; background:var(--bg-top); border-bottom:1px solid var(--hairline); position:relative; z-index:44 }
.top .wrap { height:100%; display:flex; align-items:center; gap:28px; flex-wrap:nowrap }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-family:var(--font-display); font-size:var(--fs-brand); font-weight:var(--weight-strong); letter-spacing:-.01em; flex:none; white-space:nowrap }
.brand-mark { width:30px; height:30px; flex:none }
.nav { flex:1; min-width:0 }
.nav ul { display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0 }
.nav a { display:block; padding:7px 12px; border-radius:var(--r-pill); color:var(--muted); font-size:var(--fs-nav); line-height:20px; text-decoration:none; white-space:nowrap; transition:color var(--duration),background-color var(--duration) }
.nav a:hover { color:var(--text) }
.nav a[aria-current="page"] { background:var(--accent-wash); color:var(--accent); font-weight:var(--weight-medium) }
.top-end { margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0 }
.language { position:relative }
.lang { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:38px; min-width:44px; width:auto; font-family:var(--font-body); font-size:var(--fs-small); color:var(--muted); background:var(--clear); border:0; padding:8px 6px; border-radius:var(--r-btn); white-space:nowrap; cursor:pointer }
.lang span { white-space:nowrap }
.lang svg { width:12px; height:12px }
.lang:hover { color:var(--text) }
.language-panel { position:absolute; top:calc(100% + 8px); right:0; z-index:70; width:184px; padding:8px; background:var(--panel); border:1px solid var(--border); border-radius:var(--r-tag); box-shadow:var(--shadow-card) }
.language-panel a { display:flex; align-items:center; min-height:44px; padding:8px 12px; text-decoration:none; color:var(--text); border-radius:var(--r-btn) }
.language-panel a:hover,.language-panel a[aria-current="true"] { background:var(--accent-wash); color:var(--accent) }
.menu-toggle { display:none; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:10px; border:1px solid var(--border); border-radius:var(--r-btn); background:var(--panel); color:var(--text) }
.menu-toggle svg { width:20px; height:20px }
.mobile-drawer { display:none; position:fixed; top:var(--header-height); inset-inline:0; height:calc(100dvh - var(--header-height)); max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior:contain; z-index:42; background:var(--panel); padding:16px var(--gutter) 32px; border-top:1px solid var(--border) }
.mobile-drawer a { display:flex; align-items:center; width:100%; min-height:44px; padding:12px 16px; color:var(--text); text-decoration:none; border-radius:var(--r-btn) }
.mobile-drawer a[aria-current] { color:var(--accent); background:var(--accent-wash) }
.drawer-languages { border-top:1px solid var(--border); margin-top:16px; padding-top:16px }
html.nav-open { overflow:hidden }
.site-footer { background:var(--panel-2); border-top:1px solid var(--border); padding-top:56px; padding-bottom:28px }
.footer-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:48px }
.footer-grid > * { min-width:0 }
.footer-brand p { max-width:340px; margin-top:20px; color:var(--muted); font-size:var(--fs-small) }
.footer-heading { display:block; margin-bottom:16px; font-weight:var(--weight-medium); font-size:var(--fs-small) }
.footer-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; list-style:none; margin:0; padding:0 }
.footer-links a,.footer-languages a,.footer-legal a { display:inline-flex; align-items:center; min-height:28px; color:var(--muted); text-decoration:none; font-size:var(--fs-small) }
.footer-links a:hover,.footer-languages a:hover,.footer-legal a:hover { color:var(--link); text-decoration:underline }
.footer-languages,.footer-legal { display:flex; flex-wrap:wrap; gap:8px 20px }
.footer-languages { margin-top:36px; padding-top:20px; border-top:1px solid var(--border) }
.footer-bottom { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; color:var(--muted); font-size:var(--fs-label) }
.footer-bottom p { margin:0 }
.prose { overflow-wrap:break-word }
.prose h2 { margin-top:56px }
.prose h3 { margin-top:32px }
.prose li { margin-bottom:8px }
.prose a { overflow-wrap:anywhere }
.reveal { transition:opacity .35s var(--ease),transform .35s var(--ease) }
.reveal.pending { opacity:0; transform:translateY(16px) }
.reveal.shown { opacity:1; transform:none }
#server-status { display:block; position:relative; min-height:160px; max-width:100%; margin-block:24px; overflow:hidden }
#server-status > * { min-width:0; max-width:100% }
#server-status + * { margin-top:32px }
.grain { position:fixed; inset:0; z-index:60; width:100%; height:100%; pointer-events:none; opacity:.03; mix-blend-mode:multiply }
.grain-ink { flood-color:var(--grain) }
@media (max-width:1240px) {
  .top .wrap { gap:16px }
  .nav a { padding-inline:9px; font-size:var(--fs-small) }
}
@media (max-width:1100px) {
  .nav { display:none }
  .menu-toggle { display:inline-flex }
  .mobile-drawer:not([hidden]) { display:block }
  .top-end { margin-left:auto }
}
@media (min-width:1101px) {
  html.nav-open { overflow:auto }
}
@media (max-width:768px) {
  :root { --gutter:24px; --space-section:56px; --fs-h1:40px }
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px }
  .footer-brand { grid-column:1 / -1 }
  .panel { padding:28px }
}
@media (max-width:640px) {
  :root { --gutter:20px; --fs-h1:36px }
  .no-break { white-space:normal }
  .grid,.footer-grid { grid-template-columns:minmax(0,1fr) }
  .top .wrap { gap:8px }
  .brand { font-size:var(--fs-small); gap:6px }
  .brand-mark { width:24px; height:24px }
  .top-end { margin-left:auto; gap:4px }
  .top-end .btn { padding-inline:10px; min-height:36px; font-size:var(--fs-caption) }
  .lang { font-size:var(--fs-tiny); gap:3px; padding-inline:3px }
  .lang svg { width:9px; height:9px }
  .notice { font-size:var(--fs-label) }
  .card,.panel { padding:24px }
  .tilt,[data-tilt] { transform:none }
  .paper-decor { max-width:100% }
  .footer-brand { grid-column:auto }
}
@media (max-width:360px) {
  :root { --gutter:16px }
  .brand { font-size:var(--fs-label) }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition:none !important; animation:none !important }
  .reveal,.reveal.pending { opacity:1; transform:none }
}