:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--surface-base-light:#edf2f4;--surface-base-dark:#2b2d42;--surface-raised-light:#fff;--surface-raised-dark:#323548;--surface-overlay-light:#e4eaed;--surface-overlay-dark:#3a3d54;--border-subtle-light:#c5cdd4;--border-subtle-dark:#4f5568;--border-strong-light:#8d99ae;--border-strong-dark:#8d99ae;--text-primary-light:#2b2d42;--text-primary-dark:#edf2f4;--text-secondary-light:#4a5068;--text-secondary-dark:#8d99ae;--text-muted-light:#8d99ae;--text-muted-dark:#71798a;--accent-light:#8222ef;--accent-dark:#8222ef;--accent-hover-light:#6b1cc8;--accent-hover-dark:#9a45ff;--accent-muted-light:#ede5fc;--accent-muted-dark:#352455;--input-bg-light:#fff;--input-bg-dark:#22243a;--focus-ring-light:#8222ef;--focus-ring-dark:#8222ef;--body-highlight-light:#8222ef14;--body-highlight-dark:#8222ef1a;--danger-light:#c41e32;--danger-dark:#ff5c72;--scrollbar-track-light:#e4eaed;--scrollbar-track-dark:#22243a;--scrollbar-thumb-light:#8d99ae;--scrollbar-thumb-dark:#8d99ae;--surface-base:var(--lightningcss-light,var(--surface-base-light))var(--lightningcss-dark,var(--surface-base-dark));--surface-raised:var(--lightningcss-light,var(--surface-raised-light))var(--lightningcss-dark,var(--surface-raised-dark));--surface-overlay:var(--lightningcss-light,var(--surface-overlay-light))var(--lightningcss-dark,var(--surface-overlay-dark));--border-subtle:var(--lightningcss-light,var(--border-subtle-light))var(--lightningcss-dark,var(--border-subtle-dark));--border-strong:var(--lightningcss-light,var(--border-strong-light))var(--lightningcss-dark,var(--border-strong-dark));--text-primary:var(--lightningcss-light,var(--text-primary-light))var(--lightningcss-dark,var(--text-primary-dark));--text-secondary:var(--lightningcss-light,var(--text-secondary-light))var(--lightningcss-dark,var(--text-secondary-dark));--text-muted:var(--lightningcss-light,var(--text-muted-light))var(--lightningcss-dark,var(--text-muted-dark));--accent:var(--lightningcss-light,var(--accent-light))var(--lightningcss-dark,var(--accent-dark));--accent-hover:var(--lightningcss-light,var(--accent-hover-light))var(--lightningcss-dark,var(--accent-hover-dark));--accent-muted:var(--lightningcss-light,var(--accent-muted-light))var(--lightningcss-dark,var(--accent-muted-dark));--input-bg:var(--lightningcss-light,var(--input-bg-light))var(--lightningcss-dark,var(--input-bg-dark));--focus-ring:var(--lightningcss-light,var(--focus-ring-light))var(--lightningcss-dark,var(--focus-ring-dark));--body-highlight:var(--lightningcss-light,var(--body-highlight-light))var(--lightningcss-dark,var(--body-highlight-dark));--danger:var(--lightningcss-light,var(--danger-light))var(--lightningcss-dark,var(--danger-dark));--scrollbar-track:var(--lightningcss-light,var(--scrollbar-track-light))var(--lightningcss-dark,var(--scrollbar-track-dark));--scrollbar-thumb:var(--lightningcss-light,var(--scrollbar-thumb-light))var(--lightningcss-dark,var(--scrollbar-thumb-dark));--font-ui:system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:ui-monospace, "Cascadia Code", monospace;--font-size-root:1rem;--font-size-xs:.6875rem;--font-size-sm:.75rem;--font-size-md:.8125rem;--font-size-base:.875rem;--font-size-lg:1.125rem;--font-weight-regular:400;--font-weight-semibold:600;--line-height-base:1.5;--line-height-tight:1.25;--letter-spacing-tight:-.02em;--letter-spacing-overline:.08em;--letter-spacing-caps:.06em;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-xs:var(--space-1);--space-sm:var(--space-2);--space-md:var(--space-4);--space-lg:var(--space-6);--space-xl:var(--space-8);--inset-control-block:var(--space-2);--inset-control-inline:var(--space-3);--inset-button-block:var(--space-2);--inset-button-inline:var(--space-4);--inset-compact-block:var(--space-1);--inset-compact-inline:var(--space-2);--border-width:.0625rem;--radius-sm:.25rem;--radius-md:.5rem;--sidebar-inline-size:20rem;--breakpoint-md:48rem;--layout-preview-label:4rem;--layout-preview-size:5rem;--layout-font-list-max:12rem;--layout-outline:.125rem;--layout-outline-offset:var(--border-width)}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}*,:before,:after{box-sizing:border-box}html{font-family:var(--font-ui);font-size:var(--font-size-root);-webkit-font-smoothing:antialiased;accent-color:var(--accent);scrollbar-color:var(--scrollbar-thumb) var(--scrollbar-track)}body{background:var(--surface-base);block-size:100dvh;color:var(--text-primary);margin:0;overflow:hidden}#app{block-size:100dvh;overflow:hidden}typo-app{block-size:100%;display:block}.app-shell{grid-template-columns:var(--sidebar-inline-size) minmax(0, 1fr);grid-template-rows:minmax(0,1fr);block-size:100dvh;max-block-size:100dvh;display:grid;overflow:hidden}.sidebar{background:var(--surface-raised);border-inline-end:var(--border-width) solid var(--border-subtle);overflow-block:auto;overscroll-behavior:contain;min-block-size:0;padding:var(--space-lg);gap:var(--space-lg);flex-direction:column;grid-area:1/1;display:flex}typo-main-panel{grid-area:1/2;min-block-size:0;min-inline-size:0;display:block;overflow:hidden}.main-panel{block-size:100%;min-block-size:0;min-inline-size:0;overflow:hidden}.main-panel--split{flex-direction:column;display:flex}.main-panel--split .main-panel__primary{flex-direction:column;flex:var(--split-primary-grow,62) 1 0;min-block-size:8rem;display:flex;overflow:hidden}.main-panel--split .main-panel__primary>.preview-canvas{flex:auto;min-block-size:0}.main-panel--split .main-panel__primary--collapsed{flex:0 0 0;min-block-size:0}.panel-splitter{flex:0 0 var(--splitter-track-size,.375rem);padding-block:var(--splitter-padding,.25rem);background:var(--border-subtle);cursor:row-resize;touch-action:none;border:0;margin:0}.panel-splitter:before{content:"";border-radius:var(--radius-sm);background:var(--border-strong);opacity:.55;block-size:100%;transition:opacity .15s;display:block}.panel-splitter:hover:before,.panel-splitter:focus-visible:before{opacity:1}.panel-splitter:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-1px}.main-panel--split .export-panel{flex:var(--split-secondary-grow,38) 1 0;min-block-size:10rem}@media (max-inline-size:48rem){.app-shell{grid-template-rows:minmax(0,auto) minmax(12rem,1fr) minmax(10rem,min(18rem,32dvh));grid-template-columns:minmax(0,1fr)}typo-main-panel,.main-panel,.main-panel__primary{display:contents}.sidebar{border-inline-end:none;border-block-end:var(--border-width) solid var(--border-subtle);grid-area:1/1;max-block-size:min(42dvh,26rem)}.preview-canvas{border-block-end:var(--border-width) solid var(--border-subtle);grid-area:2/1}.export-panel{border-block-start:none;grid-area:3/1}}.sidebar__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight);margin:0}.sidebar__hint{font-size:var(--font-size-sm);color:var(--text-muted)}.settings-group,.settings-group__body{gap:var(--space-md);flex-direction:column;display:flex}.settings-group__label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:var(--letter-spacing-overline);color:var(--text-muted);margin:0}details.settings-group>summary{cursor:pointer}details.settings-group>summary::marker{color:var(--text-muted)}.field{gap:var(--space-sm);flex-direction:column;display:flex}typo-font-picker{gap:var(--space-md);flex-direction:column;display:flex}.field__label{font-size:var(--font-size-md);color:var(--text-secondary)}.field input[type=text],.field input[type=number],.field select{inline-size:100%;padding-block:var(--inset-control-block);background:var(--input-bg);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font:inherit;font-size:var(--font-size-base);padding-inline-start:var(--inset-control-inline);padding-inline-end:var(--inset-control-inline)}.field select{padding-inline-end:calc(var(--inset-control-inline) + 1.25em)}.field input:focus,.field select:focus{outline:var(--layout-outline) solid var(--focus-ring);outline-offset:var(--layout-outline-offset)}.field input.field--invalid{border-color:var(--danger)}.field-row{gap:var(--space-sm);grid-template-columns:1fr 1fr;display:grid}.unit-toggle{border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-sm);display:flex;overflow:hidden}.unit-toggle button{padding-block:var(--inset-compact-block);padding-inline:var(--inset-compact-inline);color:var(--text-secondary);font:inherit;font-size:var(--font-size-md);cursor:pointer;background:0 0;border:none;flex:1}.unit-toggle button[aria-pressed=true]{background:var(--accent-muted);color:contrast-color(var(--accent-muted))}.unit-toggle button:hover{background:var(--surface-overlay)}.checkbox-field{align-items:center;gap:var(--space-sm);font-size:var(--font-size-base);color:var(--text-secondary);cursor:pointer;display:flex}.preview-canvas{min-block-size:0;padding:var(--space-xl);overflow-block:auto;overscroll-behavior:contain;background:var(--preview-bg,var(--surface-base));container-type:inline-size}.preview-row{grid-template-columns:var(--layout-preview-label) var(--layout-preview-size) 1fr;gap:var(--space-md);padding-block:var(--space-md);padding-inline:var(--space-lg);margin-inline:calc(-1 * var(--space-lg));border-radius:var(--radius-md);align-items:baseline;display:grid}.preview-row--body{background:var(--body-highlight)}.preview-row__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:var(--letter-spacing-caps);color:var(--text-muted)}.preview-row__size{font-size:var(--font-size-md);font-variant-numeric:tabular-nums;color:var(--text-secondary);font-family:var(--font-mono)}.preview-row__sample{overflow-wrap:anywhere;color:var(--preview-text,var(--text-primary));margin:0}.export-panel{border-block-start:var(--border-width) solid var(--border-subtle);background:var(--surface-raised);min-block-size:0;padding-block:var(--space-md);padding-inline:var(--space-lg);gap:var(--space-sm);flex-direction:column;display:flex;overflow:hidden}.export-panel__header{justify-content:space-between;align-items:center;gap:var(--space-md);flex-shrink:0;display:flex}.export-panel__header h2{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);margin:0}.export-panel textarea{resize:none;min-block-size:0;inline-size:100%;padding:var(--space-md);overflow-block:auto;background:var(--input-bg);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);font-family:var(--font-mono);font-size:var(--font-size-sm);line-height:var(--line-height-base);flex:1}.btn{padding-block:var(--inset-button-block);padding-inline:var(--inset-button-inline);border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-overlay);color:var(--text-primary);font:inherit;font-size:var(--font-size-md);cursor:pointer}.btn:hover{border-color:var(--accent);color:var(--accent-hover)}.btn--primary{background:var(--accent-muted);border-color:var(--accent)}.btn--primary:hover{background:var(--accent);color:contrast-color(var(--accent))}.font-search-results{z-index:10;max-block-size:var(--layout-font-list-max);overflow-block:auto;background:var(--surface-overlay);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-sm);margin-block-start:var(--space-1);padding:0;list-style:none;position:absolute;inset-inline:0}.font-search-results li button{inline-size:100%;padding-block:var(--inset-control-block);padding-inline:var(--inset-control-inline);color:var(--text-primary);font:inherit;font-size:var(--font-size-md);text-align:start;cursor:pointer;background:0 0;border:none}.font-search-results li button:hover{background:var(--accent-muted);color:contrast-color(var(--accent-muted))}.field--relative{position:relative}.sr-only{inline-size:var(--border-width);block-size:var(--border-width);margin:calc(-1 * var(--border-width));clip-path:inset(50%);white-space:nowrap;border:0;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}