:root{color-scheme:light;--cyan:#00aff0;--ink:#102733;--muted:#627580;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html{min-height:100%;background:#eff6fa}body{margin:0;min-width:280px;color:var(--ink)}img{display:block;max-width:100%}a{color:inherit;-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid #00618a;outline-offset:5px}h1,h2,p{margin:0}h1,h2{font-size:31px;line-height:1.15;letter-spacing:-1px;font-weight:750}.identity{margin-top:6px;color:var(--muted);font-size:14px;line-height:1.5}.stage{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:24px 16px}.page{position:relative;width:min(100%,420px);overflow:hidden;border-radius:26px;background:#fff;box-shadow:0 16px 56px #12384c12}.cta{display:flex;align-items:center;justify-content:center;min-height:54px;padding:15px 18px;border-radius:999px;background:var(--cyan);color:#002c40;text-decoration:none;font-size:16px;font-weight:750;line-height:1.4;text-align:center;transition:background .16s}.cta:hover{background:#20baf3}.cta:active{background:#008ccf}.destination{font-size:12px;line-height:1.5;text-align:center;margin-top:9px;color:#586e7b}.footer{display:flex;align-items:center;justify-content:center;gap:12px;font-size:12px;line-height:1.5;color:var(--muted)}.footer a{display:inline-flex;align-items:center;min-height:40px;text-decoration:underline;text-underline-offset:3px}.footer span+span{color:#9aacb5}.cover{display:block;overflow:hidden}.cover img{height:100%;width:100%;object-fit:cover}.avatar{width:94px;height:94px;border-radius:50%;border:5px solid #fff;object-fit:cover;object-position:64% 34%;background:#fff}
/* 01 — Profile: recognizable cover/avatar composition with three clear previews. */
.profile-cover{height:clamp(260px,37svh,330px)}.profile-cover img{object-position:62% 30%}.profile-content{position:relative;padding:56px 24px 10px}.profile-avatar{position:absolute;top:-47px;left:20px}.photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:17px 0 21px}.photo-strip img{width:100%;height:clamp(96px,13.3svh,116px);object-fit:cover;object-position:62% 28%;border-radius:8px}.photo-strip img:first-child{object-position:62% 30%}.profile .footer{margin-top:13px}
/* 02 — Full Frame: the portrait is the page; content sits in the lower gradient. */
.full-frame{height:calc(100svh - 48px);max-height:880px;min-height:620px;background:#15242b;color:#fff;display:flex;align-items:flex-end}.full-frame-cover{position:absolute;inset:0;height:100%}.full-frame-cover img{object-position:63% 25%}.full-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 37%,#10202a0a 44%,#10202a91 65%,#10202af5 83%,#10202a 100%);pointer-events:none}.full-frame-content{position:relative;z-index:1;width:100%;padding:24px 24px 12px;text-align:center}.full-frame h1{font-size:34px;letter-spacing:-1.1px;text-shadow:0 1px 12px #0003}.full-frame .identity{color:#e6edf0;margin-top:8px}.full-frame .cta{margin-top:25px}.full-frame .destination{color:#f2f7f9}.full-frame .footer{color:#d8e6ed;margin-top:25px}.full-frame a:focus-visible{outline-color:#fff}
/* 05 — Blue Room: cyan geometry, framed photograph, overlapping profile card. */
.blue-room{isolation:isolate;background:#e3f7ff;padding:26px 24px 8px}.blue-room:before{content:"";position:absolute;z-index:-1;left:-110%;top:12%;width:320%;height:250px;transform:rotate(-42deg);background:var(--cyan)}.blue-heading{margin:0 0 24px}.blue-heading h1{font-size:29px}.blue-heading .identity{color:#3b6073}.blue-cover{height:clamp(285px,39svh,348px);border:3px solid white;border-radius:20px;box-shadow:0 8px 30px #155f8215}.blue-cover img{object-position:63% 30%}.blue-card{position:relative;z-index:1;margin-top:20px;padding:52px 18px 20px;text-align:center;border-radius:19px;background:white}.blue-avatar{position:absolute;left:50%;top:-47px;transform:translateX(-50%);object-position:61% 32%}.blue-card h2{font-size:27px}.blue-card .identity{margin-top:5px}.blue-card .cta{margin-top:20px}.blue-card .destination{font-size:11.5px}.blue-room>.footer{margin-top:16px}
/* Preserve the composition on short phones while keeping the primary action reachable. */
@media(max-width:440px){.stage{padding:0;align-items:start}.page{width:100%;border-radius:0;box-shadow:none}.full-frame{height:100svh;max-height:none;min-height:620px}.blue-room{min-height:100svh}.profile{min-height:100svh}}
@media(max-width:350px){.profile-content{padding-inline:20px}.profile-cover{height:260px}.profile-content h1{font-size:29px}.blue-room{padding-inline:20px}.blue-heading h1{font-size:27px}.blue-card{padding-inline:14px}.blue-card h2{font-size:25px}.blue-cover{height:275px}.destination{font-size:11.5px}}
@media(min-width:650px) and (max-height:500px){.stage{padding:16px}.page{width:min(100%,760px)}.profile{display:grid;grid-template-columns:1fr 1fr}.profile-cover{height:100%;min-height:350px}.profile-content{padding:20px 24px 10px}.profile-avatar{position:static;width:58px;height:58px;border:0;margin-bottom:12px}.profile-content h1{font-size:27px}.photo-strip{margin:12px 0;height:75px}.photo-strip img{height:75px}.profile .footer{margin-top:4px}.full-frame{height:auto;min-height:355px;max-height:none}.full-frame-cover{right:45%}.full-frame-cover img{object-position:62% 28%}.full-frame:after{background:linear-gradient(90deg,transparent 25%,#10202a20 38%,#10202a 59%)}.full-frame-content{width:48%;margin-left:auto;padding:28px 24px 10px}.full-frame h1{font-size:30px}.full-frame .footer{margin-top:16px}.blue-room{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding:20px 24px 8px}.blue-heading{grid-column:2;margin-bottom:12px}.blue-heading h1{font-size:25px}.blue-cover{grid-column:1;grid-row:1/4;height:315px}.blue-card{grid-column:2;margin-top:32px;padding:44px 16px 14px}.blue-avatar{width:74px;height:74px;top:-37px}.blue-card h2{font-size:25px}.blue-card .cta{margin-top:14px}.blue-room>.footer{grid-column:2;margin-top:4px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}