/* BlueGrid Energy, Design System v2, for the notebook hub.
   Square corners. Drawn lines. One accent. Ink 78, Paper 12, Signal 6,
   Graphite 4. The hub's own pages (spawn, token, admin, errors) keep their
   Bootstrap markup; the variables below restyle them. */

@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(fonts/inter-500.woff2) format("woff2")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-500.woff2) format("woff2")}
@font-face{font-family:Caveat;font-weight:600;font-display:swap;src:url(fonts/caveat-600.woff2) format("woff2")}

:root,[data-bs-theme="dark"]{
  color-scheme:dark;
  --bg:#0A1226;--panel:#0F1A35;--fg:#EAF0FB;--mute:#8D9BB8;--line:#2A3A63;--accent:#4EA8EE;--on-accent:#0A1226;
}
[data-bs-theme="light"]{
  color-scheme:light;
  --bg:#F6F8FB;--panel:#FFFFFF;--fg:#0A1226;--mute:#5B6B8C;--line:#C9D2E3;--accent:#2D56B3;--on-accent:#FFFFFF;
}
:root,[data-bs-theme="dark"],[data-bs-theme="light"]{
  --bs-body-bg:var(--bg);--bs-body-color:var(--fg);--bs-emphasis-color:var(--fg);
  --bs-secondary-color:var(--mute);--bs-tertiary-bg:var(--panel);--bs-secondary-bg:var(--panel);
  --bs-border-color:var(--line);--bs-border-radius:0;--bs-border-radius-sm:0;--bs-border-radius-lg:0;
  --bs-border-radius-xl:0;--bs-border-radius-pill:0;
  --bs-link-color:var(--accent);--bs-link-hover-color:var(--fg);--bs-link-color-rgb:78,168,238;
  --bs-primary:var(--accent);--bs-focus-ring-color:var(--accent);
  --bs-body-font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
}

*{border-radius:0 !important}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.6 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
a:hover{color:var(--fg)}
:focus-visible{outline:2px solid var(--accent) !important;outline-offset:2px;box-shadow:none !important}
.wrap{max-width:960px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lab{font:500 11px/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.mark{display:inline-block;width:14px;height:14px;background:var(--accent);margin-right:10px;vertical-align:-1px}
.hand{font:600 21px/1.1 Caveat,"Bradley Hand",cursive;color:var(--accent)}
hr{border:0;border-top:1px solid var(--line);margin:0;opacity:1}

/* The bar on every page */
.bg-top{border-bottom:1px solid var(--line)}
.bg-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;flex-wrap:wrap}
.bg-brand{text-decoration:none;color:var(--mute)}
.bg-brand:hover{color:var(--fg)}
.bg-nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.bg-nav .who{font:400 13px var(--mono);color:var(--mute)}
.bg-nav a.lnk{font:500 11px/1 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--fg);text-decoration:none}
.bg-nav a.lnk:hover{color:var(--accent)}
.bg-theme{background:transparent;border:1px solid var(--line);color:var(--mute);width:32px;height:32px;cursor:pointer;font:400 14px/1 var(--mono)}
.bg-theme:hover{color:var(--fg);border-color:var(--fg)}

/* Buttons, as in the design book */
.btn{font:500 12px Inter,sans-serif !important;letter-spacing:.14em;text-transform:uppercase;padding:14px 22px;border:1px solid var(--fg);background:transparent;color:var(--fg);cursor:pointer;text-decoration:none;display:inline-block;line-height:1.2}
.btn:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.fill{background:var(--fg);color:var(--bg)}
.btn.acc,.btn-primary,.btn-jupyter{background:var(--accent) !important;border:1px solid var(--accent) !important;color:var(--on-accent) !important}
.btn.acc:hover,.btn-primary:hover,.btn-jupyter:hover{background:var(--fg) !important;border-color:var(--fg) !important;color:var(--bg) !important}
.btn-danger{background:transparent !important;border:1px solid var(--fg) !important;color:var(--fg) !important}
.btn-danger:hover{background:var(--fg) !important;color:var(--bg) !important}
.btn-sm,.btn-xs{padding:8px 14px}
.btn[disabled]{opacity:.5;cursor:default}

