body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(#237e94, #350c65);
    background-attachment: fixed;
    color: white;
    font-family: Calibri, Arial, sans-serif;
}
header {
    max-width: 900px;
    margin: 0 auto;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.logo { width: 72px; display: block; }
nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 22px; }
nav img { width: 23px; height: 23px; vertical-align: middle; margin-right: 8px; }
a { color: #ffe097; text-underline-offset: 5px; }
a:visited { color: #ffd1e4; }
a:hover { color: white; }
a:active { color: #9cf3ff; }
a:focus-visible { outline: 3px solid #ffe097; outline-offset: 6px; }
a[aria-current="page"] { color: white; text-decoration-thickness: 3px; }
main { width: 760px; max-width: calc(100% - 40px); margin: 16px auto 50px; }
h1 { font-size: 52px; font-weight: normal; margin: 0 0 10px; }
h2 { font-size: 29px; font-weight: normal; margin: 0 0 12px; }
p { font-size: 23px; line-height: 1.45; margin: 0 0 22px; }
.intro { text-align: center; }
.title { display: flex; align-items: center; justify-content: center; gap: 18px; }
.title img { width: 44px; height: 44px; }
.choices { display: flex; justify-content: center; gap: 48px; margin: 30px 0; }
.choice { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 30px; }
.role { width: 125px; height: 125px; object-fit: contain; }
.hero { width: 150px; height: 275px; object-fit: contain; }
.hero-nav { justify-content: center; margin: 0 0 22px; }
.details { display: flex; align-items: flex-start; justify-content: center; gap: 38px; margin: 20px auto; }
.portrait { width: 195px; height: 360px; object-fit: contain; }
.bio { max-width: 350px; padding-top: 8px; }
.role-link { display: inline-flex; align-items: center; gap: 10px; font-size: 24px; margin-bottom: 18px; }
.role-link img { width: 26px; height: 26px; }
ul { margin: 0; padding-left: 22px; font-size: 23px; line-height: 1.65; }
@media (max-width: 600px) {
    header { align-items: flex-start; padding: 16px; gap: 16px; }
    .logo { width: 52px; }
    nav { gap: 12px 18px; font-size: 19px; }
    h1 { font-size: 40px; }
    .choices { gap: 30px; }
    .hero { width: 120px; height: 245px; }
    .details { gap: 20px; flex-direction: column; align-items: center; }
    .portrait { height: 280px; }
    .bio { max-width: 100%; }
}

.tank-choices .hero { width: 220px; }
.tank-details .portrait { width: 280px; }
@media (max-width: 600px) {
    .tank-choices { gap: 20px; }
    .tank-choices .hero { width: 135px; height: 220px; }
    .tank-choices .choice { font-size: 25px; }
    .tank-details .portrait { max-width: 100%; }
}