:root{
  --bg:#0A0F1E; --panel:rgba(26,32,53,0.82); --panel2:rgba(32,38,61,0.85); --border:rgba(99,102,241,0.18); --border-soft:rgba(99,102,241,0.16);
  --text:#C9D1D9; --dim:#5B6478; --dim2:#94A3B8;
  --cy:#39D4C4; --bl:#58A6FF; --gr:#3FB950; --am:#E3B341; --pu:#BC8CFF; --re:#F85149; --or:#E3B341;
  --li:#0A66C2; --accent:#6366F1; --accent2:#14B8A6;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:
    radial-gradient(circle at 85% 0%, rgba(99,102,241,0.10) 0%, transparent 45%),
    radial-gradient(circle at 0% 30%, rgba(20,184,166,0.06) 0%, transparent 40%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text); font-family:'JetBrains Mono', monospace; font-size:13.5px; line-height:1.6; padding:22px 20px 80px;}
.page{max-width:1180px; margin:0 auto;}
::selection{background:rgba(99,102,241,0.35);color:#F0EDE6;}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:rgba(99,102,241,0.35);border-radius:6px;}
::-webkit-scrollbar-thumb:hover{background:rgba(99,102,241,0.55);}
.header{border-bottom:2px solid var(--border); padding-bottom:14px; margin-bottom:16px;}
.header-top{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.prompt{color:var(--gr); font-weight:700; font-size:20px;}
.title{font-size:24px; font-weight:800; color:#F0EDE6; letter-spacing:-0.3px;}
.subtitle{color:var(--dim); margin-top:4px; font-size:12.5px;}
.context-panel{background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--border); border-left:4px solid var(--accent2); border-radius:10px; padding:14px 18px; margin:16px 0; font-size:12.5px; color:var(--dim2);}
.context-panel b{color:#F0EDE6;}
.legend{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--panel2); backdrop-filter:blur(10px); border:1px solid var(--border-soft); border-radius:10px; padding:10px 16px; margin-top:12px; margin-bottom:18px;}
.legend-label{color:var(--dim); font-size:11px; text-transform:uppercase; letter-spacing:1px;}
.legend-items{display:flex; gap:14px; flex-wrap:wrap;}
.stat-row{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px;}
.stat{background:var(--panel2); backdrop-filter:blur(10px); border:1px solid var(--border-soft); border-radius:8px; padding:8px 14px; font-size:12px; color:var(--dim2); transition:transform .2s,border-color .2s;}
.stat:hover{transform:translateY(-2px);border-color:rgba(99,102,241,0.4);}
.stat b{color:#F0EDE6; font-size:15px; display:block;}
.toc{margin-top:14px; display:flex; flex-wrap:wrap; gap:6px 10px;}
.toc a{color:var(--cy); text-decoration:none; font-size:12px; border:1px solid var(--border-soft); padding:3px 9px; border-radius:20px; transition:border-color .2s,color .2s;}
.toc a:hover{border-color:var(--accent2);color:var(--accent2);}
.section-label{font-size:12px; text-transform:uppercase; letter-spacing:1.5px; color:var(--dim2); margin:34px 0 10px; padding-bottom:6px; border-bottom:1px dashed var(--border); display:flex; align-items:center; gap:8px;}
.section-label::before{content:"//"; color:var(--gr);}
.section-label.big{font-size:15px; color:#E6EDF3; margin-top:50px; padding:12px 0; border-bottom:1px solid var(--border);}
.section-label.big::before{content:"\00a7";}
.section-count{color:var(--dim); font-weight:400; font-size:11px; text-transform:none; letter-spacing:0;}
code{font-family:'JetBrains Mono', monospace; background:var(--panel2); color:var(--cy); padding:1px 5px; border-radius:4px; font-size:12px; border:1px solid var(--border-soft);}

.qa-card{background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:10px; padding:13px 16px; margin-bottom:14px; border-left:4px solid var(--bl); transition:transform .22s,border-color .22s,box-shadow .22s;}
.qa-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,0.3);}
.qa-head{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; margin-bottom:8px;}
.topic-chip{font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--pu); border:1px solid rgba(163,113,247,.35); padding:2px 9px; border-radius:20px; white-space:nowrap;}
.qa-badges{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;}
.badge{font-size:9.5px; font-weight:700; padding:2.5px 8px; border-radius:20px; border:1px solid var(--border-soft); color:var(--dim2); white-space:nowrap; letter-spacing:.02em;}
.badge-li{color:#4db8ff; border-color:var(--li); background:rgba(10,102,194,.15);}
.badge-asked{color:var(--am); border-color:rgba(227,179,65,.4); background:rgba(227,179,65,.08);}
.badge-track{color:var(--dim); border-color:var(--border);}
.badge-level{color:var(--dim2);}
.qa-q{font-size:14.5px; font-weight:700; color:#E6EDF3; line-height:1.4;}
.qa-also{margin-top:6px; font-size:12px; color:var(--dim2);}
.qa-also-label{color:var(--dim); text-transform:uppercase; font-size:10.5px; letter-spacing:.5px;}
.qa-also ul{margin:4px 0 0 18px; padding:0;}
.qa-also li{margin-bottom:2px;}
.qa-a{margin-top:10px; font-size:13px; color:var(--text); line-height:1.7;}
.qa-a p{margin:0 0 9px;}
.qa-a ul{margin:2px 0 9px 20px; padding:0;}
.qa-a li{margin-bottom:5px;}

.bonus-panel{background:var(--panel2); backdrop-filter:blur(10px); border:1px dashed var(--border); border-radius:10px; padding:16px 18px; margin:14px 0 22px;}
.bonus-title{font-size:11.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--or); font-weight:700; margin-bottom:12px;}

.tree-panel{background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:10px; padding:14px 16px;}
.tree-title{font-size:12.5px; font-weight:700; color:#E6EDF3; margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px;}
.tree-body{font-size:12.5px; white-space:pre-wrap; line-height:1.75; color:var(--dim2);}
.tree-body .i{font-weight:700;} .tree-body .n{color:var(--dim2);}
.tree-body .cy{color:var(--cy);} .tree-body .bl{color:var(--bl);} .tree-body .gr{color:var(--gr);}
.tree-body .am{color:var(--am);} .tree-body .pu{color:var(--pu);} .tree-body .re{color:var(--re);}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.table-panel{background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:10px; padding:14px;}
.table-panel table{width:100%; border-collapse:collapse; font-size:12.5px;}
.table-panel th{text-align:left; color:#E6EDF3; font-size:11px; text-transform:uppercase; letter-spacing:.5px; padding:6px 8px; border-bottom:1px solid var(--border);}
.table-panel td{padding:7px 8px; border-bottom:1px solid var(--border-soft); color:var(--dim2); vertical-align:top;}
.cell-hl{color:var(--am); font-weight:700; white-space:nowrap;}
.revision-panel{background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:10px; padding:14px 16px;}
.revision-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px 20px;}
.revision-grid.cols-1{grid-template-columns:1fr;}
.revision-item{font-size:12.5px; color:var(--dim2); display:flex; gap:8px;}
.chk{color:var(--gr); font-weight:700;}
.flow-panel, .flowchart-panel{background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:10px; padding:18px;}
.flowchart{display:flex; flex-direction:column; align-items:center;}
.flow-box{display:inline-flex; align-items:baseline; gap:8px; flex-wrap:wrap; justify-content:center; background:var(--panel2); border:1px solid var(--border); border-left:3px solid var(--bl); border-radius:6px; padding:8px 16px; font-size:13px; font-weight:700; color:#dce6ff; text-align:center;}
.flow-arrow{color:var(--dim); font-size:11.5px; padding:5px 0; text-align:center; white-space:nowrap;}
.flow-sub{font-size:11.5px; font-weight:400; color:var(--dim2);}
.cmp-panel{background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:2px;}
.cmp-card{padding:8px 4px;}
.cmp-header{margin-bottom:6px;}
.cmp-name{font-weight:700; font-size:13.5px;}
.cmp-name.bl{color:var(--bl);} .cmp-name.gr{color:var(--gr);} .cmp-name.am{color:var(--am);}
.cmp-rows{display:flex; flex-direction:column; gap:3px;}
.cmp-row{font-size:12.5px; color:var(--dim2);}
.cmp-divider{height:1px; background:var(--border-soft); margin:4px 0;}
.note{font-size:12px; color:var(--dim); margin-top:10px; line-height:1.6;}
.note b{color:var(--dim2);}

.diff-panel{background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:10px; padding:6px 18px;}
.diff-row{padding:14px 0; border-bottom:1px solid var(--border-soft);}
.diff-row:last-child{border-bottom:none;}
.diff-name{font-weight:700; color:#E6EDF3; font-size:13px; margin-bottom:5px;}
.diff-body{font-size:12.5px; color:var(--dim2); line-height:1.65;}

.rapid-panel{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
.rapid-col{background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--border); border-radius:10px; padding:14px 16px;}
.rapid-title{font-weight:700; color:var(--cy); font-size:12.5px; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;}
.rapid-line{font-size:12.5px; color:var(--dim2); line-height:1.7; margin-bottom:8px;}

@media(max-width:820px){
  .two-col, .rapid-panel{grid-template-columns:1fr;}
  .revision-grid{grid-template-columns:1fr;}
}