.design-detail-page{overflow:clip}.design-detail-body,.design-related-body{border-bottom:1px solid var(--border-primary);padding:20px}.design-detail-hero{background:var(--surface-secondary);border-radius:8px;justify-content:center;align-items:center;height:660px;display:flex;position:relative;overflow:hidden}.design-detail-hero .embedded-preview{aspect-ratio:821.3/418.35;border-radius:8px;width:min(821.3px,100% - 80px);height:auto}.design-detail-hero.live-tablet,.design-detail-hero.live-mobile{height:auto;min-height:660px;padding:80px 0}.design-detail-hero.live-tablet .embedded-preview{aspect-ratio:768/1024;width:min(768px,100% - 80px)}.design-detail-hero.live-mobile .embedded-preview{aspect-ratio:390/844;width:min(390px,100% - 80px)}.embedded-preview-detail .embedded-preview-poster{border-radius:8px;width:100%;height:100%}.embedded-preview-detail .static-preview{aspect-ratio:821.3/418.35;object-fit:cover;border-radius:8px;width:100%;height:auto;transition:width .3s;display:block}.embedded-preview-detail.tablet .static-preview{width:min(520px,100% - 80px)}.embedded-preview-detail.mobile .static-preview{width:min(270px,100% - 80px)}.design-detail-back,.design-detail-top-actions{z-index:1;position:absolute;top:20px}.design-detail-back{left:20px}.design-detail-back img{transform:rotate(180deg)}.design-detail-top-actions{align-items:center;gap:12px;display:flex;right:20px}.design-detail-top-actions .preview-top-button,.design-detail-top-actions .copy-prompt-button{height:33px;min-height:33px}.design-detail-devices{z-index:1;gap:8px;display:flex;position:absolute;top:20px;left:50%;transform:translate(-50%)}.design-detail-devices button{background:0 0;border:1px solid #d7d7d7;border-radius:4px;place-items:center;width:32px;height:32px;display:grid}.design-detail-devices button.selected{background:#fff;border-color:#fff}.design-detail-devices img{object-fit:contain;width:16px;height:16px}.design-detail-tags{z-index:1;pointer-events:none;position:absolute;bottom:20px;left:20px;right:20px}.design-detail-meta{justify-content:space-between;align-items:center;gap:20px;min-height:40px;margin-top:12px;display:flex}.design-detail-meta h1{font:400 18px/1.3 var(--font-body);letter-spacing:.02em}.design-detail-meta p{letter-spacing:.02em;color:var(--text-tertiary);margin-top:2px;font-size:12px;line-height:1.3}.design-related-body{flex-direction:column;gap:14px;display:flex}.design-related-body>h2{font:400 18px/1.3 var(--font-body);letter-spacing:.02em}.design-related-grid{gap:16px}.design-related-grid .card-details h2{font-size:16px}.design-related-grid .card-details p{font-size:12px}@media (width<=1100px){.design-detail-hero{height:580px}.design-detail-hero .embedded-preview{width:min(821.3px,100% - 48px)}.design-detail-hero.live-tablet .embedded-preview{width:min(768px,100% - 48px)}.design-detail-hero.live-mobile .embedded-preview{width:min(390px,100% - 48px)}.embedded-preview-detail.tablet .static-preview{width:min(520px,100% - 48px)}.embedded-preview-detail.mobile .static-preview{width:min(270px,100% - 48px)}}@media (width<=900px){.design-detail-devices{top:60px}.design-detail-hero.live-tablet,.design-detail-hero.live-mobile{padding-top:120px}}@media (width<=640px){.design-detail-body,.design-related-body{padding:12px}.design-detail-hero{height:520px}.design-detail-hero .embedded-preview{width:calc(100% - 24px)}.design-detail-hero.live-tablet,.design-detail-hero.live-mobile{min-height:520px;padding-top:160px}.design-detail-hero.live-tablet .embedded-preview,.design-detail-hero.live-mobile .embedded-preview{width:calc(100% - 24px)}.embedded-preview-detail.tablet .static-preview{width:min(72%,360px)}.embedded-preview-detail.mobile .static-preview{width:min(42%,220px)}.design-detail-back,.design-detail-top-actions{top:12px}.design-detail-back,.design-detail-top-actions .preview-top-button,.design-detail-top-actions .copy-prompt-button{font-size:10px}.design-detail-back{left:12px}.design-detail-top-actions{justify-content:space-between;gap:8px;top:56px;left:12px;right:12px}.design-detail-top-actions .preview-top-button,.design-detail-top-actions .copy-prompt-button{padding-inline:8px}.design-detail-devices{top:104px}.design-detail-tags{bottom:12px;left:12px;right:12px}.design-detail-tags span{min-height:23px;padding:3px 6px;font-size:10px}.design-detail-meta{flex-direction:column;align-items:flex-start}.design-related-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.embedded-preview-detail .static-preview{transition:none}}
