:root{--ink:#fff;--line:rgba(255,255,255,.3);--shadow:0 24px 48px rgba(0,0,0,.24)}
*{box-sizing:border-box}html,body{min-height:100%}
body{margin:0;min-height:100vh;font-family:Arial,Helvetica,sans-serif;color:var(--ink);
background:linear-gradient(135deg,#4a2687,#25477f 52%,#14747a)}
.portal{width:min(1050px,92vw);min-height:100vh;margin:auto;display:grid;align-content:center;gap:3rem;padding:3rem 0}
.eyebrow{margin:0;font-size:.8rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
h1{margin:.35rem 0;font-size:clamp(3rem,7vw,6rem);line-height:.9}
.subtitle{margin:.7rem 0 0;opacity:.86;font-size:1.1rem}
.blocks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.block{position:relative;aspect-ratio:1.3;display:grid;place-content:center;text-align:center;padding:2rem;border:1px solid var(--line);
border-radius:44px;background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,.08));
backdrop-filter:blur(12px);box-shadow:var(--shadow);color:inherit;text-decoration:none;transition:.22s}
.block strong{font-size:clamp(2rem,5vw,4rem)}.block span{margin-top:.65rem;font-weight:700}.block small{margin-top:.7rem;opacity:.72}
.block.is-locked{opacity:.38;filter:grayscale(1);cursor:default}.block.is-available{cursor:pointer}.block.is-available:hover{transform:translateY(-10px)}
.note{font-size:.82rem;opacity:.72}
@media(max-width:700px){.blocks{grid-template-columns:1fr}.block{aspect-ratio:1.7}}