:root{--paper:#eee7d8;--ink:#142e50;--blue:#176da5;--line:#a7bec4}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y proximity;scroll-padding-top:74px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #176da5;outline-offset:4px}.reading-progress{position:fixed;inset:0 0 auto;height:3px;z-index:70}.reading-progress i{display:block;width:0;height:100%;background:#176da5}.lesson-header{position:fixed;inset:3px 0 auto;height:71px;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 4.3%;background:rgba(238,231,216,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}.lesson-brand{font-size:14px;font-weight:700;white-space:nowrap}.lesson-brand span{color:#777;margin-left:7px}.lesson-header nav{display:flex;gap:20px}.lesson-header nav a{font-size:14px;white-space:nowrap;border-bottom:2px solid transparent}.lesson-header nav a.active{color:var(--blue);border-color:var(--blue)}.header-index{font-size:13px;white-space:nowrap}.reading-rail{position:fixed;left:20px;top:50%;transform:translateY(-50%);z-index:30;display:grid;justify-items:center;gap:16px;font-size:12px;color:var(--ink)}.reading-rail>span{writing-mode:vertical-rl;letter-spacing:.08em}.reading-rail>span:last-child{color:#6b767a}.reading-rail #chapter-dots{display:grid;gap:10px}.reading-rail #chapter-dots a{display:block;width:7px;height:7px;background:#a2b3b9;border-radius:50%}.reading-rail #chapter-dots a.active{background:var(--blue);transform:scale(1.6)}.lesson-screen{min-height:100svh;scroll-snap-align:start;padding:100px 6% 28px 10.5%;background:linear-gradient(115deg,rgba(238,231,216,.91),rgba(238,231,216,.80)),url('assets/blue-wave.jpeg') center/cover;border-bottom:1px solid #a5b8be;display:flex}.lesson-screen:nth-child(even){background:linear-gradient(115deg,rgba(218,236,241,.88),rgba(238,231,216,.76)),url('assets/blue-wave.jpeg') center/cover}.lesson-screen.chapter-02{background:linear-gradient(115deg,rgba(225,239,244,.92),rgba(214,232,240,.77)),url('assets/blue-wave.jpeg') center/cover}.lesson-screen.chapter-03{background:linear-gradient(115deg,rgba(226,231,231,.91),rgba(238,231,216,.82)),url('assets/blue-wave.jpeg') center/cover}.lesson-screen.chapter-04{background:linear-gradient(115deg,rgba(236,231,219,.93),rgba(227,236,235,.78)),url('assets/blue-wave.jpeg') center/cover}.screen-inner{width:100%;max-width:1500px;margin:auto;min-height:calc(100svh - 128px);display:flex;flex-direction:column}.lesson-head{display:flex;justify-content:space-between;gap:25px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:13px;letter-spacing:.14em;font-weight:700;color:var(--blue)}.lesson-main{flex:1;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(350px,.94fr);align-items:center;gap:clamp(30px,5vw,100px);padding:25px 0}.lesson-overline{font-size:13px;letter-spacing:.14em;color:var(--blue);font-weight:700;margin-bottom:18px}.lesson-copy h1{font-size:clamp(43px,4.9vw,77px);letter-spacing:-.055em;line-height:1.17;margin:0 0 30px;max-width:12em}.lesson-core{font-size:clamp(17px,1.5vw,21px);line-height:1.75;max-width:33em;margin:0}.reuse-link{display:inline-block;color:var(--blue);border-bottom:1px solid currentColor;font-size:15px;margin-top:27px;padding-bottom:5px}.lesson-visual{min-width:0}.example-card{height:min(45svh,440px);min-height:300px;position:relative;padding:28px 32px;overflow:hidden;background:#d8eaf2;border:1px solid #acc2ca;box-shadow:0 20px 40px #142e5024;display:flex;flex-direction:column;justify-content:space-between}.chapter-01 .example-card{background:#eee6d9}.chapter-03 .example-card{background:#dfe9e8}.chapter-04 .example-card{background:#e4e5da}.example-label{position:relative;z-index:1;font-size:12px;letter-spacing:.15em;font-weight:700;color:var(--blue)}.example-card p{position:relative;z-index:1;font-size:clamp(19px,1.8vw,27px);line-height:1.55;max-width:20em;margin:0 10% 0 0}.example-graphic{position:absolute;right:-3%;bottom:-24%;font-size:clamp(240px,35vw,500px);font-weight:800;line-height:1;letter-spacing:-.16em;color:#176da51b}.lesson-bottom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;border-top:1px solid var(--line);padding-top:15px}.lesson-bottom article{padding:15px 18px;background:rgba(250,249,244,.79);border:1px solid #c6d1ce;min-height:155px}.lesson-bottom article.task-card{background:#173d65;color:#f4efe6;border-color:#173d65}.lesson-bottom article span{display:block;font-size:12px;letter-spacing:.13em;font-weight:700;color:var(--blue);margin-bottom:10px}.lesson-bottom article.task-card span{color:#b5dbe9}.lesson-bottom article p{font-size:15px;line-height:1.55;margin:0}.lesson-next{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:17px;font-size:13px}.lesson-next a{border-bottom:1px solid currentColor;padding-bottom:2px}.lesson-next>span{color:#56707a}.photo-triptych{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:min(45svh,440px);min-height:300px}.photo-triptych figure{min-width:0;margin:0;position:relative;background:#f7f4ee;border:7px solid #f7f4ee;box-shadow:0 15px 35px #142e5026}.photo-triptych img{width:100%;height:calc(100% - 28px);object-fit:contain;display:block}.photo-triptych figcaption{font-size:11px;letter-spacing:.04em;text-align:center;white-space:nowrap}.analysis-photo{height:min(45svh,440px);min-height:300px;background:#f3f0e8;padding:9px;display:grid;grid-template-columns:65% 1fr;gap:10px;box-shadow:0 15px 35px #142e5026}.analysis-photo img{width:100%;height:100%;object-fit:contain}.analysis-photo>div{display:grid;align-content:center;gap:10px}.analysis-photo span{padding:11px 7px;border-bottom:1px solid var(--line);font-size:15px}.relation-diagram,.loop-diagram,.step-diagram,.prompt-diagram{min-height:300px;height:min(45svh,440px);padding:24px;background:#e3edf0;border:1px solid #aabfc9;box-shadow:0 20px 40px #142e5024;display:flex;align-items:center;justify-content:center;gap:12px}.relation-diagram span{flex:1;text-align:center;padding:22px 8px;border:1px solid #8aa9bb;font-size:20px;font-weight:700;background:#f9f6ee}.relation-diagram small{display:block;font-size:12px;font-weight:400;color:#52646c;margin-top:10px}.relation-diagram i{font-style:normal;font-size:30px;color:#176da5}.loop-diagram{flex-direction:column;gap:0}.loop-diagram span{display:block;width:75%;padding:7px;text-align:center;background:#f7f3e8;border:1px solid #98b9c4;font-size:16px;font-weight:700}.loop-diagram b{font-size:17px;line-height:1.2;color:#176da5}.step-diagram{flex-direction:column;align-items:stretch}.step-diagram span{display:block;background:#f7f3e8;border-left:3px solid #176da5;padding:17px 20px;font-size:19px}.prompt-diagram{flex-wrap:wrap;align-content:center}.prompt-diagram span{border:1px solid #9ebbc5;background:#faf7ee;padding:18px;font-size:18px}.board-diagram{min-height:300px;height:min(45svh,440px);padding:15px;background:#eee9dc;border:1px solid #b7b4a9;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr auto;gap:8px;box-shadow:0 20px 40px #142e5024}.board-image{min-width:0;min-height:0;background:#f8f5ed}.board-image img{width:100%;height:100%;object-fit:contain}.board-diagram>span{text-align:center;font-size:13px;color:#456271}
@media(max-width:1100px){.lesson-header nav{gap:10px}.lesson-header nav a{font-size:12px}.lesson-screen{padding-left:8%;padding-right:5%}.lesson-main{grid-template-columns:1fr 1fr;gap:25px}.lesson-copy h1{font-size:clamp(38px,4vw,56px)}.lesson-bottom article{min-height:165px}.lesson-bottom article p{font-size:14px}}
@media(max-width:720px){html{scroll-snap-type:none;scroll-padding-top:90px}.lesson-header{height:87px;align-items:flex-start;flex-direction:column;gap:5px;padding:9px 5%}.lesson-header nav{width:100%;overflow-x:auto;white-space:nowrap;gap:18px}.header-index,.reading-rail{display:none}.lesson-screen{min-height:100svh;padding:110px 6% 25px}.screen-inner{min-height:0}.lesson-main{grid-template-columns:1fr;padding:24px 0;gap:25px}.lesson-copy h1{font-size:clamp(38px,10vw,59px);margin-bottom:18px}.lesson-core{font-size:16px}.example-card,.photo-triptych,.analysis-photo,.relation-diagram,.loop-diagram,.step-diagram,.prompt-diagram,.board-diagram{height:auto;min-height:260px}.photo-triptych{height:310px}.photo-triptych figure{border-width:4px}.photo-triptych figcaption{font-size:9px}.lesson-bottom{grid-template-columns:1fr}.lesson-bottom article{min-height:0}.lesson-bottom article p{font-size:15px}.lesson-next{margin-top:25px}.relation-diagram span{font-size:13px;padding:14px 4px}.relation-diagram small{font-size:10px}.relation-diagram i{font-size:17px}}
.diagram-grid{min-height:300px;height:min(45svh,440px);padding:22px;background:#e5edf0;border:1px solid #afc2c7;box-shadow:0 20px 40px #142e5024;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:auto 1fr 1fr;gap:9px}.diagram-grid .diagram-label{grid-column:1/-1;font-size:12px;color:var(--blue);font-weight:700;letter-spacing:.14em}.diagram-grid div{display:flex;align-items:center;justify-content:center;text-align:center;background:#f8f5eb;border:1px solid #bdc8c8;padding:15px;font-size:clamp(15px,1.4vw,19px);font-weight:700}.diagram-grid div:nth-child(2){background:#176da5;color:white;border-color:#176da5}.comparison-diagram{height:min(45svh,440px);min-height:300px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.comparison-diagram figure{min-width:0;min-height:0;margin:0;padding:8px;background:#f8f5ec;display:flex;flex-direction:column;box-shadow:0 15px 35px #142e5025}.comparison-image{flex:1;min-height:0;background-image:url('assets/fashion.png');background-size:400% 200%;background-repeat:no-repeat;background-position:0 0}.comparison-image.clear{background-position:0 100%}.comparison-diagram figcaption{font-size:12px;text-align:center;padding:9px 0 3px;line-height:1.35}.relation-diagram{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr auto;gap:9px;align-items:stretch}.relation-diagram span{display:flex;flex-direction:column;justify-content:center;min-width:0;font-size:clamp(15px,1.45vw,20px);padding:12px 7px}.relation-diagram p{grid-column:1/-1;font-size:13px;line-height:1.45;color:#486273;margin:0;text-align:center}
@media(max-width:720px){.diagram-grid,.comparison-diagram{height:auto;min-height:260px}.comparison-diagram{height:300px}.comparison-diagram figcaption{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none}}
.lookbook-diagram{min-height:300px;height:min(45svh,440px);padding:22px;background:linear-gradient(145deg,#e4eef0,#f2ecdf);border:1px solid #afc3c8;box-shadow:0 20px 40px #142e5024;display:flex;flex-direction:column;gap:15px}.lookbook-label{font-size:12px;letter-spacing:.14em;color:var(--blue);font-weight:700}.lookbook-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;flex:1}.lookbook-steps article{background:#f9f6ee;border:1px solid #b9c8c9;padding:16px 11px;display:flex;flex-direction:column;justify-content:space-between}.lookbook-steps article:first-child{background:#266c9b;color:white}.lookbook-steps b{font-size:clamp(23px,3vw,42px);line-height:1}.lookbook-steps strong{font-size:clamp(15px,1.6vw,22px);line-height:1.2}.lookbook-steps small{font-size:12px;line-height:1.4}.lookbook-diagram p{font-size:11px;color:#557079;margin:0}@media(max-width:720px){.lookbook-diagram{height:auto;min-height:270px;padding:15px}.lookbook-steps article{padding:10px 7px}.lookbook-steps strong{font-size:14px}.lookbook-steps small{font-size:10px}}
.process-diagram{height:min(45svh,440px);min-height:300px;padding:25px;background:#e3edf0;border:1px solid #aabfc9;box-shadow:0 20px 40px #142e5024;display:flex;flex-direction:column;gap:18px}.process-label{font-size:12px;letter-spacing:.14em;color:var(--blue);font-weight:700}.process-steps{display:flex;flex:1;gap:9px;align-items:stretch}.process-steps article{flex:1;min-width:0;background:#f8f5ed;border:1px solid #b8c8c9;padding:18px 13px;display:flex;flex-direction:column;justify-content:space-between}.process-steps article:first-child{background:#266c9b;color:#fff}.process-steps b{font-size:12px;letter-spacing:.1em}.process-steps strong{font-size:clamp(18px,1.8vw,26px);line-height:1.25}.process-steps small{font-size:13px;line-height:1.5}.process-steps article:first-child small{color:#e5f1f4}@media(max-width:720px){.process-diagram{height:auto;min-height:270px;padding:16px}.process-steps article{padding:12px 8px}.process-steps strong{font-size:15px}.process-steps small{font-size:11px}}