:root{
  --bg:#FAF7F0; --surface:#FFFDF8; --sunken:#F3EEE3; --fg:#14213D; --muted:#55607A; --line:#E7E0D2;
  --accent:#1B2F6B; --accent-2:#2A4596; --accent-soft:#E4E8F3; --ink:#14244F; --ink-fg:#E3E8F4; --ink-muted:#A3AECA;
  --display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body:Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--body)}
a{color:var(--accent)} a:hover{color:var(--accent-2)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;margin:0;text-wrap:balance}
p{margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{left:12px}
.gut{padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
.in{max-width:1180px;margin:0 auto}
.eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 16px;border-radius:9px;font-weight:600;font-size:15px;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.btn.primary{background:var(--accent);color:#fff} .btn.primary:hover{background:var(--accent-2);color:#fff}
/* header (same as the homepage) */
.top{position:sticky;top:env(safe-area-inset-top, 0px);z-index:20;background:rgba(250,247,240,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top .in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-block:14px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.logo b{font-family:var(--display);font-size:20px;letter-spacing:-.02em}
.links{display:flex;flex-wrap:wrap;gap:4px 24px;font-size:15px;font-weight:500}
.links a{color:var(--muted);text-decoration:none;padding:6px 0}
.links a:hover,.links a[aria-current]{color:var(--fg)}
.top .acts{display:flex;gap:8px;align-items:center}
.signin{color:var(--fg);text-decoration:none;font-weight:600;font-size:15px;padding:10px 12px}
@media (max-width:860px){.links{order:3;width:100%;overflow-x:auto;flex-wrap:nowrap;gap:20px;padding-bottom:2px}}
/* hero */
.lg-hero{background:var(--ink);color:var(--ink-fg)}
.lg-hero .in{padding-block:52px 44px;display:flex;flex-direction:column;gap:12px;max-width:820px;margin-left:auto;margin-right:auto;text-align:center;align-items:center}
.lg-hero h1{font-size:clamp(34px,5vw,48px);color:#fff}
.lg-lead{color:var(--ink-muted);font-size:17px;max-width:620px}
.lg-search{margin-top:10px;width:100%;max-width:620px;display:flex;align-items:center;gap:10px;background:var(--surface);color:var(--muted);border-radius:12px;padding:0 14px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.lg-search input{flex:1;border:0;background:none;font:inherit;color:var(--fg);padding:15px 0;min-width:0;outline:none}
.lg-search:focus-within{outline:2px solid var(--accent-soft);outline-offset:2px}
/* layout */
.lg-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;padding-block:40px 64px;align-items:start}
.lg-side{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto}
.lg-nav-g{margin-bottom:18px}
.lg-nav-g h2{font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:500;margin-bottom:6px}
.lg-nav-g a{display:block;padding:6px 10px;border-radius:8px;color:var(--fg);text-decoration:none;font-size:14.5px}
.lg-nav-g a:hover{background:var(--sunken)}
.lg-nav-g a[aria-current]{background:var(--accent-soft);color:var(--accent);font-weight:600}
.lg-view:focus{outline:none}
@media (max-width:900px){.lg-layout{grid-template-columns:minmax(0,1fr);gap:24px}.lg-side{display:none}}
/* overview cards */
.lg-group{margin-bottom:34px}
.lg-group>h2{font-size:22px;margin-bottom:14px}
.lg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.lg-card{display:flex;flex-direction:column;gap:6px;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:var(--fg);transition:border-color .15s,transform .15s}
.lg-card:hover{border-color:var(--accent);transform:translateY(-1px);color:var(--fg)}
.lg-card strong{font-family:var(--display);font-size:17px;letter-spacing:-.01em}
.lg-card small{color:var(--muted);font-size:13.5px;line-height:1.5}
.lg-card .alt{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.lg-empty{padding:40px 16px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:12px}
/* article */
.lg-art{max-width:760px}
.lg-back{display:inline-flex;gap:6px;align-items:center;font-size:14px;font-weight:600;text-decoration:none;margin-bottom:16px}
.lg-art h1{font-size:clamp(28px,4vw,38px)}
.lg-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;color:var(--muted);font-size:13.5px;margin:10px 0 22px}
.lg-meta button{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:6px 12px;font:inherit;font-weight:600;color:var(--fg);cursor:pointer}
.lg-toc{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:14px 18px;margin-bottom:28px;font-size:14px}
.lg-toc summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between}
.lg-toc summary::-webkit-details-marker{display:none}
.lg-toc summary::after{content:'+';color:var(--muted);font-weight:400}
.lg-toc[open] summary::after{content:'–'}
.lg-toc[open] summary{margin-bottom:6px}
.lg-toc ol{margin:0;padding-left:18px;columns:2;column-gap:28px}
.lg-toc li{break-inside:avoid;padding:2px 0}
@media (max-width:640px){.lg-toc ol{columns:1}}
.lg-sec{margin-bottom:26px;scroll-margin-top:90px}
.lg-sec h2{font-size:20px;margin-bottom:8px}
.lg-sec p{margin:0 0 10px}
.lg-sec ul{margin:0 0 10px;padding-left:20px} .lg-sec li{margin:4px 0}
.lg-table{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin:6px 0 10px}
.lg-table table{border-collapse:collapse;width:100%;font-size:14px;background:var(--surface)}
.lg-table th,.lg-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.lg-table th{background:var(--sunken);font-weight:600}
.lg-table tr:last-child td{border-bottom:0}
code{font-family:var(--mono);font-size:13px;background:var(--sunken);padding:1px 5px;border-radius:5px}
.lg-next{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;margin-top:30px}
.lg-next a{text-decoration:none;font-weight:600;font-size:14.5px}
mark{background:#FCE9B8;color:inherit;border-radius:3px;padding:0 2px}
/* cookie settings */
.lg-cc{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:10px}
.lg-cc p{color:var(--muted);font-size:14px;margin:4px 0 0}
.lg-sw{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer}
.lg-sw input{width:20px;height:20px;accent-color:var(--accent)}
.lg-cc-f{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.lg-btn{border:1px solid var(--accent);background:var(--accent);color:#fff;border-radius:9px;padding:10px 16px;font:inherit;font-weight:600;cursor:pointer}
.lg-btn.ghost{background:var(--surface);color:var(--fg);border-color:var(--line)}
.lg-cc-msg{color:var(--muted);font-size:13.5px}
/* footer */
footer{border-top:1px solid var(--line)}
footer .in{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-block:32px;font-size:14px;color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:20px}
footer a{color:var(--muted)}
@media print{.top,.lg-hero,.lg-side,footer,.lg-back,.lg-meta button,.lg-next{display:none!important}.lg-layout{display:block;padding:0}body{background:#fff}}

/* ===== phone: app-style header, menu and sticky actions ===== */
*{-webkit-tap-highlight-color:transparent}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg)}
.mnav{position:fixed;inset:0;z-index:60;background:rgba(20,33,61,.35)}
.mnav[hidden]{display:none}
.mnav-in{position:absolute;inset:0 0 auto 0;max-height:100dvh;overflow:auto;background:var(--bg);border-radius:0 0 22px 22px;padding:calc(10px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.mnav-h{display:flex;justify-content:space-between;align-items:center;min-height:48px}
.mnav-t{font-family:var(--display);font-weight:700;font-size:20px}
.mnav-x{width:44px;height:44px;border:0;border-radius:12px;background:var(--sunken);color:var(--fg);display:flex;align-items:center;justify-content:center}
.mnav-l{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.mnav-l a{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:0 18px;color:var(--fg);text-decoration:none;font-weight:600;font-size:17px;border-bottom:1px solid var(--line)}
.mnav-l a::after{content:"›";color:var(--muted);font-size:22px;font-weight:400}
.mnav-l a:last-child{border-bottom:0}
.mnav-l a:active{background:var(--sunken)}
.mnav-l.sm a{font-size:15px;min-height:48px;font-weight:500}
.mnav-a{display:flex;gap:10px}
.mnav-a .btn{flex:1;min-height:50px}
.mcta{display:none}
@media (prefers-reduced-motion:no-preference){.mnav:not([hidden]) .mnav-in{animation:mnavin .26s cubic-bezier(.2,.8,.2,1)}@keyframes mnavin{from{transform:translateY(-16px);opacity:.4}}}
html.menu-open{overflow:hidden}
@media (max-width:860px){
  .top .in{flex-wrap:nowrap;padding-block:10px}
  .top .links,.top .signin,.top .acts .btn{display:none}
  .menu-btn{display:flex}
  .mcta{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(250,247,240,.94);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .25s ease}
  .mcta.show{transform:none}
  .mcta .btn{flex:1;min-height:48px}
  .btn:active{transform:scale(.97)}
  footer .in{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

@media (max-width:640px){
  .lg-hero .in{padding-block:30px 26px;gap:8px}
  .lg-hero h1{font-size:30px}
  .lg-lead{font-size:15px}
  .lg-search input{padding:13px 0}
  .lg-layout{padding-block:18px calc(40px + env(safe-area-inset-bottom,0px))}
  .lg-group{margin-bottom:22px}
  .lg-group>h2{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 4px 8px}
  .lg-cards{display:flex;flex-direction:column;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
  .lg-card{border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 40px 14px 16px;position:relative;background:none;transform:none!important}
  .lg-card:last-child{border-bottom:0}
  .lg-card::after{content:"›";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--muted)}
  .lg-card:active{background:var(--sunken)}
  .lg-card strong{font-size:16px}
  .lg-card small{font-size:13px}
  .lg-back{position:sticky;top:64px;z-index:10;display:flex;margin:-18px -16px 14px;padding:12px 16px;background:rgba(250,247,240,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .lg-art h1{font-size:28px}
  .lg-meta{margin:8px 0 16px}
  .lg-sec h2{font-size:18px}
  .lg-sec{scroll-margin-top:120px}
  .lg-cc{flex-direction:column}
  .lg-cc-f .lg-btn{flex:1}
  .lg-next{flex-direction:column}
}