*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#0b0e14; --bg-card:#151b27; --border:#1c2333; --border-lit:#2a3550;
  --teal:#3dd8c5; --teal-dim:rgba(61,216,197,0.12); --teal-glow:rgba(61,216,197,0.25);
  --amber:#f0b429; --amber-dim:rgba(240,180,41,0.12);
  --text:#c9d1de; --text-bright:#eaf0f9; --text-muted:#6b7a94; --text-faint:#3d4b63;
  --pixel:'Silkscreen',monospace; --mono:'Space Mono',monospace; --sans:'DM Sans',sans-serif;
}
html { scroll-behavior:smooth; }
body { font-family:var(--sans); background:var(--bg); color:var(--text); line-height:1.7; -webkit-font-smoothing:antialiased; }
.wrap { max-width:720px; margin:0 auto; padding:0 20px; }
.crumb { padding:20px 0; font-family:var(--mono); font-size:0.72rem; display:flex; align-items:center; gap:8px; color:var(--text-faint); }
.crumb a { color:var(--text-muted); text-decoration:none; transition:color 0.15s; }
.crumb a:hover { color:var(--teal); }
.ph { padding:36px 0 28px; }
.ph .badge { display:inline-block; padding:3px 10px; background:var(--teal-dim); border:1px solid rgba(61,216,197,0.18); border-radius:3px; font-family:var(--pixel); font-size:0.55rem; color:var(--teal); letter-spacing:0.08em; text-transform:uppercase; margin-bottom:14px; }
.ph h1 { font-size:1.7rem; font-weight:700; color:var(--text-bright); letter-spacing:-0.02em; margin-bottom:8px; }
.ph p { color:var(--text-muted); font-size:0.95rem; }
.sec { padding:24px 0; border-top:1px solid var(--border); }
.sec h2 { font-size:1rem; font-weight:700; color:var(--text-bright); margin-bottom:12px; }
.sec p { color:var(--text-muted); margin-bottom:10px; font-size:0.9rem; }
.sec a { color:var(--teal); text-decoration:none; border-bottom:1px dashed var(--border-lit); transition:border-color 0.15s; }
.sec a:hover { border-color:var(--teal); }
.sec code { font-family:var(--mono); font-size:0.82rem; color:var(--teal); background:var(--teal-dim); padding:1px 5px; border-radius:3px; }
.steps { list-style:none; counter-reset:s; margin:14px 0; }
.steps li { counter-increment:s; padding:12px 14px 12px 48px; position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:5px; margin-bottom:6px; color:var(--text-muted); font-size:0.88rem; }
.steps li::before { content:counter(s); position:absolute; left:14px; top:12px; width:22px; height:22px; background:var(--teal-dim); border:1px solid rgba(61,216,197,0.18); border-radius:4px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:0.68rem; font-weight:700; color:var(--teal); }
.notice { background:var(--amber-dim); border:1px solid rgba(240,180,41,0.2); border-radius:5px; padding:14px 16px; margin-bottom:24px; display:flex; gap:10px; align-items:flex-start; font-size:0.85rem; color:var(--text-muted); }
.notice .ico { font-size:1rem; flex-shrink:0; margin-top:1px; }
.notice a { color:var(--teal); text-decoration:none; border-bottom:1px dashed var(--border-lit); }
.notice a:hover { border-color:var(--teal); }
.codeblock { background:var(--bg-card); border:1px solid var(--border); border-radius:5px; padding:14px 16px; font-family:var(--mono); font-size:0.78rem; color:var(--text-muted); overflow-x:auto; margin:12px 0; white-space:pre; line-height:1.8; }
.tip { background:rgba(61,216,197,0.08); border:1px solid rgba(61,216,197,0.2); border-radius:5px; padding:14px 16px; margin:14px 0; display:flex; gap:10px; align-items:flex-start; font-size:0.85rem; color:var(--text-muted); }
.tip .ico { color:var(--teal); font-size:1rem; flex-shrink:0; margin-top:1px; }
.tip a { color:var(--teal); text-decoration:none; border-bottom:1px dashed var(--border-lit); }
.tip a:hover { border-color:var(--teal); }
.cta-download { background:#4CAF50; color:#ffffff !important; margin-top:14px; }
.cta-download:hover { background:#5CBC60; box-shadow:0 2px 12px rgba(76,175,80,0.35); }
.cta-download img { height:18px; flex-shrink:0; }
.cta-download .dl-text { display:flex; flex-direction:column; gap:1px; line-height:1.3; }
.cta-download .dl-text small { font-size:0.68rem; font-weight:400; opacity:0.85; }
.file-warning { background:var(--amber-dim); border:1px solid rgba(240,180,41,0.2); border-radius:5px; padding:14px 16px; margin-top:14px; display:flex; gap:10px; align-items:flex-start; font-size:0.85rem; color:var(--text-muted); }
.file-warning .ico { color:var(--amber); font-size:1rem; flex-shrink:0; margin-top:1px; }
.compat { font-family:var(--mono); font-size:0.78rem; color:var(--text-muted); display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.compat span { padding:4px 10px; background:var(--bg-card); border:1px solid var(--border); border-radius:4px; }
.faq { padding:16px 0; border-bottom:1px solid var(--border); }
.faq:last-child { border-bottom:none; }
.faq strong { display:block; color:var(--text-bright); font-weight:600; font-size:0.9rem; margin-bottom:4px; }
.faq p { margin:0; font-size:0.85rem; }
.details-list { list-style:none; margin:10px 0; }
.details-list li { padding:8px 14px 8px 32px; position:relative; color:var(--text-muted); font-size:0.88rem; margin-bottom:4px; }
.details-list li::before { content:'•'; position:absolute; left:14px; color:var(--teal); font-weight:700; }
.cta { display:inline-flex; align-items:center; gap:7px; padding:10px 18px; background:var(--teal); color:var(--bg); border-radius:4px; font-size:0.82rem; font-weight:600; text-decoration:none; border:none; transition:all 0.15s; margin-top:8px; }
.cta:hover { background:#50e6d3; box-shadow:0 2px 12px var(--teal-glow); }
.cta-amazon { background:#FFD814; color:#0F1111 !important; }
.cta-amazon:hover { background:#F7CA00; box-shadow:0 2px 12px rgba(255,216,20,0.35); }
.cta-amazon img { height:18px; flex-shrink:0; }
.cta-contact { background:#1a73e8; color:#ffffff; cursor:pointer; }
.cta-contact:hover { background:#1565c0; box-shadow:0 2px 12px rgba(26,115,232,0.35); }
.form-embed { display:none; margin-top:14px; border-radius:5px; overflow:hidden; border:1px solid var(--border); }
.form-embed.active { display:block; }
.form-embed iframe { width:100%; height:900px; border:none; }
footer { border-top:1px solid var(--border); padding:28px 20px; text-align:center; font-family:var(--mono); font-size:0.68rem; color:var(--text-faint); }
footer a { color:var(--text-muted); text-decoration:none; transition:color 0.15s; }
footer a:hover { color:var(--teal); }