:root{
  --ink:#2b2440; --muted:#6b6080; --paper:#fff; --accent:#e26d9b; --accent2:#7c6bd1;
  --soft:#f6f1f8; --line:#e7def0; --ok:#2e9e6b; --warn:#b9770f;
}
*{box-sizing:border-box}
body{margin:0; font:16px/1.6 system-ui,Segoe UI,Roboto,sans-serif; color:var(--ink);
  background:linear-gradient(160deg,#faf6fc,#f1ecfb); min-height:100vh}
.wrap{max-width:780px; margin:0 auto; padding:24px 18px 72px}
a{color:var(--accent2)}
h1{font-size:25px; margin:8px 0 2px}
h2{font-size:20px; margin:30px 0 8px; padding-top:8px; border-top:1px solid var(--line)}
h3{font-size:16px; margin:20px 0 6px}
.sub{color:var(--muted); margin:0 0 18px}
.topbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.back{font-size:14px; text-decoration:none; color:var(--accent2); font-weight:600}
.card{background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:18px;
  box-shadow:0 6px 24px rgba(80,50,120,.06); margin-bottom:16px}
.navgrid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media(max-width:540px){.navgrid{grid-template-columns:1fr}}
.navcard{display:block; text-decoration:none; color:inherit; background:var(--paper);
  border:1px solid var(--line); border-radius:16px; padding:18px; transition:.15s;
  box-shadow:0 6px 24px rgba(80,50,120,.06)}
.navcard:hover{transform:translateY(-2px); border-color:var(--accent)}
.navcard .emoji{font-size:30px}
.navcard .t{font-weight:700; margin:8px 0 2px; font-size:17px}
.navcard .d{font-size:13px; color:var(--muted)}
table{width:100%; border-collapse:collapse; margin:10px 0; font-size:14px}
th,td{text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--muted); font-weight:700; font-size:13px}
.pill{display:inline-block; background:#efe9fb; color:var(--accent2); border-radius:999px;
  padding:2px 10px; font-size:12px; font-weight:700}
.note{background:#fff8ec; border:1px solid #f0e2c2; border-radius:12px; padding:12px 14px; font-size:14px; color:#5c4a1f; margin:12px 0}
.good{color:var(--ok); font-weight:600}
ul{padding-left:20px} li{margin:3px 0}
.small{font-size:13px; color:var(--muted)}
.btn{display:inline-block; background:var(--accent2); color:#fff; text-decoration:none;
  padding:11px 18px; border-radius:10px; font-weight:700; margin-top:6px}
footer{color:#9a90ad; font-size:12px; text-align:center; margin-top:24px}
/* gate */
#gate{position:fixed; inset:0; background:linear-gradient(160deg,#faf6fc,#efeafb);
  display:flex; align-items:center; justify-content:center; z-index:9999; padding:20px}
#gate .box{background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px;
  max-width:340px; width:100%; box-shadow:0 10px 40px rgba(80,50,120,.12); text-align:center}
#gate input{width:100%; padding:12px 14px; font-size:18px; border:1px solid var(--line);
  border-radius:10px; margin:12px 0; text-align:center}
#gate button{width:100%; padding:12px; font-size:16px; font-weight:700; color:#fff;
  background:var(--accent2); border:none; border-radius:10px; cursor:pointer}
.hidden{display:none !important}