/* Supplied folded-D and keys wordmark film; keep the whole composition. */
.entry-brain-stage{display:flex;align-items:center;justify-content:center}
.login-logo-media{display:block;position:relative;width:min(100%,420px);aspect-ratio:1;overflow:hidden;text-decoration:none;/* Feather the baked-in film background into the page, without cropping the mark. */
-webkit-mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 86%,rgba(0,0,0,.95) 89%,rgba(0,0,0,.55) 93%,rgba(0,0,0,.12) 97%,transparent 100%);
mask-image:linear-gradient(to right,transparent,#000 12%,#000 88%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 86%,rgba(0,0,0,.95) 89%,rgba(0,0,0,.55) 93%,rgba(0,0,0,.12) 97%,transparent 100%);
-webkit-mask-composite:source-in;mask-composite:intersect}
.login-logo-poster,.login-logo-video{display:block;width:100%;height:100%;object-fit:contain}
.login-logo-video{position:absolute;inset:0;opacity:0}
.login-logo-media[data-ready="true"] .login-logo-video{opacity:1}
@media(max-width:700px){.login-logo-media{width:min(100%,240px)}}
@media(prefers-reduced-motion:reduce){.login-logo-video{display:none}}

/* Transparent frame output eliminates the film rectangle in both themes. */
.login-logo-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
.login-logo-media[data-transparent="true"]{mask-image:none;-webkit-mask-image:none}
.login-logo-media[data-transparent="true"] .login-logo-canvas{opacity:1}
.login-logo-media[data-transparent="true"] .login-logo-poster,.login-logo-media[data-transparent="true"] .login-logo-video{opacity:0}

/* Public entry refinements, scoped away from authenticated page controls. */
.entry-main .access{border-color:rgba(156,194,199,.5)}
.access .login-guidance{font-size:.875rem;line-height:1.5;color:#b9cdd9;margin:8px 0 18px}
.entry-main .access .field{overflow:hidden;border:1px solid #718f9e!important;background:rgba(5,20,31,.5)!important;box-shadow:none!important}
.entry-main .access .field input,.entry-main .access .field .reveal{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.entry-main .access .field input{outline:none!important;letter-spacing:normal}
.entry-main .access .field:focus-within{outline:2px solid #9cc7f4;outline-offset:3px}
.entry-main .access .field:has([aria-invalid="true"]){border-color:#e99090!important}
.access .login-help{margin-top:14px;font-size:.8rem;color:#b9cdd9}
.access .login-help summary{cursor:pointer;min-height:36px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:3px}
.access .login-help p{margin:4px 0 0;line-height:1.55}
footer .login-phase{display:inline-block;margin-top:8px;font-size:.65rem;letter-spacing:.035em;color:#a9bbc9}
.login-logo-fallback{visibility:hidden;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;color:#ecf7fb;font-size:clamp(28px,4vw,42px);letter-spacing:.015em}
.login-logo-fallback svg{width:46%;height:46%}
.login-logo-media:not([data-transparent="true"]){mask-image:none;-webkit-mask-image:none}
.login-logo-media:not([data-transparent="true"]) .login-logo-poster,.login-logo-media:not([data-transparent="true"]) .login-logo-video{opacity:0}
.login-logo-media[data-transparent="true"] .login-logo-fallback{visibility:hidden}
html[data-theme="light"] .entry-main .access{border-color:#b4c8cf!important}
html[data-theme="light"] .access .login-guidance,html[data-theme="light"] .access .login-help,html[data-theme="light"] footer .login-phase{color:#405e6d!important}
html[data-theme="light"] .entry-main .access .field{background:#f9fcfd!important;border-color:#819eac!important}
html[data-theme="light"] .entry-main .access .field:focus-within{outline-color:#326e92}
html[data-theme="light"] .login-logo-fallback{color:#244c54}
html[data-theme="light"] .login-logo-fallback svg{filter:brightness(.65)}
@media(max-width:700px){body:has(.entry-main){justify-content:flex-start;padding-block:64px 24px}.entry-main .entry-brain-stage{height:220px}.entry-main{gap:12px}.login-logo-fallback{gap:18px;font-size:28px}.entry-main .access{max-width:400px}.access .login-guidance{margin-bottom:14px}}
@media(forced-colors:active){.entry-main .access .field{border-color:CanvasText!important}.access .login-guidance,.access .login-help,footer .login-phase{color:CanvasText!important}}

/* Do not show the finished mark before the animation starts. */
.login-logo-media[data-fallback="true"] .login-logo-fallback{visibility:visible}

/* One responsive composition: balanced brand and form, stable during playback. */
body:has(>.entry-main){min-height:100svh;padding:64px 24px 32px;justify-content:center}
body>.entry-main.wrap{width:100%;max-width:920px;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(32px,5vw,72px);margin:0 auto 28px;min-height:0;align-items:center}
.entry-main>.entry-brain-stage{width:100%;max-width:380px;height:auto;aspect-ratio:1;justify-self:center}
.entry-main .login-logo-media{width:100%;max-width:none;transform:translateY(-6%)}
.entry-main>.access{width:100%;max-width:420px;padding:28px;border-radius:22px;justify-self:center;align-self:center}
.entry-main .access>h2{font-size:1.6rem;line-height:1.2;letter-spacing:-.035em;margin:0 0 10px}
.entry-main .access .login-guidance{font-size:.9rem;margin:0 0 22px;line-height:1.5}
.entry-main .access .field input{height:50px;padding-inline:14px;font-size:1rem}
.entry-main .access .reveal{min-height:48px;min-width:64px;font-size:.8rem}
.entry-main .access .enter{min-height:48px;margin-top:12px;padding:11px 15px;font-size:.9rem}
.entry-main .access .login-help{margin:14px 0 0;font-size:.8rem}
.entry-main .access .login-help summary{min-height:44px;line-height:1.4}
body:has(>.entry-main)>footer{padding:0;border:0;background:transparent!important;text-align:center}
body:has(>.entry-main)>footer .wrap{width:100%;max-width:920px}
body:has(>.entry-main)>footer .credit{margin:0 0 3px;font-size:.8rem}
body:has(>.entry-main)>footer p{font-size:.75rem;line-height:1.5}
body:has(>.entry-main)>footer .login-phase{margin-top:5px;font-size:.65rem}
@media(max-width:820px){
 body:has(>.entry-main){padding:56px 20px 24px}
 body>.entry-main.wrap{max-width:400px;grid-template-columns:minmax(0,1fr);gap:8px;margin-bottom:24px}
 .entry-main>.entry-brain-stage{width:clamp(180px,48vw,220px);max-width:220px}
 .entry-main>.access{grid-column:1;grid-row:2;padding:22px;border-radius:20px}
 .entry-main .access>h2{font-size:1.45rem}
 .entry-main .access .login-guidance{margin-bottom:18px}
}
@media(max-width:380px){body:has(>.entry-main){padding-inline:16px}.entry-main>.access{padding:20px}.entry-main>.entry-brain-stage{width:180px}}
@media(max-height:650px) and (max-width:820px){body:has(>.entry-main){justify-content:flex-start}.entry-main>.entry-brain-stage{width:160px}}