@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{--paper:#f8f7f3;--ink:#233c32;--muted:#7b827c;--line:#e2e5dc;--accent:#e6edbd}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:14px 'DM Sans',sans-serif}button,input,select{font:inherit}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}button,.button{border:1px solid var(--line);background:white;color:var(--ink);border-radius:7px;padding:11px 16px;cursor:pointer;font-size:13px;display:inline-block}button:hover,.button:hover{border-color:#8fa18f;text-decoration:none}button:disabled{opacity:.35;cursor:default}.primary{background:var(--ink);border-color:var(--ink);color:white}button[aria-pressed=true]{background:var(--accent);border-color:#9ba976}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #a9b979;outline-offset:3px}header{height:76px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.logo{font-size:25px;font-weight:600;letter-spacing:-1.3px}.logo b{font-weight:400;color:#91a271}nav{display:flex;align-items:center;gap:25px;font-size:12px}h1,h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-1px}h1{font-size:clamp(48px,6vw,80px);line-height:1.02;margin:20px 0}h2{font-size:38px;margin:16px 0}h3{font-weight:500;font-size:20px}.muted,.lede{color:var(--muted);line-height:1.8}.lede{font-size:17px;max-width:580px}.eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase}.wrap{max-width:1280px;margin:auto;padding:0 5%}.hero{padding:70px 0;display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}.hero em{font-weight:400;color:#829267}.hero .button{margin-top:18px}.demo{border:1px solid var(--line);background:#fff;border-radius:16px;padding:22px;transform:rotate(2deg)}.demo svg{display:block;width:100%;height:350px}.demo p{font-size:11px;text-align:center;color:var(--muted);margin:15px 0 0}.strip{border-block:1px solid var(--line);padding:20px 0;display:flex;gap:30px;justify-content:space-between;font-size:12px;color:var(--muted)}.section{padding:55px 0}.section-head{display:flex;justify-content:space-between;align-items:center;gap:24px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}.card-body{padding:20px}.card h3{margin:10px 0}.card p{font-size:13px;line-height:1.8;color:var(--muted)}.illustration{height:200px;background:#eef0e6;overflow:hidden}.illustration svg{width:100%;height:100%}.article{max-width:790px;margin:auto;padding:60px 0;line-height:1.9}.article h1{font-size:60px}.article h2{font-size:34px;margin-top:34px}.article .illustration{height:320px;border-radius:12px;margin:28px 0}.article a:not(.button){text-decoration:underline}.note{background:#edf0df;border-radius:8px;padding:22px;margin:25px 0}.article li{margin-bottom:10px}footer{border-top:1px solid var(--line);padding:30px 5%;display:flex;justify-content:space-between;gap:25px;font-size:11px;color:var(--muted)}footer .links{display:flex;flex-wrap:wrap;gap:20px}.studio-page{max-width:1680px;margin:auto;padding:25px 3% 40px}.studio-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:20px}.studio-head h1{font-size:36px;letter-spacing:-.6px;margin:0}.studio-head p{font-size:12px;color:var(--muted);margin:8px 0 0}.history{display:flex;gap:8px}.workbench{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start}.tools{border:1px solid var(--line);border-radius:12px;padding:18px;background:#fff}.tool-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:var(--paper);padding:4px;border-radius:8px}.tool-switch button{padding:9px 4px;border:0;background:none}.tool-switch button[aria-pressed=true]{background:var(--ink);color:white}.group{padding-top:20px}.group+.group{border-top:1px solid var(--line);margin-top:20px}.group-label,label{font-size:11px;display:block;margin-bottom:10px;color:var(--muted)}select{border:1px solid var(--line);border-radius:6px;padding:9px;width:100%;background:white;color:var(--ink)}.stamp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.stamp-grid button{padding:8px 0;font-size:23px;height:43px}.stamp-grid button svg{width:24px;height:24px;vertical-align:middle}.color-line{display:flex;gap:8px;align-items:center;justify-content:space-between}input[type=color]{width:38px;height:34px;padding:2px;border:1px solid var(--line);border-radius:5px;background:white;cursor:pointer}.color-label{font-size:11px}.swatches{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.swatches button{width:21px;height:21px;border-radius:50%;padding:0;border:1px solid #0002}.range-label{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:8px}input[type=range]{width:100%;accent-color:var(--ink)}.check{display:flex;gap:8px;align-items:center;font-size:11px;color:var(--muted);margin-top:13px}.check input{accent-color:var(--ink)}.stage{position:sticky;top:18px;height:calc(100dvh - 36px);max-height:750px;min-height:400px;display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;align-items:stretch}.draw-area,.preview-area{border:1px solid var(--line);border-radius:12px;background:white;overflow:hidden;display:flex;flex-direction:column;min-width:0}.area-label{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;flex-shrink:0}.area-label span:last-child{color:var(--muted);letter-spacing:0;font-size:10px;text-transform:none}.pad-surround{flex:1;min-height:0;display:grid;place-items:center;background:#eeefe9;padding:28px}.paper{width:100%;max-height:100%;aspect-ratio:1;position:relative;min-width:0;min-height:0;max-width:600px;box-shadow:0 3px 20px #24372f09;background:repeating-conic-gradient(#e2e5dc 0% 25%,#fff 0% 50%) 0/16px 16px}.paper svg{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline-offset:3px}.preview-frame{flex:1;min-height:0;background:repeating-conic-gradient(#e2e5dc 0% 25%,#fff 0% 50%) 0/16px 16px}.preview-frame svg{display:block;width:100%;height:100%}.empty-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:#97a08e;font-family:'Instrument Serif',Georgia,serif;font-size:26px}.area-bottom{padding:12px 16px;font-size:10px;line-height:1.6;color:var(--muted);border-top:1px solid var(--line);flex-shrink:0}.export-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;margin:20px 0}.export-buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.export-buttons select{width:110px;font-size:12px;padding:10px}.status{font-size:11px;color:var(--muted);min-height:18px}.help{max-width:850px;padding:20px 0;color:var(--muted);font-size:12px;line-height:1.8}.help summary{cursor:pointer;color:var(--ink)}.hidden{display:none!important}.clear-confirm{padding:10px;background:#f8eee6;border-radius:7px;font-size:11px;margin-top:12px}.clear-confirm button{padding:6px 8px;margin-top:8px;font-size:11px}@media(min-width:1000px){.paper{height:100%;width:auto;max-width:100%;aspect-ratio:1}}@media(max-width:1100px){.stage{grid-template-columns:minmax(0,1fr) 170px}.pad-surround{padding:16px}.area-label{padding:12px;font-size:9px}.area-label span:last-child{display:none}}@media(max-width:760px){header{height:65px}nav{gap:15px}nav a{font-size:11px}.hero{grid-template-columns:1fr;gap:30px;padding:40px 0}.demo svg{height:260px}.strip{flex-wrap:wrap;gap:15px}.grid{grid-template-columns:1fr 1fr}.workbench{display:flex;flex-direction:column;gap:14px}.stage{order:-1;top:0;z-index:10;width:100%;height:43dvh;min-height:230px;max-height:400px;grid-template-columns:minmax(0,1fr) 32%;gap:8px;background:var(--paper);padding:8px 0;box-shadow:0 8px 12px #24372f08}.tools{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:16px}.tools>.tool-switch{grid-column:1/-1}.group{padding-top:0}.group+.group{margin-top:0;padding-top:0;border-top:0}.pad-surround{padding:10px}.paper{height:100%;width:auto;max-width:100%}.area-label{padding:10px;font-size:8px}.area-bottom{font-size:9px;padding:7px 10px}.studio-head h1{font-size:29px}.studio-head p{font-size:11px}.history button{padding:9px}.article{padding-top:35px}.article h1{font-size:46px}footer{flex-direction:column}.export-row{align-items:start;gap:15px}.studio-page{padding-top:20px}.help{font-size:11px}}@media(max-width:450px){.grid{grid-template-columns:1fr}.studio-head{align-items:start}.history{gap:4px}.history button{padding:8px;font-size:11px}.stage{grid-template-columns:minmax(0,1fr) 29%}.tools{gap:15px}.area-label{letter-spacing:0}.area-bottom{font-size:8px}.logo{font-size:23px}}

.pad-surround{container-type:size}.paper{height:auto;width:min(100%,600px)}@supports(width:1cqw){.paper{width:min(100cqw,100cqh);height:auto;max-width:600px;max-height:600px}}

.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 0 12px}.swatches button{width:100%;height:35px;border-radius:7px;color:white;font-size:18px;text-shadow:0 1px 3px #000}.swatches button[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:3px}.swatches button[aria-pressed=false]{outline:none}#edit-color{width:100%;font-size:11px;padding:8px}#color-editor{padding-top:15px}.palette-note{font-size:10px;line-height:1.6;color:var(--muted);margin:10px 0 0}#color-wheel{width:145px;max-width:100%;aspect-ratio:1;border-radius:50%;position:relative;margin:0 auto 18px;touch-action:none;cursor:crosshair;background:radial-gradient(circle,white 0%,transparent 70%),conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}#wheel-thumb{position:absolute;width:12px;height:12px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #333;transform:translate(-50%,-50%);pointer-events:none}#hex-color{width:100%;border:1px solid var(--line);padding:8px;border-radius:6px;color:var(--ink)}#repeat{cursor:zoom-in}#repeat:focus-visible{outline:3px solid #8a9e6c;outline-offset:-3px}#preview-dialog{border:1px solid var(--line);border-radius:15px;padding:22px;width:min(94vw,1300px);max-width:94vw;height:88dvh;max-height:92dvh;background:var(--paper);color:var(--ink)}#preview-dialog[open]{display:flex;flex-direction:column}#preview-dialog::backdrop{background:#172b24b8;backdrop-filter:blur(5px)}.preview-heading{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}.preview-heading h2{margin:0;font-size:30px}#large-repeat{flex:1;min-height:0;background:repeating-conic-gradient(#e2e5dc 0% 25%,#fff 0% 50%) 0/16px 16px;border-radius:8px;overflow:hidden}#large-repeat svg{width:100%;height:100%;display:block}#preview-dialog>p{font-size:11px;color:var(--muted);margin-bottom:0}@media(max-width:760px){.preview-heading h2{font-size:24px}#preview-dialog{padding:15px;height:85dvh}.swatches{grid-template-columns:repeat(3,1fr)}.preview-area .area-label span:last-child{display:inline;font-size:8px}.preview-area .area-label{flex-wrap:wrap;gap:4px}#color-wheel{width:140px}}

.preview-area{align-self:start}.preview-frame{flex:none;aspect-ratio:1;width:100%}.preview-frame svg{aspect-ratio:1}.preview-area .area-bottom{font-size:9px}.preview-area{height:auto}#large-repeat{flex:none;width:min(100%,65dvh);aspect-ratio:1;align-self:center}#preview-dialog{height:auto;max-height:94dvh}.color-line{flex-wrap:wrap}.color-line input[type=color]{width:100%;height:38px}

#edit-background{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;font-size:11px;padding:9px}#background-swatch{width:22px;height:22px;border:1px solid #0002;border-radius:50%;display:inline-block}

.editorial-image{display:block;width:100%;height:100%;object-fit:cover}.hero-pattern{width:100%;display:block;aspect-ratio:1;object-fit:cover;border-radius:8px}.demo{padding:14px;background:#fffdf9;box-shadow:0 18px 55px #283c3010}.demo p{padding:0 8px}.hero{gap:8%;padding-block:75px}.hero h1{font-size:clamp(54px,6.5vw,88px)}.card{transition:transform .18s,box-shadow .18s}.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px #233c320b;text-decoration:none}.card .illustration{height:235px}.article{max-width:860px}.article-figure{margin:30px 0 45px}.article-figure img{aspect-ratio:4/3;height:auto;border-radius:14px;border:1px solid var(--line)}figcaption{font-size:11px;line-height:1.7;color:var(--muted);margin-top:10px}.step-figure{margin:25px 0 46px}.step-figure img{aspect-ratio:4/3;object-fit:contain;border:1px solid var(--line);border-radius:10px;height:auto}.recipe{background:#eeeedd;border:1px solid #dce0ca;padding:25px 30px;border-radius:12px;margin:30px 0}.recipe ul{margin:15px 0;padding-left:19px;font-size:14px}.recipe p{font-size:12px;color:var(--muted);margin-bottom:0}.download-example{padding:25px;border:1px solid var(--line);border-radius:12px;background:white}.download-example p{font-size:13px;color:var(--muted)}.related{margin-top:50px;padding-top:25px;border-top:1px solid var(--line)}.related a{display:block;font-size:15px;margin-top:13px}.process-band{background:#e9eddf;padding:40px;border-radius:14px;margin:35px 0}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:25px}.process-grid span{font-family:'Instrument Serif',Georgia,serif;font-size:30px;color:#91a17a}.process-grid h3{font-size:19px}.process-grid p{font-size:13px;color:#667363;line-height:1.8}.closing{display:flex;justify-content:space-between;align-items:center;background:#233c32;color:#f9f7ee;border-radius:15px;padding:45px;margin:10px 0 60px;gap:30px}.closing h2{font-size:44px}.closing p{color:#c1cdbd}.closing .button{background:#e5edbf;color:#233c32;white-space:nowrap}.illustration img{object-fit:cover}.article .lede{max-width:680px}.article h2{padding-top:10px}.history button{white-space:nowrap}#rotate{display:flex;align-items:center;justify-content:space-between}#rotate-value{font-variant-numeric:tabular-nums;font-size:11px;color:var(--muted)}@media(max-width:760px){.hero{padding-block:40px;gap:35px}.process-band{padding:25px}.process-grid{grid-template-columns:1fr;gap:18px}.process-grid h3{margin:8px 0}.process-grid p{margin-top:8px}.closing{flex-direction:column;align-items:start;padding:28px}.closing h2{font-size:36px}.recipe{padding:20px}.article-figure{margin-bottom:30px}.step-figure{margin-bottom:30px}.card .illustration{height:220px}}

.hero-pattern{aspect-ratio:4/3;object-position:50% 50%}.demo{transform:none;padding:0;border:none;background:none;box-shadow:none}.demo img{border-radius:14px}.demo p{font-size:10px;text-align:left;line-height:1.6;margin-top:12px}.hero{grid-template-columns:.9fr 1.2fr;gap:6%}.hero h1{font-size:clamp(48px,5.9vw,80px)}.card .illustration{height:auto;aspect-ratio:4/3}.article-figure img{border:0;object-fit:contain}.article-figure{margin-top:36px}.reference-tile{float:right;width:130px;height:130px;object-fit:cover;margin:0 0 15px 20px;border-radius:8px;border:1px solid var(--line)}.download-example:after{content:'';display:block;clear:both}.download-example>p{max-width:580px}.step-figure{max-width:720px;margin:28px auto 40px}.step-figure img{background:#f0eee6}.step-figure figcaption{font-size:11px}.article h2{margin-top:40px}@media(max-width:760px){.hero{grid-template-columns:1fr}.hero-pattern{aspect-ratio:4/3}.reference-tile{width:95px;height:95px}.demo p{padding:0}.article-figure img{border-radius:9px}}

.card-number{padding:24px 20px;background:#e9eddf;color:#6b7b60;font-size:11px;letter-spacing:2px}.contact-email{font-size:clamp(20px,4vw,32px);margin:35px 0 90px}.article code{font-size:12px;overflow-wrap:anywhere}

.illustration img{width:100%;height:100%;display:block;object-fit:cover}.contact-page{max-width:960px}.contact-page h1{font-size:clamp(48px,6vw,76px)}.contact-address{display:inline-block;font-size:clamp(22px,3vw,32px);margin:20px 0 45px;color:#526f45}.contact-topics{display:grid;grid-template-columns:1fr 1fr;gap:40px;border-block:1px solid var(--line);padding:35px 0}.contact-topics h2{font-size:32px;margin-top:10px;padding-top:0}.contact-topics p,.contact-note p{font-size:14px}.contact-note{padding:15px 0 10px}.contact-note h2{font-size:34px}.contact-note a{text-decoration:underline}@media(max-width:650px){.contact-topics{grid-template-columns:1fr;gap:25px}.contact-address{margin-bottom:30px}}
/* Worked lessons: authentic output first, styling inspiration second. */
.layout-study{margin:40px 0;padding:25px;border:1px solid var(--line);border-radius:12px;background:#fffdf8}.layout-study figure{margin:25px auto;max-width:440px}.layout-study svg{display:block;width:100%;height:auto;max-height:520px;filter:drop-shadow(0 5px 14px #233c3210)}.layout-study p{font-size:13px!important}.layout-study h2{font-size:32px}.lesson-intro{border-top:1px solid var(--line);padding-top:18px}.lesson-meta{font-size:12px!important;color:var(--muted)}.worked-example{margin:32px 0 48px;padding:26px;background:#eeefe6;border:1px solid var(--line);border-radius:14px}.worked-example h2{margin-top:12px!important;font-size:32px}.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:24px 0 16px}.example-grid figure{margin:0;min-width:0}.example-grid img,.example-grid svg{width:100%;height:auto;display:block;aspect-ratio:1;border-radius:8px;background:#faf8f1;border:1px solid #233c3215}.example-grid figcaption{font-size:12px;color:#526452}.example-caption,.small-note{font-size:12px!important;line-height:1.8!important;color:#526452}.save-note{background:#f0ede4;padding:22px;border-left:3px solid #91a17a;line-height:1.9;margin:36px 0;font-size:13px}.lesson-actions{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0 40px}.inspiration{border-block:1px solid var(--line);padding:20px 0;margin:40px 0}.inspiration summary,.help-questions summary{cursor:pointer;font-weight:500;line-height:1.6}.inspiration p{font-size:13px!important}.inspiration .article-figure{max-width:600px;margin:20px auto}.help-questions details{border-bottom:1px solid var(--line);padding:22px 0}.help-questions p{margin-bottom:0}.learning-path{padding:24px;background:#e9eddf;border-radius:10px;margin-top:26px;max-width:860px}.learning-path p{line-height:1.9;margin-bottom:0}.article p a,.learning-path a{text-decoration:underline;text-underline-offset:3px}footer .links{flex-wrap:wrap}.article section[id]{scroll-margin-top:24px}@media(max-width:600px){.worked-example{padding:16px;margin-inline:-3px}.worked-example h2{font-size:29px}.example-grid{gap:10px}.example-grid figcaption{font-size:11px}.lesson-actions .button{width:100%;text-align:center}.learning-path{padding:20px}footer{gap:22px}.help-questions summary{padding-right:8px}}