:root{color-scheme:light dark;font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;--ink:#233249;--base:#e4e5f5;--glass:rgba(255,255,255,.5);--edge:rgba(255,255,255,.8);--warm:#ffd4ae;--purple:#b2a0ed;--aqua:#72dce2;--shadow:rgba(56,68,118,.13)}
*{box-sizing:border-box}body{margin:0;background:var(--base);color:var(--ink)}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.scene{position:relative;isolation:isolate;min-height:100svh;min-height:100dvh;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:max(32px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));background:var(--base);transition:background 1.5s,color 1.5s}
.aurora{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}.glow{position:absolute;width:110%;height:105%;border-radius:45%;filter:blur(50px);animation:flow 22s ease-in-out infinite alternate;will-change:transform;opacity:.95}.peach{left:-40%;top:-48%;background:radial-gradient(ellipse,var(--warm),transparent 68%)}.violet{left:24%;top:-12%;background:radial-gradient(ellipse,var(--purple),transparent 68%);animation-delay:-10s;animation-duration:28s}.turquoise{left:-15%;top:42%;background:radial-gradient(ellipse,var(--aqua),transparent 70%);animation-delay:-18s;animation-duration:25s}
.masthead{text-align:center;font-size:11px;letter-spacing:4px;font-weight:500;line-height:1.5}.masthead span{display:block;letter-spacing:.3px;font-size:12px;font-weight:400;margin-top:9px;opacity:.75}
.floating{align-self:center;width:min(100%,370px);padding:40px 0;animation:float 6s ease-in-out infinite}.glass{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:350px;padding:32px 24px;border:1px solid var(--edge);border-radius:34px;background:linear-gradient(135deg,var(--glass),rgba(255,255,255,.12));box-shadow:inset 0 1px 0 var(--edge),0 24px 65px var(--shadow);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:pan-y;transition:transform .35s,box-shadow .35s,background 1.5s}
.glass.holding{transform:scale(.965);box-shadow:0 0 40px rgba(103,222,240,.5)}.symbol{font-size:40px;font-weight:300;line-height:1;margin-bottom:22px}.headline{max-width:100%;min-height:132px;display:block;align-content:center;font-size:clamp(38px,11vw,58px);font-weight:350;letter-spacing:-2px;line-height:1.12;overflow-wrap:anywhere;transition:opacity .24s,filter .24s,transform .24s}.headline.switching{opacity:0;filter:blur(10px);transform:translateY(-6px) scale(.94)}.cursor{animation:blink 1.1s steps(1) infinite;font-weight:200;opacity:.8}.greeting{margin-top:20px;font-size:16px;line-height:1.5;text-align:center}.divider{width:60px;height:1px;margin:24px 0;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.25}.languages{display:flex;gap:18px;font-size:11px;letter-spacing:1px;line-height:1.5}.languages span{opacity:.55}.languages .active{opacity:1;text-decoration:underline;text-underline-offset:6px}
footer{text-align:center;font-size:12px;line-height:1.8}footer p{margin:0 0 12px;opacity:.8}.actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.actions button{padding:10px 12px;min-height:44px;border:1px solid transparent;border-radius:22px;background:rgba(255,255,255,.15);font-size:12px}.actions button:hover{background:rgba(255,255,255,.3)}
#particles{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}.particle{position:absolute;width:6px;height:9px;border-radius:2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
:root[data-period=day]{--warm:#dbbefb;--purple:#a29bf1;--aqua:#6bd9df}:root[data-period=evening]{--warm:#ffc398;--purple:#b29adc;--aqua:#94cbdc}:root[data-period=night]{--warm:#b9b7e5;--purple:#acb8e3;--aqua:#96d3dc}
@media(prefers-color-scheme:dark){:root{--ink:#eef4ff;--base:#0c1532;--glass:rgba(175,198,255,.14);--edge:rgba(220,235,255,.34);--warm:#563b82;--purple:#453ba2;--aqua:#146575;--shadow:rgba(0,0,0,.2)}:root[data-period=morning]{--warm:#77506e;--purple:#49467b;--aqua:#21596b}:root[data-period=day]{--warm:#523e94;--purple:#344fa5;--aqua:#08727d}:root[data-period=evening]{--warm:#5a326c;--purple:#433a87;--aqua:#155b72}:root[data-period=night]{--warm:#332f77;--purple:#263c89;--aqua:#06566b}}
.paused .glow,.paused .floating,.paused .cursor{animation-play-state:paused}.paused .headline{transition:none}
@keyframes flow{from{transform:translate(-7%,-4%) rotate(-18deg) scale(.95)}to{transform:translate(20%,12%) rotate(22deg) scale(1.2)}}@keyframes float{0%,100%{transform:translateY(5px)}50%{transform:translateY(-5px)}}@keyframes blink{50%{opacity:0}}
@media(max-height:650px){.scene{padding-top:20px;padding-bottom:16px}.floating{padding:26px 0}.glass{min-height:280px;padding:24px 20px}.symbol{font-size:30px;margin-bottom:14px}.headline{font-size:44px;min-height:102px}.divider{margin:18px 0}.greeting{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.glow{will-change:auto}}