:root{--bg:#fff8ee;--bg2:#eaf6fb;--ink:#2d2a3e;--muted:#68647a;--accent:#ee6f4d;--accent2:#1f8a78;--card:#ffffff;--line:#f0e3cf;--sun:#ffd166;--sky:#a8d8ea;--lilac:#d9c9f5;--mint:#c5ecd9;--peach:#ffd9c7;
--font:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN",Quicksand,Nunito,"Segoe UI",system-ui,sans-serif}
@media (prefers-color-scheme:dark){:root{--bg:#1c1a2b;--bg2:#22223a;--ink:#f4efe8;--muted:#b9b3c9;--accent:#ff9a7a;--accent2:#7bd3c0;--card:#2a2840;--line:#3b3856;--sun:#ffd166;--sky:#3b5f7a;--lilac:#4b4272;--mint:#2f5a4e;--peach:#5a3d3a}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,var(--bg2) 0,var(--bg) 360px) var(--bg);color:var(--ink);font:18px/1.7 var(--font)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.prose{max-width:740px;margin:0 auto}
header.site{padding:16px 0}
header.site .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.logo{font:800 26px var(--font);color:var(--accent);text-decoration:none;display:flex;align-items:center;gap:8px}
.logo svg{width:34px;height:34px}
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{font:700 16px var(--font);color:var(--ink);text-decoration:none;padding:8px 16px;border-radius:999px;background:var(--card);border:2px solid var(--line)}
nav a:hover,nav a:focus-visible{border-color:var(--accent);color:var(--accent)}
h1{font:800 clamp(30px,5vw,46px)/1.15 var(--font);margin:28px 0 12px}
h2{font:800 clamp(22px,3.2vw,28px)/1.25 var(--font);margin:36px 0 8px;color:var(--accent2)}
h3{font:800 19px var(--font);margin:22px 0 4px}
a{color:var(--accent2)}
p{margin:0 0 14px}
.lead{font-size:clamp(18px,2.4vw,22px);color:var(--muted)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:12px 0 8px}
.hero h1{margin-top:8px}
.hero svg{width:100%;height:auto;max-height:380px}
.btn{display:inline-block;font:800 17px var(--font);background:var(--accent);color:#fff;text-decoration:none;border-radius:999px;padding:14px 26px;border:0;cursor:pointer}
.btn.alt{background:var(--card);color:var(--ink);border:2px solid var(--line)}
.btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.card{background:var(--card);border:2px solid var(--line);border-radius:20px;padding:18px 22px;margin:18px 0}
.note{border:2px dashed var(--accent);background:var(--card);padding:14px 20px;margin:22px 0;border-radius:20px;font-size:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:18px 0}
.tile{display:block;text-decoration:none;color:var(--ink);border-radius:24px;padding:22px;border:2px solid transparent;transition:transform .15s}
.tile:hover,.tile:focus-visible{transform:translateY(-4px);border-color:var(--ink)}
.tile .ico{width:58px;height:58px;border-radius:18px;background:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.tile .ico svg{width:34px;height:34px}
.tile strong{font:800 20px/1.3 var(--font);display:block;margin-bottom:4px}
.tile span.d{font-size:16px;color:var(--ink);opacity:.8;display:block}
.grid .tile:nth-child(4n+1){background:var(--peach)}
.grid .tile:nth-child(4n+2){background:var(--sky)}
.grid .tile:nth-child(4n+3){background:var(--mint)}
.grid .tile:nth-child(4n+4){background:var(--lilac)}
.grid .tile.soon{background:transparent;border:2px dashed var(--line);opacity:.75}
.band{background:var(--card);border:2px solid var(--line);border-radius:28px;padding:26px;margin:30px 0;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.tbl{width:100%;border-collapse:collapse;margin:16px 0;background:var(--card);border-radius:16px;overflow:hidden}
.tbl th,.tbl td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-size:16px}
.tbl thead th{background:var(--peach);font-family:var(--font)}
.tbl tbody th{font-family:var(--font);white-space:nowrap}
.meta{font:700 14px var(--font);color:var(--muted);margin:18px 0 0}
.meta a{color:var(--muted)}
.cloud{animation:float 7s ease-in-out infinite}
.star{animation:twinkle 3.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes twinkle{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.cloud,.star{animation:none}.tile{transition:none}}
footer{margin-top:56px;padding:30px 0 40px;background:var(--card);border-top:2px solid var(--line);font:15px/1.6 var(--font);color:var(--muted)}
footer a{color:var(--muted)}
ul,ol{padding-left:24px}
li{margin:5px 0}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero svg{max-height:260px;order:-1}.band{grid-template-columns:1fr}body{font-size:17px}}