:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#07121b;color:#e4edf3}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem;border-bottom:1px solid #294452}header span,.hint{font-size:.85rem;color:#a6bdcb}main{max-width:1000px;margin:auto;padding:2rem 1.25rem}h1{font-size:clamp(2.2rem,7vw,4rem);margin:.5rem 0}p{line-height:1.65}a{color:#77d8ff}nav,.actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.5rem 0}section{border:1px solid #294452;background:#0c1c29;border-radius:16px;padding:1.5rem}button,select{font:inherit;border:1px solid #416275;background:#132c3c;color:#e4edf3;padding:.8rem 1rem;border-radius:9px}button{cursor:pointer}button[aria-pressed=true]{background:#77d8ff;color:#07121b}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #77d8ff;outline-offset:3px}label{display:block;margin:1rem 0 .4rem}output{float:right}input[type=range]{width:100%;min-height:40px;accent-color:#77d8ff}canvas{max-width:100%;height:auto;display:block;margin:1rem auto;background:repeating-conic-gradient(#294452 0% 25%,#112431 0% 50%) 50%/20px 20px;border-radius:12px}canvas[hidden],[hidden]{display:none!important}footer{margin-top:2rem}.raw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:0 1.5rem}nav a{align-self:center}select{max-width:100%}#status{border-left:3px solid #77d8ff;padding:.6rem 1rem;background:#0c1c29}
fieldset{border:0;padding:0;margin:0;min-width:0}#preview{touch-action:pan-y pinch-zoom}#preview.mask-painting{touch-action:none}input[type=number]{max-width:100%}
@media(max-width:700px){header{flex-wrap:wrap;padding:1rem}main{padding:1.25rem .75rem}section{padding:1rem}input[type=range],button,select{min-height:44px}select,input[type=number]{font-size:16px}button{max-width:100%;white-space:normal}#status{overflow-wrap:anywhere}}