@font-face { font-family: Ouyang; src: url("../liuyao/ouyangxun.ttf") format("truetype"); font-display: swap; }
:root { --ink:#17232b; --paper:#f1ede2; --paper-deep:#e5dfd0; --red:#a9382d; --red-dark:#782a25; --gold:#c79547; --blue:#466c78; --muted:#748087; --line:rgba(23,35,43,.18); --brush:Ouyang,"STKaiti","KaiTi",serif; --song:"Songti SC","Noto Serif SC","STSong",serif; --sans:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--song); }
a { color:inherit; }
.grain { position:fixed; z-index:20; inset:0; pointer-events:none; opacity:.16; background-image:radial-gradient(rgba(37,32,23,.22) .45px,transparent .55px); background-size:5px 5px; mix-blend-mode:multiply; }
.masthead { position:sticky; z-index:15; top:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:4.5rem; padding:0 4vw; color:#e9e2d2; background:rgba(17,27,35,.95); border-bottom:1px solid rgba(255,255,255,.1); backdrop-filter:blur(12px); }
.brand { display:flex; gap:.8rem; align-items:center; text-decoration:none; }.brand span { display:grid; width:2rem; height:2rem; place-items:center; color:#efc77e; border:1px solid #b34a3d; font-family:var(--brush); font-size:1.1rem; transform:rotate(-2deg); }.brand b { font-weight:400; letter-spacing:.14em; }
.masthead nav { display:flex; gap:1.8rem; }.masthead nav a,.home { color:#c6c8c3; font-size:.7rem; letter-spacing:.2em; text-decoration:none; }.masthead nav a:hover,.home:hover { color:#efc77e; }.home { justify-self:end; }
.hero { position:relative; display:grid; min-height:calc(100vh - 4.5rem); grid-template-columns:minmax(19rem,1fr) minmax(20rem,.95fr); align-items:center; gap:6vw; padding:7vw; overflow:hidden; color:#eef0e9; background:radial-gradient(circle at 72% 44%,#203746 0,#142631 28%,#101a22 66%); }
.hero::before { content:""; position:absolute; right:-10vw; bottom:-28vw; width:70vw; height:70vw; border:1px solid rgba(237,205,145,.13); border-radius:50%; box-shadow:0 0 0 8vw rgba(255,255,255,.015),0 0 0 19vw rgba(255,255,255,.012); }
.hero-copy { position:relative; z-index:2; }.eyebrow,.chapter-no { margin:0 0 1.5rem; color:#cc6f5b; font-family:var(--sans); font-size:.66rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; }
h1,h2 { font-family:var(--brush); font-weight:400; }
h1 { margin:0; font-size:clamp(4.5rem,9vw,9rem); line-height:.88; letter-spacing:.04em; }h1 span,h1 em { display:block; }h1 em { margin:.18em 0 0 .35em; color:#efc77e; font-style:normal; }
.hero-lead { max-width:36rem; margin:3rem 0 2rem; color:#afbdc1; font-size:.9rem; line-height:2; }
.start { display:inline-flex; gap:3rem; align-items:center; padding:.8rem 0; color:#f4d49b; border-bottom:1px solid rgba(244,212,155,.5); font-size:.75rem; letter-spacing:.16em; text-decoration:none; }.start i { font-style:normal; }
.hero-figure { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }.hero-circle { position:relative; display:grid; width:min(36vw,31rem); aspect-ratio:1; place-items:center; border:1px solid rgba(238,205,142,.5); border-radius:50%; box-shadow:0 0 5rem rgba(199,149,71,.12) inset; }.hero-circle::before,.hero-circle::after,.hero-circle i { content:""; position:absolute; inset:5%; border:1px solid rgba(213,87,65,.72); clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); }.hero-circle::after { inset:11%; transform:rotate(30deg); opacity:.52; }.hero-circle i:nth-child(1){ inset:17%; transform:rotate(15deg); opacity:.34; }.hero-circle i:nth-child(2){ inset:23%; transform:rotate(45deg); opacity:.22; }.hero-circle i:nth-child(3){ inset:29%; transform:rotate(75deg); opacity:.14; }.hero-circle b { color:#f0c77f; font-family:var(--brush); font-size:5rem; font-weight:400; }.hero-figure p { margin:1.5rem 0 0; color:#758f98; font-size:.7rem; letter-spacing:.4em; }
.hero-aside { position:absolute; right:2vw; bottom:3vw; color:#6f858d; font-size:.64rem; line-height:2; text-align:right; }.hero-aside b { color:#c8a86f; font-weight:400; letter-spacing:.16em; }
.manifesto { display:grid; grid-template-columns:1fr auto 1fr; gap:2rem; align-items:center; padding:2rem 6vw; color:#bdc8c9; background:#192831; font-size:.68rem; letter-spacing:.09em; }.manifesto span:last-child { text-align:right; }.manifesto b { color:#efc77e; font-weight:400; }
.chapter { display:grid; min-height:100vh; grid-template-columns:minmax(15rem,.45fr) minmax(30rem,1.55fr); gap:5vw; padding:8vw 5vw; }.chapter-intro { position:sticky; top:8rem; align-self:start; }.chapter h2 { margin:0; color:var(--red); font-size:clamp(5.5rem,10vw,9rem); line-height:.85; }.chapter blockquote { margin:3rem 0 1.5rem; padding-left:1.2rem; border-left:2px solid var(--red); font-family:var(--brush); font-size:1.35rem; line-height:1.8; }.chapter blockquote cite { display:block; color:var(--muted); font-family:var(--song); font-size:.65rem; font-style:normal; }.chapter-intro > p:last-child { max-width:28rem; color:#66737a; font-size:.8rem; line-height:1.9; }
.stage { align-self:center; padding:clamp(1.2rem,3vw,3rem); border:1px solid var(--line); background:rgba(255,255,255,.2); }
.canvas-wrap { position:relative; min-height:30rem; }.canvas-wrap canvas,#accumulate-canvas { display:block; width:100%; height:30rem; }.canvas-mark { position:absolute; right:1.2rem; top:1rem; color:var(--red); font-family:var(--brush); font-size:1.5rem; }
.live-values,.slice-readout { display:grid; grid-template-columns:repeat(3,1fr); margin:1.2rem 0 2.2rem; border-top:1px solid var(--line); border-left:1px solid var(--line); }.live-values p,.slice-readout p { margin:0; padding:1rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }.live-values span,.slice-readout span { display:block; color:var(--muted); font-size:.62rem; letter-spacing:.12em; }.live-values strong,.slice-readout strong { display:block; margin-top:.45rem; font-family:var(--sans); font-size:clamp(1rem,2vw,1.5rem); font-weight:400; }
.control-label { display:flex; justify-content:space-between; gap:1rem; align-items:center; color:var(--muted); font-size:.62rem; }.control-label b { color:var(--ink); font-weight:400; letter-spacing:.08em; text-align:center; }
.timeline { width:100%; height:3.5rem; margin:.55rem 0 1.2rem; appearance:none; background:transparent; cursor:grab; }.timeline:active { cursor:grabbing; }.timeline::-webkit-slider-runnable-track { height:4px; background:linear-gradient(90deg,var(--red),rgba(169,56,45,.18)); }.timeline::-webkit-slider-thumb { width:2.55rem; height:2.55rem; margin-top:calc((4px - 2.55rem)/2); appearance:none; border:.15rem solid var(--red); border-radius:50%; background:var(--paper); box-shadow:0 0 0 .65rem rgba(169,56,45,.1); }.timeline::-moz-range-track { height:4px; background:rgba(169,56,45,.2); }.timeline::-moz-range-progress { height:4px; background:var(--red); }.timeline::-moz-range-thumb { width:2.35rem; height:2.35rem; border:.15rem solid var(--red); border-radius:50%; background:var(--paper); box-shadow:0 0 0 .65rem rgba(169,56,45,.1); }.timeline:focus-visible { outline:2px solid var(--ink); outline-offset:4px; }
.stage-note,.discovery { margin:0; color:var(--muted); font-size:.65rem; line-height:1.7; text-align:center; }
.chapter-approach { color:#eee8dc; background:#253943; }.chapter-approach .chapter-intro > p:last-child,.chapter-approach blockquote cite,.chapter-approach .control-label,.chapter-approach .stage-note { color:#9fb0b4; }.chapter-approach .stage { border-color:rgba(255,255,255,.15); background:rgba(10,23,31,.18); }.chapter-approach .control-label b { color:#f1e6d4; }.chapter-approach .timeline::-webkit-slider-thumb { background:#253943; }.chapter-approach .timeline::-moz-range-thumb { background:#253943; }
.squeeze-view { min-height:29rem; padding:3rem 1rem; }.squeeze-labels { display:grid; grid-template-columns:1fr auto 1fr; color:#9eb0b4; font-size:.64rem; letter-spacing:.1em; }.squeeze-labels b { color:#efc77e; font-family:var(--song); font-size:1.1rem; font-weight:400; }.squeeze-labels span:last-child { text-align:right; }
.number-axis { position:relative; height:9rem; margin:3rem 0; border-top:1px solid rgba(255,255,255,.3); }.number-axis::before { content:"3.000000"; position:absolute; top:-1.8rem; left:0; color:#61757d; font: .55rem var(--sans); }.number-axis::after { content:"3.464102"; position:absolute; top:-1.8rem; right:0; color:#61757d; font:.55rem var(--sans); }.number-axis > i { position:absolute; top:-.45rem; display:flex; flex-direction:column; align-items:center; color:#e2b164; font-style:normal; transform:translateX(-50%); transition:left .35s ease; }.number-axis > i b { width:.8rem; height:.8rem; border:2px solid currentColor; border-radius:50%; background:#253943; }.number-axis > i span { margin-top:.8rem; font: .7rem var(--sans); }.number-axis em { position:absolute; top:-.72rem; left:30.5%; color:#f7e4b9; font-size:1rem; font-style:normal; transform:translateX(-50%); }
.error-lens { position:relative; padding-top:1rem; border-top:1px solid rgba(255,255,255,.12); }.error-lens span { color:#96a9ad; font-size:.65rem; }.error-lens b { float:right; color:#efc77e; font:1.1rem var(--sans); font-weight:400; }.error-lens i { display:block; width:100%; height:1.5rem; margin-top:1rem; background:linear-gradient(90deg,#b4493a,#e1ad5f); transform-origin:left; transition:transform .35s ease; }.discovery { color:#c7d1cf; }
.chapter-accumulate { background:#e4dece; }.accumulate-stage { overflow:hidden; }#accumulate-canvas { height:34rem; }.slice-readout { grid-template-columns:repeat(4,1fr); }
.chapter-merge { color:#eee7da; background:#332725; }.chapter-merge .chapter h2 { color:#d2644f; }.chapter-merge .chapter-intro > p:last-child { color:#bdaea7; }.chapter-merge .stage { border-color:rgba(255,255,255,.16); background:rgba(24,12,11,.12); }.chapter-merge .control-label { color:#b8aaa4; }.chapter-merge .control-label b { color:#f2dfc5; }.chapter-merge .timeline::-webkit-slider-thumb { background:#332725; }.chapter-merge .timeline::-moz-range-thumb { background:#332725; }
.merge-board { position:relative; min-height:34rem; overflow:hidden; color:#f0e4d1; background:#1d292e; }.merge-layer { position:absolute; inset:0; display:grid; grid-template-rows:auto repeat(3,1fr); padding:2rem 3rem; }.merge-layer > div { display:grid; grid-template-columns:7rem 1fr; align-items:center; border-top:1px solid rgba(255,255,255,.15); }.merge-layer > div b { color:#e3b967; font-family:var(--brush); font-size:2rem; font-weight:400; }.merge-layer > div span { font-size:clamp(1rem,2.4vw,2rem); line-height:1.4; }.layer-name { margin:0 0 1.3rem; color:#8fa2a8; font-size:.66rem; letter-spacing:.18em; }
.modern-layer { color:#243038; background:#e8e1d3; clip-path:inset(0 0 0 50%); }.modern-layer > div { border-color:rgba(23,35,43,.14); }.modern-layer > div b { color:var(--red); }.modern-layer .layer-name { color:#718086; }.merge-seam { position:absolute; z-index:3; top:0; bottom:0; left:50%; width:1px; background:#d05b47; transform:translateX(-50%); }.merge-seam span { position:absolute; top:50%; left:50%; display:grid; width:3.2rem; height:3.2rem; place-items:center; color:#f4d79e; background:#a9382d; border:1px solid #e0a760; border-radius:50%; font-family:var(--brush); font-size:1.6rem; font-style:normal; transform:translate(-50%,-50%); }
.final-word { margin:2.5rem 0 0; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14); }.final-word span { display:block; max-width:48rem; color:#b9aaa4; font-size:.72rem; line-height:1.8; }
.sources { padding:8vw 6vw; background:#eee9de; }.sources h2 { margin:0 0 2.5rem; font-family:var(--brush); font-size:clamp(3rem,6vw,6rem); font-weight:400; }.source-grid { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.source-grid a { min-height:10rem; padding:1.4rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-decoration:none; }.source-grid b,.source-grid span { display:block; }.source-grid b { color:var(--red-dark); font-weight:400; }.source-grid span { margin-top:.7rem; color:var(--muted); font-size:.68rem; line-height:1.6; }.source-grid a:hover { background:rgba(169,56,45,.05); }.method-note { max-width:62rem; margin:2rem 0 0; color:var(--muted); font-size:.7rem; line-height:1.8; }
footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:2.2rem 6vw; color:#a6b3b5; background:#101a22; font-size:.68rem; }footer b { color:#efc77e; font-weight:400; letter-spacing:.14em; }footer a { justify-self:end; text-decoration:none; }
@media (max-width:900px){.masthead{grid-template-columns:1fr auto}.masthead nav{display:none}.home{display:none}.hero{grid-template-columns:1fr;padding-top:6rem}.hero-figure{width:min(100%,28rem);margin:auto}.hero-circle{width:100%}.hero-aside{display:none}.chapter{grid-template-columns:1fr;min-height:0;padding:6rem 5vw}.chapter-intro{position:static}.stage{width:100%}.source-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.masthead{padding:0 1rem}.brand b{font-size:.72rem}.hero{padding:5rem 1.2rem}.hero h1{font-size:4.2rem}.manifesto{grid-template-columns:1fr;gap:.6rem;text-align:center}.manifesto span:last-child{text-align:center}.chapter{padding:4.5rem 1rem}.stage{padding:1rem}.canvas-wrap,.canvas-wrap canvas{min-height:22rem;height:22rem}.live-values,.slice-readout{grid-template-columns:repeat(2,1fr)}#accumulate-canvas{height:25rem}.merge-board{min-height:29rem}.merge-layer{padding:1.5rem}.merge-layer>div{grid-template-columns:4.5rem 1fr}.merge-layer>div b{font-size:1.4rem}.final-word{grid-template-columns:1fr;gap:.6rem}.source-grid{grid-template-columns:1fr}footer{grid-template-columns:1fr;gap:.7rem;text-align:center}footer a{justify-self:center}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}