/* Generated from content/site.json by site/build-content.mjs. Do not edit here. */
:root{--ground:#efe6d8;--paper:#f5eee2;--surface:#fbf6ee;--ink:#241a13;--muted:#5c4d3e;--line:#e3d9cb;--line-2:#d3c6b4;--tan:#cfb088;--accent:#f47a20;--accent-ink:#b85410;--accent-2:#f5cf1a;--black:#1c1b1a;
 --display:"Exo 2","Arial Narrow",system-ui,sans-serif;--body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
 --grad:linear-gradient(100deg,var(--accent) 0%,#f7a21c 50%,var(--accent-2) 100%);
 --tang:var(--accent);--tang-ink:var(--accent-ink);--sun:var(--accent-2);
 color-scheme:light}
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]){--ground:#17150f;--paper:#1e1b15;--surface:#262118;--ink:#f4ece0;--muted:#b9a992;--line:#38311f;--line-2:#4a4030;--tan:#b08f67;--accent:#ff8c38;--accent-ink:#ffb270;--accent-2:#ffd93f;--black:#0f0d0a;
  --grad:linear-gradient(100deg,var(--accent) 0%,#ffa44a 50%,var(--accent-2) 100%);
  --tang:var(--accent);--tang-ink:var(--accent-ink);--sun:var(--accent-2);
  --shadow:0 1px 0 rgba(0,0,0,.3),0 20px 40px -26px rgba(0,0,0,.75);
  color-scheme:dark}
}
:root[data-theme="dark"]{--ground:#17150f;--paper:#1e1b15;--surface:#262118;--ink:#f4ece0;--muted:#b9a992;--line:#38311f;--line-2:#4a4030;--tan:#b08f67;--accent:#ff8c38;--accent-ink:#ffb270;--accent-2:#ffd93f;--black:#0f0d0a;
 --grad:linear-gradient(100deg,var(--accent) 0%,#ffa44a 50%,var(--accent-2) 100%);
 --tang:var(--accent);--tang-ink:var(--accent-ink);--sun:var(--accent-2);
 --shadow:0 1px 0 rgba(0,0,0,.3),0 20px 40px -26px rgba(0,0,0,.75);
 color-scheme:dark}

/* A signed in owner's own cube recolours the accents. The designer writes
   these three on the html element and nothing else has to know. */
:root[data-cube-accent]{--accent:var(--cube-accent)}
:root[data-cube-accent-2]{--accent-2:var(--cube-accent-2)}

body{background:var(--ground);color:var(--ink)}

/* the toggle itself */
/* Bottom left on purpose. The header already has the main call to action at
   the top right, and Ask Clik sits at the bottom right, so this is the one
   corner where nothing else lives. */
.themebtn{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;
 display:inline-flex;align-items:center;gap:7px;
 border:1px solid var(--line-2);background:var(--surface);color:var(--ink);border-radius:999px;
 padding:9px 14px;font:600 12.5px/1 var(--body);cursor:pointer;box-shadow:var(--shadow)}
.themebtn:hover{border-color:var(--ink)}
.themebtn svg{width:15px;height:15px;flex:none}
@media (max-width:700px){.themebtn{left:12px;padding:8px 11px}.themebtn span{display:none}}
@media print{.themebtn{display:none}}

/* Three corrections the colour token pass could not make on its own.

   1. A button painted with the brand gradient, or with the bright accent,
      stays bright in both themes, so its text is always the dark ink. Letting
      it follow --ink put cream on yellow the moment the phone went dark.
   2. Two text colours the v25 stylesheet wrote as literals in places the
      per property pass does not read.
   3. The dark red of the delete heading, so it reads on a dark card. */
.cta-s,.btn.hot,button.btn.google-option,a.btn.google-option,.google-option{color:#2a1606!important}
.hero .lead{color:var(--muted)}
.logo-caption>span:first-child{color:var(--ink)}