@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-cyrillic-ext-wght-normal-BOeWTOD4.woff2) format("woff2-variations");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-cyrillic-wght-normal-DqGufNeO.woff2) format("woff2-variations");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-greek-ext-wght-normal-DlzME5K_.woff2) format("woff2-variations");unicode-range:U+1F00-1FFF}
@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-greek-wght-normal-CkhJZR-_.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-vietnamese-wght-normal-CBcvBZtf.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-latin-ext-wght-normal-DO1Apj_S.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(./inter-latin-wght-normal-Dx4kXJAl.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* 432 Librarian design tokens. Dark-first like the 432 apps; Black and Light themes.
   Brand: 432 Gold and Aurora from the iOS 6.0 "Resonance" palette. Inter (OFL) bundled,
   system-ui first on Apple devices.
   The colours below are the Classic skin, the look before any skin is chosen; every skin
   (src/modules/skins/skins.ts) overrides them through <style id="skin-vars">, and
   skins.test.ts checks that these equal Classic's tokens. Change a colour in both places.
   --accent is a fill (buttons, the active tab) with --accent-ink on it; words in the
   accent colour on a surface use --accent-text (darker than --accent on Light). */
:root {
  --font-ui: 'Inter Variable', 'Segoe UI', Roboto, sans-serif;
  --font-brand: 'Inter Variable', system-ui, sans-serif;
  --gold: #e9b65c;
  --aurora: #7cc6e8;
  --fix: #3fd6a0;
  --warn: #f2c24e;
  --bad: #ff6b81;
  --bg: #0f1220;
  --surface: #1a1e33;
  --line: #2a2f4a;
  --fg: #eef0ff;
  --muted: #9aa1c4;
  --accent: #e9b65c;
  --accent-ink: #111111;
  --accent-text: #e9b65c;
  --glass: rgba(255, 255, 255, 0.07);
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  color-scheme: dark;
}
/* Apple devices use their own system font; everyone else gets Inter (only WebKit knows -apple-system-body). */
@supports (font: -apple-system-body) {
  :root { --font-ui: system-ui, -apple-system, sans-serif; }
}
:root[data-theme='black'] { --bg: #000000; --surface: #0e0e12; --line: #23232c; }
:root[data-theme='light'] {
  --bg: #f7f7fb; --surface: #ffffff; --line: #e3e4ef; --fg: #151729; --muted: #6a6f8d;
  --accent: #a87b10; --accent-text: #936b0e; --aurora: #2499cf; --fix: #0e815d; --warn: #b07d00; --bad: #c62a45;
  --glass: rgba(0, 0, 0, 0.05); color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root[data-theme='system'] {
    --bg: #f7f7fb; --surface: #ffffff; --line: #e3e4ef; --fg: #151729; --muted: #6a6f8d;
    --accent: #a87b10; --accent-text: #936b0e; --aurora: #2499cf; --fix: #0e815d; --warn: #b07d00; --bad: #c62a45;
    --glass: rgba(0, 0, 0, 0.05); color-scheme: light;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font: 15px/1.5 var(--font-ui); -webkit-font-smoothing: antialiased; }
#app { height: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-transparency: reduce) { :root { --glass: var(--surface); } }


body{font:16px/1.6 var(--font-ui)}
a{color:var(--accent-text)}
.top{position:sticky;top:0;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;margin-inline-end:auto;color:var(--fg);text-decoration:none;font:700 17px/1.2 var(--font-brand)}
.brand img{display:block}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--space-6);border-radius:var(--radius-m);background:var(--accent);color:var(--accent-ink);font:600 15px/1.2 var(--font-ui);text-decoration:none;text-align:center}
.btn.small{min-height:36px;padding:0 var(--space-3);font-size:14px}
.btn .ui{color:inherit}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
.feedback{margin:48px 0 0}
.feedback p{color:var(--muted)}
.langs{position:relative}
.langs summary{display:flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-s);color:var(--muted);font-size:14px;cursor:pointer;list-style:none}
.langs summary::-webkit-details-marker{display:none}
.langs ul{position:absolute;inset-inline-end:0;top:calc(100% + 6px);margin:0;padding:6px;min-width:170px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.langs ul a{display:block;padding:8px 10px;border-radius:var(--radius-s);color:var(--fg);text-decoration:none}
.langs ul a:hover{background:var(--glass)}
[aria-current="page"]{color:var(--accent-text)}
main{max-width:720px;margin:0 auto;padding:var(--space-6) var(--space-4) 48px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 var(--space-4);padding:0;list-style:none;font-size:13px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-inline-end:4px}
.crumbs a{color:var(--muted)}
h1{margin:0 0 var(--space-3);font:700 30px/1.2 var(--font-brand)}
h2{margin:36px 0 var(--space-2);font:700 21px/1.3 var(--font-brand)}
h3{margin:var(--space-6) 0 4px;font-size:16px;line-height:1.4}
p{margin:0 0 var(--space-3)}
.lead{color:var(--muted);font-size:17px}
.ui{font-weight:600;color:var(--fg)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:var(--space-4)}
.card h2{margin-top:0;font-size:17px}
.card p:last-child{margin-bottom:0}
.toc{margin:var(--space-6) 0}
.toc ul{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0;padding:0;list-style:none}
.qa p{color:var(--muted)}
.qa .ui{color:var(--fg)}
.related{margin-top:var(--space-4);font-size:14px;color:var(--muted)}
.needs{margin:var(--space-6) 0}
ol.steps{margin:0;padding:0;list-style:none;counter-reset:step}
ol.steps>li{position:relative;margin:var(--space-6) 0;padding-inline-start:48px;counter-increment:step}
ol.steps>li::before{content:counter(step);position:absolute;inset-inline-start:0;top:0;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-weight:700}
ol.steps h3{margin:4px 0}
ol.steps p{color:var(--muted)}
.cta{margin:36px 0 var(--space-6)}
ul.guides{margin:0 0 var(--space-4);padding-inline-start:20px}
ul.guides li{margin:6px 0}
ul.cards{display:grid;gap:var(--space-3);padding:0;list-style:none}
ul.cards h2{margin:0 0 6px;font-size:18px}
ul.cards p{color:var(--muted)}
footer{padding:var(--space-6) var(--space-4) 40px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);text-align:center}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-bottom:var(--space-3)}
footer a{color:var(--muted)}
.footer-langs{font-size:13px}
@media (max-width:480px){.langs summary span{display:none}.brand{font-size:16px}}