/* StatSign precision studio: neutral controls, navy proof frame, quiet technical accents. */
:root{font-family:StatSignText,Arial,sans-serif;color:#182b3d;background:#f1f4f7;font-synthesis:none;--navy:#11283f;--blue:#087c80;--line:#d4dce4;--accent:#087c80;--muted:#617285;--measure:Consolas,'Courier New',monospace}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
.site-header{height:54px;max-width:1480px;margin:auto;padding:8px 24px;display:flex;align-items:center;gap:24px}.site-header img{width:142px;display:block}.site-header nav{display:flex;gap:24px;font-size:12px;font-weight:600;margin-left:auto}.site-header nav a{transition:color .15s}.site-header nav a:hover{color:var(--accent)}.preview-badge{font-family:var(--measure);font-size:9px;background:#e6edf2;border:1px solid #d2dce5;padding:4px 7px;border-radius:3px;color:#4d6278}
.page-intro{height:74px;color:#fff;background:linear-gradient(90deg,#10263feb,#102b48f2),linear-gradient(#5d96ad22 1px,transparent 1px),linear-gradient(90deg,#5d96ad22 1px,transparent 1px);background-color:#102a43;background-size:auto,24px 24px,24px 24px;padding:12px max(24px,calc((100vw - 1432px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:2px solid #087c80;position:relative;overflow:hidden}.page-intro::after{content:'';position:absolute;right:26%;top:-64px;width:220px;height:220px;border:1px solid #66c3cf22;transform:rotate(45deg);pointer-events:none}.eyebrow{font-family:var(--measure);font-size:9px;letter-spacing:.13em;color:#80c7ce;margin:0 0 5px}.page-intro h1{margin:0;font-size:28px;line-height:1.1;font-weight:600}.page-intro>p{font-size:12px;line-height:1.5;color:#becddd;margin:0;z-index:1}
main{max-width:1480px;margin:12px auto;padding:0 24px;display:grid;grid-template-columns:460px minmax(0,1fr);gap:14px;align-items:stretch}.input-column{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:0}.controls,.workspace,.live-price{border:1px solid var(--line);border-radius:4px;box-shadow:0 3px 12px #172b3d06}.input-column .controls{background:#fff;border-top:3px solid var(--accent);flex:1;min-height:0;padding:12px}.section-heading,.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}h2{margin:0;font-size:19px;font-weight:600}.section-heading{border-bottom:1px solid #e6ecf1;padding-bottom:7px}.section-heading::after{content:'';width:20px;height:6px;border-top:1px solid var(--accent);border-bottom:1px solid var(--accent);opacity:.65}
label,.row-heading{font-size:11px;font-weight:600;color:#415569}label{display:block;margin:5px 0 4px}input,select,button,textarea{font-family:StatSignText,Arial,sans-serif}input,select{height:36px;width:100%;font-size:13px;padding:7px 9px;color:#182e44;border:1px solid var(--line);border-radius:3px;background:#fff;min-width:0;transition:border-color .14s,box-shadow .14s}input:hover,select:hover{border-color:#a4b6c6}input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 2px #087c8012}.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}.triple{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:10px}.font-style-row{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:10px}.content-selector{display:grid;grid-template-columns:82px minmax(0,1fr);align-items:center;gap:8px;margin-bottom:8px}.content-selector label,.material-row label{margin:0}.material-row{display:grid;grid-template-columns:auto minmax(92px,1.1fr) auto minmax(92px,1.2fr) auto 58px;align-items:center;gap:7px 8px;margin:5px 0 8px}.material-row>div{display:contents}.row-heading,.text-row{display:grid;grid-template-columns:1fr 81px 34px;gap:8px}.row-heading{margin:7px 0 5px}.text-row{margin-bottom:6px}.text-row button{height:36px;padding:0;background:#edf1f5;color:#66798b;font-size:18px}.text-row button:hover{background:#dfe7ee;color:#182e44}.text-row button:disabled{opacity:.25}#text-rows{max-height:160px;overflow:auto}.row-height,#symbol-height,#panel-width,#panel-height,#gap,#quantity,#quantity-custom,.results strong{font-family:var(--measure);font-variant-numeric:tabular-nums}.add-row{background:none;color:var(--accent);padding:5px 0;font-size:12px}.add-row:hover{background:none;text-decoration:underline}.height-suggestion{font-size:11px;color:#6b7e8f;float:right;margin-top:5px}
button,.studio-button{cursor:pointer;border:1px solid transparent;border-radius:3px;background:var(--accent);color:#fff;padding:8px 11px;font-size:12px;font-weight:600;transition:background .14s,border-color .14s,box-shadow .14s}button:hover,.studio-button:hover{background:#07646a}button:active,.studio-button:active{box-shadow:inset 0 1px 3px #0002}button:disabled{opacity:.4;cursor:default}.secondary{background:#f2f5f8;border-color:#d4dee7;color:#385570;font-size:11px;padding:5px 8px}.secondary:hover{background:#e7edf3;border-color:#bacbd9}.mode-controls{margin-bottom:9px;padding-bottom:9px;border-bottom:1px solid #e1e7ed}.mode-controls #back-to-sign{margin-top:7px;width:100%;background:#f4f7f9;color:#355770}
.artwork-quote{display:block;margin:0 0 8px;padding:6px 9px;border:1px solid #cbd8e2;border-radius:3px;background:#f8fafc;color:#37546c;font-size:11px;font-weight:600;text-align:center;transition:background .14s,border-color .14s}.artwork-quote:hover{background:#edf5f5;border-color:#80b2b4}
.font-picker{position:relative}#family-trigger{height:30px;display:flex;width:100%;align-items:center;gap:10px;background:#fff;color:#182e44;border:1px solid var(--line);padding:4px 8px;text-align:left}#family-name{flex:1;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#family-sample{font-size:16px;line-height:1;white-space:nowrap}#family-menu{position:absolute;top:100%;left:0;right:0;margin-top:4px;max-height:310px;overflow:auto;background:#fff;border:1px solid #9fb5c8;border-radius:3px;box-shadow:0 10px 26px #142e5020;z-index:20;padding:4px}.font-option{display:flex;width:100%;gap:10px;align-items:center;background:#fff;color:#183654;text-align:left;padding:8px;font-weight:400;border-radius:2px}.font-option:hover,.font-option[aria-selected=true]{background:#edf5f5;border-color:#b5d2d4}.font-option .font-title{font-size:11px;width:45%;flex:none}.font-option .font-sample{font-size:20px;white-space:nowrap;overflow:hidden;line-height:1.3}
#installation-settings{margin-top:7px;padding:6px 8px;border-radius:3px;background:#f0f5f8;border-left:2px solid #7596ad;display:flex;gap:7px;font-size:10px;color:#415d75}#installation-settings p{margin:0}#stencil-construction{margin:4px 0 0;padding:4px 0;font-size:11px;line-height:1.35;color:#415569}#base-stencil-settings{margin-top:6px;padding:6px 8px;background:#f6f8fa;border:1px solid #e0e7ed;border-radius:3px}#base-stencil-settings p,#stencil-mode-note{font-size:10px;line-height:1.35;margin:4px 0;color:#657789}.checkbox-label{display:flex;align-items:center;gap:7px}.checkbox-label input{width:15px;height:15px;accent-color:var(--accent)}body[data-design-mode=stencil]{--accent:#197b57}body[data-design-mode=stencil] .artwork-quote:hover{border-color:#8bb9a2;background:#f2f7f4}
#symbol-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:4px 0 7px}.symbol-option{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;border:1px solid #d6e0e7;background:#fff;color:#30495e;font-size:9px;line-height:1.15;min-height:55px}.symbol-option svg{width:30px;height:30px;fill:currentColor}.symbol-option[aria-pressed=true]{background:#eff6f2;color:#195b43;border-color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}.symbol-option:hover{background:#f3f7f9;color:#195b43;border-color:#94b8a5}#arrow-note{color:#657789;font-size:11px;margin:5px 0 0}#stencil-font-confirmation{padding:7px 9px;margin:6px 0;border:1px solid #b3cabb;border-radius:3px;background:#f4f8f5}#stencil-font-confirmation p{margin:0 0 6px;font-size:11px}#stencil-font-confirmation>div{display:flex;gap:6px;flex-wrap:wrap}#stencil-font-confirmation button{font-size:10px;padding:6px 8px}
.input-column .live-price{background:#fff;color:#172b3d;padding:10px 12px;border-top:2px solid #243e57}.price-row{display:flex;justify-content:space-between;gap:15px;align-items:center}.price-row span{font-size:10px;letter-spacing:.04em;color:#607487}.price-row strong{display:block;font-family:var(--measure);font-variant-numeric:tabular-nums;font-size:27px;letter-spacing:-.035em;line-height:1.2;margin-top:2px}.quantity-control{width:84px}.quantity-control label{margin-top:0}#price-detail{font-size:10px;color:#63788b;margin:5px 0 7px}.price-actions{display:flex;align-items:center;gap:10px}.price-actions>a{font-size:11px}.price-actions button,.price-actions .studio-button{flex:1;text-align:center;padding:7px 10px}
.workspace{background:#142c43;color:#f4f8fc;border-color:#142c43;padding:13px;display:flex;flex-direction:column;min-width:0}.preview-heading{margin-bottom:10px}.preview-heading h2{font-size:19px}.preview-heading>span{font-size:11px;color:#b7c9d7;padding-left:14px;position:relative}.preview-heading>span::before{content:'';width:5px;height:5px;background:#73c3c9;position:absolute;left:0;top:50%;transform:translateY(-50%)}.stage{position:relative;min-height:220px;flex:1;height:calc(100dvh - 360px);max-height:510px;background:#fff;border:1px solid #b3c5d3;border-radius:2px;overflow:hidden}.stage::before,.stage::after{content:'';position:absolute;width:13px;height:13px;border-color:#597b92;pointer-events:none;z-index:1}.stage::before{left:7px;top:7px;border-left:1px solid #597b92;border-top:1px solid #597b92}.stage::after{right:7px;bottom:7px;border-right:1px solid #597b92;border-bottom:1px solid #597b92}canvas{width:100%;height:100%;display:block}#message{position:absolute;left:8%;right:8%;top:40%;text-align:center;font-size:12px;color:#536a7c;pointer-events:none}.results{display:flex;gap:14px;flex-wrap:wrap;padding:9px 0;font-size:10px;color:#aabecf}.results strong{font-size:11px;color:#ecf4fb;margin-left:4px}.hint{font-size:10px;color:#b7c9d7;margin:0 0 5px;min-height:0}.hint:empty{display:none}.car-space-guide{padding:7px 9px;border-left:2px solid #72b5bd;background:#ffffff08;border-radius:2px;line-height:1.4}.foot{display:flex;align-items:center;justify-content:space-between;gap:9px;color:#aabecf;font-size:10px;margin-top:8px}.foot .secondary{background:#1b3851;color:#d3e3ef;border-color:#38566e}.foot .secondary:hover{background:#264961}footer{max-width:1480px;margin:auto;padding:0 24px 8px;display:flex;justify-content:space-between;font-size:10px;color:#687e90}
@media(min-width:1100px) and (min-height:700px){main{height:calc(100dvh - 178px)}.controls{overflow:auto;scrollbar-width:thin;scrollbar-color:#afc0cd #f5f8fa}.workspace{min-height:0}.stage{height:0;max-height:none;min-height:180px}}
@media(max-width:1100px){main{grid-template-columns:390px minmax(0,1fr);padding:0 16px}.site-header{padding:8px 16px}.stage{height:330px}.page-intro{padding-left:16px;padding-right:16px}.page-intro h1{font-size:25px}}
.mobile-studio-nav{display:none}
/* Mobile: readable touch controls, preview first and persistent order bar. */
@media(max-width:760px){
 html{scroll-padding-top:66px}body{padding-bottom:calc(180px + env(safe-area-inset-bottom));background:#edf2f6}
 .site-header{height:auto;min-height:58px;padding:12px 16px;gap:10px;flex-wrap:wrap}.site-header img{width:122px}.site-header nav{gap:14px;font-size:12px;flex-wrap:wrap}.site-header nav a{padding:7px 0}.site-header nav a[href="/signage-guides"]{display:none}
 .page-intro{height:auto;min-height:88px;padding:16px}.page-intro h1{font-size:25px;line-height:1.15;max-width:320px}.eyebrow{font-size:9px;margin-bottom:7px}.page-intro>p{display:none}
 .mobile-studio-nav{display:flex;position:sticky;top:0;z-index:25;gap:8px;padding:8px 12px;background:#edf2f6f5;border-bottom:1px solid #d4dce4;backdrop-filter:blur(8px)}.mobile-studio-nav a{flex:1;text-align:center;padding:11px 8px;min-height:44px;border:1px solid #cbd6df;border-radius:5px;font-size:14px;font-weight:600;background:#fff;color:#243e57}.mobile-studio-nav a:last-child{background:#11283f;color:#fff;border-color:#11283f}
 main{display:flex;flex-direction:column;gap:14px;margin:12px auto;padding:0 12px;max-width:600px}.workspace{order:0;min-height:0;padding:12px;border-radius:7px}.input-column{order:1;gap:14px;min-width:0}.input-column .controls{flex:none;padding:16px;border-radius:7px;overflow:visible}
 .section-heading{margin-bottom:12px;padding-bottom:11px}h2,.preview-heading h2{font-size:19px}.artwork-quote{font-size:13px;padding:12px 8px;min-height:44px;margin-bottom:14px;line-height:1.4}
 label,.row-heading{font-size:12px;line-height:1.4}label{margin:12px 0 5px}input,select{height:46px;font-size:16px;padding:9px 10px;border-radius:5px}button,.studio-button{font-size:14px;min-height:44px;padding:10px 12px;border-radius:5px}input[type=number]{appearance:textfield}
 .mode-controls{margin-bottom:12px;padding-bottom:14px}.content-selector{grid-template-columns:94px minmax(0,1fr);margin-bottom:12px}.content-selector label,.material-row label{margin:0}.pair{gap:10px}.triple{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.material-row{grid-template-columns:94px minmax(0,1fr);gap:9px 10px;margin:8px 0 12px}.font-style-row{grid-template-columns:minmax(0,1fr);gap:0}#font-settings>.pair{grid-template-columns:1fr}
 .row-heading,.text-row{grid-template-columns:minmax(0,1fr) 76px 40px;gap:6px}.row-heading{margin:12px 0 6px}.text-row{margin-bottom:8px}.text-row input{padding:9px 8px}.text-row button{min-height:46px;font-size:23px}.text-row button:disabled{opacity:.4}#text-rows{max-height:none;overflow:visible}.add-row{font-size:13px;padding:8px 0}.height-suggestion{float:none;display:block;font-size:12px;margin:2px 0 10px}
 #family-trigger{height:48px;padding:8px 10px}#family-name{font-size:14px}#family-sample{font-size:19px}#family-menu{max-height:280px;max-height:min(280px,45dvh)}.font-option{min-height:48px;padding:10px 8px}.font-option .font-title{font-size:12px;width:42%}.font-option .font-sample{font-size:21px}
 #installation-settings{font-size:12px;line-height:1.5;padding:10px;margin-top:14px}#stencil-construction{font-size:13px;padding:8px 0}#base-stencil-settings{padding:12px;margin-top:14px}.checkbox-label{gap:10px;margin:0;font-size:14px;min-height:44px}.checkbox-label input{width:22px;height:22px;flex:none}#base-stencil-settings p,#stencil-mode-note{font-size:12px;line-height:1.5}#stencil-font-confirmation{padding:12px}#stencil-font-confirmation p{font-size:13px;line-height:1.5}#stencil-font-confirmation button{font-size:12px;flex:1}#arrow-note{font-size:12px;line-height:1.5}
 #symbol-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0 12px}.symbol-option{min-height:82px;padding:10px 4px;font-size:11px;gap:6px}.symbol-option svg{width:36px;height:36px}
 .preview-heading{align-items:flex-start;gap:10px}.preview-heading>span{font-size:11px;line-height:1.4;max-width:45%;text-align:right;padding-left:0}.preview-heading>span::before{display:none}.stage{height:210px;min-height:180px;max-height:none;flex:none}.results{display:grid;grid-template-columns:1fr;gap:7px;padding:12px 0;font-size:12px}.results strong{font-size:12px;margin-left:5px}.hint{font-size:12px;line-height:1.5;margin-bottom:8px}.foot{flex-wrap:wrap;font-size:11px;gap:8px;margin-top:5px}.foot .secondary{min-height:44px;font-size:13px}.foot>span:last-child{margin-left:auto}
 .input-column .live-price{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border:0;border-top:2px solid #243e57;border-radius:0;box-shadow:0 -5px 20px #142c431f;background:#fff}.price-row{gap:12px}.price-row span{font-size:11px}.price-row strong{font-size:26px;margin-top:1px}.quantity-control{width:92px}.quantity-control label{font-size:11px;margin:0 0 3px}.quantity-control select,.quantity-control input{height:40px;font-size:16px;padding:6px 9px}#price-detail{font-size:11px;line-height:1.4;margin:5px 0 7px}.price-actions{gap:10px;flex-wrap:wrap}.price-actions button,.price-actions .studio-button{min-height:44px;font-size:14px;padding:11px 12px}.price-actions>a:not(.studio-button){font-size:12px;min-height:44px;display:flex;align-items:center}
 footer{padding:8px 16px 14px;font-size:11px;gap:14px;line-height:1.5}
}
@media(max-width:360px){.site-header nav{font-size:11px;gap:10px}.page-intro h1{font-size:23px}.input-column .controls{padding:12px}.content-selector,.material-row{grid-template-columns:82px minmax(0,1fr)}.stage{height:195px}.row-heading,.text-row{grid-template-columns:minmax(0,1fr) 68px 36px}.text-row input{padding:9px 6px}.font-option .font-title{width:46%;font-size:11px}#family-sample{font-size:17px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.page-intro h1 small{font-size:.35em;white-space:nowrap}.statx-icon-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:260px;overflow:auto;margin:10px 0}.statx-icon-library .symbol-option svg{width:40px;height:40px}.statx-icon-library .symbol-option{font-size:12px}.reference-artwork{margin:18px 0;padding:16px;border:1px solid #cbd5e1;border-radius:12px}.reference-artwork img{display:block;max-width:100%;max-height:300px;object-fit:contain;margin:12px 0;background:white}.reference-artwork img[hidden]{display:none}#icon-controls{border-top:1px solid #cbd5e1;padding-top:12px;margin-top:14px}#icon-controls:not(:has(#use-icon:checked)) #icon-library{display:none}

/* Keep selection titles beside their full-width controls. */
.mode-controls,.content-selector,.material-row{grid-template-columns:82px minmax(0,1fr);align-items:center;gap:8px 10px}
.mode-controls{display:grid}.mode-controls label,.content-selector label,.material-row label{margin:0}.mode-controls #back-to-sign{grid-column:2}.material-row{margin:7px 0 10px}
@media(max-width:760px){.mode-controls,.content-selector,.material-row{grid-template-columns:94px minmax(0,1fr);gap:9px 10px}.mode-controls #back-to-sign{grid-column:2}}
@media(max-width:360px){.mode-controls,.content-selector,.material-row{grid-template-columns:82px minmax(0,1fr)}}