:root{color:#173b49;background:#e7f5f8;font-family:system-ui,sans-serif}body{margin:0}main{max-width:980px;margin:auto;padding:20px}header h1{margin-bottom:4px}section{flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0;display:flex}button{font:inherit;color:#173b49;cursor:pointer;background:#fff;border:2px solid #bfdce4;border-radius:15px;min-height:48px;padding:10px 18px;font-weight:650}button[aria-pressed=true]{border-color:#173b49;box-shadow:0 0 0 2px #173b49}.primary{color:#fff;background:#087c97;border-color:#087c97}.paper{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 6px 20px #173b4918}canvas{touch-action:none;width:100%;height:auto;display:block}#colors{flex-wrap:wrap;gap:6px;display:flex}#colors button{width:48px;padding:0}label{align-items:center;gap:8px;margin:8px;display:inline-flex}input{font:inherit;border:1px solid #adc5cd;border-radius:8px;max-width:100%;padding:8px}details{background:#fff;border-radius:16px;margin-top:24px;padding:16px}dialog{border:0;border-radius:24px;max-width:90vw}dialog img{width:100%;max-width:600px;display:block}#status{min-height:28px}button:disabled{opacity:.45}input[type=range]{width:110px}@media (width<=600px){main{padding:12px}button{padding:10px}h1{font-size:26px}}