:root{
    /* deep navy pulled from cover art */
    --bg:        oklch(0.15 0.035 250);
    --bg-2:      oklch(0.19 0.045 250);
    --surface:   oklch(0.22 0.05 250);
    --line:      oklch(0.32 0.045 250);
    --line-soft: oklch(0.26 0.04 250 / 0.6);
    --fg:        oklch(0.97 0.005 250);
    --fg-dim:    oklch(0.78 0.015 250);
    --fg-mute:   oklch(0.58 0.02 250);
    --accent:    oklch(0.78 0.14 240);   /* electric cover blue */
    --accent-2:  oklch(0.62 0.17 250);
    --accent-ink:oklch(0.18 0.05 250);

    --sans:    'Inter', system-ui, sans-serif;
    --display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --mono:    'JetBrains Mono', ui-monospace, monospace;

    --maxw: 1180px;

    /* atmospheric layer opacities (tuned per theme) */
    --atmos-opacity: 1;
    --grid-opacity: .35;
    --cover-shadow: 0 40px 80px -20px oklch(0.15 0.1 250 / 0.7);
  }

  [data-theme="light"]{
    --bg:        oklch(0.985 0.003 250);
    --bg-2:      oklch(0.965 0.006 250);
    --surface:   oklch(0.94 0.01 250);
    --line:      oklch(0.84 0.015 250);
    --line-soft: oklch(0.88 0.012 250 / 0.9);
    --fg:        oklch(0.2 0.03 250);
    --fg-dim:    oklch(0.38 0.025 250);
    --fg-mute:   oklch(0.55 0.02 250);
    --accent:    oklch(0.52 0.17 248);
    --accent-2:  oklch(0.48 0.18 250);
    --accent-ink:oklch(0.98 0.005 250);

    --atmos-opacity: .45;
    --grid-opacity: .5;
    --cover-shadow: 0 30px 60px -24px oklch(0.3 0.1 250 / 0.3);
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}

  /* Default link color in both themes — uses the accent variable so
     prose-level links (transcripts, recommendation lists, outro
     "paperdive.ai" mentions, etc.) match the homepage instead of falling
     through to browser-default blue/visited-purple. Specific link rules
     (.nav-links a, .foot a, .about .origin p a, .ep-marker, ...) still
     win on their own selectors. */
  a{
    color: var(--accent);
  }
  a:visited{
    color: var(--accent);
  }
  body{
    background:var(--bg);
    color:var(--fg);
    font-family:var(--sans);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
    transition: background .3s ease, color .3s ease;
  }

  /* Subtle atmospheric gradient, static */
  body::before{
    content:"";
    position:fixed; inset:0;
    background:
      radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.35 0.12 245 / 0.35), transparent 60%),
      radial-gradient(ellipse 60% 40% at 85% 20%, oklch(0.55 0.16 235 / 0.18), transparent 70%),
      radial-gradient(ellipse 70% 50% at 10% 90%, oklch(0.3 0.1 255 / 0.22), transparent 70%);
    pointer-events:none;
    z-index:0;
    opacity: var(--atmos-opacity);
  }
  [data-theme="light"] body::before{
    background:
      radial-gradient(ellipse 80% 50% at 50% -10%, oklch(0.78 0.14 245 / 0.12), transparent 60%),
      radial-gradient(ellipse 60% 40% at 85% 20%, oklch(0.72 0.16 235 / 0.08), transparent 70%),
      radial-gradient(ellipse 70% 50% at 10% 90%, oklch(0.8 0.1 255 / 0.1), transparent 70%);
  }
  /* Grain */
  body::after{
    content:"";
    position:fixed; inset:0;
    background-image:
      linear-gradient(to right, oklch(0.4 0.05 250 / 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, oklch(0.4 0.05 250 / 0.05) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    pointer-events:none;
    z-index:0;
    opacity: var(--grid-opacity);
  }
  [data-theme="light"] body::after{
    background-image:
      linear-gradient(to right, oklch(0.5 0.02 250 / 0.05) 1px, transparent 1px),
      linear-gradient(to bottom, oklch(0.5 0.02 250 / 0.05) 1px, transparent 1px);
  }

  main, header, footer{position:relative; z-index:1}

  .wrap{
    max-width:var(--maxw);
    margin:0 auto;
    padding:0 32px;
  }

  /* ── header ─────────────────────────────────────── */
  header{
    padding:18px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }
  .brand{
    display:flex; align-items:center; gap:12px;
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.02em;
    color:var(--fg-dim);
    text-decoration:none;
  }
  .brand .dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 14px var(--accent);
  }
  .brand b{color:var(--fg); font-weight:500}
  .nav-links{
    display:flex; gap:28px;
    align-items:center;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--fg-dim);
  }
  /* Desktop: brand on left, nav-links + toggle pushed right.
     justify-content:space-between in .nav puts brand at one end and
     the next sibling group at the other. With the toggle now a
     direct child of .nav (no longer nested inside .nav-links), we
     pull .nav-links + toggle right by giving the first sibling
     after the brand a left auto margin. */
  .nav-links { margin-left: auto; }
  .nav > .theme-toggle { margin-left: 16px; }
  .nav-links a{
    color:inherit;
    text-decoration:none;
    transition:color .15s ease;
  }
  .nav-links a:hover{color:var(--fg)}

  /* theme toggle */
  .theme-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px; height:36px;
    border-radius:999px;
    border:1px solid var(--line);
    background:transparent;
    color:var(--fg-dim);
    cursor:pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
    margin-left:20px;
  }
  .theme-toggle:hover{
    color:var(--accent);
    border-color:var(--accent);
  }
  .theme-toggle svg{width:16px; height:16px}
  .theme-toggle .sun,
  .theme-toggle .moon{transition:opacity .2s ease, transform .2s ease}
  [data-theme="light"] .theme-toggle .moon{display:none}
  [data-theme="dark"] .theme-toggle .sun,
  :root:not([data-theme]) .theme-toggle .sun{display:none}

  /* ── hero ───────────────────────────────────────── */
  .hero{
    padding:10px 0 72px;
    display:grid;
    grid-template-columns: 1.15fr 1fr;
    gap:80px;
    align-items:center;
  }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--mono);
    font-size:11.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    padding:6px 12px;
    border:1px solid oklch(0.62 0.17 250 / 0.35);
    border-radius:999px;
    background:oklch(0.62 0.17 250 / 0.08);
  }
  .eyebrow .pulse{
    width:6px; height:6px; border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 8px var(--accent);
  }

  h1.title{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(44px, 6.2vw, 82px);
    line-height:1.02;
    letter-spacing:-0.025em;
    margin:22px 0 24px;
    text-wrap:balance;
  }
  h1.title .grad{
    background:linear-gradient(180deg, var(--fg) 0%, var(--accent) 130%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  h1.title em{
    font-style:italic;
    font-weight:400;
    color:var(--accent);
    font-family:var(--display);
  }

  .lede{
    font-size:19px;
    line-height:1.55;
    color:var(--fg-dim);
    max-width:52ch;
    margin:0 0 36px;
    text-wrap:pretty;
  }

  .hero-meta{
    display:flex; flex-wrap:wrap;
    gap:28px 36px;
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--fg-mute);
    letter-spacing:.02em;
  }
  .hero-meta dt{
    color:var(--fg-mute);
    text-transform:uppercase;
    font-size:10.5px;
    letter-spacing:.16em;
    margin-bottom:6px;
  }
  .hero-meta dd{
    margin:0;
    color:var(--fg);
    font-size:13.5px;
  }

  /* cover art */
  .cover-wrap{
    position:relative;
    aspect-ratio:1/1;
    border-radius:14px;
    overflow:hidden;
    box-shadow:
      0 1px 0 oklch(0.85 0.1 240 / 0.08) inset,
      var(--cover-shadow),
      0 0 0 1px var(--line);
  }
  .cover-wrap img{
    display:block;
    width:100%; height:100%;
    object-fit:cover;
  }
  .cover-wrap::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 60%, oklch(0.1 0.05 250 / 0.5));
    pointer-events:none;
  }

  .cover-caption{
    margin-top:16px;
    display:flex; justify-content:flex-end; align-items:center;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--fg-mute);
    letter-spacing:.06em;
    text-transform:uppercase;
  }

  /* ── about ──────────────────────────────────────── */
  section{padding:96px 0; border-top:1px solid var(--line-soft)}

  .section-label{
    font-family:var(--mono);
    font-size:11px;
    font-weight:400;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--fg-mute);
    margin:0 0 28px;
    display:flex; align-items:center; gap:14px;
  }
  .section-label::after{
    content:""; flex:1; height:1px; background:var(--line-soft);
  }

  .about{
    display:grid;
    grid-template-columns: 180px 1fr;
    gap:56px;
    align-items:start;
  }
  .about h2{
    font-family:var(--display);
    font-weight:500;
    font-size:14px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--fg-mute);
    margin:0;
  }
  .about p{
    font-family:var(--display);
    font-weight:400;
    font-size:clamp(22px, 2.3vw, 30px);
    line-height:1.35;
    color:var(--fg);
    margin:0 0 28px;
    text-wrap:pretty;
    letter-spacing:-0.01em;
  }
  .about p strong{
    color:var(--accent);
    font-weight:500;
  }
  .about .fine{
    font-family:var(--sans);
    font-size:15.5px;
    color:var(--fg-dim);
    line-height:1.6;
    max-width:78ch;
  }

  /* "How this started" sub-section. Lives in a second grid row inside
     .about so its heading lands in the same 180px label column as the
     "About" h2 above, and its prose sits in the matching content column. */
  .about .origin-label{
    font-family:var(--display);
    font-weight:500;
    font-size:14px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--fg-mute);
    margin:0;
  }
  .about .origin p{
    font-family:var(--sans);
    font-weight:400;
    font-size:15.5px;
    line-height:1.6;
    color:var(--fg-dim);
    max-width:78ch;
    margin:0 0 14px;
    letter-spacing:0;
  }
  .about .origin p:last-child{
    margin-bottom:0;
  }
  .about .origin p a{
    color:var(--accent);
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-thickness:1px;
  }

  /* ── feature grid ──────────────────────────────── */
  .features{
    margin-top:48px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line-soft);
    border:1px solid var(--line-soft);
    border-radius:2px;
  }
  .feat{
    background:var(--bg);
    padding:28px 26px 30px;
  }
  .feat-num{
    font-family:var(--mono);
    font-size:11px;
    color:var(--accent);
    letter-spacing:.1em;
    margin-bottom:14px;
  }
  .feat-title{
    font-family:var(--display);
    font-weight:500;
    font-size:17px;
    line-height:1.3;
    margin:0 0 10px;
    color:var(--fg);
    letter-spacing:-0.005em;
  }
  .about .feat p.feat-body,
  p.feat-body{
    font-family:var(--sans);
    font-size:14px;
    color:var(--fg-dim);
    line-height:1.55;
    margin:0;
    letter-spacing:0;
  }

  /* ── episodes placeholder ──────────────────────── */
  .episodes{
    display:grid;
    grid-template-columns: 180px 1fr;
    gap:56px;
    align-items:start;
  }
  .ep-head h2{
    font-family:var(--display);
    font-weight:500;
    font-size:14px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--fg-mute);
    margin:0 0 16px;
  }
  .ep-head .note{
    font-family:var(--mono);
    font-size:12px;
    color:var(--fg-mute);
    line-height:1.7;
  }

  .ep-placeholder{
    border:1px dashed var(--line);
    border-radius:4px;
    padding:56px 48px;
    background:
      repeating-linear-gradient(
        135deg,
        transparent 0,
        transparent 18px,
        var(--bg-2) 18px,
        var(--bg-2) 19px
      );
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
  }
  .ep-placeholder .big{
    font-family:var(--display);
    font-size:clamp(28px, 3vw, 40px);
    font-weight:500;
    letter-spacing:-0.015em;
    line-height:1.15;
    color:var(--fg);
    margin:0;
    text-wrap:balance;
  }
  .ep-placeholder .sub{
    font-family:var(--mono);
    font-size:12px;
    color:var(--fg-mute);
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .ep-placeholder .waiting{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--accent);
    letter-spacing:.14em;
    text-transform:uppercase;
    margin-top:8px;
  }
  .ep-placeholder .waiting::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 10px var(--accent);
    animation:pulse 2.2s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:1}
    50%{opacity:.35}
  }

  /* ── listen ─────────────────────────────────────── */
  .listen{
    display:grid;
    grid-template-columns: 180px 1fr;
    gap:56px;
    align-items:center;
  }
  .listen h2{
    font-family:var(--display);
    font-weight:500;
    font-size:14px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--fg-mute);
    margin:0;
  }

  .apple-btn, .spotify-btn{
    display:inline-flex;
    align-items:center;
    gap:18px;
    padding:22px 32px;
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--bg-2);
    color:var(--fg);
    text-decoration:none;
    transition:all .2s ease;
    max-width:420px;
  }
  .apple-btn:hover, .spotify-btn:hover{
    border-color:var(--accent);
    transform:translateY(-1px);
    box-shadow:0 12px 30px -12px oklch(0.5 0.17 245 / 0.5);
  }
  .apple-btn svg, .spotify-btn svg{flex-shrink:0}
  .apple-btn .txt, .spotify-btn .txt{display:flex; flex-direction:column; gap:2px}
  .apple-btn .eyebrow-sm, .spotify-btn .eyebrow-sm{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--fg-mute);
  }
  .apple-btn .label, .spotify-btn .label{
    font-family:var(--display);
    font-size:20px;
    font-weight:500;
    color:var(--fg);
  }
  .apple-btn .arrow, .spotify-btn .arrow{
    margin-left:auto;
    color:var(--fg-mute);
    transition:transform .2s ease, color .2s ease;
  }
  .apple-btn:hover .arrow, .spotify-btn:hover .arrow{transform:translateX(4px); color:var(--accent)}

  .listen-buttons{display:flex; flex-wrap:wrap; gap:14px}

  .more-coming{
    font-family:var(--mono);
    font-size:12px;
    color:var(--fg-mute);
    margin-top:18px;
    letter-spacing:.04em;
  }

  /* ── footer ─────────────────────────────────────── */
  footer{
    border-top:1px solid var(--line-soft);
    padding:40px 0 48px;
    margin-top:40px;
  }
  .foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--fg-mute);
    letter-spacing:.04em;
  }
  .foot a{color:var(--fg-dim); text-decoration:none}
  .foot a:hover{color:var(--accent)}

  /* ── episode list (home page) ──────────────────── */
  .ep-empty{
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line-soft);
    padding:36px 4px;
    text-align:center;
    color:var(--fg-2, var(--fg));
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.02em;
  }
  .ep-empty p{margin:0}
  .ep-list{
    list-style:none;
    margin:0;
    padding:0;
    border-top:1px solid var(--line-soft);
  }
  .ep-list li{
    border-bottom:1px solid var(--line-soft);
  }
  .ep-row{
    display:grid;
    grid-template-columns: 56px 1fr auto;
    align-items:center;
    gap:24px;
    padding:22px 4px;
    color:var(--fg);
    text-decoration:none;
    transition: background .15s ease, padding .15s ease;
  }
  .ep-row:hover{
    background: var(--bg-2);
    padding-left:12px;
    padding-right:12px;
  }
  .ep-num{
    font-family:var(--mono);
    font-size:12px;
    color:var(--fg-mute);
    letter-spacing:.08em;
  }
  .ep-row:hover .ep-num{color:var(--accent)}
  .ep-title{
    font-family:var(--display);
    font-weight:500;
    font-size:17px;
    line-height:1.25;
    color:var(--fg);
    letter-spacing:-0.01em;
    margin-bottom:6px;
  }
  .ep-sub{
    display:flex; flex-wrap:wrap; gap:0 10px;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--fg-mute);
    letter-spacing:.02em;
  }
  .ep-sub .dot-sep{opacity:.5}
  .ep-arrow{
    color:var(--fg-mute);
    transition: color .15s ease, transform .15s ease;
  }
  .ep-row:hover .ep-arrow{
    color:var(--accent);
    transform:translateX(3px);
  }

  .view-all{
    display:inline-flex; align-items:center; gap:10px;
    margin-top:22px;
    padding:10px 4px;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color: oklch(0.82 0.13 240);
    text-decoration:none;
    transition: color .15s ease, gap .15s ease;
  }
  .view-all:hover{ color: oklch(0.92 0.12 240); gap:14px; }
  [data-theme="light"] .view-all{ color: var(--accent) }
  [data-theme="light"] .view-all:hover{ color: oklch(0.42 0.18 248) }

  /* ── responsive ─────────────────────────────────── */
  @media (max-width: 860px){
    .hero{grid-template-columns:1fr; gap:48px; padding:56px 0 80px}
    .hero-right{order:-1; max-width:420px}
    .about, .episodes, .listen{grid-template-columns:1fr; gap:32px}
    .features{grid-template-columns:1fr}
    section{padding:64px 0}
    .ep-placeholder{padding:36px 28px}

    /* Mobile nav: brand + theme toggle on row 1 (toggle right-
       aligned); nav-links wraps onto row 2 below. The .theme-toggle
       is a sibling of .nav-links, not nested, so flex layout puts
       it next to the brand naturally. */
    .nav{ flex-wrap: wrap; row-gap: 8px; align-items: center; }
    .nav-links{
      order: 3;                /* after brand (1) + toggle (2) */
      flex-basis: 100%;
      margin-left: 0;          /* override the desktop right-pull */
      gap: 4px 14px;
      flex-wrap: wrap;
      font-size: 12px;
    }
    .nav-links a{
      display: inline-flex;
      padding: 4px 0;
    }
    .nav > .theme-toggle{
      order: 2;
      margin-left: auto;       /* pin to the right of row 1 */
    }

    .wrap{padding:0 22px}
    .ep-row{grid-template-columns: 40px 1fr auto; gap:16px; padding:18px 4px}
    .ep-title{font-size:15px}
  }

