@view-transition {
  navigation: auto;
}
:root {
  --bg: #07101d;
  --bg-elev: #0c1727;
  --bg-soft: #101e31;
  --panel: rgba(17,31,50,.78);
  --text: #ecf4ff;
  --muted: #a8b8cc;
  --line: rgba(179,207,236,.17);
  --accent: #5fe1c7;
  --accent-2: #70a7ff;
  --accent-3: #d891ff;
  --warning: #ffcc72;
  --danger: #ff8f9f;
  --good: #75e0a7;
  --shadow: 0 24px 70px rgba(0,0,0,.28);
  --radius: 22px;
  --max: 1180px;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[data-theme="light"] {
  --bg: #f5f8fc;
  --bg-elev: #ffffff;
  --bg-soft: #eaf1f8;
  --panel: rgba(255,255,255,.84);
  --text: #102034;
  --muted: #52657a;
  --line: rgba(26,65,103,.15);
  --accent: #087e72;
  --accent-2: #316fc3;
  --accent-3: #8643a4;
  --warning: #9b5b00;
  --danger: #b32f49;
  --good: #087943;
  --shadow: 0 24px 70px rgba(33,55,78,.13);
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    --bg: #f5f8fc; --bg-elev:#fff; --bg-soft:#eaf1f8; --panel:rgba(255,255,255,.84); --text:#102034; --muted:#52657a; --line:rgba(26,65,103,.15); --accent:#087e72; --accent-2:#316fc3; --accent-3:#8643a4; --warning:#9b5b00; --danger:#b32f49; --good:#087943; --shadow:0 24px 70px rgba(33,55,78,.13);
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.65; text-rendering:optimizeLegibility; }
a { color:inherit; }
img { display:block; max-width:100%; }
button, input { font:inherit; }
code, pre { font-family:var(--mono); }
code { font-size:.92em; color:var(--accent); }
pre { margin:0; overflow:auto; line-height:1.55; }
pre code { color:inherit; font-size:.87rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:999; top:10px; left:10px; transform:translateY(-150%); background:var(--accent); color:#04120f; padding:.7rem 1rem; border-radius:10px; font-weight:800; }
.skip-link:focus { transform:none; }
.site-header { position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(18px); border-bottom:1px solid var(--line); }
.header-inner { max-width:var(--max); margin:auto; padding:.8rem 1.4rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; line-height:1.1; }
.brand strong { display:block; letter-spacing:-.02em; }
.brand small { display:block; color:var(--muted); font-size:.72rem; margin-top:.22rem; }
.brand-mark { width:38px; height:38px; border:1px solid var(--line); border-radius:12px; display:grid; place-items:center; position:relative; background:linear-gradient(145deg, color-mix(in srgb,var(--accent-2) 25%,transparent),color-mix(in srgb,var(--accent) 8%,transparent)); }
.brand-mark span { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 16px color-mix(in srgb,var(--accent) 70%,transparent); }
.brand-mark span:nth-child(1){ transform:translate(-9px,7px); }.brand-mark span:nth-child(2){ transform:translate(8px,7px); }.brand-mark span:nth-child(3){ transform:translate(0,-8px); }
.brand-mark:before,.brand-mark:after { content:""; position:absolute; width:17px; height:1px; background:var(--accent-2); transform-origin:left center; }
.brand-mark:before { transform:translate(-4px,-5px) rotate(42deg); }.brand-mark:after{transform:translate(-5px,7px) rotate(-1deg);}
.header-actions { display:flex; align-items:center; gap:.5rem; }
.icon-button,.menu-button { width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);cursor:pointer;display:grid;place-items:center; }
.icon-button svg { width:19px; fill:currentColor; }
.menu-button { display:none; padding:10px; gap:4px; align-content:center; }
.menu-button span:not(.sr-only) { height:2px; width:20px; background:currentColor; display:block; }
.site-nav { max-width:var(--max); margin:0 auto; padding:0 1.4rem .75rem; display:flex; gap:.3rem; flex-wrap:wrap; }
.site-nav a { text-decoration:none; color:var(--muted); font-size:.82rem; font-weight:700; padding:.45rem .68rem; border-radius:9px; }
.site-nav a:hover,.site-nav a.active { color:var(--text); background:var(--panel); }
main { overflow:hidden; }
.hero,.page-hero,.section,.site-footer { max-width:var(--max); margin:0 auto; padding-left:1.4rem; padding-right:1.4rem; }
.hero { min-height:680px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:4rem; padding-top:5.5rem; padding-bottom:6rem; position:relative; }
.hero:before { content:""; position:absolute; inset:5% -15% auto 30%; height:500px; background:radial-gradient(circle, color-mix(in srgb,var(--accent-2) 18%,transparent),transparent 68%); pointer-events:none; }
.hero-copy,.hero-visual { position:relative; z-index:1; }
.hero-visual { filter:drop-shadow(0 30px 70px rgba(0,0,0,.35)); }
.eyebrow { margin:0 0 .8rem; text-transform:uppercase; letter-spacing:.15em; font-weight:850; font-size:.72rem; color:var(--accent); }
h1,h2,h3 { line-height:1.12; margin-top:0; letter-spacing:-.035em; }
h1 { font-size:clamp(2.7rem,7vw,5.8rem); margin-bottom:1.2rem; max-width:1000px; }
h2 { font-size:clamp(2rem,4vw,3.4rem); margin-bottom:1rem; }
h3 { font-size:1.2rem; margin-bottom:.55rem; }
p { margin-top:0; }
.lede { font-size:clamp(1.08rem,2vw,1.38rem); color:var(--muted); max-width:780px; }
.button-row { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.78rem 1.05rem; border-radius:12px; text-decoration:none; font-weight:800; border:1px solid var(--line); }
.button.primary { background:var(--accent); color:#062019; border-color:transparent; }
html[data-theme="light"] .button.primary { color:white; }
.button.secondary { background:var(--panel); }
.hero-facts { list-style:none; padding:0; margin:3rem 0 0; display:flex; gap:2rem; }
.hero-facts li { display:grid; }
.hero-facts strong { font-size:1.35rem; }
.hero-facts span { color:var(--muted); font-size:.78rem; }
.page-hero { padding-top:5rem; padding-bottom:3.2rem; }
.page-hero.compact h1 { font-size:clamp(2.7rem,6vw,5rem); }
.section { padding-top:5rem; padding-bottom:5rem; }
.section-heading { max-width:760px; margin-bottom:2rem; }
.intro-grid,.prose-grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:5rem; align-items:start; }
.role-stack { display:grid; gap:.8rem; }
.role-card { display:flex; gap:1rem; border:1px solid var(--line); background:var(--panel); padding:1.15rem; border-radius:16px; }
.role-card>span { color:var(--accent); font-family:var(--mono); }
.role-card p { margin:0; color:var(--muted); }
.band { position:relative; }
.band:before { content:""; position:absolute; inset:1rem -100vw; background:var(--bg-soft); z-index:-1; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.card-grid { display:grid; gap:1rem; }.card-grid.three{grid-template-columns:repeat(3,1fr)}.card-grid.two{grid-template-columns:repeat(2,1fr)}
.feature-card { border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding:1.5rem; text-decoration:none; min-height:270px; display:flex; flex-direction:column; transition:.2s ease; }
a.feature-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 40%,var(--line)); box-shadow:var(--shadow); }
.feature-card p { color:var(--muted); }.feature-card .text-link{margin-top:auto;color:var(--accent);font-weight:800}.feature-card.static{min-height:0}
.card-icon { font-size:1.8rem; color:var(--accent); margin-bottom:2rem; }
.split-callout { display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:start; }
.principle-list { display:grid; gap:1.2rem; }.principle-list div{border-left:2px solid var(--accent);padding-left:1rem}.principle-list p{color:var(--muted);margin:.35rem 0 0}
.site-footer { border-top:1px solid var(--line); padding-top:2.5rem; padding-bottom:3rem; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2rem; color:var(--muted); font-size:.84rem; }
.site-footer strong,.footer-brand { color:var(--text); font-weight:800; }.footer-brand{text-decoration:none}.site-footer p{margin:.5rem 0 0}
.toc { max-width:var(--max); margin:0 auto; padding:1rem 1.4rem; display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.toc strong { margin-right:.5rem; }.toc a{text-decoration:none;color:var(--muted);padding:.35rem .6rem;background:var(--panel);border-radius:8px;font-size:.82rem}
.prose { color:var(--muted); font-size:1.02rem; }.prose h2,.prose h3,.prose strong{color:var(--text)}
.note { border-left:2px solid var(--accent-2); padding-left:1rem; color:var(--muted); font-size:.9rem; }.note.wide{max-width:780px;margin:2rem auto 0}
.name-tree { display:flex; align-items:center; justify-content:center; gap:.6rem; padding:2rem; border:1px solid var(--line); background:var(--panel); border-radius:18px; margin:2rem 0; flex-wrap:wrap; }
.name-tree span:not(.connector){padding:.45rem .7rem;border-radius:9px;background:var(--bg-soft);color:var(--text);font-family:var(--mono);font-weight:800}.name-tree .root-node{color:var(--accent)!important}.connector{width:35px;height:1px;background:var(--line)}
.alternating { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.visual-panel { padding:2rem; border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); }
.callout { border:1px solid var(--line); border-left-width:4px; padding:1rem 1.1rem; border-radius:12px; margin:1.5rem 0; background:var(--panel); color:var(--muted); }.callout p{margin:.35rem 0 0}.callout.warning{border-left-color:var(--warning)}.callout.info{border-left-color:var(--accent-2)}.callout.large{padding:1.5rem}
.comparison-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.comparison-grid article,.mini-card{border:1px solid var(--line);background:var(--panel);padding:1.4rem;border-radius:16px}.comparison-grid p,.mini-card p{color:var(--muted);margin:0}
.dark-section { max-width:none; background:#050b13; color:#ecf4ff; border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding-left:max(1.4rem,calc((100vw - var(--max))/2 + 1.4rem));padding-right:max(1.4rem,calc((100vw - var(--max))/2 + 1.4rem)); }
.dark-section .prose,.dark-section p{color:#a8b8cc}.dark-section h2,.dark-section h3,.dark-section strong{color:#ecf4ff}.dark-section code{color:#5fe1c7}
.flag-list,.state-list { display:grid;gap:.7rem }.flag-list div,.state-list div{display:grid;grid-template-columns:90px 1fr;gap:1rem;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:.7rem}.flag-list dt,.state-list dt{font-family:var(--mono);color:var(--accent);font-weight:800}.flag-list dd,.state-list dd{margin:0}
.status-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.status-grid>div{padding:1.2rem;border:1px solid var(--line);border-radius:14px;background:var(--panel)}.status-grid p{color:var(--muted);margin:.6rem 0 0;font-size:.9rem}
.diagram-section { padding-top:2rem; }.diagram-section img{width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}.diagram-legend{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;color:var(--muted);font-size:.82rem;margin-top:1rem}.diagram-legend b{color:var(--accent)}
.steps { list-style:none;padding:0;margin:0;counter-reset:step;display:grid;gap:1rem}.steps li{counter-increment:step;display:grid;grid-template-columns:55px 1fr;gap:1rem;align-items:start}.steps li:before{content:counter(step);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);color:var(--accent);font-family:var(--mono);font-weight:900}.steps p{margin:.25rem 0 0;color:var(--muted)}
.formula { margin-top:2rem;padding:1.2rem;border-radius:14px;border:1px solid var(--line);background:var(--panel);display:grid}.formula span{font-size:.78rem;color:var(--muted)}.formula strong{font-family:var(--mono);color:var(--accent);font-size:1.1rem;margin-top:.2rem}
.panel-list { display:grid;gap:1rem}.panel-list>div{padding:1.2rem;border-left:3px solid var(--accent-2);background:var(--panel);border-radius:0 14px 14px 0}.panel-list p{color:var(--muted);margin:0}
.code-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.code-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#08111d;color:#dbeaff}.code-title{padding:.7rem 1rem;border-bottom:1px solid rgba(255,255,255,.1);color:#9fb5cc;font-size:.78rem;font-weight:800}.code-card pre{padding:1rem}.code-card.large pre{padding:1.25rem}.code-stack{display:grid;gap:1rem}
.record-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem}.record-tabs button{border:1px solid var(--line);background:var(--panel);color:var(--muted);padding:.55rem .8rem;border-radius:10px;cursor:pointer;font-weight:750}.record-tabs button.active{background:var(--accent);color:#062019;border-color:transparent}.record-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.record-grid article{border:1px solid var(--line);background:var(--panel);border-radius:18px;padding:1.2rem;min-height:280px}.record-grid article[hidden]{display:none}.record-grid header{display:flex;justify-content:space-between;align-items:center}.record-grid header code{font-size:1.05rem;font-weight:900}.record-grid header span{font-size:.69rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.record-grid h2{font-size:1.22rem;margin:1rem 0}.record-grid pre{background:#07101a;color:#e6f2ff;padding:.8rem;border-radius:10px;margin-bottom:1rem;font-size:.75rem}.record-grid p{color:var(--muted);font-size:.9rem}
.mistake-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.mistake-list>div{border:1px solid var(--line);border-radius:15px;padding:1.2rem;background:var(--panel)}.mistake-list p{color:var(--muted);margin:.35rem 0 0}
.chain-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.chain-steps article{position:relative;border:1px solid var(--line);background:var(--panel);padding:1.3rem;border-radius:16px}.chain-steps span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#062019;font-weight:900;margin-bottom:1rem}.chain-steps p{color:var(--muted);margin:0}.chain-steps article:not(:last-child):after{content:"→";position:absolute;right:-.8rem;top:1.4rem;color:var(--accent);z-index:2}
.key-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.key-cards article{border:1px solid var(--line);background:var(--panel);padding:1.2rem;border-radius:14px}.key-cards p{color:var(--muted);margin:.4rem 0 0}
.muted{color:var(--muted)!important}.checklist{border:1px solid var(--line);background:var(--panel);padding:1.5rem;border-radius:18px}.checklist li{margin:.6rem 0;color:var(--muted)}.checklist.plain{margin:0;list-style:"✓  ";}.checklist.plain li::marker{color:var(--accent)}
.comparison-table-wrap,.diagnostic-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:18px}.comparison-table,.diagnostic-table{width:100%;border-collapse:collapse;min-width:760px;background:var(--panel)}th,td{text-align:left;padding:1rem;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}td{color:var(--muted)}td strong{color:var(--text)}
.threat-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.threat-cards article{border:1px solid var(--line);background:var(--panel);padding:1.2rem;border-radius:15px}.threat-cards p{color:var(--muted);margin:.5rem 0 0}.good,.neutral,.partial{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;font-weight:900}.good{color:var(--good)}.neutral{color:var(--accent-2)}.partial{color:var(--warning)}
.qname-flow{display:grid;gap:.65rem;margin:1.5rem 0}.qname-flow div{display:flex;justify-content:space-between;gap:1rem;padding:.8rem;border:1px solid rgba(255,255,255,.1);border-radius:10px}.qname-flow span{color:#a8b8cc}
.venn{min-height:380px;position:relative;display:flex;justify-content:center;align-items:center}.venn-card{width:410px;height:300px;border-radius:50%;padding:4.6rem 4rem;position:absolute;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 90%,transparent)}.venn-card.authenticity{left:calc(50% - 355px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}.venn-card.transport{right:calc(50% - 355px);text-align:right;border-color:color-mix(in srgb,var(--accent-2) 50%,var(--line))}.venn-card p{color:var(--muted)}.venn-center{z-index:2;text-align:center;display:grid;width:140px}.venn-center strong{color:var(--accent)}.venn-center span{font-size:.75rem;color:var(--muted)}
.decision-list{display:grid;gap:.8rem}.decision-list>div{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:1rem}.decision-list p{color:var(--muted);margin:0}
.architecture-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.architecture-grid article{border:1px solid var(--line);background:var(--panel);padding:1.35rem;border-radius:18px}.architecture-grid p,.architecture-grid li{color:var(--muted)}.architecture-grid ul{padding-left:1.1rem}.layer{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:900}
.principle-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.principle-tiles div{padding:1.2rem;border-top:2px solid var(--accent);background:var(--panel);border-radius:0 0 14px 14px}.principle-tiles p{color:var(--muted);margin:.35rem 0 0}
.transfer-flow{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}.transfer-flow div{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:1rem}.transfer-flow span{font-size:.72rem;color:var(--accent);font-weight:900;text-transform:uppercase}
.monitor-grid,.symptom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.monitor-grid article,.symptom-grid article{border:1px solid rgba(255,255,255,.1);padding:1.2rem;border-radius:15px;background:rgba(255,255,255,.035)}.monitor-grid p,.symptom-grid p{margin:0;color:#a8b8cc}
.command-list{display:grid;gap:.7rem}.command-list>div{display:grid;grid-template-columns:minmax(300px,.8fr) 1.2fr;gap:1rem;padding:1rem;border-bottom:1px solid var(--line)}.command-list p{color:var(--muted);margin:0}.command-list code{overflow-wrap:anywhere}
.check-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.troubleshoot-flow{max-width:850px;margin:auto;display:grid;justify-items:center;gap:.7rem}.flow-node{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:1rem 1.4rem;text-align:center;max-width:520px;width:100%}.flow-node.start{background:var(--accent);color:#062019;font-weight:900}.flow-node.small{font-size:.85rem;height:100%;display:grid;place-items:center}.flow-arrow{color:var(--accent);font-size:1.5rem}.flow-branches{display:grid;grid-template-columns:1fr 1fr;gap:2rem;width:100%}.flow-branches>div{display:grid;gap:.5rem;justify-items:center}.flow-branches>div>span{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:900}
.references{display:grid;gap:.7rem}.reference-notice{padding:1.3rem;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:14px;background:var(--panel);margin-bottom:1rem}.reference-notice p{color:var(--muted);margin:.35rem 0 0}.reference-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-bottom:1px solid var(--line);padding:1rem 0}.reference-item span{font-family:var(--mono);font-size:.78rem;color:var(--accent)}.reference-item h2{font-size:1rem;margin:.2rem 0 0;letter-spacing:0}.reference-item a{color:var(--muted);text-decoration:none;font-size:.82rem;white-space:nowrap}.reference-item a:hover{color:var(--accent)}
.error-page{min-height:650px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
@media (max-width: 980px){.hero{grid-template-columns:1fr;min-height:auto;gap:2rem}.hero-visual{max-width:700px}.card-grid.three,.record-grid,.architecture-grid,.principle-tiles,.monitor-grid,.symptom-grid{grid-template-columns:repeat(2,1fr)}.intro-grid,.prose-grid,.split-callout{gap:2.5rem}.chain-steps{grid-template-columns:repeat(2,1fr)}.chain-steps article:after{display:none}.venn-card{width:350px}.venn-card.authenticity{left:calc(50% - 300px)}.venn-card.transport{right:calc(50% - 300px)}}
@media (max-width: 760px){.menu-button{display:grid}.site-nav{display:none;padding-bottom:1rem}.site-nav.open{display:grid;grid-template-columns:repeat(2,1fr)}.site-nav a{padding:.7rem}.brand small{display:none}.hero,.page-hero,.section{padding-left:1rem;padding-right:1rem}.hero{padding-top:4rem;padding-bottom:4rem}.section{padding-top:3.5rem;padding-bottom:3.5rem}.intro-grid,.prose-grid,.alternating,.split-callout,.site-footer{grid-template-columns:1fr}.alternating{gap:2rem}.card-grid.three,.card-grid.two,.record-grid,.comparison-grid,.status-grid,.architecture-grid,.principle-tiles,.monitor-grid,.symptom-grid,.mistake-list,.code-grid,.threat-cards,.check-columns{grid-template-columns:1fr}.hero-facts{gap:1rem;flex-wrap:wrap}.chain-steps{grid-template-columns:1fr}.command-list>div{grid-template-columns:1fr}.venn{display:grid;gap:1rem;min-height:0}.venn-card{position:static;width:auto;height:auto;border-radius:18px;padding:1.3rem;text-align:left!important}.venn-center{width:auto}.flow-branches{grid-template-columns:1fr;gap:1rem}.reference-item{align-items:flex-start;flex-direction:column}.site-footer{padding-left:1rem;padding-right:1rem}.visual-panel{padding:1rem}}
@media (max-width: 480px){h1{font-size:2.55rem}.site-nav.open{grid-template-columns:1fr}.button-row{display:grid}.button{width:100%}.hero-facts{display:grid;grid-template-columns:repeat(3,1fr)}.hero-facts li{text-align:center}.name-tree .connector{width:15px}}
@media print{.site-header,.site-footer,.toc,.button-row,.theme-toggle{display:none!important}body{background:white;color:black}.section,.page-hero{padding:1.5rem 0;max-width:none}.dark-section{background:white;color:black;border:1px solid #ccc}.feature-card,.code-card,.callout,.visual-panel{break-inside:avoid;box-shadow:none}.dark-section p,.dark-section .prose{color:#333}}

.directive-grid,.hardening-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1.25rem}.directive-grid article,.hardening-grid article{border:1px solid var(--line);background:var(--panel);padding:1.25rem;border-radius:16px}.directive-grid p,.hardening-grid p{color:var(--muted);margin:.45rem 0 0}.path-list{display:grid;gap:.65rem;margin-top:1.5rem}.path-list>div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding:.8rem 0}.path-list span{color:var(--muted);text-align:right}.inline-code{margin-top:.8rem}.inline-code pre{padding:.85rem}.standards a{overflow-wrap:anywhere}
@media (max-width:760px){.directive-grid,.hardening-grid{grid-template-columns:1fr}.path-list>div{display:grid}.path-list span{text-align:left}}

:root {
  --bg: #040302;
  --bg-elev: #0b0804;
  --bg-soft: #120c05;
  --panel: rgba(20, 13, 5, .82);
  --text: #f6eccf;
  --muted: #b9ab8a;
  --line: rgba(226, 171, 52, .25);
  --accent: #ffd875;
  --accent-2: #d99b28;
  --accent-3: #8f4d0d;
  --warning: #f3b847;
  --danger: #ef8f73;
  --good: #d8c86d;
  --shadow: 0 24px 70px rgba(0, 0, 0, .52),
            0 0 34px rgba(222, 151, 24, .07);
  --radius: 18px;
  --heading: Georgia, Cambria, "Times New Roman", Times, serif;
}

html[data-theme="light"] {
  --bg: #eee2c7;
  --bg-elev: #f9f0dd;
  --bg-soft: #e3d1ac;
  --panel: rgba(255, 249, 232, .86);
  --text: #2c1c0d;
  --muted: #6e583b;
  --line: rgba(117, 70, 13, .28);
  --accent: #8e5408;
  --accent-2: #b77813;
  --accent-3: #5f3306;
  --warning: #9b5d08;
  --danger: #9d3f2d;
  --good: #617126;
  --shadow: 0 22px 60px rgba(70, 42, 10, .18),
            0 0 28px rgba(153, 92, 13, .08);
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    --bg: #eee2c7;
    --bg-elev: #f9f0dd;
    --bg-soft: #e3d1ac;
    --panel: rgba(255, 249, 232, .86);
    --text: #2c1c0d;
    --muted: #6e583b;
    --line: rgba(117, 70, 13, .28);
    --accent: #8e5408;
    --accent-2: #b77813;
    --accent-3: #5f3306;
    --warning: #9b5d08;
    --danger: #9d3f2d;
    --good: #617126;
    --shadow: 0 22px 60px rgba(70, 42, 10, .18),
              0 0 28px rgba(153, 92, 13, .08);
  }
}

:root {
  --page-glow: rgba(255, 211, 112, .16);
  --page-glow-soft: rgba(217, 155, 40, .065);
  --page-glow-deep: rgba(143, 77, 13, .10);
  --page-ring: rgba(217, 155, 40, .075);
  --page-ray: rgba(255, 216, 117, .045);
  --page-node: rgba(255, 226, 145, .12);
  --page-mesh: rgba(217, 155, 40, .018);
  --page-end: #030201;
}

html[data-theme="light"] {
  --page-glow: rgba(183, 120, 19, .18);
  --page-glow-soft: rgba(142, 84, 8, .075);
  --page-glow-deep: rgba(95, 51, 6, .075);
  --page-ring: rgba(117, 70, 13, .075);
  --page-ray: rgba(142, 84, 8, .035);
  --page-node: rgba(95, 51, 6, .12);
  --page-mesh: rgba(117, 70, 13, .022);
  --page-end: #e5d1a9;
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    --page-glow: rgba(183, 120, 19, .18);
    --page-glow-soft: rgba(142, 84, 8, .075);
    --page-glow-deep: rgba(95, 51, 6, .075);
    --page-ring: rgba(117, 70, 13, .075);
    --page-ray: rgba(142, 84, 8, .035);
    --page-node: rgba(95, 51, 6, .12);
    --page-mesh: rgba(117, 70, 13, .022);
    --page-end: #e5d1a9;
  }
}

body {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    radial-gradient(
      ellipse 82% 42rem at 50% -12rem,
      var(--page-glow) 0,
      var(--page-glow-soft) 34%,
      transparent 72%
    ),
    radial-gradient(circle at 7% 30%, var(--page-glow-deep), transparent 24rem),
    radial-gradient(circle at 93% 78%, var(--page-glow-soft), transparent 29rem),
    linear-gradient(180deg, transparent 0 34rem, var(--page-end) 100%);
}

body::before {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 4rem,
      color-mix(in srgb, var(--accent) 70%, transparent) 0 1px,
      transparent 2px
    ),
    repeating-radial-gradient(
      circle at 50% 4rem,
      transparent 0 92px,
      var(--page-ring) 93px 94px,
      transparent 95px 148px
    ),
    repeating-conic-gradient(
      from -7deg at 50% 4rem,
      var(--page-ray) 0 .42deg,
      transparent .42deg 18deg
    );
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 15rem,
    rgba(0, 0, 0, .64) 32rem,
    transparent 58rem
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 15rem,
    rgba(0, 0, 0, .64) 32rem,
    transparent 58rem
  );
  opacity: .9;
}

