:root{
    --bg:#FAF5EA; --ink:#1A1714; --muted:#5A5550; --line:#D8C9AC;
    --media:#2a6fb0; --aud:#2e8b57; --heat:#e0542e; --amber:#e08a1e;
    --card:#ffffff; --accent:#e0542e;
    --maxw:1180px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
    font-family:"IBM Plex Sans","IBM Plex Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased}
  .deck{position:fixed;inset:0;overflow:hidden}
  .slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
    padding:4.5vh 5vw 8vh;opacity:0;visibility:hidden;transform:translateY(14px);
    transition:opacity .45s ease,transform .45s ease}
  .slide.active{opacity:1;visibility:visible;transform:none}
  .wrap{width:100%;max-width:var(--maxw);margin:0 auto}
  .kicker{display:inline-block;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
    color:var(--heat);font-weight:700;margin-bottom:.6rem}
  h1{font-size:clamp(1.8rem,3.6vw,3.2rem);line-height:1.08;margin:.2rem 0 .4rem;letter-spacing:-.01em}
  h2{font-size:clamp(1.4rem,2.7vw,2.25rem);line-height:1.12;margin:.1rem 0 .8rem;letter-spacing:-.01em}
  p,li{font-size:clamp(.95rem,1.3vw,1.12rem);line-height:1.5;color:var(--ink)}
  .muted{color:var(--muted)}
  .lead{font-size:clamp(1.05rem,1.55vw,1.3rem);color:var(--muted);max-width:46ch}
  ul.take{list-style:none;padding:0;margin:.6rem 0 0}
  ul.take li{position:relative;padding-left:1.4rem;margin:.5rem 0}
  ul.take li::before{content:"";position:absolute;left:0;top:.62em;width:.55rem;height:.55rem;
    border-radius:2px;background:var(--accent)}
  .grid{display:grid;gap:2.2rem;align-items:center}
  .g2{grid-template-columns:1.05fr 1fr}
  .g2c{grid-template-columns:1fr 1fr}
  .chart{width:100%;background:var(--card);border:1px solid var(--line);border-radius:14px;
    box-shadow:0 6px 24px rgba(30,35,48,.06);padding:.5rem .4rem .2rem}
  .chart.tall{height:62vh}
  .chart.med{height:42vh}
  .chart.sm{height:34vh}
  .cap{font-size:.82rem;color:var(--muted);margin:.35rem .4rem 0}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1rem}
  .card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem}
  .card h3{margin:.1rem 0 .35rem;font-size:1.05rem}
  .card .n{font-size:.86rem;color:var(--muted);line-height:1.45}
  .pill{display:inline-block;padding:.18rem .55rem;border-radius:999px;font-size:.74rem;font-weight:700;
    letter-spacing:.04em}
  .pill.media{background:rgba(42,111,176,.12);color:var(--media)}
  .pill.aud{background:rgba(46,139,87,.12);color:var(--aud)}
  .pill.heat{background:rgba(224,84,46,.12);color:var(--heat)}
  .eq{font-family:"SFMono-Regular",Consolas,Menlo,monospace;background:#fff;border:1px dashed var(--line);
    border-radius:10px;padding:.7rem .9rem;font-size:.95rem;color:#2b3242;overflow-x:auto}
  .big{font-size:clamp(2.4rem,6vw,4.6rem);font-weight:800;line-height:1;letter-spacing:-.02em}
  .big.media{color:var(--media)} .big.aud{color:var(--aud)} .big.heat{color:var(--heat)}
  .stat{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:.6rem}
  .stat .s{min-width:150px}
  .stat .s .lab{font-size:.82rem;color:var(--muted);margin-top:.2rem}
  .toggle{display:inline-flex;gap:.3rem;margin:.2rem 0 .6rem}
  .toggle button{border:1px solid var(--line);background:#fff;color:var(--muted);padding:.32rem .8rem;
    border-radius:999px;font-size:.84rem;cursor:pointer;font-weight:600}
  .toggle button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
  .title-wrap{max-width:980px;margin:0 auto;text-align:left}
  .title-rule{height:6px;width:84px;background:linear-gradient(90deg,var(--heat),var(--amber));border-radius:3px;margin:1.2rem 0 1.6rem}
  .authors{font-size:1.05rem;color:var(--ink);margin-top:.4rem}
  .venue{margin-top:1.4rem;color:var(--muted);font-size:.95rem}
  /* footer / nav */
  .footer{position:fixed;left:0;right:0;bottom:0;height:46px;display:flex;align-items:center;
    justify-content:space-between;padding:0 18px;font-size:.8rem;color:var(--muted);
    border-top:1px solid var(--line);background:rgba(247,246,243,.86);backdrop-filter:blur(6px)}
  .dots{display:flex;gap:7px}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--line);cursor:pointer;border:none;padding:0}
  .dot.on{background:var(--heat);transform:scale(1.25)}
  .nav{display:flex;gap:8px}
  .nav button{border:1px solid var(--line);background:#fff;border-radius:8px;width:30px;height:26px;
    cursor:pointer;color:var(--ink);font-size:.9rem;line-height:1}
  .progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--heat),var(--amber));
    z-index:50;transition:width .35s ease}
  /* 10-minute countdown */
  #timer{position:fixed;top:11px;left:50%;transform:translateX(-50%);z-index:60;
    font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-weight:700;font-size:1.02rem;
    letter-spacing:.06em;color:var(--ink);background:rgba(255,255,255,.93);border:1px solid var(--line);
    border-radius:999px;padding:.26rem .8rem;box-shadow:0 4px 14px rgba(30,35,48,.10);cursor:pointer;
    user-select:none;display:flex;align-items:center;gap:.5rem;transition:color .2s,background .2s,border-color .2s}
  #timer .led{width:.52rem;height:.52rem;border-radius:50%;background:#c4cad4;transition:background .2s}
  #timer.run .led{background:#2e8b57}
  #timer.warn{color:#a86a12;border-color:var(--amber);background:rgba(224,138,30,.10)}
  #timer.danger{color:#fff;background:var(--heat);border-color:var(--heat)}
  #timer.danger .led{background:#fff}
  @keyframes tpulse{0%,100%{opacity:1}50%{opacity:.4}}
  #timer.expired{animation:tpulse 1s infinite}
  .note{font-size:.84rem;color:var(--muted);background:rgba(224,138,30,.08);border-left:3px solid var(--amber);
    padding:.5rem .8rem;border-radius:6px;margin-top:.8rem}
  .two-col{columns:2;column-gap:2.4rem}
  /* presenter marker */
  .pbadge{display:inline-block;margin-left:.45rem;padding:.07rem .45rem;border-radius:999px;font-size:.6rem;
    font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:var(--heat);color:#fff;vertical-align:middle}
  #t-authors .presenter{font-weight:800;border-bottom:2px solid var(--heat)}
  /* foldable model math */
  details.acc{margin-top:1rem;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
  details.acc>summary{cursor:pointer;list-style:none;padding:.65rem 1rem;font-weight:700;font-size:.92rem;
    color:var(--ink);background:#fbfaf7;display:flex;align-items:center;gap:.5rem}
  details.acc>summary::-webkit-details-marker{display:none}
  details.acc>summary::before{content:"\25B8";color:var(--heat);transition:transform .2s;display:inline-block}
  details.acc[open]>summary::before{transform:rotate(90deg)}
  .accbody{padding:.3rem 1rem 1rem}
  .accgrp{margin-top:.65rem}
  .acch{font-weight:700;font-size:.86rem;color:var(--heat);margin-bottom:.3rem}
  .eqs>div{font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:.84rem;line-height:1.65;
    padding:.16rem 0;border-bottom:1px dashed #eee}
  .eqs>div:last-child{border-bottom:none}
  .eqs b{color:var(--ink)} .eqs .why{font-family:inherit;color:var(--muted);font-size:.82rem}
  /* author hover cards */
  .author{position:relative;display:inline-block}
  .author .nm{cursor:pointer}
  .author.is-presenter .nm{font-weight:800;border-bottom:2px solid var(--heat)}
  .author:not(.is-presenter) .nm{border-bottom:1px dotted #9aa3b2}
  .apop{position:absolute;left:0;top:100%;z-index:80;display:none;padding-top:9px}
  .author:hover .apop{display:block}
  .acard{display:block;background:#ffffff;border:1px solid #d3cdc1;border-radius:10px;box-shadow:0 14px 34px rgba(30,35,48,.26);padding:.65rem .78rem;min-width:240px}
  .acard .aff{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.45rem}
  .acard .links{display:flex;flex-wrap:wrap;gap:.34rem}
  .acard .links a{font-size:.74rem;text-decoration:none;color:var(--media);border:1px solid var(--line);
    border-radius:999px;padding:.1rem .52rem;transition:.15s}
  .acard .links a:hover{background:var(--media);color:#fff;border-color:var(--media)}
  .ahint{font-size:.76rem;color:var(--muted);margin-top:.55rem}
  /* model-shape mini charts (inside facet card) */
  #riseShapes,#decayShapes{width:100%;height:15vh;min-height:116px}
  details.acc .accbody{max-height:58vh;overflow-y:auto}
  details.acc.mini>summary{font-size:.84rem;padding:.5rem .8rem}
  details.acc.mini{margin-top:.8rem}
  /* data tables */
  .dtab{width:100%;border-collapse:collapse;font-size:.82rem}
  .dtab th{text-align:left;color:var(--muted);font-weight:700;font-size:.72rem;text-transform:uppercase;
    letter-spacing:.04em;padding:.4rem .55rem;border-bottom:2px solid var(--line)}
  .dtab td{padding:.36rem .55rem;border-bottom:1px solid #efece5}
  .dtab tbody tr:hover{background:#fbfaf7}
  .dtab tr.hot td{background:rgba(224,84,46,.09);font-weight:700}
  .dtab td:first-child{font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:.77rem}
  /* model spec cards (supplementary) */
  .mstack{display:flex;flex-direction:column;gap:.55rem;margin-top:.5rem}
  .mspec{border:1px solid var(--line);border-left:4px solid var(--c,#999);border-radius:10px;padding:.5rem .7rem;background:#fff}
  .mspec .mname{font-weight:700;font-size:.88rem}
  .mspec .mform{font-family:"SFMono-Regular",Consolas,Menlo,monospace;font-size:.86rem;color:var(--ink);
    background:#faf9f6;border:1px solid #eee;border-radius:7px;padding:.34rem .55rem;margin:.3rem 0;overflow-x:auto;white-space:nowrap}
  .mspec .mwhy{font-size:.77rem;color:var(--muted)}
  .mspec .msrc{font-size:.73rem;color:var(--muted);font-style:italic;margin-top:.1rem}
  /* ============================================================
     Responsive — added for mobile blog readers.
     Layout & readability only; no slide content is altered.
     ============================================================ */

  /* Tablet & below: stack the two-column layouts, and let each
     slide scroll vertically so tall content is never clipped
     (the desktop deck centres content in a fixed, non-scrolling
     viewport — fine on a 16:9 screen, but it crops on a phone). */
  @media (max-width:860px){
    .slide{justify-content:flex-start;overflow-y:auto;
      -webkit-overflow-scrolling:touch;padding:56px 4vw 64px}
    /* centre content when it fits; auto-margins collapse to 0 and the
       slide scrolls from the top when content is taller than the screen */
    .slide>*{margin-top:auto;margin-bottom:auto}
    .g2,.g2c{grid-template-columns:1fr;gap:1.4rem}
    .cards{grid-template-columns:1fr}
    .chart.tall{height:46vh}
  }

  /* Phones: one column throughout, predictable chart heights,
     horizontally-scrollable tables, and a simplified tappable nav. */
  @media (max-width:600px){
    .slide{padding:54px 16px 66px}
    .title-rule{margin:1rem 0 1.2rem}
    .ahint{display:none}  /* "hover an author…" doesn't apply on touch */
    /* one column even where the markup hard-codes two inline */
    .cards{grid-template-columns:1fr !important;gap:.8rem}
    .stat{gap:1rem}
    /* fixed, legible chart heights instead of viewport-relative */
    .chart.tall,.chart.med{height:300px}
    .chart.sm{height:260px}
    #leadlagChart{margin-top:0 !important}
    /* wide data tables scroll sideways rather than squish */
    #episodesTable,#posteriorTable{overflow-x:auto;-webkit-overflow-scrolling:touch}
    .dtab{font-size:.78rem}
    /* footer: drop slide-title + dots, keep a big prev/next + counter */
    .footer{justify-content:center;gap:16px;padding:0 12px}
    #f-title{display:none}
    .dots{display:none}
    .nav{gap:14px}
    .nav button{width:44px;height:36px;font-size:1.2rem}
    #counter{min-width:54px;font-size:.95rem}
    /* presenter countdown: smaller so it doesn't crowd the heading */
    #timer{font-size:.9rem;padding:.2rem .62rem;top:8px}
  }

/* site consistency: monospace → IBM Plex Mono */
.eq,.eqs>div,.mspec .mform,#timer,.dtab td:first-child{font-family:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}