/* Original screenshot prototype; no autoplay, canvas or automatic scaling. */
.prototype-slot { min-width: 0; background: #0e1011; }
.prototype-slot__main { width: min(100%, 1180px); margin: 0 auto; padding: clamp(12px, 2vw, 24px); }
.prototype-slot__header { margin-bottom: 14px; }
.prototype-slot__eyebrow { font-family: var(--font-en); font-size: 10px; letter-spacing: .15em; color: var(--text-dim); }
.prototype-slot__header h1 { margin: 6px 0; font-size: clamp(18px, 2.6vw, 26px); font-weight: 600; line-height: 1.4; }
.prototype-slot__header > p:last-child { font-size: 12px; color: var(--text-dim); }
.prototype-slot__tabs, .prototype-slot__toolbar, .prototype-slot__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.prototype-slot__tabs { margin-bottom: 12px; }
.prototype-slot .work__filter { white-space: normal; cursor: pointer; font-size: 12px; min-height: 36px; }
.prototype-slot__toolbar { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.prototype-slot__toolbar[hidden] { display: none; }
.prototype-slot button:disabled { opacity: .35; cursor: default; }
.prototype-slot__hint { margin: 10px 0 14px; font-size: 11px; color: #999da2; line-height: 1.6; }
.prototype-slot__panel { padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.025); min-width: 0; }
.prototype-slot__panel[hidden] { display: none; }
.prototype-slot__scene-head { margin-bottom: 12px; }
.prototype-slot__scene-head h2 { font-size: 16px; line-height: 1.5; margin: 0 0 5px; font-weight: 500; }
.prototype-slot__scene-head p { font-size: 12px; color: #a7aaad; line-height: 1.7; margin: 0; }
.prototype-slot__viewport {
  height: clamp(160px, 52vw, 480px); overflow: auto; overscroll-behavior: contain;
  border: 1px solid #30343a; border-radius: 4px; background: #070809;
  scrollbar-color: #52565b #101214; scrollbar-width: thin;
}
.prototype-slot__stage { position: relative; width: min(100%, calc(clamp(160px, 52vw, 480px) * 16 / 9)); aspect-ratio: 16 / 9; margin: 0 auto; }
.prototype-slot__stage > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.prototype-slot__viewport.is-detail .prototype-slot__stage { width: max(100%, 1920px); margin: 0; }
.prototype-slot__hotspots { position: absolute; inset: 0; }
.prototype-slot__hotspots[hidden] { display: none; }
.prototype-slot__hotspot { position: absolute; padding: 0; min-width: 14px; min-height: 14px; border: 1px solid #ff792c; border-radius: 3px; background: rgba(255,121,44,.1); cursor: pointer; }
.prototype-slot__hotspot:hover, .prototype-slot__hotspot:focus-visible { background: rgba(255,121,44,.26); box-shadow: 0 0 0 2px #ff792c; }
.prototype-slot.hide-hints .prototype-slot__hotspot:not(:hover):not(:focus-visible) { border-color: transparent; background: transparent; }
.prototype-slot__caption { margin: 10px 0; font-size: 12px; color: #d8dadc; line-height: 1.7; min-height: 21px; }
.prototype-slot__actions:empty { display: none; }
.prototype-slot__actions .work__filter { text-align: left; }
.prototype-slot__message { min-height: 22px; font-size: 12px; color: #ffad78; line-height: 1.7; margin-top: 12px; }
.prototype-slot__notice { margin-top: 8px; font-size: 11px; line-height: 1.8; color: #999da2; }
.prototype-slot :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* The host already supplies a title. A fixed-size embed avoids resize feedback. */
.prototype-slot.is-embedded .prototype-slot__main { padding: 12px; }
.prototype-slot.is-embedded .prototype-slot__header,
.prototype-slot.is-embedded .prototype-slot__scene-head,
.prototype-slot.is-embedded .prototype-slot__message:empty { display: none; }
.prototype-slot.is-embedded .prototype-slot__tabs { margin-bottom: 8px; }
.prototype-slot.is-embedded .prototype-slot__toolbar { padding-top: 8px; }
.prototype-slot.is-embedded .prototype-slot__hint { margin: 8px 0 10px; }
.prototype-slot.is-embedded .prototype-slot__panel { padding: 10px; }
.prototype-slot.is-embedded .prototype-slot__viewport { height: min(420px, calc((100vw - 48px) * 9 / 16)); }
.prototype-slot.is-embedded .prototype-slot__stage { width: min(100%, calc(420px * 16 / 9)); }
.prototype-slot.is-embedded .prototype-slot__viewport.is-detail .prototype-slot__stage { width: max(100%, 1920px); }
@media (max-width: 560px) {
  .prototype-slot__main { padding: 12px; }
  .prototype-slot__panel { padding: 10px; }
  .prototype-slot__tabs, .prototype-slot__toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .prototype-slot .work__filter { min-height: 40px; padding: 8px 10px; font-size: 11px; }
  .prototype-slot__actions .work__filter { flex: 1 1 calc(50% - 8px); }
}