* { box-sizing: border-box; }
body { margin: 0; color: #29445a; background: linear-gradient(130deg,#ffedf2,#ecfaf7 60%,#ebe3fc); font: 18px/1.75 var(--font-body, sans-serif); }
header, footer { width: min(920px,calc(100% - 40px)); margin: 24px auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
header img { object-fit: contain; vertical-align: middle; }
header span { font-weight: 700; color: #735299; }
main { width: min(920px,calc(100% - 32px)); margin: auto; padding: clamp(24px,5vw,54px); border-radius: 32px; border: 4px solid white; background: #ffffffed; box-shadow: 0 12px 35px #566c7510; }
h1,h2 { font-family: var(--font-display, sans-serif); line-height: 1.2; }
h1 { font-size: clamp(32px,6vw,48px); margin: 18px 0; color: #456a73; }
h2 { font-size: 26px; margin: 28px 0 12px; }
p { margin: 0 0 18px; }
a { color: #67448f; text-underline-offset: 4px; }
a:focus-visible { outline: 3px solid #306fb7; outline-offset: 5px; }
.intro { font-size: 22px; font-weight: 600; }
.updated { color: #5b6878; font-size: 16px; }
aside { border-radius: 20px; background: #fff2d7; padding: 22px; margin: 26px 0; }
aside p:last-child { margin-bottom: 0; }
.app-list { display: grid; gap: 18px; }
.app-card { display: block; background: #eee6fb; padding: 28px; border-radius: 24px; text-decoration: none; border: 3px solid #fff; box-shadow: 0 5px 0 #806c9820; }
.app-card h2 { margin: 0 0 12px; }.app-card span { font-weight: 700; }
footer { font-size: 16px; justify-content: center; padding-bottom: 24px; }
.skip-link { position: absolute; left: 16px; top: -100px; background: white; padding: 10px; }.skip-link:focus { top: 10px; }