:root{font-family:Inter,Arial,sans-serif;color:#203f42;background:#f4efdf;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border:1px solid #c5c9ba;background:transparent;color:inherit;padding:12px 14px;text-align:left;border-radius:4px;transition:background .16s,transform .16s}button:hover{background:#e4e7d3;transform:translateY(-1px)}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #db7139;outline-offset:2px}main{min-height:100vh;padding:0 4vw}header{display:flex;justify-content:space-between;align-items:center;padding:30px 0;border-bottom:1px solid #c7cabb}.brand{font-size:30px;font-weight:800;color:inherit;text-decoration:none}.brand span,.privacy,.eyebrow,.stage-top,.stage-bottom{font-size:11px;letter-spacing:2px}.brand span{margin-left:25px}.intro{display:flex;justify-content:space-between;gap:40px;align-items:center;padding:54px 0 40px}h1{font-size:clamp(45px,6vw,88px);line-height:1;letter-spacing:-5px;margin:15px 0 24px;font-weight:550}h1 em{font-family:Georgia,serif;color:#aa5b35;font-weight:400}.lede{line-height:1.6;color:#657470}.study{width:300px;border-left:2px solid #b9c1aa;padding:22px;overflow-wrap:anywhere}.study span{font-size:10px;letter-spacing:2px}.study strong{display:block;font-family:Georgia,serif;font-size:32px;margin:14px 0}.study small{color:#657470}.workspace{display:grid;grid-template-columns:230px minmax(260px,1fr) 250px;border-top:1px solid #c7cabb;padding:30px 0;gap:30px}h2{font-size:13px;font-weight:600;margin:20px 0;letter-spacing:1px}.stack{display:grid;gap:8px}.stack button{display:flex;justify-content:space-between}.selected{background:#203f42!important;color:#fff}.brushes,.row{display:flex;gap:6px;flex-wrap:wrap}.brushes button{padding:10px}.hint,.note{font-size:12px;line-height:1.65;color:#61716c}.stage{background:#e7e7d9;padding:22px;border-radius:10px;min-width:0;align-self:start;box-shadow:0 15px 45px #203f4210}.stage-top,.stage-bottom{display:flex;justify-content:space-between;gap:10px;font-size:9px;letter-spacing:1px}.grid,.preview{margin:24px auto;aspect-ratio:1;max-width:590px;width:100%;background:#fbf8ed;display:block}.preview svg{width:100%;height:100%;display:block}.grid{display:grid;grid-template-columns:repeat(24,1fr);gap:1px;background:#d4d8c8;padding:1px}.cell{border:0;padding:0;border-radius:0;min-width:0;min-height:0;background:#faf8ed;transition:background .12s}.cell:hover{outline:2px solid #203f42;z-index:1}.c1{background:#cf8146}.c2{background:#88759d}.note{margin-top:25px;padding:20px;border:1px dashed #aab9a4}.editor{border-top:1px solid #c7cabb;display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:45px 0}.editor h2{font:36px Georgia,serif;letter-spacing:-1px}.editor p,footer p{font-size:13px;line-height:1.7;max-width:800px}.editor label{font-size:12px;display:flex;flex-direction:column;gap:10px;min-width:0}textarea{width:100%;min-height:280px;background:#fcf9ef;border:1px solid #b8c3ad;padding:16px;font:12px monospace;color:#203f42;resize:vertical}footer{border-top:1px solid #c7cabb;padding:30px 0 50px}footer button{font-size:12px}p[role=status]{font-size:12px;min-height:2em}p[role=alert]{color:#972b22}@media(max-width:1100px){.workspace{grid-template-columns:180px minmax(240px,1fr)}.exports{grid-column:1/-1}.exports .stack{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){main{padding:0 20px}.privacy{display:none}.intro{display:block;padding-top:30px}h1{letter-spacing:-2px}.study{width:100%;margin-top:25px}.workspace,.editor{display:block}.stage{margin-top:25px;padding:12px}.exports .stack{grid-template-columns:1fr}.editor label{margin-top:30px}.brand span{margin-left:10px}.stage-top,.stage-bottom{font-size:8px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}.study strong{white-space:pre-wrap;overflow-wrap:anywhere}.intro>div{min-width:0}.study{flex-shrink:1;max-width:100%}