:root {
  color-scheme: dark;
  --ink: #edf3ff;
  --muted: #90a1bd;
  --line: rgba(168, 193, 235, .16);
  --paper: #07101f;
  --panel: rgba(14, 28, 51, .74);
  --blue: #75c5ff;
  --violet: #a698ff;
  --lime: #a8ffcc;
  --serif: Iowan Old Style, Palatino Linotype, Book Antiqua, Palatino, STSong, SimSun, serif;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); background: var(--paper); color: var(--ink); }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
code, pre { font-family: var(--mono); }

.site-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.site-nav { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 700; letter-spacing: .05em; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; color: #07101f; background: linear-gradient(135deg, var(--blue), var(--violet)); border-radius: 8px; font: 700 18px/1 var(--mono); }
.nav-links { display: flex; align-items: center; gap: 23px; color: var(--muted); font-size: 13px; }
.nav-links a:hover { color: var(--ink); }
.nav-links .nav-cta { color: var(--ink); border: 1px solid var(--line); padding: 9px 13px; border-radius: 999px; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font: 700 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .13em; }
.eyebrow::before { content: ''; width: 20px; height: 1px; background: currentColor; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 25px; }
.section-title { margin: 8px 0 0; font: 500 clamp(27px, 3.2vw, 40px)/1.1 var(--serif); letter-spacing: -.035em; }
.section-more { color: var(--muted); font: 13px var(--mono); }
.tag { display: inline-flex; color: var(--blue); background: rgba(117, 197, 255, .09); border: 1px solid rgba(117, 197, 255, .14); border-radius: 100px; padding: 5px 9px; font: 11px/1 var(--mono); }
.filing-footer { border-top: 1px solid var(--line); margin-top: 102px; padding: 28px 0 42px; display: flex; justify-content: space-between; gap: 18px; color: var(--muted); font-size: 12px; }
.filing-footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
.filing-footer a { text-decoration: underline; text-underline-offset: 4px; }
.filing-footer .police-filing { display: inline-flex; align-items: center; gap: 5px; }
.police-badge { width: 15px; height: 15px; flex: 0 0 15px; }
.filing-footer a:hover { color: var(--ink); }

/* 01: Developer workbench */
.workbench { min-height: 100vh; overflow-x: clip; background: #07101f; }
.workbench::before { content: ''; z-index: 0; position: absolute; top: -220px; left: 50%; width: 1000px; height: 560px; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(67, 114, 225, .23), transparent 65%); pointer-events: none; }
.workbench .site-shell { position: relative; z-index: 1; }
.workbench-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 98px); padding: 82px 0 118px; align-items: center; }
.workbench h1 { margin: 19px 0 19px; max-width: 660px; font: 500 clamp(48px, 6.3vw, 84px)/.97 var(--serif); letter-spacing: -.065em; }
.workbench h1 em { color: #9cc8ff; font-style: normal; }
.hero-copy { max-width: 500px; color: var(--muted); font-size: 16px; line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 18px; margin-top: 30px; font-size: 13px; }
.button { background: linear-gradient(135deg, #b9dcff, #998eff); color: #07101f; padding: 12px 16px; border-radius: 8px; font-weight: 750; box-shadow: 0 10px 32px rgba(89, 121, 255, .2); }
.quiet-link { color: var(--muted); text-decoration: underline; text-underline-offset: 5px; }
.terminal-card { background: linear-gradient(145deg, rgba(27, 48, 83, .89), rgba(9, 19, 36, .92)); border: 1px solid rgba(160, 194, 255, .22); border-radius: 15px; box-shadow: 0 30px 90px rgba(0, 0, 0, .35); overflow: hidden; transform: rotate(2deg); }
.terminal-bar { height: 45px; display: flex; gap: 7px; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--line); }
.terminal-dot { width: 8px; height: 8px; background: #ff8b80; border-radius: 50%; }.terminal-dot:nth-child(2) { background: #ffd781; }.terminal-dot:nth-child(3) { background: #83e5b6; }
.terminal-label { margin-left: 7px; color: var(--muted); font: 10px var(--mono); }
.terminal-content { padding: 25px; font: 12px/1.85 var(--mono); color: #bdcce5; }
.terminal-content .prompt { color: #8de8c5; }.terminal-content .command { color: #cbbdff; }.terminal-content .comment { color: #7185a6; }.terminal-content .result { color: #8cbfff; }
.status-strip { display: flex; justify-content: space-between; align-items: center; gap: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0; color: var(--muted); font: 11px var(--mono); }
.status-group { display: flex; gap: 20px; }.status-up::before { content: '●'; color: #65efad; margin-right: 7px; }
.notes-section { padding-top: 98px; }
.note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.note-card { min-height: 255px; padding: 23px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease; }
.note-card:hover { transform: translateY(-5px); border-color: rgba(141, 201, 255, .42); }
.note-card .meta { color: var(--muted); font: 11px var(--mono); }.note-card h3 { margin: 19px 0 12px; font-size: 19px; letter-spacing: -.025em; }.note-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }.note-card .tag { margin-top: auto; align-self: flex-start; }
.split-section { padding-top: 112px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 15px; }
.principle-card { border-radius: 12px; padding: 30px; background: linear-gradient(145deg, #172c55, #0b1629); border: 1px solid var(--line); }.principle-card h3 { font: 500 30px/1.15 var(--serif); margin: 43px 0 0; letter-spacing: -.04em; }.principle-card p { color: var(--muted); line-height: 1.8; font-size: 13px; }
.code-panel { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0a1324; }.code-panel header { padding: 14px 18px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); color: var(--muted); font: 11px var(--mono); }.code-panel pre { padding: 21px; margin: 0; overflow: auto; color: #b7cbe8; font-size: 12px; line-height: 1.8; }.code-key { color: #c4a7ff; }.code-fn { color: #7ac9ff; }.code-str { color: #9ae3ad; }.code-note { color: #627a9e; }

/* 02: Knowledge base */
.theme-light { color-scheme: light; --ink: #1d2836; --muted: #687587; --line: #d9e0e8; --paper: #f5f6f3; --panel: #ffffff; --blue: #3659a8; }
.knowledge { min-height: 100vh; background: #f5f6f3; color: var(--ink); background-image: linear-gradient(rgba(30, 44, 59, .028) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 44, 59, .028) 1px, transparent 1px); background-size: 36px 36px; }
.knowledge .site-nav { border-bottom: 1px solid var(--line); }.knowledge .brand-mark { color: white; background: #29446f; border-radius: 50%; font-size: 14px; }.knowledge .nav-links .nav-cta { border-color: #bfc9d6; }
.knowledge-hero { padding: 102px 0 80px; max-width: 880px; }.knowledge-hero h1 { margin: 17px 0; font: 500 clamp(52px, 7vw, 90px)/.94 var(--serif); letter-spacing: -.065em; }.knowledge-hero p { max-width: 550px; color: var(--muted); font-size: 16px; line-height: 1.85; }
.reading-line { margin-top: 45px; display: flex; align-items: center; gap: 12px; font: 11px var(--mono); color: var(--muted); }.reading-line .progress { height: 2px; width: 190px; background: #d7dde4; }.reading-line .progress i { display: block; width: 62%; height: 100%; background: #29446f; }
.knowledge .tag { color: #29446f; border-color: #d9e0e8; background: #eef1f8; }.kb-latest { padding: 14px 0 92px; }.kb-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.kb-card { min-height: 305px; padding: 25px; background: rgba(255, 255, 255, .76); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; }.kb-card:hover { background: #fff; }.kb-card .number { color: #9ba6b2; font: 11px var(--mono); }.kb-card h3 { margin: 45px 0 12px; font: 500 25px/1.12 var(--serif); letter-spacing: -.04em; }.kb-card p { color: var(--muted); line-height: 1.7; font-size: 13px; margin: 0; }.kb-card .read-link { margin-top: auto; color: #29446f; font: 12px var(--mono); }
.kb-route { padding: 76px 0 0; border-top: 1px solid var(--line); }.route-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 60px; }.route-copy p { color: var(--muted); font-size: 14px; line-height: 1.8; }.route-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }.route-list li { display: grid; grid-template-columns: 54px 1fr auto; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: center; }.route-list b { font: 400 13px var(--mono); color: #8390a1; }.route-list strong { font-size: 15px; }.route-list span { color: var(--muted); font: 11px var(--mono); }.sql-card { margin-top: 50px; padding: 22px; background: #1e2937; color: #dfe9f4; border-radius: 4px; box-shadow: 9px 9px 0 #dce2e5; }.sql-card .sql-label { color: #98add0; font: 11px var(--mono); }.sql-card pre { margin: 15px 0 0; white-space: pre-wrap; font-size: 12px; line-height: 1.8; }.sql-card .sql-key { color: #d9aeff; }.sql-card .sql-table { color: #91d2bc; }

/* 03: Terminal log */
.theme-terminal { color-scheme: dark; --ink: #d8ffe5; --muted: #79ac8d; --line: rgba(126, 234, 156, .23); --paper: #050807; --panel: #0a110d; --blue: #a6ffbc; }
.terminal-page { min-height: 100vh; background: #050807; color: var(--ink); font-family: var(--mono); }.terminal-page .site-nav { border-bottom: 1px dashed var(--line); }.terminal-page .brand { font-family: var(--mono); }.terminal-page .brand-mark { color: #05230d; background: #a6ffbc; border-radius: 0; }.terminal-page .nav-links { font-family: var(--mono); }.terminal-page .nav-links .nav-cta { border-radius: 0; border-style: dashed; }
.terminal-hero { padding: 99px 0 72px; }.terminal-kicker { color: #74dd91; font-size: 12px; }.terminal-hero h1 { max-width: 930px; margin: 15px 0 17px; font: 500 clamp(38px, 5.8vw, 75px)/1.08 var(--mono); letter-spacing: -.07em; }.terminal-hero p { max-width: 630px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }.cursor { display: inline-block; width: .58em; height: 1em; background: #a6ffbc; vertical-align: -.16em; animation: blink 1.1s steps(1) infinite; }@keyframes blink { 50% { opacity: 0; } }
.terminal-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px dashed var(--line); border-left: 1px dashed var(--line); }.t-stat { padding: 18px; border-right: 1px dashed var(--line); border-bottom: 1px dashed var(--line); }.t-stat span { display: block; color: var(--muted); font-size: 10px; }.t-stat b { display: block; margin-top: 9px; color: #b0ffca; font-size: 16px; font-weight: 400; }
.log-section { padding-top: 98px; }.terminal-page .section-title { font-family: var(--mono); font-size: clamp(25px, 3vw, 37px); }.terminal-page .eyebrow { color: #74dd91; }.terminal-page .tag { border-radius: 0; color: #a6ffbc; background: #0b2111; border-color: #245e35; }
.log-list { border-top: 1px dashed var(--line); }.log-entry { display: grid; grid-template-columns: 130px 1fr auto; gap: 24px; padding: 27px 0; border-bottom: 1px dashed var(--line); align-items: start; }.log-date { color: #6d9e7c; font-size: 11px; }.log-entry h3 { font-size: 15px; margin: 0 0 10px; font-weight: 500; }.log-entry p { color: var(--muted); font: 12px/1.75 var(--mono); margin: 0; }.log-entry .plus { color: #a6ffbc; font-size: 16px; }
.command-window { margin-top: 66px; border: 1px solid #397d4d; background: #071009; }.command-window header { padding: 13px 17px; color: #83bc91; border-bottom: 1px dashed var(--line); font-size: 11px; }.command-window pre { margin: 0; padding: 22px; color: #b8ffcb; font-size: 12px; line-height: 1.9; overflow: auto; }.command-window .dim { color: #729b7d; }.command-window .ok { color: #d4ff78; }.terminal-page .filing-footer { font-family: var(--mono); }

@media (max-width: 720px) {
  .site-shell { width: min(100% - 32px, 1180px); }.site-nav { height: 66px; }.nav-links { gap: 13px; }.nav-links a:not(.nav-cta) { display: none; }
  .workbench-hero, .split-section, .route-grid { grid-template-columns: 1fr; }.workbench-hero { padding: 57px 0 72px; }.terminal-card { transform: none; }.note-grid, .kb-grid, .terminal-stats { grid-template-columns: 1fr; }.status-strip { align-items: flex-start; flex-direction: column; }.notes-section { padding-top: 70px; }.split-section { padding-top: 70px; }.kb-latest { padding-bottom: 70px; }.knowledge-hero { padding: 70px 0 45px; }.kb-card { min-height: 245px; }.route-grid { gap: 28px; }.log-section { padding-top: 68px; }.log-entry { grid-template-columns: 1fr; gap: 11px; }.log-entry .plus { display: none; }.terminal-stats .t-stat { min-height: 77px; }.filing-footer { margin-top: 70px; flex-direction: column; }
}