#shell .hero-login-tab{background:#080907;isolation:isolate}
.tld-film-stage{display:block;position:absolute;height:100%;aspect-ratio:16/9;left:50%;top:0;transform:translateX(-50%);pointer-events:none}
#shell .hero-login-tab .tld-film-stage>img,.tld-film-stage>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.tld-film,.tld-final{visibility:hidden}
.tld-wordmark{position:absolute;left:59.7%;top:25.2%;width:13.2%;height:auto;opacity:0;pointer-events:none}
[data-auth-state=idle] .tld-idle,[data-auth-state=authenticating] .tld-idle,[data-auth-state=success-wait] .tld-idle{animation:tld-idle-pulse 6s ease-in-out infinite alternate}
[data-auth-state=playing] .tld-film,[data-auth-state=authenticated]:not(.reduced-final) .tld-film{visibility:visible}
[data-auth-state=authenticated].reduced-final .tld-final{visibility:visible;animation:tld-static-in .14s ease-out}
[data-auth-state=failed] .tld-idle{filter:sepia(.18) saturate(1.15);opacity:.85}
.hero-auth-led{position:absolute;right:13%;bottom:16%;width:3px;height:3px;border-radius:50%;background:#b6ffdc;box-shadow:0 0 3px #63efac,0 0 7px #47d89177;opacity:0;pointer-events:none}
[data-auth-state=authenticated] .hero-auth-led{opacity:1}
@keyframes tld-idle-pulse{from{filter:brightness(.85)}to{filter:brightness(1)}}
@keyframes tld-static-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#shell .hero-login-tab .tld-idle{animation:none;filter:none}}
/* Dedicated smoked-glass window, strictly inside the existing tab contour. */
#shell .hero-login-tab,#shell .hero-login-tab:hover{background:transparent;box-shadow:none;container-type:size}
.tld-hero-viewport{position:absolute;top:50%;right:8px;left:auto;bottom:auto;width:min(calc(78cqw - 8px),calc((100cqh - 18px)*16/9));height:auto;aspect-ratio:16/9;transform:translateY(-50%);overflow:hidden;pointer-events:none;box-sizing:border-box;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);background:#070a09;border:1px solid rgba(176,190,181,.16);border-radius:2px;box-shadow:inset 0 1px 4px #000c,0 1px 0 #dce9de12}
.tld-film-stage{inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.12) 5%,rgba(0,0,0,.48) 14%,#000 29%,#000 100%)}
.tld-hero-viewport:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 3px #0009,inset 0 -1px 3px #0006;background:linear-gradient(90deg,#070a0933,transparent 30%)}
.hero-auth-led{left:17%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%)}
@media(max-width:600px){.tld-hero-viewport{right:5px;width:min(calc(78cqw - 5px),calc((100cqh - 12px)*16/9))}}
/* The shell bevel provides the frame; the work card supplies the right edge. */
#shell .tld-hero-viewport{top:2px;bottom:4px;right:var(--hero-card-right,8px);left:auto;transform:none;height:calc(100% - 6px);width:min(calc(78cqw - var(--hero-card-right,8px)),calc((100cqh - 6px)*16/9));aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;clip-path:none;background:#070a09}
#shell .tld-film-stage{left:auto;right:0;top:0;bottom:auto;width:auto;height:100%;aspect-ratio:16/9}
#shell .tld-hero-viewport:after{display:none}

/* Film ends at the recessed bevel; the original fine edge passes above it. */
#shell .tld-hero-viewport{top:var(--hero-bevel-inset);bottom:var(--hero-bevel-bottom);height:calc(100% - var(--hero-bevel-inset) - var(--hero-bevel-bottom));width:min(calc(78cqw - var(--hero-card-right,8px)),calc((100cqh - var(--hero-bevel-inset) - var(--hero-bevel-bottom))*16/9))}
#shell .hero-tab-reflection{position:absolute;inset:0;z-index:14;pointer-events:none;background-position:center;background-size:100% 100%;background-repeat:no-repeat}