:root{
  --ink:#221A33; --soft:#5E5575; --paper:#F3F0FA; --card:#FFFFFF; --line:#DCD5EC;
  --tile:#E7E2F3; --lit:#5B3FD1; --ok:#2F9E6E; --bad:#D14343; --onlit:#FFFFFF;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#EDE9F7; --soft:#A79FBF; --paper:#161122; --card:#211A31; --line:#342A4A;
    --tile:#2D2442; --lit:#8C74F2; --ok:#4CC08C; --bad:#EE6B6B; --onlit:#161122;
  }
}
:root[data-theme="dark"]{
  --ink:#EDE9F7; --soft:#A79FBF; --paper:#161122; --card:#211A31; --line:#342A4A;
  --tile:#2D2442; --lit:#8C74F2; --ok:#4CC08C; --bad:#EE6B6B; --onlit:#161122;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Lexend",system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:300;font-size:1.05rem;line-height:1.7}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--lit);outline-offset:3px}
.wrap{max-width:40rem;margin:0 auto;padding:0 1.25rem}

.site-head{padding:1rem 0 .4rem}
.site-head .top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.logo{font-weight:800;font-size:1.5rem;letter-spacing:-.03em;text-decoration:none}
.logo i{font-style:normal;color:var(--lit)}
.site-nav{display:flex;gap:.35rem;overflow-x:auto;margin-top:.6rem;padding-bottom:.2rem;scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{white-space:nowrap;text-decoration:none;font-size:.9rem;font-weight:400;padding:.3rem .8rem;border-radius:999px;color:var(--soft)}
.site-nav a[aria-current="page"]{background:var(--tile);color:var(--ink);font-weight:600}
.stats{display:flex;gap:1.1rem;font-size:.85rem;color:var(--soft);font-weight:400}
.stats b{color:var(--ink);font-weight:600}

.modes{display:flex;gap:.3rem;background:var(--tile);padding:.25rem;border-radius:999px;width:max-content;margin:1rem auto}
.modes button{border:none;background:transparent;padding:.4rem 1rem;border-radius:999px;cursor:pointer;font-weight:400;font-size:.92rem}
.modes button[aria-pressed="true"]{background:var(--card);font-weight:600;box-shadow:0 1px 2px rgba(34,26,51,.15)}
.hud{display:flex;justify-content:space-between;align-items:baseline;max-width:24rem;margin:0 auto .7rem}
.level{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.level small{font-size:.9rem;font-weight:400;color:var(--soft);margin-right:.3rem}
.lives{font-size:1.1rem;letter-spacing:.15em}
.status{text-align:center;min-height:1.7em;color:var(--soft);font-weight:400;margin-bottom:.6rem}
.panel{max-width:24rem;margin:1rem auto 0;text-align:center}
.cta{display:inline-block;border:none;background:var(--lit);color:var(--onlit);font-weight:600;font-size:1.05rem;
  padding:.8rem 1.8rem;border-radius:999px;cursor:pointer;text-decoration:none}
.ghost{border:1.5px solid var(--line);background:transparent;font-weight:400;padding:.65rem 1.3rem;border-radius:999px;cursor:pointer;margin:.4rem .2rem 0}
.result{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:1.3rem;margin-top:.4rem}
.result .big{font-size:3rem;font-weight:800;line-height:1.1;letter-spacing:-.03em}
.result .grid{font-size:1.25rem;letter-spacing:.08em;margin:.5rem 0;word-break:break-all}
.result p{margin:.3rem 0;color:var(--soft);font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Ad placeholders: hidden until AdSense is approved. Replace each .ad box with an ad unit. */
.ad{display:none}

.page-title{font-size:clamp(2rem,6vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:1.6rem 0 .5rem}
.dek{color:var(--soft);font-weight:400;margin:0 0 1.2rem}
article h2{font-size:1.45rem;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin:2.4rem 0 .4rem}
article h3{font-size:1.1rem;font-weight:600;margin:1.6rem 0 .2rem}
article p{margin:.4rem 0 1rem}
article ol,article ul{padding-left:1.3rem} article li{margin:.35rem 0}
.callout{background:var(--card);border-left:4px solid var(--lit);border-radius:0 12px 12px 0;padding:.9rem 1.1rem;margin:1.2rem 0}
.callout p{margin:0}
.try{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0}
details{border-bottom:1px solid var(--line);padding:.7rem 0}
summary{cursor:pointer;font-weight:600}
details p{margin:.5rem 0 0}

.contact{display:grid;gap:.8rem;max-width:28rem;margin-top:.8rem}
.contact label{display:grid;gap:.25rem;font-weight:400}
.contact input,.contact textarea{font:inherit;font-weight:300;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:10px;padding:.6rem .75rem;width:100%}
.contact textarea{resize:vertical}
.contact .cta{justify-self:start;font-size:.95rem;padding:.65rem 1.4rem}
.contact .hp{position:absolute;left:-9999px}
.form-status{margin:0;font-weight:400}

.site-foot{margin-top:3rem;padding:1.6rem 0 2.4rem;border-top:1px solid var(--line);font-size:.9rem;color:var(--soft)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-bottom:.8rem}
.site-foot a{text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot p{margin:0}