@font-face { font-family:"Iosevka Fixed"; src:url("vendor/GlyphdrawFixed-Regular.ttf") format("truetype"); font-display:swap; }
@font-face { font-family:"Cascadia Code"; src:url("vendor/GlyphdrawCascadia-Regular.ttf") format("truetype"); font-display:swap; }
:root { color-scheme:dark; --bg:#141718; --panel:#1b1f20; --border:#343b3d; --text:#e4e9e8; --muted:#9aa5a5; --valid:#6ac9df; --locked:#edf3ed; --cell:#101415; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { height:100%; }
body { margin:0; height:100dvh; overflow:hidden; display:flex; flex-direction:column; background:var(--bg); color:var(--text); font:13px/1.5 system-ui,sans-serif; }
button,input,select,textarea { font:inherit; }
button { min-height:30px; padding:4px 10px; border:1px solid #455052; border-radius:4px; color:var(--text); background:#293032; cursor:pointer; }
button:hover:enabled { background:#354042; border-color:#7a8c8d; }
button:disabled { color:#657072; cursor:default; background:#222829; }
button.primary { border-color:#987bc2; background:#594274; color:#fff; }
:focus-visible { outline:2px solid var(--valid); outline-offset:2px; }
a { color:inherit; text-decoration:none; }
p { color:var(--muted); margin:0; }
h2 { margin:0; font-size:12px; font-weight:550; }
input[type=number],input[type=search],select,textarea { color:var(--text); border:1px solid #455052; border-radius:4px; background:#131819; padding:5px 6px; min-width:0; }
select { max-width:100%; }
input[type=number] { width:64px; height:30px; }
input[type=range],input[type=checkbox] { accent-color:var(--valid); }
input[type=range] { min-width:45px; }
label { display:flex; align-items:center; gap:6px; color:#bdc7c5; font-size:11px; }
label.stacked { align-items:stretch; flex-direction:column; gap:5px; }
label.stacked>select { width:100%; font-size:12px; }
summary { cursor:pointer; color:#c5cecb; font-size:11px; }
.app-header { flex:none; display:flex; align-items:center; gap:14px; min-height:46px; padding:7px 12px; border-bottom:1px solid var(--border); }
.brand { font:600 18px ui-monospace,monospace; letter-spacing:-.6px; }
.save-status { color:#8ca89a; font-size:10px; }
.header-actions { margin-left:auto; display:flex; align-items:center; gap:5px; }
.header-actions>button { font-size:11px; }
.canvas-menu,.preview-options { position:relative; }
.canvas-menu>summary,.preview-options>summary { list-style:none; border:1px solid #455052; border-radius:4px; padding:5px 9px; min-height:30px; }
.menu-content { position:absolute; z-index:20; width:315px; max-width:calc(100vw - 20px); padding:14px; border:1px solid #586462; border-radius:6px; box-shadow:0 12px 30px #0008; background:#202728; display:flex; flex-direction:column; align-items:stretch; gap:13px; }
.canvas-menu .menu-content { right:0; top:36px; }
.menu-content label { flex-wrap:wrap; }
.menu-content p { font-size:10px; }
.menu-content input[type=range] { flex:1; width:90px; }
#gridForm,#jumpForm { display:flex; align-items:center; gap:6px; }
#gridForm input,#jumpForm input { width:75px; }
main { padding:8px; min-height:0; flex:1; display:flex; flex-direction:column; gap:8px; width:100%; }
.panel { min-width:0; background:var(--panel); border:1px solid var(--border); border-radius:5px; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:33px; padding:6px 10px; border-bottom:1px solid var(--border); }
.panel-heading>span { font:10px ui-monospace,monospace; color:var(--muted); }
.line-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:7px 16px; padding:7px 8px; flex:none; }
.line-toolbar input[type=range] { width:85px; }
.line-toolbar #sketchWidth,.line-toolbar #lineWidth { width:150px; }
.line-toolbar output { font:10px ui-monospace,monospace; }
.tool-tabs { display:flex; flex-wrap:wrap; gap:3px; }
.tool-tabs button { font-size:11px; background:transparent; border-color:transparent; }
.tool-tabs button[aria-pressed=true] { background:#48385e; color:#f0e3ff; border-color:#9a80ba; }
.canvas-selection-controls { display:flex; align-items:center; flex-wrap:wrap; width:100%; gap:6px 12px; padding-top:5px; border-top:1px solid var(--border); }
.canvas-selection-controls>span { font-size:11px; color:#a8d8ce; }.canvas-selection-controls button { font-size:10px; min-height:25px; }
.artboard.selecting-cells { cursor:crosshair; }.artboard.moving-cells { cursor:grabbing; }
.cell-selection-box { fill:#73cdb815; stroke:#8de1cd; stroke-width:1.8; stroke-dasharray:6 4; vector-effect:non-scaling-stroke; pointer-events:none; }
.cell-selection-source { fill:none; stroke:#93aba5; stroke-width:1; stroke-opacity:.6; stroke-dasharray:3 5; vector-effect:non-scaling-stroke; pointer-events:none; }
.canvas-controls { display:flex; align-items:center; flex-wrap:wrap; gap:7px 16px; padding:6px 9px; flex:none; }
.zoom-control { display:flex; align-items:center; gap:7px; }.zoom-control input { width:80px; }
.canvas-controls output { font:10px ui-monospace,monospace; min-width:40px; }
.reference-controls { display:flex; align-items:center; flex-wrap:wrap; gap:7px; }
.reference-controls button { font-size:11px; }.reference-controls input[type=range] { width:70px; }
.reference-controls output { min-width:30px; }.reference-controls select { font-size:11px; }
#referenceScaleNumber,#referenceWidth,#referenceHeight { width:66px; }
#adjustReference[aria-pressed=true] { background:#48385e; color:#f0e3ff; border-color:#9a80ba; }
.reference-frame { fill:none; stroke:#e3b671; stroke-width:1.2; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; }
.reference-handle { fill:#efc889; stroke:#241c12; stroke-width:1.4; vector-effect:non-scaling-stroke; pointer-events:all; }
.reference-handle[data-reference-handle=nw],.reference-handle[data-reference-handle=se] { cursor:nwse-resize; }
.reference-handle[data-reference-handle=ne],.reference-handle[data-reference-handle=sw] { cursor:nesw-resize; }
.artboard.reference-adjusting,#detail.reference-adjusting { cursor:move; }
.artboard.moving-reference,#detail.moving-reference { cursor:grabbing; }
#referenceStatus:empty { display:none; }
.artwork-controls { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }.artwork-controls button { font-size:11px; }
.artwork-controls label { margin-right:9px; }.artwork-controls input[type=range] { width:80px; }
.artwork-controls output { min-width:30px; }
.artwork-controls button:not(:first-child) { padding-inline:8px; }
#moveArtwork[aria-pressed=true] { background:#48385e; color:#f0e3ff; border-color:#9a80ba; }
.artboard.artwork-adjusting,#detail.artwork-adjusting { cursor:move; }
.artboard.moving-artwork,#detail.moving-artwork { cursor:grabbing; }
.drawing-options { width:100%; border-top:1px solid var(--border); padding-top:6px; }
.drawing-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; }
.drawing-controls>p { font-size:10px; }
.line-actions { display:flex; gap:5px; }
.line-actions button { font-size:10px; }
kbd { font:9px ui-monospace,monospace; color:#b5a6c8; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:8px; min-height:0; flex:1; }
.canvas-column { min-width:0; min-height:0; display:grid; grid-template-rows:minmax(120px,1fr) 10px var(--preview-height,165px); gap:0; }
.preview-splitter { display:flex; align-items:center; justify-content:center; min-height:10px; cursor:row-resize; touch-action:none; user-select:none; }
.preview-splitter::before { content:""; width:48px; height:3px; border-radius:3px; background:#596762; }
.preview-splitter:hover::before,.preview-splitter:focus-visible::before { background:var(--valid); }
body.resizing-preview,body.resizing-preview * { cursor:row-resize !important; user-select:none !important; }
.canvas-panel,.output-panel { min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.canvas-viewport { position:relative; flex:1; min-height:0; overflow:hidden; }
.artboard { display:block; width:100%; height:100%; background:#0b0f10; touch-action:none; user-select:none; cursor:crosshair; }
.canvas-footer { display:flex; align-items:center; gap:10px; min-height:46px; padding:5px 10px; border-top:1px solid var(--border); }
#lineStatus { flex:1; font-size:10px; line-height:1.4; color:#bdb2cc; max-height:42px; overflow:auto; }
.canvas-footer label { white-space:nowrap; font-size:10px; }
.canvas-footer input { margin:0; }
.workspace-sidebar { display:flex; flex-direction:column; gap:8px; min-height:0; overflow:auto; }
.drawing-settings { flex:none; }
.primary-settings { padding:8px 10px; display:flex; flex-direction:column; gap:6px; }
.set-count { color:#99bead; font:10px ui-monospace,monospace; margin-top:-4px; }
.settings-help { font-size:10px; line-height:1.5; color:#97a9a2; }
#joinHelp { min-height:30px; }
.irc-mode-control { font-size:11px; }
.glyph-rules,.paste-set { border-top:1px solid var(--border); }
.glyph-rules>summary,.paste-set>summary { padding:8px 12px; }
.family-controls { display:grid; grid-template-columns:1fr 1fr; gap:7px 4px; padding:9px 10px; }
.rule-controls { display:flex; flex-direction:column; gap:8px; padding:0 10px 10px; }
.rule-controls input[type=number] { width:48px; }
.custom-glyph-controls { display:flex; flex-direction:column; align-items:stretch; gap:9px; padding:0 12px 12px; }
.custom-glyph-controls>label:first-child { flex-direction:column; align-items:stretch; gap:5px; }
.custom-glyph-controls textarea { resize:vertical; min-height:66px; width:100%; font-family:"Iosevka Fixed",monospace; }
.custom-glyph-controls p { font-size:10px; }
.custom-glyph-controls>button { align-self:flex-start; font-size:11px; }
.inspector { min-height:210px; flex:1 0 230px; overflow:hidden; display:flex; flex-direction:column; }
.sidebar-tabs { display:flex; border-bottom:1px solid var(--border); flex:none; }
.sidebar-tabs button { flex:1; min-width:0; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; font-size:11px; }
.sidebar-tabs button[aria-selected=true] { color:#dfd1f9; background:#352d43; border-bottom-color:#bc9ce9; }
#pathCount { display:inline-block; margin-left:2px; color:#9ca99f; font-size:9px; }
.candidates-panel { display:flex; flex-direction:column; min-height:0; flex:1; }
.candidate-help { font-size:10px; padding:8px 10px; line-height:1.5; }
.glyph-picker-filters { display:grid; gap:6px; padding:0 10px 9px; flex:none; }
.picker-search { display:flex; gap:5px; }.picker-search input { flex:1; width:0; font-size:11px; }.picker-search select { width:108px; font-size:10px; }
.picker-faces { display:flex; align-items:center; gap:3px; }.picker-faces>span { margin-right:2px; color:var(--muted); font-size:10px; }
.picker-faces button { flex:1; min-width:0; min-height:25px; padding:3px 2px; font-size:10px; }
.picker-faces button[data-mode=join] { color:#9ce6da; border-color:#61baaa; background:#203e38; }
.picker-faces button[data-mode=clear] { color:#e7ba85; border-color:#b98c5c; background:#3a3023; }
.picker-help,.picker-legend { font-size:9px; line-height:1.4; }.picker-toggles,.picker-legend { display:flex; flex-wrap:wrap; gap:4px 9px; }
.picker-toggles label { font-size:10px; }.picker-toggles input { margin:0; }
.legend-next { color:#d4bff3; }.legend-join { color:#83d7c8; }.legend-replace { color:#e7b67f; }
.candidate-type { grid-column:1/-1; margin:5px 0 0; color:#c3d5cb; font-size:10px; font-weight:500; }
.candidates { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-content:start; gap:5px; overflow:auto; padding:0 10px 10px; flex:1; min-height:65px; }
.candidate { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:59px; padding:6px 2px 5px; border:1px solid #3d4945; background:#141a18; }
.candidate svg { width:17px; height:34px; fill:#d2dfd8; }
.candidate-sample { display:block; position:relative; padding:3px; }.candidate-sample svg { display:block; width:22px; height:44px; }
.candidate-edge { position:absolute; display:block; background:#778e9a; opacity:.75; pointer-events:none; }
.candidate-edge.left,.candidate-edge.right { top:3px; bottom:3px; width:2px; }.candidate-edge.left { left:0; }.candidate-edge.right { right:0; }
.candidate-edge.top,.candidate-edge.bottom { left:3px; right:3px; height:2px; }.candidate-edge.top { top:0; }.candidate-edge.bottom { bottom:0; }
.candidate-edge.joined { background:#81ddc7; opacity:1; }.candidate-edge.conflict { background:#e5aa72; }
.candidate.joins:not(.exact):not(.comparing) { border-color:#487d70; }
.candidate.replaces:not(.exact):not(.comparing) { border-color:#8a6846; }
.candidate .candidate-kind { font-size:8px; }.candidate .candidate-kind.replaces { color:#e6b884; }.candidate .candidate-kind.joins { color:#81ddc7; }
.candidate small { font:7px ui-monospace,monospace; color:#9aaa9f; }
.candidate .inverse-label { color:#cfb7f3; }
.candidate .match-score { color:#bbd4c4; font-size:8px; }
.candidate.exact { border-color:#a78dc8; background:#392f46; }
.candidate.exact svg { fill:#d4bff3; }
.candidate.comparing { border-color:#80cbbd; background:#233c36; }
.candidate.comparing svg { fill:#a4e1d6; }
.browse-glyphs { margin:0 10px 8px; font-size:10px; }
.candidate-footer { border-top:1px solid var(--border); padding:6px 10px; font-size:10px; color:#98aca1; }
.no-glyphs { grid-column:1/-1; font-size:11px; }
.paths-panel { flex:none; }
.path-controls { padding:8px 10px; display:grid; gap:6px; }
.path-controls label { margin:0; }
.path-target select { flex:1; }
#pathScope { margin:0; }
#pathSettings { display:grid; grid-template-columns:1fr 1fr; gap:6px; align-items:center; }
#pathSettings>label { grid-column:1/-1; }
#pathSettings>label:first-child { grid-column:1; grid-row:1; }
#pathSettings>label:nth-child(4) { grid-column:2; grid-row:1; }
#pathSettings>label:nth-child(3) { flex-direction:row; align-items:center; }
#pathSettings>label:nth-child(3)>select { flex:1; min-width:0; width:0; }
.path-controls input[type=range] { flex:1; width:90px; }
.path-controls output { font:10px ui-monospace,monospace; }
.path-actions { display:flex; flex-wrap:wrap; gap:4px; margin:0; grid-column:1/-1; }
.path-actions button { font-size:10px; padding:3px 7px; min-height:26px; }
#pathStatus { font-size:10px; color:#c8b9dd; margin:0; }
.primary-settings>label.stacked { flex-direction:row; align-items:center; }
.primary-settings>label.stacked>select { flex:1; min-width:0; width:0; }
.detail-panel { display:grid; grid-template-columns:116px minmax(0,1fr); overflow:auto; }
.detail-panel .panel-heading { grid-column:1/-1; }
.detail-stage { position:relative; padding:8px; }
#detail { display:block; width:100px; height:200px; background:var(--cell); border:1px solid #65736f; touch-action:none; user-select:none; cursor:crosshair; }
.detail-info { padding:8px; min-width:0; }
.detail-info strong { font-weight:500; font-size:11px; font-family:"Iosevka Fixed",monospace; }
.detail-info p { font-size:10px; margin:4px 0 7px; }
.detail-info button { font-size:10px; width:100%; }
.inspect-control { margin-bottom:6px; }
.inspect-control select { flex:1; }
.completion-hint { color:#c1a8e7; }
.completion-switcher { display:flex; gap:5px; align-items:center; margin-bottom:6px; }
.completion-switcher button { width:29px; padding:3px; }
.completion-switcher output { text-align:center; font:10px ui-monospace,monospace; flex:1; }
#applyComparedCompletion { margin-bottom:6px; border-color:#568d80; color:#ace9d4; }
.panel-heading .badge { font:9px system-ui,sans-serif; border-radius:3px; background:#30393a; color:#bbc8c4; padding:2px 5px; }
.badge[data-state=locked] { background:#354039; color:var(--locked); }
.badge[data-state=proposal] { background:#3d324c; color:#d5c4f5; }
.output-panel { overflow:visible; }
.output-heading { flex:none; flex-wrap:wrap; }
.preview-controls { display:flex; align-items:center; flex-wrap:wrap; gap:7px 12px; }
.preview-controls>label { flex-shrink:0; white-space:nowrap; }
#previewFont { flex:0 0 148px; width:148px; min-width:148px; color:var(--text); background:#131819; }
.preview-controls input { width:70px; }
.output-heading h2 span { margin-left:7px; color:#80958a; font-size:10px; font-weight:400; }
.preview-options .menu-content { bottom:35px; right:0; }
.preview-options>summary { border:0; min-height:0; padding:0; font-size:10px; }
.preview-size-control output { min-width:35px; }
.output-viewport { flex:1; min-height:0; overflow:auto; padding:8px; background:#080b0c; border-radius:0 0 4px 4px; }
#glyphOutput { width:max-content; color:#edf3ed; font:400 32px/1 var(--preview-font,"Iosevka Fixed",monospace); font-kerning:none; font-variant-ligatures:none; letter-spacing:0; white-space:pre; }
#glyphOutput .output-text { font-family:var(--preview-font,"Iosevka Fixed",monospace) !important; }
.output-status { padding:4px 8px; border-top:1px solid var(--border); font-size:10px; flex:none; }
.recovery-notice { padding:4px 8px; border:1px solid #716443; border-radius:4px; color:#dacda8; font-size:11px; }
.clipboard-fallback { position:fixed; top:0; left:-10000px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Drawing overlays and cell geometry. */
.placed-ink { fill:var(--locked); }.proposal-ink { fill:#b4a9e6; }.alternative-ink { fill:#80cbbd; }.erase-ink { fill:#edf3ed; }
.placed-ink,.proposal-ink,.alternative-ink,.erase-ink { opacity:var(--glyph-opacity,1); }
.erase-difference { fill:#ff9c85; fill-opacity:.25; pointer-events:none; }
.cell-outline { fill:none; stroke:#65736e; stroke-width:1; }.cell-focus { fill:none; stroke:var(--valid); stroke-width:2; pointer-events:none; }
.anchor-guides { fill:none; stroke:#bdd1c5; stroke-opacity:.8; stroke-width:1; stroke-dasharray:4 3; pointer-events:none; }
.selection-divisions { fill:none; stroke:#9eabb6; stroke-opacity:.36; stroke-width:.7; stroke-dasharray:2 3; pointer-events:none; }
.selection-region { fill:#8de8cf; fill-opacity:.2; stroke:#b5f0dc; stroke-opacity:.7; stroke-width:.7; pointer-events:none; }
.selection-region.remove { fill:#ff9c85; stroke:#ffb8a6; }.selection-region.blocked { fill:#c28383; stroke:#bf7777; fill-opacity:.12; }
.selection-region-outline { fill:none; stroke:#b5f0dc; stroke-opacity:.7; stroke-width:.7; pointer-events:none; }.selection-region-outline.remove { stroke:#ffb8a6; }
.selection-outline { fill:none; stroke:#e3ccff; stroke-width:1.8; pointer-events:none; }.selection-outline.comparing { stroke:#8cebd2; stroke-dasharray:3 2; }
.glyph-ghost { fill:none; stroke:#68c8d9; stroke-width:1; stroke-opacity:.6; stroke-dasharray:3 3; pointer-events:none; }.glyph-ghost.second { stroke:#e9b979; stroke-dasharray:5 3; }
.loop-snap { fill:#78d9c222; stroke:#78d9c2; stroke-width:1.4; vector-effect:non-scaling-stroke; pointer-events:none; }
.empty-preview-outline { fill:none; stroke:#d9c1f5; stroke-width:1.5; stroke-dasharray:4 4; pointer-events:none; }
.line-guide { fill:none; stroke:#eadfff; stroke-width:1.4; stroke-dasharray:5 3; vector-effect:non-scaling-stroke; }
.side-guide { fill:none; stroke:#d8caff; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.line-anchor { fill:#e8d7ff; stroke:#271d37; stroke-width:1.5; }.line-endpoint { fill:#271d37; stroke:#e8d7ff; stroke-width:1.8; }
.point-cursor { fill:#e8d7ff; stroke:#271d37; stroke-width:1; }.point-cursor.snapped { fill:#80cbbd; }
.stroke-width-guide { fill:none; stroke:#d4c5f5; stroke-opacity:.09; stroke-linecap:butt; }
.sketch-guide { fill:none; stroke:#f3c176; stroke-opacity:.7; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.sketch-guide.filled { fill:#f3c176; fill-opacity:.12; stroke-width:1.2; vector-effect:non-scaling-stroke; }
.sketch-cursor { fill:#f3c176; fill-opacity:.08; stroke:#f3c176; stroke-opacity:.85; stroke-width:1; vector-effect:non-scaling-stroke; pointer-events:none; }
.sketch-intent { fill:#f3c176; fill-opacity:.16; pointer-events:none; }
.drawing-feedback { position:absolute; pointer-events:none; z-index:2; }
.editable-path { fill:none; stroke:#88949c; stroke-width:1.3; stroke-opacity:.65; vector-effect:non-scaling-stroke; }.editable-path.selected { stroke:#f3c176; stroke-width:2; stroke-opacity:1; }
.adjusted-path { fill:none; stroke:#6ac9df; stroke-width:2; stroke-dasharray:4 3; vector-effect:non-scaling-stroke; }.path-endpoint { fill:#f3c176; stroke:#151b1c; stroke-width:1; vector-effect:non-scaling-stroke; }
.artboard.editing-path,#detail.editing-path { cursor:grab; }.artboard.panning,.artboard.pulling-path,#detail.pulling-path { cursor:grabbing; }
@media(max-width:1100px) { .workspace { grid-template-columns:minmax(0,1fr) 310px; }.line-toolbar { gap:7px; } }
@media(max-width:760px) { body { overflow:auto; height:auto; min-height:100dvh; }.app-header { padding:7px 8px; gap:6px; }.brand { font-size:15px; }.save-status { font-size:9px; max-width:67px; }.header-actions { gap:3px; }.header-actions>button { padding-inline:7px; }.canvas-menu>summary { padding-inline:6px; }main { flex:none; padding:5px; }.workspace { display:flex; flex-direction:column; }.canvas-column { height:calc(60dvh + 175px); grid-template-rows:minmax(120px,1fr) 10px var(--preview-height,165px); }.workspace-sidebar { overflow:visible; }.inspector { flex:none; min-height:280px; }.candidates { max-height:370px; grid-template-columns:repeat(auto-fill,minmax(42px,1fr)); }.drawing-options { margin-left:0; }.drawing-options .menu-content { left:0; right:auto; }.canvas-footer { min-height:56px; }.primary-settings { gap:10px; }.detail-panel { grid-template-columns:116px minmax(0,1fr); } }