:root {
  --brand:#f48625; --brand-dark:#ed760c; --bg:#17171d; --card:#1e1e24;
  --text:#f0ede8; --muted:#9a9aa4; --border:#2d2d36; --ok:#4dd0e1;
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing:border-box; }
body {
  margin:0; padding:48px 20px 70px; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
}
body::before {
  content:""; position:fixed; inset:0 0 auto; height:300px; pointer-events:none;
  background:radial-gradient(60% 100% at 85% 0%,rgba(244,134,37,.18),transparent 70%);
}
.wrap { position:relative; max-width:820px; margin:0 auto; }
.brand { display:flex; align-items:flex-start; gap:15px; margin-bottom:10px; }
.brand img { width:52px; height:52px; border-radius:14px; background:#17171d; }
h1 { margin:0; font-size:1.55rem; letter-spacing:-.02em; }
.tagline { margin:6px 0 0; color:var(--muted); font-size:.92rem; }
.notice {
  margin:20px 0 16px; padding:14px 16px; border:1px solid #5c4218;
  border-radius:12px; background:#2a1d0d; color:#ffc46b; font-size:.86rem;
}
.notice strong { display:block; color:var(--text); margin-bottom:3px; }
.notice p { margin:0; color:var(--muted); }
.card {
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:22px 24px; margin-bottom:16px; box-shadow:0 18px 44px rgba(0,0,0,.45);
}
h2 { margin:0 0 14px; font-size:1.05rem; }
.url-row { display:flex; gap:8px; align-items:stretch; }
.url-box {
  flex:1; min-width:0; background:#202028; border:1px solid var(--border);
  border-radius:11px; padding:12px 14px; font-family:var(--mono); font-size:.8rem;
  white-space:nowrap; overflow-x:auto; color:var(--text);
}
button {
  font-family:inherit; font-size:.88rem; font-weight:700; border:0; border-radius:11px;
  padding:12px 18px; cursor:pointer; color:var(--text);
  background:rgba(154,154,164,.18);
}
button:hover { background:rgba(154,154,164,.28); }
button.copied { background:var(--ok); color:#17171d; }
.install {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; margin-top:12px; padding:14px 18px; border-radius:11px;
  background:var(--brand); color:#fff; text-decoration:none; font-weight:750;
  box-shadow:0 8px 22px rgba(244,134,37,.28);
}
.install:hover { background:var(--brand-dark); }
.install svg { width:19px; height:19px; }
.hint { margin:10px 0 0; color:var(--muted); font-size:.8rem; }
ol { margin:0; padding-left:22px; color:var(--muted); font-size:.88rem; }
ol li + li { margin-top:7px; }
footer { text-align:center; color:var(--muted); font-size:.78rem; margin-top:18px; }
@media (max-width:600px) {
  body { padding:28px 14px 50px; }
  .card { padding:18px; }
  .url-row { flex-direction:column; }
  button { width:100%; }
}