.social-release { padding: var(--space-5); margin-block: var(--space-5); background: var(--color-deep); border: 1px solid var(--color-line-strong); border-radius: var(--radius-medium); }
.social-release h3 { font-size: var(--text-card); margin-bottom: var(--space-4); }
.social-release > p:not(.eyebrow) { font-size: var(--text-small); margin-top: 0; }
.release-channel-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); margin-block: var(--space-5); }
.release-channel-links a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-caption); padding: 10px 12px; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-small); transition: transform var(--duration-normal) var(--ease-out), background var(--duration-normal), border-color var(--duration-normal); }
.release-channel-links a:hover { transform: translateY(-3px); border-color: var(--color-accent); background: var(--color-raised); }
.release-channel-links a > span { color: var(--color-accent); }
.release-countdown-label { margin-bottom: var(--space-3); color: var(--color-subtle); font-size: var(--text-caption); letter-spacing: var(--tracking-label); }
.hunt-countdown { display: flex; gap: var(--space-3); }
.countdown-cell { flex: 1; min-width: 0; padding: var(--space-4) var(--space-2); text-align: center; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-small); }
.countdown-cell > span { display: block; color: var(--color-accent); font: var(--weight-normal) var(--text-digit)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.countdown-cell > small { display: block; margin-top: var(--space-3); color: var(--color-subtle); font-size: var(--text-caption); letter-spacing: .08em; }
.social-release .release-time { margin: var(--space-3) 0 0; color: var(--color-subtle); font-size: var(--text-caption); }
.demo-phases { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-6); padding: var(--space-3); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-small); }
.demo-phases > span { font-size: var(--text-caption); color: var(--color-subtle); margin-inline: var(--space-2); }
.demo-phases a { border-radius: var(--radius-small); padding: 7px 12px; font-size: var(--text-small); color: var(--color-muted); transition: color var(--duration-fast), background var(--duration-fast); }
.demo-phases a[aria-current="page"] { background: var(--color-accent); color: var(--color-ink); }
.demo-phases a:hover { color: var(--color-accent); background: var(--color-raised); }
.demo-phases a[aria-current="page"]:hover { background: var(--color-accent-hover); color: var(--color-ink); }
.puzzle-video-frame { aspect-ratio: 16/9; position: relative; margin-block: var(--space-5); background: radial-gradient(ellipse at 60% 0%,color-mix(in srgb,var(--color-accent) 10%,transparent),transparent),var(--color-deep); border: 1px solid var(--color-line); border-radius: var(--radius-small); overflow: hidden; }
.puzzle-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.release-play { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); text-align: center; }
.release-play > span { display: grid; place-items: center; width: 60px; height: 60px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-pill); color: var(--color-accent); transition: transform var(--duration-normal) var(--ease-out), background var(--duration-normal), color var(--duration-normal); }
.release-play:hover > span { transform: scale(1.1); background: var(--color-accent); color: var(--color-ink); }
.release-play b { font-size: var(--text-body); font-weight: var(--weight-strong); }
.release-play small { font-size: var(--text-caption); color: var(--color-subtle); }
.video-placeholder { display: flex; flex-direction: column; justify-content: center; padding: var(--space-5); }
.video-placeholder > b { font-size: var(--text-lead); }
.video-placeholder > p { font-size: var(--text-small); margin-top: var(--space-3); margin-bottom: 0; }
.release-retry { margin-top: var(--space-4); }
.teaser-content > p:not(.eyebrow) { max-width: 640px; }
.teaser-countdown { max-width: 650px; margin: var(--space-6) auto; }
.teaser-countdown .hunt-countdown { gap: var(--space-4); }
.teaser-countdown .countdown-cell { padding-block: var(--space-5); }
.teaser-media { max-width: 650px; margin: var(--space-6) auto; }
.teaser-video-placeholder { min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-5); background: var(--color-surface); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-medium); }
.teaser-video-placeholder > span { color: var(--color-accent); opacity: .65; font-size: var(--text-card); }
.teaser-video-placeholder > b { font-size: var(--text-lead); }
.teaser-video-placeholder > small { font-size: var(--text-small); color: var(--color-subtle); }
.teaser-next strong { color: var(--color-text); font-weight: var(--weight-strong); }
.teaser-content > .button .icon { width: 19px; height: 19px; }
.footer-socials { align-self: start; padding-top: var(--space-7); }
@media(max-width:480px) {
 .social-release { padding: var(--space-4); }
 .release-channel-links { grid-template-columns: 1fr; }
 .hunt-countdown { gap: var(--space-2); }
 .countdown-cell { padding: var(--space-4) var(--space-1); }
 .countdown-cell > small { font-size: var(--text-tiny); letter-spacing: .03em; }
 .teaser-content h2 { font-size: var(--text-section); }
 .teaser-countdown .hunt-countdown { gap: var(--space-2); }
 .teaser-countdown .countdown-cell { padding-block: var(--space-4); }
 .demo-phases { gap: var(--space-1); }
 .demo-phases > span { width: 100%; margin-bottom: var(--space-1); }
 .demo-phases a { font-size: var(--text-caption); padding-inline: var(--space-2); }
 .video-placeholder { aspect-ratio: auto; min-height: 220px; }
 .footer-socials { padding-top: 0; }
}