@font-face{font-family:'Tremendo Sans UI';src:url('/fonts/TremendoSans-Regular.woff2?v=5b8282c1e87d') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Tremendo Sans UI';src:url('/fonts/TremendoSans-Medium.woff2?v=a9879fde4a4c') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Tremendo Sans UI';src:url('/fonts/TremendoSans-SemiBold.woff2?v=3142bedc00a1') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Tremendo Sans UI';src:url('/fonts/TremendoSans-Bold.woff2?v=52d6828fee7a') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Tremendo Sans UI';src:url('/fonts/TremendoSans-ExtraBold.woff2?v=744f065cb5ba') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:TypeLabDefault;src:url('/fonts/InterVariable.ttf') format('truetype');font-display:swap}
@font-face{font-family:TypeLabRoboto;src:url('/fonts/RobotoFlex.ttf') format('truetype');font-display:swap}
@font-face{font-family:TypeLabLegacy;src:url('/initial.otf') format('opentype');font-display:swap}
:root{letter-spacing:0;--surface:#fff;--surface-raised:#f4f5f2;--ink:#242621;--muted:#62655e;--line:#dedfd9;--accent:#38580e;--focus:#6a854b;--paper:var(--surface);--paper-ink:var(--ink);--paper-muted:var(--muted);--paper-line:var(--line);--hover:#f1f2ef;--selected:#edf1e7;--selection-ink:#38580e;--range-track:#e7e9e2;--range-fill:#b8c5a3;--range-thumb:#242621;--blue:var(--accent);--generated:TypeLabDefault;--preview-size:118px;--glyph-size:118px;--glyph-cell-width:158px;--glyph-cell-height:201px;font-family:'Tremendo Sans UI',Arial,sans-serif;font-feature-settings:'ss01' 1;color:var(--ink);background:var(--surface);font-synthesis:none;color-scheme:light}
:root[data-theme=dark]{--surface:#242621;--surface-raised:#2e312a;--ink:#fafaf7;--muted:#b9bdb4;--line:#45483f;--focus:#bacba0;--hover:#34382f;--selected:#303a25;--selection-ink:#c4d6ad;--range-track:#34382f;--range-fill:#4f6535;--range-thumb:#fafaf7;color-scheme:dark}
*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button,input,select,a,summary{touch-action:manipulation}button{cursor:pointer;color:inherit;border:0}button:disabled{opacity:.4;cursor:default}button,input,select{border-radius:8px}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:4px}[hidden]{display:none!important}
.app-header{height:80px;padding:0 28px;display:flex;align-items:center;gap:32px}.wordmark{display:flex;align-items:baseline;gap:14px;text-decoration:none;white-space:nowrap}.studio-wordmark{font-size:20px;line-height:1.3;letter-spacing:0;font-weight:800}.product-wordmark{font-size:14px;letter-spacing:0;color:var(--muted)}.family-field{display:flex;gap:12px;align-items:center;margin-left:auto}.family-field input{color:var(--ink);background:transparent;border:1px solid transparent;font-size:16px;letter-spacing:0;max-width:220px;padding:10px 12px}.family-field input:hover,.family-field input:focus{border-color:var(--line)}.header-actions{display:flex;gap:12px;align-items:center;margin-left:auto}.primary{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:42px;background:var(--accent);color:#fffdf6;padding:10px 16px;text-decoration:none;font-size:14px;font-weight:600;letter-spacing:0;border-radius:8px}.primary:hover{background:#426815}.primary[aria-disabled=true]{opacity:.4;cursor:wait}.primary span{font-size:18px}.quiet{background:transparent;color:inherit;font-size:14px;font-weight:500;letter-spacing:0;padding:10px 12px}.quiet:hover{background:var(--hover)}.text-button{padding:0;background:none;font-size:13px;font-weight:500;color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#b9bdb46b}.text-button:hover{text-decoration-color:currentColor}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 396px;height:calc(100dvh - 80px);padding:0;gap:0}main{min-width:0;display:flex;flex-direction:column;overflow:hidden;border-radius:0;background:var(--paper);color:var(--paper-ink)}.sidebar{border-left:1px solid var(--line);padding:20px 22px 28px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#62655e transparent}.sidebar-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:24px}.sidebar h1{font-size:32px;font-weight:500;line-height:1.25;letter-spacing:0;margin:0}.sidebar-title .text-button{color:var(--muted)}.scope-card{padding:0 0 22px;border-bottom:1px solid var(--line)}.field-label{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-bottom:8px}select{appearance:auto;width:100%;background:var(--surface-raised);color:var(--ink);border:1px solid var(--line);padding:10px 12px;min-height:42px;font-size:14px;letter-spacing:0}.scope-card select{font-size:16px;font-weight:500;letter-spacing:0;min-height:48px}.scope-card p{font-size:12px;line-height:1.5;color:var(--muted);margin:10px 0 0}.scope-card .text-button{margin-top:10px;font-size:12px}.editor-tabs{display:flex;border-bottom:1px solid var(--line);gap:24px;margin-top:6px}.editor-tabs button{flex:1;padding:17px 0;border-radius:0;color:var(--muted);background:transparent;font-size:16px;font-weight:500;letter-spacing:0}.editor-tabs button[aria-selected=true]{color:var(--ink);box-shadow:inset 0 -2px var(--ink)}.control{margin-bottom:27px}.control-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:9px}.control label{font-size:16px;line-height:1.4;letter-spacing:0;font-weight:500}.value-input{background:transparent;color:var(--ink);border:1px solid var(--line);width:73px;padding:6px 9px;font-size:14px;font-variant-numeric:tabular-nums;text-align:right;appearance:textfield}.value-input::-webkit-inner-spin-button{appearance:none}.value-input:focus,.value-input:hover{background:var(--surface-raised)}.control-help{font-size:12px;line-height:1.45;color:var(--muted);margin:7px 0 0;max-width:32ch}
input[type=range]{appearance:none;width:100%;height:44px;margin:0;background:transparent;cursor:ew-resize;accent-color:var(--accent);border-radius:8px}input[type=range]::-webkit-slider-runnable-track{height:30px;border-radius:8px;background:linear-gradient(to right,var(--range-fill) var(--fill,0%),var(--range-track) var(--fill,0%))}input[type=range]::-webkit-slider-thumb{appearance:none;width:26px;height:38px;margin-top:-4px;border:0;border-radius:6px;background:var(--range-thumb);box-shadow:0 1px 4px #0002}input[type=range]::-moz-range-track{height:30px;border-radius:8px;background:var(--range-track)}input[type=range]::-moz-range-progress{height:30px;border-radius:8px;background:var(--range-fill)}input[type=range]::-moz-range-thumb{width:26px;height:38px;border:0;border-radius:6px;background:var(--range-thumb)}.starting-point{border-top:1px solid var(--line);margin-top:28px;padding-top:20px}.starting-point summary{cursor:pointer;font-size:14px;color:var(--muted);line-height:1.4}.starting-point[open] summary{margin-bottom:20px}.starting-point .field-label{margin-top:16px}.sidebar-note{font-size:12px;line-height:1.5;color:var(--muted);margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.loading-copy{font-size:14px;color:var(--muted);padding:24px 0}
.view-toolbar{display:flex;align-items:center;gap:22px;padding:0 28px;min-height:68px;border-bottom:1px solid var(--paper-line);flex-shrink:0;flex-wrap:wrap}.tabs{display:flex;gap:28px;align-items:stretch;height:68px}.tabs button{position:relative;background:transparent;border-radius:0;color:var(--paper-muted);font-size:14px;font-weight:500;letter-spacing:0;padding:0}.tabs button[aria-selected=true]{color:var(--paper-ink);box-shadow:inset 0 -2px var(--accent)}.size-control{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--paper-muted);margin-left:auto}.size-control input{width:85px;height:32px}.size-control input::-webkit-slider-runnable-track{height:4px;background:var(--line)}.size-control input::-webkit-slider-thumb{width:14px;height:22px;margin-top:-9px;border-radius:4px;background:var(--accent);box-shadow:none}.size-control input::-moz-range-track,.size-control input::-moz-range-progress{height:4px;background:var(--line)}.size-control input::-moz-range-thumb{width:14px;height:22px;background:var(--accent);border-radius:4px}.size-control output{font-variant-numeric:tabular-nums;width:25px}.canvas-options{display:flex;align-items:center;gap:8px}.tool-button{background:transparent;color:var(--paper-muted);font-size:12px;padding:8px}.tool-button[aria-pressed=true]{background:var(--selected);color:var(--selection-ink)}.invert{display:grid;place-items:center;height:32px;width:32px;background:transparent}.invert span{width:18px;height:18px;border:1px solid var(--paper-ink);border-radius:50%;background:linear-gradient(90deg,var(--paper-ink) 50%,var(--paper) 50%)}
.canvas{--canvas-bg:var(--paper);--canvas-ink:var(--paper-ink);--canvas-muted:var(--paper-muted);--canvas-line:var(--paper-line);background:var(--canvas-bg);color:var(--canvas-ink);padding:36px 40px 48px;flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#b9bdb4 transparent}.micro{font-family:'Tremendo Sans UI',Arial,sans-serif;font-size:12px;letter-spacing:0;font-weight:400;color:var(--canvas-muted,var(--muted))}.specimen-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}#specimen{display:block;width:100%;height:280px;min-height:150px;resize:vertical;font-family:var(--generated),sans-serif;font-feature-settings:normal;font-size:var(--preview-size);font-weight:400;line-height:1.15;letter-spacing:0;color:inherit;background:transparent;border:0;padding:0;border-radius:0;overflow-wrap:anywhere;outline-offset:10px}.generated{font-family:var(--generated),sans-serif;font-weight:400;font-feature-settings:normal;font-kerning:normal}.outline #specimen,.outline .generated{color:transparent;-webkit-text-stroke:1px var(--canvas-ink)}.specimen-rule{height:1px;background:var(--canvas-line);margin:26px 0 32px}.type-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:20px;align-items:baseline;margin-bottom:32px}.display-line{font-size:48px;line-height:1.3;margin:0;overflow-wrap:anywhere}.alphabet{font-size:32px;line-height:1.8;margin:0;overflow-wrap:anywhere}.reading-row{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:baseline;border-top:1px solid var(--canvas-line);padding-top:30px}.reading{font-size:18px;line-height:1.6;margin:0}.statusbar{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--paper-line);padding:10px 28px;font-size:12px;color:var(--paper-muted)}.statusbar a{text-underline-offset:3px}.prototype-note{white-space:nowrap}.unsupported{font-size:13px;color:#9d381f;line-height:1.5}:root[data-theme=dark] .unsupported{color:#f5ac97}
.character-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.character-heading>div{display:flex;align-items:baseline;gap:16px}.character-heading h2{font-size:24px;font-weight:500;letter-spacing:0;margin:0}.character-heading select{background:transparent;color:var(--canvas-ink);border-color:var(--canvas-line);width:auto;max-width:230px}.grid-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px}.grid-actions p{font-size:12px;line-height:1.5;color:var(--canvas-muted);margin:0 auto 0 0}.grid-actions .text-button{color:var(--canvas-muted);font-size:12px}.grid-actions .quiet{padding:8px 12px;background:var(--canvas-line);font-size:12px}.glyph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--glyph-cell-width)),1fr));gap:0;border-left:1px solid var(--canvas-line);border-top:1px solid var(--canvas-line)}.glyph-cell{position:relative;height:var(--glyph-cell-height);background:transparent;color:var(--canvas-ink);border-right:1px solid var(--canvas-line);border-bottom:1px solid var(--canvas-line);border-radius:0;font-family:var(--generated),sans-serif;font-feature-settings:normal;font-size:var(--glyph-size);line-height:1.2;overflow:hidden;padding:8px;content-visibility:auto;contain-intrinsic-size:auto var(--glyph-cell-height)}.glyph-cell:hover{background:var(--hover)}.glyph-cell[aria-pressed=true]{background:var(--selected);color:var(--selection-ink);box-shadow:inset 0 0 0 2px var(--accent)}.glyph-cell.has-override:after{content:'';position:absolute;top:10px;right:10px;width:5px;height:5px;background:var(--selection-ink);border-radius:50%}.glyph-stage{--detail-size:clamp(180px,calc(var(--preview-size)*2.5),440px);height:max(350px,calc(var(--detail-size)*1.7));position:relative;display:flex;align-items:center;justify-content:safe center;overflow:visible;margin:12px 0 24px}.glyph-stage .generated{position:relative;z-index:1;font-size:var(--detail-size);line-height:1.5;white-space:pre}.guide{position:absolute;left:0;right:0;border-top:1px solid var(--canvas-line);pointer-events:none}.guide span{position:absolute;top:-18px;font-size:11px;color:var(--canvas-muted)}.cap-guide{top:calc(50% - var(--detail-size)*.3638)}.x-guide{top:calc(50% - var(--detail-size)*.1821);border-top-style:dashed}.baseline-guide{top:calc(50% + var(--detail-size)*.3638)}.glyph-navigation{display:flex;align-items:center;justify-content:space-between;gap:16px}.selection-chips{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;padding:24px 0}.selection-chips button{min-height:44px;min-width:44px;font-size:20px;background:transparent;color:var(--canvas-ink);border:1px solid var(--canvas-line)}.selection-chips button[aria-pressed=true]{border-color:var(--selection-ink);color:var(--selection-ink)}
.alternate-group{margin-top:26px}.alternate-group h2{font-size:16px;font-weight:500;letter-spacing:0;margin:0 0 12px}.alternate-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.alternate-option{min-height:136px;background:var(--surface-raised);border:1px solid transparent;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px 10px}.alternate-option:hover{background:var(--hover)}.alternate-option[aria-pressed=true]{background:var(--selected);border-color:var(--selection-ink)}.alternate-option .variant-sample{font-size:52px;line-height:1.15;min-height:60px}.alternate-option .variant-label{font-size:12px;line-height:1.4;letter-spacing:0;text-align:center;max-width:16ch}.empty-alternates{font-size:14px;color:var(--muted);line-height:1.6;padding:24px 0}.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:var(--surface);color:var(--ink);padding:14px 22px;border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 24px #0002;font-size:14px;line-height:1.5;max-width:90%;z-index:10}
@media(min-width:1600px){.workspace{grid-template-columns:minmax(0,1fr) 440px}.sidebar{padding:24px 30px}.canvas{padding:40px 64px}}
@media(max-width:1200px){.workspace{grid-template-columns:minmax(0,1fr) 350px}.sidebar{padding:20px 16px}.app-header{gap:20px}.family-field input{max-width:180px}.view-toolbar{padding:0 24px;gap:16px}.tabs{gap:20px}.canvas{padding:32px}.reading-row{grid-template-columns:44px minmax(0,1fr)}.reading:last-child{grid-column:2}.prototype-note{display:none}.canvas-options{gap:0}.size-control input{width:65px}}
@media(max-width:950px){.workspace{grid-template-columns:minmax(0,1fr) 320px}.sidebar{padding:16px 12px}.view-toolbar{gap:8px 18px;padding:6px 20px}.tabs{height:44px}.size-control{margin-left:0}.canvas-options{margin-left:auto}.canvas{padding:28px}.display-line{font-size:40px}.alphabet{font-size:28px}.sidebar h1{font-size:28px}.glyph-navigation{gap:8px}.glyph-navigation .quiet{font-size:12px;padding:8px 0}.glyph-navigation .primary{font-size:12px;padding:10px}.character-heading>div{flex-direction:column;gap:6px}.character-heading select{max-width:180px;font-size:12px}}
@media(max-width:760px){.app-header{height:72px;padding:0 20px;gap:18px}.wordmark{gap:8px;flex-direction:column;align-items:flex-start;line-height:1}.studio-wordmark{font-size:18px}.product-wordmark{font-size:11px}.family-field{display:none}.header-actions{gap:4px}.header-actions .quiet{font-size:12px}.primary{font-size:13px;padding:10px 13px}.workspace{display:flex;flex-direction:column;height:auto;padding:0 10px 10px;gap:0}main{height:660px;min-height:500px}.sidebar{padding:30px 20px;overflow:visible}.sidebar-title{margin-bottom:24px}.sidebar h1{font-size:32px}.control input[type=range]{height:48px}.view-toolbar{gap:8px 18px;padding:6px 20px}.tabs{gap:26px}.tabs button{font-size:14px}.size-control{margin-left:auto}.size-control input{width:65px}.canvas-options{margin-left:0}.canvas{padding:28px 22px}.specimen-topline .micro:last-child{display:none}#specimen{height:240px}.type-row{grid-template-columns:1fr;gap:10px}.display-line{font-size:36px}.alphabet{font-size:26px}.reading-row{grid-template-columns:1fr;gap:12px}.reading:last-child{grid-column:1}.statusbar{padding:10px 20px}.alternate-options{grid-template-columns:repeat(3,minmax(0,1fr))}.alternate-option{min-height:145px}.character-heading select{max-width:175px}.grid-actions p{width:100%;margin-bottom:4px}.glyph-navigation .quiet{font-size:13px}.glyph-navigation .primary{font-size:13px}.glyph-stage{--detail-size:clamp(150px,calc(var(--preview-size)*2.2),350px)}}
@media(max-width:440px){.app-header{padding:0 16px}.header-actions{gap:0}.header-actions .quiet{padding:8px}.view-toolbar .size-control{margin-left:0}.canvas-options{margin-left:auto}.alternate-options{grid-template-columns:repeat(2,minmax(0,1fr))}.tabs{gap:30px}.glyph-navigation .quiet{font-size:12px}.character-heading select{max-width:150px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Parameter cards share the same live FontFace as the central canvas. */
#controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}
.control{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(40px,auto) 120px 44px 1fr;gap:10px;min-width:0;padding:16px;margin:0;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.control-head{grid-column:1;grid-row:1;gap:10px;min-width:0;margin:0}
.control label{min-width:0;font-size:14px;letter-spacing:0;overflow-wrap:anywhere}
.control .value-input{width:76px;flex:0 0 76px;padding:6px 12px}
.control-preview{grid-column:1;grid-row:2;min-width:0;min-height:0;height:120px;width:100%;background:transparent;color:var(--ink);font-size:80px;line-height:1.25;display:flex;align-items:center;justify-content:center;padding:0 4px;overflow:hidden;border:1px solid transparent;border-radius:0;cursor:zoom-in}
.control-preview:hover{background:var(--hover);border-color:var(--line)}
.control>input[type=range]{grid-column:1;grid-row:3;min-width:0;align-self:center;height:44px;margin:0}
.control-help{grid-column:1;grid-row:4;margin:0;max-width:none;align-self:start;font-size:10px}
.control-preview[data-preview-param=tracking],.control-preview[data-preview-param=spacing]{font-size:50px}
@media(min-width:1101px){.workspace{grid-template-columns:minmax(0,1fr) clamp(500px,37vw,600px)}.sidebar{padding:24px 22px 28px}}
@media(max-width:1100px){#controls,.alternate-options{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.sidebar{border-left:0;border-top:1px solid var(--line)}.workspace{padding:0}}

/* Keep naming and portable presets available on small screens. */
.preset-file-actions{display:flex;flex-wrap:wrap;gap:16px}
@media(max-width:760px){.app-header{height:auto;min-height:116px;flex-wrap:wrap;gap:8px 12px;padding-top:12px;padding-bottom:12px}.family-field{display:flex;order:3;width:100%;margin:0}.family-field input{width:100%;max-width:none;padding:8px 0;border-radius:0}.header-actions{margin-left:auto}}

.preset-file-actions a[aria-disabled=true]{opacity:.4;cursor:wait}

.control-choices{grid-column:1;grid-row:3;display:flex;gap:6px;min-width:0}
.control-choices button{flex:1;min-width:0;border:1px solid var(--line);background:var(--surface);font-size:12px;padding:8px 4px}
.control-choices button[aria-pressed=true]{background:var(--selected);border-color:var(--selection-ink);color:var(--selection-ink)}
.control input:disabled{opacity:.4;cursor:default}

/* Typograph reference: quiet filled tiles, with no surrounding frame. */
:root{--tile:#f8f8f8;--glyph-size:44px;--glyph-cell-width:72px;--glyph-cell-height:88px}
:root[data-theme=dark]{--tile:#2b2e28}
.control{border:0;background:var(--tile);border-radius:20px;padding:16px}
.control .value-input{border:0;background:var(--surface);border-radius:20px}
.control-preview:hover{border-color:transparent;background:transparent}
.control-choices button{border:0;border-radius:14px;background:var(--surface)}
#parameter-tools{padding-top:24px}
.history-actions{display:flex;gap:0}.history-actions button{font-size:22px;padding:7px;width:34px}
.header-actions{gap:8px}.app-header{gap:18px}.family-field input{max-width:180px}
.export-menu{position:relative}.export-menu summary{cursor:pointer;list-style:none}.export-menu summary::-webkit-details-marker{display:none}
.export-options{position:absolute;right:0;top:calc(100% + 8px);width:245px;background:var(--surface);border:1px solid var(--line);padding:8px;border-radius:14px;box-shadow:0 10px 30px #0001;z-index:20}
.export-options>a,.export-options>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px;background:transparent;text-decoration:none;font-size:14px;text-align:left;border-radius:8px}
.export-options small{color:var(--muted);font-size:11px}.export-options>a:hover,.export-options>button:hover{background:var(--tile)}
.export-options [aria-disabled=true]{opacity:.4;pointer-events:none}.export-options p{font-size:12px;line-height:1.5;padding:0 12px;color:var(--muted)}
.tabs{gap:18px}.tabs button{white-space:nowrap}.view-toolbar{flex-wrap:wrap;min-height:68px;height:auto;row-gap:0}
.size-control{white-space:nowrap}.glyph-tile{position:relative;min-width:0;min-height:var(--glyph-cell-height)}
.glyph-tile .glyph-cell{width:100%;height:100%;min-height:var(--glyph-cell-height)}
.glyph-tile.has-override:after{content:'';position:absolute;bottom:8px;left:50%;width:4px;height:4px;border-radius:50%;background:var(--accent);pointer-events:none}
.glyph-cell.has-override:after{display:none}
.alternate-trigger{position:absolute;top:3px;right:3px;width:25px;height:25px;padding:2px;background:transparent;font:16px 'Tremendo Sans UI',Arial,sans-serif;color:var(--muted);border-radius:50%}
.alternate-trigger:hover,.alternate-trigger:focus-visible{background:var(--surface-raised);color:var(--ink)}
dialog{color:var(--ink);background:var(--surface);border:0;border-radius:28px;padding:36px;max-height:90dvh;overflow:auto;box-shadow:0 20px 80px #0002}
dialog::backdrop{background:#000b}.dialog-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.dialog-heading h2{margin:0;font-size:30px;font-weight:500;letter-spacing:0}.dialog-heading>.quiet{font-size:24px;padding:0;width:30px;height:30px}
.dialog-description{font-size:13px;line-height:1.6;margin:8px 0 20px;color:var(--muted)}
.family-dialog{width:min(950px,calc(100vw - 40px));padding:32px}.family-dialog h3{font-size:18px;font-weight:600;margin:16px 0 20px}.family-dialog section+section{margin-top:20px}
.family-axis{position:relative;height:56px;margin:0 18px 12px}.family-axis:before{content:'';position:absolute;top:8px;left:0;right:0;height:26px;background:var(--surface-raised);border-radius:20px}
.family-axis-point{position:absolute;top:4px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:white;font-size:12px;cursor:ew-resize;touch-action:none;box-shadow:0 2px 4px #0001}
.family-axis-point[data-anchor=true]{background:var(--ink);color:var(--surface)}.family-axis-point small{position:absolute;top:42px;color:var(--muted);font-size:10px;white-space:nowrap}
.family-axis-point:focus-visible,.family-axis-point[data-dragging=true]{z-index:2;outline:3px solid var(--focus);outline-offset:3px}
.family-distribute{position:absolute;right:-18px;top:-40px;font-size:12px}.family-distribute:disabled{opacity:.35;cursor:default}
.family-choice-wrap{min-width:0;display:grid;gap:6px}.family-choice-wrap .family-choice{width:100%}
.family-choice-wrap input{width:100%;min-width:0;height:30px;padding:4px;text-align:center;border:1px solid transparent;border-radius:10px;background:var(--tile);color:var(--ink);font:inherit;font-size:12px;font-variant-numeric:tabular-nums}
.family-choice-wrap input:focus{outline:2px solid var(--focus);outline-offset:1px}.family-choice-wrap input:disabled{opacity:.35}
.family-choices{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px}
.family-choice{background:var(--tile);min-height:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 4px;border-radius:20px}.family-choice span{font-size:30px;line-height:1.15;letter-spacing:0}.family-choice small{font-size:10px;line-height:1.3}
.family-choice[aria-pressed=true]{background:var(--accent);color:white}.family-choice[data-anchor=true]{background:var(--ink);color:var(--surface)}
.family-dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;font-size:12px;color:var(--muted)}.family-dialog-footer .quiet{border:1px solid var(--line);border-radius:24px}.family-dialog-footer .primary{border-radius:24px;padding:10px 22px}
.alternates-dialog{width:min(660px,calc(100vw - 32px))}.alternates-dialog .alternate-options{grid-template-columns:repeat(4,minmax(0,1fr))}.alternates-dialog .alternate-group h2{display:none}.alternates-dialog .alternate-option{min-height:150px;border-radius:18px}
.family-text{width:100%;margin:12px 0 20px;padding:12px;background:var(--tile);border:0;color:inherit}
.family-row{padding:16px 0 24px;border-top:1px solid var(--line);position:relative}.family-row>button{display:flex;gap:8px;align-items:center;background:transparent;padding:0;font-size:12px}.family-row>button:before{content:'';width:11px;height:11px;border:1px solid var(--muted);border-radius:3px}.family-row>button[aria-pressed=true]:before{background:var(--ink);box-shadow:inset 0 0 0 2px var(--surface)}.family-row p{margin:16px 0 0;line-height:1.2;white-space:nowrap;overflow:hidden;font-size:var(--preview-size);font-synthesis:none}.family-row[data-loading=true] p{opacity:.25}.family-row small{color:var(--muted);margin-left:auto}
@media(max-width:1100px){.family-field input{max-width:135px}.app-header{gap:8px;padding-inline:20px}.header-actions{gap:2px}.family-choices{gap:8px}.family-choice small{font-size:9px}}
@media(max-width:760px){.app-header .family-field input{max-width:none}.family-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.family-dialog{padding:24px}.family-axis{margin-inline:10px}.family-axis-point{width:28px;height:28px;top:7px;font-size:10px}.family-axis-point small{top:35px;font-size:9px}.family-dialog-footer{flex-wrap:wrap}.family-dialog-footer .primary{margin-left:auto}.alternates-dialog{padding:24px}.alternates-dialog .alternate-options{grid-template-columns:repeat(2,minmax(0,1fr))}.tabs{gap:18px}.view-toolbar{padding:0 20px}.size-control{margin-left:0}.header-actions .quiet{font-size:12px;padding:8px}.history-actions button.quiet{font-size:20px;padding:3px;width:28px}.app-header .product-wordmark{display:none}.family-choice{min-height:72px}.family-dialog h3{margin-top:12px}}

.outline .family-row p{color:transparent;-webkit-text-stroke:1px var(--canvas-ink)}

/* Lucide paths share a single stroke and color treatment throughout the editor. */
.ui-icon{display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.history-actions button,.dialog-heading>.quiet,.alternate-trigger,.invert{display:inline-flex;align-items:center;justify-content:center}
.history-actions button{width:36px;height:36px;padding:8px}.history-actions .ui-icon{width:20px;height:20px}
.dialog-heading>.quiet{width:32px;height:32px;padding:6px}.dialog-heading .ui-icon{width:20px;height:20px}
.alternate-trigger{width:28px;height:28px;padding:6px}.alternate-trigger .ui-icon{width:14px;height:14px}
.glyph-navigation .quiet{display:inline-flex;align-items:center;gap:8px}
:root[data-theme=light] .theme-light,:root[data-theme=dark] .theme-dark{display:none}
.starting-point summary{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none}.starting-point summary::-webkit-details-marker{display:none}.starting-point[open] summary .ui-icon{transform:rotate(180deg)}
#edit-scope{min-width:0;margin:0;padding:0;border:0}#edit-scope legend{padding:0;margin-bottom:10px}
.scope-options{display:flex;gap:4px;padding:4px;background:var(--tile);border-radius:999px}
.scope-option{position:relative;flex:1;min-width:0;cursor:pointer}
.scope-option input{position:absolute;width:1px;height:1px;padding:0;margin:0;opacity:0;clip-path:inset(50%)}
.scope-option span{display:flex;align-items:center;justify-content:center;min-height:40px;padding:9px 12px;border-radius:999px;font-size:14px;font-weight:500;line-height:1.4;color:var(--muted);text-align:center}
.scope-option input:checked+span{background:var(--ink);color:var(--surface)}
.scope-option input:not(:checked):not(:disabled)+span:hover{background:var(--hover);color:var(--ink)}
.scope-option input:focus-visible+span{outline:2px solid var(--focus);outline-offset:3px}
.scope-option input:disabled+span{opacity:.4;cursor:default}
@media(max-width:760px){.scope-option span{font-size:13px;padding-inline:8px}.history-actions button.quiet{width:32px;height:36px;padding:7px}.header-actions .ui-icon{width:18px;height:18px}}


/* Glyph-set menu follows the existing canvas colors at every breakpoint. */
.character-heading>.glyph-filter{position:relative;display:block;flex:0 1 auto;min-width:0;max-width:230px}
#glyph-filter{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:42px;width:100%;padding:10px 14px;border:1px solid var(--canvas-line);border-radius:10px;background:var(--paper);color:var(--canvas-ink);font-size:13px;text-align:left}
#glyph-filter:hover,#glyph-filter[aria-expanded=true]{background:var(--hover)}
#glyph-filter .ui-icon{width:16px;height:16px;flex-shrink:0}
#glyph-filter-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:5;min-width:210px;padding:5px;border:1px solid var(--canvas-line);border-radius:12px;background:var(--paper);box-shadow:0 8px 24px #00000012}
#glyph-filter-menu [role=option]{display:flex;align-items:center;justify-content:space-between;gap:18px;width:100%;min-height:40px;padding:10px 12px;border-radius:7px;background:transparent;color:var(--canvas-ink);text-align:left;font-size:13px}
#glyph-filter-menu [role=option]:hover,#glyph-filter-menu [role=option]:focus-visible{background:var(--hover)}
#glyph-filter-menu [aria-selected=true]{background:var(--selected);color:var(--selection-ink)}
#glyph-filter-menu .ui-icon{width:15px;height:15px;opacity:0}
#glyph-filter-menu [aria-selected=true] .ui-icon{opacity:1}
@media(max-width:950px){.character-heading>.glyph-filter{max-width:180px}#glyph-filter{font-size:12px;gap:10px}}
@media(max-width:440px){.character-heading>.glyph-filter{max-width:150px}}
/* Glyph-side controls share the canvas palette and Typograph's compact pills. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#specimen{font-kerning:normal;font-variant-ligatures:none}
.text-kerning{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:11px;line-height:1.5;color:var(--canvas-muted);margin:10px 0 0;min-height:22px}
#kerning-pair{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--canvas-ink);white-space:pre}
.text-kerning .text-button,.glyph-spacing-note .text-button{font-size:11px;color:var(--canvas-muted)}
.glyph-spacing-frame{position:relative;flex:none;margin-inline:90px}
.glyph-spacing-frame:before,.glyph-spacing-frame:after{content:'';position:absolute;top:-24px;bottom:-24px;border-left:1px solid var(--canvas-line);pointer-events:none}
.glyph-spacing-frame:before{left:0}.glyph-spacing-frame:after{right:0}
.bearing-control{position:absolute;top:50%;transform:translateY(-50%);z-index:3;display:flex;align-items:center;gap:4px}
.bearing-left{right:calc(100% + 10px)}.bearing-right{left:calc(100% + 10px)}
.bearing-control input{width:54px;min-width:0;padding:6px 8px;font-size:12px;text-align:center;font-variant-numeric:tabular-nums;border:0;border-radius:999px;background:var(--hover);color:var(--canvas-ink);appearance:textfield;-moz-appearance:textfield}
.bearing-control input::-webkit-inner-spin-button,.bearing-control input::-webkit-outer-spin-button{appearance:none;margin:0}
.bearing-drag{width:24px;height:36px;padding:0;border:0;background:transparent;color:var(--canvas-muted);cursor:ew-resize;touch-action:none;display:grid;place-items:center}
.bearing-drag .ui-icon{width:16px;height:16px}.bearing-drag:hover,.bearing-drag:focus-visible{color:var(--canvas-ink);background:var(--hover)}
.glyph-spacing-note{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;color:var(--canvas-muted);font-size:11px;line-height:1.5;margin:-4px 0 22px}
@media(max-width:760px){.glyph-spacing-frame{margin-inline:82px}.bearing-left{right:calc(100% + 4px)}.bearing-right{left:calc(100% + 4px)}.text-kerning{font-size:10px}}

.alternates-dialog .a-join-group h3{font-size:14px;font-weight:500;margin:0 0 6px}.alternates-dialog .a-join-group .dialog-description{font-size:12px;margin:0 0 12px}.alternates-dialog .a-join-group .alternate-options{grid-template-columns:repeat(2,minmax(0,1fr))}.alternates-dialog .a-join-group .alternate-option{min-height:126px}

/* Text owns the available canvas; fixed-size specimens have their own tab. */
.canvas.text-canvas{display:flex;flex-direction:column;overflow:hidden;padding-bottom:20px}
#specimen-panel:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0}
.text-canvas #specimen{flex:1;height:auto;min-height:100px;resize:none;overflow:auto;margin-top:24px}
.text-presets{display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0}
.text-presets button{font-size:11px;line-height:16px;padding:5px 11px;border-radius:999px;background:var(--surface-raised);color:var(--muted);font-weight:500}
.text-presets button:hover{background:var(--hover);color:var(--ink)}
.text-presets button[aria-pressed=true]{background:var(--line);color:var(--ink)}
.text-canvas .text-kerning{flex-shrink:0;margin-top:16px}
.text-canvas .unsupported{flex-shrink:0;margin-bottom:0}
.tabs{flex-shrink:0}
@media(max-width:1100px){.view-toolbar{flex-wrap:wrap;height:auto;min-height:68px}.tabs{max-width:100%;overflow-x:auto}.tabs button{white-space:nowrap}}
@media(max-width:760px){.tabs{width:100%;gap:20px;min-height:48px}.view-toolbar{padding-bottom:10px}.text-presets{gap:5px}.text-presets button{padding:5px 9px}.text-canvas #specimen{margin-top:20px}}

/* Glyph alternates: a swipeable specimen and compact position dots per tile. */
.glyph-tile .glyph-cell{padding:8px 8px 30px}
.glyph-tile.has-alternates .glyph-cell{padding-inline:0;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.glyph-alternate-track{display:flex;width:100%;transition:transform 180ms cubic-bezier(.2,.7,.2,1);pointer-events:none}
.glyph-alternate-slide{display:flex;align-items:center;justify-content:center;flex:0 0 100%;min-width:0;padding:0 8px;box-sizing:border-box}
.glyph-tile.is-swiping .glyph-cell{cursor:grabbing}.glyph-tile.is-swiping .glyph-alternate-track,.glyph-tile.is-resetting .glyph-alternate-track{transition:none}
.glyph-alternate-dots{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:0;max-width:calc(100% - 12px)}
.glyph-alternate-dot{display:flex;align-items:center;justify-content:center;flex:0 1 16px;min-width:10px;width:16px;height:24px;padding:0;background:transparent;color:var(--canvas-ink);border-radius:8px}
.glyph-alternate-dot:before{content:'';width:5px;height:5px;background:currentColor;opacity:.16;border-radius:50%}
.glyph-alternate-dot[aria-pressed=true]:before{opacity:1}.glyph-alternate-dot:hover:before{opacity:.65}
.glyph-alternate-dot:focus-visible{outline:2px solid var(--focus);outline-offset:0}
.glyph-tile.has-alternates.has-override:after{left:9px;bottom:10px}
@media(prefers-reduced-motion:reduce){.glyph-alternate-track{transition:none}}
@media(pointer:coarse){.glyph-alternate-dot{flex-basis:20px;width:20px;height:28px}.glyph-alternate-dots{bottom:7px}}

/* Per-parameter reset shares the value row without changing card padding. */
.control-head{gap:6px}
.control-value-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.control .parameter-reset{display:inline-flex;align-items:center;justify-content:center;width:24px;height:28px;min-width:24px;padding:4px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}
.control .parameter-reset .ui-icon{width:14px;height:14px}
.control .parameter-reset:hover{background:var(--hover);color:var(--ink)}
.control .parameter-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.control-value-actions .value-input{width:64px;flex-basis:64px;padding-inline:12px}
.control-head label{overflow-wrap:normal}

/* My fonts uses the editor's existing surfaces and native modal focus handling. */
.editor-actions{display:flex;align-items:center;gap:10px}.editor-actions .quiet{padding:8px;min-width:32px}
.fonts-drawer{position:fixed;inset:0 0 0 auto;margin:0;width:min(460px,100%);height:100dvh;max-height:100dvh;max-width:100%;box-sizing:border-box;border:0;border-left:1px solid var(--line);border-radius:0;padding:28px;background:var(--surface);color:var(--ink);overflow:auto}
.fonts-drawer::backdrop,.reset-dialog::backdrop{background:#0003}
.fonts-drawer .dialog-heading{margin-bottom:8px}.fonts-drawer h2,.reset-dialog h2{font-size:28px;letter-spacing:0;margin:0;font-weight:500}
.font-library-actions{display:flex;align-items:center;gap:12px;margin:24px 0}.font-library-list{display:grid;gap:12px}
.saved-font{padding:18px;background:var(--surface-raised);border-radius:16px;min-width:0}.saved-font[data-current=true]{box-shadow:inset 0 0 0 1px var(--line)}
.saved-font-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.saved-font h3{font-size:20px;font-weight:500;letter-spacing:0;margin:0;overflow-wrap:anywhere}.saved-font-heading .quiet{flex:none;padding:8px 0 8px 8px;font-size:12px}.saved-font-heading .quiet:disabled{opacity:1;color:var(--muted)}
.saved-font-meta{font-size:12px;color:var(--muted);margin:4px 0 0}.saved-font details{margin-top:16px}.saved-font summary{display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:12px;list-style:none}.saved-font summary::-webkit-details-marker{display:none}.saved-font summary .ui-icon{width:14px;height:14px}.saved-font details[open] summary .ui-icon{transform:rotate(180deg)}
.saved-font-styles{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}.saved-font-styles span{font-size:11px;background:var(--surface);padding:5px 8px;border-radius:20px}.saved-font-reset{margin-top:16px;font-size:12px}
.reset-dialog{width:min(420px,calc(100% - 32px));box-sizing:border-box;padding:28px;border:1px solid var(--line);border-radius:18px;background:var(--surface);color:var(--ink)}.reset-dialog p{font-size:14px;line-height:1.6;color:var(--muted);margin:16px 0 24px}.reset-actions{display:flex;justify-content:flex-end;gap:12px}.reset-actions .primary{background:var(--ink);color:var(--surface)}
@media(max-width:760px){.fonts-drawer{padding:24px 20px}.header-actions{flex-wrap:wrap}.header-actions #my-fonts{padding-inline:8px}}

/* Keep compact card headings on one line beside the value and reset icon. */
.control-head{gap:4px}
.control-head label{font-size:12px;letter-spacing:0;white-space:nowrap;line-height:1.3}
.control-value-actions{gap:2px}
.control-value-actions .value-input{width:54px;flex-basis:54px;font-size:12px;padding-inline:12px}
.control .parameter-reset{width:18px;min-width:18px;padding:2px;border-radius:0;background:transparent}
.control .parameter-reset:hover{background:transparent}

/* Account UI is scoped to its own dialog; parameter cards stay unchanged. */
.account-dialog{width:min(480px,calc(100vw - 32px));max-height:85vh;padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink)}
.account-dialog::backdrop{background:rgb(0 0 0 / .18)}
.account-dialog #account-google,.account-dialog #account-send-link{width:100%;min-height:44px}
.account-dialog form{display:grid;gap:10px}.account-dialog input{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:inherit}
.account-dialog .account-divider{text-align:center;font-size:12px;margin:20px 0;color:var(--muted)}
.account-dialog .account-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.account-dialog #account-password-form .account-actions button{flex:1;min-height:44px}.account-dialog #account-add-password{margin:16px 0 8px}.account-dialog #account-add-password label{font-size:13px;color:var(--muted)}
.account-dialog #account-message{font-size:13px;line-height:1.5}.account-dialog #account-font-list{display:grid;gap:12px;margin-top:20px}
/* Persistent editing chrome; preview controls occupy identical slots in every view. */
.app-header{border-bottom:1px solid var(--line)}
.workspace{grid-template-columns:350px minmax(0,1fr)}
.sidebar{border-left:0;border-right:1px solid var(--line);padding-top:0}
.sidebar-sticky{position:sticky;top:0;z-index:5;background:var(--surface);padding:20px 0 16px;border-bottom:1px solid var(--line);margin-bottom:20px}
.sidebar-title{align-items:center;margin-bottom:14px;gap:12px}.sidebar h1{font-size:24px}
.scope-card{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0;border:0}
.scope-card #edit-scope{flex:1;min-width:0}.scope-card #reset-current{flex:none;width:32px;height:32px;padding:6px}
.scope-options{padding:3px;gap:2px}.scope-option span{min-height:30px;padding:6px 8px;font-size:12px;white-space:nowrap}
.scope-card #clear-overrides{flex-basis:100%}.scope-card #scope-description{display:none}
.view-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 16px;padding-bottom:10px}
.view-toolbar .tabs{grid-column:1/-1;height:52px;min-width:0;overflow-x:auto}
.view-toolbar .size-control{grid-column:1;grid-row:2;justify-self:end;margin:0;min-width:190px;justify-content:space-between}
.view-toolbar .size-control input{width:100px}.view-toolbar .size-control output{width:40px;text-align:right}
.canvas-options{grid-column:2;grid-row:2;margin:0}
.canvas{--canvas-top:36px}.glyph-heading{position:sticky;top:calc(-1 * var(--canvas-top));z-index:4;background:var(--canvas-bg);padding:16px 0;border-bottom:1px solid var(--canvas-line);gap:12px;flex-wrap:wrap}
.glyph-heading>div:first-child{flex-basis:100%;flex-direction:row;align-items:baseline}
.glyph-heading .grid-actions{margin:0;gap:12px;flex:1;align-items:center;flex-wrap:wrap}
.glyph-heading .glyph-filter{margin-left:auto}.glyph-heading .grid-actions .quiet{white-space:nowrap}
#specimens-panel .display-line{font-size:calc(48px * var(--specimen-scale,1))}
#specimens-panel .alphabet{font-size:calc(32px * var(--specimen-scale,1))}
#specimens-panel .reading{font-size:calc(18px * var(--specimen-scale,1));overflow-wrap:anywhere}
.glyph-stage{--detail-size:var(--preview-size)}
@media(min-width:1101px){.workspace{grid-template-columns:clamp(420px,37vw,600px) minmax(0,1fr)}}
@media(min-width:1600px){.canvas{--canvas-top:40px}}
@media(max-width:1200px){.canvas{--canvas-top:32px}}
@media(max-width:950px){.workspace{grid-template-columns:320px minmax(0,1fr)}.canvas{--canvas-top:28px}.sidebar h1{font-size:24px}}
@media(max-width:760px){.workspace{display:flex}.workspace main{order:0}.sidebar{order:1;padding-top:0;border-right:0}.sidebar-sticky{top:0}.sidebar h1{font-size:24px}.view-toolbar .tabs{width:100%;height:48px}.view-toolbar .size-control{min-width:175px}.view-toolbar .size-control input{width:80px}.glyph-heading .grid-actions{flex-basis:100%}.glyph-heading .glyph-filter{margin-left:0}.glyph-stage{--detail-size:var(--preview-size)}}
#reset-current.reset-armed{background:var(--ink);color:var(--surface);outline:2px solid var(--ink);outline-offset:2px}
.glyph-heading .grid-actions{flex-direction:row}
@media(max-width:760px){.glyph-heading .grid-actions{justify-content:flex-start;gap:12px}.glyph-heading .glyph-filter{max-width:none}#glyph-filter{white-space:nowrap}}
/* Figma 312:1033: one continuous 56px sub-navigation beneath a 64px header. */
.app-header{height:64px;min-height:64px}
.workspace{height:calc(100dvh - 64px)}
.sidebar{--sidebar-pad:24px;padding:0 var(--sidebar-pad) 28px}
.sidebar-sticky{height:56px;min-height:56px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 var(--sidebar-pad);margin:0 calc(-1 * var(--sidebar-pad));border-bottom:1px solid var(--line)}
.sidebar-title{display:contents}.sidebar h1{font-size:24px;line-height:40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.scope-card{flex:none;flex-wrap:nowrap;gap:16px}.scope-card #edit-scope{flex:none}.scope-card #reset-current{order:2;width:32px;height:32px}
.scope-options{height:48px;padding:4px;gap:4px}.scope-option span{height:40px;min-height:40px;padding:9px 16px;font-size:14px;font-weight:400}
#parameter-tools{padding-top:48px}#clear-overrides{margin-bottom:20px;font-size:12px}
.view-toolbar{display:flex;flex-wrap:nowrap;gap:22px;height:56px;min-height:56px;padding:0 28px;overflow-x:auto}
.view-toolbar .tabs{height:56px;min-height:56px;flex:none;width:auto;gap:18px;overflow:visible}
.view-toolbar .size-control{min-width:0;flex:none;margin-left:auto;gap:10px;justify-content:initial}
.view-toolbar .size-control input{width:85px}.view-toolbar .size-control output{width:32px}.canvas-options{flex:none;gap:8px}
.glyph-heading{flex-wrap:nowrap;gap:16px;min-height:56px;padding:12px 0}
.glyph-heading #character-total{flex:none;white-space:nowrap}.glyph-heading .grid-actions{flex:1;flex-basis:auto;justify-content:flex-end;flex-wrap:nowrap;gap:12px}
.glyph-heading .glyph-filter{flex:none;margin-left:0}.glyph-heading .text-button{white-space:nowrap}
@media(min-width:761px) and (max-width:1200px){.sidebar{--sidebar-pad:16px}.sidebar-sticky{gap:8px}.sidebar h1{font-size:20px}.scope-card{gap:6px}.scope-options{height:38px;padding:3px;gap:2px}.scope-option span{height:32px;min-height:32px;padding:6px 9px;font-size:12px}.view-toolbar{gap:12px;padding-inline:20px}.view-toolbar .tabs{gap:14px}.view-toolbar .size-control input{width:60px}}
@media(max-width:1100px){.glyph-heading{flex-wrap:wrap}.glyph-heading .grid-actions{justify-content:flex-start}.glyph-heading .glyph-filter{margin-left:auto}}
@media(max-width:760px){.app-header{height:64px;min-height:64px;flex-wrap:nowrap;padding:0 16px;gap:8px}.app-header .family-field{display:none}.app-header .header-actions{flex-wrap:nowrap}.app-header .history-actions{display:none}.workspace{height:auto}.sidebar{--sidebar-pad:16px}.sidebar-sticky{gap:8px}.sidebar h1{font-size:20px}.scope-card{gap:6px}.scope-options{height:38px;padding:3px}.scope-option span{height:32px;min-height:32px;font-size:12px;padding:6px 9px}.view-toolbar{height:56px;min-height:56px;padding:0 20px;gap:20px}.view-toolbar .size-control{min-width:0}.view-toolbar .tabs{height:56px;min-height:56px}.glyph-heading .grid-actions{flex-basis:auto;flex-wrap:wrap}.glyph-heading .glyph-filter{margin-left:0}}
#characters-panel{margin-top:calc(-1 * var(--canvas-top))}
#parameter-tools #controls{margin-top:0}
/* Continuous chrome dividers, without scrollbar gutters or toolbar overflow. */
:root{--chrome-line:color-mix(in srgb,var(--ink) 24%,var(--surface))}
.app-header{position:relative;border-bottom:1px solid var(--chrome-line)}
.sidebar{border-right:1px solid var(--chrome-line);scrollbar-width:none;overflow-x:hidden}
.sidebar::-webkit-scrollbar{display:none;width:0;height:0}
.sidebar-sticky,.view-toolbar{border-bottom:1px solid var(--chrome-line)}
.view-toolbar{overflow:clip;overscroll-behavior:none}
.view-toolbar .tabs{height:100%;min-height:0;overflow:clip;align-self:stretch}
@media(min-width:761px) and (max-width:1100px){.view-toolbar{gap:10px;padding-inline:16px}.view-toolbar .tabs{gap:12px}.view-toolbar .tabs button{font-size:12px}.view-toolbar .size-control{gap:6px}.view-toolbar .size-control input{width:48px}.canvas-options{gap:0}}
@media(max-width:760px){.sidebar{border-right:0}.view-toolbar{flex-wrap:wrap;height:auto;min-height:88px;padding:0 16px 8px;gap:0 12px}.view-toolbar .tabs{flex-basis:100%;height:44px;min-height:44px;justify-content:space-between;gap:8px}.view-toolbar .tabs button{font-size:12px}.view-toolbar .size-control{margin-left:auto}.view-toolbar .size-control input{width:85px}}
main{container-type:inline-size}
@container(max-width:600px){.view-toolbar{flex-wrap:wrap;height:88px;min-height:88px;padding:0 16px 8px;gap:0 12px}.view-toolbar .tabs{flex-basis:100%;height:44px;min-height:44px;justify-content:space-between;gap:8px}.view-toolbar .tabs button{font-size:12px}.view-toolbar .size-control{margin-left:auto}.view-toolbar .size-control input{width:85px}}

/* Shared borderless header and compact, grouped preview controls. */
.app-header{border-bottom:0}
.sidebar{border-right:0;container-type:inline-size}
.preview-tools{display:flex;align-items:center;gap:14px;flex:none;margin-left:auto;white-space:nowrap}
.preview-tools .size-control{margin-left:0}
.scope-copy{font:inherit}
.scope-option .scope-icon{display:none}
@container(max-width:400px){
 .scope-option .scope-copy{display:none}
 .scope-option .scope-icon{display:block;width:18px;height:18px}
 .scope-option span{width:36px;height:36px;min-height:36px;padding:9px}
 .scope-options{height:44px;padding:4px;gap:2px}
 .sidebar-sticky{gap:12px}
}
@container(max-width:600px){
 .preview-tools{gap:12px;min-height:36px}
 .preview-tools .size-control{margin-left:0}
}
@media(max-width:760px){
 .preview-tools{gap:12px;min-height:36px}
 .preview-tools .size-control{margin-left:0}
 .header-actions #edit-family{max-width:64px;white-space:normal;line-height:1.1}
 .app-header{padding-inline:12px;gap:4px}
 .app-header .studio-wordmark{font-size:16px}
 .header-actions .quiet{padding-inline:6px}
}

/* Compact overflow menu replaces the second toolbar row. */
.view-toolbar{position:relative;z-index:6;overflow:visible;flex-wrap:nowrap;height:56px;min-height:56px;padding-block:0}
.view-toolbar .tabs{height:55px;min-height:0;flex-basis:auto;width:auto}
.preview-appearance{position:relative;flex:none;margin-left:auto}
.preview-options-toggle{display:none}
.preview-tools{margin-left:0}
@container(max-width:720px){
 .view-toolbar{gap:8px;padding-inline:16px}
 .view-toolbar .tabs{flex:1;justify-content:flex-start;gap:16px}
 .view-toolbar .tabs button{font-size:12px;white-space:nowrap}
 .preview-options-toggle{display:flex;align-items:center;justify-content:center;width:32px;height:36px;padding:6px}
 .preview-appearance .preview-tools{display:none;position:absolute;right:0;top:calc(100% + 10px);padding:16px;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px #0002;min-height:56px}
 .preview-appearance.is-open .preview-tools{display:flex}
 .preview-tools .size-control{gap:8px}
 .preview-tools .size-control input{width:85px}
}
@container(max-width:380px){.view-toolbar{padding-inline:10px;gap:4px}.view-toolbar .tabs{gap:6px}.view-toolbar .tabs button{font-size:11px}.preview-appearance .preview-tools{gap:8px;padding:12px}}

/* Local visual pass: organic surfaces and compact editing controls. */
*,*::before,*::after{corner-shape:squircle}
@media(min-width:1500px){
 .workspace{grid-template-columns:clamp(600px,40vw,720px) minmax(0,1fr)}
 #controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
 .control{padding:12px}
 .control-head{align-items:center;gap:4px}
 .control-head label{white-space:normal;font-size:11px}
 .control-value-actions .value-input{width:46px;flex-basis:46px;padding-inline:8px}
}
/* Scope uses the same separate, compact labels as the text presets. */
.scope-options{height:auto;padding:0;gap:6px;background:transparent;border-radius:0}
.scope-option{flex:none}
.scope-option span{height:26px;min-height:26px;padding:5px 11px;font-size:11px;line-height:16px;font-weight:500;border-radius:999px;background:var(--surface-raised);color:var(--muted);transition:background 140ms ease,color 140ms ease,transform 140ms ease}
.scope-option input:checked+span{background:var(--accent);color:#fff}
.scope-option input:not(:disabled)+span:active{transform:scale(.96)}
@container(max-width:400px){.scope-option span{width:32px;height:32px;min-height:32px;padding:7px}.scope-options{height:32px;padding:0;gap:6px}}
input[type=range]::-webkit-slider-thumb{border-radius:999px;corner-shape:squircle;transition:transform 140ms ease,box-shadow 140ms ease,filter 140ms ease}
input[type=range]::-moz-range-thumb{border-radius:999px;corner-shape:squircle;transition:transform 140ms ease,box-shadow 140ms ease,filter 140ms ease}
.size-control input::-webkit-slider-thumb{border-radius:999px}
.size-control input::-moz-range-thumb{border-radius:999px}
input[type=range]:not(:disabled):hover::-webkit-slider-thumb{transform:scale(1.08);box-shadow:0 2px 8px #0003}
input[type=range]:not(:disabled):hover::-moz-range-thumb{transform:scale(1.08);box-shadow:0 2px 8px #0003}
input[type=range]:not(:disabled):active::-webkit-slider-thumb{transform:scale(.94,1.04);box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 24%,transparent)}
input[type=range]:not(:disabled):active::-moz-range-thumb{transform:scale(.94,1.04);box-shadow:0 0 0 4px color-mix(in srgb,var(--focus) 24%,transparent)}
button,summary,.scope-option span{transition:background-color 140ms ease,color 140ms ease,box-shadow 140ms ease}
button:not(:disabled):active,summary:active{filter:brightness(.92)}
.control-preview:hover{background:var(--hover)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}
/* A gentler superellipse keeps the narrow handles pill-like. */
input[type=range]::-webkit-slider-thumb{corner-shape:superellipse(1.25)}
input[type=range]::-moz-range-thumb{corner-shape:superellipse(1.25)}

/* Editing target shares the preview navigation's type scale. */
.sidebar h1{font-size:14px;line-height:20px;font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
#editor-target{color:var(--accent)}
:root[data-theme=dark] #editor-target{color:var(--selection-ink)}
@media(max-width:1100px){.sidebar h1{font-size:12px}}

/* Small individual labels make the active editing target easier to distinguish. */
.sidebar h1{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
#editor-target{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden}
.edit-target-label{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:2px 6px;line-height:18px;border-radius:6px;background:color-mix(in srgb,var(--range-fill) 42%,var(--surface));color:var(--accent);font-weight:500}
:root[data-theme=dark] .edit-target-label{background:var(--range-fill);color:#e5efd8}

.statusbar{justify-content:flex-end;text-align:right}
/* One account library, with actions on its current font. */
.new-font-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:auto;height:40px;padding:8px;white-space:nowrap}
.fonts-drawer .font-library-list{margin-top:24px}
.library-footer{position:sticky;bottom:-28px;display:flex;justify-content:flex-end;gap:8px;background:var(--surface);padding:16px 0;margin-top:24px}
.current-font-label{flex:none;font-size:11px;font-weight:500;padding:4px 8px;border-radius:6px;background:color-mix(in srgb,var(--range-fill) 42%,var(--surface));color:var(--selection-ink)}
.font-open{font-size:12px;padding:6px 12px;border-radius:7px;background:var(--line);color:var(--ink)}
.font-open:hover{background:var(--range-track)}
.saved-font{position:relative}.saved-font-heading{padding-right:28px}
.font-actions-menu{position:absolute;right:12px;top:14px;margin:0!important}
.font-actions-menu>summary{padding:6px;margin:0;list-style:none;cursor:pointer}
.font-actions-options{position:absolute;right:0;top:100%;width:170px;background:var(--surface);padding:6px;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px #0002;z-index:10}
.font-actions-options button{display:block;width:100%;text-align:left;padding:9px;font-size:12px}
.removed-fonts{margin-top:24px;color:var(--muted);font-size:12px}.removed-fonts>summary{cursor:pointer;margin-bottom:12px}
.export-style-choice{display:flex;align-items:center;gap:12px;padding:10px;background:var(--surface-raised);border-radius:8px;margin-bottom:6px;font-size:14px}
.account-dialog .export-style-choice input{width:16px;min-height:16px;accent-color:var(--accent)}
#style-export-list{max-height:50vh;overflow:auto;margin:20px 0}

.fonts-drawer[open]{display:flex;flex-direction:column}
.fonts-drawer .font-library-list{flex:none}
.library-footer{margin-top:auto;padding-top:28px;flex:none}
.font-open{flex:none}

/* One quiet line above the family proofs. */
.family-preview-heading{display:flex;align-items:center;gap:20px;margin-bottom:20px}
.family-preview-heading .family-text{flex:1;min-width:0;width:auto;margin:0}
.family-preview-heading #family-count{flex:none;white-space:nowrap}
#family-preview-status.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Figma 316:1661: compact specimens with a quiet, reactive orange guide. */
.control{padding:16px;border-radius:24px;grid-template-rows:18px 78px 29px 29px;gap:8px;align-content:start}
.control-head{min-height:18px;gap:6px}
.control-head label{font-size:11px;line-height:14.3px;font-weight:500}
.control .parameter-reset{height:20px;width:20px;min-width:20px;padding:4px;color:var(--ink);border-radius:8px;opacity:.2;transition:opacity 180ms ease,transform 280ms ease}
.parameter-reset-icon{display:block;width:12px;height:12px;background:currentColor;mask:url('/images/parameter-reset.svg') center/contain no-repeat}
.control:hover .parameter-reset,.control:focus-within .parameter-reset{opacity:1}
.control .parameter-reset:hover{background:var(--surface);transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){.control .parameter-reset{transition:none}}
.control-example{grid-row:2;position:relative;min-width:0;height:78px}
.control .control-preview{height:78px;line-height:1.25;border:0;padding:0;overflow:hidden}
.control .control-preview:hover{background:transparent}
.parameter-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.42;transition:opacity 180ms ease}
.control:hover .parameter-guide,.control:focus-within .parameter-guide{opacity:1}
.control .control-help{grid-row:3;position:relative;height:29px;font-size:10px;line-height:14.5px;margin:0}
.control .control-help>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;max-height:29px}
.control .control-help.clamped:hover::after{content:attr(data-full);position:absolute;left:-8px;right:-8px;bottom:-6px;z-index:4;padding:6px 8px;border-radius:10px;background:var(--surface);color:var(--ink);box-shadow:0 4px 16px rgba(0,0,0,.12);font-size:10px;line-height:14.5px;pointer-events:none}
.control-slider-row{grid-row:4;display:flex;align-items:center;gap:8px;min-width:0;height:29px}
.control-slider-row input[type=range]{flex:1;min-width:0;width:0;height:26px;margin:0;border-radius:8px}
.control-slider-row .value-input{flex:0 0 47px;width:47px;height:26px;padding:5px 6px;border-radius:8px;font-size:12px;text-align:center}
.control-slider-row input::-webkit-slider-runnable-track{height:26px}
.control-slider-row input::-moz-range-track,.control-slider-row input::-moz-range-progress{height:26px}
.control-slider-row input::-webkit-slider-thumb{width:20px;height:37px;margin-top:-5.5px}
.control-slider-row input::-moz-range-thumb{width:20px;height:37px}
.control .control-choices{grid-row:4;height:29px}
.control .control-choices button{padding:4px;font-size:11px;border-radius:8px}
@media(min-width:1500px){.control{padding:16px}}
:root[data-theme=dark] .parameter-guide{opacity:.64}
:root[data-theme=dark] .control:hover .parameter-guide,:root[data-theme=dark] .control:focus-within .parameter-guide{opacity:1}

/* Canvas text selection follows the light/dark accent palette. */
.canvas::selection,.canvas ::selection{background:var(--range-fill);color:var(--ink);-webkit-text-stroke:0}

/* Product wordmark sizing stays consistent across header breakpoints. */
.app-header .wordmark{column-gap:6px}
.app-header .product-wordmark{font-size:12px}

#new-typeface-dialog{width:min(560px,calc(100vw - 32px));padding:28px;border:1px solid var(--line);border-radius:24px;background:var(--surface);color:var(--ink)}
.typeface-base-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.typeface-base{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:20px;background:var(--surface-raised);border:1px solid transparent;border-radius:20px;text-align:left;color:var(--ink)}
.typeface-base:hover{border-color:var(--focus);background:var(--selected)}
.typeface-base>span:last-child{font-size:12px;line-height:1.4;color:var(--muted)}
.base-sample{font-size:64px;line-height:1.2;margin-bottom:10px}.base-sans{font-family:Arial,sans-serif}.base-serif{font-family:Georgia,serif}

.base-sample{display:block;width:104px;height:82px;background:currentColor;mask-position:left center;mask-repeat:no-repeat;mask-size:contain}.base-sans{mask-image:url('/images/base-sans.svg')}.base-serif{mask-image:url('/images/base-serif.svg')}

/* Direct glyph editing: controls and points stay the same size at every zoom. */
#glyph-panel .character-heading{margin-bottom:18px}
#outline-editor{position:relative;color:var(--ink)}
.outline-toolbar,.path-tools,.path-actions,.path-view-tools,.outline-inspector,.outline-coordinates{display:flex;align-items:center}
.outline-toolbar{gap:10px;flex-wrap:wrap;padding:6px 0 10px;border-bottom:1px solid var(--line)}
.path-tools,.path-actions,.path-view-tools{gap:2px}
.path-actions{border-inline-start:1px solid var(--line);padding-inline-start:8px}
.path-view-tools{margin-inline-start:auto}
.outline-toolbar button,.outline-help summary{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:30px;height:32px;padding:0 7px;font:inherit;font-size:12px;color:var(--ink);background:transparent;border:0;border-radius:5px;cursor:pointer}
.outline-toolbar button[aria-pressed=true]{background:var(--selected);color:var(--selection-ink)}
.outline-toolbar button:disabled{opacity:.3;cursor:default}
.outline-toolbar button:enabled:hover,.outline-help summary:hover,.outline-help[open] summary{background:var(--hover)}
.outline-toolbar .ui-icon{width:16px;height:16px}
/* Amount per Rounder or Squarer click: a small number with its own arrows. */
.tension-amount{display:inline-flex;align-items:center;height:26px;margin:0 2px;padding-inline-start:6px;border:1px solid var(--line);border-radius:5px;font-size:12px;color:var(--ink);background:var(--surface)}
.tension-amount:focus-within{border-color:var(--focus)}
.tension-amount input{width:2.2ch;padding:0;border:0;font:inherit;font-variant-numeric:tabular-nums;text-align:right;color:inherit;background:transparent;-moz-appearance:textfield;appearance:textfield}
.tension-amount input:focus{outline:0}
.tension-amount input::-webkit-inner-spin-button,.tension-amount input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tension-unit{color:var(--muted);margin-inline:1px 3px}
.tension-steppers{display:inline-flex;flex-direction:column;align-self:stretch;border-inline-start:1px solid var(--line)}
.outline-toolbar .tension-steppers button{height:12px;min-width:14px;padding:0 1px;border-radius:0}
.outline-toolbar .tension-steppers button:first-child{border-start-end-radius:4px}.outline-toolbar .tension-steppers button:last-child{border-end-end-radius:4px}
.outline-toolbar .tension-steppers .ui-icon{width:10px;height:10px;stroke-width:2.5}
.outline-help{position:relative}
.outline-help summary{list-style:none}.outline-help summary::-webkit-details-marker{display:none}
.outline-help>div{position:absolute;right:0;top:38px;width:min(330px,75vw);z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 14px;line-height:1.5;font-size:12px;box-shadow:0 6px 20px #0001}
#outline-canvas{display:block;width:100%;height:clamp(300px,46vh,550px);overflow:hidden;color:var(--ink);background:var(--surface);touch-action:none;user-select:none;-webkit-user-select:none}
#outline-canvas:focus{outline:0}#outline-canvas:focus-visible{outline:1px solid var(--focus);outline-offset:-1px}
#outline-canvas[data-tool=pen],#outline-canvas[data-tool=measure]{cursor:crosshair}
#outline-canvas[data-tool=hand]{cursor:grab}#outline-canvas[data-tool=hand]:active{cursor:grabbing}
.editable-ink{fill:var(--ink);fill-opacity:.10;stroke:var(--ink);stroke-width:1.35}
.canvas.outline .editable-ink{fill-opacity:0}.outline-ink{fill:var(--ink);stroke:none}
.outline-guides line{stroke:var(--line);stroke-width:.8}.outline-guides .advance-guide{stroke-dasharray:3 5}
.outline-guides text{fill:var(--muted);font:10px 'Tremendo Sans UI',sans-serif}
.handle-lines line,.pen-draft line,.ruler-line{stroke:var(--focus);stroke-width:1}
.editor-mark .mark-target{fill:transparent;stroke:none}.editor-mark .mark-shape{fill:var(--surface);stroke:var(--ink);stroke-width:1.2;pointer-events:none}
.editor-mark.off-curve .mark-shape{stroke:var(--focus)}
.editor-mark.is-selected .mark-shape,.ruler-point{fill:var(--accent);stroke:var(--surface);stroke-width:1}
.pen-draft path{fill:none;stroke:var(--focus);stroke-width:1.4}.pen-draft circle{fill:var(--surface);stroke:var(--focus);stroke-width:1.5}
/* Curvature combs (Juan, 15 Nov 2026): quiet teeth, a firmer edge, rings on the joins that step or kink. */
.curvature path{fill:none;pointer-events:none}.curvature-teeth{stroke:var(--muted);stroke-width:.6;stroke-opacity:.32}.curvature-edge{stroke:var(--muted);stroke-width:1}
.curvature circle{fill:none;pointer-events:none;stroke-width:1.2}.continuity-g1{stroke:var(--muted)}.continuity-break{stroke:#fe7046;stroke-width:1.6}
.outline-marquee{fill:var(--focus);fill-opacity:.08;stroke:var(--focus);stroke-dasharray:3 3}
.outline-inspector{min-height:40px;flex-wrap:wrap;gap:8px 14px;border-block-start:1px solid var(--line);font-size:12px;color:var(--muted)}
#outline-status{margin-inline-end:auto;font-variant-numeric:tabular-nums}
.outline-coordinates{gap:9px}.outline-coordinates label{display:flex;align-items:center;gap:4px}
.outline-coordinates input{width:64px;max-width:15vw;border:0;background:var(--hover);color:var(--ink);font:inherit;padding:4px 5px;border-radius:4px;font-variant-numeric:tabular-nums}
.outline-coordinates input:disabled{opacity:.45}.outline-inspector button{font-size:12px}
#outline-hint{color:var(--muted);font-size:12px;line-height:1.4;margin:2px 0 20px}
#glyph-spacing-frame{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0;padding:10px 0;border-block-start:1px solid var(--line)}
#glyph-spacing-frame:before,#glyph-spacing-frame:after{display:none}
#glyph-spacing-frame .bearing-control{position:static;transform:none;gap:4px;color:var(--muted);font-size:12px}
#glyph-spacing-frame label{margin-inline:4px}#glyph-spacing-note{margin:0 0 14px;justify-content:flex-start}
.family-row p{font-size:var(--family-size,var(--preview-size))}
@media(max-width:1050px){.path-tools span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}}
@media(max-width:520px){.outline-toolbar{gap:4px}.path-actions{padding-inline-start:3px}.outline-toolbar button,.outline-help summary{padding:0 4px;min-width:26px}.outline-inspector{gap:4px 8px}}

@media(max-width:520px){
 .app-header{height:auto;min-height:64px;padding-block:6px}
 .app-header .header-actions{min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:2px}
}

/* Alongside the outline, the existing Text and Specimens panels become proofs. */
#glyph-proof-switch:not([hidden]){display:flex;align-items:stretch;gap:20px;height:56px;position:sticky;top:0;z-index:6;margin:0 calc(-1 * var(--sidebar-pad));padding:0 var(--sidebar-pad);background:var(--surface);border-bottom:1px solid var(--chrome-line)}
#glyph-proof-switch button{position:relative;background:transparent;color:var(--muted);border:0;border-radius:0;padding:0;font:inherit;font-size:14px}
#glyph-proof-switch button[aria-pressed=true]{color:var(--ink);box-shadow:inset 0 -2px var(--ink)}
.is-editing-glyph .sidebar-sticky{top:56px}
.glyph-split{grid-template-columns:minmax(280px,.85fr) minmax(0,1.25fr)}
#glyph-proof-size:not([hidden]){display:flex;padding:20px 0 14px;justify-content:flex-end}
#glyph-proof-size .size-control{min-width:0;margin:0;align-items:center;display:flex;gap:8px}
#glyph-proof-size input{width:84px}
#glyph-proof-content{--canvas-ink:var(--ink);--canvas-muted:var(--muted);--canvas-line:var(--line);color:var(--ink);padding:4px 0 24px;min-width:0}
#glyph-proof-content #specimen{margin:16px 0 0;min-height:180px;height:clamp(200px,48vh,620px);resize:vertical;overflow:auto}
#glyph-proof-content #specimens-panel .type-row,#glyph-proof-content .reading-row{grid-template-columns:minmax(0,1fr);gap:9px}
#glyph-proof-content .reading:last-child{grid-column:auto}
#glyph-proof-content .display-line,#glyph-proof-content .alphabet{overflow-wrap:anywhere}
.glyph-split .sidebar{overscroll-behavior:contain}
@media(max-width:760px){
 .workspace.is-editing-glyph{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(275px,58%) minmax(170px,1fr);height:calc(100svh - 64px);min-height:490px;padding:0;gap:0}
 .is-editing-glyph main{height:auto;min-height:0;grid-row:1}
 .is-editing-glyph .sidebar{grid-row:2;min-height:0;overflow:auto;border-top:1px solid var(--line);padding-bottom:12px}
 .is-editing-glyph #canvas{padding:10px 12px}
 .is-editing-glyph #outline-canvas{height:clamp(145px,24svh,250px)}
 .is-editing-glyph #glyph-panel .character-heading{margin-bottom:8px}
 #glyph-proof-switch:not([hidden]){height:42px}
 .is-editing-glyph .sidebar-sticky{top:42px}
 #glyph-proof-size:not([hidden]){padding:8px 0 4px}
 #glyph-proof-content #specimen{min-height:100px;height:160px}
}
/* The selected face shares the toolbar with the tabs and zoom. The native
   select supplies keyboard and touch input; the visible name sizes the control. */
.toolbar-style:not([hidden]){position:relative;display:inline-flex;align-items:center;flex:0 1 auto;gap:4px;min-width:0;max-width:170px;height:32px;margin-inline-start:auto;padding:0 6px;border-radius:5px;color:var(--ink);font-size:13px;line-height:1.2}
.toolbar-style:not([hidden])+.preview-appearance{margin-inline-start:0}
.toolbar-style:hover,.toolbar-style:focus-within{background:var(--hover)}
#glyph-proof-short{display:none}
#glyph-proof-label,#glyph-proof-short{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.toolbar-style .ui-icon{width:12px;height:12px;flex:none;color:var(--muted)}
#glyph-proof-weight{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;border:0;border-radius:inherit;background:transparent;color:transparent;appearance:none;cursor:pointer;font:inherit}
#glyph-proof-weight option{color:var(--ink);background:var(--surface)}
@supports (appearance:base-select){
 #glyph-proof-weight,#glyph-proof-weight::picker(select){appearance:base-select}
 #glyph-proof-weight::picker-icon{display:none}
 #glyph-proof-weight::picker(select){width:max-content;min-width:112px;max-width:calc(100vw - 16px);max-height:min(48vh,320px);margin-block:4px;padding:4px;overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);box-shadow:0 4px 16px #0002;font:inherit}
 #glyph-proof-weight option{min-height:30px;padding:4px 8px;gap:7px;border-radius:4px}
 #glyph-proof-weight option:checked{background:var(--selected);color:var(--selection-ink)}
 #glyph-proof-weight option:hover,#glyph-proof-weight option:focus-visible{background:var(--hover)}
}
#glyph-proof-weight:focus-visible{outline-offset:0}
@container(max-width:820px){
 .toolbar-style.long-style #glyph-proof-label{display:none}
 .toolbar-style.long-style #glyph-proof-short{display:inline}
}
@container(max-width:720px){
 .toolbar-style:not([hidden]){max-width:145px;font-size:12px}
 .view-toolbar:has(.toolbar-style:not([hidden])) .tabs{flex:0 0 auto}
}
@container(max-width:480px){
 .view-toolbar:has(.toolbar-style:not([hidden])){gap:4px;padding-inline:10px}
 .view-toolbar:has(.toolbar-style:not([hidden])) .tabs{gap:8px}
 .toolbar-style:not([hidden]){max-width:120px;padding-inline:3px;gap:2px}
}
@container(max-width:350px){
 .view-toolbar:has(.toolbar-style:not([hidden])){gap:3px;padding-inline:7px}
 .toolbar-style:not([hidden]){padding-inline:1px;font-size:11px}
 .toolbar-style .ui-icon{width:10px;height:10px}
 .toolbar-style #glyph-proof-label{display:none}
 .toolbar-style #glyph-proof-short{display:inline}
 .view-toolbar:has(.toolbar-style:not([hidden])) .tabs{gap:5px}
}
.family-italic-controls{display:flex;align-items:center;gap:24px;min-height:36px}
.family-italic-controls label{display:inline-flex;align-items:center;gap:7px;font-size:14px}
.family-italic-controls label[hidden]{display:none}
.family-italic-controls input[type=checkbox]{accent-color:var(--ink)}
#family-italic-angle{width:64px;padding:4px 6px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:4px;font:inherit}


.canvas:has(#glyph-panel:not([hidden])){overflow-anchor:none}

#glyph-panel .character-heading{flex-wrap:wrap;gap:6px 16px}
#glyph-panel #outline-masters{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 9px;margin-inline-start:auto;color:var(--muted);font-size:12px}
#outline-masters[hidden],#glyph-panel #outline-masters[hidden]{display:none}
#outline-master-styles{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
#outline-master-styles button,#outline-masters .text-button{font:inherit;white-space:nowrap}
#outline-master-styles button{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:3px 6px;border:0;border-radius:4px;background:transparent;color:var(--muted);cursor:pointer}
#outline-master-styles button::before{content:'';width:5px;height:5px;border:1px solid currentColor;border-radius:50%;box-sizing:border-box}
#outline-master-styles button[data-pinned=true]::before{background:currentColor}
#outline-master-styles button[aria-pressed=true]{background:var(--selected);color:var(--selection-ink)}
#outline-master-styles button:hover{background:var(--hover)}
#outline-masters .text-button{color:var(--ink);padding:3px 5px}
/* Selection handles after Hey Transform: 1px frame, 20px icon buttons, little circles. */
.frame-boundary,.frame-line{fill:none;stroke:var(--focus);stroke-width:1;pointer-events:none}
.frame-hit{fill:transparent;stroke:none;pointer-events:all}
.frame-edge-hit{fill:none;stroke:transparent;stroke-width:9;pointer-events:stroke}
.frame-dot{fill:var(--surface);stroke:var(--focus);stroke-width:1;pointer-events:none;transition:fill .12s ease}
.frame-button-face{fill:var(--focus);stroke:var(--surface);stroke-width:1;pointer-events:all;transition:fill .12s ease}
.frame-icon,.part-handle-icon,.frame-pivot{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.frame-icon{stroke:var(--surface)}
.frame-pivot{stroke:var(--focus);transition:stroke .12s ease}
.selection-frame [data-grip]:hover .frame-dot{fill:var(--focus)}
.selection-frame [data-grip]:hover .frame-button-face{fill:var(--selection-ink)}
.selection-frame [data-grip]:active .frame-button-face{fill:var(--ink)}
.selection-frame [data-grip]:hover .frame-pivot{stroke:var(--selection-ink)}
@media(max-width:760px){#glyph-panel #outline-masters{order:1;width:100%;margin:0}}

#edit-zoom-value{inline-size:8ch;font-variant-numeric:tabular-nums;white-space:nowrap}
.serif-form-proof{color:inherit;font-size:12px;justify-self:start;text-decoration:underline;text-underline-offset:3px}
/* Serif: styles and form artwork. Masks keep generated outlines theme-aware. */
.control .serif-form-choices{grid-row:2/5;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
.control .serif-form-choices button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:auto;min-height:0;padding:6px 4px;font-size:10.5px;line-height:1.2;text-align:center}
.serif-form-art,.serif-style-art,.serif-style-sample{display:block;background:currentColor;mask-image:var(--art);mask-repeat:no-repeat;mask-position:center;mask-size:contain}
.serif-form-art{flex:0 1 36px;width:100%;height:36px;min-height:20px}
.serif-style-card{grid-column:1/-1;padding:14px 16px 16px;border-radius:16px;background:var(--tile)}
.serif-style-title{margin:0 0 10px;font-size:12px;font-weight:500}
.serif-style-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:6px}
.serif-style-row button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:10px 4px 8px;border:0;border-radius:10px;background:var(--surface);color:var(--ink);font-size:11px;line-height:1.2;text-align:center;cursor:pointer}
.serif-style-row button:hover{background:var(--hover)}
.serif-style-row button[aria-pressed=true]{background:var(--selected);color:var(--selection-ink)}
.serif-style-row button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.serif-style-art{width:100%;height:38px}
#new-typeface-dialog.is-serif-step{width:min(760px,calc(100vw - 32px))}
.serif-style-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.serif-style-option{min-width:0}
.serif-style-option:first-child{grid-row:span 2}
.serif-style-option:first-child .serif-style-sample{height:190px}
.base-sample.serif-style-sample{width:100%;height:76px;mask-position:left center;mask-image:var(--art)}
.serif-style-back{margin-top:14px}
@media(max-width:620px){.serif-style-options{grid-template-columns:repeat(2,minmax(0,1fr))}.serif-style-option:first-child{grid-row:auto;grid-column:1/-1}.serif-style-option:first-child .serif-style-sample{height:110px}}


/* Retired Serif controls stay off the panel unless the open design uses one. */
.control.retired:not(.in-use){display:none}
.control.inactive .control-example,.control.inactive .control-slider-row{opacity:.35}
.part-handle{cursor:grab}.part-handle[data-active=true]{cursor:grabbing}.part-handle-stem{stroke:#fe7046;stroke-width:1}.part-handle-grip{fill:#fe7046;stroke:#482b16;stroke-width:1;transition:fill .12s ease,stroke .12s ease}.part-handle-icon{stroke:#482b16}.part-handle:hover .part-handle-grip{stroke:#ffe1c9}.part-handle[data-active=true] .part-handle-grip{fill:#e87520}.part-handle-target{fill:transparent}

/* Own and inherited values. A card says who keeps their own value; in a
   selection it marks the selected glyph's own value against the typeface. */
.control-title{display:flex;align-items:center;gap:6px;min-width:0}
.control-title label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.own-badge{flex:none;max-width:110px;height:16px;padding:0 6px;border:0;border-radius:6px;background:color-mix(in srgb,var(--range-fill) 42%,var(--surface));color:var(--accent);font-size:10px;line-height:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.own-badge:hover{background:var(--range-fill)}
.own-badge:disabled{cursor:default;opacity:1}
.own-badge:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
:root[data-theme=dark] .own-badge{background:var(--range-fill);color:#e5efd8}
.control[data-changed=false] .parameter-reset{visibility:hidden}
.control[data-own=true] .value-input{color:var(--accent);font-weight:600}
:root[data-theme=dark] .control[data-own=true] .value-input{color:#c4d6ad}

/* The whole-typeface reset closes the panel, away from the scope and undo. */
.panel-footer{display:flex;justify-content:center;padding:28px 0 8px}
.panel-footer .reset-current{font-size:12px;color:var(--muted);padding:6px 10px;border-radius:8px}
.panel-footer .reset-current:hover{color:var(--ink);background:var(--hover)}
.panel-footer .reset-current.reset-armed{color:#b3261e;background:color-mix(in srgb,#b3261e 10%,var(--surface))}
:root[data-theme=dark] .panel-footer .reset-current.reset-armed{color:#ffb4ab}
.serif-style-note{margin:8px 0 0;font-size:10px;line-height:14.5px;color:var(--muted)}
.family-preview-heading #edit-family{flex:none;padding:8px 12px;font-size:12px;background:var(--canvas-line)}

/* Edit glyph: this glyph in every family style. */
.glyph-weights{margin:8px 0 20px;padding:14px 0 0;border-top:1px solid var(--canvas-line)}
.glyph-weights-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.glyph-weights-head h3{margin:0;font-size:12px;font-weight:500;color:var(--canvas-ink)}
#glyph-weights-note{font-size:11px;color:var(--canvas-muted)}
.glyph-weight-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.glyph-weight{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 4px 8px;border:0;border-radius:12px;background:var(--tile);color:var(--canvas-ink);cursor:pointer}
.glyph-weight:hover{background:var(--hover)}
.glyph-weight[aria-pressed=true]{background:var(--selected);color:var(--selection-ink);box-shadow:inset 0 0 0 1.5px var(--accent)}
.glyph-weight:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.glyph-weight-sample{font-family:var(--generated),serif;font-size:44px;line-height:1.15;height:52px;font-feature-settings:normal}
.glyph-weight small{font-size:10px;line-height:1.2;color:inherit;opacity:.75;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.glyph-weight{position:relative}
.glyph-weight[data-pinned=true]:after{content:'';position:absolute;top:7px;right:8px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
/* The strip below the editor picks the style; the heading keeps only Pin current. */
#glyph-panel:has(#glyph-weights:not([hidden])) #outline-master-styles{display:none}
/* A grip names its part while it is pointed at or dragged. */
.part-handle-label{font-size:11px;font-weight:500;fill:var(--ink);paint-order:stroke;stroke:var(--surface);stroke-width:3px;opacity:0;pointer-events:none;transition:opacity 120ms ease}
.part-handle:hover .part-handle-label,.part-handle[data-active=true] .part-handle-label{opacity:1}

/* Layout, 12 Nov 2026: the view tabs head the sidebar and Edit typeface with Apply
   changes to heads the canvas. Glyphs is one view: the glyph set above, the Text or
   Specimens proof or the parameters below it, and the outline editor beside them. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sidebar-sticky{justify-content:flex-start}
.sidebar-sticky .tabs{display:flex;align-items:stretch;gap:20px;height:56px;min-height:56px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.sidebar-sticky .tabs::-webkit-scrollbar{display:none}
.sidebar-sticky .tabs button{font-size:14px;white-space:nowrap}
.toolbar-scope{display:flex;align-items:center;gap:12px;flex:0 1 auto;min-width:0}
.toolbar-scope h1{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;line-height:20px;font-weight:500;color:var(--ink);white-space:nowrap}
.toolbar-scope .scope-card{flex:none;flex-wrap:nowrap}
.sidebar-lower{min-width:0}
/* Glyphs: two halves that scroll on their own. */
.workspace.is-editing-glyph .sidebar{display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.is-editing-glyph .sidebar-sticky{position:relative;top:0;flex:none;margin-bottom:0}
#characters-panel{--canvas-bg:var(--surface);--canvas-ink:var(--ink);--canvas-muted:var(--muted);--canvas-line:var(--line);color:var(--ink)}
.is-editing-glyph #characters-panel{flex:1 1 50%;min-height:0;overflow:auto;margin:0 calc(-1 * var(--sidebar-pad));padding:0 var(--sidebar-pad) 16px;border-bottom:1px solid var(--chrome-line);overscroll-behavior:contain;scrollbar-width:thin}
#characters-panel .glyph-heading{top:0;background:var(--surface);flex-wrap:wrap;gap:8px 12px;padding:12px 0;margin:0 0 12px}
#characters-panel .glyph-heading .grid-actions{flex:1 1 auto;justify-content:flex-start}
#characters-panel .glyph-heading .glyph-filter{margin-left:auto}
.is-editing-glyph .sidebar-lower{flex:1 1 50%;min-height:0;overflow:auto;margin:0 calc(-1 * var(--sidebar-pad));padding:0 var(--sidebar-pad) 28px;overscroll-behavior:contain;scrollbar-width:thin}
.is-editing-glyph #glyph-proof-switch:not([hidden]){top:0}
/* The outline editor fills the canvas; its readouts and spacing sit on it. */
.is-editing-glyph #canvas{display:flex;flex-direction:column;padding-top:18px;padding-bottom:18px}
#glyph-panel:not([hidden]){flex:1;display:flex;flex-direction:column;min-height:0}
#glyph-panel #outline-editor{flex:1;display:flex;flex-direction:column;min-height:0}
#glyph-panel .character-heading{display:flex;align-items:center;flex-wrap:nowrap;gap:12px;min-height:40px;margin:0 0 10px}
#glyph-panel .character-heading h2{flex:none;white-space:nowrap}
#glyph-panel #glyph-code{flex:none;margin-left:auto}
.outline-stage{position:relative;flex:1;min-height:clamp(360px,62vh,900px)}
.outline-stage #outline-canvas{position:absolute;inset:0;width:100%;height:100%}
.outline-stage .outline-inspector{position:absolute;top:10px;left:12px;right:12px;min-height:0;border:0;gap:8px 14px;flex-wrap:nowrap;pointer-events:none}
.outline-stage .outline-inspector>*{pointer-events:auto}
.outline-stage #outline-status{color:var(--muted)}
.outline-stage .outline-coordinates{margin-left:auto}
.outline-stage .outline-coordinates input{background:color-mix(in srgb,var(--surface) 88%,transparent)}
.outline-stage #glyph-spacing-frame{position:absolute;left:12px;right:12px;bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:0;border:0;pointer-events:none}
.outline-stage #glyph-spacing-frame>*{pointer-events:auto}
.outline-stage #glyph-spacing-frame .bearing-control{padding:2px 4px;border-radius:8px;background:color-mix(in srgb,var(--surface) 88%,transparent)}
.outline-stage #reset-spacing{font-size:11px}
/* Across the family, reduced to fit the glyph's own line. */
#glyph-panel .character-heading .glyph-weights{flex:0 1 auto;min-width:0;margin:0;padding:0;border:0;overflow-x:auto;scrollbar-width:none}
#glyph-panel .character-heading .glyph-weights::-webkit-scrollbar{display:none}
#glyph-panel .character-heading .glyph-weight-list{display:flex;flex-wrap:nowrap;gap:4px}
#glyph-panel .character-heading .glyph-weight{flex:none;flex-direction:row;align-items:center;gap:5px;height:32px;padding:0 9px 0 7px;border-radius:9px}
#glyph-panel .character-heading .glyph-weight-sample{font-size:20px;line-height:24px;height:24px}
#glyph-panel .character-heading .glyph-weight small{font-size:10px}
#glyph-panel .character-heading .glyph-weight[data-pinned=true]:after{top:4px;right:4px}
@media(max-width:760px){
 .outline-stage{min-height:clamp(220px,40svh,420px)}
}
.view-toolbar .toolbar-scope{flex:none}
#characters-panel .glyph-heading .size-control{display:flex;align-items:center;gap:6px;margin:0;font-size:11px;color:var(--muted);white-space:nowrap}
#characters-panel .glyph-heading .size-control input{width:72px}
#characters-panel .glyph-heading .size-control output{min-width:24px;text-align:right}
/* With the family on the glyph's line, its chips pick the style; only Pin current stays beside them. */
#glyph-panel .character-heading #outline-masters{flex:none;white-space:nowrap}
#glyph-panel:has(#glyph-weights:not([hidden])) #outline-masters>span{display:none}
#glyph-panel .character-heading .glyph-weight{padding:0 8px 0 6px;gap:4px}
/* On a phone the sidebar is one column under the editor: the glyph set, then the rest, scrolled together. */
@media(max-width:760px){
 .workspace.is-editing-glyph .sidebar{display:block;overflow:auto}
 .is-editing-glyph #characters-panel{max-height:46svh}
 .is-editing-glyph .sidebar-lower{overflow:visible;margin:0;padding:0}
}

/* ───── Panels, 15 November 2026 ─────
   After Hey Transform V1: the top bar sits on the workspace with no frame;
   below it, rounded panels separated by an 8px gutter do the work that rules
   and borders did. The view toolbar is one framed row across the width. Each
   panel scrolls on its own, with thin scrollbars, and its edges fade only
   while there is more to scroll that way (data-edge-fade, set from app.js).
   Light mode keeps a white canvas and pale, borderless tiles inside panels. */
:root{--workspace:#f7f7f5;--panel:var(--surface);--panel-radius:14px;--gutter:8px;--panel-pad:18px;--scrollbar:color-mix(in srgb,var(--ink) 22%,transparent)}
:root[data-theme=dark]{--workspace:#1f211c}
@supports (corner-shape:squircle){:root{--panel-radius:22px}.panel,.glyph-cell,.glyph-tile{corner-shape:squircle}}
html,body{background:var(--workspace)}
[data-edge-fade]{--fade-size:32px;scrollbar-width:thin;scrollbar-color:var(--scrollbar) transparent;
 -webkit-mask-image:linear-gradient(to bottom,rgb(0 0 0/calc(1 - var(--fade-top,0))) 0,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),rgb(0 0 0/calc(1 - var(--fade-bottom,0))) 100%);
 mask-image:linear-gradient(to bottom,rgb(0 0 0/calc(1 - var(--fade-top,0))) 0,#000 var(--fade-size),#000 calc(100% - var(--fade-size)),rgb(0 0 0/calc(1 - var(--fade-bottom,0))) 100%)}
[data-edge-fade]::-webkit-scrollbar{width:8px;height:8px}
[data-edge-fade]::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
[data-edge-fade]::-webkit-scrollbar-track{background:transparent}

/* The account in the top bar once signed in: it opens Account, with Sign out. */
.account-avatar{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--ink);color:var(--surface);font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:transform .3s cubic-bezier(.65,0,.35,1)}
.account-avatar[hidden]{display:none}
.account-avatar:hover,.account-avatar:focus-visible{transform:scale(1.06)}
.account-dialog .account-sign-out{margin-top:12px}

@media(min-width:761px){
 .app-header{height:56px;min-height:56px;border:0!important;background:transparent;padding:0 calc(var(--gutter) + 14px)}
 .workspace,.workspace.is-editing-glyph{display:grid;grid-template-columns:clamp(380px,32vw,540px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:var(--gutter);padding:0 var(--gutter) var(--gutter);height:calc(100dvh - 56px);min-height:0;background:var(--workspace)}
 /* The toolbar row: tabs, what is being edited, and the view options, in one frame. */
 .workspace>.workbar{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:20px;height:52px;min-height:52px;padding:0 var(--panel-pad);border:0!important;border-radius:var(--panel-radius);background:var(--panel);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
 .workspace>.workbar::-webkit-scrollbar{display:none}
 .workbar .tabs{height:100%;flex:none;gap:18px;border:0}
 .workbar .toolbar-scope{flex:none}
 .workbar .preview-appearance,.workbar .size-control:last-child{margin-left:auto}
 .sidebar,.workspace.is-editing-glyph .sidebar{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:var(--gutter);min-height:0;height:auto;padding:0!important;border:0!important;background:transparent;overflow:hidden}
 main,.is-editing-glyph main{grid-column:2;grid-row:2;min-height:0;height:auto;border-radius:var(--panel-radius);background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
 #canvas{flex:1;min-height:0;overflow:auto;border:0}
 /* The parameters, or in Glyphs the Text / Parameters panel. */
 .sidebar-lower,.is-editing-glyph .sidebar-lower{flex:1 1 0;min-height:0;display:flex;flex-direction:column;margin:0!important;padding:0!important;border-radius:var(--panel-radius);background:var(--panel);overflow:hidden}
 .sidebar-lower>.panel-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--panel-pad);overscroll-behavior:contain}
 #glyph-proof-switch:not([hidden]){position:static;flex:none;display:flex;align-items:center;gap:18px;height:48px;margin:0;padding:0 var(--panel-pad);border:0!important;background:transparent}
 #glyph-proof-switch button{height:100%}
 #glyph-proof-switch #glyph-proof-size:not([hidden]){margin-left:auto;display:flex;align-items:center}
 #glyph-proof-size .size-control{margin:0;gap:8px;font-size:12px}
 #glyph-proof-size .size-control input{width:96px}
 /* The glyph set: a fixed heading, then rounded tiles with a gap, no rules. */
 #characters-panel:not([hidden]),.is-editing-glyph #characters-panel{flex:1 1 0;min-height:0;display:flex;flex-direction:column;margin:0!important;padding:0!important;border:0!important;border-radius:var(--panel-radius);background:var(--panel);overflow:hidden}
 #characters-panel .glyph-heading{position:static;display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin:0;padding:12px var(--panel-pad) 10px;border:0!important;background:transparent;font-size:12px;min-width:0}
 #characters-panel .glyph-heading .glyph-filter{order:-2;margin:0;flex:none}
 #characters-panel .glyph-heading #character-total{order:-1;flex:none;color:var(--muted)}
 #characters-panel .glyph-heading .grid-actions{order:0;flex:1 1 auto;justify-content:flex-end;gap:10px;min-width:0;white-space:nowrap}
 #characters-panel .glyph-heading #edit-selected:disabled{display:none}
 #characters-panel .glyph-heading .size-control{order:1;flex:none;font-size:0;gap:6px}
 #characters-panel .glyph-heading .size-control output{font-size:11px}
 #characters-panel .glyph-board{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:2px var(--panel-pad) var(--panel-pad);overscroll-behavior:contain}
 #characters-panel .glyph-grid{gap:6px;border:0}
 #characters-panel .glyph-cell{border:0;border-radius:10px;background:var(--tile)}
 #characters-panel .glyph-cell:hover{background:var(--hover)}
 #characters-panel .glyph-cell[aria-pressed=true]{background:var(--selected);box-shadow:inset 0 0 0 1.5px var(--accent)}
 /* The glyph editor fills its panel; the glyph and its tools share one line. */
 .is-editing-glyph #canvas{display:flex;flex-direction:column;padding:14px var(--panel-pad) var(--panel-pad)}
 #glyph-panel:not([hidden]){flex:1;min-height:0;display:flex;flex-direction:column}
 #glyph-panel #outline-editor{flex:1;min-height:0;display:flex;flex-direction:column}
 #glyph-panel .character-heading{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;min-height:40px;margin:0 0 10px;border:0}
 #glyph-panel .character-heading h2{flex:none;margin:0;white-space:nowrap}
 #glyph-panel .character-heading .outline-toolbar{flex:1 1 auto;min-width:0;padding:0;margin:0;border:0!important;flex-wrap:nowrap}
 #glyph-panel .outline-stage{flex:1;min-height:300px;border-radius:12px}
 #characters-panel .glyph-heading .grid-actions{justify-content:flex-start;margin-left:4px}
 /* A narrow glyph panel drops the count, then shortens the size slider, instead of colliding. */
 #characters-panel{container-type:inline-size}
 #characters-panel .glyph-heading .size-control input{width:64px}
 @container (max-width:440px){#characters-panel .glyph-heading #character-total{display:none}}
 @container (max-width:380px){#characters-panel .glyph-heading .size-control input{width:44px}#characters-panel .glyph-heading .size-control output{display:none}}
 /* Narrower editors keep the glyph and its tools on one line: tool names give way to their icons. */
 #glyph-panel{container-type:inline-size}
 @container (max-width:780px){#glyph-panel .path-tools button span{display:none}}
 /* Text presets stay one row in a narrow panel and scroll sideways rather than stacking. */
 .sidebar .text-presets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
 .sidebar .text-presets::-webkit-scrollbar{display:none}
 .sidebar .text-presets button{flex:none}
 main>.statusbar{border-top:0!important;background:transparent;padding-inline:var(--panel-pad)}
 /* Fewer rules: panels already separate these. */
 .sidebar-sticky,.view-toolbar,.glyph-heading,.outline-toolbar,.panel-footer{border-bottom:0!important}
}

/* ───── Interface after Hey Transform, 15 November 2026 ─────
   Hey Transform's hierarchy, type and buttons, in Tremendo's colours.
   Where things live:
   - Top bar (one panel): wordmark / typeface name on the left; the view
     switch (Family, Text, Specimens, Glyphs) in the middle; history (undo,
     redo, versions) as small icon buttons, the file actions (My typefaces,
     New typeface, Export as an icon), a sun / moon switch and the account.
     Icon buttons show a quick tooltip.
   - Panels resize from their gutters: the side panel's width (shared by
     every view) and, in Glyphs, the glyph set's height.
   - Left panel: a 14px title with its action; full-width tabs below it.
   - Main panel header: what is edited and the scope on the left, the style
     menu and the view options on the right.
   - How the canvas is viewed (Size, Zoom or Scale, Outline) sits with it:
     beside the view switch, or on the glyph's tool line in Glyphs.
   - Glyph editor: the bearings (LB, RB) and the glyph in each weight share
     the bottom line, the weights centred.
   Type: Tremendo Sans at Hey Transform's sizes. Controls 11px regular,
   field labels 10px, panel titles 14px semibold, the typeface name 13px.
   Buttons: icon buttons 28px and quiet; file actions 32px with a pale fill,
   an icon and a label; tabs on a pale track whose chosen item is a
   darker fill, never a raised white chip.
   Slider cards keep their concept (title, reference glyph, help, slider,
   value, reset); the glyph editor itself is unchanged. */
:root{--control:#f3f3f0;--control-hover:#ececE8;--control-strong:#e5e5e0;--control-ink:#242621;--secondary-ink:#62655e;--tertiary-ink:#a2a59c;
 --h-icon:28px;--h-tab:26px;--h-track:32px;--h-button:34px;--h-field:28px;--r-control:10px;--r-tab:8px;--r-icon:7px;--r-card:12px;
 --chrome-size:11px;--label-size:10px;--heading-h:52px;--pad-x:18px;--pad-end:12px;--sidebar-w:clamp(380px,32vw,540px)}
:root[data-theme=dark]{--control:#2c2f29;--control-hover:#343730;--control-strong:#41453c;--control-ink:#fafaf7;--secondary-ink:#b0b4a9;--tertiary-ink:#7a7e73}
@supports (corner-shape:squircle){:root{--r-control:15px;--r-tab:12px;--r-icon:10px;--r-card:18px}}
.ui-icon{flex:none}

/* ── Buttons ── */
/* Icon buttons: quiet until hovered. */
.topbar .history-actions .quiet{display:inline-grid;place-items:center;width:var(--h-icon);height:var(--h-icon);padding:0;border:0;border-radius:var(--r-icon);background:transparent;color:var(--secondary-ink)}
.topbar .history-actions .quiet:hover:enabled{background:var(--control);color:var(--control-ink)}
.topbar .history-actions .quiet:disabled{color:var(--tertiary-ink);opacity:.7}
.topbar .history-actions .ui-icon{width:14px;height:14px}
.topbar #versions-open span{display:none}
/* File actions in the top bar: pale fill, icon then label; Export the accent. */
.topbar .file-actions{display:flex;align-items:center;gap:6px}
.topbar .file-actions .quiet{display:inline-flex;align-items:center;gap:7px;min-height:0;height:32px;padding:0 12px;border:0;border-radius:var(--r-control);background:var(--control);color:var(--control-ink);font-size:var(--chrome-size);font-weight:400;line-height:1;white-space:nowrap}
.topbar .file-actions .quiet:hover:enabled{background:var(--control-hover)}
.topbar .file-actions .quiet:disabled{opacity:.45}
.topbar .file-actions .ui-icon{width:14px;height:14px}
.topbar .export-menu summary.icon-only{width:32px;padding:0!important;justify-content:center}
/* Quick tooltips for icon buttons: shown after a short pause, below the button. */
.topbar [data-tip]{position:relative}
.topbar [data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 8px);left:50%;z-index:70;padding:5px 8px;border-radius:var(--r-tab);background:var(--control-ink);color:var(--panel);font-size:var(--label-size);font-weight:400;line-height:1.2;letter-spacing:0;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-2px);transition:opacity .1s ease,transform .1s ease,visibility 0s linear .1s}
.topbar [data-tip]:hover::after,.topbar [data-tip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .14s ease .18s,transform .14s ease .18s,visibility 0s linear .18s}
.topbar .export-menu[open] [data-tip]::after{display:none}
.topbar .file-actions .quiet[data-tip]:has(>span)::after{display:none}
.topbar [data-tip]:last-child::after{left:auto;right:0;transform:translateY(-2px)}
.topbar [data-tip]:last-child:hover::after{transform:none}
.topbar .new-font-button{flex-direction:row-reverse}
.topbar .export-menu summary{display:inline-flex;align-items:center;gap:7px;min-height:0;height:32px;padding:0 12px;border-radius:var(--r-control);font-size:var(--chrome-size);font-weight:400;line-height:1}
.topbar .export-menu summary .ui-icon{width:14px;height:14px}
/* Outline: a small toggle, darker when on. */
.preview-appearance .tool-button{display:inline-flex;align-items:center;min-height:0;height:var(--h-field);padding:0 10px;border:0;border-radius:var(--r-tab);background:var(--control);color:var(--control-ink);font-size:var(--chrome-size);font-weight:400;line-height:1;white-space:nowrap}
.preview-appearance .tool-button:hover{background:var(--control-hover)}
.preview-appearance .tool-button[aria-pressed=true]{background:var(--control-strong)}
.preview-appearance .size-control{margin:0;gap:8px;font-size:var(--chrome-size);color:var(--secondary-ink)}
.preview-appearance .size-control input{width:96px;height:var(--h-field)}
.preview-appearance .size-control output{width:auto;min-width:4ch;text-align:left;color:var(--control-ink);font-variant-numeric:tabular-nums}
.preview-appearance .canvas-options{gap:6px}
.preview-options-toggle{place-items:center;width:var(--h-field);height:var(--h-field);min-height:0;padding:0;border:0;border-radius:var(--r-tab);background:var(--control);color:var(--secondary-ink)}
.preview-options-toggle .ui-icon{width:14px;height:14px}
/* The status line: a live region; only loading and errors show. */
main{position:relative}
.status-line{position:absolute;left:50%;bottom:14px;z-index:20;margin:0;padding:7px 12px;border-radius:var(--r-control);background:var(--control-strong);color:var(--control-ink);font-size:var(--chrome-size);white-space:nowrap;transform:translateX(-50%);pointer-events:none}
.status-line:not(.is-visible){position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%)}

/* ── Tabs: a pale track, the chosen item a darker fill ── */
.app-tabs,.segmented,.scope-options{display:flex;flex:none;align-self:center;align-items:center;gap:2px;height:var(--h-track)!important;min-height:0!important;max-width:none;overflow:visible;padding:3px!important;border:0;border-radius:var(--r-control);background:var(--control)}
.app-tabs button,.segmented>button,.scope-option span{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--h-tab)!important;padding:0 10px;border:0;border-radius:var(--r-tab);background:transparent!important;color:var(--secondary-ink)!important;font-size:var(--chrome-size);font-weight:400;line-height:1;box-shadow:none!important;white-space:nowrap}
.app-tabs button::after{display:none}
.app-tabs button .ui-icon,.scope-option .ui-icon{width:14px;height:14px}
.app-tabs button:hover,.segmented>button:hover,.scope-option:hover span{color:var(--control-ink)!important}
.app-tabs button[aria-selected=true],.segmented>button[aria-pressed=true],.scope-option input:checked+span{background:var(--control-strong)!important;color:var(--control-ink)!important}
.scope-option input:disabled+span{opacity:.5}
.scope-option .scope-icon{display:none}
.scope-option b{font-weight:inherit}
/* The theme: a small switch showing both choices. */
.topbar .theme-switch{display:inline-flex;align-items:center;gap:2px;width:auto;height:var(--h-icon);padding:3px;border:0;border-radius:var(--r-icon);background:var(--control);color:var(--secondary-ink);cursor:pointer}
.topbar .theme-switch .theme-option{display:inline-grid;place-items:center;width:28px;height:22px;border:0;border-radius:calc(var(--r-icon) - 3px);background:transparent}
.topbar .theme-switch .theme-option .ui-icon{display:block!important;width:13px;height:13px}
.topbar .theme-switch[aria-pressed=false] .is-light,.topbar .theme-switch[aria-pressed=true] .is-dark{background:var(--control-strong);color:var(--control-ink)}

/* ── Panel headings: 52px, 14px title, the action at the end ── */
.panel-heading{display:flex;align-items:center;gap:8px;flex:none;height:var(--heading-h);padding:0 var(--pad-end) 0 var(--pad-x);color:var(--ink)}
.panel-heading>.ui-icon{width:14px;height:14px;color:var(--secondary-ink)}
.panel-heading strong{font-size:14px;font-weight:600;letter-spacing:-.01em}
.panel-heading .icon-button{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:var(--h-icon);height:var(--h-icon);padding:0 7px;border:0;border-radius:var(--r-icon);background:transparent;color:var(--secondary-ink);font-size:var(--chrome-size);font-weight:400;cursor:pointer;outline:0}
.panel-heading .icon-button:hover:enabled{background:var(--control);color:var(--control-ink)}
.panel-heading .icon-button:disabled{opacity:.35;cursor:default}
.panel-heading .icon-button .ui-icon{width:14px;height:14px}
.panel-heading .reset-label:empty{display:none}
.panel-heading #reset-current.reset-armed{outline:0;background:color-mix(in srgb,#b3261e 10%,var(--panel));color:#b3261e}
:root[data-theme=dark] .panel-heading #reset-current.reset-armed{color:#ffb4ab}
.is-editing-glyph .sidebar-lower .panel-heading{display:none}
.sidebar-lower>.panel-scroll{padding:0 var(--pad-x) var(--pad-x)}

/* What is being edited, in the main panel's header. */
#editor-title{display:flex;align-items:baseline;gap:4px;margin:0;font-size:12px;font-weight:400;letter-spacing:0;color:var(--secondary-ink);white-space:nowrap}
#editor-title #editor-target,#editor-title .edit-target-label{padding:0;border-radius:0;background:transparent!important;color:var(--ink)!important;font-size:12px;font-weight:500}

/* ── Test texts: quiet items, the chosen one filled ── */
.text-presets{gap:2px}
.text-presets button{height:var(--h-tab);padding:0 10px;border-radius:var(--r-tab);background:transparent;color:var(--secondary-ink);font-size:var(--chrome-size);font-weight:400;line-height:1}
.text-presets button:hover{background:var(--control);color:var(--control-ink)}
.text-presets button[aria-pressed=true]{background:var(--control-strong);color:var(--control-ink)}
#specimen-panel .text-presets{margin:0 0 4px -10px}

/* ── Slider cards: the same card, Hey Transform's type ── */
#controls{gap:8px}
#controls .control{grid-template-rows:18px 60px 30px 28px;gap:6px;padding:12px;border-radius:var(--r-card)}
#controls .control .control-head,#controls .control .control-title{min-height:18px;align-items:center}
#controls .control .control-title,#controls .control>label:first-child{font-size:12px;font-weight:400;letter-spacing:0}
#parameter-tools{padding-top:0!important}
#controls .control-example{height:60px}
/* The reference glyph fills its slot, so its guides are drawn at the slot's real size. */
#controls .control .control-preview{height:100%}
#controls .control-help{margin:0;font-size:var(--label-size);line-height:15px;height:30px;color:var(--secondary-ink)}
#controls .parameter-reset{width:22px;height:22px;color:var(--tertiary-ink);border-radius:6px}
#controls .parameter-reset:hover{background:var(--panel);color:var(--control-ink)}
#controls .value-input{font-size:var(--chrome-size)}
#controls .control .control-choices{gap:2px;height:28px;padding:2px;border-radius:var(--r-control);background:color-mix(in srgb,var(--ink) 5%,transparent)}
#controls .control .control-choices button{height:24px;padding:0 4px;border:0;border-radius:var(--r-tab);background:transparent;color:var(--secondary-ink);font-size:var(--chrome-size);font-weight:400}
#controls .control .control-choices button:hover{color:var(--control-ink)}
#controls .control .control-choices button[aria-pressed=true]{background:var(--panel);color:var(--control-ink)}

/* ── Family ── */
.family-preview-heading{gap:10px;align-items:center}
.family-text{height:40px;padding:0 12px;border-radius:var(--r-control);background:var(--control)!important;font-size:12px}
.family-text:focus{outline:none;box-shadow:inset 0 0 0 1px var(--focus)}
#family-empty{display:grid;justify-items:start;gap:12px;margin-top:20px}
#family-empty p{margin:0;font-size:12px;color:var(--secondary-ink)}
main .primary,#family-empty .primary{min-height:0;height:var(--h-button);padding:0 13px;border-radius:var(--r-control);font-size:var(--chrome-size);font-weight:400}
#edit-family{height:var(--h-button);padding:0 13px;border-radius:var(--r-control);background:var(--control);font-size:var(--chrome-size);font-weight:400}

/* ── Export menu: opens below the top bar ── */
.app-header{position:relative;z-index:50}
.topbar .export-menu{position:relative}
.topbar .export-options{top:calc(100% + 10px);bottom:auto;right:0;z-index:60;width:220px;padding:4px;border:0;border-radius:var(--r-card);background:var(--panel);box-shadow:0 10px 32px rgb(30 32 26/.12),0 0 0 .5px rgb(30 32 26/.06)}
.topbar .export-options>a,.topbar .export-options>button{height:var(--h-button);padding:0 10px;border-radius:var(--r-tab);font-size:var(--chrome-size);font-weight:400}
.topbar .export-options>a:hover,.topbar .export-options>button:hover{background:var(--control)}
.topbar .export-options small{font-size:var(--label-size);color:var(--secondary-ink);letter-spacing:.02em}

/* ── Glyph editor bottom line: LB, the weights centred, RB ── */
.outline-stage #glyph-spacing-frame{display:grid;grid-template-columns:1fr minmax(0,max-content) 1fr;align-items:center;gap:12px}
.outline-stage #glyph-spacing-frame #bearing-left{justify-self:start}
.outline-stage #glyph-spacing-frame #bearing-right{justify-self:end}
.outline-stage #glyph-spacing-frame .bearing-control{gap:4px;padding:2px 4px;font-size:var(--chrome-size);color:var(--secondary-ink)}
.outline-stage #glyph-spacing-frame .bearing-control label{margin-inline:4px;font-size:var(--chrome-size);letter-spacing:.02em}
.outline-stage #glyph-spacing-frame .bearing-control input{width:48px;height:var(--h-field);padding:0 6px;border-radius:var(--r-tab);background:var(--control);font-size:var(--chrome-size)}
.glyph-weights-bar{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;max-width:100%;padding:3px;border-radius:var(--r-control);background:color-mix(in srgb,var(--panel) 90%,transparent)}
.glyph-weights-bar:not(:has(>:not([hidden]))){display:none}
#glyph-panel .glyph-weights-bar .glyph-weights{flex:0 1 auto;min-width:0;margin:0;padding:0;border:0;overflow-x:auto;scrollbar-width:none}
#glyph-panel .glyph-weights-bar .glyph-weights::-webkit-scrollbar{display:none}
#glyph-panel .glyph-weights-bar .glyph-weight-list{display:flex;flex-wrap:nowrap;gap:2px}
#glyph-panel .glyph-weights-bar .glyph-weight{flex:none;flex-direction:row;align-items:center;gap:5px;height:var(--h-field);padding:0 8px 0 6px;border:0;border-radius:var(--r-tab);background:transparent}
#glyph-panel .glyph-weights-bar .glyph-weight[aria-pressed=true],#glyph-panel .glyph-weights-bar .glyph-weight[aria-current=true]{background:var(--control-strong)}
#glyph-panel .glyph-weights-bar .glyph-weight-sample{font-size:17px;line-height:20px;height:20px}
#glyph-panel .glyph-weights-bar .glyph-weight small{font-size:var(--label-size);color:var(--secondary-ink)}
#glyph-panel .glyph-weights-bar #outline-masters{display:flex;flex:none;align-items:center;gap:6px;margin:0;font-size:var(--chrome-size);color:var(--secondary-ink);white-space:nowrap}
#glyph-panel .glyph-weights-bar #outline-masters[hidden]{display:none}
#glyph-panel .glyph-weights-bar .text-button{height:var(--h-field);padding:0 9px;border-radius:var(--r-tab);background:var(--control);color:var(--control-ink);font-size:var(--chrome-size);font-weight:400;text-decoration:none}
#glyph-panel .glyph-weights-bar .text-button:hover{background:var(--control-hover)}
#glyph-panel .glyph-weights-bar .text-button[hidden]{display:none}

/* ── Dialogs: panel surface, 52px heading, 14px title ── */
dialog{border:0;border-radius:var(--panel-radius);background:var(--panel);box-shadow:0 16px 48px rgb(30 32 26/.16)}
dialog::backdrop{background:rgb(20 22 18/.28)}
dialog:not(.fonts-drawer){padding:0 20px 20px}
dialog .dialog-heading{height:var(--heading-h);margin:0 -8px 0 0}
dialog .dialog-heading h2,.fonts-drawer h2,.reset-dialog h2{font-size:14px;font-weight:600;letter-spacing:-.01em}
dialog .dialog-heading>.quiet.quiet{width:var(--h-icon);height:var(--h-icon);padding:0;border-radius:var(--r-icon);background:transparent;color:var(--secondary-ink)}
dialog .dialog-heading>.quiet.quiet:hover{background:var(--control);color:var(--control-ink)}
dialog .dialog-heading .ui-icon{width:14px;height:14px}
.dialog-description{font-size:12px;line-height:1.5;color:var(--secondary-ink)}
dialog .quiet,dialog button.primary,dialog .primary{min-height:0;height:var(--h-button);padding:0 13px;border-radius:var(--r-control);font-size:var(--chrome-size);font-weight:400}
dialog .quiet{background:var(--control)}
dialog .quiet:hover{background:var(--control-hover)}
.reset-dialog{padding:20px!important}.reset-dialog h2{margin:0 0 8px}.reset-dialog p{font-size:12px;line-height:1.5;color:var(--secondary-ink)}
.reset-actions{gap:6px}
.account-dialog{border:0}
.account-dialog label{font-size:var(--label-size);color:var(--secondary-ink)}
.account-dialog .account-divider{margin:14px 0;font-size:var(--label-size)}
.account-dialog #account-google{width:100%}
.account-dialog input{min-height:0;height:40px;border:0;border-radius:var(--r-control);background:var(--control);font-size:12px}
.account-dialog #account-email-label,.account-dialog p{font-size:12px}
.account-dialog .account-sign-out{margin-top:16px}
.account-dialog #account-message:empty{display:none}
#new-typeface-dialog{width:min(560px,calc(100vw - 32px));padding:0 20px 20px;border:0;border-radius:var(--panel-radius)}
#new-typeface-dialog.is-serif-step{width:min(720px,calc(100vw - 32px))}
.typeface-base-options,.serif-style-options{gap:8px}
.typeface-base,.serif-style-option{border-radius:var(--r-card)!important;background:var(--control)!important}
.typeface-base:hover,.serif-style-option:hover{background:var(--control-hover)!important}
.typeface-base strong,.serif-style-option strong{font-size:12px;font-weight:500}
.typeface-base span:not(.base-sample){font-size:var(--label-size);color:var(--secondary-ink)}
.serif-style-back{margin-top:12px}
.fonts-drawer{padding:0 18px 18px;border:0;border-radius:var(--panel-radius) 0 0 var(--panel-radius)}
.fonts-drawer .dialog-heading{height:var(--heading-h);margin:0 -8px 0 0}
.fonts-drawer .font-library-list{margin-top:4px;gap:8px}
.fonts-drawer .library-footer{gap:6px}

/* ── Versions ── */
.versions-dialog{width:min(480px,calc(100vw - 32px));max-height:min(80vh,720px)}
.versions-dialog .dialog-description{margin:0 0 14px}
.versions-list{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:52vh;overflow:auto;scrollbar-width:thin}
.version-row{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 6px 6px 12px;border-radius:var(--r-control);background:var(--control)}
.version-row>div{display:grid;gap:2px;min-width:0;flex:1}
.version-row strong{font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}
.version-row span:not(.current-font-label){font-size:var(--label-size);color:var(--secondary-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.versions-dialog .version-row .quiet{height:var(--h-field);padding:0 10px;border-radius:var(--r-tab);background:var(--panel);font-size:var(--chrome-size)}
.versions-dialog .version-row .quiet:hover{background:var(--control-strong)}
.version-row .current-font-label{margin-right:6px}
#versions-message{font-size:12px;color:var(--secondary-ink)}

/* ── Wide screens ── */
@media(min-width:761px){
 .app-header{display:block;height:auto;min-height:0;padding:var(--gutter) var(--gutter) 0!important;border:0!important;background:transparent}
 .workspace,.workspace.is-editing-glyph{grid-template-columns:var(--sidebar-w) minmax(0,1fr);grid-template-rows:minmax(0,1fr);height:calc(100dvh - var(--heading-h) - var(--gutter));padding:var(--gutter)}
 .sidebar,.workspace.is-editing-glyph .sidebar,main,.is-editing-glyph main{grid-row:1}

 /* Top bar */
 .app-header{container-type:inline-size}
 .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr);align-items:center;gap:12px;height:var(--heading-h);padding:0 var(--pad-end) 0 var(--pad-x);border-radius:var(--panel-radius);background:var(--panel)}
 .topbar .app-tabs{justify-self:center}
 .topbar-identity{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
 .topbar .wordmark{flex:none;gap:7px;align-items:baseline}
 /* The wordmark: Grapher in Tremendo Sans SemiBold (Juan, 15 Nov 2026). */
 .topbar .studio-wordmark{font-size:14px;line-height:1;font-weight:600;letter-spacing:.01em}
 .topbar .product-wordmark{font-size:12px;line-height:1;color:var(--secondary-ink)}
 .breadcrumb-slash{flex:none;font-size:13px;color:var(--tertiary-ink)}
 .topbar .family-field{flex:0 1 auto;min-width:60px;margin:0}
 .topbar .family-field input{width:24ch;max-width:100%;height:var(--h-field);margin-left:-8px;padding:0 8px;border:0;border-radius:var(--r-icon);background:transparent;color:var(--ink);font-size:13px;font-weight:600;letter-spacing:-.01em;text-overflow:ellipsis}
 .topbar .family-field input:hover{background:var(--control)}
 .topbar .family-field input:focus{background:var(--control);outline:none}
 .topbar .header-actions{display:flex;align-items:center;justify-self:end;gap:8px;margin:0}
 .topbar .history-actions{display:flex;gap:2px}
 .topbar #sign-up{height:36px;padding:0 16px;border-radius:18px;background:var(--control-strong);color:var(--control-ink);font-size:var(--chrome-size);font-weight:400}
 .topbar #sign-up:hover{background:var(--control-hover)}
 .topbar .account-avatar{width:32px;height:32px;margin-left:4px;background:var(--control-strong);color:var(--control-ink);font-size:12px;font-weight:500;corner-shape:round}
 .topbar .account-avatar:hover,.topbar .account-avatar:focus-visible{transform:none;background:var(--control-hover)}

 /* Main panel header: what is edited and the scope; the view switch at the end. */
 main>.main-toolbar{container-type:inline-size;display:flex;align-items:center;flex-wrap:nowrap;gap:12px;flex:none;height:var(--heading-h);min-height:var(--heading-h);padding:0 var(--pad-end) 0 var(--pad-x);border:0!important;background:transparent;overflow:visible}
 .main-toolbar .toolbar-scope{display:flex;align-items:center;gap:12px;flex:none;min-width:0}
 .main-toolbar .scope-card{display:flex;padding:0;border:0}
 .main-toolbar #edit-scope{margin:0;padding:0;border:0}
 /* Size, Zoom or Scale and Outline: shown inline; a small menu when the line is short. */
 .preview-appearance{position:relative;display:flex;align-items:center;flex:none;margin:0}
 .preview-options-toggle{display:none!important}
 .preview-appearance .preview-tools{position:static!important;display:flex!important;align-items:center;gap:12px;margin:0;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;transform:none!important}
 .main-toolbar .preview-appearance{margin-left:auto}
 /* The style menu and the view options stay together at the end. */
 .main-toolbar .toolbar-style:not([hidden]){margin-left:auto}
 .main-toolbar .toolbar-style:not([hidden])~.preview-appearance{margin-left:0}
 #glyph-panel .outline-toolbar .preview-appearance{margin-left:auto}
 #glyph-panel .outline-toolbar .preview-appearance+.path-view-tools{margin-left:4px}
 /* Narrower windows keep each line on one line. */
 @container (max-width:560px){.main-toolbar #editor-title{display:none}}
 /* The view options become a small menu when the header runs short; sooner when the style menu shares it. */
 @container (max-width:470px){
  .main-toolbar .preview-options-toggle{display:inline-grid!important}
  .main-toolbar .preview-appearance .preview-tools{position:absolute!important;top:calc(100% + 10px)!important;right:0;left:auto;z-index:40;display:none!important;width:max-content;padding:10px 12px!important;border-radius:var(--r-card)!important;background:var(--panel)!important;box-shadow:0 10px 32px rgb(30 32 26/.14),0 0 0 .5px rgb(30 32 26/.06)!important}
  .main-toolbar .preview-appearance.is-open .preview-tools{display:flex!important}
 }
 @container (max-width:620px){
  .main-toolbar:has(.toolbar-style:not([hidden])) .preview-options-toggle{display:inline-grid!important}
  .main-toolbar:has(.toolbar-style:not([hidden])) .preview-appearance .preview-tools{position:absolute!important;top:calc(100% + 10px)!important;right:0;left:auto;z-index:40;display:none!important;width:max-content;padding:10px 12px!important;border-radius:var(--r-card)!important;background:var(--panel)!important;box-shadow:0 10px 32px rgb(30 32 26/.14),0 0 0 .5px rgb(30 32 26/.06)!important}
  .main-toolbar:has(.toolbar-style:not([hidden])) .preview-appearance.is-open .preview-tools{display:flex!important}
 }
 @container (max-width:1020px){#glyph-panel .path-tools button span{display:none}}
 @container (max-width:820px){
  #glyph-panel .preview-options-toggle{display:inline-grid!important}
  #glyph-panel .preview-appearance .preview-tools{position:absolute!important;top:calc(100% + 8px)!important;right:0;left:auto;z-index:40;display:none!important;width:max-content;padding:10px 12px!important;border-radius:var(--r-card)!important;background:var(--panel)!important;box-shadow:0 10px 32px rgb(30 32 26/.14),0 0 0 .5px rgb(30 32 26/.06)!important}
  #glyph-panel .preview-appearance.is-open .preview-tools{display:flex!important}
 }
 /* The top bar keeps one line: the file buttons lose their labels first, then the view tabs and the product name. */
 @container (max-width:1320px){.topbar .file-actions .quiet span{display:none}.topbar .file-actions .quiet{width:32px;padding:0;justify-content:center}.topbar .file-actions .quiet[data-tip]:has(>span)::after{display:block}}
 @container (max-width:1000px){.topbar .app-tabs button span{display:none}.topbar .app-tabs button{width:34px;padding:0}.topbar .product-wordmark{display:none}}

 /* Main panel content starts on the same edge as its header. */
 .canvas{padding:6px var(--pad-x) var(--pad-x)}
 .is-editing-glyph #canvas{padding:0 var(--pad-x) var(--pad-x)}
 .text-kerning{font-size:var(--chrome-size);color:var(--secondary-ink)}

 /* Glyphs: the glyph set heading as a 52px toolbar. */
 #characters-panel .glyph-heading{height:var(--heading-h);padding:0 var(--pad-end) 0 var(--pad-x);gap:10px;font-size:var(--chrome-size)}
 #characters-panel .glyph-filter{position:relative}
 #characters-panel #glyph-filter{display:inline-flex;align-items:center;gap:6px;height:var(--h-field);min-height:0;padding:0 7px 0 10px;border:0;border-radius:var(--r-tab);background:var(--control);color:var(--control-ink);font-size:var(--chrome-size);font-weight:400}
 #characters-panel #glyph-filter:hover{background:var(--control-hover)}
 #characters-panel #glyph-filter .ui-icon{width:13px;height:13px;color:var(--secondary-ink)}
 #characters-panel #character-total{font-size:var(--chrome-size);color:var(--secondary-ink)}
 #characters-panel .glyph-heading .grid-actions{margin:0 0 0 2px;gap:2px}
 #characters-panel .glyph-heading .text-button{height:var(--h-tab);padding:0 8px;border-radius:var(--r-tab);font-size:var(--chrome-size);font-weight:400;text-decoration:none;color:var(--secondary-ink)}
 #characters-panel .glyph-heading .text-button:hover{background:var(--control);color:var(--control-ink)}
 #characters-panel .glyph-heading #edit-selected:enabled{height:var(--h-field);padding:0 10px;border-radius:var(--r-tab);background:var(--control);font-size:var(--chrome-size);font-weight:400}
 #characters-panel .glyph-heading .size-control{margin-left:auto;gap:8px;font-size:0}
 #characters-panel .glyph-heading .size-control output{min-width:3ch;font-size:var(--chrome-size);color:var(--control-ink);text-align:left}
 #characters-panel .glyph-heading .size-control input{width:72px}
 #characters-panel .glyph-board{padding:0 var(--pad-x) var(--pad-x)}
 #characters-panel .glyph-cell{border-radius:10px}
 /* Glyphs: Text / Parameters tabs and the size slider share one row. */
 #glyph-proof-switch:not([hidden]){display:flex;flex-wrap:nowrap;align-items:center;gap:14px;height:var(--heading-h);margin:0;padding:0 var(--pad-end) 0 var(--pad-x);border:0!important;border-radius:0;background:transparent}
 #glyph-proof-switch .segmented{flex:none}
 #glyph-proof-switch .segmented>button{flex:none;min-width:84px;height:var(--h-tab);padding:0 12px;border-radius:var(--r-tab);font-size:var(--chrome-size);font-weight:400}
 #glyph-proof-switch #glyph-proof-size:not([hidden]){flex:1 1 auto;min-width:0;margin:0;padding:0;display:flex;align-items:center}
 #glyph-proof-size .size-control{width:100%;gap:10px;font-size:var(--chrome-size);color:var(--secondary-ink)}
 #glyph-proof-size .size-control input{flex:1 1 0;width:auto;min-width:48px}
 #glyph-proof-size .size-control output{flex:none;width:auto;min-width:3ch;color:var(--control-ink);text-align:right}
 #glyph-proof-content .text-presets{margin:0 0 6px -10px}
 /* The Text proof in Glyphs: the text box fills the panel and scrolls on its own, one scroll. */
 .glyph-split .sidebar-lower .panel-scroll:has(>#glyph-proof-content>#specimen-panel:not([hidden])){display:flex;flex-direction:column;overflow:hidden}
 .glyph-split #glyph-proof-content:has(>#specimen-panel:not([hidden])){display:flex;flex-direction:column;flex:1 1 auto;min-height:0;padding-bottom:var(--pad-x)}
 #glyph-proof-content>#specimen-panel:not([hidden]){display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
 #glyph-proof-content #specimen-panel #specimen{flex:1 1 auto;min-height:80px;height:auto;margin-top:10px;resize:none}
 /* Panel handles in the gutters. */
 .workspace{position:relative}
 .resize-handle{position:absolute;z-index:25;touch-action:none;outline:none}
 .resize-handle::after{content:'';position:absolute;left:50%;top:50%;border-radius:2px;background:var(--focus);opacity:0;transform:translate(-50%,-50%);transition:opacity .12s ease}
 .resize-handle:hover::after,.resize-handle:focus-visible::after,.is-resizing-x .resize-columns::after,.is-resizing-y .resize-rows::after{opacity:.85}
 .resize-columns{top:var(--gutter);bottom:var(--gutter);left:calc(var(--gutter) + var(--sidebar-w));width:var(--gutter);cursor:col-resize}
 .resize-columns::after{width:2px;height:34px}
 .is-resizing-x,.is-resizing-x *{cursor:col-resize!important;user-select:none}
 .is-resizing-y,.is-resizing-y *{cursor:row-resize!important;user-select:none}
 .sidebar{position:relative}
 .resize-rows{display:none;left:0;right:0;height:var(--gutter);cursor:row-resize}
 .resize-rows::after{width:34px;height:2px}
 .is-editing-glyph .resize-rows{display:block;top:var(--glyph-set-h,calc(50% - var(--gutter) / 2))}
 .workspace.is-editing-glyph #characters-panel{flex:0 0 var(--glyph-set-h,calc(50% - var(--gutter) / 2))}
 .workspace.is-editing-glyph .sidebar-lower{flex:1 1 0}
}

/* ── Phones: the same panels, stacked; the bottom bar stays at the bottom ── */
@media(max-width:760px){
 html,body{background:var(--workspace)}
 .app-header{display:block;height:auto;min-height:0;padding:8px 8px 0!important;border:0!important;background:transparent}
 .topbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;height:auto;min-height:var(--heading-h);padding:10px 10px 10px 14px;border-radius:var(--panel-radius);background:var(--panel)}
 .topbar .app-tabs{order:3;flex:1 1 100%;width:auto}
 .topbar .app-tabs button{flex:1;min-width:0;padding:0 4px}
 .topbar .app-tabs button .ui-icon{display:none}
 .resize-handle{display:none!important}
 .topbar [data-tip]::after{display:none}
 .topbar-identity{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
 .topbar .wordmark{flex:none;flex-direction:row;align-items:baseline}
 .topbar .studio-wordmark{font-size:13px;line-height:1;font-weight:600}
 .topbar .product-wordmark{display:none}
 .breadcrumb-slash{font-size:13px;color:var(--tertiary-ink)}
 .topbar .family-field{display:flex!important;flex:1;min-width:0;margin:0}
 .topbar .family-field input{width:100%;max-width:none;height:var(--h-field);margin-left:-6px;padding:0 6px;border:0;border-radius:var(--r-icon);background:transparent;color:var(--ink);font-size:13px;font-weight:600;text-overflow:ellipsis}
 .topbar .header-actions{display:flex;flex-wrap:nowrap;align-items:center;gap:4px;margin:0;padding:0}
 .topbar .history-actions{display:flex;gap:0}
 .topbar #redo{display:none}
 .topbar #sign-up{height:32px;padding:0 12px;border-radius:16px;background:var(--control-strong);font-size:var(--chrome-size);font-weight:400}
 .topbar .account-avatar{width:32px;height:32px;background:var(--control-strong);color:var(--control-ink);font-size:12px;corner-shape:round}
 .workspace,.workspace.is-editing-glyph{gap:var(--gutter);padding:var(--gutter);background:transparent}
 main,.is-editing-glyph main{border-radius:var(--panel-radius);background:var(--paper);overflow:hidden}
 main>.main-toolbar{display:flex;flex-wrap:wrap;align-items:center;min-height:var(--heading-h);height:auto;padding:10px var(--pad-end) 10px 14px;gap:8px;border:0!important;background:transparent}
 .scope-option .scope-icon{display:block}
 .scope-option .scope-copy{display:none}
 .scope-option span{padding:0 9px}
 .canvas{padding:4px 14px 14px}
 .sidebar,.workspace.is-editing-glyph .sidebar{display:flex;flex-direction:column;gap:var(--gutter);padding:0!important;border:0!important;background:transparent}
 .sidebar-lower,#characters-panel:not([hidden]){margin:0!important;padding:0!important;border:0!important;border-radius:var(--panel-radius);background:var(--panel);overflow:hidden}
 .sidebar-lower>.panel-scroll{padding:0 14px 14px}
 .panel-heading{padding:0 var(--pad-end) 0 14px}
 /* File actions as icons in the top bar; the theme a single button. */
 .topbar .file-actions{gap:2px}
 .topbar .file-actions .quiet span{display:none}
 .topbar .file-actions .quiet{width:var(--h-icon);height:var(--h-icon);padding:0;justify-content:center;background:transparent;color:var(--secondary-ink)}
 .topbar .export-menu summary{width:var(--h-icon);height:var(--h-icon);padding:0;justify-content:center;font-size:0;gap:0}
 .topbar .export-options{position:fixed;top:calc(var(--heading-h) + 16px);right:var(--gutter)}
 .topbar .theme-switch{padding:0;background:transparent}
 .topbar .theme-switch[aria-pressed=false] .is-light,.topbar .theme-switch[aria-pressed=true] .is-dark{display:none}
 .topbar .theme-switch .theme-option{width:var(--h-icon);height:var(--h-icon);background:transparent!important}
 /* Size and Outline: a small menu below its button. */
 .preview-appearance{position:relative;flex:none;margin-left:auto}
 .preview-options-toggle{display:inline-grid!important}
 .preview-appearance .preview-tools{position:absolute!important;top:calc(100% + 8px)!important;bottom:auto!important;left:auto!important;right:0!important;z-index:40;display:none!important;align-items:center;gap:12px;width:max-content;padding:10px 12px!important;border:0!important;border-radius:var(--r-card)!important;background:var(--panel)!important;box-shadow:0 10px 32px rgb(30 32 26/.14)!important}
 .preview-appearance.is-open .preview-tools{display:flex!important}
 .preview-appearance .size-control input{width:110px}
 .outline-stage #glyph-spacing-frame .bearing-control input{width:42px}
 /* The glyph set heading: the set and the size on one line, the actions below. */
 #characters-panel .glyph-heading{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px var(--pad-end) 8px 14px;border:0!important;background:transparent}
 #characters-panel .glyph-heading .glyph-filter{order:-2;max-width:none;margin:0!important}
 #characters-panel #glyph-filter{height:var(--h-field);min-height:0;padding:0 7px 0 10px;border:0;border-radius:var(--r-tab);background:var(--control);font-size:var(--chrome-size);font-weight:400}
 #characters-panel #character-total{order:-1;font-size:var(--chrome-size);color:var(--secondary-ink)}
 #characters-panel .glyph-heading .size-control{order:0;margin-left:auto;font-size:0;gap:8px}
 #characters-panel .glyph-heading .size-control input{width:80px}
 #characters-panel .glyph-heading .size-control output{font-size:var(--chrome-size);color:var(--control-ink)}
 #characters-panel .glyph-heading .grid-actions{order:1;width:100%;margin:0 0 0 -8px;gap:2px}
 #characters-panel .glyph-heading .text-button{height:var(--h-tab);padding:0 8px;border-radius:var(--r-tab);font-size:var(--chrome-size);font-weight:400;text-decoration:none;color:var(--secondary-ink)}
 #characters-panel .glyph-heading #edit-selected{height:var(--h-field);padding:0 10px;border-radius:var(--r-tab);background:var(--control);font-size:var(--chrome-size)}
 #characters-panel .glyph-heading #edit-selected:disabled{display:none}
 #characters-panel .glyph-board{padding:0 14px 14px}
 #characters-panel .glyph-grid{gap:6px;border:0}
 #characters-panel .glyph-cell{border:0;border-radius:10px;background:var(--tile)}
 #glyph-proof-switch:not([hidden]){display:flex;align-items:center;gap:10px;height:var(--heading-h);margin:0;padding:0 var(--pad-end) 0 14px;border:0!important;background:transparent}
 #glyph-proof-switch .segmented>button{min-width:76px;height:var(--h-tab);padding:0 10px;border-radius:var(--r-tab);font-size:var(--chrome-size);font-weight:400}
 #glyph-proof-switch #glyph-proof-size:not([hidden]){margin-left:auto}
 /* Glyphs on a phone: editor above, glyph set and text below, between the top and bottom bars. */
 .workspace.is-editing-glyph{grid-template-rows:minmax(300px,62%) minmax(170px,1fr);height:calc(100svh - var(--heading-h) - var(--h-track) - 4 * var(--gutter));min-height:480px}
 .is-editing-glyph .sidebar{border-top:0;padding-bottom:0}
 .is-editing-glyph #canvas{padding:0 12px 12px}
 #glyph-panel .character-heading{flex:none;flex-wrap:wrap;height:auto;min-height:0;gap:6px 8px;margin:0 0 8px}
 #glyph-panel .character-heading .outline-toolbar{display:contents}
 #glyph-panel .character-heading .path-actions{margin-left:-6px}
 #glyph-panel .character-heading .path-view-tools{margin-left:auto}
}
#glyph-panel .glyph-weights-bar .glyph-weight[aria-pressed=true]{box-shadow:none;color:var(--control-ink)}
#glyph-panel .glyph-weights-bar .glyph-weight[data-pinned=true]:after{top:3px;right:3px;width:4px;height:4px}

/* ── Dropdowns: one surface for every menu ──
   The style picker (Current design), the glyph set filter, Export, the
   view options "…", outline help and the typeface actions in My
   typefaces: the card rounding, a soft shadow instead of a border, 4px
   inset, 32px items with the tab rounding, the chosen one darker. */
#glyph-filter-menu,.topbar .export-options,.font-actions-options,.outline-help>div{border:0!important;border-radius:var(--r-card)!important;background:var(--panel)!important;color:var(--ink);box-shadow:0 10px 32px rgb(30 32 26/.12),0 0 0 .5px rgb(30 32 26/.08)!important}
/* Kept apart: browsers without the styleable select would drop the whole list. */
#glyph-proof-weight::picker(select){border:0!important;border-radius:var(--r-card)!important;background:var(--panel)!important;color:var(--ink);box-shadow:0 10px 32px rgb(30 32 26/.12),0 0 0 .5px rgb(30 32 26/.08)!important}
:root[data-theme=dark] :is(#glyph-filter-menu,.topbar .export-options,.font-actions-options,.outline-help>div,.preview-appearance .preview-tools){box-shadow:0 10px 32px rgb(0 0 0/.4),0 0 0 .5px rgb(255 255 255/.08)!important}
:root[data-theme=dark] #glyph-proof-weight::picker(select){box-shadow:0 10px 32px rgb(0 0 0/.4),0 0 0 .5px rgb(255 255 255/.08)!important}
#glyph-filter-menu,.font-actions-options{padding:4px!important}
#glyph-filter-menu [role=option],.font-actions-options button,#glyph-proof-weight option{display:flex;align-items:center;min-height:32px;height:auto;padding:0 10px;border:0;border-radius:var(--r-tab);background:transparent;color:var(--control-ink);font-size:var(--chrome-size);font-weight:400;text-align:left}
#glyph-filter-menu [role=option]:hover,#glyph-filter-menu [role=option]:focus-visible,.font-actions-options button:hover,.font-actions-options button:focus-visible,#glyph-proof-weight option:hover,#glyph-proof-weight option:focus-visible{background:var(--control)}
#glyph-filter-menu [aria-selected=true],#glyph-proof-weight option:checked{background:var(--control-strong);color:var(--control-ink)}
#glyph-proof-weight::picker(select){padding:4px;margin-block:6px;min-width:150px}
#glyph-proof-weight option::checkmark{display:none}
.outline-help>div{top:calc(100% + 6px);padding:6px 14px;font-size:var(--chrome-size);line-height:1.55;color:var(--secondary-ink)}
.outline-help>div b{color:var(--control-ink);font-weight:500}
/* The style picker's button: like the other quiet controls. */
.main-toolbar .toolbar-style:not([hidden]){height:var(--h-field);padding:0 8px 0 10px;border-radius:var(--r-tab);font-size:12px;color:var(--control-ink)}
.main-toolbar .toolbar-style:hover,.main-toolbar .toolbar-style:focus-within{background:var(--control)}
.font-actions-menu>summary{display:grid;place-items:center;width:var(--h-field);height:var(--h-field);padding:0;border-radius:var(--r-tab);color:var(--secondary-ink)}
.font-actions-menu>summary:hover,.font-actions-menu[open]>summary{background:var(--control-strong);color:var(--control-ink)}
.font-actions-menu>summary::-webkit-details-marker{display:none}
.font-actions-options{top:calc(100% + 6px);width:180px;z-index:10}
.font-library-list>:has(.font-actions-menu[open]){position:relative;z-index:3}
/* The glyph set filter sits at the start of its heading, so its menu opens from there. */
#characters-panel #glyph-filter-menu{left:0;right:auto;z-index:30}

/* ───── Motion, 15 November 2026 ─────
   Entrances fill backwards only, so nothing stays on its own layer once
   it has arrived and menus inside it can rise above its neighbours.
   Quiet, eased movement: things arrive from where they come from and
   leave the same way. Drawer from the right, dialogs rise slightly,
   menus drop from their button, views fade up, the chosen tab's pill
   slides to the new tab. All of it stops with reduced motion. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-in-out:cubic-bezier(.65,0,.35,1);--t-fast:.18s;--t-mid:.32s;--t-slow:.52s;--t-drawer:.58s}
/* The sliding pill behind the chosen tab (placed by app.js). */
.has-indicator{position:relative;isolation:isolate}
.has-indicator>.track-indicator{position:absolute;left:0;top:0;z-index:-1;border-radius:var(--r-tab);background:var(--control-strong);pointer-events:none;opacity:0}
.has-indicator>button[aria-selected=true],.has-indicator>button[aria-pressed=true],.has-indicator .scope-option input:checked+span{background:transparent!important}
.topbar .theme-switch.has-indicator .theme-option{background:transparent!important;position:relative}
.topbar .theme-switch.has-indicator>.track-indicator{border-radius:calc(var(--r-icon) - 3px)}
@media(max-width:760px){.topbar .theme-switch>.track-indicator{display:none}}

@media(prefers-reduced-motion:no-preference){
 .has-indicator>.track-indicator{transition:transform var(--t-slow) var(--ease-out),width var(--t-slow) var(--ease-out),height var(--t-slow) var(--ease-out),opacity var(--t-fast) ease}
 .has-indicator>.track-indicator.is-placing{transition:none}
 .app-tabs button,.segmented>button,.scope-option span,.theme-option{transition:color var(--t-mid) ease}

 /* Dialogs: rise and fade in, sink and fade out; the backdrop fades. */
 dialog{transition:opacity var(--t-mid) var(--ease-out),transform var(--t-slow) var(--ease-out),display var(--t-slow) allow-discrete,overlay var(--t-slow) allow-discrete}
 dialog:not([open]){opacity:0;transform:translateY(10px) scale(.985)}
 @starting-style{dialog[open]{opacity:0;transform:translateY(10px) scale(.985)}}
 dialog::backdrop{transition:background-color var(--t-mid) ease,display var(--t-slow) allow-discrete,overlay var(--t-slow) allow-discrete}
 dialog:not([open])::backdrop{background-color:transparent}
 @starting-style{dialog[open]::backdrop{background-color:transparent}}
 /* My typefaces: a drawer from the right; its typefaces follow one after another. */
 .fonts-drawer{transition:transform var(--t-drawer) var(--ease-out),opacity var(--t-fast) ease,display var(--t-drawer) allow-discrete,overlay var(--t-drawer) allow-discrete}
 .fonts-drawer:not([open]){opacity:1;transform:translateX(104%)}
 @starting-style{.fonts-drawer[open]{opacity:1;transform:translateX(104%)}}
 .fonts-drawer[open] .font-library-list>*,.versions-dialog[open] .version-row{animation:rise-in .62s var(--ease-out) backwards}
 .fonts-drawer[open] .font-library-list>:nth-child(1),.versions-dialog[open] .version-row:nth-child(1){animation-delay:.1s}
 .fonts-drawer[open] .font-library-list>:nth-child(2),.versions-dialog[open] .version-row:nth-child(2){animation-delay:.15s}
 .fonts-drawer[open] .font-library-list>:nth-child(3),.versions-dialog[open] .version-row:nth-child(3){animation-delay:.2s}
 .fonts-drawer[open] .font-library-list>:nth-child(4),.versions-dialog[open] .version-row:nth-child(4){animation-delay:.25s}
 .fonts-drawer[open] .font-library-list>:nth-child(5),.versions-dialog[open] .version-row:nth-child(5){animation-delay:.3s}
 .fonts-drawer[open] .font-library-list>:nth-child(6),.versions-dialog[open] .version-row:nth-child(6){animation-delay:.35s}
 .fonts-drawer[open] .font-library-list>:nth-child(n+7),.versions-dialog[open] .version-row:nth-child(n+7){animation-delay:.4s}

 /* Views: the new view fades up into place. */
 #canvas>section[role=tabpanel]:not([hidden]){animation:view-in var(--t-slow) var(--ease-out) backwards}
 #glyph-panel:not([hidden]){animation:fade-in var(--t-mid) ease backwards}
 .is-editing-glyph #characters-panel:not([hidden]),#glyph-proof-content:not([hidden]),#parameter-tools:not([hidden]){animation:view-in var(--t-slow) var(--ease-out) backwards}
 /* Menus drop from their button. */
 .export-menu[open] .export-options,#glyph-filter-menu:not([hidden]),.preview-appearance.is-open .preview-tools,.outline-help[open]>div,.font-actions-menu[open] .font-actions-options{animation:drop-in var(--t-mid) var(--ease-out) backwards}
 #glyph-proof-weight::picker(select){transition:opacity var(--t-mid) var(--ease-out),transform var(--t-mid) var(--ease-out),display var(--t-mid) allow-discrete,overlay var(--t-mid) allow-discrete}
 #glyph-proof-weight::picker(select):not(:popover-open){opacity:0;transform:translateY(-6px) scale(.98)}
 @starting-style{#glyph-proof-weight::picker(select):popover-open{opacity:0;transform:translateY(-6px) scale(.98)}}
 .status-line.is-visible{animation:fade-in var(--t-mid) ease backwards}

 /* Buttons: colour eases, and a press gives a little. */
 .topbar button,.topbar summary,.file-actions .quiet,.preview-appearance .tool-button,.preview-options-toggle,#characters-panel .glyph-heading button,.glyph-weights-bar button,dialog .quiet,dialog .primary,.text-presets button,.outline-toolbar button{transition:background-color var(--t-fast) ease,color var(--t-fast) ease,opacity var(--t-fast) ease,transform var(--t-fast) var(--ease-out)}
 .topbar button:active:not(:disabled),.topbar summary:active,.file-actions .quiet:active:not(:disabled),.preview-appearance .tool-button:active,.preview-options-toggle:active,dialog .quiet:active,dialog .primary:active,.glyph-weights-bar button:active,.text-presets button:active{transform:scale(.96)}
 .glyph-cell{transition:background-color var(--t-fast) ease}
 #controls .control{transition:background-color var(--t-mid) ease}
 /* The theme changes as a short cross-fade of the surfaces. */
 /* Only colours cross-fade here: panels must hide at once when the view changes. */
 body,.topbar,.panel,main,.sidebar-lower,#characters-panel{transition:background-color var(--t-mid) ease,color var(--t-mid) ease}
 dialog{transition-property:background-color,color,opacity,transform,display,overlay;transition-duration:var(--t-mid),var(--t-mid),var(--t-mid),var(--t-slow),var(--t-slow),var(--t-slow);transition-timing-function:ease,ease,var(--ease-out),var(--ease-out),linear,linear;transition-behavior:normal,normal,normal,normal,allow-discrete,allow-discrete}
 .fonts-drawer{transition-duration:var(--t-mid),var(--t-mid),var(--t-fast),var(--t-drawer),var(--t-drawer),var(--t-drawer)}
 /* Panel handles: the grip grows in. */
 .resize-handle::after{transition:opacity var(--t-fast) ease,width var(--t-mid) var(--ease-out),height var(--t-mid) var(--ease-out)}
 .resize-columns:is(:hover,:focus-visible)::after,.is-resizing-x .resize-columns::after{height:54px}
 .resize-rows:is(:hover,:focus-visible)::after,.is-resizing-y .resize-rows::after{width:54px}
}
@keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes rise-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes drop-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}