:root { color-scheme: light; --paper:#f3f0e7; --surface:#fffdf8; --ink:#17231f; --muted:#65706b; --line:#c9cec7; --line-strong:#96a29b; --green:#176d59; --green-soft:#dcece5; --orange:#bd4c2f; --orange-soft:#f7ddd3; --blue:#315f72; --blue-soft:#dce9ee; --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace; --sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:15px; }
button { font:inherit; }
a { color:inherit; }
code { font-family:var(--mono); }
.skip-link { position:fixed; z-index:100; top:-5rem; left:1rem; padding:.7rem 1rem; background:var(--ink); color:white; }
.skip-link:focus { top:1rem; }
.overline { margin:0 0:.75rem; color:var(--green); font-family:var(--mono); font-size:12px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
main { overflow:hidden; }
.hero { min-height:550px; padding:7rem max(5vw,calc((100vw - 1500px)/2)); display:grid; grid-template-columns:minmax(0,1.35fr) minmax(340px,.65fr); align-items:end; gap:8vw; border-bottom:1px solid var(--line-strong); background:radial-gradient(circle at 77% 30%,rgb(23 109 89 / 14%),transparent 25%),linear-gradient(112deg,#fffdf8,var(--paper) 70%); }
.hero h1 { margin:0; max-width:950px; font-size:clamp(4.5rem,8.4vw,9rem); line-height:.82; letter-spacing:-.075em; }
.hero h1 em { color:var(--green); font-style:normal; }
.hero-deck { max-width:760px; margin:2.4rem 0 0; color:#52605a; font-size:clamp(1rem,1.35vw,1.3rem); line-height:1.65; }
.hero-proof { min-width:0; padding:1.5rem; border:1px solid var(--line-strong); background:var(--surface); box-shadow:10px 10px 0 var(--green-soft); display:grid; gap:.7rem; }
.hero-proof span { margin-bottom:.4rem; color:var(--muted); font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.hero-proof code { min-width:0; overflow:hidden; font-size:clamp(12px,1vw,15px); text-overflow:ellipsis; white-space:nowrap; }
.hero-proof code:first-of-type { color:var(--green); }
.artifact-strip { display:grid; grid-template-columns:1.5fr repeat(3,.7fr) 1fr; border-bottom:1px solid var(--line-strong); background:var(--ink); color:white; }
.artifact-strip div { min-width:0; padding:1.3rem 2rem; border-right:1px solid #45524d; display:grid; gap:.4rem; }
.artifact-strip div:last-child { border-right:0; }
.artifact-strip span { color:#aab5af; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.artifact-strip strong { min-width:0; overflow:hidden; font-family:var(--mono); font-size:12px; font-weight:550; text-overflow:ellipsis; white-space:nowrap; }
.takeaway { max-width:1260px; margin:0 auto; padding:7rem 4vw; text-align:center; }
.takeaway h2 { max-width:1100px; margin:0 auto; font-size:clamp(2rem,4vw,4rem); line-height:1.1; letter-spacing:-.045em; }
.takeaway>p:last-child { max-width:780px; margin:2rem auto 0; color:var(--muted); font-size:1.05rem; line-height:1.8; }
.explorer { border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); background:var(--surface); }
.explorer-heading { padding:4rem 3.2vw 2.5rem; border-bottom:1px solid var(--line); display:flex; align-items:end; justify-content:space-between; gap:3rem; }
.explorer-heading h2 { margin:0; font-size:clamp(2rem,3.5vw,3.7rem); letter-spacing:-.05em; }
.explorer-heading>p { max-width:480px; margin:0; color:var(--muted); line-height:1.7; }
.explorer-grid { display:grid; grid-template-columns:230px minmax(620px,1fr) 290px; min-height:1000px; }
.comparison-controls,.layer-inspector { min-width:0; background:#f6f3eb; }
.comparison-controls { padding:1.5rem 1.1rem; border-right:1px solid var(--line); }
.comparison-controls h3,.load-grid h3 { margin:0; font-size:14px; }
.comparison-controls>p { margin:.55rem 0 1.2rem; color:var(--muted); font-size:12px; line-height:1.5; }
.control-list { display:grid; gap:.5rem; }
.control-button { width:100%; min-width:0; padding:.85rem .75rem; border:1px solid transparent; background:transparent; color:var(--ink); display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.5rem; text-align:left; cursor:pointer; }
.control-button strong { font-size:12px; line-height:1.4; }
.control-number { color:var(--line-strong); font-family:var(--mono); font-size:12px; }
.control-button:hover { border-color:var(--line); background:white; }
.control-button[data-active="true"] { border-color:var(--green); background:var(--green-soft); }
.control-button[data-active="true"] .control-number { color:var(--green); }
.control-note { margin-top:1.5rem; padding:1rem; border-left:3px solid var(--orange); background:var(--orange-soft); display:grid; gap:.4rem; }
.control-note strong { font-size:12px; }
.control-note span { color:var(--muted); font-size:12px; line-height:1.5; }
.evidence-stage { min-width:0; padding:1.6rem; }
.convergence { padding:1.3rem; border:1px solid var(--line-strong); background:#faf8f2; }
.convergence>header,.identity-section>header { display:flex; align-items:start; justify-content:space-between; gap:2rem; }
.convergence h3,.identity-section h3,.hidden-section h3,.layer-inspector h3 { margin:0; font-size:1.1rem; }
.convergence>header>span { max-width:360px; color:var(--muted); font-size:12px; text-align:right; }
.history-lanes { margin-top:1.4rem; display:grid; gap:1rem; }
.history-lane { min-width:0; display:grid; grid-template-columns:170px minmax(0,1fr); gap:1rem; align-items:center; }
.lane-label { min-width:0; display:grid; gap:.3rem; }
.lane-label strong { font-size:13px; }
.lane-label code { overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.timeline { min-width:0; display:flex; gap:.5rem; align-items:stretch; }
.layer-card { position:relative; min-width:0; flex:1 1 0; min-height:84px; padding:.65rem; border:1px solid #829a90; border-radius:8px; background:var(--green-soft); color:var(--ink); display:grid; align-content:start; gap:.3rem; text-align:left; cursor:pointer; }
.layer-card:not(:last-child)::after { position:absolute; top:50%; right:-.55rem; width:.55rem; border-top:1px solid var(--green); content:""; }
.layer-card span { color:var(--green); font-family:var(--mono); font-size:12px; }
.layer-card strong { min-width:0; overflow:hidden; font-size:12px; line-height:1.35; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.layer-card small { color:var(--muted); font-family:var(--mono); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-card:hover,.layer-card[data-active="true"] { border-color:var(--orange); box-shadow:inset 0 0 0 1px var(--orange); background:var(--orange-soft); }
.convergence-arrow { height:55px; display:grid; grid-template-columns:1fr 30px 1fr; align-items:center; color:var(--green); }
.convergence-arrow i { border-top:1px solid var(--line-strong); }
.convergence-arrow b { text-align:center; font-size:1.4rem; }
.rootfs-target { padding:1rem; border:2px solid var(--green); border-radius:10px; background:white; text-align:center; box-shadow:6px 6px 0 var(--green-soft); }
.rootfs-target>span { color:var(--green); font-family:var(--mono); font-size:12px; letter-spacing:.08em; }
.rootfs-target>strong { display:block; max-width:100%; margin:.5rem auto 1rem; overflow:hidden; font-family:var(--mono); font-size:12px; font-weight:550; text-overflow:ellipsis; white-space:nowrap; }
.rootfs-files { display:flex; justify-content:center; gap:.6rem; }
.rootfs-file { min-width:160px; padding:.65rem .8rem; border:1px solid var(--line); border-radius:7px; background:#f7f5ee; display:grid; grid-template-columns:1fr auto; gap:.25rem .6rem; text-align:left; }
.rootfs-file strong { font-size:12px; }
.rootfs-file span { color:var(--muted); font-size:12px; }
.rootfs-file code { grid-column:1/-1; color:var(--blue); font-size:12px; }
.identity-section { margin-top:1.2rem; padding:1.3rem; border:1px solid var(--line); }
.identity-section>header>p { max-width:370px; margin:0; color:var(--muted); font-size:12px; line-height:1.5; }
.identity-regimes { margin-top:1rem; border:1px solid var(--line-strong); }
.identity-row { min-width:0; padding:.9rem 1rem; border-bottom:1px solid var(--line); display:grid; grid-template-columns:minmax(180px,.85fr) minmax(280px,1.4fr) 85px; align-items:center; gap:1rem; }
.identity-row:last-child { border-bottom:0; }
.identity-label { min-width:0; display:grid; gap:.25rem; }
.identity-label strong { font-size:12px; }
.identity-label small { color:var(--muted); font-size:12px; line-height:1.35; }
.identity-values { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr); gap:.4rem; }
.identity-values code { overflow:hidden; color:var(--muted); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.identity-values b { text-align:center; }
.identity-row em { justify-self:end; padding:.3rem .45rem; border:1px solid var(--green); color:var(--green); font-family:var(--mono); font-size:12px; font-style:normal; }
.identity-row[data-equal="false"] { background:#fff9f5; }
.identity-row[data-equal="false"] em { border-color:var(--orange); color:var(--orange); }
.hidden-section { margin-top:1.2rem; padding:1.3rem; border:1px solid var(--line); background:var(--orange-soft); display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; }
.hidden-section p:last-child { margin:.8rem 0 0; color:var(--muted); line-height:1.6; }
.hidden-records { display:grid; gap:.5rem; }
.hidden-card { padding:.7rem .8rem; border:1px solid #d7a391; background:#fffaf7; display:grid; grid-template-columns:1fr auto; gap:.25rem .7rem; }
.hidden-card span,.hidden-card small { color:var(--muted); font-size:12px; }
.hidden-card strong { color:var(--orange); font-family:var(--mono); }
.hidden-card small { grid-column:1/-1; }
.hidden-card.empty { color:var(--muted); font-size:12px; }
.layer-inspector { border-left:1px solid var(--line); }
.layer-inspector>header { padding:1.5rem 1.2rem 1rem; border-bottom:1px solid var(--line); }
.layer-inspector dl { margin:0; }
.layer-inspector dl div { min-width:0; padding:.8rem 1.2rem; border-bottom:1px solid var(--line); display:grid; gap:.3rem; }
.layer-inspector dt { color:var(--muted); font-size:12px; letter-spacing:.04em; text-transform:uppercase; }
.layer-inspector dd { min-width:0; margin:0; overflow-wrap:anywhere; font-size:12px; line-height:1.45; }
.layer-inspector code { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.layer-inspector>p { margin:1.2rem; padding:1rem; border-left:3px solid var(--green); background:var(--green-soft); color:var(--muted); font-size:12px; line-height:1.55; }
.load-section { padding:7rem max(4vw,calc((100vw - 1420px)/2)); background:var(--paper); }
.load-section>header { display:flex; align-items:end; justify-content:space-between; gap:4rem; }
.load-section h2 { max-width:850px; margin:0; font-size:clamp(2.2rem,4.2vw,4.3rem); line-height:1.05; letter-spacing:-.055em; }
.load-section>header>p { max-width:480px; margin:0; color:var(--muted); line-height:1.7; }
.load-grid { margin-top:3rem; border:1px solid var(--line-strong); display:grid; grid-template-columns:240px minmax(390px,.9fr) minmax(380px,1.1fr); background:var(--surface); }
.load-grid>aside,.load-grid>div { min-width:0; padding:1.5rem; border-right:1px solid var(--line); }
.load-grid>div:last-child { border-right:0; }
.cost-controls { margin-top:1rem; display:grid; gap:.5rem; }
.cost-button { padding:.8rem; border:1px solid var(--line); background:white; color:var(--ink); display:grid; gap:.25rem; text-align:left; cursor:pointer; }
.cost-button strong { font-size:12px; text-transform:capitalize; }
.cost-button span { color:var(--muted); font-family:var(--mono); font-size:12px; }
.cost-button:hover,.cost-button[data-active="true"] { border-color:var(--green); background:var(--green-soft); }
.load-result { background:var(--green-soft); }
.load-result>span { color:var(--green); font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.load-value { min-width:0; margin:1.2rem 0; display:flex; align-items:baseline; gap:.7rem; }
.load-value small { color:var(--green); font-family:var(--mono); font-size:1.3rem; }
.load-value strong { font-size:clamp(4rem,7vw,7rem); line-height:.8; letter-spacing:-.07em; }
.load-value em { min-width:0; overflow:hidden; color:var(--muted); font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.load-result>code { display:block; padding:.8rem; background:rgb(255 255 255 / 65%); font-size:1rem; }
.load-result>p { color:#52605a; line-height:1.6; }
.load-scope { display:flex; flex-wrap:wrap; gap:.4rem; }
.load-scope span { padding:.3rem .45rem; border:1px solid #9ebcaf; background:white; font-family:var(--mono); font-size:12px; }
.candidate-costs { margin-top:1rem; display:grid; gap:.8rem; }
.cost-row>div { display:flex; justify-content:space-between; gap:1rem; }
.cost-row strong,.cost-row span { font-size:12px; }
.cost-row span { font-family:var(--mono); }
.cost-row i { height:9px; margin-top:.35rem; background:#e7e5de; display:block; }
.cost-row b { height:100%; display:block; background:var(--orange); }
.cost-row[data-optimum="true"] b { background:var(--green); }
.load-interpretation { margin:1.4rem 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.boundary { padding:7rem max(5vw,calc((100vw - 1380px)/2)); display:grid; grid-template-columns:1fr 1fr; gap:8vw; background:var(--surface); }
.boundary h2 { max-width:650px; margin:0; font-size:clamp(2.2rem,4vw,4rem); line-height:1.05; letter-spacing:-.05em; }
.boundary p:last-child { margin:1.7rem 0 0; color:var(--muted); line-height:1.8; }
.boundary ul { margin:0; padding:0; border-top:1px solid var(--line-strong); list-style:none; }
.boundary li { position:relative; padding:1.2rem 0 1.2rem 1.8rem; border-bottom:1px solid var(--line); line-height:1.55; }
.boundary li::before { position:absolute; left:0; color:var(--green); content:"\2713"; }
.site-footer { min-height:84px; padding:1rem 3.2vw; border-top:1px solid var(--line-strong); background:var(--ink); color:white; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.site-footer a { display:flex; align-items:center; gap:.45rem; font-size:12px; text-decoration:none; }
.site-footer p { margin:0; color:#aab5af; font-size:12px; }
.fatal-error { position:fixed; z-index:80; right:1rem; bottom:1rem; left:1rem; padding:1rem; border:1px solid #a23829; background:#fff1ee; color:#76251b; font-family:var(--mono); font-size:12px; box-shadow:0 14px 35px rgb(0 0 0 / 18%); }
@media (max-width:1180px) { .explorer-grid{grid-template-columns:210px minmax(0,1fr)} .layer-inspector{grid-column:1/-1;border-top:1px solid var(--line);border-left:0;display:grid;grid-template-columns:240px 1fr 260px}.layer-inspector dl{display:grid;grid-template-columns:repeat(4,1fr)}.load-grid{grid-template-columns:220px 1fr}.load-grid>div:last-child{grid-column:1/-1;border-top:1px solid var(--line)} }
@media (max-width:800px) { .hero{min-height:auto;padding:6rem 1.25rem 4rem;grid-template-columns:1fr;gap:3rem}.hero h1{font-size:clamp(3.6rem,18vw,6rem)}.artifact-strip{grid-template-columns:1fr 1fr}.artifact-strip div{padding:1rem;border-bottom:1px solid #45524d}.artifact-strip div:last-child{grid-column:1/-1}.takeaway{padding:5rem 1.25rem}.explorer-heading,.load-section>header{display:block}.explorer-heading{padding:3rem 1.25rem 2rem}.explorer-heading>p,.load-section>header>p{margin-top:1rem}.explorer-grid{display:block}.comparison-controls{border-right:0}.control-list{grid-template-columns:repeat(3,1fr)}.evidence-stage{padding:1rem}.history-lane{display:block}.lane-label{margin-bottom:.6rem}.identity-section>header{display:block}.identity-section>header>p{margin-top:.6rem}.identity-row{grid-template-columns:1fr auto}.identity-values{grid-column:1/-1;grid-row:2}.identity-row em{grid-column:2;grid-row:1}.hidden-section{grid-template-columns:1fr}.layer-inspector{display:block}.layer-inspector dl{grid-template-columns:1fr 1fr}.load-section{padding:5rem 1.2rem}.load-grid{grid-template-columns:1fr}.load-grid>aside,.load-grid>div{border-right:0;border-bottom:1px solid var(--line)}.load-grid>div:last-child{grid-column:auto}.cost-controls{grid-template-columns:1fr 1fr}.boundary{padding:5rem 1.25rem;grid-template-columns:1fr;gap:3rem}.site-footer p{display:none} }
@media (max-width:520px) { .hero h1{font-size:3rem}.hero h1 em{display:block}.artifact-strip{grid-template-columns:1fr}.artifact-strip div:last-child{grid-column:auto}.control-list{grid-template-columns:1fr}.timeline{display:grid;grid-template-columns:1fr 1fr}.layer-card:not(:last-child)::after{display:none}.rootfs-files{display:grid}.identity-values{grid-template-columns:1fr}.identity-values b{display:none}.layer-inspector dl{grid-template-columns:1fr}.cost-controls{grid-template-columns:1fr}.load-value strong{font-size:4.5rem}.site-footer{padding:1.2rem} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} }