@charset "UTF-8";
:root{color-scheme:light;--ink:#132e46;--muted:#526a7c;--accent:#087e89;--paper:#edf5fa;--line:#cbdce6}
*{box-sizing:border-box}
html{min-width:320px;background:var(--paper)}
body{margin:0;color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 88% 28%,#daf4f4 0,transparent 43%),linear-gradient(145deg,#f9fcfe 0%,var(--paper) 75%);min-height:100svh}
.page{max-width:1360px;margin:auto;padding:0 64px;min-height:100svh;display:flex;flex-direction:column}
.masthead{display:flex;align-items:center;gap:20px;padding:36px 0 24px}
.wordmark{font-size:32px;font-weight:720;letter-spacing:-1.7px}
.brand-dot{color:var(--accent)}
.brand-divider{height:24px;width:1px;background:#b9ceda}
.team-name{font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted)}
main{flex:1;display:flex;align-items:center}
.hero{display:grid;grid-template-columns:1.06fr 1fr;align-items:center;gap:44px;width:100%;padding:36px 0 44px}
.status{display:inline-flex;gap:10px;align-items:center;font-size:11px;letter-spacing:.17em;font-weight:750;color:var(--accent);margin:0 0 28px}
.status-light{width:8px;height:8px;border-radius:50%;background:#10a2a4;box-shadow:0 0 0 5px #10a2a411;animation:breathe 3s ease-in-out infinite}
h1{font-size:clamp(44px,4.65vw,66px);line-height:1.07;font-weight:750;letter-spacing:-.055em;margin:0 0 30px}
h1 span{color:var(--accent)}
.intro{font-size:23px;line-height:1.4;font-weight:600;letter-spacing:-.025em;margin:0 0 12px}
.description{font-size:17px;line-height:1.75;max-width:390px;color:var(--muted);margin:0}
.note{display:flex;align-items:center;gap:15px;border-left:2px solid #22a3a8;margin-top:36px;padding:2px 0 2px 20px}
.note p{margin:0;font-size:14px;line-height:1.8;color:var(--muted)}
.note strong{font-weight:600;color:var(--ink)}
.note-mark{font-size:28px;color:var(--accent)}
.portrait{position:relative;margin:0 auto;isolation:isolate;width:100%;max-width:450px;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.portrait-backdrop{position:absolute;width:94%;aspect-ratio:1;border-radius:50%;background:#c6e7f2;box-shadow:0 25px 80px #24577012;z-index:-2}
.avatar{width:92%;height:auto;border-radius:50%;display:block;mix-blend-mode:multiply}
.orbit{position:absolute;border:1px solid #8fcbd255;aspect-ratio:1;border-radius:50%;z-index:-1;pointer-events:none}
.orbit-one{width:108%}
.orbit-two{width:118%;border-style:dashed;opacity:.45}
.portrait figcaption{position:absolute;bottom:1%;left:50%;transform:translateX(-50%) rotate(-3deg);white-space:nowrap;font-size:12px;letter-spacing:.015em;font-weight:600;color:#30596b;padding:12px 19px;background:#ffffffee;border:1px solid #d1e5ec;border-radius:6px;box-shadow:0 8px 24px #16384d09}
.portrait figcaption span{color:#0d979e;margin-right:8px}
footer{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding:24px 0 28px;font-size:11px;letter-spacing:.035em;color:var(--muted)}
@keyframes breathe{50%{box-shadow:0 0 0 8px #10a2a408}}
@media(min-width:1500px){.hero{padding-top:70px;padding-bottom:95px}}
@media(max-width:900px){.page{padding:0 36px}.hero{gap:28px}h1{font-size:46px}.intro{font-size:21px}.portrait figcaption{font-size:10px;padding:10px 12px}.description{font-size:16px}}
@media(max-width:680px){.page{padding:0 25px}.masthead{padding:25px 0 15px;gap:15px}.wordmark{font-size:29px}.team-name{font-size:11px}.hero{display:flex;flex-direction:column;gap:28px;padding:39px 0 42px;align-items:stretch}.status{font-size:10px;margin-bottom:24px}h1{font-size:clamp(39px,8.8vw,58px);margin-bottom:23px}.intro{font-size:21px}.description{max-width:420px;line-height:1.65}.note{margin-top:25px}.portrait{max-width:360px;width:87%;align-self:center}.portrait figcaption{font-size:11px}.orbit-two{width:113%}footer{font-size:10px;flex-wrap:wrap;padding:21px 0 24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}