@font-face { font-family:'Nunito'; font-style:normal; font-weight:400 800; font-display:swap; src:url(/fonts/nunito.woff2) format('woff2'); }
@font-face { font-family:'Fredoka'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/fonts/fredoka.woff2) format('woff2'); }
:root { --bg:#faf7f0; --fg:#243040; --card:#fff; --line:#e3dccd; --accent:#2b5fcc; --primary:#2b5fcc; --muted:#667180; }
* { box-sizing:border-box; }
body { margin:0; font:17px/1.6 'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif; background:var(--bg); color:var(--fg); }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 16px; background:var(--card); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:8px; font:600 20px 'Fredoka',system-ui,sans-serif; color:var(--fg); text-decoration:none; } .brand i { font-style:normal; color:var(--muted); font-weight:400; }
.top nav a { margin-left:16px; color:var(--accent); text-decoration:none; font-weight:700; }
main { max-width:900px; margin:0 auto; padding:20px 16px 40px; }
h1, h2, h3 { font-family:'Fredoka','Nunito',system-ui,sans-serif; line-height:1.2; } h1 { font-size:34px; margin:.4em 0 .5em; } h2 { font-size:25px; margin:1.6em 0 .5em; } h3 { font-size:19px; margin:1.2em 0 .2em; }
a { color:var(--accent); }
.crumbs { font-size:14px; color:var(--muted); } .crumbs a { color:inherit; }
.button { display:inline-block; background:var(--primary); color:#fff; text-decoration:none; font-weight:800; padding:11px 20px; border-radius:999px; margin:4px 6px 4px 0; }
.button:hover { filter:brightness(.9); }
.hero { display:flex; gap:28px; align-items:flex-start; flex-wrap:wrap; } .hero .copy { flex:1 1 360px; } .hero .sample { flex:0 1 300px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:0 4px 14px rgba(36,48,64,.08); }
.thumb { width:100%; height:auto; display:block; }
.small { color:var(--muted); font-size:14px; }
table.words { border-collapse:collapse; width:100%; background:var(--card); border:1px solid var(--line); border-radius:10px; margin:16px 0; }
table.words th, table.words td { padding:7px 12px; border-bottom:1px solid var(--line); text-align:left; } table.words th { background:#f4efe3; font-size:14px; }
ul.cols { columns:2 260px; padding-left:20px; } ul.cols li { break-inside:avoid; } ul.cols span { color:var(--muted); font-size:14px; }
footer { max-width:900px; margin:0 auto; padding:20px 16px 40px; color:var(--muted); font-size:14px; border-top:1px solid var(--line); }
@media (max-width:600px) { h1 { font-size:27px; } body { font-size:16px; } }
#consent { position:fixed; left:16px; bottom:16px; z-index:60; max-width:420px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 8px 30px rgba(36,48,64,.22); padding:14px 16px; font-size:14px; line-height:1.45; }
#consent p { margin:0 0 10px; } #consent div { display:flex; gap:8px; justify-content:flex-end; }
#consent button { font:inherit; font-weight:700; padding:7px 16px; border-radius:999px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer; } #consent button.secondary { background:#fff; color:var(--accent); }
@media (max-width:600px) { #consent { left:10px; right:10px; max-width:none; } }