@font-face{font-family:Narrator;src:url('assets/fonts/ArchitectsDaughter-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
*{box-sizing:border-box}
html{background:#000;color-scheme:dark}
body{margin:0;background:#000;color:#d2d5da}
.looking-back{position:relative;isolation:isolate;min-height:100dvh;overflow:clip}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.starfield{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.galaxy{position:absolute;inset:-5dvh 0 auto;height:54dvh;pointer-events:none;mix-blend-mode:screen}
.galaxy img{display:block;width:100%;height:100%;object-fit:contain;transform:scale(.64);transform-origin:40% 50%;mask-image:linear-gradient(#000 85%,transparent)}
.centerpiece{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,440px) 270px;align-items:center;gap:64px;width:min(830px,86vw);margin:auto;padding-top:46dvh;padding-bottom:max(110px,15dvh)}
.passage{margin:0;text-align:right}
blockquote{margin:0;font:400 13px/1.9 Narrator,sans-serif;letter-spacing:.025em;text-transform:uppercase;text-wrap:pretty}
blockquote p{margin:0 0 1em}blockquote p:last-child{margin-bottom:0}
.login-panel{position:relative;display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:10px 12px;padding:22px;background:#000c}
.panel-border{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.panel-border path{fill:none;stroke:#edece7;stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.login-panel label,.login-panel button{font:400 14px/1.5 Narrator,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.login-panel label{display:block;margin:0}
.login-panel input{display:block;width:100%;min-width:0;height:36px;margin:0;border:1px solid #74777c;border-radius:0;background:#101216;color:#eee;padding:7px 9px;font:15px/1.4 system-ui,sans-serif}
.login-panel input:focus-visible,.login-panel button:focus-visible{outline:2px solid #e0e9f9;outline-offset:4px}
.login-panel button{grid-column:2;justify-self:start;padding:6px 14px;border:1px solid #cbcbd0;background:transparent;color:#eee;cursor:pointer;min-height:36px}
.login-panel button:hover{background:#e8e8e8;color:#111}
.form-status{grid-column:1/-1;margin:5px 0 0;color:#9a9da4;font:11px/1.5 system-ui,sans-serif}
.form-status:empty{display:none}
.crown{position:fixed;z-index:3;bottom:-90px;left:50%;width:max(2400px,100vw);transform:translateX(-50%);pointer-events:none}
.crown img{display:block;width:100%;height:auto}
.crown-background{position:fixed;z-index:1;bottom:-40px;left:50%;width:2800px;transform:translateX(-50%);pointer-events:none;opacity:.58}
.crown-background img{display:block;width:100%;height:auto}
@media(max-height:850px){.crown-background{opacity:.48;mask-image:linear-gradient(transparent 15%,#000 65%)}}
@media(max-height:650px){.crown{bottom:-150px}.crown-background{opacity:.16;mask-image:linear-gradient(transparent 42%,#000 90%)}}
::selection{background:#52617d;color:#fff}
@media(max-width:700px){
 .galaxy{top:-1dvh;height:34dvh;left:-5%;right:-5%}
 .centerpiece{grid-template-columns:1fr;gap:28px;width:min(380px,84vw);padding-top:32dvh;padding-bottom:210px}
 .passage{width:100%}blockquote{font-size:12px;line-height:1.8}
 .login-panel{width:270px;justify-self:end}
}
@media(max-height:560px) and (min-width:701px){.centerpiece{padding-top:43dvh}.galaxy{height:50dvh}}