/* Varven — shared design system.
   index.html is deliberately standalone: it carries the full-page canvas and
   its own layout. Every other page links this file, so they cannot drift. */

:root, [data-theme="phosphor"]{
  --bg:#040705; --bg-2:#0a110c; --line:#18291e;
  --ink:#c3ddcb; --ink-dim:#6b8f79; --accent:#3fe57e; --phosphor:#5cf294;
  --display:"IBM Plex Sans",system-ui,sans-serif;
  --body:"IBM Plex Mono",ui-monospace,monospace;
  --radius:4px; --scan:1;
}
[data-theme="synapse"]{
  --bg:#05070a; --bg-2:#0a0f16; --line:#152030;
  --ink:#dbe6e2; --ink-dim:#7d9490; --accent:#2bff9b; --phosphor:#2bff9b;
  --display:"Chakra Petch",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
  --radius:3px; --scan:0;
}
[data-theme="stratum"]{
  --bg:#080a08; --bg-2:#101410; --line:#1e281d;
  --ink:#e4e9df; --ink-dim:#8a9683; --accent:#a9c99a; --phosphor:#c3ddb6;
  --display:"Instrument Serif",Georgia,serif; --body:"Inter",system-ui,sans-serif;
  --radius:2px; --scan:0;
}
[data-theme="myelin"]{
  --bg:#03090b; --bg-2:#071518; --line:#0d2b2e;
  --ink:#d4ece9; --ink-dim:#6d9490; --accent:#3fe0c0; --phosphor:#3fe0c0;
  --display:"Sora",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
  --radius:14px; --scan:0;
}
[data-theme="cortex"]{
  --bg:#000; --bg-2:#0b0b0b; --line:#1f1f1f;
  --ink:#f2f2f2; --ink-dim:#7a7a7a; --accent:#c6f000; --phosphor:#c6f000;
  --display:"Archivo Black",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif;
  --radius:0; --scan:0;
}
:root{
  /* Prose stays narrow for reading; the chrome matches the main page so the
     header and footer do not jump width when you navigate. */
  --max:44rem; --max-wide:1120px; --gutter:clamp(1.15rem,4vw,2rem);
  color-scheme: dark;
  scrollbar-color: var(--line) transparent;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.75 var(--body); -webkit-font-smoothing:antialiased}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:98;
  opacity:calc(var(--scan) * .11); background:repeating-linear-gradient(0deg,rgba(0,0,0,.6) 0 1px,transparent 1px 3px)}
@media (prefers-reduced-motion:reduce),(prefers-contrast:more){
  body::after{display:none} html{scroll-behavior:auto} }

#net{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block;
  pointer-events:none}
.veil{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 118% 92% at 50% 45%,transparent 40%,
  color-mix(in srgb,var(--bg) 88%,transparent) 100%)}
header,main,footer{position:relative; z-index:2}
main.wrap>*{position:relative}

a{color:var(--accent); text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.mono{font-family:var(--body); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-dim)}

/* header */
header{border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(14px)}
.bar{max-width:var(--max-wide); margin:0 auto; padding:.7rem var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{display:flex; align-items:center; gap:.55rem; text-decoration:none; color:inherit}
.brand b{font-family:var(--display); font-weight:600; font-size:1.05rem;
  letter-spacing:-.022em; color:var(--phosphor)}
.mark{width:15px; height:21px; flex:none}
.mark i{display:block; background:var(--accent); margin-bottom:2px}
.mark i:nth-child(1){height:2px;opacity:.35}.mark i:nth-child(2){height:4px;opacity:.65}
.mark i:nth-child(3){height:2px;opacity:.45}.mark i:nth-child(4){height:6px;opacity:1}
.mark i:nth-child(5){height:3px;opacity:.5}
.topnav{display:flex; align-items:center; gap:1.4rem}
.topnav a{font-size:.8rem; color:var(--ink-dim); text-decoration:none; transition:color .18s}
.topnav a:hover{color:var(--ink)}
.btn.small{padding:.5rem .85rem; font-size:.78rem; color:var(--bg); text-decoration:none}
@media(max-width:760px){ .topnav a:not(.btn){display:none} }

/* document */
main{padding:3.5rem 0 5rem; background:color-mix(in srgb,var(--bg) 55%,transparent);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px)}
main.wrap{max-width:var(--max)}
h1,h2,h3,p,li,td,th{text-shadow:0 1px 10px var(--bg)}
h1{font-family:var(--display); font-weight:600; letter-spacing:-.025em;
  font-size:clamp(1.9rem,5vw,2.7rem); line-height:1.06; margin:0 0 .45rem; color:var(--phosphor)}
