:root{
  --bg:#141617; --panel:#1b1e20; --panel2:#212426; --side:#0f1112;
  --line:#2b2f32; --line2:#3a4045;
  --ink:#e8eaec; --ink2:#9aa3a9; --ink3:#6b7479;
  --accent:#5b93c0; --accent2:#7fb0d8; --accent-dim:#2a3f52;
  --ok:#79b588; --warn:#d08a5a;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;
  font-size:15px;line-height:1.95;-webkit-font-smoothing:antialiased}
a{color:var(--accent2)}
.wrap{max-width:900px;margin:0 auto;padding:0 24px}

.topbar{position:sticky;top:0;z-index:30;background:rgba(15,17,18,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .in{max-width:900px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:22px}
.topbar .logo{font-weight:700;font-size:15px;letter-spacing:.04em;text-decoration:none;color:#fff;white-space:nowrap}
.topbar .logo small{display:block;font-size:10px;letter-spacing:.2em;color:var(--accent);font-weight:700}
.topbar nav{margin-left:auto;display:flex;gap:18px}
.topbar nav a{font-size:13.5px;text-decoration:none;color:var(--ink2);white-space:nowrap}
.topbar nav a:hover,.topbar nav a.on{color:#fff}

.hero{padding:54px 0 10px}
.hero .kicker{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.22em;
  color:var(--accent);font-weight:700;margin-bottom:16px}
.hero .kicker::before{content:"";width:30px;height:2px;background:var(--accent)}
.hero h1{font-size:clamp(25px,5vw,34px);line-height:1.45;margin:0 0 18px}
.hero p{color:var(--ink2);margin:0 0 8px}

h2.sec{font-size:19px;margin:54px 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:11px}
h2.sec .n{width:27px;height:27px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:700;flex:0 0 27px}
h3.sub{font-size:15.5px;margin:30px 0 10px;color:#fff}

.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:26px 28px;margin:0 0 16px}
.card p:first-child{margin-top:0}
.card p:last-child{margin-bottom:0}

.steps{display:grid;gap:14px}
.step{display:flex;gap:18px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:22px 24px;text-decoration:none;color:inherit;transition:border-color .15s}
.step:hover{border-color:var(--accent)}
.step .no{flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:var(--accent-dim);
  color:var(--accent2);display:grid;place-items:center;font-size:16px;font-weight:700}
.step b{display:block;font-size:16.5px;color:#fff;margin-bottom:4px}
.step span{font-size:13.5px;color:var(--ink2);line-height:1.85}
.step .go{margin-left:auto;align-self:center;font-size:13px;color:var(--accent2);white-space:nowrap}

.cmd{position:relative;background:#0c0e0f;border:1px solid var(--line2);border-radius:8px;
  padding:15px 100px 15px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.9;color:#bcc6cb;white-space:pre-wrap;word-break:break-all;margin:0 0 12px}
.cmd button{position:absolute;top:10px;right:10px;background:#232a2e;border:1px solid var(--line2);
  color:var(--ink2);border-radius:6px;padding:6px 13px;font-size:12px;cursor:pointer;font-family:inherit}
.cmd button:hover{background:#2c3338;color:#fff}

table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 16px}
th,td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
th{background:#191c1e;color:var(--ink2);font-weight:500;white-space:nowrap}
td code,p code,li code{background:#0b0d0e;border:1px solid var(--line2);border-radius:4px;padding:1px 7px;font-size:12px}

.note{border-left:3px solid var(--accent);background:#16202830;padding:15px 20px;margin:0 0 16px;
  color:var(--accent2);font-size:13.5px;line-height:1.95}
.note b{color:#bcd7ec}
.note.warn{border-left-color:var(--warn);background:#2a1f1630;color:#e3b68c}
.note.warn b{color:#f0cfae}

ul.plain{list-style:none;padding:0;margin:0 0 16px}
ul.plain li{position:relative;padding-left:20px;margin-bottom:8px;font-size:14px}
ul.plain li::before{content:"";position:absolute;left:3px;top:11px;width:7px;height:2px;background:var(--accent)}

.files{display:grid;gap:9px;margin:0 0 16px}
.file{display:flex;gap:14px;align-items:baseline;background:#191c1e;border:1px solid var(--line);
  border-radius:8px;padding:13px 17px;font-size:13.5px}
.file b{color:#fff;flex:0 0 auto;font-weight:500}
.file span{color:var(--ink2);font-size:12.5px}
.file .star{color:#e0b64a}

footer{border-top:1px solid var(--line);margin-top:70px;padding:30px 0 60px;color:var(--ink3);font-size:12.5px}
footer b{color:var(--ink2)}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(18px);
  background:var(--accent);color:#fff;padding:12px 26px;border-radius:999px;font-weight:700;
  font-size:13.5px;opacity:0;pointer-events:none;transition:.25s;z-index:60}
.toast.show{opacity:1;transform:translateX(-50%)}
@media(max-width:700px){
  .topbar .in{padding:11px 16px;gap:14px}
  .topbar nav{gap:13px}
  .topbar nav a{font-size:12.5px}
  .wrap{padding:0 16px}
  .step{flex-wrap:wrap}
  .step .go{margin-left:0;width:100%}
  .cmd{padding:15px 15px 48px}
  .cmd button{top:auto;bottom:10px;right:10px}
}