body::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--page-node) 0 1px, transparent 1.6px),
    linear-gradient(
      30deg,
      transparent 49.65%,
      var(--page-mesh) 49.8% 50.2%,
      transparent 50.35%
    ),
    linear-gradient(
      150deg,
      transparent 49.65%,
      var(--page-mesh) 49.8% 50.2%,
      transparent 50.35%
    );
  background-size: 96px 96px;
  background-position: 0 0, 0 0, 48px 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .28),
    #000 24rem,
    #000 82%,
    rgba(0, 0, 0, .42)
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .28),
    #000 24rem,
    #000 82%,
    rgba(0, 0, 0, .42)
  );
  opacity: .58;
}

html[data-theme="light"] body::before,
html[data-theme="light"] body::after {
  opacity: .46;
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] body::before,
  html[data-theme="system"] body::after {
    opacity: .46;
  }
}

@media (max-width: 760px) {
  body::before {
    background-position: center top;
    opacity: .62;
  }

  body::after {
    background-size: 112px 112px;
    opacity: .42;
  }
}

::selection {
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  color: var(--text);
}

h1,
h2,
h3,
.brand strong,
.footer-brand {
  font-family: var(--heading);
  font-weight: 700;
}

h1,
h2,
h3 {
  letter-spacing: -.025em;
}

