:root{font-family:Arial,Helvetica,sans-serif;color:#302c39;background:#f1ece2;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button,a,input,textarea{touch-action:manipulation}button{cursor:pointer;border:1px solid #d3cabe;border-radius:7px;padding:10px 12px;background:#fffaf0;color:inherit;transition:background .15s,transform .15s}button:hover{background:#e2edf0}button:active{transform:translateY(1px)}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #2485ad;outline-offset:2px}button:disabled{opacity:.5;cursor:wait}header{display:flex;align-items:center;justify-content:space-between;padding:24px 3vw;border-bottom:1px solid #d3cabe}.brand{display:flex;gap:15px;text-decoration:none;color:inherit;font-weight:700;font-size:22px;line-height:1}.brand>span{font-size:12px;letter-spacing:2px}header p,.eyebrow{letter-spacing:2px;font-size:10px}main{min-height:100dvh}.intro{padding:45px 4vw 34px;display:grid;grid-template-columns:1fr 1fr;column-gap:5vw}.intro .eyebrow{grid-column:1/-1;color:#477a8d}h1{font-size:clamp(40px,4.7vw,78px);font-weight:500;letter-spacing:-3px;line-height:1.03;margin:15px 0}h1 em{font-family:Georgia,serif;color:#347f9e;font-weight:400}.intro p{max-width:340px;align-self:end;font-size:18px;line-height:1.6}.studio{display:grid;grid-template-columns:270px minmax(360px,1fr) 260px;border-top:1px solid #d3cabe;min-height:720px}aside{padding:25px 22px;background:#f8f4eb}h2{font-size:14px;font-weight:500;margin:0 0 18px}h2 b{font-family:Georgia,serif;font-size:24px;color:#969081;margin-right:8px}aside label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;margin:12px 0}input[type=number]{width:75px;padding:8px;border:1px solid #c5bbac;background:#fff;border-radius:4px}input[type=color]{width:32px;height:30px;border:0;padding:0}.swatches{display:flex;justify-content:space-between;gap:5px}.swatches label{display:grid;font-size:10px;text-transform:uppercase}.file{background:#e2edf0;padding:12px;flex-wrap:wrap;cursor:pointer}.file input{font-size:10px;width:100%}small{display:block;font-size:11px;line-height:1.65;color:#716b63}.row{display:flex;gap:7px;margin:12px 0}.row button{flex:1;font-size:11px;padding:8px}.primary{background:#2e7089;color:#fff;border-color:#2e7089;width:100%;margin:10px 0 22px}.primary:hover{background:#23586c}.tools{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:12px}.tools button{font-size:11px;text-transform:capitalize}.active{background:#d1e4e8!important;border-color:#4a8ba1!important;color:#23586c}.coords label{display:block;margin:0}.coords input{width:55px;display:block;padding:6px;border:1px solid #c5bbac}.canvas-wrap{padding:23px 2vw;min-width:0;background:#e7e0d4}.canvas-wrap nav{display:flex;justify-content:center;gap:7px;margin-bottom:25px}.canvas-wrap nav button{font-size:11px;text-transform:uppercase;letter-spacing:1px}.canvas-scroll{max-height:600px;overflow:auto;display:flex;justify-content:center;padding:14px;background:repeating-linear-gradient(45deg,#e1d9cc,#e1d9cc 1px,#e7e0d4 1px 14px);border-radius:9px}.pixels{display:grid;width:min(100%,600px);flex-shrink:0;box-shadow:0 15px 35px #6b5d4522;background:#fff}.pixels button{border:0;border-radius:0;padding:0;min-width:0;min-height:0;transition:none}.pixels button:hover{outline:1px solid #d75e54;z-index:1}.pixels button:active{transform:none}.legend{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:16px 0;font-size:10px}.legend span:nth-child(1){color:#337f9d}.legend span:nth-child(2){color:#977018}.legend span:nth-child(3){color:#bc4a43}.legend span:nth-child(4){color:#35735e}.metrics{display:flex;justify-content:space-around;padding:22px 0;border-top:1px solid #cfc4b2;border-bottom:1px solid #cfc4b2}.metrics span{font-size:10px}.metrics b{display:block;font-family:Georgia,serif;font-size:28px;font-weight:400;margin-bottom:5px}.notice{font-size:13px;line-height:1.6;min-height:43px}.export>button{display:block;width:100%;margin:9px 0}.export p{font-size:12px;line-height:1.7;color:#716b63}.export label{display:block}textarea{width:100%;height:100px;resize:vertical;font-family:monospace;font-size:11px;margin-top:8px;border:1px solid #c5bbac;background:#fffcf7;padding:9px}hr{border:0;border-top:1px solid #d3cabe;margin:26px 0}.danger{color:#9b483d}footer{padding:24px 4vw;font-size:11px;display:flex;justify-content:space-between;gap:30px}details{max-width:400px}summary{cursor:pointer}details p{line-height:1.6}@media(max-width:1150px){.studio{grid-template-columns:240px minmax(320px,1fr)}.export{grid-column:1/-1;display:block}.export textarea{height:80px}.export>button{max-width:400px}.export p{max-width:700px}}@media(max-width:700px){header p{display:none}.intro{display:block}.intro p{font-size:15px}.studio{display:flex;flex-direction:column}.canvas-wrap{order:-1;padding:20px 12px}.canvas-wrap nav{gap:4px}.canvas-wrap nav button{padding:8px;font-size:10px}aside{padding:22px}.metrics b{font-size:23px}footer{display:block}.intro{padding-top:25px}.pixels{width:100%}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}.focused .intro,.focused footer{display:none}.focused .studio{min-height:calc(100dvh - 85px)}