:root{--accent:#ff4f1f;--ink:#141414;--muted:#9a9a9a;--line:#ededed;--bg:#fff;--panel:#f5f5f4;--track:#dcdcdc;--ease:cubic-bezier(.22, 1, .36, 1);--ui-font:system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);height:100dvh;color:var(--ink);font-family:var(--ui-font);grid-template-rows:1fr auto;font-size:13px;display:grid;overflow:hidden}button,select,input{font:inherit;color:inherit}input[type=range]{appearance:none;cursor:pointer;background:0 0;height:16px}input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) var(--fill,0%), var(--track) var(--fill,0%));border-radius:2px;height:4px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:var(--ink);border:none;border-radius:50%;width:14px;height:14px;margin-top:-5px}input[type=range]::-moz-range-track{background:var(--track);border-radius:2px;height:4px}input[type=range]::-moz-range-progress{background:var(--accent);border-radius:2px;height:4px}input[type=range]::-moz-range-thumb{background:var(--ink);border:none;border-radius:50%;width:14px;height:14px}#stage{cursor:crosshair;touch-action:none;place-items:center;padding:6vh 6vw;display:grid;position:relative;overflow:hidden}#stage.held{cursor:default}#specimen{text-align:center;overflow-wrap:anywhere;max-width:100%;transition:font-size .4s var(--ease);cursor:text;outline:none;font-size:200px;line-height:1.05}#specimen:focus{caret-color:var(--accent)}#specimen::selection{background:color-mix(in srgb, var(--accent) 25%, transparent)}.hint{text-align:center;color:var(--muted);pointer-events:none;transition:opacity .4s var(--ease);margin:0;position:absolute;top:16px;left:0;right:0}#panel{background:var(--panel);transition:transform .4s var(--ease), opacity .4s var(--ease)}.panel-bar{justify-content:space-between;align-items:center;gap:16px;padding:10px 20px;display:flex}.font-name span{color:var(--muted);margin-left:6px}.actions{align-items:center;gap:6px;display:flex}button{border:1px solid var(--line);background:var(--bg);cursor:pointer;transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);border-radius:999px;padding:6px 14px}button:hover{border-color:var(--ink)}button.primary{background:var(--ink);border-color:var(--ink);color:#fff}button.primary:hover{opacity:.85}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.toggle[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}button.icon{width:32px;transition:transform .4s var(--ease);padding:6px 0}kbd{opacity:.5;margin-left:4px;font-family:inherit;font-size:11px}.panel-body{max-height:42vh;transition:max-height .4s var(--ease), padding .4s var(--ease), opacity .3s var(--ease);padding:4px 20px 20px;overflow:auto}#panel.collapsed .panel-body{opacity:0;max-height:0;padding-top:0;padding-bottom:0}#panel.collapsed .icon{transform:rotate(180deg)}.settings{flex-wrap:wrap;align-items:center;gap:8px 28px;margin-bottom:14px;display:flex}.settings label{color:var(--muted);align-items:center;gap:8px;display:flex}.settings input[type=range]{width:140px}.settings output{color:var(--ink);font-variant-numeric:tabular-nums;min-width:44px}select{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:6px;padding:3px 6px}.chips{flex-wrap:wrap;gap:6px;margin-bottom:16px;display:flex}.chips:empty{display:none}.sliders{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px 28px;display:grid}.axis-head{align-items:baseline;gap:8px;display:flex}.axis-head .tag{color:var(--accent);font-family:ui-monospace,Menlo,monospace;font-size:11px}.axis-head .value{font-variant-numeric:tabular-nums;margin-left:auto}.axis input{width:100%;margin:6px 0 2px}.axis-range{color:var(--muted);justify-content:space-between;font-size:11px;display:flex}.empty{color:var(--muted)}body.ui-hidden #panel{opacity:0;pointer-events:none;transform:translateY(100%)}body.ui-hidden .hint{opacity:0}body.ui-hidden{grid-template-rows:1fr 0}#drop-overlay{border:2px dashed var(--accent);background:color-mix(in srgb, var(--bg) 85%, transparent);color:var(--accent);opacity:0;pointer-events:none;transition:opacity .2s var(--ease);border-radius:16px;place-items:center;font-size:18px;display:grid;position:fixed;inset:12px}body.dropping #drop-overlay{opacity:1}#welcome{background:var(--bg);width:min(400px,100vw - 32px);color:var(--ink);border:none;border-radius:16px;padding:24px;line-height:1.5;box-shadow:0 12px 40px #0000001f}#welcome[open]{animation:rise .4s var(--ease)}#welcome::backdrop{background:#ffffff80}#welcome h2{margin:0 0 8px;font-size:15px}#welcome p{margin:0 0 12px}#welcome ul{color:#555;margin:0 0 12px;padding-left:18px}#welcome li{margin-bottom:4px}#welcome button{margin-top:4px}@keyframes rise{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion:reduce){#welcome[open]{animation:none}}#toast{background:var(--ink);color:#fff;white-space:nowrap;text-overflow:ellipsis;opacity:0;pointer-events:none;max-width:calc(100vw - 32px);transition:opacity .3s var(--ease), transform .3s var(--ease);border-radius:999px;padding:8px 14px;position:fixed;top:16px;left:50%;overflow:hidden;transform:translate(-50%,-8px)}#toast.show{opacity:1;transform:translate(-50%)}@media (width<=640px){.panel-bar{flex-wrap:wrap;padding:10px 16px}.panel-body{padding:4px 16px 16px}}