/* Design tokens lifted verbatim from design/lab.template.html.
   Lok = Midnight Ink (.app), dark = .app.dark, Zi Xuan = Candlelight (.app.xuan). */
:root{
  --motion:1.28; /* animation speed dial: 1 = original; 1.28 = 28% slower (user, 2026-09-30) */
  --dur-instant:calc(100ms * var(--motion));--dur-fast:calc(180ms * var(--motion));--dur-base:calc(240ms * var(--motion));--dur-slow:calc(400ms * var(--motion));
  --ease-standard:cubic-bezier(.4,0,.2,1);--ease-decel:cubic-bezier(0,0,.2,1);--ease-accel:cubic-bezier(.4,0,1,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}
@supports (transition-timing-function:linear(0,1)){
  :root{--ease-spring:linear(0,.009 1%,.036 2.9%,.145 6.5%,.554 15.3%,.847 21.8%,1.03 26.9%,1.098 30.9%,1.088 35.8%,1.017 45%,.995 51.8%,1.001 65%,1)}
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:#f1eee8;font:15px/1.45 Figtree,sans-serif;-webkit-font-smoothing:antialiased}

.app{--f-ui:Figtree,sans-serif;--f-num:Figtree,sans-serif;--h1:600 40px/1.05 Newsreader,serif;--title:600 24px/1.2 Newsreader,serif;--count:600 64px Newsreader,serif;
  --bg:oklch(.975 .006 85);--rail:oklch(.962 .008 85);--surface:oklch(.995 .003 85);--ink:oklch(.24 .03 265);--muted:oklch(.48 .03 265);
  --line:oklch(.9 .01 260);--line-soft:oklch(.94 .008 260);--nav-on:oklch(.93 .025 265);--accent:oklch(.45 .13 265);--accent-soft:oklch(.95 .025 265);
  --heat:oklch(.55 .13 265);--warn-bg:oklch(.95 .04 70);--warn-ink:oklch(.45 .1 55);--ok:oklch(.5 .11 150);--urgent:oklch(.52 .17 28);
  --u3-bg:oklch(.93 .06 75);--u3:oklch(.43 .1 65);--u4-bg:oklch(.94 .025 245);--u4:oklch(.42 .08 250);--u5-bg:oklch(.95 .005 80);--u5:oklch(.48 .01 80);
  --c-l:.93;--c-c:.05;--c-ink:.38;--c-dot:.6;--r-sm:8px;--r-md:12px;--r-lg:16px;
  min-height:100vh;display:grid;grid-template-columns:232px 1fr;background:var(--bg);color:var(--ink);font:15px/1.45 var(--f-ui);position:relative}
.app.dark{--bg:oklch(.18 .02 265);--rail:oklch(.165 .02 265);--surface:oklch(.225 .025 265);--ink:oklch(.94 .01 85);--muted:oklch(.74 .03 260);
  --line:oklch(.32 .03 265);--line-soft:oklch(.28 .025 265);--nav-on:oklch(.3 .05 265);--accent:oklch(.78 .1 265);--accent-soft:oklch(.29 .05 265);
  --heat:oklch(.7 .11 265);--warn-bg:oklch(.3 .05 65);--warn-ink:oklch(.86 .09 75);--ok:oklch(.78 .12 150);--urgent:oklch(.75 .15 28);
  --u3-bg:oklch(.33 .06 75);--u3:oklch(.88 .1 80);--u4-bg:oklch(.3 .04 245);--u4:oklch(.85 .06 245);--u5-bg:oklch(.28 .01 60);--u5:oklch(.78 .01 70);
  --c-l:.32;--c-c:.06;--c-ink:.87;--c-dot:.72}
.app::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;mix-blend-mode:multiply;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.app.dark::before{mix-blend-mode:screen;opacity:.03}

.app.xuan{--f-ui:Mulish,sans-serif;--f-num:Mulish,sans-serif;--h1:italic 600 46px/1 "Cormorant Garamond",serif;--title:600 28px/1.15 "Cormorant Garamond",serif;--count:600 70px "Cormorant Garamond",serif;
  --bg:oklch(.17 .025 320);--rail:oklch(.15 .025 320);--surface:oklch(.225 .03 330);--ink:oklch(.93 .025 350);--muted:oklch(.76 .035 345);
  --line:oklch(.33 .04 340);--line-soft:oklch(.28 .035 335);--nav-on:oklch(.3 .06 355);--accent:oklch(.76 .13 5);--accent-soft:oklch(.29 .06 5);
  --heat:oklch(.74 .13 5);--warn-bg:oklch(.3 .06 60);--warn-ink:oklch(.87 .09 75);--ok:oklch(.82 .09 150);--urgent:oklch(.78 .15 25);
  --u3-bg:oklch(.34 .07 60);--u3:oklch(.88 .09 75);--u4-bg:oklch(.3 .05 350);--u4:oklch(.86 .06 350);--u5-bg:oklch(.27 .03 330);--u5:oklch(.8 .02 340);
  --c-l:.3;--c-c:.07;--c-ink:.88;--c-dot:.72;--r-sm:10px;--r-md:14px;--r-lg:18px}
.app.xuan::before{opacity:0}