h1 {
  color: #ffe8a1;
  background: linear-gradient(180deg, #fff5cc 6%, #ffd66f 48%, #c98518 82%, #7d4007 115%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 28px rgba(242, 170, 35, .13);
}

html[data-theme="light"] h1 {
  background: linear-gradient(180deg, #5f3306, #9b5b0a 66%, #5b2d04);
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: none;
}

h2 {
  color: color-mix(in srgb, var(--text) 94%, var(--accent));
}

h3 {
  color: var(--text);
}

p,
li,
dd,
td {
  text-wrap: pretty;
}

code {
  color: color-mix(in srgb, var(--accent) 86%, white);
}

.site-header {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 95%, transparent), color-mix(in srgb, var(--bg-elev) 90%, transparent));
  border-bottom-color: color-mix(in srgb, var(--accent-2) 36%, transparent);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}

.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2), var(--accent), var(--accent-2), transparent);
  opacity: .46;
  pointer-events: none;
}

.brand {
  color: var(--text);
}

.brand strong {
  color: color-mix(in srgb, var(--text) 80%, var(--accent));
  letter-spacing: .01em;
  text-transform: uppercase;
  font-size: .98rem;
}

.brand small {
  color: var(--muted);
  letter-spacing: .055em;
}

.brand-mark {
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle, #ffe79a 0 5%, #d18a19 6% 10%, transparent 11%),
    repeating-conic-gradient(from 22.5deg, rgba(255, 214, 105, .7) 0 1.5deg, transparent 1.5deg 45deg),
    radial-gradient(circle, transparent 42%, rgba(221, 147, 24, .52) 43% 45%, transparent 46% 59%, rgba(221, 147, 24, .35) 60% 62%, transparent 63%),
    #0a0703;
  box-shadow:
    inset 0 0 14px rgba(255, 184, 42, .18),
    0 0 18px rgba(225, 150, 24, .16);
}

