[data-product] { --product-ink:#202e35; --product-muted:#53636b; --product-line:#bdc9ce; --product-accent:#245963; color:var(--product-ink); }
[data-product] *, [data-product] *::before, [data-product] *::after { box-sizing:border-box; }
.product-layout { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(16rem,.8fr); gap:clamp(1.5rem,4vw,5rem); align-items:center; }
.product-figure { margin:0; min-width:0; }
[data-product-stage] { position:relative; height:clamp(340px,49vw,570px); min-width:0; overflow:hidden; border-radius:2rem; background:radial-gradient(ellipse at 50% 40%,#fff 0%,#edf2f3 58%,#dae3e6 100%); isolation:isolate; touch-action:auto; }
[data-product-stage]::after { content:""; position:absolute; width:32%; height:3%; left:34%; bottom:var(--product-ground,9%); border-radius:50%; background:#1b3e4b18; filter:blur(9px); pointer-events:none; z-index:-1; }
[data-product-stage], [data-product-stage] * { user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
[data-product-stage][aria-disabled="false"] { cursor:grab; }
[data-product-stage][aria-disabled="false"]:active { cursor:grabbing; }
.product-poster,.product-canvas { position:absolute; width:100%; height:100%; inset:0; object-fit:contain; pointer-events:none; }
.product-poster { z-index:0; object-position:center calc(100% - var(--product-ground,9%)); }
.product-canvas { z-index:1; visibility:hidden; }
[data-rendering="true"] .product-canvas { visibility:visible; }
[data-rendering="true"] .product-poster { visibility:hidden; }
.product-hotspot { position:absolute; z-index:2; transform:translate(-50%,-50%); width:44px; height:44px; border:2px solid #fff; border-radius:50%; background:var(--product-accent); color:white; box-shadow:0 2px 8px #102d3c2b; font:inherit; font-size:.875rem; font-weight:600; line-height:1; cursor:pointer; padding:0; }
.product-hotspot[data-facing="false"] { opacity:.18; pointer-events:none; }
[data-product] [hidden] { display:none!important; }
[data-product] :focus-visible { outline:3px solid #086cb4; outline-offset:4px; }
[data-product-stage]:focus-visible { outline-offset:5px; }
[data-product-stage][data-product-pointer-focus]:focus-visible { outline-style:none; }
.product-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; margin:1rem 0; }
.product-controls button,.product-tools button,.product-tools select { font:inherit; min-height:44px; border:1px solid var(--product-line); border-radius:999px; color:var(--product-ink); background:#fff; padding:.6rem 1rem; cursor:pointer; }
[data-product] button:disabled { cursor:default; color:#667780; background:#e4e9eb; border-color:#c1cbd0; }
.product-help { font-size:.875rem; color:var(--product-muted); text-align:center; margin:.5rem 0; }
.product-tools { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem; margin:1rem 0; }
.product-tools label { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.875rem; }
.product-loading { min-height:3.5rem; text-align:center; font-size:.875rem; color:var(--product-muted); }
[data-product-progress] { display:block; width:min(100%,18rem); height:.4rem; margin:.5rem auto; accent-color:var(--product-accent); }
[data-product-status] { font-size:.875rem; color:var(--product-muted); text-align:center; margin:.8rem 0 0; }
[data-product-labels] { padding:0; list-style:none; counter-reset:part; margin:1.75rem 0; }
[data-product-labels] > li { counter-increment:part; border-top:1px solid var(--product-line); }
[data-product-labels] > li:last-child { border-bottom:1px solid var(--product-line); }
[data-product-labels] summary { cursor:pointer; display:flex; align-items:center; min-height:64px; padding:.8rem 0; gap:.85rem; font-weight:600; list-style:none; }
[data-product-labels] summary::-webkit-details-marker { display:none; }
[data-product-labels] summary::before { content:counter(part,decimal-leading-zero); font-size:.75rem; font-weight:400; color:var(--product-muted); }
[data-product-labels] summary::after { content:"+"; margin-left:auto; font-weight:400; }
[data-product-labels] [open] summary::after { content:"−"; }
[data-product-labels] details p { margin:0 0 1.2rem 2rem; font-size:.9375rem; line-height:1.65; color:var(--product-muted); }
.product-label-intro { font-size:1rem; line-height:1.7; color:var(--product-muted); }
@media(max-width:700px) {
  .product-layout { grid-template-columns:minmax(0,1fr); gap:1.5rem; }
  [data-product-stage] { height:min(118vw,480px); min-height:340px; border-radius:1.5rem; }
  .product-notes { border-radius:1.5rem; background:#fff; padding:1.5rem; border:1px solid #d7e0e3; }
  [data-product-labels] details[open] { padding:.5rem; background:#f3f7f8; border-radius:.7rem; }
  .product-controls button { flex:1 1 40%; }
}
@media(forced-colors:active) { .product-hotspot { forced-color-adjust:auto; border:2px solid ButtonText; } }