/* ============================================================
   IGStudio ヘルプ ― rich dark-green docs UI
   ============================================================ */
:root{
  --bg:#070C0A; --bg-1:#0A110E; --bg-2:#0E1713; --card:#101A15;
  --line:#1C2A24; --line-2:#26392F;
  --neon:#2BE8A0; --neon-2:#38F5B0; --neon-d:#0E9F6E; --neon-dd:#0A7350;
  --gold:#E7C66B;
  --tx:#EAF6F0; --tx-2:#9DBBAE; --tx-3:#6E897D; --red:#FF6B6B;
  --maxw:1280px; --content:860px; --side:248px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --glow:0 0 50px rgba(43,232,160,.14);
  --radius:18px;
  --hd:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 18px);-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--tx);
  font-family:"Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","Noto Sans JP","Meiryo",sans-serif;
  line-height:1.85; letter-spacing:.01em; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
code{font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:.88em;
  background:rgba(43,232,160,.1);color:var(--neon-2);padding:.12em .45em;border-radius:6px}

/* ---------- aurora / particle background ---------- */
.bg-fx{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--bg)}
.bg-fx .aur{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
  animation:drift 22s var(--ease) infinite alternate}
.bg-fx .a1{width:50vw;height:50vw;top:-12vw;right:-8vw;background:radial-gradient(circle,rgba(16,159,110,.5),transparent 65%)}
.bg-fx .a2{width:46vw;height:46vw;bottom:-14vw;left:-10vw;background:radial-gradient(circle,rgba(43,232,160,.32),transparent 65%);animation-duration:28s}
.bg-fx .a3{width:34vw;height:34vw;top:34%;left:48%;background:radial-gradient(circle,rgba(231,198,107,.12),transparent 65%);animation-duration:32s}
@keyframes drift{to{transform:translate3d(4%,6%,0) scale(1.12)}}
.stars{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.55;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 28%,rgba(140,230,190,.8),transparent),
    radial-gradient(1.3px 1.3px at 68% 62%,rgba(140,230,190,.55),transparent),
    radial-gradient(1.2px 1.2px at 42% 82%,rgba(140,230,190,.5),transparent),
    radial-gradient(1.4px 1.4px at 88% 18%,rgba(140,230,190,.6),transparent),
    radial-gradient(1.1px 1.1px at 10% 70%,rgba(140,230,190,.5),transparent);
  background-size:560px 560px,680px 680px,500px 500px,760px 760px,620px 620px;
  animation:twinkle 7s ease-in-out infinite alternate}
@keyframes twinkle{to{opacity:.32}}

/* ---------- scroll progress ---------- */
#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--neon-2),var(--neon-d));
  box-shadow:0 0 12px rgba(43,232,160,.6);transition:width .08s linear}

/* ---------- header ---------- */
header.top{position:fixed;top:0;left:0;right:0;height:var(--hd);z-index:50;
  display:flex;align-items:center;gap:14px;padding:0 clamp(16px,3vw,30px);
  background:rgba(7,12,10,.6);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
header.top.scrolled{background:rgba(7,12,10,.86);border-bottom-color:var(--line)}
header.top .brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:16px}
header.top .brand img{width:34px;height:34px;border-radius:9px;box-shadow:0 0 0 1px var(--line)}
header.top .dlbadge{position:relative;display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;white-space:nowrap;
  color:var(--neon-2);font-size:12.5px;font-weight:800;letter-spacing:.01em;text-decoration:none;
  padding:7px 15px 7px 12px;border-radius:999px;overflow:hidden;
  background:linear-gradient(150deg,rgba(43,232,160,.15),rgba(43,232,160,.04));
  border:1px solid rgba(43,232,160,.42);box-shadow:inset 0 0 13px rgba(43,232,160,.1);
  transition:color .2s var(--ease),box-shadow .25s,border-color .25s}
header.top .dlbadge .i{width:15px;height:15px;stroke:currentColor;flex:none;position:relative;z-index:1}
header.top .dlbadge span{position:relative;z-index:1}
header.top .dlbadge::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;
  background:linear-gradient(140deg,var(--neon-2),var(--neon-d));transition:opacity .25s var(--ease)}
