@import "https://fonts.googleapis.com/css2?family=Recursive:wght,MONO,CASL,slnt,CRSV@300..1000,0..1,0..1,-15..0,0..1&display=swap";@import "https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..900&display=swap";@import "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,100..900&display=swap";@import "https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,100..900&display=swap";@import "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";@import "https://fonts.googleapis.com/css2?family=Cabin:wght@400..700&display=swap";:root{--bg:#0d0d0f;--bg-panel:#121215;--bg-card:#18181c;--bg-card-hover:#1e1e24;--bg-active:#1c2a1c;--border:#252528;--border-strong:#32323a;--text-primary:#e8e6e0;--text-muted:#5e5e6a;--text-dim:#3a3a42;--accent:#a3e635;--accent-dim:#4a6618;--accent-glow:#a3e6351f;--red:#f87171;--blue:#60a5fa;--font-ui:"Recursive", "Inter", monospace;--mono:"Recursive", monospace;--radius:4px;--radius-lg:8px;--sidebar-w:240px;--right-w:300px;--header-h:44px}[data-theme=light]{--bg:#f5f4f0;--bg-panel:#eeede9;--bg-card:#e8e7e2;--bg-card-hover:#deddd8;--bg-active:#d6ecc6;--border:#d4d3ce;--border-strong:#b8b7b2;--text-primary:#1a1a1c;--text-muted:#7a7a82;--text-dim:#b0afaa;--accent:#4a7c08;--accent-dim:#c8e8a0;--accent-glow:#4a7c081a}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--text-primary);font-family:var(--font-ui);font-variation-settings:"MONO" 1, "CASL" 0, "wght" 400;-webkit-font-smoothing:antialiased;font-size:13px;overflow:hidden}#app{grid-template-rows:var(--header-h) 1fr;grid-template-columns:var(--sidebar-w) 1fr var(--right-w);width:100%;max-width:100%;height:100vh;display:grid;overflow:hidden}.header{border-bottom:1px solid var(--border);background:var(--bg-panel);z-index:10;grid-column:1/-1;align-items:center;gap:12px;padding:0 16px;display:flex;position:relative}.header-logo{font-variation-settings:"MONO" 1, "wght" 700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);align-items:center;gap:8px;font-size:11px;display:flex}.header-logo-icon{justify-content:center;align-items:center;width:18px;height:18px;display:flex}.header-sep{background:var(--border-strong);width:1px;height:20px}.header-title{color:var(--text-muted);font-variation-settings:"MONO" 1, "wght" 400;letter-spacing:.05em;font-size:11px}.header-spacer{flex:1}.header-actions{align-items:center;gap:6px;display:flex}.btn{border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--bg-card);color:var(--text-primary);font-family:var(--font-ui);font-variation-settings:"MONO" 1, "wght" 500;letter-spacing:.04em;cursor:pointer;align-items:center;gap:5px;padding:5px 10px;font-size:11px;line-height:1;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.btn:hover{background:var(--bg-card-hover);border-color:var(--text-muted)}.btn.active{background:var(--bg-active);border-color:var(--accent);color:var(--accent)}.sidebar{border-right:1px solid var(--border);background:var(--bg-panel);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;flex-direction:column;display:flex;overflow:hidden auto}.sidebar-section{border-bottom:1px solid var(--border);flex-shrink:0;padding:12px}.section-label{letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim);font-variation-settings:"MONO" 1, "wght" 600;margin-bottom:10px;font-size:9px}.font-cards{flex-direction:column;gap:4px;display:flex}.font-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);cursor:pointer;padding:10px 12px;transition:background .12s,border-color .12s;position:relative;overflow:hidden}.font-card:before{content:"";background:0 0;width:2px;transition:background .15s;position:absolute;top:0;bottom:0;left:0}.font-card:hover{background:var(--bg-card-hover)}.font-card.active{background:var(--bg-active);border-color:var(--accent-dim)}.font-card.active:before{background:var(--accent)}.font-card-name{margin-bottom:3px;font-size:14px;font-weight:500}.font-card-meta{color:var(--text-muted);font-variation-settings:"MONO" 1, "wght" 400;font-size:10px;font-family:var(--mono)}.global-sliders{flex-direction:column;gap:14px;display:flex}.slider-row{flex-direction:column;gap:4px;display:flex}.slider-header{justify-content:space-between;align-items:center;gap:4px;display:flex}.slider-name{color:var(--text-muted);font-variation-settings:"MONO" 1, "wght" 500;letter-spacing:.06em;text-transform:uppercase;font-size:10px;font-family:var(--mono)}.slider-tag{color:var(--text-dim);font-variation-settings:"MONO" 1;background:var(--bg-card);border:1px solid var(--border);font-size:9px;font-family:var(--mono);border-radius:2px;padding:1px 4px}.slider-value-row{justify-content:space-between;align-items:center;gap:6px;display:flex}.slider-value{font-variation-settings:"MONO" 1, "wght" 600;font-size:11px;font-family:var(--mono);color:var(--accent);text-align:right;min-width:40px}.slider-bounds{color:var(--text-dim);font-variation-settings:"MONO" 1;font-size:9px;font-family:var(--mono)}input[type=range]{appearance:none;background:var(--border-strong);cursor:pointer;border-radius:2px;outline:none;width:100%;height:4px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);cursor:pointer;border-radius:50%;width:12px;height:12px;transition:box-shadow .15s,transform .1s}input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--accent-glow);transform:scale(1.15)}input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 6px var(--accent-glow);transform:scale(1.3)}input[type=range]::-moz-range-thumb{background:var(--accent);cursor:pointer;border:none;border-radius:50%;width:12px;height:12px}input[type=range]::-moz-range-track{background:var(--border-strong);border-radius:2px;height:4px}.center{background:var(--bg);flex-direction:column;display:flex;position:relative;overflow:hidden}.center.comparison{flex-direction:row}.preview-pane{flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.center.comparison .preview-pane:first-child{border-right:1px solid var(--border-strong)}.preview-pane-label{letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-variation-settings:"MONO" 1, "wght" 600;font-size:9px;font-family:var(--mono);border-bottom:1px solid var(--border);flex-shrink:0;align-items:center;gap:8px;padding:6px 20px;display:none}.center.comparison .preview-pane-label{display:flex}.pane-dot{background:var(--accent);border-radius:50%;width:6px;height:6px}.pane-b .pane-dot{background:var(--blue)}.preview-hero{flex-direction:column;flex:1;justify-content:center;min-height:0;padding:40px 48px 24px;display:flex;position:relative;overflow:hidden}.preview-hero:before{content:"";background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);opacity:.35;pointer-events:none;background-size:40px 40px;position:absolute;inset:0}.preview-text{letter-spacing:-.02em;color:var(--text-primary);cursor:text;word-break:break-word;outline:none;min-height:80px;font-size:80px;line-height:1.05;transition:font-variation-settings .1s,font-size .15s,line-height .15s,letter-spacing .15s;position:relative}.preview-text:focus{text-shadow:0 0 80px var(--accent-glow)}.preview-text:empty:before{content:attr(data-placeholder);color:var(--text-dim);pointer-events:none}.preview-body{flex-shrink:0;padding:0 48px 32px;position:relative}.preview-body-text{color:var(--text-muted);border-top:1px solid var(--border);max-width:68ch;padding-top:20px;font-size:15px;line-height:1.65;transition:font-variation-settings .1s,font-size .15s,line-height .15s,letter-spacing .15s}.animate-indicator{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-variation-settings:"MONO" 1, "wght" 600;font-size:9px;font-family:var(--mono);pointer-events:none;align-items:center;gap:6px;display:none;position:absolute;top:10px;right:12px}.animate-indicator.visible{display:flex}.animate-dot{background:var(--accent);border-radius:50%;width:6px;height:6px;animation:1s ease-in-out infinite pulse-dot}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.6)}}.right-panel{border-left:1px solid var(--border);background:var(--bg-panel);scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;flex-direction:column;display:flex;overflow:hidden auto}.right-section{border-bottom:1px solid var(--border);flex-shrink:0;padding:12px}.axis-sliders{flex-direction:column;gap:14px;display:flex}.axis-header-row{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.axis-count{font-variation-settings:"MONO" 1, "wght" 400;font-size:9px;font-family:var(--mono);color:var(--text-dim)}.reset-btn{color:var(--text-muted);border-color:var(--border);background:0 0;padding:3px 7px;font-size:9px}.reset-btn:hover{color:var(--red);border-color:var(--red);background:#f871710f}.css-output{flex-direction:column;gap:8px;display:flex}.css-panel{font-family:var(--mono);font-variation-settings:"MONO" 1, "wght" 400;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);color:var(--accent);white-space:pre;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;padding:10px 12px;font-size:11px;line-height:1.75;overflow-x:auto}.css-keyword{color:var(--blue)}.css-prop{color:#c4b5fd}.css-string{color:#f9a8d4}.css-num{color:var(--accent)}.css-unit{color:var(--text-muted)}.css-semi{color:var(--text-dim)}.css-brace{color:var(--text-muted)}.copy-btn{justify-content:center;width:100%}.copy-btn.copied{border-color:var(--accent);color:var(--accent);background:var(--bg-active)}.right-subpanel{border-bottom:2px solid var(--border-strong);flex-direction:column;flex-shrink:0;display:flex}.right-subpanel:last-child{border-bottom:none}.subpanel-header{letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);font-variation-settings:"MONO" 1, "wght" 600;font-size:9px;font-family:var(--mono);border-bottom:1px solid var(--border);background:var(--bg-panel);flex-shrink:0;align-items:center;gap:6px;padding:6px 12px;display:flex}.mini-font-select{flex-direction:column;gap:3px;display:flex}.mini-font-option{border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);cursor:pointer;color:var(--text-muted);text-align:left;padding:6px 8px;font-family:inherit;font-size:11px;transition:background .1s,border-color .1s,color .1s}.mini-font-option:hover{background:var(--bg-card-hover);color:var(--text-primary)}.mini-font-option.active{background:var(--bg-active);border-color:var(--accent-dim);color:var(--accent)}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:2px}.loading-overlay{background:var(--bg);z-index:1000;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);font-variation-settings:"MONO" 1, "wght" 500;font-size:11px;font-family:var(--mono);flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:opacity .5s;display:flex;position:fixed;inset:0}.loading-overlay.hidden{opacity:0;pointer-events:none}.loading-logo{color:var(--accent);font-variation-settings:"MONO" 1, "wght" 700;letter-spacing:.2em;margin-bottom:8px;font-size:18px}.loading-bar{background:var(--border-strong);border-radius:1px;width:160px;height:2px;overflow:hidden}.loading-bar-fill{background:var(--accent);border-radius:1px;width:40%;height:100%;animation:1s ease-in-out infinite alternate loading-anim}@keyframes loading-anim{0%{transform:translate(-100%)}to{transform:translate(350%)}}