:root { --navy:#01243f; --blue:#015a9c; --orange:#ff6700; --ink:#10202e; --muted:#687785; --paper:#fff; }
* { box-sizing: border-box; }
html { min-height: 100%; }
body { min-height:100vh; margin:0; display:grid; place-items:center; overflow-x:hidden; color:var(--ink); background:radial-gradient(circle at 75% 15%,var(--blue),var(--navy) 55%); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
body::before,body::after { content:""; position:fixed; border-radius:50%; pointer-events:none; opacity:.22; }
body::before { width:34rem; height:34rem; right:-16rem; top:-18rem; border:2px solid #39a0e7; }
body::after { width:22rem; height:22rem; left:-12rem; bottom:-12rem; border:2px solid var(--orange); }
main { width:min(92vw,490px); margin:2rem 0; padding:clamp(1.7rem,5vw,2.5rem); position:relative; text-align:center; background:var(--paper); border-radius:26px; box-shadow:0 26px 70px rgba(0,0,0,.28); animation:arrive .75s ease-out both; }
.logo { display:block; width:min(76%,310px); height:auto; margin:-1rem auto .3rem; }
.kicker { margin:0 0 .75rem; color:#a84d12; font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2rem,8vw,2.65rem); line-height:1.05; letter-spacing:-.04em; }
.lead { max-width:24rem; margin:1rem auto 1.55rem; color:var(--muted); font-size:1rem; line-height:1.6; }
.themes { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; margin-bottom:1.4rem; }
.theme { padding:.75rem .35rem; border:1px solid #e2e9ef; border-radius:13px; color:var(--navy); background:#f8fbfd; font-size:.8rem; font-weight:750; }
.theme span { display:block; margin-bottom:.25rem; font-size:1.15rem; }
.status { display:flex; align-items:center; justify-content:center; gap:.65rem; width:100%; padding:.9rem 1rem; color:#fff; background:#292929; border-radius:13px; font-size:.92rem; font-weight:800; }
.dot { width:.6rem; height:.6rem; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(255,103,0,.45); animation:pulse 2s infinite; }
.microsoft-button { display:flex; align-items:center; justify-content:center; gap:.8rem; width:100%; padding:.95rem 1rem; color:#fff; background:var(--navy); border-radius:13px; text-decoration:none; font-size:.95rem; font-weight:800; transition:transform .18s ease,background .18s ease; }
.microsoft-button:hover { transform:translateY(-2px); background:var(--blue); }
.ms-grid { display:grid; grid-template-columns:repeat(2,.55rem); gap:.12rem; }
.ms-grid i { width:.55rem; height:.55rem; background:#f35325; }
.ms-grid i:nth-child(2) { background:#81bc06; }.ms-grid i:nth-child(3) { background:#05a6f0; }.ms-grid i:nth-child(4) { background:#ffba08; }
.privacy-note,footer { margin-top:1rem; color:#8a96a0; font-size:.73rem; }
.user-bar { display:flex; justify-content:center; align-items:center; gap:.55rem; margin-top:1rem; color:#71808c; font-size:.72rem; }
.user-bar a { color:#a84d12; font-weight:700; }
@keyframes arrive { from{opacity:0;transform:translateY(18px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes pulse { 70%{box-shadow:0 0 0 10px rgba(255,103,0,0)} 100%{box-shadow:0 0 0 0 rgba(255,103,0,0)} }
@media(max-width:430px){main{margin:1rem 0}.logo{width:72%}.themes{gap:.35rem}.theme{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}}