:root{--paper:#f5f3ed;--ink:#18384b;--muted:#566d76;--line:#d9dfda;--orange:#a84626;--mint:#dce7df;--white:#fffefa;--radius:18px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button,.button,select{min-height:44px;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:10px;padding:10px 15px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px}button:hover,.button:hover{border-color:var(--ink);background:#e9eee8}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--orange);outline-offset:4px}button:disabled{opacity:.5;cursor:wait}.primary{background:var(--ink);color:#fffefa;border-color:var(--ink)}.primary:hover{background:#27546a;color:white}.accent{background:var(--orange);border-color:var(--orange);color:white}.quiet{background:transparent}.skip{position:absolute;top:-60px;background:white;padding:10px;z-index:10}.skip:focus{top:0}header{padding:22px 4vw;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:25px;font-weight:650;letter-spacing:-1px}.brand small{display:block;font-size:9px;letter-spacing:2px;font-weight:600;margin-top:3px}.brand-mark{font-size:42px;color:var(--orange);line-height:1}.header-actions{display:flex;align-items:center;gap:20px}#save-status{font-size:12px;color:var(--muted)}nav{display:flex;gap:6px;padding:12px 4vw;border-bottom:1px solid var(--line);overflow:auto}nav a{flex:1;max-width:180px;color:var(--muted);text-decoration:none;padding:10px 16px;border-radius:9px;white-space:nowrap;font-weight:600}nav span{font-size:11px;margin-right:9px;opacity:.7}nav a[aria-current]{background:var(--ink);color:white}main{max-width:1550px;padding:36px 4vw 65px;margin:auto}h1{font:normal clamp(32px,4vw,48px)/1.15 Georgia,serif;letter-spacing:-1.4px;margin:0 0 12px}h2{font-size:23px;line-height:1.3;margin:0 0 12px;letter-spacing:-.5px}h3{font-size:17px;margin:0 0 7px}p{margin:0 0 14px}.intro{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}.intro p{color:var(--muted);max-width:670px;margin:0}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:750;color:var(--orange);margin-bottom:10px}.studio{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:26px;align-items:start}.preview-area{position:sticky;top:20px}.preview-mat{background:#e5e9e3;padding:26px;border-radius:var(--radius);border:1px solid #d8ded7}.preview-mat svg{display:block;width:100%;height:auto;box-shadow:0 10px 25px #18384b12;max-height:65vh}.preview-toolbar,.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.preview-toolbar{justify-content:space-between;margin:18px 0}.segmented{display:inline-flex;gap:2px;padding:3px;background:#e6eae3;border-radius:11px}.segmented button{border:none;background:transparent;font-size:13px;min-height:38px;padding:8px 12px}.segmented button[aria-pressed=true]{background:var(--white);box-shadow:0 1px 4px #18384b13}.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px}.control-panel{display:grid;gap:22px}.control-panel h3{font-size:12px;text-transform:uppercase;letter-spacing:1.4px;margin:0 0 10px}.field{display:block;margin-bottom:14px;font-size:13px;font-weight:600}.field input:not([type=range]):not([type=color]),.field select{display:block;width:100%;margin-top:6px;border:1px solid var(--line);border-radius:9px;padding:10px;background:var(--white);color:var(--ink)}.field input[type=range]{display:block;width:100%;accent-color:var(--orange);margin:10px 0 0}.field input[type=color]{width:46px;height:38px;padding:2px;border:1px solid var(--line);border-radius:8px;background:transparent}.colour-fields{display:flex;gap:16px;justify-content:space-between}.colour-fields .field{font-size:11px;margin:0}.colour-fields input{display:block;margin-top:6px}.tiny{font-size:12px;color:var(--muted)}.note{font-size:13px;color:var(--muted);line-height:1.6}.tip{padding:16px 19px;background:var(--mint);border-radius:12px;font-size:14px}.tip p{margin:0}.tip b{display:block;margin-bottom:4px}.checkline{display:flex;gap:9px;align-items:center;font-size:13px}.checkline input{width:18px;height:18px;accent-color:var(--ink)}.pill{border-radius:30px;padding:5px 10px;background:var(--mint);font-size:11px}.status-warn{background:#f9e7d7;color:#813d22}.section-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:32px 0 15px}.section-head h2{margin:0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.card .content{padding:19px}.card svg{display:block;width:100%;height:auto}.card button{width:100%;margin-top:12px}.card p{font-size:14px;color:var(--muted);margin:0}.card.selected{outline:2px solid var(--ink);outline-offset:2px}.card .thumb{padding:15px;background:#e5e9e3}.card .thumb svg{box-shadow:0 3px 9px #18384b0a}.filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:25px}.filter-row button[aria-pressed=true]{background:var(--ink);color:white}.swatches{display:flex;height:110px}.swatches span{flex:1}.palette-codes{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.palette-codes button{width:auto;font-family:monospace;font-size:11px;min-height:36px;margin:0;padding:6px}.lesson-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:28px}.lesson-nav{display:grid;gap:7px;align-content:start}.lesson-nav button{justify-content:start;text-align:left}.lesson-nav button[aria-pressed=true]{background:var(--ink);color:white}.lesson-num{font-size:11px;opacity:.65;margin-right:6px}.lesson-canvas svg{width:100%;display:block;border-radius:12px;margin:20px 0}.lesson-body{max-width:850px}.lesson-body h2{font:normal 31px Georgia,serif}.lesson-body>p{font-size:18px}.lesson-action{display:flex;gap:14px;margin-top:20px;align-items:center}.checklist{display:grid;grid-template-columns:1fr 1fr;gap:15px}.check-card{display:flex;align-items:start;gap:15px;border:1px solid var(--line);padding:24px;border-radius:15px;background:var(--white);cursor:pointer}.check-card input{width:23px;height:23px;accent-color:var(--ink);flex-shrink:0;margin-top:4px}.check-card b{display:block;font-size:18px}.check-card small{display:block;color:var(--muted);margin-top:5px}.progress{height:7px;background:var(--line);border-radius:20px;overflow:hidden;margin:15px 0}.progress span{display:block;height:100%;background:var(--orange);transition:width .2s}.check-footer{margin:24px 0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}.saved-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.saved-card{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:10px}.saved-card svg{display:block;width:100%;height:auto}.saved-card .row{margin-top:9px}.saved-card button{font-size:12px;min-height:36px;padding:7px 9px}.saved-card b{font-size:12px;display:block;margin-top:9px}details{border-top:1px solid var(--line);padding-top:16px}summary{cursor:pointer;font-size:13px;font-weight:650;margin-bottom:12px;min-height:32px}dialog{border:1px solid var(--line);border-radius:22px;max-width:660px;width:calc(100% - 30px);padding:30px;color:var(--ink);background:var(--white);max-height:90vh;overflow:auto}dialog::backdrop{background:#18384b66;backdrop-filter:blur(4px)}.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.dialog-top p{margin:0}.dialog-top button{min-height:36px;width:36px;padding:0}.steps{padding-left:25px}.steps li{padding-left:5px;margin-bottom:20px}.steps p{font-size:14px;margin:4px 0}dialog hr{border:0;border-top:1px solid var(--line);margin:25px 0}#export-image{width:100%;height:auto;border:1px solid var(--line);margin:10px 0 18px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:13px 22px;border-radius:12px;background:var(--ink);color:white;box-shadow:0 5px 25px #18384b30;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;text-align:center;font-size:14px}#toast.visible{opacity:1}.empty{padding:22px;border:1px dashed #a8b8b0;border-radius:12px;color:var(--muted);font-size:14px}.export-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:17px 0}.mini-stat{display:flex;gap:10px;align-items:center}.full-preview{position:fixed;inset:0;background:var(--paper);z-index:9;padding:25px;overflow:auto}.full-preview .preview-mat{max-width:1200px;margin:auto}.full-preview .preview-mat svg{max-height:73vh}.full-preview .preview-toolbar{max-width:1200px;margin:15px auto}.full-preview .tip,.full-preview .export-buttons,.full-preview>.note{max-width:1200px;margin:15px auto}.key{font-family:monospace}.pattern-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.pattern-grid button{padding:8px 5px;font-size:12px;min-height:48px}.pattern-grid button[aria-pressed=true]{background:var(--ink);color:white}.recipe{display:flex;gap:24px;flex-wrap:wrap;padding:18px 0}.recipe span{font-size:12px;color:var(--muted)}.recipe b{display:block;color:var(--ink);font-size:14px}.wide-callout{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px;margin-bottom:25px}.wide-callout p{margin:0}.border-top{border-top:1px solid var(--line);padding-top:20px}
@media(min-width:1450px){.studio{grid-template-columns:minmax(0,1fr) 340px}}@media(max-width:1050px){.studio{grid-template-columns:minmax(0,1fr) 270px;gap:18px}.preview-mat{padding:16px}main{padding:28px 3vw 50px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-actions #save-status{display:none}.saved-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){header{padding:17px 5vw}.brand{font-size:21px}.brand small{font-size:8px;letter-spacing:1.4px}.header-actions button{font-size:12px;padding:8px}.brand-mark{display:none}nav{padding:10px 3vw;gap:3px}nav a{padding:10px;font-size:13px;text-align:center}nav span{display:none}main{padding:25px 5vw 45px}.intro{display:block}.intro .pill{display:inline-block;margin-top:12px}.studio{grid-template-columns:1fr}.preview-area{position:static}.preview-mat{padding:16px}.control-panel{grid-template-columns:1fr 1fr;gap:20px}.control-panel .panel{padding:18px}.control-panel .panel:first-child{grid-column:1/-1}.grid{gap:14px}.card .content{padding:15px}.lesson-shell{grid-template-columns:1fr}.lesson-nav{display:flex;overflow:auto;padding-bottom:7px}.lesson-nav button{white-space:nowrap}.checklist{grid-template-columns:1fr}.saved-grid{grid-template-columns:repeat(2,1fr)}.wide-callout{display:block}.wide-callout button{margin-top:12px}}@media(max-width:440px){.grid,.control-panel{grid-template-columns:1fr}.preview-toolbar{align-items:start}.preview-toolbar .row{gap:5px}.intro p{font-size:14px}.check-card{padding:18px}.header-actions button{max-width:120px}.export-buttons button{flex:1;font-size:13px}.panel{padding:18px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}