*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f4f3ed;color:#242b25;font-family:Arial,'Noto Sans KR',sans-serif;font-size:14px;line-height:1.55}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ca663c;outline-offset:4px}button:disabled{cursor:not-allowed}.topbar{height:80px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #d7d9ce}.brand{text-decoration:none;font-size:24px;font-weight:800;letter-spacing:-1px}.brand span{font-weight:400;margin-left:9px}.topnote{font-size:12px;color:#656c61}.notes-link{font-size:12px;text-decoration:none}.shell{display:grid;grid-template-columns:218px 1fr;max-width:1800px;margin:auto}aside{border-right:1px solid #d7d9ce;padding:34px 20px;position:sticky;top:0;align-self:start;height:calc(100vh - 80px)}.side-label,.eyebrow{font-size:10px;letter-spacing:1.5px;font-weight:600}.side-label{color:#6d7468;margin-bottom:24px}nav{display:grid;gap:5px}nav button{border:0;background:none;text-align:left;padding:12px 9px;display:flex;align-items:center;gap:12px;font-size:12px;color:#4e594d}nav button span{font-size:10px;color:#777e72}nav button b{margin-left:auto;font-weight:400;visibility:hidden}nav button.active{background:#e3e7db;color:#203d2d}nav button.active b{visibility:visible}.side-foot{position:absolute;bottom:30px;font-size:9px;letter-spacing:1px}.side-foot p{font-size:12px;letter-spacing:0;color:#697160;line-height:1.9}.side-foot small{font-size:9px;color:#757c6f;letter-spacing:0}.dot{display:inline-block;width:6px;height:6px;background:#4b7354;border-radius:50%;margin-right:7px}main{padding:0 42px;min-width:0}.intro{padding:52px 0 44px;border-bottom:1px solid #b9c0b1;position:relative}.intro h1{font-size:clamp(34px,4.2vw,62px);line-height:1.15;letter-spacing:-2.8px;margin:20px 0;font-weight:600}.intro h1 em{font-style:normal;color:#607753}.intro p{font-size:13px;color:#697160;line-height:1.9}.index-mark{position:absolute;right:35px;top:40px;font-family:Georgia,serif;font-size:150px;line-height:1.4;color:#a9b397;letter-spacing:-15px}.index-mark span{display:block;text-align:center;font:10px Arial;letter-spacing:2px;color:#697160}.section-head{display:flex;justify-content:space-between;align-items:center;margin-top:32px}.section-head h2,.study-card h2,.learning h2{font-size:23px;letter-spacing:-.9px;font-weight:600;margin:8px 0}.text-button{padding:5px 0;border:0;background:none;font-size:11px;color:#55614e}.lesson-description{font-size:12px;color:#65705e;margin:8px 0 25px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 208px;border:1px solid #cdd2c3}.canvas-area{background:#e8eae2;min-width:0}.canvas-toolbar{padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #d2d6ca}.segmented{display:flex;gap:3px}.segmented button{padding:6px 11px;border:0;background:none;font-size:10px;color:#5b6654}.segmented button[aria-pressed=true]{background:#fff;color:#243b29;box-shadow:0 1px 3px #00000010}.toggle{font-size:10px;display:flex;align-items:center;gap:5px;white-space:nowrap}input{accent-color:#426044}.canvases{padding:21px}.canvas-label{font-size:9px;letter-spacing:1px;color:#6e7864;margin-bottom:9px}.specimen{color:var(--ink);padding:var(--space);background:white;border-radius:var(--radius);min-height:365px;box-shadow:0 3px 20px #24351d08}.sample-top{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #e2e7de;padding-bottom:14px;font-size:8px;letter-spacing:1px}.sample-top span:last-child{letter-spacing:0;color:#737d6b}.desk-head{display:grid;grid-template-columns:var(--ratio) 1fr;gap:12px;align-items:center;margin:var(--space) 0}.specimen h2{font-size:var(--title);font-weight:var(--weight);letter-spacing:-1.8px;line-height:1.2;margin:10px 0 14px;overflow-wrap:anywhere}.specimen p{font-size:11px;color:#667260;line-height:1.8}.specimen .eyebrow{font-size:8px;color:var(--accent)}.metric{text-align:right;color:var(--accent)}.metric strong{font-family:Georgia,serif;font-weight:400;font-size:72px;line-height:1}.metric small{display:block;font-size:9px;margin-top:10px}.task-row{width:100%;border:0;border-top:1px solid #e1e6dc;background:none;display:flex;align-items:center;text-align:left;gap:10px;padding:var(--density) 0;color:var(--ink);font-size:11px}.task-row:hover{background:#f4f6f0}.task-row small{margin-left:auto;font-size:8px;white-space:nowrap}.check{width:13px;height:13px;border:1px solid #b9c2b0;border-radius:3px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.task-row.done .check{background:var(--accent);color:white}.task-row.done>span:nth-child(2){text-decoration:line-through;opacity:.6}.sample-bottom{font-size:8px;color:#74806b;display:flex;justify-content:space-between;gap:10px;border-top:1px solid #e1e6dc;padding-top:15px;margin-top:14px}.canvas-caption{padding:0 21px 17px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:9px;color:#727c67}.inspector{padding:22px 18px;background:#f8f9f3;border-left:1px solid #d1d6c6}.control{display:block;margin-bottom:20px}.control>span{display:flex;justify-content:space-between;font-size:10px;margin-bottom:8px}.control output{color:#717b66;font-variant-numeric:tabular-nums;font-size:10px}.control input{width:100%;height:3px;display:block;margin:12px 0}.colors{display:flex;gap:20px}.colors label{font-size:10px}.colors input{display:block;width:34px;height:25px;border:0;background:none;padding:0;margin-top:7px}.tradeoff{border-top:1px solid #d8ddcf;margin-top:22px;padding-top:18px;font-size:10px}.tradeoff>span{font-weight:600}.tradeoff p{color:#69755f;line-height:1.8}.compare{display:grid;grid-template-columns:1fr 1fr;gap:15px}.compare .specimen{padding:14px}.compare .specimen h2{font-size:calc(var(--title)*.65)}.compare .metric strong{font-size:40px}.compare .task-row{font-size:9px;gap:5px}.compare .sample-top span:last-child{display:none}.compare .sample-bottom{flex-direction:column}.lower-grid{display:grid;grid-template-columns:1.2fr 1fr;margin:28px 0 0;border:1px solid #cdd2c3}.study-card{padding:28px}.study-card+div{border-left:1px solid #cdd2c3}.study-card p{font-size:11px;color:#66725c}.button-gallery{display:flex;flex-wrap:wrap;gap:10px;margin:25px 0}.button{font-size:11px;padding:10px 14px;border:1px solid #315e4b;background:#315e4b;color:#fff;border-radius:3px;transition:background .15s}.button:hover{background:#234737}.button.secondary{background:transparent;color:#315e4b}.button.secondary:hover{background:#e4eadc}.button.quiet{background:none;border-color:transparent;color:#315e4b}.button:disabled{background:#e1e4da;border-color:#e1e4da;color:#858c7a}.interaction-demo{border-top:1px solid #d5dbcb;padding:18px 0;display:flex;gap:12px;align-items:center}.interaction-demo span{font-size:9px;color:#67715e}details{font-size:10px}summary{cursor:pointer}pre{font-size:10px;line-height:1.6;overflow:auto;white-space:pre-wrap}.contrast-number{display:flex;align-items:center;gap:18px;margin:22px 0}.contrast-number strong{font-size:40px;letter-spacing:-2px;font-weight:400}.contrast-number strong small{font-size:17px}.contrast-number>span{font-size:10px}.contrast-number>span small{display:block;font-size:9px;color:#728067;margin-top:4px}.type-sample{padding:14px;background:white;font-size:20px;font-weight:600;border:1px solid #dce2d3}.type-sample small{font-weight:400;font-size:11px}.learning{margin:60px 0;display:grid;grid-template-columns:1fr 1fr;gap:50px}.learning p{font-size:12px;color:#66725c;line-height:1.9}.sources a{display:flex;justify-content:space-between;padding:13px 0;text-decoration:none;font-size:12px;border-bottom:1px solid #cdd2c3}.sources small{font-size:10px;display:block;color:#6d7763;margin-top:4px}footer{border-top:1px solid #b9c0b1;padding:23px 0;display:flex;justify-content:space-between;font-size:11px}footer span{color:#6d7763}.code-wrap{background:#222c23;color:#e7eddf;padding:20px;font-size:10px}.code-wrap a{display:inline-block;margin-top:10px}.app-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:var(--space) 0}.app-tiles button{border:1px solid #dbe1d4;background:#f4f7ef;padding:var(--density);border-radius:var(--radius);text-align:left;color:var(--ink)}.app-tiles b{display:block;font-size:28px;font-weight:400;color:var(--accent)}.app-tiles strong{display:block;font-size:12px;margin:12px 0}.app-tiles small{font-size:8px}.editorial-grid{display:grid;grid-template-columns:calc(100% - var(--ratio)) 1fr;gap:var(--space);margin-top:var(--space);align-items:center}.art{position:relative;min-height:260px;background:#e1e9d5;color:var(--accent);overflow:hidden;display:flex;align-items:center;justify-content:center}.art>span{font:85px Georgia;letter-spacing:-12px}.art i{position:absolute;bottom:45px;right:8px;font-size:65px;opacity:.2}.art small{position:absolute;bottom:12px;font-size:7px;letter-spacing:1px}.editorial-grid a{font-size:10px}.editorial-grid h2{font-size:calc(var(--title)*.8)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:14px 22px;background:#243b29;color:white;border:0;font-size:12px;box-shadow:0 4px 20px #0002;z-index:5}@media(min-width:1500px){main{padding:0 65px}.intro{padding:65px 0}.workspace{grid-template-columns:minmax(0,1fr) 240px}.specimen{min-height:420px}}@media(max-width:1100px){.shell{grid-template-columns:175px 1fr}main{padding:0 25px}aside{padding:28px 12px}.workspace{grid-template-columns:minmax(0,1fr) 180px}.inspector{padding:20px 13px}.canvases{padding:15px}.index-mark{right:0;font-size:125px}.specimen h2{font-size:calc(var(--title)*.8)}.metric strong{font-size:50px}.lower-grid{grid-template-columns:1fr}.study-card+div{border-left:0;border-top:1px solid #cdd2c3}.compare{grid-template-columns:1fr}.compare .specimen h2{font-size:calc(var(--title)*.8)}}@media(max-width:760px){.topbar{height:64px;padding:0 20px}.topnote{display:none}.brand{font-size:21px}.shell{display:block}aside{height:auto;position:static;border-right:0;border-bottom:1px solid #d7d9ce;padding:0;overflow:auto}aside>.side-label,.side-foot{display:none}nav{display:flex;gap:0;width:max-content;padding:8px 12px}nav button{padding:10px;font-size:11px}nav button b{display:none}nav button span{font-size:8px}main{padding:0 20px}.intro{padding:34px 0 26px}.intro h1{font-size:40px;letter-spacing:-2px}.intro .eyebrow{font-size:8px}.intro p{font-size:11px;max-width:260px}.index-mark{font-size:80px;top:70px;right:0;opacity:.5;letter-spacing:-8px}.index-mark span{display:none}.workspace{grid-template-columns:1fr}.inspector{border-left:0;border-top:1px solid #d1d6c6;display:grid;grid-template-columns:1fr 1fr;gap:0 25px;padding:20px}.inspector>.side-label,.tradeoff{grid-column:1/-1}.control{margin-bottom:22px}.tradeoff{margin-top:12px}.canvases{padding:13px}.canvas-toolbar{padding:12px;flex-wrap:wrap}.specimen{padding:min(var(--space),24px)}.specimen h2{font-size:calc(var(--title)*.78)}.metric strong{font-size:48px}.canvas-caption{padding:0 13px 13px;align-items:flex-start}.canvas-caption>span{max-width:70%}.canvas-caption button{white-space:nowrap}.lesson-description{font-size:11px}.section-head h2{font-size:22px}.study-card{padding:23px}.learning{margin:42px 0;grid-template-columns:1fr;gap:18px}.learning h2{font-size:22px}footer{gap:10px;flex-wrap:wrap;font-size:9px}footer span{display:none}.editorial-grid{gap:15px}.art{min-height:230px}.art>span{font-size:65px}.editorial-grid h2{font-size:calc(var(--title)*.6)}.app-tiles{gap:6px}.app-tiles button{padding:10px}.sample-top{font-size:7px}.sample-bottom{font-size:7px}.compare .specimen h2{font-size:calc(var(--title)*.78)}.contrast-number{gap:13px}.toast{width:85%;font-size:11px}.task-row{font-size:10px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.composition-studies{border-bottom:1px solid #cdd2c3;padding:35px 0}.study-links{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}.study-links a{display:inline-block;padding:12px 16px;background:#e4e8dc;text-decoration:none;font-size:12px}
@media(max-width:760px){.index-mark{display:none}}
.specimen h2{word-break:keep-all;overflow-wrap:normal}.desk-head>div{min-width:0}@media(max-width:760px){.specimen h2,.compare .specimen h2{font-size:calc(var(--title)*.62);letter-spacing:-1px}.editorial-grid h2{font-size:calc(var(--title)*.55)}}