/* Consolidated from inline <style> in templates/layout.php. ASCII only. */
@font-face{font-family:'Noto Color Emoji';src:url('/fonts/NotoColorEmoji.v2.woff2') format('woff2');font-display:swap;}
:root {
  --bg:#0f1320; --panel:#161b2c; --line:#23304a;
  --text:#e8eaf6; --muted:#9aa6c8; --accent:#5dd0a9; --accent2:#7aa2ff;
  --code:#1a2238;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif,"Noto Color Emoji";
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
header{
  border-bottom:1px solid var(--line); padding:18px 0;
  display:flex; align-items:center; gap:20px;
}
header h1{margin:0; font-size:20px; letter-spacing:.02em}
header h1 a{color:var(--text)}
header h1 a:hover{text-decoration:none}
header h1 span{color:var(--accent)}
header nav{margin-left:auto; display:flex; gap:22px}
header nav a{color:var(--muted); font-size:14px}
header nav a:hover{color:var(--text); text-decoration:none}

/* hero */
.hero{padding:70px 0 50px; text-align:center}
.hero .tag{
  display:inline-block; padding:5px 12px; border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:18px;
}
.hero h2{
  font-size:54px; line-height:1.05; margin:0 0 18px;
  letter-spacing:-.02em; font-weight:800;
}
.hero h2 em{font-style:normal; color:var(--accent)}
.hero p{font-size:19px; color:var(--muted); margin:0 auto 28px; max-width:680px}
.cta{display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--accent); color:#0a1018; padding:13px 22px;
  border-radius:10px; font-weight:700; font-size:15px;
  border:0; cursor:pointer; transition:transform .12s, filter .12s;
}
.btn:hover{filter:brightness(1.05); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.alt{background:transparent; color:var(--text); border:1px solid var(--line)}
.btn.alt:hover{border-color:var(--muted)}

/* downloads */
.downloads{padding:30px 0 60px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media(max-width:760px){.grid3{grid-template-columns:1fr}}
.dlcard{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:24px; transition:border-color .15s, transform .15s;
}
.dlcard:hover{border-color:var(--accent); transform:translateY(-2px)}
.dlcard h3{margin:0 0 4px; font-size:18px}
.dlcard .sub{color:var(--muted); font-size:13px; margin-bottom:14px}
.dlcard code{
  display:block; background:var(--code); border-radius:6px;
  padding:9px 12px; font-size:12.5px; color:var(--text);
  overflow-x:auto; white-space:nowrap;
}
.dlcard a.download{
  display:inline-block; margin-top:12px; color:var(--accent2);
  font-weight:600; font-size:14px;
}

/* screenshot */
.shotwrap{padding:30px 0 60px; text-align:center}
.shot{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:14px; max-width:100%; margin:0 auto; box-shadow:0 24px 60px rgba(0,0,0,.4);
}
.shot img{width:100%; max-width:1060px; height:auto; border-radius:8px; display:block; margin:0 auto}

/* features grid */
.features{padding:60px 0; border-top:1px solid var(--line)}
.features h2{font-size:32px; margin:0 0 8px; text-align:center; letter-spacing:-.01em}
.features p.lead{text-align:center; color:var(--muted); margin:0 auto 36px; max-width:540px}
.fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
@media(max-width:760px){.fgrid{grid-template-columns:1fr}}
.feat{padding:8px}
.feat h3{margin:0 0 6px; font-size:17px; color:var(--accent)}
.feat p{margin:0; color:var(--muted); font-size:14px; line-height:1.55}

/* compat */
.compat{padding:50px 0; border-top:1px solid var(--line); text-align:center}
.compat h2{font-size:28px; margin:0 0 8px}
.compat p{color:var(--muted); margin:0 auto 24px; max-width:560px}
.compat ul{
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.compat li{
  background:var(--panel); border:1px solid var(--line);
  padding:8px 16px; border-radius:8px; font-size:14px;
}

/* footer */
footer{
  border-top:1px solid var(--line); padding:30px 0;
  color:var(--muted); font-size:13px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
footer .sp{flex:1}

  /* mlsub signup (moved from inline body <style> for validity 2026-06-18) */
  .mlsub-wrap{box-sizing:border-box;max-width:520px;margin:32px auto;padding:22px 24px;border:1px solid rgba(128,128,128,.35);border-radius:12px;background:rgba(127,127,127,.06);font-family:inherit}
  .mlsub-wrap h2{margin:0 0 6px;font-size:1.15rem;line-height:1.2}
  .mlsub-wrap p.mlsub-sub{margin:0 0 14px;opacity:.8;font-size:.92rem}
  .mlsub-form{display:flex;gap:8px;flex-wrap:wrap}
  .mlsub-form input[type=email]{flex:1 1 220px;min-width:0;padding:11px 13px;border:1px solid rgba(128,128,128,.45);border-radius:8px;font-size:1rem;background:#fff;color:#111}
  .mlsub-form button{padding:11px 18px;border:0;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;background:#2563eb;color:#fff}
  .mlsub-form button:disabled{opacity:.6;cursor:default}
  .mlsub-msg{margin:10px 2px 0;font-size:.92rem;min-height:1.1em}
  .mlsub-msg.ok{color:#15803d}.mlsub-msg.err{color:#b91c1c}
  .mlsub-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* themed-scrollbar v1 (linscp.net) */
* { scrollbar-width: thin; scrollbar-color: #5dd0a9 #161b2c; }
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: #161b2c; }
::-webkit-scrollbar-thumb { background: #5dd0a9; border-radius: 7px; border: 2px solid #161b2c; }
::-webkit-scrollbar-thumb:hover { background: #7aa2ff; }
::-webkit-scrollbar-corner { background: #161b2c; }