:root{
  --bg:#0a0a0f;
  --bg-soft:#0d0d14;
  --surface:#141420;
  --surface-2:#1a1a28;
  --border:#26262f;
  --border-soft:rgba(255,255,255,.07);
  --text:#eceef2;
  --text-dim:#9a9aac;
  --text-faint:#5c5c6e;
  --brand:#8b7cff;
  --brand-2:#6c5ce0;
  --brand-soft:rgba(139,124,255,.14);

  --c-photo:#ff6fa3;
  --c-short:#3fd7c4;
  --c-conv:#ffb454;
  --c-poll:#b18cff;
  --c-exp:#4ade80;
  --c-type:#5fa8ff;
  --c-ocr:#ff6b6b;

  --f-display:'Space Grotesk',sans-serif;
  --f-body:'Inter',sans-serif;
  --f-mono:'JetBrains Mono',monospace;

  --radius:16px;
  --radius-sm:10px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* reading preferences (controlled via JS) */
  --read-size:17px;
  --read-lh:1.75;
  --content-w:720px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--text);font-family:var(--f-body);line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
::selection{background:var(--brand);color:#fff;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
img{max-width:100%;display:block;}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(var(--border-soft) 1px, transparent 1px),linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, black 10%, transparent 70%);opacity:.6;}
.bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(600px 400px at 15% 8%, rgba(139,124,255,.16), transparent 60%),radial-gradient(500px 350px at 88% 18%, rgba(63,215,196,.09), transparent 60%);}

/* ---------- fixed UI ---------- */
.progress-bar{position:fixed;top:0;left:0;right:0;height:3px;background:var(--border-soft);z-index:200;}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--brand),var(--c-short));box-shadow:0 0 8px var(--brand);}

.save-indicator{
  position:fixed;bottom:24px;left:24px;z-index:90;
  display:flex;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:11.5px;color:var(--text-dim);
  background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:8px 14px 8px 10px;box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
}
.save-indicator .dot{width:7px;height:7px;border-radius:50%;background:var(--c-exp);box-shadow:0 0 6px var(--c-exp);animation:pulseDot 1.8s ease-in-out infinite;}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}

.scroll-top{
  position:fixed;bottom:24px;right:24px;z-index:90;width:46px;height:46px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),border-color .2s var(--ease);
}
.scroll-top.show{opacity:1;pointer-events:auto;transform:translateY(0);}
.scroll-top:hover{border-color:var(--brand);}

/* ---------- top nav ---------- */
.site-nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);background:rgba(10,10,15,.78);border-bottom:1px solid var(--border-soft);}
.site-nav .wrap{height:72px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.logo{font-family:var(--f-mono);font-weight:600;font-size:16px;display:flex;align-items:center;gap:10px;color:var(--text);}
.logo .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 12px var(--brand);}
.site-nav .back{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border:1px solid var(--border);
  padding:9px 14px;border-radius:10px;
  font-family:var(--f-mono);font-size:13px;color:var(--text-dim);
  transition:border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.site-nav .back:hover{color:var(--text);border-color:var(--brand);background:var(--surface-2);}
.read-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.rt-group{display:flex;align-items:center;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:3px;}
.rt-btn{
  font-family:var(--f-mono);font-size:12px;color:var(--text-dim);background:transparent;border:none;
  padding:5px 9px;border-radius:6px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease);
}
.rt-btn:hover{color:var(--text);}
.rt-btn.active{background:var(--brand-soft);color:var(--brand);}
.rt-label{font-family:var(--f-mono);font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;margin-right:2px;}

/* ---------- article header ---------- */
.article-header{position:relative;z-index:1;padding:56px 0 40px;}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--f-mono);font-size:12.5px;color:var(--text-faint);margin-bottom:22px;}
.breadcrumb a:hover{color:var(--text-dim);}
.breadcrumb .sep{opacity:.5;}
.breadcrumb .current{color:var(--text-dim);}

.chip-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:20px;}
.badge{font-family:var(--f-mono);font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:20px;}
.badge-new{background:color-mix(in srgb,var(--c-short) 18%, transparent);color:var(--c-short);border:1px solid color-mix(in srgb,var(--c-short) 40%, transparent);}
.badge-updated{background:color-mix(in srgb,var(--c-type) 18%, transparent);color:var(--c-type);border:1px solid color-mix(in srgb,var(--c-type) 40%, transparent);}
.badge-popular{background:color-mix(in srgb,var(--c-photo) 18%, transparent);color:var(--c-photo);border:1px solid color-mix(in srgb,var(--c-photo) 40%, transparent);}
.chip{font-family:var(--f-mono);font-size:12px;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);padding:5px 12px;border-radius:8px;}
.chip.chip-cat{color:var(--brand);border-color:color-mix(in srgb,var(--brand) 40%, var(--border));}

.article-header h1{font-family:var(--f-display);font-weight:700;font-size:clamp(30px,4.6vw,52px);line-height:1.1;letter-spacing:-.02em;max-width:840px;margin-bottom:18px;}
.lead{font-size:18px;color:var(--text-dim);max-width:680px;margin-bottom:28px;}