.brand-mark span {
  width: 5px;
  height: 5px;
  background: #ffe49a;
  box-shadow: 0 0 10px rgba(255, 198, 74, .95);
}

.brand-mark::before,
.brand-mark::after {
  background: linear-gradient(90deg, #8c4d0c, #ffe07d, #8c4d0c);
  box-shadow: 0 0 7px rgba(244, 179, 54, .3);
}

.icon-button,
.menu-button {
  border-color: color-mix(in srgb, var(--accent-2) 32%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, var(--accent-3)), var(--panel));
  box-shadow: inset 0 1px rgba(255, 231, 171, .05);
}

.icon-button:hover,
.menu-button:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
}

.site-nav a {
  border: 1px solid transparent;
  border-radius: 4px;
  letter-spacing: .025em;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent-2) 28%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 95%, var(--accent-3)), var(--panel));
  box-shadow: inset 0 -1px color-mix(in srgb, var(--accent) 30%, transparent);
}

.hero {
  isolation: isolate;
}

.hero::before {
  inset: 2rem -8rem auto 12%;
  height: 610px;
  background:
    radial-gradient(circle at 70% 38%, rgba(255, 196, 66, .2), transparent 8rem),
    repeating-radial-gradient(circle at 70% 38%, transparent 0 74px, rgba(221, 145, 19, .10) 75px 76px, transparent 77px 116px),
    repeating-conic-gradient(from 0deg at 70% 38%, rgba(236, 166, 39, .09) 0 .65deg, transparent .65deg 15deg);
  -webkit-mask-image: radial-gradient(circle at 70% 38%, #000 0 9rem, rgba(0,0,0,.75) 16rem, transparent 26rem);
  mask-image: radial-gradient(circle at 70% 38%, #000 0 9rem, rgba(0,0,0,.75) 16rem, transparent 26rem);
  opacity: .75;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: min(46vw, 590px);
  aspect-ratio: 1;
  right: -2rem;
  top: 4.5rem;
  border-radius: 50%;
  border: 1px solid rgba(220, 144, 20, .18);
  box-shadow:
    0 0 0 16px rgba(220, 144, 20, .025),
    0 0 0 17px rgba(220, 144, 20, .10),
    inset 0 0 70px rgba(231, 160, 34, .04);
  pointer-events: none;
}

.hero-copy,
.hero-visual {
  z-index: 1;
}

.hero-visual {
  border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
  border-radius: 30px 10px 30px 10px;
  padding: .42rem;
  background: linear-gradient(145deg, rgba(240, 181, 64, .11), rgba(11, 7, 3, .82) 24%, rgba(5, 3, 2, .92));
  box-shadow:
    0 34px 80px rgba(0, 0, 0, .5),
    0 0 42px rgba(223, 146, 19, .08),
    inset 0 0 0 1px rgba(255, 224, 153, .035);
  filter: none;
}

.hero-visual img,
.diagram-section img {
  filter:
    grayscale(1)
    sepia(1)
    saturate(4.7)
    hue-rotate(351deg)
    brightness(.91)
    contrast(1.08)
    drop-shadow(0 0 20px rgba(240, 171, 38, .12));
}

.eyebrow,
.layer,
.transfer-flow span,
.flow-branches > div > span {
  color: var(--accent);
  text-shadow: 0 0 12px rgba(235, 161, 31, .15);
}

.eyebrow::before {
  content: "◆";
  margin-right: .7em;
  font-size: .72em;
  color: var(--accent-2);
}

.lede {
  color: color-mix(in srgb, var(--muted) 90%, var(--text));
}

.button {
  border-radius: 4px;
  letter-spacing: .015em;
  box-shadow: inset 0 1px rgba(255, 240, 196, .08);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button.primary {
  color: #261301;
  background:
    linear-gradient(180deg, #ffe8a1 0%, #eab648 45%, #bd7310 100%);
  border-color: #f6d477;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .48),
    inset 0 -1px rgba(80, 38, 2, .4),
    0 9px 24px rgba(202, 121, 10, .16);
}

html[data-theme="light"] .button.primary {
  color: #241303;
}

.button.secondary {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 90%, var(--accent-3)), var(--panel));
  border-color: color-mix(in srgb, var(--accent-2) 36%, transparent);
}

.button.secondary:hover {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 9px 24px rgba(147, 83, 6, .13);
}

.hero-facts {
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--accent-2) 23%, transparent);
}