header.top .dlbadge:hover{color:#06120D;border-color:transparent;box-shadow:0 9px 24px rgba(43,232,160,.45)}
header.top .dlbadge:hover::before{opacity:1}
@media(max-width:680px){header.top .dlbadge{font-size:11px;padding:6px 12px 6px 9px}header.top .dlbadge .i{width:13px;height:13px}}
header.top .spacer{flex:1}
header.top .htabs{display:flex;gap:4px}
header.top .htabs a{font-size:13px;color:var(--tx-2);padding:7px 13px;border-radius:9px;
  transition:.2s;border:1px solid transparent}
header.top .htabs a:hover{color:var(--neon);background:var(--bg-2);border-color:var(--line)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:11px;
  background:var(--bg-2);cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:18px;height:2px;background:var(--tx);border-radius:2px;transition:.25s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- shell layout ---------- */
.shell{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,3vw,30px);
  display:grid;grid-template-columns:var(--side) minmax(0,1fr);gap:clamp(24px,4vw,56px);
  padding-top:calc(var(--hd) + 8px)}

/* ---------- sidebar TOC ---------- */
aside.toc{position:sticky;top:calc(var(--hd) + 22px);align-self:start;height:calc(100vh - var(--hd) - 44px);
  overflow-y:auto;padding:8px 0 40px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
aside.toc::-webkit-scrollbar{width:6px}
aside.toc::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}
aside.toc .toc-title{font-size:11px;letter-spacing:.16em;color:var(--tx-3);font-weight:700;
  padding:0 12px 12px;text-transform:uppercase}
aside.toc a{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--tx-2);
  padding:8px 12px;border-radius:10px;position:relative;transition:.2s;line-height:1.4}
aside.toc a .dot{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:0 0 auto;transition:.2s}
aside.toc a:hover{color:var(--tx);background:var(--bg-2)}
aside.toc a.active{color:var(--neon);background:linear-gradient(90deg,rgba(43,232,160,.1),transparent)}
aside.toc a.active .dot{background:var(--neon);box-shadow:0 0 8px var(--neon)}
aside.toc a.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;
  border-radius:3px;background:var(--neon);box-shadow:0 0 10px rgba(43,232,160,.7)}

/* ---------- main ---------- */
main{min-width:0;max-width:var(--content);padding-bottom:80px}

/* ---------- hero ---------- */
.hero{padding:clamp(34px,7vw,76px) 0 clamp(26px,4vw,44px);text-align:left;position:relative}
.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--neon);
  border:1px solid var(--neon-d);border-radius:999px;padding:6px 14px;margin-bottom:22px;
  background:rgba(43,232,160,.06);font-weight:700;letter-spacing:.05em}
.hero .eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--neon);
  box-shadow:0 0 0 0 rgba(43,232,160,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(43,232,160,.55)}70%{box-shadow:0 0 0 9px rgba(43,232,160,0)}100%{box-shadow:0 0 0 0 rgba(43,232,160,0)}}