.meta-row{display:flex;flex-wrap:wrap;gap:22px;align-items:center;font-size:13.5px;color:var(--text-faint);margin-bottom:22px;font-family:var(--f-mono);}
.meta-row .item{display:flex;align-items:center;gap:7px;}
.meta-row svg{opacity:.7;}
.difficulty{display:flex;gap:4px;align-items:center;}
.difficulty .seg{width:14px;height:5px;border-radius:3px;background:var(--surface-2);}
.difficulty .seg.on{background:var(--c-conv);}
.level-badge{font-family:var(--f-mono);font-size:11px;color:var(--c-poll);background:color-mix(in srgb,var(--c-poll) 16%, transparent);padding:3px 9px;border-radius:6px;}

.stats-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-bottom:22px;}
.stat-chip{display:flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:13px;color:var(--text-dim);}
.stat-chip svg{opacity:.75;}
.stars{display:flex;gap:2px;}
.stars svg{width:15px;height:15px;}
.stars svg.on{fill:var(--c-conv);stroke:var(--c-conv);}
.stars svg.off{fill:none;stroke:var(--text-faint);}
.rating-score{font-family:var(--f-mono);font-size:13px;color:var(--text-dim);margin-left:4px;}

.tags-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;}
.tag{font-family:var(--f-mono);font-size:12px;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);padding:5px 11px;border-radius:16px;transition:border-color .2s var(--ease),color .2s var(--ease);}
.tag:hover{color:var(--text);border-color:var(--brand);}
.tag.hashtag{color:var(--brand);}

.share-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.tool-btn{
  display:flex;align-items:center;gap:7px;font-family:var(--f-mono);font-size:12.5px;color:var(--text-dim);
  background:var(--surface);border:1px solid var(--border);padding:8px 13px;border-radius:9px;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease);
}
.tool-btn:hover{border-color:var(--brand);color:var(--text);}
.tool-btn.copied{border-color:var(--c-exp);color:var(--c-exp);}
select.tool-select{
  font-family:var(--f-mono);font-size:12.5px;color:var(--text-dim);background:var(--surface);
  border:1px solid var(--border);padding:8px 10px;border-radius:9px;cursor:pointer;
}

/* ---------- cover image ---------- */
.cover-image{position:relative;z-index:1;margin-bottom:8px;}
.cover-image .frame{
  border-radius:var(--radius);overflow:hidden;position:relative;
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(139,124,255,.35), transparent 60%),
    radial-gradient(600px 300px at 90% 100%, rgba(63,215,196,.25), transparent 60%),
    linear-gradient(160deg,var(--surface),var(--bg-soft));
  border:1px solid var(--border);
}
.cover-image .frame:not(.has-image){
  height:420px;display:flex;align-items:flex-end;
}
.cover-image .frame::before{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(var(--border-soft) 1px, transparent 1px),linear-gradient(90deg, var(--border-soft) 1px, transparent 1px);
  background-size:40px 40px;opacity:.5;
}
.cover-image .frame.has-image::before{display:none;}
.cover-image .frame.has-image{background-image:none;}
.cover-image .frame.has-image img{
  display:block;width:100%;height:auto;
}
.cover-caption{
  position:absolute;left:0;right:0;bottom:0;z-index:1;width:100%;padding:20px 26px;
  background:linear-gradient(0deg, rgba(10,10,15,.75), transparent);
  font-family:var(--f-mono);font-size:12.5px;color:var(--text-dim);
}

/* ---------- layout: sidebar + body ---------- */
.article-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;position:relative;z-index:1;padding-top:52px;}
.toc-sidebar{position:relative;}
.toc-sticky{position:sticky;top:80px;display:flex;flex-direction:column;gap:26px;}
.toc-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:12px;}
#tocNav{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--border);}
#tocNav a{
  font-size:13.5px;color:var(--text-faint);padding:7px 0 7px 16px;border-left:2px solid transparent;margin-left:-1px;
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
#tocNav a:hover{color:var(--text-dim);}
#tocNav a.active{color:var(--brand);border-left-color:var(--brand);}

.qr-block{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px;}
.qr-block img{width:56px;height:56px;border-radius:6px;background:#fff;padding:4px;}
.qr-block span{font-family:var(--f-mono);font-size:11.5px;color:var(--text-dim);line-height:1.4;}

.meta-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:9px;}
.meta-panel .row{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:11.5px;}
.meta-panel .row span:first-child{color:var(--text-faint);}
.meta-panel .row span:last-child{color:var(--text-dim);text-align:right;}
.status-pill{font-size:10.5px;padding:2px 8px;border-radius:10px;font-weight:700;text-transform:uppercase;}
.status-actual{background:color-mix(in srgb,var(--c-exp) 18%, transparent);color:var(--c-exp);}
.status-draft{background:color-mix(in srgb,var(--c-conv) 18%, transparent);color:var(--c-conv);}
.status-archive{background:color-mix(in srgb,var(--text-faint) 22%, transparent);color:var(--text-dim);}

