:root{--font-sans:"Pretendard Variable",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif;--paper:#101010;--ink:#f0eee8;--muted:#b8b6af;--line:#3b3a37;--yellow:#f3e664;--green:#d1e9d0;--scroll:0;--chapter-progress:0;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #24765f;outline-offset:5px}::selection{background:#f0e56a;color:#222}h1,h2,h3,p{margin:0}h1,h2{font-weight:650;letter-spacing:-.065em;line-height:1.02}em{font-family:inherit;font-weight:700;letter-spacing:-.055em}p{line-height:1.6}img{max-width:100%;display:block}.eyebrow,.small-label,.edition,.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;display:block;line-height:1.5}.small-label{color:var(--muted);display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.skip-link{position:fixed;top:-80px;left:20px;z-index:100;padding:14px;background:white}.skip-link:focus{top:12px}.navigation{height:78px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 4.5%;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.brand{font-size:21px;letter-spacing:-.04em;font-weight:600;display:flex;align-items:center;gap:10px}.brand svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}.navigation nav{display:flex;gap:34px;align-items:center;font-size:13px}.nav-start{padding:10px 0 10px 24px;border-left:1px solid var(--line)}.nav-start span{margin-left:20px}.reading-progress{position:absolute;bottom:-1px;left:0;height:2px;width:100%;transform:scaleX(var(--scroll));transform-origin:left;background:#2e7153}.hero{padding:38px 4.5% 0;max-width:1800px;margin:auto}.hero-top{display:flex;justify-content:space-between;align-items:center}.edition{color:var(--muted);font-size:11px}.hero-copy{display:flex;align-items:flex-end;justify-content:space-between;gap:60px;padding:47px 0 48px}.hero h1{font-size:clamp(70px,7.9vw,132px)}.hero h1 span{color:#5d6454}.hero-aside{max-width:255px;padding-bottom:5px;font-size:16px}.text-link{display:inline-flex;gap:40px;margin-top:27px;font-size:13px;padding-bottom:7px;border-bottom:1px solid var(--ink)}.hero-art{height:clamp(220px,22vw,365px);position:relative;overflow:hidden;background:#d7eef0}.hero-glow{position:absolute;inset:-20%;background:radial-gradient(ellipse at 28% 38%,#ffe830 0,transparent 48%),radial-gradient(ellipse at 78% 55%,#70caff 0,transparent 52%),radial-gradient(ellipse at 95% 0%,#fff278 0,transparent 40%);filter:blur(20px)}.glass-field{position:absolute;inset:18% 7% 17% 8%;background:rgba(255,255,237,.60)}.hero-art svg{position:absolute;inset:0;width:100%;height:100%;fill:var(--ink)}.hero-paths{fill:none;stroke:#303629;stroke-width:1.2;opacity:.65}.target-ring{fill:none;stroke:#303629;stroke-width:1;opacity:.45}.art-caption{position:absolute;bottom:18px;left:24px;right:24px;display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.1em}.hero-bottom{display:flex;justify-content:space-between;padding:18px 0;color:var(--muted);font-size:11px}.hero-bottom span:last-child span{margin-left:20px}.opening{padding:125px 12% 110px;text-align:center;max-width:1480px;margin:auto}.opening h2{font-size:clamp(34px,4vw,65px);line-height:1.12;margin:28px 0}.opening>p{max-width:590px;margin:auto;color:var(--muted);font-size:16px}.story{display:grid;grid-template-columns:54% 46%;padding:0 4.5%;max-width:1800px;margin:auto;border-top:1px solid var(--line)}.chapter{min-height:95vh;display:flex;flex-direction:column;justify-content:center;padding:80px 0 80px 16%;scroll-margin-top:78px}.chapter h2{font-size:clamp(36px,4.2vw,66px);margin:24px 0 30px}.chapter>p{font-size:16px;color:var(--muted);margin-bottom:18px;max-width:430px}.example{background:#f0ecd1;padding:22px 24px;margin-top:10px;max-width:440px}.example.green{background:#e1eadb}.example blockquote{font-size:17px;line-height:1.5;margin:13px 0 0;letter-spacing:-.02em}.roles{margin:8px 0 20px}.roles>div{display:flex;justify-content:space-between;gap:20px;padding:17px 12px;border-top:1px solid var(--line);font-size:13px}.roles dt{font-weight:600}.roles dd{margin:0;color:var(--muted)}.roles .highlight{background:#ddecd9;border-color:transparent}.chapter>p.footnote{font-size:12px;line-height:1.65;margin-top:20px}.judgment{background:#e7ebdf;display:grid;grid-template-columns:1fr 1fr;gap:10%;padding:105px 9%;margin-top:70px}.judgment h2{font-size:clamp(36px,4.4vw,65px);margin:24px 0}.judgment>div>p{max-width:385px;color:var(--muted);font-size:15px}.judgment-demo{padding-top:10px;max-width:540px}.choices{display:flex;margin:18px 0 26px;border-bottom:1px solid #aebaa3}.choices button{background:none;border:none;padding:16px 20px;color:#626b5a;border-bottom:2px solid transparent;flex:1;font-size:14px}.choices button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink);background:#dce3d1}.decision{min-height:195px}.decision>p{font-size:21px;line-height:1.4;letter-spacing:-.025em;margin:9px 0 23px}.decision>p:last-child{font-size:16px;line-height:1.6}.demo-bottom{font-size:11px;padding-top:14px;border-top:1px solid #c3cbb9;color:var(--muted)}.practice{padding:120px 9%;display:grid;grid-template-columns:1fr 1fr;gap:10%;max-width:1800px;margin:auto}.section-intro h2{font-size:clamp(34px,3.7vw,56px);line-height:1.1;margin-top:25px}.steps{margin:0;padding:0;list-style:none}.steps li{display:flex;gap:25px;padding:27px 0;border-top:1px solid var(--line)}.steps li:first-child{padding-top:0;border-top:0}.step-number{font-size:11px;margin-top:5px;color:var(--muted)}.steps h3{font-size:19px;letter-spacing:-.025em;font-weight:500;margin-bottom:10px}.steps p{font-size:14px;color:var(--muted)}.document-section{display:grid;grid-template-columns:1fr 1.25fr;gap:8%;padding:0 9% 120px;max-width:1800px;margin:auto}.document-section>div:first-child{padding-top:45px}.document-section h2{font-size:clamp(40px,4.4vw,68px);margin:24px 0}.document-section p{font-size:15px;max-width:305px;color:var(--muted)}.document-note{display:block;margin-top:35px;color:#777e70;font-size:11px;line-height:1.5}.document{border:1px solid #d2d6c8;background:#fcfcf7;box-shadow:0 18px 65px -38px #626654}.document-bar{padding:20px 26px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px}.document-bar span:last-child{color:#777e70;font-size:10px}.document pre{margin:0;padding:25px 26px 35px;font:12px/1.9 var(--font-sans);white-space:pre-wrap;overflow-wrap:anywhere}.code-heading{color:#2d6146}.code-muted{color:#727869}.start{position:relative;overflow:hidden;background:#d8efe0;text-align:center;padding:100px 5% 80px}.start-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 15% 80%,#98cdb2 0,transparent 45%),radial-gradient(ellipse at 93% 15%,#98e2df 0,transparent 50%),radial-gradient(ellipse at 48% 0%,#f3f2c5 0,transparent 50%);filter:blur(30px);pointer-events:none}.start-content{position:relative;max-width:820px;margin:auto}.start h2{font-size:clamp(65px,8.5vw,125px);margin:28px 0}.start-content>p{font-size:16px;color:#4b6151}.install{display:flex;justify-content:space-between;align-items:center;gap:16px;max-width:620px;margin:35px auto 20px;background:rgba(255,255,255,.65);border:1px solid #bfcfba;padding:17px 18px}.install code{font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;text-align:left;overflow-wrap:anywhere}.copy-button{background:none;border:1px solid #bcccb6;border-radius:0;padding:7px 13px;font-size:11px}.copy-button:hover{background:#d9e6d2}.start-actions{display:flex;justify-content:center;gap:12px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:17px 23px;border:1px solid #31513a;font-size:13px}.button.primary{background:#284a34;color:white}.button.secondary{background:transparent;color:#284a34}.button:hover{filter:brightness(.94)}.start-content>p.usage{font-size:12px;max-width:570px;margin:23px auto 8px;line-height:1.6}.start-content>p.start-note{font-size:10px;color:#5c705f}.prompt-details{max-width:620px;margin:25px auto 0;text-align:left;font-size:12px}.prompt-details summary{text-align:center;cursor:pointer;text-decoration:underline;text-underline-offset:4px;list-style-position:inside}.prompt-details pre{max-height:350px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:#f5faf1;padding:22px;font:12px/1.7 ui-monospace,SFMono-Regular,monospace}.prompt-details>a{text-decoration:underline}.start-content>p.copy-status{font-size:12px;min-height:24px;margin-top:14px;color:#274e32}footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:35px 4.5%;border-top:1px solid var(--line)}footer .brand{font-size:20px}footer p{font-size:12px;color:var(--muted)}footer>div{display:flex;gap:20px;font-size:10px;color:var(--muted)}a:hover{text-decoration:underline;text-underline-offset:4px}.brand:hover{text-decoration:none}.button:hover{text-decoration:none}
@media(min-width:1600px){.chapter{min-height:850px}}
@media(max-width:1000px){.hero-copy{gap:25px}.hero-aside{max-width:220px;font-size:14px}.story{grid-template-columns:50% 50%}.chapter{padding-left:12%;min-height:90vh}.chapter h2{font-size:44px}.chapter>p{font-size:14px}.roles>div{font-size:12px;gap:8px}.judgment,.practice{padding-left:6%;padding-right:6%;gap:7%}.document-section{padding-left:6%;padding-right:6%;gap:6%}.document pre{font-size:11px}footer{flex-wrap:wrap}}
@media(max-width:700px){html{scroll-padding-top:80px}.navigation{height:66px;padding:0 6%}.brand{font-size:19px}.navigation nav{gap:0}.navigation nav>a:not(.nav-start){display:none}.nav-start{padding-left:15px;font-size:12px;border:0}.nav-start span{margin-left:10px}.hero{padding:28px 6% 0}.hero-top .edition{display:none}.hero-copy{display:block;padding:34px 0}.hero h1{font-size:clamp(44px,13vw,82px)}.hero-aside{max-width:310px;margin-top:28px;font-size:15px}.text-link{margin-top:15px;gap:55px}.hero-art{height:230px;margin-left:-6.82%;margin-right:-6.82%}.hero-art svg{width:170%;max-width:none;left:-50%;}.hero-bottom{padding:15px 0;font-size:10px;gap:15px;line-height:1.5}.hero-bottom span:last-child{max-width:110px;text-align:right}.opening{padding:85px 6% 70px;text-align:left}.opening h2{font-size:37px;margin:24px 0}.opening>p{font-size:15px}.story{display:block;padding:0 6%}.chapter{min-height:0;padding:60px 0;border-bottom:1px solid var(--line)}.chapter h2{font-size:49px;margin:20px 0 25px}.chapter h2 br{display:none}.chapter h2 br::after{content:' '}.chapter>p{max-width:none;font-size:16px}.chapter h2 em{display:block}.example{max-width:none;padding:22px}.example blockquote{font-size:17px}.roles>div{padding:18px 12px;font-size:14px}.judgment{grid-template-columns:1fr;gap:40px;padding:70px 6%;margin-top:0}.judgment h2{font-size:45px}.judgment-demo{max-width:none}.choices button{font-size:13px;padding-left:12px;padding-right:12px}.decision{min-height:185px}.practice{grid-template-columns:1fr;gap:40px;padding:75px 6%}.section-intro h2{font-size:42px}.steps li{padding:25px 0}.steps p{font-size:15px}.document-section{grid-template-columns:1fr;gap:30px;padding:0 6% 75px}.document-section>div:first-child{padding-top:0}.document-section h2{font-size:48px}.document-section p{max-width:none}.document-note{margin-top:20px}.document-bar{padding:18px}.document pre{padding:22px 18px;font-size:11px}.start{padding:75px 6% 55px}.start h2{font-size:clamp(58px,18vw,78px)}.install{padding:14px 12px;gap:12px}.install code{font-size:11px}.start-actions{flex-direction:column;gap:10px}.button{justify-content:center;gap:25px;font-size:13px}.start-content>p.usage{font-size:12px;margin-top:23px}.start-content>p.start-note{font-size:10px}footer{padding:28px 6%;gap:16px}footer>p{width:100%;order:2}footer>div{gap:15px;flex-wrap:wrap}footer>div span{display:none}}


/* SVG icons keep arrows independent of platform emoji fonts. */
.arrow-icon{display:inline-block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex-shrink:0}
.text-link,.nav-start{align-items:center}
.hero-bottom .arrow-icon{width:13px;height:13px}


/* Each chapter owns one background and its precisely registered SVG drawing. */
.story{display:block;padding:0 4.5%;border-top:0}
.chapter{display:grid;grid-template-columns:54% 46%;align-items:start;min-height:130svh;padding:0;border-top:1px solid var(--line);scroll-margin-top:94px}
.chapter-visual{position:sticky;top:110px;align-self:start;margin:42px 0 0;background:#eeeFE7;overflow:hidden}
.visual-heading{display:flex;justify-content:space-between;gap:12px;padding:22px 24px;text-transform:uppercase;font-size:10px;letter-spacing:.1em}
.motion-art{position:relative;aspect-ratio:2048/683;overflow:hidden}
.motion-art img,.motion-art svg{display:block;position:absolute;inset:0;width:100%;height:100%}
.motion-art svg{fill:none;stroke:#303c32;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}
.motion-art svg *{vector-effect:non-scaling-stroke}
.motion-art .draw{vector-effect:none;stroke-width:4}
.motion-art .draw.secondary-orbit{stroke-width:4}
.motion-art .node,.motion-art .motion-dot{fill:#253d30;stroke:none}
.motion-art .hollow{fill:#ffffff;stroke:#303c32;stroke-width:1.1}
.motion-art .target{stroke-width:.8;opacity:.65}
.motion-art .reference-line{stroke-width:.8;opacity:.5}
.motion-art .deviation{stroke-dasharray:2 3;stroke-width:.7;opacity:0}
.motion-art .secondary-orbit{stroke:#64816a;stroke-width:1}
.chapter-visual figcaption{padding:22px 24px;font-size:13px;line-height:1.5;color:var(--muted);min-height:64px}
.chapter-progress{height:2px;background:#d6dfd1}
.chapter-progress span{display:block;height:100%;background:#3c5b3b;transform:scaleX(var(--progress,0));transform-origin:left}
.chapter-body{padding:85px 0 120px 16%}
.chapter-body>p{font-size:16px;color:var(--muted);margin-bottom:18px;max-width:430px}
.chapter-body>p.footnote{font-size:12px;line-height:1.65;margin-top:20px}
@media(max-width:1000px) and (min-width:701px){.chapter{grid-template-columns:50% 50%}.chapter-body{padding-left:12%}.chapter-body>p{font-size:14px}}
@media(max-width:700px){
 .story{padding:0}
 .chapter{display:block;min-height:0;padding:0 0 40px;border-bottom:0;scroll-margin-top:66px}
 .chapter-visual{top:66px;z-index:5;margin:0;background:var(--paper);box-shadow:0 8px 16px -16px #394b38}
 .visual-heading{padding:14px 6%;font-size:9px;line-height:14px}
 .chapter-visual figcaption{padding:12px 6%;font-size:11px;min-height:0;line-height:1.45}
 .chapter-body{padding:32px 6% 52px;min-height:100svh}
 .chapter-body>p{max-width:none;font-size:16px}
 .chapter-body>p.footnote{font-size:12px}
 .chapter h2{font-size:clamp(38px,11vw,49px)}
}
@media(max-width:700px) and (max-height:500px){
 .visual-heading{padding-top:7px;padding-bottom:7px}
 .motion-art{max-width:440px;margin:auto}
 .chapter-visual figcaption{display:none}
}

/* Variable font subsets are loaded separately without blocking first paint. */

.language-switch{display:flex;gap:3px;align-items:center;padding-left:20px;border-left:1px solid var(--line);white-space:nowrap;font-family:var(--font-sans);font-size:12px}
.language-switch a{padding:7px 9px;color:var(--muted);border:1px solid transparent}
.language-switch a[aria-current='page']{color:var(--ink);border-color:#b9c2b0;background:#e7ebdf;text-decoration:none}
html[lang='ko'] body{font-family:var(--font-sans)}
html[lang='ko'] h1,html[lang='ko'] h2{letter-spacing:-.045em;line-height:1.2;word-break:keep-all;overflow-wrap:break-word}
html[lang='ko'] p,html[lang='ko'] blockquote,html[lang='ko'] h3{word-break:keep-all;overflow-wrap:break-word;line-height:1.75}
html[lang='ko'] em{font-family:inherit;font-style:normal;font-weight:600;letter-spacing:inherit}
html[lang='ko'] .eyebrow,html[lang='ko'] .small-label,html[lang='ko'] .visual-heading{letter-spacing:.03em}
html[lang='ko'] .hero h1{font-size:clamp(58px,6.4vw,110px)}
html[lang='ko'] .chapter h2{font-size:clamp(34px,3.45vw,55px)}
html[lang='ko'] .opening h2{font-size:clamp(32px,3.5vw,56px)}
html[lang='ko'] .prompt-details pre{font-family:ui-monospace,SFMono-Regular,'Pretendard Variable',monospace}
html[lang='ko'] .roles dd{text-align:right;word-break:keep-all}
html[lang='ko'] .copy-button{white-space:nowrap}
@media(max-width:1000px){.navigation nav{gap:18px}.language-switch{padding-left:12px}}
@media(max-width:700px){
 .navigation nav{gap:10px}.nav-start{padding-left:0}.nav-start span{display:none}
 .language-switch{padding-left:10px;font-size:11px}.language-switch a{padding:6px 7px}
 html[lang='ko'] .hero h1{font-size:clamp(34px,9.5vw,64px)}
 html[lang='ko'] .chapter h2{font-size:clamp(30px,8.7vw,44px)}
 html[lang='ko'] .chapter h2 br{display:initial}
 html[lang='ko'] .chapter h2 br::after{content:none}
 html[lang='ko'] .start h2{font-size:clamp(48px,13vw,72px)}
 html[lang='ko'] .judgment h2,html[lang='ko'] .document-section h2{font-size:38px}
 html[lang='ko'] .section-intro h2{font-size:36px}
 html[lang='ko'] .roles>div{font-size:12px}
}
@media(max-width:360px){.navigation .brand{font-size:17px;gap:5px}.navigation .brand svg{width:19px}.navigation nav{gap:8px}.language-switch{padding-left:8px}.language-switch a{padding:6px}.nav-start{font-size:11px}}

/* Locale-specific heading proportions with the shared variable typeface. */
.hero h1{font-size:clamp(64px,7vw,112px)}
.hero h1{font-weight:700}
.hero h1 em{font-weight:750}
.start h2{font-size:clamp(48px,6vw,84px);line-height:1.08}
html[lang='ko'] h1,html[lang='ko'] h2{font-weight:650;letter-spacing:-.055em;line-height:1.27}
html[lang='ko'] h1 em,html[lang='ko'] h2 em{font-family:inherit;font-weight:700;font-style:normal;letter-spacing:-.065em;line-height:1.34;font-synthesis:none}
html[lang='ko'] .hero h1{font-size:clamp(56px,6.2vw,104px)}
html[lang='ko'] .hero h1 span{display:inline-block;margin-top:.04em}
html[lang='ko'] .chapter h2{font-size:clamp(33px,3.4vw,54px)}
html[lang='ko'] .start h2{font-size:clamp(48px,6vw,80px)}
@media(max-width:700px){
 .hero h1{font-size:clamp(40px,11.2vw,72px);line-height:1.08}
 .start h2{font-size:clamp(39px,10.5vw,64px)}
 html[lang='ko'] .hero h1{font-size:clamp(31px,8.4vw,56px);line-height:1.35}
 html[lang='ko'] .chapter h2{font-size:clamp(29px,8vw,43px)}
 html[lang='ko'] .opening h2{font-size:clamp(29px,8vw,40px)}
 html[lang='ko'] .judgment h2,html[lang='ko'] .document-section h2{font-size:clamp(30px,8.4vw,42px)}
 html[lang='ko'] .section-intro h2{font-size:clamp(30px,8.4vw,42px)}
 html[lang='ko'] .start h2{font-size:clamp(36px,10vw,52px)}
}

/* Shared wrapping rules for both languages, including controls and small labels. */
*,*::before,*::after{word-break:keep-all;text-wrap:balance}
body{overflow-wrap:anywhere}

/* Native page scrolling, with a pinned introduction and damped SVG progress. */
.hero-scroll{--hero-height:clamp(220px,22vw,365px)}
.scroll-motion-ready .hero-scroll{height:calc(var(--hero-height) + 64px + 32svh)}
.scroll-motion-ready .hero-sticky{position:sticky;top:calc(78px + 24px)}
.hero-outcome,.hero-guides{fill:none;stroke:#303629;stroke-width:1.2}
.hero-guides{opacity:.14}
.hero-dot{fill:#303629}
@media(max-width:700px){
 .hero-scroll{--hero-height:min(280px,52svh)}
 .scroll-motion-ready .hero-sticky{top:82px}
 .hero-art{height:var(--hero-height)}
 .hero-art svg{width:100%;left:0}
 .art-caption{left:18px;right:18px;font-size:9px;gap:24px}
}


.hero-art circle{transform-box:fill-box;transform-origin:center;transform:scaleX(var(--hero-circle-scale,1))}
.hero-art .target-ring{vector-effect:non-scaling-stroke}
.hero-art svg{height:calc(100% - 48px)}

/* Bring the explanation close to the shorter introduction. */
.opening{padding-top:48px;padding-bottom:72px}
@media(max-width:700px){
 .scroll-motion-ready .hero-scroll{height:calc(var(--hero-height) + 64px + 24svh)}
 .opening{padding-top:28px;padding-bottom:48px}
}


/* Short in-flow illustrations: no extra pinning distance or empty scroll tracks. */
.inline-art{margin-top:28px;width:100%;isolation:isolate}
.opening .inline-art{max-width:780px;margin:30px auto 0;text-align:left}
.inline-art .draw{stroke-width:5}
.inline-art .target{stroke-width:1;opacity:.65}
.inline-art .choice-route{opacity:.2;transition:opacity .25s ease}
[data-selected-priority="simplicity"] .choice-simplicity,
[data-selected-priority="speed"] .choice-speed{opacity:1}
@media(max-width:700px){
 .inline-art{margin-top:22px}
 .opening .inline-art{margin-top:24px}
}


.hero-aside .hero-context{margin-top:14px;font-size:12px;line-height:1.6;color:var(--muted)}

/* Repository support stays visible at the opening and after the installation guide. */
.github-icon{width:20px;height:20px;fill:currentColor;stroke:none;flex-shrink:0}
.navigation .nav-star{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:50%}
.navigation .nav-star:hover{background:var(--selected);text-decoration:none}
.hero-star{margin-bottom:22px;gap:12px;justify-content:center;max-width:100%;font-weight:650}
footer{flex-wrap:wrap}
footer>.footer-star{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 0 30px;margin-bottom:5px;border-bottom:1px solid var(--line);color:var(--ink)}
.footer-star p{font-size:clamp(20px,2.2vw,30px);color:var(--ink);letter-spacing:-.025em}
.footer-star .button{gap:12px;flex-shrink:0}
@media(max-width:700px){.navigation nav>a.nav-star{display:grid}.footer-star .button span{display:inline}.hero-star{margin-bottom:20px}footer>.footer-star{align-items:flex-start;flex-direction:column;gap:18px}.footer-star p{font-size:22px}.footer-star .button{max-width:100%}}

/* Desktop introduction: visible contents and artwork before the first scroll.
   Use natural content height so enlarged text can still flow without clipping. */
@media(min-width:1000px){
 .hero{padding-top:clamp(20px,3svh,38px)}
 .hero-copy{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(240px,1fr);align-items:center;gap:clamp(28px,4vw,60px);padding:clamp(20px,3svh,40px) 0}
 .hero h1{font-size:clamp(48px,min(6vw,9svh),104px)}
 html[lang='ko'] .hero h1{font-size:clamp(44px,min(5.3vw,8svh),88px)}
 .hero-aside{max-width:360px;width:100%;justify-self:end;padding-bottom:0;font-size:clamp(14px,1.1vw,16px)}
 .hero-aside p{line-height:1.55}
 .hero-aside .hero-context{margin-top:12px}
 .hero-aside .text-link{margin-top:16px}
 .hero-star{margin-bottom:16px;padding:14px 20px}
 .hero-scroll{--hero-height:clamp(150px,22svh,240px)}
 .hero-art{height:var(--hero-height)}
 .hero-bottom{padding:14px 0}
 .opening{padding-top:24px}
}

/* The short desktop pin ends before the following explanation feels detached. */
@media(min-width:1000px){
 .scroll-motion-ready .hero-scroll{height:calc(var(--hero-height) + 44px + clamp(48px,8svh,80px))}
}

/* One pinned row keeps the explanation beside its illustration on desktop.
   Mobile keeps the existing image-and-flowing-copy layout. */
.chapter-stage{display:contents}
@media(min-width:1000px){
 .chapter{display:block}
 .chapter-stage{display:grid;grid-template-columns:54% 46%;align-items:center;position:sticky;top:var(--stage-top,110px);margin-top:42px}
 .chapter-stage .chapter-visual{position:relative;top:auto;margin:0;align-self:center}
 .chapter-stage .chapter-body{padding:0 0 24px 16%}
 .chapter-body>p:not(.footnote),.chapter-body>.example,.chapter-body>.roles{position:relative}
 .chapter-body>[data-reading]::before{content:'';position:absolute;left:-16px;top:0;bottom:0;width:2px;background:var(--ink);opacity:0;transform:scaleY(.25);transform-origin:top;transition:opacity .2s,transform .2s}
 .chapter-body>[data-reading='current']::before{opacity:.65;transform:scaleY(1)}
 .chapter-body>p[data-reading='current']{color:var(--ink)}
}

/* Leave enough room for the complete reading panel on laptop screens. */
@media(min-width:1000px) and (max-height:800px){
 .chapter .chapter-stage .chapter-body h2{font-size:clamp(30px,5.3svh,42px);margin:18px 0 20px}
 .chapter-stage .chapter-body>p{font-size:14px;line-height:1.5;margin-bottom:14px}
 .chapter-stage .chapter-body>p.footnote{font-size:11px;line-height:1.5;margin-top:14px}
 .chapter-stage .example{padding:15px 18px}
 .chapter-stage .example blockquote{font-size:15px;margin-top:8px}
 .chapter-stage .roles>div{padding:13px 10px}
}

/* Benchmark values stay readable even before scroll animation or without JS. */
.benchmark{padding:72px 4.5%;max-width:1800px;margin:auto;display:grid;grid-template-columns:1fr 1.2fr;gap:36px 7%;border-top:1px solid var(--line);scroll-margin-top:100px}
.benchmark h2{font-size:clamp(34px,4.4vw,64px);margin:24px 0;line-height:1.1}
.benchmark-copy>p{font-size:15px;color:var(--muted);max-width:440px}
.benchmark-copy>.benchmark-outcome{font-size:13px;margin-top:18px;color:var(--ink)}
.benchmark-chart{--chart-baseline:#b9b9b2;--chart-aligned:#ffac70;--chart-paper-opacity:.12;margin:0;align-self:center;min-width:0;border:1px solid var(--line);padding:24px;background:var(--surface-raised)}
.benchmark-chart figcaption{font-size:18px;letter-spacing:-.03em}
.benchmark-legend{display:grid;gap:10px;margin:18px 0;font-size:12px;color:var(--muted)}
.benchmark-legend span{display:flex;align-items:center;gap:10px}
.benchmark-legend span::before{content:'';width:22px;flex-shrink:0;border-top:3px solid var(--ink)}
.benchmark-legend .baseline-key{color:var(--chart-baseline)}
.benchmark-legend .aligned-key{color:var(--chart-aligned)}
.benchmark-legend .baseline-key::before{border-color:currentColor;border-top-style:dashed}
.benchmark-legend .aligned-key::before{border-color:currentColor}
.benchmark-plot{position:relative;isolation:isolate;aspect-ratio:2/1;margin:0 -12px;background:var(--surface-raised)}
.benchmark-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:var(--chart-paper-opacity);pointer-events:none}
.benchmark-chart svg{position:relative;display:block;width:100%;height:auto;overflow:visible}
.benchmark-grid{fill:none;stroke:var(--line);stroke-width:1}
.benchmark-axis{fill:var(--muted);font:14px var(--font-sans)}
.benchmark-chart .draw{fill:none;stroke-width:3;stroke-linecap:round}
.benchmark-baseline{fill:none;stroke:var(--chart-baseline);stroke-width:3;stroke-dasharray:8 7;stroke-linecap:round}
.benchmark-chart .benchmark-reveal{stroke:#fff;stroke-width:14}
.benchmark-chart .benchmark-aligned{stroke:var(--chart-aligned);stroke-width:4}
.benchmark-points{text-anchor:middle;font:500 18px var(--font-sans)}
.baseline-points{fill:var(--chart-baseline)}.aligned-points{fill:var(--chart-aligned)}
.benchmark-tasks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center;font-size:11px;margin-top:4px}
.benchmark-unit{margin-top:20px;font-size:11px;color:var(--muted)}


/* Clip a normal block wrapper, since table captions can paint outside a clipped table. */
.benchmark-data{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:700px){.benchmark{grid-template-columns:1fr;padding:48px 6%;gap:28px}.benchmark h2{font-size:36px}.benchmark-chart{padding:18px 14px}.benchmark-legend{font-size:11px}}


/* The explanation and benchmark share one scroll position with their artwork. */
.focus-track,.focus-stage{display:contents}
.focus-copy{display:block}
.focus-copy>[data-reading]{position:relative}
.focus-copy>[data-reading]::before{content:'';position:absolute;left:-16px;top:0;bottom:0;width:2px;background:var(--ink);opacity:0;transform:scaleY(.25);transform-origin:top;transition:opacity .2s,transform .2s}
.focus-copy>[data-reading='current']::before{opacity:.65;transform:scaleY(1)}
.opening .focus-copy>p{max-width:590px;margin:auto;color:var(--muted);font-size:16px}
.focus-copy>p[data-reading='current']{color:var(--ink)}
@media(min-width:1000px){
 .scroll-motion-ready .focus-track{display:block;height:var(--focus-height,auto)}
 .scroll-motion-ready .focus-stage{display:block;position:sticky;top:var(--stage-top,110px)}
 .benchmark{display:block}
 .benchmark .focus-stage{display:grid;grid-template-columns:1fr 1.2fr;gap:7%;align-items:center}
 .benchmark .focus-copy{display:block;min-width:0}

}
@media(max-width:700px){.opening .focus-copy>p{font-size:15px}.focus-copy>[data-reading]::before{left:-10px}}


.benchmark-direction{font-size:12px;color:var(--muted);margin-top:8px}
@media(forced-colors:active){.benchmark-chart{--chart-baseline:CanvasText;--chart-aligned:CanvasText}}

/* The same resolved preference controls both layout and SVG animation.
   Keep reading emphasis visible in static mode, without animated transitions. */
html[data-motion="off"]{scroll-behavior:auto}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important}
html[data-motion="off"] .hero-scroll,html[data-motion="off"] .focus-track{height:auto}
html[data-motion="off"] .hero-sticky,html[data-motion="off"] .focus-stage{position:relative;top:auto}
html[data-motion="off"] .hero-dot,html[data-motion="off"] .motion-dot,html[data-motion="off"] .traveler{display:none}
html[data-motion="off"] [data-reading]::before{transform:none}
@media(min-width:1000px){
 html[data-motion="off"] .chapter-stage{position:relative;top:auto}
 html[data-motion="off"] .chapter{min-height:0;padding-bottom:48px}
}
@media(prefers-reduced-motion:reduce){
 html:not([data-motion]){scroll-behavior:auto}
 html:not([data-motion]) *,html:not([data-motion]) *::before,html:not([data-motion]) *::after{animation:none!important;transition:none!important}
}

/* Weight contrast keeps headings and actions distinct from reading text. */
html[lang] .hero h1{font-weight:700}
html[lang] .hero h1 em{font-weight:750}
.brand{font-weight:750}
.steps h3,.button,.copy-button,.text-link{font-weight:650}
.eyebrow,.small-label,.visual-heading,.roles dt{font-weight:600}

/* Document examples use the locale typeface, including the nested code element. */
.document pre code{font:inherit}

/* The opening uses the same bounded, centered reading stage as later chapters. */
.hero-track,.hero-stage{display:contents}
@media(min-width:1000px){
 .hero,.opening,.benchmark{max-width:1440px;padding-left:4.5%;padding-right:4.5%}
 .hero{padding-top:0}
 .hero-track{display:block;padding-top:var(--hero-lead,0px)}
 .scroll-motion-ready .hero-track{height:var(--hero-track-height,auto)}
 .hero-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px clamp(28px,4vw,64px);align-items:center}
 .scroll-motion-ready .hero-stage{position:sticky;top:var(--stage-top,110px)}
 .hero-top{grid-column:1/-1;grid-row:1;gap:24px}
 .hero-copy{grid-column:2;grid-row:2;display:block;padding:0;min-width:0}
 html[lang] .hero h1{font-size:clamp(36px,min(4vw,6svh),64px);line-height:1.14}
 html[lang='ko'] .hero h1{line-height:1.28}
 .hero-aside{max-width:480px;margin-top:24px;font-size:15px;justify-self:start}
 .hero-star{margin-bottom:18px}
 .hero-scroll{grid-column:1;grid-row:2;min-width:0}
 .scroll-motion-ready .hero-stage .hero-scroll{height:auto}
 .scroll-motion-ready .hero-stage .hero-sticky{position:relative;top:auto}
 .hero-art{width:100%;max-width:760px;height:auto;aspect-ratio:3/1;margin-inline:auto}
 .hero-bottom{gap:20px;line-height:1.5}
 .hero-copy h1,.hero-aside>p{position:relative}
 .opening{padding-top:48px;text-align:left}
 .opening .focus-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
 .opening .focus-copy{grid-column:2;grid-row:1;min-width:0}
 .opening .inline-art{grid-column:1;grid-row:1;max-width:760px;margin:0}
 .opening .focus-copy>p{max-width:none}
 .opening h2{font-size:clamp(32px,3.5vw,56px)}
 .benchmark .focus-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px)}
 html[data-motion="off"] .hero-track{height:auto;padding-top:24px}
 html[data-motion="off"] .hero-stage{position:relative;top:auto}
}

/* Expand the reading canvas on large displays without stretching the artwork.
   Height participates in type sizing so short ultrawide screens stay readable. */
@media(min-width:1600px){
 :root{--wide-copy:clamp(16px,min(1.12vw,1.8svh),28px);--wide-small:clamp(12px,min(.8vw,1.3svh),19px)}
 .hero,.opening,.benchmark,.story,.practice,.document-section{max-width:min(3200px,calc(180svh + 640px));padding-left:4.5%;padding-right:4.5%}
 .hero-art,.opening .inline-art{max-width:none}
 .hero-stage,.opening .focus-stage,.benchmark .focus-stage{column-gap:clamp(64px,4vw,144px)}
 html[lang] .hero h1{font-size:clamp(64px,min(3.5vw,6.2svh),128px)}
 html[lang] .opening h2,html[lang] .benchmark h2,html[lang] .chapter h2,html[lang] .section-intro h2,html[lang] .document-section h2{font-size:clamp(54px,min(3.2vw,5.8svh),108px)}
 .hero-aside{font-size:var(--wide-copy);max-width:30em;margin-top:1.25em}
 .hero-aside .hero-context{font-size:var(--wide-small)}
 .opening .focus-copy>p,.benchmark-copy>p,.chapter-body>p,.steps p,.document-section p{font-size:var(--wide-copy);max-width:32em}
 .chapter-body>p.footnote,.benchmark-copy>.benchmark-outcome{font-size:var(--wide-small)}
 .chapter-stage .chapter-body{padding-left:12%}
 .eyebrow,.small-label,.edition,.hero-bottom,.art-caption,.visual-heading,.document-bar,.document-note,.text-link,.button,.benchmark-legend,.benchmark-direction,.benchmark-unit,.benchmark-tasks{font-size:var(--wide-small)}
 .chapter-visual figcaption,.roles>div,.benchmark-chart figcaption{font-size:var(--wide-copy)}
 .example{max-width:32em;padding:1.25em 1.5em;font-size:var(--wide-copy)}
 .example blockquote,.steps h3{font-size:clamp(19px,min(1.25vw,2svh),32px)}
 .motion-art{max-height:58svh}
 .document pre{font-size:clamp(13px,min(.95vw,1.5svh),23px)}
 .document-section p{max-width:28em}
 .benchmark-chart{padding:clamp(24px,1.3vw,44px)}
 .start-content{max-width:clamp(820px,54vw,1600px)}
 html[lang] .start h2{font-size:clamp(80px,min(5vw,8svh),160px)}
 .start-content>p{font-size:var(--wide-copy)}
 .start-content>p.usage,.start-content>p.start-note,.prompt-details{font-size:var(--wide-small)}
 .install,.prompt-details{max-width:80%}
 .install code{font-size:var(--wide-copy)}
}
@media(min-width:1600px){
 .navigation{height:clamp(78px,3vw,120px)}
 .navigation .brand{font-size:clamp(21px,.9vw,32px)}
 .navigation nav{font-size:clamp(13px,.65vw,22px)}
 .navigation .nav-star,.navigation .language-trigger{width:clamp(44px,1.7vw,64px);height:clamp(44px,1.7vw,64px)}
}

/* Keep the history review and realignment pitch readable as separate thoughts. */
.hero-aside .hero-realign{margin-top:1em}

/* Faint letterforms reserve their original layout; scrolling paints whole graphemes. */
::highlight(align-untyped){color:rgb(239 237 229 / .10);text-shadow:none}
::highlight(align-type-edge){color:#fffdf5;text-shadow:0 0 9px rgb(255 253 245 / .22)}
@media print,(forced-colors:active){
 ::highlight(align-untyped),::highlight(align-type-edge){color:currentColor;text-shadow:none}
}

/* The final team chapter shares the text/art scroll stage with earlier sections. */
.team{padding:72px 4.5%;max-width:1440px;margin:auto;border-top:1px solid var(--line);scroll-margin-top:100px}
.team .eyebrow{margin-bottom:22px}
.team h2{font-size:clamp(32px,3.3vw,52px);line-height:1.16}
.team .focus-copy>p{font-size:16px;color:var(--muted);margin-top:24px;max-width:36em}
.team .focus-copy>.team-note{font-size:13px}
.team-visual{margin:40px 0 0;min-width:0}
.team .inline-art{max-width:none;margin:0}
.art-team .team-plate{fill:#eee9d9;fill-opacity:.86;stroke:#393a35;stroke-width:1}
.art-team .team-row{stroke:#51534b;stroke-width:2;opacity:.5}
.art-team .draw{stroke:#8d3c17;stroke-width:6}
.art-team .node,.art-team .motion-dot{fill:#8d3c17}
.team-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;text-align:center;font-size:13px;font-weight:650;line-height:1.5}
.team-art-note{text-align:center;color:var(--muted);font-size:12px;margin-top:20px}
@media(min-width:1000px){
 .team .focus-track{display:block}
 .scroll-motion-ready .team .focus-track{height:var(--focus-height,auto)}
 .team .focus-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,4vw,64px);align-items:center}
 .scroll-motion-ready .team .focus-stage{position:sticky;top:var(--stage-top,110px)}
 .team-visual{margin:0}
 .team .focus-copy{min-width:0}
}
@media(min-width:1600px){
 .team{max-width:min(3200px,calc(180svh + 640px))}
 .team h2{font-size:clamp(54px,min(3.2vw,5.8svh),108px)}
 .team .focus-copy>p{font-size:var(--wide-copy)}
 .team .focus-copy>.team-note,.team-flow,.team-art-note{font-size:var(--wide-small)}
}
@media(max-width:599px){.team{padding:52px 6%}.team h2{font-size:34px}.team-flow{gap:8px;font-size:12px}}

.team-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.5rem}
.team-copy{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.55rem .85rem;border:1px solid #ffffff40;border-radius:.4rem;background:#ffffff08;color:inherit;font:inherit;font-size:.9rem;cursor:pointer}
.team-copy svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:1.5}
.team-copy:hover{background:#ffffff15}.team-copy:focus-visible{outline:2px solid #ffad70;outline-offset:4px}
.focus-copy .team-copy-status{min-height:1.5em;margin-top:.65rem;font-size:.82rem;color:#c4c4c4}