/* AdeptWrite design system — ported from design/artifact-markup.html (inline styles → classes).
   Mobile-first. Light/dark via [data-theme] on <html>. Unminified (build.mjs has no minifier by design).
   Font files are referenced as /assets/fonts/font-NN.woff2; build.mjs rewrites these to the
   content-hashed names it emits (so a re-subsetted font never hits a stale immutable cache).
   v2 (docs/ARCHITECTURE.md §8): every horizontal property is logical (margin-inline, padding-inline, inset-inline,
   border-inline, text-align:start) so right-to-left pages mirror without extra rules; [dir="rtl"] only flips
   directional glyphs (.arrow, breadcrumb separators). Font stacks come from :root[data-script] (src/data/locales.mjs
   FONTS — scripts/generator-pages.test.mjs keeps this file in sync with it). */

/* ---------- Fonts (self-hosted Google Fonts subsets; same 11 files as the design)
   file           family             weight  subset
   font-01.woff2  Lora               600     cyrillic-ext
   font-02.woff2  Lora               600     cyrillic
   font-03.woff2  Lora               600     math
   font-04.woff2  Lora               600     symbols
   font-05.woff2  Lora               600     vietnamese
   font-06.woff2  Lora               600     latin-ext
   font-07.woff2  Lora               600     latin            ← preloaded
   font-08.woff2  Plus Jakarta Sans  400+700 cyrillic-ext     (variable file, serves both weights)
   font-09.woff2  Plus Jakarta Sans  400+700 vietnamese
   font-10.woff2  Plus Jakarta Sans  400+700 latin-ext
   font-11.woff2  Plus Jakarta Sans  400+700 latin            ← preloaded */
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/font-01.83e1cb177d.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/font-02.b2592496f6.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/font-03.96e28a6f4d.woff2) format('woff2');unicode-range:U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-209F,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/font-04.5372030395.woff2) format('woff2');unicode-range:U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AE,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F8D0-1F8D8,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FAC6,U+1FAC8,U+1FACC-1FADD,U+1FADF-1FAEB,U+1FAEF-1FAFA,U+1FB00-1FBFF}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/font-05.5b60447923.woff2) format('woff2');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:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/font-06.b784e8d2d5.woff2) format('woff2');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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lora';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/font-07.73354e49fa.woff2) format('woff2');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}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/font-08.a6b4e8f690.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/font-09.5c1c43e016.woff2) format('woff2');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:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/font-10.e59d136be1.woff2) format('woff2');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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/font-11.069be307c1.woff2) format('woff2');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}