/* ---------- article body base typography ---------- */
.article-body{font-size:var(--read-size);line-height:var(--read-lh);max-width:var(--content-w);color:var(--text-dim);}
.article-body h2{
  font-family:var(--f-display);font-size:clamp(24px,3vw,32px);font-weight:700;color:var(--text);
  margin:64px 0 20px;letter-spacing:-.01em;scroll-margin-top:90px;
  display:flex;align-items:center;gap:14px;
}
.article-body h2:first-child{margin-top:0;}
.article-body h2 .idx{
  font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--group);
  background:color-mix(in srgb,var(--group) 16%, transparent);
  width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.article-body h3{font-family:var(--f-display);font-size:22px;font-weight:600;color:var(--text);margin:36px 0 14px;scroll-margin-top:90px;}
.article-body h4{font-family:var(--f-display);font-size:18.5px;font-weight:600;color:var(--text);margin:28px 0 12px;}
.article-body h5{font-family:var(--f-body);font-size:15.5px;font-weight:700;color:var(--text);margin:22px 0 10px;text-transform:uppercase;letter-spacing:.03em;}
.article-body h6{font-family:var(--f-mono);font-size:13px;font-weight:600;color:var(--text-dim);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.06em;}
.article-body p{margin-bottom:18px;}
.article-body .block-label{
  display:inline-block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);margin:0 0 10px;
}
.group-section{border-top:1px solid var(--border-soft);}
.group-section:first-of-type{border-top:none;}

/* text formatting inline */
.article-body b,.article-body strong{color:var(--text);font-weight:700;}
.fw-semibold{font-weight:600;color:var(--text);}
.article-body em{font-style:italic;}
.bi{font-style:italic;font-weight:700;color:var(--text);}
.article-body u{text-decoration:underline;text-decoration-color:var(--brand);text-underline-offset:3px;}
.article-body s{text-decoration:line-through;color:var(--text-faint);}
.article-body mark{background:color-mix(in srgb,var(--c-conv) 30%, transparent);color:var(--text);padding:0 3px;border-radius:3px;}
.hl-purple{background:color-mix(in srgb,var(--brand) 28%, transparent);color:var(--text);padding:0 3px;border-radius:3px;}
.text-sm{font-size:.82em;color:var(--text-faint);}
.text-lg{font-size:1.35em;color:var(--text);font-family:var(--f-display);}
.mono-text{font-family:var(--f-mono);font-size:.92em;color:var(--c-type);}
.article-body a.link{color:var(--brand);border-bottom:1px solid color-mix(in srgb,var(--brand) 40%, transparent);}
.article-body a.link:hover{border-color:var(--brand);}
.link-ext{display:inline-flex;align-items:center;gap:3px;}
.link-ext svg{width:11px;height:11px;}
.btn-inline{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--f-mono);font-size:13px;font-weight:600;
  color:#fff;background:var(--brand);padding:8px 16px;border-radius:9px;
}
.btn-inline:hover{background:var(--brand-2);}

/* lists */
.article-body ol.list-num{counter-reset:num;padding-left:0;margin-bottom:20px;}
.article-body ol.list-num li{counter-increment:num;position:relative;padding-left:34px;margin-bottom:10px;}
.article-body ol.list-num li::before{content:counter(num);position:absolute;left:0;top:1px;font-family:var(--f-mono);font-size:12px;color:var(--brand);background:var(--brand-soft);width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;}
.article-body ul.list-bullet{margin-bottom:20px;}
.article-body ul.list-bullet li{position:relative;padding-left:22px;margin-bottom:8px;}
.article-body ul.list-bullet li::before{content:'';position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--c-poll);}
.checklist{margin-bottom:20px;}
.checklist li{display:flex;align-items:flex-start;gap:10px;margin-bottom:9px;}
.checklist .box{width:18px;height:18px;border-radius:5px;border:1px solid var(--border);flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center;}
.checklist li.done .box{background:var(--c-exp);border-color:var(--c-exp);}
.checklist li.done .box svg{stroke:#062;}
.checklist li.done span{color:var(--text-faint);text-decoration:line-through;}
.multilevel > li{margin-bottom:8px;}
.multilevel ul{margin:8px 0 0 22px;}
.multilevel ul li{position:relative;padding-left:20px;margin-bottom:7px;font-size:.95em;}
.multilevel ul li::before{content:'–';position:absolute;left:0;color:var(--text-faint);}
dl.def-list{margin-bottom:20px;}
dl.def-list dt{font-family:var(--f-display);color:var(--text);font-weight:600;margin-top:14px;}
dl.def-list dd{margin-left:0;color:var(--text-dim);font-size:.95em;}

/* quotes / callouts */
blockquote.quote{
  border-left:3px solid var(--brand);padding:4px 0 4px 22px;margin:24px 0;color:var(--text-dim);font-style:italic;
}
blockquote.pull-quote{
  font-family:var(--f-display);font-size:26px;font-weight:600;color:var(--text);line-height:1.4;
  padding:30px 0;margin:32px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  text-align:left;
}
blockquote.pull-quote cite{display:block;margin-top:14px;font-family:var(--f-mono);font-size:13px;color:var(--text-faint);font-style:normal;}

.callout{--cc:var(--brand);display:flex;gap:14px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--cc);border-radius:10px;padding:16px 18px;margin:20px 0;}
.callout .ic{font-size:18px;line-height:1;flex-shrink:0;}
.callout .body b{display:block;color:var(--text);margin-bottom:3px;font-size:14px;}
.callout .body p{margin:0;font-size:14px;color:var(--text-dim);}
.callout-note{--cc:var(--text-faint);}
.callout-warning{--cc:var(--c-conv);}
.callout-tip{--cc:var(--c-short);}
.callout-important{--cc:var(--c-photo);}
.callout-info{--cc:var(--c-type);}
.callout-success{--cc:var(--c-exp);}
.callout-error{--cc:var(--c-ocr);}

