/* R9 portrait illustrations: all controls and text remain real, accessible UI. */
.craft-r9{background:var(--paper);padding-top:85px;padding-bottom:85px}
.craft-r9.reconnect-feature{border-top:1px solid var(--line)}
.craft-r9 .section-top{margin-bottom:38px}
.craft-r9 .craft-intro{font-size:clamp(18px,1.5vw,23px);margin:18px 0 0;color:var(--muted);line-height:1.8}
.craft-r9 .showcase{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(290px,1fr);gap:48px;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;align-items:center}
.craft-r9 .showcase-canvas{padding:22px 22px 16px;background:#f6f3eb;border:1px solid #a1ab935c;border-radius:10px;overflow:hidden;isolation:isolate}
.craft-r9 .craft-painting{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;z-index:-1;pointer-events:none;mask-image:none}
.craft-r9 .showcase-canvas:after{display:none}
.craft-r9 .canvas-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:0;background:none;position:relative}
.craft-r9 .canvas-caption h3{font-size:21px;margin:0;line-height:1.5;letter-spacing:.03em}
.craft-r9 .demo-tools{display:flex;gap:5px;align-items:center;flex-shrink:0}
.craft-r9 .demo-tool{display:inline-flex;align-items:center;justify-content:center;min-height:44px;gap:6px;padding:6px 9px;font-size:14px;color:#54604f;border-radius:3px}
.craft-r9 .demo-tool svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5}
.craft-r9 .demo-tool:hover{background:#e3e6d967}
.craft-r9 .demo-tool:focus-visible,.craft-r9 [data-direction]:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.craft-r9 .graph-scene{width:100%;height:auto;min-height:0;max-height:none;overflow:visible}
.craft-r9 .scene-node rect{fill:#faf7eee8;stroke:#a0aa94;stroke-width:1.2;rx:8}
.craft-r9 .scene-node text{font-size:23px;fill:var(--ink);stroke:none}
.craft-r9 .scene-node .node-sub{font-size:14px;fill:#596450}
.craft-r9 .portrait{overflow:hidden}
.craft-r9 .portrait-rule{stroke:#adad9740;stroke-width:1;fill:none}
.craft-r9 .root-node rect{stroke:#aa6e4d;stroke-width:1.8;fill:#fff9ed}
.craft-r9 .root-node .node-sub{fill:#935c3d}
.craft-r9 .created-node{opacity:1;transition:none}
.craft-r9 .demo-ready .created-node .portrait{opacity:.24;transition:opacity .45s ease}
.craft-r9 .demo-ready .created-node.is-created .portrait{opacity:1}
.craft-r9 .created-node.is-created rect,.craft-r9 .is-connected rect{stroke:#7c916c;fill:#f4f6eb}
.craft-r9 .add-edges path{stroke:#8b977e;stroke-width:2;stroke-dasharray:4 4;marker-end:url(#demo-arrow);fill:none}
.craft-r9 .add-edges path.is-created{stroke-dasharray:none;stroke:#77896a}
.craft-r9 .direction-words text{font-family:var(--serif);font-size:23px;fill:#996949;stroke:none}
.craft-r9 .scene-connect{fill:none;stroke:#829271;stroke-width:2}
.craft-r9 .branch-outline{fill:#d6ddc326;stroke:#91a17d;stroke-width:1.3;stroke-dasharray:6 5}
.craft-r9 .move-hint{fill:none;stroke:#ab755b70;stroke-width:2;stroke-dasharray:4 4}
.craft-r9 .mouse-indicator text{font-size:17px}
.craft-r9 .mouse-indicator>.left-mouse-fill,.craft-r9 .mouse-indicator>.right-mouse-fill{fill:#ad745a;opacity:.45}
.craft-r9 .is-holding .mouse-indicator>.left-mouse-fill,.craft-r9 .is-holding .mouse-indicator>.right-mouse-fill{opacity:1}
.craft-r9 .cursor-halo{fill:#b7835320;stroke:#a4765260}
.craft-r9 .gesture-cursor{opacity:.55}
.craft-r9 .is-holding .gesture-cursor{opacity:1}
.craft-r9 .is-complete .gesture-cursor{opacity:0}
.craft-r9 .direction-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:12px 0 0;max-width:none}
.craft-r9 .direction-controls button{justify-content:center;padding:6px 3px;border:1px solid #a5b09555;background:#f7f5ecaa;min-height:44px;font-size:16px;gap:5px;border-radius:3px}
.craft-r9 .direction-controls button:hover,.craft-r9 .direction-controls button[aria-pressed=true]{background:#e7ebde;border-color:#a0ad93}
.craft-r9 .canvas-note{font-size:13px;text-align:center;color:#78816e;margin:10px 0 0}
.craft-r9 .branch-assurance{font-size:17px;text-align:center;margin:17px 0;color:#626e59;line-height:1.7}
.craft-r9 .showcase-story{display:flex;padding:8px 0;border:0;align-items:stretch;justify-content:center}
.craft-r9 .showcase-story .eyebrow{font-size:14px;margin:0 0 12px}
.craft-r9 .showcase-story h3{font-size:clamp(26px,2.25vw,36px);margin:0 0 26px}
.craft-r9 .operation-steps{list-style:none;margin:0;padding:0;counter-reset:operation}
.craft-r9 .operation-steps li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;margin:0 0 24px;color:var(--ink);counter-increment:operation}
.craft-r9 .step-number{display:grid;place-items:center;width:36px;height:36px;background:#89917b;color:#fffdf5;border-radius:50%;font-family:var(--serif);font-size:23px;transition:background .3s}
.craft-r9 .step-number:before{content:counter(operation)}
.craft-r9 .operation-steps h4{font-size:21px;font-family:var(--serif);font-weight:600;line-height:1.5;margin:0 0 5px}
.craft-r9 .operation-steps p{font-size:17px;line-height:1.85;margin:0;color:#68705e}
.craft-r9 .operation-steps .is-current .step-number{background:#a46e50}
.craft-r9 .operation-steps .is-current h4{color:#956343}
.craft-r9 .showcase-story .demo-status{font-size:15px!important;min-height:52px;margin:0;color:#976b4c;line-height:1.7}
.craft-r9 .demo-progress{height:2px;margin:2px 0 24px}
.craft-r9 .demo-lesson{display:flex;justify-content:center;min-height:54px;padding:12px 20px;background:#a46e50;color:#fffdf6;border:1px solid #a46e50;font-size:19px;border-radius:4px;gap:14px}
.craft-r9 .demo-lesson:hover{background:#915b40}
.craft-r9 .showcase-story .lesson-hint{font-size:14px;text-align:center;margin:10px 0 0;color:#7c826f}
.craft-r9 .section-footnote{margin:26px 0 0}
@media(max-width:1200px){.craft-r9 .showcase{gap:30px;grid-template-columns:minmax(0,1.65fr) minmax(270px,1fr)}.craft-r9 .showcase-canvas{padding:15px 12px}.craft-r9 .operation-steps li{gap:12px;margin-bottom:20px}.craft-r9 .operation-steps h4{font-size:20px}.craft-r9 .canvas-caption h3{font-size:18px}.craft-r9 .demo-tool{padding:5px;font-size:13px;gap:4px}}
@media(max-width:980px){.craft-r9 .showcase{grid-template-columns:minmax(0,1fr);gap:34px}.craft-r9 .showcase-canvas{max-width:740px;width:100%;justify-self:center;padding:20px}.craft-r9 .showcase-story{max-width:740px;width:100%;justify-self:center;padding:0}.craft-r9 .operation-steps{display:grid;grid-template-columns:1fr 1fr;gap:8px 30px}.craft-r9 .demo-lesson{align-self:flex-start;min-width:270px}.craft-r9 .showcase-story .lesson-hint{align-self:flex-start;min-width:270px}.craft-r9 .showcase-story .demo-status{min-height:30px}.craft-r9 .graph-scene{max-height:none}}
@media(max-width:700px){.craft-r9{padding-top:52px;padding-bottom:52px}.craft-r9 .section-top{margin-bottom:24px}.craft-r9 h2{font-size:clamp(28px,6.5vw,38px)}.craft-r9 .craft-intro{font-size:17px;line-height:1.8;margin-top:14px}.craft-r9 .showcase-canvas{padding:14px 8px;border-radius:6px}.craft-r9 .canvas-caption{flex-wrap:wrap;gap:2px;margin:0 3px 8px}.craft-r9 .canvas-caption h3{font-size:18px}.craft-r9 .demo-tool{font-size:13px;min-height:44px}.craft-r9 .scene-node text{font-size:27px}.craft-r9 .scene-node .node-sub{font-size:16px}.craft-r9 .direction-controls{grid-template-columns:1fr 1fr;gap:8px}.craft-r9 .direction-controls button{font-size:16px}.craft-r9 .operation-steps{display:block}.craft-r9 .operation-steps li{margin-bottom:24px;grid-template-columns:34px minmax(0,1fr);gap:14px}.craft-r9 .step-number{width:32px;height:32px;font-size:21px}.craft-r9 .operation-steps h4{font-size:21px}.craft-r9 .operation-steps p{font-size:17px}.craft-r9 .showcase-story h3{font-size:29px;margin-bottom:23px}.craft-r9 .demo-lesson,.craft-r9 .showcase-story .lesson-hint{align-self:stretch;min-width:0}.craft-r9 .branch-assurance{font-size:16px;margin-top:12px}.craft-r9 .canvas-note{font-size:12px}.craft-r9 .craft-painting{opacity:.4}}
@media(prefers-reduced-motion:reduce){.craft-r9 .portrait,.craft-r9 .step-number{transition:none}}
/* On small displays the four readable direction buttons carry the detailed labels. */
@media(max-width:700px){.craft-r9 .scene-node .node-sub{display:none}.craft-r9 .scene-node>text:not(.node-sub){font-size:34px;transform:translateY(6px)}.craft-r9 .direction-words text{font-size:30px}.craft-r9 .mouse-indicator text{font-size:26px}}
@media(forced-colors:active){.craft-r9 .craft-painting,.craft-r9 .portrait{display:none}.craft-r9 .scene-node rect{fill:Canvas;stroke:CanvasText}.craft-r9 .scene-node text,.craft-r9 .scene-node .node-sub,.craft-r9 .direction-words text{fill:CanvasText}.craft-r9 .demo-lesson,.craft-r9 .step-number{background:ButtonFace;color:ButtonText;border:1px solid ButtonText}}
@media print{.craft-r9 .demo-tools,.craft-r9 .direction-controls,.craft-r9 .gesture-cursor{display:none}.craft-r9 .demo-ready .created-node .portrait{opacity:1}.craft-r9 .showcase{break-inside:avoid}}