:root{--bg:#FFF4EC;--ink:#1C1C1E;--ink2:#3A3A3C;--help:#636366;--navy:#0B1F33;--mint:#129C7E;--acc:#007AFF;--card:#FFFFFF;--line:#E8E8ED;--tint:#EAF3FF}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);min-height:100vh;display:flex;flex-direction:column;
background:radial-gradient(60% 45% at 8% 0%,rgba(255,210,192,.75),transparent 70%),radial-gradient(55% 40% at 95% 8%,rgba(255,211,230,.7),transparent 70%),radial-gradient(60% 45% at 85% 95%,rgba(200,208,255,.6),transparent 70%),radial-gradient(55% 45% at 5% 90%,rgba(207,227,255,.7),transparent 70%),linear-gradient(160deg,#FFF4EC,#F7EEFB 50%,#EAF1FF);background-attachment:fixed}
a{color:var(--acc)}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
header.top{padding:18px 0}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{font-weight:800;font-size:22px;text-decoration:none;letter-spacing:-.3px}
.brand .a{color:var(--navy)}.brand .b{color:var(--mint)}
nav a{color:var(--ink2);text-decoration:none;font-size:15px;margin-left:14px}
nav a:first-child{margin-left:0}
nav a:hover{color:var(--acc)}
main{flex:1;padding:8px 0 48px}
.card{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:20px;padding:24px 22px;box-shadow:0 8px 30px rgba(72,60,140,.10)}
h1{color:var(--navy);font-size:30px;line-height:1.2;margin:0 0 6px;letter-spacing:-.4px}
h2{color:var(--navy);font-size:19px;margin:28px 0 8px}
.meta{color:var(--help);font-size:14px;margin-top:0}
.note{background:var(--tint);border-radius:14px;padding:14px 16px;margin:16px 0}
table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:#F2F2F4;color:var(--navy)}
li{margin:4px 0}
.btn{display:inline-block;background:var(--acc);color:#fff;text-decoration:none;padding:13px 22px;border-radius:14px;font-weight:700}
.btn.alt{background:transparent;color:var(--acc);border:1.5px solid var(--acc)}
.hero{text-align:center;padding:56px 22px}
.hero .word{font-size:52px;font-weight:800;letter-spacing:-1px;margin:0}
.hero .tag{font-size:22px;color:#33475B;margin:6px 0 26px}
.hero p.small{color:var(--help);font-size:15px;margin-top:22px}
footer{color:var(--help);font-size:14px;padding:22px 0 28px;text-align:center}
@media (max-width:520px){h1{font-size:25px}.hero .word{font-size:42px}.hero .tag{font-size:19px}.card{padding:20px 16px}nav a{margin-left:10px}}