@charset "UTF-8";
:root{color-scheme:dark;--bg:#090c0f;--surface:#101519;--line:#263037;--ink:#eff2eb;--muted:#8f9c9f;--mint:#b7f8c7;--amber:#e9c391;--blue:#92bacb;--purple:#c7b0dd;font-family:"Segoe UI",Inter,Arial,sans-serif;background:var(--bg);color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:inherit;text-decoration:none}a:hover{color:var(--mint)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:5px}button{border:0}button:active{transform:translateY(1px)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:absolute;top:-60px;left:20px;background:var(--mint);color:#102317;padding:12px;z-index:20}.skip:focus{top:12px}
.site-header{height:90px;border-bottom:1px solid #20272c;display:flex;align-items:center;justify-content:space-between;max-width:1600px;margin:auto;padding:0 48px}.wordmark{display:flex;gap:12px;align-items:center;font-size:15px;font-weight:650;letter-spacing:1.6px}.wordmark svg{height:34px;width:25px;color:var(--ink)}.header-rule{height:15px;width:1px;background:#3d474d;margin:0 4px}.lab-name{font:10px monospace;letter-spacing:1px;color:#8c9a9f}.header-right{display:flex;align-items:center;gap:27px}.back-link{font-size:11px;color:#aab6bb}.language-switch{display:flex;border:1px solid #d7d7d7;border-radius:50px;background:#f4f4f4;padding:3px;gap:2px}.language-switch button{border-radius:50px;background:transparent;color:#555;padding:5px 9px;font-size:12px;line-height:1;min-width:31px}.language-switch button[aria-pressed=true]{background:#111;color:white}
main{max-width:1504px;margin:auto;padding:0 48px}.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:62px 0 44px;gap:30px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:550;color:var(--muted);margin:0 0 22px}.intro .eyebrow{color:var(--mint);display:flex;align-items:center;gap:9px}.status-dot{width:5px;height:5px;background:var(--mint);border-radius:100%;box-shadow:0 0 12px #b7f8c760}.intro h1{font-size:clamp(48px,5.9vw,85px);font-weight:450;line-height:1.01;letter-spacing:-4px;margin:0}.intro em{font-style:normal;color:var(--mint)}.intro-copy{font-size:13px;color:#a1adb0;line-height:1.9;max-width:355px;margin:0 0 6px}.intro-copy span{display:block;color:#d6dedb;margin-top:13px}
.lab-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px}.stage-shell{border:1px solid var(--line);background:#0e1418;border-radius:18px;overflow:hidden;min-width:0;position:relative;box-shadow:0 20px 70px #0003}.stage-top{position:relative;display:flex;justify-content:space-between;align-items:center;padding:20px 22px;z-index:1;border-bottom:1px solid #25313870;gap:12px}.stage-index{font:9px monospace;letter-spacing:1.6px;color:#b2c2c2;display:flex;align-items:center;gap:7px}.stage-index i{height:5px;width:5px;background:var(--mint);border-radius:50%}.stage-views{display:flex;gap:2px;padding:3px;border:1px solid #2c3b40;border-radius:8px}.stage-views button{font-size:10px;padding:7px 11px;background:transparent;color:#85979d;border-radius:5px}.stage-views button[aria-pressed=true]{background:#26352f;color:#daf7df}.drawing-surface{position:relative;height:540px;touch-action:pan-y;cursor:ew-resize;background:radial-gradient(ellipse at 50% 42%,#21372b50,transparent 58%)}#construction{width:100%;height:100%;display:block}.stage-grid{color:#809a8b;opacity:.085}.rho-badge{position:absolute;top:23px;left:24px;pointer-events:none;display:flex;flex-direction:column;gap:9px}.rho-badge>span{color:#7d9294;font:8px monospace;letter-spacing:1.8px}.rho-badge strong{font:17px "Cambria Math",Georgia,serif;font-weight:400;letter-spacing:.4px;color:#bdcfca}.rho-badge small{font:12px "Cambria Math",Georgia,serif;color:#698880}.drag-hint{position:absolute;bottom:40px;left:0;right:0;text-align:center;color:#718e84;font-size:10px;pointer-events:none}.stage-coordinate{display:flex;justify-content:space-between;gap:10px;position:absolute;left:24px;right:24px;bottom:17px;color:#648477;font:8px monospace;letter-spacing:1px;pointer-events:none}.transport{padding:21px 24px 17px;background:#10191a;border-top:1px solid #263936}.transport-row{display:flex;align-items:center;gap:10px}.play{display:flex;gap:10px;align-items:center;color:#153121;background:var(--mint);border-radius:7px;padding:11px 16px;font-size:11px;font-weight:650;min-height:39px}.play:hover{background:#d5ffdd}.play svg{fill:currentColor;width:14px;height:14px}.replay{background:#1b2927;color:#b4c5c0;border:1px solid #2c4038;border-radius:7px;font:22px/1 monospace;width:40px;height:39px}.timecode{font:10px monospace;color:#829a90;margin-left:5px}.speed{margin-left:auto;font-size:10px;color:#93a99f;display:flex;gap:7px;align-items:center}.speed select{color:#cbddd3;background:#17241f;border:1px solid #344739;font-size:10px;padding:6px;border-radius:5px}.timeline-slider{margin:22px 0 6px!important}.timeline-labels{display:flex;justify-content:space-between;font-size:9px;color:#87988e;letter-spacing:.2px}input[type=range]{appearance:none;display:block;width:100%;height:20px;background:transparent;cursor:pointer;accent-color:var(--mint);margin:9px 0}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--mint) var(--fill,0%),#2e3c36 var(--fill,0%));height:3px;border-radius:3px}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border-radius:100%;background:var(--mint);border:2px solid #e6ffed;margin-top:-4px;box-shadow:0 0 0 4px #a7ffbe0a}input[type=range]::-moz-range-track{height:3px;background:#2e3c36}input[type=range]::-moz-range-thumb{width:9px;height:9px;background:var(--mint);border:1px solid #fff;border-radius:50%}
.inspector{padding-top:9px;display:flex;flex-direction:column;min-width:0}.chapter-heading{display:flex;justify-content:space-between;align-items:center;padding:0 3px 17px}.chapter-heading .eyebrow{font-size:9px;margin:0}.chapter-heading>span:last-child{font:9px monospace;color:#83938f}.chapter-list{display:grid;gap:5px}.chapter{display:flex;align-items:center;text-align:left;gap:12px;width:100%;padding:13px;border:1px solid transparent;border-radius:8px;background:transparent}.chapter>span{font:10px monospace;color:#526964}.chapter strong{display:block;font-size:12px;font-weight:500;color:#8f9e9a}.chapter small{display:block;margin-top:5px;font:11px "Cambria Math",Georgia,serif;color:#596e67}.chapter>i{margin-left:auto;color:transparent;font:12px monospace}.chapter:hover{background:#111e19}.chapter.active{background:#15231d;border-color:#2b4636}.chapter.active strong{color:#d7eddb}.chapter.active>span,.chapter.active>i{color:var(--mint)}.chapter.active small{color:#a5c3ad}.chapter-story{min-height:108px;padding:16px 5px 4px}.chapter-story p{font-size:12px;line-height:1.8;color:#94a69e;margin:0}.tuning{border-top:1px solid var(--line);padding:20px 4px 5px;margin-top:auto}.tuning>label,.sequence-copy>label{display:flex;justify-content:space-between;font-size:11px;color:#c4d1ca}.tuning output,.sequence-copy output{font:11px monospace;color:var(--mint)}.tuning p{font-size:10px;color:#7c9386;line-height:1.6;margin:11px 0 17px}.toggle{align-items:center;margin:12px 0;cursor:pointer}.toggle input{width:29px;height:16px;accent-color:var(--mint);cursor:pointer}.export-row{padding:13px 4px 0}.download{display:flex;justify-content:space-between;gap:12px;align-items:center;width:100%;background:#dfe9df;color:#16231b;border-radius:7px;padding:13px;font-size:11px;font-weight:600}.download>span:last-child{font:10px monospace;color:#4e6756}.export-row>a{display:block;margin-top:15px;font-size:10px;color:#7f9b88;text-align:center}
.dimensions-section{padding:64px 0}.section-title{display:flex;justify-content:space-between;gap:25px;align-items:flex-end;margin-bottom:25px}.section-title .eyebrow{font-size:9px;margin-bottom:13px}h2{font-weight:450;font-size:32px;letter-spacing:-1px;line-height:1.15;margin:0}.section-title>p{font-size:11px;line-height:1.8;color:#889b91;margin:0;max-width:335px}.dimension-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.dimension-grid button{display:flex;align-items:center;text-align:left;gap:15px;background:#101916;border:1px solid #24362d;border-radius:8px;padding:19px 18px;min-width:0;transition:background .2s,border-color .2s}.dimension-grid button:hover,.dimension-grid button.selected{background:#1a2c21;border-color:#507b57}.dimension-symbol{font:26px "Cambria Math",Georgia,serif;color:var(--mint);width:28px}.dimension-grid strong{font-size:11px;font-weight:500;color:#c4d3c8;display:block}.dimension-grid small{display:block;font:12px "Cambria Math",Georgia,serif;color:#7e9686;margin-top:5px}.dimension-grid output{margin-left:auto;font:11px monospace;color:#8faf97}.dimension-grid button:nth-child(2) .dimension-symbol{color:var(--amber)}.dimension-grid button:nth-child(3) .dimension-symbol{color:var(--blue)}.dimension-grid button:nth-child(4) .dimension-symbol{color:var(--purple)}
.sequence-section{display:grid;grid-template-columns:330px minmax(0,1fr);gap:60px;padding:50px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.sequence-copy .eyebrow{font-size:9px;margin-bottom:17px}.sequence-copy>p:not(.eyebrow){font-size:12px;line-height:1.9;color:#8fa195}.recurrence{font:23px/1.7 "Cambria Math",Georgia,serif;color:#d2e6d4;margin:26px 0}.recurrence small{display:block;font-size:12px;color:#7f9b86;margin-top:4px}.ratio-readout{margin-top:17px;padding:14px;background:#122018;border:1px solid #263b2b;border-radius:7px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.ratio-readout>span{font:12px "Cambria Math",Georgia,serif;color:#95b49b}.ratio-readout strong{font:17px monospace;color:var(--mint)}.ratio-readout small{font:9px monospace;color:#6e9579;flex-basis:100%}.sequence-drawing{position:relative;min-width:0;border:1px solid #27362c;border-radius:12px;background:radial-gradient(ellipse at 50% 50%,#1c2f2150,#0b120e);min-height:400px;display:flex;flex-direction:column;justify-content:center;padding:27px 24px 40px}.sequence-drawing>svg{height:320px;width:100%;overflow:visible}.term-strip{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin-top:10px}.term-strip span{font:9px monospace;color:#86a68e;border:1px solid #233d2b;border-radius:3px;padding:4px 6px}.term-strip span:last-child{color:var(--mint);border-color:#547356}.drawing-caption{position:absolute;bottom:13px;left:24px;font:8px monospace;letter-spacing:1.1px;color:#54705d}
.about-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;padding:56px 0 64px}.about-grid .eyebrow{font-size:8px;letter-spacing:1.3px}.about-grid h3{font-size:15px;font-weight:500;line-height:1.5;margin:14px 0}.about-grid p{font-size:11px;line-height:1.9;color:#84998b;margin:0}.source-links a{display:block;padding:2px 0;font-size:10px;color:#a0bca7}footer{max-width:1504px;margin:auto;padding:27px 48px 35px;border-top:1px solid #23322a;display:flex;justify-content:space-between;gap:20px;color:#69836f;font-size:10px}footer>a{color:#c7d8ca;letter-spacing:2px;font-size:10px}footer>span:last-child{font:11px "Cambria Math",Georgia,serif}
#construction .guide{fill:none;stroke:#8daf9b;stroke-width:2;vector-effect:non-scaling-stroke}#construction .guide.faint{stroke:#507161;stroke-width:.6}#construction .dimension{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}#construction text{font:24px "Cambria Math",Georgia,serif;fill:#a8c1b1}#construction .micro-label{font:16px monospace;letter-spacing:2px;fill:#729b81}#construction .scaffold-line{fill:none;stroke-width:1;vector-effect:non-scaling-stroke}
@media(min-width:1600px){.drawing-surface{height:610px}}@media(max-width:1150px){main{padding:0 28px}.site-header{padding:0 28px}.lab-layout{grid-template-columns:minmax(0,1fr) 275px;gap:18px}.drawing-surface{height:525px}.intro h1{font-size:65px}.dimension-grid button{padding:16px 12px;gap:10px}.sequence-section{grid-template-columns:290px 1fr;gap:30px}.rho-badge strong{font-size:14px}.stage-top{padding:17px}.timecode{display:none}.chapter{padding:12px 8px;gap:8px}.chapter strong{font-size:11px}}
@media(max-width:850px){.intro{padding:40px 0 30px;align-items:start}.intro h1{font-size:54px;letter-spacing:-2.5px}.intro-copy{max-width:280px;font-size:11px}.lab-layout{grid-template-columns:1fr}.drawing-surface{height:510px}.inspector{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.chapter-heading{grid-column:1/-1}.chapter-list{grid-row:2/5}.chapter-story{padding-top:13px;min-height:103px}.tuning{margin-top:0}.export-row{padding-top:10px}.dimension-grid{grid-template-columns:repeat(2,1fr)}.sequence-section{grid-template-columns:1fr 1fr;gap:25px}.sequence-copy h2{font-size:27px}.about-grid{gap:22px}.about-grid h3{font-size:14px}}
@media(max-width:600px){.site-header{height:72px;padding:0 20px}.header-right{gap:8px}.back-link{display:none}.wordmark{font-size:12px;gap:9px}.lab-name{font-size:8px}.wordmark svg{width:19px;height:27px}main{padding:0 18px}.intro{display:block;padding:35px 0 28px}.intro h1{font-size:58px}.intro .eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:18px}.intro-copy{margin:23px 0 0;max-width:100%;font-size:12px}.intro-copy br{display:none}.intro-copy span{margin-top:5px}.stage-shell{border-radius:12px}.stage-top{padding:13px 12px}.stage-index{font-size:8px;letter-spacing:1px}.stage-views button{font-size:9px;padding:6px 8px}.drawing-surface{height:420px}.rho-badge{top:18px;left:15px}.rho-badge>span{font-size:7px}.rho-badge strong{font-size:13px}.rho-badge small{font-size:10px}.stage-coordinate{left:15px;right:15px;font-size:6px;gap:5px}.drag-hint{font-size:8px}.transport{padding:16px 14px}.play{padding:10px 11px;font-size:10px}.replay{width:34px}.speed{gap:4px;font-size:8px}.speed select{padding:5px;font-size:9px}.timeline-labels{font-size:8px}.inspector{gap:0 14px}.chapter-heading{padding-top:7px}.chapter{padding:13px 6px;gap:7px}.chapter strong{font-size:10px;line-height:1.5}.chapter>span{font-size:9px}.chapter i{display:none}.chapter small{font-size:10px}.chapter-story p{font-size:10px}.chapter-story{min-height:105px;padding-top:5px}.tuning{padding-top:15px}.tuning>label{font-size:10px}.tuning output{font-size:10px}.tuning p{font-size:9px}.download{font-size:10px;padding:11px}.download>span:last-child{font-size:8px}.export-row>a{font-size:9px;line-height:1.6}.dimensions-section{padding:44px 0}.section-title{display:block}.section-title h2{font-size:29px}.section-title>p{margin-top:13px;font-size:10px}.dimension-grid{gap:7px}.dimension-grid button{gap:7px;padding:13px 10px;flex-wrap:wrap}.dimension-symbol{font-size:23px;width:20px}.dimension-grid strong{font-size:9px}.dimension-grid output{flex-basis:100%;margin-left:27px;font-size:10px}.dimension-grid small{font-size:11px}.sequence-section{grid-template-columns:1fr;padding:35px 0;gap:25px}.sequence-copy h2{font-size:32px}.sequence-copy{max-width:100%}.sequence-drawing{min-height:340px;padding:20px 20px 35px}.sequence-drawing>svg{height:255px}.about-grid{grid-template-columns:1fr;gap:28px;padding:36px 0}.about-grid h3{font-size:16px;margin:9px 0}.about-grid p{font-size:12px}.source-links a{font-size:11px}footer{padding:25px 20px;flex-wrap:wrap;font-size:9px}footer>span:last-child{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Keep the construction controls in the first desktop view. */
@media(min-width:851px){.intro{padding:38px 0 30px}.intro h1{font-size:clamp(48px,5.1vw,72px)}.drawing-surface{height:430px}.rho-badge{top:18px}}
#construction text{font-size:40px}#construction .micro-label{font-size:26px}
.drag-hint{top:23px;bottom:auto;left:auto;right:24px;margin:0;text-align:right}@media(max-width:600px){.drag-hint{top:83px;right:15px}}

/* Revision-2 color roles: M purple, S blue, G green, W orange. */
.dimension-grid button:nth-child(1) .dimension-symbol{color:#c7a0ed}.dimension-grid button:nth-child(2) .dimension-symbol{color:#84baff}.dimension-grid button:nth-child(3) .dimension-symbol{color:#7fdfbc}.dimension-grid button:nth-child(4) .dimension-symbol{color:#eaa069}

/* Revision 3: selected fourth tile and direct geometry controls. */
.selected-triangle{filter:drop-shadow(0 0 5px #a7f1c150)}
.intro h1{font-size:clamp(42px,4.3vw,62px);letter-spacing:-2.5px}.intro{padding:35px 0 28px}.intro-copy{max-width:420px}
.stage-index i{box-shadow:none}.dimension-grid button:nth-child(1) .dimension-symbol{color:#84baff}.dimension-grid button:nth-child(2) .dimension-symbol{color:#a7f1c1}.dimension-grid button:nth-child(3) .dimension-symbol{color:#8bc7d4}.dimension-grid button:nth-child(4) .dimension-symbol{color:#e1c397}
#construction text{font-size:34px}.stage-coordinate{font-size:8px;letter-spacing:.3px}.chapter-story{min-height:126px}.about-grid article>.eyebrow{display:none}
@media(max-width:600px){.intro h1{font-size:48px}.intro-copy{font-size:11px}.stage-coordinate{font-size:7px;flex-wrap:wrap}.chapter-story{min-height:134px}.chapter-story p{font-size:10px}.dimension-grid small{font-size:10px}.drawing-surface{height:440px}.selected-triangle{filter:drop-shadow(0 0 3px #a7f1c140)}}

.outward-square{filter:drop-shadow(0 0 4px #a7f1c160)}
.view-label{position:absolute;top:22px;right:24px;margin:0;color:#c7ded0;font:11px monospace;pointer-events:none}
.projection-comparison{margin-top:24px;padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.projection-comparison summary{cursor:pointer;font-size:12px;color:var(--mint)}
.projection-comparison>p{font-size:12px;color:var(--muted);line-height:1.7;max-width:700px}
.projection-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.projection-grid figure{margin:0;min-width:0}.projection-grid svg{display:block;width:100%;height:260px;background:#0e1418;border:1px solid var(--line);border-radius:8px}
.projection-grid figcaption{margin-top:10px;text-align:center;font:11px monospace;color:var(--ink)}
@media(min-width:851px){.chapter{padding:8px 10px}.chapter small{margin-top:3px}.chapter-list{gap:2px}}
@media(max-width:600px){.projection-grid{gap:7px}.projection-grid svg{height:150px}.view-label{right:15px;top:20px;font-size:9px}.timeline-labels{font-size:7px;gap:6px}}