*{box-sizing:border-box}
[hidden]{display:none!important}
:root{color-scheme:dark;--brand-width:min(34vw,60vh);--safe-top:0px;--safe-right:0px;--safe-bottom:0px;--safe-left:0px}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#000309}
body{font-family:var(--duv-font-ui);user-select:none;background:radial-gradient(ellipse at 100% 50%,#051b35 0%,#000812 50%,#000207 100%)}
.scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.scene img{position:absolute;top:0;right:calc(-1 * max(0px,calc(49.784vh - 28vw)));height:100%;width:auto;max-width:none;mask-image:linear-gradient(to right,transparent 0%,#000 32%,#000 100%)}
.stage{position:absolute;inset:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left)}
.content{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(84vw,140vh);display:flex;flex-direction:column;align-items:center;text-align:center}
.brand{display:block;flex:none;width:var(--brand-width);height:auto;aspect-ratio:507/130;overflow:hidden}
.message{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:clamp(20px,18vh,260px)}
.signature{display:block;flex:none;width:min(26vw,46vh);height:auto;aspect-ratio:390/125;overflow:visible}
.ink{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;stroke-linecap:round}
.signature.writing .ink{animation:write var(--duration) linear var(--delay) forwards}
.phrase{width:var(--brand-width);margin:clamp(4px,.7vh,16px) 0 0;color:#969da7;font-size:clamp(12px,min(1.38vw,2.45vh),48px);font-weight:350;letter-spacing:.015em;line-height:1.4;opacity:0;text-wrap:balance;overflow-wrap:break-word}
.ready .phrase{animation:appear 800ms ease-out 2850ms forwards}
@keyframes write{from{opacity:1;stroke-dashoffset:1}to{opacity:1;stroke-dashoffset:0}}
@keyframes appear{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-aspect-ratio:1/1){:root{--brand-width:56vw}.scene img{right:calc(-8vw - max(0px,calc(16.884vh - 30vw)));mask-image:linear-gradient(to right,transparent 0%,#000 40%,#000 100%)}.content{width:84vw}.brand{max-width:74vh}.message{margin-top:clamp(30px,15vh,300px)}.signature{width:44vw;max-width:58vh}.phrase{width:70vw;font-size:clamp(12px,2.3vw,38px);line-height:1.45;margin-top:1.4vh}}
@media(max-height:450px) and (min-aspect-ratio:1/1){.message{margin-top:10vh}.phrase{font-size:clamp(10px,2.4vh,16px)}}
@media(prefers-reduced-motion:reduce){.signature.writing .ink{animation:none;opacity:1;stroke-dashoffset:0}.ready .phrase{animation:none;opacity:1}}
.wallpaper-paused *,.wallpaper-paused *::before,.wallpaper-paused *::after{animation-play-state:paused!important}

.phrase-author{display:block;width:var(--brand-width);margin-top:4px;color:#7f8895;font-size:clamp(9px,min(.75vw,1.35vh),18px);font-weight:400;letter-spacing:.04em;line-height:1.25;text-align:center;opacity:0}
.ready .phrase-author{animation:appear 800ms ease-out 2950ms forwards}
@media(max-aspect-ratio:1/1){.phrase-author{width:70vw;font-size:clamp(9px,1.5vw,17px)}}
@media(prefers-reduced-motion:reduce){.ready .phrase-author{animation:none;opacity:1}}/* Login shares the member board's deep teal base and soft portrait halo. */
html.cloud-login .scene{
 background:
  radial-gradient(ellipse 27% 47% at 78% 43%,#a6d4ea32 0%,transparent 76%),
  radial-gradient(ellipse 49% 75% at 77% 47%,#8ebcd518 0%,transparent 82%),
  linear-gradient(90deg,#102938,#103447 55%,#03090b);
}
html.cloud-login .scene img{
 filter:saturate(.55);
 mask-image:linear-gradient(to right,transparent 0%,transparent 30%,#0003 55%,#000 78%);
}
@media(max-aspect-ratio:1/1){
 html.cloud-login .scene{background:
  radial-gradient(ellipse 37% 30% at 73% 25%,#a6d4ea32 0%,transparent 78%),
  radial-gradient(ellipse 66% 47% at 75% 30%,#8ebcd518 0%,transparent 83%),
  linear-gradient(90deg,#102938,#103447 55%,#03090b)}
 html.cloud-login .scene img{mask-image:linear-gradient(to right,transparent 0%,transparent 30%,#0003 55%,#000 78%)}
}

/* Approved architectural stair motif: crisp, seamless staggered repeat. */
html.cloud-login .scene::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2256%22%20viewBox%3D%220%200%2048%2056%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23edeae0%22%20stroke-width%3D%221%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2018h6l1-5h7l1-3M32%2046h6l1-5h7l1-3%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:48px 56px;background-repeat:repeat;opacity:.30;mask-image:linear-gradient(90deg,#000 0%,#000 22%,#000b 34%,#0005 46%,transparent 65%);}
@media(max-aspect-ratio:1/1){html.cloud-login .scene::after{background-size:42px 49px;opacity:.24;mask-image:linear-gradient(90deg,#000 0%,#0009 18%,#0003 38%,transparent 65%)}}

/* Lettering cream, scoped to the hosted entrance. */
html.cloud-login body.team.is-login .phrase,html.cloud-login body.team.is-login .phrase-author{color:var(--duv-cream,#edeae0)}
html.cloud-login .signature{filter:url(#lettering-cream)}