/* THE TUMBLE (web/index.html): one long fall from 2026 to 1997. The page keeps one reading column throughout; each
   era (.era.eNN) dresses it the way the web looked then, from calm glass at the top to a 1990s table at the bottom.
   The sticky year counter and the browser bar above it change as you pass each era (tumble.js); props and big
   years drift and spin at their own depths for the parallax. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0d1b2a;color:#e8eef2;font:17px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;overflow-x:hidden}
main{position:relative}
a{color:inherit}
code{font:.92em ui-monospace,Menlo,Consolas,monospace}

/* the bar, its browser line, and the year */
.tb-bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:14px;padding:10px 16px;background:rgba(13,27,42,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08);transition:background .6s,color .6s,border-color .6s}
.tb-home{font:800 16px "Nunito","Avenir Next","Segoe UI",sans-serif;text-decoration:none;white-space:nowrap}
.tb-browser{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.08);font:600 13px ui-monospace,Menlo,monospace;white-space:nowrap;overflow:hidden;transition:all .6s}
.tb-browser b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.tb-browser i{flex:none;width:10px;height:10px;border-radius:50%;background:#6ee7b7;box-shadow:0 0 8px #6ee7b7}
.tb-hud{position:fixed;right:18px;bottom:16px;z-index:20;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;color:#fff;mix-blend-mode:difference}
.tb-year{font:900 clamp(40px,7vw,84px)/.9 "Nunito","Avenir Next","Segoe UI",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tb-hud-l{font:700 11px/1.4 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.8}

/* the opening and the end */
.tb-end{position:relative;min-height:92vh;display:flex;flex-direction:column;justify-content:center;max-width:820px;margin:0 auto;padding:110px 20px 60px}
.tb-kick{margin:0;font:800 13px "Nunito","Segoe UI",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#6ee7b7}
.tb-open h1{margin:6px 0 14px;font:900 clamp(56px,13vw,140px)/.9 "Nunito","Avenir Next","Segoe UI",sans-serif;letter-spacing:-.04em;background:linear-gradient(180deg,#fff,#9fd8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tb-lede{margin:0;font-size:clamp(18px,2.4vw,22px);color:#c5d3dc;max-width:60ch}
.tb-hint{margin:40px 0 0;font:700 14px system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#8fb1c4}
.tb-hint i{display:inline-block;font-style:normal;animation:tb-nudge 1.6s ease-in-out infinite}
@keyframes tb-nudge{50%{transform:translateY(8px)}}
.tb-end{background:#c0c0c0;color:#000;max-width:none;align-items:center;text-align:center;font-family:"Times New Roman",Times,serif}
.tb-end h2{margin:6px 0 10px;font:700 clamp(34px,6vw,56px)/1.05 "Times New Roman",Times,serif}
.tb-end p{max-width:60ch}
.tb-end .tb-kick{color:#000080}
.tb-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px}
.tb-btn{font:700 15px "Nunito","Segoe UI",sans-serif;padding:10px 18px;border-radius:999px;border:2px solid #0d1b2a;background:#0d1b2a;color:#fff;text-decoration:none;cursor:pointer}
.tb-btn.ghost{background:transparent;color:#0d1b2a}

/* every era: a full-width band with its own background, and the same reading column */
.era{position:relative;overflow:hidden;padding:120px 20px 110px;min-height:100vh}
.era-in{position:relative;z-index:2;max-width:820px;margin:0 auto}
.era-when{margin:0;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.era h2{margin:6px 0 22px}
.era h3{margin:0 0 8px;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.me{margin:0 0 26px;padding:18px 20px}
.me p{margin:0 0 14px;line-height:1.72;text-wrap:pretty}.me p:last-child{margin:0}
/* the story reads like a story: the first paragraph leads a little larger */
.me h3+p{font-size:1.1em;line-height:1.65}
.cols{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;margin:0 0 26px}
.cols ul{margin:0;padding-left:18px}.cols li{margin:0 0 8px;font-size:16px}
@media (max-width:720px){.cols{grid-template-columns:1fr}}
.code{margin:0;display:grid;gap:10px}
.code figcaption{font-size:14px;font-weight:700}
.code pre{position:relative;margin:0;padding:16px 16px 14px;overflow-x:auto;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;white-space:pre}
.code .tag{position:absolute;top:6px;right:8px;font:800 11px system-ui,sans-serif;letter-spacing:.1em;opacity:.75}

/* the parallax layer: a big year, and a few props from the era, drifting at their own depths */
.tb-depth{position:absolute;inset:0;z-index:1;pointer-events:none}
.tb-big{position:absolute;right:-2vw;top:8%;font:900 clamp(120px,24vw,340px)/1 "Nunito","Segoe UI",sans-serif;letter-spacing:-.05em;opacity:.07;will-change:transform}
.tb-depth i{position:absolute;display:block;will-change:transform}

/* each era's most-visited sites drift behind it, two rows the opposite way */
.tb-sites{position:absolute;left:0;right:0;top:34%;overflow:hidden;opacity:.11;will-change:transform}
.tb-sites p{margin:0;white-space:nowrap;font-weight:900;font-size:clamp(30px,5vw,60px);line-height:1.25;display:inline-block;animation:tb-drift 90s linear infinite}
.tb-sites p span{margin-right:.9em}
.tb-sites .r2{display:block;width:max-content;animation-direction:reverse;animation-duration:120s;opacity:.8}
@keyframes tb-drift{to{transform:translateX(-50%)}}
.e00 .tb-sites,.e26 .tb-sites{opacity:.12}
/* the web then: what was born, where everyone went, and a few numbers */
.webthen{margin:0 0 26px;padding:16px 18px;border:1px dashed currentColor;border-radius:10px}
.webthen h3{margin-bottom:10px}
.born{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:15px}
.born span{padding:2px 9px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.born i{font-style:normal;font-weight:800;opacity:.7}
.pop{margin:0 0 8px;font-size:15px}
.stats{margin:0;padding-left:18px;font-size:15px}.stats li{margin:0 0 6px}
.e97 .webthen{border-radius:0;border:2px ridge #c0c0c0;background:#f0f0ff}.e97 .born span{border-radius:0;background:#fff}
.e00 .webthen{border-color:#3a4654;border-radius:0}
/* 2026: calm glass on deep blue */
.e26{background:radial-gradient(ellipse at 80% 10%,#16405a,transparent 55%),linear-gradient(180deg,#0d1b2a,#102a3c);color:#e8eef2}
.e26 h2{font:900 clamp(36px,6vw,60px)/1.02 "Nunito","Avenir Next","Segoe UI",sans-serif;letter-spacing:-.025em}
.e26 .era-when,.e26 h3{color:#6ee7b7}
.e26 .me,.e26 .code pre{border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px)}
.e26 .code .now{border-color:rgba(110,231,183,.5)}
.p26.orb{border-radius:50%;filter:blur(2px)}
.p26.a{width:220px;height:220px;left:-60px;top:30%;background:radial-gradient(circle at 35% 30%,rgba(110,231,183,.45),rgba(110,231,183,0) 70%)}
.p26.b{width:140px;height:140px;right:8%;bottom:12%;background:radial-gradient(circle at 35% 30%,rgba(159,216,255,.5),rgba(159,216,255,0) 70%)}

/* 2014–2019: flat colour, flat shapes, big sans */
.e15{background:#f4f6f8;color:#263238;font-family:"Roboto","Helvetica Neue",Arial,sans-serif}
.e15 h2{font:300 clamp(34px,5.6vw,56px)/1.08 "Roboto","Helvetica Neue",Arial,sans-serif;color:#1e88e5}
.e15 .era-when,.e15 h3{color:#e91e63}
.e15 .me{background:#fff;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.12),0 8px 18px rgba(0,0,0,.06)}
.e15 .code pre{background:#263238;color:#eceff1;border-radius:4px}
.e15 .tb-big{color:#1e88e5;opacity:.09}
.p15.sq{width:70px;height:70px;left:6%;top:24%;background:#ffca28}
.p15.ci{width:90px;height:90px;border-radius:50%;right:10%;top:62%;background:#26c6da}
.p15.tri{left:10%;bottom:10%;width:0;height:0;border-left:44px solid transparent;border-right:44px solid transparent;border-bottom:76px solid #ef5350}

/* 2009–2014: linen, gradients, rounded corners and glossy buttons, the era of -webkit- */
.e10{color:#3b3226;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.025) 0 2px,transparent 2px 4px),repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 4px),linear-gradient(180deg,#e9e2d3,#d8cdb7)}
.e10 h2{font:bold clamp(32px,5.4vw,52px)/1.08 "Helvetica Neue",Helvetica,Arial,sans-serif;color:#4a3f2f;text-shadow:0 1px 0 #fff}
.e10 .era-when,.e10 h3{color:#7a5a2a;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.e10 .me{background:linear-gradient(180deg,#fffdf7,#f1eadb);border:1px solid #c9b994;border-radius:10px;box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(80,60,20,.25)}
.e10 .code pre{background:linear-gradient(180deg,#3c3c3c,#262626);color:#f2f2f2;border-radius:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.35)}
.e10 .code .now{background:linear-gradient(180deg,#5b8f3a,#3f6f22);text-shadow:0 -1px 0 rgba(0,0,0,.4)}
.p10.phone{width:76px;height:140px;left:5%;top:28%;border-radius:14px;background:linear-gradient(160deg,#444,#111);box-shadow:inset 0 0 0 4px #222,inset 6px 22px 0 4px #333,0 6px 16px rgba(0,0,0,.4)}
.p10.pill{width:150px;height:44px;right:7%;top:64%;border-radius:22px;background:linear-gradient(180deg,#9fd35b,#5a9a1d);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -12px 18px rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.3)}

/* 2005–2009: Web 2.0, pastel stripes, glossy reflections and a beta badge */
.e05{color:#33475b;font-family:"Lucida Grande","Trebuchet MS",Verdana,sans-serif;background:repeating-linear-gradient(90deg,#eaf6fd 0 26px,#f6fbfe 26px 52px)}
.e05 h2{font:bold clamp(32px,5.4vw,52px)/1.08 "Trebuchet MS","Lucida Grande",sans-serif;color:#ff6d1f;letter-spacing:-.02em;text-shadow:0 1px 0 #fff,0 18px 8px rgba(255,109,31,.12)}
.e05 .era-when,.e05 h3{color:#3a9bd8}
.e05 .me{background:linear-gradient(180deg,#fff 0,#fff 50%,#eef7fd 50%,#f8fcff);border:1px solid #bfdff2;border-radius:12px}
.e05 .code pre{background:#fff;color:#33475b;border:1px dashed #9ccbe8;border-radius:8px}
.e05 .code .now{border-style:solid;border-color:#7cc04a;background:#f3faee}
.p05.burst{width:120px;height:120px;right:6%;top:18%;display:grid;place-items:center;background:#ff6d1f;clip-path:polygon(50% 0,61% 18%,82% 10%,80% 32%,100% 40%,85% 55%,96% 75%,74% 76%,68% 98%,50% 84%,32% 98%,26% 76%,4% 75%,15% 55%,0 40%,20% 32%,18% 10%,39% 18%)}
.p05.burst span{font:bold 22px "Trebuchet MS",sans-serif;color:#fff;text-transform:uppercase;transform:rotate(-12deg)}
.p05.gloss{width:96px;height:96px;left:5%;bottom:14%;border-radius:50%;background:radial-gradient(circle at 50% 22%,rgba(255,255,255,.95) 0 22%,transparent 23%),linear-gradient(180deg,#5fb8ff,#1a6fd1)}

/* 2000–2004: a dark Flash site, silver, tiny pixel type, and an intro to skip */
.e00{color:#d0d6dc;background:radial-gradient(ellipse at 50% 0,#2c3440,#0a0d12 70%);font:11px/1.6 Verdana,Tahoma,Geneva,sans-serif}
.e00 .era-in{font-size:14px}
.e00 h2{font:bold clamp(28px,5vw,46px)/1.08 Verdana,Tahoma,sans-serif;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(180deg,#fff,#8c97a3 55%,#dfe5ea);-webkit-background-clip:text;background-clip:text;color:transparent}
.e00 .era-when,.e00 h3{color:#7fd1ff;font-family:Verdana,sans-serif}
.e00 .cols li{font-size:13px}
.e00 .me{background:linear-gradient(180deg,#1b222b,#11161c);border:1px solid #3a4654;box-shadow:inset 0 0 0 1px #0a0d12}
.e00 .code pre{background:#000;color:#9ef59e;border:1px solid #3a4654}
.wb{font-size:13px;opacity:.9}.e00 .wb a{color:#7fd1ff}
.win00{margin:16px 0 0;border:2px solid #0a246a;border-radius:6px 6px 0 0;background:#ece9d8;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.win00-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 8px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#3a8cf3,#0a5ce0 45%,#0748c4);color:#fff;font:bold 12px Tahoma,Verdana,sans-serif;text-shadow:0 1px 0 #00185a}
.win00-bar span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.win00-bar i{flex:none;white-space:nowrap;font-style:normal;letter-spacing:.3em}
.win00 video,.win00 img{display:block;width:100%;height:auto;background:#fff}
.win00 figcaption{padding:8px 10px;background:#ece9d8;color:#222;font:12px/1.5 Tahoma,Verdana,sans-serif}
.splash{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 30px;padding:28px 16px;border:1px solid #3a4654;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),#0a0d12;transition:opacity .5s,max-height .6s .1s,margin .6s .1s,padding .6s .1s;max-height:200px;overflow:hidden}
.splash.gone{opacity:0;max-height:0;margin:0;padding:0;border-width:0}
.splash-l{margin:0;font:bold 12px Verdana,sans-serif;letter-spacing:.3em;color:#7fd1ff}
.splash-bar{display:block;width:min(320px,80%);height:8px;border:1px solid #7fd1ff}
.splash-bar i{display:block;height:100%;width:0;background:#7fd1ff}
.skip{font:11px Verdana,sans-serif;color:#d0d6dc;background:none;border:0;text-decoration:underline;cursor:pointer}
.p00.cd{width:150px;height:150px;left:4%;top:30%;border-radius:50%;background:radial-gradient(circle,#0a0d12 0 12%,#cfd6de 13% 16%,transparent 17%),conic-gradient(from 0deg,#d7e1ea,#f9d7ff,#c8fff4,#fff7c2,#d7e1ea);opacity:.55}

/* 1997–1999: grey, Times, blue links, a bevelled rule, a hit counter and a real table */
.e97{color:#000;font-family:"Times New Roman",Times,serif;background:#c0c0c0 repeating-conic-gradient(#bdbdbd 0 25%,#c6c6c6 0 50%) 0 0/8px 8px}
.e97 .era-in{background:#fff;padding:22px 24px 26px;border:3px outset #dfdfdf;max-width:820px}
.e97 h2{font:bold clamp(30px,5vw,46px)/1.1 "Times New Roman",Times,serif;color:#000080}
.e97 .era-when{color:#800000;font-family:"Times New Roman",serif;letter-spacing:.06em}
.e97 h3{color:#008000;font-family:Arial,sans-serif;letter-spacing:.02em}
.e97 .cols li{font-size:16px}
.e97 .me{padding:0}
.e97 .code pre{background:#fff;color:#000;border:2px inset #dfdfdf}
.e97 .code .now{background:#ffffe0}
.bevel{border:0;height:4px;margin:0 0 20px;border-top:2px solid #808080;border-bottom:2px solid #fff}
.u-c{margin:0 0 12px;padding:4px 8px;text-align:center;font:bold 13px Arial,sans-serif;letter-spacing:.12em;color:#000;background:repeating-linear-gradient(-45deg,#ffd400 0 14px,#111 14px 28px);background-clip:padding-box;border:2px solid #111}
.u-c{color:#ffd400;text-shadow:0 0 3px #000,0 0 3px #000}
.trick{margin:0 0 26px;padding:16px 18px;background:#ffffe0;border:2px dashed #808080}
.t97-demo{resize:horizontal;overflow:hidden;width:100%;min-width:200px;max-width:100%;padding:0 0 6px}
.t97{border-collapse:collapse;table-layout:auto}
.t97 td{padding:0;line-height:0;vertical-align:top}
.t97 img{display:block}
.t97 td[background]{background-repeat:repeat}
.t97 .t97-mid{line-height:1.5;padding:12px 14px;background:#fffbe8}
.counter{margin:26px 0 4px;text-align:center;font-family:"Times New Roman",serif}
.digits{display:inline-block;padding:2px 6px;background:#000;color:#39ff14;font:bold 18px "Courier New",monospace;letter-spacing:.18em;border:2px inset #808080}
.best{margin:6px 0 0;text-align:center;font:italic 13px "Times New Roman",serif;color:#444}
.e97 a{color:#0000ee}
.p97.floppy{width:84px;height:88px;left:4%;top:20%;background:linear-gradient(#cfd5dc,#cfd5dc) 18px 4px/46px 30px no-repeat,linear-gradient(#f0f0f0,#f0f0f0) 12px 50px/60px 34px no-repeat,#2a2f8a;border-radius:4px;box-shadow:0 4px 8px rgba(0,0,0,.35)}
.p97.cone{right:6%;top:58%;width:0;height:0;border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:90px solid #ff7a00;filter:drop-shadow(0 4px 4px rgba(0,0,0,.3))}

/* the bar and browser line as each era goes by */
html[data-era="e15"] .tb-bar{background:rgba(255,255,255,.9);color:#263238;border-color:#dfe3e6}
html[data-era="e15"] .tb-browser{background:#eceff1;border-radius:2px}
html[data-era="e10"] .tb-bar{background:linear-gradient(180deg,#f3f3f3,#cfcfcf);color:#333;border-color:#999}
html[data-era="e10"] .tb-browser{background:#fff;border-radius:6px;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
html[data-era="e05"] .tb-bar{background:linear-gradient(180deg,#f7fbfe,#d5e7f5);color:#1d4f7a;border-color:#9fc4e0}
html[data-era="e05"] .tb-browser{background:#fff;border:1px solid #9fc4e0;border-radius:3px}
html[data-era="e00"] .tb-bar{background:#2b3440;color:#d0d6dc;border-color:#11161c}
html[data-era="e00"] .tb-browser{background:#fff;color:#000;border-radius:0;border:2px inset #c0c0c0;font-family:Tahoma,Verdana,sans-serif}
html[data-era="e97"] .tb-bar,html[data-era="end"] .tb-bar{background:#c0c0c0;color:#000;border-bottom:2px solid #808080;backdrop-filter:none}
html[data-era="e97"] .tb-browser,html[data-era="end"] .tb-browser{background:#fff;color:#000;border-radius:0;border:2px inset #dfdfdf;font-family:"MS Sans Serif",Arial,sans-serif}
html[data-era="e97"] .tb-browser i,html[data-era="end"] .tb-browser i,html[data-era="e00"] .tb-browser i{border-radius:0;background:#808080;box-shadow:none}

/* phones: smaller margins; less motion when asked */
@media (max-width:560px){.era{padding:100px 14px 90px}.me{padding:14px 14px}.e97 .era-in{padding:16px 14px}.tb-bar{padding:8px 10px;gap:8px}.tb-home{font-size:14px}.tb-browser{font-size:11px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tb-hint i{animation:none}.tb-depth{display:none}}

/* the toolbox, always open: a small translucent panel on the side. Browser badges along the top (my own monograms in
   their colours, not their logos) and the tools below, grouped by job; each fades in or out with the year you've fallen to. */
.tb-box{position:fixed;left:12px;top:64px;z-index:19;width:184px;max-height:calc(100vh - 80px);overflow:auto;scrollbar-width:none;padding:9px 10px 10px;border-radius:12px;
  background:rgba(10,16,24,.55);border:1px solid rgba(255,255,255,.14);color:#eef3f6;backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  font:11px/1.3 system-ui,-apple-system,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.tbx-top{display:flex;align-items:baseline;gap:6px;margin:0 0 6px}
.tbx-t{font:800 10px system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#6ee7b7}
.tbx-n{margin-left:auto;font:700 11px system-ui,sans-serif;opacity:.85}.tbx-n b{font-size:14px}
.tbx-more{display:none}
.tbx-br{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.tbx-br li{transition:opacity .6s,transform .6s,filter .6s}
.tbx-br img{display:block;width:28px;height:28px;margin:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.tbx-br i{display:grid;place-items:center;width:28px;height:28px;margin:auto;border-radius:50%;font:800 11px system-ui,sans-serif;font-style:normal;color:#fff;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.45),transparent 55%),var(--c);box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.tbx-br li.off{opacity:.15;filter:grayscale(1);transform:scale(.8)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tbx-g{margin:0 0 6px}
.tbx-g h3{margin:0 0 3px;font:800 9px system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#eef3f6;opacity:.55}
.tbx-g ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:3px}
.tbx-g li{padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);white-space:nowrap;transition:opacity .6s,background .6s}
.tbx-g li.off{opacity:.14;background:transparent}
/* light eras: the same panel, frosted light */
html[data-era="e15"] .tb-box,html[data-era="e10"] .tb-box,html[data-era="e05"] .tb-box,html[data-era="e97"] .tb-box,html[data-era="end"] .tb-box{background:rgba(255,255,255,.55);color:#13212b;border-color:rgba(0,0,0,.12)}
html[data-era="e15"] .tbx-g h3,html[data-era="e10"] .tbx-g h3,html[data-era="e05"] .tbx-g h3,html[data-era="e97"] .tbx-g h3,html[data-era="end"] .tbx-g h3{color:#13212b}
html[data-era="e15"] .tbx-g li,html[data-era="e10"] .tbx-g li,html[data-era="e05"] .tbx-g li,html[data-era="e97"] .tbx-g li,html[data-era="end"] .tbx-g li{background:rgba(0,0,0,.07);border-color:rgba(0,0,0,.1)}
html[data-era="e15"] .tbx-t,html[data-era="e10"] .tbx-t,html[data-era="e05"] .tbx-t,html[data-era="e97"] .tbx-t,html[data-era="end"] .tbx-t{color:#0f6b52}
/* phones: no side margin, so a slim strip along the bottom with the badges and the count; Tools opens the chips */
@media (max-width:1100px){
  .tb-box{top:auto;bottom:8px;left:8px;right:8px;width:auto;max-height:60vh;padding:6px 8px}
  .tbx-top{margin:0}
  .tbx-br{grid-template-columns:repeat(9,1fr);gap:2px;margin:6px 0 0}
  .tbx-br i,.tbx-br img{width:24px;height:24px;font-size:10px}
  .tbx-more{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;border:1px solid currentColor;background:none;color:inherit;font:700 11px system-ui,sans-serif;cursor:pointer}
  .tbx-tools{display:none;margin-top:8px}.tb-box.open .tbx-tools{display:block}
  .tb-hud{bottom:96px;transition:opacity .3s}
  html.tbx-open .tb-hud{opacity:0}
}
@media (prefers-reduced-motion:reduce){.tbx-br li,.tbx-g li{transition:none}}
.born .br{font-weight:700}
.before97{max-width:62ch;margin:18px auto 22px;text-align:left;font-size:16px}
.before97 h3{margin:0 0 8px;font:bold 16px Arial,sans-serif;color:#000080;text-align:center}
.before97 ul{margin:0;padding-left:0;list-style:none}.before97 li{margin:0 0 6px}.before97 b{display:inline-block;width:3.2em;color:#800000}
/* the web then: the sites everyone used, by kind, in an accordion */
.sites-acc{margin:0 0 12px;border-top:1px solid currentColor;border-color:rgba(127,127,127,.35)}
.sites-acc details{border-bottom:1px solid rgba(127,127,127,.35)}
.sites-acc summary{display:flex;align-items:center;gap:8px;padding:8px 2px;cursor:pointer;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;list-style:none}
.sites-acc summary::-webkit-details-marker{display:none}
.sites-acc summary::after{content:"+";margin-left:auto;font-size:18px;line-height:1;transition:transform .25s}
.sites-acc details[open] summary::after{transform:rotate(45deg)}
.sites-acc p{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:5px}
.sites-acc p span{padding:2px 9px;border-radius:999px;background:rgba(127,127,127,.14);font-size:14px}
.e97 .sites-acc p span{border-radius:0;background:#fff;border:1px solid #808080}
.credit{max-width:62ch;margin:0 auto 12px;font-size:12px;opacity:.7}

/* the top, now: the browser as a time machine. The cockpit is Christian's render of a retro control room
   (media/tm/console.jpg); on it, drawn in place: the readouts on its three screens, the jewel lamps round the big
   dial pulsing, light swirling in the portholes, and needles (his needle sprite) that swing with the year, the fall
   speed and the toolbox. Below: the chart in his TV set, a row of his gauges, and three of his switch panels that
   work. Fall fast enough (88) and it flashes. */
@property --h{syntax:"<angle>";inherits:true;initial-value:0deg}
.tb-now{position:relative;overflow:hidden;isolation:isolate;padding:0 0 64px;--h:0deg;animation:tm-hue 24s linear infinite;
  background:radial-gradient(ellipse at 15% 60%,hsl(calc(var(--h) + 280deg) 80% 45% / .16),transparent 50%),radial-gradient(ellipse at 85% 80%,hsl(calc(var(--h) + 160deg) 80% 45% / .14),transparent 50%),linear-gradient(180deg,#1a110b,#120c08 60%,#0d1b2a)}
@keyframes tm-hue{to{--h:360deg}}
.tm-cockpit{position:relative;height:clamp(520px,100vh,960px)}
.tm-view{position:absolute;inset:0;overflow:hidden;overflow:clip}
.tm-view::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#1a110b 0,rgba(26,17,11,0) 22%),linear-gradient(90deg,rgba(16,10,6,.82) 0,rgba(16,10,6,.6) 26%,rgba(16,10,6,0) 40%)}
.tm-room{position:absolute;left:0;top:0;width:1376px;height:768px;transform-origin:0 0;--u:1;transition:filter 1.2s ease-in-out}
.tm-bg{position:absolute;inset:0;width:100%;height:100%;display:block}
.tm-room>*{position:absolute}
.tm-room{pointer-events:none}.tm-jw{pointer-events:auto}
.tm-jw,.tm-port,.tm-scr{left:calc(var(--x) * 1px);top:calc(var(--y) * 1px)}
.tm-jw{width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;cursor:pointer;background:radial-gradient(circle,var(--c) 0,color-mix(in srgb,var(--c) 45%,transparent) 40%,transparent 72%);
  box-shadow:0 0 0 0 var(--c);transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .6s,filter .6s;animation:tm-jw 3.6s ease-in-out infinite;animation-delay:var(--d)}
/* each jewel is Christian's button render: lit on the left of its sprite, unlit on the right */
.tm-jw img{position:absolute;inset:-2px;width:48px;height:48px;object-fit:cover;object-position:0 0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
/* lights ease on and off, never snap: the unlit render cross-fades over the lit one */
.tm-jw img.unlit{object-position:100% 0;filter:brightness(.8);opacity:0;transition:opacity .9s ease-in-out}
.tm-jw.off img.unlit{opacity:1}
.tm-jw.has{background:none}
.tm-jw.off{animation:none}
.tm-jw span{position:absolute;left:50%;top:100%;margin-top:8px;z-index:6;translate:-50% 0;white-space:nowrap;padding:3px 8px;border-radius:6px;background:rgba(10,8,6,.85);color:#f6e3c6;font:700 12px system-ui,sans-serif;opacity:0;pointer-events:none;transition:opacity .2s}
.tm-jw span i{font:600 11px ui-monospace,Menlo,monospace;font-style:normal;color:#cbb79d}
.tm-jw:hover,.tm-jw:focus-visible{z-index:5;transform:scale(1.14);outline:none}
.tm-jw:hover span,.tm-jw:focus-visible span{opacity:1}
/* the up-close render of the browser you're pointing at fills the big dial's face, under its needle */
.tm-close{left:600px;top:299px;width:176px;height:176px;border-radius:50%;overflow:hidden;opacity:0;transform:scale(.92);transition:opacity .7s ease-in-out,transform .7s ease-in-out;pointer-events:none;
  box-shadow:inset 0 0 18px rgba(0,0,0,.6)}
.tm-close img{display:block;width:100%;height:100%;object-fit:cover}
.tm-close.on{opacity:1;transform:none}
/* the year it arrived, set cleanly over the render; once a jewel is picked, the dial's face takes you there */
.tm-close b{position:absolute;left:0;right:0;bottom:22%;text-align:center;font:800 26px/1 "Nunito","Avenir Next",system-ui,sans-serif;letter-spacing:.08em;
  color:#fff8ea;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.55);opacity:.92}
.tm-close.held{pointer-events:auto;cursor:pointer}
.tm-close.held b::after{content:"";display:block;width:34px;height:2px;margin:6px auto 0;border-radius:1px;background:currentColor;opacity:.7;animation:tm-cue 2.4s ease-in-out infinite}
@keyframes tm-cue{50%{opacity:.25;transform:scaleX(.6)}}
.tm-close.held:focus-visible{outline:2px solid #7ff3e6;outline-offset:3px}
@keyframes tm-jw{15%{box-shadow:0 0 18px 4px var(--c)}40%{box-shadow:0 0 0 0 var(--c)}}
html.tm-burst .tm-jw{animation:tm-jwb .8s ease-in-out 2}
@keyframes tm-jwb{50%{box-shadow:0 0 26px 8px var(--c);filter:brightness(1.6)}}
.tm-port{width:calc(var(--w) * 1px);height:calc(var(--hh) * 1px);margin:calc(var(--hh) * -.5px) 0 0 calc(var(--w) * -.5px);border-radius:50%;overflow:hidden;mix-blend-mode:screen;opacity:.3}
.tm-port::before{content:"";position:absolute;inset:-60%;background:repeating-conic-gradient(from 0deg,rgba(255,226,150,.9) 0 6deg,rgba(255,180,60,0) 6deg 18deg),radial-gradient(circle,#fff6d0,transparent 60%);
  filter:blur(5px);animation:tm-spin 9s linear infinite}
@keyframes tm-spin{to{rotate:360deg}}
/* a surge (the knobs on the right): every gauge sweeps up and back, one after another, and a spike of energy
   goes through the portholes: their light flares and whirls, rings of light pulse out, and a wash of radiance spills
   into the room, all easing up and back down over about three seconds */
.tm-glow{left:820px;top:-160px;width:760px;height:720px;pointer-events:none;opacity:0;mix-blend-mode:screen;
  background:radial-gradient(ellipse 46% 50% at 66% 49%,rgba(255,236,180,.75),rgba(255,190,90,.28) 45%,transparent 72%)}
.tm-pulse{left:calc(var(--x) * 1px);top:calc(var(--y) * 1px);width:calc(var(--w) * 1px);height:calc(var(--hh) * 1px);margin:calc(var(--hh) * -.5px) 0 0 calc(var(--w) * -.5px);
  border-radius:50%;pointer-events:none;opacity:0;mix-blend-mode:screen;box-shadow:0 0 18px 6px rgba(255,230,160,.9),inset 0 0 22px 8px rgba(255,240,200,.8)}
html.tm-surge .tm-port{animation:tm-port-surge 3s ease-in-out}
html.tm-surge .tm-port::before{animation:tm-spin 9s linear infinite,tm-whirl 3s ease-in-out}
html.tm-surge .tm-glow{animation:tm-glow 3s ease-in-out}
html.tm-surge .tm-pulse{animation:tm-pulse 1.9s cubic-bezier(.2,.6,.3,1) .25s}
html.tm-surge .tm-pulse.late{animation-delay:.75s}
html.tm-surge .tm-nd[data-nd^="w"]{animation:tm-wob 3s ease-in-out infinite alternate,tm-surge-nd 2.6s ease-in-out}
html.tm-surge .tm-nd:not([data-nd^="w"]){animation:tm-surge-nd 2.6s ease-in-out}
html.tm-surge .tm-nd[data-nd="speed"]{animation-delay:.1s}html.tm-surge .tm-nd[data-nd="tools"]{animation-delay:.2s}html.tm-surge .tm-nd[data-nd="w1"]{animation-delay:0s,.15s}
html.tm-surge .tm-nd[data-nd="w3"]{animation-delay:-1s,.15s}html.tm-surge .tm-nd[data-nd="w4"]{animation-delay:-2s,.3s}html.tm-surge .tm-nd[data-nd="w5"]{animation-delay:0s,.45s}
/* during a surge every gauge's face (the big dial too) turns to a glowing orange, like the porthole, each with its own
   needle's sweep, and back, so a phone, which can't see the portholes, sees it too */
.tm-gface,.tm-gglow{left:calc((var(--x) - var(--rx)) * 1px);top:calc((var(--y) - var(--ry)) * 1px);width:calc(var(--rx) * 2px);height:calc(var(--ry) * 2px);border-radius:50%;pointer-events:none;opacity:0}
.tm-gface{mix-blend-mode:color;background:#ff5a00}
.tm-gglow{mix-blend-mode:screen;transform:scale(1.35);background:radial-gradient(circle,rgba(255,150,40,.7) 0 50%,rgba(255,110,20,.4) 66%,transparent 74%)}
html.tm-surge .tm-gface,html.tm-surge .tm-gglow{animation:tm-gface 2.8s ease-in-out var(--gd,0s)}
@keyframes tm-gface{0%,100%{opacity:0}35%,60%{opacity:1}}
/* the golden bubbles a power rush blows past the middle porthole: the pale warm yellow of the porthole coils, not brass */
.tm-gold{position:absolute;left:var(--x);bottom:-24px;width:var(--s);height:var(--s);margin-left:calc(var(--s) / -2);pointer-events:none;opacity:0;
  background:var(--bub) center/100% no-repeat;filter:sepia(1) saturate(3) hue-rotate(-15deg) brightness(1.75) drop-shadow(0 0 5px rgba(255,210,120,.95));
  animation:tm-goldup var(--t) cubic-bezier(.35,.1,.45,1) var(--d) forwards}
@keyframes tm-goldup{0%{opacity:0;transform:translate(0,0) scale(.6)}10%{opacity:1}35%{transform:translate(var(--w),-48px) scale(1)}65%{transform:translate(calc(var(--w) * -1),-95px) scale(1)}88%{opacity:1}100%{opacity:0;transform:translate(0,-145px) scale(1.05)}}
/* at 88 the surge leaves the big dial alone (the fire trail plays there), and the lights run */
html.tm-at88 .tm-gface.big,html.tm-at88 .tm-gglow.big{animation:none;opacity:0}
html.tm-party .tm-hb::before{animation:tm-chase 1.2s ease-in-out infinite;animation-delay:calc(var(--ci,0) * -.09s)}
html.tm-party .tm-jw img.unlit{transition:none;animation:tm-chase-off 1.1s ease-in-out infinite;animation-delay:calc(var(--ci,0) * -.122s)}
@keyframes tm-chase{0%,100%{opacity:.3}18%{opacity:1}42%{opacity:.3}}
@keyframes tm-chase-off{0%,100%{opacity:.75}18%{opacity:0}42%{opacity:.75}}
@keyframes tm-port-surge{0%,100%{opacity:.3;filter:none}35%,50%{opacity:1;filter:brightness(1.7) saturate(1.3)}}
@keyframes tm-whirl{0%{transform:none}100%{transform:rotate(540deg)}}
@keyframes tm-glow{0%,100%{opacity:0}35%,50%{opacity:.9}}
@keyframes tm-pulse{0%{opacity:0;transform:scale(1)}15%{opacity:1}100%{opacity:0;transform:scale(2.3)}}
@keyframes tm-surge-nd{0%,100%{transform:none}45%,60%{transform:rotate(100deg)}}
.tm-scr{width:calc(var(--w) * 1px);height:calc(var(--hh) * 1px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:14px;overflow:hidden;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;color:#0a3550;text-align:center;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 2px,rgba(0,0,0,.05) 2px 4px)}
.tm-scr span{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.tm-scr b{font-size:22px;line-height:1.05;letter-spacing:.03em;text-shadow:0 0 6px rgba(255,255,255,.7);padding:0 6px}
.tm-scr:nth-of-type(2) b,.tm-scr:nth-of-type(3) b{font-size:15px}
.tm-scr em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;opacity:.85;margin-top:-2px}
/* the Past screen tumbles you to the bottom: a subtle glow on hover, nothing more */
.tm-scr.go{pointer-events:auto;cursor:pointer;transition:box-shadow .8s ease-in-out}
.tm-scr.go:hover,.tm-scr.go:focus-visible{outline:none;box-shadow:inset 0 0 18px rgba(255,255,255,.35),0 0 14px rgba(160,230,255,.35)}
.tm-nd{left:calc((var(--x) - 19 * var(--r) / 173) * 1px);top:calc((var(--y) - 178 * var(--r) / 173) * 1px);width:calc(38px * var(--r) / 173);height:calc(222px * var(--r) / 173);
  transform-origin:50% 80.2%;rotate:var(--a,-110deg);transition:rotate .5s cubic-bezier(.3,1.6,.5,1);filter:drop-shadow(0 2px 2px rgba(0,0,0,.5)) saturate(1.3) hue-rotate(-12deg)}
.tm-nd[data-nd^="w"]{animation:tm-wob 3s ease-in-out infinite alternate;transition:none}
.tm-nd[data-nd="w2"]{animation-duration:2.2s}.tm-nd[data-nd="w3"]{animation-duration:3.7s;animation-delay:-1s}.tm-nd[data-nd="w4"]{animation-duration:2.7s;animation-delay:-2s}.tm-nd[data-nd="w5"]{animation-duration:4.1s}
@keyframes tm-wob{0%{rotate:-60deg}30%{rotate:-20deg}55%{rotate:-35deg}100%{rotate:25deg}}
html.tm-spin .tm-nd{transition:rotate 1s cubic-bezier(.2,.8,.3,1);rotate:400deg!important;animation:none}
/* the big gauge's needle fades away whenever something shows in the gauge's centre: the jump at 88 (it looked like a
   glitch over the clip) and a browser's close-up; it eases back after */
.tm-nd[data-nd="year"]{transition:rotate .5s cubic-bezier(.3,1.6,.5,1),opacity .8s ease-in-out;animation:tm-ywob 7s ease-in-out infinite alternate}
/* the big dial drifts a little all the time, like the small ones, a few degrees either side of the year it reads */
@keyframes tm-ywob{0%{transform:rotate(-3deg)}30%{transform:rotate(1.5deg)}55%{transform:rotate(-1deg)}100%{transform:rotate(3.5deg)}}
html.tm-at88 .tm-nd[data-nd="year"],.tm-close.on ~ .tm-nd[data-nd="year"]{opacity:0;transition:opacity .6s ease-in-out}
.tm-flash{inset:0;background:radial-gradient(circle at 80% 30%,#fff,rgba(255,236,190,.7) 25%,transparent 65%);opacity:0;pointer-events:none}
html.flux .tm-flash{animation:tm-flash .9s ease-out}
@keyframes tm-flash{8%{opacity:1}100%{opacity:0}}
/* shut down: the cockpit goes dark under a shade, but the three portholes stay lit from outside (the shade has soft
   holes at them, so a little of their light spills into the dark room) */
.tm-shade{left:0;top:0;width:1376px;height:768px;pointer-events:none;opacity:0;background:rgba(5,4,3,.7);transition:opacity 1.2s ease-in-out;
  -webkit-mask:radial-gradient(ellipse 54px 106px at 1103px 220px,transparent 0 86%,#000 135%),radial-gradient(ellipse 76px 152px at 1318px 188px,transparent 0 86%,#000 135%),radial-gradient(circle 54px at 687px 123px,transparent 0 90%,#000 140%);-webkit-mask-composite:source-in;mask:radial-gradient(ellipse 54px 106px at 1103px 220px,transparent 0 86%,#000 135%),radial-gradient(ellipse 76px 152px at 1318px 188px,transparent 0 86%,#000 135%),radial-gradient(circle 54px at 687px 123px,transparent 0 90%,#000 140%);mask-composite:intersect}
html.tm-dark .tm-shade{opacity:1}
html.tm-dark .tm-jw{animation:none}html.tm-dark .tm-jw img.unlit{opacity:1}
.tm-title{position:absolute;left:clamp(20px,4vw,72px);top:clamp(120px,22%,220px);max-width:min(36vw,520px);z-index:2}
@media (min-width:1101px){.tm-title{left:228px}}
.tm-title .tb-kick{margin:0}
.tb-now h1{margin:6px 0 0;font:900 clamp(44px,5vw,80px)/.92 "Nunito","Avenir Next","Segoe UI",sans-serif;letter-spacing:-.04em;
  background:linear-gradient(100deg,hsl(var(--h) 100% 72%),hsl(calc(var(--h) + 70deg) 100% 70%),hsl(calc(var(--h) + 150deg) 100% 72%),hsl(calc(var(--h) + 230deg) 100% 75%));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(0 0 22px hsl(calc(var(--h) + 120deg) 100% 60% / .45))}
.tb-now .tb-kick{color:hsl(calc(var(--h) + 140deg) 90% 72%);text-shadow:0 1px 6px #000}
.tb-now-in{position:relative;z-index:2;max-width:1000px;margin:-40px auto 0;padding:0 20px;width:100%}
.tb-now .tb-lede{max-width:62ch;color:#f1e6d8;text-shadow:0 1px 12px #000}
/* the readouts, for phones and screen readers (on wide screens they're on the cockpit's screens) */
.tm-panel{display:grid;grid-template-columns:repeat(2,auto);justify-content:start;gap:8px;margin:22px 0 0;padding:10px;border-radius:12px;background:rgba(10,12,16,.7);border:1px solid rgba(255,214,140,.35)}
.tc{margin:0;display:flex;flex-direction:column;gap:3px}
.tc span{font:800 9px system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#cfd6dc;padding:2px 6px;background:#9a1b1b;border-radius:2px;text-align:center}
.tc b{padding:4px 10px;border-radius:4px;background:#060606;border:1px solid #222;font:700 clamp(18px,3vw,24px)/1.1 ui-monospace,Menlo,Consolas,monospace;white-space:nowrap}
.tc-dest b{color:#ff4b3a;text-shadow:0 0 8px #ff3b2a}.tc-now b{color:#4dff6a;text-shadow:0 0 8px #3dff5a}
@media (min-width:761px){.tm-panel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);margin:0;padding:0;border:0}}
/* the console's own buttons, levers and knobs, made live: each glows in its colour when it's on */
.tm-hbs{inset:0}
.tm-hb{position:absolute;left:calc((var(--x) - var(--w) / 2) * 1px);top:calc((var(--y) - var(--hh) / 2) * 1px);width:calc(var(--w) * 1px);height:calc(var(--hh) * 1px);
  padding:0;border:0;border-radius:4px;background:none;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}
.tm-hb.lever,.tm-hb.knob{border-radius:50%}
.tm-hb::before{content:"";position:absolute;inset:-35%;border-radius:inherit;background:radial-gradient(closest-side,#fff 0,var(--c) 35%,color-mix(in srgb,var(--c) 40%,transparent) 60%,transparent 100%);
  mix-blend-mode:screen;opacity:0;transition:opacity .7s ease-in-out}
.tm-hb:hover::before,.tm-hb:focus-visible::before{opacity:.45}
.tm-hb:focus-visible{outline:1px solid #7ff3e6;outline-offset:2px}
.tm-hb.lit::before{opacity:.95}
/* the 88 button breathes all the time, slowly, as if to say "now" */
.tm-hb.beckon::before{inset:-110%;animation:tm-beckon 3.2s ease-in-out infinite}
@keyframes tm-beckon{0%,100%{opacity:.15;transform:scale(.75)}50%{opacity:.9;transform:scale(1.1)}}
/* hitting 88: the dial's face reads 88 MPH, swelling and fading three times, before the jump */
.tm-88{left:600px;top:299px;width:176px;height:176px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;
  font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;color:#ffb02e;opacity:0;background:radial-gradient(circle,rgba(14,6,0,.85) 0,rgba(14,6,0,.7) 50%,transparent 72%)}
.tm-88 b{font-size:64px;line-height:1;letter-spacing:.04em;text-shadow:0 0 10px #ff8a1a,0 0 26px #ff6a00}
.tm-88 span{font:800 16px/1 system-ui,sans-serif;letter-spacing:.3em;margin-top:4px;text-shadow:0 0 8px #ff8a1a}
html.tm-88on .tm-88{animation:tm-88 .95s ease-in-out 3}
/* the porthole where the middle TV was: deep water, slow light shafts and little bubbles, and every so often a big
   bubble with a browser's logo in it floats up; tap it to send one up */
.tm-sub{left:637px;top:73px;width:100px;height:100px;border-radius:50%;pointer-events:auto;cursor:pointer;
  box-shadow:0 0 0 3px #3a2410,0 0 0 9px #b98a45,0 0 0 11px #6a4520,0 6px 16px 9px rgba(0,0,0,.45);transition:box-shadow .8s ease-in-out}
.tm-sub::before{content:"";position:absolute;inset:-9px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 11deg,#e8c27a 0 3deg,transparent 3deg 45deg);
  -webkit-mask:radial-gradient(circle,transparent 52px,#000 53px 56px,transparent 57px);mask:radial-gradient(circle,transparent 52px,#000 53px 56px,transparent 57px)}
.tm-sub:hover,.tm-sub:focus-visible{outline:none;box-shadow:0 0 0 3px #3a2410,0 0 0 9px #c99a55,0 0 0 11px #6a4520,0 6px 16px 9px rgba(0,0,0,.45),0 0 26px 12px rgba(80,220,255,.18)}
.tm-sub-glass{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:radial-gradient(ellipse 120% 90% at 50% -10%,#2a8db0 0,#0e4a6c 38%,#052238 70%,#020c16 100%);
  box-shadow:inset 0 0 18px 6px rgba(0,0,0,.7)}
.tm-sub-glass::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse 60% 34% at 32% 20%,rgba(255,255,255,.22),transparent 70%),radial-gradient(ellipse 30% 14% at 70% 82%,rgba(255,255,255,.07),transparent 70%)}
.tm-sub-ray{position:absolute;inset:-40% -60%;opacity:.5;
  background:repeating-linear-gradient(100deg,transparent 0 18px,rgba(160,230,255,.16) 18px 30px,transparent 30px 52px);
  -webkit-mask:linear-gradient(#000,transparent 75%);mask:linear-gradient(#000,transparent 75%);animation:tm-ray 11s ease-in-out infinite alternate}
@keyframes tm-ray{from{transform:translateX(-14px) rotate(-3deg)}to{transform:translateX(14px) rotate(3deg)}}
.tm-sub-bubs{position:absolute;inset:0;pointer-events:none}
.tm-sub-bubs b{position:absolute;bottom:-8px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.95) 0 16%,rgba(190,240,255,.3) 42%,rgba(190,240,255,.06) 68%,transparent 72%);
  box-shadow:inset 0 0 0 .5px rgba(200,245,255,.55);animation:tm-rise var(--d) ease-in-out var(--dl) infinite}
@keyframes tm-rise{0%{opacity:0;transform:translate(0,0)}12%{opacity:var(--o)}30%{transform:translate(var(--w),-36px)}55%{transform:translate(calc(var(--w) * -.6),-66px)}80%{opacity:var(--o);transform:translate(var(--w),-96px)}100%{opacity:0;transform:translate(0,-112px)}}
.tm-sub-lb{position:absolute;left:var(--bx,50%);bottom:calc(-60px * var(--bs,1) - var(--by,0px));width:calc(54px * var(--bs,1));height:calc(54px * var(--bs,1));margin-left:calc(-27px * var(--bs,1));border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(150,225,255,.07) 0 60%,transparent 66%);animation:tm-lb var(--lbd,7s) ease-in-out forwards}
.tm-sub-lb img{position:absolute;left:50%;top:50%;width:56%;height:56%;margin:-28% 0 0 -28%;opacity:.9}
.tm-sub-lb::after{content:"";position:absolute;inset:0;background:var(--bub,url(media/tm/bubble-1.webp)) center/100% no-repeat;transform:rotate(var(--brot,0deg))}   /* one of Christian's five bubble renders (their black made transparent), over the logo so its glints sit in front */
.tm-sub-lb i{position:absolute;border-radius:50%;opacity:0;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9) 0 18%,rgba(190,240,255,.3) 45%,transparent 72%);box-shadow:inset 0 0 0 .5px rgba(200,245,255,.6);animation:tm-burp 2s ease-out forwards}
@keyframes tm-burp{0%{opacity:0;transform:translate(0,0)}15%{opacity:.85}100%{opacity:0;transform:translate(0,-62px) scale(.7)}}
@keyframes tm-lb{0%{opacity:0;transform:translate(0,0) scale(.85)}12%{opacity:1}32%{transform:translate(5px,-52px) scale(.96,1.04)}56%{transform:translate(-4px,-100px) scale(1.04,.96)}80%{opacity:1;transform:translate(4px,-145px) scale(.98,1.02)}100%{opacity:0;transform:translate(0,-215px) scale(1)}}
@media (prefers-reduced-motion:reduce){.tm-sub-ray{animation:none}.tm-sub-bubs{display:none}}
/* the jump: the fire-trail clip plays under the big gauge's glass, masked to its circle (where the close-ups show), eased in and out */
.tm-jump{left:600px;top:299px;width:176px;height:176px;border-radius:50%;object-fit:cover;pointer-events:none;opacity:0;visibility:hidden;transform:scale(.92);
  -webkit-mask:radial-gradient(circle,#000 86%,transparent 100%);mask:radial-gradient(circle,#000 86%,transparent 100%);transition:opacity .6s ease-in-out,transform .6s ease-in-out,visibility 0s .6s}
html.tm-jumping .tm-jump{opacity:1;visibility:visible;transform:none;transition:opacity .6s ease-in-out,transform .6s ease-in-out}
html.tm-jumping .tm-close{opacity:0}
@keyframes tm-88{0%,100%{opacity:0}45%,60%{opacity:1}}
/* a jewel picked above: its button on the console swells into a big, slow, breathing glow */
.tm-hb.mega::before{inset:-240%;opacity:1;animation:tm-mega 2.4s ease-in-out infinite}
.tm-hb.mega{box-shadow:0 0 14px 4px var(--c),0 0 34px 10px color-mix(in srgb,var(--c) 50%,transparent);transition:box-shadow 1s ease-in-out}
@keyframes tm-mega{0%,100%{opacity:.55;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.tm-hb.pz::before{opacity:1;transition:opacity .2s ease-out}
.tm-hb.knob::after{content:"";position:absolute;left:50%;top:8%;width:2px;height:38%;margin-left:-1px;background:#fff6d8;border-radius:1px;transform-origin:50% 110%;rotate:var(--k,0deg);transition:rotate .4s;opacity:0}
.tm-hb.knob.turned::after{opacity:.8}
html.tm-dark .tm-hb:not([data-act="power"])::before{opacity:0}
html.tm-noports .tm-port{opacity:0}
html.flux .tb-year{text-shadow:0 0 12px #fff,0 0 30px #7fdfff}
@media (max-width:760px){
  .tm-cockpit{height:auto;display:flex;flex-direction:column}
  .tm-view{position:relative;inset:auto;height:62vh;min-height:340px}
  .tm-view::after{background:linear-gradient(0deg,#1a110b 0,rgba(26,17,11,0) 25%)}
  .tm-title{position:static;max-width:none;padding:0 20px;margin-top:-30px}
  .tb-now-in{margin-top:14px}
  .tm-panel{grid-template-columns:1fr}.tc{flex-direction:row;align-items:center;justify-content:space-between}.tc span{width:9.5em}
}

/* the tape: the whole fall as a measuring tape down the right side. Each year is a mark, each era a band in its colour;
   the marker is where you are. Click or drag it to go anywhere. */
.tb-tape{position:fixed;right:10px;top:64px;bottom:150px;z-index:19;width:54px}
.tp-rail{position:absolute;inset:0 0 0 auto;width:54px;cursor:ns-resize;touch-action:none;outline:none;border-radius:8px;
  background:linear-gradient(90deg,transparent 0 22px,rgba(10,16,24,.5) 22px);border:1px solid transparent;transition:background .6s}
.tp-rail:focus-visible{border-color:#6ee7b7}
.tp-bands{position:absolute;right:0;top:0;bottom:0;width:6px;border-radius:3px;overflow:hidden}
.tp-bands i{position:absolute;left:0;right:0;background:var(--c);opacity:.9}
.tp-ticks{position:absolute;inset:0}
.tp-ticks i{position:absolute;right:8px;width:7px;height:1px;background:currentColor;opacity:.55}
.tp-ticks i.big{width:14px;opacity:.9}
.tp-ticks b{position:absolute;right:24px;translate:0 -50%;font:700 10px/1 ui-monospace,Menlo,monospace;opacity:.75;pointer-events:none}
.tp-mark{position:absolute;right:-4px;left:-8px;height:0;transition:top .12s linear}
.tp-mark::before{content:"";position:absolute;left:8px;right:0;top:-1px;height:2px;background:#ff4b3a;box-shadow:0 0 8px #ff4b3a}
.tp-mark b{position:absolute;right:62px;top:0;translate:0 -50%;padding:2px 6px;border-radius:5px;background:#ff4b3a;color:#fff;font:800 12px/1.2 ui-monospace,Menlo,monospace;box-shadow:0 0 12px rgba(255,75,58,.6);white-space:nowrap}
.tb-tape{color:#e8eef2;transition:color .6s}
html[data-era="e15"] .tb-tape,html[data-era="e10"] .tb-tape,html[data-era="e05"] .tb-tape,html[data-era="e97"] .tb-tape,html[data-era="end"] .tb-tape{color:#13212b}
html[data-era="e15"] .tp-rail,html[data-era="e10"] .tp-rail,html[data-era="e05"] .tp-rail,html[data-era="e97"] .tp-rail,html[data-era="end"] .tp-rail{background:linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.55) 22px)}
.tp-rail.drag .tp-mark{transition:none}
@media (max-width:1100px){.tb-tape{top:58px;bottom:175px;width:30px;right:4px}.tp-rail{width:30px;background:linear-gradient(90deg,transparent 0 12px,rgba(10,16,24,.45) 12px)}.tp-ticks b{display:none}.tp-mark b{right:36px}
  .era-in,.tb-now-in,.tb-end{padding-right:22px}}
@media (prefers-reduced-motion:reduce){.tm-hb.beckon::before,.tm-hb.mega::before,.tb-now,.tm-jw,.tm-port::before,.tm-nd{animation:none!important}.tm-nd{transition:none}.tp-mark{transition:none}}

/* 2005-2009: archived pages in a mid-2000s browser window, grey chrome and a blue tab */
.win05s{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:18px;margin:18px 0 22px}
.win05{margin:0;border:1px solid #8a9aa8;border-radius:6px;background:#f2f4f7;overflow:hidden;box-shadow:0 8px 22px rgba(20,40,70,.22)}
.win05-bar{display:flex;align-items:center;gap:8px;padding:6px 10px;background:linear-gradient(180deg,#f7f9fb,#d6dde5);border-bottom:1px solid #9aa8b6;font:600 12px "Lucida Grande",Tahoma,sans-serif;color:#223}
.win05-bar i{flex:none;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#3a9bd8 60%,#1d5f8f)}
.win05-bar span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.win05 img{display:block;width:100%;height:auto;max-height:420px;object-fit:cover;object-position:top;background:#fff}
.win05 figcaption{padding:8px 10px;font:13px/1.5 "Lucida Grande",Tahoma,sans-serif;color:#223;background:#f2f4f7}

/* 2014-2019: an archived page in a flat, mid-2010s browser window */
.win15{margin:18px 0 0;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.win15-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#eceff1;font:500 12px Roboto,"Helvetica Neue",Arial,sans-serif;color:#555}
.win15-bar i{flex:none;width:10px;height:10px;border-radius:50%;background:#ff5f57}.win15-bar i+i{background:#febc2e}.win15-bar i+i+i{background:#28c840}
.win15-bar span{margin-left:10px;flex:1;padding:3px 10px;border-radius:4px;background:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.win15 img{display:block;width:100%;height:auto}
.win15 figcaption{padding:8px 12px;font:13px/1.5 Roboto,"Helvetica Neue",Arial,sans-serif;color:#555}
/* 2000-2004: the tour full width, the other two windows side by side on wide screens */
@media (min-width:900px){.e00 .me{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}.e00 .me>*{grid-column:1/-1}.e00 .me>.win00~.win00{grid-column:auto;align-self:start}}

.e00 .me>.win00.wide{grid-column:1/-1}
/* 1997-1999: the column's GIFs in a table, the way they'd have sat on the page */
.gif99{margin:14px auto 0;border-collapse:collapse;background:#fff;border:2px outset #c0c0c0}
.gif99 caption{caption-side:bottom;padding:6px 0 0;font:italic 13px "Times New Roman",Times,serif;color:#000}
.gif99 td{border:1px inset #c0c0c0;text-align:center;vertical-align:middle;padding:6px}
.gif99 img{display:block;max-width:100%;max-height:110px;width:auto;height:auto;margin:auto}
@media (max-width:560px){.gif99 td{padding:3px}.gif99 img{max-width:52px}}
.win00.tall img{max-height:620px;object-fit:cover;object-position:top}
@media (min-width:900px){.win00.tall img{max-width:640px;margin:0 auto}}

/* wide screens: the reading column sits right of the toolbox, centred in the space left between them
   and the tape */
@media (min-width:1101px){
  .era-in,.tb-now-in{width:min(820px,calc(100% - 308px));margin-left:max(248px,calc(248px + (100% - 308px - 820px) / 2));margin-right:auto}
  .tb-now-in{width:min(1000px,calc(100% - 308px));margin-left:max(248px,calc(248px + (100% - 308px - 1000px) / 2))}
}