@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { color-scheme: dark; --page:#25292d; --surface:#2d3237; --text:#edf0f2; --muted:#a9b3bc; --line:#ffffff1c; --blue:#a5c7e9; --accent:#a5c7e9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:100px; background:var(--page); }
body { margin:0; color:var(--text); background:var(--page); font:16px/1.65 system-ui,sans-serif; letter-spacing:0; }
button,input,summary { font:inherit; }
button,a,input,summary { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; }
a { color:var(--blue); text-underline-offset:4px; }
:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
[hidden] { display:none !important; }
svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
h1,h2,h3,h4,.guide-index,.eyebrow,.toolbar-subject { font-family:"Space Grotesk",system-ui,sans-serif; }
.guide-shell { max-width:1536px; margin:auto; padding:16px 32px 72px; }
.skip-link { position:fixed; top:-80px; z-index:100; padding:12px; background:var(--surface); }
.skip-link:focus { top:10px; }
.guide-toolbar { position:sticky; top:10px; z-index:30; display:flex; gap:8px; align-items:center; padding:9px; border:1px solid var(--line); border-radius:8px; background:#292e33f2; backdrop-filter:blur(14px); }
.icon-button { width:42px; height:42px; display:inline-grid; place-items:center; flex:none; border:1px solid var(--line); border-radius:6px; background:#ffffff03; color:#bdcbd7; text-decoration:none; position:relative; transition:background .18s,transform .18s,border-color .18s; }
.icon-button:hover { background:#a5c7e915; border-color:#a5c7e966; transform:translateY(-1px); }
[data-tooltip]::after { content:attr(data-tooltip); position:absolute; z-index:60; top:calc(100% + 9px); right:0; width:max-content; max-width:210px; padding:5px 10px; border:1px solid #ffffff2b; border-radius:5px; font:12px/1.5 system-ui,sans-serif; background:#171b20; color:#edf0f2; box-shadow:0 6px 20px #0004; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s; }
[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after { opacity:1; visibility:visible; }
.toolbar-subject { font-size:14px; font-weight:600; margin:0 16px 0 4px; }
.guide-search { margin-left:auto; flex:1; max-width:420px; display:flex; gap:10px; align-items:center; padding:0 12px; background:#202428; border:1px solid var(--line); border-radius:6px; }
.guide-search svg { width:18px; color:var(--muted); }
input[type=search] { width:100%; min-width:0; height:40px; border:0; background:transparent; color:var(--text); font-size:14px; outline-offset:0; }
input::placeholder { color:#98a4af; }
.guide-intro { display:grid; grid-template-columns:1fr 1.35fr; gap:32px; align-items:center; padding:42px 8px 32px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 3px; color:#dec891; font-size:12px; font-weight:600; text-transform:uppercase; }
h1 { font-size:42px; line-height:1.15; font-weight:600; margin:0 0 10px; }
.date-line { color:var(--muted); margin:0; font-size:14px; }
.scope-lines p { margin:8px 0; font-size:14px; }
.scope-lines b { font-weight:600; margin-right:8px; }
.scope-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--blue); margin-right:10px; }
.scope-dot.oxygen { background:#e4ada7; }
.scope-boundary { color:var(--muted); padding-left:17px; font-size:12px !important; }
.guide-layout { display:grid; grid-template-columns:225px minmax(0,1fr); gap:44px; align-items:start; padding-top:26px; }
.guide-index { position:sticky; top:94px; max-height:calc(100dvh - 110px); overflow:auto; scrollbar-width:thin; padding:0 10px 12px 0; font-size:13px; }
.guide-index summary { display:flex; justify-content:space-between; margin-bottom:14px; color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; cursor:pointer; }
.guide-index summary svg { width:15px; height:15px; }
summary { list-style:none; }
summary::-webkit-details-marker { display:none; }
.index-group { color:var(--accent); font-size:10px; margin:18px 0 6px; font-weight:600; text-transform:uppercase; }
#contents a { display:flex; gap:9px; color:#b9c2ca; text-decoration:none; line-height:1.45; padding:7px 8px; border-left:2px solid transparent; transition:background .16s,color .16s,border-color .16s; border-radius:0 4px 4px 0; }
#contents a span { opacity:.6; min-width:19px; font-size:11px; padding-top:2px; }
#contents a:hover,#contents a.active { background:#ffffff06; color:var(--text); border-left-color:var(--accent); }
.archive-link { display:block; border-top:1px solid var(--line); padding:15px 8px 0; margin-top:16px; font-size:12px; text-decoration:none; }
#chapters { min-width:0; }
.chapter { --accent:var(--blue); border-bottom:1px solid var(--line); scroll-margin-top:96px; }
.chapter[data-track=oxygen],.oxygen { --accent:#e4ada7; }
.chapter[data-track=revision],.revision { --accent:#dfc486; }
.chapter[data-track=enzymes],.enzymes { --accent:#9ccab8; }
.chapter[data-track=sources],.sources { --accent:#bbc0c5; }
.chapter > summary { display:flex; align-items:center; gap:16px; padding:23px 6px; cursor:pointer; transition:background .2s; border-radius:5px; }
.chapter > summary:hover { background:#ffffff04; }
.chapter-number { color:var(--accent); font:500 13px "Space Grotesk",sans-serif; width:26px; flex:none; }
.chapter-heading { flex:1; min-width:0; }
.chapter-label { color:var(--accent); font-size:10px; font-weight:600; text-transform:uppercase; }
.chapter h2 { font-size:22px; font-weight:500; line-height:1.3; margin:3px 0; overflow-wrap:anywhere; }
.chapter-subtitle { color:var(--muted); font-size:12px; display:block; }
.chapter > summary > svg { width:19px; color:var(--muted); transition:transform .2s; }
.chapter[open] > summary > svg { transform:rotate(180deg); }
.chapter-body { padding:2px 6px 32px 48px; animation:reveal .23s ease-out; }
.chapter-body p { margin:12px 0; }
.chapter-body strong { font-weight:650; color:#f0f2f4; }
.chapter-body h3 { font-size:17px; font-weight:600; color:var(--accent); margin:26px 0 10px; line-height:1.4; }
.chapter-body > h3:first-child { margin-top:8px; }
.chapter-body ul,.chapter-body ol { padding-left:22px; margin:12px 0 22px; }
.chapter-body li { padding:2px 0 5px 3px; }
.chapter-body li::marker { color:var(--accent); }
.chapter-body .key-line { border-left:2px solid var(--accent); background:color-mix(in srgb,var(--accent) 5%,transparent); padding:12px 17px; margin:6px 0 24px; font-size:15px; }
.table-wrap { max-width:100%; overflow:auto; border:1px solid var(--line); border-radius:6px; margin:14px 0 24px; scrollbar-width:thin; }
table { width:100%; border-collapse:collapse; font-size:14px; line-height:1.6; }
th,td { text-align:left; vertical-align:top; padding:13px 15px; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
th { background:color-mix(in srgb,var(--accent) 9%,var(--page)); color:var(--accent); font-size:12px; font-weight:600; }
tbody tr:last-child td { border-bottom:0; }
td:first-child { width:23%; color:#e1e6e9; font-weight:500; }
tbody tr:nth-child(even) { background:#ffffff02; }
tbody tr:hover { background:#ffffff04; }
.recall { border-left:2px solid #ffffff24; margin:12px 0; }
.recall > summary { padding:10px 12px; font-size:14px; font-weight:500; cursor:pointer; display:flex; gap:12px; align-items:center; justify-content:space-between; }
.recall > summary svg { width:16px; height:16px; }
.recall[open] > summary svg { transform:rotate(180deg); }
.recall[open] { border-left-color:var(--accent); }
.recall > p { margin:0; padding:0 12px 12px; color:#c6d1da; font-size:14px; }
.source-row { display:flex; flex-wrap:wrap; gap:8px 20px; padding:16px 0 0; margin-top:20px; border-top:1px dashed var(--line); }
.source-row a { font-size:12px; color:var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
.source-row a:hover { color:var(--accent); }
.source-row svg { width:14px; height:14px; }
.source-catalog > li > a:first-child { display:inline-flex; gap:6px; align-items:center; font-size:14px; }
.source-catalog svg { width:15px; height:15px; }
.source-catalog p { font-size:13px; color:var(--muted); margin:5px 0 16px; }
.source-text-link { font-size:11px; margin-left:12px; color:var(--muted); }
.retry-button { border:1px solid var(--line); border-radius:5px; background:var(--surface); padding:4px 12px; }
.figures { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:20px 0 24px; }
figure { margin:0; min-width:0; }
.figure-open { display:block; width:100%; padding:0; border:1px solid #ffffff18; border-radius:6px; background:#f5f5f5; position:relative; overflow:hidden; }
.figure-open img { display:block; width:100%; height:auto; aspect-ratio:10/7; object-fit:contain; transition:transform .25s; }
.figure-open:hover img { transform:scale(1.025); }
.figure-open svg { position:absolute; bottom:8px; right:8px; color:#515b65; width:17px; }
figcaption { font-size:12px; line-height:1.6; color:var(--muted); padding:8px 0; }
figcaption strong { display:block; font-size:13px; margin-bottom:3px; }
.term { text-decoration:none; border:0; background:none; color:inherit; border-radius:2px; cursor:help; transition:background .13s; }
.term:hover,.term:focus-visible { background:#b5cde414; }
.term-tooltip { position:fixed; z-index:100; max-width:min(350px,calc(100vw - 24px)); padding:15px 18px; border:1px solid #ffffff2e; background:#191d21fa; border-radius:7px; box-shadow:0 14px 50px #0007; font-size:13px; line-height:1.65; animation:reveal .14s ease; max-height:40dvh; overflow:auto; }
.term-tooltip strong { display:block; color:#b9d5ed; font-size:14px; margin-bottom:5px; }
.term-tooltip p { margin:0; color:#d4dce3; }
.guide-dialog { color:var(--text); border:1px solid #ffffff30; border-radius:8px; background:#292e33; padding:0; width:min(880px,calc(100% - 28px)); max-height:86dvh; box-shadow:0 22px 100px #0008; }
.guide-dialog::backdrop { background:#0d1118b5; backdrop-filter:blur(5px); }
.guide-dialog header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 22px; border-bottom:1px solid var(--line); background:#292e33; }
.guide-dialog h2 { margin:0; font-size:21px; font-weight:500; }
.dialog-search { display:block; margin:18px 22px 8px; border:1px solid var(--line); border-radius:5px; padding:0 12px; }
#glossary-list { padding:8px 22px 25px; }
#glossary-list dl { margin:0; }
#glossary-list dt { color:var(--blue); font-weight:600; font-size:14px; margin-top:18px; }
#glossary-list dd { margin:4px 0 14px; font-size:14px; color:#c7d0d8; padding-bottom:16px; border-bottom:1px solid var(--line); }
.figure-dialog { width:min(1100px,calc(100% - 28px)); }
.figure-dialog img { display:block; width:100%; max-height:65dvh; object-fit:contain; background:#f5f5f5; }
.figure-dialog > p { padding:0 22px 10px; font-size:14px; }
.search-status { color:var(--muted); font-size:14px; margin-left:269px; }
.empty-state,.load-error { padding:35px 0; color:var(--muted); }
.loading-status { color:var(--muted); }
.external-note { font-size:13px; color:var(--muted); }
@keyframes reveal { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media(min-width:1600px) { .guide-shell { padding-left:48px; padding-right:48px; } .guide-layout { grid-template-columns:240px minmax(0,1fr); gap:55px; } }
@media(max-width:1050px) { .toolbar-subject { display:none; } .guide-layout { grid-template-columns:190px minmax(0,1fr); gap:22px; } .guide-shell { padding:12px 20px 50px; } .chapter-body { padding-left:6px; } .guide-intro { gap:25px; } .search-status { margin-left:212px; } }
@media(max-width:760px) { html { scroll-padding-top:150px; } .guide-shell { padding:8px 14px 40px; } .guide-toolbar { flex-wrap:wrap; top:6px; gap:6px; } .guide-search { order:2; flex-basis:100%; max-width:none; } .guide-toolbar .icon-button:first-child { margin-right:auto; } .guide-intro { grid-template-columns:1fr; gap:18px; padding:28px 4px 22px; } h1 { font-size:36px; } .guide-layout { display:block; padding-top:16px; } .guide-index { position:static; max-height:none; padding:8px 4px 18px; border-bottom:1px solid var(--line); } #contents { display:grid; grid-template-columns:1fr 1fr; column-gap:8px; } .index-group { grid-column:1/-1; } .archive-link { display:none; } .guide-index summary { margin-bottom:5px; } .chapter > summary { padding:20px 2px; gap:10px; } .chapter h2 { font-size:20px; } .chapter-number { width:22px; } .chapter-body { padding:0 2px 22px; font-size:15px; } .chapter { scroll-margin-top:140px; } .chapter-subtitle { font-size:11px; } .search-status { margin-left:0; } th,td { padding:11px 10px; } table { font-size:13px; } .figures { gap:12px; } }
@media(max-width:460px) { .figures { grid-template-columns:1fr; } .table-wrap { border:0; border-radius:0; } table,tbody,tr,td { display:block; width:100%; } thead { display:none; } tbody tr { border:1px solid var(--line); border-radius:5px; margin-bottom:12px; } td { border:0; padding:8px 12px; } td:first-child { width:100%; color:var(--accent); background:#ffffff04; border-bottom:1px solid var(--line); } td:not(:first-child)::before { content:attr(data-label); display:block; font-size:10px; text-transform:uppercase; color:var(--muted); margin-bottom:3px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media print { html,body { background:white; color:#111; } .guide-toolbar,.guide-index,.icon-button,.term-tooltip,.guide-dialog,.site-page-scrollbar { display:none !important; } .guide-shell { padding:0; } .guide-layout { display:block; } .chapter-body { padding-left:0; } .chapter { break-inside:auto; } .chapter > summary { break-after:avoid; } .chapter-body strong { color:inherit; } a { color:#333; } }