:root { color-scheme:light; --paper:#fff9f0; --surface:#fff; --ink:#202d46; --muted:#52617a; --line:#d9dfeb; --blue:#3973d6; --blue-dark:#264d99; --focus:#9147c5; }
* { box-sizing:border-box; }
html { font-size:16px; }
body { margin:0; min-height:100vh; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,"Segoe UI",sans-serif; }
button { font:inherit; color:inherit; }
header,main,footer { width:min(100% - 2rem,72rem); margin-inline:auto; }
header { min-height:5rem; display:flex; align-items:center; }
.brand { display:flex; align-items:center; gap:.8rem; color:var(--ink); text-decoration:none; }
.brand-mark { width:3rem; height:3rem; display:grid; place-items:center; border-radius:1rem; background:var(--blue); color:white; font-size:1.7rem; font-weight:950; }
.brand strong,.brand small { display:block; }.brand small { color:var(--muted); font-size:.82rem; }
.skip-link { position:absolute; top:-5rem; left:1rem; z-index:3; padding:.8rem 1rem; background:white; border:2px solid var(--focus); border-radius:.8rem; }.skip-link:focus { top:1rem; }
button:focus-visible,a:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
button:disabled { opacity:.55; cursor:not-allowed; }
main { min-height:calc(100vh - 9rem); padding-block:1rem 3rem; }.page { max-width:64rem; margin:auto; }
h1 { margin:.25rem 0 .7rem; font-size:clamp(2rem,6vw,3.35rem); line-height:1.12; letter-spacing:-.035em; } h2 { margin:2rem 0 .7rem; font-size:1.25rem; }
.eyebrow { color:var(--blue-dark); font-weight:850; }.intro { max-width:42rem; color:#34415a; font-size:1.05rem; line-height:1.65; }
.letter-card,.match-card { min-height:15rem; margin:1.2rem 0; padding:1.5rem; display:flex; justify-content:center; align-items:center; gap:clamp(1rem,8vw,5rem); border:1px solid var(--line); border-radius:1.6rem; background:linear-gradient(120deg,#fff,#f3f6ff); box-shadow:0 6px 0 rgba(49,86,163,.09); }
.letter-card span,.match-card span { color:var(--blue); font-size:clamp(6rem,20vw,10rem); font-weight:950; line-height:1; }.match-card span { font-size:clamp(5rem,18vw,8rem); }
.button-row,.choice-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.7rem; margin:1rem 0; }
.primary-button,.secondary-button,.text-button,.choice-button { min-width:3rem; min-height:48px; padding:.7rem 1rem; border:2px solid transparent; border-radius:1rem; font-weight:800; cursor:pointer; }
.primary-button { background:var(--blue); color:white; box-shadow:0 4px 0 #244984; }.secondary-button,.choice-button { background:#eef2fb; border-color:#cbd5ea; color:var(--blue-dark); }.choice-button { min-width:4.5rem; min-height:4.5rem; font-size:2rem; }.choice-button[aria-pressed="true"] { background:#e7efff; border-color:var(--blue); }.text-button { background:transparent; color:var(--blue-dark); text-decoration:underline; text-underline-offset:.18em; }
.letter-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.6rem; }.letter-tile { min-height:5rem; border:1px solid var(--line); border-radius:1rem; background:#fff; color:var(--blue-dark); font-size:1.6rem; font-weight:950; cursor:pointer; }.letter-tile small { display:block; color:var(--muted); font-size:.92rem; }.letter-tile[aria-current="true"] { border:3px solid var(--blue); background:#f3f6ff; }
.feedback { min-height:1.6em; text-align:center; color:#245c3d; font-weight:800; }footer { min-height:4rem; padding-block:1rem; color:var(--muted); font-size:.85rem; }.noscript { margin:1rem; }
@media(max-width:600px) { header,main,footer { width:min(100% - 1.1rem,72rem); }.letter-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }.letter-card { min-height:11rem; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }