*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}html,body{margin:0;overflow-x:hidden}
body{font-family:Lato,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#dfeef0;color:#5b6f6e}
.phone{position:relative;max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;background:linear-gradient(165deg,#c8eef9 0%,#def6fc 30%,#edfcff 65%,#fff 100%);overflow:hidden}
@media(min-width:600px){body{background:radial-gradient(circle at 50% 20%,#eaf7f4,#cfe4e8);padding:24px 0}.phone{min-height:calc(100vh - 48px);border-radius:28px;box-shadow:0 20px 60px rgba(30,70,80,.25)}}
.topbar{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 12px;background:#fff;font-size:.85rem}
.topbar a{color:#1f8695;text-decoration:none;font-weight:700;padding:8px 4px}
.mock{font-size:.62rem;font-weight:900;letter-spacing:.12em;color:#9a7a00;background:#fff4c2;border:1px solid #ecd97a;border-radius:4px;padding:2px 6px}
.xbtn{width:56px;height:56px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2a9c9d,#1f8695);border:3px solid #77dbc5;color:#bff4ea;font-size:1.5rem;display:grid;place-items:center;box-shadow:0 3px 8px rgba(0,0,0,.25);cursor:pointer;text-decoration:none;font-family:inherit}
.tap{transition:transform .12s}.tap:active,.tap.bounce{transform:scale(.9)}
:focus-visible{outline:3px solid #2fd8cf;outline-offset:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* site nav (compact, game-style) */
.pnav{box-sizing:border-box;max-width:430px;margin:0 auto;padding:8px 12px;background:#fff;border-bottom:1px solid #d7ecef;font-family:Lato,system-ui,sans-serif}
.pnav *{box-sizing:border-box}
.pnav-in{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.pnav-logo{color:#2c4a55;font-weight:900;text-decoration:none;font-size:.95rem;white-space:nowrap}
.pnav-logo span{font-weight:400;color:#7d9097;font-size:.8rem}
.pnav nav{display:flex;gap:4px}
.pnav nav a{color:#1f8695;text-decoration:none;font-weight:700;font-size:.8rem;padding:5px 9px;border-radius:999px;white-space:nowrap}
.pnav nav a:hover,.pnav nav a[aria-current=page]{background:#e3f6f4;color:#2c4a55}
@media(max-width:420px){.pnav-logo span{display:none}}
@media(min-width:600px){.pnav{border-radius:18px;margin-bottom:12px;border:0;box-shadow:0 6px 20px rgba(30,70,80,.15)}}