.hero-facts strong {
  color: var(--accent);
  font-family: var(--heading);
}

.band::before {
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--bg-soft) 92%, var(--accent-3)) 12%, color-mix(in srgb, var(--bg-soft) 94%, var(--accent-3)) 88%, transparent),
    repeating-linear-gradient(135deg, rgba(255, 216, 117, .012) 0 1px, transparent 1px 7px);
  border-color: color-mix(in srgb, var(--accent-2) 22%, transparent);
}

.role-card,
.feature-card,
.code-card,
.callout,
.visual-panel,
.comparison-grid article,
.status-grid > div,
.record-grid article,
.mistake-list > div,
.chain-steps article,
.key-cards article,
.checklist,
.threat-cards article,
.decision-list > div,
.architecture-grid article,
.principle-tiles div,
.monitor-grid article,
.symptom-grid article,
.flow-node,
.reference-notice,
.directive-grid article,
.hardening-grid article {
  border-color: color-mix(in srgb, var(--accent-2) 24%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--panel) 94%, var(--accent-3)), var(--panel) 38%, color-mix(in srgb, var(--panel) 97%, black));
  box-shadow:
    inset 0 1px rgba(255, 226, 158, .035),
    0 12px 34px rgba(0, 0, 0, .12);
}

.role-card,
.feature-card,
.code-card,
.callout,
.visual-panel,
.record-grid article,
.architecture-grid article,
.directive-grid article,
.hardening-grid article {
  position: relative;
  overflow: hidden;
}

