/* Breadboard Studio design tokens, shared by the landing page and the app. */
:root,[data-theme="light"]{
  color-scheme:light;
  --bg:#f5f6fa;          /* page */
  --surface:#ffffff;     /* the board itself */
  --surface-2:#eef0f6;   /* channels, inputs */
  --hole:#d9dce8;        /* breadboard holes */
  --line:#e2e5ef;
  --line-2:#cdd2e1;
  --ink:#141b34;         /* text and IC chips */
  --ink-2:#5a6283;
  --ink-3:#8a91ad;
  --chip:#141b34;        /* component bodies */
  --chip-text:#f4f5fb;
  --chip-sub:#9aa2c4;
  --brand:#6c4dff;       /* violet: the primary action */
  --brand-ink:#ffffff;
  --brand-soft:#6c4dff1a;
  /* jumper wires */
  --coral:#ff6b57;
  --sky:#2f95ff;
  --violet:#6c4dff;
  --amber:#ffae2b;
  --teal:#10b39f;
  --pink:#f2549b;
  --ok:#10b39f;
  --warn:#ffae2b;
  --err:#ef4b5b;
  --shadow:0 1px 2px #141b340f,0 12px 32px -12px #141b3433;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0f1e;
  --surface:#121832;
  --surface-2:#1a2142;
  --hole:#262e52;
  --line:#222a4b;
  --line-2:#303a63;
  --ink:#eef0fa;
  --ink-2:#a3abcf;
  --ink-3:#6f78a0;
  --chip:#070a16;
  --chip-text:#eef0fa;
  --chip-sub:#8189b0;
  --brand:#8a73ff;
  --brand-ink:#0b0f1e;
  --brand-soft:#8a73ff24;
  --coral:#ff7b69;
  --sky:#4fa6ff;
  --violet:#8a73ff;
  --amber:#ffbc4a;
  --teal:#2cc9b4;
  --pink:#ff6aab;
  --ok:#2cc9b4;
  --warn:#ffbc4a;
  --err:#ff6474;
  --shadow:0 1px 2px #0006,0 16px 40px -16px #000c;
}
html,body{background:var(--bg);color:var(--ink)}
body{transition:background-color .3s,color .3s}

/* Theme toggle button (sun/moon) */
.theme-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;transition:transform .2s var(--ease),border-color .2s}
.theme-btn:hover{border-color:var(--ink-3)}
.theme-btn:active{transform:scale(.94)}
.theme-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.theme-btn .moon{display:block}.theme-btn .sun{display:none}
[data-theme="dark"] .theme-btn .moon{display:none}
[data-theme="dark"] .theme-btn .sun{display:block}

/* "Would you like to switch to dark mode?" */
.theme-ask{position:fixed;right:20px;bottom:20px;z-index:1000;display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:min(430px,calc(100vw - 40px));padding:14px 14px 14px 16px;border-radius:18px;background:var(--chip);color:var(--chip-text);box-shadow:0 20px 50px -12px #0b0f1e80;font:500 15px/1.4 var(--body);opacity:0;transform:translateY(16px) scale(.98);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.theme-ask.in{opacity:1;transform:none}
.theme-ask p{margin:0;flex:1;min-width:170px}
.theme-ask-moon{width:30px;height:30px;border-radius:50%;box-shadow:inset -8px -3px 0 0 var(--amber);transform:rotate(-20deg);flex-shrink:0}
.theme-ask-actions{display:flex;gap:8px}
.theme-ask button{font:600 14px/1 var(--body);border-radius:999px;padding:10px 14px;border:1.5px solid #ffffff33;background:transparent;color:inherit;cursor:pointer}
.theme-ask button[data-a="dark"]{background:var(--brand);border-color:var(--brand);color:#fff}
.theme-ask button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media(max-width:520px){.theme-ask{left:12px;right:12px;bottom:12px;max-width:none}}
@media(prefers-reduced-motion:reduce){.theme-ask{transition:none}body{transition:none}}

/* Cookie notice (consent.js) */
.cookie-bar{position:fixed;left:20px;bottom:20px;z-index:1001;display:flex;align-items:center;gap:14px;max-width:min(520px,calc(100vw - 40px));padding:14px 14px 14px 18px;border-radius:18px;background:var(--chip);color:var(--chip-text);box-shadow:0 20px 50px -12px #0b0f1e80;font:400 14.5px/1.45 var(--body);opacity:0;transform:translateY(16px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.cookie-bar.in{opacity:1;transform:none}
.cookie-bar p{margin:0;flex:1;min-width:0}
.cookie-bar strong{color:inherit}
.cookie-bar a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cookie-bar button{flex-shrink:0;font:600 14px/1 var(--body);border-radius:999px;padding:11px 18px;border:0;background:var(--brand);color:#fff;cursor:pointer}
.cookie-bar button:focus-visible,.cookie-bar a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media(max-width:520px){.cookie-bar{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));max-width:none;flex-wrap:wrap}.cookie-bar button{width:100%}}
@media(prefers-reduced-motion:reduce){.cookie-bar{transition:none}}