.hero h1{font-size:clamp(30px,6vw,58px);font-weight:800;line-height:1.18;letter-spacing:.005em;
  background:linear-gradient(105deg,#FFFFFF 4%,var(--neon-2) 46%,var(--neon-d) 70%,var(--gold) 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 7s linear infinite}
@keyframes sheen{to{background-position:220% center}}
.hero p.lead{color:var(--tx-2);font-size:clamp(15px,2.3vw,19px);max-width:640px;margin:18px 0 28px}
.chips{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.chip{font-size:13px;border:1px solid var(--line);border-radius:999px;padding:7px 15px;color:var(--tx-2);
  background:var(--bg-2);transition:.2s}
.chip.ok{color:var(--neon);border-color:var(--neon-d);background:rgba(43,232,160,.06)}
.chip.price{font-size:15px;font-weight:800;color:var(--tx)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:15px;
  padding:13px 26px;border-radius:13px;cursor:pointer;white-space:nowrap;
  transition:transform .15s var(--ease),box-shadow .2s,filter .2s;border:1px solid transparent}
.btn .i{width:18px;height:18px;stroke:currentColor;flex:none}
.btn.primary:hover .i{transform:translateX(2px);transition:transform .2s var(--ease)}
.btn.primary{color:#06120D;background:linear-gradient(140deg,var(--neon-2),var(--neon-d));
  box-shadow:0 10px 30px rgba(43,232,160,.28)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(43,232,160,.4)}
.btn.ghost{color:var(--tx);border-color:var(--line-2);background:var(--bg-2)}
.btn.ghost:hover{border-color:var(--neon-d);color:var(--neon)}

/* ---------- intro feature grid ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin:8px 0 10px}
.feat{border:1px solid var(--line);border-radius:14px;padding:18px;background:linear-gradient(160deg,var(--bg-2),var(--bg-1));
  transition:transform .25s var(--ease),border-color .25s}
.feat:hover{transform:translateY(-4px);border-color:var(--neon-d)}
.feat .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:13px;
  background:linear-gradient(150deg,rgba(43,232,160,.16),rgba(43,232,160,.04));
  border:1px solid rgba(43,232,160,.2);box-shadow:inset 0 0 14px rgba(43,232,160,.08)}
.feat .ic .i{width:23px;height:23px;stroke:var(--neon-2)}
.feat:hover .ic{border-color:rgba(43,232,160,.45)}
/* ---- universal SVG icon base ---- */
.i{display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.feat h4{font-size:15px;margin-bottom:5px}
.feat p{font-size:13px;color:var(--tx-2);line-height:1.7}

/* ---------- section / steps ---------- */
section.block{padding:clamp(34px,5vw,52px) 0;border-top:1px solid var(--line);scroll-margin-top:calc(var(--hd) + 18px)}
section.block:first-of-type{border-top:none}
.sec-h{display:flex;gap:16px;align-items:center;margin-bottom:8px}
.sec-h .num{flex:0 0 auto;width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  font-weight:800;font-size:21px;color:#06120D;background:linear-gradient(140deg,var(--neon-2),var(--neon-d));
  box-shadow:0 8px 26px rgba(43,232,160,.26);position:relative;overflow:hidden}
.sec-h .num::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);
  transform:translateX(-120%)}
section.block.in .sec-h .num::after{animation:shine 1.1s var(--ease) .2s}
@keyframes shine{to{transform:translateX(120%)}}
.sec-h .tag{font-size:11.5px;color:var(--neon);font-weight:700;letter-spacing:.12em;display:block;margin-bottom:3px}
.sec-h h2{font-size:clamp(20px,3.6vw,30px);font-weight:800;line-height:1.3}
.lead-sm{color:var(--tx-2);font-size:15px;margin:2px 0 0 68px}

.bullets{list-style:none;margin:20px 0 26px;padding-left:68px;display:flex;flex-direction:column;gap:11px}
.bullets li{position:relative;padding-left:26px;color:var(--tx-2);font-size:15.5px}
.bullets li::before{content:"";position:absolute;left:3px;top:11px;width:9px;height:9px;border-radius:3px;
  background:var(--neon);box-shadow:0 0 10px rgba(43,232,160,.55)}
.bullets li b{color:var(--tx)}
/* ---- inline links (本文埋め込みリンク) ---- */
.ilink{color:var(--neon-2);font-weight:700;text-decoration:none;white-space:nowrap;
  border-bottom:1px solid rgba(43,232,160,.45);border-radius:4px;padding:0 3px;
  transition:color .16s var(--ease),background .16s var(--ease),border-color .16s}
.ilink:hover{color:#06120D;background:var(--neon-2);border-bottom-color:var(--neon-2)}
.ilink .ext{display:inline-block;width:.8em;height:.8em;margin-left:3px;vertical-align:-0.08em;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5'/%3E%3Cpath d='M19 5l-8.5 8.5'/%3E%3Cpath d='M11 5H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5'/%3E%3Cpath d='M19 5l-8.5 8.5'/%3E%3Cpath d='M11 5H7a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center/contain no-repeat}
.ans .ilink,.callout .ilink{white-space:normal}
.bullets li.warn::before{background:var(--red);box-shadow:0 0 10px rgba(255,107,107,.55)}
@media(max-width:680px){.lead-sm,.bullets{padding-left:0;margin-left:0}}

/* ---------- shots ---------- */
.shots{display:grid;gap:18px;padding-left:68px}
@media(max-width:680px){.shots{padding-left:0}}
.shots.g2{grid-template-columns:repeat(2,1fr)}
.shots.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.shots.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shots.g2,.shots.g3{grid-template-columns:1fr}}
.shot{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:var(--bg-2);box-shadow:0 18px 50px rgba(0,0,0,.45);transition:transform .28s var(--ease),border-color .28s,box-shadow .28s}
.shot:hover{transform:translateY(-5px);border-color:var(--neon-d);box-shadow:0 26px 60px rgba(0,0,0,.6),var(--glow)}
.shot .imw{position:relative;overflow:hidden;cursor:zoom-in}
.shot .imw img{width:100%;height:auto;transition:transform .4s var(--ease)}
.shot:hover .imw img{transform:scale(1.04)}
.shot .imw::after{content:"";position:absolute;top:10px;right:10px;width:31px;height:31px;border-radius:9px;
  background:rgba(7,12,10,.74) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338F5B0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5H5.5a1 1 0 0 0-1 1V9'/%3E%3Cpath d='M15 4.5h3.5a1 1 0 0 1 1 1V9'/%3E%3Cpath d='M19.5 15v3.5a1 1 0 0 1-1 1H15'/%3E%3Cpath d='M4.5 15v3.5a1 1 0 0 0 1 1H9'/%3E%3C/svg%3E") center/16px no-repeat;
  border:1px solid var(--line-2);opacity:0;transform:translateY(-4px);transition:.2s}
.shot:hover .imw::after{opacity:1;transform:translateY(0)}
.shot .cap{font-size:13px;color:var(--tx-2);padding:11px 16px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(43,232,160,.04),transparent)}

/* ---------- callout ---------- */
.callout{margin:24px 0 6px 68px;border:1px solid var(--neon-d);border-radius:15px;padding:17px 20px;
  background:linear-gradient(160deg,rgba(43,232,160,.07),rgba(43,232,160,.02));position:relative;overflow:hidden}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--neon)}
