*{box-sizing:border-box}html{font-family:Inter,Arial,sans-serif;color:#151515;background:#f7f7f5}body{margin:0}.top{height:84px;background:#fff;border-bottom:1px solid #e8e8e8;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:sticky;top:0;z-index:5}.brand{text-decoration:none;color:#111;text-align:center;line-height:1}.brand b{display:block;letter-spacing:.08em;font-size:22px}.brand small{display:block;color:#df171f;font-size:8px;letter-spacing:.28em;margin-top:5px;font-weight:800}.back{color:#222;text-decoration:none;font-size:13px;font-weight:600}main{max-width:1500px;margin:auto;padding:54px 5vw 80px}.intro{max-width:820px;margin-bottom:42px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:#df171f}.intro h1{font-size:clamp(42px,6vw,86px);line-height:.94;letter-spacing:-.055em;margin:14px 0 20px}.intro>p:last-child{max-width:700px;line-height:1.65;color:#555}.workspace{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(380px,.65fr);gap:28px}.preview,.controls{background:#fff;border:1px solid #e8e8e8}.preview{min-height:680px;padding:28px;display:flex;flex-direction:column}.viewbar{display:flex;align-items:center;gap:7px;margin-bottom:18px}.viewbar .view{width:auto;margin:0;padding:9px 13px;background:#fff;color:#222;border:1px solid #d8d8d8;font-size:11px}.viewbar .view.active{background:#171717;color:#fff;border-color:#171717}.viewbar span{margin-left:auto;font-size:10px;color:#777;font-weight:600}.stage{flex:1;min-height:520px;background:linear-gradient(135deg,#f3f3f0,#e7e7e2);display:grid;place-items:center;padding:58px;perspective:1200px;overflow:hidden}.piece{--ratio:20/30;--depth-pct:1.77%;position:relative;height:min(430px,62vh);aspect-ratio:var(--ratio);transition:transform .35s ease;filter:drop-shadow(0 24px 26px #0003);transform-style:preserve-3d}.face{position:absolute;inset:0;border-radius:5px;overflow:hidden;background:#111;z-index:3;padding:2px}.photo{width:100%;height:100%;border-radius:3px;background:linear-gradient(145deg,#d71920 0 46%,#f5f5f1 46% 70%,#1d1d1d 70%);display:grid;place-content:center;text-align:center;color:#fff;position:relative;overflow:hidden}.photo span{font-weight:800;font-size:clamp(24px,4vw,52px);letter-spacing:-.04em}.photo small{margin-top:8px;font-size:11px}.shine{position:absolute;inset:2px;border-radius:3px;pointer-events:none;opacity:.35;background:linear-gradient(120deg,transparent 8%,#fff9 19%,transparent 32%,transparent 70%,#fff5 82%,transparent 92%);mix-blend-mode:screen}.side{position:absolute;display:none;z-index:1}.view-angle{transform:rotateY(-24deg) rotateX(1.2deg);transform-origin:center center}.view-angle .side-right{display:block}.side-right{top:2px;right:calc(-1 * var(--depth-px));width:var(--depth-px);height:calc(100% - 4px);border-radius:0 3px 3px 0;box-shadow:inset 1px 0 rgba(255,255,255,.55),2px 0 4px rgba(0,0,0,.12)}.side-bottom{display:none!important}.edge-gold .side-right:after,.edge-silver .side-right:after,.edge-black .side-right:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.7) 32%,rgba(255,255,255,.08) 48%,rgba(0,0,0,.18) 65%,rgba(255,255,255,.5) 82%,rgba(255,255,255,.05));mix-blend-mode:screen;opacity:.55;pointer-events:none}.edge-gold .face{background:linear-gradient(112deg,#8a6500 0%,#c99a16 10%,#f0c94a 25%,#fff5b0 36%,#d2a11b 48%,#9b7105 58%,#f5d760 74%,#fff8c8 82%,#b88708 100%)}.edge-gold .side{background:linear-gradient(102deg,#7b5900 0%,#bd8d0d 12%,#e7bb32 27%,#fff7bd 38%,#c89512 50%,#725100 61%,#e6bd38 76%,#fff9d1 85%,#9d7204 100%)}.edge-silver .face{background:linear-gradient(112deg,#3e4448 0%,#aeb7bd 12%,#f7fbfd 27%,#ffffff 36%,#8d979d 48%,#343a3e 58%,#dce3e7 73%,#ffffff 82%,#727c82 100%)}.edge-silver .side{background:linear-gradient(102deg,#30363a 0%,#919ba1 12%,#eaf0f3 27%,#ffffff 38%,#7f898f 50%,#262c30 61%,#d7dfe3 76%,#ffffff 85%,#626c72 100%)}.edge-black .face{background:linear-gradient(112deg,#010204 0%,#080b0e 20%,#25323b 30%,#eaf7ff 36%,#1a252c 41%,#030405 54%,#000 68%,#7895a7 76%,#f7fdff 81%,#10161a 86%,#010203 100%)}.edge-black .side{background:linear-gradient(102deg,#010204 0%,#06090c 21%,#1f2c34 30%,#eaf8ff 37%,#152027 42%,#020304 56%,#000 69%,#69889b 77%,#ffffff 82%,#0c1216 87%,#010203 100%)}.edge-painted-black .face{background:#151515;padding:1px}.edge-painted-black .side{background:#171717}.material-normal-glossy .shine{opacity:.32}.material-crystal-glossy .shine{opacity:.55;background:linear-gradient(118deg,transparent 5%,#fff 18%,transparent 31%,transparent 62%,#fff8 77%,transparent 89%)}.material-cross .photo:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.13;background:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 7px),repeating-linear-gradient(-45deg,#fff 0 1px,transparent 1px 7px)}.material-leather .photo:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.11;background:radial-gradient(ellipse at 20% 20%,#000 0 1px,transparent 1px 4px);background-size:8px 6px}.material-3d-sparkling .photo:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#fff 0 1px,transparent 1.5px);background-size:29px 31px,41px 37px;background-position:0 0,12px 9px}.summary{padding-top:22px;display:flex;justify-content:space-between;gap:20px;font-size:13px}.summary span{color:#666;text-transform:capitalize}.controls{padding:32px}.controls label>select{width:100%;margin-top:10px;padding:15px;border:1px solid #ccc;background:#fff;font:inherit}.controls>form>label,.controls legend{font-size:13px;font-weight:700}fieldset{border:0;padding:0;margin:28px 0}.choices{display:grid;gap:8px;margin-top:10px}.finish-choices{grid-template-columns:1fr 1fr}.choice{display:grid;grid-template-columns:18px 62px 1fr;align-items:center;gap:9px;border:1px solid #ddd;padding:10px;cursor:pointer;min-height:68px}.choice:has(input:checked){border-color:#df171f;box-shadow:inset 3px 0 #df171f}.choice input{accent-color:#df171f;margin:0}.choice span{display:grid;gap:3px}.choice b{font-size:12px}.choice small{font-size:10px;color:#666;line-height:1.3}.swatch{width:62px;height:42px;border-radius:3px;border:1px solid #ddd;background:#eee;position:relative;overflow:hidden}.finish-normal-glossy .swatch{background:linear-gradient(130deg,#d71920 0 45%,#fff 46% 70%,#222 71%)}.finish-normal-glossy .swatch:after,.finish-crystal-glossy .swatch:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 10%,#fff 28%,transparent 43%);opacity:.7}.finish-crystal-glossy .swatch{background:linear-gradient(130deg,#cfd0d0,#fff,#777)}.finish-cross .swatch{background:repeating-linear-gradient(45deg,#aaa 0 1px,#eee 1px 5px),repeating-linear-gradient(-45deg,#aaa 0 1px,#eee 1px 5px)}.finish-leather .swatch{background:radial-gradient(ellipse at 20% 20%,#777 0 1px,#171717 1px 4px);background-size:8px 6px}.finish-3d-sparkling .swatch{background:#888;background-image:radial-gradient(circle,#fff 0 1px,transparent 2px),radial-gradient(circle,#ddd 0 1px,transparent 2px);background-size:13px 15px,17px 19px}.edge-choices{grid-template-columns:1fr 1fr}.edge-choice .swatch{height:38px}.edge-gold .swatch,.edge-choice.edge-gold .swatch{background:linear-gradient(112deg,#7d5a00 0%,#c49310 12%,#edc541 27%,#fff6b7 36%,#ca9813 48%,#745200 58%,#e9c23f 74%,#fff9cd 83%,#9e7305 100%)}.edge-silver .swatch,.edge-choice.edge-silver .swatch{background:linear-gradient(112deg,#343a3e 0%,#a4adb3 12%,#eef3f6 27%,#fff 36%,#879197 48%,#2c3236 58%,#dce3e7 74%,#fff 83%,#687278 100%)}.edge-black .swatch,.edge-choice.edge-black .swatch{background:linear-gradient(112deg,#010204 0%,#070a0d 20%,#25343d 30%,#eefaff 36%,#162129 42%,#020304 56%,#000 69%,#66889b 77%,#fff 82%,#0b1115 87%,#010203 100%)}.edge-painted-black .swatch,.edge-choice.edge-painted-black .swatch{background:#191919}.note{background:#f5f5f2;padding:16px;display:grid;gap:5px;font-size:12px}.note span{color:#666;line-height:1.45}button{width:100%;border:0;background:#df171f;color:#fff;font:700 13px Inter;padding:17px;margin-top:24px;cursor:pointer}.micro{font-size:10px;line-height:1.5;color:#777;text-align:center}@media(max-width:1050px){.workspace{grid-template-columns:1fr}.preview{min-height:auto}.stage{min-height:500px}.piece{height:390px}}@media(max-width:600px){main{padding:34px 18px 60px}.preview,.controls{padding:18px}.stage{padding:38px 24px;min-height:420px}.piece{height:320px}.summary{display:grid}.intro h1{font-size:48px}.finish-choices,.edge-choices{grid-template-columns:1fr}.top{height:70px}.back{font-size:0}.back:after{content:'←';font-size:18px}}

/* R2.5 interactive 3D renderer */
.stage{position:relative;padding:0;min-height:560px;overflow:hidden;background:#efefec;display:block}.stage canvas{display:block;width:100%;height:100%;min-height:560px;touch-action:none;cursor:grab}.stage canvas:active{cursor:grabbing}.drag-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(255,255,255,.9);border:1px solid #ddd;padding:8px 12px;font-size:10px;font-weight:700;color:#555;pointer-events:none}.fallback{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;color:#555}.viewbar .reset{margin-left:4px}.viewbar .reset+span{margin-left:auto}@media(max-width:600px){.stage,.stage canvas{min-height:430px}.drag-hint{white-space:nowrap}}
/* R2.5A local interactive 3D runtime — no external JavaScript dependency */
[hidden]{display:none!important}.product-viewer{position:absolute;inset:0;display:grid;place-items:center;perspective:1100px;touch-action:none;cursor:default}.product-viewer:has(.product-model){overflow:hidden}.product-model{--pw:300px;--ph:450px;--pd:5px;--half-depth:2.5px;--reflection-shift:30%;position:relative;width:var(--pw);height:var(--ph);transform-style:preserve-3d;transition:transform .22s ease;filter:drop-shadow(18px 26px 22px rgba(0,0,0,.22));will-change:transform}.view.active[data-view="3d"]~* .product-viewer{cursor:grab}.panel,.edge-plane{position:absolute;backface-visibility:hidden}.front-panel{inset:0;transform:translateZ(var(--half-depth));border-radius:4px;overflow:hidden;background:#111;padding:1px}.back-panel{inset:0;transform:rotateY(180deg) translateZ(var(--half-depth));background:#181818;border-radius:4px}.placeholder{width:100%;height:100%;border-radius:3px;background:linear-gradient(145deg,#d71920 0 46%,#f5f5f1 46% 70%,#1d1d1d 70%);display:grid;place-content:center;text-align:center;color:#fff;position:relative;overflow:hidden}.placeholder span{font-weight:800;font-size:clamp(30px,4vw,54px);line-height:.92;letter-spacing:-.04em}.placeholder small{margin-top:10px;font-size:10px}.finish-overlay{position:absolute;inset:1px;border-radius:3px;pointer-events:none;background:linear-gradient(118deg,transparent 7%,rgba(255,255,255,.48) 19%,transparent 31%,transparent 68%,rgba(255,255,255,.22) 80%,transparent 91%);mix-blend-mode:screen;opacity:.42}.edge-right,.edge-left{top:0;width:var(--pd);height:100%;left:50%;transform-origin:center}.edge-right{transform:translateX(calc(var(--pw)/2 - var(--pd)/2)) rotateY(90deg)}.edge-left{transform:translateX(calc(-1 * var(--pw)/2 + var(--pd)/2)) rotateY(90deg)}.edge-top,.edge-bottom{left:0;width:100%;height:var(--pd);top:50%;transform-origin:center}.edge-top{transform:translateY(calc(-1 * var(--ph)/2 + var(--pd)/2)) rotateX(90deg)}.edge-bottom{transform:translateY(calc(var(--ph)/2 - var(--pd)/2)) rotateX(90deg)}
.product-model.edge-gold .front-panel{background:#d6ad27}.product-model.edge-gold .edge-plane{background:linear-gradient(90deg,#9d7410 0%,#e1b62b 20%,#fff0a1 44%,#c99612 62%,#f6d95f 80%,#a77b10 100%);background-position:var(--reflection-shift) center;background-size:180% 100%}.product-model.edge-silver .front-panel{background:#d9dfe2}.product-model.edge-silver .edge-plane{background:linear-gradient(90deg,#5d6468 0%,#dbe2e5 18%,#fff 42%,#8f989d 60%,#f7fbfc 80%,#626a6e 100%);background-position:var(--reflection-shift) center;background-size:180% 100%}.product-model.edge-black .front-panel{background:#050607}.product-model.edge-black .edge-plane{background:linear-gradient(90deg,#010203 0%,#10171c 24%,#e9f8ff 43%,#18242b 50%,#000 67%,#9db6c4 80%,#030506 100%);background-position:var(--reflection-shift) center;background-size:190% 100%}.product-model.edge-painted-black .front-panel,.product-model.edge-painted-black .edge-plane{background:#171717}.product-model.material-crystal-glossy .finish-overlay{opacity:.7}.product-model.material-cross .finish-overlay{opacity:.22;background:repeating-linear-gradient(45deg,rgba(255,255,255,.42) 0 1px,transparent 1px 7px),repeating-linear-gradient(-45deg,rgba(255,255,255,.28) 0 1px,transparent 1px 7px)}.product-model.material-leather .finish-overlay{opacity:.2;background:radial-gradient(ellipse at 20% 20%,#000 0 1px,transparent 1px 4px);background-size:8px 6px}.product-model.material-3d-sparkling .finish-overlay{opacity:.42;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#fff 0 1px,transparent 1.5px);background-size:29px 31px,41px 37px;background-position:0 0,12px 9px}@media(max-width:600px){.product-model{filter:drop-shadow(12px 18px 16px rgba(0,0,0,.2))}}
\n/* R2.5B calibrated 9 mm side geometry */
.edge-right,.edge-left{top:0;width:var(--pd);height:100%;left:auto;transform-origin:left center}
.edge-right{left:100%;transform:translateZ(var(--half-depth)) rotateY(90deg)}
.edge-left{left:0;transform-origin:right center;transform:translateX(calc(-1 * var(--pd))) translateZ(var(--half-depth)) rotateY(-90deg)}
.edge-top,.edge-bottom{left:0;width:100%;height:var(--pd);top:auto;transform-origin:center top}
.edge-top{top:0;transform:translateY(calc(-1 * var(--pd))) translateZ(var(--half-depth)) rotateX(90deg)}
.edge-bottom{top:100%;transform:translateZ(var(--half-depth)) rotateX(90deg)}
.side-inspector{position:absolute;left:18px;bottom:18px;z-index:3;width:210px;padding:12px;background:rgba(255,255,255,.94);border:1px solid #d9d9d5;box-shadow:0 8px 24px rgba(0,0,0,.08);display:grid;gap:7px;font-size:11px}.side-inspector b{font-size:11px}.side-inspector small{font-size:9px;line-height:1.35;color:#666}.side-sample{height:36px;border-radius:2px;background:linear-gradient(90deg,#9d7410 0%,#e1b62b 20%,#fff0a1 44%,#c99612 62%,#f6d95f 80%,#a77b10 100%);border-left:1px solid rgba(0,0,0,.18);border-right:1px solid rgba(0,0,0,.18)}
.product-model.edge-silver~* .side-inspector .side-sample{background:linear-gradient(90deg,#5d6468,#fff 42%,#8f989d 60%,#fff 80%,#626a6e)}
@media(max-width:600px){.side-inspector{width:170px;left:10px;bottom:10px}.side-sample{height:30px}}

/* R2.5C — corrected physical box geometry.
   The front lip and the 9 mm side are separate surfaces. */
.product-model{transform-style:preserve-3d;overflow:visible}
.product-model .front-panel{inset:0;transform:translateZ(var(--half-depth));z-index:3}
.product-model .back-panel{inset:0;transform:rotateY(180deg) translateZ(var(--half-depth));z-index:1}
.product-model .edge-plane{display:block;position:absolute;backface-visibility:visible;z-index:2;border-radius:1px}
/* Side plane centres sit on the physical perimeter. The previous build translated
   the narrow planes inside the front face, which visually collapsed them to a line. */
.product-model .edge-right,
.product-model .edge-left{
  top:0;left:50%;width:var(--pd);height:100%;
  transform-origin:center center;
}
.product-model .edge-right{transform:translateX(-50%) rotateY(90deg) translateZ(calc(var(--pw) / 2))}
.product-model .edge-left{transform:translateX(-50%) rotateY(-90deg) translateZ(calc(var(--pw) / 2))}
.product-model .edge-top,
.product-model .edge-bottom{
  left:0;top:50%;width:100%;height:var(--pd);
  transform-origin:center center;
}
.product-model .edge-top{transform:translateY(-50%) rotateX(90deg) translateZ(calc(var(--ph) / 2))}
.product-model .edge-bottom{transform:translateY(-50%) rotateX(-90deg) translateZ(calc(var(--ph) / 2))}
/* A narrow front lip is independent of the full-depth side. */
.product-model .front-panel{padding:1px}
.product-model.edge-gold .front-panel{box-shadow:inset 0 0 0 1px #d4a914}
.product-model.edge-silver .front-panel{box-shadow:inset 0 0 0 1px #d9dfe2}
.product-model.edge-black .front-panel{box-shadow:inset 0 0 0 1px #050607}
.product-model.edge-painted-black .front-panel{box-shadow:inset 0 0 0 1px #171717}

/* R2.5D — true-dimension rectangular-solid geometry.
   Coordinate convention: the model lies in XY and physical depth is Z.
   Each side is a rectangle whose long dimension matches the board and whose
   short dimension is exactly --pd (9 mm at the same scale as width/height). */
.product-model{
  transform-style:preserve-3d;
  overflow:visible;
}
.product-model .panel,
.product-model .edge-plane{
  position:absolute;
  box-sizing:border-box;
  margin:0;
  backface-visibility:visible;
  transform-style:preserve-3d;
}
.product-model .front-panel{
  inset:0;
  transform:translateZ(var(--half-depth));
  z-index:3;
}
.product-model .back-panel{
  inset:0;
  transform:rotateY(180deg) translateZ(var(--half-depth));
  z-index:1;
}
/* Right/left: plane width is physical Z depth. Put the hinge on the board edge,
   then rotate that depth strip away from the front face. */
.product-model .edge-right{
  top:0; left:100%; width:var(--pd); height:100%;
  transform-origin:0 50%;
  transform:translateZ(var(--half-depth)) rotateY(90deg);
  z-index:2;
}
.product-model .edge-left{
  top:0; left:0; width:var(--pd); height:100%;
  transform-origin:0 50%;
  transform:translateZ(calc(-1 * var(--half-depth))) rotateY(-90deg);
  z-index:2;
}
/* Top/bottom: plane height is physical Z depth. */
.product-model .edge-top{
  left:0; top:0; width:100%; height:var(--pd);
  transform-origin:50% 0;
  transform:translateZ(calc(-1 * var(--half-depth))) rotateX(90deg);
  z-index:2;
}
.product-model .edge-bottom{
  left:0; top:100%; width:100%; height:var(--pd);
  transform-origin:50% 0;
  transform:translateZ(var(--half-depth)) rotateX(90deg);
  z-index:2;
}
/* Keep the metallic front reveal visually fine (roughly 0.5–1 mm appearance),
   independent from the full 9 mm physical side depth. */
.product-model .front-panel{padding:1px}


/* R2.5E — realistic U-channel product model, calibrated from real OK Photo samples.
   Construction: 9 mm MDF core + full-depth glossy U-channel + ~0.5–1 mm front reveal. */
.product-model{--corner:5px;--lip:1px;filter:drop-shadow(20px 28px 24px rgba(0,0,0,.20))}
.product-model .front-panel,.product-model .back-panel{border-radius:var(--corner)}
.product-model .front-panel{padding:var(--lip);background:transparent!important;overflow:hidden}
.product-model .placeholder{border-radius:calc(var(--corner) - var(--lip));position:relative;z-index:1}
/* Separate front-facing U-channel lip. It sits just behind the photo face and follows
   the rounded perimeter seen in the real product instead of looking like a flat border. */
.product-model .u-channel-lip{position:absolute;inset:0;z-index:2;transform:translateZ(calc(var(--half-depth) + .12px));border-radius:var(--corner);pointer-events:none;border:var(--lip) solid transparent;box-sizing:border-box;backface-visibility:visible}
.product-model.edge-gold .u-channel-lip{border-color:#d7a913;box-shadow:inset 0 0 .7px #fff3a8,0 0 .6px rgba(119,75,0,.55)}
.product-model.edge-silver .u-channel-lip{border-color:#cdd2d4;box-shadow:inset 0 0 .7px #fff,0 0 .6px rgba(50,55,58,.48)}
.product-model.edge-black .u-channel-lip{border-color:#050607;box-shadow:inset 0 0 .65px #82929a,0 0 .6px #000}
.product-model.edge-painted-black .u-channel-lip{border-color:#171717;box-shadow:none}
/* High-gloss U-channel sides. The broad specular band moves as the model rotates,
   producing the bright/dark reflection changes visible in the supplied real samples. */
.product-model.edge-gold .edge-plane{background:linear-gradient(100deg,#6f4b00 0%,#a87500 12%,#d8a515 27%,#ffe46b 39%,#fff6bd 46%,#d5a016 53%,#8b5f00 66%,#efc83c 80%,#fff0a0 87%,#9b6b00 100%);background-size:220% 100%;background-position:var(--reflection-shift) center;box-shadow:inset 0 0 1px #fff2a0}
.product-model.edge-silver .edge-plane{background:linear-gradient(100deg,#303538 0%,#777f84 14%,#dce2e4 29%,#fff 42%,#f9fbfb 47%,#8c9498 56%,#3c4245 68%,#d7dddf 82%,#fff 88%,#676e72 100%);background-size:220% 100%;background-position:var(--reflection-shift) center;box-shadow:inset 0 0 1px #fff}
.product-model.edge-black .edge-plane{background:linear-gradient(100deg,#000 0%,#020304 22%,#11191e 34%,#8298a3 43%,#eaf8ff 47%,#1a262d 52%,#030405 62%,#000 76%,#26363f 86%,#030405 100%);background-size:230% 100%;background-position:var(--reflection-shift) center;box-shadow:inset 0 0 1px rgba(225,246,255,.55)}
/* Slight rounding at the ends prevents the edge from reading as a razor-thin sheet.
   The actual physical depth remains --pd; this is only corner finishing. */
.product-model .edge-right,.product-model .edge-left{border-radius:0 2px 2px 0;overflow:hidden}
.product-model .edge-top,.product-model .edge-bottom{border-radius:2px;overflow:hidden}
/* Side preset is deliberately three-quarter/near-side, not 90 degrees. At exact 90°
   a true 9 mm board becomes only a few screen pixels wide and is poor for inspection. */
.side-inspector{display:none!important}

/* R2.7 — Three.js renderer canvas. Legacy CSS model rules are intentionally unused. */
.stage canvas#product3d{position:absolute;inset:0;width:100%;height:100%;min-height:560px;display:block;touch-action:none;cursor:grab}
.stage canvas#product3d:active{cursor:grabbing}

/* R2.8 — true-scale side inspection. The camera zooms to the edge; geometry is not magnified. */
.side-inspector{display:grid!important;opacity:1}.side-inspector[hidden]{display:none!important}.side-inspector{width:235px}.side-sample{height:9px;border-radius:5px;box-shadow:0 1px 5px rgba(0,0,0,.22),inset 0 0 1px rgba(255,255,255,.9)}


/* R2.15 — customer photo and image-preparation workflow */
.photo-upload{padding-bottom:24px;border-bottom:1px solid #ececea;margin-bottom:26px}.control-title{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px}.control-title>span{width:24px;height:24px;border-radius:50%;background:#df171f;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;flex:0 0 auto}.control-title div{display:grid;gap:3px}.control-title b{font-size:13px}.control-title small{font-size:10px;color:#777;line-height:1.35}.upload-box{display:grid!important;place-items:center;text-align:center;gap:4px;border:1.5px dashed #c9c9c5;background:#fafaf8;padding:22px 12px!important;cursor:pointer}.upload-box:hover{border-color:#df171f;background:#fff}.upload-box input{position:absolute;opacity:0;pointer-events:none}.upload-box b{font-size:12px;color:#df171f}.upload-box span{font-size:10px;color:#777}.photo-meta{font-size:10px;color:#666;margin-top:8px;overflow-wrap:anywhere}.quality{display:inline-flex;margin-top:9px;padding:6px 8px;border-radius:4px;font-size:9px;font-weight:800}.quality.good{background:#e9f7ed;color:#246b37}.quality.ok{background:#fff6dd;color:#7b5a00}.quality.low{background:#fdeaea;color:#a42424}.photo-tools{margin-top:14px;display:grid;gap:11px}.mode-row{display:grid;grid-template-columns:1fr 1fr;gap:6px}.controls button.mini{margin:0;padding:10px 8px;background:#fff;color:#222;border:1px solid #d6d6d2;font-size:10px}.controls button.mini.active{background:#171717;color:#fff;border-color:#171717}.photo-tools>label{display:grid!important;grid-template-columns:105px 1fr;align-items:center;gap:8px;font-size:10px!important;font-weight:600!important;color:#555}.photo-tools input[type=range]{width:100%;accent-color:#df171f}.controls button.remove-photo{width:auto;margin:2px 0 0;padding:0;background:none;color:#777;text-decoration:underline;text-align:left;font-size:10px;font-weight:600}.controls button.remove-photo:hover{color:#df171f}@media(max-width:600px){.photo-tools>label{grid-template-columns:95px 1fr}}

/* R2.16 size comparison and physical dimension annotation */
.scale-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-3px 0 12px}.scale-toolbar .scale-choice{width:auto;margin:0;padding:9px 13px;background:#fff;color:#333;border:1px solid #ccc;font-size:11px}.scale-toolbar .scale-choice.active{background:#191919;color:white;border-color:#191919}.scale-toolbar span{font-size:10px;color:#666;margin-left:auto}.size-readout{position:absolute;top:15px;left:15px;z-index:2;background:rgba(255,255,255,.93);border:1px solid #ddd;border-radius:4px;padding:9px 12px;font-size:12px;font-weight:700;pointer-events:none}@media(max-width:600px){.scale-toolbar span{flex-basis:100%;margin-left:0}.size-readout{font-size:10px}}