@font-face{font-family:Nunito;src:url("assets/fonts/Nunito-Variable.ttf") format("truetype");font-style:normal;font-weight:200 1000;font-display:swap}
:root{--bg:#fcfbff;--ink:#25262b;--muted:#62646b;--line:#c9ced0;--lime:#c8f14d;--purple:#d9d2ff;--primary-purple:#c669ff;--green:#d9e9d2;--yellow:#ffe08a;--pink:#f3dce2;--card-pink:#ffb4a2;--white:#fff;--sans:'Nunito',Inter,'PingFang SC','Microsoft YaHei',sans-serif;--serif:'Nunito',Georgia,'Songti SC','Noto Serif SC',serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #627d15;outline-offset:4px}.wrap{width:min(1380px,calc(100% - 112px));margin:auto}.nav{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-weight:700;font-size:20px;letter-spacing:-.04em}.brand span{font-weight:400;color:var(--muted);font-size:12px;margin-left:12px;letter-spacing:0}.navlinks{display:flex;gap:38px;font-size:13px;font-weight:600}.navlinks a:hover{color:#658018}.hero{min-height:680px;display:flex;flex-direction:column;justify-content:center;padding:95px 0 110px}.eyebrow,.small-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700}.eyebrow{display:flex;align-items:center;gap:10px}.dot{width:8px;height:8px;background:var(--lime);border-radius:50%}.hero h1{font-family:var(--serif);font-weight:500;letter-spacing:-.065em;font-size:clamp(56px,7.8vw,120px);line-height:1.13;max-width:1100px;margin:32px 0}.hero-highlight{display:inline-block;background:var(--lime);border-radius:.17em;padding:0 .12em;line-height:1.08;letter-spacing:-.065em}.hero-bottom{display:flex;justify-content:space-between;align-items:end;gap:30px}.hero p{font-size:17px;line-height:1.9;color:var(--muted);max-width:520px;margin:0}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;border:0;background:var(--lime);border-radius:999px;padding:7px 8px 7px 23px;font-weight:700;font-size:14px;transition:background .2s,transform .2s}.button:hover{background:#b2df33;transform:translateY(-2px)}.button-arrow{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#101110;color:var(--lime);font-size:17px;transition:transform .25s}.button:hover .button-arrow,.button:focus-visible .button-arrow{transform:rotate(45deg)}.section{padding:90px 0 110px;border-top:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:38px}.section-head h2,.about h2{font-family:var(--serif);font-size:clamp(38px,5vw,66px);font-weight:500;letter-spacing:-.05em;margin:12px 0 0}.section-head p{color:var(--muted);font-size:14px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.card{display:block;border-radius:25px;padding:22px;transition:transform .25s,box-shadow .25s}.card:hover{transform:translateY(-5px);box-shadow:0 15px 35px #25262b15}.card:first-child{grid-column:1/-1}.purple{background:var(--purple)}.green{background:var(--green)}.pink{background:var(--card-pink)}.yellow{background:var(--yellow)}.cover{border-radius:15px;background:#f4f2fa;height:290px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}.card:first-child .cover{height:430px;background:#c9bde9}.cover-inner{text-align:center;color:#59526e}.cover-inner .number{font-family:var(--serif);font-size:clamp(80px,14vw,180px);line-height:1;opacity:.38}.cover-inner p{font-size:12px;letter-spacing:.14em;margin:15px 0}.green .cover{background:#c7ddc1}.yellow .cover{background:#e8dcaa}.cover-corner{position:absolute;top:22px;left:24px;font-size:10px;font-weight:700;letter-spacing:.12em}.card-content{padding:22px 2px 9px}.tags{display:flex;flex-wrap:wrap;gap:8px}.tag{background:#ffffffa8;border-radius:99px;padding:7px 12px;font-size:11px;font-weight:600}.pink-tag{background:var(--pink)}.card h3{font-family:var(--serif);font-weight:500;letter-spacing:-.045em;font-size:clamp(31px,4vw,52px);margin:20px 0 12px}.card p{font-size:15px;line-height:1.8;color:#505057;max-width:720px;margin:0}.card .fact{font-weight:700;color:var(--ink);margin-top:24px}.card-bottom{display:flex;justify-content:space-between;align-items:end}.arrow{font-size:24px}.about{display:grid;grid-template-columns:1fr 1fr;gap:50px}.about p{line-height:1.9;color:var(--muted);max-width:490px}.contact-box{padding:35px;background:var(--pink);border-radius:22px;margin-top:35px}.contact-box p{margin:10px 0 0}.footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:24px 0 35px;font-size:12px;color:var(--muted)}.detail-hero{padding:100px 0 75px}.back{font-size:13px;font-weight:700}.detail-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(54px,8vw,110px);letter-spacing:-.06em;margin:45px 0 20px}.detail-hero p{font-size:18px;line-height:1.8;color:var(--muted);max-width:700px}.detail-layout{display:grid;grid-template-columns:210px 1fr;gap:70px;border-top:1px solid var(--line);padding-top:50px}.toc{position:sticky;top:30px;align-self:start;display:grid;gap:16px;font-size:13px;color:var(--muted)}.toc a:hover{color:var(--ink)}.chapter{padding:0 0 85px;scroll-margin-top:30px}.chapter h2{font-family:var(--serif);font-weight:500;font-size:38px;margin:0 0 20px}.chapter p{color:var(--muted);line-height:1.9}.placeholder{min-height:340px;background:#dce1e3;border:1px dashed #aeb7b9;border-radius:18px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#687174;margin:25px 0;padding:24px}.placeholder span{font-size:12px;letter-spacing:.08em}.placeholder strong{font-size:22px;margin:12px}.video-placeholder{aspect-ratio:16/9;min-height:0}.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}.compare .placeholder{min-height:250px}.slides{display:grid;gap:24px}.slide{aspect-ratio:16/9;min-height:0;margin:0;background:#e3e8e7;width:100%;cursor:zoom-in;font:inherit}.slide b{font-family:var(--serif);font-size:clamp(50px,8vw,110px);font-weight:400;color:#abb6b3}.project-nav{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:35px 0 70px;font-weight:700}.project-nav a:hover{text-decoration:underline}.lightbox{border:0;border-radius:16px;background:var(--bg);width:min(1100px,90vw);padding:16px}.lightbox::backdrop{background:#1b1d20df}.lightbox .slide{cursor:default}.close{float:right;border:0;background:var(--ink);color:white;border-radius:99px;padding:10px 17px;cursor:pointer;margin-bottom:12px}.reveal{animation:appear .7s both}@keyframes appear{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@media(max-width:700px){.wrap{width:calc(100% - 36px)}.nav{height:72px}.brand span{display:none}.navlinks{gap:17px;font-size:12px}.hero{min-height:600px;padding:75px 0}.hero h1{font-size:clamp(50px,12vw,76px);margin:28px 0}.hero-highlight{display:inline-block;background:var(--lime);border-radius:.17em;padding:0 .12em;line-height:1.08;letter-spacing:-.065em}.hero-bottom{align-items:start;flex-direction:column}.section{padding:65px 0}.section-head{align-items:start;flex-direction:column}.grid,.about,.detail-layout{grid-template-columns:1fr}.card:first-child{grid-column:auto}.card:first-child .cover,.cover{height:240px}.card{padding:14px}.detail-hero{padding:65px 0 45px}.detail-layout{gap:35px}.toc{position:static;display:flex;flex-wrap:wrap;gap:12px 20px}.chapter{padding-bottom:55px}.placeholder{min-height:230px}.video-placeholder{min-height:0}.compare .placeholder{min-height:150px}.footer{gap:20px}.brand{font-size:18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
.chapter img,.chapter video,.slides img{display:block;width:100%;height:auto;border-radius:18px}.chapter video{aspect-ratio:16/9;background:#25262b}.slides img{object-fit:contain}
.cover-video{width:100%;height:100%;object-fit:cover}.project-assets{gap:18px}.project-assets .project-media,.project-assets .project-image{display:block;width:100%;height:auto;border:0;border-radius:12px;background:#fff;overflow:hidden}.project-assets .project-media{aspect-ratio:auto}.project-image{padding:0;cursor:zoom-in}.project-image img{display:block;width:100%;height:auto}.media-lightbox{max-height:90vh;overflow:auto}.media-lightbox [data-preview]{clear:both}.media-lightbox img{display:block;width:100%;height:auto}

.card[href="project-2.html"] .cover,.card[href="project-3.html"] .cover{height:auto;aspect-ratio:3000/1486}.project-two-hero .tag{background:var(--purple)}.project-tabs{display:flex;gap:10px;margin:0 0 28px}.project-tabs a{padding:11px 19px;border-radius:999px;background:var(--purple);font-size:14px;font-weight:700;transition:background .2s}.project-tabs a:hover,.project-tabs a:focus-visible{background:var(--lime)}#project-intro,#aigc{scroll-margin-top:24px}

.home-page .nav{position:sticky;top:16px;z-index:10;height:auto;min-height:72px;margin-top:16px;padding:10px 24px;background:var(--white);border:1px solid #e7e4ee;border-radius:999px}.home-page .navlinks{align-items:center}.home-page :is(#work,#about,#contact){scroll-margin-top:104px}.email-link{font-weight:700;overflow-wrap:anywhere}.email-link:hover{text-decoration:underline}.project-tabs a{background:var(--white);border:1.5px solid #e3e5de;color:var(--ink);transition:border-color .2s,background .2s,color .2s}.project-tabs a:hover,.project-tabs a:focus-visible{background:var(--white);border-color:#101110}.project-tabs a.is-active,.project-tabs a.is-active:hover,.project-tabs a.is-active:focus-visible{background:#101110;color:#fff;border-color:#101110}@media(max-width:700px){.home-page .nav{min-height:64px;padding:9px 16px}.home-page .navlinks{gap:14px}}

.footer-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:12px 28px}.footer-actions a:hover{text-decoration:underline}
.footer:has(.back-to-top) {
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
.back-to-top:not([hidden]) {
  position: fixed;
  inset-inline-end: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #101110;
  color: var(--white);
}
@media (prefers-reduced-motion: reduce) {
  html:has(.back-to-top) { scroll-behavior: auto; }
}
.cover-image{width:100%;height:100%;object-fit:cover;object-position:top}

.project-detail { --project-header-height: 92px; }
.project-detail .nav {
  position: sticky;
  top: 0;
  z-index: 25;
  height: var(--project-header-height);
  background: var(--bg);
}
.project-detail :is(#project-intro, #aigc) {
  scroll-margin-top: calc(var(--project-header-height) + 24px);
}
@media (max-width: 700px) {
  .project-detail { --project-header-height: 72px; }
}

.project-three-hero .tag{background:var(--yellow)}

.project-three-copy{max-width:780px}.project-three-copy ol{color:var(--muted);line-height:1.9;padding-left:1.5em}.project-three-copy p strong{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.card{cursor:none;transform-origin:center;transition:transform .28s ease,box-shadow .28s ease}.card:hover{transform:scale(1.015);box-shadow:0 15px 35px #25262b15}.card-cursor{position:fixed;top:0;left:0;z-index:100;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:#101110;color:#fff;font-size:13px;font-weight:700;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .18s,transform .18s}.card-cursor.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.card-bottom .arrow{display:grid;place-items:center;flex:none;width:44px;height:44px;border:1px solid var(--ink);border-radius:50%;font-size:20px;transition:transform .25s,background .25s,color .25s}.card:hover .card-bottom .arrow,.card:focus-visible .card-bottom .arrow{transform:rotate(45deg);background:#101110;color:#fff;border-color:#101110}@media(prefers-reduced-motion:reduce){.card,.card-cursor,.card-bottom .arrow{transition:none!important}.card:hover{transform:none!important}}
@media (hover:hover) and (pointer:fine){.card:hover{transform:scale(1.025)}.card .cover>video,.card .cover>img,.card .cover>.cover-inner{transition:transform .4s ease}.card:hover .cover>video,.card:hover .cover>img,.card:hover .cover>.cover-inner{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.card .cover>video,.card .cover>img,.card .cover>.cover-inner{transition:none!important}.card:hover .cover>video,.card:hover .cover>img,.card:hover .cover>.cover-inner{transform:none!important}}
.hero h1{position:relative;isolation:isolate}.hero-highlight{position:relative;isolation:auto;background:transparent}.hero-highlight-bg{position:absolute;inset:0;background:var(--lime);border-radius:.17em;z-index:-1;transform:translate(var(--highlight-offset-x,0px),var(--highlight-offset-y,0px)) perspective(360px) rotateX(var(--highlight-tilt-x,0deg)) rotateY(var(--highlight-tilt-y,0deg));transition:transform .2s ease;transform-origin:center}.hero-highlight-text{position:relative;display:inline-block;transform:none}@media(prefers-reduced-motion:reduce){.hero-highlight-bg{transition:none}}
.card[href="kaikou.html"]{background:#d0f0ff}

.about{align-items:center;column-gap:50px;row-gap:38px}.about-intro{margin:0}.contact-box{grid-column:1/-1;margin:0;background:#101110;color:#fff;display:flex;align-items:center;gap:36px;padding:46px 50px;border-radius:28px}.contact-avatar{width:120px;height:120px;flex:0 0 120px;object-fit:cover;object-position:50% 30%;border-radius:50%}.contact-copy .small-label{color:#d5d1e2}.contact-copy p{margin:12px 0 0;color:#fff}.contact-copy .email-link{font-family:var(--serif);font-size:clamp(22px,3vw,38px);font-weight:500;letter-spacing:-.02em}@media(max-width:700px){.about{row-gap:24px}.contact-box{grid-column:auto;gap:22px;padding:28px;align-items:flex-start;flex-direction:column}.contact-avatar{width:96px;height:96px;flex-basis:96px}.contact-copy .email-link{font-size:clamp(18px,5vw,24px)}}
.about{align-items:initial;column-gap:50px;row-gap:0}.about-heading{display:contents}.about-heading .small-label{grid-column:1;grid-row:1}.about-heading h2{grid-column:1;grid-row:2;align-self:center}.about-intro{grid-column:2;grid-row:2;align-self:center;margin:12px 0 0}.contact-box{grid-column:2;grid-row:3;margin-top:35px;padding:25px 35px;gap:20px;border-radius:22px}.contact-avatar{width:76px;height:76px;flex:0 0 76px}.contact-copy .email-link{font-family:var(--sans);font-size:16px;font-weight:700;letter-spacing:0}@media(max-width:700px){.about{row-gap:0}.about-heading .small-label{grid-column:1;grid-row:1}.about-heading h2{grid-column:1;grid-row:2}.about-intro{grid-column:1;grid-row:3;margin:20px 0 0}.contact-box{grid-column:1;grid-row:4;margin-top:28px;flex-direction:row;align-items:center;padding:25px;gap:18px}.contact-avatar{width:68px;height:68px;flex:0 0 68px}.contact-copy .email-link{font-size:clamp(12px,3.3vw,16px)}}
@media (hover:hover) and (pointer:fine){.card-cursor{opacity:1;transform:translate(-50%,-50%) scale(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}.card-cursor.visible{transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.card-cursor{transition:none!important}}

@media (hover:hover) and (pointer:fine){.card{cursor:pointer}.card .cover{cursor:none}.card:hover{transform:none}.card:hover .cover>video,.card:hover .cover>img,.card:hover .cover>.cover-inner{transform:none}.card .cover:hover>video,.card .cover:hover>img,.card .cover:hover>.cover-inner{transform:scale(1.08)}}
@media(prefers-reduced-motion:reduce){.card .cover:hover>video,.card .cover:hover>img,.card .cover:hover>.cover-inner{transform:none!important}}

.overview-subtitle{font-size:18px}.overview-list{padding-left:1.5em;margin:28px 0;color:var(--muted);line-height:1.9}.overview-list li+li{margin-top:10px}.overview-list strong{color:var(--ink)}

.card[href="kaikou.html"] .cover{height:auto;aspect-ratio:16/9}.overview-hero{margin:25px 0}

.kaikou-hero .tag{background:#d0f0ff}

.kaikou-page{overflow-x:clip}.kaikou-page main{overflow-x:clip}.kaikou-proof{display:grid;grid-template-columns:minmax(0,.76fr) minmax(0,1.54fr);gap:30px;align-items:stretch;margin:36px 0 0;padding:22px;border-radius:26px;background:#fff;color:var(--ink);border:1px solid #e7e4ee;overflow:visible}.kaikou-proof-media{min-width:0;align-self:start}.kaikou-proof-image{display:block;width:100%;min-width:0;height:auto;aspect-ratio:4/3;object-fit:contain;justify-self:center;border:1px solid #e7e4ee;border-radius:16px;background:#fff}.kaikou-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:12px;align-items:center}.kaikou-metric{display:flex;flex-direction:column;justify-content:center;min-width:0;min-height:126px;padding:8px 15px}.kaikou-metric+.kaikou-metric{border-left:1px solid #e3e3e8}.metric-value{font-size:clamp(36px,4vw,60px);font-weight:650;line-height:1.08;letter-spacing:-.07em;font-variant-numeric:tabular-nums;white-space:nowrap}.metric-blue .metric-value{color:#0090ff}.metric-purple .metric-value{color:var(--primary-purple)}.metric-green .metric-value{color:#14b255}.metric-title{margin-top:18px;font-size:13px;font-weight:700;line-height:1.4}.metric-note{margin-top:5px;color:var(--muted);font-size:11px;line-height:1.5}.kaikou-metric.is-visible .metric-value{animation:metric-jump .8s cubic-bezier(.2,.8,.2,1) both}@keyframes metric-jump{0%{transform:translateY(14px) scale(.88);opacity:.25}55%{transform:translateY(-7px) scale(1.06);opacity:1}75%{transform:translateY(2px) scale(.98)}100%{transform:none;opacity:1}}.kaikou-page .image-to-reveal{opacity:0;transform:translate(28px,34px)}.kaikou-page .image-to-reveal.is-visible{animation:image-slide-in .75s cubic-bezier(.2,.75,.2,1) var(--image-delay,0ms) both}@keyframes image-slide-in{to{opacity:1;transform:none}}@media(max-width:1050px){.kaikou-proof{grid-template-columns:1fr}.kaikou-proof-media{padding-right:20%}.kaikou-proof-image{max-width:none;margin:0}.kaikou-metrics{min-height:155px}}@media(max-width:560px){.kaikou-proof{padding:16px;gap:14px}.kaikou-metrics{grid-template-columns:1fr}.kaikou-metric{min-height:0;padding:17px 8px}.kaikou-metric+.kaikou-metric{border-left:0;border-top:1px solid #e3e3e8}.metric-value{font-size:48px}.metric-title{margin-top:8px}}@media(prefers-reduced-motion:reduce){.kaikou-page .image-to-reveal{opacity:1;transform:none}.kaikou-metric.is-visible .metric-value,.kaikou-page .image-to-reveal.is-visible{animation:none}}

.metric-title{display:flex;align-items:center;gap:7px;position:relative}.metric-info{display:inline-grid;place-items:center;flex:none;width:17px;height:17px;padding:0;border:1px solid #c8cbd1;border-radius:50%;background:#fff;color:#7b7d84;font:700 11px var(--sans);cursor:help}.metric-info:hover,.metric-info:focus-visible{border-color:var(--ink);color:var(--ink)}.metric-tooltip{display:none;position:absolute;z-index:10;left:0;top:calc(100% + 9px);width:min(280px,calc(100vw - 64px));padding:12px 14px;border:1px solid #e4e5e9;border-radius:12px;background:#fff;box-shadow:0 10px 24px #25262b20;color:#4f525b;font-size:12px;font-weight:400;line-height:1.6;letter-spacing:0;white-space:normal}.metric-title:hover .metric-tooltip,.metric-title:focus-within .metric-tooltip{display:block}.kaikou-metric:last-child .metric-tooltip{left:auto;right:0}.chapter .metric-footnote{grid-column:1/-1;margin:0;padding-top:8px;border-top:1px solid #edeef1;color:#8b8e96;font-size:11.5px;line-height:1.5}.metric-footnote::selection{background:#d0f0ff}

.story-chapter{border-top:1px solid var(--line);padding-top:62px}.story-question{max-width:850px;margin:0 0 24px;font-size:18px;font-weight:400}.story-tags{display:flex;gap:9px;margin:0 0 42px}.story-tags span{padding:8px 14px;border-radius:999px;background:#d0f0ff;font-size:12px;font-weight:700}.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,36%);gap:clamp(28px,4vw,60px);align-items:start}.story-copy h3{margin:0 0 27px;font-family:var(--serif);font-size:clamp(28px,3vw,39px);font-weight:600;line-height:1.3;letter-spacing:-.035em}.story-copy p{max-width:680px;margin:0 0 20px;font-size:16px;line-height:1.85}.story-copy p:last-child{margin-bottom:0}.story-video{margin:0}.story-video video{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center center;border-radius:22px;background:#202025}.story-insight{margin-top:52px;padding:31px 35px;border-radius:22px;background:#eef9ff;border-left:5px solid #0090ff}.story-insight .small-label{color:#375d70}.story-insight p{max-width:920px;margin:15px 0 0;color:var(--ink);font-size:clamp(21px,2.5vw,31px);font-weight:700;line-height:1.55}@media(max-width:1100px){.story-grid{grid-template-columns:1fr}.story-video{width:min(100%,400px)}}@media(max-width:700px){.story-chapter{padding-top:43px}.story-tags{margin-bottom:30px}.story-copy h3{margin-bottom:22px}.story-copy p{font-size:15px}.story-insight{margin-top:34px;padding:25px 24px}}

.story-screen{margin-top:110px;padding-top:70px;border-top:1px solid var(--line)}.story-screen .story-tags{margin-bottom:22px}.story-screen-title{max-width:880px;margin:0 0 40px;font-family:var(--serif);font-size:clamp(31px,4vw,50px);font-weight:600;line-height:1.28;letter-spacing:-.045em}.task-flow{padding:28px;border:1px solid #e2e6ea;border-radius:25px;background:#fff}.task-flow-legend{display:flex;justify-content:space-between;margin-bottom:19px;color:#6b7078;font-size:12px;font-weight:700;letter-spacing:.07em}.task-flow-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px}.task-step{min-width:0}.task-manual,.task-system{border-radius:16px;padding:18px}.task-manual{min-height:168px;border:1px solid #e5e8eb;background:#fcfbff}.task-index{font-size:12px;font-weight:800;letter-spacing:.04em}.task-manual p{margin:14px 0 0;color:#565a62;font-size:14px;line-height:1.65}.task-arrow{text-align:center;color:#0090ff;font-size:23px;line-height:40px}.task-system{display:flex;align-items:center;min-height:94px;background:#e6f4ff;color:#203950;font-size:15px;font-weight:700;line-height:1.5}.chapter .task-takeaway{margin:26px 0 0;padding-left:20px;border-left:4px solid var(--lime);color:var(--ink);font-size:19px;line-height:1.7;font-weight:700}.strategy-diagram{margin:0;overflow-x:auto;border-radius:22px}.strategy-diagram img{display:block;width:100%;height:auto;border-radius:22px}.strategy-diagram figcaption{display:none}.chapter-closing{margin:62px 0 0;padding:30px 0 0;border-top:1px solid var(--line);font-family:var(--serif);font-size:clamp(27px,3.4vw,43px);font-weight:600;line-height:1.45;letter-spacing:-.035em}@media(max-width:1180px){.task-flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.task-manual{min-height:138px}}@media(max-width:700px){.story-screen{margin-top:76px;padding-top:48px}.story-screen-title{margin-bottom:30px}.task-flow{padding:16px}.task-flow-grid{grid-template-columns:1fr;gap:18px}.task-manual{min-height:0}.task-arrow{line-height:32px}.task-system{min-height:0}.task-takeaway{font-size:17px}.strategy-diagram img{width:720px;max-width:none}.strategy-diagram figcaption{display:block;margin:8px 0 0;color:var(--muted);font-size:12px}.chapter-closing{margin-top:48px}}

.kaikou-page .detail-layout > div{min-width:0}.strategy-diagram{max-width:100%;min-width:0}

/* Chapter navigation follows the case-study's pale blue / blue palette. */
.kaikou-page .detail-layout{grid-template-columns:240px minmax(0,1fr);gap:54px}
.kaikou-page .toc{top:calc(var(--project-header-height, 0px) + 24px);display:block;max-height:calc(100vh - var(--project-header-height, 0px) - 48px);overflow-y:auto;padding:17px 0 0;border-top:1px solid #c9e9fa;color:#526170}
.kaikou-page .chapter{scroll-margin-top:calc(var(--project-header-height, 0px) + 30px)}
.kaikou-page .toc-label{margin:0 10px 12px;color:#54718a;font-size:10px;font-weight:800;letter-spacing:.15em}
.kaikou-page .toc-links{display:grid;gap:5px}
.kaikou-page .toc a{position:relative;display:flex;align-items:center;gap:9px;min-height:39px;padding:9px 10px 9px 25px;border-radius:11px;color:#526170;font-size:13px;line-height:1.4;background-image:linear-gradient(90deg,#d2ecff 0%,#d2ecff max(0%,calc(var(--chapter-progress,0%) - 7%)),#84c7ff var(--chapter-progress,0%),transparent var(--chapter-progress,0%));transition:color .2s ease,background-color .2s ease}
.kaikou-page .toc a:hover{color:#0075d5;background:#dcefff}
.kaikou-page .toc a[aria-current="location"]{color:#006dc7;font-weight:800}
.kaikou-page .toc a[aria-current="location"]::after{content:"";position:absolute;left:10px;top:50%;width:5px;height:5px;border-radius:50%;background:#0090ff;transform:translateY(-50%)}
.kaikou-page .toc-num{flex:0 0 19px;color:#7890a1;font-family:Nunito,sans-serif;font-size:11px;font-weight:700}
.kaikou-page .toc a[aria-current="location"] .toc-num{color:#0090ff}
@media(max-width:700px){.kaikou-page .detail-layout{grid-template-columns:minmax(0,1fr);gap:32px}.kaikou-page .toc{position:static;max-height:none;padding:15px 0 0;overflow:visible}.kaikou-page .toc-label{margin-bottom:10px}.kaikou-page .toc-links{display:flex;gap:5px;overflow-x:auto;scrollbar-width:thin}.kaikou-page .toc a{flex:none;white-space:nowrap}.kaikou-page .toc a[aria-current="location"]::after{display:none}}
@media(max-width:700px){
  .kaikou-page .detail-layout{display:block}
  .kaikou-page .toc{position:sticky;top:var(--project-header-height, 0px);z-index:20;background:var(--bg);padding-bottom:10px}
  .kaikou-page .detail-layout > div{padding-top:32px}
  .kaikou-page .chapter{scroll-margin-top:calc(var(--project-header-height, 0px) + 110px)}
}
.kaikou-page .story-video video{pointer-events:none}

/* Editable task infographic for the manual English practice workflow. */
.kaikou-page{--diagram-blue:#d0f0ff;--diagram-purple:#d9d2ff;--diagram-green:#d9e9d2;--diagram-yellow:#ffe08a;--diagram-pink:#f3dce2;--diagram-accent:#0090ff;--diagram-gap:13px;--diagram-section-gap:28px;--diagram-padding:30px;--diagram-radius:25px;--diagram-card-radius:17px;--diagram-note-radius:16px}
.kaikou-page .manual-workflow{margin:0;padding:var(--diagram-padding);border:1px solid #e2e6ea;border-radius:var(--diagram-radius);background:var(--white)}
.kaikou-page .manual-workflow-head{display:flex;justify-content:space-between;align-items:end;gap:20px;padding-bottom:22px;border-bottom:1px solid #e2e6ea}
.kaikou-page .manual-workflow-head>span,.kaikou-page .manual-workflow-conclusion>span:first-child{color:#65727b;font-size:10px;font-weight:800;letter-spacing:.12em}
.kaikou-page .manual-workflow-head strong{max-width:390px;font-size:clamp(19px,2vw,27px);line-height:1.3;letter-spacing:-.04em;text-align:right}
.kaikou-page .manual-workflow-steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--diagram-gap);list-style:none;margin:var(--diagram-section-gap) 0 0;padding:0}
.kaikou-page .manual-workflow-steps::before{content:"";position:absolute;top:18px;left:18px;right:18px;height:2px;background:var(--ink)}
.kaikou-page .manual-workflow-step{position:relative;display:flex;flex-direction:column;gap:var(--diagram-gap);min-width:0}
.kaikou-page .manual-workflow-node{position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-family:Nunito,sans-serif;font-size:12px;font-weight:900}
.kaikou-page .manual-workflow-step:last-child .manual-workflow-node{background:var(--diagram-accent)}
.kaikou-page .manual-workflow-card{display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:170px;padding:19px 16px 18px;border-radius:var(--diagram-card-radius);background:var(--diagram-blue)}
.kaikou-page .manual-workflow-step:nth-child(2) .manual-workflow-card{background:var(--diagram-purple)}
.kaikou-page .manual-workflow-step:nth-child(3) .manual-workflow-card{background:var(--diagram-green)}
.kaikou-page .manual-workflow-step:nth-child(4) .manual-workflow-card{background:var(--diagram-yellow)}
.kaikou-page .manual-workflow-step:nth-child(5) .manual-workflow-card{background:var(--diagram-pink)}
.kaikou-page .manual-workflow-card h4{margin:0;font-size:clamp(19px,1.85vw,25px);font-weight:900;line-height:1.2;letter-spacing:-.055em}
.kaikou-page .manual-workflow-card p{margin:0;color:#303841;font-size:13px;line-height:1.65}
.kaikou-page .manual-workflow-conclusion{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:start;gap:18px;margin-top:var(--diagram-section-gap);padding:20px 23px;border-radius:var(--diagram-note-radius);background:var(--ink);color:#fff}
.kaikou-page .manual-workflow-conclusion-heading{color:#b8c8d3;line-height:1.5}
.kaikou-page .manual-workflow-conclusion-lines{display:grid;gap:9px}
.kaikou-page .manual-workflow-conclusion-lines p{margin:0;font-size:15px;line-height:1.6}
.kaikou-page .manual-workflow-conclusion-lines p>span{color:#b8c8d3;font-weight:800}
.kaikou-page .manual-workflow-conclusion-lines strong{font-weight:700}
.kaikou-page .manual-workflow-conclusion .manual-workflow-conclusion-lines p,.kaikou-page .manual-workflow-conclusion .manual-workflow-conclusion-lines p strong{color:var(--white)}
@media(max-width:1180px){.kaikou-page .manual-workflow-steps{grid-template-columns:1fr;gap:10px}.kaikou-page .manual-workflow-steps::before{top:18px;bottom:18px;left:18px;right:auto;width:2px;height:auto}.kaikou-page .manual-workflow-step{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:14px}.kaikou-page .manual-workflow-card{display:grid;grid-template-columns:minmax(130px,30%) minmax(0,1fr);align-items:center;min-height:72px;gap:15px}.kaikou-page .manual-workflow-conclusion{grid-template-columns:1fr;gap:8px}}
@media(max-width:700px){.kaikou-page{--diagram-padding:20px;--diagram-radius:21px}.kaikou-page .manual-workflow-head{display:block;padding-bottom:19px}.kaikou-page .manual-workflow-head strong{display:block;margin-top:8px;text-align:left;font-size:20px}.kaikou-page .manual-workflow-card{display:block;min-height:86px;padding:15px 16px}.kaikou-page .manual-workflow-card h4{font-size:20px}.kaikou-page .manual-workflow-card p{margin-top:8px}.kaikou-page .manual-workflow-conclusion{padding:20px}.kaikou-page .manual-workflow-conclusion strong{font-size:15px}}
.kaikou-page .story-copy p strong{color:var(--ink);font-weight:800}

/* Editorial design-challenge diagram: one accent, rules and open columns. */
.kaikou-page .strategy-editorial{margin:0;padding:var(--diagram-padding);overflow:hidden;border:1px solid #dce3e7;border-radius:var(--diagram-radius);background:var(--white)}
.kaikou-page .strategy-editorial-head{display:block}
.kaikou-page .strategy-editorial-label{color:#526775;font-family:Nunito,var(--sans);font-size:10px;font-weight:900;letter-spacing:.16em}
.kaikou-page .strategy-editorial-head h4{max-width:880px;margin:13px 0 0;color:var(--ink);font-family:var(--sans);font-size:clamp(24px,2.5vw,34px);font-weight:800;letter-spacing:-.045em;line-height:1.38}

.kaikou-page .strategy-venn-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(255px,.85fr);align-items:center;gap:clamp(20px,3vw,46px);margin-top:var(--diagram-section-gap);padding-top:19px;border-top:1px solid #dce3e7}
.kaikou-page .strategy-venn{display:block;width:100%;max-width:400px;height:auto;margin:auto;overflow:visible}
.kaikou-page .strategy-venn-circle{fill:var(--diagram-blue)}
.kaikou-page .strategy-venn-pair{fill:var(--diagram-purple)}
.kaikou-page .strategy-venn-label{fill:var(--ink);font-family:var(--sans);font-size:36px;font-weight:800;letter-spacing:-.04em}
.kaikou-page .strategy-venn-label-side{font-size:30px}
.kaikou-page .strategy-venn-center{fill:#fff;font-family:var(--sans);font-size:26px;font-weight:800;letter-spacing:-.04em}
.kaikou-page .strategy-venn-notes{list-style:none;min-width:0;margin:0;padding:0}
.kaikou-page .strategy-venn-notes li{display:grid;grid-template-columns:31px minmax(0,1fr);gap:13px;padding:17px 0;border-top:1px solid #dce3e7}
.kaikou-page .strategy-venn-notes li:last-child{border-bottom:1px solid #dce3e7}
.kaikou-page .strategy-venn-notes li>span{padding-top:4px;color:#687987;font-family:Nunito,var(--sans);font-size:11px;font-weight:900;letter-spacing:.1em}
.kaikou-page .strategy-venn-notes h4{margin:0;color:var(--ink);font-size:20px;font-weight:800;letter-spacing:-.035em;line-height:1.3}
.kaikou-page .strategy-venn-notes p{margin:6px 0 0;color:#52616c;font-size:14px;line-height:1.6}
@media(max-width:700px){.kaikou-page .strategy-editorial-head h4{font-size:24px}.kaikou-page .strategy-venn-layout{grid-template-columns:1fr;gap:4px;padding-top:16px}.kaikou-page .strategy-venn{max-width:400px}.kaikou-page .strategy-venn-notes li{padding:14px 0}.kaikou-page .strategy-venn-notes h4{font-size:18px}.kaikou-page .strategy-venn-notes p{font-size:13px}}

/* Shared typography scale */
:root{--type-h1:40px;--type-h2:30px;--type-h3:20px;--type-insight:24px;--type-lead:18px;--type-body:16px;--type-caption:13px;--type-eyebrow:11px;--type-tag:12px;--type-diagram-title:20px;--type-diagram-node:17px;--type-diagram-sublabel:13px;--type-diagram-arrow:12px;--type-diagram-callout:24px}
body{font-size:var(--type-body);line-height:1.8}
.hero h1,.detail-hero h1{font-family:var(--serif);font-size:var(--type-h1);font-weight:500;line-height:1.3}
.hero h1{font-size:clamp(56px,7.8vw,120px)}
@media(max-width:700px){.hero h1{font-size:clamp(50px,12vw,76px)}}

.experience{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,2fr);gap:48px}
.experience-heading h2{margin:12px 0 0;font-family:var(--serif);font-size:var(--type-h2);font-weight:500;line-height:1.4}
.experience-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.experience-list li{display:grid;grid-template-columns:145px minmax(0,1fr);gap:22px;padding:28px 0;border-bottom:1px solid var(--line)}
.experience-date{color:var(--muted);font-size:14px}
.experience-list h3{margin:0;font-size:18px;line-height:1.4}
.experience-list p{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.8}
@media(max-width:700px){.experience{grid-template-columns:1fr;gap:28px}.experience-list li{grid-template-columns:1fr;gap:7px;padding:22px 0}.experience-list h3{font-size:17px}}
.section-head h2,.about h2,.chapter h2{font-family:var(--serif);font-size:var(--type-h2);font-weight:500;line-height:1.4}
.chapter h2{font-size:var(--type-h1);line-height:1.3}
.card h3,.story-copy h3,.story-screen-title{font-family:var(--sans);font-size:var(--type-h3);font-weight:700;line-height:1.4;letter-spacing:normal}
.story-insight p,.chapter-closing{font-family:var(--sans);font-size:var(--type-insight);font-weight:700;line-height:1.5;letter-spacing:normal}
.hero p,.detail-hero p,.chapter .overview-subtitle,.chapter .story-question{font-family:var(--sans);font-size:var(--type-lead);font-weight:400;line-height:1.7}
.card p,.about p,.chapter p,.chapter li,.project-three-copy ol,.detail-hero .project-three-copy p{font-family:var(--sans);font-size:var(--type-body);line-height:1.8}
.eyebrow,.small-label,.kaikou-page .toc-label{font-family:var(--sans);font-size:var(--type-eyebrow);font-weight:700}
.tag,.story-tags span{font-family:var(--sans);font-size:var(--type-tag);font-weight:500}
.footer,.back,.kaikou-page .toc a,.chapter .metric-footnote,.chapter .strategy-design-boundary{font-size:var(--type-caption)}
.kaikou-page .manual-workflow,.kaikou-page .strategy-editorial{border:0}
.kaikou-page .manual-workflow-step:last-child .manual-workflow-node{background:var(--ink)}
.kaikou-page .manual-workflow-head strong,.kaikou-page .strategy-editorial-head h4{font-family:var(--sans);font-size:var(--type-diagram-title);font-weight:700;line-height:1.4;letter-spacing:normal}
.kaikou-page .manual-workflow-card h4,.kaikou-page .strategy-venn-notes h4{font-family:var(--sans);font-size:var(--type-diagram-node);font-weight:700;line-height:1.4;letter-spacing:normal}
.kaikou-page .manual-workflow-card p,.kaikou-page .strategy-venn-notes p{font-family:var(--sans);font-size:var(--type-diagram-sublabel);font-weight:400;line-height:1.7}
.kaikou-page .manual-workflow-head>span,.kaikou-page .manual-workflow-conclusion>span:first-child,.kaikou-page .strategy-editorial-label,.kaikou-page .strategy-venn-notes li>span{font-size:var(--type-eyebrow);font-weight:700}
.kaikou-page .manual-workflow-conclusion-lines p{font-size:var(--type-body);line-height:1.8}
@media(max-width:700px){:root{--type-h1:30px;--type-h2:24px;--type-h3:18px;--type-insight:20px;--type-lead:16px;--type-body:15px}}

/* Chapter 03: editable curriculum hierarchy */
.curriculum-chapter{border-top:1px solid var(--line);padding-top:62px}
.curriculum-part{margin-top:36px}
.curriculum-part .story-tags{margin-bottom:22px}
.course-architecture .story-screen-title{margin-bottom:20px}
.chapter .curriculum-intro{max-width:880px;margin:0 0 32px}
.curriculum-map{margin:0;padding:var(--diagram-padding);border-radius:var(--diagram-radius);background:var(--white)}
.curriculum-map-head{display:flex;justify-content:center;align-items:baseline;gap:20px;padding-bottom:22px;border-bottom:1px solid var(--line);text-align:center}
.curriculum-map-head strong{font-size:var(--type-diagram-title);font-weight:700;line-height:1.4}
.curriculum-root{position:relative;display:flex;align-items:center;justify-content:center;gap:22px;width:fit-content;margin:28px auto 36px;padding:18px 30px;border-radius:var(--diagram-note-radius);background:var(--ink);color:var(--white)}
.curriculum-root strong{font-size:var(--type-diagram-callout);font-weight:700;line-height:1.5}
.curriculum-root>span{padding-left:22px;border-left:1px solid #ffffff50;font-size:var(--type-diagram-sublabel)}
.curriculum-root::after{content:"";position:absolute;top:100%;left:50%;height:19px;border-left:1px solid var(--line)}
.curriculum-themes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--diagram-gap);list-style:none;margin:0;padding:0}
.curriculum-theme{position:relative;min-width:0}
.curriculum-theme::before{content:"";position:absolute;top:-18px;left:50%;height:18px;border-left:1px solid var(--line)}
.curriculum-theme::after{content:"";position:absolute;top:-18px;left:calc(-1 * var(--diagram-gap));right:0;border-top:1px solid var(--line)}
.curriculum-theme:first-child::after{left:50%}
.curriculum-theme:last-child::after{right:50%}
.curriculum-theme-copy{position:relative;isolation:isolate;overflow:hidden;height:210px;padding:20px 17px;border-radius:var(--diagram-card-radius);background:var(--diagram-blue)}
.curriculum-theme-copy>.curriculum-decoration{position:absolute;z-index:-1;right:10px;bottom:-12px;color:rgba(255,255,255,.22);font:800 150px/1 var(--sans);pointer-events:none;user-select:none}
.kaikou-page .manual-workflow-card{position:relative;isolation:isolate;overflow:hidden}
.kaikou-page .manual-workflow-card>.workflow-decoration{position:absolute;z-index:-1;right:8px;bottom:-10px;color:rgba(255,255,255,.22);font:800 135px/1 var(--sans);pointer-events:none;user-select:none}
@media(max-width:1180px){.kaikou-page .manual-workflow-card>.workflow-decoration{font-size:90px}}
.curriculum-theme:nth-child(2) .curriculum-theme-copy{background:var(--diagram-purple)}
.curriculum-theme:nth-child(3) .curriculum-theme-copy{background:var(--diagram-green)}
.curriculum-theme:nth-child(4) .curriculum-theme-copy{background:var(--diagram-yellow)}
.curriculum-theme-index{display:block;font-size:var(--type-eyebrow);font-weight:700;color:var(--muted)}
.curriculum-theme h4{margin:18px 0 10px;font:700 var(--type-diagram-node)/1.4 var(--sans)}
.chapter .curriculum-theme p{margin:0;color:var(--ink);font:400 var(--type-diagram-sublabel)/1.7 var(--sans);overflow-wrap:anywhere}
.curriculum-tracks{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:20px}
.curriculum-tracks::before{content:"";position:absolute;top:0;left:50%;height:20px;border-left:1px solid var(--line)}
.curriculum-tracks span{position:relative;padding:8px 4px;border-radius:10px;background:var(--bg);font-size:var(--type-diagram-sublabel);text-align:center}
@media(min-width:701px) and (max-width:1180px){.curriculum-theme-copy{padding:17px 12px;height:235px}.curriculum-root{margin-bottom:36px}}
@media(max-width:700px){.curriculum-chapter{padding-top:43px}.curriculum-map-head{display:block}.curriculum-map-head strong{display:block;margin-top:8px}.curriculum-root{gap:16px;padding:16px 20px;margin-bottom:28px}.curriculum-root>span{padding-left:16px}.curriculum-themes{grid-template-columns:1fr;gap:22px}.curriculum-theme-copy{height:auto;min-height:0;padding:20px}.curriculum-theme h4{margin-top:10px}.curriculum-theme::before,.curriculum-theme::after,.curriculum-root::after{display:none}.curriculum-tracks{padding-top:16px}.curriculum-tracks::before{height:16px}}

.curriculum-tracks small{display:block;margin-bottom:2px;color:var(--muted);font:700 var(--type-eyebrow)/1.5 var(--sans)}

/* One practice combines one new-learning slot with two review slots. */
.course-scheduling .story-screen-title{margin-bottom:20px}
.chapter .scheduling-intro,.chapter .behavior-intro{max-width:880px;margin:0 0 32px}
.scheduling-diagram{margin:0;padding:var(--diagram-padding);border-radius:var(--diagram-radius);background:var(--white)}
.scheduling-head{text-align:center;padding-bottom:24px;border-bottom:1px solid var(--line)}
.scheduling-head .small-label{display:block;margin-bottom:12px;color:var(--muted)}
.scheduling-head strong{font:700 var(--type-diagram-title)/1.4 var(--sans)}
.scheduling-head strong>span{margin:0 10px;color:var(--muted);font-weight:400}
.scheduling-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--diagram-gap);list-style:none;margin:var(--diagram-section-gap) 0 0;padding:0}
.scheduling-slot{position:relative;isolation:isolate;overflow:hidden;min-width:0;min-height:190px;padding:22px;border-radius:var(--diagram-card-radius);background:var(--diagram-blue)}
.scheduling-slot:nth-child(2){background:var(--diagram-purple)}
.scheduling-slot:nth-child(3){background:var(--diagram-green)}
.scheduling-index{color:var(--muted);font-size:var(--type-eyebrow);font-weight:700}
.scheduling-slot h4{margin:20px 0 30px;font:700 var(--type-diagram-node)/1.4 var(--sans)}
.chapter .scheduling-slot p{margin:0;color:var(--ink);font:400 var(--type-diagram-sublabel)/1.7 var(--sans)}
.scheduling-number{position:absolute;z-index:-1;right:12px;bottom:-12px;color:rgba(255,255,255,.22);font:800 150px/1 var(--sans);pointer-events:none;user-select:none}
@media(max-width:700px){.scheduling-slots{grid-template-columns:1fr}.scheduling-slot{min-height:150px;padding:20px}.scheduling-slot h4{margin:10px 0 18px}.scheduling-head strong>span{margin:0 2px}.scheduling-number{font-size:130px}}

/* Page note components: emphasis / reading / caption */
.kaikou-page{
 --note-radius:var(--diagram-note-radius);--note-gap:24px;
 --note-emphasis-bg:var(--ink);--note-emphasis-color:var(--white);
 --note-emphasis-size:15px;--note-emphasis-label-size:var(--type-diagram-node);
 --note-emphasis-leading:1.7;--note-emphasis-padding:20px 23px;--note-emphasis-gap:20px;
 --note-reading-bg:#f4f4f6;--note-reading-color:var(--muted);
 --note-reading-size:14px;--note-reading-leading:1.8;--note-reading-padding:16px 20px;
 --note-caption-bg:transparent;--note-caption-color:var(--muted);
 --note-caption-size:var(--type-caption);--note-caption-leading:1.7
}
.kaikou-page .case-note{margin:var(--note-gap) 0 0;border:0;font-family:var(--sans);font-weight:400}
.kaikou-page .case-note--emphasis{display:flex;align-items:baseline;gap:var(--note-emphasis-gap);margin-top:var(--diagram-section-gap);padding:var(--note-emphasis-padding);border-radius:var(--note-radius);background:var(--note-emphasis-bg);color:var(--note-emphasis-color);font-size:var(--note-emphasis-size);line-height:var(--note-emphasis-leading)}
.kaikou-page .case-note--emphasis>strong{flex:none;color:inherit;font-size:var(--note-emphasis-label-size);font-weight:700;line-height:1.5}
.kaikou-page .case-note--emphasis>p{margin:0;color:inherit;font-size:inherit;line-height:inherit}
.kaikou-page .case-note--reading{padding:var(--note-reading-padding);border-radius:var(--note-radius);background:var(--note-reading-bg);color:var(--note-reading-color);font-size:var(--note-reading-size);line-height:var(--note-reading-leading)}
.kaikou-page .case-note--caption{padding:0;background:var(--note-caption-bg);color:var(--note-caption-color);font-size:var(--note-caption-size);line-height:var(--note-caption-leading)}
.kaikou-page .case-note--caption>strong{color:var(--ink);font-weight:700}
@media(max-width:700px){.kaikou-page{--note-emphasis-padding:20px}.kaikou-page .case-note--emphasis{display:block}.kaikou-page .case-note--emphasis>p{margin-top:8px}}

/* Diagram heading: optional muted context, then a left-aligned title. */
.kaikou-page{--diagram-heading-align:left;--diagram-heading-gap:13px;--diagram-heading-label-color:var(--muted);--diagram-heading-label-size:var(--type-eyebrow);--diagram-heading-label-weight:700;--diagram-heading-label-leading:1.5;--diagram-heading-title-color:var(--ink);--diagram-heading-title-size:var(--type-diagram-title);--diagram-heading-title-weight:700;--diagram-heading-title-leading:1.4}
.kaikou-page .diagram-heading{display:block;text-align:var(--diagram-heading-align)}
.kaikou-page .diagram-heading>.diagram-heading__eyebrow{display:block;margin:0 0 var(--diagram-heading-gap);color:var(--diagram-heading-label-color);font:var(--diagram-heading-label-weight) var(--diagram-heading-label-size)/var(--diagram-heading-label-leading) var(--sans);letter-spacing:.12em;text-transform:none}
.kaikou-page .diagram-heading>.diagram-heading__title{display:block;max-width:none;margin:0;color:var(--diagram-heading-title-color);font:var(--diagram-heading-title-weight) var(--diagram-heading-title-size)/var(--diagram-heading-title-leading) var(--sans);letter-spacing:normal;text-align:inherit}

/* Four-state adaptation of the product's cat-and-ball usage guide. */
.speaking-overview{margin:0 0 28px}
.speaking-demo{padding:var(--diagram-padding);border-radius:var(--diagram-radius);background:var(--white)}
.speaking-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--diagram-gap);margin-bottom:28px}
.speaking-controls button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;padding:10px 8px;border:1px solid transparent;border-radius:12px;background:var(--bg);color:var(--muted);font-size:var(--type-tag);cursor:pointer}
.speaking-controls button b{font-size:var(--type-eyebrow)}
.speaking-controls button:hover{border-color:var(--ink);color:var(--ink)}
.speaking-controls button[aria-pressed=true]{background:var(--diagram-blue);color:var(--ink);font-weight:700}
.speaking-controls button:nth-child(2)[aria-pressed=true]{background:var(--diagram-purple)}
.speaking-controls button:nth-child(3)[aria-pressed=true]{background:var(--diagram-green)}
.speaking-controls button:nth-child(4)[aria-pressed=true]{background:var(--diagram-yellow)}
.speaking-demo-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:24px;align-items:stretch}
.speaking-stage{display:flex;align-items:center;gap:20px;min-width:0;min-height:320px;padding:22px;border-radius:var(--diagram-card-radius);background:var(--bg)}
.speaking-scene{flex:0 0 30%;min-width:0}
.chapter .speaking-scene img{width:100%;height:190px;object-fit:contain;border-radius:0}
.speaking-expression{flex:1;min-width:0}
.speaking-phase{display:block;margin-bottom:18px;color:var(--muted);font-size:var(--type-eyebrow);font-weight:700}
.speaking-utterance{display:flex;align-items:end;gap:10px}
.speaking-utterance+.speaking-utterance{margin-top:14px}
.speaking-utterance[hidden]{display:none}
.speaking-speaker{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 40px}
.kaikou-page .speaking-speaker img{display:block;width:40px;height:40px;border-radius:50%;opacity:1;transform:none;animation:none}
.speaking-speaker span{color:var(--muted);font-size:var(--type-eyebrow);line-height:1.4}
.speaking-bubble{flex:1;min-width:0;padding:12px 15px;border-radius:16px 16px 16px 0;font-size:var(--type-diagram-node);font-weight:700;line-height:1.5;overflow-wrap:anywhere}
.speaking-question{background:var(--diagram-blue)}
.speaking-answer{background:var(--diagram-purple)}
.speaking-bubble[hidden]{display:none}
.chapter .speaking-hint{margin:16px 0 0;font-size:var(--type-caption);line-height:1.7}
.speaking-screenshot{min-width:0;margin:0;display:flex;flex-direction:column}
.speaking-course-frame{flex:1;display:grid;align-items:center;overflow:hidden;border-radius:var(--diagram-card-radius);background:var(--bg)}
.kaikou-page .speaking-course-video{width:100%;height:auto;aspect-ratio:1210/834;object-fit:contain;background:var(--bg);border-radius:0;pointer-events:none}
.kaikou-page .speaking-course-video[hidden]{display:none}
.speaking-screenshot figcaption{margin-top:10px;font-size:var(--type-caption);color:var(--muted)}
.chapter .speaking-playback-note{margin:20px 0 0;color:var(--muted);font-size:var(--type-caption);line-height:1.7}
@media(max-width:1000px){.speaking-demo-grid{grid-template-columns:1fr}}
@media(max-width:700px){.speaking-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.speaking-stage{flex-direction:column;align-items:stretch;gap:10px;padding:20px;min-height:0}.speaking-scene{flex:auto}.chapter .speaking-scene img{height:150px}.speaking-controls button{justify-content:start;padding:10px}.speaking-overview{margin-bottom:20px}}

/* Strategy and design decisions */
.design-goals .story-screen-title{margin-bottom:10px}
.design-goal-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--diagram-gap);
  margin-top:var(--diagram-section-gap);
}
.design-goal-card{
  border-radius:var(--diagram-card-radius);
  background:color-mix(in srgb, var(--note-emphasis-bg) 7%, transparent);
  color:var(--ink);
}
.design-goal-head{
  padding:var(--diagram-padding);
  border-radius:var(--diagram-card-radius);
  background:var(--note-emphasis-bg);
  color:var(--note-emphasis-color);
}
.design-goal-index,.design-goal-title{display:block}
.design-goal-index{margin-bottom:8px}
.design-goal-title{font:700 var(--type-content-card-title)/1.4 var(--sans)}
.design-goal-card ul{margin:0;padding:var(--diagram-padding);padding-inline-start:calc(var(--diagram-padding) + 1.25em)}
.design-goal-card li + li{margin-top:6px}

.decisions-diagram{--decisions-goal-width:76px;margin:0;padding:var(--diagram-padding);border-radius:var(--diagram-radius);background:var(--white)}
.decisions-heading{padding-bottom:22px;border-bottom:1px solid var(--line)}
.decisions-column-head,.decisions-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2fr);gap:20px;align-items:center}
.decisions-column-head{margin-inline-start:calc(var(--decisions-goal-width) + var(--diagram-gap));padding:20px 20px 12px;color:var(--muted);font-size:var(--type-eyebrow);font-weight:700}
.decisions-groups,.decisions-list{display:grid;gap:var(--diagram-gap);margin:0}
.decisions-group{display:grid;grid-template-columns:var(--decisions-goal-width) minmax(0,1fr);gap:var(--diagram-gap)}
.decisions-list{grid-column:2}
.decisions-goal{
  display:grid;
  place-items:center;
  border-radius:var(--diagram-card-radius);
  background:var(--note-emphasis-bg);
  color:var(--note-emphasis-color);
  font:700 var(--type-caption)/1.4 var(--sans);
}
.decisions-row{min-height:90px;padding:20px;border-radius:var(--diagram-card-radius);background:var(--decision-color)}
.decisions-row dt{font-size:var(--type-diagram-node);font-weight:700;line-height:1.4}
.decisions-row dd{margin:0;font-size:var(--type-body);line-height:1.7}
.decisions-metric{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:var(--diagram-section-gap);padding:22px;border-radius:var(--diagram-note-radius);background:var(--bg)}
.decisions-metric .small-label{color:var(--muted);letter-spacing:0}
.chapter .decisions-metric p{margin:5px 0 0;color:var(--muted);font-size:var(--type-caption);line-height:1.5}
.decisions-metric>strong{font:700 32px/1.3 var(--sans);white-space:nowrap}
.decisions-metric>strong span{font-size:var(--type-body);font-weight:700}
.strategy-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--diagram-gap);margin-top:var(--diagram-section-gap)}
.chapter .strategy-gallery img{width:100%;height:auto;border-radius:var(--diagram-card-radius)}
@media(max-width:700px){
  .design-goal-cards{grid-template-columns:1fr}
  .decisions-diagram{--decisions-goal-width:54px}
  .decisions-column-head{display:none}
  .decisions-groups{margin-top:var(--diagram-gap)}
  .decisions-row{grid-template-columns:minmax(0,1fr);gap:6px;min-height:0;padding:16px}
  .decisions-metric{align-items:flex-start;flex-direction:column;gap:10px;padding:18px}
  .decisions-metric>strong{font-size:28px}
  .strategy-gallery{gap:10px}
  .chapter .strategy-gallery img{border-radius:10px}
}

/* Chapter 04: Fogg behavior model, three-part flywheel */
.core-ux-chapter{border-top:1px solid var(--line);padding-top:62px}
.behavior-section{margin-top:36px}
.behavior-section .story-tags{margin-bottom:22px}
.behavior-section .story-screen-title{margin-bottom:28px}
.behavior-diagram{margin:0;padding:var(--diagram-padding);border-radius:var(--diagram-radius);background:var(--white)}
.behavior-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:var(--diagram-section-gap);margin-top:var(--diagram-section-gap)}
.behavior-wheel{display:block;width:100%;max-width:440px;height:auto;margin:auto;overflow:visible;font-family:var(--sans)}
.behavior-sector--motivation{fill:var(--diagram-purple)}
.behavior-sector--ability{fill:var(--diagram-green)}
.behavior-sector--prompt{fill:var(--diagram-yellow)}
.behavior-hub{fill:var(--ink)}
.behavior-wheel-label{fill:var(--ink);font-size:30px;font-weight:700;text-anchor:middle}
.behavior-wheel-label tspan{font-size:var(--type-diagram-node)}
.behavior-hub-copy{fill:var(--white);font-size:var(--type-diagram-node);font-weight:700;text-anchor:middle}
.behavior-factors{display:grid;gap:var(--diagram-gap);margin:0;min-width:0}
.behavior-factor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:16px;padding:22px;border-radius:var(--diagram-card-radius)}
.behavior-factor--motivation{background:var(--diagram-purple)}
.behavior-factor--ability{background:var(--diagram-green)}
.behavior-factor--prompt{background:var(--diagram-yellow)}
.behavior-factor-label{display:block;margin-bottom:8px;color:var(--muted);font-size:var(--type-eyebrow);font-weight:700;letter-spacing:.07em}
.behavior-factor dt strong{display:block;font-size:var(--type-diagram-node);font-weight:700;line-height:1.4}
.behavior-factor dd{margin:0;min-width:0}
.behavior-factor ul{display:grid;gap:4px;list-style:none;margin:0;padding:0}
.chapter .behavior-factor li{font-size:var(--type-diagram-sublabel);line-height:1.7;color:var(--ink)}
@media(max-width:1000px) and (min-width:701px){.behavior-factor{grid-template-columns:1fr;padding:18px;gap:10px}.behavior-factor-label{margin-bottom:4px}}
@media(max-width:700px){.core-ux-chapter{padding-top:42px}.behavior-layout{grid-template-columns:1fr;gap:20px}.behavior-wheel{max-width:360px}.behavior-factor{padding:20px;gap:12px}.behavior-section .story-screen-title{margin-bottom:24px}}

/* Core UX: annotated entry screen */
.ux-detail-screen .story-screen-title{margin-bottom:20px}
.chapter .ux-detail-intro{max-width:880px;margin:0 0 32px}
.start-annotation{margin:0;padding:var(--diagram-padding);border-radius:var(--diagram-radius);background:var(--white)}
.start-annotation-stage{position:relative;aspect-ratio:1640/920}
.start-screenshot{position:absolute;top:4.3478%;left:0;width:74.3293%}
.chapter .start-screenshot img{display:block;width:100%;height:auto;border-radius:var(--diagram-card-radius)}
.start-connectors{position:absolute;inset:0;width:100%;height:100%;overflow:visible;color:var(--ink);pointer-events:none}
.start-connectors>path{fill:none;stroke:currentColor;stroke-width:2;marker-end:url(#start-arrow)}
.start-callout{position:absolute;right:0;width:23%;display:flex;align-items:center;gap:12px;padding:18px 14px;border-radius:var(--diagram-card-radius);transform:translateY(-50%);background:var(--diagram-blue)}
.start-callout--goal{top:20.65%;background:var(--diagram-purple)}
.start-callout--learning{top:51.09%;background:var(--diagram-green)}
.start-callout--entry{top:81.52%}
.start-callout span{font-size:var(--type-eyebrow);font-weight:700;color:var(--muted)}
.start-callout strong{font-size:var(--type-diagram-node);font-weight:700;line-height:1.4}
.start-pin{display:none}
@media(max-width:1000px) and (min-width:701px){.start-callout{padding:12px 8px;gap:6px}.start-callout strong{font-size:13px}}
@media(max-width:700px){.start-annotation-stage{aspect-ratio:auto}.start-screenshot{position:relative;top:auto;width:100%}.start-connectors{display:none}.start-callouts{display:grid;gap:var(--diagram-gap);margin-top:20px}.start-callout{position:static;width:auto;transform:none;padding:16px}.start-pin{position:absolute;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--white);font-size:10px;font-weight:700;border:2px solid var(--white);transform:translate(-50%,-50%)}.start-pin--goal{left:60%;top:17%}.start-pin--learning{left:51%;top:54%}.start-pin--entry{left:53%;top:81%}}

/* Core UX: progressive expression tabs */
.expression-module{padding:var(--diagram-padding);border-radius:var(--diagram-radius);background:var(--white)}
.expression-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--diagram-gap);margin-bottom:calc(var(--diagram-section-gap)/2)}
.expression-tabs button{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:12px 10px;border:1px solid transparent;border-radius:var(--diagram-card-radius);background:var(--bg);color:var(--muted);font:500 var(--type-tag)/1.5 var(--sans);cursor:pointer}
.expression-tabs button b{font-size:var(--type-eyebrow)}
.expression-tabs button:hover{border-color:var(--ink);color:var(--ink)}
.expression-tabs button:focus-visible,.expression-sound:focus-visible{outline:2px solid var(--diagram-accent);outline-offset:3px}
.expression-tabs button[aria-selected=true]{background:var(--diagram-blue);color:var(--ink);font-weight:700}
.expression-tabs button:nth-child(2)[aria-selected=true]{background:var(--diagram-purple)}
.expression-tabs button:nth-child(3)[aria-selected=true]{background:var(--diagram-green)}
.expression-tabs button i{position:absolute;bottom:0;left:0;height:3px;width:0;background:var(--ink);opacity:.35}
.expression-module.is-cycling .expression-tabs button[aria-selected=true] i{animation:expression-progress var(--expression-duration,4000ms) linear forwards}
@keyframes expression-progress{from{width:0}to{width:100%}}
.expression-panel[hidden]{display:none}
.expression-panel:focus-visible{outline:2px solid var(--diagram-accent);outline-offset:6px}
.expression-dialogue,.expression-ratings{min-height:224px;margin:0 0 calc(var(--diagram-section-gap)/2)}
.expression-dialogue{display:flex;flex-direction:column;justify-content:center;max-width:720px;margin-left:auto;margin-right:auto}
.expression-dialogue .speaking-bubble{font-size:var(--type-body);font-weight:500}
.expression-ratings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:var(--diagram-gap)}
.feedback-rating{min-width:0;text-align:center}
.chapter .feedback-rating img{width:100%;max-width:220px;height:110px;object-fit:contain;margin:0 auto;border-radius:0;--image-delay:0ms!important}
.chapter .feedback-rating p{margin:12px 0 0;font-size:var(--type-diagram-sublabel);line-height:1.7;color:var(--muted)}
.expression-media{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/3;width:100%;max-width:720px;margin:0 auto;border-radius:var(--diagram-card-radius);background:var(--bg)}
.chapter .expression-media video{width:100%;height:100%;aspect-ratio:4/3;object-fit:contain;border-radius:inherit;background:var(--bg);cursor:pointer}
.expression-media video[hidden]{display:none}
.expression-video-placeholder{position:absolute;inset:0;z-index:-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--muted);text-align:center;padding:24px}
.expression-video-placeholder span{font-size:var(--type-caption)}
.expression-video-placeholder strong{font-size:var(--type-diagram-title);color:var(--ink)}
.expression-video-placeholder small{font-size:var(--type-eyebrow)}
.expression-sound{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:40px;height:40px;padding:10px;border:0;border-radius:50%;background:var(--ink);color:var(--white);cursor:pointer}
.expression-sound:disabled{opacity:.35;cursor:default}
.expression-sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.expression-sound .sound-on,.expression-sound[aria-pressed=true] .sound-off{display:none}
.expression-sound[aria-pressed=true] .sound-on{display:block}
.chapter .expression-playback-note{margin:18px 0 0;color:var(--muted);font-size:var(--type-caption);text-align:center}
@media(max-width:700px){.expression-tabs{gap:8px}.expression-tabs button{flex-direction:column;gap:2px;padding:10px 5px;min-height:62px}.expression-dialogue,.expression-ratings{min-height:228px}.expression-dialogue .speaking-bubble{font-size:var(--type-body);padding:10px 12px}.expression-ratings{gap:8px}.chapter .feedback-rating img{height:70px}.chapter .feedback-rating p{font-size:11px;line-height:1.7}.expression-sound{right:12px;bottom:12px;width:36px;height:36px;padding:8px}}
@media(prefers-reduced-motion:reduce){.expression-tabs button i{display:none}}

/* Preserve the supplied recording dimensions (1920 × 1080). */
.expression-media--recording,.chapter .expression-media--recording video{aspect-ratio:16/9}

/* Video timeline alongside the sound toggle. */
.expression-transport{position:absolute;left:16px;right:68px;bottom:16px;display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;border-radius:24px;background:var(--ink);color:var(--white)}
.expression-transport[hidden]{display:none}
.expression-transport input{flex:1;min-width:0;width:100%;height:24px;margin:0;accent-color:var(--white);cursor:pointer}
.expression-transport input:focus-visible{outline:2px solid var(--diagram-blue);outline-offset:2px}
.expression-time{flex:none;font:500 11px/1.4 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:700px){.expression-transport{left:12px;right:58px;bottom:12px;height:36px;padding:0 10px;gap:8px}.expression-time{font-size:10px}}

/* Short notes for the child's practice experience. */
.kaikou-page .ux-experience-points{display:grid;gap:8px;margin:0 0 32px}
.kaikou-page .ux-experience-points p{margin:0;color:inherit;font-size:var(--note-reading-size);line-height:var(--note-reading-leading)}
.kaikou-page .ux-experience-points strong{color:var(--ink);font-weight:700}

/* Chapter 4.4: learning report and collection feedback. */
.repeat-example + .repeat-example{margin-top:48px}
.chapter .repeat-example-caption{margin:0 0 20px;color:var(--ink);font-size:var(--type-body);line-height:1.8}
.repeat-pair{display:grid;grid-template-columns:1.1568047fr 1.3333333fr;align-items:stretch;gap:var(--diagram-gap)}
.chapter .repeat-pair img,.chapter .repeat-pair video{display:block;width:100%;height:100%;min-width:0;object-fit:contain;border-radius:var(--diagram-card-radius)}
.chapter .repeat-pair img{aspect-ratio:782/676}
.chapter .repeat-pair video{aspect-ratio:4/3}
@media(max-width:700px){.repeat-example + .repeat-example{margin-top:36px}.repeat-pair{gap:8px}}
.kaikou-page .repeat-example img{--image-delay:0ms!important}
.kaikou-page .repeat-pair img{--image-delay:150ms!important}

/* Four square examples of repeat practice. */
.repeat-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--diagram-gap)}
.chapter .repeat-games video{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;border-radius:var(--diagram-card-radius);pointer-events:none}
@media(max-width:700px){.repeat-games{gap:8px}}
.chapter .repeat-caption-with-detail{margin-bottom:8px}
.chapter .repeat-example-detail{margin:0 0 20px;color:var(--muted);font-size:var(--type-body);line-height:1.8}

.chapter .repeat-stage-gems{margin:0 0 var(--diagram-gap)}

/* Chapter 05: AI Coding workflow. */
.ai-coding-chapter{border-top:1px solid var(--line);padding-top:62px}
.chapter.ai-coding-chapter .overview-subtitle{max-width:880px;margin:24px 0 0}
.ai-coding-section{margin-top:48px}
.ai-coding-section .story-tags{margin-bottom:22px}
.ai-coding-section .story-screen-title{margin-bottom:28px}
.ai-workflow{margin:0;padding:var(--diagram-padding);border-radius:var(--diagram-radius);background:var(--white)}
.ai-workflow-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--diagram-gap);list-style:none;margin:var(--diagram-section-gap) 0 0;padding:0}
.ai-workflow-steps::before{content:"";position:absolute;top:19px;left:19px;right:19px;height:1px;background:var(--line)}
.ai-workflow-step{position:relative;display:flex;flex-direction:column;gap:var(--diagram-gap);min-width:0}
.ai-workflow-number{position:relative;z-index:1;display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--white);font:800 var(--type-eyebrow)/1 var(--sans)}
.ai-workflow-card{position:relative;isolation:isolate;overflow:hidden;display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:24px;min-height:225px;padding:20px 17px;border-radius:var(--diagram-card-radius);background:var(--diagram-blue)}
.ai-workflow-step:nth-child(2) .ai-workflow-card{background:var(--diagram-purple)}
.ai-workflow-step:nth-child(3) .ai-workflow-card{background:var(--diagram-green)}
.ai-workflow-step:nth-child(4) .ai-workflow-card{background:var(--diagram-yellow)}
.ai-workflow-decoration{position:absolute;z-index:-1;right:8px;bottom:-10px;color:rgba(255,255,255,.22);font:800 135px/1 var(--sans);pointer-events:none;user-select:none}
.ai-workflow-label{display:block;color:var(--muted);font:700 var(--type-eyebrow)/1.5 var(--sans);letter-spacing:.05em}
.ai-workflow-card .ai-workflow-node-title{display:block;margin:15px 0 10px;color:var(--ink);font:700 var(--type-diagram-node)/1.4 var(--sans)}
.chapter .ai-workflow-card p{margin:0;color:var(--ink);font:400 var(--type-diagram-sublabel)/1.7 var(--sans)}
.ai-workflow-role{align-self:flex-start;padding:6px 10px;border-radius:99px;background:rgba(255,255,255,.65);color:var(--ink);font:500 var(--type-tag)/1.4 var(--sans)}
@media(max-width:900px){.ai-workflow-steps{grid-template-columns:1fr;gap:12px}.ai-workflow-steps::before{top:19px;bottom:19px;left:19px;right:auto;width:1px;height:auto}.ai-workflow-step{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:var(--diagram-gap)}.ai-workflow-card{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:17px}.ai-workflow-card .ai-workflow-node-title{display:block;margin:8px 0 5px}.ai-workflow-decoration{font-size:90px}}
@media(max-width:700px){.ai-coding-chapter{padding-top:42px}.ai-coding-section{margin-top:36px}.ai-workflow-card{grid-template-columns:1fr;gap:14px}}
.chapter .ai-chapter-label{margin:0 0 14px;color:var(--muted);font:700 var(--type-eyebrow)/1.5 var(--sans);letter-spacing:.08em}
@media(max-width:900px){.ai-workflow-role{justify-self:start}}

/* Chapter 5.1: early product decisions and validation. */
.ai-subsection{margin-top:72px}
.ai-subsection h4{margin:0 0 18px;color:var(--ink);font:700 var(--type-h3)/1.4 var(--sans)}
.chapter .ai-subsection>p{max-width:880px;margin:0 0 28px;font-size:var(--type-body);line-height:1.8}
.ai-rule-images{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:var(--diagram-gap)}
.chapter .ai-rule-images img{width:100%;height:auto;border-radius:var(--diagram-card-radius);--image-delay:0ms!important}
.chapter .ai-rule-images img:nth-child(2){--image-delay:150ms!important}
.ai-flow-figure{margin:0}
.ai-flow-card{padding:var(--diagram-padding);border-radius:var(--diagram-radius);background:var(--white)}
.ai-flow-svg{display:block;width:100%;height:auto;margin-top:var(--diagram-section-gap);font-family:var(--sans)}
.ai-flow-paths{stroke:var(--muted);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.ai-flow-link-label{fill:var(--muted);font:600 var(--type-diagram-arrow) var(--sans)}
.ai-flow-node-label{fill:var(--ink);font:700 var(--type-diagram-node) var(--sans)}
.ai-flow-home{fill:var(--diagram-blue)}.ai-flow-lesson{fill:var(--diagram-purple)}.ai-flow-result{fill:var(--diagram-green)}.ai-flow-refresh{fill:var(--diagram-yellow)}
.ai-flow-decision{fill:var(--bg);stroke:var(--line);stroke-width:1.5}
.ai-flow-mobile{display:none}
.ai-flow-figure .case-note--caption{margin-top:14px}
.chapter .ai-acceptance-image{width:100%;height:auto;border-radius:var(--diagram-card-radius);--image-delay:0ms!important}
.kaikou-page .ai-history-note{margin-top:26px}
@media(max-width:700px){
 .ai-subsection{margin-top:50px}
 .ai-rule-images{gap:8px}
 .chapter .ai-rule-images img{width:100%}
 .ai-flow-svg{display:none}
 .ai-flow-mobile{display:flex;flex-direction:column;align-items:center;margin-top:var(--diagram-section-gap)}
 .ai-flow-mobile-node,.ai-flow-mobile-decision{width:100%;padding:16px;text-align:center;border-radius:var(--diagram-card-radius);font:700 var(--type-diagram-node)/1.4 var(--sans)}
 .ai-flow-mobile-home{background:var(--diagram-blue)}.ai-flow-mobile-lesson{background:var(--diagram-purple)}
 .ai-flow-mobile-decision{background:var(--bg)}
 .ai-flow-mobile-link{display:flex;gap:8px;align-items:center;justify-content:center;min-height:38px;color:var(--muted);font:600 var(--type-diagram-arrow)/1.4 var(--sans)}
 .ai-flow-mobile-branches{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--diagram-gap);width:100%;padding-top:24px}
 .ai-flow-mobile-branches::before{content:"";position:absolute;top:0;left:25%;right:25%;height:12px;border:1px solid var(--line);border-bottom:0}
 .ai-flow-mobile-branch{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;border-radius:var(--diagram-card-radius);font-family:var(--sans)}
 .ai-flow-mobile-success{background:var(--diagram-green)}.ai-flow-mobile-error{background:var(--diagram-yellow)}
 .ai-flow-mobile-branch small{color:var(--muted);font-size:var(--type-eyebrow);font-weight:700}
 .ai-flow-mobile-branch strong{font-size:var(--type-diagram-node);line-height:1.4}
 .ai-flow-mobile-branch span{font-size:var(--type-diagram-sublabel);line-height:1.6}
}
.ai-section-heading{margin-top:72px}
.ai-section-heading + .ai-subsection{margin-top:48px}
@media(max-width:700px){.ai-section-heading{margin-top:50px}.ai-section-heading + .ai-subsection{margin-top:36px}}
.ai-section-heading .story-screen-title{margin-bottom:10px}
.chapter .ai-section-subtitle{margin:0;color:var(--muted);font:400 var(--type-caption)/1.7 var(--sans)}

.case-table {
  width: 100%;
  margin-top: var(--diagram-section-gap);
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--diagram-radius);
  overflow: hidden;
  background: var(--white);
  color: var(--ink);
  font: 400 var(--type-body)/1.8 var(--sans);
}

.case-table th,
.case-table td {
  padding: var(--diagram-gap) clamp(var(--diagram-gap), 2vw, var(--diagram-padding));
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.case-table th {
  font-weight: 700;
}

.case-table thead {
  background: var(--diagram-blue);
}

.case-table thead th:first-child {
  width: var(--case-table-first-column, 36%);
}

.case-table tbody tr + tr > * {
  border-top: 1px solid var(--line);
}

.behavior-metrics {
  margin-top: var(--diagram-section-gap);
  padding: var(--diagram-padding);
  border-radius: var(--diagram-radius);
  background: var(--white);
}

.behavior-metrics .kaikou-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.behavior-metrics .kaikou-metric {
  padding-inline: var(--diagram-gap);
}

.behavior-metrics .metric-value {
  font-size: clamp(32px, 3.8vw, 56px);
}

.behavior-metrics .metric-footnote {
  margin-top: var(--diagram-gap);
}

.behavior-metrics .metric-footnote a {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.behavior-analysis {
  --case-table-first-column: 118px;
}

.behavior-analysis tr > :first-child {
  padding-inline: var(--diagram-gap);
}

.behavior-analysis tr > :nth-child(2) {
  padding-inline: 0 var(--diagram-gap);
}

.behavior-analysis thead th:nth-child(2) {
  width: calc(4em + var(--diagram-gap));
}

.behavior-analysis-goal {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 6px 9px;
  border-radius: calc(var(--diagram-note-radius) / 2);
  background: var(--note-emphasis-bg);
  color: var(--note-emphasis-color);
  font: 500 var(--type-tag)/1.5 var(--sans);
}

.behavior-analysis-label {
  display: none;
}

@media (max-width: 700px) {
  .behavior-metrics .kaikou-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .behavior-metrics .kaikou-metric:nth-child(2) {
    border-top: 0;
  }

  .behavior-analysis,
  .behavior-analysis tbody,
  .behavior-analysis td {
    display: block;
  }

  .behavior-analysis tbody tr {
    display: grid;
    grid-template-columns: var(--case-table-first-column) minmax(0, 1fr);
  }

  .behavior-analysis thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .behavior-analysis tbody th,
  .behavior-analysis-goal-cell {
    background: var(--diagram-blue);
  }

  .behavior-analysis tbody th {
    display: grid;
    align-content: center;
  }

  .behavior-analysis tbody td:not(.behavior-analysis-goal-cell) {
    grid-column: 1 / -1;
  }

  .behavior-analysis tbody tr + tr > * {
    border-top: 0;
  }

  .behavior-analysis-label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font: 700 var(--type-tag)/1.5 var(--sans);
  }
}

.feedback-case-table {
  --case-table-first-column: 27%;
  margin-top: var(--diagram-gap);
}

.feedback-case-table tbody {
  background: var(--insight-surface);
}

.feedback-case-table th,
.feedback-case-table td {
  padding-inline: var(--diagram-gap);
}

.feedback-case-table td + td {
  border-inline-start: 1px solid var(--line);
}

.feedback-quote {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--diagram-note-radius) var(--diagram-note-radius) var(--diagram-note-radius) 0;
  background: #fff;
  font: 400 var(--type-caption)/1.7 var(--sans);
}

.feedback-quote + .feedback-quote {
  margin-top: 8px;
}

.feedback-cell-label {
  display: none;
}

.feedback-case-gallery {
  display: grid;
  gap: var(--diagram-gap);
  margin-top: var(--diagram-section-gap);
}

.feedback-case-gallery--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .feedback-case-table,
  .feedback-case-table tbody,
  .feedback-case-table td {
    display: block;
  }

  .feedback-case-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .feedback-case-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feedback-case-table .feedback-voices {
    grid-column: 1 / -1;
  }

  .feedback-case-table td + td {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }

  .feedback-cell-label {
    display: block;
    margin-bottom: 8px;
    color: var(--muted);
    font: 700 var(--type-tag)/1.5 var(--sans);
  }
}

@media (max-width: 700px) {
  .feedback-case-table tbody tr,
  .feedback-case-gallery--pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Chapter 5.1: three evidence cards. */
.chapter .ai-section-intro{max-width:880px;margin:20px 0 0;color:var(--muted);font:400 var(--type-body)/1.8 var(--sans)}
.ai-summary-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:var(--diagram-gap);margin-top:32px}
.ai-summary-card{display:flex;flex-direction:column;gap:18px;min-width:0;padding:20px;border-radius:var(--diagram-radius);background:var(--white)}
.ai-summary-card h4{margin:0;color:var(--ink);font:700 18px/1.4 var(--sans)}
.ai-card-art{display:flex;align-items:center;justify-content:center;overflow:hidden;aspect-ratio:16/11;min-width:0;padding:10px;border-radius:var(--diagram-card-radius);background:var(--bg)}
.ai-card-rule-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ai-card-rule-shots a,.ai-card-shot-link,.ai-card-flow-link{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;width:100%;height:100%}
.chapter .ai-summary-card img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;border-radius:8px;--image-delay:0ms!important}
.ai-summary-card a:focus-visible{outline:2px solid var(--diagram-accent);outline-offset:3px}
.ai-card-flow{width:100%;height:100%;font-family:var(--sans)}
.ai-card-flow-lines{stroke:var(--muted);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ai-card-flow-label{fill:var(--ink);font:700 11px var(--sans)}
.ai-card-flow-label tspan,.ai-card-flow-label .ai-card-decision{font-size:9px}
.ai-card-flow-label .ai-card-branch{font-size:8px;fill:var(--muted)}
.chapter .ai-summary-card>p{margin:0;color:var(--muted);font:400 var(--type-body)/1.8 var(--sans)}
@media(max-width:700px){.ai-summary-cards{grid-template-columns:1fr}.ai-summary-card{padding:20px}.ai-card-art{aspect-ratio:16/9}}
.ai-card-art{position:relative}
.ai-card-enlarge{position:absolute;right:10px;bottom:7px;color:var(--muted);font:500 var(--type-eyebrow)/1.4 var(--sans);pointer-events:none}
.ai-card-art-caption{position:absolute;left:10px;bottom:7px;color:var(--muted);font:400 var(--type-eyebrow)/1.4 var(--sans);pointer-events:none}

/* Chapter 05: ownership statement and in-page evidence preview. */
.ai-preview-dialog{width:min(1100px,calc(100vw - 36px));max-width:none;max-height:calc(100dvh - 36px);padding:20px;border:0;border-radius:var(--diagram-radius);background:var(--white);color:var(--ink)}
.ai-preview-dialog::backdrop{background:rgba(20,21,26,.72)}
.ai-preview-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;font:700 var(--type-diagram-node)/1.4 var(--sans)}
.ai-preview-actions{display:flex;align-items:center;gap:8px}
.ai-preview-actions button{min-height:40px;padding:8px 16px;border:1px solid var(--line);border-radius:99px;background:var(--white);color:var(--ink);font:600 var(--type-tag)/1.4 var(--sans);cursor:pointer}
.ai-preview-actions .ai-preview-close{border-color:var(--ink);background:var(--ink);color:var(--white)}
.ai-preview-actions button:focus-visible,.ai-preview-viewport img:focus-visible{outline:2px solid var(--diagram-accent);outline-offset:3px}
.ai-preview-viewport{max-height:calc(100dvh - 128px);overflow:auto;overscroll-behavior:contain}
.ai-preview-viewport img{display:block;max-width:100%;max-height:calc(100dvh - 128px);width:auto;height:auto;margin:0 auto;cursor:zoom-in}
.ai-preview-viewport.is-zoomed img{max-width:none;max-height:none;margin:0;cursor:zoom-out}
@media(max-width:700px){.ai-preview-dialog{padding:16px;border-radius:var(--diagram-radius)}.ai-preview-header{font-size:15px}}

/* Kaikou case-study typography and optional topic tags. */
.kaikou-page{--type-diagram-title:18px;--type-content-card-title:18px;--topic-tag-gap:22px;--topic-tag-bg:var(--diagram-blue)}
.kaikou-page .story-tags{margin-bottom:var(--topic-tag-gap)}
.kaikou-page .story-tags span{background:var(--topic-tag-bg);font:500 var(--type-tag)/1.5 var(--sans)}
.chapter .chapter-deck{margin:0 0 20px;color:var(--muted);font:400 var(--type-caption)/1.7 var(--sans)}
.chapter .overview-subtitle,.chapter .story-question{font:400 var(--type-body)/1.8 var(--sans)}
.ai-summary-card h4{font-size:var(--type-content-card-title)}
@media(max-width:700px){.kaikou-page{--type-diagram-title:16px;--type-content-card-title:16px}}

/* Reusable core insight: light surface with deep blue edge. */
.kaikou-page{--insight-surface:#eef9ff;--insight-edge:#006dc7;--insight-label:#375d70;--insight-edge-width:5px;--insight-radius:22px;--insight-padding:31px 35px}
.kaikou-page .case-insight{margin-top:52px;padding:var(--insight-padding);border-left:var(--insight-edge-width) solid var(--insight-edge);border-radius:var(--insight-radius);background:var(--insight-surface)}
.kaikou-page .case-insight .small-label{color:var(--insight-label);font:700 var(--type-eyebrow)/1.5 var(--sans)}
.kaikou-page .case-insight p{max-width:920px;margin:15px 0 0;color:var(--ink);font:700 var(--type-insight)/1.5 var(--sans);letter-spacing:normal}
.kaikou-page .case-insight p:first-child{margin-top:0}
@media(max-width:700px){.kaikou-page{--insight-padding:25px 24px}.kaikou-page .case-insight{margin-top:34px}}

/* Chapter 5.2: development cards and implementation metrics. */
.ai-build-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--diagram-gap);
  margin-top: 32px;
}

.ai-build-card {
  gap: 10px;
  border-radius: var(--diagram-card-radius);
  background: var(--diagram-blue);
}

.ai-build-card:nth-child(2) {
  background: var(--diagram-purple);
}

.ai-build-card-label {
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(37, 38, 43, .06);
  color: var(--ink);
  font: 700 var(--type-eyebrow)/1.4 var(--sans);
}

.ai-build-card-title {
  font: 700 var(--type-content-card-title)/1.4 var(--sans);
}

.chapter .ai-build-card > p {
  color: var(--ink);
}

.ai-build-output {
  --build-number-size: clamp(36px, 4vw, 60px);
  --build-operator-size: 28px;
  margin: 28px 0 0;
  padding: var(--diagram-padding);
  border-radius: var(--diagram-radius);
  background: var(--white);
}

.ai-build-output .kaikou-metrics {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  min-height: 0;
}

.ai-build-output .kaikou-metric {
  align-items: center;
  min-height: 0;
  padding: 8px 0;
  text-align: center;
}

.ai-build-output .metric-value {
  font-size: var(--build-number-size);
}

.ai-build-output .metric-title {
  display: block;
  word-break: keep-all;
}

.ai-build-operator {
  display: grid;
  width: var(--build-operator-size);
  height: var(--build-operator-size);
  margin-top: calc(8px + (var(--build-number-size) * 1.08 - var(--build-operator-size)) / 2);
  place-items: center;
  border-radius: 50%;
  background: #101110;
  color: var(--white);
  font: 700 18px/1 var(--sans);
}

@media (max-width: 700px) {
  .ai-build-cards {
    grid-template-columns: 1fr;
  }

  .ai-build-output .kaikou-metrics {
    column-gap: 6px;
  }

  .ai-build-output {
    --build-number-size: clamp(20px, 7vw, 36px);
    --build-operator-size: 22px;
  }

  .ai-build-output .metric-title {
    font-size: clamp(11px, 3.5vw, 13px);
  }

  .ai-build-operator {
    font-size: 14px;
  }
}

/* Decorative sequence numbers on Kaikou cards. */
.kaikou-page .numbered-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.kaikou-page .numbered-card__mark {
  position: absolute;
  z-index: -1;
  right: 10px;
  bottom: -12px;
  color: rgba(255, 255, 255, .22);
  font: 800 clamp(100px, 12vw, 135px)/1 var(--sans);
  pointer-events: none;
  user-select: none;
}

/* Chapter 7: user feedback and product value. */
.user-value-stories {
  display: grid;
  gap: var(--diagram-section-gap);
  margin-top: var(--diagram-section-gap);
}

.user-value-story {
  margin: 0;
  padding: var(--diagram-padding);
  border-radius: var(--diagram-radius);
  background: var(--diagram-blue);
}

.user-value-story:nth-child(2) {
  background: var(--diagram-purple);
}

.user-value-story:nth-child(3) {
  background: var(--diagram-green);
}

.user-value-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--diagram-padding);
  margin-top: var(--diagram-gap);
  padding-top: var(--diagram-gap);
  border-top: 1px solid rgba(37, 38, 43, .16);
}

.chapter .user-value-copy p {
  margin: 0;
  color: var(--ink);
}

.chapter .user-value-copy p + p {
  margin-top: var(--diagram-gap);
}

.chapter .user-value-result {
  font-weight: 700;
}

.chapter .user-value-strategy {
  font-size: var(--type-caption);
}

.user-value-row > .design-shot {
  width: 100%;
  max-width: 440px;
  justify-self: end;
  overflow: hidden;
  border-radius: var(--diagram-note-radius);
}

.user-value-row--gallery {
  grid-template-columns: minmax(0, 1fr);
}

.user-value-gallery {
  display: grid;
  gap: var(--diagram-gap);
}

.user-value-gallery-line {
  display: flex;
  align-items: start;
  gap: clamp(5px, 1vw, var(--diagram-gap));
}

/* Widths proportional to aspect ratio give each row a shared height. */
.user-value-gallery-line > * {
  flex: var(--shot-ratio) 1 0;
  min-width: 0;
}

.user-value-gallery-stack {
  overflow: hidden;
  border-radius: var(--diagram-note-radius);
}

.chapter .user-value-gallery-stack img {
  border-radius: 0;
}

@media (max-width: 700px) {
  .user-value-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .user-value-row > .design-shot {
    justify-self: start;
  }
}

/* Chapter 5.2: four page examples across three design stages. */
.ai-design-exploration {
  margin-top: 56px;
}

.ai-exploration-title {
  margin: 0 0 10px;
  font: 700 var(--type-content-card-title)/1.4 var(--sans);
}

.ai-module-heading {
  margin: var(--diagram-section-gap) 0 0;
  font: 700 var(--type-body)/1.4 var(--sans);
}

.chapter .ai-module-heading + .ai-section-intro {
  margin-top: 10px;
}

.design-comparison {
  margin: 24px 0 0;
  padding: var(--diagram-padding);
  border-radius: var(--diagram-radius);
  background: var(--white);
}

.market-opportunity .story-screen-title {
  margin-bottom: 10px;
}

.market-map {
  margin-top: var(--diagram-section-gap);
  padding: var(--diagram-gap);
  border-radius: var(--diagram-card-radius);
  background: var(--bg);
}

.market-plot {
  --market-point-height: 46px;
  position: relative;
  height: clamp(420px, 38vw, 500px);
  margin-block: var(--diagram-gap);
}

.market-axis {
  position: absolute;
  color: var(--muted);
}

.market-axis--horizontal {
  inset: 50% 0 auto;
  border-top: 1px solid currentColor;
}

.market-axis--vertical {
  inset: 0 auto 0 50%;
  border-left: 1px solid currentColor;
}

.market-axis::after {
  position: absolute;
  width: 7px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: "";
}

.market-axis--horizontal::after {
  top: -4px;
  right: 1px;
  transform: rotate(45deg);
}

.market-axis--vertical::after {
  top: 1px;
  left: -4px;
  transform: rotate(-45deg);
}

.market-axis-level,
.market-axis-label {
  color: var(--muted);
  font: 700 var(--type-body)/1.5 var(--sans);
}

.market-axis-level {
  display: block;
  text-align: center;
}

.market-axis-label {
  position: absolute;
  bottom: calc(50% + 8px);
}

.market-axis-label--input { left: 0; }
.market-axis-label--output { right: 0; }

.market-point {
  position: absolute;
  top: var(--point-y);
  left: var(--point-x);
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--market-point-height);
  padding: 5px 9px 5px 5px;
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: 700 var(--type-caption)/1.4 var(--sans);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.chapter .market-point img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  --image-delay: 0ms !important;
}

.market-point--project {
  background: var(--diagram-blue);
}

.market-point--reference {
  justify-content: center;
  padding-inline: 9px;
}

@media (max-width: 700px) {
  .market-plot {
    --market-point-height: 55px;
    height: 510px;
  }

  .market-point {
    left: var(--point-mobile-x);
    flex-direction: column;
    gap: 3px;
    padding: 4px 6px;
    font-size: var(--type-tag);
  }

  .chapter .market-point img {
    width: 27px;
    height: 27px;
    border-radius: 6px;
  }
}

.design-comparison-grid {
  display: grid;
  grid-template-columns: var(--design-comparison-columns, minmax(0, 2.87fr) minmax(0, 3.78fr) minmax(0, 1.6fr));
  gap: var(--diagram-gap);
}

.design-comparison--visual {
  --design-comparison-columns: minmax(0, .96fr) minmax(0, .98fr) minmax(0, .68fr);
}

.design-stage-step {
  position: relative;
  display: flex;
  min-width: 0;
}

.design-stage {
  flex: 1;
  gap: 8px;
  padding: 16px;
  border-radius: var(--diagram-card-radius);
  background: var(--design-stage-color);
}

.design-stage-arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: calc(100% + var(--diagram-gap) / 2);
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #101110;
  color: var(--white);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.design-stage--draft,
.design-shot--draft {
  --design-stage-color: var(--diagram-blue);
}

.design-stage--explore,
.design-shot--explore {
  --design-stage-color: var(--diagram-purple);
}

.design-stage--final,
.design-shot--final {
  --design-stage-color: var(--diagram-green);
}

.design-stage-title {
  font: 700 var(--type-content-card-title)/1.4 var(--sans);
}

.design-stage-icons {
  display: inline-flex;
  gap: 4px;
  margin-inline-end: 6px;
  vertical-align: middle;
}

.chapter .design-stage-title img {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.chapter .design-stage > p {
  color: var(--ink);
  font: 400 var(--type-diagram-sublabel)/1.6 var(--sans);
}

.design-comparison-row {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.design-comparison-row-title {
  margin: 0 0 10px;
  font: 700 var(--type-diagram-node)/1.4 var(--sans);
}

.design-shot {
  display: block;
  min-width: 0;
  cursor: zoom-in;
}

.chapter .design-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  --image-delay: 0ms !important;
}

.design-shot-label {
  display: none;
}

.design-comparison-matrix {
  position: relative;
  isolation: isolate;
}

.design-comparison-bands {
  position: absolute;
  z-index: -1;
  inset: 0;
}

.design-comparison-bands > span,
.design-comparison-matrix .design-shot,
.evidence-flow > li,
.course-template-branch {
  --design-stage-tint: color-mix(in srgb, var(--design-stage-color) 42%, var(--white));
}

.design-comparison-bands > span {
  border-radius: var(--diagram-card-radius);
  background: var(--design-stage-tint);
}

.evidence-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--diagram-gap);
  margin: var(--diagram-section-gap) 0 0;
  padding: 0;
  list-style: none;
}

.evidence-flow--learning {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.evidence-flow:first-child {
  margin-top: 0;
}

.evidence-flow > li {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: 0;
  border-radius: var(--diagram-card-radius);
  background: var(--design-stage-tint);
}

.evidence-flow > li:nth-child(1) { --design-stage-color: var(--diagram-blue); }
.evidence-flow > li:nth-child(2) { --design-stage-color: var(--diagram-purple); }
.evidence-flow > li:nth-child(3) { --design-stage-color: var(--diagram-green); }
.evidence-flow > li:nth-child(4) { --design-stage-color: var(--diagram-yellow); }

.evidence-flow .design-stage {
  display: grid;
  align-content: start;
}

.chapter .evidence-flow .design-stage > p {
  margin: 0;
}

.evidence-flow .design-shot {
  padding: var(--diagram-gap);
}

.delivery-stage-caption {
  display: block;
  margin-top: var(--diagram-gap);
  color: var(--muted);
  font: 400 var(--type-caption)/1.7 var(--sans);
}

@media (width > 1050px) {
  .design-comparison-matrix {
    padding-bottom: var(--diagram-gap);
  }

  .design-comparison-matrix .design-comparison-row {
    margin-top: var(--diagram-gap);
    padding-top: 4px;
    border-top: 0;
  }

  .design-comparison-matrix .design-comparison-row-title {
    padding-inline: var(--diagram-gap);
  }

  .design-comparison-matrix .design-shot {
    margin-inline: 4%;
  }
}

@media (max-width: 1050px) {
  .design-comparison-stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .design-comparison-row .design-comparison-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-shot-label {
    display: inline-block;
    margin-bottom: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font: 500 var(--type-tag)/1.5 var(--sans);
  }

  .design-shot-label {
    background: var(--design-stage-color);
  }

  .design-comparison-bands {
    display: none;
  }

  .design-comparison-matrix .design-shot {
    padding: 8px;
    border-radius: var(--diagram-card-radius);
    background: var(--design-stage-tint);
  }
}

@media (max-width: 700px) {
  .design-comparison-stages,
  .evidence-flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .design-stage-arrow {
    top: calc(100% + var(--diagram-gap) / 2);
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

.course-template-flow {
  display: grid;
  gap: var(--diagram-gap);
}

.course-template-node,
.course-template-head {
  margin: 0;
  padding: 16px;
  border-radius: var(--diagram-card-radius);
  text-align: center;
  font: 700 var(--type-diagram-node)/1.4 var(--sans);
}

.course-template-node span {
  display: block;
  margin-top: 5px;
  font: 400 var(--type-diagram-sublabel)/1.6 var(--sans);
}

.course-template-node > strong {
  font-weight: inherit;
}

.course-template-node--shared { background: var(--diagram-green); }
.course-template-node--result { background: var(--diagram-yellow); }
.course-template-node--copy { background: var(--diagram-purple); }
.course-template-node--script { background: var(--diagram-blue); }
.course-template-node--assemble { background: var(--insight-surface); }

.course-template-node--package {
  background: #101110;
  color: var(--white);
}

.course-template-node-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.chapter .course-template-node-title img {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  --image-delay: 0ms !important;
}

.course-template-arrow {
  justify-self: center;
  color: var(--muted);
}

.course-template-branches,
.course-production-assets,
.course-template-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--diagram-gap);
}

.course-production-assets {
  align-items: stretch;
}

.course-template-branch {
  min-width: 0;
  border-radius: var(--diagram-card-radius);
  background: var(--design-stage-tint);
}

.course-template-head {
  background: var(--design-stage-color);
}

.course-template-pair {
  padding: var(--diagram-gap);
}

.course-template-gallery {
  display: grid;
  gap: var(--diagram-gap);
  font: 700 var(--type-diagram-sublabel)/1.6 var(--sans);
}

@media (max-width: 1050px) {
  .course-template-branches {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 700px) {
  .course-production-assets .course-template-node {
    padding-inline: 8px;
  }

  .chapter .course-template-node-title img {
    width: 24px;
    height: 24px;
  }
}