:root{--bg:#f4f8ff;--ink:#1d1b2f;--muted:#5b5872;--accent:#1f5fd6;--yellow:#ffc21a;--card:#fff;--r:22px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg) radial-gradient(circle at 85% 0,#fff1b8 0,transparent 38%),radial-gradient(circle at 0 10%,#dbe8ff 0,transparent 40%) no-repeat;color:var(--ink);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:0 20px 48px}
a{color:#1f5fd6}a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:10}
.site-header{max-width:1100px;width:100%;margin:0 auto;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.5rem}
.brand-webik{width:40px;height:48px}
.site-header nav{display:flex;gap:18px}.site-header nav a{color:var(--ink);font-weight:600;text-decoration:none}.site-header nav a:hover{color:var(--accent)}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center;padding:32px 0 48px}
h1{font-size:clamp(2rem,5vw,3.4rem);line-height:1.1;margin:0 0 16px}.hl{color:var(--accent)}
.lead{font-size:1.15rem;color:var(--muted);max-width:34em}
.hero-crew{display:flex;justify-content:center;align-items:flex-end;flex-wrap:nowrap}
.hero-w{width:min(19%,110px);height:auto;margin:0 -2px}.hw1,.hw3{transform:translateY(-14px)}.hw2{width:min(24%,140px)}
.btn{display:inline-block;border:0;border-radius:999px;padding:12px 22px;font:inherit;font-weight:700;cursor:pointer;text-decoration:none;background:#eee;color:var(--ink)}
.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{background:var(--yellow);color:var(--ink)}
h2{font-size:1.8rem}
.cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.card{--c:#888;background:var(--card);border-radius:var(--r);border:3px solid var(--c);box-shadow:0 6px 0 var(--c);transition:transform .2s}
.card-link{display:block;height:100%;padding:22px;color:var(--ink);text-decoration:none;position:relative}
.card .webik{width:90px;height:108px;display:block;margin-bottom:6px}
.card h3{margin:4px 0 6px;font-size:1.4rem}.card p{margin:0 0 14px;color:var(--muted)}
.card-tag{position:absolute;top:18px;right:18px;background:var(--c);color:#1d1b2f;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:999px}
.card-url{font-weight:700;color:var(--ink);word-break:break-all}.card-url::after{content:" →"}
a.card-link:hover h3{color:var(--accent)}.card:hover{transform:translateY(-4px) rotate(-.5deg)}
.card-soon{border-style:dashed;box-shadow:none;opacity:.75}.card-soon .webik{filter:grayscale(.4)}
.prose{max-width:760px;background:#fff;border-radius:var(--r);padding:28px clamp(18px,4vw,40px);margin-top:12px}
.prose table{border-collapse:collapse;width:100%;display:block;overflow-x:auto}.prose th,.prose td{border:1px solid #ddd;padding:8px;text-align:left;vertical-align:top}
.notfound{text-align:center;padding:40px 0}.notfound .webik{width:140px;height:170px}
.site-footer{background:#163a7a;color:#ddd;padding:24px 20px;text-align:center;font-size:.95rem}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;margin-bottom:8px}.site-footer a,.site-footer .linkish{color:#fff}
.linkish{background:none;border:0;padding:0;font:inherit;color:#1f5fd6;text-decoration:underline;cursor:pointer}
.cookie-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:20;display:flex;justify-content:center}
.cookie-inner{background:#fff;border:3px solid var(--accent);border-radius:var(--r);padding:14px 18px;max-width:640px;display:flex;gap:14px;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.cookie-inner h2{font-size:1.1rem;margin:0}.cookie-inner p{margin:4px 0 10px;font-size:.92rem}
.cookie-webik{width:56px;height:68px;flex:none}
.cookie-bar[hidden]{display:none}
@media (max-width:720px){.hero{grid-template-columns:1fr;padding-top:8px}.hero-crew{order:-1}.cookie-webik{display:none}}
@media (prefers-reduced-motion:no-preference){
.hero-w .webik-body,.card .webik-body{animation:bob 3s ease-in-out infinite;transform-origin:50% 100%}
.hw1 .webik-body{animation-delay:-.6s}.hw2 .webik-body{animation-delay:-1.2s}.hw3 .webik-body{animation-delay:-1.8s}.hw4 .webik-body{animation-delay:-2.4s}
.webik .arm-r{transform-origin:82px 70px}
a.card-link:hover .arm-r,.hw2 .arm-r{animation:wave .6s ease-in-out infinite alternate}
@keyframes bob{50%{transform:translateY(-6px) scaleY(1.02)}}
@keyframes wave{to{transform:rotate(-25deg)}}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}