.spoiler{margin:18px 0;}
.spoiler summary{cursor:pointer;font-family:var(--f-mono);font-size:13.5px;color:var(--brand);list-style:none;display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:10px;}
.spoiler summary::-webkit-details-marker{display:none;}
.spoiler summary::before{content:'▸';transition:transform .2s var(--ease);}
.spoiler[open] summary::before{transform:rotate(90deg);}
.spoiler .spoiler-body{padding:14px 16px;font-size:14.5px;color:var(--text-dim);border:1px solid var(--border);border-top:none;border-radius:0 0 10px 10px;margin-top:-1px;}

.accordion{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:20px 0;}
.accordion-item + .accordion-item{border-top:1px solid var(--border);}
.accordion-item summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:600;color:var(--text);display:flex;justify-content:space-between;align-items:center;font-size:14.5px;}
.accordion-item summary::-webkit-details-marker{display:none;}
.accordion-item summary::after{content:'+';font-family:var(--f-mono);color:var(--text-faint);font-size:18px;transition:transform .2s var(--ease);}
.accordion-item[open] summary::after{transform:rotate(45deg);}
.accordion-item .acc-body{padding:0 18px 16px;font-size:14px;color:var(--text-dim);}

hr.divider{border:none;border-top:1px solid var(--border);margin:36px 0;}
.divider-fancy{display:flex;align-items:center;gap:14px;margin:36px 0;color:var(--text-faint);font-family:var(--f-mono);font-size:11px;}
.divider-fancy::before,.divider-fancy::after{content:'';flex:1;height:1px;background:var(--border);}
.v-divider{display:inline-block;width:1px;height:16px;background:var(--border);margin:0 10px;vertical-align:middle;}

/* code + formula */
.code-block{background:var(--bg-soft);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:20px 0;}
.code-head{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:var(--surface);}
.code-dots{display:flex;gap:6px;}
.code-dots span{width:9px;height:9px;border-radius:50%;background:var(--border);}
.code-lang{font-family:var(--f-mono);font-size:11.5px;color:var(--text-faint);}
.code-copy{font-family:var(--f-mono);font-size:11.5px;color:var(--text-dim);background:transparent;border:1px solid var(--border);border-radius:6px;padding:4px 9px;cursor:pointer;}
.code-copy:hover{color:var(--text);border-color:var(--brand);}
.code-block pre{padding:18px 20px;overflow-x:auto;font-family:var(--f-mono);font-size:13px;line-height:1.7;color:var(--text-dim);}
.code-block .k{color:var(--c-poll);}
.code-block .s{color:var(--c-exp);}
.code-block .c{color:var(--text-faint);}
.code-block .f{color:var(--c-type);}
code.inline-code{font-family:var(--f-mono);font-size:.88em;background:var(--surface-2);border:1px solid var(--border);padding:2px 6px;border-radius:5px;color:var(--c-conv);}
.formula-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;margin:20px 0;overflow-x:auto;display:flex;justify-content:center;}

/* media */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0;}
.gallery-grid .tile{height:110px;border-radius:10px;position:relative;overflow:hidden;cursor:pointer;}
.gallery-grid .tile img{width:100%;height:100%;object-fit:cover;transition:transform .3s var(--ease);}
.gallery-grid .tile:hover img{transform:scale(1.06);}

figure.figure-caption{margin:24px 0;}
figure.figure-caption .ph{height:220px;border-radius:12px;}
figure.figure-caption figcaption{font-family:var(--f-mono);font-size:12.5px;color:var(--text-faint);margin-top:10px;text-align:center;}
figure.article-photo{margin:24px 0;}
figure.article-photo img{width:100%;aspect-ratio:16/8;object-fit:cover;border:1px solid var(--border);border-radius:12px;}
figure.article-photo figcaption{font-family:var(--f-mono);font-size:12.5px;color:var(--text-faint);margin-top:10px;text-align:center;}
figure.figure-desc .ph{height:240px;border-radius:12px;}
figure.figure-desc .desc-text{margin-top:12px;font-size:14.5px;color:var(--text-dim);}
figure.figure-desc .desc-text b{color:var(--text);}

