:root{color-scheme:dark;--bg:#111311;--surface:#191c19;--fg:#f3f4f0;--muted:#a2aaa0;--line:#ffffff26;--accent:#c83d2c}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 "Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif}button,input,textarea,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer;color:inherit}button:hover,a:hover{opacity:.75}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}button:disabled,input:disabled{opacity:.4;cursor:default}
.lab-header{height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 32px;border-bottom:1px solid var(--line)}.lab-brand{font-size:18px;font-weight:650}.lab-brand span{display:block;font-size:8px;letter-spacing:.17em;font-weight:400}.lab-header h1{margin:0;font-size:16px;font-weight:500}.lab-header>a:last-child{font-size:12px;min-height:44px;display:flex;align-items:center}
.lab-layout{display:grid;grid-template-columns:280px minmax(0,1fr);max-width:2200px;margin:auto}.settings{padding:26px 24px 32px;border-right:1px solid var(--line);position:sticky;top:0;height:calc(100dvh - 84px);overflow:auto;scrollbar-width:thin}.settings-heading h2{margin:0;font-size:21px;line-height:1.3;font-weight:500;letter-spacing:-.04em}.settings-heading p{font-size:12px;color:var(--muted);margin:10px 0 24px}fieldset{padding:0;border:0;margin:0 0 22px}legend,.text-label{display:block;margin-bottom:8px;color:var(--muted);font-size:12px}.presets,.surface-options{display:flex;gap:6px;flex-wrap:wrap}.presets legend,.surface-options legend{width:100%}button{background:transparent;border:0;padding:10px 0;min-height:40px}.presets button,.surface-options button{border:1px solid var(--line);padding:8px 10px;min-height:36px;font-size:12px}.presets button[aria-pressed="true"],.surface-options button[aria-pressed="true"]{border-color:var(--fg);color:var(--fg)}textarea{display:block;width:100%;resize:vertical;min-height:68px;max-height:220px;padding:10px;margin-bottom:18px;border:1px solid var(--line);border-radius:0;background:var(--surface);color:var(--fg);font-size:13px}input[type=range]{width:100%;accent-color:var(--fg);height:26px;margin:2px 0 0}.range-control{margin-bottom:15px}.range-control label{display:flex;justify-content:space-between;gap:12px;font-size:12px}.range-control output{color:var(--muted);font-variant-numeric:tabular-nums}.check-label{display:flex;gap:8px;align-items:center;font-size:12px;margin-bottom:18px}input[type=checkbox]{accent-color:var(--fg)}.utility-actions{display:flex;justify-content:space-between;gap:12px;font-size:12px}#utility-status{min-height:18px;font-size:12px;color:var(--muted);margin:0}
.comparison{padding:25px 28px 40px;min-width:0}.comparison-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}.comparison-bar p{margin:0;font-size:12px;color:var(--muted)}.comparison-bar>div{display:flex;gap:22px;font-size:12px}.panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.font-panel{min-width:0}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-heading h2{font-size:24px;font-weight:500;margin:0}.panel-heading h2 span{font-size:11px;color:var(--muted);margin-left:9px;letter-spacing:0}.panel-heading button{font-size:11px}.font-pickers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.font-pickers label{font-size:11px;color:var(--muted)}select{display:block;width:100%;min-height:42px;margin-top:7px;border:1px solid var(--line);border-radius:0;padding:7px;background:var(--bg);color:var(--fg);font-size:12px}.weight-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:15px}.weight-controls label{font-size:11px}.weight-controls output{float:right;color:var(--muted)}.font-status{margin:12px 0 10px;font-size:11px;color:var(--muted);min-height:18px}.font-panel[data-loading="true"] .font-status{color:#d4bfb0}.font-panel[data-error="true"] .font-status{color:#efa89e}.font-panel [data-retry]{font-size:12px;color:#efa89e}
.sample-canvas{--latin-family:"Helvetica Neue",Arial,sans-serif;--cjk-family:"PingFang SC","Microsoft YaHei",sans-serif;--latin-size:96px;--cjk-size:52px;--latin-weight:750;--cjk-weight:600;--latin-tracking:-.075em;--cjk-tracking:0em;--leading:1.15;min-height:460px;background:#111311;color:#f3f4f0;border:1px solid var(--line);overflow:auto;position:relative;scrollbar-width:thin}.sample-content{width:var(--canvas-width,100%);min-width:0;padding:48px 22px 28px}.sample-canvas[data-surface="light"]{background:#f3f4f0;color:#111311}.sample-canvas[data-surface="image"]{background:#111311 url("assets/acrab-studio-poster.jpg") center/cover no-repeat;color:#fff}.sample-canvas[data-surface="image"] .sample-content{background:#0003;min-height:460px}.sample-canvas[data-blend="true"] .sample-latin,.sample-canvas[data-blend="true"] .sample-cjk{color:#fff;mix-blend-mode:exclusion}.sample-latin,.sample-numbers{font-family:var(--latin-family);font-weight:var(--latin-weight)}.sample-cjk,.sample-body{font-family:var(--cjk-family);font-weight:var(--cjk-weight)}.sample-latin,.sample-cjk{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 26px;line-height:var(--leading);font-synthesis:none}.sample-latin{font-size:var(--latin-size);letter-spacing:var(--latin-tracking)}.sample-cjk{font-size:var(--cjk-size);letter-spacing:var(--cjk-tracking)}.sample-body{font-size:18px;line-height:1.7;letter-spacing:var(--cjk-tracking);margin:28px 0;font-synthesis:none}.sample-numbers{font-size:19px;letter-spacing:.01em;margin:26px 0 0;font-synthesis:none}.font-details{font-size:11px;line-height:1.8;color:var(--muted);padding:12px 0;border-bottom:1px solid var(--line);min-height:65px}.font-details p{margin:0}.font-details a{display:inline-flex;align-items:center;min-height:32px;margin-right:18px}.catalog{margin-top:28px;border-top:1px solid var(--line);padding:18px 0}.catalog summary{cursor:pointer;min-height:32px}.catalog>p{font-size:12px;color:var(--muted);max-width:80ch}#font-list{display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.catalog-row{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-size:12px}.catalog-row span{display:block;color:var(--muted);font-size:10px}.catalog-row button{font-size:11px;white-space:nowrap}
@media(min-width:1800px){.sample-content{padding:52px 36px}.sample-canvas{min-height:550px}}
@media(max-width:1100px){.lab-layout{grid-template-columns:245px minmax(0,1fr)}.settings{padding-inline:18px}.comparison{padding-inline:20px}.panels{grid-template-columns:1fr;gap:24px}.comparison-bar{align-items:flex-start}.comparison-bar>div{gap:14px}.sample-canvas{min-height:410px}}
@media(max-width:650px){.lab-header{padding-inline:18px;height:76px}.lab-brand{font-size:15px}.lab-header h1{font-size:13px}.lab-header>a:last-child{font-size:11px}.lab-layout{display:block}.settings{position:static;height:auto;overflow:visible;padding:24px 18px;border-right:0;border-bottom:1px solid var(--line)}.settings-heading{margin-bottom:15px}.settings-heading p{margin-bottom:15px}.settings .range-control{display:inline-block;width:calc(50% - 8px);vertical-align:top;margin-right:8px}.comparison{padding:22px 18px}.comparison-bar{flex-direction:column;gap:4px}.font-pickers{gap:10px}.sample-content{padding:32px 18px}.sample-canvas{min-height:380px}#font-list{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}