*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{min-height:100vh;min-height:100dvh;background:linear-gradient(135deg,#c9ccd1 0%,#a5a9b0 38%,#bcc0c5 62%,#9a9ea6 100%);background-attachment:fixed;color:#191c21;font-family:Manrope,system-ui,sans-serif;font-weight:400;display:flex;flex-direction:column}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 24px;transition:opacity .3s}
main.out{opacity:0}
#q{outline:none;font-size:clamp(26px,5vw,38px);font-weight:300;letter-spacing:.03em;text-align:center;margin:0 0 36px}
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;max-width:640px;width:100%;margin:0 auto}
.tile,.card{background:linear-gradient(155deg,#e4e6e9 0%,#c2c5ca 48%,#d3d6da 72%,#b4b8be 100%);border-radius:14px}
.tile{position:relative;overflow:hidden;appearance:none;border:0;font:inherit;height:clamp(140px,26vh,200px);padding:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 -1px 0 rgba(110,116,126,.25),0 10px 24px rgba(82,88,98,.28);display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(17px,3vw,21px);letter-spacing:.03em;color:#191c21;cursor:pointer;user-select:none;outline:none;transition:box-shadow .3s,opacity .3s,filter .25s;-webkit-tap-highlight-color:transparent}
.tile::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transition:left .7s ease;pointer-events:none}
@media (hover:hover){.tile:hover{filter:brightness(1.05)}.tile:hover::after{left:115%}}
.tile:focus-visible{filter:brightness(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 0 0 2px #e9ebee,0 10px 24px rgba(82,88,98,.28)}
.tile.on,.tile.on:hover{filter:none;background:linear-gradient(155deg,#a2a6ad 0%,#b9bdc3 55%,#a9adb4 100%);box-shadow:inset 0 2px 8px rgba(82,88,98,.35),inset 0 -1px 0 rgba(255,255,255,.45)}
.tile.off,.tile.off:hover{opacity:.4;box-shadow:none;filter:none}
.card{max-width:520px;width:100%;margin:0 auto;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 12px 28px rgba(82,88,98,.3);padding:44px 32px}
.name{font-size:clamp(30px,6vw,40px);font-weight:300;letter-spacing:.03em;margin:0 0 12px;line-height:1.2}
.name a,.alt a,.list a{color:inherit;text-decoration:none}
.name a:hover,.alt a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.why{font-size:16px;line-height:1.6;color:#2b2f36;margin:0}
.alt{font-size:15px;color:#2b2f36;margin:24px 0 0}
.btn{appearance:none;border:0;font:inherit;cursor:pointer;margin-top:24px;display:inline-block;padding:10px 20px;border-radius:10px;font-size:14px;color:#2b2f36;background:rgba(150,155,163,.35);transition:background .25s;text-decoration:none}
.btn:hover,.btn:focus-visible{background:rgba(150,155,163,.6);outline:none}
.fit{text-align:left;margin:28px 0 0;font-size:14px;line-height:1.6;color:#2b2f36}
.fit h2{font-size:15px;font-weight:400;margin:18px 0 6px;color:#191c21}.fit ul{margin:0;padding:0;list-style:none}.fit li{padding:6px 0;border-top:1px solid rgba(110,116,126,.3)}
.list{max-width:640px;margin:0 auto;columns:2;font-size:15px;line-height:2}
@media (max-width:480px){main{padding:28px 18px}.pair{gap:14px}.card{padding:34px 22px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}