.live-studio{background:#edf1fb;padding:74px 0 0;--chosen:#7c8466;--hue:76;--sat:13%;--lit:46%}.live-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:70px;margin-bottom:48px}.live-heading .eyebrow{font-size:10px;letter-spacing:.17em}.live-heading h2{font-size:clamp(43px,4.5vw,64px)}.live-heading>p{max-width:360px;color:var(--muted);font-size:15px;line-height:1.8}.live-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);gap:56px;align-items:start}.preview-column{position:sticky;top:112px;min-width:0}.live-stage{position:relative;border-radius:23px;overflow:hidden;background:#efe5d6;aspect-ratio:1.5}.live-stage canvas{display:block;width:100%;height:100%;position:absolute;inset:0;opacity:0}.live-stage[data-render-state=ready] canvas{opacity:1}.live-stage[data-render-state=ready] .preview-fallback{visibility:hidden}.preview-fallback{position:absolute;inset:0;height:100%;aspect-ratio:auto}.live-stage-top{position:absolute;top:19px;left:21px;right:21px;display:flex;align-items:center;justify-content:space-between;gap:12px}.live-stage-top>span{font-size:8px;letter-spacing:.07em;background:#ffffffe0;padding:9px 11px;border-radius:30px;display:flex;align-items:center;gap:6px;font-weight:600}.live-stage-top>span i{width:5px;height:5px;border-radius:50%;background:#00a99a}.live-stage-top>button{display:flex;align-items:center;gap:9px;border:1px solid #11264d1f;border-radius:25px;padding:7px 10px;background:#ffffffce;color:var(--navy);font-size:10px}.live-stage-top>button:hover{background:#fff}.live-stage-top>button span{font-size:16px;line-height:1}.preview-bottom{display:flex;align-items:center;gap:11px;position:absolute;left:19px;bottom:18px;right:19px;background:#ffffffeb;backdrop-filter:blur(8px);border-radius:13px;padding:12px 15px}.preview-color-chip{width:30px;height:30px;border-radius:9px;background:var(--chosen);border:1px solid #11264d19;flex:0 0 auto}.preview-bottom>div{display:flex;flex-direction:column;gap:3px}.preview-bottom strong{font-size:11px;letter-spacing:.05em;font-weight:600}.preview-bottom>div>span{font-size:9px;color:var(--muted)}.preview-angle{margin-left:auto;font-size:9px;color:var(--muted)}.preview-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.preview-actions p{font-size:10px;line-height:1.6;color:var(--muted)}.preview-actions button{border:0;background:transparent;display:flex;align-items:center;gap:15px;color:var(--blue);white-space:nowrap;font-size:11px;font-weight:600;padding:7px 0}.preview-actions button:disabled{opacity:.45;cursor:wait}.preview-actions button span{font-size:18px}.live-note{font-size:10px;line-height:1.8;color:var(--muted);margin-top:15px;max-width:650px}.live-controls{min-width:0;padding:3px 0 0}.control-heading,.fabric-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.control-heading>.eyebrow,.fabric-heading>.eyebrow{margin:0;font-size:9px;letter-spacing:.13em}.control-heading>span:last-child,.fabric-heading>span:last-child{font-size:11px;color:var(--muted)}.spectrum-control{margin-top:25px}.slider-label{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:12px}.slider-label>label{font-size:12px;font-weight:600}.slider-label>output{font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted)}.spectrum-range,.tone-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:13px;margin:0;border-radius:20px;padding:0;cursor:ew-resize;border:1px solid #11264d10;outline-offset:7px;touch-action:pan-y}.spectrum-range{background:linear-gradient(90deg,#f44d55 0%,#f2cd4d 16.67%,#50c979 33.33%,#46cbd0 50%,#5069df 66.67%,#c253cb 83.33%,#f44d55 100%)}.spectrum-range::-webkit-slider-thumb,.tone-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border:4px solid white;border-radius:50%;box-shadow:0 0 0 1px #11264d25,0 3px 9px #11264d25;background:var(--chosen);cursor:grab}.spectrum-range:active::-webkit-slider-thumb,.tone-range:active::-webkit-slider-thumb{cursor:grabbing}.spectrum-range::-moz-range-thumb,.tone-range::-moz-range-thumb{width:17px;height:17px;border:4px solid white;border-radius:50%;box-shadow:0 0 0 1px #11264d25;background:var(--chosen);cursor:grab}.spectrum-control>p{font-size:10px;color:var(--muted);margin:13px 0 0;line-height:1.6}.tone-sliders{display:grid;grid-template-columns:1fr 1fr;gap:23px;margin-top:23px}.tone-sliders .slider-label{margin-bottom:10px}.tone-sliders .slider-label label{font-weight:500;font-size:10px}.tone-range{height:8px}.tone-range::-webkit-slider-thumb{width:18px;height:18px;border-width:3px}.tone-range::-moz-range-thumb{width:13px;height:13px;border-width:3px}.saturation-range{background:linear-gradient(90deg,hsl(var(--hue),0%,var(--lit)),hsl(var(--hue),100%,var(--lit)))}.lightness-range{background:linear-gradient(90deg,#10141b,hsl(var(--hue),var(--sat),50%),#fff)}.exact-color{display:flex;gap:18px;margin-top:24px;align-items:flex-end}.exact-color>label{flex:1.25;min-width:0}.exact-color label{font-size:8px;color:var(--muted);font-weight:600;letter-spacing:.06em}.exact-color input{display:block;width:100%;min-width:0;background:#ffffffc4;border:1px solid #11264d1c;border-radius:8px;padding:10px 11px;height:39px;color:var(--navy);font-size:12px;font-variant-numeric:tabular-nums;margin-top:6px;outline-offset:3px}.exact-color input[aria-invalid=true]{border-color:#b5464a}.rgb-fields{flex:2;display:flex;gap:8px;min-width:0}.rgb-fields>label{min-width:0;flex:1}.rgb-fields input{padding:10px 8px;-moz-appearance:textfield}.rgb-fields input::-webkit-inner-spin-button,.rgb-fields input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.field-error{min-height:0;font-size:10px;color:#a03642;line-height:1.5;margin-top:7px}.field-error:empty{display:none}.curated-colors{margin-top:20px}.curated-colors>span{font-size:9px;color:var(--muted)}.curated-swatches{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.curated-swatches button{width:24px;height:24px;border-radius:50%;background:var(--preset);border:2px solid #edf1fb;box-shadow:0 0 0 1px #11264d13;transition:transform .15s}.curated-swatches button:hover{transform:translateY(-2px)}.curated-swatches button.selected{box-shadow:0 0 0 1.5px var(--navy)}.fabric-heading{padding-top:27px;margin-top:23px;border-top:1px solid var(--line)}.fabric-options{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:15px}.fabric-options button{background:#ffffffb3;border:1px solid transparent;border-radius:10px;overflow:hidden;padding:6px;color:var(--navy);min-width:0}.fabric-options button.selected{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue)}.fabric-options strong{font-size:8px;font-weight:500;display:block;line-height:1.2;padding:7px 1px 3px;white-space:nowrap}.fabric-swatch{height:38px;width:100%;display:block;border-radius:6px;background-color:var(--chosen);position:relative;overflow:hidden}.fabric-swatch:after{content:'';position:absolute;inset:0;mix-blend-mode:soft-light}.fabric-oxford:after{background:repeating-linear-gradient(0deg,#fff8 0 1px,#0004 1px 2px),repeating-linear-gradient(90deg,transparent 0 1px,#fff5 1px 2px)}.fabric-ripstop:after{background:repeating-linear-gradient(0deg,#0004 0 1px,transparent 1px 9px),repeating-linear-gradient(90deg,#fff7 0 1px,transparent 1px 9px)}.fabric-canvas:after{background:repeating-linear-gradient(0deg,#fff7 0 1px,#0003 1px 3px),repeating-linear-gradient(90deg,transparent 0 2px,#fff7 2px 3px)}.fabric-twill:after{background:repeating-linear-gradient(135deg,#fff9 0 1px,#0003 1px 4px)}.fabric-microfiber:after{background:repeating-linear-gradient(85deg,#fff3 0 1px,transparent 1px 3px)}.fabric-corduroy:after{background:repeating-linear-gradient(90deg,#fff8 0 2px,#0006 3px 4px,transparent 5px 7px)}.fabric-boucle:after{background:radial-gradient(ellipse at center,#fff7 0 25%,#0005 27% 38%,transparent 40%) 0 0/8px 7px,radial-gradient(ellipse at center,#fff7 0 25%,#0005 27% 38%,transparent 40%) 4px 4px/9px 8px}.fabric-felt:after{background:repeating-linear-gradient(35deg,#fff5 0 1px,transparent 1px 4px),repeating-linear-gradient(-47deg,#0002 0 1px,transparent 1px 6px)}#fabric-description{font-size:9px;color:var(--muted);margin-top:12px;line-height:1.6}.live-inquiry{display:flex;justify-content:space-between;font-size:12px;margin-top:24px;gap:15px;min-height:51px;padding:14px 21px}.live-inquiry>span{font-size:21px;line-height:1}.live-quote-note{font-size:9px;color:var(--muted);line-height:1.6;margin-top:11px}.beyond-color{margin-top:55px;padding:26px 0 31px;border-top:1px solid var(--line);display:flex;align-items:center;gap:35px}.beyond-color>span{font-size:8px;letter-spacing:.09em;white-space:nowrap;font-weight:600;color:var(--blue)}.beyond-color p{font-size:11px;color:var(--muted);line-height:1.8}.beyond-color i{font-style:normal;color:#98a4b5;padding:0 8px}
@media(max-width:1150px){.live-layout{gap:35px;grid-template-columns:minmax(0,1.4fr) minmax(320px,1fr)}.preview-bottom{left:13px;right:13px;bottom:12px}.live-stage-top{left:14px;right:14px;top:14px}.preview-angle{display:none}.live-heading>p{max-width:300px}.curated-swatches{gap:7px}.curated-swatches button{width:22px;height:22px}.beyond-color{gap:22px}}
@media(max-width:900px){.live-layout{grid-template-columns:minmax(0,1fr) minmax(300px,1fr);gap:28px}.live-heading{gap:35px}.live-heading h2{font-size:49px}.preview-column{top:95px}.live-stage-top>span{font-size:6px;padding:7px 8px}.live-stage-top>button{font-size:8px;padding:5px 7px}.preview-bottom{padding:9px 11px;gap:8px}.preview-bottom strong{font-size:9px}.preview-bottom>div>span{font-size:8px}.preview-color-chip{width:24px;height:24px}.preview-actions{gap:15px}.preview-actions p{font-size:9px}.preview-actions button{font-size:10px;gap:8px}.live-note{font-size:9px}.curated-swatches{gap:8px}.curated-swatches button{width:23px;height:23px}.exact-color{gap:10px}.fabric-options{gap:7px}.beyond-color{display:block}.beyond-color p{margin-top:12px}}
@media(max-width:700px){.live-studio{padding-top:45px}.live-heading{display:block;margin-bottom:28px}.live-heading h2{font-size:43px}.live-heading>p{max-width:100%;font-size:13px;margin-top:21px}.live-heading .eyebrow{font-size:9px;margin-bottom:17px}.live-layout{grid-template-columns:1fr;gap:33px}.preview-column{position:static}.live-stage{border-radius:16px;aspect-ratio:1.32}.live-stage canvas,.preview-fallback{top:0;height:auto;aspect-ratio:1.5}.live-stage-top{left:12px;right:12px;top:12px}.live-stage-top>span{font-size:6px;padding:7px 9px}.live-stage-top>button{font-size:8px}.preview-bottom{left:11px;right:11px;bottom:11px;padding:9px 11px;border-radius:10px}.preview-bottom>div>span{font-size:8px}.preview-angle{display:block;font-size:8px}.preview-color-chip{width:25px;height:25px;border-radius:7px}.preview-actions{padding:12px 0}.preview-actions p{font-size:9px;max-width:205px}.preview-actions button{font-size:10px}.live-note{font-size:9px;margin-top:12px}.live-controls{padding-top:0}.control-heading>.eyebrow,.fabric-heading>.eyebrow{font-size:9px}.control-heading>span:last-child,.fabric-heading>span:last-child{font-size:10px}.spectrum-control{margin-top:23px}.spectrum-range{height:14px}.slider-label label{font-size:12px}.spectrum-control>p{font-size:10px}.tone-sliders{gap:23px;margin-top:22px}.exact-color{gap:15px;margin-top:23px}.exact-color input{font-size:14px;height:43px;padding:11px}.rgb-fields{gap:8px}.rgb-fields input{padding:10px 8px}.curated-colors{margin-top:22px}.curated-swatches{gap:10px}.curated-swatches button{height:24px;width:24px}.fabric-heading{margin-top:25px;padding-top:25px}.fabric-options{gap:10px;margin-top:15px}.fabric-options button{padding:7px}.fabric-swatch{height:43px}.fabric-options strong{font-size:8px;padding-top:8px}.live-inquiry{font-size:12px;margin-top:22px}.live-quote-note{font-size:9px}.beyond-color{margin-top:36px;padding:22px 0 25px}.beyond-color p{font-size:10px;line-height:2}.beyond-color i{padding:0 5px}}
@media(prefers-reduced-motion:reduce){.curated-swatches button{transition:none}}
@media(max-width:700px){.live-layout{display:block}.preview-column{position:sticky;top:74px;z-index:5;background:#edf1fb;padding-bottom:12px}.live-controls{margin-top:25px}.live-note{display:none}.preview-actions{border-bottom:0;padding-bottom:0}.live-quote-note:after{content:' Digital concept; final color and material require physical sample approval.'}.beyond-color{position:relative;z-index:7;background:#edf1fb}}
