*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#222826;color:#edf6f3;font-family:"Segoe UI",Arial,sans-serif}.topbar{height:110px;padding:20px clamp(24px,4vw,76px);display:flex;align-items:center}.brand{display:inline-flex;align-items:center;gap:16px;text-decoration:none;border-radius:6px}.fox{width:54px;height:60px;object-fit:contain}.wordmark{display:block;width:218px;height:auto;aspect-ratio:2128/228;overflow:hidden}main{min-height:calc(100svh - 110px);display:grid;place-items:center;padding:48px 28px 120px}.choices{width:min(100%,1040px);display:grid;grid-template-columns:1fr 1fr;gap:58px}.card{position:relative;min-height:240px;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px 24px;text-decoration:none;color:inherit;border:1px solid #345d56;border-radius:23px;background:linear-gradient(150deg,#183c36,#102b27 80%);box-shadow:0 28px 32px -18px #1c50495c,0 45px 65px -28px #1a48493d,inset 0 1px 0 #8ad5bd24;transform:translateY(-8px);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-14px);border-color:#669f92;box-shadow:0 32px 38px -18px #306f6166,0 48px 70px -28px #1a48494d,inset 0 1px 0 #8ad5bd24}h1,h2{margin:0;font-size:clamp(22px,2.2vw,30px);font-weight:700;line-height:1.3}p{margin:13px 0 0;font-size:16px;line-height:1.5;color:#afc9c1}a:focus-visible{outline:3px solid #94d8c5;outline-offset:7px}@media(max-width:650px){.topbar{height:94px;padding:18px 22px}.fox{width:44px;height:48px}.wordmark{width:190px}.brand{gap:12px}main{min-height:calc(100svh - 94px);padding:38px 24px 64px}.choices{grid-template-columns:1fr;gap:36px;max-width:440px}.card{min-height:190px;border-radius:20px}}@media(prefers-reduced-motion:reduce){.card{transition:none}}

/* Softer translucent surfaces, highlighted edges and soft floating shadows. */
.card{isolation:isolate;background:linear-gradient(145deg,rgba(112,161,145,.30) 0%,rgba(55,105,90,.38) 42%,rgba(24,58,49,.52) 100%);border-color:rgba(133,177,155,.30);border-top-color:rgba(185,215,192,.48);border-bottom-color:rgba(72,115,95,.30);box-shadow:inset 0 2px 2px rgba(210,236,213,.10),inset 0 -1px 3px rgba(0,0,0,.18),0 18px 24px -10px rgba(0,0,0,.70),0 38px 48px -14px rgba(0,0,0,.65);transform:translateY(-12px)}
.card:before{content:"";position:absolute;inset:1px;border-radius:inherit;background:radial-gradient(ellipse at 25% 0%,rgba(204,225,176,.11),transparent 65%);pointer-events:none;z-index:-1}
.card:hover{transform:translateY(-18px);border-color:rgba(159,195,167,.53);box-shadow:inset 0 2px 2px rgba(210,236,213,.15),inset 0 -1px 3px rgba(0,0,0,.18),0 24px 30px -10px rgba(0,0,0,.72),0 46px 56px -14px rgba(0,0,0,.68)}

/* Depth 0 is the approved homepage teal; deeper cards mix in 10% light per level. */
:root{--card-teal-start:rgba(112,161,145,.30);--card-teal-middle:rgba(55,105,90,.38);--card-teal-end:rgba(24,58,49,.52)}
.card{--depth-light:0%;background:linear-gradient(145deg,color-mix(in srgb,var(--card-teal-start),#edf6f3 var(--depth-light)) 0%,color-mix(in srgb,var(--card-teal-middle),#edf6f3 var(--depth-light)) 42%,color-mix(in srgb,var(--card-teal-end),#edf6f3 var(--depth-light)) 100%)}
.card[data-depth="1"]{--depth-light:10%}
.card[data-depth="2"]{--depth-light:20%}

/* Narrow phones and touch screens retain the same brand and readable cards. */
.topbar .brand{max-width:100%;min-width:0}.brand .fox{flex-shrink:0}.brand .wordmark{min-width:0;flex-shrink:1}.choices{grid-template-columns:repeat(2,minmax(0,1fr))}.choices>.card{min-width:0}
@media(max-width:650px){.choices{grid-template-columns:minmax(0,1fr)}.topbar{padding-inline:20px}}
@media(hover:none){.choices>.card:hover{transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.choices>.card:hover{transform:translateY(-12px)}}