:root{--paper:#fbfaf7;--ink:#183a30;--muted:#58665c;--line:#dce2d8;--green:#087456;--blue:#326d94;--amber:#976722;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"Bricolage Grotesque",sans-serif;-webkit-font-smoothing:antialiased;font-size:16px}.page-nav{max-width:1640px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 40px;border-bottom:1px solid var(--line)}.page-nav img{width:155px;height:34px}.page-nav>span{font-size:15px;font-weight:500;letter-spacing:.08em;color:var(--muted)}main{padding:0 30px;max-width:1700px;margin:auto}.intro{padding:47px 20px 36px;max-width:1120px}.eyebrow{font-size:15px;font-weight:600;letter-spacing:.08em;margin:0 0 17px;color:var(--green)}h1{font-weight:500;letter-spacing:-.05em;font-size:clamp(32px,3.5vw,52px);line-height:1.12;margin:0 0 18px}.intro>p:last-child{font-family:"Lora",Georgia,serif;font-size:17px;line-height:1.65;color:var(--muted);margin:0}.system{max-width:1620px;margin:auto;border:1px solid #dce2d7;border-radius:18px;background:var(--paper);box-shadow:0 22px 65px -45px #29472835;overflow:clip}.diagram-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 26px;border-bottom:1px solid #e7e9e0}.diagram-toolbar p{display:flex;align-items:center;gap:11px;font-size:15px;color:var(--muted);margin:0}.live-dot{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 0 4px #0874560c}.controls{display:flex;gap:5px}.controls[hidden]{display:none}.controls button{font:inherit;font-size:15px;background:transparent;border:1px solid transparent;border-radius:8px;padding:8px 12px;min-height:40px;color:var(--ink);cursor:pointer}.controls button:hover{background:#edf1e7;border-color:#dce4d4}.controls button:focus-visible{outline:2px solid var(--green);outline-offset:3px}.controls button:disabled{cursor:default;color:var(--muted)}.controls button>span:first-child{margin-right:5px}.paused .live-dot{background:#889683;box-shadow:none}
.diagram{position:relative;width:calc(100% - 40px);margin:14px auto 20px;aspect-ratio:var(--ratio)}.diagram--phone{display:none;max-width:490px}.diagram svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.wire{fill:none;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.wire.ink{stroke:#7c8980;stroke-width:1.3}.wire.green{stroke:var(--green)}.wire.blue{stroke:var(--blue)}.wire.amber{stroke:var(--amber)}.wire.dashed{stroke-dasharray:5 5}.head{fill:none;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}.head.green{stroke:var(--green)}.head.blue{stroke:var(--blue)}.head.amber{stroke:var(--amber)}.head.ink{stroke:#7c8980}.box{fill:#f5f5ee;stroke:#6e8172;stroke-width:1.3;vector-effect:non-scaling-stroke;transition:fill .5s,stroke .5s,filter .5s}.box.test{fill:#edf4e8;stroke:#5e8463}.box.ca{fill:#f8f4e9;stroke:#9a8967}.box.green{fill:#eef5eb;stroke:#72a383}.box.amber{fill:#fbf4e5;stroke:#b39a6b}.box.blue{fill:#f0f5f8;stroke:#84a5b8}.box.revision{fill:#e9eee2;stroke:#638169;stroke-width:1.6}.box.is-active{stroke:var(--green);filter:drop-shadow(0 0 7px #6e9f6525)}.box.ca.is-active,.box.amber.is-active{stroke:var(--amber);filter:drop-shadow(0 0 7px #b3985625)}.box.blue.is-active{stroke:var(--blue)}.bridge{fill:var(--paper)}.junction.green{fill:var(--green)}.junction.blue{fill:var(--blue)}.junction.amber{fill:var(--amber)}
.labels{position:absolute;inset:0;pointer-events:none}.label{position:absolute;transform:translate(-50%,-50%);font-size:15px;font-weight:500;line-height:1.3;white-space:nowrap;text-align:center;color:var(--ink)}.label.title{font-size:26px;font-weight:600;letter-spacing:-.035em}.label.left{transform:translate(-100%,-50%);text-align:right}.label.input{color:var(--muted)}.label.sub{font-family:"Lora",Georgia,serif;font-weight:400;font-style:italic;font-size:15px;white-space:normal;line-height:1.5;background:var(--paper);padding:2px 3px}.label.tracker{font-size:15px;color:#425b48}.label.green{color:var(--green)}.label.blue{color:var(--blue)}.label.amber{color:var(--amber)}.label.caption{background:var(--paper);padding:4px 7px;border-radius:5px;font-weight:500}.label.vertical{writing-mode:vertical-rl;transform:translate(-50%,-50%) rotate(180deg);padding:7px 4px}.token{pointer-events:none}.token .halo{opacity:.12}.token .core{stroke:var(--paper);stroke-width:2}
.diagram-footer{display:flex;justify-content:space-between;align-items:center;gap:22px;padding:20px 26px;border-top:1px solid #e4e8dd;color:var(--muted);font-size:15px;line-height:1.5}.diagram-footer p{margin:0;max-width:460px;text-align:right}.legend{display:flex;gap:23px;flex-wrap:wrap}.legend span{display:flex;gap:8px;align-items:center}.legend i{width:18px;height:2px;display:inline-block}.legend .green{background:var(--green)}.legend .blue{background:var(--blue)}.legend .amber{background:var(--amber)}.closing{text-align:center;color:var(--muted);font-family:"Lora",Georgia,serif;font-size:17px;font-style:italic;line-height:1.65;margin:35px 15px 45px}.drawing .wire{animation:draw 1.5s var(--ease) both}.drawing .module{animation:appear .7s var(--ease) both}.drawing .label{animation:label-in .6s .12s var(--ease) both}.paused .drawing .wire{animation-play-state:paused}@keyframes draw{from{stroke-dasharray:var(--length);stroke-dashoffset:var(--length)}to{stroke-dasharray:var(--length);stroke-dashoffset:0}}@keyframes appear{from{opacity:.3;translate:0 6px}to{opacity:1;translate:0 0}}@keyframes label-in{from{opacity:.3}to{opacity:1}}
@media(min-width:1600px){.diagram{width:calc(100% - 70px);margin-top:25px;margin-bottom:24px}}
@media(max-width:1199px){.diagram--desktop{display:none}.diagram--phone{display:block}.diagram{width:calc(100% - 36px);margin-top:10px;margin-bottom:4px}.diagram-toolbar{padding:15px 22px}.label.title{font-size:24px}.diagram--phone .label.sub{background:transparent}.diagram--phone .label.caption{padding:3px 4px}.diagram-footer{display:block}.diagram-footer p{text-align:left;max-width:none;margin-top:16px}.legend{gap:15px 24px}.intro{padding-top:38px}.diagram--phone .box{stroke-width:1.3}.diagram--phone .wire{stroke-width:1.5}.diagram--phone .wire.ink{stroke-width:1.2}}
@media(max-width:599px){main{padding:0 10px}.page-nav{padding:20px}.page-nav img{width:136px;height:30px}.page-nav>span{font-size:15px;letter-spacing:.025em;max-width:140px;text-align:right;line-height:1.35}.intro{padding:32px 13px 28px}.eyebrow{font-size:15px;letter-spacing:.035em;margin-bottom:15px}h1{font-size:37px;line-height:1.13;max-width:330px}.intro>p:last-child{font-size:16px}.intro br{display:none}.system{border-radius:13px}.diagram-toolbar{padding:11px 13px;gap:8px;align-items:center}.diagram-toolbar p{font-size:15px;line-height:1.4;gap:8px;max-width:190px}.controls{gap:1px;flex:none}.controls button{padding:7px 6px;min-height:44px}.controls #replay{font-size:0;width:30px}.controls #replay>span{font-size:23px;margin:0}.diagram{width:calc(100% - 16px);margin-top:6px}.label.title{font-size:22px}.label{font-size:15px}.diagram--phone .label.sub{max-width:calc(100% - 65px)!important}.diagram-footer{padding:18px 18px;font-size:15px}.legend{gap:12px 17px}.legend i{width:14px}.closing{font-size:16px;margin:26px 17px 35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.drawing .wire{stroke-dashoffset:0}.token{display:none}}
@media(max-width:1199px){.diagram--phone .label.sub{font-family:"Bricolage Grotesque",sans-serif;font-style:normal;line-height:1.35;width:64%!important;max-width:64%!important}.diagram--phone .label.action{padding:3px 0}.diagram--phone .source-row{color:var(--muted)}}

/* Each module contains a small explanation of the work, not a decorative icon. */
.system{background:radial-gradient(ellipse at 50% 28%,#fffefa 0%,var(--paper) 68%);box-shadow:0 12px 60px -35px #29472830}
.box{fill:#f6f7f0;stroke:#8a9a89;stroke-width:1.1;filter:drop-shadow(0 5px 4px #284e2510)}
.box.test{fill:#eef5e9;stroke:#73916e}.box.ca{fill:#faf5e9;stroke:#b19b72}
.box.is-active{fill:#edf4e6;stroke:#387654;filter:drop-shadow(0 5px 9px #55834225)}
.box.ca.is-active{fill:#faf1dc;stroke:#a8833c}
.label.node-caption{font-size:15px;font-weight:400;color:var(--muted);letter-spacing:-.015em}
.micro-scene{pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.micro-scene .sheet{fill:#fffefa;stroke:#91a38d;stroke-width:1.2;filter:drop-shadow(0 3px 3px #325a2420)}
.micro-scene .sheet.back{fill:#dde6d5;stroke:#b2c0a6;filter:none}
.micro-scene .rule{stroke:#bac4b0;stroke-width:3}.micro-scene .rule.strong{stroke:#73916b;stroke-width:4}
.micro-scene .mini-line{fill:none;stroke:#5b8966;stroke-width:1.8}
.micro-scene .mini-line.dotted{stroke-dasharray:2 4;stroke:#a1b19a}
.micro-scene .concept{fill:#e4efd8;stroke:#94ad81;stroke-width:1.1}
.micro-scene .concept.central{fill:#277f5b;stroke:#277f5b}
.micro-scene .concept.blue{fill:#e0ecf2;stroke:#95b4c3}
.micro-scene .source-slip{fill:#fffefa;stroke:#acbba2;stroke-width:1.2}
.micro-scene .source-slip.amber{fill:#f9edd5;stroke:#c7ac74}
.micro-scene .spark{fill:#d8e4c9}.micro-scene .spark-line{stroke:#b5c89c;stroke-width:2}
.micro-scene .answer-band{fill:#eaf2e3}.micro-scene .answer-band.blue{fill:#edf3f7}
.micro-scene .answer-ring{fill:#fffefa;stroke:#9cba8e;stroke-width:1.3}
.micro-scene .answer-ring.blue{stroke:#9ab6c5}
.micro-scene .check{fill:none;stroke:#27855d;stroke-width:2.5}
.micro-scene .correction{fill:none;stroke:#4c83a4;stroke-width:1.8}
.micro-scene .result-seal{fill:#e2efd5;stroke:#93b280;stroke-width:1.2}
.micro-scene .difficulty{fill:#aac491}.micro-scene .difficulty rect:last-child{fill:#4e8963}
.scene-ca .sheet{stroke:#c0ad85}.scene-ca .sheet.back{fill:#ebdfc2;stroke:#d1c199}
.scene-ca .rule{stroke:#cfc09a}.scene-ca .rule.strong{stroke:#b49453}
.micro-scene .news-image{fill:#f4ebd4}.micro-scene .landscape{fill:none;stroke:#b58b40;stroke-width:2.5}
.micro-scene .news-sun{fill:#d3b563}.micro-scene .beacon{fill:#b88a37;stroke:#fff9e9;stroke-width:2}
.micro-scene .broadcast-ring{stroke:#b88a37;stroke-width:1.1}
.micro-scene .chapter-card{fill:#fffefa;stroke:#bda471;stroke-width:1.2}
.micro-scene .book-icon{fill:#f2e7cc;stroke:#a3864a;stroke-width:1.2}
.micro-scene .mini-line.amber{stroke:#bba06a}
.micro-scene .recall-orbit{stroke:#a9bd97;stroke-width:1.3;stroke-dasharray:3 5}
.micro-scene .recall-stop{fill:#eef4e5;stroke:#86a96f;stroke-width:1.2}
.micro-scene .recall-runner{fill:#287b51;stroke:#f9fbf4;stroke-width:2}
.tracker-tiles rect{fill:#95b781;stroke:#749963;stroke-width:.6}
.tracker-tiles[data-tracker="recall"] rect{fill:#6f9a7c}
.beam{fill:none;stroke-width:3.3;stroke-linecap:round;vector-effect:non-scaling-stroke;pointer-events:none}
.beam.green{stroke:#30996b}.beam.blue{stroke:#669dc5}.beam.amber{stroke:#d5ac5c}.beam.ink{stroke:#8aa17a}
.motion-idle.drawing .wire,.motion-idle.drawing .module,.motion-idle.drawing .label{animation-play-state:paused}
@media(min-width:1200px) and (max-width:1399px){.label.title{font-size:22px}}
@media(max-width:1199px){.label.node-caption{font-size:15px}.micro-scene .sheet{stroke-width:1.5}}
@media(prefers-reduced-motion:reduce){.beam{display:none}.micro-scene [data-draw]{stroke-dashoffset:0!important}}

/* A readable narration stays alongside the complete map; chapters seek one shared timeline. */
.process-story{margin:0 26px;padding:19px 0 0;border-bottom:1px solid #e4e8dd}
.story-chapters{display:flex;gap:7px;justify-content:space-between;max-width:990px}
.story-chapters button{appearance:none;flex:1;display:flex;align-items:center;justify-content:center;gap:10px;min-height:43px;padding:8px 12px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--muted);font:500 16px "Bricolage Grotesque",sans-serif;cursor:pointer}
.story-chapters button span{font-family:"IBM Plex Mono",monospace;font-size:15px;color:#7a887b}
.story-chapters button[aria-pressed=true]{background:#e7efe0;color:var(--ink);border-color:#d6e1ce}
.story-chapters button[aria-pressed=true] span{color:var(--green)}
.story-chapters button:hover{background:#eef2e8}.story-chapters button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.story-copy{display:grid;grid-template-columns:minmax(240px,.8fr) 1.2fr;align-items:center;gap:32px;min-height:98px;padding:18px 3px}
#story-title{font-size:24px;font-weight:500;line-height:1.25;letter-spacing:-.035em;margin:0;max-width:430px}
#story-detail{font-size:16px;line-height:1.5;color:var(--muted);margin:0;max-width:640px}
.story-progress{height:2px;background:#e5eadd;overflow:hidden}.story-progress span{display:block;height:100%;background:var(--green);transform:scaleX(0);transform-origin:left center}
.micro-scene .gap-focus{fill:#e0edf555;stroke:#326d94;stroke-width:1.6;stroke-dasharray:3 3}
.micro-scene .explanation{fill:none;stroke:#388c68;stroke-width:1.6}
.micro-scene .scan-window{fill:#accd8d22;stroke:#7b9b61;stroke-width:1.3}
.paused .box{transition:none}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:1199px){.story-copy{grid-template-columns:1fr;gap:9px;min-height:144px}.story-chapters{gap:3px}.story-chapters button{padding:7px;gap:6px}}
@media(max-width:599px){.process-story{margin:0 16px;padding-top:14px}.story-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.story-chapters button{font-size:15px;min-height:44px;gap:7px;padding:7px 2px}.story-copy{min-height:190px;align-content:center;gap:10px;padding:18px 0}#story-title{font-size:23px}#story-detail{font-size:15px;line-height:1.5}.story-progress{margin-bottom:0}}

/* Card craft: paper, practice console, news edition and a shared revision tray. */
.system{border-color:#e0e3d7;border-radius:24px;box-shadow:0 3px 5px #253e2003,0 22px 60px -38px #2f482638}
.diagram-toolbar{background:#f4f5ee80;border-bottom-color:#e5e7dc}
.controls{gap:6px}.controls button{border:1px solid #dce2d5;background:#fffef9;border-radius:22px;box-shadow:0 2px 3px #20361d05;min-width:84px}
.controls button:hover{background:#edf2e5;border-color:#a8bda0}.controls button:active{transform:translateY(1px)}
.story-chapters{max-width:none;gap:12px}
.story-chapters button{justify-content:flex-start;border:0;border-bottom:2px solid #e2e6d9;border-radius:0;padding:9px 0 12px;gap:10px;transition:border-color .2s,color .2s}
.story-chapters button span{display:grid;place-items:center;width:30px;height:30px;border:1px solid #d9e0d0;border-radius:50%;background:#f5f6ef;color:#697c64;flex:none}
.story-chapters button[aria-pressed=true]{background:transparent;border:0;border-bottom:2px solid #2a6f50;color:#164932}
.story-chapters button[aria-pressed=true] span{color:#fffdf5;background:#215b42;border-color:#215b42;box-shadow:0 0 0 4px #e5eddf}
.story-chapters button:hover{background:transparent;color:#123b2d;border-bottom-color:#91ac80}
.box.crafted{--badge-fill:#f8faf3;fill:var(--surface,var(--badge-fill));stroke:#bdc9b0;stroke-width:1;filter:drop-shadow(0 3px 2px #223a1910) drop-shadow(0 10px 10px #223a190b)}
.box.crafted.test{stroke:#2a634a;filter:drop-shadow(0 5px 4px #163c2420) drop-shadow(0 14px 16px #163c2418)}
.box.crafted.ca{stroke:#d5bd8e}.box.crafted.revision{stroke:#a9be96;stroke-width:1.2}
.box.crafted.green{--badge-fill:#e7f1df;stroke:#a3bd92}
.box.crafted.amber{--badge-fill:#fbf0d8;stroke:#d4b982}
.box.crafted.blue{--badge-fill:#edf4f8;stroke:#b1c8d7}
.box.crafted.is-active{fill:var(--surface,var(--badge-fill));stroke:#4b885d;filter:drop-shadow(0 3px 3px #23401d15) drop-shadow(0 12px 14px #35672c1a)}
.box.crafted.test.is-active{stroke:#80b274;filter:drop-shadow(0 5px 4px #163c2422) drop-shadow(0 15px 18px #164a2d2b)}
.box.crafted.ca.is-active,.box.crafted.amber.is-active{stroke:#b28d43}
.box.crafted.blue.is-active{stroke:#5990b0}
.paper-layer{fill:#e2e8d9;stroke:#b7c5ab;stroke-width:1}
.page-fold{fill:#e3e9dc;stroke:#bccbb0;stroke-width:1.1;stroke-linejoin:round}
.notebook-spine{fill:none;stroke:#d6ddcb;stroke-width:1}
.binding{fill:none;stroke:#a9b99d;stroke-width:2.5;stroke-linecap:round}
.card-light{fill:none;stroke:#ffffffb0;stroke-width:1;stroke-linecap:round}
.card-rule{fill:none;stroke:#d8dfcd;stroke-width:1}
.module-tests .card-rule{stroke:#c2dec226}.module-tests .card-light{stroke:#a2d59d50}
.test-inset{fill:#b7dba507;stroke:#badcb017;stroke-width:1}
.test-indicator{fill:#a3c39a}.test-indicator:last-child{fill:#d3eabc}
.news-edge{fill:none;stroke:#c9b88e;stroke-width:1;stroke-linecap:round}
.module-ca .card-rule{stroke:#dac9a5}
.tray-lip{fill:none;stroke:#b3c6a0;stroke-width:1.3;stroke-linecap:round}
.branch-accent{fill:none;stroke:#95b07e;stroke-width:2.5;stroke-linecap:round}
.module-guessing .branch-accent{stroke:#cfaf69}
.tracker-well{fill:#f9fbf3;stroke:#b9cba9;stroke-width:1}
.tracker-well.recall{fill:#eef4e7;stroke:#a7c095}
.tracker-tiles rect{fill:#73955f;stroke:#63884f;stroke-width:.6}
.tracker-tiles[data-tracker=recall] rect{fill:#316f4d;stroke:#215c3e}
.label.title{font-weight:600;letter-spacing:-.045em}
.label-in-tests.title{color:#fffef3;text-shadow:0 1px 1px #0c291930}
.label-in-tests.node-caption,.diagram--phone .label-in-tests.sub{color:#d6e5ca;background:transparent}
.label-in-revision.title{color:#234d34}.label-in-revision.tracker{color:#3b5e37;font-weight:500}
.label.input:not(.left){padding:5px 7px;background:#fffefb;border:1px solid #e0e5d7;border-radius:6px;box-shadow:0 2px 2px #36492804}
.label.input.left{color:#576751}
.label.source-row{padding:3px 10px;border-radius:5px;background:#eff3e8;border:1px solid #e0e7d5}
.label.caption{font-weight:500;letter-spacing:-.015em}
.label-in-confident,.label-in-guessing{font-weight:600}
.label-in-cr,.label-in-cw,.label-in-gr,.label-in-gw{font-weight:600}
.scene-tests .sheet.back{fill:#9bb28b;stroke:#abc19b}
.scene-tests .sheet{fill:#fffef6;stroke:#d9e5c9;filter:drop-shadow(0 4px 4px #051d2440)}
.scene-tests .difficulty{fill:#9abb81}.scene-tests .difficulty rect:last-child{fill:#d5eabc}
.scene-tests .result-seal{fill:#d5ecb9;stroke:#9ac278}
.scene-notes .sheet{stroke:#a9b997;fill:#fffefa}.scene-notes .sheet.back{fill:#e3ead8;stroke:#c0cfad}
.scene-ca .sheet{stroke:#cbb583;fill:#fffdf5}.scene-ca .sheet.back{fill:#dfcca0;stroke:#cfb985}
.scene-revision .sheet{stroke:#a4bb90;fill:#fcfff6}.scene-revision .sheet.back{fill:#c9dbb7;stroke:#adc794}
.micro-scene .rule{stroke-width:2.7}.micro-scene .rule.strong{stroke-width:3.5}
.wire{stroke-width:1.55}.wire.ink{stroke:#9ba58f;stroke-width:1.15}
.diagram-footer{background:#f1f4e960;border-top-color:#e0e6d5}
.legend i{height:3px;border-radius:2px}.legend .blue{height:0;border-top:2px dashed var(--blue);background:none;border-radius:0}
@media(max-width:1199px){.story-chapters{gap:9px}.story-chapters button{gap:7px}.diagram--phone .label-in-tests.sub{line-height:1.5}.diagram--phone .label-in-notes.sub{color:#536a48}.box.crafted{stroke-width:1.1}}
@media(max-width:599px){.system{border-radius:20px}.controls button{min-width:0;min-height:44px}.controls #replay{width:36px}.story-chapters{gap:8px 10px}.story-chapters button{gap:6px;padding:7px 0 10px}.story-chapters button span{width:25px;height:25px;font-size:15px}.story-chapters button[aria-pressed=true] span{box-shadow:0 0 0 3px #e5eddf}.label.input:not(.left){padding:3px 4px}}
@media(prefers-reduced-motion:reduce){.controls button:active{transform:none}}

/* Compact source list: uniform rows keep the phone rhythm clear at 320px. */
.diagram--phone .label.source-row{width:180px;max-width:60%;padding:0 8px;line-height:18px;border-color:#e2e8d9;background:#f1f4eb}
@media(max-width:359px){.diagram--phone .label-in-confident,.diagram--phone .label-in-guessing,.diagram--phone .label-in-cw,.diagram--phone .label-in-gw{font-weight:500}}
@media(min-width:1200px) and (max-width:1399px){.label.input:not(.left){padding-left:2px;padding-right:2px}}