/* =========================================================================
   khmerkeyboard.com · shared site styles
   Used by index.html, guide.html, install.html, 404.html and the chrome of
   app.html. Warm paper and ink, one saffron accent, Khmer set in Kantumruy.
   ========================================================================= */

/* ---- Fonts (bundled, so the site works offline and calls no third party) */
@font-face{
  font-family:"Kantumruy"; font-weight:400; font-display:swap;
  src:url("fonts/Kantumruy-Regular.ttf") format("truetype");
  unicode-range:U+1780-17FF, U+19E0-19FF, U+200B-200D;
}
@font-face{
  font-family:"Kantumruy"; font-weight:700; font-display:swap;
  src:url("fonts/Kantumruy-Bold.ttf") format("truetype");
  unicode-range:U+1780-17FF, U+19E0-19FF, U+200B-200D;
}
@font-face{
  font-family:"Siemreap Web"; font-display:swap;
  src:url("fonts/Siemreap-Regular.ttf") format("truetype");
  unicode-range:U+1780-17FF, U+19E0-19FF, U+200B-200D, U+25CC;
}

/* ---- Tokens ------------------------------------------------------------ */
:root{
  color-scheme:light;
  --paper:#F5F1E8; --paper-2:#ECE6DA; --paper-3:#E1D9C9; --surface:#FFFDF8;
  --ink:#1C1915; --ink-2:#4D463E; --ink-3:#6F675C;
  --rule:rgba(28,25,21,.12); --rule-2:rgba(28,25,21,.22);
  --accent:#E5A03A; --accent-soft:rgba(229,160,58,.22); --on-accent:#1C1915; --accent-text:#93560B;
  --band:#1C1915; --on-band:#F3EEE5; --on-band-2:#B3AA9D; --band-rule:rgba(243,238,229,.14);
  --glyph:#EBE4D6; --key:#FFFDF8; --key-fn:#D9D0C0; --kb-bg:#E8E1D4; --key-shadow:rgba(28,25,21,.28);
  --shadow-sm:0 1px 2px rgba(28,25,21,.06), 0 3px 10px rgba(28,25,21,.05);
  --shadow-lg:0 2px 6px rgba(28,25,21,.06), 0 40px 80px -30px rgba(28,25,21,.35);

  --font-sans:"Kantumruy", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
              Roboto, "Helvetica Neue", Arial, "Siemreap Web", "Noto Sans Khmer", sans-serif;
  --font-mono:ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  /* typed Khmer output: the Khmer OS Siemreap look people paste into Word */
  --font-khtext:"Khmer OS Siemreap", "Siemreap Web", "Kantumruy", "Noto Sans Khmer", serif;

  --wrap:1200px; --gutter:24px; --header:68px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#12100D; --paper-2:#1A1814; --paper-3:#26231E; --surface:#1D1A16;
    --ink:#F1ECE3; --ink-2:#C4BCAF; --ink-3:#8C8478;
    --rule:rgba(241,236,227,.12); --rule-2:rgba(241,236,227,.22);
    --accent:#ECAA45; --accent-soft:rgba(236,170,69,.2); --on-accent:#1C1915; --accent-text:#F0BC69;
    --band:#1D1A16; --on-band:#F1ECE3; --on-band-2:#ACA397; --band-rule:rgba(241,236,227,.12);
    --glyph:#1B1915; --key:#3B3731; --key-fn:#2A2722; --kb-bg:#201D19; --key-shadow:rgba(0,0,0,.55);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 40px 80px -30px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#12100D; --paper-2:#1A1814; --paper-3:#26231E; --surface:#1D1A16;
  --ink:#F1ECE3; --ink-2:#C4BCAF; --ink-3:#8C8478;
  --rule:rgba(241,236,227,.12); --rule-2:rgba(241,236,227,.22);
  --accent:#ECAA45; --accent-soft:rgba(236,170,69,.2); --on-accent:#1C1915; --accent-text:#F0BC69;
  --band:#1D1A16; --on-band:#F1ECE3; --on-band-2:#ACA397; --band-rule:rgba(241,236,227,.12);
  --glyph:#1B1915; --key:#3B3731; --key-fn:#2A2722; --kb-bg:#201D19; --key-shadow:rgba(0,0,0,.55);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-lg:0 2px 6px rgba(0,0,0,.35), 0 40px 80px -30px rgba(0,0,0,.8);
}
@media (max-width:640px){ :root{ --gutter:16px; --header:60px; } }

