:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}[hidden]{display:none!important}img{max-width:100%}
/* Layout: 画面固定。左1/3に常設のもくじ、右2/3に取説のページを1枚ずつ置き、右から左へめくって送る。モノクロ（猫の柄だけグレー）。 */
:root{
  --desk:#e3e3df;   /* 机・余白 */
  --paper:#fbfbf8;  /* 紙 */
  --ink:#151514;    /* 墨 */
  --mute:#5d5d59;   /* 補足文字 */
  --tint:#ececE7;   /* 網かけ */
  --fur:#b9b9b3;    /* ハチワレのグレー */
  --rule:#151514;
  --f-logo:"Dela Gothic One","BIZ UDPGothic","Hiragino Kaku Gothic ProN",sans-serif;
  --f-body:"BIZ UDPGothic","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --desk:#0d0d0c;--paper:#1b1b19;--ink:#e9e8e3;--mute:#a3a29c;--tint:#2a2a27;--fur:#5c5c57;--rule:#e9e8e3;color-scheme:dark}}
:root[data-theme="dark"]{--desk:#0d0d0c;--paper:#1b1b19;--ink:#e9e8e3;--mute:#a3a29c;--tint:#2a2a27;--fur:#5c5c57;--rule:#e9e8e3;color-scheme:dark}

html{height:100%;box-sizing:border-box;font-size:clamp(12px,calc(1.05vh + 5px),15px)}
*,*::before,*::after{box-sizing:inherit}
body{height:100%;margin:0;overflow:hidden;background:var(--desk);color:var(--ink);font-family:var(--f-body);font-size:1rem;line-height:1.7}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.app{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---- もくじ ---- */
.toc-pane{min-height:0;overflow:auto;padding-block:20px;padding-right:22px;display:flex;flex-direction:column;gap:12px;border-right:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
/* 銘板ロゴ（表紙・もくじ共通。サイズ違いで使う） */
.np{border:2px solid var(--rule);background:var(--paper);padding:.8em 1em .6em;margin:0;font-weight:400}
.np-top{display:flex;justify-content:space-between;gap:12px;font-size:.72rem;font-weight:700;letter-spacing:.16em}
.np-mark{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .2em;margin:.55em 0 .7em;font-family:var(--f-logo);font-weight:400;line-height:1.15;letter-spacing:-.02em}
.np-neko{font-size:var(--np-neko);white-space:nowrap}
.np-manual{font-size:var(--np-manual);white-space:nowrap}
.np-bottom{border-top:1px solid var(--rule);padding-top:.45em;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;font-size:.72rem}
.np-age{display:block;font-size:.66rem;color:var(--mute)}
.np-model{font-family:var(--f-mono);font-weight:500;font-size:var(--np-model);letter-spacing:.05em;white-space:nowrap;text-align:right;line-height:1.2}
.np-model small{display:block;font-family:var(--f-body);font-size:.62rem;font-weight:400;letter-spacing:.08em;color:var(--mute);margin-bottom:2px}
a.np{display:block;text-decoration:none;color:inherit}
a.np:hover{background:var(--tint)}
.np--menu{--np-neko:2rem;--np-manual:1.2rem;--np-model:.92rem;padding:.65em .75em .5em}
.np--menu .np-top,.np--menu .np-bottom{font-size:.66rem;letter-spacing:.08em}
.np--cover{--np-neko:clamp(2.5rem,7.3cqi,4.4rem);--np-manual:clamp(1.5rem,4.2cqi,2.5rem);--np-model:clamp(1.05rem,2.3cqi,1.3rem);flex:none;padding:.9em 1.25em .7em}
.np--cover .np-mark{gap:0 .3em;margin:.7em 0 .9em}
.toc-h{font-size:.75rem;letter-spacing:.2em;font-weight:700;border-bottom:2px solid var(--rule);padding-bottom:4px}
.toc{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.toc .ch{font-size:.84rem;line-height:1.5;font-weight:700;display:flex;gap:8px;align-items:baseline}
.toc .ch .no{font-family:var(--f-mono);font-size:.78rem;font-weight:500;min-width:1.6em}
.toc ul{list-style:none;margin:0;padding:0 0 0 1.9em;display:grid}
.toc a{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:baseline;text-decoration:none;font-size:.8rem;line-height:1.45;padding:1px 6px;margin-left:-6px;border-bottom:1px dotted color-mix(in srgb,var(--ink) 35%,transparent)}
.toc a .pg{font-family:var(--f-mono);font-size:.76rem}
.toc a:hover{background:var(--tint)}
.toc a[aria-current="page"]{background:var(--ink);color:var(--paper);border-bottom-color:transparent}
.toc .solo > a{font-weight:700;font-size:.84rem;margin-left:-6px;grid-template-columns:auto 1fr auto}
.toc .solo > a .pg{font-weight:400;font-size:.76rem}
.toc .solo > a .no{font-family:var(--f-mono);font-size:.78rem;font-weight:500;min-width:1.6em}

/* ---- ページ置き場 ---- */
.stage-pane{min-width:0;min-height:0;display:flex;flex-direction:column;padding-block:20px 12px;padding-left:22px}
.stage{flex:1;min-height:0;position:relative;perspective:2400px}
.page{position:absolute;inset:0;margin:0 auto;max-width:900px;background:var(--paper);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent),0 10px 30px -18px rgba(0,0,0,.45);
  padding:clamp(14px,2.4vh,26px) clamp(16px,3.2vw,40px) clamp(10px,1.6vh,16px);
  display:flex;flex-direction:column;gap:clamp(8px,1.5vh,16px);
  transform-origin:left center;backface-visibility:hidden;visibility:hidden;container-type:inline-size;overflow:hidden}
.page.is-current,.page.is-moving{visibility:visible}
.page.is-current{z-index:2}
.page.is-under{visibility:visible;z-index:1}
.page.is-moving{z-index:3}
.page .shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(270deg,rgba(0,0,0,.18),rgba(0,0,0,0) 70%);opacity:0}

.run{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--rule);padding-bottom:4px;font-size:.75rem;letter-spacing:.08em;flex:none}
.run span{font-family:var(--f-mono);font-size:.7rem;color:var(--mute)}
.pg-title{font-size:1.5rem;line-height:1.35;margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;text-wrap:balance;flex:none}
.pg-title .tag{font-size:.75rem;border:1.5px solid var(--rule);padding:0 8px;letter-spacing:.1em;white-space:nowrap}
.pg-title .sub{font-size:.9rem;font-weight:400;color:var(--mute)}
.page h2{font-size:1rem;margin:0;display:flex;align-items:center;gap:8px}
.page h2::before{content:"";width:9px;height:9px;background:var(--ink);flex:none}
p{margin:0;max-width:65ch}
.lead{color:var(--mute);font-size:.9rem}
.note{font-size:.8rem;color:var(--mute)}
.mono{font-family:var(--f-mono)}
.folio{flex:none;text-align:center;font-family:var(--f-mono);font-size:.75rem;color:var(--mute)}
ul.plain{margin:0;padding-left:1.2em}

.pg-body{flex:1;min-height:0;display:grid;gap:clamp(12px,2vw,24px)}
.pg-body.split{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.pg-body.split.wide-fig{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.txt{min-height:0;min-width:0;overflow:auto;display:flex;flex-direction:column;gap:clamp(8px,1.4vh,14px)}
.fig{position:relative;min-height:0;min-width:0;margin:0}
.fig canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.fig figcaption{position:absolute;left:0;right:0;bottom:0;text-align:center;font-family:var(--f-mono);font-size:.68rem;color:var(--mute)}
@container (max-width:560px){
  .pg-body.split,.pg-body.split.wide-fig{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) minmax(96px,.36fr)}
}

/* 記号 */
.sym{width:1.6rem;height:1.6rem;flex:none}
.legend{display:grid;gap:10px}
.legend div{display:flex;gap:12px;align-items:center;font-size:.9rem}
.sigbar{display:flex;align-items:center;gap:10px;padding:4px 12px;font-weight:700;font-size:.95rem;letter-spacing:.15em}
.sigbar.warn{background:var(--ink);color:var(--paper)}
.sigbar.caut{border:2px solid var(--rule)}
.sigbar .sym{width:1.3rem;height:1.3rem}
.legend .sigbar{min-width:6.5em}
.safety{border:2px solid var(--rule)}
.item{display:grid;grid-template-columns:2.2rem 1fr;gap:10px;padding:9px 12px;border-top:1px solid var(--rule)}
.item b{display:block;font-size:.95rem}
.item p{font-size:.86rem}

/* 表 */
.tw{overflow-x:auto;min-width:0}
table{border-collapse:collapse;width:100%;font-size:.86rem;line-height:1.55}
th,td{border:1px solid var(--rule);padding:6px 9px;text-align:left;vertical-align:top}
thead th{background:var(--tint);white-space:nowrap}
td.c{text-align:center;font-weight:700;font-size:1rem;white-space:nowrap}
td.urgent{font-weight:700;white-space:nowrap}
.spec th{width:38%;background:var(--tint)}

/* 手順 */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.steps li{border:1.5px solid var(--rule);padding:8px 12px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline}
.steps .sn{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;grid-row:span 2}
.steps b{font-size:.95rem}
.steps p{font-size:.85rem;grid-column:2}

/* リスト箱 */
.box{border:1.5px solid var(--rule);display:grid;align-content:start}
.box > header{padding:5px 12px;font-weight:700;display:flex;align-items:center;gap:8px;border-bottom:1.5px solid var(--rule)}
.box > header.inv{background:var(--ink);color:var(--paper)}
.box > header .sym{width:1.2rem;height:1.2rem}
.box ul{list-style:none;margin:0;padding:0}
.box li{padding:6px 12px;border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent);font-size:.88rem;display:grid;gap:0}
.box li:first-child{border-top:0}
.box li small{color:var(--mute);font-size:.78rem;line-height:1.5}
.callout{border-left:4px solid var(--rule);padding:6px 12px;font-size:.86rem;background:var(--tint)}

/* 表紙 */
.cover .fig{flex:1;min-height:0}
.cover-box{border:1.5px solid var(--rule);padding:10px 16px;display:grid;gap:6px;flex:none;font-size:.88rem}
.must{display:flex;align-items:center;gap:10px;font-weight:700}
.cover-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.75rem;border-top:1px solid var(--rule);padding-top:6px;flex:none}

/* 各部 */
.parts-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.88rem}
.parts-list li{display:flex;gap:8px}
.num{font-family:var(--f-mono);display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border:1.5px solid var(--rule);border-radius:50%;font-size:.7rem;flex:none;margin-top:.15rem}