.role-card::before,
.feature-card::before,
.code-card::before,
.callout::before,
.visual-panel::before,
.record-grid article::before,
.architecture-grid article::before,
.directive-grid article::before,
.hardening-grid article::before {
  content: "";
  position: absolute;
  inset: 0 20% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .38;
  pointer-events: none;
}

a.feature-card:hover {
  border-color: color-mix(in srgb, var(--accent) 62%, transparent);
  box-shadow:
    0 22px 55px rgba(0, 0, 0, .34),
    0 0 30px rgba(218, 139, 16, .09),
    inset 0 1px rgba(255, 230, 167, .06);
}

.card-icon {
  color: var(--accent);
  font-family: var(--heading);
  text-shadow: 0 0 18px rgba(244, 177, 45, .26);
}

.feature-card .text-link,
.reference-item span,
.reference-item a:hover,
.role-card > span {
  color: var(--accent);
}

.principle-list div {
  border-left-color: var(--accent-2);
}

.principle-tiles div {
  border-top-color: var(--accent-2);
  border-radius: 0 0 10px 10px;
}

.toc {
  border-color: color-mix(in srgb, var(--accent-2) 22%, transparent);
  background: color-mix(in srgb, var(--bg-elev) 76%, transparent);
}

.toc a,
.record-tabs button {
  border: 1px solid color-mix(in srgb, var(--accent-2) 24%, transparent);
  background: color-mix(in srgb, var(--panel) 94%, var(--accent-3));
}

