:root{--ink:#171717;--body:#4d4d4d;--mute:#888;--hairline:#ebebeb;--hairline-strong:#a1a1a1;--canvas:#fff;--canvas-soft:#fafafa;--canvas-soft-2:#f5f5f5;--link:#0070f3;--surface:#fff;--on-dark-btn:#fff;--radius:8px;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono:ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;--maxw:1080px}:root[data-theme=dark]{--ink:#ededed;--body:#b3b3b3;--mute:#8a8a8a;--hairline:#262626;--hairline-strong:#4d4d4d;--canvas:#0a0a0a;--canvas-soft:#141414;--canvas-soft-2:#1c1c1c;--link:#6ea8ff;--surface:#161616;--on-dark-btn:#0a0a0a}:root[data-theme=dark] body{color-scheme:dark}:root[data-theme=dark] .site-header{background:#0a0a0ad9}:root[data-theme=dark] #tool-text,:root[data-theme=dark] .weight-select,:root[data-theme=dark] .btn,:root[data-theme=dark] .seg button,:root[data-theme=dark] .cat-tab,:root[data-theme=dark] .cat-arrow,:root[data-theme=dark] .swatch,:root[data-theme=dark] .symbol-btn{background:var(--surface);color:var(--ink)}:root[data-theme=dark] .btn-primary,:root[data-theme=dark] .seg button[aria-pressed=true],:root[data-theme=dark] .cat-tab[aria-pressed=true],:root[data-theme=dark] .page-num[aria-pressed=true],:root[data-theme=dark] .symbol-btn.symbol-added{background:var(--ink);border-color:var(--ink);color:var(--on-dark-btn)}:root[data-theme=dark] .nav-cta:hover,:root[data-theme=dark] .cat-arrow:hover{background:var(--ink);color:var(--on-dark-btn)!important}:root[data-theme=dark] .font-card-preview{color:var(--preview-color,#ededed)}:root[data-theme=dark] .font-card:not(.font-ready) .font-card-preview{background:linear-gradient(100deg,#1c1c1c 40%,#2a2a2a 50%,#1c1c1c 60%) 0 0/200% 100%}#theme-toggle{border:1px solid var(--hairline-strong);width:34px;height:34px;color:var(--ink);cursor:pointer;background:0 0;border-radius:50%;justify-content:center;align-items:center;padding:0;display:flex}#theme-toggle svg{width:17px;height:17px}#theme-toggle .icon-sun{display:none}:root[data-theme=dark] #theme-toggle .icon-sun{display:block}:root[data-theme=dark] #theme-toggle .icon-moon{display:none}*,:before,:after{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-sans);color:var(--ink);background:var(--canvas);-webkit-font-smoothing:antialiased;margin:0;font-size:16px;line-height:1.6}img,svg{max-width:100%;display:block}a{color:var(--link);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3{letter-spacing:-.03em;margin:0 0 .5em;line-height:1.15}h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:800}h2{font-size:clamp(1.5rem,3.5vw,2.125rem);font-weight:750}h3{font-size:1.125rem;font-weight:700}p{color:var(--body);margin:0 0 1em}.mono-label{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-size:.6875rem}.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}section{padding-block:clamp(48px,8vw,88px)}section[id]{scroll-margin-top:70px}.section-head{max-width:640px;margin-bottom:32px}.site-header{z-index:50;-webkit-backdrop-filter:saturate(180%)blur(12px);border-bottom:1px solid var(--hairline);background:#ffffffd9;position:sticky;top:0}.site-header .container{justify-content:space-between;align-items:center;height:56px;display:flex}.brand{color:var(--ink);align-items:center;gap:10px;display:flex}.brand:hover{text-decoration:none}.brand-badge{background:var(--ink);width:32px;height:32px;color:var(--canvas);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;padding-top:3px;font-family:UnifrakturMaguntia,Georgia,serif;font-size:1.625rem;line-height:1;display:flex}.brand-name{letter-spacing:-.02em;white-space:nowrap;font-size:.9375rem;font-weight:750}.site-nav{align-items:center;gap:20px;display:flex}.site-nav a{color:var(--body);font-size:.875rem}.site-nav a:hover{color:var(--ink);text-decoration:none}.nav-cta{border:1px solid var(--ink);border-radius:999px;padding:6px 14px;font-weight:600;transition:background .15s,color .15s;color:var(--ink)!important}.nav-cta:hover{background:var(--ink);color:#fff!important}@media (width<=640px){.site-nav a:not(.nav-cta){display:none}}.hero{text-align:center;padding-block:clamp(32px,5vw,56px)}.hero .mono-label{border:1px solid var(--hairline);border-radius:999px;margin-bottom:14px;padding:4px 10px;display:inline-block}.hero p.lede{max-width:620px;color:var(--body);margin:0 auto;font-size:1.0625rem}.tool{padding-top:clamp(24px,4vw,40px);padding-bottom:0}.tool-shell{border:1px solid var(--hairline);background:var(--canvas);border-radius:12px;overflow:hidden}.tool-controls{border-bottom:1px solid var(--hairline);background:var(--canvas-soft);gap:16px;padding:20px;display:grid}.text-input-row{gap:10px;display:flex}#tool-text{font:inherit;border:1px solid var(--hairline-strong);border-radius:var(--radius);color:var(--ink);resize:none;background:#fff;outline:none;flex:1;min-width:0;max-height:120px;padding:12px 16px;font-size:1rem;line-height:1.45;transition:border-color .15s,box-shadow .15s;overflow:hidden}#tool-text:focus{border-color:var(--ink);box-shadow:0 0 0 3px #00000014}.control-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end;gap:16px;display:grid}.control{gap:6px;display:grid}.control label{color:var(--ink);justify-content:space-between;gap:8px;font-size:.8125rem;font-weight:600;display:flex}.control label output{font-family:var(--font-mono);color:var(--mute);font-size:.75rem;font-weight:400}input[type=range]{width:100%;accent-color:var(--ink);height:28px}.weight-select{font:inherit;border:1px solid var(--hairline-strong);border-radius:var(--radius);color:var(--ink);background:#fff;width:100%;padding:7px 10px;font-size:.875rem}.reset-btn{text-align:center;width:100%}.reset-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}.swatches{align-items:center;gap:8px;display:flex}.swatch{border:1px solid var(--hairline-strong);cursor:pointer;border-radius:50%;width:26px;height:26px;padding:0}.swatch[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}.swatch-custom{background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);position:relative;overflow:hidden}.swatch-custom input{opacity:0;cursor:pointer;position:absolute;inset:0}.seg{border:1px solid var(--hairline-strong);border-radius:var(--radius);width:100%;display:inline-flex;overflow:hidden}.seg button{font:inherit;cursor:pointer;color:var(--body);white-space:nowrap;background:#fff;border:0;flex:1;padding:7px 12px;font-size:.8125rem}.seg button+button{border-left:1px solid var(--hairline)}.seg button[aria-pressed=true]{background:var(--ink);color:#fff}.cat-tabs-wrap{border-bottom:1px solid var(--hairline);align-items:center;gap:6px;padding:14px 12px;display:flex}.cat-arrow{border:1px solid var(--hairline-strong);width:30px;height:30px;color:var(--ink);cursor:pointer;background:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;padding:0 0 2px;font-size:1.125rem;line-height:1;transition:background .15s,color .15s;display:flex}.cat-arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)}.cat-tabs{scrollbar-width:none;border-bottom:0;flex:1;gap:8px;padding:0;display:flex;overflow-x:auto}.cat-tabs::-webkit-scrollbar{display:none}.cat-tab{font:inherit;white-space:nowrap;border:1px solid var(--hairline-strong);color:var(--body);cursor:pointer;background:#fff;border-radius:999px;padding:6px 14px;font-size:.8125rem}.cat-tab[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}.preview-grid{background:var(--canvas);grid-template-columns:1fr;transition:background .2s;display:grid}.preview-grid.bg-dark{background:#111}@media (width>=720px){.preview-grid{grid-template-columns:1fr 1fr}}.font-card{border-bottom:1px solid var(--hairline);align-content:start;gap:12px;padding:20px;display:grid}.preview-grid.bg-dark .font-card{border-color:#2a2a2a}@media (width>=720px){.font-card:nth-child(odd){border-right:1px solid var(--hairline)}.preview-grid.bg-dark .font-card:nth-child(odd){border-right-color:#2a2a2a}}.font-card[hidden]{display:none}.font-card-preview{text-align:center;overflow-wrap:anywhere;min-height:64px;font-size:var(--preview-size,40px);font-weight:var(--preview-weight,400);letter-spacing:var(--preview-spacing,0em);color:var(--preview-color,#171717);-webkit-text-stroke-width:calc(var(--preview-size,40px) * var(--outline-ratio,0));-webkit-text-stroke-color:var(--preview-color,#171717);paint-order:stroke fill;text-shadow:var(--preview-shadow,none);opacity:0;border-radius:var(--radius);justify-content:center;align-items:center;padding-block:8px;line-height:1.25;transition:opacity .3s;display:flex}.font-card.font-ready .font-card-preview{opacity:1}.font-card:not(.font-ready) .font-card-preview{background:linear-gradient(100deg, var(--canvas-soft-2) 40%, #ececec 50%, var(--canvas-soft-2) 60%);background-size:200% 100%;animation:1.2s linear infinite shimmer}.preview-grid.bg-dark .font-card:not(.font-ready) .font-card-preview{background:linear-gradient(100deg,#1c1c1c 40%,#2a2a2a 50%,#1c1c1c 60%) 0 0/200% 100%}@keyframes shimmer{to{background-position:-200% 0}}.font-card-meta{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.font-card-meta .fname{font-size:.8125rem;font-weight:600}.font-card-meta .fcat{font-family:var(--font-mono);color:var(--mute);margin-left:6px;font-size:.6875rem}.preview-grid.bg-dark .font-card-meta .fname{color:#eee}.card-actions{gap:8px;display:flex}.btn{font:inherit;border-radius:var(--radius);border:1px solid var(--hairline-strong);color:var(--ink);cursor:pointer;background:#fff;padding:7px 14px;font-size:.8125rem;font-weight:600;transition:background .15s,color .15s,border-color .15s}.btn:hover{border-color:var(--ink)}.btn-primary{background:var(--ink);border-color:var(--ink);color:#fff}.btn-primary:hover{background:#000}.tool-note{border-top:1px solid var(--hairline);background:var(--canvas-soft);color:var(--mute);padding:12px 20px;font-size:.8125rem}.steps{counter-reset:step;grid-template-columns:1fr;gap:16px;display:grid}@media (width>=720px){.steps{grid-template-columns:repeat(3,1fr)}}.step{border:1px solid var(--hairline);background:var(--canvas);border-radius:12px;padding:24px}.step .num{font-family:var(--font-mono);color:var(--mute);margin-bottom:10px;font-size:.75rem;display:block}.step p{margin:0;font-size:.9375rem}.cards-2{grid-template-columns:1fr;gap:16px;display:grid}@media (width>=720px){.cards-2{grid-template-columns:1fr 1fr}}.info-card{border:1px solid var(--hairline);background:var(--canvas-soft);border-radius:12px;padding:24px}.info-card p,.info-card li{font-size:.9375rem}.info-card ul{color:var(--body);margin:0;padding-left:18px}.info-card li+li{margin-top:6px}.table-wrap{border:1px solid var(--hairline);border-radius:12px;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:560px;font-size:.9375rem}th,td{text-align:left;border-bottom:1px solid var(--hairline);padding:12px 16px}th{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute);background:var(--canvas-soft);font-size:.6875rem}tr:last-child td{border-bottom:0}td{color:var(--body)}td:first-child{color:var(--ink);font-weight:600}.prose{max-width:720px}.prose p,.prose li{font-size:1rem}.prose ul{color:var(--body);padding-left:20px}.prose li+li{margin-top:8px}.faq details{border:1px solid var(--hairline);background:var(--canvas);border-radius:12px;padding:0}.faq details+details{margin-top:10px}.faq summary{cursor:pointer;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;font-size:.9375rem;font-weight:650;list-style:none;display:flex}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";font-family:var(--font-mono);color:var(--mute);flex-shrink:0}.faq details[open] summary:after{content:"–"}.faq details p{margin:0;padding:0 20px 16px;font-size:.9375rem}.site-footer{border-top:1px solid var(--hairline);background:var(--canvas-soft);padding-block:32px}.site-footer .container{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.site-footer p{color:var(--mute);margin:0;font-size:.8125rem}.footer-links{gap:16px;display:flex}.footer-links a{color:var(--body);font-size:.8125rem}.roman-hint{color:var(--mute);margin:4px 0 0;font-size:.8125rem}.preview-grid.dir-vertical .font-card-preview{font-size:calc(var(--preview-size,40px) * .75);min-height:200px;line-height:1.15}.pagination{border-top:1px solid var(--hairline);background:var(--canvas-soft);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:16px 20px;display:flex}.page-numbers{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;display:flex}.page-num{min-width:38px;padding-inline:10px}.page-num[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}.page-gap{color:var(--mute);padding-inline:2px}.pagination .btn:disabled{opacity:.4;cursor:not-allowed}.symbol-group{margin-bottom:24px}.symbol-group h3{margin-bottom:10px;font-size:.9375rem}.symbol-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;display:grid}.symbol-btn{font:inherit;aspect-ratio:1;border:1px solid var(--hairline);border-radius:var(--radius);cursor:pointer;color:var(--ink);background:#fff;justify-content:center;align-items:center;font-size:1.375rem;line-height:1;transition:border-color .15s,background .15s,transform .1s;display:flex}.symbol-btn:hover{border-color:var(--ink)}.symbol-btn:active{transform:scale(.94)}.symbol-btn.symbol-added{background:var(--ink);color:#fff;border-color:var(--ink)}.font-chips{flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none;display:flex}.font-chips li{font-family:var(--font-mono);border:1px solid var(--hairline);background:var(--canvas-soft);border-radius:999px;font-size:.8125rem}.font-chips li a{color:var(--body);padding:6px 14px;text-decoration:none;display:block}.font-chips li a:hover{color:var(--ink);text-decoration:underline}#to-top{z-index:60;border:1px solid var(--hairline-strong);background:var(--ink);width:42px;height:42px;color:var(--canvas);cursor:pointer;opacity:0;visibility:hidden;border-radius:50%;justify-content:center;align-items:center;padding:0;transition:opacity .2s,transform .2s,visibility .2s;display:flex;position:fixed;bottom:20px;right:20px;transform:translateY(10px);box-shadow:0 4px 14px #0000002e}#to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}#to-top:hover{background:var(--link);border-color:var(--link)}#to-top svg{width:18px;height:18px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}