@font-face{font-family:SBMBaseLetter;src:url('sbm-base-builder-font.ttf') format('truetype');font-display:swap}
.sbm-base-builder{--navy:#0a1470;--lime:#beff85;--butter:#fff988;--paper:#f4f3ee;color:var(--navy);background:var(--paper);font-family:SBMPlex,ui-monospace,monospace}
.sbm-base-builder *{box-sizing:border-box}
.sbm-base-builder__eyebrow{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
.sbm-base-builder h1,.sbm-base-builder h2{font-family:SBMPixel,ui-monospace,monospace;letter-spacing:-.045em}
.sbm-base-builder h1{font-size:clamp(41px,4.6vw,69px);line-height:1.04;margin:18px 0 22px}
.sbm-base-builder h1 span{background:var(--butter);color:var(--navy);padding:0 .08em .07em}
.sbm-base-builder h2{font-size:clamp(30px,4vw,50px);line-height:1.08;margin:14px 0 28px}
.sbm-base-builder p{line-height:1.6}
.sbm-base-builder__work{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'intro preview' 'form preview';grid-template-rows:auto 1fr;column-gap:clamp(28px,5vw,74px);row-gap:8px;align-items:start;padding:clamp(34px,5vw,70px) max(24px,calc((100vw - 1220px)/2));background:var(--navy)}
.sbm-base-builder__intro,.sbm-base-builder__form-panel,.sbm-base-builder__preview-panel{min-width:0}
.sbm-base-builder__intro{grid-area:intro;color:#fff}
.sbm-base-builder__form-panel{grid-area:form}
.sbm-base-builder__form-panel{color:#fff}
.sbm-base-builder__lead{font-size:clamp(15px,1.4vw,19px);max-width:550px}
.sbm-base-builder__free{display:inline-block;margin:8px 0 4px;color:var(--navy);background:var(--lime);padding:9px 13px;font-size:11px;font-weight:700;letter-spacing:.06em}
.sbm-base-builder label{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:700;margin:25px 0 9px}
.sbm-base-builder label strong,.sbm-base-builder label span{font-size:11px;font-weight:400}
.sbm-base-builder textarea,.sbm-base-builder input{display:block;width:100%;border:2px solid var(--navy);border-radius:0;background:#fff;color:var(--navy);padding:15px 16px;font:16px/1.45 SBMPlex,ui-monospace,monospace;resize:vertical}
.sbm-base-builder textarea:focus,.sbm-base-builder input:focus{outline:3px solid var(--butter);outline-offset:2px}
.sbm-base-builder__hint{font-size:12px;margin:8px 0 0;max-width:470px}
.sbm-base-builder__fit{font-size:12px;font-weight:700;min-height:1.2em;margin:7px 0 0;color:var(--lime)}
.sbm-base-builder__fit[data-state=warning]{color:var(--butter)}
.sbm-base-builder button,.sbm-base-builder__download,.sbm-base-builder__next a,.sbm-base-builder__diy-links a{display:flex;justify-content:space-between;align-items:center;gap:26px;width:100%;border:2px solid var(--navy);background:var(--butter);color:var(--navy);padding:16px 18px;text-align:left;text-decoration:none;font:700 14px/1.3 SBMPlex,ui-monospace,monospace;cursor:pointer;box-shadow:5px 5px 0 #a9a748}
.sbm-base-builder button{margin-top:28px}
.sbm-base-builder button:disabled{opacity:.7;cursor:wait}
.sbm-base-builder__download{margin-top:15px;background:var(--lime)}
.sbm-base-builder__download[hidden]{display:none}
.sbm-base-builder__status{min-height:1.5em;font-size:13px;font-weight:700}
.sbm-base-builder__status[data-state=error]{color:#ffd6db}
.sbm-base-builder__status[data-state=success]{color:var(--lime)}
.sbm-base-builder__preview-panel{grid-area:preview;background:#fff;padding:clamp(18px,3vw,38px);border:2px solid var(--navy);box-shadow:9px 9px 0 #050e53;position:sticky;top:20px}
.sbm-base-builder__viewer{position:relative;width:100%;aspect-ratio:1.08;background:#eef1ea;border:1px solid #d2d8ca;overflow:hidden;touch-action:none}
.sbm-base-builder__viewer canvas{display:block;width:100%;height:100%;cursor:grab}
.sbm-base-builder__viewer canvas:active{cursor:grabbing}
.sbm-base-builder__viewer-fallback{display:grid;place-items:center;height:100%;margin:0;color:var(--navy);font-size:12px}
.sbm-base-builder__viewer-fallback[hidden]{display:none}
.sbm-base-builder__viewer-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-size:10px;font-weight:700;letter-spacing:.06em}
.sbm-base-builder__viewer-actions button{width:auto;margin:0;padding:8px 10px;font-size:10px;box-shadow:none;white-space:nowrap;background:var(--navy);color:#fff}
.sbm-base-builder__preview-note{font-size:12px;margin:17px 0}
.sbm-base-builder__dimensions{margin:20px 0 0;border-top:1px solid var(--navy);font-size:12px}
.sbm-base-builder__dimensions div{display:flex;justify-content:space-between;gap:15px;padding:8px 0;border-bottom:1px solid #bec3b5}
.sbm-base-builder__dimensions dt{font-weight:700}
.sbm-base-builder__dimensions dd{margin:0;text-align:right}
.sbm-base-builder__mobile-spec{display:none}
.sbm-base-builder__diy{padding:clamp(48px,7vw,86px) max(24px,calc((100vw - 1220px)/2));background:var(--butter)}
.sbm-base-builder__diy h2{max-width:800px}
.sbm-base-builder__diy>p:not(.sbm-base-builder__eyebrow){max-width:740px}
.sbm-base-builder__diy-links{display:grid;grid-template-columns:repeat(2,minmax(0,310px));gap:18px;margin-top:26px}
.sbm-base-builder__diy-links a,.sbm-base-builder__diy-links button{margin:0;background:#fff;min-height:61px}
.sbm-base-builder__diy-status{min-height:1.5em;font-size:12px;font-weight:700}
.sbm-base-builder__diy-note{font-size:12px}
.sbm-base-builder__diy-note a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.sbm-base-builder__next{padding:clamp(58px,8vw,100px) max(24px,calc((100vw - 1220px)/2));background:#fff}
.sbm-base-builder__next p:not(.sbm-base-builder__eyebrow){max-width:570px}
.sbm-base-builder__next a{max-width:310px;margin-top:28px;background:var(--lime)}
@media(max-width:800px){.sbm-base-builder__work{grid-template-columns:1fr;grid-template-areas:'intro' 'preview' 'form';grid-template-rows:auto auto auto;row-gap:22px}.sbm-base-builder__preview-panel{position:static;max-width:650px;padding:10px}.sbm-base-builder__viewer{height:clamp(190px,27vh,260px);aspect-ratio:auto}.sbm-base-builder__preview-note,.sbm-base-builder__dimensions{display:none}.sbm-base-builder__mobile-spec{display:block;margin:5px 0 0;font-size:10px;font-weight:700}}
@media(max-width:640px){.sbm-base-builder__diy-links{grid-template-columns:1fr}}
@media(max-width:480px){.sbm-base-builder__work,.sbm-base-builder__next{padding-left:20px;padding-right:20px}.sbm-base-builder h1{font-size:clamp(39px,10vw,52px)}.sbm-base-builder__viewer-actions{font-size:9px}.sbm-base-builder__viewer-actions button{font-size:9px}}