/* Since ’96 · After Hours, channel 1.
   1. the stage and the deck (year, caption, scrubber)   2. the browsers: Windows 95/98, XP and Mac OS X
   3. browser defaults for the 1996 to 2000 markup        4. the Flash movie   5. loading   7. the morph
   The 2001 to 2007 pages bring their own style sheets (eras.js), the way they did then. */

.s96{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.s96 *,.s96 *::before,.s96 *::after{box-sizing:border-box}

/* ---------- 1. stage ---------- */
.stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(120% 95% at 50% 30%,#1C1727 0%,#120F1A 46%,#0C0A12 78%)}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>") 0 0/200px 200px}
.fitbox{position:relative;z-index:1}
.fit{position:absolute;left:0;top:0;transform-origin:0 0}

/* ---------- the deck ---------- */
.deck{position:relative;z-index:5;flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"year text btns" "scrub scrub scrub";
  align-items:end;gap:2px 24px;padding:12px var(--gutter) 10px;border-top:1px solid var(--line);background:linear-gradient(#0F0D17,#0C0A12)}
.year{grid-area:year;display:flex;margin:-.12em 0 -.1em;font:900 clamp(54px,6.2vw,92px)/1 var(--f-display);letter-spacing:0;color:var(--text);user-select:none}
.dg{display:block;height:1em;width:.5em;overflow:hidden}
.dg-in{display:block;transform:translateY(calc(var(--d,0) * -1em));transition:transform .6s cubic-bezier(.2,.85,.2,1)}
.dg-in i{display:block;height:1em;line-height:1;font-style:normal;text-align:center}
.era-text{grid-area:text;min-width:0;padding-bottom:3px}
.era-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 5px}
.era-line b{font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.era-line span{font:12px/1.3 var(--f-mono);letter-spacing:.02em;color:var(--text-3)}
.era-cap{margin:0;max-width:72ch;font-size:15px;line-height:1.45;color:var(--text-2);text-wrap:pretty}
.btns{grid-area:btns;display:flex;gap:8px;padding-bottom:4px}
.dbtn{font:700 13.5px/1 var(--f-body);color:var(--text);background:transparent;
  border:1px solid var(--line-2);border-radius:3px;padding:9px 14px;cursor:pointer;white-space:nowrap;transition:border-color .2s,box-shadow .2s,color .2s}
.dbtn:hover{border-color:var(--text)}
.dbtn[aria-pressed="true"]{--g:var(--aqua);color:#fff;border-color:var(--g);box-shadow:0 0 10px color-mix(in srgb,var(--g) 55%,transparent),inset 0 0 8px color-mix(in srgb,var(--g) 35%,transparent);text-shadow:0 0 6px var(--g)}
#b-sound[aria-pressed="true"],#b-play[aria-pressed="true"]{--g:var(--amber)}
/* the scrubber, with a step button at each end for landing on one exact year */
.scrub-row{grid-area:scrub;display:flex;align-items:flex-start;gap:4px;margin-top:10px}
.ystep{flex:none;width:34px;height:32px;display:grid;place-items:center;padding:0 0 3px;font:400 26px/1 var(--f-body);color:var(--text-2);
  background:transparent;border:1px solid var(--line-2);border-radius:3px;cursor:pointer;transition:border-color .2s,color .2s}
.ystep:hover{border-color:var(--text);color:var(--text)}
.ystep:disabled{opacity:.35;cursor:default;border-color:var(--line-2)}
.ystep:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.scrub{position:relative;flex:1 1 auto;min-width:0;height:66px;padding:0 14px;cursor:pointer;touch-action:none;outline:none;user-select:none;-webkit-user-select:none}
.scrub-in{position:relative;height:100%}
.rail{position:absolute;left:0;right:0;top:14px;height:3px;border-radius:3px;background:#2B2636}
.rail i{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);border-radius:inherit;background:#FFE3B0;
  box-shadow:0 0 6px var(--amber),0 0 14px var(--amber);transition:width .45s cubic-bezier(.2,.85,.2,1)}
.ticks,.eras{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.ticks li{position:absolute;top:24px;left:var(--x);transform:translateX(-50%);font:11px/1 var(--f-mono);color:var(--text-3);transition:color .2s}
.ticks li::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:6px;background:#4B4458}
.ticks li.era::before{top:-17px;height:12px;background:#7A7189}
.ticks li.on{color:var(--text)}
.eras li{position:absolute;top:40px;left:var(--a);font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#5E5770;white-space:nowrap;transition:color .2s}
.eras li.on{color:var(--amber)}
.eras li[data-row="1"]{top:54px}
.knob{position:absolute;top:15.5px;left:var(--p,0%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#FFF6E6;
  box-shadow:0 0 0 4px rgba(255,178,62,.16),0 0 10px var(--amber),0 0 24px var(--amber);transition:left .45s cubic-bezier(.2,.85,.2,1)}
.scrub.dragging .knob,.scrub.dragging .rail i{transition:none}
.scrub:focus-visible .knob{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--amber),0 0 22px var(--amber)}

/* ---------- 2. the browsers ---------- */
.win{position:relative;display:flex;flex-direction:column;overflow:hidden;color:#000;text-align:left;user-select:none;-webkit-user-select:none;
  font:11px/1.2 Tahoma,"MS Sans Serif","Segoe UI",Arial,sans-serif;-webkit-font-smoothing:auto;view-transition-name:ah-win}
.win *,.win *::before,.win *::after{box-sizing:content-box}
.tb{position:relative;flex:none;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden}
.tb-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.wbs{display:flex;flex:none}
.chrome{flex:none}
.mb{display:flex;height:19px;align-items:center;padding:0 2px;white-space:nowrap;overflow:hidden}
.mb span{padding:0 6px}
.mb u{text-decoration:underline}
.bar{display:flex;align-items:center;gap:2px;padding:2px 3px;white-space:nowrap;overflow:hidden}
.b{flex:none;padding:3px 7px}
.lbl{flex:none;padding:0 5px}
.fld{position:relative;flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:4px;height:18px;padding:0 4px;background:#FFF;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* the viewport: a page's position:fixed pieces pin to it (layout containment), and its z-indexes stay inside it (isolation),
   under the status bubble and a phone's status bar */
.vpw{position:relative;flex:1 1 auto;min-height:0;min-width:0;background:#FFF;overflow:hidden;container:vp/size;contain:layout}
.vp{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;user-select:text;-webkit-user-select:text;isolation:isolate}
.sb{flex:none;display:flex;gap:2px;height:20px;padding-top:2px}
.sb>span{position:relative;padding:3px 5px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sb-t{flex:1;min-width:0}
.sb-p{flex:none;width:110px}
.sb-p i{position:absolute;left:2px;top:3px;bottom:3px;width:0;max-width:calc(100% - 4px)}
.sb-z{flex:none;width:110px}
.sb-k{flex:none;width:14px}

/* Windows 95 and 98 */
.w9x{background:#C0C0C0;padding:3px;box-shadow:inset -1px -1px #0A0A0A,inset 1px 1px #DFDFDF,inset -2px -2px #808080,inset 2px 2px #FFF,0 30px 90px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4)}
.w9x .tb{height:18px;padding:0 2px 0 4px;background:#000080;color:#FFF;font-weight:bold}
.w98 .tb{background:linear-gradient(90deg,#000080,#1084D0)}
.w9x .wb{position:relative;width:16px;height:14px;background:#C0C0C0;box-shadow:inset -1px -1px #0A0A0A,inset 1px 1px #FFF,inset -2px -2px #808080,inset 2px 2px #DFDFDF}
.w9x .wb-x{margin-left:2px}
.w9x .wb-min::before{content:"";position:absolute;left:4px;bottom:3px;width:6px;height:2px;background:#000}
.w9x .wb-max::before{content:"";position:absolute;left:3px;top:2px;width:7px;height:6px;border:1px solid #000;border-top-width:2px}
.w9x .wb-x::before,.w9x .wb-x::after{content:"";position:absolute;left:4px;top:6px;width:8px;height:2px;background:#000;transform:rotate(45deg)}
.w9x .wb-x::after{transform:rotate(-45deg)}
.w9x .bar{border-top:1px solid #808080;box-shadow:inset 0 1px #FFF;padding-top:3px}
.w9x .tbtn .b{box-shadow:inset -1px -1px #0A0A0A,inset 1px 1px #FFF,inset -2px -2px #808080,inset 2px 2px #DFDFDF;padding:4px 8px}
.w9x .tbtn.big .b{padding:9px 8px 6px}
.w9x .tbtn.flat .b{box-shadow:none;padding:8px 7px 6px}
.w9x .b.dis{color:#808080;text-shadow:1px 1px #FFF}
.w9x .dirs .b,.w9x .loc .b{box-shadow:inset -1px -1px #0A0A0A,inset 1px 1px #FFF,inset -2px -2px #808080,inset 2px 2px #DFDFDF;padding:3px 7px}
.w9x .dirs .b{flex:1;text-align:center}
.w9x .fld{box-shadow:inset -1px -1px #FFF,inset 1px 1px #808080,inset -2px -2px #DFDFDF,inset 2px 2px #0A0A0A;padding:0 5px}
.w9x .pers .lk{padding:2px 8px;border-right:1px solid #808080;box-shadow:1px 0 #FFF}
.w9x .lk{color:#000}
.w9x .sep{flex:none;width:2px;height:22px;margin:0 4px;box-shadow:inset 1px 0 #808080,inset -1px 0 #FFF}
.w9x .vpw{margin-top:2px;border:2px solid;border-color:#808080 #FFF #FFF #808080}
.w9x .sb>span{box-shadow:inset 1px 1px #808080,inset -1px -1px #FFF}
.w9x .sb-p i{background:repeating-linear-gradient(90deg,#000080 0 8px,transparent 8px 10px)}
.c-nn3 .sb-p i,.c-nc4 .sb-p i{background:#000080}

/* Windows XP */
.xp{background:#0055E5;padding:0 4px 4px;border-radius:8px 8px 0 0;box-shadow:0 30px 90px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4),inset 0 0 0 1px #0831D9}
.xp .tb{height:30px;margin:0 -4px;padding:0 6px 0 10px;border-radius:8px 8px 0 0;color:#FFF;font:bold 13px/1 "Trebuchet MS",Tahoma,Arial,sans-serif;text-shadow:1px 1px #0F1089;
  background:linear-gradient(#0997FF,#0053EE 8%,#0050EE 40%,#06F 88%,#06F 93%,#005BFF 95%,#003DD7 96%,#003DD7)}
.xp .wbs{gap:2px}
.xp .wb{position:relative;width:21px;height:21px;border:1px solid #FFF;border-radius:3px;background:radial-gradient(circle at 75% 85%,#1D51D8,#3C83F5 55%,#6FA7FF)}
.xp .wb-x{background:radial-gradient(circle at 75% 85%,#B5300C,#E2582D 55%,#F59A7E)}
.xp .wb-min::before{content:"";position:absolute;left:5px;bottom:5px;width:7px;height:3px;background:#FFF}
.xp .wb-max::before{content:"";position:absolute;left:4px;top:4px;width:9px;height:8px;border:1px solid #FFF;border-top-width:3px}
.xp .wb-x::before,.xp .wb-x::after{content:"";position:absolute;left:4px;top:9px;width:13px;height:2px;background:#FFF;transform:rotate(45deg)}
.xp .wb-x::after{transform:rotate(-45deg)}
.xp .chrome{background:#ECE9D8;font:11px/1.2 Tahoma,"Segoe UI",Arial,sans-serif}
.xp .mb{height:20px;border-bottom:1px solid #D4D0C8}
.xp .bar{border-top:1px solid #FFF;border-bottom:1px solid #D4D0C8;padding:3px 4px;background:linear-gradient(#FEFEFC,#ECE9D8)}
.xp .xtb{height:36px}
.xp .xtb .b{display:flex;align-items:center;gap:5px;padding:3px 6px}
.xp .b.dis{opacity:.45}
.xp .sep{flex:none;width:1px;height:26px;margin:0 3px;background:#C5C2B2;box-shadow:1px 0 #FFF}
.xp .loc{height:22px}
.xp .fld{height:18px;border:1px solid #7F9DB9;padding:0 4px}
.xp .go{display:flex;align-items:center;gap:4px}
.xp .vpw{background:#FFF}
.xp .sb{height:22px;padding:0;background:#ECE9D8;border-top:1px solid #D4D0C8}
.xp .sb>span{padding:4px 6px 0;border-right:1px solid #D4D0C8}
.xp .sb-p i{top:6px;bottom:6px;background:repeating-linear-gradient(90deg,#2BD52B 0 7px,transparent 7px 9px)}
.xp .fxb{height:38px}
.xp .fxb .b.big .ic{width:24px;height:24px}
.xp .srch{flex:none;display:flex;align-items:center;gap:5px;width:170px;height:18px;margin-left:6px;border:1px solid #7F9DB9;background:#FFF;padding:0 5px;color:#7E7E7E}
.xp .srch b{color:#3366CC;font:bold 12px/1 Georgia,serif}
.xp .bmk{height:20px;gap:10px}
.xp .bmk .lk{display:flex;align-items:center;gap:4px}

/* toolbar icons: small drawings of the real ones */
.ic{position:relative;display:inline-block;flex:none;width:18px;height:18px}
.ic-back,.ic-fwd,.ic-go{border-radius:50%;background:radial-gradient(circle at 35% 30%,#9BEA7E,#2C9E25 60%,#1D7A18)}
.ic-back::before,.ic-fwd::before,.ic-go::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border:5px solid transparent}
.ic-back::before{border-right:7px solid #FFF;border-left:0;transform:translateX(-1px)}
.ic-fwd::before,.ic-go::before{border-left:7px solid #FFF;border-right:0;transform:translateX(1px)}
.ic-go{width:16px;height:16px}
.ic-stop{border-radius:3px;background:linear-gradient(#F27A5E,#C83C1E)}
.ic-stop::before,.ic-stop::after{content:"";position:absolute;left:4px;top:8px;width:10px;height:2px;background:#FFF;transform:rotate(45deg)}
.ic-stop::after{transform:rotate(-45deg)}
.ic-ref{border-radius:50%;border:3px solid #3A9A2E;border-right-color:transparent;width:12px;height:12px}
.ic-home{width:18px}
.ic-home::before{content:"";position:absolute;left:2px;top:1px;border:7px solid transparent;border-bottom:7px solid #C2392B;border-top:0}
.ic-home::after{content:"";position:absolute;left:4px;top:8px;width:10px;height:8px;background:#F1E3B5;box-shadow:inset 0 0 0 1px #9C7C3C}
.ic-find::before{content:"";position:absolute;left:2px;top:2px;width:8px;height:8px;border:2px solid #4A6EA9;border-radius:50%;background:#DDEBFB}
.ic-find::after{content:"";position:absolute;left:12px;top:11px;width:3px;height:7px;background:#4A3A20;transform:rotate(-45deg)}
.ic-star{clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:linear-gradient(#FFE27A,#F0AE1A)}
.ic-hist{border-radius:50%;background:#E8F0FB;box-shadow:inset 0 0 0 2px #5A7FBF}
.ic-hist::before{content:"";position:absolute;left:8px;top:4px;width:2px;height:6px;background:#333}
.ic-page{width:12px;height:14px;background:#FFF;box-shadow:inset 0 0 0 1px #7F8FA6}
.ic-page::before{content:"";position:absolute;left:3px;right:3px;top:4px;height:6px;background:repeating-linear-gradient(#9AA6B8 0 1px,transparent 1px 2px)}
.ic-feed{width:12px;height:12px;border-radius:2px;background:linear-gradient(135deg,#FFA54A,#E2610A)}

/* Mac OS X: Safari 2 on Tiger (brushed metal) and Safari 3 on Leopard */
.mac{background:#FFF;border-radius:6px 6px 0 0;box-shadow:0 0 0 1px rgba(0,0,0,.42),0 30px 90px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4)}
.mac .tb,.mac .chrome{font:13px/1.2 "Lucida Grande","Lucida Sans Unicode","Helvetica Neue",Helvetica,Arial,sans-serif;color:#2C2C2C}
.mac .tb{height:22px;justify-content:center;border-radius:6px 6px 0 0;background:linear-gradient(#EBEBEB,#D6D6D6);text-shadow:0 1px rgba(255,255,255,.7)}
.mac .tb-t{flex:none;max-width:70%}
.lights{position:absolute;left:9px;top:5px;display:flex;gap:8px}
.lights i{width:12px;height:12px;border-radius:50%;background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}
.lights i:nth-child(2){background:#FEBC2E}
.lights i:nth-child(3){background:#28C840}
.mac .lights i,.chm .lights i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),inset 0 2px 3px rgba(255,255,255,.55)}
.mac .lights i:nth-child(1),.chm .lights i:nth-child(1){background:radial-gradient(circle at 50% 30%,#FFB9B2,#EE4D45 45%,#B32A22)}
.mac .lights i:nth-child(2),.chm .lights i:nth-child(2){background:radial-gradient(circle at 50% 30%,#FFE7A6,#F1B12B 45%,#B27A0E)}
.mac .lights i:nth-child(3),.chm .lights i:nth-child(3){background:radial-gradient(circle at 50% 30%,#D3F7B4,#62C342 45%,#2F8A1A)}
.mac .chrome{background:linear-gradient(#D6D6D6,#B6B6B6);border-bottom:1px solid #7E7E7E}
.mac.y2006 .tb,.mac.y2006 .chrome{background:linear-gradient(#D4D4D4,#A8A8A8);background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.035) 1px 3px),linear-gradient(#D4D4D4,#A9A9A9)}
.mac .mtools{height:36px;gap:9px;padding:0 10px}
.mac .seg{display:flex;flex:none;border:1px solid #6E6E6E;border-radius:5px;overflow:hidden;background:linear-gradient(#FDFDFD,#CFCFCF);box-shadow:0 1px rgba(255,255,255,.5)}
.mac .seg i{position:relative;width:26px;height:20px}
.mac .seg i+i{border-left:1px solid #8A8A8A}
.mac .tri::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border:5px solid transparent}
.mac .tri.l::before{border-right:7px solid #555;border-left:0}
.mac .tri.r::before{border-left:7px solid #A0A0A0;border-right:0}
.mac .mb1{flex:none;width:24px;height:20px;border:1px solid #6E6E6E;border-radius:5px;background:linear-gradient(#FDFDFD,#CFCFCF);text-align:center;line-height:19px;font-size:15px;color:#555}
.mac .fld{height:21px;border:1px solid #858585;border-radius:3px;box-shadow:inset 0 1px 2px rgba(0,0,0,.18);font-size:12px;padding:0 6px;overflow:hidden}
.mac .fld>span{position:relative;flex:1;overflow:hidden;text-overflow:ellipsis}
.mac .fld::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(#C3DEFC,#8DBDF4);opacity:.85}
.mac .fld.loading::before{animation:s96-sfload .65s ease-out forwards}
@keyframes s96-sfload{to{width:100%}}
.mac .pf{position:relative;flex:none;width:12px;height:14px;background:#FFF;box-shadow:inset 0 0 0 1px #9AA6B5}
.mac .rl{position:relative;flex:none;width:9px;height:9px;border:2px solid #777;border-radius:50%;border-top-color:transparent}
.mac .srch{flex:none;width:170px;height:20px;border:1px solid #858585;border-radius:11px;background:#FFF;box-shadow:inset 0 1px 2px rgba(0,0,0,.18);color:#9A9A9A;font-size:12px;line-height:20px;padding-left:22px}
.mac .mbm{height:22px;gap:16px;padding:0 12px;border-top:1px solid rgba(255,255,255,.35);font-size:11px;color:#2C2C2C}
.mac .vpw{background:#FFF}

/* scrollbars, in the style of each system (Chrome and Safari draw these; Firefox gets the colors) */
.w9x .vp::-webkit-scrollbar,.w9x x-frame::-webkit-scrollbar{width:16px;height:16px}
.w9x .vp::-webkit-scrollbar-track,.w9x x-frame::-webkit-scrollbar-track{background:repeating-conic-gradient(#C0C0C0 0 25%,#FFF 0 50%) 0 0/2px 2px}
.w9x .vp::-webkit-scrollbar-thumb,.w9x x-frame::-webkit-scrollbar-thumb{background:#C0C0C0;box-shadow:inset -1px -1px #0A0A0A,inset 1px 1px #DFDFDF,inset -2px -2px #808080,inset 2px 2px #FFF}
.w9x .vp::-webkit-scrollbar-button:single-button,.w9x x-frame::-webkit-scrollbar-button:single-button{display:block;width:16px;height:16px;background-color:#C0C0C0;background-repeat:no-repeat;background-position:center;
  box-shadow:inset -1px -1px #0A0A0A,inset 1px 1px #DFDFDF,inset -2px -2px #808080,inset 2px 2px #FFF}
.w9x .vp::-webkit-scrollbar-button:single-button:vertical:decrement,.w9x x-frame::-webkit-scrollbar-button:single-button:vertical:decrement{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4'><path d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z'/></svg>")}
.w9x .vp::-webkit-scrollbar-button:single-button:vertical:increment,.w9x x-frame::-webkit-scrollbar-button:single-button:vertical:increment{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='7' height='4'><path d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/></svg>")}
.w9x .vp::-webkit-scrollbar-corner{background:#C0C0C0}
.xp .vp::-webkit-scrollbar{width:17px;height:17px;background:#F4F3EE}
.xp .vp::-webkit-scrollbar-thumb{border:1px solid #B8CBF4;border-radius:3px;background:linear-gradient(90deg,#CADAF9,#BBCFF7 50%,#B1C7F5)}
.xp .vp::-webkit-scrollbar-button:single-button{display:block;height:17px;width:17px;border:1px solid #B8CBF4;border-radius:3px;background:#C9D9FA}
.mac .vp::-webkit-scrollbar{width:15px;height:15px;background:linear-gradient(90deg,#E4E4E4,#FAFAFA)}
.mac .vp::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:8px;background:linear-gradient(90deg,#3E8FE8,#8BC3FA 45%,#2D74D3) padding-box}
/* from Lion (2011) the Mac hides its scrollbars until you scroll, and a phone never shows one */
.mac.y2011 .vp,.chm:not(.y2010) .vp,.ch18 .vp,.arc .vp,.sf26 .vp{scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.3) transparent}
.ch18.dark .vp{scrollbar-color:rgba(255,255,255,.28) transparent}
.iphone .vp{scrollbar-width:none}
@supports not selector(::-webkit-scrollbar){
  .w9x .vp,.w9x x-frame{scrollbar-color:#C0C0C0 #E3E3E3}
  .xp .vp{scrollbar-color:#BBCFF7 #F4F3EE}
  .mac .vp{scrollbar-color:#5DA1EE #EFEFEF}
}

/* ---------- 3. what the browsers did with 1996 to 2000 markup ---------- */
.pg{position:relative;height:100%;color:#000;font:16px/1.2 "Times New Roman",Times,serif;text-align:left;cursor:auto}
/* the browser's own defaults, in a layer of their own so that every style sheet a page brings beats them, layered or not */
@layer s96-ua{
  .pg x-body{display:flow-root;min-height:100%;padding:8px;background-repeat:repeat}
  .pg a{color:var(--link,#0000EE)}
  .pg h1{font-size:2em;margin:.67em 0}
}
.pg img.px{image-rendering:pixelated}
.pg blink{animation:s96-blink 1.06s steps(1,end) infinite}
@keyframes s96-blink{50%{visibility:hidden}}
.pg x-param,.pg x-embed{display:none}

/* 1997 and 1998: the frameset fills the window */
.era-b{height:100%}
.era-b x-frame{position:relative;display:block;min-height:0;overflow:hidden}
.era-b x-frame[name="main"]{overflow:auto;overscroll-behavior:contain}
.era-b x-frame>x-body{min-height:100%}
.era-b h2{margin:.3em 0 .5em}
/* 1997: a banner frame on top, the menu frame down the left, 3D borders between them */
.p1997>x-frameset{display:grid;grid-template-rows:96px minmax(0,1fr);gap:4px;height:100%;background:#C0C0C0}
.p1997 x-frameset x-frameset{display:grid;grid-template-columns:160px minmax(0,1fr);gap:4px;min-height:0}
.p1997 x-frame{border:2px solid;border-color:#808080 #FFF #FFF #808080}
.p1997 x-frame[name="main"]>x-body{padding:6px 14px 18px}
/* 1998: three frames stacked with no borders at all */
.p1998>x-frameset{display:grid;grid-template-rows:108px minmax(0,1fr) 26px;height:100%;background:#000}
.p1998 x-frame[name="main"]>x-body{padding:0}
.p1998 x-frame[name="main"]::-webkit-scrollbar{width:16px;background:#2A2A2A}
.p1998 x-frame[name="main"]::-webkit-scrollbar-thumb{background:#5A5A5A;box-shadow:inset -1px -1px #1A1A1A,inset 1px 1px #8A8A8A}
.p1998 x-frame[name="main"] p{margin:0 0 12px}
.p1998 div[id^="star"]{pointer-events:none;z-index:5;line-height:0}

/* 1999 and 2000: a page that only holds the movie */
.era-c{height:100%}
.era-c x-body{height:100%;min-height:0}
.era-c x-object{position:relative;display:inline-block;vertical-align:top;text-align:left}
.era-c p{margin:8px 0 0}
.p1999 x-object{width:720px;height:400px}
.p2000 table{min-height:452px}
.p2000 x-object{width:760px;height:420px}

/* 2001 to 2003: images in table cells sat on the baseline in standards mode; quirks mode didn't leave the gap */
.era-d img{vertical-align:top}
.era-d td{font-size:11px}
.era-d .thumb{object-fit:cover}
.p2003 #work img{object-fit:cover}

/* 2005: the WordPress thumbnails */
.p2005 .entry img{object-fit:cover}
.p2005 #searchform input{font:11px "Lucida Grande",Verdana,Arial,sans-serif}

/* 2006: Cover Flow, drawn in 3D for today's browsers (in 2006 it took Flash or a canvas script) */
.p2006 #flow ul{perspective:760px;transform-style:preserve-3d}
.p2006 #flow li{transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.75,.2,1);cursor:pointer}
.p2006 #flow li a{display:block;line-height:0}
.p2006 #flow img{object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.p2006 #flow .refl{display:block;width:240px;height:70px;background-size:240px 160px;background-position:0 100%;background-repeat:no-repeat;transform:scaleY(-1);
  opacity:.38;-webkit-mask-image:linear-gradient(transparent 10%,#000);mask-image:linear-gradient(transparent 10%,#000)}
.p2006 #flow li:not(.front) img{filter:brightness(.6)}
.p2006 #flow li:not(.front):hover img{filter:brightness(.85)}
.p2006 #logo sup,.p2006 #nav a,.p2006 .go{border-radius:15px}
.p2006 #logo sup{border-radius:3px}
.p2006 .go{border-radius:20px}

/* 2006 and 2007: reflection.js */
.era-f #thumbs li a{display:block;line-height:0}
.era-f .refl{display:block;width:144px;height:30px;margin:0 0 8px;background-size:144px 98px;background-position:0 100%;background-repeat:no-repeat;
  transform:scaleY(-1);opacity:.32;border-radius:6px;-webkit-mask-image:linear-gradient(transparent,#000);mask-image:linear-gradient(transparent,#000)}
.era-f #thumbs img{object-fit:cover}
.era-f #thumbs a{border-radius:6px}
.era-f .button,.era-f #nav a,.era-f .beta{border-radius:9px}
.era-f #nav a{border-radius:17px}
.era-f .beta{border-radius:4px}
.era-f #thumbs img{border-radius:6px}
.era-e .thumb,.era-f #thumbs img{object-fit:cover}

/* ---------- 4. the Flash movie ---------- */
.swf{position:absolute;inset:0;overflow:hidden;color:#C9D1D9;background:linear-gradient(#181D22,#0C0F12);font-family:Verdana,Geneva,"DejaVu Sans",sans-serif;cursor:default;isolation:isolate}
.swf::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:20px 20px}
.swf::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px)}
.px8{font-family:Silkscreen,"Courier New",monospace;font-size:8px;line-height:10px;letter-spacing:.5px;text-transform:uppercase;-webkit-font-smoothing:none;font-smooth:never}
.swf p,.swf h2,.swf ul{margin:0}
.swf ul{padding:0;list-style:none}
.swf a{color:inherit;text-decoration:none}
.swf-load{position:absolute;left:50%;top:50%;width:210px;transform:translate(-50%,-50%);display:grid;gap:7px;color:#C9D1D9}
.swf-load b{color:#FF7A1A;font-weight:normal}
.swf-lbar{display:block;height:2px;background:#2C3640}
.swf-lbar i{display:block;height:100%;width:0;background:#FF6A00}
.swf-load small{color:#5E6A76;font-size:8px}
.swf-main{position:absolute;inset:0}
.swf[data-st="load"] .swf-main,.swf[data-st="load"] .swf-skip{visibility:hidden}
.swf[data-st="intro"] .swf-load,.swf[data-st="main"] .swf-load,.swf[data-st="main"] .swf-skip{display:none}
.swf-top{position:absolute;left:24px;top:18px;color:#6E7A86}
.swf-ver{position:absolute;right:24px;top:18px;color:#4E5A66}
.swf[data-st="intro"] .swf-ver{visibility:hidden}
.swf-name{position:absolute;left:38px;top:96px;font:bold 32px/1 Verdana,Geneva,"DejaVu Sans",sans-serif;letter-spacing:8px;color:#EEF2F5;white-space:nowrap}
.swf-bar{position:absolute;left:41px;top:142px;width:236px;height:4px;background:#FF6A00;transform-origin:left}
.swf-tag{position:absolute;left:41px;top:158px;color:#FF7A1A;letter-spacing:2px}
.swf-tag .cur{font-style:normal;animation:s96-blink .8s steps(1,end) infinite}
.swf-intro{position:absolute;left:41px;top:184px;width:320px;font-size:10px;line-height:15px;color:#8C99A6}
.swf-nav{position:absolute;right:36px;top:88px;width:214px;border-top:1px solid #2C3640}
.swf-nav a{position:relative;display:block;height:27px;line-height:27px;padding:0 12px;color:#C9D1D9;border-bottom:1px solid #2C3640;overflow:hidden;isolation:isolate}
.swf-nav a::before{content:"";position:absolute;inset:0;z-index:-1;background:#FF6A00;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.swf-nav a b{font-weight:normal;color:#FF6A00}
.swf-nav a:hover{color:#0C0F12}
.swf-nav a:hover b{color:#0C0F12}
.swf-nav a:hover::before{transform:scaleX(1)}
.swf-work{position:absolute;left:24px;right:24px;top:282px;display:flex;justify-content:space-between}
.swf-work li{width:112px}
.swf-work img{display:block;width:112px;height:64px;object-fit:cover;outline:1px solid #2C3640;filter:grayscale(1) contrast(1.1) brightness(.75);transition:filter .35s}
.swf-work a:hover img{filter:none;outline-color:#FF6A00}
.swf-work span{display:block;margin-top:6px;color:#8C99A6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.swf-work a:hover span{color:#FF7A1A}
.swf-mail{position:absolute;left:24px;bottom:18px;color:#8C99A6}
.swf-mail a:hover{color:#FF7A1A}
.swf-xy{position:absolute;left:330px;bottom:18px;color:#4E5A66}
.swf-snd{position:absolute;right:22px;bottom:13px;display:flex;align-items:center;gap:6px;padding:3px 4px;background:none;border:0;color:#8C99A6;cursor:pointer}
.swf-snd:hover{color:#FF7A1A}
.swf-snd b{font-weight:normal}
.eq{display:inline-flex;align-items:flex-end;gap:1px;height:10px}
.eq i{display:block;width:2px;height:2px;background:#FF6A00}
.swf-snd[aria-pressed="true"] .eq i{animation:s96-eq .44s steps(4,end) infinite alternate}
.swf-snd[aria-pressed="true"] .eq i:nth-child(2){animation-duration:.31s}
.swf-snd[aria-pressed="true"] .eq i:nth-child(3){animation-duration:.52s}
.swf-snd[aria-pressed="true"] .eq i:nth-child(4){animation-duration:.36s}
.swf-snd[aria-pressed="true"] .eq i:nth-child(5){animation-duration:.47s}
@keyframes s96-eq{to{height:10px}}
.swf-plus{position:absolute;font:8px/1 Silkscreen,monospace;color:#3A4652;font-style:normal}
.p1{left:10px;top:8px}.p2{right:10px;top:8px}.p3{left:10px;bottom:8px}.p4{right:10px;bottom:8px}
.swf-skip{position:absolute;right:22px;top:12px;padding:5px 8px;background:none;border:1px solid #3A4652;color:#C9D1D9;cursor:pointer}
.swf-skip:hover{border-color:#FF6A00;color:#FF7A1A}
.swf-sweep{position:absolute;left:0;right:0;top:0;height:1px;background:#FF6A00;box-shadow:0 0 12px #FF6A00;opacity:0}
/* the intro: lines sweep in, the name decodes, everything else tweens into place */
.swf[data-st="intro"] .swf-sweep{animation:s96-sweep 1s cubic-bezier(.6,0,.2,1) both}
.swf[data-st="intro"] .swf-top{animation:s96-type .9s steps(28,end) .2s both}
.swf[data-st="intro"] .swf-bar{animation:s96-grow .7s cubic-bezier(.7,0,.2,1) 1s both}
.swf[data-st="intro"] .swf-tag{animation:s96-type .9s steps(26,end) 1.3s both}
.swf[data-st="intro"] .swf-intro{animation:s96-fade .6s ease 1.8s both}
.swf[data-st="intro"] .swf-nav li{animation:s96-slide .45s cubic-bezier(.2,.9,.3,1.25) both}
.swf[data-st="intro"] .swf-nav li:nth-child(1){animation-delay:1.9s}
.swf[data-st="intro"] .swf-nav li:nth-child(2){animation-delay:2s}
.swf[data-st="intro"] .swf-nav li:nth-child(3){animation-delay:2.1s}
.swf[data-st="intro"] .swf-nav li:nth-child(4){animation-delay:2.2s}
.swf[data-st="intro"] .swf-work li{animation:s96-pop .4s cubic-bezier(.2,.9,.3,1.4) both}
.swf[data-st="intro"] .swf-work li:nth-child(1){animation-delay:2.3s}
.swf[data-st="intro"] .swf-work li:nth-child(2){animation-delay:2.38s}
.swf[data-st="intro"] .swf-work li:nth-child(3){animation-delay:2.46s}
.swf[data-st="intro"] .swf-work li:nth-child(4){animation-delay:2.54s}
.swf[data-st="intro"] .swf-work li:nth-child(5){animation-delay:2.62s}
.swf[data-st="intro"] .swf-work li:nth-child(6){animation-delay:2.7s}
.swf[data-st="intro"] .swf-mail,.swf[data-st="intro"] .swf-xy,.swf[data-st="intro"] .swf-snd{animation:s96-fade .5s ease 2.8s both}
@keyframes s96-sweep{0%{top:0;opacity:1}100%{top:100%;opacity:.2}}
@keyframes s96-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes s96-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes s96-fade{from{opacity:0}to{opacity:1}}
@keyframes s96-slide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes s96-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}

/* 1999, Flash 4: a navy console, rounded tabs, projects you roll over and a ticker */
.swf.v4{background:radial-gradient(70% 80% at 28% 38%,#11426B 0%,#082642 55%,#03111F 100%);color:#9CC9E8}
.swf.v4::before{background-image:radial-gradient(rgba(120,200,255,.14) 1px,transparent 1.5px);background-size:16px 16px}
.swf.v4::after{background:none}
.s99-tabs{position:absolute;left:26px;top:22px;display:flex;gap:6px}
.s99-tabs a{display:block;padding:5px 13px 6px;border:1px solid #2E6E9E;border-radius:12px;background:linear-gradient(#174A73,#0A2440);color:#CDE8FA;
  font:bold 10px/1 Verdana,Geneva,"DejaVu Sans",sans-serif;transition:box-shadow .2s,border-color .2s}
.s99-tabs a:hover,.s99-tabs .on a{border-color:#33CCFF;color:#FFF;box-shadow:0 0 10px rgba(51,204,255,.55)}
.s99-name{position:absolute;left:30px;top:86px;font:bold 44px/1.08 Verdana,Geneva,"DejaVu Sans",sans-serif;letter-spacing:-2px;white-space:nowrap;
  background:linear-gradient(#FFFFFF 20%,#9BDCFF 60%,#33CCFF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:blur(0) drop-shadow(0 0 14px rgba(51,204,255,.35))}
.s99-tag{position:absolute;left:33px;top:146px;color:#33CCFF;font:11px/1 Verdana,Geneva,"DejaVu Sans",sans-serif;letter-spacing:2px}
.s99-intro{position:absolute;left:33px;top:176px;width:290px;font-size:11px;line-height:17px;color:#9CC9E8}
.s99-mail{position:absolute;left:33px;top:262px;font-size:10px;color:#5F9BC4}
.s99-mail a{color:#CDE8FA}
.s99-work{position:absolute;right:28px;top:84px;display:grid;grid-template-columns:repeat(3,92px);gap:12px 10px}
.s99-work a{display:block;line-height:0}
.s99-work img{width:92px;height:60px;object-fit:cover;border:1px solid #2E6E9E;border-radius:7px;filter:saturate(.35) brightness(.75);transition:filter .25s,transform .25s,border-color .25s}
.s99-work a:hover img{filter:none;transform:scale(1.07);border-color:#33CCFF}
.s99-cap{position:absolute;right:28px;top:240px;width:296px;color:#33CCFF}
.s99-ticker{position:absolute;left:0;right:0;bottom:0;height:24px;overflow:hidden;white-space:nowrap;background:rgba(0,0,0,.4);border-top:1px solid #1E4E74}
.s99-ticker span{display:inline-block;padding-left:100%;line-height:24px;color:#33CCFF;animation:s96-ticker 26s linear infinite}
@keyframes s96-ticker{to{transform:translateX(-100%)}}
.swf .s99-snd{right:16px;bottom:32px}
.swf.v4 .swf-skip{top:auto;right:auto;bottom:34px;left:26px;border-color:#2E6E9E;border-radius:10px;color:#9CC9E8;text-transform:lowercase}
.swf.v4 .swf-lbar i{background:#33CCFF}
.swf.v4 .swf-load b{color:#33CCFF}
.swf.v4[data-st="intro"] .s99-name{animation:s96-blurin .9s cubic-bezier(.2,.8,.2,1) .1s both}
.swf.v4[data-st="intro"] .s99-tag,.swf.v4[data-st="intro"] .s99-intro,.swf.v4[data-st="intro"] .s99-mail{animation:s96-fade .6s ease .8s both}
.swf.v4[data-st="intro"] .s99-tabs li{animation:s96-drop .45s cubic-bezier(.2,.9,.3,1.3) both}
.swf.v4[data-st="intro"] .s99-tabs li:nth-child(2){animation-delay:.1s}
.swf.v4[data-st="intro"] .s99-tabs li:nth-child(3){animation-delay:.2s}
.swf.v4[data-st="intro"] .s99-tabs li:nth-child(4){animation-delay:.3s}
.swf.v4[data-st="intro"] .s99-tabs li:nth-child(5){animation-delay:.4s}
.swf.v4[data-st="intro"] .s99-work li{animation:s96-pop .4s cubic-bezier(.2,.9,.3,1.4) both}
.swf.v4[data-st="intro"] .s99-work li:nth-child(1){animation-delay:1s}
.swf.v4[data-st="intro"] .s99-work li:nth-child(2){animation-delay:1.08s}
.swf.v4[data-st="intro"] .s99-work li:nth-child(3){animation-delay:1.16s}
.swf.v4[data-st="intro"] .s99-work li:nth-child(4){animation-delay:1.24s}
.swf.v4[data-st="intro"] .s99-work li:nth-child(5){animation-delay:1.32s}
.swf.v4[data-st="intro"] .s99-work li:nth-child(6){animation-delay:1.4s}
.swf.v4[data-st="intro"] .s99-ticker,.swf.v4[data-st="intro"] .s99-cap,.swf.v4[data-st="intro"] .s99-snd{animation:s96-fade .5s ease 1.7s both}
@keyframes s96-blurin{from{opacity:0;transform:translateX(-80px);filter:blur(8px) drop-shadow(0 0 14px rgba(51,204,255,0))}to{opacity:1;transform:none;filter:blur(0) drop-shadow(0 0 14px rgba(51,204,255,.35))}}
@keyframes s96-drop{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}

/* ---------- 5. pictures arriving over a modem, top to bottom ---------- */
.pg img.ld{visibility:hidden}
.pg img.scan{animation:s96-scan var(--d,600ms) steps(12,end) both}
@keyframes s96-scan{from{clip-path:inset(0 0 100% 0);filter:blur(2px)}60%{filter:blur(1px)}to{clip-path:inset(0);filter:none}}

/* ---------- 7. the morph between eras ---------- */
::view-transition-old(root){display:none}
::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(*){animation-duration:.9s;animation-timing-function:cubic-bezier(.2,.75,.15,1)}
::view-transition-old(*){animation-duration:.4s}
::view-transition-new(*){animation-duration:.6s}
/* a one-line menu turning into a column of buttons keeps its proportions instead of stretching */
::view-transition-old(*),::view-transition-new(*){width:100%;height:100%;object-fit:contain}
::view-transition-old(ah-win),::view-transition-new(ah-win),::view-transition-old(ah-page),::view-transition-new(ah-page){object-fit:fill}
::view-transition-group(ah-win){animation-duration:.75s}
::view-transition-group(ah-w2){animation-delay:.03s}
::view-transition-group(ah-w3){animation-delay:.06s}
::view-transition-group(ah-w4){animation-delay:.09s}
::view-transition-group(ah-w5){animation-delay:.12s}
::view-transition-group(ah-w6){animation-delay:.15s}

/* ---------- 2008 to now: the later browsers ---------- */
/* Firefox 3 on Windows Vista: dark glass, and the keyhole back button */
.vista{background:linear-gradient(180deg,#6585A8 0,#2D4B6B 28px,#1F3651 64px,#172A40);padding:0 7px 7px;border-radius:8px 8px 0 0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 1px #0B1724,0 30px 90px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4)}
.vista .tb{height:30px;margin:0 -7px;padding:0 6px 0 12px;color:#FFF;font:13px/1 "Segoe UI",Tahoma,Arial,sans-serif;text-shadow:0 0 8px rgba(255,255,255,.7),0 0 2px #FFF}
.vista .wbs{align-self:flex-start}
.vista .wb{position:relative;width:26px;height:18px;border:1px solid rgba(0,0,0,.6);background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.1) 50%,rgba(0,0,0,.12) 51%,rgba(255,255,255,.22));box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.vista .wb-min{border-radius:0 0 0 5px}
.vista .wb-x{width:43px;border-radius:0 0 5px 0;background:linear-gradient(#EBA898,#C9462C 50%,#B2301B 51%,#DA7352)}
.vista .wb-min::before{content:"";position:absolute;left:9px;bottom:5px;width:8px;height:2px;background:#FFF}
.vista .wb-max::before{content:"";position:absolute;left:8px;top:4px;width:8px;height:6px;border:1px solid #FFF;border-top-width:2px}
.vista .wb-x::before,.vista .wb-x::after{content:"";position:absolute;left:16px;top:8px;width:11px;height:2px;background:#FFF;transform:rotate(45deg)}
.vista .wb-x::after{transform:rotate(-45deg)}
.vista .chrome{border:1px solid #6F8399;border-bottom:0;background:linear-gradient(#F6F9FC,#DCE5EF);color:#1B1B1B;font:12px/1.2 "Segoe UI",Tahoma,Arial,sans-serif}
.vista .mb{height:22px}
.vista .bar{padding:3px 6px}
.ffnav{height:34px;gap:6px}
.keyhole{display:flex;align-items:center;flex:none;height:30px;padding:0 6px 0 1px;border:1px solid #8094AB;border-radius:16px 7px 7px 16px;background:linear-gradient(#FFF,#D5DFEA)}
.keyhole i{display:flex;font-style:normal}
.keyhole .ic-back{width:28px;height:28px}
.keyhole .ic-fwd{width:18px;height:18px;margin-left:3px;opacity:.55}
.vista .keyhole .ic{background:radial-gradient(circle at 50% 28%,#FFF,#DCE6F1 55%,#9FB3CB);box-shadow:inset 0 0 0 1px #6F86A3}
.vista .keyhole .ic-back::before{border-right-color:#2D4A6B}
.vista .keyhole .ic-fwd::before{border-left-color:#2D4A6B}
.ffnav .b{display:flex;align-items:center;padding:3px 4px}
.vista .fld{height:22px;border:1px solid #8094AB;border-radius:2px;padding:0 6px}
.vista .fld>span{flex:1;overflow:hidden;text-overflow:ellipsis}
.ffstar{flex:none;width:13px;height:13px;background:#B9C3CE;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.vista .srch{flex:none;display:flex;align-items:center;gap:5px;width:190px;height:22px;margin-left:4px;border:1px solid #8094AB;background:#FFF;padding:0 6px;color:#7E7E7E}
.vista .srch b{color:#3366CC;font:bold 12px/1 Georgia,serif}
.vista .bmk{height:22px;gap:14px;border-top:1px solid #C3D0DE}
.vista .bmk .lk{display:flex;align-items:center;gap:4px}
.vista .vpw{border:1px solid #6F8399}
.vista .sb{height:20px;padding:0 6px;align-items:center;border:1px solid #6F8399;border-top:0;background:linear-gradient(#EEF3F8,#D7E0EA);font:12px "Segoe UI",Tahoma,Arial,sans-serif}
.vista .sb>span{padding:0}

/* Chrome: tabs in the title bar, one box for everything, and a bubble in the corner instead of a status bar */
.ctabs{align-items:flex-end;gap:0}
.ctab{position:relative;display:flex;align-items:center;gap:7px;flex:none;width:176px;height:27px;margin-right:-8px;padding:0 14px 0 18px;
  color:#333;font:12px/1 "Segoe UI",Arial,sans-serif;white-space:nowrap;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 100%,0 100%);
  background:linear-gradient(#E1E9F3,#D2DEEC)}
.ctab.on{z-index:1;background:linear-gradient(#FFFFFF,#F2F6FA)}
.ctab>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ctab .fav{flex:none;width:14px;height:14px;border-radius:3px;background:linear-gradient(135deg,#FF7A9E,#9D7BFF)}
.ctab .fav.blank{background:#C9D2DC}
.cx{position:relative;flex:none;width:9px;height:9px;opacity:.5}
.cx::before,.cx::after{content:"";position:absolute;left:0;top:4px;width:9px;height:1.5px;background:#333;transform:rotate(45deg)}
.cx::after{transform:rotate(-45deg)}
.cnew{flex:none;width:24px;height:14px;margin:0 0 6px 18px;border:1px solid rgba(0,0,0,.25);border-radius:4px;background:rgba(255,255,255,.35);transform:skewX(22deg)}
.ctool{display:flex;align-items:center;gap:4px;height:36px;padding:0 8px;background:#F2F6FA;border-bottom:1px solid #B8C6D6;font:13px Arial,sans-serif;color:#222}
.cb{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:4px}
.cb.dis{opacity:.35}
.omni{position:relative;flex:1;display:flex;align-items:center;gap:7px;min-width:0;height:26px;margin:0 4px;padding:0 10px;border:1px solid #A9B7C9;border-radius:4px;background:#FFF;white-space:nowrap;overflow:hidden}
.omni>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cstar{flex:none;width:15px;height:15px;background:#9AA5B1;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.ic-cback,.ic-cfwd{width:16px;height:16px}
.ic-cback::before,.ic-cfwd::before{content:"";position:absolute;top:3px;width:8px;height:8px;border:solid #555;border-width:0 0 2.5px 2.5px}
.ic-cback::before{left:5px;transform:rotate(45deg)}
.ic-cfwd::before{left:1px;transform:rotate(-135deg)}
.ic-cref{width:10px;height:10px;border:2.5px solid #555;border-right-color:transparent;border-radius:50%}
.ic-cref::after{content:"";position:absolute;right:-5px;top:-4px;border:4px solid transparent;border-left:5px solid #555;transform:rotate(-30deg)}
.ic-lock{width:10px;height:8px;margin-top:5px;border-radius:2px;background:#5F6368}
.ic-lock::before{content:"";position:absolute;left:1px;top:-6px;width:4px;height:5px;border:2px solid #5F6368;border-bottom:0;border-radius:4px 4px 0 0}
.ic-wrench{width:16px;height:16px;transform:rotate(-45deg)}
.ic-wrench::before{content:"";position:absolute;left:6px;top:6px;width:4px;height:10px;border-radius:2px;background:#666}
.ic-wrench::after{content:"";position:absolute;left:3px;top:0;width:10px;height:8px;border-radius:50%;background:radial-gradient(circle at 50% 0,transparent 3px,#666 3.5px)}
.ic-burger{width:16px;height:12px;background:linear-gradient(#5F6368 0 2px,transparent 2px 5px,#5F6368 5px 7px,transparent 7px 10px,#5F6368 10px 12px)}
.ic-dots{width:4px;height:16px;background:radial-gradient(circle,#5F6368 1.8px,transparent 2.2px) 0 0/4px 5.5px repeat-y}
.bubble{position:absolute;left:0;bottom:0;z-index:4;max-width:60%;padding:3px 9px 4px;border:1px solid #B8C3CF;border-width:1px 1px 0 0;border-radius:0 5px 0 0;
  background:#E8EEF5;color:#333;font:12px "Segoe UI",Arial,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .15s;pointer-events:none}
.bubble.on{opacity:1}

/* Chrome 3 on Windows 7: light blue glass */
.w7{background:linear-gradient(#C6DAF0,#ABC5E5 40px,#9EBADC);padding:0 7px 7px;border-radius:8px 8px 0 0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px #5C79A0,0 30px 90px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4)}
.w7 .ctabs{height:30px;margin:0 -7px;padding:8px 6px 0 12px}
.w7 .ctab:not(.on){background:linear-gradient(rgba(255,255,255,.55),rgba(220,232,246,.6))}
.w7 .wbs{position:absolute;right:6px;top:0}
.w7 .wb{position:relative;width:26px;height:18px;border:1px solid rgba(40,60,90,.6);background:linear-gradient(rgba(255,255,255,.75),rgba(255,255,255,.25) 50%,rgba(170,195,225,.45) 51%,rgba(232,241,250,.55))}
.w7 .wb-min{border-radius:0 0 0 5px}
.w7 .wb-x{width:46px;border-radius:0 0 5px 0;background:linear-gradient(#EBAC9E,#D0553E 50%,#C3391F 51%,#E28064)}
.w7 .wb-min::before{content:"";position:absolute;left:9px;bottom:5px;width:8px;height:2px;background:#FFF;box-shadow:0 0 1px #333}
.w7 .wb-max::before{content:"";position:absolute;left:8px;top:4px;width:8px;height:6px;border:1px solid #FFF;border-top-width:2px}
.w7 .wb-x::before,.w7 .wb-x::after{content:"";position:absolute;left:17px;top:8px;width:11px;height:2px;background:#FFF;transform:rotate(45deg)}
.w7 .wb-x::after{transform:rotate(-45deg)}
.w7 .ctool{border:1px solid #8AA3C4;border-width:0 1px 1px}
.w7 .vpw{border:1px solid #8AA3C4;border-top:0}

/* Chrome on a Mac, 2010 to 2017 */
.chm{background:#D6D6D6;border-radius:6px 6px 0 0;box-shadow:0 0 0 1px rgba(0,0,0,.42),0 30px 90px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4)}
.chm .ctabs{height:30px;padding:8px 8px 0 78px;border-radius:6px 6px 0 0;background:linear-gradient(#E6E6E6,#D0D0D0)}
.chm .lights{left:12px;top:12px}
.chm .ctab{background:linear-gradient(#DADADA,#C8C8C8)}
.chm .ctab.on{background:linear-gradient(#FAFAFA,#F1F1F1)}
.chm .ctool{background:#F1F1F1;border-bottom:1px solid #B2B2B2}
.chm .omni{border-color:#B9B9B9;border-radius:3px}
.chm.y2014 .ctabs,.chm.y2015 .ctabs,.chm.y2016 .ctabs,.chm.y2017 .ctabs{background:#DADADA}
.chm.y2014 .ctab,.chm.y2015 .ctab,.chm.y2016 .ctab,.chm.y2017 .ctab{background:#CFCFCF}
.chm.y2014 .ctab.on,.chm.y2015 .ctab.on,.chm.y2016 .ctab.on,.chm.y2017 .ctab.on{background:#F6F6F6}
.chm.y2014 .ctool,.chm.y2015 .ctool,.chm.y2016 .ctool,.chm.y2017 .ctool{background:#F6F6F6}
.chm.y2014 .lights i,.chm.y2015 .lights i,.chm.y2016 .lights i,.chm.y2017 .lights i{background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.25)}
.chm.y2014 .lights i:nth-child(2),.chm.y2015 .lights i:nth-child(2),.chm.y2016 .lights i:nth-child(2),.chm.y2017 .lights i:nth-child(2){background:#FEBC2E}
.chm.y2014 .lights i:nth-child(3),.chm.y2015 .lights i:nth-child(3),.chm.y2016 .lights i:nth-child(3),.chm.y2017 .lights i:nth-child(3){background:#28C840}

/* Chrome after its 2018 redesign: rounded tabs, a pill for the address, and a dark version for 2019 */
.ch18{background:#DEE1E6;border-radius:10px 10px 0 0;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 30px 90px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4)}
.ch18.y2020,.ch18.y2021,.ch18.y2022{border-radius:12px 12px 0 0}
.ch18 .ctabs{height:34px;padding:8px 8px 0 80px;border-radius:inherit;background:#DEE1E6}
.ch18 .lights{left:14px;top:14px}
.ch18 .ctab{width:210px;height:34px;margin-right:0;padding:0 14px;clip-path:none;border-radius:9px 9px 0 0;background:transparent;color:#3C4043;font:12px/1 "Segoe UI",Roboto,system-ui,sans-serif}
.ch18 .ctab:not(.on)::after{content:"";position:absolute;right:0;top:9px;bottom:9px;width:1px;background:#A8ABB0}
.ch18 .ctab.on{background:#FFF}
.ch18 .cnew{width:18px;height:18px;margin:0 0 8px 10px;border:0;border-radius:0;transform:none;background:linear-gradient(#5F6368,#5F6368) center/12px 2px no-repeat,linear-gradient(#5F6368,#5F6368) center/2px 12px no-repeat}
.ch18 .ctool{height:40px;background:#FFF;border-bottom:1px solid #DADCE0}
.ch18 .omni{height:30px;border:0;border-radius:15px;background:#F1F3F4;color:#202124;font:14px Roboto,"Segoe UI",system-ui,sans-serif}
.ch18 .bubble{background:#FFF;border-color:#DADCE0;color:#3C4043}
.ch18.dark{background:#202124}
.ch18.dark .ctabs{background:#202124}
.ch18.dark .ctab{color:#9AA0A6}
.ch18.dark .ctab.on{background:#35363A;color:#E8EAED}
.ch18.dark .ctab:not(.on)::after{background:#5F6368}
.ch18.dark .cx::before,.ch18.dark .cx::after{background:#E8EAED}
.ch18.dark .cnew{background:linear-gradient(#E8EAED,#E8EAED) center/12px 2px no-repeat,linear-gradient(#E8EAED,#E8EAED) center/2px 12px no-repeat}
.ch18.dark .ctool{background:#35363A;border-bottom-color:#202124}
.ch18.dark .omni{background:#202124;color:#E8EAED}
.ch18.dark .ic-cback::before,.ch18.dark .ic-cfwd::before{border-color:#E8EAED}
.ch18.dark .ic-cref{border-color:#E8EAED;border-right-color:transparent}
.ch18.dark .ic-cref::after{border-left-color:#E8EAED}
.ch18.dark .ic-dots{background-image:radial-gradient(circle,#E8EAED 1.8px,transparent 2.2px)}
.ch18.dark .ic-lock{background:#E8EAED}
.ch18.dark .ic-lock::before{border-color:#E8EAED}
.ch18.dark .cstar{background:#9AA0A6}
.ch18.dark .bubble{background:#35363A;border-color:#202124;color:#E8EAED}

/* Arc: a sidebar of tabs in the space's colors, and the page floating in a rounded panel */
.arc{flex-direction:row;padding:8px;border-radius:12px;background:linear-gradient(160deg,#8C7BFF,#E79BC4 60%,#FFC59E);
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 30px 90px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4)}
.arc.y2024{background:linear-gradient(160deg,#3C9AD8,#56CFE1 55%,#7BEFD6)}
.arcside{position:relative;flex:none;width:192px;padding:40px 10px 10px 4px;color:rgba(25,15,45,.88);font:13px/1.2 -apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif}
.arc .lights{left:12px;top:12px}
.arcurl{display:block;margin:0 0 12px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pins{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:16px}
.pins i{height:40px;border-radius:10px;background:rgba(255,255,255,.32)}
.arclab{margin:0 0 6px 8px;font-size:11px;opacity:.6}
.arctab{display:flex;align-items:center;gap:8px;padding:8px;border-radius:9px;white-space:nowrap;overflow:hidden}
.arctab>span{overflow:hidden;text-overflow:ellipsis}
.arctab.on{background:rgba(255,255,255,.6);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.arctab .fav{flex:none;width:14px;height:14px;border-radius:4px;background:linear-gradient(135deg,#FF7A9E,#9D7BFF)}
.arcnew{display:block;margin-top:6px;padding:8px;opacity:.6}
.arc .vpw{margin-left:4px;border-radius:9px;box-shadow:0 1px 3px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06)}
.arc .bubble{background:#FFF;border-color:#DDD}

/* Safari 26 on macOS Tahoe: the toolbar is Liquid Glass, floating over the page */
.sf26{border-radius:16px;background:#FFF;box-shadow:0 0 0 1px rgba(0,0,0,.22),0 30px 90px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.4)}
.sf26 .vpw{border-radius:16px}
.s26{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;gap:12px;height:52px;padding:0 14px 0 84px;border-radius:16px 16px 0 0;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);box-shadow:inset 0 -1px rgba(0,0,0,.06);
  color:#1D1D1F;font:13px -apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif}
.s26 .lights{left:16px;top:20px}
.s26side{flex:none;width:30px;height:24px;border-radius:7px;background:rgba(0,0,0,.06)}
.s26seg{display:flex;flex:none;gap:2px}
.s26seg i{position:relative;width:26px;height:24px;border-radius:7px}
.s26seg .tri::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border:5px solid transparent}
.s26seg .tri.l::before{border-right:7px solid #555;border-left:0}
.s26seg .tri.r::before{border-left:7px solid #AAA;border-right:0}
.s26url{position:relative;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:30px;border-radius:15px;background:rgba(255,255,255,.62);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);overflow:hidden}
.s26url::before{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(0,122,255,.16)}
.s26url.loading::before{animation:s96-sfload .65s ease-out forwards}
.s26lock{position:relative;width:9px;height:8px;margin-top:4px;border-radius:2px;background:#6E6E73}
.s26lock::before{content:"";position:absolute;left:1px;top:-5px;width:3px;height:4px;border:1.5px solid #6E6E73;border-bottom:0;border-radius:3px 3px 0 0}
.s26act{display:flex;flex:none;gap:10px}
.s26act i{width:22px;height:22px;border-radius:6px;background:rgba(0,0,0,.06)}
/* the page starts under the glass, the way Safari 26 draws it */
.sf26 .p2025 .scene{padding-top:72px}

/* the iPhone: rounded glass, the Dynamic Island, and Safari's address bar floating at the bottom */
.iphone{padding:12px;border-radius:60px;background:#0E0E10;box-shadow:inset 0 0 0 2px #3A3A3E,0 0 0 2px #1B1B1D,0 30px 80px rgba(0,0,0,.6),0 8px 24px rgba(0,0,0,.45)}
.iphone .vpw{border-radius:48px;background:#0C0A12}
.istatus{position:absolute;top:12px;left:12px;right:12px;z-index:5;display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 34px 0 50px;
  color:#FFF;font:600 16px/1 -apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;pointer-events:none}
.iicons{display:flex;align-items:center;gap:6px}
.isig{display:flex;align-items:flex-end;gap:2px;height:12px}
.isig i{width:3px;border-radius:1px;background:#FFF}
.isig i:nth-child(1){height:4px}.isig i:nth-child(2){height:6px}.isig i:nth-child(3){height:9px}.isig i:nth-child(4){height:12px}
.iwifi{width:16px;height:12px;clip-path:polygon(0 0,100% 0,50% 100%);background:radial-gradient(circle at 50% 100%,#FFF 0 2.5px,transparent 3px 5.5px,#FFF 6px 8.5px,transparent 9px 11.5px,#FFF 12px 14.5px,transparent 15px)}
.ibatt{position:relative;width:22px;height:9px;border:1.5px solid rgba(255,255,255,.5);border-radius:4px}
.ibatt::after{content:"";position:absolute;left:1.5px;top:1.5px;bottom:1.5px;width:72%;border-radius:1.5px;background:#FFF}
.island{position:absolute;top:23px;left:50%;z-index:6;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000}
.ibar{position:absolute;left:28px;right:28px;bottom:34px;z-index:5;display:flex;align-items:center;gap:12px;height:48px;padding:0 18px;border-radius:24px;
  background:rgba(38,36,46,.55);-webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  color:#FFF;font:15px -apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif}
.iback{width:10px;height:10px;border-left:2px solid #FFF;border-bottom:2px solid #FFF;transform:rotate(45deg)}
.iurl{flex:1;text-align:center}
.imore{width:20px;height:4px;background:radial-gradient(circle,#FFF 2px,transparent 2.5px) 0 0/7px 4px repeat-x}
.ihome{position:absolute;left:50%;bottom:20px;z-index:5;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:rgba(255,255,255,.85)}

/* the handle for dragging a responsive window narrower (it sits on the stage, outside the window) */
.grip{position:absolute;top:50%;right:-24px;z-index:3;width:14px;height:74px;margin-top:-37px;border-radius:7px;cursor:ew-resize;touch-action:none;
  background:rgba(127,227,255,.12);box-shadow:inset 0 0 0 1px rgba(127,227,255,.45);transition:background .2s,box-shadow .2s}
.grip::before{content:"";position:absolute;left:4px;top:24px;bottom:24px;width:4px;border-left:1px solid rgba(207,246,255,.8);border-right:1px solid rgba(207,246,255,.8)}
.grip:hover,.grip.on{background:rgba(127,227,255,.3);box-shadow:inset 0 0 0 1px rgba(127,227,255,.9),0 0 16px rgba(127,227,255,.45)}
.grip:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}

/* small things the later pages do */
.p2008 .panel-container{transition:transform .55s cubic-bezier(.6,0,.2,1)}
.p2013 .fa::before{content:""!important;display:block;width:38px;height:38px;margin:26px auto 0;background:#FFF;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.p2013 .fa-desktop{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M2 3h20v13H2zM4 5v9h16V5zM9 17h6v2h3v2H6v-2h3z'/%3E%3C/svg%3E")}
.p2013 .fa-shopping-cart{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 3h4l1 3h16l-3 8H8l1 2h11v2H8l-4-13H1zM9 19.5a1.5 1.5 0 1 1 0 .01M18 19.5a1.5 1.5 0 1 1 0 .01'/%3E%3C/svg%3E")}
.p2013 .fa-search{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10 2a8 8 0 1 1 0 16a8 8 0 1 1 0-16zM10 5a5 5 0 1 0 0 10a5 5 0 1 0 0-10zM15 16l2-2 6 6-2 2z'/%3E%3C/svg%3E")}
.p2014 paper-tab{position:relative;overflow:hidden}
.p2014 .ink{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:s96-ink .65s ease-out forwards;pointer-events:none}
.p2014 paper-button .ink,.p2014 paper-shadow .ink{background:rgba(63,81,181,.22)}
@keyframes s96-ink{to{transform:scale(1);opacity:0}}
.p2026 .tube.unlit{color:#4B4553;text-shadow:none}
.p2026 .tube.warming{animation:s96-neon 1.2s steps(1,end) both}
@keyframes s96-neon{0%{color:#4B4553;text-shadow:none}10%,30%{color:#FFF6FB;text-shadow:0 0 3px #fff,0 0 9px var(--g),0 0 20px var(--g),0 0 44px var(--g)}
  18%,38%{color:#4B4553;text-shadow:none}52%,100%{color:#FFF6FB;text-shadow:0 0 3px #fff,0 0 9px var(--g),0 0 20px var(--g),0 0 44px var(--g)}}

/* ---------- phones and small windows ---------- */
@media (max-width:860px){
  .deck{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"year btns" "text text" "scrub scrub";gap:8px 14px;padding-top:10px}
  .btns{justify-content:flex-end;flex-wrap:wrap;padding-bottom:6px}
  .era-cap{font-size:14px}
  .eras{display:none}
  .scrub-row{margin-top:2px}
  .scrub{height:40px}
}
/* a finger needs bigger targets: taller rail area, a bigger knob, 44px step buttons, and room for the iPhone home bar */
@media (pointer:coarse){
  .deck{padding-bottom:max(10px,env(safe-area-inset-bottom))}
  .ystep{width:44px;height:44px;font-size:30px}
  .scrub{height:48px;padding:0 12px}
  .rail{top:20.5px}
  .knob{top:22px;width:24px;height:24px;margin:-12px 0 0 -12px}
  .ticks li{top:32px}
  .ticks li::before{top:-16px}
  .ticks li.era::before{top:-19px}
}
@media (max-width:520px){
  .year{font-size:50px}
  .dbtn{padding:8px 11px;font-size:12.5px}
  .ticks li span{visibility:hidden}
  .ticks li:nth-child(5n+1) span{visibility:visible}
  .era-line span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .dg-in,.rail i,.knob{transition:none}
  .pg blink,.swf-tag .cur,.s99-ticker span{animation:none}
}