/* Design tokens + reset, lifted verbatim from the Claude Design mockup
   (gp2ad v3.dc.html).  The component styles themselves live as inline styles in
   app.js, mirroring the mockup's structure so the two stay in visual lockstep. */
:root{
  color-scheme:dark;
  --bg:#101012;--panel:#0E0E0F;--sunk:#060608;--hatch:rgba(255,255,255,.028);
  --line:rgba(255,255,255,.12);--line2:rgba(255,255,255,.22);--dots:rgba(255,255,255,.26);
  --ink:#EDEDEA;--ink2:#B9B9B4;--ink3:#9A9A96;--ghost-ink:rgba(255,255,255,.3);
  --cyan:#00BFFF;--cyan-hover:#7FDEFA;
  --accent:var(--cyan);--accent-ink:#000000;--accent-text:var(--cyan);--accent-edge:var(--cyan);
  --accent-soft:color-mix(in srgb,var(--accent) 10%,transparent);
  --display:'Anton','Arial Narrow',sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ui:'Space Grotesk',system-ui,-apple-system,'Helvetica Neue',sans-serif;
  --pad:26px;--kit-cols:6;
}
@media (prefers-color-scheme:light){:root:not([data-theme]){
  color-scheme:light;
  --bg:#EDEDEA;--panel:#F6F6F3;--sunk:#E3E3DF;--hatch:rgba(0,0,0,.03);
  --line:rgba(0,0,0,.14);--line2:rgba(0,0,0,.28);--dots:rgba(0,0,0,.3);
  --ink:#0A0A0B;--ink2:#3C3C39;--ink3:#5C5C58;--ghost-ink:rgba(0,0,0,.42);
  --accent-text:#00607F;--accent-edge:#00708F;
  --accent-soft:color-mix(in srgb,var(--accent) 18%,#fff);
}}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#EDEDEA;--panel:#F6F6F3;--sunk:#E3E3DF;--hatch:rgba(0,0,0,.03);
  --line:rgba(0,0,0,.14);--line2:rgba(0,0,0,.28);--dots:rgba(0,0,0,.3);
  --ink:#0A0A0B;--ink2:#3C3C39;--ink3:#5C5C58;--ghost-ink:rgba(0,0,0,.42);
  --accent-text:#00607F;--accent-edge:#00708F;
  --accent-soft:color-mix(in srgb,var(--accent) 18%,#fff);
}
@media (max-width:980px){:root{--kit-cols:3}}
@media (max-width:560px){:root{--pad:15px;--kit-cols:2}}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:14px;-webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:none;border-radius:0}
a{color:var(--accent-text)}
a:hover{color:var(--cyan-hover)}
:focus-visible{outline:2px solid var(--accent-edge);outline-offset:2px}
select{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--ink);background:var(--sunk);border:1px solid var(--line2);border-radius:0;padding:3px 4px;cursor:pointer;max-width:100%}
select:hover{border-color:var(--accent-edge)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:16px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:14px;margin-top:-6px;background:var(--cyan)}
input[type=range]::-moz-range-track{height:2px;background:var(--line2)}
input[type=range]::-moz-range-thumb{width:10px;height:14px;border:none;border-radius:0;background:var(--cyan)}
/* style-hover="" affordances from the mockup, as a plain hover class. */
.hoverlink:hover{color:var(--accent-text)!important;border-color:var(--accent-edge)!important}
@keyframes rise{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}