/* 表示 */
.sigs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:10px;min-height:0}
.sig{border:1.5px solid var(--rule);display:flex;flex-direction:column;min-height:0}
.sig .fig{flex:1}
.sig .lamp{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:3px 10px;font-size:.8rem;border-top:1px solid var(--rule);background:var(--tint)}
.sig .lamp span{font-family:var(--f-mono);font-size:.66rem}
.sig p{padding:4px 10px 6px;font-size:.8rem;line-height:1.5}
@container (max-width:560px){.sigs{grid-template-columns:1fr 1fr}.sig p{display:none}}

.opt{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.opt div{border:1.5px dashed var(--rule);padding:8px 10px;display:grid;font-size:.84rem}
.opt b{font-size:.92rem}

/* 出典 */
.src-cols{columns:2 300px;column-gap:28px}
.src-g{break-inside:avoid-column;margin:0 0 .8em}
.src-g h2{font-size:.84rem;margin-bottom:.3em}
.src-g ul{margin:0;padding-left:1.1em;font-size:.72rem;line-height:1.5;color:var(--mute);display:grid;gap:3px}
.page a[data-page]{text-underline-offset:2px}
.src-g a{color:var(--ink);text-underline-offset:2px}
/* おわりに */
.closing{display:grid;gap:.6em;font-size:.95rem;line-height:1.85}
.closing .thanks{font-weight:700}
.sources{display:grid;gap:4px;border-top:1px solid var(--rule);padding-top:.7em}
.sources ul{margin:0;padding-left:1.1em;font-size:.74rem;line-height:1.55;color:var(--mute);display:grid;gap:2px}
.sources a{color:var(--ink);text-underline-offset:2px}
.colophon{width:auto;min-width:min(100%,280px);font-size:.82rem;margin-top:auto}
.colophon th{background:var(--tint);width:6em;white-space:nowrap}

/* ---- めくり操作 ---- */
.nav{flex:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:10px;max-width:900px;width:100%;margin:0 auto}
.nav button{background:var(--paper);border:1.5px solid var(--rule);padding:3px 14px;font-size:.84rem;font-weight:700;cursor:pointer;letter-spacing:.06em}
.nav button:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.nav button:disabled{opacity:.35;cursor:default}
.nav .count{font-family:var(--f-mono);font-size:.84rem;font-variant-numeric:tabular-nums}
.nav .toc-btn{display:none}
.nav .count.is-cover{font-family:var(--f-body);letter-spacing:.08em}

@media (max-width:820px){
  .app{grid-template-columns:1fr}
  .stage-pane{padding-left:0;padding-block:12px 10px}
  .toc-pane{position:fixed;z-index:20;inset:0 auto 0 0;width:min(86vw,360px);background:var(--desk);padding:calc(16px + env(safe-area-inset-top,0px)) 18px calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    transform:translateX(-102%);transition:transform .25s ease;box-shadow:8px 0 24px -12px rgba(0,0,0,.4)}
  .toc-pane.open{transform:none}
  .nav .toc-btn{display:inline-block}
  .scrim{position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.3)}
}
@media (prefers-reduced-motion:reduce){.toc-pane{transition:none}}