.ph{background:linear-gradient(150deg, color-mix(in srgb,var(--group) 32%, var(--bg-soft)), var(--bg-soft) 75%);border:1px solid var(--border);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.ph .ph-icon{opacity:.5;}

.video-block{position:relative;height:280px;border-radius:12px;overflow:hidden;margin:20px 0;background:linear-gradient(150deg,#1a1420,#0d0d14);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;}
.video-block .play{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);cursor:pointer;}
.video-block .play:hover{background:var(--brand);border-color:var(--brand);}
.embed-frame{margin:20px 0;border-radius:12px;overflow:hidden;border:1px solid var(--border);aspect-ratio:16/9;}
.embed-frame iframe{width:100%;height:100%;border:0;}
.gif-block{position:relative;height:200px;border-radius:12px;overflow:hidden;margin:20px 0;border:1px solid var(--border);}
.gif-badge{position:absolute;top:10px;right:10px;font-family:var(--f-mono);font-size:10px;font-weight:700;background:rgba(10,10,15,.7);color:var(--text);padding:3px 8px;border-radius:6px;letter-spacing:.05em;}
.gif-block .pulse-shape{position:absolute;inset:0;background:conic-gradient(from 0deg,var(--c-photo),var(--c-poll),var(--c-type),var(--c-photo));opacity:.35;animation:spin 4s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.carousel{position:relative;height:260px;border-radius:12px;overflow:hidden;margin:20px 0;border:1px solid var(--border);}
.carousel-track{display:flex;height:100%;transition:transform .4s var(--ease);}
.carousel-slide{min-width:100%;height:100%;}
.carousel-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(10,10,15,.6);border:1px solid rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(4px);}
.carousel-nav.prev{left:12px;}
.carousel-nav.next{right:12px;}
.carousel-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:6px;}
.carousel-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;}
.carousel-dots span.active{background:#fff;}
.fullscreen-btn{position:absolute;top:12px;right:12px;background:rgba(10,10,15,.6);border:1px solid rgba(255,255,255,.15);color:#fff;padding:6px 10px;border-radius:7px;font-family:var(--f-mono);font-size:11px;cursor:pointer;backdrop-filter:blur(4px);}
.fs-overlay{position:fixed;inset:0;background:rgba(6,6,10,.94);z-index:300;display:none;align-items:center;justify-content:center;padding:40px;}
.fs-overlay.open{display:flex;}
.fs-overlay .ph{width:100%;max-width:900px;height:70vh;border-radius:14px;}
.fs-close{position:absolute;top:24px;right:28px;color:#fff;font-family:var(--f-mono);font-size:14px;cursor:pointer;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);padding:8px 14px;border-radius:8px;}

.parallax-section{position:relative;height:260px;border-radius:14px;overflow:hidden;margin:24px 0;border:1px solid var(--border);}
.parallax-bg{position:absolute;inset:-20% 0;background:radial-gradient(500px 300px at 30% 30%, rgba(139,124,255,.4), transparent 60%),radial-gradient(400px 260px at 80% 70%, rgba(63,215,196,.3), transparent 60%),var(--bg-soft);will-change:transform;}
.parallax-content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;}
.parallax-content b{font-family:var(--f-display);font-size:22px;color:var(--text);}
.parallax-content span{font-family:var(--f-mono);font-size:12.5px;color:var(--text-dim);}

/* data */
table.data-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;}
table.data-table th{text-align:left;font-family:var(--f-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-faint);padding:10px 14px;border-bottom:1px solid var(--border);}
table.data-table td{padding:12px 14px;border-bottom:1px solid var(--border-soft);color:var(--text-dim);}
table.data-table tr:hover td{background:var(--surface);}

table.compare-table{width:100%;border-collapse:separate;border-spacing:0;margin:20px 0;font-size:14px;border:1px solid var(--border);border-radius:12px;overflow:hidden;}
table.compare-table th{background:var(--surface-2);font-family:var(--f-display);font-weight:600;padding:14px;color:var(--text);}
table.compare-table th.highlight{background:var(--brand-soft);color:var(--brand);}
table.compare-table td{padding:12px 14px;border-top:1px solid var(--border);text-align:center;color:var(--text-dim);}
table.compare-table td:first-child{text-align:left;color:var(--text-faint);font-family:var(--f-mono);font-size:12.5px;}
table.compare-table td.highlight{background:var(--brand-soft);}
.yes{color:var(--c-exp);}
.no{color:var(--c-ocr);}

.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;margin:20px 0;}
.chart-card canvas{max-height:220px;}

