:root { color-scheme: light; font-family: system-ui, sans-serif; background: #fcfbf8; color: #273448; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; overflow: hidden; }
main { height: 100dvh; min-height: 280px; }
#board { display: block; width: 100%; height: calc(100% - 88px); touch-action: none; user-select: none; }
.baseline { stroke: #9aa5ae; stroke-width: 2; }
#lineHit { outline: none; stroke: transparent; stroke-width: 44px; vector-effect: non-scaling-stroke; cursor: crosshair; }
.segment { stroke: #3e4b5a; stroke-width: 2.5; fill: none; }
.path { stroke: #267cbd; stroke-width: 3; }
.construction { stroke: #cd9451; stroke-width: 2.5; }
.mirror-axis { stroke: #c6aa86; stroke-dasharray: 7 7; }
.right-angle { fill: none; stroke: #cd9451; stroke-width: 1.8; }
.point { cursor: pointer; outline: none; }
.point .hit { fill: transparent; }
.point .halo { fill: none; stroke: transparent; stroke-width: 2; }
.point.selected .halo, .point:focus-visible .halo { stroke: #287fb9; fill: #287fb915; }
.point .dot { fill: #344456; stroke: #fcfbf8; stroke-width: 2; }
.point.mirror .dot { fill: #cd9451; }
.point.c-point { cursor: ew-resize; }
.point.c-point .dot { fill: #267cbd; }
.point text { fill: #273448; font: italic 26px Georgia, serif; pointer-events: none; }
nav { position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e4e4df; border-radius: 20px; background: #ffffffed; box-shadow: 0 6px 26px #2734480b; }
button, nav a { display: grid; place-items: center; width: 48px; height: 48px; padding: 11px; border: 0; border-radius: 12px; background: transparent; color: #526171; cursor: pointer; touch-action: manipulation; }
button:hover, nav a:hover { background: #edf3f6; }
button[aria-pressed="true"] { background: #e1eff9; color: #1677b8; }
button:focus-visible, nav a:focus-visible { outline: 2px solid #267cbd; outline-offset: 2px; }
nav svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.divider { height: 24px; width: 1px; background: #e8e9e9; }
#inkCanvas { position: absolute; inset: 0; width: 100%; height: calc(100% - 88px); pointer-events: none; touch-action: none; }
#inkCanvas.active { pointer-events: auto; }
nav { max-width: calc(100vw - 24px); flex-wrap: wrap; justify-content: center; width: max-content; z-index: 2; gap: 3px; }
nav button, nav a { width: 42px; height: 42px; padding: 8px; flex-shrink: 0; }
.pen-cluster { display: contents; }
.pen-swatch { width: 22px; height: 22px; padding: 0; margin: 0 3px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 1px #ddd; }
.pen-swatch.red { background: #e84855; }
.pen-swatch.green { background: #25a95f; }
.pen-swatch.blue { background: #247ce8; }
.pen-swatch.black { background: #202933; }
.pen-swatch.is-selected { box-shadow: 0 0 0 2px #63798d; }
button:disabled { opacity: .35; cursor: default; }
.translation-width-bubble { position: fixed; inset: auto; margin: 0; padding: 12px; border: 1px solid #d7dfe5; border-radius: 12px; color: #344456; background: white; max-width: calc(100vw - 24px); }
.translation-width-bubble label { display: block; margin-bottom: 8px; }
.translation-width-preview { max-height: 150px; overflow: auto; }
.translation-width-preview canvas { display: block; }
@media(max-width: 600px) { #board, #inkCanvas { height: calc(100% - 180px); } nav { width: calc(100vw - 24px); } }