.config-page{color:#1d1d1f;background:#f5f5f7;min-height:100vh}.config-header{z-index:50;-webkit-backdrop-filter:blur(22px)saturate(180%);backdrop-filter:blur(22px)saturate(180%);background:#fafafcdb;border-bottom:1px solid #00000014;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:54px;padding:0 28px;display:grid;position:sticky;top:0}.config-brand{letter-spacing:.08em;align-items:center;gap:9px;width:fit-content;font-size:13px;display:inline-flex}.config-brand img{object-fit:cover;mix-blend-mode:multiply;width:25px;height:25px}.config-header>span{color:#6e6e73;font-size:13px;font-weight:600}.config-header-actions{justify-self:end;gap:8px;display:flex}.config-header button,.option-footer button{color:#1d1d1f;background:#e8e8ed;border:0;border-radius:18px;min-height:34px;padding:0 16px;font-size:12px;font-weight:650}.config-header .config-primary,.option-footer .config-primary{color:#fff;background:#0071e3}.step-strip{z-index:45;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#ffffffeb;border-bottom:1px solid #00000014;align-items:stretch;gap:3px;min-height:62px;padding:0 28px;display:flex;position:sticky;top:54px;overflow-x:auto}.step-strip button{color:#6e6e73;text-align:left;white-space:nowrap;background:0 0;border:0;min-width:130px;padding:0 18px;font-size:12px;font-weight:650;position:relative}.step-strip button span{color:#a1a1a6;margin-bottom:4px;font-size:9px;display:block}.step-strip button:after{content:"";background:#0071e3;border-radius:3px 3px 0 0;height:3px;transition:right .25s;position:absolute;bottom:0;left:18px;right:100%}.step-strip button.active{color:#1d1d1f}.step-strip button.active:after{right:18px}.config-layout{grid-template-columns:minmax(0,1.45fr) minmax(440px,.55fr);min-height:calc(100vh - 116px);display:grid}.preview-panel{background:radial-gradient(circle at 50% 42%,#fff 0,#f9fbfd 42%,#eef3f6 100%);grid-template-rows:auto 1fr auto auto;align-self:start;min-height:calc(100vh - 116px);padding:58px clamp(32px,5vw,92px) 40px;display:grid;position:sticky;top:116px;overflow:hidden}.preview-copy p{color:#0071e3;letter-spacing:.16em;margin-bottom:10px;font-size:10px;font-weight:750}.preview-copy h1{letter-spacing:-.05em;max-width:760px;margin-bottom:10px;font-size:clamp(42px,4.3vw,72px);line-height:1.02}.preview-copy>span{color:#6e6e73;font-size:13px}.assembly-view{filter:drop-shadow(0 26px 24px #002d4b1f);justify-content:center;align-items:center;gap:clamp(6px,1.1vw,18px);min-height:360px;display:flex;position:relative}.assembly-shadow{filter:blur(18px);background:#0037561f;border-radius:50%;height:25px;position:absolute;bottom:22%;left:12%;right:8%}.assembly-part{z-index:1;flex:none;position:relative}.assembly-part.closure{background:linear-gradient(90deg,#f5f8fae6,#b4c4ccbf,#fffffff2);border:2px solid #2c404a8c;border-radius:12px 12px 20px 20px;width:55px;height:74px}.assembly-part.closure:before,.assembly-part.closure:after{content:"";background:#21384340;height:2px;position:absolute;left:8px;right:8px}.assembly-part.closure:before{top:15px;box-shadow:0 7px #21384338,0 14px #2138432e}.assembly-part.luer{clip-path:polygon(18% 0,82% 0,100% 18%,85% 100%,15% 100%,0 18%);background:linear-gradient(90deg,#dce7ebb3,#fffffff2,#becfd6b8);border:2px solid #324a558c;width:45px;height:68px}.assembly-part.luer:after{content:"";background:repeating-linear-gradient(90deg,#2846524d 0 2px,#0000 2px 6px);position:absolute;inset:14px 8px 9px}.assembly-part.barrel{background:linear-gradient(#fffffff0,#d7eff79e 48%,#ffffffeb);border:2px solid #4678917a;border-radius:12px 28px 28px 12px;width:clamp(260px,29vw,520px);height:92px;box-shadow:inset 0 0 24px #0089b014}.assembly-part.barrel:before{content:"";filter:blur(4px);background:#fffc;border-radius:50%;height:12px;position:absolute;top:18px;left:8%;right:8%}.scale-lines{background:repeating-linear-gradient(90deg,#0000 0 18px,#00436454 18px 20px);width:44%;position:absolute;top:12px;bottom:12px;left:16%;-webkit-mask-image:linear-gradient(#000 0 29%,#0000 29% 64%,#000 64% 100%);mask-image:linear-gradient(#000 0 29%,#0000 29% 64%,#000 64% 100%)}.stopper{background:repeating-linear-gradient(#4d5660 0 7px,#1e2429 7px 12px);border-radius:9px;width:46px;height:60px;position:absolute;top:14px;right:12%}.assembly-part.rod{background:linear-gradient(180deg, color-mix(in srgb, var(--part-colour) 78%, #fff), var(--part-colour));border-radius:8px;width:clamp(140px,16vw,260px);height:34px;box-shadow:inset 0 -5px 8px #0000001f}.assembly-part.rod:before{content:"";border-top:2px solid #ffffff80;border-bottom:2px solid #0000001a;position:absolute;inset:6px 12px}.assembly-part.flange{background:var(--part-colour);border-radius:12px;width:30px;height:122px;box-shadow:inset -6px 0 8px #00000021}.assembly-part.flange:before,.assembly-part.flange:after{content:"";background:var(--part-colour);border-radius:50%;width:85px;height:22px;position:absolute;left:50%;transform:translate(-50%);box-shadow:inset 0 -5px 8px #0000001f}.assembly-part.flange:before{top:-9px}.assembly-part.flange:after{bottom:-9px}.preview-meta{color:#6e6e73;flex-wrap:wrap;align-items:center;gap:22px;min-height:48px;font-size:11px;display:flex}.preview-meta span{align-items:center;gap:7px;display:flex}.preview-meta span i{border-radius:50%;width:10px;height:10px}.preview-meta code{color:#86868b;text-overflow:ellipsis;white-space:nowrap;max-width:46%;margin-left:auto;font-size:9px;overflow:hidden}.model-placeholder{background:#ffffff8c;border:1px dashed #b5c3ca;border-radius:16px;grid-template-columns:.7fr 1.3fr;gap:30px;margin-top:14px;padding:18px 22px;display:grid}.model-placeholder div{gap:3px;display:grid}.model-placeholder span{color:#0071e3;letter-spacing:.14em;font-size:9px}.model-placeholder strong{font-size:13px}.model-placeholder p{color:#6e6e73;margin:0;font-size:11px;line-height:1.55}.option-panel{background:#fff;border-left:1px solid #00000014;padding:44px 32px 30px}.option-heading>span{color:#86868b;font-size:11px}.option-heading h2{letter-spacing:-.035em;margin:8px 0 10px;font-size:32px}.option-heading p{color:#6e6e73;font-size:13px;line-height:1.55}.option-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:25px;display:grid}.option-card{text-align:left;background:#fff;border:1px solid #d2d2d7;border-radius:14px;flex-direction:column;align-items:flex-start;min-height:174px;padding:15px;transition:border-color .2s,box-shadow .2s,transform .2s;display:flex;position:relative}.option-card:hover{border-color:#86868b;transform:translateY(-2px)}.option-card.selected{border:2px solid #0071e3;padding:14px;box-shadow:0 0 0 3px #0071e31a}.option-card.selected:after{content:"✓";color:#fff;background:#0071e3;border-radius:50%;place-items:center;width:20px;height:20px;font-size:11px;display:grid;position:absolute;top:11px;right:11px}.shape-swatch{background:#f5f5f7;border-radius:8px;place-items:center;width:100%;height:62px;margin-bottom:12px;display:grid;overflow:hidden}.shape-swatch i{background:linear-gradient(135deg,#c6d1d7,#fff 45%,#9eacb4);border:1px solid #94a1a8;display:block}.shape-barrel i{border-radius:5px 12px 12px 5px;width:72%;height:20px}.shape-barrel.variant-4 i,.shape-barrel.variant-5 i,.shape-barrel.variant-6 i{height:29px}.shape-barrel.variant-7 i,.shape-barrel.variant-8 i{width:82%;height:15px}.shape-luer i{clip-path:polygon(20% 0,80% 0,100% 25%,82% 100%,18% 100%,0 25%);width:34px;height:42px}.shape-luer.variant-2 i{clip-path:polygon(8% 0,92% 0,77% 100%,23% 100%)}.shape-luer.variant-3 i{clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)}.shape-luer.variant-4 i{width:30px;height:30px}.shape-luer.variant-5 i{width:48px}.shape-stopper i{background:repeating-linear-gradient(#4f5961 0 5px,#171b1f 5px 9px);border-radius:8px;width:38px;height:34px}.shape-stopper.variant-2 i{border-radius:18px 18px 7px 7px}.shape-stopper.variant-4 i{height:46px}.shape-stopper.variant-5 i{box-shadow:inset 0 0 0 4px #6e7780}.shape-rod i{background:var(--swatch-colour);border-radius:4px;width:76%;height:13px}.shape-rod.variant-2 i{border-radius:10px}.shape-rod.variant-3 i{clip-path:polygon(0 25%,100% 0,100% 100%,0 75%)}.shape-rod.variant-4 i{background:repeating-linear-gradient(45deg,var(--swatch-colour) 0 7px,color-mix(in srgb,var(--swatch-colour),#000 18%) 7px 10px)}.shape-rod.variant-5 i{height:8px}.shape-rod.variant-6 i{height:20px}.shape-rod.variant-7 i{background:linear-gradient(#dbdfe2,#6e777d)}.shape-flange i{background:var(--swatch-colour);border-radius:5px;width:18px;height:46px;position:relative}.shape-flange i:before,.shape-flange i:after{content:"";background:var(--swatch-colour);border-radius:50%;width:60px;height:12px;position:absolute;left:50%;transform:translate(-50%)}.shape-flange i:before{top:-4px}.shape-flange i:after{bottom:-4px}.shape-flange.variant-2 i:before,.shape-flange.variant-2 i:after{clip-path:polygon(0 50%,20% 0,80% 0,100% 50%,80% 100%,20% 100%);width:72px}.shape-flange.variant-3 i:before,.shape-flange.variant-3 i:after{width:42px}.shape-flange.variant-5 i{height:34px}.shape-closure i{border-radius:7px 7px 13px 13px;width:34px;height:45px}.shape-closure.variant-2 i{border-radius:14px;height:35px}.shape-closure.variant-3 i{width:25px;height:52px}.shape-closure.variant-4 i{border-bottom:7px solid #6b7680}.option-card strong{font-size:12px;line-height:1.35}.option-card small{color:#86868b;margin-top:4px;font-size:10px;line-height:1.35}.option-card code{color:#0071e3;margin-top:auto;padding-top:8px;font-size:9px}.colour-studio{border-top:1px solid #e5e5e7;margin-top:28px;padding-top:28px}.colour-heading{justify-content:space-between;gap:18px;display:flex}.colour-heading span{color:#86868b;font-size:10px}.colour-heading h3{margin:3px 0 0;font-size:21px}.colour-target{align-items:start;gap:4px;display:flex}.colour-target button{background:#f2f2f5;border:0;border-radius:14px;padding:7px 10px;font-size:10px}.colour-target button.active{color:#fff;background:#1d1d1f}.spectrum-picker{color:#fff;text-shadow:0 1px 4px #0009;background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:12px;grid-template-columns:1fr 105px;align-items:center;gap:15px;min-height:72px;margin:20px 0 14px;padding:12px 14px;font-size:11px;font-weight:650;display:grid;overflow:hidden}.spectrum-picker input{background:0 0;border:3px solid #ffffffe6;border-radius:10px;width:105px;height:45px}.pantone-field label{color:#6e6e73;margin-bottom:7px;font-size:10px;display:block}.pantone-field>div{border:1px solid #d2d2d7;border-radius:10px;align-items:center;gap:10px;min-height:46px;padding:0 12px;display:flex}.pantone-field i{border-radius:50%;width:19px;height:19px}.pantone-field input{border:0;outline:none;flex:1;font-size:12px;font-weight:650}.swatch-grid{grid-template-columns:repeat(12,1fr);gap:5px;margin-top:13px;display:grid}.swatch-grid button{aspect-ratio:1;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #d2d2d7}.colour-note{color:#86868b;margin:12px 0 0;font-size:9px;line-height:1.45}.option-footer{background:linear-gradient(#0000,#fff 20%);justify-content:space-between;gap:12px;margin-top:32px;padding-top:18px;display:flex;position:sticky;bottom:0}.option-footer button{min-width:110px}.option-footer button:disabled{opacity:.4}.model-guide{color:#fff;background:#0a1f2b;grid-template-columns:.8fr 1.2fr;gap:90px;padding:110px max(32px,7vw);display:grid}.model-guide-copy>span{color:#7ed4f3;letter-spacing:.16em;font-size:10px}.model-guide h2{letter-spacing:-.045em;margin:14px 0 20px;font-size:clamp(38px,4vw,62px);line-height:1.04}.model-guide-copy p{color:#b8c7cf;font-size:15px;line-height:1.65}.model-specs{border-top:1px solid #fff3;grid-template-columns:repeat(2,1fr);display:grid}.model-specs div{border-bottom:1px solid #fff3;border-right:1px solid #fff3;padding:28px}.model-specs strong{color:#7ed4f3;margin-bottom:42px;font-size:11px;display:block}.model-specs span{font-size:15px;font-weight:650}.model-specs p{color:#b8c7cf;margin:8px 0 0;font-size:11px;line-height:1.5}.model-specs code{color:#fff}@media (width<=1100px){.config-layout{grid-template-columns:1fr}.preview-panel{min-height:720px;position:relative;top:auto}.option-panel{border-left:0}.model-guide{grid-template-columns:1fr}.config-header>span{display:none}.config-header{grid-template-columns:1fr auto}}@media (width<=680px){.config-header{padding:0 14px}.config-header-actions button:first-child{display:none}.step-strip{padding:0 10px}.step-strip button{min-width:105px;padding:0 12px}.preview-panel{min-height:650px;padding:38px 18px 26px}.preview-copy h1{font-size:43px}.assembly-view{gap:4px;min-height:300px;margin-inline:-9%;transform:scale(.88)}.assembly-part.barrel{width:240px}.assembly-part.rod{width:120px}.preview-meta code{display:none}.model-placeholder{grid-template-columns:1fr;gap:8px}.option-panel{padding:34px 16px 24px}.option-grid{grid-template-columns:1fr 1fr}.swatch-grid{grid-template-columns:repeat(6,1fr)}.model-guide{gap:50px;padding:80px 20px}.model-specs{grid-template-columns:1fr}}