:root{--bg:#f7f7f8;--panel:#fff;--ink:#1a202c;--muted:#5a6475;--line:#d5d9e0;--accent:#2b6cb0;--warn-bg:#fffaf0}@media (prefers-color-scheme:dark){:root{--bg:#14171c;--panel:#1d2128;--ink:#e8ebf0;--muted:#a0a8b6;--line:#333a46;--accent:#63b3ed;--warn-bg:#2d2518}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);flex-direction:column;height:100dvh;font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:flex}.bar{background:var(--panel);border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:8px 16px;display:flex}.bar h1{margin:0;font-size:1.15rem}button{font:inherit;color:inherit;background:var(--panel);border:1px solid var(--line);cursor:pointer;border-radius:6px;min-height:36px;padding:6px 10px}button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.unit-toggle{gap:4px;display:flex}.layout{flex:1;grid-template-columns:360px 1fr;min-height:0;display:grid}.controls{border-right:1px solid var(--line);background:var(--panel);grid-area:1/1;padding:12px 16px;overflow-y:auto}.view{flex-direction:column;grid-area:1/2;gap:8px;min-height:0;padding:12px 16px;display:flex}.canvas-wrap{border:1px solid var(--line);background:var(--panel);border-radius:8px;flex:1;min-height:200px;position:relative;overflow:hidden}#preview{touch-action:none;width:100%;height:100%;display:block}.busy{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:.85rem;position:absolute;top:8px;left:8px}.view-buttons{flex-wrap:wrap;gap:6px;display:flex}.readout{margin:0;font-weight:600}.note{color:var(--muted);margin:0;font-size:.85rem}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.sec{border:1px solid var(--line);border-radius:8px;margin-bottom:10px}.sec>summary{cursor:pointer;padding:10px 12px;font-weight:600}.sec-body{padding:4px 12px 12px}.field{flex-direction:column;gap:4px;margin-bottom:12px;display:flex}.field label,.field .lbl{font-size:.9rem;font-weight:600}.field .unit{color:var(--muted);font-weight:400}.field input[type=text],.field input[type=number],.field select{font:inherit;color:inherit;background:var(--bg);border:1px solid var(--line);border-radius:6px;width:100%;min-height:40px;padding:8px}.swatches{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.swatch{border-radius:50%;width:32px;height:32px;min-height:32px;padding:0}.swatch[aria-pressed=true]{outline:3px solid var(--accent);outline-offset:2px;border-color:var(--line)}.swatches input[type=color]{border:1px solid var(--line);background:0 0;border-radius:6px;width:40px;height:36px;padding:0}.notices{color:var(--muted);font-size:.85rem}.notices p{background:var(--warn-bg);border:1px solid var(--line);border-radius:6px;margin:0 0 6px;padding:6px 8px}.bar-right{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}#share-note:not(:empty){text-align:right;flex-basis:100%;font-size:.85rem}.status{border:1px solid var(--line);border-left-width:6px;border-radius:8px;margin-bottom:10px;padding:8px 12px;font-size:.9rem}.status[data-tone=ok]{border-left-color:#2f855a}.status[data-tone=warning]{background:var(--warn-bg);border-left-color:#d69e2e}.status[data-tone=blocker]{border-left-color:#e53e3e}.status-head{margin:0;font-weight:600}.status-list{margin:6px 0 0;padding:0;list-style:none}.status-list li{margin-top:6px}.fixit{border-color:#e53e3e;min-height:30px;padding:2px 10px;font-weight:600}.downloads{flex-direction:column;gap:8px;margin-bottom:10px;display:flex}.downloads .primary{background:var(--accent);border-color:var(--accent);color:#fff;min-height:44px;font-weight:600}.downloads .primary:disabled{opacity:.45;cursor:not-allowed}.downloads button:disabled{opacity:.55;cursor:not-allowed}.downloads .sec{margin-bottom:0}.file-list{flex-direction:column;gap:6px;display:flex}.filelink{text-align:left}.downloads .error{color:#c53030;margin:0;font-weight:600}.downloads ol.sec-body{margin:0;padding-left:32px}dialog{background:var(--panel);max-width:min(640px,100vw - 32px);max-height:85dvh;color:var(--ink);border:1px solid var(--line);border-radius:8px;overflow-y:auto}dialog::backdrop{background:#00000080}.about h2{margin-top:0}@media (max-width:760px){.layout{grid-template-rows:45% 1fr;grid-template-columns:1fr}.view{border-bottom:1px solid var(--line);grid-area:1/1;padding:8px 16px;overflow-y:auto}.controls{border-right:0;grid-area:2/1}.canvas-wrap{min-height:120px}.readout{font-size:.85rem}.view-buttons button{min-height:32px;padding:4px 8px;font-size:.85rem}}