.dek{margin:0 0 2.5rem; color:var(--ink-dim); font-size:.95rem; max-width:52ch}
h2{font-family:var(--display); font-weight:600; letter-spacing:-.015em;
  font-size:1.28rem; line-height:1.2; margin:2.8rem 0 .75rem;
  padding-top:1.6rem; border-top:1px solid var(--line); color:var(--phosphor)}
h3{font-family:var(--display); font-weight:600; font-size:1rem; margin:1.8rem 0 .5rem; color:var(--ink)}
p{margin:0 0 1.05rem; color:var(--ink-dim)}
p strong,li strong{color:var(--ink); font-weight:500}
ul,ol{margin:0 0 1.2rem; padding-left:1.15rem; color:var(--ink-dim)}
li{margin-bottom:.42rem}
code{font-family:var(--body); font-size:.86em; background:var(--bg-2);
  border:1px solid var(--line); border-radius:3px; padding:.1rem .34rem; color:var(--ink)}
pre{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:1rem; overflow-x:auto; font-size:.82rem; margin:0 0 1.3rem; color:var(--ink)}
pre code{background:none; border:0; padding:0}
table{width:100%; border-collapse:collapse; margin:0 0 1.4rem; font-size:.86rem}
th,td{text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line);
  vertical-align:top; color:var(--ink-dim)}
th{color:var(--phosphor); font-weight:500; font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase}
blockquote{margin:0 0 1.3rem; padding-left:1rem; border-left:2px solid var(--line);
  color:var(--ink-dim)}
mark{background:transparent; color:#e08a8a; font-family:var(--body); font-size:.88em}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}

.callout{border:1px solid var(--line); border-left:2px solid var(--accent);
  border-radius:var(--radius); padding:1rem 1.15rem; margin:0 0 1.4rem;
  background:var(--bg-2); font-size:.88rem}
.callout p:last-child{margin-bottom:0}

.btn{display:inline-block; font:500 .84rem/1 var(--body); text-decoration:none;
  padding:.85rem 1.3rem; border-radius:var(--radius); border:1px solid var(--accent);
  background:var(--accent); color:var(--bg); transition:.2s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover{border-color:var(--accent); color:var(--accent)}

.meta{font-size:.74rem; color:var(--ink-dim); letter-spacing:.04em}

footer{border-top:1px solid var(--line); padding:2.6rem 0 3.2rem; font-size:.8rem;
  color:var(--ink-dim); background:var(--bg)}
footer>.wrap{max-width:var(--max-wide)}
.fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1.6rem; margin-bottom:2rem}
.fgrid h4{font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-dim); margin:0 0 .7rem; font-weight:500}
.fgrid a{display:block; color:var(--ink); text-decoration:none; margin-bottom:.42rem; font-size:.82rem}
.fgrid a:hover{color:var(--accent)}
.fbase{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between;
  align-items:center; border-top:1px solid var(--line); padding-top:1.4rem}

