/* One live workspace, from the first frame to the smallest screen. */
.faucet-loading #app,.faucet-loading .studio-head,.faucet-loading .appearance-switcher{visibility:hidden}
#faucetLoader{position:fixed;inset:0;z-index:1000;background:#18191b;color:#eeeef0;font:14px system-ui,sans-serif}
#faucetLoader[hidden]{display:none}.loading-mark{position:absolute;left:6vw;top:50%;transform:translateY(-50%);width:72px;height:72px}.faucet-mark{display:block;width:100%;height:100%;fill:currentColor}
.faucet-mark>g{opacity:0;animation:faucet-mark-cycle 19.2s steps(1) infinite;animation-delay:calc(var(--frame)*1.2s)}
@keyframes faucet-mark-cycle{0%,6.24%{opacity:1}6.25%,100%{opacity:0}}
#loadRecovery{position:absolute;left:50%;top:calc(50% + 96px);transform:translateX(-50%);width:280px;max-width:calc(100vw - 32px);line-height:1.6;text-align:center}#loadRecovery a{color:inherit}
.studio-head .brand{display:flex;align-items:center;gap:9px}.studio-head .brand .nav-mark{width:34px;height:34px}.studio-head .brand h1{font-size:18px;letter-spacing:-.045em}.studio-head .studio-label{white-space:nowrap}
.mobile-workspace{display:none}
@media(max-width:850px){
 .studio-head{gap:12px;padding:0 16px}.studio-head .brand h1{font-size:15px}.studio-head .brand .nav-mark{width:29px;height:29px}.studio-head .brand{gap:6px}.studio-head .studio-label{font-size:9px}.studio-head a{font-size:11px}
 .mobile-workspace:not([hidden]){position:fixed;top:var(--workspace-top,0px);left:0;right:0;height:var(--workspace-height,100dvh);z-index:26;display:flex;flex-direction:column;background:var(--paper);overflow:hidden;isolation:isolate}
 .mobile-workspace #rail.mobile-open,html[data-ui-layout=modern] .mobile-workspace #rail.mobile-open{position:relative;inset:auto;order:0;flex:1;min-height:0;height:auto;overflow-y:auto;overscroll-behavior:contain;padding:16px 22px 28px;border:0;width:100%}
 .mobile-workspace .mobile-controls-close{top:0;min-height:40px;margin-bottom:10px}
 .mobile-live-dock{position:relative;order:1;flex:none;height:clamp(158px,29%,245px);border-top:1px solid var(--line);background:var(--paper);box-shadow:0 -10px 25px #00000009;padding-bottom:env(safe-area-inset-bottom);z-index:27}
 .mobile-live-dock #hero,html[data-ui-layout=modern] .mobile-live-dock #hero{min-height:0;height:100%;padding:10px 22px 12px;margin:0;border:0;border-radius:0;display:flex;gap:0;background:var(--paper)}
 .mobile-live-dock .tester-title{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;margin:0 0 5px;color:var(--muted)}
 .mobile-live-dock #previewText{font-size:16px;line-height:1.3;flex:none;min-height:32px;height:34px;margin:0 0 5px;padding:4px 0;resize:none}
 .mobile-live-dock #stage{min-height:0;max-height:none;flex:1;overflow:hidden;width:100%}.mobile-live-dock #stage svg{height:100%;width:100%;max-height:100%;min-height:0}
 .mobile-live-dock #setChips{display:none!important}
 body.controls-open .appearance-switcher{visibility:hidden}
}
@media(max-width:390px){.studio-head .studio-label{display:none}.studio-head .brand{margin-right:auto}}
@media(prefers-reduced-motion:reduce){.faucet-mark>g{animation:none!important;opacity:0}.faucet-mark>g:first-child{opacity:1}}
/* The small nav mark eases between styles; the loader visits each style in turn. */
.nav-mark .faucet-mark>g{animation-name:faucet-mark-morph;animation-timing-function:ease-in-out}
@keyframes faucet-mark-morph{0%{opacity:0}1%,6.24%{opacity:1}7.24%,100%{opacity:0}}
/* September review: bolder identity and a fixed action shelf. */
.studio-head .brand .nav-mark{width:38px;height:38px;flex:none}
.studio-head .studio-label{display:block;font-size:9px;line-height:1.02;letter-spacing:.045em;white-space:normal}
#faucetLoader{transition:transform .52s cubic-bezier(.7,0,.2,1)}
#faucetLoader.is-leaving{transform:translateY(-100%)}
#faucetLoader.is-sequenced .faucet-mark>g{animation:none!important;opacity:0;transition:opacity .17s}
#faucetLoader.is-sequenced .faucet-mark>g.is-current{opacity:1}
#rail,html[data-ui-layout=modern] #rail{display:flex;flex-direction:column;padding:0;overflow:hidden;min-height:0}
.rail-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 22px 24px;scrollbar-width:thin}
.rail-actions{flex:none;background:var(--paper);border-top:1px solid var(--line);padding:12px 16px;z-index:2}
.rail-actions .btnrow,.rail-actions .style-transfer{margin:6px 0 0;gap:6px}
.history-actions{display:flex;gap:6px}.history-actions .btn{flex:1}.history-actions span{font-size:18px;vertical-align:middle;margin-right:5px}
.rail-actions .btn{min-height:34px;padding:7px 6px;font-size:12px;flex:1;white-space:nowrap}
.rail-actions .style-transfer{display:grid;grid-template-columns:1fr 1fr}.rail-actions #exportSavedSettings{grid-column:1/-1}
.rail-actions .btn:disabled{opacity:.4;cursor:default}
.appearance-switcher{bottom:14px;left:calc(var(--rail-w) + 16px)}
@media(max-width:850px){
 #rail,html[data-ui-layout=modern] #rail{display:none}
 .mobile-workspace #rail.mobile-open,html[data-ui-layout=modern] .mobile-workspace #rail.mobile-open{display:flex;padding:0;overflow:hidden}
 .mobile-workspace .mobile-controls-close{margin:8px 16px;align-self:flex-end;min-height:34px;flex:none}
 .mobile-workspace .rail-scroll{padding:0 22px 16px}
 .mobile-workspace .rail-actions{padding:8px 16px}
 .mobile-workspace .rail-actions .style-transfer{display:none}
 .appearance-switcher{left:12px}
 .studio-head .studio-label{display:block;font-size:8px;line-height:1}
 .studio-head .brand .nav-mark{width:30px;height:30px}
}
@media(prefers-reduced-motion:reduce){#faucetLoader,.faucet-mark>g{transition:none!important}}
.cart-note{color:var(--muted);line-height:1.5;font-size:13px}.cart-font{border:1px solid var(--line);padding:14px;margin:12px 0}.cart-font.is-selected{border-color:var(--ink)}.cart-font-select{display:block;width:100%;border:0;background:none;color:var(--ink);text-align:left;padding:0;cursor:pointer}.cart-font-name{display:block;font-size:17px;font-weight:600}.cart-font-meta{display:block;font-size:12px;color:var(--muted);margin-top:4px}.cart-font-proof{height:90px;padding:12px 0}.cart-font-proof svg{height:100%;width:100%;fill:var(--ink)}.cart-font-actions{display:flex;gap:6px}.cart-font-actions .btn{font-size:12px;padding:8px;flex:1}
.font-editor{width:min(1240px,96vw);height:min(920px,94dvh);max-width:100%;max-height:100%;padding:0;border:1px solid var(--line);background:var(--paper);color:var(--ink);margin:auto;overflow:hidden}
.font-editor::backdrop{background:#0009}.font-editor[open]{display:flex;flex-direction:column}.font-editor-head{display:flex;align-items:center;gap:12px;padding:20px 24px;border-bottom:1px solid var(--line);flex:none}.font-editor-head>div{flex:1;min-width:0}.font-editor h2{font-size:23px;margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.font-editor-kicker{font-size:10px;letter-spacing:.1em;color:var(--muted)}
.font-editor-body{display:flex;flex:1;min-height:0}.font-editor-library{width:230px;padding:20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px;flex:none}.font-editor input{width:100%;padding:10px 12px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);font-size:16px}.font-editor label{font-size:14px}.font-editor #fontGlyphList{display:grid;grid-template-columns:repeat(4,1fr);align-content:start;gap:5px;overflow:auto;min-height:0;padding:2px}.font-editor #fontGlyphList button{aspect-ratio:1;border:1px solid var(--line);background:transparent;color:var(--ink);font-size:19px;cursor:pointer;position:relative}.font-editor #fontGlyphList button[aria-pressed=true],.font-paint-tools button[aria-pressed=true]{background:var(--ink);color:var(--paper)}#fontGlyphList button.is-edited:after{content:'';position:absolute;right:3px;bottom:3px;width:4px;height:4px;border-radius:50%;background:currentColor}
.font-editor-work{flex:1;min-width:0;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:12px}.font-editor-character{display:flex;align-items:baseline;gap:16px}.font-editor h3{font-size:30px;margin:0}.font-editor-character>span{color:var(--muted);font-size:12px}.font-paint-tools,.font-edit-actions{display:flex;gap:6px;flex-wrap:wrap}.font-grid-wrap{display:flex;justify-content:center;align-items:center;background:var(--paper-2);padding:18px;min-height:200px;flex:1}.font-grid-wrap svg{display:block;max-width:100%;max-height:42dvh;height:auto;touch-action:none;outline-offset:4px}.font-cell-grid{fill:none;stroke:var(--line);stroke-width:.6}.font-cell-ink{fill:var(--ink);stroke:var(--paper-2);stroke-width:.8}.font-baseline{stroke:var(--cobalt);stroke-width:1.5;stroke-dasharray:4 3}.font-cursor{fill:none;stroke:var(--cobalt);stroke-width:2;display:none}#fontDrawingGrid:focus .font-cursor{display:block}.font-edit-help,#fontEditStatus{font-size:12px;line-height:1.4;margin:0;color:var(--muted)}#fontEditPreview{height:110px;flex:none;background:var(--paper-2);padding:14px}#fontEditPreview svg{width:100%;height:100%;fill:var(--ink)}
html[data-ui-layout=modern] .font-editor{border-radius:24px}html[data-ui-layout=modern] .cart-font,html[data-ui-layout=modern] .font-grid-wrap,html[data-ui-layout=modern] #fontEditPreview{border-radius:16px}
@media(max-width:650px){.font-editor{width:100vw;height:100dvh;border:0;border-radius:0!important}.font-editor-head{padding:12px;gap:6px}.font-editor h2{font-size:17px}.font-editor-head .btn{padding:9px;font-size:12px}.font-editor-body{flex-direction:column}.font-editor-library{width:100%;padding:10px 12px;border-right:0;border-bottom:1px solid var(--line);gap:6px}.font-editor-library label{display:none}.font-editor #fontGlyphList{display:flex;overflow-x:auto;max-height:46px;flex:none}.font-editor #fontGlyphList button{height:38px;min-width:38px;flex:none}.font-editor-work{padding:12px;gap:8px}.font-grid-wrap{min-height:170px;padding:12px}.font-grid-wrap svg{max-height:31dvh}.font-editor .font-edit-actions .btn{padding:6px;font-size:11px;min-height:32px}#fontEditPreview{height:88px}.font-editor .font-edit-help{font-size:11px}}
.rail-scroll>.byline{display:none}.font-editor-head>.btn{flex:none;min-width:100px}.font-editor .btn:disabled{opacity:.4;cursor:default}
@media(max-width:650px){.font-editor-head>.btn{min-width:0}}
.rail-files{position:relative}.rail-files>summary{display:none}.rail-files:not([open])>.style-transfer{display:grid}.cart-font-actions{flex-wrap:wrap}.cart-font-actions .btn{flex:1 0 40%}
@media(max-width:850px){
 .rail-files>summary{display:block;cursor:pointer;font-size:12px;color:var(--muted);padding:6px 0 0;text-align:center;list-style:none}
 .mobile-workspace .rail-files:not([open])>.style-transfer{display:none}
 .mobile-workspace .rail-files[open]>.style-transfer{display:grid;position:absolute;bottom:100%;left:0;right:0;background:var(--paper);border:1px solid var(--line);padding:10px;box-shadow:0 -8px 20px #0002}
}
.font-editor-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}.font-editor-live{flex:none;display:flex;flex-direction:column;gap:8px;padding:12px 24px;border-top:1px solid var(--line);background:var(--paper)}.font-editor-work{min-height:0}
@media(max-width:850px){
 html[data-ui-layout=modern] .mobile-live-dock #stage,.mobile-live-dock #stage{min-height:0!important;max-height:none!important;flex:1}
 html[data-ui-layout=modern] .mobile-live-dock #previewText{font-size:16px;line-height:1.3;height:34px;min-height:32px;padding:4px 0;margin:0 0 5px}
 html[data-ui-layout=modern] .mobile-live-dock #stage svg{height:100%;width:100%;min-height:0;max-height:100%}
}
@media(max-width:650px){.font-editor-live{padding:8px 12px;gap:5px}.font-editor-live #fontEditPreview{height:74px}.font-editor-live label{font-size:12px}.font-editor-live input{padding:7px 10px}.font-editor-work{flex:1}}

/* A centred mark is independent of the wordmark and navigation widths. */
.studio-head>.nav-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;pointer-events:none}
.studio-head .brand h1{font-size:23px;line-height:1;letter-spacing:-.045em}
.studio-head .studio-label{font-size:9px;line-height:1.05}
.studio-head .edition{display:none}
@media(max-width:850px){.studio-head .brand h1{font-size:21px}.studio-head>.nav-mark{width:34px;height:34px}.studio-head .studio-label{font-size:8px}.studio-head{gap:12px}}
@media(max-width:450px){.studio-head{padding:0 12px;gap:9px}.studio-head .brand h1{font-size:20px}.studio-head .studio-label{font-size:7px;line-height:1.1}.studio-head a{font-size:10px}.studio-head>.nav-mark{width:30px;height:30px}.studio-head .brand{margin-right:0}}

/* Three independently anchored loader elements keep the copy exactly centred. */
.loading-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-ui);font-size:clamp(12.6px,1.4vw,19.6px);line-height:1.12;text-align:left;white-space:nowrap}
.loading-progress{position:absolute;right:6vw;top:50%;transform:translateY(-50%);width:clamp(120px,23vw,320px)}
.loading-progress svg{display:block;width:100%;height:auto;fill:currentColor}
@media(max-width:600px){
 .loading-mark{left:20px}
 .loading-progress{right:20px;width:clamp(92px,26vw,140px)}
 .loading-copy{font-size:12.6px}
}