.callout.red{border-color:rgba(255,107,107,.45);background:linear-gradient(160deg,rgba(255,107,107,.08),transparent)}
.callout.red::before{background:var(--red)}
.callout h4{font-size:14px;color:var(--neon);margin-bottom:6px;letter-spacing:.03em;display:flex;align-items:center;gap:8px}
.callout h4 .i.hd{width:17px;height:17px;stroke:var(--neon);flex:none}
.callout.red h4 .i.hd{stroke:var(--red)}
.callout.red h4{color:var(--red)}
.callout p{font-size:14px;color:var(--tx-2)}
@media(max-width:680px){.callout{margin-left:0}}

/* ---------- FAQ accordion ---------- */
.faq{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.qa{border:1px solid var(--line);border-radius:14px;background:var(--bg-2);overflow:hidden;transition:border-color .25s}
.qa[open]{border-color:var(--neon-d)}
.qa summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:12px;
  font-weight:700;font-size:15px;color:var(--tx)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .q{flex:0 0 auto;width:24px;height:24px;border-radius:7px;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#06120D;background:var(--neon)}
.qa summary .chev{margin-left:auto;width:17px;height:17px;flex:none;background:var(--tx-3);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .25s var(--ease),background .25s}
.qa[open] summary .chev{transform:rotate(180deg);background:var(--neon)}
.qa .ans{padding:0 20px 18px 56px;color:var(--tx-2);font-size:14.5px;line-height:1.85}

/* proxy collapse: ボタン式の折りたたみ（Qバッジなし・本文は通常パディング） */
.proxy-fold summary{color:var(--neon)}
.proxy-fold summary::before{content:"";width:18px;height:18px;flex:none;background:var(--neon);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center/contain no-repeat}
.proxy-fold .proxy-fold-body{padding:4px 18px 20px}
.proxy-fold .proxy-fold-body .callout{margin-left:0}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}.reveal.d3{transition-delay:.18s}
.reveal.d4{transition-delay:.24s}.reveal.d5{transition-delay:.3s}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);margin-top:30px;padding:48px 0 60px;color:var(--tx-2)}
footer.site .fcta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  border:1px solid var(--line-2);border-radius:18px;padding:24px 26px;
  background:linear-gradient(140deg,var(--bg-2),var(--bg-1));margin-bottom:28px}
footer.site .fcta h3{font-size:clamp(18px,3vw,24px);color:var(--tx);font-weight:800}
footer.site .fcta p{font-size:14px;margin-top:4px}
footer.site .small{font-size:12.5px;color:var(--tx-3);text-align:center}

/* ---------- floating DL CTA (premium glass card) ---------- */
#totop{position:fixed;right:22px;bottom:22px;z-index:40;text-decoration:none;
  display:inline-flex;align-items:center;gap:13px;padding:11px 15px 11px 11px;border-radius:18px;color:var(--tx);
  background:linear-gradient(150deg,rgba(20,33,27,.94),rgba(9,15,12,.94));backdrop-filter:blur(12px) saturate(1.2);
  border:1px solid var(--line-2);
  box-shadow:0 20px 48px rgba(0,0,0,.55),0 0 0 1px rgba(43,232,160,.12),0 0 46px rgba(43,232,160,.14);
  opacity:0;transform:translateY(18px) scale(.96);pointer-events:none;transition:.34s var(--ease)}