/* Pages */
.bg-main{padding-bottom:96px}
.bg-hero{padding:88px 0 56px}
.bg-hero h1{font-weight:600;letter-spacing:-.04em;line-height:1.02;font-size:clamp(44px,9vw,88px);margin:24px 0 20px}
.lede{color:var(--mute);max-width:52ch;margin:0;font-size:18px}
.bg-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;align-items:center}
.bg-small{color:var(--mute);font-size:14px;margin:16px 0 0}
/* Red and green mean a price's direction only: an error is a plain, drawn box. */
.bg-error{border:1px solid var(--fg);color:var(--fg);padding:16px 20px;margin:28px 0 0;max-width:60ch}

/* The student's server: a figure first, words after */
.bg-server{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;align-items:end}
.bg-server .n{font:500 32px/1 var(--mono);letter-spacing:-.03em;margin-top:12px;display:block;color:var(--fg)}
.bg-server .n.on::before{content:"";display:inline-block;width:12px;height:12px;background:var(--accent);margin-right:12px;vertical-align:4px}
.bg-server .n.off{color:var(--mute)}

/* The tutorials */
section.bg-list{padding:72px 0 0}
section.bg-list h2{font-weight:600;letter-spacing:-.04em;line-height:1.02;font-size:clamp(28px,4.5vw,40px);margin:16px 0 28px}
.bg-lessons{list-style:none;margin:0;padding:0}
.bg-lessons li{border-top:1px solid var(--line)}
.bg-lessons li:last-child{border-bottom:1px solid var(--line)}
.bg-lessons a{display:grid;grid-template-columns:48px 1fr auto;gap:8px 16px;padding:20px 0;color:var(--fg);text-decoration:none;align-items:baseline}
.bg-lessons .num{font:400 13px/2.2 var(--mono);color:var(--mute)}
.bg-lessons .title{font-size:19px;letter-spacing:-.01em}
.bg-lessons .teaches{color:var(--mute);display:block;font-size:15px;letter-spacing:0;margin-top:4px}
.bg-lessons .go{font:500 11px/2.2 Inter,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.bg-lessons a:hover .title,.bg-lessons a:hover .go,.bg-lessons a:focus-visible .go{color:var(--accent)}
.bg-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-top:36px;color:var(--mute);font-size:14px}
.bg-notes b{color:var(--fg);font-weight:600}
@media(max-width:560px){.bg-lessons a{grid-template-columns:40px 1fr}.bg-lessons .go{display:none}}

/* The sketch on the sign-in page: drawn lines, for an idea */
.sk{position:relative;padding:28px 16px;background:var(--panel);margin-top:72px}
.sk::before,.sk::after{content:"";position:absolute;inset:0;border:1.5px solid var(--fg);pointer-events:none}
.sk::before{filter:url(#r1)}
.sk::after{inset:2px -1px -2px 1px;opacity:.3;filter:url(#r2)}
svg{display:block;max-width:100%;height:auto}
.s{stroke:var(--fg);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.t{fill:var(--fg);font:500 11px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.h{fill:var(--accent);font:600 19px Caveat,cursive}

/* The test sign-in form */
.bg-form{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;max-width:560px}
.bg-form input[type=email]{flex:1 1 260px;background:transparent;border:1px solid var(--line);color:var(--fg);padding:13px 16px;font:400 15px var(--mono)}
.bg-form input[type=email]:focus{border-color:var(--accent);outline:none}

/* The hub's own pages: spawn progress, token, errors */
.container{max-width:960px}
.progress{height:12px;background:transparent;border:1px solid var(--line);margin:24px 0 8px}
.progress-bar{background:var(--accent) !important}
#progress-message,#progress-log{font:400 13px var(--mono);color:var(--mute)}
.alert{border:1px solid var(--line);background:var(--panel);color:var(--fg)}
.form-control{background:transparent;border:1px solid var(--line);color:var(--fg)}
.table{--bs-table-bg:transparent;--bs-table-striped-bg:var(--panel);--bs-table-color:var(--fg)}
.error{max-width:960px;margin:0 auto;padding:88px 24px 96px}
.error h1{font-weight:600;letter-spacing:-.04em;line-height:1.05;font-size:clamp(32px,6vw,56px);margin:20px 0 20px}
.error p{color:var(--mute);max-width:60ch;font-size:18px}
.modal-content{background:var(--panel);border:1px solid var(--fg)}
footer.bg-foot{color:var(--mute);font-size:13px;padding:0 0 56px}
footer.bg-foot hr{margin-bottom:24px}