.wstg-camera {
  margin: 28px 0;
  padding: clamp(20px, 4vw, 34px);
  color: #f4efe8;
  background: linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
}

.wstg-camera * { box-sizing: border-box; }

.wstg-camera__heading { max-width: 720px; margin-bottom: 20px; }
.wstg-camera__heading h3 { margin: 7px 0 8px; color: #f4efe8 !important; font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1.05; }
.wstg-camera__heading > p:last-child { margin: 0; color: #aaa39a; font-size: .84rem; line-height: 1.6; }
.wstg-camera__eyebrow { margin: 0; color: #d09a40; font-size: .66rem; font-weight: 800; letter-spacing: .16em; }

.wstg-camera__layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: stretch;
}

.wstg-camera__panel {
  min-width: 0;
  padding: clamp(16px, 2.5vw, 24px);
  background: rgba(8, 7, 6, .42);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
}

.wstg-camera__mockup {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  flex-direction: column;
}

.wstg-camera__mockup[hidden] { display: none !important; }
.wstg-camera__mockup img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  flex: 1 1 auto;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
}
.wstg-camera__mockup figcaption { margin-top: 9px; color: #9c948a; font-size: .68rem; line-height: 1.45; }

.wstg-camera__manual-heading { margin: 32px 0 12px; text-align: center; }
.wstg-camera__manual-heading h3 { margin: 7px 0 6px; color: #f4efe8 !important; font-size: clamp(1.25rem, 2.3vw, 1.8rem); line-height: 1.1; }
.wstg-camera__manual-heading > p:last-child { max-width: 680px; margin: 0 auto; color: #aaa39a; font-size: .76rem; line-height: 1.55; }

.wstg[data-camera-matcher="ready"] .wstg__grid--camera-layout { grid-template-columns: minmax(0, 1fr); }
.wstg[data-camera-matcher="ready"] .wstg__grid--camera-layout .wstg__intro { max-width: 900px; }
.wstg[data-camera-matcher="ready"] .wstg__tones {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  grid-template-columns: repeat(10, minmax(70px, 1fr));
  gap: 12px;
  align-items: start;
  padding: 10px 0 18px;
}
.wstg[data-camera-matcher="ready"] .wstg__tone {
  min-height: 112px;
  padding: 10px 5px;
  justify-content: flex-start;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 7px;
  background: rgba(255,255,255,.025);
}
.wstg[data-camera-matcher="ready"] .wstg__arm,
.wstg[data-camera-matcher="ready"] .wstg__tone:nth-child(even) .wstg__arm {
  width: 62px !important;
  height: 62px !important;
  flex: 0 0 62px;
  border-radius: 7px !important;
  transform: none !important;
  box-shadow: inset -6px -6px 12px rgba(0,0,0,.14), inset 5px 4px 10px rgba(255,255,255,.12), 0 6px 16px rgba(0,0,0,.2) !important;
}
.wstg[data-camera-matcher="ready"] .wstg__arm::before,
.wstg[data-camera-matcher="ready"] .wstg__arm::after { display: none !important; }
.wstg[data-camera-matcher="ready"] .wstg__tone:hover .wstg__arm,
.wstg[data-camera-matcher="ready"] .wstg__tone.is-selected .wstg__arm {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 0 0 2px #f4efe8, 0 0 0 5px #d09a40, 0 10px 22px rgba(0,0,0,.34) !important;
}
.wstg[data-camera-matcher="ready"] .wstg__tone.is-selected { background: rgba(208,154,64,.12); border-color: #d09a40; }
.wstg[data-camera-matcher="ready"] .wstg__tone-name { font-size: .65rem; overflow-wrap: anywhere; }
.wstg[data-camera-matcher="ready"] .wstg__match,
.wstg[data-camera-matcher="ready"] .wstg__section-title { color: #f4efe8 !important; }

.wstg-camera__choices,
.wstg-camera__controls { display: flex; flex-wrap: wrap; gap: 10px; }
.wstg-camera__choices[hidden],
.wstg-camera__controls[hidden],
.wstg-camera__stage[hidden],
.wstg-camera__controls [hidden] { display: none !important; }

.wstg-camera__button {
  min-height: 48px;
  padding: 11px 16px;
  color: #f4efe8;
  background: #24201c;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 4px;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.wstg-camera__button--primary { color: #17120b; background: #d09a40; border-color: #d09a40; }
.wstg-camera__button:hover,
.wstg-camera__button:focus-visible { border-color: #e3ad53; outline: 2px solid #e3ad53; outline-offset: 2px; }

.wstg-camera__status { min-height: 25px; margin: 14px 0; color: #bdb5aa; font-size: .76rem; line-height: 1.55; }
.wstg-camera__status strong { color: #f4efe8; }
.wstg-camera__sample { display: inline-block; width: 20px; height: 20px; margin-right: 8px; vertical-align: middle; background: var(--sample); border: 1px solid #fff; border-radius: 50%; }

.wstg-camera__stage { position: relative; width: min(100%, 720px); aspect-ratio: 4 / 3; overflow: hidden; background: #050505; border: 1px solid rgba(255,255,255,.24); border-radius: 6px; }
.wstg-camera__video { width: 100%; height: 100%; object-fit: cover; }
.wstg-camera__stage.is-front .wstg-camera__video { transform: scaleX(-1); }
.wstg-camera__target { position: absolute; display: grid; width: 52%; height: 58%; inset: 50% auto auto 50%; transform: translate(-50%,-50%); place-items: end center; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.24); pointer-events: none; }
.wstg-camera__target span { margin-bottom: 12px; padding: 5px 7px; color: #fff; background: rgba(0,0,0,.62); font-size: .55rem; font-weight: 800; letter-spacing: .12em; }
.wstg-camera__controls { margin-top: 11px; }
.wstg-camera__close { padding: 8px 4px; color: #f4efe8; background: transparent; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

.wstg-camera__advice,
.wstg-camera__privacy { max-width: 840px; font-size: .72rem; line-height: 1.6; }
.wstg-camera__advice { margin: 18px 0 0; padding: 12px 14px; color: #c2b9ad; background: rgba(208,154,64,.09); border-left: 3px solid #d09a40; }
.wstg-camera__advice strong { color: #f4efe8; }
.wstg-camera__privacy { margin: 12px 0 0; color: #9c948a; }

@media (max-width: 560px) {
  .wstg-camera { margin: 22px 0; padding: 18px 14px; }
  .wstg-camera__layout { grid-template-columns: minmax(0, 1fr); }
  .wstg-camera__mockup { grid-row: 2; }
  .wstg-camera__choices,
  .wstg-camera__controls { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .wstg-camera__button { min-width: 0; padding-inline: 9px; font-size: .64rem; }
  .wstg-camera__close { grid-column: 1 / -1; }
  .wstg[data-camera-matcher="ready"] .wstg__tones { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 8px 5px; }
  .wstg[data-camera-matcher="ready"] .wstg__tone { min-height: 91px; padding: 8px 2px; }
  .wstg[data-camera-matcher="ready"] .wstg__arm,
  .wstg[data-camera-matcher="ready"] .wstg__tone:nth-child(even) .wstg__arm { width: 44px !important; height: 44px !important; flex-basis: 44px; }
  .wstg[data-camera-matcher="ready"] .wstg__tone-name { font-size: .56rem; }
}

@media (min-width: 561px) and (max-width: 1024px) {
  .wstg-camera__layout { grid-template-columns: minmax(0, 1fr); }
  .wstg[data-camera-matcher="ready"] .wstg__tones { grid-template-columns: repeat(5, minmax(0,1fr)); max-width: 760px; }
}

@media (prefers-reduced-motion: reduce) {
  .wstg-camera * { transition: none !important; }
}