/* ---- Language: every translated element carries data-l="en" or "km" ---- */
html[data-lang="en"] [data-l="km"],
html[data-lang="km"] [data-l="en"]{ display:none !important; }

/* ---- Base ---------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(var(--header) + 20px); }
@media (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.62 var(--font-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
html[data-lang="km"] body{ line-height:1.85; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0 0 1em; }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.1; letter-spacing:-.022em; text-wrap:balance; }
html[data-lang="km"] :is(h1,h2,h3,h4){ letter-spacing:0; line-height:1.45; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--accent-soft); }
:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }
.kh, [lang="km"]{ letter-spacing:0; }
.mono, code, kbd{ font-family:var(--font-mono); }
code{
  font-size:.86em; padding:.1em .38em; border-radius:6px;
  background:var(--paper-2); border:1px solid var(--rule); white-space:nowrap;
}
kbd{
  font-size:.82em; padding:.08em .42em; border-radius:6px; white-space:nowrap;
  background:var(--surface); border:1px solid var(--rule-2); box-shadow:0 1px 0 var(--rule-2);
}
.skip{
  position:absolute; left:12px; top:-60px; z-index:100; padding:10px 16px; border-radius:10px;
  background:var(--ink); color:var(--paper); text-decoration:none; font-weight:600;
}
.skip:focus{ top:12px; }
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

/* ---- Type scale ------------------------------------------------------------ */
.label{
  display:block; margin:0 0 22px; color:var(--ink-3);
  font-size:13px; font-weight:600; line-height:1.4; letter-spacing:.09em; text-transform:uppercase;
}
html[data-lang="km"] .label{ font-size:15px; letter-spacing:0; text-transform:none; }
.display{ font-size:clamp(46px,6.6vw,92px); line-height:.98; letter-spacing:-.042em; }
html[data-lang="km"] .display{ font-size:clamp(40px,5.4vw,76px); line-height:1.32; letter-spacing:0; }
.h2{ font-size:clamp(34px,4.4vw,60px); line-height:1.03; letter-spacing:-.034em; }
html[data-lang="km"] .h2{ font-size:clamp(28px,3.5vw,48px); line-height:1.42; letter-spacing:0; }
.h3{ font-size:clamp(21px,1.9vw,25px); line-height:1.25; letter-spacing:-.016em; }
.lead{ font-size:clamp(18px,1.55vw,21px); line-height:1.58; color:var(--ink-2); max-width:34em; }
html[data-lang="km"] .lead{ line-height:1.9; }
.muted{ color:var(--ink-3); }

