:root { color-scheme: light dark; --sky:#48b6f2; --well:#162c3d; --arc:#ffc84a; --signal:#df4b4b; --paper:#f5fafc; --ink:#13232f; }
* { box-sizing:border-box; }
body { margin:0; font:17px/1.6 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:linear-gradient(180deg,#bce8fa 0,#edf8fc 32rem,var(--paper) 60rem); }
a { color:#075f95; }
header,main,footer { width:min(880px,calc(100% - 40px)); margin:auto; }
header { padding:72px 0 34px; }
nav { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:54px; font-weight:700; }
nav a { color:var(--well); text-decoration:none; }
.mark { width:76px; height:76px; border-radius:18px; background:var(--sky); position:relative; overflow:hidden; box-shadow:0 12px 28px #162c3d33; }
.mark::before { content:""; position:absolute; inset:20px 13px 28px; border:6px solid var(--arc); border-bottom:0; border-radius:60px 60px 0 0; }
.mark::after { content:""; position:absolute; left:7px; right:7px; bottom:8px; height:27px; background:var(--signal); clip-path:polygon(0 55%,45% 0,100% 42%,100% 100%,0 100%); }
h1 { font-size:clamp(2.6rem,8vw,5.4rem); line-height:.95; letter-spacing:-.055em; max-width:760px; margin:28px 0 24px; }
h2 { font-size:2rem; line-height:1.15; letter-spacing:-.025em; margin-top:48px; }
.lede { font-size:1.3rem; max-width:720px; }
.card { background:#ffffffdd; border:1px solid #ffffff; border-radius:28px; padding:28px; box-shadow:0 18px 50px #162c3d18; margin:28px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.grid section { padding:22px; background:#fff9; border-radius:20px; }
.caution { border-left:6px solid var(--signal); }
footer { padding:58px 0; color:#44535d; }
@media (prefers-color-scheme:dark) { body { --ink:#eef7fb; --paper:#08151e; background:linear-gradient(180deg,#23495e 0,#102631 32rem,var(--paper) 60rem); } .card,.grid section { background:#132832e8; border-color:#294553; } a { color:#74cbff; } nav a { color:white; } footer { color:#afc1ca; } }