/* screen.css — Dual theme (light default, dark via prefers-color-scheme) */
:root{
  --bg:#f6f7fb; --card:#ffffff; --muted:#5b6470; --text:#0e1013;
  --accent:#0b6cff; --accent-2:#b45309; --border:#e3e7ef;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d0f12; --card:#161a20; --muted:#9aa4b2; --text:#e6edf3;
    --accent:#70b7ff; --accent-2:#ffb86b; --border:#232a34;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.6;background:var(--bg);color:var(--text)}
.wrapper{max-width:980px;margin:0 auto;padding:16px}
header{background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 15%, transparent), transparent 60%);border-bottom:1px solid var(--border)}
header .wrapper{padding-top:32px;padding-bottom:24px}
h1{margin:0 0 8px 0;font-size:clamp(1.8rem,3vw,2.4rem)}
header p{margin:0;color:var(--muted)}
nav{margin-top:16px}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:12px;flex-wrap:wrap}
nav a{display:inline-block;padding:8px 12px;border:1px solid var(--border);border-radius:10px;color:var(--text);text-decoration:none;background:var(--card)}
nav a:hover, nav a[aria-current="page"]{border-color:var(--accent);color:var(--accent)}
main .wrapper{padding-top:24px;padding-bottom:32px}
h2{font-size:clamp(1.3rem,2.2vw,1.6rem);margin-top:12px}
h3{font-size:1.05rem;margin-top:12px}
p{margin:10px 0}
section,article{background:var(--card);border:1px solid var(--border);padding:16px;border-radius:14px;margin:16px 0}
figure{margin:8px 0;text-align:center}
figure img{max-width:100%;height:auto;border-radius:10px;border:1px solid var(--border)}
figcaption{font-size:.9rem;color:var(--muted);margin-top:6px}
.gallery{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;padding-bottom:6px}
.gallery img{flex:0 0 auto;width:280px;scroll-snap-align:start;border-radius:10px}
footer{border-top:1px solid var(--border);color:var(--muted);background:color-mix(in oklab, var(--bg) 85%, var(--text) 15%)}
footer .wrapper{padding-top:16px;padding-bottom:24px}
footer a{color:var(--accent)}
a{color:var(--accent)}a:hover{color:var(--accent-2)}
section ul{padding-left:18px}
@media (max-width:640px){nav ul{gap:8px}.gallery img{width:220px}}