/* ---------------------------------------------------------------- tools */
.crumbs{font-size:.72rem; color:var(--ink-dim); margin:0 0 1.6rem; letter-spacing:.03em}
.crumbs a{color:var(--ink-dim); text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.crumbs span{opacity:.5; margin:0 .35rem}

.tool{border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem;
  background:color-mix(in srgb,var(--bg-2) 92%,transparent); margin:0 0 2.5rem}
.field{margin-bottom:1.15rem}
.field label{display:block; font-size:.8rem; color:var(--ink); margin-bottom:.45rem; font-weight:500}
.field select,.field input[type=number],.field input[type=url],
.field input[type=email],.field input[type=text],.field textarea{
  width:100%; padding:.7rem .8rem; background:var(--bg); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  font:400 .87rem/1.5 var(--body);
  appearance:none; -webkit-appearance:none; -moz-appearance:none}
.field textarea{resize:vertical; min-height:8rem}
.field select:focus,.field input:focus,.field textarea:focus{
  border-color:var(--accent); outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);
  outline-offset:1px}

/* Native select keeps its own arrow even with appearance:none stripped, so
   supply one. Stroke is baked rather than currentColor because background
   images cannot inherit it. */
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236b8f79' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat; background-position:right .85rem center;
  padding-right:2.4rem; cursor:pointer}
.field select option{background:var(--bg-2); color:var(--ink)}

/* Range: the track and thumb are separate shadow elements per engine and
   neither inherits anything, so both are declared twice. */
.field input[type=range]{
  width:100%; padding:0; border:0; background:transparent; cursor:pointer;
  appearance:none; -webkit-appearance:none; height:1.4rem}
.field input[type=range]::-webkit-slider-runnable-track{
  height:3px; background:var(--line); border-radius:2px}
.field input[type=range]::-moz-range-track{
  height:3px; background:var(--line); border-radius:2px}
.field input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:15px; height:15px; margin-top:-6px;
  border-radius:50%; background:var(--accent); border:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.field input[type=range]::-moz-range-thumb{
  width:15px; height:15px; border-radius:50%; background:var(--accent); border:0}
.field input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 40%,transparent)}

/* Number spinners are unstyleable and add nothing here. */
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.field input[type=number]{-moz-appearance:textfield}

.field output{color:var(--accent); font-weight:500}
.tool .btn{cursor:pointer; font-family:var(--body)}
.tool .btn:disabled{opacity:.5; cursor:default; transform:none}

.verdict{border:1px solid var(--line); border-left:2px solid var(--ink-dim);
  border-radius:var(--radius); padding:.9rem 1.05rem; font-size:.87rem;
  color:var(--ink-dim); margin:1.2rem 0}
.verdict strong{color:var(--ink)}
.verdict.ok{border-left-color:var(--accent)}
.verdict.ok strong{color:var(--accent)}
.verdict.warn{border-left-color:#c9a24a}
.verdict.warn strong{color:#dfc074}
.verdict.bad{border-left-color:#c26a6a}
.verdict.bad strong{color:#dd9090}

.steps{list-style:none; padding:0; margin:1.2rem 0 0; counter-reset:s}
.step{counter-increment:s; padding:.6rem 0 .6rem 2.2rem; position:relative;
  border-bottom:1px solid var(--line); font-size:.85rem; color:var(--ink)}
.step:last-child{border-bottom:0}
.step::before{content:counter(s); position:absolute; left:0; top:.62rem;
  width:1.4rem; height:1.4rem; border:1px solid var(--line); border-radius:50%;
  display:grid; place-items:center; font-size:.66rem; color:var(--ink-dim)}
.step.ok::before{border-color:var(--accent); color:var(--accent)}
.step.warn::before{border-color:#d9b23f; color:#e6c766}
.step.bad::before{border-color:#d97070; color:#e58f8f}
.step span{display:block; color:var(--ink-dim); font-size:.8rem; margin-top:.2rem}

.toolgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:1rem; margin:0 0 2.5rem}
.toolcard{display:block; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem; background:color-mix(in srgb,var(--bg-2) 90%,transparent);
  text-decoration:none; transition:border-color .2s,transform .2s}
.toolcard:hover{border-color:var(--accent); transform:translateY(-2px)}
.toolcard h3{margin:0 0 .5rem; color:var(--phosphor); font-size:1.02rem}
.toolcard p{margin:0 0 .8rem; font-size:.84rem}