/* ---- Buttons and links -------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:0 26px; border-radius:999px; border:1px solid transparent;
  font:600 16px/1.3 var(--font-sans); text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s, transform .15s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ background:color-mix(in oklab, var(--ink) 84%, var(--accent)); }
.btn-accent{ background:var(--accent); color:var(--on-accent); }
.btn-accent:hover{ background:color-mix(in oklab, var(--accent) 86%, #fff); }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--rule-2); }
.btn-line:hover{ border-color:var(--ink); }
.btn-sm{ min-height:40px; padding:0 18px; font-size:14.5px; }
.link{
  font-weight:600; text-decoration:underline; text-decoration-thickness:1.5px;
  text-underline-offset:.3em; text-decoration-color:var(--accent);
  transition:text-decoration-color .2s;
}
.link:hover{ text-decoration-color:currentColor; }
.arrow::after{ content:"→"; display:inline-block; margin-left:.45em; transition:transform .2s var(--ease); }
.arrow:hover::after{ transform:translateX(3px); }

/* ---- Header ---------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in oklab, var(--paper) 86%, transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(14px); backdrop-filter:saturate(1.3) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.site-header.is-scrolled, .site-header.is-open{ border-bottom-color:var(--rule); }
.site-header .wrap{ display:flex; align-items:center; gap:clamp(18px,3vw,40px); height:var(--header); }
.brand{
  display:inline-flex; align-items:center; gap:11px; flex:none;
  text-decoration:none; font-weight:700; font-size:17px; letter-spacing:-.012em; line-height:1;
}
.brand svg{ width:32px; height:32px; flex:none; }
html[data-lang="km"] .brand{ font-size:16px; letter-spacing:0; }
.nav{ display:flex; align-items:center; gap:clamp(16px,2.2vw,30px); }
.nav a{
  position:relative; text-decoration:none; color:var(--ink-2); font-size:15px; font-weight:500;
  padding:8px 0; transition:color .2s;
}
.nav a:hover, .nav a[aria-current="page"]{ color:var(--ink); }
.nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:2px; border-radius:2px; background:var(--accent);
}
.tools{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.lang-switch{ display:inline-flex; gap:2px; padding:3px; border:1px solid var(--rule-2); border-radius:999px; }
.lang-switch button{
  appearance:none; border:0; background:none; cursor:pointer; color:var(--ink-2);
  min-height:30px; padding:0 11px; border-radius:999px; font-size:13px; font-weight:600; line-height:1;
}
.lang-switch button[lang="km"]{ font-size:14px; }
.lang-switch button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }
.icon-btn{
  appearance:none; display:grid; place-items:center; flex:none; cursor:pointer;
  width:38px; height:38px; border-radius:999px; border:1px solid var(--rule-2); background:none; color:var(--ink);
  transition:border-color .2s;
}
.icon-btn:hover{ border-color:var(--ink); }
.icon-btn svg{ width:18px; height:18px; }
.theme-btn .moon{ display:none; }
:root[data-theme="dark"] .theme-btn .sun{ display:none; }
:root[data-theme="dark"] .theme-btn .moon{ display:block; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-btn .sun{ display:none; }
  :root:not([data-theme="light"]) .theme-btn .moon{ display:block; }
}
.menu-btn{ display:none; }
.menu-btn .x{ display:none; }
.site-header.is-open .menu-btn .bars{ display:none; }
.site-header.is-open .menu-btn .x{ display:block; }
.sheet{ display:none; }

@media (max-width:920px){
  .nav, .tools .lang-switch, .tools .theme-btn{ display:none; }
  .menu-btn{ display:grid; }
  .sheet{
    display:block; position:fixed; inset:var(--header) 0 auto 0; z-index:59;
    background:var(--paper); border-bottom:1px solid var(--rule);
    padding:12px var(--gutter) 28px; max-height:calc(100dvh - var(--header)); overflow:auto;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
  }
  .site-header.is-open + .sheet{ opacity:1; transform:none; visibility:visible; transition-delay:0s; }
  .sheet nav a{
    display:block; padding:15px 0; border-bottom:1px solid var(--rule);
    font-size:20px; font-weight:600; text-decoration:none;
  }
  .sheet .sheet-tools{ display:flex; align-items:center; gap:12px; margin-top:22px; }
  .sheet .lang-switch button{ min-height:36px; padding:0 14px; font-size:14px; }
  .sheet .theme-btn{ width:44px; height:44px; }
}
@media (max-width:420px){ .tools .btn-sm{ padding:0 14px; } .brand span{ font-size:16px; } }

/* ---- Sections ---------------------------------------------------------------- */
.section{ padding-block:clamp(84px,11vw,150px); }
.section-head{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:24px clamp(32px,6vw,96px); align-items:end;
}
.section-head .lead{ margin:0; }
@media (max-width:860px){ .section-head{ grid-template-columns:1fr; } }

