/* mw3d — viewer chrome. Uses the site tokens from site.css (stage colour, mono captions, corner brackets). */
.mw3d { position: relative; display: grid; grid-template-rows: auto auto; gap: 0; }
.mw3d-stage {
  position: relative; background: var(--stage); overflow: hidden; aspect-ratio: 16 / 10; min-height: 300px;
  isolation: isolate; touch-action: pan-y;
}
.mw3d-stage.tall { aspect-ratio: 4 / 3; }
.mw3d-stage::before, .mw3d-stage::after {   /* corner brackets, as on the existing stages */
  content: ""; position: absolute; width: 14px; height: 14px; z-index: 3; pointer-events: none;
  border: 1px solid var(--ink-4); top: 12px; left: 12px; border-right: 0; border-bottom: 0;
}
.mw3d-stage::after { left: auto; right: 12px; border-left: 0; border-right: 1px solid var(--ink-4); }
.mw3d-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; outline: none; cursor: grab; z-index: 1; }
.mw3d-canvas:active { cursor: grabbing; }
.mw3d-canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.mw3d-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; transition: opacity .6s ease; pointer-events: none; }
.mw3d-stage.is-live .mw3d-poster { opacity: 0; }
.mw3d-stage.is-live.is-loading .mw3d-poster { opacity: .55; }

/* status chip, top left (same voice as "LIVE-3D WIRD GELADEN") */
.mw3d-status {
  position: absolute; z-index: 4; left: 28px; top: 22px; display: inline-flex; align-items: center; gap: 8px;
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  background: rgba(251, 250, 248, .9); padding: 7px 10px; border-radius: 2px;
}
.mw3d-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: mwpulse 1.2s ease-in-out infinite; }
.mw3d-stage.is-live:not(.is-loading) .mw3d-status::before { background: #3f8a5b; animation: none; }
.mw3d-stage.is-live:not(.is-loading) .mw3d-status .s-load, .mw3d-stage .mw3d-status .s-live { display: none; }
.mw3d-stage.is-live:not(.is-loading) .mw3d-status .s-live { display: inline; }
@keyframes mwpulse { 50% { opacity: .3; } }

/* tools, top right */
.mw3d-tools { position: absolute; z-index: 4; right: 28px; top: 18px; display: flex; gap: 6px; }
.mw3d-tools button, .mw3d-tools a {
  font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-decoration: none;
  background: rgba(251, 250, 248, .92); border: 1px solid var(--line); padding: 8px 10px; border-radius: 2px; cursor: pointer;
}
.mw3d-tools button:hover, .mw3d-tools a:hover { color: var(--ink); border-color: var(--line-2); }

/* error: red, short, never a blank stage */
.mw3d-fail { display: none; position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 360px; width: calc(100% - 48px);
  background: #fff; border: 1px solid #c8372d; border-left-width: 4px; color: #8f2a22; padding: 14px 16px; font-size: 14px; line-height: 1.45; }
.mw3d-stage.is-failed .mw3d-fail { display: block; }
.mw3d-stage.is-failed .mw3d-status, .mw3d-stage.is-failed .mw3d-tools { display: none; }

/* hint under the poster until the visitor starts it (mobile: tap to load) */
.mw3d-start { position: absolute; z-index: 4; left: 50%; bottom: 22px; transform: translateX(-50%); }
.mw3d-stage.is-live .mw3d-start, .mw3d-stage.is-loading .mw3d-start { display: none; }

/* hotspots */
.mw3d-hotspots { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.mw3d-hs { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; border-radius: 50%; border: 0; pointer-events: auto; cursor: pointer;
  background: var(--ink); color: #fff; font: 600 11px/26px var(--mono); padding: 0; box-shadow: 0 0 0 5px rgba(29, 32, 36, .14); transition: opacity .2s, box-shadow .2s; }
.mw3d-hs.on, .mw3d-hs:hover { background: var(--accent); box-shadow: 0 0 0 6px rgba(168, 72, 28, .2); }
.mw3d-hs.off { opacity: 0; pointer-events: none; }
.mw3d-hs-card { position: absolute; left: 0; top: 0; width: 240px; background: var(--paper); border: 1px solid var(--line); padding: 12px 14px; pointer-events: auto; font-size: 14px; line-height: 1.45; box-shadow: 0 8px 28px rgba(29, 32, 36, .08); }
.mw3d-hs-card strong { display: block; font-weight: 500; margin-bottom: 4px; }
.mw3d-hs-card p { color: var(--ink-2); }

/* controls rail under the stage */
.mw3d-controls { display: flex; flex-wrap: wrap; gap: 18px 28px; padding: 18px 0 4px; align-items: flex-end; }
.mwc { display: grid; gap: 9px; min-width: 0; }
.mwc-label { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: block; }
.mwc-val { color: var(--ink); letter-spacing: .02em; text-transform: none; font-family: var(--font); font-size: 13px; margin-left: 6px; }
.mwc-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.mwc-sw { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .12); background: var(--c); cursor: pointer; padding: 0; position: relative; }
.mwc-sw[aria-checked="true"]::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1.5px solid var(--ink); }
.mwc-sw:hover { transform: scale(1.06); }
.mwc-seg { font: 500 13px/1 var(--font); padding: 9px 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; border-radius: 2px; }
.mwc-seg:hover { border-color: var(--ink); }
.mwc-seg[aria-checked="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.mwc-tog { display: inline-flex; align-items: center; gap: 9px; font: 500 13px/1 var(--font); padding: 9px 12px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer; border-radius: 2px; }
.mwc-tog i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink-3); }
.mwc-tog[aria-pressed="true"] { border-color: var(--ink); }
.mwc-tog[aria-pressed="true"] i { background: var(--accent); border-color: var(--accent); }
.mwc--range input { width: 200px; accent-color: var(--ink); }
.mwc--text input { font: 400 14px/1 var(--font); padding: 9px 11px; border: 1px solid var(--line-2); background: var(--paper); width: 180px; border-radius: 2px; color: var(--ink); }
.mwc--text input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }

@media (max-width: 720px) {
  .mw3d-stage { aspect-ratio: 4 / 4.2; min-height: 0; }
  .mw3d-status { left: 18px; top: 16px; }
  .mw3d-tools { right: 18px; top: 12px; }
  .mw3d-controls { gap: 14px 18px; }
  .mwc--range input { width: 160px; }
  .mw3d-hs-card { width: 200px; }
}
@media (prefers-reduced-motion: reduce) { .mw3d-poster { transition: none; } .mw3d-status::before { animation: none; } }
.mw3d-hint .h-touch { display: none; }
@media (pointer: coarse) { .mw3d-hint .h-fine { display: none; } .mw3d-hint .h-touch { display: inline; } }