:root { color-scheme: light dark; --bg:#fff; --fg:#16181d; --muted:#5d6472; --bd:#e3e6eb; --card:#f6f7f9; --accent:#2563eb; --yt:#ff0000; }
@media (prefers-color-scheme: dark) { :root { --bg:#0f1115; --fg:#e8eaee; --muted:#9aa2b1; --bd:#262b34; --card:#171a21; --accent:#6ea0ff; } }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif; }
a { color:var(--accent); }
.wrap { max-width:860px; margin:0 auto; padding:0 20px; }
nav { border-bottom:1px solid var(--bd); }
nav .wrap { display:flex; align-items:center; gap:20px; height:56px; }
nav .brand { font-weight:700; color:var(--fg); text-decoration:none; margin-right:auto; }
nav a.link { color:var(--muted); text-decoration:none; font-size:15px; }
nav a.link:hover, nav a.link[aria-current] { color:var(--fg); }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:8px; background:var(--yt); color:#fff; text-decoration:none; font-weight:600; border:0; cursor:pointer; font:inherit; font-weight:600; }
.btn.secondary { background:transparent; color:var(--fg); border:1px solid var(--bd); }
.btn.small { padding:6px 12px; font-size:14px; }
.hero { padding:64px 0 40px; text-align:center; }
.hero h1 { font-size:clamp(32px,6vw,52px); line-height:1.1; margin:0 0 16px; }
.hero p.lead { font-size:19px; color:var(--muted); max-width:620px; margin:0 auto 28px; }
.hero .cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.carousel { position:relative; margin:40px auto 0; max-width:860px; }
.slides { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; border:1px solid var(--bd); border-radius:14px; background:#fff; }
.slides::-webkit-scrollbar { display:none; }
.slides:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.slides figure { margin:0; flex:0 0 100%; scroll-snap-align:start; }
.slides img { display:block; width:100%; height:auto; }
.carousel .nav { position:absolute; top:calc(50% - 22px); width:40px; height:40px; border-radius:50%; border:1px solid var(--bd); background:var(--bg); color:var(--fg); font-size:24px; line-height:1; cursor:pointer; opacity:.9; }
.carousel .prev { left:10px; } .carousel .next { right:10px; }
.dots { display:flex; justify-content:center; gap:8px; margin-top:12px; }
.dots button { width:10px; height:10px; padding:0; border-radius:50%; border:0; background:var(--bd); cursor:pointer; }
.dots button.on { background:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:40px 0; }
.card { background:var(--card); border:1px solid var(--bd); border-radius:12px; padding:18px; }
.card h3 { margin:0 0 6px; font-size:17px; }
.card p { margin:0; color:var(--muted); font-size:15px; }
h2 { margin-top:48px; }
h3 { margin-top:28px; }
code, kbd { font:14px ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--card); border:1px solid var(--bd); border-radius:5px; padding:1px 5px; }
pre { background:var(--card); border:1px solid var(--bd); border-radius:10px; padding:14px; overflow:auto; font-size:13px; line-height:1.5; }
pre code { background:none; border:0; padding:0; }
table { border-collapse:collapse; width:100%; margin:16px 0; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--bd); vertical-align:top; }
.note { border-left:3px solid var(--accent); background:var(--card); padding:10px 14px; border-radius:0 8px 8px 0; margin:16px 0; }
.toc { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0; padding:0; list-style:none; }
.toc a { display:block; padding:4px 12px; border:1px solid var(--bd); border-radius:999px; text-decoration:none; font-size:14px; }
.flow { font:14px ui-monospace,Menlo,monospace; color:var(--muted); }
.recipe { padding-top:8px; border-top:1px solid var(--bd); margin-top:36px; scroll-margin-top:12px; }
.promo { margin:48px 0; padding:22px; border-radius:12px; background:var(--card); border:1px solid var(--bd); }
footer { margin-top:72px; border-top:1px solid var(--bd); padding:24px 0; color:var(--muted); font-size:14px; }
footer .wrap { display:flex; gap:20px; flex-wrap:wrap; }
footer a { color:var(--muted); }
.promptbox { position:relative; }
.promptbox .btn { position:absolute; top:10px; right:10px; }