:root { color-scheme:dark; --blue:#00aff0; --page:#ccefff; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; }
body { min-height:100svh; display:flex; justify-content:center; background:var(--page); font-family:Arial,Helvetica,sans-serif; }
.landing { position:relative; width:min(100%,900px); min-height:100svh; overflow:hidden; background:#111; color:white; isolation:isolate; }
.photo-grid { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:3px; margin:0; background:#b9eafa; }
.photo-grid figure { min-width:0; min-height:0; margin:0; overflow:hidden; background:#171717; }
.photo-grid img { display:block; width:100%; height:100%; object-fit:cover; filter:saturate(.93) brightness(.82); transform:scale(1.002); transition:transform 7s ease; }
.photo-grid figure:nth-child(1) img { object-position:center 25%; }
.photo-grid figure:nth-child(2) img { object-position:center 22%; }
.photo-grid figure:nth-child(3) img { object-position:center 48%; }
.photo-grid figure:nth-child(4) img { object-position:center 38%; }
.landing:hover .photo-grid img { transform:scale(1.035); }
.overlay { position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.03) 0 13%,rgba(0,0,0,.1) 35%,rgba(0,0,0,.24) 100%); }
.profile { position:absolute; z-index:2; top:50%; left:50%; width:min(430px,94%); transform:translate(-50%,-50%); text-align:center; text-shadow:0 2px 1px #151515,0 0 8px rgba(0,0,0,.95); }
.profile h1 { margin:0; font-size:clamp(1.5rem,3vw,2rem); line-height:1.05; font-weight:900; letter-spacing:-.04em; }
.profile h1 span { display:inline-block; margin-left:.12em; font-size:.82em; transform:rotate(-8deg); }
.handle { margin:.38rem 0 1.35rem; font-size:.92rem; line-height:1; font-weight:800; }
.status { display:flex; justify-content:center; align-items:center; gap:.85rem; margin-bottom:.72rem; font-size:.88rem; font-weight:800; white-space:nowrap; }
.status span { display:inline-flex; align-items:center; }
.dot { width:.55rem; height:.55rem; margin-right:.34rem; border-radius:50%; background:#2fe875; box-shadow:0 0 0 1px rgba(255,255,255,.82); }
.clock { position:relative; width:.78rem; height:.78rem; margin-right:.3rem; border:2px solid currentColor; border-radius:50%; }
.clock::before { content:""; position:absolute; left:50%; top:18%; width:1.5px; height:35%; background:currentColor; transform-origin:bottom; }
.clock::after { content:""; position:absolute; left:50%; top:50%; width:31%; height:1.5px; background:currentColor; }
.cta { display:flex; align-items:center; justify-content:center; gap:.6rem; width:13rem; min-height:2.65rem; margin:0 auto; border-radius:.42rem; background:var(--blue); color:#fff; box-shadow:0 .5rem 1.5rem rgba(0,0,0,.3); text-decoration:none; text-shadow:none; font-size:.96rem; font-weight:900; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }
.cta svg { width:1.35rem; height:1.35rem; color:white; }
.cta:hover { transform:translateY(-2px); background:#16b9f5; box-shadow:0 .65rem 1.8rem rgba(0,0,0,.42); }
.cta:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.age { position:absolute; z-index:2; left:50%; bottom:.65rem; transform:translateX(-50%); margin:0; color:rgba(255,255,255,.72); font-size:.7rem; font-weight:700; text-shadow:0 1px 4px #000; white-space:nowrap; }
@media (min-width:901px) { body { padding-inline:15px; } }
@media (max-width:600px) { .photo-grid { gap:2px; } .profile h1 { font-size:1.5rem; } .handle { margin-bottom:1.1rem; font-size:.82rem; } .status { gap:.55rem; font-size:.72rem; } .cta { width:12rem; min-height:2.55rem; font-size:.87rem; } }
@media (max-width:360px) { .status { flex-direction:column; gap:.35rem; } .handle { margin-bottom:.8rem; } }
@media (prefers-reduced-motion:reduce) { .photo-grid img,.cta { transition:none; } }