:root { --tool-bg:#0b141a; --tool-panel:#111f29; --tool-field:#172b36; --tool-line:#304954; --tool-text:#e6eef2; --tool-muted:#a6bbc4; --tool-accent:#54dac4; --bg:var(--tool-bg); --panel:var(--tool-panel); --panel2:var(--tool-field); --line:var(--tool-line); --paper:var(--tool-text); --dim:var(--tool-muted); --accent:var(--tool-accent); --bg-color:var(--tool-bg); --panel-bg:var(--tool-panel); --panel-2:var(--tool-field); --text-color:var(--tool-text); --text-dim:var(--tool-muted); --border-color:var(--tool-line); --font-body:system-ui,sans-serif; --font-display:system-ui,sans-serif; }
html { color-scheme:dark; }
body { box-sizing:border-box; padding-top:52px !important; margin:0; background:var(--tool-bg) !important; color:var(--tool-text) !important; font-family:system-ui,-apple-system,sans-serif !important; }
.tool-navigation { position:fixed; inset:0 0 auto; height:52px; display:flex; align-items:center; gap:18px; padding:0 16px; background:#10212b; border-bottom:1px solid var(--tool-line); z-index:10001; font:14px system-ui,sans-serif; overflow-x:auto; white-space:nowrap; }
.tool-navigation a { color:var(--tool-muted); text-decoration:none; padding:8px 10px; border-radius:7px; }
.tool-navigation a:hover,.tool-navigation a[aria-current] { color:var(--tool-text); background:var(--tool-field); }
.tool-navigation .tool-brand { color:var(--tool-accent); font-weight:750; }
#ui,.sidebar,aside,header:not(.tool-navigation) { background-color:var(--tool-panel) !important; color:var(--tool-text); border-color:var(--tool-line) !important; }
#ui,.sidebar,aside { scrollbar-width:thin; scrollbar-color:var(--tool-line) var(--tool-panel); }
.title,.section-title,.brand,h1,h2,h3 { color:var(--tool-accent) !important; font-family:system-ui,sans-serif !important; }
.title,.section-title { font-size:12px !important; font-weight:700; letter-spacing:.06em; border-color:var(--tool-line) !important; }
label,.field,.row,.hint,.fine-print { font-family:system-ui,sans-serif; }
.hint,.fine-print { color:var(--tool-muted) !important; }
button:not(.cell),select,input,textarea { font-family:system-ui,sans-serif !important; border-radius:7px; border-color:var(--tool-line); }
button:not(.cell) { cursor:pointer; }
button:not(.cell):hover { border-color:var(--tool-accent); }
button:disabled { opacity:.5; cursor:default; }
button.active,button.selected,.btn.active { background:var(--tool-accent) !important; color:#062620 !important; }
input:not([type=color]):not([type=range]):not([type=checkbox]),select,textarea { background:var(--tool-field) !important; color:var(--tool-text) !important; min-height:32px; padding:6px 8px; }
input[type=range],input[type=checkbox] { accent-color:var(--tool-accent); }
:focus-visible { outline:3px solid var(--tool-accent); outline-offset:2px; }
.modal-card,.modal .card { background:var(--tool-panel); color:var(--tool-text); border:1px solid var(--tool-line); border-radius:12px; }
.tool-home { height:auto; min-height:100vh; overflow:auto; display:block; }
.tool-content { max-width:1000px; margin:32px auto; padding:20px; line-height:1.6; }
.tool-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; margin-top:20px; }
.tool-card { display:block; padding:20px; border:1px solid var(--tool-line); border-radius:12px; background:var(--tool-panel); color:var(--tool-text); text-decoration:none; }
.tool-card:hover { border-color:var(--tool-accent); }
.tool-card p { color:var(--tool-muted); }
a { color:var(--tool-accent); }
@media(max-width:650px) { .tool-navigation { gap:4px; padding:0 6px; font-size:12px; } .tool-navigation a { padding:8px; } #ui { max-width:48vw; } }

/* Preview-only transparency indicator; never baked into exported artwork. */
.transparency-preview {background:repeating-conic-gradient(#d7dce0 0% 25%,#aab4bc 0% 50%) 50%/12px 12px!important;}