/* ============================================================
   ~*~ TIME MACHINE ~*~  timemachine.css
   the panel looks the SAME in every era (it's the machine, not
   the website), so everything here is extra-specific on purpose.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Share+Tech+Mono&display=swap');

html #time-machine {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 9000;
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.3;
  color: #ddd;
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  filter: none;
  transform: none;
}
html #time-machine * { box-sizing: border-box; font-family: inherit; text-shadow: none; }

/* the little tab you click to open it */
html #time-machine .tm-tab {
  display: block;
  padding: 7px 12px;
  margin: 0;
  border: 2px solid #111;
  border-radius: 6px;
  background: linear-gradient(#5a5f66, #2c2f33);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 3px 10px rgba(0, 0, 0, .6);
  color: #ffb400;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 2px;
  cursor: pointer;
  text-transform: uppercase;
  clip-path: none;
  transform: none;
}
html #time-machine .tm-tab::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 6px #ff3b30;
  animation: tm-blink 1.2s steps(1) infinite;
  vertical-align: 0;
}
html #time-machine.open .tm-tab { border-radius: 0 0 6px 6px; }
@keyframes tm-blink { 50% { opacity: .2; } }

/* the panel */
html #time-machine .tm-panel {
  display: none;
  width: 270px;
  padding: 12px 12px 10px;
  border: 2px solid #111;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    linear-gradient(#6b7078, #3a3e44 60%, #2a2d31);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 -4px 16px rgba(0, 0, 0, .6);
}
html #time-machine.open { display: flex; flex-direction: column-reverse; }
html #time-machine.open .tm-panel { display: block; }

html #time-machine .tm-title {
  text-align: center;
  font-size: 10px;
  letter-spacing: 3px;
  color: #111;
  background: #c9a227;
  border-radius: 2px;
  padding: 2px 0;
  margin-bottom: 10px;
  font-weight: bold;
}
html #time-machine .tm-row { margin-bottom: 8px; }
html #time-machine .tm-label,
html #tm-warp .tm-label {
  display: block;
  width: max-content;
  margin: 0 auto 3px;
  padding: 1px 8px;
  background: #b3121b;
  color: #fff;
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 2px;
  border-radius: 2px;
}
html #time-machine .tm-led,
html #tm-warp .tm-led {
  display: block;
  padding: 3px 6px;
  background: #0a0a0a;
  border: 2px inset #222;
  border-radius: 3px;
  font-family: "VT323", monospace;
  font-size: 26px;
  text-align: center;
  letter-spacing: 3px;
}
html #time-machine .tm-red, html #tm-warp .tm-red { color: #ff3b30; text-shadow: 0 0 6px #ff3b30, 0 0 14px rgba(255, 59, 48, .5); }
html #time-machine .tm-green { color: #3dff6a; text-shadow: 0 0 6px #3dff6a, 0 0 14px rgba(61, 255, 106, .4); }

/* the slider */
html #time-machine #tm-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 10px;
  margin: 10px 0 2px;
  padding: 0;
  border: 1px solid #111;
  border-radius: 5px;
  background: linear-gradient(90deg, #3dff6a, #c0c0c0 20%, #ff7518 40%, #36a3ff 60%, #e60012 80%, #00f0ff);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
  cursor: pointer;
  outline: none;
}
html #time-machine #tm-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 22px;
  border: 2px solid #111;
  border-radius: 3px;
  background: linear-gradient(#f0f0f0, #9aa0a6);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .6);
}
html #time-machine #tm-slider::-moz-range-thumb {
  width: 16px;
  height: 20px;
  border: 2px solid #111;
  border-radius: 3px;
  background: linear-gradient(#f0f0f0, #9aa0a6);
}
html #time-machine #tm-slider:focus-visible { outline: 2px solid #ffb400; outline-offset: 3px; }

html #time-machine .tm-ticks { display: flex; justify-content: space-between; margin: 0 -4px 6px; }
html #time-machine .tm-ticks button {
  background: none;
  border: 0;
  padding: 2px 3px;
  margin: 0;
  color: #aab;
  font-size: 10px;
  cursor: pointer;
  clip-path: none;
  transform: none;
  box-shadow: none;
}
html #time-machine .tm-ticks button.on { color: #ffb400; font-weight: bold; }

html #time-machine .tm-name { text-align: center; color: #ffd27a; font-size: 11px; min-height: 15px; margin-bottom: 8px; }

html #time-machine .tm-engage {
  display: block;
  width: 100%;
  padding: 8px;
  margin: 0;
  border: 2px solid #111;
  border-radius: 4px;
  background: linear-gradient(#ff5a4f, #b3121b);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 4px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 #5a0000;
  text-transform: uppercase;
  clip-path: none;
  transform: none;
}
html #time-machine .tm-engage:hover:not(:disabled) { filter: brightness(1.15); }
html #time-machine .tm-engage:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 #5a0000; }
html #time-machine .tm-engage:disabled { background: linear-gradient(#555, #333); color: #999; cursor: default; letter-spacing: 2px; }

/* ---------- the travel animation ---------- */
html #tm-warp {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(10, 10, 30, .85), rgba(0, 0, 0, .97));
  animation: tm-in .25s ease-out;
  overflow: hidden;
}
html #tm-warp .tm-warp-lines {
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 180, 0, .0) 0deg 4deg, rgba(255, 180, 0, .35) 4deg 4.6deg, rgba(0, 200, 255, .0) 4.6deg 9deg, rgba(0, 200, 255, .3) 9deg 9.4deg);
  -webkit-mask-image: radial-gradient(circle, transparent 8%, #000 45%);
  mask-image: radial-gradient(circle, transparent 8%, #000 45%);
  animation: tm-zoom 1.4s ease-in forwards;
}
html #tm-warp .tm-warp-box {
  position: relative;
  padding: 18px 24px;
  background: linear-gradient(#6b7078, #2a2d31);
  border: 3px solid #111;
  border-radius: 8px;
  box-shadow: 0 0 40px rgba(255, 180, 0, .4);
  text-align: center;
  animation: tm-shake .1s linear infinite;
}
html #tm-warp .tm-big { font-size: 56px; min-width: 330px; }
html #tm-warp .tm-speed { margin-top: 10px; font-family: "VT323", monospace; font-size: 28px; color: #ffb400; letter-spacing: 3px; }
html #tm-warp.flash { background: #fff; transition: background .1s; }
html #tm-warp.flash .tm-warp-box, html #tm-warp.flash .tm-warp-lines { opacity: 0; }
html #tm-warp.done { opacity: 0; transition: opacity .6s ease-out; }
@keyframes tm-in { from { opacity: 0; } }
@keyframes tm-zoom { from { transform: scale(.6) rotate(0); } to { transform: scale(2.4) rotate(40deg); } }
@keyframes tm-shake { 0% { transform: translate(1px, 0); } 50% { transform: translate(-1px, 1px); } 100% { transform: translate(0, -1px); } }

@media (max-width: 500px) {
  html #time-machine { left: 6px; bottom: 6px; }
  html #time-machine .tm-panel { width: 240px; }
  html #tm-warp .tm-big { font-size: 36px; min-width: 0; }
}
@media print { html #time-machine { display: none; } }