/* ---------- Tokens */
:root,[data-theme="light"]{--bg:#FAFAF7;--surface:#FFFFFF;--surface2:#F1F0FB;--ink:#15142B;--muted:#5B5A74;--line:#E4E3EE;--primary:#3B2BD9;--primary-soft:#ECEAFB;--amber:#F2A516;--amber-soft:#FFF3D6;--amber-ink:#6B4A00;--green:#DDF5E4;--green-ink:#146C3A;--red:#C8342A;--red-soft:#FDE8E6;--shadow:0 8px 30px rgba(27,20,90,.08);--on-primary:#fff;--on-amber:#1A1200;--on-red:#fff;--focus:#3B2BD9;color-scheme:light}
[data-theme="dark"]{--bg:#0F0F1A;--surface:#17172A;--surface2:#1F1F36;--ink:#F2F1FA;--muted:#A9A7C4;--line:#2B2B45;--primary:#8B7EF7;--primary-soft:#262457;--amber:#F5B544;--amber-soft:#3A2E12;--amber-ink:#F5D08A;--green:#17442C;--green-ink:#9BE6B8;--red:#F07D74;--red-soft:#3C1A17;--shadow:0 8px 30px rgba(0,0,0,.45);--on-primary:#15142B;--on-amber:#1A1200;--on-red:#15142B;--focus:#F5B544;color-scheme:dark}
/* Dark theme: the lighter primary (#8B7EF7) only reaches 3.3:1 with white text, so every filled
   primary/red element uses --on-primary/--on-red (dark ink, ≥ 6.6:1) instead of hard-coded #fff. */
:root{--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--r-sm:8px;--r:12px;--r-lg:16px;--r-xl:20px;--max:1200px;--header-h:64px;--ls-tight:-.02em;--ls-wide:.08em;--lh-body:1.55;--lh-head:1.2}

/* ---------- Font stacks by script (<html data-script> from src/data/locales.mjs; one value per FONTS entry).
   Latin and Cyrillic use the self-hosted Lora (+ Plus Jakarta Sans for Latin); every other script uses system stacks. */
:root,:root[data-script="latin"]{--serif:'Lora', Georgia, 'Times New Roman', serif;--sans:'Plus Jakarta Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif}
:root[data-script="cyrillic"]{--serif:'Lora', Georgia, 'Times New Roman', serif;--sans:'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif}
:root[data-script="greek"]{--serif:'Noto Serif', Georgia, 'Times New Roman', serif;--sans:'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif}
:root[data-script="arabic"]{--serif:'Noto Naskh Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, 'Geeza Pro', serif;--sans:'Noto Sans Arabic', 'Segoe UI', Tahoma, 'Geeza Pro', Arial, sans-serif}
:root[data-script="arabic"]:lang(fa){--serif:'Vazirmatn', 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma, serif;--sans:'Vazirmatn', 'Noto Sans Arabic', 'Segoe UI', Tahoma, 'Iranian Sans', Arial, sans-serif}
:root[data-script="arabic"]:lang(ur){--serif:'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', 'Noto Sans Arabic', serif;--sans:'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', 'Noto Sans Arabic', Tahoma, sans-serif}
:root[data-script="hebrew"]{--serif:'Noto Serif Hebrew', David, 'Times New Roman', serif;--sans:'Noto Sans Hebrew', 'Segoe UI', Arial, 'Arial Hebrew', sans-serif}
:root[data-script="devanagari"]{--serif:'Noto Serif Devanagari', 'Noto Sans Devanagari', Mangal, 'Nirmala UI', 'Kohinoor Devanagari', serif;--sans:'Noto Sans Devanagari', 'Nirmala UI', Mangal, 'Kohinoor Devanagari', 'Devanagari Sangam MN', sans-serif}
:root[data-script="bengali"]{--serif:'Noto Serif Bengali', 'Noto Sans Bengali', Vrinda, 'Nirmala UI', serif;--sans:'Noto Sans Bengali', 'Nirmala UI', Vrinda, 'Bangla Sangam MN', sans-serif}
:root[data-script="gurmukhi"]{--serif:'Noto Serif Gurmukhi', 'Noto Sans Gurmukhi', Raavi, 'Nirmala UI', serif;--sans:'Noto Sans Gurmukhi', 'Nirmala UI', Raavi, 'Gurmukhi MN', sans-serif}
:root[data-script="gujarati"]{--serif:'Noto Serif Gujarati', 'Noto Sans Gujarati', Shruti, 'Nirmala UI', serif;--sans:'Noto Sans Gujarati', 'Nirmala UI', Shruti, 'Gujarati Sangam MN', sans-serif}
:root[data-script="tamil"]{--serif:'Noto Serif Tamil', 'Noto Sans Tamil', Latha, 'Nirmala UI', serif;--sans:'Noto Sans Tamil', 'Nirmala UI', Latha, 'Tamil Sangam MN', sans-serif}
:root[data-script="telugu"]{--serif:'Noto Serif Telugu', 'Noto Sans Telugu', Gautami, 'Nirmala UI', serif;--sans:'Noto Sans Telugu', 'Nirmala UI', Gautami, 'Telugu Sangam MN', sans-serif}
:root[data-script="kannada"]{--serif:'Noto Serif Kannada', 'Noto Sans Kannada', Tunga, 'Nirmala UI', serif;--sans:'Noto Sans Kannada', 'Nirmala UI', Tunga, 'Kannada Sangam MN', sans-serif}
:root[data-script="malayalam"]{--serif:'Noto Serif Malayalam', 'Noto Sans Malayalam', Kartika, 'Nirmala UI', serif;--sans:'Noto Sans Malayalam', 'Nirmala UI', Kartika, 'Malayalam Sangam MN', sans-serif}
:root[data-script="thai"]{--serif:'Noto Serif Thai', 'Leelawadee UI', Thonburi, 'Angsana New', serif;--sans:'Noto Sans Thai', 'Leelawadee UI', Thonburi, Tahoma, sans-serif}
:root[data-script="han"]{--serif:'Noto Serif SC', 'Songti SC', SimSun, serif;--sans:'PingFang SC', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Noto Sans SC', 'Source Han Sans SC', sans-serif}
:root[data-script="han"]:lang(zh-Hant){--serif:'Noto Serif TC', 'Songti TC', PMingLiU, serif;--sans:'PingFang TC', 'Microsoft JhengHei', 'Noto Sans CJK TC', 'Noto Sans TC', 'Source Han Sans TC', sans-serif}
:root[data-script="japanese"]{--serif:'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', serif;--sans:'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, 'Noto Sans JP', sans-serif}
:root[data-script="hangul"]{--serif:'Noto Serif KR', 'Nanum Myeongjo', Batang, serif;--sans:'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Nanum Gothic', sans-serif}
/* Tracking: letter-spacing breaks Arabic joining and the Indic headline stroke, and is meaningless for CJK/Thai. */
:root:not([data-script="latin"]):not([data-script="cyrillic"]):not([data-script="greek"]){--ls-tight:0;--ls-wide:0}
/* Taller line boxes for scripts with stacked marks (Thai, Indic) and Nastaliq, whose glyphs need far more height. */
:root[data-script="thai"],:root[data-script="devanagari"],:root[data-script="bengali"],:root[data-script="gurmukhi"],:root[data-script="gujarati"],:root[data-script="tamil"],:root[data-script="telugu"],:root[data-script="kannada"],:root[data-script="malayalam"]{--lh-body:1.75;--lh-head:1.4}
:root[data-script="arabic"]{--lh-body:1.75;--lh-head:1.45}
:root[data-script="arabic"]:lang(ur){--lh-body:2.1;--lh-head:1.8}
:root[data-script="han"],:root[data-script="japanese"],:root[data-script="hangul"]{--lh-body:1.75;--lh-head:1.35}

/* ---------- Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:var(--lh-body);-webkit-font-smoothing:antialiased}
a{color:var(--primary)}a:hover{color:var(--amber)}
img,svg{max-width:100%;height:auto;vertical-align:middle}
textarea,button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:where(button,textarea,input,select,summary,a):focus-visible{outline:3px solid var(--focus);outline-offset:2px;box-shadow:0 0 0 2px var(--surface),0 0 0 7px var(--surface);border-radius:4px}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:var(--lh-head);letter-spacing:var(--ls-tight);text-wrap:pretty}
p{margin:0 0 1em}
hr.rule{border:0;border-top:1px solid var(--line);margin:32px 0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;inset-inline-start:8px;top:-60px;z-index:100;background:var(--primary);color:var(--on-primary);padding:10px 14px;border-radius:var(--r);font-weight:700}
.skip:focus{top:8px}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.container--narrow{max-width:800px}
.muted{color:var(--muted)}.small{font-size:13px}
.h1{font-family:var(--serif);font-size:clamp(28px,4vw,42px);margin:0 0 8px}
.h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,34px);margin:0 0 8px}
.h2--sm{font-size:26px;margin-bottom:16px}
.lead{color:var(--muted);font-size:17px;margin:0;text-wrap:pretty}
.tagline{color:var(--muted);font-size:17px;max-width:720px;margin:0 0 24px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--muted);font-weight:700;margin:0 0 10px}
.eyebrow--primary{color:var(--primary);margin-bottom:6px}
[data-mobile-nav]{display:none}

/* ---------- Buttons, pills, chips, inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:var(--r);padding:11px 18px;font-weight:700;text-decoration:none;line-height:1.2;white-space:nowrap;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--primary);color:var(--on-primary)}.btn--primary:hover{color:var(--on-primary);box-shadow:var(--shadow)}
.btn--amber{background:var(--amber);color:var(--on-amber)}.btn--amber:hover{color:var(--on-amber);box-shadow:var(--shadow)}
.btn--ghost{background:none;border-color:var(--line);color:var(--ink);font-weight:400}.btn--ghost:hover{background:var(--surface2);color:var(--ink)}
.btn--sm{padding:8px 14px;border-radius:10px;font-size:14px;min-height:40px}
.btn--lg{padding:14px 26px;font-size:16px}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.pill{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 10px;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;min-height:36px}
.pill:hover{background:var(--surface2);color:var(--ink)}
.pill--icon{width:36px;height:36px;padding:0;font-size:15px}
.theme-icon--light{display:none}[data-theme="dark"] .theme-icon--light{display:inline}[data-theme="dark"] .theme-icon--dark{display:none}
.chip{display:inline-flex;align-items:center;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:700;text-decoration:none;line-height:1.3;min-height:36px;cursor:pointer}
.chip:hover{border-color:var(--primary);color:var(--ink)}
.chip.is-active,.chip[aria-selected="true"],.chip[aria-checked="true"]{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.chips{display:flex;gap:8px;flex-wrap:wrap}.chips--center{justify-content:center}
.input{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:12px 16px;width:100%}
.input--search{flex:0 1 320px;min-width:220px}
.field{display:flex;flex-direction:column;gap:4px;flex:1 1 160px}
.field label{font-size:13px;font-weight:700;color:var(--muted)}
.field input,.field select{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 12px;width:100%}
.field-row{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- Header */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)}
.site-header__row{height:var(--header-h);display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);padding:4px}
.brand__name{font-weight:700;font-size:19px;letter-spacing:var(--ls-tight)}
.nav{display:flex;gap:2px;margin-inline-start:16px;align-items:center}
.nav__link{display:inline-block;padding:8px 12px;border-radius:10px;color:var(--ink);text-decoration:none;cursor:pointer;list-style:none}
.nav__link:hover{background:var(--surface2);color:var(--ink)}
.nav__link--strong{font-weight:700}
.nav__mega summary::-webkit-details-marker{display:none}
.nav__mega[open]>summary{background:var(--surface2)}
.mega{position:absolute;inset-inline:0;top:var(--header-h);border-top:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);z-index:49}
.mega__grid{padding:24px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.mega__col{display:flex;flex-direction:column;gap:2px}
.mega__link{display:block;padding:6px 8px;border-radius:8px;color:var(--ink);font-size:14px;text-decoration:none}
.mega__link:hover{background:var(--surface2);color:var(--ink)}
.mega__link--all{font-weight:700;color:var(--primary)}
.site-header__actions{margin-inline-start:auto;display:flex;align-items:center;gap:8px}
.site-header__actions .btn{padding:10px 16px}

/* ---------- Hero */
.hero{background:linear-gradient(180deg,var(--primary-soft) 0%,var(--bg) 100%)}
.hero .container{padding-top:56px;padding-bottom:64px}
.hero__head{text-align:center;max-width:760px;margin:0 auto 36px}
.badge{display:inline-flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--muted);margin-bottom:20px}
.badge__dot{width:8px;height:8px;border-radius:50%;background:var(--green-ink);display:inline-block}
.hero__title{font-family:var(--serif);font-size:clamp(34px,5vw,56px);line-height:1.1;margin:0 0 16px}
.hero__sub{font-size:18px;color:var(--muted);margin:0;text-wrap:pretty}

/* ---------- Editor (§5) */
.editor{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden;min-width:0}
.editor__bar{display:flex;flex-wrap:wrap;gap:8px;padding:14px 16px;border-bottom:1px solid var(--line);align-items:center}
.editor__bar:not(:has(.editor__modes)){padding:10px 16px}
.editor__label{font-size:13px;color:var(--muted);font-weight:700;margin-inline-end:4px}
.editor__modes{display:contents}/* chips wrap together with the Mode label inside the bar, as in the design */
.editor__hint{font-size:12px;color:var(--muted)}
.editor__hint--row{margin-inline-start:auto}
.editor__bar .editor__meta{margin-inline-start:auto}
.editor__bar .editor__toggle{margin-inline-start:0}
.editor__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.editor__form{padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
@media(min-width:720px){.editor__form{border-inline-end:1px solid var(--line)}}
.editor textarea{width:100%;min-height:240px;resize:vertical;border:0;background:transparent;padding:4px;font-size:16px;line-height:1.6;outline:none}
.editor textarea:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--focus);border-radius:8px}
.editor--hero textarea{min-height:200px}
.editor__row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.editor__row .btn--primary{padding:12px 22px}
.editor__meta{font-size:13px;color:var(--muted);margin-inline-start:auto}
.editor__side{padding:16px;background:var(--surface2);min-height:300px;display:flex;flex-direction:column;gap:12px;min-width:0}
.editor--hero .editor__side{min-height:280px}
.editor__out{flex:1;font-size:16px;line-height:1.7;color:var(--ink);white-space:pre-wrap;word-wrap:break-word}
.editor__out:empty::before,.editor__out.is-empty{color:var(--muted);font-size:15px}
.editor__out mark.chg,.editor__out .chg{background:var(--green);color:inherit;border-radius:3px;cursor:pointer}
.editor__out .alert,.editor__alert{background:var(--red-soft);color:var(--red);border-radius:var(--r);padding:14px;font-size:14px;display:flex;flex-direction:column;gap:8px;white-space:normal}
.editor__out .notice{background:var(--amber-soft);color:var(--amber-ink);border-radius:var(--r);padding:10px 14px;font-size:13px;white-space:normal}
.editor__actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;position:sticky;bottom:12px}
.editor__actions .btn--amber{box-shadow:var(--shadow)}
.editor__actions .btn--ghost{background:var(--surface)}
.editor__legend{font-size:12px;color:var(--muted);margin-inline-start:auto;display:inline-flex;align-items:center;gap:4px}
.editor__privacy{margin:0;padding:10px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
@keyframes pulse{0%{opacity:.45}50%{opacity:1}100%{opacity:.45}}

/* ---------- Sections, grids, cards */
.section{padding:72px 0}
.section--surface{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-head{margin-bottom:28px}
.section-head--row{display:flex;flex-wrap:wrap;gap:16px;align-items:end;justify-content:space-between}
.section__block{margin-top:56px}
.section__more{margin:28px 0 0;font-weight:700}.section__more a{display:inline-block;padding:8px 0}
.grid{display:grid;gap:14px}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.grid--cards-sm{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.grid--features{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-bottom:40px}
.grid--personas{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid--gap-lg{gap:48px}
.tool-groups{display:flex;flex-direction:column;gap:36px}
.tool-group .eyebrow{font-size:14px;margin-bottom:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;color:var(--ink);display:flex;flex-direction:column;gap:6px;text-decoration:none;min-width:0}
.card--tool{transition:transform .15s,box-shadow .15s,border-color .15s}
.card--tool:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--primary);color:var(--ink)}
.card--flat{background:var(--bg);padding:22px}
.card--surface{background:var(--surface)}
.card--sm{padding:16px;border-radius:14px}
.card__title{font-weight:700;font-size:16px}
.card__text{font-size:14px;color:var(--muted);line-height:1.45}
.card__path{font-size:12px;color:var(--primary);font-family:var(--mono)}
.linkrow{margin-top:24px;font-size:15px;display:flex;gap:6px;flex-wrap:wrap}

/* ---------- Steps, before/after, answer box, lists */
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.steps li{display:flex;gap:14px;align-items:flex-start}
.steps__num{width:32px;height:32px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:700;flex:none}
.steps__title{font-weight:700}
.steps--compact{gap:10px}.steps--compact .steps__num{width:28px;height:28px;font-size:14px}
.ba{display:flex;flex-direction:column;gap:10px}
.ba__box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;font-size:15px}
.ba__box--after{background:var(--green);border-color:var(--green-ink)}
.ba__label{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:4px}
.ba__box--after .ba__label{color:var(--green-ink)}
.ba__note{font-size:14px;margin:4px 0 0}
.answer{margin-top:40px;background:var(--primary-soft);border-radius:var(--r-lg);padding:22px 24px;max-width:860px}
.answer__text{margin:0;font-size:17px;line-height:1.6}
.list{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:8px}
.list--check{list-style:none;padding-inline-start:0}
.list--check li{padding-inline-start:26px;position:relative}
.list--check li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;color:var(--green-ink);font-weight:700}

/* ---------- Tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);margin:0 0 10px}
.table-wrap table,.prose table{width:100%;border-collapse:collapse;font-size:15px}
.table-wrap--cmp table{min-width:640px}
.cmp--compact{font-size:14px;min-width:0}
th,td{padding:12px 16px;text-align:start;vertical-align:top}
.cmp--compact th,.cmp--compact td{padding:10px 12px}
thead tr{background:var(--surface2)}
thead th{text-align:center}thead th:first-child{text-align:start}
tbody tr{border-top:1px solid var(--line)}
tbody th{font-weight:700}
.cmp td{text-align:center}
.cmp thead .cmp__us{color:var(--primary)}
.cmp tbody .cmp__us{background:var(--primary-soft)}

/* ---------- FAQ (<details>) */
.faq__list{display:flex;flex-direction:column;gap:8px}
.faq__item{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.faq__item summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:700;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq__item summary::-webkit-details-marker{display:none}
.faq__icon::before{content:"+";color:var(--muted);font-weight:400;font-size:18px}
.faq__item[open] .faq__icon::before{content:"−"}
.faq__answer{padding:0 18px 16px;color:var(--muted);font-size:15px}
.faq__answer p{margin:0}

/* ---------- CTA, byline */
.cta{margin:0 0 80px;background:var(--primary);color:var(--on-primary);border-radius:24px;padding:48px 32px;text-align:center}
.cta__title{font-family:var(--serif);font-size:clamp(26px,3.4vw,34px);color:var(--on-primary);margin:0 0 10px}
.cta__sub{margin:0 0 24px;opacity:.9}
.cta-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow)}
.cta-card__body{flex:1;min-width:200px}.cta-card__title{font-weight:700}
.byline{margin-top:48px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;max-width:860px}
.byline__avatar{width:48px;height:48px;border-radius:50%;background:repeating-linear-gradient(45deg,var(--line) 0 4px,var(--surface2) 4px 8px);flex:none}
.byline__body{flex:1;min-width:200px}.byline__name{font-weight:700}.byline a{display:inline-block;padding:6px 0}

/* ---------- Page shells */
.page-tool,.page-hub,.page-404{padding-top:24px;padding-bottom:80px}
.page-404{text-align:center;padding-top:72px;max-width:720px}
.big-404{font-family:var(--serif);font-size:96px;font-weight:600;color:var(--primary);line-height:1}
.crumbs{font-size:13px;color:var(--muted);display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.crumbs a{color:var(--primary);display:inline-block;padding:7px 2px}
.hub__filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:28px}
.hub__filters .input--search{flex:1 1 260px}

/* ---------- Article typography (guides, deep-dive bodies, policies) */
.prose{max-width:860px;font-size:17px;line-height:1.7}
.prose h2{font-family:var(--serif);font-size:26px;margin:32px 0 10px}
.prose h3{font-size:20px;margin:24px 0 8px}
.prose p,.prose ul,.prose ol{margin:0 0 14px}
.prose li{margin-bottom:6px}
.prose blockquote{margin:0 0 14px;padding:14px 20px;border-inline-start:4px solid var(--primary);background:var(--primary-soft);border-start-start-radius:0;border-end-start-radius:0;border-start-end-radius:var(--r);border-end-end-radius:var(--r)}
.prose blockquote p{margin:0}
.prose blockquote p+p{margin-top:10px}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--surface2);padding:2px 6px;border-radius:6px}
.prose pre{background:#15142B;color:#E9E7FF;border-radius:var(--r-lg);padding:20px;font-size:13px;line-height:1.6;overflow-x:auto;font-family:var(--mono)}
.prose .table-wrap{font-size:15px}
.prose table th,.prose table td{padding:10px 14px}
.prose img{border-radius:var(--r)}
.prose hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.callout{background:var(--amber-soft);border:1px solid var(--amber);border-radius:14px;padding:18px 20px;margin:0 0 28px}

/* ---------- Footer */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:56px 0 32px}
.site-footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:28px}
.site-footer__links{display:flex;flex-direction:column;gap:4px;font-size:14px;align-items:flex-start}
.site-footer__links a{color:var(--ink);text-decoration:none;display:inline-block;padding:8px 0;line-height:1.3}/* ≥ 34 px tall + 4 px gap: WCAG 2.5.8 */.site-footer__links a:hover{color:var(--primary)}
.site-footer__bottom{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px;color:var(--muted)}
.site-footer__langs,.site-footer__social{display:flex;gap:12px;flex-wrap:wrap}
.site-footer__bottom a{color:var(--muted);display:inline-block;padding:8px 0}

