/***** FujiSSL ACME Manual — Modern Minimal (Apple/Tesla-ish) *****/
/* Wrap content with: <section class="fujissl-acme-manual"> ... </section> */

.fujissl-acme-manual{
  /* Design tokens */
  --bg: #ffffff;
  --surface: #fcfcfd;
  --ink: #0b0f14;
  --ink-muted: #5b616a;
  --brand: #C70000;
  --line: #e8eaee;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 24px rgba(0,0,0,.06);
  --space-1:.375rem; --space-2:.625rem; --space-3:1rem;
  --space-4:1.5rem;  --space-5:2rem;   --space-6:3rem;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--sans);
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  padding: clamp(16px, 2vw, 28px);
}

.fujissl-acme-manual :not(h3):not(h4):not(h5) {
  /* font-size: 1.2rem; */
}

/* Light/ Dark */
@media (prefers-color-scheme: dark){
  .fujissl-acme-manual{
    --bg:#0c0f13; --surface:#11151b; --ink:#e6e9ee; --ink-muted:#9aa3af; --line:#232a33;
    --shadow: none;
  }
}

/* Fluid type */
.fujissl-acme-manual h2{font-size:clamp(26px,2.6vw,34px); font-weight:800; margin:0 0 var(--space-3);}
.fujissl-acme-manual h3{font-size:clamp(20px,2.1vw,26px); font-weight:700; margin:var(--space-5) 0 var(--space-2);}
.fujissl-acme-manual h4{font-size:clamp(16px,1.7vw,20px); font-weight:700; color:var(--ink); margin:var(--space-4) 0 var(--space-2);}
.fujissl-acme-manual p{margin:0 0 var(--space-3);}
.fujissl-acme-manual *{box-sizing:border-box}

/* Divider (hairline) */
.fujissl-acme-manual .hr{
  height:1px; background:linear-gradient(90deg,transparent, var(--line), transparent);
  margin: var(--space-5) 0;
}

/* Section card */
.fujissl-acme-manual .card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(14px, 1.4vw, 22px);
  margin: var(--space-3) 0;
}

/* Callouts */
.fujissl-acme-manual .callout{
  border:1px solid var(--line);
  border-radius: calc(var(--radius) - 4px);
  padding: clamp(12px,1.2vw,18px);
  background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.2));
}
.fujissl-acme-manual .callout .title{font-weight:800; display:block; margin-bottom:.4rem;}
.fujissl-acme-manual .callout.warn{background:linear-gradient(180deg, #f5f9ff, #f0f6ff)}
.fujissl-acme-manual .callout.note{background:linear-gradient(180deg, #fff9e6, #fff5d6)}
.fujissl-acme-manual .callout.danger{background:linear-gradient(180deg, #fff1f1, #ffe7e7)}

/* Secret chip */
.fujissl-acme-manual .secret{
  display:inline-flex; align-items:center; gap:.45em;
  padding:.22em .6em; border-radius:999px;
  border:1px dashed rgba(199,0,0,.45);
  background:rgba(199,0,0,.06); color:#a30000; font-weight:700;
}

/* Numbered steps (left rail) */
.fujissl-acme-manual .steps{list-style:none; margin:var(--space-4) 0; padding:0; counter-reset:step}
.fujissl-acme-manual .steps>li{
  counter-increment:step;
  display:grid; grid-template-columns: 42px 1fr; gap: 14px;
  padding: clamp(12px,1.2vw,16px);
  border:1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  margin: var(--space-3) 0;
}
.fujissl-acme-manual .steps>li::before{
  content: counter(step);
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:12px;
  background: #111; color:#fff; font-weight:800;
}
@media (prefers-color-scheme: dark){
  .fujissl-acme-manual .steps>li::before{ background:#e6e9ee; color:#0c0f13; }
}

/* Lists */
.fujissl-acme-manual ul{margin: .4rem 0 .8rem 1.2rem}
.fujissl-acme-manual li{margin:.35rem 0}

/* Code */
.fujissl-acme-manual code{
  font-family:var(--mono); background:#f4f6f8; padding:.15em .4em; border-radius:8px; border:1px solid var(--line);
}
@media (prefers-color-scheme: dark){
  .fujissl-acme-manual code{ background:#0f141a; border-color:#1b232d; }
}
.fujissl-acme-manual pre{
  margin: var(--space-3) 0; border-radius:16px; overflow:auto;
  background:#0b0f14; color:#e6edf5; padding: clamp(14px, 1.4vw, 18px);
  box-shadow: var(--shadow);
}
.fujissl-acme-manual pre code{ background:transparent; border:0; padding:0; color:inherit }

/* Figure */
.fujissl-acme-manual figure{margin: var(--space-4) 0}
.fujissl-acme-manual figure img{
  width:100%; height:auto; border-radius:12px; border:1px solid var(--line)
}
.fujissl-acme-manual figcaption{
  margin-top:.6rem; color:var(--ink-muted); font-size:.95rem
}

/* Buttons */
.fujissl-acme-manual .btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.7rem 1rem; border-radius:12px;
  background:#111; color:#fff; border:1px solid #111; text-decoration:none; font-weight:700;
  transition: transform .06s ease, filter .2s ease;
}
.fujissl-acme-manual .btn:hover{ filter:brightness(1.06) }
.fujissl-acme-manual .btn:active{ transform: translateY(1px) }
@media (prefers-color-scheme: dark){
  .fujissl-acme-manual .btn{ background:#e6e9ee; color:#0b0f14; border-color:#e6e9ee }
}

/* Inline link */
.fujissl-acme-manual a{ color:#0b0f14; text-underline-offset:.14em; }
@media (prefers-color-scheme: dark){
  .fujissl-acme-manual a{ color:#dbe3ee }
}

/* Subtle page header line */
.fujissl-acme-manual .page-head{
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-3);
}