:root{
    --ink:#0e1325;
    --muted:#5b6475;
    --line:#e7eaf0;
    --brand:#ef7f22;
    --brand-2:#5d87ff;
    --bg:#ffffff;
    --hero:#0a0f1e;
    --chip:#0f172a;
    --ease: cubic-bezier(.22,.61,.36,1);
    --t-fast: .18s; --t-med: .28s; --t-slow: .45s;
  }

  *{box-sizing:border-box}
  body{color:var(--ink); background:#fff;}
  .page-wrap{max-width:1220px;margin:0 auto;padding:0 20px 64px}

  /* ===== Hero ===== */
  .hero{
    position:relative; overflow:hidden; color:#fff;
    background:
      radial-gradient(1000px 300px at 80% 10%, rgba(93,135,255,.18), transparent 60%),
      radial-gradient(900px 260px at 0% 90%, rgba(14,165,233,.18), transparent 60%),
      var(--hero);
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .hero-inner{position:relative; z-index:2; max-width:1220px; margin:0 auto; padding:140px 20px 88px;}
  .eyebrow{
    display:inline-flex; gap:8px; align-items:center;
    font-weight:800; letter-spacing:.08em; font-size:12px; text-transform:uppercase;
    padding:6px 12px; border-radius:999px; color:#dbe7ff;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  }
  .h-title{
    margin:14px 0 14px; font-weight:900; font-size:clamp(28px,4.8vw,46px); line-height:1.08;
    background:linear-gradient(90deg,#fff,#e6edf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  }
  .h-sub{color:#d0d9ea; max-width:860px; font-size:1.06rem; line-height:1.7}
  .meta{display:flex; gap:14px; align-items:center; flex-wrap:wrap; color:#e6edf8; margin-top:14px; font-size:.95rem}
  .dot{width:4px;height:4px;border-radius:999px;background:#9fb3d0;display:inline-block}

  /* ===== Progress ===== */
  .progress-holder{position:sticky;top:0;z-index:60;height:4px;background:transparent}
  .progress-bar{height:4px;width:0;background:linear-gradient(90deg,var(--brand),#f59e0b);box-shadow:0 0 24px rgba(239,127,34,.35)}

  /* ===== Layout ===== */
  .grid{
    display:grid; gap:28px; grid-template-columns: 300px minmax(0,1fr);
    margin-top:-48px;
  }
  @media (max-width: 1024px){ .grid{grid-template-columns: 1fr; margin-top:0} }

  /* ===== Sidebar ===== */
  .sidebar{
    position:sticky; top:88px; align-self:start;
    background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px;
    box-shadow:0 14px 36px rgba(15,23,42,.06);
  }
  .sidebar h4{margin:0 0 10px; font-size:13px; letter-spacing:.12em; color:#0b2f52; text-transform:uppercase}
  .toc{list-style:none;padding:0;margin:0}
  .toc li{margin:8px 0}
  .toc a{
    font-size:14px; color:var(--muted); text-decoration:none; line-height:1.4; display:block; padding:8px 8px 8px 10px; border-left:2px solid transparent; border-radius:8px;
  }
  .toc a.active{color:var(--ink); border-left-color:var(--brand); background:#fff6f0; font-weight:600}
  .side-card{
    margin-top:16px; border:1px dashed var(--line); border-radius:14px; padding:14px;
    background:linear-gradient(180deg,#fafafa,#fff)
  }
  .side-cta{display:flex; gap:10px; align-items:center; margin-top:8px}
  .side-btn{
    display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700;
    padding:10px 14px; border-radius:12px; background:var(--brand); color:#fff; border:1px solid var(--brand);
    box-shadow:0 8px 22px rgba(239,127,34,.25);
  }

  /* ===== Article ===== */
  .article{
    background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden;
    box-shadow:0 18px 40px rgba(2,6,23,.05)
  }
  .cover{aspect-ratio: 16/7; overflow:hidden; position:relative; background:#0b1326}
  .cover img{width:100%;height:100%;object-fit:cover;filter:contrast(1.04) saturate(1.06)}
  .content{padding:28px}
  .content p,.content li{color:#111827;font-size:17px;line-height:1.8}
  .content h2{font-size:clamp(22px,3vw,30px); line-height:1.25; color:#062a49; font-weight:800; margin:32px 0 10px}
  .content h3{font-size:19px; margin:22px 0 8px; color:#0d3558; font-weight:700}
  .content ul,.content ol{padding-left:20px}

  .pull{
    margin:22px 0; padding:18px; border-radius:16px;
    background:linear-gradient(180deg,#f8fafc,#ffffff); border:1px solid var(--line)
  }
  .pull p{margin:0; font-size:18px; line-height:1.6}
  .pull strong{color:#0b2f52}

  .inline-cta{
    margin:28px 0; border-radius:16px; padding:18px 20px;
    background: radial-gradient(900px 260px at 110% -30%, rgba(239,127,34,.10), transparent 60%), #fff;
    border:1px solid var(--line); display:flex; gap:14px; align-items:center; flex-wrap:wrap
  }
  .inline-cta h4{margin:0; font-size:18px; color:#0b2f52}
  .inline-cta p{margin:0; color:var(--muted)}
  .btn-primary-clean{
    margin-left:auto; display:inline-flex; gap:8px; align-items:center;
    padding:10px 16px; border-radius:12px; background:var(--brand); color:#fff; border:0; text-decoration:none; font-weight:800;
    box-shadow:0 8px 22px rgba(239,127,34,.25)
  }
  @media (max-width:640px){ .btn-primary-clean{width:100%; justify-content:center; margin-left:0} }

  /* ===== Share ===== */
  .share{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:22px; border-top:1px solid var(--line); padding-top:16px}
  .chip{
    font-size:13px; padding:9px 12px; border:1px solid var(--line); border-radius:999px; color:#0b1220; background:#fff; text-decoration:none; display:inline-flex; gap:8px; align-items:center
  }
  .chip .i{opacity:.7}
  .chip.copy{background:#0b1220;color:#fff;border-color:#0b1220}

  /* ===== End CTA ===== */
  .end-cta{
    margin-top:28px; border-radius:18px; padding:28px; position:relative; overflow:hidden;
    color:#e8eefc; background: radial-gradient(1200px 300px at -10% 110%, rgba(93,135,255,.12), transparent 60%), #0a0f1e;
  }
  .end-cta h3{margin:0 0 8px; color:#fff; font-size:24px}
  .end-cta p{margin:0 0 16px}
  .end-cta .btn-white{
    background:#fff; color:#0a0f1e; padding:12px 18px; border:none; border-radius:12px; text-decoration:none; font-weight:800;
    box-shadow:0 10px 24px rgba(255,255,255,.18)
  }

  /* ===== Animations ===== */
  .reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
  .reveal.in{opacity:1; transform:none}
  .reveal[data-stagger]{ transition-delay: var(--sd, 0ms); }

  /* Responsive hardening */
  @media (min-width: 1440px){ .page-wrap,.hero-inner{ max-width:1280px } }
  @media (max-width: 992px){ .hero-inner{ padding:125px 20px 72px } .sidebar{ position:static } }
  @media (max-width: 768px){
    .content{ padding:22px }
    .inline-cta{ gap:12px }
    .inline-cta .btn-primary-clean{ width:100%; justify-content:center; margin-left:0 }
    .share{ gap:8px }
    .hero .meta{ font-size:.9rem }
  }
  @media (max-width: 540px){
    .h-title{ font-size: clamp(24px, 7vw, 34px) }
    .h-sub{ font-size: 1rem }
    .cover{ aspect-ratio: 16/9 }
    .content h2{ margin-top:24px }
    .chip{ padding:8px 10px }
  }
  @media (max-width: 360px){ .eyebrow{ letter-spacing:.06em; padding:5px 10px } .side-btn{ padding:9px 12px } }

  .progress-holder{ position: fixed !important; top:0; left:0; right:0; height:4px; z-index:2000; pointer-events:none; background:transparent; }
  
  
  /* ================================
   TTS — one-line, sleek, responsive
   ================================ */

:root{ --brand:#ef7f22; }

/* Bar container */
.tts-wrap{
  position:relative;
  display:flex; align-items:center; gap:18px;
  flex-wrap:nowrap;                 /* stay on one row */
  white-space:nowrap;
  margin:18px 28px; padding:14px 16px;
  border-radius:28px;
  background:linear-gradient(180deg,#0e1626 0%, #0b1223 100%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 22px 40px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.05);
  color:#e6edf8;

  /* allow sideways scroll on tiny screens; keep dropdowns visible */
  overflow-x:auto;
  overflow-y:visible;
  scrollbar-width:none;            /* Firefox hide bar */
}
.tts-wrap::-webkit-scrollbar{ display:none }

/* Left cluster (buttons) */
.tts-left{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }

/* Buttons */
.tts-btn{
  appearance:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:16px; font-weight:800;
  border:1px solid rgba(255,255,255,.14);
  color:#e6edf8; background:#111b2e;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.tts-btn:hover{ transform:translateY(-1px) }
.tts-btn:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(93,135,255,.35) }
#ttsPlayPause{
  background:linear-gradient(180deg, var(--brand), #f59e0b);
  color:#fff; border-color:transparent; box-shadow:0 12px 26px rgba(239,127,34,.30);
}
#ttsStop{
  background:#111b2e; color:#e6edf8; border-color:rgba(255,255,255,.16);
}

/* Divider */
.tts-divider{
  width:1px; height:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
}

/* Right cluster */
.tts-right{
  display:flex; align-items:center; gap:10px;
  flex:1 1 auto;                   /* take remaining width */
  min-width:0;                     /* allow children to shrink */
  white-space:nowrap;
}
.tts-label{ font-size:12px; color:#cdd6ea }

/* Speed slider */
#ttsRate{ flex:0 0 220px; max-width:40vw; height:6px; background:transparent; border:none; outline:none; }
#ttsRate::-webkit-slider-runnable-track{ height:6px; border-radius:999px; background:rgba(255,255,255,.18) }
#ttsRate::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; margin-top:-6px; border-radius:999px;
  background:linear-gradient(180deg, var(--brand), #f59e0b);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:0 6px 14px rgba(239,127,34,.35);
}
#ttsRate::-moz-range-track{ height:6px; border-radius:999px; background:rgba(255,255,255,.18) }
#ttsRate::-moz-range-thumb{
  width:18px; height:18px; border-radius:999px; border:none;
  background:linear-gradient(180deg, var(--brand), #f59e0b);
  box-shadow:0 6px 14px rgba(239,127,34,.35);
}

/* Voice select */
#ttsVoice{
  flex:0 0 340px; width:340px; max-width:48vw;
  border:1px solid rgba(255,255,255,.18);
  background:#0f1a2e; color:#e6edf8;
  padding:10px 12px; border-radius:12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
}
#ttsVoice:focus{ outline:0; box-shadow:0 0 0 3px rgba(93,135,255,.28); border-color: rgba(93,135,255,.45); }

/* Hide status chip text (no “Reading/Paused” pill) */
.tts-status{ display:none }

/* Highlight currently spoken paragraph */
.tts-current{
  background:linear-gradient(90deg, rgba(239,127,34,.10), transparent);
  border-radius:8px;
}

/* Tighten responsively (still one line) */
@media (max-width: 1024px){ #ttsRate{ flex-basis:190px } #ttsVoice{ flex-basis:320px } }
@media (max-width: 820px){  #ttsRate{ flex-basis:170px } #ttsVoice{ flex-basis:280px } }
@media (max-width: 640px){  #ttsRate{ flex-basis:150px } #ttsVoice{ flex-basis:240px } }
@media (max-width: 520px){  #ttsRate{ flex-basis:130px } #ttsVoice{ flex-basis:220px } }



#ttsVoice{
  flex: 0 0 270px;   /* was ~340px; makes it narrower */
  width: 270px;
  max-width: 270px;  /* prevents stretching */
  padding: 8px 10px; /* slimmer padding */
  font-size: 14px;   /* smaller text */
  border-radius: 10px;
}

/* Optional: shrink the speed slider a bit too, so the row feels balanced */
#ttsRate{ flex-basis: 180px; }

/* Extra-tight on small screens */
@media (max-width: 640px){
  #ttsVoice{ flex-basis: 200px; width: 200px; max-width: 200px; }
  #ttsRate{  flex-basis: 160px; }
}

/* ===== <= 900px: 2 lines
   Line 1: centered Play/Stop
   Line 2: Speed + Voice on one row
================================================== */
@media (max-width: 900px){
  .tts-wrap{
    flex-wrap: wrap;          /* allow exactly two rows */
    white-space: normal;      /* undo nowrap */
    overflow-x: visible;
    gap: 14px 16px;
    padding: 14px 14px;
  }

  /* Hide divider so it doesn't create micro-rows */
  .tts-divider{ display:none !important; }

  /* ----- LINE 1: buttons centered ----- */
  .tts-left{
    order: 1;
    flex: 1 0 100%;
    display: flex;
    justify-content: center;  /* center Play + Stop */
    align-items: center;
    gap: 12px;
  }

  /* ----- LINE 2: Speed + Voice on ONE row ----- */
  .tts-right{
    order: 2;
    flex: 1 0 100%;
    width: 100%;

    display: flex;            /* inline sequence: label, slider, label, select */
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;        /* keep it one row */
  }

  /* Labels stay compact and on one line */
  .tts-label{
    font-size: 12px;
    color: #cdd6ea;
    white-space: nowrap;
    flex: 0 0 auto;
    margin-right: 4px;
  }

  /* Slider takes ~55% of the row and can shrink gently */
  #ttsRate{
    flex: 1 1 55%;
    min-width: 140px;         /* keep some usability */
    width: auto !important;  /* override fixed widths */
  }

  /* Voice select takes the rest */
  #ttsVoice{
    flex: 1 1 45%;
    min-width: 160px;
    max-width: none;          /* allow it to grow with row */
  }

  /* Ensure status (if present) doesn’t push a third line */
  .tts-status{ display:none !important; }
}

/* Optional: a little more squeeze on very narrow phones */
@media (max-width: 560px){
  .tts-right{ gap: 10px; }
  #ttsRate{ min-width: 120px; }
  #ttsVoice{ min-width: 140px; }
}

/* ===== <= 485px: put Voice on its own centered line ===== */
@media (max-width: 485px){
  .tts-wrap{
    justify-content: center;      /* overall centering */
    gap: 12px 14px;
  }

  /* Line 1: Play/Stop already centered by the <=900 rules,
     keep them centered here too */
  .tts-left{
    order: 1;
    flex: 1 0 100%;
    justify-content: center;
  }

  /* Line 2 container */
  .tts-right{
    order: 2;
    flex: 1 0 100%;
    justify-content: center;      /* center the row */
    align-items: center;
    gap: 10px 12px;
    flex-wrap: wrap;              /* allow voice to move to next line */
  }

  /* Speed bits stay on the same row and are centered */
  .tts-label[for="ttsRate"]{
    flex: 0 0 auto;
    text-align: right;
    white-space: nowrap;
  }
  #ttsRate{
    flex: 0 1 260px;              /* friendly width on small screens */
    min-width: 200px;
    max-width: 320px;
  }

  /* Force Voice label + select to start a new line and center them */
  .tts-label[for="ttsVoice"]{
    flex: 0 0 100%;
    text-align: center;
    padding-top: 6px;
  }
  #ttsVoice{
    flex: 0 0 100%;
    width: 100%;
    max-width: 420px;             /* tidy size */
    margin: 4px auto 0;           /* center the select */
  }
}

.cyber-table {
  margin: 20px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.cyber-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.6;
}

.cyber-table thead {
  background: #0b1b3a;
  color: #fff;
}

.cyber-table th,
.cyber-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e5e5e5;
}

.cyber-table tbody tr:hover {
  background-color: #f6f8fb;
  transition: 0.2s;
}

.cyber-table th {
  font-weight: 600;
  letter-spacing: 0.3px;
}

@media (max-width: 768px) {
  .cyber-table table, 
  .cyber-table thead, 
  .cyber-table tbody, 
  .cyber-table th, 
  .cyber-table td, 
  .cyber-table tr {
    display: block;
  }

  .cyber-table thead {
    display: none;
  }

  .cyber-table tr {
    margin-bottom: 15px;
    background: #fff;
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  }

  .cyber-table td {
    border: none;
    position: relative;
    padding-left: 50%;
  }

  .cyber-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 15px;
    width: 45%;
    font-weight: 600;
    color: #0b1b3a;
  }
}