:root{color-scheme:dark;--bg:#100d14;--card:#17131d;--gold:#d7b98b;--gold2:#b59061;--muted:#bfb0c2;--cream:#f1d5ae}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;background:radial-gradient(ellipse at 50% 5%,#332334 0%,#17111c 51%,#0e0c11 100%);color:#fff}
.page{min-height:100vh;display:flex;justify-content:center;align-items:center;padding:28px 16px}
.welcome{width:min(100%,720px);padding:25px clamp(14px,4vw,38px) 17px;background:linear-gradient(155deg,#221b27 0%,#17131d 67%,#15101a 100%);border:1px solid rgba(212,176,127,.17);border-radius:24px;box-shadow:0 28px 80px rgba(0,0,0,.42);position:relative;overflow:hidden}
.welcome:before{content:"";position:absolute;top:0;left:16%;width:68%;height:1px;background:linear-gradient(90deg,transparent,#b59061,transparent)}
.intro{text-align:center;margin-bottom:20px}
.eyebrow{display:block;font-size:10px;color:#c2a782;letter-spacing:.34em;margin-bottom:8px}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:clamp(25px,4.5vw,38px);line-height:1.12;letter-spacing:-.02em;color:var(--cream);margin:0 0 8px}
.intro p{color:#d8cbd8;font-size:13px;letter-spacing:.035em;margin:0}
.intro p span{color:#e2b99e}
.photos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:570px;margin:0 auto}
.photo-frame{width:100%;aspect-ratio:4/5;border-radius:13px;overflow:hidden;background:#362c33;border:1px solid rgba(228,198,157,.16);box-shadow:0 8px 24px rgba(0,0,0,.25)}
.photo-frame img{width:100%;height:100%;object-fit:cover;display:block}
#office-photo{object-position:center 36%}
#coquette-photo{object-position:center 30%}
.action{text-align:center;margin:20px auto 19px}
.start-button{display:inline-flex;justify-content:center;align-items:center;gap:14px;min-width:205px;min-height:52px;border-radius:999px;color:#fff;text-decoration:none;font-weight:700;letter-spacing:.16em;font-size:16px;background:linear-gradient(140deg,#cbaa79,#a78051);border:1px solid #d2b58a;box-shadow:0 6px 22px rgba(165,120,67,.23);transition:transform .15s ease,filter .15s ease}
.start-button:hover{transform:translateY(-2px);filter:brightness(1.1)}
.start-button:focus-visible{outline:3px solid #ffe5b7;outline-offset:4px}
.start-button span{font-size:20px;font-weight:400}
.action p{font-size:12px;color:var(--muted);margin:10px 0 0}
.bottom{border-top:1px solid rgba(212,176,127,.12);padding-top:13px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#d5bd97;font-size:11px}
.brand{letter-spacing:.22em;font-family:Georgia,serif}
.counter{display:flex;align-items:center;gap:5px;color:#cbb28c;white-space:nowrap}
.counter strong{font-weight:500;font-variant-numeric:tabular-nums}
@media(max-width:420px){.page{padding:12px 9px}.welcome{padding:20px 11px 13px;border-radius:17px}.intro{margin-bottom:15px}.photos{gap:8px}.photo-frame{border-radius:9px}.action{margin:17px auto 15px}.start-button{min-width:190px;min-height:49px}h1{font-size:clamp(22px,6vw,29px)}.bottom{font-size:10px}}
@media(min-width:900px){.welcome{max-width:690px}.photos{max-width:550px}}
@media(prefers-reduced-motion:reduce){.start-button{transition:none}}