.configurator{--config-accent:#96b2a3}.config-title{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;padding:48px 4.8% 36px}.config-title .eyebrow{margin:0 0 14px}.config-title h1{font-size:clamp(44px,5vw,72px);letter-spacing:-.06em;line-height:1.03;font-weight:400;margin:0}.config-title h1 em{font-family:Georgia,serif;font-weight:400}.config-title>p{margin:0 0 2px;color:var(--muted);font-size:12px;line-height:1.7}.config-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;margin:0 4.8% 38px}.config-viewer{position:relative;min-height:600px;aspect-ratio:1.23;background:#191d22;border:1px solid #30373b;border-radius:4px;overflow:hidden;isolation:isolate}.config-viewer canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}.config-viewer canvas:active{cursor:grabbing}.config-viewer canvas:focus-visible{outline:2px solid var(--config-accent);outline-offset:-3px}.viewer-top{position:absolute;z-index:2;top:25px;left:26px;right:26px;display:flex;align-items:flex-start;justify-content:space-between;gap:15px;pointer-events:none;color:#e6e7e2;font-size:11px;letter-spacing:.12em}.viewer-top b{display:block;font-weight:400;color:#858e92;font-size:8px;letter-spacing:.16em;margin-top:7px}.live-label{font-size:8px;letter-spacing:.14em;color:var(--config-accent);white-space:nowrap}.viewer-bottom{position:absolute;z-index:2;bottom:20px;left:26px;right:20px;display:flex;justify-content:space-between;align-items:center;gap:18px}.viewer-bottom>span{font-size:10px;line-height:1.6;color:#aab0af;max-width:230px;pointer-events:none}.viewer-bottom b{padding:0 6px;font-weight:400;color:#657171}.camera-buttons{display:flex;gap:6px}.camera-buttons button{display:grid;place-items:center;width:36px;height:36px;background:#14191dd9;border:1px solid #485052;border-radius:50%;color:#e1e5df;font-size:20px}.camera-buttons button:hover{border-color:var(--config-accent)}.camera-buttons button:disabled{opacity:.35;cursor:default}.viewer-axis{position:absolute;z-index:2;bottom:90px;left:29px;width:30px;height:40px;font-size:8px;color:#758380;pointer-events:none}.viewer-axis i{display:block;width:1px;height:25px;position:absolute;left:7px;top:8px;background:#647a72;transform:rotate(0deg)}.viewer-axis i:after{content:'';display:block;width:23px;height:1px;position:absolute;bottom:0;left:0;background:#8c7764;transform:rotate(-17deg);transform-origin:left}.viewer-axis span{position:absolute;top:0;left:4px}.viewer-axis b{position:absolute;bottom:6px;right:-6px;font-weight:400}.config-panel{padding:5px 0 0;min-width:0}.panel-intro{padding-bottom:24px;border-bottom:1px solid var(--line)}.panel-intro .eyebrow{font-size:8px!important}.panel-intro h2{font-size:34px;font-weight:400;letter-spacing:-.05em;margin:13px 0 9px}.panel-intro h2 span{font-size:13px;vertical-align:top;margin-left:4px;line-height:1.6}.panel-intro p{font-size:11px;color:var(--muted);margin:0}.config-panel fieldset{border:0;padding:0;margin:25px 0}.config-panel legend{width:100%;font-size:11px;margin-bottom:15px;padding:0;color:var(--ink)}.config-panel legend>span{color:#747d7b;margin-right:11px;font-size:9px}.config-panel legend output{float:right;color:var(--config-accent);font-size:10px}.color-options{display:flex;gap:9px;align-items:center;padding:2px}.color-swatch,.custom-swatch{position:relative;width:38px;height:38px;flex:1;max-width:40px;border-radius:50%;border:4px solid #111318;background:var(--swatch);box-shadow:0 0 0 1px #444a4b;padding:0;cursor:pointer}.color-swatch[aria-pressed=true]{box-shadow:0 0 0 2px #e7e9dd}.color-swatch[aria-pressed=true]:after{content:'✓';display:grid;place-items:center;position:absolute;inset:0;font-size:15px;color:#fff;text-shadow:0 1px 4px #000}.custom-swatch{display:grid;place-items:center;background:conic-gradient(#db8975,#ceb681,#9db79b,#7c9ebd,#ba93bd,#db8975);color:white;font-size:19px}.custom-swatch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;padding:0}.custom-swatch:focus-within{outline:2px solid var(--mint);outline-offset:5px}.material-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.material-options button{background:#191c21;border:1px solid var(--line);border-radius:4px;padding:13px 5px 11px;color:var(--ink);text-align:center}.material-options button[aria-pressed=true]{border-color:var(--config-accent);background:#1e2928}.material-options i{display:block;width:35px;height:35px;border-radius:50%;margin:0 auto 12px;background:#96b2a3}.material-options strong{display:block;font-weight:400;font-size:10px;white-space:nowrap}.material-options small{display:block;margin:7px auto 0;line-height:1.4;max-width:75px;font-size:8px;color:var(--muted);min-height:23px}.material-options .sample-matte{background:radial-gradient(circle at 35% 30%,#c7d4c9,#70867b 70%,#4a5e58)}.material-options .sample-metal{background:linear-gradient(135deg,#384b46 5%,#e2efe5 28%,#729086 35%,#182e29 53%,#b6c7bb 80%,#33463e);box-shadow:inset -3px -4px 7px #0005}.material-options .sample-ceramic{background:radial-gradient(ellipse at 35% 23%,white 1%,#d8e4d6 8%,#98b7a7 24%,#6b8c7b 65%,#3e594d);box-shadow:inset -3px -3px 8px #12271c66}.light-options{display:flex;gap:7px}.light-options button{flex:1;min-height:37px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:10px}.light-options button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#15191b}.config-actions{border-top:1px solid var(--line);padding-top:19px;display:flex;flex-direction:column;gap:10px}.config-actions button:first-child{min-height:43px;background:transparent;border:1px solid #485754;border-radius:4px;color:var(--ink);font-size:11px}.config-actions button:first-child[aria-pressed=true]{background:#263e35;border-color:var(--config-accent)}.config-actions button:first-child span{margin-right:8px;font-size:18px;vertical-align:middle}.config-actions button:last-child{align-self:center;background:transparent;border:0;font-size:10px;color:var(--muted);min-height:30px;text-decoration:underline;text-underline-offset:4px}.config-summary{font-size:9px;color:var(--config-accent);text-align:center;line-height:1.6;margin:10px 0 0}.viewer-error{position:absolute;z-index:5;left:8%;right:8%;top:42%;padding:24px;background:#242d30;border:1px solid #647872;font-size:13px;line-height:1.7}.viewer-error[hidden]{display:none}.configurator .demo-note{padding-top:70px}.configurator .keyboard-help{font-size:12px!important}@media(min-width:1700px){.config-layout{grid-template-columns:minmax(0,1fr) 360px;gap:40px}.config-panel{padding-top:20px}.config-panel fieldset{margin:30px 0}.config-viewer{min-height:690px}.lab-nav nav{gap:24px}.lab-nav nav a{font-size:11px}}
@media(max-width:1100px){.config-layout{grid-template-columns:minmax(0,1fr) 280px;gap:22px}.config-viewer{min-height:590px;aspect-ratio:auto}.config-title{padding-top:36px}.viewer-bottom{left:20px;right:17px;gap:12px}.viewer-bottom>span{max-width:150px;font-size:9px}.viewer-top{left:20px;right:20px}.config-panel legend{font-size:10px}.color-options{gap:7px}.color-swatch,.custom-swatch{height:34px;width:34px}.material-options small{font-size:7px}.lab-nav .lab-index{display:none}}
@media(max-width:800px){.config-title{padding:32px 5% 25px;align-items:flex-start}.config-title h1{font-size:48px}.config-title>p{display:none}.config-layout{grid-template-columns:1fr;gap:25px;margin:0 5% 30px}.config-viewer{min-height:0;height:470px;aspect-ratio:auto}.config-panel{padding:0 3px}.panel-intro{display:none}.config-panel fieldset{margin:0 0 23px}.color-options{max-width:335px;gap:12px}.color-swatch,.custom-swatch{width:40px;height:40px}.material-options button{padding:13px 7px}.material-options i{margin-bottom:9px}.material-options small{font-size:8px;min-height:0;max-width:95px}.material-options strong{font-size:11px}.light-options button{min-height:41px}.config-actions{padding-top:18px}.viewer-top{top:21px}.viewer-bottom{bottom:18px}.viewer-bottom>span{max-width:190px;font-size:9px}.config-panel legend{font-size:11px}.lab-nav nav{gap:22px}.lab-nav nav a{font-size:10px}.lab-nav{gap:0}.config-summary{font-size:10px}.configurator .demo-note{padding-top:55px}}
@media(max-width:380px){.config-viewer{height:430px}.viewer-bottom>span{max-width:150px;font-size:8px}.viewer-bottom{gap:6px;left:16px;right:14px}.camera-buttons button{width:32px;height:32px}.viewer-top{left:17px;right:17px}.viewer-top>span{font-size:9px}.viewer-top .live-label{font-size:7px}.config-title h1{font-size:43px}.material-options strong{font-size:10px}.color-options{gap:9px}.color-swatch,.custom-swatch{height:35px;max-width:35px}}

.hex-field{display:flex;align-items:center;gap:12px;margin-top:13px;font-size:9px;letter-spacing:.1em;color:var(--muted)}.hex-field input{width:90px;border:1px solid var(--line);border-radius:3px;background:#191d22;color:var(--ink);font-size:11px;padding:7px 9px;letter-spacing:.04em}.hex-field input[aria-invalid=true]{border-color:#e38c6e}