:root{font-family:ui-rounded,'Segoe UI',sans-serif;color:#29483f;background:#faf6ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header,main,footer{max-width:1200px;margin:auto}header{display:flex;justify-content:space-between;padding:28px 24px;font-size:13px}a{color:inherit;text-decoration:none}header span,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:750}.intro{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 30px}.intro p{color:#66776c}h1{font-size:clamp(34px,5vw,58px);letter-spacing:-2px;margin:10px 0}h1 em{color:#d47154;font-style:normal}h1 span{color:#e8b847;margin-left:14px}.badge{background:#eee9d7;border-radius:50%;padding:30px 24px;transform:rotate(8deg);text-align:center;font-size:15px;line-height:1.7}.studio{display:grid;grid-template-columns:250px 1fr;border:1px solid #dddcca;border-radius:24px;overflow:hidden;margin:0 24px;background:#fffdf8;box-shadow:0 15px 50px #3e503309}aside{padding:24px;background:#f0f0e5;border-right:1px solid #dddcca}h2{font-size:14px;margin:0 0 14px}.drawings{display:grid;gap:8px;margin-bottom:26px}button{font:inherit;cursor:pointer;border:1px solid #d7dccc;background:#fffdf8;color:#29483f;border-radius:12px;padding:12px 16px;transition:background .15s,transform .15s}button:hover{background:#e6ecd9}button:active{transform:scale(.97)}button:focus-visible,input:focus-visible,[role=button]:focus-visible{outline:3px solid #267c96;outline-offset:3px}.drawings button{text-align:left}.drawings button[aria-pressed=true]{border-color:#52785d;background:#dfe8d5;font-weight:700}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.swatch{height:36px;width:36px;padding:0;border-radius:50%;border:2px solid #00000012}.swatch[aria-pressed=true]{outline:2px solid #29483f;outline-offset:3px}.custom{display:flex;align-items:center;justify-content:space-between;font-size:13px;margin:22px 0 14px}input[type=color]{width:40px;height:34px;padding:2px;border:1px solid #bbb;border-radius:8px;background:white}#eraser{width:100%}#eraser[aria-pressed=true]{background:#dfe8d5;border-color:#52785d}.tip{font-size:13px;line-height:1.7;color:#74816e;margin-top:24px}.workspace{padding:22px 28px}.paper-top{display:flex;justify-content:space-between;font-size:13px;color:#7a8378;margin-bottom:10px}#paper{background:white;border:1px solid #ecece5;border-radius:16px;overflow:hidden}svg{display:block;width:100%;max-height:510px}svg [data-part]{cursor:pointer;transition:fill .12s}svg [data-part]:hover{filter:brightness(.96)}.actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}.primary{background:#345f4c;color:white;margin-left:auto}.primary:hover{background:#244d3b}button:disabled{opacity:.4;cursor:default}#status{text-align:center;font-size:13px;color:#788475;min-height:20px;margin:20px}footer{text-align:center;padding:12px 24px 30px;color:#899180;font-size:12px}@media(max-width:700px){header span,.badge{display:none}.intro{padding-top:0}.studio{grid-template-columns:1fr;margin:0 12px}aside{border-right:0;border-bottom:1px solid #dddcca;padding:16px}.drawings{grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:18px}.drawings button{font-size:12px;padding:10px 5px;text-align:center}.palette{grid-template-columns:repeat(8,1fr);gap:8px}.swatch{width:30px;height:30px}.custom{display:inline-flex;gap:12px;margin:16px 12px 0 0}#eraser{width:auto;padding:8px 12px}.tip{display:none}.workspace{padding:16px}.actions button{font-size:12px;padding:10px}h1{letter-spacing:-1px}.intro p{font-size:14px}#progress{font-size:11px}}
select{font:inherit;width:100%;padding:12px;border:1px solid #bfcdb6;border-radius:10px;background:white;color:#29483f;margin:8px 0 16px}label[for=collection]{font-size:13px}.gallery{display:flex;gap:10px;margin:8px 0 14px}.gallery:empty{display:none}.thumbnail{padding:5px;width:110px;font-size:11px}.thumbnail img{width:100%;height:75px;object-fit:contain;display:block;background:white}.thumbnail[aria-pressed=true]{border:2px solid #345f4c}#paper canvas{display:block;width:100%;max-height:650px;object-fit:contain;touch-action:manipulation}
#paper canvas{max-width:650px;max-height:none;margin:auto;height:auto}
