/* Forms and tests (labs/practice/): shared look for the practice pages.
   Dark is the labs' house default (labs/index.html tokens); light follows the
   device, with the values from labs/formlab/brand-tokens.css. */
:root{
  color-scheme:dark;
  --bg:#0a0a0a; --panel:#1a1a1a; --panel2:#131315; --line:#333333; --line2:#242424;
  --text:#f0f0f0; --body:#c9ccd2; --soft:#a9adb4; --dim:#8b8f97;
  --accent:#3b82f6; --accent-ink:#fff; --amber:#fbbf24; --ok:#22c55e; --bad:#f26a7e;
  --stage:#121216; --stage-floor:#1b1b21; --plot-ink:#cfd2d8; --plot-dim:#5a5d66;
  --beam:#ffd977; --beam-fill:rgba(255,217,119,.42); --beam-ink:#ffd977;
  --l2:#00AEEF; --l3:#F7941E; --l4:#EC008C;
  --sel:rgba(59,130,246,.16); --hover:#222228;
  --glow:radial-gradient(900px 480px at 50% -8%, rgba(59,130,246,.10), transparent 70%),radial-gradient(700px 420px at 90% 110%, rgba(139,92,246,.08), transparent 70%);
  --mono:'SF Mono','Cascadia Mono','Consolas',ui-monospace,monospace;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --rainbow:linear-gradient(90deg,#7AC143,#F7941E,#ED1C45,#EC008C,#92278F,#2E3192,#00AEEF);
}
@media (prefers-color-scheme: light){ :root{
  color-scheme:light;
  --bg:#f4f4f5; --panel:#ffffff; --panel2:#f7f7f8; --line:#d4d6da; --line2:#e4e5e8;
  --text:#15171a; --body:#2b2f36; --soft:#4a4f58; --dim:#5f646d;
  --accent:#1d5fd1; --accent-ink:#fff; --amber:#9a5008; --ok:#2f7a16; --bad:#b5123a;
  --stage:#eef0f3; --stage-floor:#e1e4ea; --plot-ink:#2b2f36; --plot-dim:#8d939d;
  --beam:#d99a00; --beam-fill:rgba(240,176,0,.38); --beam-ink:#8a5a00;
  --l2:#006FA8; --l3:#9A5008; --l4:#B0006A;
  --sel:rgba(29,95,209,.10); --hover:#eceef2;
  --glow:none;
} }
*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);background-image:var(--glow);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:0}
h1{font-size:24px;font-weight:800;line-height:1.25}
h2{font-size:18px;font-weight:800}
h3{font-size:15px;font-weight:700}
p{margin:0}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:11px;color:var(--dim);font-weight:700}
.mono{font-family:var(--mono)}
.dim{color:var(--dim)} .soft{color:var(--soft)}
.small{font-size:13px} .tiny{font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header / footer */
header.top{position:relative;border-bottom:1px solid var(--line)}
header.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--rainbow)}
.topin{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;padding-block:12px}
.brand{display:flex;flex-direction:column;gap:3px;line-height:1;text-decoration:none;color:inherit}
.brand svg{height:22px;width:112px;display:block}
.brand .tag{font-size:10px;font-weight:700;letter-spacing:1.6px;color:var(--dim);text-transform:uppercase}
.crumbs{display:flex;gap:6px 12px;flex-wrap:wrap;font-size:13px}
.crumbs a{color:var(--soft);text-decoration:none}
.crumbs a:hover{color:var(--text);text-decoration:underline}
.spacer{flex:1}
footer.ft{border-top:1px solid var(--line);padding-block:14px;font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-top:auto}

/* buttons, pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);padding:10px 16px;font-weight:600;font-size:14px;min-height:42px;text-decoration:none;color:var(--text)}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sm{min-height:34px;padding:6px 12px;font-size:13px}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;border:1px solid var(--line);white-space:nowrap}
.lv{border-color:transparent;color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.lv2{--c:var(--l2)} .lv3{--c:var(--l3)} .lv4{--c:var(--l4)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
main{padding-block:24px 56px;flex:1}

/* index cards */
.lede{color:var(--soft);max-width:62ch;margin-top:8px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-top:22px;list-style:none;padding:0}
.cards>li{display:flex;flex-direction:column}
.cards>li>.card{height:auto;flex:1}
.card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px 20px 18px 24px;text-decoration:none;color:inherit;overflow:hidden;height:100%}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--card-accent,var(--accent))}
a.card:hover{border-color:var(--card-accent,var(--accent))}
.card h2{font-size:17px}
.card p{font-size:13.5px;color:var(--soft)}
.card .go{margin-top:auto;font-size:13px;font-weight:700;color:var(--card-accent,var(--accent))}
.card .meta{display:flex;gap:6px;flex-wrap:wrap}
.previews{margin:8px 4px 0;font-size:12.5px;color:var(--dim)}
.previews a{color:var(--soft)}
.version-badge{color:var(--text);background:var(--panel);font-size:12.5px}
.card .saved{font-size:12px;color:var(--amber);font-weight:600}

@media (max-width:520px){
  h1{font-size:21px}
  .panel{padding:16px}
}
@media print{
  :root{color-scheme:light;--bg:#fff;--panel:#fff;--panel2:#fff;--line:#bbb;--line2:#ddd;--text:#000;--body:#111;--soft:#222;--dim:#444;
    --accent:#1d5fd1;--amber:#8a4a00;--ok:#1d6b0a;--bad:#a0102f;--l2:#006FA8;--l3:#9A5008;--l4:#B0006A;--glow:none;
    --stage:#fff;--stage-floor:#f2f2f2;--hover:#e8e8e8;--sel:#e3ecfb;--plot-ink:#222;--plot-dim:#888;--beam:#c08a00;--beam-fill:rgba(240,176,0,.35)}
  body{background:#fff;font-size:12px}
  header.top::after,footer.ft{display:none}
  .noprint{display:none !important}
}