/* Styles for the simple text pages (About, Privacy, Terms, Contact).
   Colors match the tool in src/styles/tool.css. */
:root{
  --bg:#eef1f8; --panel:#ffffff; --text:#1b1d2a; --muted:#596079; --line:#d9deeb;
  --accent:#2747ff; --accent-ink:#ffffff; color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#11131b; --panel:#1a1d28; --text:#e8ebf5; --muted:#a1a8bf; --line:#2c3142;
    --accent:#8395ff; --accent-ink:#0c0f2e; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#11131b; --panel:#1a1d28; --text:#e8ebf5; --muted:#a1a8bf; --line:#2c3142;
  --accent:#8395ff; --accent-ink:#0c0f2e; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.6 "Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
a{color:var(--accent)}
.pagetop{display:flex;align-items:center;gap:12px;max-width:760px;margin:0 auto;padding:18px 16px}
.pagetop a{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font:400 30px/1 "Patrick Hand","Comic Sans MS",cursive}
.page{max-width:760px;margin:0 auto 28px;padding:24px clamp(16px,4vw,36px);background:var(--panel);border:1.5px solid var(--line);border-radius:16px}
.page h1,.page h2{font-family:"Patrick Hand","Comic Sans MS",cursive;font-weight:400;line-height:1.15}
.page h1{font-size:40px;margin:0 0 8px}
.page h2{font-size:28px;margin:28px 0 6px}
.page .updated{color:var(--muted);font-size:14px;margin-top:0}
.page .btn{display:inline-block;margin-top:8px;padding:10px 18px;border-radius:10px;background:var(--accent);color:var(--accent-ink);font-weight:700;text-decoration:none}
@media (max-width:520px){.page{border-radius:0;border-left:0;border-right:0}}
/* Story templates: the gallery and each template's page */
.page.wide{max-width:1040px}
.page .lead{font-size:18px;margin-top:0}
.page .crumbs{margin:0 0 4px;font-size:15px}
.tgrid{list-style:none;margin:16px 0 20px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.tgrid.small{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:600px){.tgrid.small{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.tgrid.small .tname{font-size:18px}}
.tcard a{display:flex;flex-direction:column;height:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:14px;overflow:hidden;color:var(--text);text-decoration:none}
.tcard a:hover{border-color:var(--accent)}
.tcard img{display:block;width:100%;height:auto;aspect-ratio:1/1;background:#fff}
.tcard .tname{display:block;padding:10px 12px 0;font:400 22px/1.15 "Patrick Hand","Comic Sans MS",cursive}
.tcard .tline{display:block;padding:4px 12px 12px;font-size:14px;line-height:1.4;color:var(--muted)}
.tgrid.small .tname{padding-bottom:10px;font-size:20px}
.tuse{display:grid;grid-template-columns:minmax(0,240px) 1fr;gap:24px;align-items:start;margin:16px 0 8px}
.tpreview{display:block;width:100%;height:auto;aspect-ratio:9/16;border:2px solid var(--text);border-radius:14px;background:#fff}
.page .btn.big{margin-top:0;padding:14px 26px;font-size:20px}
.page .note{color:var(--muted);font-size:14px;margin:8px 0 0}
.tlines{padding-left:22px;margin:4px 0}
.tlines li{margin:4px 0}
.tuse h2{margin-top:20px}
@media (max-width:600px){.tuse{grid-template-columns:1fr}.tpreview{max-width:220px;margin:0 auto}}