:root{--ink:#000;--paper:#fff;--muted:#777;--faint:#f4f4f4;--hair:#e6e6e6;--accent:#0a4dff;--bar-h:52px;--sans:Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;--mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;--fallback-font:"Adobe NotDef", var(--sans);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:13px;line-height:1.4}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none;padding:0}button:disabled{cursor:default;opacity:.35}:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.mono{font-family:var(--mono)}.small{font-size:11px}.muted{color:var(--muted)}.warning{border:1px solid var(--ink);background:repeating-linear-gradient(-45deg, var(--paper) 0 6px, var(--faint) 6px 12px);margin:0;padding:6px 8px}.loading{height:100%;font-family:var(--mono);place-items:center;display:grid}.icon{flex:none;width:14px;height:14px}.screen{flex-direction:column;height:100%;display:flex;overflow:hidden}.bar{height:var(--bar-h);border-bottom:1px solid var(--ink);background:var(--paper);flex:none;align-items:stretch;display:flex}.bar-cell{border-right:1px solid var(--ink);white-space:nowrap;align-items:center;gap:8px;padding:0 18px;display:flex}.bar-spacer{flex:1}.bar-spacer~.bar-cell{border-right:none;border-left:1px solid var(--ink)}.bar-button{transition:background .12s}.bar-button:hover:not(:disabled){background:var(--faint)}.bar-button.primary{background:var(--ink);color:var(--paper);font-weight:500}.bar-button.primary:hover:not(:disabled){background:#222}.brand{letter-spacing:-.01em;font-weight:600}.logo{width:20px;height:20px}.bar-title{flex:0 360px;min-width:0}.title-input{background:0 0;border:none;outline:none;width:100%;padding:4px 0;font-size:15px;font-weight:500}.title-input:focus{box-shadow:inset 0 -1px 0 var(--ink)}.variant-tabs{gap:0;padding:0 12px}.variant-tabs button{border:1px solid var(--ink);white-space:nowrap;height:26px;padding:0 9px;font-size:12px}.variant-tabs button+button{border-left:none}.variant-tabs button:hover:not(.active){background:var(--faint)}.variant-tabs button.active{background:var(--ink);color:var(--paper)}.button-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.button-row .button{padding:0 8px}.counter{justify-content:center;min-width:84px}.section-label{height:36px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--ink);justify-content:space-between;align-items:center;padding:0 18px;font-size:11px;display:flex}.label{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:11px}.notice{border-bottom:1px solid var(--ink);background:var(--faint);padding:12px 18px}.sidebar{border-left:1px solid var(--ink);background:var(--paper);overflow-y:auto}.panel{border-bottom:1px solid var(--ink);flex-direction:column;gap:12px;padding:16px 18px 18px;display:flex}.panel p{margin:0}.panel-title{font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;justify-content:space-between;align-items:center;font-size:11px;display:flex}.field{flex-direction:column;gap:5px;display:flex}.field>span{color:var(--muted);justify-content:space-between;font-size:11px;display:flex}.field input:not([type=range]),.field select{border:1px solid var(--ink);background:var(--paper);border-radius:0;outline:none;width:100%;min-width:0;height:32px;padding:0 8px}.field select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-repeat:no-repeat;background-size:5px 5px}.field input:focus,.field select:focus{box-shadow:inset 0 0 0 1px var(--ink)}.number-input{position:relative}.number-input input{font-family:var(--mono);font-size:12px}.number-input .suffix{color:var(--muted);font-family:var(--mono);pointer-events:none;font-size:11px;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.field-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.field-grid.three{grid-template-columns:repeat(3,1fr)}.span2{grid-column:span 2;align-self:end;padding-bottom:8px}input[type=range]{appearance:none;background:0 0;width:100%;height:20px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:var(--ink);height:1px}input[type=range]::-moz-range-track{background:var(--ink);height:1px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--paper);border:1px solid var(--ink);border-radius:50%;width:12px;height:12px;margin-top:-6px}input[type=range]::-moz-range-thumb{background:var(--paper);border:1px solid var(--ink);border-radius:50%;width:12px;height:12px}input[type=range]:active::-webkit-slider-thumb{background:var(--ink)}.button{border:1px solid var(--ink);background:var(--paper);justify-content:center;align-items:center;gap:8px;height:36px;padding:0 14px;transition:background .12s;display:inline-flex}.button:hover:not(:disabled){background:var(--faint)}.button.primary{background:var(--ink);color:var(--paper);font-weight:500}.button.primary:hover:not(:disabled){background:#222}.button.block{width:100%}.button.danger:hover:not(:disabled){background:var(--ink);color:var(--paper)}.segmented{border:1px solid var(--ink);grid-auto-columns:1fr;grid-auto-flow:column;display:grid}.segmented button{height:30px}.segmented button+button{border-left:1px solid var(--ink)}.segmented button.active{background:var(--ink);color:var(--paper)}.toggle{border:1px solid var(--ink);border-radius:8px;flex:none;width:30px;height:16px;transition:background .15s;position:relative}.toggle span{background:var(--ink);border-radius:50%;width:10px;height:10px;transition:transform .15s;position:absolute;top:2px;left:2px}.toggle.on{background:var(--ink)}.toggle.on span{background:var(--paper);transform:translate(14px)}.toggle-row{justify-content:space-between;align-items:center;display:flex}.kv{justify-content:space-between;display:flex}.progress{border:1px solid var(--ink);height:6px}.progress-bar{background:var(--ink);height:100%}.library{flex:1;overflow-y:auto}.library-intro{border-bottom:1px solid var(--ink);max-width:100%;padding:56px 18px 48px}.library-intro h1{letter-spacing:-.035em;margin:0 0 12px;font-size:clamp(32px,5vw,64px);font-weight:500;line-height:1}.library-intro p{color:#333;max-width:520px;margin:0;font-size:15px}.font-cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-right:-1px;display:grid}.font-card{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);cursor:pointer;text-align:left;flex-direction:column;min-height:260px;display:flex;position:relative}.font-card:hover{background:var(--faint)}.font-card-preview{flex:1;place-items:center;min-height:180px;padding:24px;display:grid}.font-card-run{max-width:100%;height:120px}.font-card-empty{color:var(--hair);letter-spacing:-.03em;font-size:88px;font-weight:500}.font-card-meta{border-top:1px solid var(--ink);padding:12px 16px}.font-card-name{font-size:14px;font-weight:500}.font-card-actions{opacity:0;transition:opacity .12s;display:flex;position:absolute;top:0;right:0}.font-card:hover .font-card-actions,.font-card-actions:focus-within{opacity:1}.font-card-actions button{border-left:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper);font-size:11px;font-family:var(--mono);padding:6px 10px}.font-card-actions button:hover{background:var(--ink);color:var(--paper)}.new-card{justify-content:center;align-items:center;gap:10px;font-size:14px;font-weight:500}.new-plus{border:1px solid var(--ink);border-radius:50%;place-items:center;width:56px;height:56px;font-size:28px;font-weight:300;display:grid}.font-layout{flex:1;grid-template-columns:1fr 320px;min-height:0;display:grid}.font-main{overflow:hidden auto}.tester{border-bottom:1px solid var(--ink)}.tester-controls{border-bottom:1px solid var(--ink);align-items:stretch;height:40px;display:flex}.tester-controls .label{border-right:1px solid var(--ink);align-items:center;padding:0 18px;display:flex}.tester-input{border:none;outline:none;flex:1;min-width:0;padding:0 14px}.tester-size{border-left:1px solid var(--ink);align-items:center;gap:10px;width:220px;padding:0 18px;display:flex}.tester-output{overflow-wrap:anywhere;min-height:120px;padding:28px 18px 32px;line-height:1.15}.tester-empty{font-family:var(--sans);font-size:15px}.glyph-group .section-label{background:var(--paper);z-index:1;position:sticky;top:0}.glyph-grid{border-bottom:1px solid var(--ink);grid-template-columns:repeat(auto-fill,minmax(92px,1fr));margin-bottom:-1px;margin-right:-1px;display:grid}.glyph-cell{aspect-ratio:1;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);place-items:center;transition:background .1s;display:grid;position:relative;overflow:hidden}.glyph-cell:hover{background:var(--faint)}.glyph-cell:hover .glyph-cell-ghost{color:#bbb}.glyph-cell-label{font-family:var(--mono);color:var(--muted);font-size:10px;position:absolute;top:6px;left:8px}.glyph-cell.drawn .glyph-cell-label:after{content:"";vertical-align:1px;background:var(--ink);border-radius:50%;width:5px;height:5px;margin-left:5px;display:inline-block}.glyph-cell-alts{font-family:var(--mono);border:1px solid var(--ink);background:var(--paper);padding:0 4px;font-size:10px;line-height:14px;position:absolute;bottom:5px;right:6px}.glyph-cell-svg{width:80%;height:80%}.glyph-cell-ghost{color:#dcdcdc;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:40px;transition:color .1s}.metrics-diagram{border:1px solid var(--ink);width:100%;overflow:visible}.metrics-diagram line{stroke:#bbb;stroke-width:1px;vector-effect:non-scaling-stroke}.metrics-diagram line.baseline{stroke:var(--ink)}.metrics-diagram text{font-family:var(--mono);fill:var(--muted);font-size:9px}.metrics-diagram .metrics-sample{fill:#ececec;font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.glyph-title{gap:12px}.glyph-title-char{background:var(--ink);width:28px;height:28px;color:var(--paper);place-items:center;font-size:15px;font-weight:500;display:grid}.draw-layout{flex:1;grid-template-columns:56px 1fr 300px;min-height:0;display:grid}.toolbar{border-right:1px solid var(--ink);flex-direction:column;display:flex}.tool{border-bottom:1px solid var(--ink);place-items:center;width:55px;height:55px;transition:background .1s;display:grid;position:relative}.tool:hover:not(:disabled):not(.active){background:var(--faint)}.tool svg{fill:none;stroke:currentColor;stroke-width:1.3px;stroke-linejoin:round;stroke-linecap:round;width:20px;height:20px}.tool.active{background:var(--ink);color:var(--paper)}.tool-key{font-family:var(--mono);opacity:.55;font-size:9px;position:absolute;bottom:3px;right:5px}.toolbar-sep{border-bottom:1px solid var(--ink);height:12px}.toolbar-spacer{flex:1}.toolbar-spacer+.tool{border-top:1px solid var(--ink);border-bottom:none}.canvas-area{background:var(--paper);min-width:0;min-height:0;position:relative;overflow:hidden}.editor{position:absolute;inset:0}.editor-svg{touch-action:none;-webkit-user-select:none;user-select:none;display:block}.editor-svg .em-box{fill:#fafafa}.editor-svg .grid{fill:none;stroke:#ececec;stroke-width:1px;vector-effect:non-scaling-stroke}.editor-svg .guide{stroke:#b8b8b8;stroke-width:1px;vector-effect:non-scaling-stroke}.editor-svg .guide.baseline{stroke:var(--ink)}.editor-svg .sidebearing{stroke:#999;stroke-width:1px;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}.editor-svg .reference text{fill:var(--ink)}.editor-svg .guide-glyph{fill:var(--accent);fill-opacity:.07;stroke:var(--accent);stroke-opacity:.5;stroke-width:1px;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.editor-svg .glyph-fill{fill:var(--ink)}.editor-svg .hit{fill:#0000;stroke:none;cursor:move}.editor-svg .hit-stroke{fill:none;stroke:#0000;stroke-linecap:round;stroke-linejoin:round}.editor-svg .selected-outline{fill:none;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke;pointer-events:none}.editor-svg .selected-outline.cut{stroke-dasharray:5 3}.editor-svg .selected-stroke-halo{fill:none;stroke:var(--accent);stroke-opacity:.22;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.editor-svg .live-stroke{fill:none;stroke:var(--ink);stroke-linecap:round;stroke-linejoin:round}.editor-svg .live-dot{fill:var(--ink)}.editor-svg .live-stroke.eraser{stroke:var(--accent);stroke-opacity:.25}.editor-svg .pen-draft-fill{fill:var(--ink);fill-opacity:.1}.editor-svg .pen-draft-fill.cut{fill:var(--accent)}.editor-svg .pen-draft{fill:none;stroke:var(--accent);stroke-width:1.5px;vector-effect:non-scaling-stroke}.editor-svg .pen-rubber{fill:none;stroke:var(--accent);stroke-width:1px;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}.editor-svg .node{fill:var(--paper);stroke:var(--accent);stroke-width:1.5px}.editor-svg .nodes.interactive .node{cursor:pointer}.editor-svg .node.active,.editor-svg .node.close-target:hover{fill:var(--accent)}.editor-svg .node.close-target{cursor:pointer}.editor-svg .handle-line{stroke:var(--accent);stroke-width:1px}.editor-svg .handle{fill:var(--accent)}.editor-svg .nodes.interactive .handle{cursor:pointer}.editor-svg .brush-cursor{fill:none;stroke:#fff;stroke-width:1px;mix-blend-mode:difference;pointer-events:none}.editor-svg .guide-label{font-family:var(--mono);fill:#999;pointer-events:none;font-size:10px}.editor-svg .guide-value{fill:#c4c4c4}.editor-svg .advance-handle{cursor:ew-resize}.editor-svg .advance-handle rect{fill:var(--paper);stroke:var(--ink)}.editor-svg .advance-handle:hover rect{fill:var(--ink)}.editor-svg .advance-handle path{fill:none;stroke:var(--ink);pointer-events:none}.editor-svg .advance-handle:hover path{stroke:var(--paper)}.editor-svg .advance-label{font-family:var(--mono);fill:var(--muted);pointer-events:none;font-size:10px}.canvas-hud{border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper);pointer-events:none;align-items:stretch;height:30px;display:flex;position:absolute;top:0;left:0}.canvas-hud>span{align-items:center;padding:0 12px;display:flex}.canvas-hud>span+span{border-left:1px solid var(--ink)}.zoom-controls{border-top:1px solid var(--ink);border-left:1px solid var(--ink);background:var(--paper);display:flex;position:absolute;bottom:0;right:0}.zoom-controls button{min-width:36px;height:32px;padding:0 10px;font-size:15px}.zoom-controls button.small{font-size:11px}.zoom-controls button+button{border-left:1px solid var(--ink)}.zoom-controls button:hover{background:var(--faint)}.shortcuts{border-top:1px solid var(--ink);border-right:1px solid var(--ink);background:var(--paper);flex-direction:column;gap:6px;width:290px;padding:14px 16px;display:flex;position:absolute;bottom:0;left:0}.shortcuts .panel-title{margin-bottom:4px}.shortcut-row{justify-content:space-between;gap:12px;display:flex}.width-control{flex-direction:column;gap:10px;display:flex}.width-preview{border:1px solid var(--ink);background:#fafafa;place-items:center;height:70px;display:grid}.width-preview svg{width:120px;height:60px}.width-preview circle{fill:var(--ink)}.width-preview .taper line{stroke:var(--ink);stroke-linecap:round}.width-inputs{align-items:end;gap:12px;display:flex}.width-inputs input[type=range]{flex:1;margin-bottom:6px}.width-inputs .field{width:86px}.checkbox-group{flex-direction:column;gap:6px;display:flex}.checkbox{cursor:pointer;align-items:center;gap:10px;display:flex}.checkbox input{appearance:none;border:1px solid var(--ink);background:var(--paper);cursor:pointer;flex:none;place-items:center;width:16px;height:16px;margin:0;display:grid}.checkbox input:checked{background:var(--ink)}.checkbox input:checked:after{content:"";border-left:1.5px solid var(--paper);border-bottom:1.5px solid var(--paper);width:8px;height:4px;transform:translateY(-1px)rotate(-45deg)}.context-run{border:1px solid var(--ink);background:#fafafa;width:100%;height:64px}.context-run .run-highlight{fill:var(--accent);fill-opacity:.08}.glyph-strip{border-top:1px solid var(--ink);scrollbar-width:thin;flex:none;height:58px;display:flex;overflow:auto hidden}.strip-cell{border-right:1px solid var(--ink);flex:none;place-items:center;width:48px;height:100%;display:grid}.strip-cell:hover:not(.current){background:var(--faint)}.strip-cell.current{background:var(--ink);color:var(--paper)}.strip-cell.current .strip-svg path{fill:var(--paper)}.strip-svg{width:38px;height:38px}.strip-ghost{color:#c8c8c8;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:18px}.strip-cell.current .strip-ghost{color:#777}@media (width<=900px){.font-layout{grid-template-columns:1fr}.font-layout .sidebar{border-left:none;border-top:1px solid var(--ink)}.font-main{overflow:visible}.font-layout{overflow-y:auto}.draw-layout{grid-template-columns:56px 1fr 240px}.bar-cell{padding:0 12px}.glyph-title .muted{display:none}}.dialog-backdrop{z-index:10;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#ffffffd1;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dialog{background:var(--paper);border:1px solid var(--ink);width:min(560px,100%);box-shadow:8px 8px 0 var(--ink)}.dialog-head{border-bottom:1px solid var(--ink);justify-content:space-between;align-items:center;height:44px;padding:0 0 0 18px;display:flex}.dialog-close{border-left:1px solid var(--ink);width:44px;height:43px;font-size:20px}.dialog-close:hover{background:var(--faint)}.dialog-body{flex-direction:column;gap:18px;padding:18px;display:flex}.dialog-foot{border-top:1px solid var(--ink);justify-content:flex-end;gap:8px;padding:12px 18px;display:flex}.spacing-options{border:1px solid var(--ink);grid-template-columns:1fr 1fr;display:grid}.spacing-option{text-align:left;flex-direction:column;gap:6px;padding:14px;transition:background .1s;display:flex}.spacing-option+.spacing-option{border-left:1px solid var(--ink)}.spacing-option:hover:not(.active){background:var(--faint)}.spacing-option.active{background:var(--ink);color:var(--paper)}.spacing-option.active .spacing-body{color:#bbb}.spacing-sample{white-space:nowrap;margin-bottom:4px;font-size:26px;line-height:1.2;overflow:hidden}.spacing-sample.proportional{font-family:Helvetica Neue,Helvetica,Arial,sans-serif}.spacing-sample.monospace{letter-spacing:-.02em;font-family:Courier New,Courier,monospace;font-size:22px}.spacing-title{font-weight:500}.spacing-body{color:var(--muted);font-size:12px}.mono-width{grid-template-columns:120px 1fr;align-items:end;gap:14px;display:grid}.mono-width p{margin:0 0 4px}.tag{border:1px solid var(--ink);font-family:var(--mono);vertical-align:2px;margin-left:8px;padding:0 5px;font-size:10px;font-weight:400;line-height:15px;display:inline-block}