/* The :root blocks and the two media queries below are copied unchanged from the design.
   Two small additions: --error (the design has no error colour) and 3 in --rows,
   which the build fills with the number of grid rows (at least 3). */
:root{--bg:#0c0b10;--panel:#13121a;--line:#1c1a24;--text:#e6e4ec;--muted:#9a97a6;--faint:#6f6c7c;--dim:#4a4758;--accent:oklch(78% 0.12 200);--input-border:#221f2c;--ph1:#17161f;--ph2:#131219;--ph-border:#2a2735;--ph-text:#56536a;--shadow:none;--error:#ef8a96;color-scheme:dark;
--cols:460px minmax(0,1fr);--brand-border-right:1px solid var(--line);--brand-border-bottom:none;--brand-pos:sticky;--brand-h:100vh;--brand-pad:48px;--rows:repeat(3,minmax(0,1fr));--grid-pad:24px 56px 56px;--head-pad:40px 56px 0;--card-cols:minmax(0,1fr) 280px;--card-pad:36px 40px;--shot-order:0;--shot-h:100%;--h1:40px;--name:36px;--products-minh:100vh}
:root[data-theme="light"]{--bg:#f6f5f8;--panel:#ffffff;--line:#e3e1ea;--text:#16151c;--muted:#5f5c6c;--faint:#8a879a;--dim:#a8a5b4;--accent:oklch(50% 0.12 200);--input-border:#dcdae4;--ph1:#f1f0f5;--ph2:#f7f6fa;--ph-border:#d3d0de;--ph-text:#9a97a6;--shadow:0 1px 2px rgba(22,21,28,.04);--error:#b3263a;color-scheme:light}
@media (max-width:1240px){:root{--card-cols:minmax(0,1fr);--shot-order:-1;--shot-h:160px}}
@media (max-width:900px){:root{--cols:minmax(0,1fr);--brand-border-right:none;--brand-border-bottom:1px solid var(--line);--brand-pos:static;--brand-h:auto;--brand-pad:28px 24px 32px;--rows:none;--grid-pad:16px 24px 32px;--head-pad:28px 24px 0;--card-cols:minmax(0,1fr);--card-pad:24px;--shot-order:-1;--shot-h:140px;--h1:30px;--name:28px;--products-minh:0}}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Geist',sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}a:hover{color:var(--text)}
*{box-sizing:border-box}
input{font:inherit;color:inherit;background:transparent;border:0;outline:0;min-width:0;width:100%}
input::placeholder{color:var(--ph-text)}
button{font:inherit;cursor:pointer}

.page{min-height:100vh;display:grid;grid-template-columns:var(--cols);background:var(--bg);color:var(--text)}

.brand{padding:var(--brand-pad);border-right:var(--brand-border-right);border-bottom:var(--brand-border-bottom);position:var(--brand-pos);top:0;height:var(--brand-h);display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.brand-top{display:flex;flex-direction:column;gap:40px}
.brand-bar{display:flex;align-items:center;justify-content:space-between}

.logo{display:flex;align-items:center;gap:10px}
.logo-name{font-size:16px;font-weight:500}

.controls{display:flex;align-items:center;gap:8px}

.lang{display:flex;border:1px solid var(--input-border);border-radius:999px;padding:2px;font-family:'DM Mono',monospace;font-size:12px}
.pill{background:transparent;color:var(--muted);border:0;border-radius:999px;padding:4px 10px;font-size:12px;font-family:'DM Mono',monospace;box-shadow:none}
.pill[aria-current]{background:var(--panel);color:var(--text);box-shadow:0 0 0 1px var(--line)}

.theme-toggle{background:transparent;border:1px solid var(--input-border);color:var(--muted);border-radius:999px;padding:6px 12px;font-size:12px;font-family:'DM Mono',monospace;display:flex;align-items:center;gap:8px}
.theme-toggle:hover{color:var(--text);border-color:var(--faint)}
.theme-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
/* Both labels are in the HTML, so the right one shows before any script runs. */
.theme-name-light{display:none}
:root[data-theme="light"] .theme-name-dark{display:none}
:root[data-theme="light"] .theme-name-light{display:inline}

.title{font-size:var(--h1);font-weight:300;line-height:1.15;letter-spacing:-0.02em;margin:0;text-wrap:pretty}
.intro{margin:0;font-size:15px;line-height:1.6;color:var(--muted);text-wrap:pretty;max-width:420px}

.brand-bottom{display:flex;flex-direction:column;gap:28px;font-size:14px;color:var(--muted)}

.subscribe{display:flex;flex-direction:column;gap:10px;margin:0}
.form-label{font-family:'DM Mono',monospace;font-size:12px;color:var(--faint)}
.field{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--input-border);border-radius:8px;padding:10px 10px 10px 14px}
.field input{font-size:14px;flex:1}
.submit{background:transparent;border:0;color:var(--text);padding:4px 6px;font-size:16px;line-height:1}
/* Spam trap: real visitors never see or reach this field. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.thanks,.error{font-size:13px}
.thanks{color:var(--accent)}
.error{color:var(--error)}
/* Without JavaScript the Worker redirects to /#thanks, and :target shows the message. */
.thanks:target{display:block}

.links{display:flex;gap:24px;flex-wrap:wrap}
.copyright{color:var(--dim);font-size:12px}

.products{display:flex;flex-direction:column;min-height:var(--products-minh)}
.products-head{padding:var(--head-pad);font-family:'DM Mono',monospace;font-size:12px;color:var(--faint);display:flex;justify-content:space-between}
.grid{flex:1;display:grid;grid-template-rows:var(--rows);padding:var(--grid-pad);gap:16px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:var(--card-pad);display:grid;grid-template-columns:var(--card-cols);gap:32px 40px;align-items:center;box-shadow:var(--shadow);transition:border-color .2s}
.card:hover{border-color:var(--accent)}
.card-text{display:flex;flex-direction:column;gap:14px}
.card-n{font-family:'DM Mono',monospace;font-size:12px;color:var(--accent)}
.card-name{margin:0;font-size:var(--name);font-weight:400;letter-spacing:-0.02em;text-wrap:balance}
.card-desc{margin:0;font-size:15px;color:var(--muted);line-height:1.5;text-wrap:pretty}

.shot{order:var(--shot-order);height:var(--shot-h);min-height:140px;border-radius:8px}
.shot-placeholder{background:repeating-linear-gradient(135deg,var(--ph1) 0 10px,var(--ph2) 10px 20px);border:1px dashed var(--ph-border)}
.shot-image{display:block;width:100%;object-fit:cover;object-position:top;border:1px solid var(--line);background:var(--ph1)}

.not-found{display:flex;flex-direction:column;gap:40px;min-height:100vh;padding:48px}
.back{font-size:14px;color:var(--muted)}
@media (max-width:900px){.not-found{padding:28px 24px 32px}}