/* Inline glossary affordance + anchored popover. Used on review,
   episode, and any other generated page that wraps terms in
   <abbr class="gloss">. The popover element itself is created once by
   _render_gloss_popover_script and reused across taps. Two-tier:
   .gloss-plain carries data-def (always shown), .gloss-tech carries
   data-tech (hidden when empty). */
abbr.gloss{
  border: 0;
  border-bottom: 1px dotted var(--fg-mute);
  cursor: help;
  text-decoration: none;
}
abbr.gloss:hover,
abbr.gloss[aria-expanded="true"]{
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.gloss-popover{
  position: absolute;
  z-index: 50;
  max-width: 320px;
  padding: 10px 12px;
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--fg-mute);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  font-size: 14px;
  line-height: 1.5;
}
.gloss-popover[hidden]{ display: none }
.gloss-popover .gloss-plain{
  color: var(--fg);
}
.gloss-popover .gloss-tech{
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--fg-mute);
  color: var(--fg-dim);
  font-size: 13px;
  line-height: 1.5;
}
.gloss-popover .gloss-tech[hidden]{ display: none }
.gloss-popover .gloss-more{
  display: inline-block;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--accent);
  text-decoration: none;
}
.gloss-popover .gloss-more:hover{ text-decoration: underline }
.gloss-popover .gloss-more[hidden]{ display: none }
.gloss-popover::before{
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--bg-2);
  border-left: 1px solid var(--fg-mute);
  border-top: 1px solid var(--fg-mute);
  transform: rotate(45deg);
  top: -6px;
  left: 18px;
}
.gloss-popover[data-position="above"]::before{
  top: auto;
  bottom: -6px;
  transform: rotate(225deg);
}
@media (max-width: 860px){
  .gloss-popover{
    max-width: none;
    left: 12px !important;
    right: 12px !important;
  }
  .gloss-popover::before{ left: 24px }
}

/* ── back-to-top button ───────────────────────────────────────────
   Fixed bottom-right pill that fades in once the user scrolls past
   400px. Hidden by default (opacity:0 + pointer-events:none) so
   no-JS users never see it. Inline JS on each page adds .visible
   on scroll past the threshold. */
.back-to-top{
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--fg-mute);
  background: var(--bg);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, color .12s ease, border-color .12s ease;
  z-index: 50;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.back-to-top.visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover{
  color: var(--accent);
  border-color: var(--accent);
}
.back-to-top:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 860px){
  .back-to-top{
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
  }
}