/* ============================================================
   P16-HQ 現場ガイド
   コンセプト: 「機材の続き」— 暗いステージで読む、計器の画面
   ============================================================ */

:root{
  --bg:#0a0c0d;
  --bg2:#0e1113;
  --panel:#15181b;
  --panel2:#1b1f23;
  --chassis:#2b3136;
  --ink:#e9edef;
  --ink2:#a3adb3;
  --ink3:#6f7a80;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --green:#4ade5b;
  --green-d:#1f7a2c;
  --red:#ff4b3e;
  --amber:#ffab1f;
  --blue:#5ab8ff;
  --radius:14px;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic Medium",Meiryo,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
  --w:min(600px,100% - 28px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 背景の質感：機材ラックの薄いグリッド＋周辺減光 */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%,rgba(74,222,91,.07),transparent 60%),
    radial-gradient(100% 60% at 50% 110%,rgba(90,184,255,.05),transparent 60%),
    var(--bg);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:100% 5px;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* ---------- レイアウト ---------- */
.wrap{width:var(--w);margin-inline:auto}

/* ---------- ヘッダー ---------- */
.top{
  position:sticky;top:0;z-index:50;
  background:rgba(10,12,13,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.top-in{
  width:var(--w);margin-inline:auto;
  display:flex;align-items:center;gap:10px;
  height:50px;
}
.brand{
  font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.08em;
  display:flex;align-items:center;gap:8px;white-space:nowrap;
}
.brand .mark{
  width:auto;height:17px;flex:0 0 auto;
  filter:drop-shadow(0 0 5px rgba(74,222,91,.8));
  animation:pulse 2.6s ease-in-out infinite;
}
.brand .mark.amber{filter:drop-shadow(0 0 5px rgba(255,171,31,.8))}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.brand small{color:var(--ink3);font-weight:400;letter-spacing:.04em}

.chips{
  border-bottom:1px solid var(--line);
  background:rgba(10,12,13,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  position:sticky;top:50px;z-index:49;
}
.chips-in{
  width:var(--w);margin-inline:auto;
  display:flex;gap:7px;overflow-x:auto;padding:9px 0;
  scrollbar-width:none;-ms-overflow-style:none;
}
.chips-in::-webkit-scrollbar{display:none}
.chips a{
  flex:0 0 auto;text-decoration:none;
  font-size:13px;font-weight:700;letter-spacing:.02em;
  padding:7px 13px;border-radius:999px;
  border:1px solid var(--line2);color:var(--ink2);
  background:var(--panel);
  transition:.18s;
}
.chips a:hover,.chips a:active{color:var(--ink);border-color:var(--green);background:#1c2420}
.chips a.on{color:var(--ink);border-color:var(--green);background:#1b2620}
.chips a.hot{
  color:#ffd9d5;border-color:rgba(255,75,62,.5);
  background:linear-gradient(180deg,#2a1614,#1e1211);
}
.chips a.hot:hover,.chips a.hot.on{border-color:var(--red);background:#331816;color:#ffd9d5}

/* ---------- ヒーロー ---------- */
.hero{padding:38px 0 26px;text-align:left}
.kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;
  color:var(--green);text-transform:uppercase;margin:0 0 14px;
  display:flex;align-items:center;gap:9px;
}
.kicker::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,rgba(74,222,91,.45),transparent)}
.hero h1{
  margin:0 0 12px;
  font-size:clamp(27px,7.5vw,40px);
  line-height:1.24;font-weight:900;letter-spacing:-.01em;
}
.hero h1 em{font-style:normal;color:var(--green);text-shadow:0 0 26px rgba(74,222,91,.35)}
.hero p{margin:0;color:var(--ink2);font-size:15.5px;line-height:1.8}

.device{
  margin:26px 0 6px;position:relative;
  filter:drop-shadow(0 24px 44px rgba(0,0,0,.75));
  animation:rise .8s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.device-cap{
  font-family:var(--mono);font-size:11.5px;color:var(--ink3);
  text-align:center;margin-top:10px;letter-spacing:.06em;
}

/* ---------- 最初の安心メッセージ ---------- */
.tldr{
  margin:22px 0 4px;padding:18px 17px 17px;border-radius:var(--radius);
  border:1px solid rgba(74,222,91,.38);
  background:linear-gradient(180deg,#16261a,#101713);
  position:relative;overflow:hidden;
}
.tldr::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green);
}
.tldr h2{
  margin:0 0 9px;font-size:19px;font-weight:900;line-height:1.4;letter-spacing:-.005em;
}
.tldr p{margin:0 0 11px;font-size:15.5px;color:#cfe3d4;line-height:1.75}
.tldr p:last-child{margin-bottom:0}
.tldr .mini{
  display:flex;gap:8px;margin:13px 0;flex-wrap:wrap;
}
.tldr .mini span{
  flex:1 1 0;min-width:88px;
  background:rgba(0,0,0,.35);border:1px solid rgba(74,222,91,.24);
  border-radius:10px;padding:11px 7px;font-size:13.5px;line-height:1.5;text-align:center;
  white-space:nowrap;
}
.tldr .mini b{
  display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--green);margin-bottom:3px;font-weight:800;
}
.tldr .note-s{font-size:14px;color:var(--ink2);line-height:1.7}

/* ---------- セクション ---------- */
.sec{padding:34px 0;border-top:1px solid var(--line);scroll-margin-top:104px}
.sec:first-of-type{border-top:0}
.sec-h{display:flex;align-items:baseline;gap:11px;margin:0 0 6px}
.sec-n{
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--green);opacity:.8;flex:0 0 auto;padding-top:2px;
}
.sec h2{margin:0;font-size:clamp(21px,5.4vw,25px);font-weight:900;line-height:1.35;letter-spacing:-.005em}
.lead{color:var(--ink2);margin:8px 0 20px;font-size:15.5px}

/* ---------- カード ---------- */
.card{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 17px 18px;margin:14px 0;position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}
.card h3{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:.005em}
.card p:last-child{margin-bottom:0}
.card p{margin:0 0 10px;font-size:15.5px}

.card.hi{border-color:rgba(74,222,91,.34);background:linear-gradient(180deg,#16241a,#111814)}
.card.warn{border-color:rgba(255,171,31,.34);background:linear-gradient(180deg,#241d10,#17130c)}
.card.stop{border-color:rgba(255,75,62,.34);background:linear-gradient(180deg,#251413,#170f0e)}

/* ---------- 3ステップ ---------- */
.steps{counter-reset:s;margin:16px 0 0;padding:0;list-style:none}
.steps li{
  counter-increment:s;position:relative;
  padding:16px 16px 16px 62px;margin-bottom:11px;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:16px;
}
.steps li::before{
  content:counter(s);
  position:absolute;left:15px;top:14px;
  width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:16px;font-weight:800;
  color:#08110a;background:var(--green);
  box-shadow:0 0 16px rgba(74,222,91,.4);
}
.steps b{font-weight:800}
.steps .sub{display:block;color:var(--ink2);font-size:14px;margin-top:4px;line-height:1.7}

/* ---------- LED 見本 ---------- */
.leds{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 0}
.ledcard{
  background:linear-gradient(180deg,#101315,#0c0f11);
  border:1px solid var(--line);border-radius:12px;
  padding:15px 12px 13px;text-align:center;
}
.chip-led{
  width:44px;height:36px;border-radius:6px;margin:0 auto 11px;
  background:#3b4247;border:1px solid rgba(255,255,255,.14);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:14px;font-weight:800;color:#0b0e10;
}
.chip-led.off{background:#41484d;color:#8b959b}
.chip-led.green{background:var(--green);box-shadow:0 0 18px rgba(74,222,91,.6);animation:flick 1.15s steps(1,end) infinite}
.chip-led.red{background:var(--red);box-shadow:0 0 18px rgba(255,75,62,.55);color:#2a0b08}
.chip-led.amber{background:var(--amber);box-shadow:0 0 18px rgba(255,171,31,.55);color:#2a1a03;animation:flick 1.15s steps(1,end) infinite}
@keyframes flick{
  0%,100%{opacity:1}8%{opacity:.32}14%{opacity:.95}23%{opacity:.5}31%{opacity:1}
  44%{opacity:.38}52%{opacity:.9}61%{opacity:.55}73%{opacity:1}81%{opacity:.42}92%{opacity:.88}
}
.ledcard b{display:block;font-size:14.5px;font-weight:800;margin-bottom:3px}
.ledcard span{display:block;font-size:13px;color:var(--ink2);line-height:1.6}
.ledcard.k-off b{color:var(--ink3)}
.ledcard.k-green b{color:var(--green)}
.ledcard.k-red b{color:var(--red)}
.ledcard.k-amber b{color:var(--amber)}

/* ---------- チャンネル一覧表 ---------- */
.chlist{margin:16px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.chrow{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 14px;border-top:1px solid var(--line);
  background:var(--panel);
}
.chrow:first-child{border-top:0}
.chrow .n{
  flex:0 0 62px;font-family:var(--mono);font-size:13.5px;font-weight:800;
  color:var(--green);padding-top:2px;letter-spacing:.02em;
}
.chrow .t{font-size:15px;font-weight:700;line-height:1.5}
.chrow .d{font-size:13.5px;color:var(--ink2);margin-top:2px;line-height:1.6}
.chrow.mute{opacity:.55}
.chrow.mute .n{color:var(--ink3)}

/* ---------- 拡大図（1枚の写真から切り出し） ---------- */
.zoom{
  position:relative;overflow:hidden;border-radius:10px;
  margin:16px auto 0;
  background:#0d1013;border:1px solid var(--line);
  width:min(100%,var(--maxw,420px));
  aspect-ratio:var(--zw) / var(--zh);
}
.zoom>img{
  position:absolute;max-width:none;
  width:calc(1200 / var(--zw) * 100%);
  left:calc(var(--zx) / var(--zw) * -100%);
  top:calc(var(--zy) / var(--zh) * -100%);
}
.pin{
  position:absolute;transform:translate(-50%,-50%);
  width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:12.5px;font-weight:800;
  color:#08110a;background:var(--green);
  box-shadow:0 0 0 2.5px rgba(10,12,13,.9),0 0 16px rgba(74,222,91,.75);
  z-index:2;
}
.pin.b{background:var(--amber);box-shadow:0 0 0 2.5px rgba(10,12,13,.9),0 0 16px rgba(255,171,31,.7)}
.pin.c{background:var(--blue);box-shadow:0 0 0 2.5px rgba(10,12,13,.9),0 0 16px rgba(90,184,255,.7)}
.pinlist{list-style:none;margin:13px 0 0;padding:0}
.pinlist li{
  display:flex;gap:11px;align-items:flex-start;
  padding:9px 0;border-top:1px solid var(--line);font-size:15px;
}
.pinlist li:first-child{border-top:0}
.pinlist .pn{
  flex:0 0 auto;min-width:23px;height:23px;padding:0 6px;border-radius:12px;margin-top:2px;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:800;line-height:1;
  color:#08110a;background:var(--green);
}
.pinlist .pn.b{background:var(--amber)}
.pinlist .pn.c{background:var(--blue)}
.pinlist b{font-weight:800}
.pinlist .d{display:block;color:var(--ink2);font-size:13.5px;line-height:1.65;margin-top:1px}

/* ---------- 信号の流れ ---------- */
.flow{margin:18px 0 0;padding:0;list-style:none}
.flow li{
  position:relative;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel);
  margin-bottom:26px;
}
.flow li:last-child{margin-bottom:0}
.flow li:not(:last-child)::after{
  content:"";position:absolute;left:50%;bottom:-22px;
  width:2px;height:18px;background:linear-gradient(180deg,var(--green),rgba(74,222,91,.15));
  transform:translateX(-50%);
}
.flow li:not(:last-child)::before{
  content:"";position:absolute;left:50%;bottom:-24px;z-index:1;
  border:5px solid transparent;border-top-color:var(--green);
  transform:translateX(-50%);
}
.flow .fh{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--green);margin-bottom:3px}
.flow .ft{font-size:15.5px;font-weight:700}
.flow .fd{font-size:13.5px;color:var(--ink2);margin-top:3px;line-height:1.65}
.flow li.you{border-color:rgba(74,222,91,.4);background:linear-gradient(180deg,#16241a,#111814)}
.flow li.you .fh{color:var(--green)}
.flow li.dim{opacity:.72}
.flow li.dim .fh{color:var(--ink3)}
.flow li.dim:not(:last-child)::after{background:linear-gradient(180deg,var(--ink3),rgba(111,122,128,.1))}
.flow li.dim:not(:last-child)::before{border-top-color:var(--ink3)}

/* ---------- 操作の書き方 ---------- */
.key{
  display:inline-block;font-family:var(--mono);font-size:13.5px;font-weight:800;
  padding:2px 8px;border-radius:5px;margin:0 1px;
  background:#333a3f;color:#eef2f4;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 1.5px 0 rgba(0,0,0,.55);white-space:nowrap;line-height:1.6;
}
.key.g{background:#1e3a24;border-color:rgba(74,222,91,.45);color:#b9f5c2}
.key.r{background:#3a1c19;border-color:rgba(255,75,62,.45);color:#ffc9c4}
.key.n{background:#2b3136;color:var(--green)}
.op{
  display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:14.5px;margin:10px 0;color:var(--ink2);
}
.op .arrow{color:var(--ink3);font-family:var(--mono)}

/* ---------- 折りたたみ ---------- */
details{
  border:1px solid var(--line);border-radius:12px;
  margin:10px 0;background:var(--panel);overflow:hidden;
}
details[open]{border-color:var(--line2);background:var(--panel2)}
summary{
  padding:14px 46px 14px 15px;cursor:pointer;position:relative;
  font-size:15.5px;font-weight:700;list-style:none;line-height:1.6;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:"";position:absolute;right:17px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--ink3);border-bottom:2px solid var(--ink3);
  transform:rotate(45deg);transition:.2s;
}
details[open] summary::after{transform:rotate(-135deg);margin-top:-2px;border-color:var(--green)}
.dbody{padding:0 15px 16px;font-size:15px;color:var(--ink2);line-height:1.8}
.dbody strong{color:var(--ink)}
.dbody ol,.dbody ul{margin:8px 0 0;padding-left:1.25em}
.dbody li{margin-bottom:8px}
.dbody li::marker{color:var(--green);font-weight:700}

/* 症状カード */
summary .sym{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--red);margin-bottom:3px;
}
details.ok summary .sym{color:var(--amber)}

/* ---------- 注意ボックス ---------- */
.note{
  display:flex;gap:11px;align-items:flex-start;
  padding:13px 15px;border-radius:12px;margin:13px 0;
  font-size:14.5px;line-height:1.75;
}
.note .ic{flex:0 0 auto;font-size:17px;line-height:1.5}
.note.g{background:rgba(74,222,91,.08);border:1px solid rgba(74,222,91,.28);color:#cdf3d3}
.note.a{background:rgba(255,171,31,.08);border:1px solid rgba(255,171,31,.28);color:#f7e2c0}
.note.r{background:rgba(255,75,62,.08);border:1px solid rgba(255,75,62,.28);color:#f8cfcb}
.note b{color:#fff}

/* ---------- 背面図 ---------- */
.rear{margin:16px 0 0;border:1px solid var(--line);border-radius:12px;background:#0b0e10;padding:12px 10px 10px}
.rear svg{width:100%;height:auto;display:block}
.rear-cap{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink3);
  text-align:center;margin-bottom:8px;
}

/* ---------- フッター ---------- */
.foot{
  border-top:1px solid var(--line);margin-top:20px;
  padding:26px 0 42px;color:var(--ink3);font-size:13px;line-height:1.8;
}
.foot .ft-t{font-family:var(--mono);letter-spacing:.1em;color:var(--ink2);margin-bottom:7px;font-size:12px}
.totop{
  display:inline-block;margin-top:16px;text-decoration:none;
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  padding:9px 15px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);
}

/* ---------- 印刷カードへの導線 ---------- */
.cardlink{
  display:flex;align-items:center;gap:12px;text-decoration:none;
  padding:15px 16px;border-radius:12px;margin:14px 0 0;
  border:1px dashed var(--line2);background:var(--panel);color:var(--ink);
}
.cardlink .ic{font-size:20px}
.cardlink b{display:block;font-size:15px}
.cardlink span{display:block;font-size:13px;color:var(--ink2)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media (min-width:700px){
  body{font-size:17px}
  .hero{padding:56px 0 34px}
  .leds{grid-template-columns:repeat(4,1fr)}
}

/* ---------- ページ間の導線 ---------- */
.top-link{
  margin-left:auto;flex:0 0 auto;text-decoration:none;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;font-weight:700;
  color:var(--ink2);border:1px solid var(--line2);padding:6px 11px;border-radius:999px;
  white-space:nowrap;
}
.top-link:hover{color:var(--ink);border-color:var(--green)}

.golink{
  display:flex;align-items:center;gap:13px;text-decoration:none;
  padding:16px 17px;border-radius:var(--radius);margin:14px 0 0;
  border:1px solid rgba(74,222,91,.3);
  background:linear-gradient(180deg,#16241a,#111814);color:var(--ink);
}
.golink .ic{font-size:19px;color:var(--green);flex:0 0 auto}
.golink b{display:block;font-size:15.5px}
.golink span{display:block;font-size:13.5px;color:var(--ink2);margin-top:2px;line-height:1.6}

.fine{font-size:13.5px;color:var(--ink3);margin:12px 0 0;line-height:1.7}
.fine a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(74,222,91,.4)}

/* ---------- パネルのホットスポット ---------- */
.device{position:relative}
.hs{
  position:absolute;appearance:none;-webkit-appearance:none;
  left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);
  width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);
  margin:0;padding:0;border:1.5px solid transparent;border-radius:7px;
  background:transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .16s,background .16s,box-shadow .16s;
  animation:hs-hint 2.6s ease-in-out 1.1s 2;
}
@keyframes hs-hint{
  0%,100%{border-color:transparent;background:transparent}
  35%,55%{border-color:rgba(74,222,91,.5);background:rgba(74,222,91,.09)}
}
.hs:hover,.hs:focus-visible{
  border-color:rgba(74,222,91,.75);background:rgba(74,222,91,.13);outline:none;
}
.hs.on{
  border-color:var(--green);background:rgba(74,222,91,.16);
  box-shadow:0 0 16px rgba(74,222,91,.5),inset 0 0 12px rgba(74,222,91,.25);
}
.device.touched .hs{animation:none}

.hsout{
  margin-top:13px;padding:15px 16px;border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
}
.hsout.hint{
  padding:16px 14px 19px;margin-bottom:8px;
  background:rgba(74,222,91,.05);
  border:1px dashed rgba(74,222,91,.4);
  animation:hint-pulse 2.4s ease-in-out infinite;
}
@keyframes hint-pulse{
  0%,100%{border-color:rgba(74,222,91,.26);background:rgba(74,222,91,.035);
          box-shadow:0 0 0 rgba(74,222,91,0)}
  50%    {border-color:rgba(74,222,91,.78);background:rgba(74,222,91,.11);
          box-shadow:0 0 18px rgba(74,222,91,.13)}
}
.hs-hint{text-align:center;line-height:1.5}
.hs-hint .ar{
  display:block;color:var(--green);font-size:15px;line-height:1;margin-bottom:7px;
  animation:hs-bob 1.5s ease-in-out infinite;
}
@keyframes hs-bob{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}
.hs-hint b{display:block;font-size:16px;font-weight:800;color:#d6f2dc;margin-bottom:4px}
.hs-hint .sm{display:block;font-size:13px;color:var(--ink3)}
.hsout .hs-l{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--green);
  margin-bottom:5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.hsout .star{
  background:var(--green);color:#08110a;border-radius:4px;padding:1.5px 6px;
  font-size:10px;font-weight:800;letter-spacing:.06em;
}
.hsout .hs-t{font-size:17px;font-weight:800;line-height:1.4}
.hsout .hs-d{font-size:14.5px;color:var(--ink2);margin-top:6px;line-height:1.7}
.hsout .hs-d a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(74,222,91,.4)}
.hsout .hs-d b{color:var(--ink)}

/* ---------- システム構成図 ---------- */
.diagram{
  display:block;position:relative;margin:16px 0 0;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:#0b0e10;
}
.diagram img{width:100%;height:auto;display:block}
.diagram-hint{
  position:absolute;right:9px;bottom:9px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;font-weight:700;
  color:var(--ink2);background:rgba(10,12,13,.86);
  border:1px solid var(--line2);border-radius:999px;padding:5px 11px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.diagram:hover .diagram-hint{color:var(--ink);border-color:var(--green)}

/* ---------- ライブシステムへの接続 ---------- */
.wifi{display:block;margin:9px 0 4px}
.wifi>span{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "label btn"
    "value btn";
  gap:2px 10px;align-items:center;
  padding:9px 8px 9px 12px;border-radius:9px;margin-bottom:6px;
  background:#0b0e10;border:1px solid var(--line2);
}
.wifi i{
  grid-area:label;
  font-style:normal;font-size:10.5px;color:var(--ink3);
  font-family:var(--mono);letter-spacing:.08em;
}
.wifi b{
  grid-area:value;min-width:0;
  font-family:var(--mono);font-size:16px;font-weight:800;
  letter-spacing:.01em;word-break:break-all;color:var(--ink);line-height:1.35;
}

/* コピーボタン */
.copy{
  grid-area:btn;align-self:center;
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--line2);border-radius:7px;
  background:#1b1f23;color:var(--ink2);
  font-family:var(--mono);font-size:11px;font-weight:800;letter-spacing:.06em;
  padding:0 11px;min-height:34px;cursor:pointer;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,border-color .15s,color .15s;
}
.copy:hover{border-color:rgba(74,222,91,.6);color:var(--ink)}
.copy:active{transform:scale(.96)}
.copy.done{background:var(--green);border-color:var(--green);color:#08110a}
.copy.fail{background:#3a1c19;border-color:rgba(255,75,62,.5);color:#ffc9c4}
.addr{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:9px 0 5px;padding:13px 10px;border-radius:9px;text-decoration:none;
  background:#0b0e10;border:1px solid rgba(74,222,91,.38);
  font-family:var(--mono);font-size:21px;font-weight:800;color:var(--green);
  letter-spacing:.01em;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s,border-color .15s;
}
.addr::after{content:"↗";font-size:15px;opacity:.75}
.addr:hover,.addr:active{background:#0e1a11;border-color:var(--green)}
.shot{
  position:relative;width:min(100%,232px);margin:16px auto 0;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0b0e10;
}
.shot img{width:100%;height:auto;display:block}
.shot-mark{
  position:absolute;transform:translate(-50%,-50%);
  width:42px;height:42px;border-radius:50%;
  border:2.5px solid var(--green);
  box-shadow:0 0 0 3px rgba(10,12,13,.75),0 0 18px rgba(74,222,91,.7);
  animation:pulse 1.8s ease-in-out infinite;
}
.shot-cap{
  font-family:var(--mono);font-size:11.5px;color:var(--ink3);
  text-align:center;margin-top:9px;letter-spacing:.04em;
}

/* ---------- DAW でいうと（作曲する人向けの読み替え） ---------- */
.flow .daw{
  display:inline-block;margin-top:7px;
  font-size:12.5px;line-height:1.55;
  padding:5px 11px;border-radius:8px;
  color:#a8d5f7;
  background:rgba(90,184,255,.09);
  border:1px solid rgba(90,184,255,.26);
}
.flow .daw::before{
  content:"DAW でいうと";
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;
  color:var(--blue);opacity:.8;margin-right:8px;
}
.flow .daw b{color:#d6ecff;font-weight:800}

/* ---------- オフライン用PDF ---------- */
.pdfs{
  margin:14px 0 0;padding:15px 16px 14px;
  border:1px solid var(--line);border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
}
.pdfs-h{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--green);
  margin-bottom:6px;font-weight:700;
}
.pdfs-d{font-size:13.5px;color:var(--ink2);margin:0 0 12px;line-height:1.65}
.pdfs a{
  display:flex;align-items:center;gap:10px;
  padding:11px 13px;border-radius:10px;margin-bottom:7px;
  border:1px solid var(--line2);background:#0d1013;
  text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:700;
  transition:border-color .15s,background .15s;
}
.pdfs a:last-child{margin-bottom:0}
.pdfs a::before{
  content:"PDF";flex:0 0 auto;
  font-family:var(--mono);font-size:10px;font-weight:800;letter-spacing:.04em;
  color:#08110a;background:var(--green);border-radius:4px;padding:2.5px 6px;
}
.pdfs a span{
  margin-left:auto;font-family:var(--mono);font-size:11px;font-weight:400;
  color:var(--ink3);white-space:nowrap;
}
.pdfs a:hover{border-color:var(--green);background:#101a12}