@font-face{font-family:Inter;src:url('/assets/fonts/inter-latin.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-italic-latin.woff2') format('woff2');font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrains-mono-latin.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}
:root{--accent:#c2410c!important;--link98:#094a90!important}
.taskbar .start span{color:#094a90}
.xtree small{color:#595959}
sup a,.footnote a{color:#0a62a8!important}
.machine .addr .list li small,.machine .addr .list .none{color:#595959}
.ystrip li a{min-width:24px;min-height:28px;padding:6px 8px!important}
.rail a{min-height:26px;display:inline-flex;align-items:center}
article figcaption a,article li>a[href^="#y"]{display:inline-flex;align-items:center;min-height:24px}
article .w98 .body small{color:#454545}
.site-footer{display:flex;flex-wrap:wrap;gap:12px;padding:18px 20px;background:#c0c0c0;font:13px/1.6 Tahoma,Verdana,sans-serif;color:#16181d}
.site-footer nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.site-footer nav a{display:inline-flex;min-height:28px;align-items:center;color:#000080}
.site-footer .grow{flex-basis:100%;white-space:normal}
.thirty-seconds{margin:24px 0;padding:18px 22px;border:1px solid #dcd8cf;border-left:4px solid #000080;background:#fff}
.thirty-seconds h2{font:800 20px/1.2 var(--sans);margin:0 0 10px}
.thirty-seconds ul{margin:0;padding-left:22px;font:400 16px/1.5 var(--serif)}
.thirty-seconds li+li{margin-top:10px}
.thirty-seconds a{overflow-wrap:anywhere}
.summary-sources{margin-top:12px;font:12px/1.5 var(--sans);color:#4a4f5a}
.summary-sources summary{cursor:pointer;min-height:24px}
.summary-sources ul{font:12px/1.5 var(--sans);margin-top:8px}
.related-stories,.share-links{max-width:960px;margin:36px auto;padding:0 20px}
.related-stories h2{font:800 22px/1.3 var(--sans)}
.redesign-related{max-width:960px;margin:32px auto;padding:18px 20px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.redesign-related h2{font:800 22px/1.3 var(--sans)}
.redesign-related p{font:15px/1.6 var(--sans)}
.related-stories ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;padding:0}
.related-stories li{min-width:0;font:14px/1.5 var(--sans)}
.related-stories img{width:100%;height:auto;margin-bottom:8px}
.share-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:20px 0;font:14px var(--sans)}
.share-links a{display:inline-flex;align-items:center;min-height:28px}
@media(max-width:760px){
  .hero{display:flex!important;flex-direction:column;gap:18px!important;align-items:stretch!important}
  .hero>div:first-child{display:contents}
  .hero .kicker{order:0;margin:0;font-size:10px}
  .hero h1{order:1;margin:0;font-size:36px;max-width:12em}
  .hero .dek{order:2;font-size:17px;line-height:1.4;margin:0}
  .hero>.machine{order:3;margin:0}
  .hero .facts{order:4;margin:6px 0 0;gap:20px}
  .hero .cta{order:5}
  .desktop:has(.hero){padding:24px 0 30px}
  .hero .facts b{font-size:23px}
  .taskbar .qlaunch .lbl{display:inline!important;font-size:11px}
  .taskbar .qlaunch .qi{display:none}
  .taskbar .qlaunch .btn98{padding:5px 7px!important;gap:0}
  .taskbar .task,.taskbar .clock{display:none!important}
  .qlaunch{gap:3px;min-width:0}
  article figure[data-year],article figure.cap,.chapter figure[data-year]{float:none!important;width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important}
  article .strip,.chapter .strip{display:flex!important;flex-direction:column;gap:20px}
  .related-stories ul{grid-template-columns:1fr;gap:12px}
  .related-stories li>a{display:flex;gap:12px;align-items:center}
  .related-stories img{width:96px;height:54px;object-fit:cover;flex:none;margin:0}
  .related-stories li p{margin:0 0 0 108px}
  .thirty-seconds{padding:16px}
  .machine .status98 .mlink{display:flex!important}
  .machine .status98{flex-wrap:wrap}
}

/* Story navigation: persistent channel bar, an unobstructed year rail and a Win98 contents window. */
html:has(body.story-page){scroll-padding-top:var(--story-nav-offset,70px)}
.story-page>.taskbar{position:sticky;top:0;z-index:50}
.story-page .rail{top:calc(var(--story-bar-height,42px) + 20px)}
.story-navigation{display:none;min-width:0;align-self:start;position:sticky;top:calc(var(--story-bar-height,42px) + 20px)}
.story-index{display:flex;flex-direction:column;max-height:calc(100dvh - var(--story-bar-height,42px) - 40px);padding:3px;background:#c0c0c0;color:#16181d;box-shadow:var(--bevel-out),0 8px 24px rgba(0,0,40,.12);font:12px/1.45 Tahoma,Verdana,sans-serif}
.story-index .tb{flex:none;display:flex;align-items:center;gap:6px;min-height:28px;background:linear-gradient(90deg,#000080,#0a62a8);color:#fff;padding:3px 5px;font:700 12px Tahoma,Verdana,sans-serif}
.story-index .tb .t{flex:1}
.story-book{font-size:17px;line-height:1}
.story-index .story-index-close{display:none;min-width:28px;min-height:26px;padding:0;color:#000;font-size:20px}
.story-index-body{display:flex;flex-direction:column;min-height:0;padding:0 4px;overflow-y:auto;scrollbar-width:thin}
.story-index-label{margin:8px 4px 4px;color:#454545;font:700 10px/1.4 Tahoma,Verdana,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.story-chapters{min-height:0;flex:none}
.story-chapters>summary{display:flex;align-items:center;gap:6px;margin:8px 0 2px;padding:7px 8px;min-height:34px;cursor:pointer;list-style:none;box-shadow:var(--bevel-out);font-weight:700}
.story-chapters>summary::-webkit-details-marker{display:none}
.story-chapters>summary::before{content:'▶';font-size:10px;color:#000080}
.story-chapters[open]>summary::before{content:'▼'}
.story-chapters[open]>summary{margin-bottom:6px}
.story-chapter-count{margin-left:auto;font-weight:400}
.story-chapters ol{max-height:42dvh}
.story-index ol,.story-index ul{list-style:none;margin:0;padding:3px;background:#fff;box-shadow:var(--bevel-in)}
.story-index ol{overflow-y:auto;min-height:0;scrollbar-width:thin}
.story-index li>a{display:flex;flex-direction:column;gap:1px;min-height:30px;padding:6px 8px;color:#16181d;text-decoration:none;font:12px/1.45 Tahoma,Verdana,sans-serif}
.story-index li>a:hover,.story-index li>a:focus-visible{background:#e8e8f4;outline:1px dotted #000;outline-offset:-3px}
.story-index li>a[aria-current]{background:#000080;color:#fff}
.story-period{font:700 10px/1.3 'JetBrains Mono',monospace;color:#595959}
.story-index a[aria-current] .story-period{color:#d6e5ff}
.story-extras{flex:none}
.story-extras li>a{padding:5px 8px;min-height:28px}
.story-index-foot{display:flex;padding:8px 4px 3px;flex:none}
.story-index-foot .btn98{flex:1;justify-content:center;min-height:32px;font:12px Tahoma,Verdana,sans-serif}
.story-tools{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));display:flex;gap:6px;z-index:40}
.story-tools .btn98{padding:9px 12px;min-height:44px;color:#000;font:700 12px Tahoma,Verdana,sans-serif;background:#c0c0c0;box-shadow:var(--bevel-out),0 4px 12px rgba(0,0,40,.2)}
.story-tools [hidden]{display:none}
.story-contents{position:fixed;inset:calc(var(--story-bar-height,42px) + 12px) 8px auto auto;width:min(360px,calc(100vw - 16px));max-width:none;max-height:calc(100dvh - var(--story-bar-height,42px) - 24px);margin:0;padding:0;border:0;background:#c0c0c0;color:#000;box-shadow:0 12px 48px rgba(0,0,40,.4)}
.story-contents::backdrop{background:rgba(0,0,32,.4)}
.story-contents .story-index{height:auto;max-height:calc(100dvh - var(--story-bar-height,42px) - 24px);box-shadow:var(--bevel-out)}
.story-contents .story-index-close{display:inline-flex;align-items:center;justify-content:center}
.story-contents-open{overflow:hidden}
.story-page :focus-visible{outline:2px dotted #000080;outline-offset:3px}
@media(min-width:1280px){
  .story-page .head,.story-page .layout{max-width:calc(var(--rail) + var(--col) + 304px)}
  .story-page .layout{grid-template-columns:var(--rail) minmax(0,var(--col)) 216px;gap:28px}
  .story-page .head .inner{margin-left:calc(var(--rail) + 28px)}
  .story-navigation{display:block}
  #storyContentsToggle{display:none}
}
@media(max-width:1100px){
  html:has(body.story-page){scroll-padding-top:var(--story-nav-offset,100px)}
  .story-page .rail{top:var(--story-bar-height,42px);z-index:30}
}
@media(prefers-reduced-motion:reduce){html:has(body.story-page){scroll-behavior:auto}}