.toc a:hover,
.record-tabs button:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
}

.record-tabs button.active {
  color: #261301;
  background: linear-gradient(
    180deg,
    #ffe8a1 0%,
    #eab648 45%,
    #bd7310 100%
  );
  border-color: #f6d477;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.46),
    inset 0 -1px rgba(80, 38, 2, 0.38),
    0 0 18px rgba(217, 155, 40, 0.12);
}

.name-tree span:not(.connector),
.formula,
.qname-flow div,
.transfer-flow div {
  border: 1px solid color-mix(in srgb, var(--accent-2) 24%, transparent);
  background: color-mix(in srgb, var(--bg-soft) 93%, var(--accent-3));
}

.name-tree .root-node,
.chain-steps span,
.flow-node.start {
  color: #261301;
  background: linear-gradient(180deg, #ffe79b, #d79725 72%, #a65d08);
  box-shadow: inset 0 1px rgba(255, 255, 255, .42), 0 0 18px rgba(225, 150, 25, .16);
}

.connector,
.flow-arrow,
.chain-steps article:not(:last-child)::after {
  color: var(--accent-2);
}

pre,
.record-grid pre,
.inline-code pre {
  color: #f2dfb0;
  background:
    linear-gradient(180deg, rgba(17, 10, 4, .98), rgba(7, 5, 2, .98));
  border: 1px solid rgba(211, 139, 22, .22);
  box-shadow: inset 0 0 24px rgba(0, 0, 0, .28);
}

.code-title {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent-2) 24%, transparent);
}

