.versions-page{margin:0;min-height:100dvh;background:#f3f5fb;color:#111b58;padding:40px 20px;font-family:ExoSoft,Arial,sans-serif}
.versions-main{max-width:900px;margin:auto}
.versions-main header{margin-bottom:28px}
.versions-main h1{font-size:clamp(28px,5vw,42px);margin:0 0 8px}
.versions-main header p{color:#657088;font-size:18px;margin:0}
.versions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.versions-grid a{display:grid;grid-template-columns:60px 1fr 24px;gap:6px 16px;align-items:center;padding:24px;background:white;border-radius:24px;color:inherit;text-decoration:none;border:1px solid #e2e7f2;transition:transform .15s,border-color .15s}
.versions-grid a:hover{transform:translateY(-2px);border-color:#182be7}
.versions-grid a:focus-visible{outline:3px solid #182be7;outline-offset:4px}
.versions-grid strong{font-size:22px;grid-column:2}
.versions-grid a>span:not(.version-swatch){font-size:15px;line-height:1.4;color:#657088;grid-column:2}
.versions-grid b{grid-column:3;grid-row:1/3;color:#172be9;font-size:26px}
.versions-grid a{grid-template-columns:1fr 24px;padding:18px;gap:12px}
.version-preview-frame{grid-column:1/3;position:relative;isolation:isolate;overflow:hidden;height:360px;border-radius:16px;background:#263d64}
.version-preview-frame::before{content:"";position:absolute;inset:-28px;z-index:-1;background-image:var(--preview-image);background-position:center;background-size:cover;filter:blur(22px);opacity:.8}
.versions-grid .version-preview{display:block;width:auto;max-width:none;height:100%;margin-inline:auto;position:relative;clip-path:inset(0 4.56%)}
.versions-grid strong,.versions-grid a>span:not(.version-swatch){grid-column:1}
.versions-grid b{grid-column:2;grid-row:2;align-self:center;line-height:1}
.versions-grid strong{grid-row:2;align-self:center;line-height:1.2}
.version-swatch{grid-column:1;grid-row:1/3;width:60px;height:76px;border-radius:16px;background:linear-gradient(#65beff 55%,#65aa38 55%)}
.version-swatch.match{background:linear-gradient(#23447a 55%,#326538 55%)}
.version-swatch.night{background:linear-gradient(#142344 55%,#1b365b 55%)}
.version-swatch.start{background:linear-gradient(#8ed9ff 55%,#ff8900 55%)}
.versions-main footer{margin-top:28px}.versions-main footer button{min-height:52px}.versions-main footer p{color:#657088}
@media(max-width:620px){.versions-grid{grid-template-columns:1fr}.versions-grid a{padding:20px}.versions-page{padding:28px 16px}}
@media(prefers-reduced-motion:reduce){.versions-grid a{transition:none}}