.diagram-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;margin:20px 0;}
.diagram-box svg{width:100%;height:auto;}
.diagram-box .node{cursor:pointer;transition:transform .2s var(--ease);}
.diagram-box .node:hover{transform:translateY(-3px);}
.diagram-box .node rect{transition:fill .2s var(--ease);}
.diagram-box .node:hover rect{fill:var(--brand);}

.infographic{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0;}
.infographic .item{text-align:center;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 10px;}
.infographic .item b{display:block;font-family:var(--f-display);font-size:26px;color:var(--group);}
.infographic .item span{font-size:11.5px;color:var(--text-faint);font-family:var(--f-mono);}

.icon-row{display:flex;flex-wrap:wrap;gap:14px;margin:18px 0;}
.icon-row .ic-box{width:42px;height:42px;border-radius:10px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-dim);}
.emoji-row{display:flex;flex-wrap:wrap;gap:10px;font-size:24px;margin:18px 0;}

/* embeds */
.embed-slot{
  background:repeating-linear-gradient(135deg, var(--surface), var(--surface) 10px, var(--bg-soft) 10px, var(--bg-soft) 20px);
  border:1px dashed var(--border);border-radius:12px;padding:34px 20px;margin:20px 0;text-align:center;
}
.embed-slot .tag{display:inline-block;margin-bottom:10px;}
.embed-slot p{font-family:var(--f-mono);font-size:12px;color:var(--text-faint);margin:0;}
.embed-slot code{display:block;margin-top:10px;font-size:11px;color:var(--text-dim);}

/* blocks & layout */
.hero-mini{
  border-radius:14px;padding:40px 32px;margin:20px 0;text-align:center;position:relative;overflow:hidden;
  background:radial-gradient(500px 260px at 50% 0%, var(--brand-soft), transparent 70%);border:1px solid var(--border);
}
.hero-mini h3{margin:0 0 10px;}
.hero-mini p{margin-bottom:18px;color:var(--text-dim);}

.banner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:linear-gradient(90deg,var(--brand-soft),transparent);border:1px solid var(--border);border-left:3px solid var(--brand);border-radius:12px;padding:18px 22px;margin:20px 0;}
.banner b{color:var(--text);}
.banner span{color:var(--text-dim);font-size:14px;}

.bg-section{border-radius:14px;padding:40px;margin:20px 0;background:linear-gradient(150deg, var(--surface-2), var(--bg-soft));border:1px solid var(--border);}
.columns-2{columns:2;column-gap:32px;margin:20px 0;font-size:14.5px;}
.columns-2 p{margin-bottom:14px;break-inside:avoid;}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0;}
.mini-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px;}
.mini-card b{display:block;color:var(--text);margin-bottom:6px;font-size:14.5px;}
.mini-card p{margin:0;font-size:13px;color:var(--text-dim);}

