:root{font-family:Segoe UI,system-ui,sans-serif;color:#243d36;background:#f6f5ef;font-size:16px;--green:#286052;--line:#c8d2ca}*{box-sizing:border-box}body{margin:0}button,.button,input{font:inherit}button,.button{min-height:44px;border:1px solid #aebeb4;border-radius:8px;padding:9px 14px;background:#fffef9;color:#243d36;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:600;gap:6px}button:hover,.button:hover{background:#e6eee6}button:disabled{opacity:.45;cursor:default}.primary,.selected{background:var(--green);color:white;border-color:var(--green)}.primary:hover,.selected:hover{background:#1a493d}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #b76b22;outline-offset:3px}::selection{background:#c6dfc9;color:#183c2f}header{display:flex;align-items:center;gap:24px;padding:15px 28px;border-bottom:1px solid var(--line);background:#fffef9}.brand{display:flex;align-items:center;gap:10px;color:var(--green);font-family:Georgia,serif;font-size:25px;font-weight:bold;text-decoration:none}.tagline{color:#52665b;flex:1}header>button{margin-left:auto}main{padding:20px 24px}h1{font-family:Georgia,serif;font-size:26px;font-weight:normal;margin:0 0 5px}p{line-height:1.5}h2{font-size:16px;margin:0 0 12px}#status{margin:0;color:#53645c;font-size:14px;max-width:75ch}.topbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.actions{display:flex;gap:8px;flex-wrap:wrap}.studio{display:grid;grid-template-columns:230px minmax(0,1fr);gap:22px}aside{padding:0 5px 0 0}summary{font-weight:700;cursor:pointer;padding:12px 0;border-bottom:1px solid var(--line)}section{padding:16px 0;border-bottom:1px solid var(--line)}section>button,section>.button{width:100%;margin-bottom:8px}label:not(.button){display:block;font-size:14px;margin:7px 0}.check{display:flex!important;align-items:center;gap:8px;min-height:36px}input[type=checkbox]{width:19px;height:19px;accent-color:var(--green)}input[type=range]{width:100%;accent-color:var(--green);min-height:32px}input[type=url]{width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;margin-bottom:8px}.stepper{display:flex;align-items:center;justify-content:space-between;gap:5px}.stepper button,.zoom>button:first-child,.zoom>button:nth-child(3){font-size:23px;min-width:44px;padding:3px 10px}output{font-variant-numeric:tabular-nums;font-weight:600}.hint,.privacy{font-size:13px;color:#53645c;margin:10px 0 0}.privacy{margin-top:18px}.tools{display:flex;gap:5px;margin-bottom:20px}.tools button{flex:1;padding:7px;font-size:14px}#palette{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.swatch{min-height:38px;height:38px;padding:0;border:3px solid transparent;background:var(--swatch);border-radius:7px;box-shadow:inset 0 0 0 1px #0003}.swatch:hover{background:var(--swatch);outline:2px solid #65766a}.swatch[aria-pressed=true]{outline:3px solid #243d36;outline-offset:1px;border-color:white}.addColor{display:flex;align-items:center;gap:8px;margin-top:12px}.addColor input{height:44px;width:45px;padding:3px;background:white;border:1px solid var(--line);border-radius:6px}.addColor button{flex:1;font-size:14px}.workspace{min-width:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#e4e8df;align-self:start}.canvasbar{padding:10px 14px;display:flex;justify-content:space-between;gap:8px;background:#fffef9;border-bottom:1px solid var(--line)}.canvasbar button{font-size:14px;padding:7px 10px;min-height:40px}.zoom{display:flex;gap:7px;align-items:center}.zoom output{font-size:13px;min-width:48px;text-align:center}#viewport{position:relative;height:calc(100dvh - 245px);min-height:430px;overflow:auto;overscroll-behavior:contain;scrollbar-color:#8a9e8f #e4e8df}#sheet{width:max-content;min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:26px}canvas{display:block;background:#fffef9;box-shadow:0 5px 22px #263b2d19;touch-action:none;cursor:crosshair}#welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;background:#edf0e8ed}#welcome[hidden]{display:none}#welcome h2{font-family:Georgia,serif;font-size:30px;font-weight:normal}#welcome p{color:#53645c;max-width:32ch;margin:0 0 22px}#welcome button{margin-top:12px}footer{display:flex;justify-content:space-between;gap:8px;padding:12px 16px;background:#fffef9;color:#53645c;font-size:13px}dialog{max-width:min(650px,94vw);border:0;border-radius:14px;padding:25px;color:#243d36;background:#fffef9;box-shadow:0 15px 60px #0003}dialog::backdrop{background:#172d2866}dialog h2{font:normal 26px Georgia,serif}dialog p,dialog li{line-height:1.6}dialog li{margin-bottom:10px}dialog .actions{margin-top:20px}.cropPreview{position:relative;max-width:440px;margin:auto;line-height:0}.cropPreview img{width:100%;max-height:270px;object-fit:contain}.cropPreview{width:max-content;max-width:100%}.cropPreview img{display:block;width:auto;max-width:100%;height:250px}#cropRect{position:absolute;border:2px solid white;outline:1px solid #243d36;box-shadow:0 0 0 999px #0006;pointer-events:none}.cropPreview{overflow:hidden}#cropSliders{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px}#cropSliders label{display:block}#cropSliders input{display:block} @media(min-width:1500px){.studio{grid-template-columns:230px minmax(0,1fr)}#viewport{height:calc(100dvh - 240px)}}@media(max-width:1050px){.tagline{display:none}.topbar{align-items:flex-start;flex-direction:column}#viewport{height:65dvh}.studio{gap:15px;grid-template-columns:210px minmax(0,1fr)}}@media(max-width:700px){header{padding:12px 16px;gap:8px}.brand{font-size:22px}header>button{font-size:13px;padding:7px 9px}main{padding:15px 12px}h1{font-size:24px}.topbar{gap:12px;margin-bottom:12px}.topbar .actions{width:100%;gap:6px}.topbar .actions button{flex:1;font-size:13px;padding:8px}.studio{display:flex;flex-direction:column;gap:12px}.workspace{width:100%;order:-1}#viewport{height:58dvh;min-height:340px}.canvasbar{padding:8px;gap:5px;flex-wrap:wrap}.canvasbar .actions{gap:4px}.zoom{gap:4px}.canvasbar button{font-size:12px;padding:6px 8px}.zoom output{min-width:43px}footer{padding:9px;font-size:12px;flex-wrap:wrap}aside{display:grid;grid-template-columns:1fr 1fr;gap:15px}aside details{min-width:0}summary{font-size:14px}.privacy{grid-column:1/-1;margin-top:0}#sheet{padding:15px}.tools{flex-wrap:wrap}.swatch{min-height:34px;height:34px}#palette{grid-template-columns:repeat(4,1fr)}#welcome h2{font-size:25px}dialog{padding:20px}#cropSliders{grid-template-columns:1fr}}
dialog{max-height:92dvh;overflow:auto}.cropPreview img{height:auto;width:auto;max-width:100%;max-height:270px}aside>section{padding-top:18px}@media(max-width:700px){aside{display:flex;flex-direction:column;gap:0}aside>section{order:-1}aside details:nth-of-type(2){order:-1}aside .privacy{margin-top:15px}}
@media(max-width:700px){#viewport{height:auto;aspect-ratio:var(--image-ratio,1.33);min-height:280px;max-height:65dvh}}