.callout.info {
  border-left-color: var(--accent-2);
}

.callout.warning {
  border-left-color: var(--warning);
}

.comparison-table-wrap,
.diagnostic-table-wrap {
  border-color: color-mix(in srgb, var(--accent-2) 25%, transparent);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .10);
}

.comparison-table,
.diagnostic-table {
  background: color-mix(in srgb, var(--panel) 96%, var(--accent-3));
}

th,
td {
  border-bottom-color: color-mix(in srgb, var(--accent-2) 18%, transparent);
}

th {
  color: color-mix(in srgb, var(--accent) 78%, var(--muted));
}

.dark-section {
  position: relative;
  background:
    radial-gradient(circle at 50% 0, rgba(230, 156, 30, .11), transparent 30rem),
    linear-gradient(180deg, #0b0703, #050302);
  border-color: color-mix(in srgb, var(--accent-2) 27%, transparent);
}

.dark-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background:
    repeating-radial-gradient(circle at 50% 0, transparent 0 82px, rgba(220, 144, 21, .10) 83px 84px, transparent 85px 124px);
  -webkit-mask-image: linear-gradient(#000, transparent 70%);
  mask-image: linear-gradient(#000, transparent 70%);
}

.dark-section > * {
  position: relative;
}

.qname-flow div,
.monitor-grid article,
.symptom-grid article {
  border-color: color-mix(in srgb, var(--accent-2) 22%, transparent);
}

.qname-flow span,
.monitor-grid p,
.symptom-grid p {
  color: var(--muted);
}

.venn-card {
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  box-shadow: inset 0 0 45px rgba(198, 119, 10, .045);
}

.venn-card.authenticity {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
}

.venn-card.transport {
  border-color: color-mix(in srgb, var(--accent-2) 56%, var(--line));
}

.site-footer {
  position: relative;
  border-top-color: color-mix(in srgb, var(--accent-2) 28%, transparent);
  background: linear-gradient(180deg, transparent, rgba(83, 42, 3, .055));
}

.site-footer::before {
  content: "◆";
  position: absolute;
  top: -.72rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--accent-2);
  background: var(--bg);
  padding: 0 .85rem;
  font-size: .78rem;
}

.footer-brand {
  color: color-mix(in srgb, var(--text) 82%, var(--accent));
  text-transform: uppercase;
  letter-spacing: .04em;
}

.skip-link {
  color: #261301;
  background: linear-gradient(180deg, #ffe9a6, #d79623);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .hero::after {
    width: min(76vw, 590px);
    right: -5rem;
    top: 24rem;
  }
}

@media (max-width: 760px) {
  body::before {
    background-position: center top;
  }

  .hero::before {
    inset: 18rem -12rem auto -8rem;
    opacity: .48;
  }

  .hero::after {
    width: 85vw;
    right: -25vw;
    top: 25rem;
    opacity: .55;
  }

  .hero-visual {
    border-radius: 20px 7px 20px 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  body::before,
  body::after,
  .site-header::after,
  .hero::before,
  .hero::after,
  .dark-section::before,
  .site-footer::before {
    display: none !important;
  }

  h1 {
    color: black;
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
  }
}

html[data-theme="light"] {
  --page-glow: rgba(151, 88, 8, .24);
  --page-glow-soft: rgba(142, 84, 8, .13);
  --page-glow-deep: rgba(95, 51, 6, .12);

  --page-ring: rgba(105, 61, 9, .16);
  --page-ray: rgba(117, 70, 13, .085);

  --page-node: rgba(95, 51, 6, .22);
  --page-mesh: rgba(105, 61, 9, .065);

  --page-end: #dfc99e;
}

html[data-theme="light"] body::before {
  opacity: .82;
}

html[data-theme="light"] body::after {
  opacity: .72;
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    --page-glow: rgba(151, 88, 8, .24);
    --page-glow-soft: rgba(142, 84, 8, .13);
    --page-glow-deep: rgba(95, 51, 6, .12);

    --page-ring: rgba(105, 61, 9, .16);
    --page-ray: rgba(117, 70, 13, .085);

    --page-node: rgba(95, 51, 6, .22);
    --page-mesh: rgba(105, 61, 9, .065);

    --page-end: #dfc99e;
  }

  html[data-theme="system"] body::before {
    opacity: .82;
  }

  html[data-theme="system"] body::after {
    opacity: .72;
  }
}