:root {
--lime:#D8FF3C; --edge:#1F1F1F; --cloud:#F3EDE9; --block:#DBD0C6;
--earth:#706161; --robot:#FCFCFA; --emph:#D8FF3C;
--chip-bg:#D8FF3C; --chip-ink:#1F1F1F;
--nav-ground:#1F1F1F; --nav-ink:#F3EDE9; --nav-rule:rgba(243,237,233,.14);

--font:'Space Grotesk',system-ui,sans-serif;
--t-head:40px; --lh-head:1.15;
--t-sub:24px;  --lh-sub:1.25;
--t-body:16px; --lh-body:1.4;
--t-small:13.5px;
--t-label:13px;

--ground:#F3EDE9; --panel:#FCFCFA; --ink:#1F1F1F;
--ink-2:rgba(31,31,31,.66); --ink-3:rgba(31,31,31,.42);
--rule:rgba(31,31,31,.16); --rule-strong:#1F1F1F;
--node-ink:#1F1F1F; --node:5px;
--numeral:#1F1F1F;
color-scheme:light;
}
:root[data-theme="dark"] {
--ground:#1F1F1F; --panel:rgba(243,237,233,.05); --ink:#F3EDE9;
--ink-2:rgba(243,237,233,.64); --ink-3:rgba(243,237,233,.44);
--rule:rgba(243,237,233,.16); --rule-strong:rgba(243,237,233,.42);
--node-ink:#D8FF3C; --node:5px;
--numeral:#D8FF3C;
color-scheme:dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
--ground:#1F1F1F; --panel:rgba(243,237,233,.05); --ink:#F3EDE9;
--ink-2:rgba(243,237,233,.64); --ink-3:rgba(243,237,233,.44);
--rule:rgba(243,237,233,.16); --rule-strong:rgba(243,237,233,.42);
--node-ink:#D8FF3C; --node:5px;
--numeral:#D8FF3C;
color-scheme:dark;
}
}

* { box-sizing:border-box; }
.hidden { display:none !important; }
/* 4.6: one typeface, one weight, tracking 0, never all caps, never right aligned. */
body, input, button, select, textarea {
  font-family:var(--font); font-weight:400; letter-spacing:0; }
h1, h2, h3, h4, strong, b, th { font-weight:400; }
/* Notion's bold spans become a Lime underline rather than a second weight, which is
   how the guidelines emphasise inside running text (7.5 Presenting Data). */
strong, b { box-shadow:inset 0 -0.32em 0 var(--emph); }
/* 3.6 combination 1, Edge on Lime: the deck uses a Lime flood exactly this way. */
mark { background:var(--lime); color:var(--edge); padding:0 3px; }
.sym { width:1em; height:1em; display:block; flex:0 0 auto; }
/* the lockup is sized by height so the wordmark keeps its drawn proportions */
.lockup { height:1em; width:auto; display:block; flex:0 0 auto; }
.sym path, .lockup path { fill:currentColor; }
a { color:inherit; text-decoration:underline; text-underline-offset:2px; }


body { margin:0; min-height:100vh; display:grid; place-items:center;
  background:var(--ground); color:var(--ink); font-size:var(--t-body);
  line-height:var(--lh-body); }
.card { width:min(92vw, 380px); padding:32px; background:var(--panel);
  border:1px solid var(--rule); }
.card .lockup { height:28px; margin-bottom:28px; }
h1 { font-size:var(--t-sub); line-height:var(--lh-sub); margin:0 0 4px; }
.sub { margin:0 0 24px; color:var(--muted); font-size:var(--t-small); }
label { display:block; margin:0 0 4px; font-size:var(--t-label); color:var(--muted); }
input { width:100%; padding:10px 12px; margin:0 0 16px; background:var(--ground);
  color:var(--ink); border:1px solid var(--rule); font-size:var(--t-body); }
input:focus { outline:2px solid var(--lime); outline-offset:-2px; }
button[type=submit] { width:100%; padding:11px; cursor:pointer;
  background:var(--lime); color:var(--edge); border:0; font-size:var(--t-body); }
.err:empty { display:none; }
.err { margin:0 0 16px; padding:10px 12px; border:1px solid var(--rule);
  color:var(--ink); font-size:var(--t-small); }
.foot { margin:20px 0 0; font-size:var(--t-small); color:var(--muted); }
#themebtn { margin-top:20px; padding:6px 10px; cursor:pointer;
  background:transparent; color:var(--muted); border:1px solid var(--rule);
  font-size:var(--t-label); }