/* ---------- Mobile bottom nav (< 760px) */
.mnav{position:fixed;bottom:0;inset-inline:0;background:var(--surface);border-top:1px solid var(--line);display:none;justify-content:space-around;align-items:center;padding:6px 0 max(10px,env(safe-area-inset-bottom));z-index:60}
.mnav__item{min-width:56px;min-height:44px;color:var(--ink);font-size:12px;text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.mnav__icon{font-size:18px;line-height:1}
.mnav__cta{background:var(--amber);color:var(--on-amber);border-radius:14px;min-width:64px;min-height:44px;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 12px;text-decoration:none}

/* ---------- Responsive */
@media(max-width:760px){
  [data-mobile-nav].mnav{display:flex}
  [data-desktop-only]{display:none!important}
  body{padding-bottom:72px}
  .section{padding:48px 0}
  .hero .container{padding-top:36px;padding-bottom:40px}
  .cta{padding:36px 20px}
  .editor__side{min-height:200px}
  .editor--hero .editor__side{min-height:160px}
  .answer{padding:18px}
  .grid--gap-lg{gap:32px}
  .section__block{margin-top:40px}
  .site-footer{padding:40px 0 24px}
}
@media print{.site-header,.site-footer,.mnav,.editor__actions,.cta,.cta-card{display:none!important}body{background:#fff;color:#000}}

/* ---------- Page types added by generator-pages (pricing, guides, kata baku, glossary, API docs, policies)
   Appended as a self-contained block; tokens and base classes above are reused. */
.page-doc,.page-guide,.page-list{padding-top:24px;padding-bottom:80px}
.doc{max-width:960px}.doc__meta{margin:-8px 0 20px}.doc__cards{margin:8px 0 28px}.doc__contact{margin-top:28px;max-width:860px}
.small{font-size:13px}
.tag{display:inline-block;background:var(--amber-soft);color:var(--amber-ink);border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;vertical-align:middle}
.tag--primary{background:var(--primary-soft);color:var(--primary)}
.tag--green{background:var(--green);color:var(--green-ink)}
/* pricing */
.plans{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));max-width:860px;margin:32px 0 20px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:28px;display:flex;flex-direction:column;gap:16px}
.plan--pro{border:2px solid var(--primary);box-shadow:var(--shadow)}
.plan__head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.plan__name{font-weight:700;font-size:18px}
.plan__price{font-size:36px;font-weight:700;line-height:1.1;margin:8px 0 2px}
.plan__per{font-size:15px;color:var(--muted);font-weight:400}
.plan__note{color:var(--muted);font-size:14px}
.plan .list{font-size:15px}.plan .btn,.plan__soon{margin-top:auto}
.plan__soon{background:var(--surface2);color:var(--muted);border-radius:12px;padding:12px;text-align:center;font-weight:700;font-size:14px}
/* guides */
.article-layout{display:grid;gap:40px;grid-template-columns:minmax(0,1fr) 280px;align-items:start}
.article-aside{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:16px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.toc__title{font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--muted);font-weight:700;margin-bottom:8px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px}
.toc li.toc--h3{padding-inline-start:14px;font-size:13px}
.toc a{color:var(--ink);text-decoration:none}.toc a:hover{color:var(--primary)}
.toc--inline{display:none;margin:0 0 24px}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin:0 0 24px}
.meta__avatar{width:28px;height:28px;border-radius:50%;background:var(--primary);display:inline-block}
.callout__title{font-weight:700;margin-bottom:8px}.callout ul{margin:0;padding-inline-start:20px}
.prose .cta-card{margin:28px 0}
.guide-list{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card__eyebrow{font-size:12px;color:var(--primary);font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-wide)}
.card__meta{font-size:13px;color:var(--muted)}
/* kata baku */
.alpha{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 24px}
.alpha a{min-width:34px;text-align:center;padding:6px 8px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);text-decoration:none;font-weight:700;font-size:14px}
.alpha a:hover{border-color:var(--primary);color:var(--primary)}
.kb-group{margin:0 0 28px}.kb-letter{font-family:var(--serif);font-size:24px;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.kb-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.kb-item a{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;color:var(--ink);text-decoration:none}
.kb-item a:hover{border-color:var(--primary)}
.kb-item__ok{font-weight:700;color:var(--green-ink)}.kb-item__no{color:var(--muted);text-decoration:line-through}
.pair{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin:0 0 24px;max-width:860px}
.pair__box{border-radius:var(--r-lg);padding:18px 20px;border:1px solid var(--line);background:var(--surface)}
.pair__box--ok{background:var(--green);border-color:var(--green-ink)}.pair__box--no{background:var(--red-soft);border-color:var(--red)}
.pair__label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:var(--ls-wide);margin-bottom:4px}
.pair__box--ok .pair__label{color:var(--green-ink)}.pair__box--no .pair__label{color:var(--red)}
.pair__word{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.1}
.pair__box--no .pair__word{text-decoration:line-through;text-decoration-thickness:2px}
.dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0 0 20px;font-size:16px}.dl dt{font-weight:700;color:var(--muted)}.dl dd{margin:0}
.pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:32px;font-size:15px}.pager a{display:inline-block;padding:8px 0}
/* glossary */
.terms{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin:28px 0}
.term{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;scroll-margin-top:calc(var(--header-h) + 16px)}
.term h2{font-family:var(--serif);font-size:22px;margin:0 0 6px}.term h2 small{font-family:var(--sans);font-size:14px;color:var(--muted);font-weight:400}
.term p{margin:0 0 10px;font-size:15px;line-height:1.6}.term__links{font-size:14px;display:flex;flex-wrap:wrap;gap:6px 12px}
/* api docs */
.api{max-width:960px}
.api pre{background:#15142B;color:#E9E7FF;border-radius:var(--r-lg);padding:18px 20px;font-size:13px;line-height:1.6;overflow-x:auto;font-family:var(--mono);margin:0 0 16px}
.method{display:inline-block;font-family:var(--mono);font-size:13px;font-weight:700;background:var(--primary-soft);color:var(--primary);border-radius:8px;padding:3px 8px;margin-inline-end:8px}
.api h2 code,.api h3 code{font-family:var(--mono);font-size:.85em;background:var(--surface2);padding:2px 8px;border-radius:8px}
.api .table-wrap{margin:0 0 20px}
.compare-tabs{margin:0 0 20px}
@media(max-width:900px){.article-layout{grid-template-columns:1fr}.article-aside{position:static}.article-aside .toc{display:none}.toc--inline{display:block}}
@media(max-width:760px){.plan{padding:22px}.plan__price{font-size:30px}.pair__word{font-size:24px}.dl{grid-template-columns:1fr;gap:2px 0}.dl dt{margin-top:8px}}

/* ---------- Editor output markup created at runtime by app.js ----------
   These rules are the ONLY styles for the runtime classes (app.js injects nothing), mapped onto the
   same tokens as the static editor styles above. */
[hidden]{display:none!important}
.editor__out:focus-visible{outline:none}
.editor__result{margin:0;font-size:16px;line-height:1.7;white-space:pre-wrap;word-wrap:break-word}
.editor__result mark.chg{background:var(--green);color:inherit;border-radius:3px}
.editor__empty{margin:0;color:var(--muted);font-size:15px;white-space:normal}
.tok{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:3px;line-height:inherit}
.tok--issue{border-bottom:2px solid var(--red)}.tok.is-sel{background:var(--amber-soft)}
.editor__skel{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.editor__skel span{display:block;height:14px;border-radius:6px;background:var(--line);animation:pulse 1.2s infinite}
.editor__skel span:nth-child(1){width:92%}.editor__skel span:nth-child(2){width:84%;animation-delay:.1s}.editor__skel span:nth-child(3){width:70%;animation-delay:.2s}
@media(prefers-reduced-motion:reduce){.editor__skel span{animation:none}}
.editor__alert{align-items:flex-start}
.editor__alert .btn--retry{background:var(--red);color:var(--on-red);border-color:var(--red);padding:6px 12px;font-size:13px;border-radius:8px;min-height:36px}
.editor__alert--nojs{margin:0 0 4px}
.editor__notice{background:var(--amber-soft);color:var(--amber-ink);border-radius:var(--r);padding:10px 14px;font-size:13px;margin-bottom:10px;white-space:normal}
.editor__ok{background:var(--green);color:var(--green-ink);border-radius:var(--r);padding:10px 12px;font-size:14px;font-weight:700;margin-bottom:10px;white-space:normal}
.editor__issues{display:flex;flex-direction:column;gap:6px;margin-top:12px;white-space:normal}
.editor__issues-h{font-size:13px;font-weight:700;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.editor__issue{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:14px}
.editor__issue.is-sel{border-color:var(--amber)}.editor__issue del{color:var(--red)}.editor__issue strong{color:var(--green-ink)}.editor__issue small{color:var(--muted);font-size:12px}
.editor__issue .btn--apply,.editor__issues-h .btn--apply{margin-inline-start:auto;background:var(--primary);color:var(--on-primary,#fff);border:0;border-radius:8px;padding:5px 10px;cursor:pointer;font-size:13px;font-weight:700}
.editor__pop{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;white-space:normal}
.editor__pop .btn--chip,.editor__syn-group .btn--chip{margin:0;border:1px solid var(--line);background:var(--surface2);color:var(--ink);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:400;cursor:pointer}
.editor__pop .btn--chip:hover,.editor__syn-group .btn--chip:hover{background:var(--primary-soft)}
.editor__pop .pop-close{margin-inline-start:auto;background:none;border:0;cursor:pointer;color:var(--muted);font-size:16px}
.editor__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;white-space:normal}
.editor__stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.editor__stat b{display:block;font-size:24px;font-weight:700;line-height:1.2}.editor__stat span{font-size:13px;color:var(--muted)}
.editor__table{width:100%;border-collapse:collapse;font-size:14px;margin-top:12px;white-space:normal}
.editor__table th,.editor__table td{text-align:start;padding:6px 8px;border-bottom:1px solid var(--line)}
.editor__table tr.is-sel{background:var(--amber-soft);font-weight:700}
.editor__cases{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;white-space:normal}
.editor__cases button{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.editor__cases button[aria-pressed="true"]{background:var(--primary);color:var(--on-primary,#fff);border-color:var(--primary);font-weight:700}
.editor__diff ins{background:var(--green);text-decoration:none;color:var(--green-ink)}.editor__diff del{background:var(--red-soft);color:var(--red)}
.editor__compare-wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px;white-space:normal}
.editor__compare-wrap h3{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--muted)}
@media(max-width:700px){.editor__compare-wrap{grid-template-columns:1fr}}
.editor__toggle{display:inline-flex;align-items:center;gap:6px;font-size:14px;cursor:pointer;margin-inline-start:auto}
.editor__syn-group{margin-bottom:10px;white-space:normal}.editor__syn-group b{display:block;margin-bottom:4px}
.editor__pop--flush{margin:0}
.editor__legend i{display:inline-block;width:10px;height:10px;background:var(--green);border:1px solid var(--green-ink);border-radius:2px;vertical-align:middle;margin-inline-end:4px}
.h3--sub{font-size:18px;margin-top:20px}
/* Citation generator: app.js hides the textarea form and mounts citation.js in the side column,
   so that column becomes the whole editor width (docs/handoff/citation-module.md §1). */
.editor[data-task="citation"] .editor__grid{grid-template-columns:1fr}
.editor[data-task="citation"] .editor__side{background:var(--surface2)}
.editor__citation{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;white-space:normal}

/* ---------- Citation generator form (built at runtime by citation.js; no styles are injected) */
.cite{display:grid;gap:12px;font-size:14px}.cite .cite__field{display:flex;flex-direction:column;gap:4px;min-width:0}
.cite label{font-size:12px;font-weight:700;color:var(--muted)}.cite__hint--label{font-weight:700}
.cite input,.cite select{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-width:0;width:100%;box-sizing:border-box;min-height:40px}
.cite__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.cite__row--2{grid-template-columns:2fr 1fr}
.cite__people{display:grid;gap:8px}.cite__person{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}
.cite__check{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;min-height:40px}.cite__check input{width:auto;min-height:0}
.cite__hint{font-size:12px;color:var(--muted);margin:0}
.cite__btn{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:inherit;border-radius:10px;padding:8px 12px;font-weight:700;font-size:13px;min-height:40px}
.cite__btn--primary{background:var(--primary);color:var(--on-primary);border-color:transparent}.cite__btn--amber{background:var(--amber);color:var(--on-amber);border-color:transparent}.cite__btn--sm{padding:5px 9px;font-size:12px;min-height:36px}
.cite__actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cite__out{display:grid;gap:14px}.cite__out h3{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--muted)}
.cite__entry{padding-inline-start:2em;text-indent:-2em;line-height:1.7;overflow-wrap:anywhere}.cite__entry--flat{padding-inline-start:0;text-indent:0}
.cite__block{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px}.cite__block .cite__actions{margin-top:8px}
.cite__list{display:grid;gap:10px;margin-top:4px}.cite__list ol{margin:0;padding:0;list-style:none;display:grid;gap:8px}.cite__list li{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;background:var(--surface2);border-radius:10px;padding:10px 12px}
.cite__list-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}.cite__list-head h3{margin:0;font-size:14px}
.cite__empty{color:var(--muted);font-size:14px}
@media (max-width:600px){.cite__row--2{grid-template-columns:1fr}.cite__person{grid-template-columns:1fr auto auto}}

/* ---------- Touch targets (WCAG 2.5.8 / Lighthouse): 44 px on phones and coarse pointers */
@media(max-width:760px),(pointer:coarse){
  .pill{min-height:44px;padding:8px 12px}.pill--icon{width:44px;height:44px}
  .chip{min-height:40px}.btn--sm{min-height:44px}.alpha a{min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .site-footer__links a{padding:11px 0}.site-footer__bottom a{padding:11px 0}.crumbs a{padding:10px 0}.mega__link{padding:10px 8px}
  .editor__cases button,.editor__pop .btn--chip,.editor__syn-group .btn--chip{min-height:40px}
}

/* Home: breathing room between the FAQ list and the CTA band */
.page--home .faq{margin:24px 0 72px}
@media(max-width:760px){.editor__toggle{display:none}}/* side-by-side view collapses to one column on phones anyway */

/* ======================================================================================================
   v2 components (generator-pages-v2): editor options row, language switcher, account link, hubs, pagination,
   native-engine box, honest limits, pricing (4 plans), contact, enterprise form, account shells, extension,
   translate pairs, spelling cluster, RTL. Tokens and base classes above are reused; no inline styles anywhere.
   ====================================================================================================== */

/* ---------- RTL: logical properties above mirror the layout; only directional glyphs need a flip */
/* "→"/"←" are not Bidi_Mirrored, so they are flipped here; "›" (breadcrumbs) is mirrored by the bidi algorithm itself. */
[dir="rtl"] .arrow{display:inline-block;transform:scaleX(-1)}
.card__path,.contact-card__email,kbd{unicode-bidi:isolate}

/* ---------- Header: language switcher + account link */
.lang-switch__btn{gap:4px;list-style:none;cursor:pointer;min-width:52px}
.lang-switch__btn::-webkit-details-marker{display:none}
.lang-switch__code{font-weight:700;letter-spacing:.02em}
.lang-switch[open]>.lang-switch__btn{background:var(--surface2)}
.lang-switch__menu .mega__link[aria-current="page"]{background:var(--primary-soft);color:var(--primary);font-weight:700}
.account-link{white-space:nowrap}
.site-footer__ads{flex:1 1 280px;max-width:640px}
.site-footer__ads a{color:var(--muted)}
@media(max-width:420px){.brand__name{font-size:17px}.site-header__row{gap:6px}.site-header__actions{gap:6px}.lang-switch__btn{min-width:0;padding-inline:10px}}
@media(max-width:360px){.brand__name{display:none}}

/* ---------- Editor options row (§5): text language, translator from ⇄ to, spelling variety, deep analysis */
.editor__options{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.editor__opt{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%}
.editor__opt label{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.editor__opt select,.field select{min-height:38px;max-width:min(100%,260px);border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding-block:6px;padding-inline:10px 28px;font-size:14px}
.editor__options .editor__hint{flex:1 1 220px}
.editor__swap{min-width:40px;min-height:38px;padding:6px 10px;font-size:18px;line-height:1}
.editor__check{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);cursor:pointer;min-height:36px}
.editor__check input{width:18px;height:18px;accent-color:var(--primary);margin:0}
.editor__checks{display:flex;flex-wrap:wrap;gap:4px 18px}
.editor__fields{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.editor__fields .field{flex:none}
.field textarea{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 12px;width:100%;min-height:auto;font-size:15px;line-height:1.5;resize:vertical}
.editor .field textarea{min-height:72px}
.editor__form .field input{min-height:40px}
@media(max-width:560px){.editor__opt{flex:1 1 100%}.editor__opt select{flex:1;max-width:none}.editor__swap{order:0}}
/* Runtime output markup of app.js (docs/handoff/editor-v2.md §site.css) */
.editor__note .editor__legend{display:block;margin:0}
ol.editor__list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;white-space:normal}
ol.editor__list>li{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
ol.editor__list>li>.editor__result{flex:1;margin:0}
ol.editor__list>li>.btn--chip{flex:none;border:1px solid var(--line);background:var(--surface2);color:var(--ink);border-radius:999px;padding:3px 10px;font-size:13px;cursor:pointer}
mark.ai{background:var(--amber-soft);color:inherit;border-bottom:2px solid var(--amber);border-radius:2px}
.editor__note meter,.editor__out meter{width:8rem;vertical-align:middle}
progress{accent-color:var(--primary)}
/* Plagiarism report (src/assets/plagiarism.js, docs/handoff/plagiarism-v2.md) */
.plag__meter{display:block;width:100%;height:10px;margin-top:8px}
.plag__summary,.plag__about p{margin:10px 0 0}
.plag__passage{flex-basis:100%}
.plag__excerpt{margin:4px 0 0;padding-block:6px;padding-inline:10px;border-inline-start:3px solid var(--line);font-size:13px;line-height:1.55}
.plag__hit{background:var(--amber);color:var(--on-amber);border-radius:3px}
.plag__mine{margin-top:14px}.plag__notes p{margin:8px 0 0}

/* ---------- Hubs: category chips as links, guide cards, tool counts */
.chips--nav{margin:0}
.chips--nav .chip{text-decoration:none}
.h1__sub{font-family:var(--sans);font-size:.55em;color:var(--muted);font-weight:400}
.card--guide .card__title{font-size:17px;line-height:1.35}
.tool-group .eyebrow a{color:inherit;text-decoration:none}.tool-group .eyebrow a:hover{color:var(--primary)}
a.card__eyebrow{display:inline-block;text-decoration:none;padding-block:4px}
a.card__eyebrow:hover{text-decoration:underline}
.section__block--tight{margin-top:28px}

/* ---------- Pagination */
.pages{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:32px}
.pages__list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.pages__num{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none}
a.pages__num:hover{border-color:var(--primary);color:var(--primary)}
.pages__num.is-current{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.pages__gap{align-self:center;color:var(--muted);padding:0 4px}
.pages__step{min-width:96px;font-weight:700;text-decoration:none;padding:10px 0}
.pages__step--next{text-align:end}

/* ---------- Native-engine box (§3) and honest limits */
.native{background:var(--surface);border:1px solid var(--line);border-inline-start:4px solid var(--green-ink);border-radius:var(--r-lg);padding:20px 22px;max-width:860px}
.native__head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.native__badge{width:28px;height:28px;border-radius:50%;background:var(--green);color:var(--green-ink);display:grid;place-items:center;font-weight:700;flex:none}
.native__title{margin:0}
.native__facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0 0 10px;font-size:15px}
.native__facts dt{font-weight:700;color:var(--muted)}.native__facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.native__note{margin:0 0 8px}.native__foot{margin:0}.native__more{margin:8px 0 0;font-weight:700}
.limits{background:var(--amber-soft);border:1px solid var(--amber);border-radius:var(--r-lg);padding:20px 22px;max-width:860px}
.limits .h2{margin-bottom:10px}
.limits__body{font-size:16px}
.limits__notes{margin:10px 0 0;padding-inline-start:20px;display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--amber-ink)}
.callout--info{background:var(--primary-soft);border-color:var(--primary)}
@media(max-width:560px){.native__facts{grid-template-columns:1fr;gap:2px 0}.native__facts dd{margin-bottom:8px}}

/* ---------- Pricing: four plans + comparison */
.plans--4{max-width:none;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media(min-width:1100px){.plans--4{grid-template-columns:repeat(4,1fr)}}
.plan__planned{margin:-10px 0 0;color:var(--muted)}
.plan__form{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.plan__form .field{flex:none}
.plan__form .btn{margin-top:0}
.plan>.btn{margin-top:auto}
.plan [data-aw-form-status]{margin:0;font-size:14px}
.table-wrap--plans table{min-width:720px}
.cmp--plans td{font-size:14px}
.page-pricing .callout{max-width:860px}

/* ---------- Contact */
.contact-card{display:grid;gap:14px 24px;grid-template-columns:1fr auto;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px 24px;box-shadow:var(--shadow);max-width:860px}
.contact-card__label{font-family:var(--sans);font-size:13px;text-transform:uppercase;letter-spacing:var(--ls-wide);color:var(--muted);margin:0 0 4px}
.contact-card__email{font-size:clamp(20px,3vw,26px);font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.contact-card__actions{display:flex;gap:8px;flex-wrap:wrap}
.contact-card__time{grid-column:1/-1;margin:0;color:var(--muted)}
.topics{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.topic{gap:8px}
.topic .card__title{font-family:var(--sans);font-size:17px;margin:0}
.topic .card__text{margin:0}
.topic__include{margin:0;color:var(--muted);border-inline-start:3px solid var(--primary-soft);padding-inline-start:10px}
.topic__mail{align-self:flex-start;margin-top:auto}
@media(max-width:640px){.contact-card{grid-template-columns:1fr}}

/* ---------- Enterprise lead form, account shells, forms */
.lead-card{max-width:860px;padding:24px;gap:10px}
.lead-form{display:flex;flex-direction:column;gap:14px}
.lead-form .field-row .field{min-width:200px}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0}
fieldset legend{padding:0 6px;color:var(--muted);font-weight:700}
.chip--check{gap:8px;font-weight:400;cursor:pointer}
.chip--check input{width:16px;height:16px;margin:0;accent-color:var(--primary)}
.chip--check:has(input:checked){border-color:var(--primary);background:var(--primary-soft)}
.page-account .account-root{min-height:120px;display:flex;flex-direction:column;gap:14px}
.page-account .account-root>.muted:only-child{padding:18px 0}
[data-aw-form-status]{font-size:14px}

/* ---------- Browser extension landing page */
.ext-browsers{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:16px}
.ext-browser{gap:10px}
.ext-browser .card__title{font-family:var(--sans);font-size:18px;margin:0}
.ext-browser .btn{align-self:flex-start}
.ext-steps{font-size:14px;margin:0}
.ext-soon{margin:0;background:var(--surface2);border-radius:var(--r);padding:12px 14px;font-size:14px;color:var(--ink)}
kbd{font-family:var(--mono);font-size:.85em;background:var(--surface2);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;white-space:nowrap}
.dl--stack{grid-template-columns:1fr;gap:2px 0}.dl--stack dt{margin-top:10px;color:var(--ink)}.dl--stack dd{color:var(--muted)}
.dl--facts{max-width:860px;margin:20px 0 0;font-size:15px}

/* ---------- Translation pairs, language lists */
.pair-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.tx-table td:first-child,.tx-table td:nth-child(2){min-width:180px}
.lang-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.lang-list li{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px;font-size:14px}
.lang-list a{text-decoration:none;color:var(--ink)}.lang-list a:hover{color:var(--primary)}

/* ---------- Spelling cluster (generic successor of the v1 kata-baku pages) */
.kb-item__vs{color:var(--muted);font-size:13px}
.kb-item__term{font-weight:700;color:var(--ink)}
.pair__word--long{font-family:var(--sans);font-size:17px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.pair__box--no .pair__word--long{text-decoration:none;color:var(--red)}
.about-cluster{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;max-width:860px}
.about-cluster p{margin:0 0 10px}.about-cluster p:last-child{margin:0}

/* ---------- 404 */
.page-404__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:24px}
.page-404 .chips{margin-top:20px}

@media print{.lang-switch,.account-link,.pages,.editor__options{display:none!important}}

/* ---------- refinements after visual review */
.page-doc .ba,.page-doc .pair{max-width:860px}
.entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.entry-meta__sep{color:var(--line)}
.plan__per{display:inline-block}
.plan__price--custom{font-size:28px}
.hub__cta{margin-top:16px}
.mnav__item{flex:1 1 0;min-width:0;max-width:96px;padding:0 2px;text-align:center;line-height:1.2;overflow-wrap:anywhere}
@media(max-width:640px){
  .table-wrap--plans table{min-width:560px;font-size:13px}
  .table-wrap--plans th[scope="row"],.table-wrap--plans thead th:first-child{position:sticky;inset-inline-start:0;z-index:1;min-width:150px;max-width:170px;white-space:normal}
  .table-wrap--plans th[scope="row"]{background:var(--surface)}
  .table-wrap--plans thead th:first-child{background:var(--surface2)}
  .table-wrap--plans th,.table-wrap--plans td{padding:10px 12px}
}

/* Markdown task lists */
li.task{list-style:none;margin-inline-start:-1.2em}
.task__box{display:inline-block;inline-size:1.2em}