.block-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0;}
.swatch{height:90px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:12px;color:var(--text-dim);}
.swatch.color{background:var(--surface-2);border:1px solid var(--border);}
.swatch.gradient{background:linear-gradient(135deg,var(--brand),var(--c-short));color:#fff;}
.swatch.glass{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(10px);}

.shadow-row,.radius-row{display:flex;gap:16px;margin:18px 0;flex-wrap:wrap;}
.shadow-row .sw{width:90px;height:60px;background:var(--surface-2);border-radius:10px;}
.sw.sh1{box-shadow:0 4px 10px -4px rgba(0,0,0,.5);}
.sw.sh2{box-shadow:0 14px 30px -10px rgba(0,0,0,.6);}
.sw.sh3{box-shadow:0 26px 50px -16px rgba(139,124,255,.4);}
.radius-row .sw{width:70px;height:70px;background:var(--surface-2);border:1px solid var(--border);}
.r-sm{border-radius:6px;}
.r-md{border-radius:14px;}
.r-lg{border-radius:28px;}
.r-full{border-radius:50%;}

/* interactive */
.faq-item + .faq-item{border-top:1px solid var(--border);}
.timeline{position:relative;padding-left:26px;margin:24px 0;}
.timeline::before{content:'';position:absolute;left:6px;top:4px;bottom:4px;width:1px;background:var(--border);}
.timeline .t-item{position:relative;margin-bottom:26px;}
.timeline .t-item::before{content:'';position:absolute;left:-26px;top:3px;width:11px;height:11px;border-radius:50%;background:var(--group);box-shadow:0 0 0 3px var(--bg);}
.timeline .t-item b{display:block;font-family:var(--f-display);color:var(--text);margin-bottom:3px;}
.timeline .t-item span.date{font-family:var(--f-mono);font-size:11.5px;color:var(--text-faint);}
.timeline .t-item p{margin:6px 0 0;font-size:14px;color:var(--text-dim);}

.poll-widget{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;margin:20px 0;}
.poll-widget .q{font-family:var(--f-display);font-weight:600;color:var(--text);margin-bottom:14px;}
.poll-opt{position:relative;border:1px solid var(--border);border-radius:9px;padding:10px 14px;margin-bottom:9px;cursor:pointer;overflow:hidden;font-size:14px;}
.poll-opt .fill{position:absolute;inset:0;background:var(--brand-soft);width:0;transition:width .5s var(--ease);z-index:0;}
.poll-opt span{position:relative;z-index:1;display:flex;justify-content:space-between;}
.poll-note{font-family:var(--f-mono);font-size:11.5px;color:var(--text-faint);margin-top:8px;}

.feedback-form{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;margin:20px 0;display:flex;flex-direction:column;gap:12px;max-width:440px;}
.feedback-form input,.feedback-form textarea{
  background:var(--bg-soft);border:1px solid var(--border);border-radius:9px;padding:11px 13px;color:var(--text);font-family:var(--f-body);font-size:14px;
}
.feedback-form textarea{resize:vertical;min-height:80px;}
.feedback-form button{align-self:flex-start;}

.rating-widget{display:flex;align-items:center;gap:10px;margin:18px 0;}
.rating-widget .stars-input{display:flex;gap:3px;cursor:pointer;}
.rating-widget .stars-input svg{width:22px;height:22px;transition:transform .15s var(--ease);}
.rating-widget .stars-input svg.pop{animation:starPop .45s var(--ease);}
.rating-widget .stars-input svg[style*="pointer-events: none"]{cursor:default;}

/* ---------- end-of-article: reactions + rating ---------- */
.article-end{padding:28px 0 40px;margin-top:8px;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:22px;}
.reactions-row{display:flex;flex-wrap:wrap;gap:12px;}
.reaction-btn{
  display:flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:13.5px;color:var(--text-dim);
  background:var(--surface);border:1px solid var(--border);padding:11px 18px;border-radius:12px;cursor:pointer;
  transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease);
}
.reaction-btn:hover:not(:disabled){border-color:var(--brand);color:var(--text);transform:translateY(-1px);}
.reaction-btn .r-icon{font-size:17px;display:inline-block;transition:transform .2s var(--ease);}
.reaction-btn .r-count{font-weight:700;color:var(--text);}
.reaction-btn.like.active{border-color:var(--c-exp);color:var(--c-exp);background:color-mix(in srgb,var(--c-exp) 14%, transparent);}
.reaction-btn.dislike.active{border-color:var(--c-ocr);color:var(--c-ocr);background:color-mix(in srgb,var(--c-ocr) 14%, transparent);}
.reaction-btn:disabled{cursor:default;}
.reaction-btn:disabled:not(.active){opacity:.55;}
.reaction-btn.pop .r-icon{animation:reactPop .45s var(--ease);}
@keyframes reactPop{
  0%{transform:scale(1) rotate(0);}
  35%{transform:scale(1.55) rotate(-10deg);}
  65%{transform:scale(.88) rotate(6deg);}
  100%{transform:scale(1) rotate(0);}
}
@keyframes starPop{
  0%{transform:scale(1);}
  40%{transform:scale(1.4) rotate(-8deg);}
  100%{transform:scale(1);}
}

.rating-card{
  position:relative;overflow:hidden;padding:22px 24px;border-radius:var(--radius);
  background:linear-gradient(135deg, var(--brand-soft), rgba(139,124,255,.03) 60%);
  border:1px solid color-mix(in srgb,var(--brand) 45%, var(--border));
  box-shadow:0 20px 44px -28px rgba(139,124,255,.55);
}
.rating-card::before{
  content:'';position:absolute;top:-40%;right:-10%;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle, rgba(139,124,255,.28), transparent 70%);pointer-events:none;
}
.rating-card-title{position:relative;font-family:var(--f-display);font-weight:700;font-size:16px;color:var(--text);margin-bottom:14px;}
.rating-card .rating-widget{position:relative;margin:0;}
.rating-card .stars-input svg{width:26px;height:26px;}
#ratingLabel{font-family:var(--f-mono);font-size:12.5px;color:var(--text-faint);}

/* glossary / pros-cons */
.glossary-list dt{font-family:var(--f-mono);color:var(--brand);}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0;}
.pc-card{border-radius:12px;padding:18px;border:1px solid var(--border);}
.pc-card.pros{background:color-mix(in srgb,var(--c-exp) 8%, var(--surface));border-color:color-mix(in srgb,var(--c-exp) 30%, var(--border));}
.pc-card.cons{background:color-mix(in srgb,var(--c-ocr) 8%, var(--surface));border-color:color-mix(in srgb,var(--c-ocr) 30%, var(--border));}
.pc-card h4{margin-top:0;}
.pc-card li{display:flex;gap:8px;margin-bottom:8px;font-size:13.5px;color:var(--text-dim);}

