.app-embed { position: relative; width: 100%; overflow: hidden; isolation: isolate; border-radius: 12px; }
.app-embed > iframe { display: block; position: absolute; top: 0; left: 0; max-width: none; border: 0; transform-origin: top left; opacity: 0; transition: opacity .2s ease; }
.app-embed[data-app-ready="true"] > iframe { opacity: 1; }
.app-embed:not([data-app-interactive]) > iframe { pointer-events: none; }
.embed-retry { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; padding: 12px 18px; border-radius: 12px; background: var(--page); color: var(--ink); }
.screen-preview { position: relative; }
.screen-zoom { position: absolute; right: 16px; bottom: 16px; width: auto; z-index: 1; padding: 8px 14px; border-radius: 99px; color: var(--ink); background: var(--surface); box-shadow: 0 2px 12px #0002; }
.screen-zoom .icon { width: 16px; height: 16px; display: inline-block; margin-right: 6px; vertical-align: -3px; }
.scene-window > [data-app-view] { width: min(100%, calc((72svh - 140px)*1.63)); max-height: 100%; }
.piece-content[data-app-view] { width: 260px; background: var(--surface); }
.piece-focus .piece-content,.piece-productive .piece-content,.piece-reminder .piece-content { scale: 1; }
.major-art > [data-app-view], .capability-art > [data-app-view], .detail-art > [data-app-view] { width: 100%; min-width: 0; }
.component-group .metric-strip { width: 1200px; flex: none; }
.component-wall { padding-block: 26px; }
.component-row + .component-row { margin-top: 20px; }
.image-dialog, .video-dialog { width: min(1500px, 96vw); }
.image-dialog [data-app-view], .video-dialog [data-app-view] { margin-top: 22px; }
.dialog-close { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .app-embed > iframe { transition: none; } }

@media (max-width: 700px) {
  .piece-content[data-app-view] { scale: .6; }
  .component-group .metric-strip { width: 960px; }
  .major-art, .detail-art { width: 100%; min-height: 0; aspect-ratio: auto; }
}