@font-face { font-family: 'SSCP Roboto'; src: url('fonts/Roboto-Variable.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
:root {
  --bg-void: var(--bg); --bg-panel: var(--panel-bg); --bg-panel-alt: var(--control-bg);
  --accent: var(--brass); --accent-hover: var(--cta-hover);
  --accent-soft: rgba(var(--accent-rgb), .14); --accent-dim: rgba(var(--accent-rgb), .6);
  --font-body: 'SSCP Roboto', sans-serif; --font-mono: 'SSCP Roboto', sans-serif; --font-display: 'SSCP Roboto', sans-serif;
}
.sidebar { border-left: 2px solid var(--line); }
.sidebar h1 { background: var(--caption, var(--surface-2)); padding: 7px; margin-bottom: 5px; }
.sidebar h1::before { display: none; }
.sidebar :is(.btn, select, .stepper button) { border-radius: 0; border: 1px solid var(--line); box-shadow: inset 1px 1px var(--bevel-light), inset -1px -1px var(--bevel-dark); }
:root { --bevel-light: #707070; --bevel-dark: #111; --caption: #181818; }
:root[data-theme='light'] { --bevel-light: #fff; --bevel-dark: #66736d; --caption: #dce1da; }
:root[data-theme='contrast'] { --bevel-light: #e6df00; --bevel-dark: #8a8a8a; --caption: #000; }
.sidebar .btn:hover { background: var(--control-hover); }
.sidebar .btn.primary { color: var(--brass-ink); }
.sidebar .btn.primary:hover { background: var(--cta-hover); }
.sidebar :is(button, select, summary):focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.hm-1 { background: rgba(var(--accent-rgb), .3); } .hm-2 { background: rgba(var(--accent-rgb), .5); } .hm-3 { background: rgba(var(--accent-rgb), .75); }
@media print { html, body { background: white; } }

.theme-buttons { display:flex; gap:4px; }
.theme-buttons button { width:28px; height:26px; padding:0; border:1px solid var(--line); border-radius:0; background:var(--control-bg); color:var(--ink); font-size:17px; line-height:1; cursor:pointer; }
.theme-buttons button:hover { background:var(--control-hover); }
.theme-buttons button[aria-pressed="true"] { background:var(--brass); color:var(--brass-ink); border-color:var(--brass); }
 .stepper output { min-width:30px; text-align:center; }
.stepper button:disabled { opacity:.45; cursor:default; }
#paperColor { width:30px; height:22px; padding:1px; border:1px solid var(--line); background:var(--control-bg); cursor:pointer; }
#paperColor:focus-visible { outline:2px solid var(--brass); outline-offset:2px; }
.theme-row { gap:4px; }
.theme-buttons { gap:3px; }
.theme-buttons button { width:23px; height:22px; font-size:14px; }

:root[data-theme="dark"] { --brass:#a3c4a4; --brass-ink:#102013; --cta-hover:#bdd8bd; --accent-rgb:163,196,164; }
:root:not([data-theme="contrast"]) { --brass:var(--custom-accent, var(--default-accent)); --brass-ink:var(--custom-accent-ink, var(--default-accent-ink)); --cta-hover:var(--custom-accent-hover, var(--default-accent-hover)); --accent-rgb:var(--custom-accent-rgb, var(--default-accent-rgb)); }
:root[data-theme="dark"] { --default-accent:#a3c4a4; --default-accent-ink:#102013; --default-accent-hover:#bdd8bd; --default-accent-rgb:163,196,164; }
:root[data-theme="light"] { --default-accent:#294f3d; --default-accent-ink:#fff; --default-accent-hover:#1c3e2d; --default-accent-rgb:41,79,61; }
.color-controls { display:flex; gap:4px; align-items:center; }
.color-controls input { width:30px; height:22px; padding:1px; border:1px solid var(--line); background:var(--control-bg); cursor:pointer; }
.color-controls button { width:23px; height:22px; padding:0; border:1px solid var(--line); background:var(--control-bg); color:var(--ink); cursor:pointer; }
.color-controls :is(input,button):focus-visible { outline:2px solid var(--brass); outline-offset:2px; }
.color-controls :disabled { opacity:.5; cursor:not-allowed; }