#totop.show{opacity:1;transform:none;pointer-events:auto}
#totop:hover{transform:translateY(-3px);border-color:var(--neon-d);
  box-shadow:0 28px 64px rgba(0,0,0,.62),0 0 0 1px rgba(43,232,160,.32),0 0 70px rgba(43,232,160,.3)}
#totop .ic{position:relative;width:44px;height:44px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--neon-2),var(--neon-d));box-shadow:0 6px 18px rgba(43,232,160,.42)}
#totop .ic svg{width:23px;height:23px;fill:none;stroke:#06120D;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#totop .ic::after{content:"";position:absolute;inset:0;border-radius:14px;border:1.5px solid rgba(255,255,255,.28);pointer-events:none}
#totop .ic::before{content:"";position:absolute;inset:-5px;border-radius:18px;z-index:-1;
  background:radial-gradient(circle,rgba(43,232,160,.55),transparent 70%);animation:fabglow 2.8s ease-in-out infinite}
@keyframes fabglow{0%,100%{opacity:.3;transform:scale(.94)}50%{opacity:.65;transform:scale(1.1)}}
#totop .tx{display:flex;flex-direction:column;line-height:1.22}
#totop .tx b{font-size:14.5px;font-weight:800;letter-spacing:.01em;color:var(--tx)}
#totop .tx small{font-size:10.5px;font-weight:700;color:var(--neon-2);letter-spacing:.005em}
#totop .go{width:15px;height:15px;flex:none;fill:none;stroke:var(--tx-3);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:.2s var(--ease)}
#totop:hover .go{stroke:var(--neon-2);transform:translateX(2px)}
@media(max-width:560px){
  #totop{right:12px;bottom:12px;gap:10px;padding:10px 13px 10px 10px}
  #totop .ic{width:40px;height:40px}#totop .ic svg{width:21px;height:21px}
  #totop .tx b{font-size:13.5px}#totop .tx small{font-size:10px}
}
@media(prefers-reduced-motion:reduce){#totop .ic::before{animation:none}}

/* ---------- lightbox ---------- */
#lb{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  background:rgba(3,7,5,.93);backdrop-filter:blur(8px);padding:clamp(16px,4vw,40px);cursor:zoom-out}
#lb.on{display:flex;animation:lbfade .2s var(--ease)}
@keyframes lbfade{from{opacity:0}to{opacity:1}}
#lb img{max-width:96vw;max-height:90vh;border-radius:14px;border:1px solid var(--neon-d);
  box-shadow:0 0 0 1px rgba(43,232,160,.2),0 30px 90px rgba(0,0,0,.75);object-fit:contain;
  animation:lbpop .26s var(--ease)}
@keyframes lbpop{from{transform:scale(.94);opacity:.6}to{transform:none;opacity:1}}
#lb .x{position:absolute;top:18px;right:22px;width:46px;height:46px;border-radius:12px;font-size:26px;
  display:grid;place-items:center;cursor:pointer;color:var(--tx);background:rgba(16,26,21,.85);
  border:1px solid var(--line-2)}
#lb .x:hover{color:var(--neon);border-color:var(--neon-d)}
#lb .cap2{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:var(--tx-2);
  font-size:14px;padding:0 20px}

/* ---------- mobile ---------- */
@media(max-width:1024px){
  :root{--content:100%}
  .shell{grid-template-columns:1fr}
  aside.toc{position:fixed;top:0;left:0;bottom:0;width:min(82vw,320px);height:100vh;z-index:55;
    background:var(--bg-1);border-right:1px solid var(--line);padding:calc(var(--hd) + 14px) 14px 30px;
    transform:translateX(-105%);transition:transform .32s var(--ease);box-shadow:30px 0 60px rgba(0,0,0,.5)}
  aside.toc.open{transform:none}
  .scrim{position:fixed;inset:0;z-index:54;background:rgba(3,7,5,.6);backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:.3s}
  .scrim.on{opacity:1;pointer-events:auto}
  .burger{display:flex}
  header.top .htabs{display:none}
}
@media(min-width:1025px){.scrim{display:none}}
@media(max-width:680px){
  header.top .brand .name{display:none}
  .cta-row .btn{flex:1;justify-content:center}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;
    scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}