:root{
      --bg:#0f1411;
      --card:#182016;
      --text:#e8efe1;
      --muted:#b3beab;
      --accent:#8fae5d;
      --warn:#bfa25a;
      --danger:#c96f65;
      --ok:#73be91;
      --info:#6ba5c8;
      --purple:#b08fd8;
      --border:rgba(220,232,210,.18);
      --shadow: 0 10px 24px rgba(0,0,0,.34);
      --radius: 6px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      --sans: Inter, "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
      --max: 1080px;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:var(--sans);
      background:
        linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px),
        radial-gradient(1200px 700px at 20% 0%, rgba(163,201,119,.18), transparent 60%),
        radial-gradient(900px 600px at 100% 20%, rgba(127,212,163,.10), transparent 55%),
        var(--bg);
      background-size: 32px 32px, 32px 32px, auto, auto, auto;
      color:var(--text);
      line-height:1.65;
      letter-spacing:.15px;
    }
    a{color:var(--accent); text-decoration:none}
    a:hover{text-decoration:underline}
    header{
      padding: 16px 18px 12px;
      position: relative;
      background: linear-gradient(to bottom, rgba(14,20,16,.97), rgba(14,20,16,.82));
      backdrop-filter: blur(14px);
      border-bottom:2px solid var(--accent);
      z-index:10;
    }
    .wrap{max-width:var(--max); margin:0 auto}
    h1{margin:0 0 6px; font-size: clamp(21px, 2.5vw, 31px); letter-spacing:1.1px; text-transform: uppercase; font-weight:850}
    .subtitle{margin:0; color:var(--muted); font-size: 14.5px}
    nav{
      margin-top: 10px; display:flex; flex-wrap:wrap; gap:8px;
      font-size: 13px;
    }
    nav a{
      padding:6px 12px; border:1px solid var(--border); border-radius: 4px;
      background: rgba(255,255,255,.025);
      transition: all .2s;
      font-family: var(--mono);
      text-transform: uppercase;
      letter-spacing:.4px;
      font-size:12px;
    }
    nav a:hover{background: rgba(163,201,119,.18); text-decoration:none; border-color: var(--accent); transform: translateY(-1px)}
    main{padding: 18px}
    section{
      background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 22px 20px;
      margin: 18px auto;
      max-width: var(--max);
      position: relative;
    }
    section::before{
      content:'';
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:3px;
      background: linear-gradient(180deg, var(--accent), rgba(143,174,93,.12));
      border-radius: 6px 0 0 6px;
    }
    h2{margin: 0 0 14px; font-size: 21px; display:flex; align-items:center; gap:10px; text-transform: uppercase; letter-spacing:.8px}
    h2 .icon{font-size:26px}
    h3{margin: 18px 0 10px; font-size: 16.5px; color: #dcebcf; display:flex; align-items:center; gap:8px; text-transform: uppercase; letter-spacing:.5px}
    h3 .ico{font-size:18px}
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      font-size: 12.5px; color: var(--muted);
      border: 1px solid var(--border);
      padding: 6px 10px; border-radius: 4px;
      background: rgba(255,255,255,.03);
      font-family: var(--mono);
      text-transform: uppercase;
    }
    .grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px}
    @media (max-width: 920px){ .grid{grid-template-columns:1fr} }
    .callout{
      border-left: 4px solid var(--accent);
      background: rgba(143,174,93,.11);
      padding: 14px 16px; border-radius: 10px;
      margin: 14px 0;
    }
    .warn{border-left-color: var(--warn); background: rgba(214,184,106,.10)}
    .danger{border-left-color: var(--danger); background: rgba(223,127,114,.10)}
    .info{border-left-color: var(--info); background: rgba(114,184,223,.10)}
    ul{margin: 8px 0 0 18px}
    li{margin: 6px 0}
    table{
      width:100%; border-collapse: collapse; margin-top: 10px;
      font-size: 13.5px; overflow:hidden; border-radius: 12px;
    }
    th, td{border:1px solid var(--border); padding: 10px 12px; vertical-align: top}
    th{background: rgba(255,255,255,.08); text-align:left; text-transform: uppercase; letter-spacing:.45px; font-family:var(--mono); font-size:12px}
    .k{font-family:var(--mono); font-size: 12.5px; color:#e2eecd}
    details{
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 12px 14px;
      background: rgba(255,255,255,.03);
      margin-top: 12px;
      transition: all .2s;
    }
    details[open]{background: rgba(255,255,255,.05)}
    summary{cursor:pointer; color:#e6f2d7; font-weight: 650; display:flex; align-items:center; gap:8px}
    .skip-link{
      position:absolute;
      left:-9999px;
      top:auto;
      width:1px;
      height:1px;
      overflow:hidden;
    }
    .skip-link:focus{
      left:14px;
      top:14px;
      width:auto;
      height:auto;
      padding:8px 12px;
      background:#0f1a12;
      border:1px solid var(--accent);
      border-radius:8px;
      z-index:20;
    }
    .sr-only{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }
    footer{
      padding: 24px 18px 40px;
      color: var(--muted);
      text-align:center;
    }
    .cols{display:grid; grid-template-columns:1fr 1fr; gap:14px}
    @media (max-width: 720px){ .cols{grid-template-columns:1fr} .stat-row{grid-template-columns: 1fr 1fr !important} }
    .pill{
      display:inline-block; padding: 2px 9px; border-radius: 4px;
      border:1px solid var(--border); background: rgba(255,255,255,.05);
      font-size: 12px; color: var(--muted); margin-left: 6px;
      font-family: var(--mono);
      text-transform: uppercase;
    }
    .banner{
      border:1px solid var(--border);
      background: rgba(255,255,255,.03);
      border-radius: 6px;
      padding: 12px 14px;
      margin-top: 14px;
      display:flex;
      flex-wrap: wrap;
      gap:10px;
      font-size: 13px;
      color: var(--muted);
    }
    .banner span{display:flex; align-items:center; gap:6px}

    /* ── Stat cards ── */
    .stat-row{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap:12px;
      margin: 16px 0;
    }
    .stat-card{
      border:1px solid var(--border);
      border-radius: 6px;
      padding: 14px 12px;
      text-align:center;
      background: rgba(255,255,255,.025);
      transition: transform .2s, box-shadow .2s;
    }
    .stat-card:hover{transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3)}
    .stat-card .num{font-size: 28px; font-weight: 800; line-height:1.2}
    .stat-card .label{font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.3}
    .c-green .num{color: var(--ok)}
    .c-red .num{color: var(--danger)}
    .c-yellow .num{color: var(--warn)}
    .c-accent .num{color: var(--accent)}
    .c-info .num{color: var(--info)}
    .c-purple .num{color: var(--purple)}

    /* ── Icon list ── */
    .icon-list{list-style:none; margin:10px 0 0 0; padding:0}
    .icon-list li{
      display:flex; align-items:flex-start; gap:10px;
      padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06);
      border-left: 2px solid rgba(143,174,93,.28);
      padding-left:10px;
    }
    .icon-list li:last-child{border-bottom:none}
    .icon-list .li-icon{font-size:20px; flex-shrink:0; margin-top:2px}

    /* ── Bar chart (CSS only) ── */
    .bar-chart{margin: 14px 0; list-style:none; padding:0}
    .bar-chart li{margin: 8px 0}
    .bar-label{font-size: 13px; margin-bottom: 4px; display:flex; justify-content:space-between; align-items:center}
    .bar-label .tag{font-size:11px; padding: 1px 7px; border-radius:999px; font-weight:600}
    .bar-track{
      height: 10px;
      background: rgba(255,255,255,.08);
      border-radius: 999px;
      overflow:hidden;
    }
    .bar-fill{
      height:100%;
      border-radius: 999px;
      transition: width .6s ease;
    }
    .bar-fill.red{background: linear-gradient(90deg, #df7f72, #e65a4a)}
    .bar-fill.yellow{background: linear-gradient(90deg, #d6b86a, #c9a540)}
    .bar-fill.green{background: linear-gradient(90deg, #7fd4a3, #5ec084)}
    .bar-fill.accent{background: linear-gradient(90deg, #a3c977, #8ab85e)}
    .bar-fill.info{background: linear-gradient(90deg, #72b8df, #4fa0d0)}
    .bar-fill.purple{background: linear-gradient(90deg, #b08fd8, #9a73c9)}

    /* ── Donut chart (CSS only) ── */
    .donut-wrap{display:flex; align-items:center; gap:20px; margin: 16px 0; flex-wrap:wrap}
    .donut{
      width:140px; height:140px;
      border-radius:50%;
      position:relative;
      flex-shrink:0;
    }
    .donut-center{
      position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      text-align:center;
    }
    .donut-center .val{font-size:22px; font-weight:800; color:var(--text)}
    .donut-center .lbl{font-size:10px; color:var(--muted)}
    .donut-legend{font-size:13px; line-height:2}
    .donut-legend span{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:middle}

    /* ── Back to Top ── */
    #back-to-top{
      position: fixed; bottom: 20px; right: 20px;
      padding: 10px 14px; background: var(--card); border: 1px solid var(--accent);
      color: var(--accent); border-radius: 6px; cursor: pointer;
      display: none; z-index: 100; font-family: var(--mono);
      font-size: 12px; text-transform: uppercase;
      box-shadow: 0 4px 12px rgba(0,0,0,.5);
      transition: all .2s;
    }
    #back-to-top:hover{background: var(--accent); color: #000; transform: translateY(-2px)}

    /* ── Interactive Checklist ── */
    .interactive-list li{cursor: pointer; user-select: none; position: relative; padding-left: 24px}
    .interactive-list li::before{
      content: '☐'; position: absolute; left: 0; top: 0;
      color: var(--muted); font-size: 16px;
    }
    .interactive-list li.checked::before{content: '☑'; color: var(--ok)}
    .interactive-list li.checked{color: var(--muted); text-decoration: line-through}

    /* ── Print Styles ── */
    @media print{
      :root{
        --bg: #fff; --card: #fff; --text: #000; --muted: #555;
        --accent: #2c5e1a; --warn: #8a6d1f; --danger: #a3160b;
        --ok: #1a5e32; --info: #1a4e7a; --purple: #4a1a7a;
        --border: #ccc; --shadow: none;
      }
      body{background: #fff; color: #000; font-size: 11pt}
      header, footer, nav, #back-to-top, .skip-link, .print-btn{display: none !important}
      
      /* Normal print mode (full doc) */
      body:not(.focus-print) section{
        border: none; box-shadow: none; margin: 0; padding: 0;
        page-break-inside: avoid;
        background: none !important;
      }
      
      /* Focus print mode (single template) */
      body.focus-print > * { display: none !important; }
      body.focus-print main { display: block !important; padding: 0; margin: 0; }
      body.focus-print section { display: none !important; }
      body.focus-print .print-target { 
        display: block !important; 
        position: absolute; left: 0; top: 0; width: 100%;
        border: none !important; margin: 0 !important;
      }
      body.focus-print .print-target * { visibility: visible !important; color: #000 !important; }
      
      section::before{display: none}
      a{text-decoration: none; color: #000}
      h1, h2, h3, h4{color: #000; page-break-after: avoid}
      .callout, .stat-card, table, details{border: 1px solid #000 !important; background: none !important; color: #000 !important}
      th{background: #eee !important; color: #000 !important}
      tr{page-break-inside: avoid}
      .interactive-list li::before{content: '☐ ' !important}
      
      /* Force expanded details for printing */
      details[open]{display: block !important}
      summary{display: block !important; list-style: none !important}
      summary::-webkit-details-marker { display: none; }
      summary .print-btn{display:none !important}
    }

    /* ── Interactive Quiz ── */
    .quiz-container { margin-top: 14px; }
    .quiz-question { margin-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.05); padding-bottom: 14px; }
    .quiz-question:last-child { border-bottom: none; border-bottom: 0; padding-bottom: 0; }
    .quiz-question h5 { margin: 0 0 10px; font-size: 14.5px; color: var(--text); font-weight: 600; line-height: 1.4; }
    .quiz-options { display: flex; flex-direction: column; gap: 6px; }
    .quiz-option {
      padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
      cursor: pointer; transition: all .2s; font-size: 13.5px;
      display: flex; align-items: flex-start; gap: 10px;
      background: rgba(255,255,255,.02);
    }
    .quiz-option:hover { background: rgba(255,255,255,.06); border-color: var(--muted); }
    .quiz-option.selected { border-color: var(--accent); background: rgba(163,201,119,.08); }
    .quiz-option.correct { border-color: var(--ok); background: rgba(115,190,145,.15); color: #fff; }
    .quiz-option.wrong { border-color: var(--danger); background: rgba(201,111,101,.15); opacity: 0.7; }
    .quiz-feedback { 
      margin-top: 8px; font-size: 13px; padding: 8px 12px; 
      border-radius: 6px; display: none; 
    }
    .quiz-feedback.show { display: block; animation: fadeInUp .3s ease; }
    .quiz-feedback.success { background: rgba(115,190,145,.15); color: #8fceaa; border: 1px solid rgba(115,190,145,.3); }
    .quiz-feedback.error { background: rgba(201,111,101,.15); color: #e59a93; border: 1px solid rgba(201,111,101,.3); }

    /* ── Timeline ── */
    .timeline{position:relative; padding-left:28px; margin: 14px 0}
    .timeline::before{
      content:''; position:absolute; left:10px; top:0; bottom:0;
      width:2px; background: rgba(163,201,119,.3);
    }
    .tl-item{position:relative; padding: 10px 0}
    .tl-dot{
      position:absolute; left:-22px; top: 14px;
      width:12px; height:12px; border-radius:50%;
      background: var(--accent);
      border: 2px solid var(--bg);
    }
    .tl-item h4{margin: 0 0 4px; font-size: 14.5px; color:var(--accent)}
    .tl-item p{margin: 0; font-size: 13.5px; color:var(--muted)}

    /* ── Step cards ── */
    .step-cards{display:grid; grid-template-columns: repeat(4,1fr); gap:12px; margin:14px 0}
    @media (max-width: 720px){ .step-cards{grid-template-columns: 1fr 1fr} }
    .step-card{
      border:1px solid var(--border);
      border-radius:12px;
      padding:14px;
      background: rgba(255,255,255,.03);
      text-align:center;
      transition: transform .2s;
    }
    .step-card:hover{transform: translateY(-2px)}
    .step-card .step-num{
      display:inline-flex; align-items:center; justify-content:center;
      width:32px; height:32px; border-radius:50%;
      background: rgba(163,201,119,.2);
      color:var(--accent); font-weight:800; font-size:15px;
      margin-bottom:8px;
    }
    .step-card .step-icon{font-size:24px; margin-bottom:6px}
    .step-card h4{margin: 0 0 4px; font-size:13.5px; color:var(--text)}
    .step-card p{margin:0; font-size:12px; color:var(--muted); line-height:1.4}

    /* ── Tag chips ── */
    .tag-row{display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0}
    .tag{
      display:inline-flex; align-items:center; gap:5px;
      padding: 5px 11px; border-radius: 999px;
      font-size: 12px; font-weight: 600;
      border: 1px solid;
    }
    .tag-red{color:#df7f72; border-color: rgba(223,127,114,.4); background: rgba(223,127,114,.1)}
    .tag-yellow{color:#d6b86a; border-color: rgba(214,184,106,.4); background: rgba(214,184,106,.1)}
    .tag-green{color:#7fd4a3; border-color: rgba(127,212,163,.4); background: rgba(127,212,163,.1)}
    .tag-info{color:#72b8df; border-color: rgba(114,184,223,.4); background: rgba(114,184,223,.1)}
    .tag-purple{color:#b08fd8; border-color: rgba(176,143,216,.4); background: rgba(176,143,216,.1)}

    /* ── Glossary cards ── */
    .gloss-grid{display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin:12px 0}
    @media (max-width: 720px){ .gloss-grid{grid-template-columns: 1fr} }
    .gloss-card{
      border:1px solid var(--border);
      border-radius:12px;
      padding:12px 14px;
      background: rgba(255,255,255,.03);
      transition: transform .15s;
    }
    .gloss-card:hover{transform:scale(1.01)}
    .gloss-card .gt{font-family:var(--mono); font-size:13px; color:var(--accent); margin:0 0 4px; display:flex; align-items:center; gap:6px}
    .gloss-card .gd{font-size:12.5px; color:var(--muted); margin:0; line-height:1.5}

    /* ── Flowchart (simple CSS) ── */
    .flow{display:flex; align-items:center; gap:0; margin:14px 0; flex-wrap:wrap; justify-content:center}
    .flow-box{
      border:1px solid var(--border); border-radius:10px;
      padding:10px 14px; text-align:center;
      background: rgba(255,255,255,.04);
      font-size:12.5px; min-width:110px;
    }
    .flow-arrow{font-size:18px; color:var(--accent); padding:0 6px}

    /* ── Quiz/knowledge check ── */
    .quiz-box{
      border:1px solid rgba(163,201,119,.3);
      border-radius:12px;
      padding:16px;
      background: rgba(163,201,119,.06);
      margin:14px 0;
    }
    .quiz-box h4{margin:0 0 8px; color:var(--accent); font-size:14px; display:flex; align-items:center; gap:6px}
    .quiz-box ul{margin:6px 0 0 18px; font-size:13.5px}
    .quiz-box li{color:var(--muted)}

    /* ── Smooth animations ── */
    @keyframes fadeInUp{
      from{opacity:0; transform:translateY(16px)}
      to{opacity:1; transform:translateY(0)}
    }
    section{animation: fadeInUp .5s ease both}
    section:nth-child(2){animation-delay:.05s}
    section:nth-child(3){animation-delay:.1s}
    section:nth-child(4){animation-delay:.15s}
    section:nth-child(5){animation-delay:.2s}
    section:nth-child(6){animation-delay:.25s}

    /* ── Highlight marker ── */
    mark{background: rgba(163,201,119,.25); color:var(--text); padding:1px 4px; border-radius:4px}
  
    img.emoji{height:1em;width:1em;margin:0 .05em 0 .1em;vertical-align:-0.1em;display:inline-block}

@keyframes blink-red {
    0% { border-color: rgba(255,0,0,1); background-color: rgba(50,0,0,0.9); box-shadow: 0 0 10px red; }
    50% { border-color: rgba(255,0,0,0.3); background-color: rgba(50,0,0,0.7); box-shadow: 0 0 0 transparent; }
    100% { border-color: rgba(255,0,0,1); background-color: rgba(50,0,0,0.9); box-shadow: 0 0 10px red; }
  }
  .putin-alert {
    border: 5px solid red;
    margin: 40px auto;
    padding: 20px;
    max-width: 900px;
    color: #ffcccc;
    font-family: 'Courier New', monospace;
    animation: blink-red 1.5s infinite alternate;
    text-align: left;
  }
  .putin-alert h2 {
    color: red;
    text-transform: uppercase;
    text-align: center;
    font-size: 2em;
    border-bottom: 2px solid red;
    margin-bottom: 20px;
    background: transparent;
  }
  .putin-alert strong { color: white; text-decoration: underline; }
  .putin-alert ul { list-style: none; padding: 0; }
  .putin-alert li { margin-bottom: 12px; border-left: 3px solid red; padding-left: 10px; }