/* MintVanilla base: tokens, grain, liquid frame, emblem, Mint/Vanilla pill — shared by the live pages.
   Same tokens as Home.html. html.elegant = Vanilla mode. */
:root{
  --ink:#0a0c0b;--ink-2:#121614;--vanilla:#ece6d6;--mute:#7d847e;--line:#232a26;--mint:#a6f0cc;--stroke:#3a443e;--fg-rgb:236,230,214;
  --display:"Syne","Helvetica Neue",Arial,sans-serif;--body:"Geist","Helvetica Neue",Arial,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;--serif:"Instrument Serif",Georgia,serif;
  --outer:#1c1d1f;--fshade:.45;--fs:20px;--fx:20px;--fb:56px;--fr:12px;--band:20px;
  --gutter:calc(var(--fx) + clamp(16px,3vw,44px));color-scheme:dark}
html.elegant{--ink:#f2eee3;--ink-2:#e7e1d2;--vanilla:#17201c;--mute:#6b6f68;--line:#d8d1c0;--mint:#2f6f5e;--stroke:#bdb5a2;--fg-rgb:23,32,28;--outer:#e6dcc3;--fshade:.14;
  --display:"Cormorant Garamond",Georgia,serif;color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--ink);transition:background .6s}
body{margin:0;color:var(--vanilla);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--mint);color:var(--ink)}
:focus-visible{outline:1px solid var(--mint);outline-offset:4px}
.label{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.grain{position:fixed;inset:-100%;width:300%;height:300%;pointer-events:none;z-index:90;opacity:.085;animation:grain 1s steps(6) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html.elegant .grain{filter:invert(1) sepia(1);opacity:.045}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
/* frame: plain CSS frame first (instant, works without WebGL), the liquid canvas replaces it once ready */
#liquidFrame{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
.frame-mask{position:fixed;top:var(--fs);left:var(--fx);right:var(--fx);bottom:var(--fb);border-radius:var(--fr);pointer-events:none;z-index:60;box-shadow:0 0 0 200vmax var(--outer)}
html.liquid .frame-mask{display:none}
.emblem{position:fixed;z-index:61;top:calc(var(--fs) + 14px);left:calc(var(--fx) + clamp(16px,3vw,44px));line-height:0}
.emblem img{height:clamp(38px,4.2vw,52px);width:auto}
/* Mint/Vanilla pill — the selected one wears its own colours */
.modes{position:fixed;z-index:70;left:50%;bottom:calc(var(--fb) / 2);transform:translate(-50%,50%);display:flex;height:42px;padding:4px;border-radius:999px;background:var(--ink);
  border:1px solid rgba(var(--fg-rgb),.22);box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4px rgba(var(--fg-rgb),.07)}
.modes button{appearance:none;border:0;background:none;color:var(--vanilla);padding:0 24px;min-width:100px;border-radius:999px;font:400 italic 20px/1 var(--serif);cursor:pointer;transition:background .5s,color .5s,box-shadow .5s}
.modes button[aria-pressed="true"]{background:#1d6b5c;color:#f3ecdc}
.modes button[data-mode="elegant"][aria-pressed="true"]{background:#e6d29f;color:#1d6b5c;box-shadow:inset 0 0 0 1px rgba(29,107,92,.3)}
@media (prefers-reduced-motion:reduce){.grain{animation:none}}