/* ---- Hero ---------------------------------------------------------------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(36px,6vw,84px) clamp(84px,10vw,140px); }
.hero > .wrap{
  position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(40px,5vw,80px); align-items:center;
}
.hero-copy{ position:relative; z-index:2; }
.hero .alt-line{ display:block; margin-top:20px; color:var(--ink-3); font-weight:700;
  font-size:clamp(24px,2.8vw,38px); line-height:1.45; letter-spacing:0; }
html[data-lang="km"] .hero .alt-line{ font-size:clamp(20px,2vw,26px); letter-spacing:-.02em; line-height:1.3; }
.hero .lead{ margin-top:30px; }
.hero-ctas{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 28px; margin-top:38px; }
.hero-meta{ margin-top:30px; color:var(--ink-3); font-size:14.5px; }
.hero-stage{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; }
.hero-glyph{
  position:absolute; z-index:-1; left:56%; top:45%; transform:translate(-50%,-50%);
  width:min(780px,170%); max-width:none; color:var(--glyph); pointer-events:none;
}
.stage-note{ margin-top:26px; max-width:340px; text-align:center; color:var(--ink-3); font-size:14.5px; line-height:1.55; }
.stage-note button{
  appearance:none; border:0; background:none; padding:0; cursor:pointer;
  font-weight:600; color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px; text-underline-offset:.28em;
}
@media (max-width:960px){
  .hero > .wrap{ grid-template-columns:1fr; }
  .hero-stage{ margin-top:12px; }
}

/* ---- Phone demo ---------------------------------------------------------------- */
.phone{
  --pw:352px;
  position:relative; width:min(var(--pw), calc(100vw - 2 * var(--gutter)));
  aspect-ratio:352 / 724; padding:11px; border-radius:50px;
  background:#16130F; box-shadow:var(--shadow-lg), inset 0 0 0 1.5px #3B352D;
  outline:none; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.phone::before, .phone::after{ content:""; position:absolute; right:-3px; width:3px; border-radius:0 3px 3px 0; background:#2B2620; }
.phone::before{ top:136px; height:56px; }
.phone::after{ top:206px; height:92px; }
.phone:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; border-radius:54px; }
.screen{
  position:relative; height:100%; border-radius:40px; overflow:hidden;
  display:flex; flex-direction:column; background:var(--surface); color:var(--ink);
}
.ph-status{
  flex:none; height:42px; display:flex; align-items:center; justify-content:space-between;
  padding:4px 28px 0 30px; font:600 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.ph-status svg{ height:12px; width:auto; }
.ph-cam{ position:absolute; top:13px; left:50%; width:13px; height:13px; margin-left:-6.5px; border-radius:50%; background:#16130F; }
.ph-head{ flex:none; display:flex; align-items:center; gap:11px; padding:4px 16px 12px; border-bottom:1px solid var(--rule); }
.ph-back{ width:10px; height:16px; color:var(--ink-2); }
.ph-avatar{
  width:36px; height:36px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-text); font-weight:700; font-size:16px; line-height:1;
}
.ph-name{ font-weight:700; font-size:15px; line-height:1.35; }
.ph-presence{ font-size:12px; line-height:1.3; color:var(--ink-3); }
.ph-thread{
  flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  gap:7px; padding:14px 13px 12px; background:var(--paper);
}
.bubble{
  max-width:82%; padding:6px 13px 7px; border-radius:19px;
  font-size:17px; line-height:1.7; word-break:break-word;
}
.bubble.in{ align-self:flex-start; background:var(--surface); border:1px solid var(--rule); border-bottom-left-radius:6px; }
.bubble.out{ align-self:flex-end; background:var(--ink); color:var(--paper); border-bottom-right-radius:6px; }
.bubble.typing{ display:flex; gap:4px; padding:13px 14px; }
.bubble.typing i{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); opacity:.5; }
@media (prefers-reduced-motion:no-preference){
  .bubble{ animation:bubble-in .32s var(--ease) both; }
  @keyframes bubble-in{ from{ opacity:0; transform:translateY(8px) scale(.97); } }
  .bubble.typing i{ animation:dot 1.1s infinite ease-in-out; }
  .bubble.typing i:nth-child(2){ animation-delay:.15s; }
  .bubble.typing i:nth-child(3){ animation-delay:.3s; }
  @keyframes dot{ 0%,60%,100%{ opacity:.35; transform:none; } 30%{ opacity:1; transform:translateY(-3px); } }
}
.ph-composer{ flex:none; display:flex; align-items:flex-end; gap:8px; padding:8px 10px; background:var(--surface); border-top:1px solid var(--rule); }
.ph-field{
  flex:1; min-width:0; min-height:38px; max-height:96px; overflow:hidden;
  padding:5px 14px; border:1px solid var(--rule-2); border-radius:19px;
  font-size:17px; line-height:1.6; word-break:break-word;
}
.ph-comp{
  font-family:var(--font-mono); font-size:15px; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:2px; text-underline-offset:5px;
}
.ph-caret{ display:inline-block; width:2px; height:1.1em; margin-left:1px; vertical-align:-.18em; background:var(--accent-text); }
@media (prefers-reduced-motion:no-preference){
  .ph-caret{ animation:caret 1.05s steps(1) infinite; }
  @keyframes caret{ 50%{ opacity:0; } }
}
.ph-placeholder{ color:var(--ink-3); }
.ph-send{
  flex:none; width:38px; height:38px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer;
  background:var(--ink); color:var(--paper); transition:opacity .2s;
}
.ph-send[disabled]{ opacity:.28; cursor:default; }
.ph-send svg{ width:16px; height:16px; }
.ph-cands{
  flex:none; height:46px; display:flex; align-items:center; gap:2px; padding:0 6px;
  background:var(--kb-bg); overflow:hidden; white-space:nowrap;
}
.ph-cand{
  flex:none; appearance:none; border:0; background:none; cursor:pointer; color:var(--ink);
  padding:2px 12px 3px; border-radius:10px; font-size:18px; line-height:1.65; transition:background-color .12s;
}
.ph-cand:hover{ background:var(--paper-3); }
.ph-cand.is-sel{ background:var(--accent); color:var(--on-accent); }
.ph-cand.is-raw{ color:var(--ink-2); }
.ph-cand.is-pred{ color:var(--ink-2); }
.ph-cands-hint{ padding:0 8px; font-size:12.5px; color:var(--ink-3); }
.ph-kb{ flex:none; display:flex; flex-direction:column; gap:9px; padding:5px 4px 16px; background:var(--kb-bg); user-select:none; -webkit-user-select:none; }
.ph-row{ display:flex; gap:5px; }
.ph-row.mid{ padding-inline:4.6%; }
.ph-key{
  flex:1 1 0; min-width:0; height:42px; padding:0; border:0; border-radius:7px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:var(--key); color:var(--ink); box-shadow:0 1px 0 var(--key-shadow);
  font:500 17px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition:background-color .1s, transform .1s;
}
.ph-key small{ font-family:var(--font-sans); font-size:9px; line-height:1.2; color:var(--ink-3); min-height:10px; }
.ph-key.fn{ background:var(--key-fn); font-size:14px; }
.ph-key.fn svg{ width:20px; height:20px; }
.ph-key.wide{ flex-grow:1.45; }
.ph-key.space{ flex-grow:4.6; font-size:13px; color:var(--ink-2); }
.ph-key.khan{ font-family:var(--font-sans); font-size:18px; }
.ph-key.is-on{ background:var(--ink); color:var(--paper); }
.ph-key.is-down{ background:var(--paper-3); transform:translateY(1px); box-shadow:none; }
@media (max-width:400px){
  .ph-key{ height:38px; font-size:15px; }
  .ph-key small{ display:none; }
  .bubble{ font-size:16px; }
}

/* ---- How it works: spelling X-ray ------------------------------------------------ */
.xray{ margin-top:clamp(56px,7vw,88px); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px clamp(32px,6vw,96px); align-items:start; }
.xray-field label{ display:block; font-size:14px; font-weight:600; color:var(--ink-2); margin-bottom:10px; }
.xray-input{
  width:100%; padding:14px 18px; border-radius:16px; border:1px solid var(--rule-2); background:var(--surface);
  color:var(--ink); font:500 clamp(22px,2.3vw,28px)/1.3 var(--font-mono); outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.xray-input:focus{ border-color:var(--ink); box-shadow:0 0 0 4px var(--accent-soft); }
.xray-try{ margin-top:16px; font-size:15px; color:var(--ink-3); line-height:2; }
.xray-try button{
  appearance:none; border:0; background:none; padding:0 2px; cursor:pointer; color:var(--ink);
  font:500 15px/1.6 var(--font-mono); text-decoration:underline; text-decoration-color:var(--rule-2); text-underline-offset:.3em;
}
.xray-try button:hover, .xray-try button[aria-pressed="true"]{ text-decoration-color:var(--accent); }
.xray-out{ min-width:0; }
.tokens{ display:flex; flex-wrap:wrap; row-gap:20px; min-height:150px; }
.tok{ display:flex; flex-direction:column; align-items:center; padding:0 clamp(10px,1.4vw,18px); border-left:1px solid var(--rule); min-width:62px; }
.tok:first-child{ border-left:0; padding-left:0; }
.tok-l{ font:500 19px/1.3 var(--font-mono); color:var(--ink-2); }
.tok-line{ width:1px; height:22px; margin:8px 0 2px; background:var(--rule-2); }
.tok-k{ font-size:44px; line-height:1.55; }
.tok-k.is-mark{ font-family:"Siemreap Web", var(--font-sans); }
.tok-t{ font-size:12px; line-height:1.3; color:var(--ink-3); text-align:center; max-width:96px; }
html[data-lang="km"] .tok-t{ font-size:13px; }
.tok.sub .tok-k, .tok.sub .tok-t{ color:var(--accent-text); }
.tok.other .tok-k{ color:var(--ink-3); }
.result{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 22px; margin-top:26px; padding-top:22px; border-top:1px solid var(--rule); }
.result-eq{ color:var(--ink-3); font-size:15px; }
.result-word{ font-size:clamp(54px,7vw,96px); font-weight:700; line-height:1.45; word-break:break-word; }
@media (max-width:860px){ .xray{ grid-template-columns:1fr; } }

/* ---- Spell it your way ---------------------------------------------------------- */
.spell{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:40px clamp(32px,6vw,96px); align-items:center; }
.spell .lead{ margin-top:26px; }
.converge{ position:relative; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:0; min-height:380px; }
.variants{ position:relative; z-index:1; list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.variants li{
  font:500 clamp(17px,1.55vw,21px)/1.3 var(--font-mono); color:var(--ink-2);
  padding:6px 0;
}
.converge svg.lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.converge svg.lines path{ fill:none; stroke:var(--rule-2); stroke-width:1.3; }
.target{ position:relative; z-index:1; justify-self:end; text-align:right; padding-left:24px; }
.target-kh{ display:block; font-size:clamp(68px,8.6vw,128px); font-weight:700; line-height:1.4; }
.target-gl{ display:block; color:var(--ink-3); font-size:16px; }
.word-tabs{ display:flex; flex-wrap:wrap; gap:4px 22px; margin-top:34px; }
.word-tabs button{
  appearance:none; border:0; background:none; padding:4px 0; cursor:pointer; color:var(--ink-3);
  font-size:21px; line-height:1.6; border-bottom:2px solid transparent; transition:color .2s, border-color .2s;
}
.word-tabs button:hover{ color:var(--ink); }
.word-tabs button[aria-pressed="true"]{ color:var(--ink); border-bottom-color:var(--accent); }
@media (prefers-reduced-motion:no-preference){
  .converge.is-swapping .variants li, .converge.is-swapping .target{ opacity:0; transform:translateY(6px); }
  .variants li, .target{ transition:opacity .35s var(--ease), transform .35s var(--ease); }
  .variants li:nth-child(2){ transition-delay:.04s; } .variants li:nth-child(3){ transition-delay:.08s; }
  .variants li:nth-child(4){ transition-delay:.12s; } .variants li:nth-child(5){ transition-delay:.16s; }
  .converge svg.lines path{ transition:opacity .3s; }
  .converge.is-swapping svg.lines path{ opacity:0; }
}
@media (max-width:860px){ .spell{ grid-template-columns:1fr; } .converge{ min-height:320px; } }
@media (max-width:480px){
  .converge{ grid-template-columns:1fr; min-height:0; }
  .converge svg.lines{ display:none; }
  .target{ justify-self:start; text-align:left; padding:22px 0 0; }
  .variants{ flex-direction:row; flex-wrap:wrap; gap:8px 18px; }
  .variants li{ padding:0; margin:0; }
}

/* ---- Feature list ---------------------------------------------------------------- */
.features{ margin-top:clamp(48px,6vw,80px); border-top:1px solid var(--rule); }
.feature{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:10px clamp(32px,6vw,96px);
  padding:30px 0 32px; border-bottom:1px solid var(--rule);
}
.feature p{ margin:0; color:var(--ink-2); max-width:38em; }
@media (max-width:760px){ .feature{ grid-template-columns:1fr; padding:24px 0; } }

/* ---- Dark band: download ------------------------------------------------------- */
.band{ background:var(--band); color:var(--on-band); }
.band .label, .band .lead{ color:var(--on-band-2); }
.band :focus-visible{ outline-color:var(--on-band); }
.band .btn-line{ color:var(--on-band); border-color:var(--band-rule); }
.band .btn-line:hover{ border-color:var(--on-band); }
.band .link{ color:var(--on-band); }
.platforms{ margin-top:clamp(48px,6vw,80px); border-top:1px solid var(--band-rule); }
.platform{
  display:grid; grid-template-columns:52px minmax(0,3.2fr) minmax(0,5fr) minmax(170px,auto);
  gap:12px clamp(20px,3vw,40px); align-items:center; padding:30px 0; border-bottom:1px solid var(--band-rule);
}
.platform svg{ width:34px; height:34px; color:var(--on-band); }
.platform .meta{ display:block; margin-top:3px; font-size:14px; color:var(--on-band-2); font-weight:400; letter-spacing:0; }
.platform p{ margin:0; color:var(--on-band-2); font-size:16px; }
.platform .btn{ justify-self:end; }
.band-foot{ margin-top:36px; }
@media (max-width:900px){
  .platform{ grid-template-columns:40px minmax(0,1fr); align-items:start; }
  .platform svg{ width:28px; height:28px; margin-top:4px; }
  .platform p, .platform .btn{ grid-column:2; }
  .platform .btn{ justify-self:start; margin-top:8px; }
}

/* ---- Alphabet --------------------------------------------------------------------- */
.alpha{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:48px clamp(32px,6vw,96px); align-items:start; }
.alpha .lead{ margin-top:26px; }
.alpha-copy{ position:sticky; top:calc(var(--header) + 40px); }
.letter-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.letter{ position:relative; padding:12px 6px 14px; text-align:center; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); transition:background-color .2s; }
.letter:hover{ background:var(--surface); }
.letter .g{ display:block; font-size:clamp(30px,3.3vw,44px); line-height:1.55; }
.letter .k{ display:block; font:500 14px/1.3 var(--font-mono); color:var(--ink-2); }
.letter .k .alt{ color:var(--ink-3); }
.letter .n{ display:block; margin-top:2px; font-size:11.5px; line-height:1.3; color:var(--accent-text); min-height:15px; }
@media (max-width:860px){ .alpha{ grid-template-columns:1fr; } .alpha-copy{ position:static; } }
@media (max-width:420px){ .letter .n{ display:none; } }

/* ---- FAQ ------------------------------------------------------------------------- */
.faq{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:40px clamp(32px,6vw,96px); align-items:start; }
.faq-list{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  padding:24px 0; font-size:clamp(18px,1.6vw,20px); font-weight:600; line-height:1.45;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pm{ position:relative; flex:none; width:16px; height:16px; margin-top:.4em; }
.faq summary .pm::before, .faq summary .pm::after{
  content:""; position:absolute; left:0; top:7px; width:16px; height:2px; border-radius:2px; background:var(--ink-2);
  transition:transform .25s var(--ease);
}
.faq summary .pm::after{ transform:rotate(90deg); }
.faq details[open] summary .pm::after{ transform:rotate(0); }
.faq .answer{ padding:0 40px 28px 0; color:var(--ink-2); max-width:44em; }
.faq .answer p:last-child{ margin:0; }
@media (max-width:860px){ .faq{ grid-template-columns:1fr; } }

/* ---- Closing ------------------------------------------------------------------- */
.closing{ padding-block:clamp(96px,13vw,180px); border-top:1px solid var(--rule); }
.closing-inner{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px clamp(32px,6vw,96px); align-items:end; }
.closing .display{ font-size:clamp(42px,5.8vw,80px); }
html[data-lang="km"] .closing .display{ font-size:clamp(34px,4.6vw,64px); }
.closing-ctas{ display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; }
@media (max-width:860px){ .closing-inner{ grid-template-columns:1fr; } }

/* ---- Footer ---------------------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--rule); padding:64px 0 40px; font-size:15px; color:var(--ink-2); background:var(--paper); }
.footer-grid{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,2.2fr) minmax(0,2.2fr) minmax(0,3fr); gap:36px clamp(24px,4vw,56px); }
.footer-grid .brand{ margin-bottom:16px; color:var(--ink); }
.footer-grid h2{ margin:0 0 14px; font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); line-height:1.4; }
html[data-lang="km"] .footer-grid h2{ font-size:14.5px; letter-spacing:0; text-transform:none; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.footer-grid a{ text-decoration:none; }
.footer-grid a:hover{ text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:.28em; }
.footer-grid p{ max-width:30em; }
.footer-credits{ font-size:13.5px; color:var(--ink-3); line-height:1.6; }
.footer-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  margin-top:48px; padding-top:22px; border-top:1px solid var(--rule); font-size:13.5px; color:var(--ink-3);
}
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-grid > :first-child{ grid-column:1 / -1; } }

/* ---- Document pages: guide, install ------------------------------------------------ */
.page-hero{ padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,64px); border-bottom:1px solid var(--rule); }
.page-hero .display{ font-size:clamp(42px,5.8vw,80px); }
html[data-lang="km"] .page-hero .display{ font-size:clamp(36px,4.8vw,64px); }
.page-hero .lead{ margin-top:26px; max-width:40em; }
.doc{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(32px,6vw,96px); padding-block:clamp(48px,6vw,80px) clamp(96px,10vw,140px); }
.toc{ position:sticky; top:calc(var(--header) + 32px); align-self:start; font-size:15px; }
.toc p{ margin:0 0 12px; font-size:13px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); }
html[data-lang="km"] .toc p{ font-size:14.5px; letter-spacing:0; text-transform:none; }
.toc a{
  display:block; padding:6px 0 6px 16px; border-left:2px solid var(--rule); text-decoration:none; color:var(--ink-3);
  line-height:1.45; transition:color .2s, border-color .2s;
}
.toc a:hover{ color:var(--ink); }
.toc a.is-active{ color:var(--ink); border-left-color:var(--accent); }
.doc-body{ min-width:0; max-width:780px; }
.doc-section{ padding-bottom:clamp(56px,6vw,80px); margin-bottom:clamp(56px,6vw,80px); border-bottom:1px solid var(--rule); }
.doc-section:last-child{ border-bottom:0; margin-bottom:0; padding-bottom:0; }
.doc-section > h2{ font-size:clamp(28px,3vw,40px); letter-spacing:-.028em; margin-bottom:18px; }
html[data-lang="km"] .doc-section > h2{ font-size:clamp(25px,2.6vw,34px); letter-spacing:0; }
.doc-section > h3{ font-size:19px; margin:36px 0 12px; letter-spacing:-.01em; }
.doc-section p, .doc-section li{ color:var(--ink-2); }
.doc-section strong{ color:var(--ink); }
.doc-section .platform-line{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin:26px 0 8px; }
.doc-section .platform-line .meta{ color:var(--ink-3); font-size:14.5px; }
.steps{ counter-reset:step; list-style:none; margin:26px 0; padding:0; }
.steps li{ counter-increment:step; position:relative; padding:0 0 18px 50px; }
.steps li::before{
  content:counter(step, decimal-leading-zero); position:absolute; left:0; top:.2em;
  font:500 14px/1.6 var(--font-mono); color:var(--ink-3);
}
html[data-lang="km"] .steps li::before{ content:counter(step, khmer); font:700 17px/1.5 var(--font-sans); top:.1em; }
.note{ margin:22px 0; padding:2px 0 2px 20px; border-left:2px solid var(--accent); color:var(--ink-2); }
.note.quiet{ border-left-color:var(--rule-2); }
.compare{ width:100%; border-collapse:collapse; margin:20px 0 6px; font-size:16px; }
.compare th, .compare td{ text-align:left; vertical-align:top; padding:14px 18px 14px 0; border-bottom:1px solid var(--rule); }
.compare th{ font-size:13px; font-weight:600; color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase; }
html[data-lang="km"] .compare th{ font-size:14.5px; letter-spacing:0; text-transform:none; }
.compare td:first-child{ font-weight:600; color:var(--ink); }
@media (max-width:900px){ .doc{ grid-template-columns:1fr; } .toc{ display:none; } }

/* guide tables */
.chart{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); border-top:1px solid var(--rule); border-left:1px solid var(--rule); margin:24px 0 10px; }
.chart.cols-5{ grid-template-columns:repeat(5,minmax(0,1fr)); }
.cell{ padding:14px 8px 14px; text-align:center; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.cell .g{ display:block; font-size:38px; line-height:1.55; }
.cell .g.mark{ font-family:"Siemreap Web", var(--font-sans); }
.cell .k{ display:block; font:500 15px/1.35 var(--font-mono); color:var(--ink); }
.cell .k .alt{ color:var(--ink-3); }
.cell .n{ display:block; margin-top:4px; font-size:12px; line-height:1.35; color:var(--ink-3); }
.examples{ list-style:none; margin:18px 0; padding:0; border-top:1px solid var(--rule); }
.examples li{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid var(--rule); }
.examples .in{ font:500 18px/1.4 var(--font-mono); color:var(--ink); }
.examples .to{ color:var(--ink-3); }
.examples .out{ font-size:30px; line-height:1.5; }
.examples .why{ grid-column:1 / -1; margin-top:-6px; font-size:14.5px; color:var(--ink-3); }
@media (max-width:560px){ .chart.cols-5{ grid-template-columns:repeat(4,minmax(0,1fr)); } .cell .g{ font-size:32px; } }

/* ---- 404 ---------------------------------------------------------------------- */
.lost{ min-height:calc(100dvh - var(--header) - 180px); display:grid; align-content:center; padding-block:80px; }
.lost .big{ margin:0 0 12px; font-size:clamp(120px,22vw,260px); font-weight:700; line-height:.8; color:var(--paper-3); }

/* ---- Reveal on scroll (only when JS ran and motion is welcome) ----------------- */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .js .reveal.is-in{ opacity:1; transform:none; }
}