/* Thai = Noto Sans Thai (Audi 2026-10-25: "ตัวหนามันเตี้ยอ้วน" → picked C), English = Google Sans. Thai-only range so Latin falls through to Google Sans. */
@font-face{font-family:'AK Thai';src:url('/assets/fonts/noto-sans-thai.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0E01-0E5B,U+200C-200D,U+25CC}
/* ak-ui.css — shared AUDIKUNG page components (the Home look, 2026-10-16).
   Audi: "ช่วยจำ design เหล่านี้ไปใช้กับหน้าอื่นๆด้วย เพราะตอนนี้เว็ปเราหน้าตาดูไม่ค่อยเหมือนกันเลย".
   Spec and rules: Design.md §16. Opt-in per page: <link rel="stylesheet" href="/assets/ak-ui.css">.
   Everything is namespaced .aku-* / --aku-* (distinct from the older ak-paper.css / about-v8 --ak-* names) so loading it never restyles a page by itself. */
:root{
  --aku-night:#081326; --aku-night-2:#0d1d38; --aku-day:#eef2f8;
  --aku-ink:#1b2d44; --aku-ink-2:#435167; --aku-on-night:#f0f2f8; --aku-on-night-2:#c9d2e3;
  --aku-paper:#fffdfa; --aku-paper-2:#fffaf0; --aku-paper-line:#cfbf9f;
  --aku-gold:#E5C586; --aku-gold-ink:#172b43; --aku-gold-line:#a58b52;
  --aku-w-about:#ee765d; --aku-w-finance:#10b981; --aku-w-knowledge:#3b82f6; --aku-w-focus:#14b8a6; --aku-w-interests:#a855f7; --aku-w-contact:#06c755;
  --aku-radius:14px; --aku-ease:cubic-bezier(.16,1,.3,1);
  --aku-font-head:'AK Thai','Google Sans','Outfit','Plus Jakarta Sans','Sarabun',system-ui,sans-serif; --aku-font-body:'AK Thai','Google Sans','Plus Jakarta Sans','Sarabun',system-ui,sans-serif; /* Google Sans = Thai+Latin one family, Audi 2026-10-25 "1. b" (Fastwork font); max weight 700 */
}
/* section heading: one emoji eyebrow + plain heading (never gradient text) */
.aku-eyebrow{display:inline-flex;align-items:center;gap:6px;font:600 .95rem/1.4 var(--aku-font-body);color:var(--aku-on-night-2)}
.aku-title{margin:8px 0 10px;font:700 clamp(1.9rem,3.6vw,3rem)/1.2 var(--aku-font-head);color:var(--aku-on-night);text-wrap:balance}
.aku-lede{margin:0;max-width:62ch;font:400 1.05rem/1.7 var(--aku-font-body);color:var(--aku-on-night-2)}
html[data-theme=light] .aku-eyebrow{color:var(--aku-ink-2)}
html[data-theme=light] .aku-title{color:var(--aku-ink)}
html[data-theme=light] .aku-lede{color:var(--aku-ink-2)}

/* reading surface: cream paper with a 3D bottom edge, upright (no rotate on text boxes) */
.aku-paper{background:var(--aku-paper);color:var(--aku-ink);border:1px solid var(--aku-paper-line);border-bottom:4px solid var(--aku-paper-line);border-radius:var(--aku-radius);padding:clamp(18px,2.4vw,28px)}
.aku-paper :is(h2,h3,h4){color:var(--aku-ink);font-family:var(--aku-font-head)}
.aku-paper p{color:var(--aku-ink-2);font:400 1rem/1.65 var(--aku-font-body)}

/* buttons: one gold primary per area, quiet secondary, red-outline danger; 44px targets */
.aku-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:8px;border:1px solid #708298;background:#fff;color:var(--aku-ink);font:600 1rem/1.2 var(--aku-font-body);text-decoration:none;cursor:pointer;transition:translate 160ms var(--aku-ease),background 160ms ease,border-color 160ms ease}
.aku-btn:hover{border-color:var(--aku-ink)}
.aku-btn:active{translate:0 2px}
.aku-btn:focus-visible{outline:3px solid var(--aku-gold);outline-offset:3px}
.aku-btn-primary{background:var(--aku-gold);color:var(--aku-gold-ink);border-color:var(--aku-gold-line);border-bottom-width:3px}
.aku-btn-primary:hover{background:#efd59a;border-color:#8a6a1f}
.aku-btn-danger{color:#9b2c1f;border-color:#b84a3a}
.aku-on-night .aku-btn:not(.aku-btn-primary){background:linear-gradient(135deg,#3b3329 0%,#241e18 100%);color:#fef3c7;border-color:rgba(229,197,134,.62);box-shadow:0 4px 12px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.12)}
.aku-on-night .aku-btn:not(.aku-btn-primary):hover{background:linear-gradient(135deg,#524637 0%,#332a21 100%);color:#ffffff;border-color:#fde68a}

/* door / route card: tinted emoji tile + title + subtitle + round arrow that turns gold */
.aku-doors{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.aku-door{--aku-tint:#e8eef6;display:grid;grid-template-columns:56px minmax(0,1fr) 44px;align-items:center;gap:14px;padding:18px;background:var(--aku-paper);color:var(--aku-ink);border:1px solid var(--aku-paper-line);border-bottom:4px solid var(--aku-paper-line);border-radius:var(--aku-radius);text-decoration:none;transition:translate 240ms var(--aku-ease),border-color 240ms,background 240ms}
.aku-door-icon{width:56px;height:56px;display:grid;place-items:center;border-radius:14px;background:var(--aku-tint);font-size:1.7rem;line-height:1}
.aku-door strong{display:block;font:600 1.15rem/1.4 var(--aku-font-head);color:var(--aku-ink)}
.aku-door small{display:block;font:400 .98rem/1.55 var(--aku-font-body);color:var(--aku-ink-2)}
.aku-door-arrow{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid #8e9bad;background:#fff;color:var(--aku-ink)}
.aku-door:is(:hover,:focus-visible){translate:0 -4px;border-color:var(--aku-gold-line);background:var(--aku-paper-2)}
.aku-door:is(:hover,:focus-visible) .aku-door-arrow{background:var(--aku-gold);border-color:var(--aku-gold-line);color:var(--aku-gold-ink)}
.aku-door:focus-visible{outline:3px solid var(--aku-gold);outline-offset:3px}
.aku-door[data-world=finance]{--aku-tint:#dcf1e5}.aku-door[data-world=knowledge]{--aku-tint:#dde8fb}.aku-door[data-world=focus]{--aku-tint:#d7f3ef}
.aku-door[data-world=interests]{--aku-tint:#efe2f3}.aku-door[data-world=about]{--aku-tint:#fde4dc}.aku-door[data-world=gold]{--aku-tint:#fbedc9}

/* chip / pill status */
.aku-chip{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 12px;border-radius:999px;font:600 .9rem/1.2 var(--aku-font-body);background:#fef3c7;color:#92400e;border:1px solid #f59e0b}

/* mascot sticker: die-cut PNG (Scripts/web/sticker_diecut.py), one pose per section, gentle float */
.aku-sticker{display:block;object-fit:contain;filter:drop-shadow(0 4px 0 #07152b22);animation:aku-float 4.8s ease-in-out infinite}
@keyframes aku-float{0%,100%{translate:0 0}50%{translate:0 -6px}}

@media(prefers-reduced-motion:reduce){.aku-btn,.aku-door{transition:none}.aku-door:is(:hover,:focus-visible){translate:none}.aku-sticker{animation:none}}
html[data-motion=paused] :is(.aku-sticker){animation:none}
html[data-motion=paused] .aku-door:is(:hover,:focus-visible){translate:none}
@media(max-width:720px){.aku-door{grid-template-columns:48px minmax(0,1fr) 40px;gap:12px;padding:14px}.aku-door-icon{width:48px;height:48px;font-size:1.45rem}.aku-door-arrow{width:40px;height:40px}}

/* 16.2 Object finish — B · leather cover + paper page (Audi 2026-10-17 chose "แบบB": "diary เป็นสี luxury blue ไม่สวย … ควรเปลี่ยนสี default").
   Replaces the navy-slate Midnight Luxe. Same language as the About diary door: a leather frame with stitching, warm paper inside, dark ink, both themes.
   Opt-in: give a section's real object .aku-object; pick the cover by the object's job: default oxblood (personal / write-to-Audi),
   .aku-object--cognac (research, tools), .aku-object--cloth (visitors write to each other, guestbook).
   The part that must stand out gets .aku-object-gold (gold label); a button sitting on gold gets .aku-object-btn. */
:root{--aku-cv-a:#7a2e3e;--aku-cv-b:#3e1520;--aku-paper-a:#fffaf0;--aku-paper-b:#f6eedb;--aku-paper-c:#efe4cb;--aku-lux-ink:#2a2118;--aku-lux-ink2:#5a4a36;
  --aku-lux-gold-a:#f2e1b4;--aku-lux-gold-b:#c9ab6c;--aku-lux-gold-ink:#2b2212;--aku-stitch:rgba(229,197,134,.62);
  --aku-lux-foil:linear-gradient(135deg,#f2e1b4 0%,#a8853f 32%,#f6e6bd 55%,#8f6d2e 80%,#e9d3a0 100%)}
.aku-object--cognac{--aku-cv-a:#8a4b2a;--aku-cv-b:#4a2414}
.aku-object--cloth{--aku-cv-a:#2f6b4f;--aku-cv-b:#163a2a}
.aku-object{color:var(--aku-lux-ink);border:14px solid transparent;border-radius:16px;outline:1.5px dashed var(--aku-stitch);outline-offset:-8px;
  background:radial-gradient(140% 90% at 50% 0%,var(--aku-paper-a),var(--aku-paper-b) 70%,var(--aku-paper-c)) padding-box,radial-gradient(120% 80% at 18% 0%,rgba(255,214,190,.2),transparent 55%) border-box,linear-gradient(160deg,var(--aku-cv-a),var(--aku-cv-b)) border-box;
  background-color:var(--aku-paper-b);box-shadow:0 34px 60px -30px rgba(0,0,0,.85),inset 0 0 0 1px rgba(90,60,25,.25)}
html[data-theme=light] .aku-object{box-shadow:0 28px 50px -30px rgba(62,21,32,.5),inset 0 0 0 1px rgba(90,60,25,.25)}
.aku-object :is(p,small,.aku-muted){color:var(--aku-lux-ink2)}
.aku-object :is(input,textarea,select){background:#fffdf7;color:var(--aku-lux-ink);border:1.5px solid #c9ab6c;color-scheme:light}
.aku-object :is(input,textarea)::placeholder{color:#7a6a52}
.aku-object-gold{color:var(--aku-lux-gold-ink);background:linear-gradient(115deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 38%),linear-gradient(180deg,var(--aku-lux-gold-a),var(--aku-lux-gold-b))}
.aku-object-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:10px;border:1px solid #3e1520;background:#5a1f2c;color:#f4dfa8;font:600 1rem/1.3 var(--aku-font-body);text-decoration:none;box-shadow:0 3px 0 #0a1428;transition:translate 160ms var(--aku-ease)}
.aku-object-btn:active{translate:0 2px}
@media(prefers-reduced-motion:reduce){.aku-object-btn{transition:none}}

/* ── Web Standard v2 tokens + box roles (Audi 2026-10-24) ─────────────────────────────────────────────
   Spec: impeccable SKILL.md §1 + Design.md §0. Fonts = Home set only (Audi: "เอาตัวเดียวกับหน้าhomeก็ได้").
   Dark = night sky, light = dawn harbour (Audi: "ท้องฟ้ากลางคืนสำหรับdark mode … light mode … ท่าเรือต้นเช้า"); values = what
   home-astra.css renders today. Boxes only for things you can press and key data, the rest is a boxless zone, filters are
   grouped one type per labelled group (Audi: "กล่องเฉพาะของที่กดได้และข้อมูลหลัก ที่เหลือไม่มีกล่อง … filterคนละประเภทมากองรวมกันจนงง").
   Pages use these vars; tests/design-lock.test.mjs ratchets raw hex and off-list fonts so the counts only go down. */
:root{
  --aku-font-mono:'JetBrains Mono',ui-monospace,monospace;
  --aku-sky-1:#09172d;--aku-sky-2:#10233f;--aku-sky-3:#081326;--aku-sun:#f4cd71;
  --aku-text:#f4f6fc;--aku-copy:#bdcde2;--aku-line:#455e7e;
  --aku-primary:#e6bf6f;--aku-primary-ink:#172b43;--aku-accent:#91dfba;
  --aku-good:#4ade80;--aku-bad:#f87171;--aku-warn:#fbbf24;
  --aku-r1:#f2c766;--aku-r2:#f472b6;--aku-r3:#34d399;--aku-r4:#c084fc;--aku-r5:#fb923c;--aku-r6:#fb7185; /* rainbow tab hues (Audi 2026-10-24) */
  --aku-good-ink:#15803d;--aku-bad-ink:#b91c1c;--aku-warn-ink:#92400e;
  --aku-sky:linear-gradient(var(--aku-sky-1),var(--aku-sky-2) 750px,var(--aku-sky-3));
}
html[data-theme=light]{
  --aku-r1:#a16207;--aku-r2:#be185d;--aku-r3:#0f8a5f;--aku-r4:#7e22ce;--aku-r5:#c2410c;--aku-r6:#be123c;
  --aku-sky-1:#d6eafb;--aku-sky-2:#f5f8f9;--aku-sky-3:#eaf1f8;
  --aku-text:#142f49;--aku-copy:#3d546c;--aku-line:#9eb4c9;--aku-accent:#16744e;
  --aku-good:#15803d;--aku-bad:#b91c1c;--aku-warn:#92400e;
}
/* page base: SOLID colour so site-shell.js injects the shared .ak-sky (North Star, stars, comets, clouds/sun).
   A gradient background-image here blocks the sky (2026-10-24 miss: specimen shipped plain; Audi: "พื้นหลังตอนแรกมันไม่ใช่plainแบบนี้ … มีดาวเหนือ ดาวตก เมฆ"). */
.aku-page{background-color:var(--aku-sky-3);color:var(--aku-text);font-family:var(--aku-font-body)}
html[data-theme=light] .aku-page{background-color:var(--aku-sky-2)}

/* ── Home-language components (Audi 2026-10-24: "ตอนนี้อาจะมีหน้าhomeหน้าเดียวเลยที่ฉันพอชอบ") ──
   Each one copies what audikung.com Home renders: picture-led, world colour = importance, short headings. */

/* section head: eyebrow chip + big short title (2–5 words, a content name) + 1-line sub */
.aku-head{display:grid;gap:10px;margin:0 0 26px}
.aku-head-chip{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--aku-tone,var(--aku-primary)) 60%,transparent);background:color-mix(in srgb,var(--aku-tone,var(--aku-primary)) 14%,transparent);color:var(--aku-tone,var(--aku-primary));font:600 .92rem/1.3 var(--aku-font-body)}
.aku-head-title{display:flex;align-items:center;gap:14px;margin:0;font:700 clamp(2rem,4.2vw,3rem)/1.15 var(--aku-font-head);color:var(--aku-text);letter-spacing:-.01em}
.aku-head-sub{margin:0;max-width:60ch;font:400 1.05rem/1.6 var(--aku-font-body);color:var(--aku-copy)}
html[data-theme=light] .aku-head-chip{color:color-mix(in srgb,var(--aku-tone,#8a6414) 75%,#142f49)}

/* role 1a · big entrance (clickable): mascot on a glowing world-colour ellipse + title + round arrow, NO box (Home worlds) */
.aku-portals{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px 22px}
.aku-portal{--w:#10b981;position:relative;display:grid;grid-template-columns:1fr 44px;gap:4px 10px;color:var(--aku-text);text-decoration:none}
.aku-portal[data-world=finance]{--w:#10b981}.aku-portal[data-world=knowledge]{--w:#3b82f6}.aku-portal[data-world=focus]{--w:#c9a227}.aku-portal[data-world=interests]{--w:#c2415b}.aku-portal[data-world=about]{--w:#ee765d}
.aku-portal-visual{grid-column:1/-1;position:relative;height:190px;display:grid;place-items:end center;margin-bottom:10px}
.aku-portal-visual::before{content:"";position:absolute;left:4%;right:4%;bottom:0;height:62%;border-radius:50%;background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--w) 62%,#0b1a33),color-mix(in srgb,var(--w) 26%,#0b1a33) 72%);border:2px solid color-mix(in srgb,var(--w) 55%,#f4e3b0);box-shadow:0 0 40px -6px color-mix(in srgb,var(--w) 70%,transparent);transition:box-shadow 300ms var(--aku-ease),scale 300ms var(--aku-ease)}
.aku-portal-visual img{position:relative;width:min(170px,80%);height:auto;margin-bottom:12px;filter:drop-shadow(0 8px 10px #0006);transition:translate 300ms var(--aku-ease),rotate 300ms var(--aku-ease)}
.aku-portal-title{align-self:center;display:flex;align-items:center;gap:8px;font:700 1.4rem/1.3 var(--aku-font-head);color:var(--aku-text)}
.aku-portal-sub{grid-column:1;font:400 .98rem/1.5 var(--aku-font-body);color:var(--aku-copy)}
.aku-portal-arrow{grid-column:2;grid-row:2/4;align-self:center;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:1.5px solid var(--aku-line);color:var(--aku-text);font-size:1.05rem;transition:background 240ms,border-color 240ms,color 240ms,rotate 240ms}
.aku-portal:is(:hover,:focus-visible) .aku-portal-visual::before{scale:1.04;box-shadow:0 0 64px 0 color-mix(in srgb,var(--w) 85%,transparent)}
.aku-portal:is(:hover,:focus-visible) .aku-portal-visual img{translate:0 -8px;rotate:-4deg}
.aku-portal:is(:hover,:focus-visible) .aku-portal-arrow{background:var(--aku-primary);border-color:var(--aku-primary);color:var(--aku-primary-ink);rotate:-12deg}
.aku-portal:focus-visible{outline:3px solid var(--aku-primary);outline-offset:6px;border-radius:12px}
html[data-theme=light] .aku-portal-visual::before{background:radial-gradient(ellipse at 50% 38%,color-mix(in srgb,var(--w) 45%,#ffffff),color-mix(in srgb,var(--w) 22%,#ffffff) 72%);border-color:color-mix(in srgb,var(--w) 60%,#ffffff)}

/* role 1b · small clickable item: pinned paper note, tone = meaning, tilted ±1° and straightens on hover (Home "ประกาศ") */
.aku-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:24px}
.aku-note{--n:#e8f6ec;--n-line:#9fd3b0;--n-ink:#163a28;position:relative;display:grid;align-content:start;gap:8px;padding:26px 18px 16px;background:var(--n);color:var(--n-ink);border:1px solid var(--n-line);border-bottom:4px solid var(--n-line);border-radius:6px;text-decoration:none;rotate:-1.2deg;box-shadow:0 18px 30px -18px #000c;transition:rotate 260ms var(--aku-ease),translate 260ms var(--aku-ease)}
.aku-note:nth-child(2n){rotate:1deg}
.aku-note[data-tone=blue]{--n:#eaf1fc;--n-line:#a9c1ea;--n-ink:#16305a}.aku-note[data-tone=gold]{--n:#fdf3d2;--n-line:#e3c56f;--n-ink:#4a3508}
.aku-note::before{content:"";position:absolute;top:-9px;left:50%;translate:-50% 0;width:46px;height:16px;border-radius:4px;background:color-mix(in srgb,var(--n-line) 85%,#fff);box-shadow:0 2px 0 #0002}
.aku-note-tag{font:600 .82rem/1.3 var(--aku-font-body);opacity:.85}
.aku-note strong{font:700 1.12rem/1.4 var(--aku-font-head)}
.aku-note small{font:400 .95rem/1.55 var(--aku-font-body);opacity:.9}
.aku-note-go{margin-top:4px;font:600 .9rem/1.3 var(--aku-font-body);text-decoration:underline;text-underline-offset:3px}
.aku-note:is(:hover,:focus-visible){rotate:0deg;translate:0 -4px}
.aku-note:focus-visible{outline:3px solid var(--aku-primary);outline-offset:3px}

/* role 2 · key data: inside a world object (leather folio .aku-object) as score pill + meter bars; colour = good/bad and a word beside it */
.aku-meters{display:grid;gap:10px;margin:14px 0}
.aku-meter{display:grid;grid-template-columns:minmax(90px,150px) 1fr 44px;align-items:center;gap:12px;font:500 .95rem/1.3 var(--aku-font-body)}
.aku-meter-bar{height:9px;border-radius:99px;background:#e6dcc6;overflow:hidden}
.aku-meter-bar i{display:block;height:100%;width:var(--v,50%);border-radius:inherit;background:var(--aku-good-ink)}
.aku-meter[data-level=mid] .aku-meter-bar i{background:#e08a12}.aku-meter[data-level=bad] .aku-meter-bar i{background:var(--aku-bad-ink)}
.aku-meter b{text-align:right;font:700 .95rem/1 var(--aku-font-mono)}
.aku-score{display:inline-flex;align-items:baseline;gap:4px;padding:3px 12px;border-radius:999px;background:var(--aku-good-ink);color:#fff;font:700 1rem/1.3 var(--aku-font-head)}
.aku-score small{font:500 .78rem/1 var(--aku-font-body);color:inherit!important;opacity:.85}

/* role 3 · everything else: no box. A zone = head + space, a faint hairline between zones */
.aku-zone{padding-block:clamp(36px,6vw,72px);background:none;border:0}
.aku-zone+.aku-zone{border-top:1px solid color-mix(in srgb,var(--aku-line) 55%,transparent)}
.aku-zone-label{display:block;margin:0 0 12px;font:600 .9rem/1.4 var(--aku-font-body);color:var(--aku-copy)}

/* role 4 · filters (round 2, Audi 2026-10-24: "ตัวกรอง เอาแบบA แต่ เอาลุกเล่นจากB C มาใช้"):
   one group per filter type, each group its own colour family with a numbered label (like 0DTE #tabList);
   options = emoji + text, the active one gets a glowing underline + soft glow; emoji wiggles on hover; optional count chip.
   Replaces the rejected slim segmented bar .aku-seg (tombstone 2026-10-24). */
.aku-filterbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px 0}
.aku-filter-group{--g:#f2c766;display:grid;gap:8px;padding:0 24px;border-left:1px solid rgba(255,255,255,.1)}
.aku-filter-group:first-child{padding-left:0;border-left:0}
.aku-filter-group[data-g=green]{--g:#34d399}.aku-filter-group[data-g=blue]{--g:#60a5fa}.aku-filter-group[data-g=rose]{--g:#f472b6}.aku-filter-group[data-g=gold]{--g:#f2c766}.aku-filter-group[data-g=purple]{--g:#c084fc}
.aku-filter-label{display:flex;align-items:center;gap:8px;font:700 .9rem/1.2 var(--aku-font-body);color:var(--g)}
.aku-filter-label .n{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--g) 22%,transparent);border:1px solid color-mix(in srgb,var(--g) 60%,transparent);font:700 .78rem/1 var(--aku-font-head)}
.aku-filter-row{display:flex;flex-wrap:wrap;gap:4px}
.aku-ftab{position:relative;display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:6px 12px 9px;border:0;border-radius:10px;background:none;color:color-mix(in srgb,var(--g) 72%,var(--aku-text));font:600 1rem/1.2 var(--aku-font-body);cursor:pointer;transition:color 180ms,background 180ms}
.aku-ftab .em{display:inline-block;transition:scale 220ms var(--aku-ease),rotate 220ms}
.aku-ftab::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;border-radius:3px;background:var(--g);box-shadow:0 0 10px 1px var(--g);scale:.32 1;opacity:.55;transition:scale 240ms var(--aku-ease),opacity 240ms}
/* colour at rest + short underline (Audi 2026-10-24: "แท็บขีดเส้นใต้ แต่ว่าช่วงแบ่งประเภท และสีเหมือนปุ่มสีรุ้ง") */
.aku-ftab:hover::after{scale:.7 1;opacity:.85}
html[data-theme=light] .aku-ftab{color:color-mix(in srgb,var(--g) 55%,var(--aku-text))}
.aku-ftab:hover{color:var(--aku-text);background:color-mix(in srgb,var(--g) 8%,transparent)}
.aku-ftab:hover .em{scale:1.18;rotate:-8deg}
.aku-ftab[aria-pressed=true]{color:var(--aku-text);background:radial-gradient(60% 90% at 50% 100%,color-mix(in srgb,var(--g) 22%,transparent),transparent 80%)}
.aku-ftab[aria-pressed=true]::after{scale:1 1;opacity:1}
.aku-ftab .cnt{font:700 .78rem/1 var(--aku-font-mono);padding:2px 6px;border-radius:99px;background:color-mix(in srgb,var(--g) 20%,transparent);color:var(--g)}
.aku-ftab:focus-visible{outline:2px solid var(--g);outline-offset:2px}
html[data-theme=light] .aku-filter-group{border-left-color:rgba(20,47,73,.14)}
html[data-theme=light] .aku-filter-group[data-g=green]{--g:#0f8a5f}html[data-theme=light] .aku-filter-group[data-g=blue]{--g:#2563eb}html[data-theme=light] .aku-filter-group[data-g=rose]{--g:#be185d}html[data-theme=light] .aku-filter-group[data-g=gold]{--g:#a16207}html[data-theme=light] .aku-filter-group[data-g=purple]{--g:#7e22ce}
@media(max-width:720px){.aku-filter-group{padding:0;border-left:0}.aku-filterbar{gap:16px}}

/* buttons · APPROVED 2026-10-24 (Audi: "A+ ดีขึ้น" · secondary: "เอาดูตัวอย่างของaหรือBมาก็ได้").
   Primary .aku-cta = colour of its destination (data-to), 40px, glossy top + 3D bottom edge, light sweep + sparkle at rest,
   lift + glint + icon tilt + arrow fly-out on hover, sinks on press. Icon badge: any of real logo · 16-bit sprite · sticker/mascot · emoji (pick what fits), always on the white badge.
   Secondary .aku-cta--ghost = same hue, outline pill + arrow disc, glints on hover. Labels measured ≥4.5:1. */
.aku-cta{--c:#f9df97;--c2:#dba94a;--edge:#a8771f;--ink:#2a1c03;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 12px;border-radius:999px;text-decoration:none;font:650 .95rem/1 var(--aku-font-body);color:var(--ink);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 85%,#fff) 0%,var(--c) 38%,var(--c2) 100%);border:1px solid color-mix(in srgb,var(--c) 55%,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 color-mix(in srgb,var(--edge) 55%,transparent),0 3px 0 var(--edge),0 10px 18px -10px var(--c);cursor:pointer;transition:translate 200ms var(--aku-ease),box-shadow 200ms,filter 200ms}
/* colour follows the destination or the page's own world; no data-to = site gold, never an automatic green (Audi 2026-10-24: "ไม่ได้บังคับว่าต้องเป็นสีเขียวด้วย สีเขียวมันอาจจะแปลกในบางหน้า") */
.aku-cta[data-to=finance]{--c:#4ade80;--c2:#22c55e;--edge:#15803d;--ink:#052e16}
.aku-cta[data-to=focus]{--c:#5eead4;--c2:#2cc4ad;--edge:#0f766e;--ink:#042f2a}
.aku-cta[data-to=interests]{--c:#f9a8b8;--c2:#e8718a;--edge:#9d2f47;--ink:#3a0812}
.aku-cta[data-to=about]{--c:#ffb59e;--c2:#f08466;--edge:#b84a35;--ink:#3a1206}
/* call-to-action tones that should pull a click (Audi 2026-10-25: "watchlistปุ่ม สีชมพู สมาชิกสีเหลือง … ทำให้มันเด่นๆและมีขยับเล็กน้อย") */
.aku-cta[data-to=watch]{--c:#ffa8d0;--c2:#f465a8;--edge:#a3245f;--ink:#3d0620}
.aku-cta[data-to=member]{--c:#ffe36e;--c2:#f6c516;--edge:#a87b00;--ink:#2a1c00}
.aku-cta:is([data-to=watch],[data-to=member]):not(.aku-cta--ghost){animation:akuCtaNudge 3.2s var(--aku-ease) infinite}
.aku-cta:is([data-to=watch],[data-to=member]):not(.aku-cta--ghost):hover{animation:none}
.aku-cta:is([data-to=watch],[data-to=member]):not(.aku-cta--ghost) .aku-cta-ar span{animation:akuCtaPoke 3.2s var(--aku-ease) infinite}
@keyframes akuCtaNudge{0%,62%,100%{translate:0 0;filter:none}70%{translate:0 -3px;filter:brightness(1.08) drop-shadow(0 0 10px var(--c))}78%{translate:0 0}84%{translate:0 -1.5px}90%{translate:0 0}}
@keyframes akuCtaPoke{0%,62%,100%{translate:0 0}72%{translate:3px 0}80%{translate:0 0}}
.aku-cta[data-to=ai]{--c:#7cb6ff;--c2:#4f8ff0;--edge:#2456b8;--ink:#071a3a}
.aku-cta[data-to=discord]{--c:#5560ee;--c2:#3f47d6;--edge:#262c9e;--ink:#fff}
.aku-cta[data-to=line]{--c:#3ee07a;--c2:#06c755;--edge:#04893a;--ink:#052c16}
.aku-cta[data-to=gold]{--c:#f9df97;--c2:#dba94a;--edge:#a8771f;--ink:#2a1c03}
.aku-cta[data-to=diary]{--c:#a34f5d;--c2:#6b2532;--edge:#3e1520;--ink:#fde9c4}
.aku-cta-ic{position:relative;display:grid;place-items:center;width:26px;height:26px;margin-left:-4px;border-radius:50%;background:#fff;font-size:.85rem;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:translate 300ms var(--aku-ease),rotate 300ms var(--aku-ease)}
.aku-cta-ic img{width:15px;height:15px}
.aku-cta-ic>[data-ak-px]{position:absolute;inset:0;margin:auto;display:block;width:18px;height:18px;line-height:0}
.aku-cta-ar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.35);overflow:hidden;font:800 .85rem/1 var(--aku-font-body);transition:background 220ms,color 220ms}
.aku-cta-ar span{display:block}
.aku-cta-tx{line-height:1.6} /* Thai tone marks and vowels above/below the line must never be clipped */
.aku-cta::before{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.65) 50%,transparent 60%);translate:-130% 0;animation:akuCtaSweep 4.2s cubic-bezier(.45,0,.2,1) infinite}
.aku-cta::after{content:"✦";position:absolute;top:3px;left:0;font-size:.6rem;color:#fff;text-shadow:0 0 6px #fff;opacity:0;animation:akuCtaSpark 4.2s cubic-bezier(.45,0,.2,1) infinite;pointer-events:none}
@keyframes akuCtaSweep{0%,58%{translate:-130% 0}88%,100%{translate:130% 0}}
@keyframes akuCtaSpark{0%,60%{opacity:0;translate:10px 0;scale:.5}70%{opacity:1;scale:1}86%{opacity:0;translate:calc(var(--w,180px) - 20px) 0;scale:.6}100%{opacity:0}}
@keyframes akuCtaGlint{from{translate:-130% 0}to{translate:130% 0}}
@keyframes akuCtaArrow{0%{translate:0 0}45%{translate:140% -140%}46%{translate:-140% 140%}100%{translate:0 0}}
.aku-cta:hover{translate:0 -2px;filter:saturate(1.08) brightness(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 0 color-mix(in srgb,var(--edge) 55%,transparent),0 5px 0 var(--edge),0 16px 26px -12px var(--c)}
.aku-cta:hover::before{animation:akuCtaGlint 600ms ease-out}
.aku-cta:hover .aku-cta-ic{rotate:-12deg;translate:0 -1px}
.aku-cta:hover .aku-cta-ar{background:#fff;color:var(--edge)}
.aku-cta:hover .aku-cta-ar span{animation:akuCtaArrow 520ms var(--aku-ease)}
.aku-cta:active{translate:0 2px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 0 var(--edge),0 4px 10px -8px var(--c)}
.aku-cta:focus-visible{outline:3px solid #fff;outline-offset:4px}
.aku-cta--ghost{--t:#fde68a;color:var(--t);background:rgba(255,255,255,.04);border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent);box-shadow:none;padding-left:14px}
.aku-cta--ghost::after{display:none}
/* at rest: a slow, faint glint every ~6s (button floor: a static button is not done; Audi 2026-10-24 "ไม่มีลูกเล่นอะไรเลย ตอนhover หรือตอนอยู่เฉยๆ") */
.aku-cta--ghost::before{animation:akuCtaSweep 6s cubic-bezier(.45,0,.2,1) infinite;background:linear-gradient(100deg,transparent 40%,color-mix(in srgb,var(--c) 35%,transparent) 50%,transparent 60%)}
.aku-cta--ghost .aku-cta-ar{background:color-mix(in srgb,var(--c) 22%,transparent)}
.aku-cta--ghost:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent);filter:none}
.aku-cta--ghost:hover .aku-cta-ar{background:color-mix(in srgb,var(--c) 45%,transparent);color:inherit}
.aku-cta--ghost:active{box-shadow:none}
.aku-cta--ghost[data-to=finance]{--t:#86efac}.aku-cta--ghost[data-to=focus]{--t:#99f6e4}.aku-cta--ghost[data-to=interests]{--t:#fecdd3}.aku-cta--ghost[data-to=about]{--t:#fed7c7}.aku-cta--ghost[data-to=watch]{--t:#fbcfe8}.aku-cta--ghost[data-to=member]{--t:#fde68a}.aku-cta--ghost[data-to=ai]{--t:#bfdbfe}.aku-cta--ghost[data-to=gold]{--t:#fde68a}.aku-cta--ghost[data-to=discord]{--t:#c7cbff}.aku-cta--ghost[data-to=diary]{--t:#fecdd3}
html[data-theme=light] .aku-cta--ghost{--t:#713f12;background:rgba(255,255,255,.8)}
html[data-theme=light] .aku-cta--ghost[data-to=finance]{--t:#14532d}html[data-theme=light] .aku-cta--ghost[data-to=focus]{--t:#115e59}html[data-theme=light] .aku-cta--ghost[data-to=interests]{--t:#881337}html[data-theme=light] .aku-cta--ghost[data-to=about]{--t:#7c2d12}html[data-theme=light] .aku-cta--ghost[data-to=watch]{--t:#831843}html[data-theme=light] .aku-cta--ghost[data-to=member]{--t:#713f12}html[data-theme=light] .aku-cta--ghost[data-to=ai]{--t:#1e3a8a}html[data-theme=light] .aku-cta--ghost[data-to=gold]{--t:#713f12}html[data-theme=light] .aku-cta--ghost[data-to=discord]{--t:#2e3192}html[data-theme=light] .aku-cta--ghost[data-to=diary]{--t:#6b2532}
/* .aku-cta--take = a button upgraded by assets/ak-cta.js on a page that still has its own old button styles: the A+ look wins */
html .aku-cta.aku-cta--take:not(#aku1):not(#aku2):not(#aku3){height:40px!important;min-height:40px!important;padding:0 6px 0 12px!important;border-radius:999px!important;font:650 .95rem/1 var(--aku-font-body)!important;letter-spacing:0!important;text-transform:none!important;text-shadow:none!important;color:var(--ink)!important;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 85%,#fff) 0%,var(--c) 38%,var(--c2) 100%)!important;border:1px solid color-mix(in srgb,var(--c) 55%,#fff)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 color-mix(in srgb,var(--edge) 55%,transparent),0 3px 0 var(--edge),0 10px 18px -10px var(--c)!important;transform:none!important;opacity:1!important;gap:8px!important;justify-content:center;max-width:100%;box-sizing:border-box}
html .aku-cta.aku-cta--take:not(#aku1):not(#aku2):not(#aku3):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -2px 0 color-mix(in srgb,var(--edge) 55%,transparent),0 5px 0 var(--edge),0 16px 26px -12px var(--c)!important}
html .aku-cta.aku-cta--take:not(#aku1):not(#aku2):not(#aku3).aku-cta--ghost{color:var(--t)!important;background:rgba(255,255,255,.04)!important;border:1.5px solid color-mix(in srgb,var(--c) 70%,transparent)!important;box-shadow:none!important;padding-left:14px!important}
html[data-theme=light] .aku-cta.aku-cta--take:not(#aku1):not(#aku2):not(#aku3).aku-cta--ghost{background:rgba(255,255,255,.8)!important}
html .aku-cta.aku-cta--take:not(#aku1):not(#aku2):not(#aku3).aku-cta--ghost:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent)!important}
html .aku-cta.aku-cta--take:not(#aku1):not(#aku2):not(#aku3)[hidden]{display:none!important}
/* ghost sitting on a light surface (cream paper card in dark mode): dark ink from the tone's own edge colour */
html .aku-cta.aku-cta--take.aku-cta--ghost.aku-cta--on-light:not(#aku1):not(#aku2):not(#aku3){color:color-mix(in srgb,var(--edge) 70%,#000)!important;background:rgba(255,255,255,.55)!important;border-color:color-mix(in srgb,var(--edge) 65%,transparent)!important}
@media(prefers-reduced-motion:reduce){.aku-cta,.aku-cta *,.aku-cta::before,.aku-cta::after{animation:none!important;transition:none!important}}
html[data-motion=paused] .aku-cta::before,html[data-motion=paused] .aku-cta::after{animation-play-state:paused!important}
html[data-motion=paused] .aku-cta,html[data-motion=paused] .aku-cta .aku-cta-ar span{animation-play-state:paused!important}

/* approved-library status badges (design-standard.html) */
.aku-status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font:700 .8rem/1.3 var(--aku-font-body)}
.aku-status.is-ok{background:rgba(74,222,128,.16);color:#86efac;border:1px solid rgba(74,222,128,.45)}
.aku-status.is-wait{background:rgba(251,191,36,.14);color:#fcd34d;border:1px solid rgba(251,191,36,.45)}
.aku-status.is-no{background:rgba(248,113,113,.14);color:#fca5a5;border:1px solid rgba(248,113,113,.45)}
html[data-theme=light] .aku-status.is-ok{color:#14532d}html[data-theme=light] .aku-status.is-wait{color:#78350f}html[data-theme=light] .aku-status.is-no{color:#7f1d1d}
@media(max-width:720px){.aku-portal-visual{height:160px}.aku-meter{grid-template-columns:96px 1fr 40px}}
@media(prefers-reduced-motion:reduce){.aku-portal *,.aku-portal-visual::before,.aku-note{transition:none}.aku-note:is(:hover,:focus-visible){translate:none}}
html[data-motion=paused] .aku-portal:is(:hover,:focus-visible) .aku-portal-visual img,html[data-motion=paused] .aku-note:is(:hover,:focus-visible){translate:none}

/* overflow guards (Audi 2026-10-24: "เพิ่มเรื่อง ตัวหนังสือล้นกล่องหรือตารางด้วย"): tables scroll inside their own frame with an edge fade,
   never the whole page; long numbers use shorter units and never break mid-number. */
.aku-table-wrap{position:relative;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px;
  background:linear-gradient(to right,var(--aku-sky-3) 30%,transparent),linear-gradient(to left,var(--aku-sky-3) 30%,transparent) 100% 0,radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.45),transparent),radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.45),transparent) 100% 0;
  background-repeat:no-repeat;background-size:40px 100%,40px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
.aku-num-fit{white-space:nowrap;font-variant-numeric:tabular-nums}
.aku-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* aliases: 0dte-setup.html spells the A+ icon/arrow as .aku-cta-ico / .aku-cta-arrow */
.aku-cta-ico img{width:15px;height:15px}
.aku-cta-ico>[data-ak-px]{position:absolute;inset:0;margin:auto;display:block;width:18px;height:18px;line-height:0}
.aku-cta-arrow{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.35);overflow:hidden;font:800 .85rem/1 var(--aku-font-body);transition:background 220ms,color 220ms}
.aku-cta-arrow span{display:block}
.aku-cta:hover .aku-cta-ico{rotate:-12deg;translate:0 -1px}
.aku-cta:hover .aku-cta-arrow{background:#fff;color:var(--edge)}
.aku-cta:hover .aku-cta-arrow span{animation:akuCtaArrow 520ms var(--aku-ease)}
.aku-cta--ghost .aku-cta-arrow{background:color-mix(in srgb,var(--c) 22%,transparent)}
.aku-cta--ghost:hover .aku-cta-arrow{background:color-mix(in srgb,var(--c) 45%,transparent);color:inherit}

/* ✅ zone card = the default box surface on every page (Audi 2026-10-25: "จำเอาสีพื้นหลังกล่องไปใช้ในทุกหน้า" · flat navy panels retired: "ดูแล้วไม่สวยเลย"). --z sets the zone colour of the 3px top edge. Inside, split items with a 3px coloured left edge (.aku-zonecard-item), never with more boxes. */
.aku-zonecard{--z:var(--aku-primary);position:relative;padding:18px 22px;border-radius:18px;background:radial-gradient(ellipse at 100% 0,rgba(226,201,143,.14),transparent 65%),linear-gradient(155deg,rgba(20,34,60,.96) 0%,rgba(10,17,32,.98) 100%);border:1px solid rgba(226,201,143,.22);border-top:3px solid var(--z);box-shadow:0 12px 30px rgba(0,0,0,.26)}
.aku-zonecard-item{padding:4px 0 4px 14px;border-left:3px solid var(--zi,var(--z))}
html[data-theme=light] .aku-zonecard{background:radial-gradient(ellipse at 100% 0,rgba(226,201,143,.18),transparent 65%),linear-gradient(155deg,#ffffff 0%,#f5f8ff 100%);border-color:var(--aku-line)}

/* ── Canonical Theme Pair D1 (Deep Obsidian Navy) & L1 (Crisp Cool White & Mint-Sky) · Audi 2026-10-28 ── */
:root{
  --aku-d1-stage:radial-gradient(ellipse at 90% 4%,rgba(56,189,248,.12),transparent 52%),linear-gradient(165deg,#060d1a 0%,#071222 54%,#05131c 100%);
  --aku-d1-stage-border:rgba(56,189,248,.28);
  --aku-d1-card:radial-gradient(ellipse 65% 50% at 88% 0%,rgba(56,189,248,.10),transparent 70%),linear-gradient(145deg,#071120 0%,#09172b 54%,#081a28 100%);
  --aku-d1-card-border:rgba(96,165,250,.36);
  --aku-d1-text:#f8fafc;
  --aku-d1-ink:var(--aku-d1-text);
  --aku-d1-sub:#93c5fd;
  --aku-d1-bg-alt:var(--aku-d1-neutral-bg);
  --aku-d1-neutral-border:var(--aku-d1-card-border);
  --aku-d1-green-bg:linear-gradient(145deg,#083024 0%,#052018 100%);
  --aku-d1-green-border:rgba(52,211,153,.50);
  --aku-d1-green-accent:#10b981;
  --aku-d1-green-ink:#f8fafc;
  --aku-d1-green-sub:#86efac;
  --aku-d1-green-num:#4ade80;
  --aku-d1-red-bg:linear-gradient(145deg,#350e1e 0%,#200913 100%);
  --aku-d1-red-border:rgba(251,113,133,.50);
  --aku-d1-red-accent:#f43f5e;
  --aku-d1-red-ink:#f8fafc;
  --aku-d1-red-sub:#fda4af;
  --aku-d1-red-num:#fb7185;
  --aku-d1-amber-bg:linear-gradient(145deg,#271a07 0%,#170f04 100%);
  --aku-d1-amber-border:rgba(251,191,36,.48);
  --aku-d1-amber-sub:#fde68a;
  --aku-d1-neutral-bg:linear-gradient(145deg,#050c17 0%,#081426 100%);
  --aku-stage-bg:var(--aku-d1-stage);
  --aku-stage-border:var(--aku-d1-stage-border);
  --aku-card-bg:var(--aku-d1-card);
  --aku-card-border:var(--aku-d1-card-border);
  --aku-card-ink:var(--aku-d1-text);
  --aku-card-sub:var(--aku-d1-sub);
  --aku-box-green-bg:var(--aku-d1-green-bg);
  --aku-box-green-border:var(--aku-d1-green-border);
  --aku-box-green-accent:var(--aku-d1-green-accent);
  --aku-box-green-ink:var(--aku-d1-green-ink);
  --aku-box-green-sub:var(--aku-d1-green-sub);
  --aku-box-green-num:var(--aku-d1-green-num);
  --aku-box-red-bg:var(--aku-d1-red-bg);
  --aku-box-red-border:var(--aku-d1-red-border);
  --aku-box-red-accent:var(--aku-d1-red-accent);
  --aku-box-red-ink:var(--aku-d1-red-ink);
  --aku-box-red-sub:var(--aku-d1-red-sub);
  --aku-box-red-num:var(--aku-d1-red-num);
  --aku-box-amber-bg:var(--aku-d1-amber-bg);
  --aku-box-amber-border:var(--aku-d1-amber-border);
  --aku-box-amber-sub:var(--aku-d1-amber-sub);
  --aku-box-neutral-bg:var(--aku-d1-neutral-bg);
}
html[data-theme=light]{
  --aku-l1-stage:radial-gradient(ellipse at 92% 4%,rgba(52,211,153,.14),transparent 52%),linear-gradient(135deg,#e4f0fc 0%,#eef6fe 52%,#e2f7ef 100%);
  --aku-l1-stage-border:rgba(59,130,246,.28);
  --aku-l1-card:linear-gradient(135deg,#ffffff 0%,#f6faff 56%,#eefbf5 100%);
  --aku-l1-card-border:rgba(59,130,246,.28);
  --aku-l1-text:#0f172a;
  --aku-l1-ink:var(--aku-l1-text);
  --aku-l1-sub:#1e3a8a;
  --aku-l1-neutral-border:var(--aku-l1-card-border);
  --aku-l1-card-shadow:0 18px 40px -22px rgba(15,23,42,.12),0 4px 12px -4px rgba(37,99,235,.06);
  --aku-l1-green-bg:linear-gradient(145deg,#bbf7d0 0%,#dcfce7 100%);
  --aku-l1-green-border:rgba(16,185,129,.58);
  --aku-l1-green-accent:#059669;
  --aku-l1-green-ink:#052e16;
  --aku-l1-green-sub:#065f46;
  --aku-l1-green-num:#047857;
  --aku-l1-red-bg:linear-gradient(145deg,#fecdd3 0%,#ffe4e6 100%);
  --aku-l1-red-border:rgba(244,63,94,.58);
  --aku-l1-red-accent:#e11d48;
  --aku-l1-red-ink:#4c0519;
  --aku-l1-red-sub:#9f1239;
  --aku-l1-red-num:#be123c;
  --aku-l1-amber-bg:linear-gradient(145deg,#fde68a 0%,#fef3c7 100%);
  --aku-l1-amber-border:rgba(245,158,11,.55);
  --aku-l1-amber-ink:#451a03;
  --aku-l1-amber-sub:#78350f;
  --aku-l1-neutral-bg:linear-gradient(145deg,#f1f5f9 0%,#f8fafc 100%);
  --aku-stage-bg:var(--aku-l1-stage);
  --aku-stage-border:var(--aku-l1-stage-border);
  --aku-card-bg:var(--aku-l1-card);
  --aku-card-border:var(--aku-l1-card-border);
  --aku-card-ink:var(--aku-l1-text);
  --aku-card-sub:var(--aku-l1-sub);
  --aku-box-green-bg:var(--aku-l1-green-bg);
  --aku-box-green-border:var(--aku-l1-green-border);
  --aku-box-green-accent:var(--aku-l1-green-accent);
  --aku-box-green-ink:var(--aku-l1-green-ink);
  --aku-box-green-sub:var(--aku-l1-green-sub);
  --aku-box-green-num:var(--aku-l1-green-num);
  --aku-box-red-bg:var(--aku-l1-red-bg);
  --aku-box-red-border:var(--aku-l1-red-border);
  --aku-box-red-accent:var(--aku-l1-red-accent);
  --aku-box-red-ink:var(--aku-l1-red-ink);
  --aku-box-red-sub:var(--aku-l1-red-sub);
  --aku-box-red-num:var(--aku-l1-red-num);
  --aku-box-amber-bg:var(--aku-l1-amber-bg);
  --aku-box-amber-border:var(--aku-l1-amber-border);
  --aku-box-amber-sub:var(--aku-l1-amber-sub);
  --aku-box-neutral-bg:var(--aku-l1-neutral-bg);
}

/* Selected navigation and real-brand badge materials, paired by mode. */
:root{--aku-brand-badge-bg:#fff;--aku-nav-selected-bg:linear-gradient(135deg,#065f46,color-mix(in srgb,#0d9488 80%,var(--aku-night)),#0369a1);--aku-nav-selected-ink:#f0fdf4}
html[data-theme=light]{--aku-nav-selected-bg:linear-gradient(135deg,#a7f3d0,#6ee7b7,#7dd3fc);--aku-nav-selected-ink:#064e3b}