:root{
  --navy:#10243A; --ink:#0A1726; --blue:#1769AA; --cyan:#00B8D9; --text:#202B36; --muted:#526579;
  --line:#D9E1E8; --soft:#F3F6F9; --paper:#FFFFFF;
  --font:"Avenir Next","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pw:520px; --ph:680px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 700px at 50% 35%,#16324F 0%,#0A1726 70%);color:#E8EEF4;font-family:var(--font);overflow:hidden;-webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* ---------- toolbar ---------- */
.bar{position:fixed;left:0;right:0;top:0;height:58px;display:flex;align-items:center;gap:12px;padding:0 18px;background:rgba(5,12,21,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(58,90,122,.55);z-index:100;font-size:13px}
.brand-link{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0;color:#E8EEF4;text-decoration:none}
.brand-link .logo{flex:0 0 auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--blue));color:#fff;font-size:15px}
.brand-link .ttl{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-link .ttl small{display:block;font-weight:500;font-size:11px;color:#9FB1C3;letter-spacing:.02em}
.tools{display:flex;align-items:center;gap:8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;min-width:36px;padding:0 12px;font:inherit;font-weight:600;color:#DCE6EF;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:9px;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn i{font-size:14px;width:1em;text-align:center}
.btn:hover:not(:disabled){background:rgba(0,184,217,.14);border-color:rgba(0,184,217,.55);color:#fff}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.3;cursor:default}
.btn.icon{padding:0}
.seg{display:inline-flex}
.seg .btn:first-child{border-radius:9px 0 0 9px}
.seg .btn:last-child{border-radius:0 9px 9px 0;margin-left:-1px}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:#06202B}
.btn.primary:hover:not(:disabled){background:#2fd0ec;border-color:#2fd0ec;color:#06202B}
.selwrap{position:relative;display:inline-flex;align-items:center}
.selwrap>i{position:absolute;pointer-events:none;color:#9FB1C3;font-size:12px}
.selwrap .lead{left:12px}.selwrap .caret{right:12px;font-size:10px}
.selwrap select{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:36px;max-width:250px;padding:0 32px 0 34px;font:inherit;color:#DCE6EF;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:9px;cursor:pointer;text-overflow:ellipsis}
.selwrap select:hover{border-color:rgba(0,184,217,.55)}
.selwrap select option,.selwrap select optgroup{color:#10243A;background:#fff}

/* ---------- footer / slider ---------- */
.foot{position:fixed;left:0;right:0;bottom:0;height:64px;display:flex;align-items:center;gap:10px;padding:0 20px;justify-content:center;z-index:100;font-size:13px;color:#9FB1C3}
.foot .btn{height:30px;min-width:30px;border-radius:8px}
.foot .btn i{font-size:12px}
.lbl{min-width:17em;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rng{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:min(480px,40vw);height:22px;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:none;--p:0%}
.rng:focus{outline:none}
.rng::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(to right,var(--cyan) var(--p),rgba(255,255,255,.14) var(--p))}
.rng::-moz-range-track{height:6px;border-radius:99px;background:rgba(255,255,255,.14)}
.rng::-moz-range-progress{height:6px;border-radius:99px;background:var(--cyan)}
.rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border-radius:50%;background:#fff;border:3px solid var(--cyan);box-shadow:0 1px 6px rgba(0,0,0,.45);transition:transform .12s}
.rng::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid var(--cyan);box-shadow:0 1px 6px rgba(0,0,0,.45)}
.rng:hover::-webkit-slider-thumb,.rng:active::-webkit-slider-thumb{transform:scale(1.15)}
.rng:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(0,184,217,.35)}
.rng:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(0,184,217,.35)}
.keys{margin-left:6px}
.keys kbd{display:inline-grid;place-items:center;min-width:1.9em;height:1.9em;font-size:.8em;color:#DCE6EF;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-bottom-width:2px;border-radius:5px;margin-right:2px}
@media(max-width:1100px){.keys{display:none}}
@media(max-width:700px){.hide-s{display:none!important}.selwrap select{max-width:130px}.lbl{min-width:0;max-width:30vw}.brand-link .ttl small{display:none}.bar{gap:8px;padding:0 10px}}

/* ---------- stage / book ----------
   Only two static page slots plus, while turning, one .leaf. The book itself stays flat (no
   preserve-3d), so the turning leaf never depth-sorts against the slots (Safari ignores z-index there). */
.stage{position:fixed;left:0;right:0;top:58px;bottom:64px;display:flex;align-items:center;justify-content:center}
.book{position:relative;width:calc(var(--pw)*2);height:var(--ph);transition:transform .85s cubic-bezier(.5,.1,.2,1)}
body:not(.ready) .book{visibility:hidden}
.book::before{content:"";position:absolute;left:4%;right:4%;bottom:-18px;height:30px;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);filter:blur(6px);z-index:-1}
body.single .book{width:var(--pw)}
.slot{position:absolute;top:0;width:var(--pw);height:var(--ph)}
#slotL{left:0}#slotR{left:50%}
body.single #slotL{display:none}body.single #slotR{left:0}
.leaf{position:absolute;top:0;left:50%;z-index:10;width:var(--pw);height:var(--ph);transform-origin:left center;transform-style:preserve-3d;transform:perspective(2600px) rotateY(0deg);transition:transform .85s cubic-bezier(.5,.1,.2,1);will-change:transform;pointer-events:none}
.leaf.flipped{transform:perspective(2600px) rotateY(-180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.face.back{transform:rotateY(180deg)}
body.single .leaf{left:0;transform:none;transition:transform .5s ease,opacity .5s ease}
body.single .leaf.flipped{transform:translateX(-40%) rotate(-4deg);opacity:0}

/* ---------- a page ---------- */
.page{position:relative;width:var(--pw);height:var(--ph);background:var(--paper);color:var(--text);font-size:calc(var(--pw)/37);line-height:1.5;display:flex;flex-direction:column;overflow:hidden}
.measure-box{position:absolute;left:-99999px;top:0;visibility:hidden}
.page.measure{position:absolute;left:0;top:0;contain:strict}
.page.right{box-shadow:inset 14px 0 18px -14px rgba(0,0,0,.28);border-radius:0 6px 6px 0}
.page.left{box-shadow:inset -14px 0 18px -14px rgba(0,0,0,.28);border-radius:6px 0 0 6px}
.rh{flex:0 0 auto;height:2.4em;padding:0 2.2em;display:flex;align-items:flex-end;font-size:.78em;color:var(--muted);border-bottom:1px solid var(--line);margin:0 2.2em;padding:0 0 .5em}
.page.left .rh{justify-content:flex-start}.page.right .rh{justify-content:flex-end}
.pg-body{flex:1 1 auto;min-height:0;overflow:hidden;padding:1.1em 2.6em 0}
.pg-body.scroll,.overflow .pg-body{overflow-y:auto}
.pf{flex:0 0 auto;height:2.6em;display:flex;align-items:center;font-size:.8em;color:var(--muted);padding:0 3em}
.page.left .pf{justify-content:flex-start}.page.right .pf{justify-content:flex-end}
.pf b{color:var(--blue)}
.corner{position:absolute;bottom:0;width:2.6em;height:2.6em;cursor:pointer;z-index:5;border:0;background:none;padding:0}
.page.right .corner{right:0;background:linear-gradient(135deg,transparent 50%,rgba(16,36,58,.14) 50%,#fff 52%)}
.page.left .corner{left:0;background:linear-gradient(225deg,transparent 50%,rgba(16,36,58,.14) 50%,#fff 52%)}
.corner:hover{width:3.4em;height:3.4em}

/* ---------- content typography ---------- */
.pg-body a{color:var(--blue);text-decoration:none}.pg-body a:hover{text-decoration:underline}
.pg-body h1{font-size:2.5em;line-height:1.05;margin:.1em 0 .25em;letter-spacing:-.025em;color:var(--navy)}
.pg-body h2{font-size:1.32em;margin:1.1em 0 .45em;padding-left:.55em;border-left:.22em solid var(--cyan);color:var(--navy);line-height:1.2;letter-spacing:-.01em}
.pg-body h3{font-size:1.02em;margin:1.2em 0 .35em;color:var(--navy)}
.pg-body p{margin:.55em 0}
.pg-body .lede{font-size:1.18em;color:var(--muted);line-height:1.4;margin:.2em 0 .9em}
.pg-body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--soft);padding:.08em .32em;border-radius:3px}
.pg-body pre{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:.7em .9em;overflow-x:auto;font-size:.82em;line-height:1.5}
.pg-body pre code{background:none;padding:0}
.meta{display:flex;flex-wrap:wrap;gap:.45em;margin:0 0 1em}
.pill{font-size:.78em;padding:.2em .7em;border-radius:99px;background:#E4F1F9;color:var(--blue);border:1px solid #C5DDEC;white-space:nowrap}
.pill.plain{background:transparent;color:var(--muted);border-color:var(--line)}
.pill.plain{white-space:normal;max-width:100%}
.pill.preview{background:#FDF3E0;color:#8A5A00;border-color:#EBD3A6}
.ch-cat{font-size:.82em;color:var(--blue);font-weight:700;padding-bottom:.45em;margin-bottom:.9em;border-bottom:.28em solid var(--cyan);display:inline-block;padding-right:2em}
figure{margin:.8em 0;border:1px solid var(--line);border-radius:6px;padding:.5em;background:var(--soft)}
figure svg.ph{display:block;height:calc(var(--ph)*.27);width:auto;max-width:100%;margin:0 auto;border-radius:4px}
figure svg.ph .bg{fill:#f4f5f7}figure svg.ph .chrome{fill:#e2e5ea}figure svg.ph .stroke{stroke:#c3c9d2;stroke-width:1;fill:none}figure svg.ph .ln{fill:#d7dbe2}figure svg.ph .tile{fill:#dde1e8}figure svg.ph .btn{fill:#c8cede}figure svg.ph .dot{fill:#b7bfcd}figure svg.ph .cap{font:600 19px system-ui,-apple-system,Segoe UI,Roboto,sans-serif;fill:#5c6675}figure svg.ph .sub{font:400 13px ui-monospace,SFMono-Regular,Menlo,monospace;fill:#8a93a3}
figure img{display:block;width:auto;max-width:100%;height:auto;max-height:calc(var(--ph)*.27);margin:0 auto;border-radius:4px}
figcaption{font-size:.78em;color:var(--muted);margin-top:.5em;line-height:1.35}
.tablewrap{margin:.7em 0}
table{width:100%;border-collapse:collapse;font-size:.86em;border:1px solid var(--line)}
th,td{text-align:left;padding:.42em .6em;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--soft);font-size:.82em;color:var(--muted);font-weight:700}
td:first-child{font-weight:600;color:var(--navy);width:30%}
tr:last-child td{border-bottom:0}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:.8em 0}
ol.steps li{counter-increment:s;position:relative;padding:0 0 0 2.3em;margin:0 0 .7em}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:.08em;width:1.6em;height:1.6em;border-radius:50%;background:var(--blue);color:#fff;font-size:.82em;font-weight:700;display:grid;place-items:center}
ul.notes{list-style:none;padding:0;margin:.8em 0}
ul.notes li{background:#EAF6FB;border-left:.25em solid var(--cyan);padding:.55em .8em;margin:0 0 .55em;border-radius:0 5px 5px 0}
.callout{background:var(--soft);border-left:.25em solid var(--navy);border-radius:0 5px 5px 0;padding:.6em .9em;margin:.9em 0}
.callout p:first-child{margin-top:0}.callout p:last-child{margin-bottom:0}
.pg-body ul,.pg-body ol:not(.steps){padding-left:1.4em;margin:.5em 0}
.related{display:flex;flex-wrap:wrap;gap:.5em;margin:.7em 0}
.related a{border:1px solid var(--line);border-radius:6px;padding:.35em .7em;font-size:.9em;background:#fff}
.related a:hover{border-color:var(--cyan);text-decoration:none;background:#F2FBFD}
nav.toc{background:var(--soft);border:1px solid var(--line);border-radius:6px;padding:.7em 1em;margin:.9em 0;font-size:.86em}
nav.toc b{display:block;font-size:.85em;color:var(--muted);margin-bottom:.35em}
nav.toc ol{margin:0;padding-left:1.5em}nav.toc ul{list-style:none;padding-left:1em;margin:.1em 0 .3em}
nav.toc ul li::before{content:"\2013\00a0";color:var(--muted)}
.flash{animation:flash 1.6s ease-out 1}
@keyframes flash{0%{background:#FFF3B0}100%{background:transparent}}

/* ---------- special pages ---------- */
.page.cover,.page.cat,.page.back{background:linear-gradient(160deg,#10243A 0%,#0A1726 100%);color:#E8EEF4}
.page.cover .pg-body,.page.cat .pg-body,.page.back .pg-body{padding:0}
.cover-in{height:100%;display:flex;flex-direction:column;padding:3em 3em 2.6em;position:relative}
.cover .brand{font-weight:700;font-size:1.25em;letter-spacing:.02em;display:flex;align-items:center;gap:.5em}
.cover .brand svg{width:1.7em;height:1.7em}
.cover h1{color:#fff;font-size:3.6em;line-height:.98;margin:auto 0 .15em;letter-spacing:-.03em}
.cover h1 span{display:block;color:var(--cyan)}
.cover .sub{font-size:1.2em;color:#B7C6D4;max-width:20em}
.cover .wave{position:absolute;left:0;right:0;top:34%;opacity:.9}
.cover .draft{position:absolute;right:2em;top:2.2em;font-size:.78em;color:#FFC65C;border:1px dashed #FFC65C;border-radius:4px;padding:.15em .6em}
.cover .corner,.back .corner{display:none}
.cat-in{height:100%;padding:3.2em 3em 2em;display:flex;flex-direction:column}
.cat-in .kick{color:var(--cyan);font-size:.9em;font-weight:700}
.cat-in h2{all:unset;display:block;font-size:2.7em;line-height:1.05;letter-spacing:-.025em;color:#fff;font-weight:700;margin:.25em 0 .35em}
.cat-in p{color:#B7C6D4;font-size:1.1em;margin:0 0 1.6em;max-width:22em}
.cat-in ul{list-style:none;margin:auto 0 0;padding:0;border-top:1px solid #24476B}
.cat-in li a{display:flex;gap:.8em;padding:.6em 0;border-bottom:1px solid #24476B;color:#E8EEF4}
.cat-in li a:hover{color:var(--cyan);text-decoration:none}
.cat-in li a .t{flex:1}.cat-in li a .pn{color:#9FB1C3}
.page.cat .rh,.page.cat .pf,.page.cover .rh,.page.cover .pf,.page.back .rh,.page.back .pf{display:none}
.page.cat .corner{background:linear-gradient(135deg,transparent 50%,rgba(255,255,255,.18) 50%,#10243A 52%)}
.toc-h{font-size:2.4em;margin:.1em 0 .1em;letter-spacing:-.025em;color:var(--navy);line-height:1.05}
.toc-sub{color:var(--muted);margin:0 0 .8em}
.toc-cat{margin:1.1em 0 .2em;font-weight:700;color:var(--navy);display:flex;gap:.6em;font-size:1.02em}
.toc-cat a{color:var(--navy)!important}
.toc-cat .dots,.toc-list .dots{flex:1;border-bottom:1px dotted #9FB1C3;transform:translateY(-.4em);min-width:1em}
.toc-cat .pn{color:var(--blue)}
.toc-list{list-style:none;padding:0!important;margin:0 0 .3em}
.toc-list li a{display:flex;gap:.6em;padding:.18em 0 .18em 1em;color:var(--text)}
.toc-list li a:hover{color:var(--blue);text-decoration:none}
.toc-list .pn{color:var(--muted);font-variant-numeric:tabular-nums}
.how{margin:.8em 0 0;padding:0;list-style:none}
.how li{display:flex;gap:.8em;margin:0 0 .8em}
.how b{flex:0 0 7.4em;color:var(--navy)}
.back-in{height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:3em}
.back-in b{font-size:1.5em;color:#fff}.back-in p{color:#B7C6D4;margin:.4em 0}
.back-in a{color:var(--cyan)}

@media(prefers-reduced-motion:reduce){.book,.leaf{transition-duration:.01s!important}}