:root{--bg:#0d0b12;--panel:#17131f;--line:#33293f;--text:#d9d3e0;--dim:#9b90a8;--accent:#c9a24a;--hot:#b5304a;--link:#8fb8d8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 "Palatino Linotype",Palatino,Georgia,serif;
background-image:radial-gradient(1200px 500px at 50% -150px,#2a1f3d 0,transparent 70%)}
a{color:var(--link)}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px}
header.hero{padding:56px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}
.eyebrow{letter-spacing:.3em;text-transform:uppercase;font-size:.75rem;color:var(--accent);margin:0 0 8px}
h1{font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.05;margin:0 0 16px;color:#f3ecd9;text-shadow:0 2px 0 #000,0 0 28px #5b2a7a88}
h1 em{color:var(--hot);font-style:normal}
.lead{font-size:1.15rem;color:var(--text);margin:0 0 22px}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:11px 20px;border:1px solid var(--accent);color:#f3ecd9;text-decoration:none;border-radius:4px;background:#241a30;font-weight:bold}
.btn:hover{background:var(--accent);color:#16110a}
.btn.alt{border-color:var(--line);color:var(--dim);font-weight:normal}
.btn.alt:hover{background:var(--line);color:var(--text)}
.figure{background:radial-gradient(circle at 50% 40%,#e9e6ee,#b9b3c4);border:1px solid var(--line);border-radius:6px;padding:12px;text-align:center;box-shadow:0 10px 40px #000a}
.figure img{max-width:100%;height:auto;mix-blend-mode:multiply;display:block;margin:0 auto}
.figure small{display:block;color:#4a4256;font-size:.75rem;margin-top:6px}
section{padding:36px 0;border-top:1px solid var(--line)}
h2{font-size:1.6rem;margin:0 0 6px;color:#f3ecd9}
h2::after{content:"";display:block;width:56px;height:2px;background:var(--hot);margin:8px 0 18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:18px}
.card h3{margin:0 0 6px;color:var(--accent);font-size:1.05rem}
.card p{margin:0;color:var(--dim);font-size:.95rem}
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.shots figure{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.shots img{width:100%;display:block;height:auto}
.shots figcaption{padding:8px 12px;color:var(--dim);font-size:.85rem;font-style:italic}
ol.steps{padding-left:1.2em}
ol.steps li{margin-bottom:8px}
code{background:#241a30;border:1px solid var(--line);padding:2px 7px;border-radius:3px;font-size:.95em;color:#f3ecd9}
.status{display:inline-block;margin-top:14px;padding:6px 12px;border:1px dashed var(--line);border-radius:4px;color:var(--dim);font-size:.9rem}
footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--dim);font-size:.85rem}
footer p{margin:4px 0}
@media (max-width:760px){.hero .wrap{grid-template-columns:1fr}.figure{max-width:340px;margin:0 auto}}

/* surface (light) theme */
:root[data-theme="light"]{--bg:#f4efe4;--panel:#fffaf0;--line:#d8cdb4;--text:#2c2630;--dim:#6b6272;--accent:#8a6a1c;--hot:#a8283f;--link:#1f5f8f}
:root[data-theme="light"] body{background-image:radial-gradient(1200px 500px at 50% -150px,#fbe9b8 0,transparent 70%)}
:root[data-theme="light"] h1,:root[data-theme="light"] h2{color:#2a2130;text-shadow:none}
:root[data-theme="light"] .btn{background:#fffaf0;color:#2a2130}
:root[data-theme="light"] .btn:hover{background:var(--accent);color:#fffaf0}
:root[data-theme="light"] .btn.alt{color:var(--dim)}
:root[data-theme="light"] code{background:#efe6d0;color:#2a2130}
:root[data-theme="light"] .figure{background:radial-gradient(circle at 50% 40%,#fffdf6,#e8dec6)}
.figure img{max-height:460px;width:auto}
.themebtn{position:fixed;top:12px;right:12px;z-index:5;padding:8px 14px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:20px;cursor:pointer;font:inherit;font-size:.85rem}
.themebtn:hover{border-color:var(--accent)}
.lead .l{display:none}
:root[data-theme="light"] .lead .d{display:none}
:root[data-theme="light"] .lead .l{display:inline}
.credit-list{padding-left:1.1em}
.credit-list li{margin-bottom:8px}