*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 54% 42%,#21112d 0,#100b1b 65%,#100917);color:#f8f6ff;font:15px Arial,sans-serif}button,select,input,textarea{font:inherit}button{cursor:pointer} .top{height:66px;border-bottom:1px solid #352044;display:flex;align-items:center;justify-content:space-between;padding:0 3%;gap:30px;background:#1b1029}.brand{font-size:46px;font-weight:900;font-style:italic;letter-spacing:-5px;text-decoration:none;color:#fff;text-shadow:-4px 2px #7422e3}.top nav{display:flex;gap:40px;height:100%;align-items:center}.top nav a{color:#fff;text-decoration:none;font-size:17px;height:100%;display:flex;align-items:center;position:relative}.top nav a.active:after{content:"";height:4px;position:absolute;bottom:0;left:0;right:0;background:#a12af5;border-radius:5px}.lang{white-space:nowrap}.lang em{color:#9c40e9}.layout{display:grid;grid-template-columns:minmax(235px,19%) minmax(480px,1fr) minmax(320px,26%);min-height:calc(100vh - 66px)}.left{padding:29px 20px;border-right:1px solid #291b3b}.left h1{font-size:26px;white-space:nowrap;margin:0 0 8px}.sub{color:#c9c3d3;font-size:19px;margin:0 0 35px}.model-label{font-size:18px;font-weight:bold;display:block;margin-bottom:10px}select{width:100%;padding:10px 14px;color:white;background:#140e20;border:1px solid #736581;border-radius:8px}.steps{margin-top:34px;border-bottom:1px solid #4b2a67;padding-bottom:16px}.step{width:100%;display:flex;gap:15px;align-items:center;text-align:left;border:0;background:transparent;color:white;padding:10px 12px;font-size:17px;border-radius:10px}.step.active{background:linear-gradient(110deg,#8d16ed,#6322a1);font-weight:bold}.number{border:1px solid #a9a0b3;border-radius:50%;width:33px;height:33px;display:grid;place-items:center;flex-shrink:0}.step.active .number{background:#170d28;border-color:#170d28}.small-side{width:100%;height:235px;object-fit:contain;margin:18px 0 4px}.link{display:block;font-size:13px;color:#d8c9e9;margin:8px 0 12px}.link input{accent-color:#9629e9}.reset,.back{border:1px solid #8d719f;border-radius:8px;color:white;background:transparent;padding:12px;width:100%}.center{padding:25px 10px 10px;min-width:0}.tabs{display:flex;justify-content:center;gap:9px}.tabs button{padding:10px 18px;border:1px solid #584367;border-radius:7px;color:#eee;background:#130e1c;white-space:nowrap}.tabs button.active{background:linear-gradient(#9b18f5,#6d0cce);border-color:#ad55ff}.viewer{display:flex;align-items:center;justify-content:center;gap:12px;height:min(73vh,780px);min-height:500px}.thumbs{width:120px;flex:0 0 120px;display:flex;flex-direction:column;gap:8px}.thumb{height:120px;background:#100c18;border:1px solid #84718b;border-radius:12px;padding:3px}.thumb.active{border:2px solid #b443ff;box-shadow:0 0 13px #8b28e8}.thumb img{height:100%;width:100%;object-fit:contain}.arr{border:1px solid #75548d;color:white;background:#342044;border-radius:50%;width:47px;height:47px;flex:0 0 47px;font-size:35px;line-height:1}.rig-frame{position:relative;min-width:0;height:100%;width:min(100%,565px);display:flex;align-items:center;justify-content:center}.rig-frame img{height:100%;width:100%;object-fit:fill;display:block}.rig-frame svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;mix-blend-mode:multiply}.zone-shape{cursor:pointer;stroke:transparent;stroke-width:2;transition:fill-opacity .12s}.zone-shape:hover,.zone-shape.active{stroke:#e7adff;stroke-width:3;filter:drop-shadow(0 0 4px #ae51ff)}.dots{display:flex;gap:9px;justify-content:center;margin:2px}.dot{width:11px;height:11px;border-radius:50%;background:#8b8095;border:0;padding:0}.dot.active{background:#9c22ec}.tip{text-align:center;color:#afa2bc;font-size:12px}.right{padding:10px 17px 20px}.right h2{font-size:20px;margin:6px 0 9px}.right h3{font-size:17px;margin:15px 0 9px}.zones{max-height:320px;overflow:auto}.zone{display:flex;align-items:center;gap:11px;width:100%;background:none;color:#f3f0f8;border:0;border-bottom:1px solid #493851;text-align:left;padding:4px 7px;font-size:13px;min-height:25px}.zone.active{background:#60208d;border:1px solid #c45cff;border-radius:7px}.zone .chip{width:25px;height:22px;flex-shrink:0;border:1px solid #d9d3e2;border-radius:4px}.palette-title{border-top:1px solid #473450;padding-top:10px}.palette{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.swatch{aspect-ratio:1.2;border:1px solid #e5d6ed;border-radius:9px;min-height:30px}.swatch.active,.strap.active{outline:3px solid #a12bf4;outline-offset:2px}.straps{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.strap{height:42px;border:1px solid #ccc;border-radius:7px}.order{border:1px solid #3d2b52;border-radius:12px;background:#22172e;padding:12px;margin-top:18px}.order h3{margin:0 0 10px}.code{border:1px solid #594467;border-radius:7px;padding:10px 12px;display:flex;justify-content:space-between}.code button{border:0;background:none;color:white;font-size:20px}.next{width:100%;padding:15px;border:0;border-radius:12px;background:linear-gradient(100deg,#ff9700,#ff6a00);font-size:22px;color:white;font-weight:bold;margin-top:13px}.back{margin-top:8px}.disclaimer{font-size:11px;color:#a99ab9;line-height:1.45}.form{display:grid;gap:11px}.form label{display:grid;gap:5px;color:#ded2e7}.form input,.form textarea,.form select{padding:10px;background:#181021;border:1px solid #735b80;border-radius:7px;color:#fff;width:100%}.form textarea{min-height:75px}.form p{line-height:1.5;color:#c7b7d4}.summary{white-space:pre-wrap;font-size:12px;line-height:1.5;max-height:380px;overflow:auto}.download{background:#7625c4;color:white;border:0;padding:12px;border-radius:8px}@media(max-width:1250px){.layout{grid-template-columns:220px minmax(420px,1fr) 300px}.top nav{gap:15px}.viewer{gap:4px}.thumbs{width:78px;flex-basis:78px}.thumb{height:88px}.arr{width:32px;height:32px;flex-basis:32px}.tabs button{padding:8px}}@media(max-width:960px){.layout{grid-template-columns:1fr}.top nav{display:none}.left{border-right:0}.left .small-side{display:none}.steps{display:flex;overflow:auto;margin-top:12px}.step{font-size:12px;white-space:nowrap}.number{width:25px;height:25px}.center{order:1}.right{order:2}.viewer{height:550px;min-height:0}.thumbs{width:72px;flex-basis:72px}.thumb{height:85px}.right .zones{max-height:none}.left h1{white-space:normal}}@media(max-width:550px){.top{height:60px}.brand{font-size:38px}.tabs{overflow:auto;justify-content:flex-start}.tabs button{font-size:12px}.viewer{height:390px}.thumbs{width:50px;flex-basis:50px}.thumb{height:65px}.arr{width:25px;height:25px;flex-basis:25px;font-size:22px}.center{padding:8px 4px}.left{padding:18px}}
/* v7: geometry stays aligned with each artwork; never stretch the image */
.rig-frame{width:auto;max-width:100%;flex:1 1 0;min-width:0;align-items:center}
.rig-frame img{width:100%;height:100%;object-fit:contain}
.rig-frame svg{pointer-events:auto;mix-blend-mode:multiply}
.zone-shape{stroke:none;stroke-width:0}
.zone-shape:hover,.zone-shape.active{stroke:#d49aff;stroke-width:1.5;filter:none}
.zone-shape.piping{stroke-linecap:round;stroke-linejoin:round;fill:none;pointer-events:stroke}
.zone-shape.piping:hover,.zone-shape.piping.active{stroke-width:7}
.zone .chip{border:1px solid #ded7e8}

.rig-frame{position:relative}
.rig-frame img,.rig-frame svg{position:absolute;inset:0}

.rig-frame{flex:0 1 auto;height:min(100%,720px);width:auto;max-width:100%;}
.rig-frame.wide-view{height:auto;width:min(100%,690px)}
.rig-frame img{object-fit:fill}
@media(max-width:960px){.rig-frame{height:min(100%,530px)}}
/* SVG attributes define piping color and thickness; don't override them. */
.zone-shape.piping{stroke-width:6;stroke-opacity:.04}
.zone-shape.piping[stroke-opacity="0.94"]{stroke-opacity:.94}
.zone-shape.piping:hover,.zone-shape.piping.active{stroke-opacity:.95;stroke-width:7}

/* v8: native closed SVG panels; no bitmap color overlays */
.rig-frame{width:min(100%,560px);height:min(75vh,765px);aspect-ratio:565/765!important;display:flex;align-items:center;justify-content:center;background:none!important}
.rig-frame.wide-view{width:min(100%,560px);aspect-ratio:565/765!important}
.rig-frame>svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 16px 24px #0008)}
.rig-frame svg .paint-panel{cursor:pointer;transition:fill .12s ease}
.rig-frame svg .paint-panel:hover{filter:brightness(1.16)}
.rig-frame svg .paint-panel.selected{stroke-width:6;stroke:#dfb2ff;stroke-dasharray:8 5}
.thumbs .thumb{display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb-art{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.thumb-art svg{width:100%;height:100%;max-height:130px;pointer-events:none}
.small-side{min-height:145px;display:none}
@media(max-width:950px){.rig-frame{height:550px}.thumb-art svg{max-height:100px}}

/* v9 reference gallery */
.reference-photos{max-width:1450px;margin:40px auto;padding:22px;background:#191321;border:1px solid #3b2a4b;border-radius:16px;color:#fff;font-family:Arial,sans-serif}
.reference-photos h2{font-size:22px}.reference-photos p{color:#bcb0cc}.reference-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.reference-grid figure{margin:0;text-align:center;background:#251a31;border-radius:10px;padding:12px}.reference-grid img{width:100%;height:240px;object-fit:contain}.reference-grid figcaption{font-size:13px;padding:6px}@media(max-width:700px){.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-grid img{height:180px}}

/* v12: reference artwork with per-pixel panel masks */
.rig-frame canvas{display:block;width:100%;height:100%;object-fit:contain;max-height:76vh}.thumb canvas{display:block;width:100%;height:100%;object-fit:contain}.rig-frame{overflow:hidden}.thumb{overflow:hidden}.zones{max-height:350px;overflow-y:auto}.zone{min-height:34px;text-align:left}.rig-frame.wide-view canvas{image-rendering:auto}.tip{min-height:42px}.disclaimer{line-height:1.5} @media(max-width:700px){.rig-frame canvas{max-height:65vh}.zones{max-height:240px}}

/* v15 explicit side surfaces */
.side-panel{cursor:crosshair}.side-panel:hover{filter:brightness(1.14)}.rig-frame svg{width:100%;height:100%;max-height:76vh}.thumb svg{width:100%;height:100%;pointer-events:none}.part-number{font-size:10px;display:inline-flex;align-items:center;justify-content:center;background:#30213e;border:1px solid #756187;border-radius:50%;width:20px;min-width:20px;height:20px;margin-right:6px}.zone{gap:5px}.thumb{position:relative}.thumb::after{content:attr(aria-label);position:absolute;bottom:1px;left:0;right:0;font-size:10px;background:#160e20bb;color:#e4dbea}.link{line-height:1.4}
.rig-frame>svg{mix-blend-mode:normal;filter:none;position:static;inset:auto;overflow:visible}.rig-frame.wide-view{aspect-ratio:480/440!important}.rig-frame svg .side-panel{transition:fill .12s ease}

/* v16 original vector geometry */
.rig-frame{height:min(76vh,740px);aspect-ratio:auto!important}.rig-frame>svg.fire-art{mix-blend-mode:normal;position:static;filter:none;width:100%;height:100%;overflow:visible}.fire-art .color-surface{cursor:crosshair}.fire-art .color-surface:hover [data-surface]{filter:brightness(1.2)}.thumb .fire-art{width:100%;height:100%;pointer-events:none}.straps{grid-template-columns:repeat(6,1fr)}
.rig-frame .fire-art svg,.thumb .fire-art svg{mix-blend-mode:normal;position:static;inset:auto;max-height:none;filter:none}.fire-art .construction-base{pointer-events:none}

/* v17: keep the top view below its navigation controls */
.rig-frame[data-view="front"]{height:100%;max-height:100%;overflow:hidden}
.rig-frame[data-view="front"]>svg.fire-art{width:84%;height:84%;max-height:100%;overflow:hidden;flex-shrink:0}

/* v18: explicit painted / unpainted state */
.paint-status{margin-left:auto;font-size:15px;color:#d3b7eb;flex-shrink:0}.color-surface [data-surface]{transition:fill-opacity .12s ease}

/* v20 logo artwork and nondestructive panel lighting */
.top .brand{display:flex;align-items:center;flex-shrink:0;letter-spacing:normal;text-shadow:none;font-size:0}.top .brand img{display:block;width:240px;height:42px;object-fit:contain}.lighting-overlay{pointer-events:none!important}.fire-art .color-surface [data-surface]{transition:fill-opacity .12s ease}.fire-art .surface-lighting{pointer-events:none!important}@media(max-width:700px){.top .brand img{width:200px;height:36px}}

.reserve-choice{margin-top:16px;padding:12px;border:1px solid #584368;border-radius:10px;background:#251831}.reserve-choice[hidden]{display:none}.reserve-choice h3{margin:0 0 10px}.reserve-choice label{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:16px}.reserve-choice input{width:19px;height:19px;accent-color:#a000ef}.reserve-choice p{margin:7px 0 0 28px;font-size:13px;color:#c4b7ce}

@media(min-width:961px){.zones.with-handle{max-height:210px}}
