/* Faucet studio: the existing controls, arranged around a live specimen. */
:root{--paper:#f6f6f2;--paper-2:#edede7;--ink:#171817;--muted:#666963;--line:#d2d4cd;--cobalt:#1947ed;--cobalt-soft:#1947ed10;--rail-w:310px;--radius-ui:0px}
html[data-theme=dark]{--paper:#171817;--paper-2:#232522;--ink:#f0f2e9;--muted:#a0a69a;--line:#3c4239;--cobalt:#efbed3;--cobalt-soft:#efbed314}
body{font-size:14px}button,input,textarea{font:inherit}button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px}#app{padding-top:60px;height:100dvh}.studio-head{position:fixed;inset:0 0 auto;height:60px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:22px;padding:0 26px;z-index:12;background:var(--paper)}.studio-head .brand{margin:0}.studio-head .brand .v{display:none}.studio-head a{font-size:13px;color:var(--muted);text-decoration:none}.studio-head .studio-label{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-right:auto}.studio-head .edition{font-size:12px;color:var(--cobalt)}
#rail{padding:20px 22px 100px;background:var(--paper);border-color:var(--line)}#rail>.byline{display:none}#rail>.eyebrow{margin:0 0 10px;border:0;padding:0;font-size:12px;letter-spacing:.04em}#specimen{height:72px;background-size:18px 18px;background-image:linear-gradient(var(--line) .5px,transparent .5px),linear-gradient(90deg,var(--line) .5px,transparent .5px);margin-bottom:22px;border-color:var(--line)}#specimenSvg{width:74px;height:74px}.tag{display:none}.ctl{margin:0 0 18px}.ctl .row{margin-bottom:5px}.ctl label{font-size:14px;font-weight:500;letter-spacing:-.02em}.ctl .val{font-size:12px;color:var(--cobalt)}.chain{font-size:11px}input[type=range]{height:22px}input[type=range]::-webkit-slider-runnable-track{height:1px}input[type=range]::-webkit-slider-thumb{width:16px;height:20px;margin-top:-9px;border-radius:var(--thumb-r,2px);box-shadow:0 0 0 3px var(--paper)}
.rail-group{border-top:1px solid var(--line);padding:0}.rail-group summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:56px;font-size:14px;font-weight:500}.rail-group summary::-webkit-details-marker{display:none}.rail-group summary:after{content:'+';margin-left:auto;font-size:20px;font-weight:400;color:var(--muted)}.rail-group[open] summary:after{content:'−'}.rail-group .group-num{font-family:var(--font-mono);font-size:11px;color:var(--muted)}.rail-group .group-content{padding:4px 0 20px}.group-reset{display:block;margin:4px 0 0 auto;border:0;background:none;color:var(--muted);font-size:12px;cursor:pointer}.chip{font-size:12px;border-color:var(--line);padding:7px 9px}.chips{gap:5px}.rail-group .hint{font-size:12px;line-height:1.5;padding:12px 0 0;color:var(--muted)}.mode-panel{margin:4px 0 22px}.mode-panel .mode-label{font-size:12px;margin-bottom:9px;color:var(--muted)}.mode-switch{display:flex;background:var(--paper-2);padding:3px;gap:3px}.mode-switch button{width:50%;min-height:36px;border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:13px}.mode-switch button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.mode-help{font-size:12px;line-height:1.5;color:var(--muted);margin:10px 0 0}.polygon-control{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:20px}.polygon-control button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;height:64px;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--ink);font-size:10px}.polygon-control svg{width:22px;height:22px;fill:currentColor}.polygon-control button[aria-pressed=true]{background:var(--cobalt);border-color:var(--cobalt);color:var(--paper)}.polygon-control button:disabled{opacity:.3;cursor:default}.ctl.sleeping{opacity:.4}.ctl.sleeping input{cursor:not-allowed}.studio-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}.btn{font-size:12px;padding:10px 14px;border-color:var(--line);min-height:38px}.btn.primary{background:var(--cobalt);color:var(--paper);border-color:var(--cobalt)}
#main{padding:0;background:var(--paper);overflow:auto}#topbar{height:74px;min-height:74px;padding:16px 30px;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:9;background:var(--paper);gap:8px}.preset-menu{margin-right:auto;position:relative}.preset-menu summary{cursor:pointer;font-size:13px;list-style:none}.preset-menu summary:after{content:' ⌄';color:var(--muted)}#presetChips{width:300px;max-width:80vw;position:absolute;top:36px;left:0;padding:15px;background:var(--paper);border:1px solid var(--line);box-shadow:0 16px 35px #0001;z-index:20}.preset-menu:not([open]) #presetChips{display:none}#topbar #themeToggle{margin:0;width:38px;height:38px;font-size:22px}.view-tabs{display:flex;gap:26px;margin:0 30px;border-bottom:1px solid var(--line)}.view-tabs button{font-size:12px;padding:18px 0;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);cursor:pointer}.view-tabs button[aria-selected=true]{color:var(--ink);border-color:var(--cobalt)}#hero{padding:42px 38px 16px;min-height:calc(100dvh - 240px);display:flex;flex-direction:column}#previewText{font-family:var(--font-ui);font-size:16px;padding:8px 0;border:0;border-bottom:1px solid var(--line);margin:0 0 24px;background:transparent}#stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:240px}#stage svg{max-height:48vh;width:100%}#setChips{margin:0!important}#hero:after{content:'EDIT THE TEXT ABOVE. MAKE IT YOURS.';font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:var(--muted);padding-top:24px}.studio-status{display:flex;justify-content:space-between;gap:10px;font-family:var(--font-mono);font-size:11px;border-top:1px solid var(--line);padding:16px 30px;color:var(--muted)}#waterfall,#charmap{padding:32px}.sectionhead{margin:0 30px;padding-top:30px;font-size:12px}.studio-panel-hidden{display:none!important}.wf-row{border-color:var(--line);padding:30px 0}.cm-section-title{font-size:12px}.cm-cell{border-color:var(--line)}.stylename{font-size:30px}.styleid,.f-label,.price .note,.saved-card .n2{font-size:12px}.opt,.opt .sub{font-size:12px}.opt{border-radius:0}.d-try p{font-size:14px}.price .amt{font-size:44px}#drawer{z-index:30}#scrim{z-index:25}#nameModal{z-index:40}#toast{z-index:50;font-size:13px}.solid-on #specimen{opacity:.4}.solid-on .polygon-control{display:none}
@media(min-width:1600px){:root{--rail-w:350px}#rail{padding-left:30px;padding-right:30px}#hero{padding:50px 70px 30px}}
@media(max-width:850px){html,body{height:auto;overflow:auto}#app{display:flex;flex-direction:column;height:auto;min-height:100dvh}#main{order:0;overflow:visible;width:100%;padding:0}#rail{order:1;width:100%;height:auto;overflow:visible;border:0;border-top:1px solid var(--line);padding:26px 24px 80px}.studio-head{padding:0 18px;gap:14px}.studio-head .edition{display:none}.studio-head .studio-label{font-size:10px}.studio-head a{font-size:12px}#topbar{padding:12px 18px;position:relative;height:auto;min-height:62px;flex-wrap:wrap}.preset-menu{min-width:110px}#topbar .btn{font-size:11px;padding:9px}#hero{padding:22px;min-height:360px;height:48dvh}#stage{min-height:160px}#stage svg{max-height:28dvh}#previewText{font-size:16px;margin-bottom:10px}.view-tabs{margin:0 22px}.studio-status{padding:14px 22px;font-size:10px}.rail-group .group-content{max-width:700px}#specimen{height:70px}#waterfall,#charmap{padding:22px}.studio-head .brand h1{font-size:19px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.reward-banner{background:var(--cobalt);color:var(--paper);padding:22px 30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.reward-banner strong{font-size:20px;font-weight:500}.reward-banner p{font-size:13px;line-height:1.5;max-width:62ch;margin:8px 0}.reward-banner .btn{background:var(--paper);color:var(--ink)}.reward-banner span{font-size:12px;width:100%}

.reward-licensee{font-size:12px;display:flex;flex-direction:column;gap:5px}.reward-licensee input{font-size:16px;padding:9px;border:1px solid currentColor;background:var(--paper);color:var(--ink)}

#packageBuildStatus{font-size:12px;line-height:1.5;margin:12px 0;color:var(--ink);overflow-wrap:anywhere}

.text-setting,.text-proof-link{width:100%;margin-top:8px}.text-proof-link{font-size:12px;padding:8px 0;color:var(--ink)}

/* Grid control and continuous proof workspace. Brand tokens remain above. */
[hidden]{display:none!important}
.grid-controller{display:block;width:100%}
.grid-overview{display:grid;grid-template-columns:100px 1fr;align-items:center;gap:14px;margin:0 0 22px}
.grid-overview .text-proof-link{display:block;margin-top:4px;padding:4px 0}
#gridDiagram{width:100%;height:104px;overflow:visible}
.grid-lines{fill:none;stroke:var(--line);stroke-width:.7}
.grid-baseline{fill:none;stroke:var(--cobalt);stroke-width:1.6}
.grid-descender{fill:var(--cobalt-soft)}
#gridReadout{font-size:32px;letter-spacing:-.05em;line-height:1.1;white-space:nowrap;display:block;font-variant-numeric:tabular-nums}
#gridKind{display:block;font-size:12px;color:var(--muted);margin:7px 0 12px}
#gridLink{border:1px solid var(--line);padding:6px 9px;font-size:12px;background:transparent;color:var(--ink);cursor:pointer}
#gridLink[aria-pressed=true]{border-color:var(--cobalt);color:var(--cobalt)}
.grid-axis{margin:0 0 20px}
.grid-axis-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.grid-axis-head label{font-size:13px;font-weight:500}
.grid-axis-head input[type=number]{width:54px;text-align:right;padding:3px 5px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--cobalt);font-family:var(--font-mono);font-size:14px;appearance:textfield}
.grid-axis-head input::-webkit-inner-spin-button{appearance:none}
.grid-axis input[type=range]{width:100%;margin:2px 0 8px}
.grid-axis input[type=range]:disabled{opacity:.3;cursor:default}
.grid-stops{font-family:var(--font-mono);font-size:11px;color:var(--muted);line-height:1.6;word-spacing:2px}
.grid-weight-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line);font-size:13px}
#gridWeights{display:flex;gap:3px}
#gridDrawingChoices{display:flex;gap:3px}
#gridDrawingChoices button{border:1px solid var(--line);background:transparent;color:var(--ink);padding:7px 9px;font:inherit;font-size:12px;cursor:pointer}
#gridDrawingChoices button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
#gridDrawingRow[hidden]{display:none}
html[data-ui-layout=modern] #gridDrawingChoices button{border-radius:18px}
#gridWeights button{border:1px solid var(--line);background:transparent;color:var(--ink);padding:7px 9px;font-size:12px;cursor:pointer}
#gridWeights button[aria-pressed=true]:not(:disabled){background:var(--ink);border-color:var(--ink);color:var(--paper)}
#gridWeights button:disabled{border:0;padding-right:0;color:var(--muted);cursor:default}
.grid-note{font-size:11px;color:var(--muted);line-height:1.5;margin:10px 0 0}
#gridFeedback:empty{display:none}
#gridFeedback{color:var(--cobalt)}
.grid-draft{font-size:12px;line-height:1.5;margin-top:12px;padding-left:10px;border-left:2px solid var(--cobalt)}
.grid-library{margin-top:12px}
.grid-library summary{font-size:12px;min-height:32px;font-weight:400;color:var(--muted)}
.grid-library summary:after{font-size:16px}
.rail-group[open] .grid-library:not([open])>summary:after{content:'+'}
.grid-library label{display:block;font-size:12px;margin:8px 0}
.grid-library select{width:100%;border:1px solid var(--line);padding:8px;background:var(--paper);color:var(--ink);font-size:13px}
.preview-nav{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:16px 30px;border-bottom:1px solid var(--line)}
.preview-nav span{font-size:12px;color:var(--muted);margin-right:auto}
.preview-nav a{font-size:12px;text-decoration:none;color:var(--ink)}
.preview-nav a:hover{text-decoration:underline;text-underline-offset:4px}
#hero{min-height:310px;height:auto;padding:26px 32px 24px;scroll-margin-top:84px}
#stage{min-height:180px;max-height:360px}
#stage svg{max-height:340px}
#hero:after{content:none}
#sizeProof,#characterProof{scroll-margin-top:90px;font-size:14px;color:var(--ink);font-weight:500;letter-spacing:0;text-transform:none;padding-top:24px;border-top:1px solid var(--line)}
#characterProof span{font-size:12px;font-weight:400;color:var(--muted);margin-left:12px}
#waterfall{padding:6px 30px 28px}
.wf-row{padding:18px 0;overflow-x:auto}
.wf-row .sz{position:sticky;left:0;align-self:stretch;display:flex;align-items:center;background:var(--paper);z-index:1;flex-shrink:0}
.wf-row svg{flex-shrink:0;max-width:none!important}
#charmap{padding:24px 30px 40px}
#charmap .cm{content-visibility:auto;contain-intrinsic-size:92px 100px}
.studio-status{flex-wrap:wrap}
.mobile-controls-toggle,.mobile-controls-close{display:none}
@media(max-width:850px){
  #rail{position:fixed;inset:60px 0 0;z-index:24;overflow-y:auto;padding:16px 24px 80px;display:none;background:var(--paper);overscroll-behavior:contain}
  #rail.mobile-open{display:block}
  body.controls-open{overflow:hidden}
  .mobile-controls-toggle,.mobile-controls-close{display:inline-block}
  .mobile-controls-close{position:sticky;top:0;z-index:3;background:var(--paper);margin:0 0 18px auto;display:block;width:max-content}
  .preview-nav{padding:14px 22px;gap:18px}
  .preview-nav span{width:100%;margin:0}
  #hero{min-height:290px;height:auto;padding:22px}
  #stage{min-height:160px;max-height:300px}
  #stage svg{max-height:260px}
  #waterfall,#charmap{padding-left:22px;padding-right:22px}
  .grid-axis-head input[type=number],.grid-library select{font-size:16px}
  #gridLink,#gridWeights button{min-height:42px}
  #characterProof span{display:block;margin:8px 0 0}
}

.grid-growth-controls{padding:16px 0;border-bottom:1px solid var(--line);margin-bottom:14px}.grid-growth-controls label{display:flex;align-items:center;gap:10px;font-size:13px;margin:0 0 10px;cursor:pointer}.grid-growth-controls input{width:16px;height:16px;accent-color:var(--ink)}.grid-growth-controls input:disabled{opacity:.35}.grid-growth-controls .text-proof-link{margin-top:8px;display:inline-block}

/* Fixed scale lets spacing change without auto-fitting the other axis. */
.preview-scale{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:12px;margin:0 0 12px;color:var(--muted)}
.preview-scale label{display:flex;align-items:center;gap:7px;color:var(--ink)}
#stage.fixed-preview{overflow:auto;max-height:none;align-items:flex-start;justify-content:flex-start}
#stage.fixed-preview svg{flex:none;max-width:none!important;max-height:none!important}
.join-style{margin:0 0 14px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
.join-style select{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:6px;font:inherit}
.join-style p{grid-column:1/-1;margin:0}