:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#08090c;color:#f0eeea}
*{box-sizing:border-box}body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 42%,#151719 0,#0b0c10 42%,#08090c 75%);display:flex;flex-direction:column}main{position:relative;flex:1;min-height:620px;display:grid;place-items:center;isolation:isolate;overflow:hidden}
.cinema{position:absolute;inset:0;pointer-events:none;z-index:-1;--size:min(46vw,450px)}
.atmosphere{position:absolute;width:calc(var(--size)*1.65);height:calc(var(--size)*1.65);left:50%;top:42%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#e7c28b00 30%,#e4be8310 42%,#c8c0af08 50%,transparent 66%);filter:blur(22px)}
.halo{position:absolute;left:50%;top:42%;width:var(--size);height:var(--size);transform:translate(-50%,-50%);border-radius:50%;border:2px solid #fff3d6;box-shadow:0 0 5px 1px #fff6e6,0 0 17px 3px #e9d2a7a0,0 0 48px 10px #cbaa6e45,inset 0 0 6px #fff5d9,inset 0 0 24px #f2cb7e50;background:radial-gradient(circle,transparent 63%,#e6cb8d12 70%,transparent 72%)}
.lens{position:absolute;width:calc(var(--size)*.83);height:calc(var(--size)*.83);left:50%;top:42%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 45% 35%,#171a1d,#08090c 56%,#18191c 66%,#08090b 67%,#202126 69%,#08090b 70%);box-shadow:inset 0 2px 3px #ffffff15,0 14px 25px #000b}
.glass{position:absolute;inset:15%;border-radius:50%;border:1px solid #37383755;background:radial-gradient(ellipse at 35% 25%,#889a9e13,transparent 50%),radial-gradient(ellipse at 70% 80%,#a88d6120,transparent 45%),#07090b;box-shadow:0 0 0 9px #0b0d10,0 0 0 10px #292b2e66,inset 0 0 30px #000}
.reflection{position:absolute;left:50%;top:calc(42% + var(--size)*.58);width:calc(var(--size)*1.2);height:55px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,#e4c58b27,transparent 68%);filter:blur(12px)}
.identity{text-align:center;position:absolute;left:0;right:0;top:calc(42% - 28px);display:flex;align-items:center;flex-direction:column}h1{font-size:clamp(34px,4.4vw,52px);font-weight:400;letter-spacing:.035em;line-height:1;margin:0;text-shadow:0 2px 14px #000}
.google-login{display:block;width:180px;height:40px;border-radius:20px;margin-top:calc(min(46vw,450px)*.5 + 30px);transition:box-shadow .2s,transform .2s}.google-login img{display:block;width:180px;height:40px}.google-login[hidden],[hidden]{display:none!important}.google-login:hover{transform:translateY(-2px);box-shadow:0 0 24px #ead9b526}a:focus-visible{outline:2px solid #ffe2a6;outline-offset:7px}a{touch-action:manipulation;-webkit-tap-highlight-color:#d9c19140}
#login-status{font-size:13px;line-height:1.5;color:#c4beb4;max-width:300px;padding-inline:12px}#login-status:empty{display:none}#login-status:not(:empty){margin-top:calc(min(46vw,450px)*.5 + 30px)}.google-login:not([hidden])+#login-status:not(:empty){margin-top:18px}
footer{display:flex;justify-content:center;gap:25px;padding:24px 20px max(28px,env(safe-area-inset-bottom));font-size:11px}footer a{color:#969799;text-decoration:none;padding-block:6px}footer a:hover{color:#eee8db}
#debug-notes{position:fixed;bottom:70px;left:20px;right:20px;max-width:440px;background:#181a20f5;border:1px solid #555;padding:18px;font-size:12px;line-height:1.5;z-index:2}#debug-notes p{margin-bottom:0;color:#bbb}
@media(max-width:600px){.cinema{--size:min(78vw,350px)}main{min-height:560px}.identity{top:calc(42% - 20px)}h1{font-size:36px}.google-login{margin-top:calc(min(78vw,350px)*.5 + 28px)}#login-status:not(:empty){margin-top:calc(min(78vw,350px)*.5 + 28px)}}
@media(prefers-reduced-motion:reduce){.google-login{transition:none}.google-login:hover{transform:none}}