*{box-sizing:border-box}body{margin:0;color:#322e3c;background:#f8f7fb;font:15px/1.45 system-ui,sans-serif}header,main{max-width:1180px;margin:auto;padding:14px clamp(14px,4vw,48px)}header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-bottom:1px solid #ddd6e7}a{color:inherit}header b{font-size:21px}h1{font:42px/1 Georgia,serif;margin:10px 0 8px}.intro{margin:0 0 14px;color:#574e65}article{display:grid;grid-template-columns:minmax(0,1fr) minmax(245px,330px);gap:25px;align-items:start}#stage{background:#fff;box-shadow:0 12px 34px #34224627;touch-action:none}#stage svg{width:100%;height:auto;display:block}#stage g[data-id]{cursor:move}aside{padding:18px;border:1px solid #e3ddeb;border-radius:16px;background:white}label{display:block;font-size:13px;margin:7px 0}input,select,button{font:inherit}input,select{width:100%;padding:6px;min-width:0;border:1px solid #c8c1cc;border-radius:7px}input[type=color]{padding:0;height:32px}.row{display:grid;grid-template-columns:1fr 1fr;gap:9px}.actions{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}button{background:#faf7ff;border:1px solid #cfc4d8;padding:7px 10px;border-radius:8px;cursor:pointer}button.primary{background:#57446c;color:white}button:disabled{opacity:.5}details{border-top:1px solid #e8e2ec;margin-top:8px;padding-top:8px}summary{cursor:pointer}#status{min-height:20px;font-size:12px}button:focus-visible,a:focus-visible{outline:3px solid #8558ad}[hidden]{display:none!important}@media(max-width:690px){article{grid-template-columns:1fr}h1{font-size:31px}#stage{width:min(100%,400px);margin:auto}header{font-size:12px}}@page{size:A4;margin:0}@media print{body,main,article,#stage{display:block!important;margin:0!important;padding:0!important;width:210mm;max-width:none;background:white;box-shadow:none}header,h1,.intro,aside{display:none}#stage svg{width:210mm;height:297mm}}
header a{text-decoration-thickness:1px;text-underline-offset:3px} aside input[type=file]{max-width:100%} #stage{overflow:hidden} aside{min-width:0} @media(max-width:690px){#stage{touch-action:pan-y}#stage:has(g[data-id]:active){touch-action:none}}
@media screen{
 body:has(#stage){height:100vh;height:100dvh;display:flex;flex-direction:column;color:#203329;background:#fafaf6}
 body:has(#stage)>header{width:100%;max-width:none;margin:0;padding:5px 3vw;font-size:13px}
 body:has(#stage)>main{display:flex;flex-direction:column;width:100%;max-width:none;flex:1;min-height:0;padding:8px 3vw 12px}
 main:has(#stage) h1{font-size:clamp(22px,2.5vw,34px);margin:2px 0}
 main:has(#stage) .intro{font-size:13px;margin:2px 0 8px}
 main:has(#stage) article{min-height:0;flex:1;align-items:stretch;gap:12px}
 article #stage{container-type:size;display:grid;place-items:center;box-shadow:none;background:#e9ece5;border-radius:8px;width:100%;margin:0;min-height:0}
 article #stage svg{width:min(98cqw,69cqh);height:auto;max-height:98cqh;box-shadow:0 3px 12px #23322124}
 article:has(#stage) aside{min-height:0;overflow:auto;overscroll-behavior:contain;border-color:#d6ddd1}
 article button.primary{background:#2d5239}
}
@media screen and (max-width:690px){main:has(#stage) article{grid-template-rows:minmax(0,1.3fr) minmax(0,1fr)}}