/* states */
.state-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0;}
.state-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;text-align:center;}
.spinner{width:26px;height:26px;border:3px solid var(--border);border-top-color:var(--brand);border-radius:50%;margin:0 auto 10px;animation:sp 0.8s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}
.skeleton{height:14px;border-radius:5px;background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:sk 1.4s ease-in-out infinite;margin-bottom:8px;}
@keyframes sk{0%{background-position:200% 0;}100%{background-position:-200% 0;}}
.state-box.error{border-color:color-mix(in srgb,var(--c-ocr) 40%, var(--border));}
.state-box.success{border-color:color-mix(in srgb,var(--c-exp) 40%, var(--border));}
.state-box p{font-size:13px;color:var(--text-dim);margin-top:4px;}

/* footnotes / service */
.footnotes{font-size:13px;color:var(--text-faint);}
.footnotes li{margin-bottom:8px;}
.footnotes a{color:var(--brand);}

/* related / footer */
.related-wrap{padding:70px 0;position:relative;z-index:1;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.related-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;transition:transform .3s var(--ease),border-color .3s var(--ease);}
.related-card:hover{transform:translateY(-4px);border-color:var(--brand);}
.related-card .ph{height:110px;}
.related-card .b{padding:16px;}
.related-card .b span{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);}
.related-card .b h5{margin:6px 0 0;font-size:14.5px;color:var(--text);font-family:var(--f-display);text-transform:none;letter-spacing:0;}

.prev-next{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-bottom:70px;position:relative;z-index:1;}
.pn-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;transition:border-color .2s var(--ease);}
.pn-card:hover{border-color:var(--brand);}
.pn-card .dir{font-family:var(--f-mono);font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.05em;}
.pn-card.next{text-align:right;}
.pn-card b{display:block;margin-top:8px;font-family:var(--f-display);color:var(--text);font-size:15.5px;}

.article-footer{border-top:1px solid var(--border-soft);padding:36px 0;position:relative;z-index:1;}
.article-footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;}
.article-footer p{font-size:12.5px;color:var(--text-faint);font-family:var(--f-mono);}
.placeholder-note{color:var(--c-conv);}
.article-footer .anchor-menu{display:flex;gap:14px;flex-wrap:wrap;}
.article-footer .anchor-menu a{font-size:12px;color:var(--text-faint);}
.article-footer .anchor-menu a:hover{color:var(--text-dim);}

/* ============ CUSTOM CURSOR ============ */
@media (hover:hover) and (pointer:fine){
  *{cursor:none !important;}
  input,textarea{cursor:text !important;}
}
.cursor-dot{
  position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;
  background:var(--brand);pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);box-shadow:0 0 10px var(--brand),0 0 2px #fff;
  transition:width .2s var(--ease),height .2s var(--ease),opacity .2s var(--ease),background .2s var(--ease);
}
.cursor-dot.hover{width:4px;height:4px;background:var(--accent-cursor,var(--brand));}
.cursor-ring{
  position:fixed;top:0;left:0;width:32px;height:32px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--brand) 70%, transparent);
  pointer-events:none;z-index:9998;transform:translate(-50%,-50%);
  transition:width .28s var(--ease),height .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease),opacity .2s var(--ease);
}
.cursor-ring.hover{
  width:52px;height:52px;
  border-color:var(--accent-cursor,var(--brand));
  background:color-mix(in srgb, var(--accent-cursor,var(--brand)) 12%, transparent);
}
.cursor-ring.target{width:78px;height:78px;border-style:dashed;}
.cursor-ring .corner{position:absolute;width:10px;height:10px;opacity:0;transition:opacity .2s var(--ease);}
.cursor-ring.target .corner{opacity:1;}
.cursor-ring .corner{border-color:var(--accent-cursor,var(--brand));}
.cursor-ring .c-tl{top:-6px;left:-6px;border-top:2px solid;border-left:2px solid;}
.cursor-ring .c-tr{top:-6px;right:-6px;border-top:2px solid;border-right:2px solid;}
.cursor-ring .c-bl{bottom:-6px;left:-6px;border-bottom:2px solid;border-left:2px solid;}
.cursor-ring .c-br{bottom:-6px;right:-6px;border-bottom:2px solid;border-right:2px solid;}
.cursor-coords{
  position:fixed;top:0;left:0;font-family:var(--f-mono);font-size:10px;letter-spacing:.03em;
  color:var(--text-dim);background:rgba(10,10,15,.78);border:1px solid var(--border);
  padding:3px 7px;border-radius:5px;pointer-events:none;z-index:9997;white-space:nowrap;
  transform:translate(18px,18px);opacity:0;transition:opacity .3s var(--ease);
}
body.cursor-active .cursor-coords{opacity:1;}
body.cursor-active .cursor-dot,body.cursor-active .cursor-ring{opacity:1;}
.cursor-dot,.cursor-ring{opacity:0;}

@media(max-width:980px){
  .article-layout{grid-template-columns:1fr;}
  .toc-sidebar{display:none;}
  .related-grid{grid-template-columns:1fr;}
  .prev-next{grid-template-columns:1fr;}
  .card-grid,.block-swatches,.infographic,.pros-cons{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .card-grid,.block-swatches,.infographic,.pros-cons,.columns-2{grid-template-columns:1fr;columns:1;}
}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;}}