/* Quiet Falls after dark */
:root{--paper:#0b1325;--ink:#e7e8ed;--muted:#a0aec4;--line:#29364e;--accent:#e7c48a;--soft:#101d32;color-scheme:dark}
body{background:#0b1325}.site-header{height:86px;max-width:none;padding:0 max(35px,calc((100vw - 1210px)/2));background:#0b1325;border-bottom:1px solid #c1d5ff12;position:relative;z-index:2}.site-header nav{font-size:12px;gap:34px}.header-github{border-color:#9bb1d432}.wordmark .brand-logo,.footer-brand .brand-logo{filter:brightness(0) saturate(100%) invert(91%) sepia(15%) saturate(604%) hue-rotate(344deg) brightness(97%) contrast(88%)}.wordmark .brand-logo{width:127px;max-height:69px}.site-header a:hover{color:var(--accent)}
.night-hero{position:relative;display:block;isolation:isolate;min-height:780px;height:calc(100svh - 86px);max-height:1000px;margin:0;padding:0;background:#112342 url('assets/quiet-falls-night-sky.png') center 51%/cover no-repeat;overflow:hidden}.night-shade{position:absolute;inset:0;background:linear-gradient(180deg,#050f2726 0%,#06102b18 38%,#07132703 66%,#0b1325 100%);z-index:-1}.night-hero-content{position:relative;margin:0 auto;text-align:center;max-width:740px;padding:48px 25px 180px}.night-hero .eyebrow{justify-content:center;color:#c1cbda;font-size:9px;letter-spacing:2.8px;margin:0 0 18px;text-shadow:0 2px 8px #051025}.night-hero .status-dot{background:#efd89b;box-shadow:0 0 10px #e8bf6860}.night-hero h1{font-size:inherit;line-height:1;margin:0 auto 14px;max-width:400px}.hero-logo{width:100%;height:auto;filter:brightness(0) saturate(100%) invert(91%) sepia(15%) saturate(604%) hue-rotate(344deg) brightness(104%) contrast(88%) drop-shadow(0 5px 17px #040b22);margin:0 auto}.night-tagline{font-family:var(--serif);font-size:36px;line-height:1.22;color:#f8edda;margin:15px 0 14px;text-shadow:0 2px 20px #06112b}.night-tagline em{color:#e6c28e}.night-description{font-size:12px;letter-spacing:.2px;color:#c1cde2;margin:0 0 25px;text-shadow:0 2px 8px #041129}.night-actions{display:flex;justify-content:center;align-items:center;gap:25px}.button{background:#e2c08d;color:#18223a;border:1px solid #f6dfad7a;border-radius:4px;font-weight:600;box-shadow:0 5px 18px #050c1a40}.button:hover{background:#f3d5a4;color:#10192a}.night-secondary{font-size:12px;color:#e0e7f3;border-bottom:1px solid #c6d6ed60;padding:9px 0}.night-credit{color:#a4b4d1;font-size:9px;letter-spacing:.4px;margin:24px 0 0}.night-caption{position:absolute;bottom:29px;left:0;right:0;text-align:center;color:#b7c5d9;padding:0 20px}.night-caption>span{font-size:8px;letter-spacing:2px;display:block}.night-caption small{display:block;font-size:8px;opacity:.6;margin-top:7px;letter-spacing:.2px}
.section-rule{background:#0b1325;color:#8598b4;padding-top:25px;padding-bottom:25px;font-size:8px}.section-rule:before{background:#26364e}.about{padding-top:85px;padding-bottom:90px}.about-copy{color:#a9b8ce}.about h2,.craft h2,.open-notebook h2{color:#e6e8f0;font-size:45px}.eyebrow{color:#a4b5d0}.text-link{color:#e6c590;border-color:#be9e684d}.craft{background:linear-gradient(140deg,#142339,#101b2e);border-top:1px solid #b8cfee0b;border-bottom:1px solid #b8cfee0b}.craft-visual img{border-radius:8px;border:1px solid #b6c7df22;box-shadow:0 12px 45px #030b183d}.image-label{background:#101b2eea;color:#c4d1e1;border:1px solid #9bb4d32b}.craft-copy>p:not(.eyebrow),.open-notebook>div>p:not(.eyebrow){color:#a9b8ce}.notebook{background:#111d30;border:1px solid #34425a;box-shadow:0 15px 45px #04091540;transform:rotate(-1deg)}.notebook-bar{color:#a6b8d2;border-bottom-color:#304159}.notebook>a{border-bottom-color:#293950;color:#d6dfed}.notebook>a:hover{color:#e7c48a}.notebook>a span,.notebook>p{color:#8fa4c0}.site-footer{border-top-color:#26364e;color:#91a4be}.site-footer a:hover{color:#e7c48a}.site-footer .footer-brand .brand-logo{width:120px}.skip-link{background:#e7c48a;color:#0b1325}.toast{background:#e7c48a;color:#101a2c}
@media(min-width:1500px){.night-hero h1{max-width:450px}.night-hero-content{padding-top:55px}.night-tagline{font-size:39px}}
@media(max-width:760px){.site-header{height:76px;padding:0 22px}.wordmark .brand-logo{width:108px;max-height:60px}.site-header nav{font-size:11px;gap:22px}.night-hero{min-height:740px;height:calc(100svh - 76px);max-height:950px;background-position:58% center}.night-hero-content{padding:55px 22px 190px}.night-hero h1{max-width:320px}.night-hero .eyebrow{font-size:7px;letter-spacing:1.8px;margin-bottom:24px}.night-tagline{font-size:32px;margin-top:22px}.night-description{font-size:11px;max-width:260px;margin:0 auto 25px;line-height:1.8}.night-actions{flex-direction:column;gap:13px}.night-actions .button{font-size:12px;padding:13px 20px}.night-secondary{font-size:11px}.night-credit{font-size:8px;margin-top:20px}.night-caption>span{font-size:6px;letter-spacing:1.6px}.night-caption small{font-size:7px}.about{padding-top:55px;padding-bottom:55px}.about h2,.craft h2,.open-notebook h2{font-size:38px}.notebook{transform:none}.docs-shell{min-height:calc(100vh - 76px)}}
@media(prefers-reduced-motion:reduce){.button:hover{transform:none}}

/* Solid navigation, stronger type and a simple Shader Graph inspired sky. */
.site-header{height:88px;background:#10141d;border-bottom:1px solid #ffffff12;box-shadow:none;padding-top:0;padding-bottom:0}
.wordmark .brand-logo,.footer-brand .brand-logo,.hero-logo{filter:none}
.wordmark .brand-logo{width:168px;max-height:60px}
.site-header nav{gap:9px;font-size:13px;font-weight:700}
.site-header nav>a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 18px;background:#242c3b;color:#eff2f7;border:1px solid #354054;border-radius:5px;transition:background .15s}
.site-header nav>a:hover{background:#35435a;color:#fff}
.site-header nav>a[aria-current]{background:#e4c28f;border-color:#e4c28f;color:#152035}
.site-header nav .header-github{background:#1b222f;border-color:#354054}
.night-hero{height:calc(100svh - 88px);min-height:720px;max-height:960px;background:#11213a;background-image:none}
.night-hero::before{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/quiet-falls-night-sky.png') center center/cover no-repeat;filter:saturate(.42) brightness(.72)}
.night-shade{background:linear-gradient(180deg,#0712240d 0%,#08132712 48%,#0b1325 100%)}
.night-hero-content{padding-top:100px;max-width:850px}
.night-hero h1{max-width:535px;margin-bottom:36px}
.hero-logo{filter:drop-shadow(0 5px 13px #07101f50)}
.night-hero .eyebrow{font-family:var(--sans);font-weight:700;font-size:10px;letter-spacing:2px;margin-bottom:38px;color:#b8c9df}
.night-tagline{font-family:var(--sans);font-size:40px;font-weight:750;line-height:1.2;letter-spacing:-1.4px;color:#f2f4f7;text-shadow:none;margin-bottom:20px}
.night-tagline em{font-family:inherit;font-weight:750;font-style:normal;color:#e7c48a}
.night-description{font-size:14px;line-height:1.7;font-weight:500;color:#b9c7dc;text-shadow:none;margin-bottom:30px}
.night-actions .button{min-height:47px;padding:13px 22px;font-size:13px;font-weight:750;box-shadow:none}
.night-secondary{min-height:47px;display:inline-flex;align-items:center;gap:12px;background:#26364d;border:1px solid #425572;border-radius:4px;padding:12px 20px;font-size:13px;font-weight:700;color:#eff3fa}
.night-secondary:hover{background:#364a66;color:#fff}
.night-actions{gap:12px}.night-credit{font-size:10px;font-weight:500;color:#91a6c2;margin-top:25px}
#home h2{font-family:var(--sans);font-weight:750;font-size:39px;line-height:1.18;letter-spacing:-1.1px}
#home h2 em{font-family:inherit;font-style:normal;font-weight:750}
#home .eyebrow{font-weight:750}.notebook>a{font-family:var(--sans);font-size:17px;font-weight:650}.notebook{transform:none}
.text-link{font-weight:650}.site-footer .footer-brand .brand-logo{width:150px}
@media(min-width:1500px){.night-hero h1{max-width:580px}.night-hero-content{padding-top:110px}.night-tagline{font-size:42px}}
@media(max-width:760px){.site-header{height:auto;min-height:82px;padding:14px 20px;gap:15px}.wordmark .brand-logo{width:125px;max-height:48px}.site-header nav{gap:6px;font-size:10px}.site-header nav>a{padding:8px 10px;min-height:36px}.site-header nav .header-github{display:none}.night-hero{height:calc(100svh - 82px);min-height:710px;max-height:880px}.night-hero-content{padding:80px 23px 120px}.night-hero h1{max-width:390px;margin-bottom:30px}.night-hero .eyebrow{font-size:8px;letter-spacing:1.3px;margin-bottom:32px}.night-tagline{font-size:31px;letter-spacing:-.8px}.night-description{font-size:12px;max-width:290px}.night-actions{gap:10px}.night-actions .button,.night-secondary{font-size:12px;min-height:43px;justify-content:center;padding:11px 17px}.night-credit{font-size:9px;margin-top:24px}#home h2{font-size:32px;letter-spacing:-.8px}.site-footer .footer-brand .brand-logo{width:135px}}
@media(max-width:360px){.site-header{padding:12px;gap:8px}.wordmark .brand-logo{width:108px}.site-header nav>a{padding:8px;font-size:9px}}

/* Interface surfaces stay dark, independently of the sky or browser preferences. */
:root {
  --sky-image: url('assets/quiet-falls-night-sky.png');
  --sky-base: #243f59;
  --surface: #101827;
  --surface-raised: #162135;
  color-scheme: dark;
}
body {
  background-color: var(--sky-base);
  background-image: var(--sky-image);
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}
.night-hero {
  background: transparent;
  min-height: 660px;
  height: min(810px, calc(100svh - 88px));
}
.night-hero::before { display: none; }
.night-shade { background: linear-gradient(180deg, #0d182b0a, #0d182b1a); }
.night-hero-content { padding-top: 80px; padding-bottom: 100px; }
.page-content {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100% - 64px));
  margin: -24px auto 40px;
  background: var(--surface);
  border: 1px solid #61718c40;
  border-radius: 10px;
  box-shadow: 0 20px 70px #070d1e40;
}
.page-content .wrap { max-width: none; padding-inline: clamp(24px, 5vw, 64px); }
.page-content .section-rule { background: transparent; border-bottom: 1px solid #29364e; }
.page-content .section-rule::before { display: none; }
.page-content .about { padding-block: 72px; gap: 56px; }
.page-content .craft {
  background: var(--surface-raised);
  border-block: 1px solid #29364e;
  padding-block: 56px;
}
.page-content .craft-inner { gap: 50px; }
.page-content .open-notebook { padding-block: 72px; gap: 56px; }
.site-footer {
  max-width: 1120px;
  width: calc(100% - 64px);
  margin: 0 auto 32px;
  padding: 24px 32px;
  background: var(--surface);
  border: 1px solid #61718c40;
  border-radius: 8px;
}
.docs-shell, .docs-shell.dark {
  --paper: #101827;
  --ink: #dbe4f1;
  --muted: #a3b3cb;
  --line: #2d3c53;
  --accent: #e5bf88;
  --soft: #1b2a42;
  --doc-bg: #101827;
  --doc-panel: #152136;
  color: var(--ink);
  color-scheme: dark;
  background: var(--doc-bg);
  width: min(1500px, calc(100% - 64px));
  margin: 32px auto 48px;
  min-height: calc(100svh - 168px);
  border: 1px solid #61718c40;
  border-radius: 10px;
  box-shadow: 0 20px 70px #070d1e40;
}
.docs-shell .explorer { border-radius: 10px 0 0 10px; }
.docs-shell .search-box { background: #0e1829; }
.docs-shell .tree-note.active { background: #283d5c; color: #f2dfbf; }
.docs-shell .note-body blockquote { border-left-color: var(--accent); }
.docs-shell .note-graph circle { fill: #8aa5c7; }
.docs-shell .note-graph .current circle { fill: var(--accent); }
.docs-shell .search-result mark { background: var(--accent); color: #121a29; }
.docs-shell .explorer h2 { color: var(--ink); }
.docs-shell .note-content .note-category { color: #c1a576; }
@media (max-width: 1050px) {
  .page-content .about, .page-content .craft-inner, .page-content .open-notebook { gap: 32px; }
}
@media (max-width: 760px) {
  body { background-attachment: scroll; background-size: auto 850px; background-repeat: no-repeat; }
  .night-hero { min-height: 650px; height: auto; max-height: none; }
  .night-hero-content { padding: 72px 24px 95px; }
  .page-content { width: calc(100% - 28px); margin-top: -16px; margin-bottom: 24px; border-radius: 8px; }
  .page-content .wrap { padding-inline: 24px; }
  .page-content .about, .page-content .open-notebook { padding-block: 44px; gap: 28px; }
  .page-content .craft { padding-block: 32px; }
  .page-content .section-rule { gap: 16px; flex-wrap: wrap; }
  .site-footer { width: calc(100% - 28px); padding: 22px 24px; margin-bottom: 20px; }
  .docs-shell, .docs-shell.dark { width: calc(100% - 24px); margin: 16px auto 24px; min-height: calc(100svh - 122px); }
  .docs-shell .explorer { border-radius: 0; }
  .docs-mobile-bar { border-radius: 10px 10px 0 0; }
}