.p-wrap{max-width:960px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.p-hero{background:var(--side);color:#fff;padding-block:40px 36px;position:relative;overflow:hidden}
.p-hero h1{color:#fff;font-size:2.2rem;margin-top:24px;max-width:18ch}
.p-hero p{color:#D9D1FF;max-width:56ch;margin:10px 0 0}
.p-main{padding-block:28px 64px;display:flex;flex-direction:column;gap:18px}
.p-foot{border-top:1px solid var(--line);padding-block:20px;color:var(--muted);font-size:13px}
.p-foot a{color:var(--brand)}
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.p-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;text-align:left;cursor:pointer;font:inherit;color:inherit}
.p-card:hover{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.p-card h3{font-size:1.1rem}
.p-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted)}
.p-block{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px}
.p-block h2{font-size:1.15rem}
.p-text{white-space:pre-wrap;line-height:1.6}
.p-ok{text-align:center;padding:40px 20px}
.p-ok .big{font-size:2.4rem}