
:root{ --bg:#f6efe2; --ink:#2b1d12; --soft:#6b5442; --card:rgba(255,255,255,.72); --edge:rgba(120,80,40,.22); --accent:#b5531c; --play1:#ffd27a; --play2:#e9a23b; }
@media (prefers-color-scheme: dark){ :root{ --bg:#17130f; --ink:#f1e7d8; --soft:#c7b49e; --card:rgba(255,255,255,.06); --edge:rgba(255,255,255,.13); --accent:#ffb46b; } }
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 Fredoka,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
a{ color:var(--accent); }
.top{ position:sticky; top:0; z-index:5; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--edge); }
.top .in{ max-width:960px; margin:0 auto; padding:8px 16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.logo{ font:400 22px "Lilita One",Fredoka,sans-serif; color:var(--ink); text-decoration:none; margin-right:auto; }
.nav{ display:flex; flex-wrap:wrap; gap:4px 14px; font-size:15px; }
.nav a{ color:var(--soft); text-decoration:none; } .nav a:hover, .nav a.on{ color:var(--accent); }
.mini{ padding:6px 16px; border-radius:999px; font:400 16px "Lilita One",Fredoka,sans-serif; color:#3b2205; text-decoration:none; background:linear-gradient(180deg,var(--play1),var(--play2)); border:1.5px solid rgba(255,255,255,.9); box-shadow:inset 0 1px 1px rgba(255,255,255,.75),0 3px 8px rgba(0,0,0,.2); }
main{ max-width:960px; margin:0 auto; padding:8px 16px 64px; }
h1{ font:400 clamp(32px,6vw,48px)/1.05 "Lilita One",Fredoka,sans-serif; margin:28px 0 6px; }
h2{ font:400 28px/1.15 "Lilita One",Fredoka,sans-serif; margin:34px 0 10px; }
h3{ font-size:19px; margin:0 0 4px; }
.lead{ font-size:19px; color:var(--soft); margin:0 0 18px; }
.card{ background:var(--card); border:1px solid var(--edge); border-radius:18px; padding:16px 20px; margin:12px 0; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.tiles{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.tile{ display:block; text-decoration:none; color:var(--ink); background:var(--card); border:1px solid var(--edge); border-radius:18px; padding:10px; text-align:center; }
.tile img{ width:100%; aspect-ratio:1; object-fit:contain; display:block; }
.tile b{ display:block; font-size:16px; line-height:1.2; margin-top:4px; } .tile span{ font-size:13px; color:var(--soft); }
.itiles{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } .itiles img{ aspect-ratio:auto; }
.split{ display:grid; grid-template-columns:minmax(0,280px) 1fr; gap:24px; align-items:start; }
@media (max-width:640px){ .split{ grid-template-columns:1fr; } }
.hero-img{ width:100%; border-radius:22px; background:var(--card); border:1px solid var(--edge); padding:10px; }
table{ width:100%; border-collapse:collapse; } td,th{ text-align:left; padding:7px 8px; border-bottom:1px solid var(--edge); vertical-align:top; } th{ color:var(--soft); font-weight:500; width:38%; }
.pill{ display:inline-block; padding:1px 10px; border-radius:999px; background:var(--card); border:1px solid var(--edge); font-size:14px; margin:2px 4px 2px 0; }
.dot{ display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:6px; vertical-align:-1px; border:1px solid rgba(255,255,255,.7); }
.crumbs{ font-size:14px; color:var(--soft); margin-top:18px; } .crumbs a{ color:var(--soft); }
.soft{ color:var(--soft); }
.play{ display:inline-block; padding:12px 30px; border-radius:999px; font:400 22px "Lilita One",Fredoka,sans-serif; color:#3b2205; text-decoration:none;
  background:linear-gradient(180deg,var(--play1),var(--play2)); border:2px solid rgba(255,255,255,.9); box-shadow:inset 0 2px 1px rgba(255,255,255,.75),0 6px 14px rgba(0,0,0,.25); }
.words td:first-child{ font-weight:600; white-space:nowrap; }
.log h3{ margin-top:4px; } .log ul{ margin:6px 0 0; padding-left:20px; }
footer{ border-top:1px solid var(--edge); text-align:center; padding:24px 16px 40px; color:var(--soft); font-size:15px; }
footer a{ color:var(--soft); margin:0 6px; }
