/* Controller-only host styles adapted from the pinned holding.css.
   Renderer, atmosphere, shader colors and fallback SVG are unchanged. */
@font-face {
  font-family: ProductionStarManrope; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../vendor/production-star/manrope-latin.woff2") format("woff2");
}
.production-star { position: absolute; inset: 0; isolation: isolate; overflow: clip; background: #100c19; background-image: radial-gradient(ellipse at 77% 42%, #4930571f, transparent 50%); color: #f7f0fb; font-family: ProductionStarManrope, "Segoe UI", sans-serif; font-synthesis: none; }
.production-star[hidden] { display: none; }
.production-star *, .production-star *::before, .production-star *::after { box-sizing: border-box; }
.production-star .production-text-shield { position: absolute; z-index: 1; pointer-events: none; }
.production-star .production-text-shield[hidden] { display: none; }
.production-star .production-text-shield::before { content: ""; position: absolute; inset: -65px -45px; pointer-events: none; background: radial-gradient(ellipse, #100c19f5 35%, #100c19b8 57%, #100c1900 74%); filter: blur(18px); }
.production-star .play-space { position: absolute; left: var(--production-star-x, 75%); top: var(--production-star-y, 52%); transform: translate(-50%, -50%); width: var(--production-star-size, min(42vw, 600px, max(150px, calc(100dvh - 315px)))); min-width: 0; text-align: center; }
.production-star .field-stage { position: relative; width: 100%; aspect-ratio: 1; margin: 0 auto; }
.production-star .shape { position: absolute; z-index: 0; left: 50%; top: 50%; transform: translate(-50%, -50%); display: block; width: min(160%, 80dvh); aspect-ratio: 1; margin: 0; padding: 0; border: 0; border-radius: 50%; color: inherit; background: none; -webkit-tap-highlight-color: transparent; }
.production-star .nova-glow { position: absolute; inset: 0; z-index: 10; pointer-events: none; opacity: 0; background: radial-gradient(circle var(--nova-radius, 0px) at var(--nova-x, 50%) var(--nova-y, 50%), #fafffff2 0%, #e8f7ffe6 8%, #a9d9ff85 25%, #6f9cfa19 58%, transparent 100%); }
.production-star .nova-impact { position: absolute; left: var(--nova-x, 50%); top: var(--nova-y, 50%); width: var(--nova-core-width, 0px); height: var(--nova-core-height, 0px); transform: translate(-50%, -50%) rotate(var(--nova-angle, 0deg)); background: radial-gradient(ellipse closest-side, #fff 0%, #fff 96%, #fafffff2 98%, transparent 100%); }
.production-star .shape:enabled { cursor: pointer; }
.production-star .shape.has-3d { cursor: grab; touch-action: none; user-select: none; }
.production-star .shape.has-3d.is-dragging { cursor: grabbing; }
.production-star .shape > svg { opacity: 1; transition: opacity .8s ease; }
.production-star .shape.has-3d > svg { opacity: 0; }
.production-star .field-fallback > g { transition: stroke-opacity 1.6s, opacity 1.6s; }
.production-star .field-fallback > g:last-child { opacity: .7; }
.production-star .shape.is-lit .field-fallback > g:first-child { stroke-opacity: .6; }
.production-star .shape.is-lit .field-fallback > g:last-child { opacity: 1; }
.production-star .orbital-canvas { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity .8s ease; pointer-events: none; }
.production-star.has-field .orbital-canvas { opacity: 1; visibility: visible; }
.production-star .quality-panel { position: absolute; z-index: 5; bottom: 55px; left: 50%; transform: translateX(-50%); width: min(330px, calc(100vw - 48px)); border: 1px solid #a481c238; border-radius: 16px; padding: 12px 15px 14px; background: #1a1424fa; box-shadow: 0 16px 50px #05020980; text-align: left; }
.production-star .quality-panel[hidden] { display: none; }
.production-star .quality-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: #e2d2f0; }
.production-star .quality-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; color: #bbabca; background: transparent; font: 20px ProductionStarManrope, sans-serif; cursor: pointer; }
.production-star .quality-close:hover { background: #ac83d218; color: #fff; }
.production-star .quality-panel select { width: 100%; min-height: 44px; padding: 7px 10px; border: 1px solid #a481c240; border-radius: 9px; color: #eddef8; background: #231a31; font: 12px ProductionStarManrope, sans-serif; }
.production-star .quality-panel :focus-visible { outline: 2px solid #d6b1f8; outline-offset: 3px; }
.production-star .quality-description { margin: 10px 0 5px; color: #bba9cc; font-size: 10px; line-height: 1.6; }
.production-star .quality-readout { display: block; color: #9d8bad; font-size: 10px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.production-star .play-caption { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 36px; }
.production-star .play-caption .shape-hint { margin: 0; }
.production-star .motion-toggle { flex: 0 0 40px; width: 40px; height: 40px; border: 1px solid transparent; border-radius: 50%; padding: 12px; background: transparent; color: #b5a3ca; cursor: pointer; transition: color .2s, background .2s, border-color .2s; }
.production-star .motion-toggle[hidden] { display: none; }
.production-star .motion-toggle:hover { color: #eee0fc; background: #b58ce714; border-color: #b58ce72b; }
.production-star .motion-toggle:focus-visible { outline: 2px solid #d6b1f8; outline-offset: 2px; }
.production-star .motion-toggle svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.production-star .motion-toggle .play-icon, .production-star .motion-toggle.is-paused .pause-icon { display: none; }
.production-star .motion-toggle.is-paused .play-icon { display: block; }
.production-star .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.production-star .shape svg { display: block; width: 100%; height: auto; overflow: visible; }
.production-star .shape:focus-visible { outline: none; }
.production-star .shape:focus-visible:not(.is-pointer-focus)::after { content: ""; position: absolute; inset: 19%; border: 2px solid #d6b1f8; border-radius: 50%; pointer-events: none; }
.production-star .shape-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.production-star .play-space.is-ready .shape-hint { visibility: visible; }

@media (max-width: 900px) {
  .production-star .play-space { left: var(--production-star-x, 62%); top: var(--production-star-y, 78%); width: var(--production-star-size, min(45vw, 370px)); }
}
@media (max-width: 580px) {
  .production-star .play-space { left: var(--production-star-x, 50%); top: var(--production-star-y, 78%); width: var(--production-star-size, min(64vw, 290px)); }
  .production-star .shape { width: 160%; }
  .production-star .shape-hint { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .production-star *, .production-star *::before, .production-star *::after { animation: none !important; transition: none !important; }
}