@font-face {
  font-family: 'ChicagoKare';
  src: url('ChicagoKare-Regular.woff2') format('woff2'),
       url('ChicagoKare-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  background: #777777;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

#app {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* ── Label ── */
#label {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'ChicagoKare', 'Geneva', sans-serif;
  font-size: 24px;
  color: rgba(255, 255, 255, 0.6);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
#label.visible {
  opacity: 1;
}
@media (max-width: 600px) {
  #label {
    font-size: 12px;
    bottom: 16px;
  }
}

/* ── Cross Container ── */
.cross-wrap {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
.cross-wrap.active {
  opacity: 1;
  visibility: visible;
}
.cross {
  position: relative;
  pointer-events: none;
}
.track, .arrow, .thumb {
  pointer-events: auto;
}

/* ── Cross Outline SVG ── */
.cross-outline {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
}

/* ── Track Arms ── */
.track {
  position: absolute;
  cursor: pointer;
}

/* ── Arrow Buttons ── */
.arrow {
  position: absolute;
  cursor: pointer;
  overflow: hidden;
  z-index: 5;
}
.arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  shape-rendering: crispEdges;
  -webkit-font-smoothing: none;
}

/* ── Thumb ── */
.thumb {
  position: absolute;
  cursor: grab;
  z-index: 8;
}
.thumb:active {
  cursor: grabbing;
}

/* ════════════════════════════════════════════════════
   OS THEMES
   ════════════════════════════════════════════════════ */

/* ── System 1.0 (1984) ── */
.system1 .arrow {
  background: #fff;
}
.system1 .arrow.up { box-shadow: 0 1px 0 0 #000; }
.system1 .arrow.down { box-shadow: 0 -1px 0 0 #000; }
.system1 .arrow.left { box-shadow: 1px 0 0 0 #000; }
.system1 .arrow.right { box-shadow: -1px 0 0 0 #000; }
.system1 .track {
  background: #fff;
}
.system1 .thumb {
  background: #fff;
  box-shadow: 0 0 0 1px #000;
}
.system1 .arrow.pressed {
  background: #000;
}
.system1 .cross-outline path { stroke: #000; }

/* ── Windows 1.0 (1985) ── */
.win1 .arrow {
  background: #fff;
  box-shadow: inset 0 0 0 1px #000;
}
.win1 .track {
  background: #d45852;
}
.win1 .thumb {
  background: #fff;
  box-shadow: 0 0 0 1px #000;
}
.win1 .arrow.pressed {
  background: #aaa;
}
.win1 .cross-outline path { stroke: #000; }

/* ── System 5.0 (1987) ── */
.system5 .arrow {
  background: #fff;
}
.system5 .arrow.up { box-shadow: 0 1px 0 0 #000; }
.system5 .arrow.down { box-shadow: 0 -1px 0 0 #000; }
.system5 .arrow.left { box-shadow: 1px 0 0 0 #000; }
.system5 .arrow.right { box-shadow: -1px 0 0 0 #000; }
.system5 .track {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23000'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
  background-size: 2px 2px;
  background-repeat: repeat;
}
.system5 .thumb {
  background: #fff;
  box-shadow: 0 0 0 1px #000;
}
.system5 .arrow.pressed {
  background: #000;
}
.system5 .cross-outline path { stroke: #000; }

/* ── Windows 2.0 (1987) ── */
.win2 .arrow {
  background: #fff;
  box-shadow: inset 0 0 0 1px #000;
}
.win2 .track {
  background: #000;
  background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23fff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 2px 2px;
}
.win2 .thumb {
  background: #fff;
  box-shadow: 0 0 0 1px #000;
}
.win2 .arrow.pressed {
  background: #aaa;
}
.win2 .cross-outline path { stroke: #000; }

/* ── Windows 3.0 (1990) ── */
.win3 .arrow {
  background: #c0c0c0;
  box-shadow: inset 0 0 0 1px #000;
}
.win3 .track {
  background-color: #c0c0c0;
  background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23fff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 2px 2px;
}
.win3 .thumb {
  background: #c0c0c0;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080, 0 0 0 1px #000;
}
.win3 .arrow.pressed {
  background: #808080;
}
.win3 .cross-outline path { stroke: #000; }

/* ── System 7.0 (1991) ── */
.system7 .arrow {
  background: #fff;
}
.system7 .arrow.up { box-shadow: 0 1px 0 0 #000; }
.system7 .arrow.down { box-shadow: 0 -1px 0 0 #000; }
.system7 .arrow.left { box-shadow: 1px 0 0 0 #000; }
.system7 .arrow.right { box-shadow: -1px 0 0 0 #000; }
.system7 .track {
  background: #fff;
}
.system7 .thumb {
  background: #fff;
  box-shadow: 0 0 0 1px #000;
}
.system7 .arrow.pressed {
  background: #000;
}
.system7 .cross-outline path { stroke: #000; }

/* ── System 7.5 (1995) ── */
.system75 .arrow {
  background: #dddddd;
}
.system75 .arrow.up { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #777, 0 1px 0 0 #000; }
.system75 .arrow.down { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #777, 0 -1px 0 0 #000; }
.system75 .arrow.left { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #777, 1px 0 0 0 #000; }
.system75 .arrow.right { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #777, -1px 0 0 0 #000; }
.system75 .track {
  background-color: #dddddd;
  background-image: url("data:image/svg+xml,%3Csvg width='4' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='0' width='1' height='1' fill='%23777'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23777'/%3E%3C/svg%3E");
  background-size: 4px 2px;
}
.system75 .thumb {
  background-color: #AAAAAA;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow:
    0 0 0 1px #000,
    inset 0 1px 0 0 #CCCCFF,
    inset -1px 0 0 0 #CCCCFF,
    inset 0 -1px 0 0 #333366,
    inset 1px 0 0 0 #333366;
}
.system75 .thumb[data-axis="v"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6'%3E%3Crect x='0' y='0' width='1' height='6' fill='%23666699'/%3E%3Crect x='1' y='0' width='1' height='6' fill='%23CCCCFF'/%3E%3Crect x='2' y='0' width='1' height='6' fill='%23666699'/%3E%3Crect x='3' y='0' width='1' height='6' fill='%23CCCCFF'/%3E%3Crect x='4' y='0' width='1' height='6' fill='%23666699'/%3E%3Crect x='5' y='0' width='1' height='6' fill='%23CCCCFF'/%3E%3Crect x='6' y='0' width='1' height='6' fill='%23666699'/%3E%3Crect x='7' y='0' width='1' height='6' fill='%23CCCCFF'/%3E%3C/svg%3E");
}
.system75 .thumb[data-axis="h"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='8'%3E%3Crect x='0' y='0' width='6' height='1' fill='%23666699'/%3E%3Crect x='0' y='1' width='6' height='1' fill='%23CCCCFF'/%3E%3Crect x='0' y='2' width='6' height='1' fill='%23666699'/%3E%3Crect x='0' y='3' width='6' height='1' fill='%23CCCCFF'/%3E%3Crect x='0' y='4' width='6' height='1' fill='%23666699'/%3E%3Crect x='0' y='5' width='6' height='1' fill='%23CCCCFF'/%3E%3Crect x='0' y='6' width='6' height='1' fill='%23666699'/%3E%3Crect x='0' y='7' width='6' height='1' fill='%23CCCCFF'/%3E%3C/svg%3E");
}
.system75 .arrow.pressed {
  background: #aaa;
}
.system75 .cross-outline path { stroke: #000; }

/* ── Windows 95 (1995) ── */
.win95 .arrow {
  background: #c0c0c0;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  box-shadow: inset -1px -1px 0 #808080;
}
.win95 .arrow.pressed {
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  box-shadow: none;
}
.win95 .track {
  background-color: #c0c0c0;
  background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23808080'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23808080'/%3E%3C/svg%3E");
  background-size: 2px 2px;
}
.win95 .thumb {
  background: #c0c0c0;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  box-shadow: inset -1px -1px 0 #808080;
}
.win95 .cross-outline path { stroke: none; }

/* ── Mac OS 8.0 (1997) ── */
.macos8 .arrow {
  background: #cccccc;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
}
.macos8 .arrow.up { box-shadow: 0 1px 0 0 #000; }
.macos8 .arrow.down { box-shadow: 0 -1px 0 0 #000; }
.macos8 .arrow.left { box-shadow: 1px 0 0 0 #000; }
.macos8 .arrow.right { box-shadow: -1px 0 0 0 #000; }
.macos8 .arrow.pressed {
  border-top-color: #888;
  border-left-color: #888;
  border-right-color: #fff;
  border-bottom-color: #fff;
}
.macos8 .track {
  background: linear-gradient(
    to right,
    #000 0px, #000 1px,
    #777 1px, #777 2px,
    #888 2px, #888 3px,
    #aaa 3px, #aaa 13px,
    #bbb 13px, #bbb 14px,
    #ccc 14px, #ccc 15px,
    #000 15px, #000 16px
  );
}
.macos8 .track-left,
.macos8 .track-right {
  background: linear-gradient(
    to bottom,
    #000 0px, #000 1px,
    #777 1px, #777 2px,
    #888 2px, #888 3px,
    #aaa 3px, #aaa 13px,
    #bbb 13px, #bbb 14px,
    #ccc 14px, #ccc 15px,
    #000 15px, #000 16px
  );
}
.macos8 .track-center {
  background: #aaa;
}
.macos8 .thumb {
  background-color: #9999F8;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow:
    0 0 0 1px #000,
    inset 0 1px 0 0 #CCCCFB,
    inset -1px 0 0 0 #CCCCFB,
    inset 0 -1px 0 0 #6666C6,
    inset 1px 0 0 0 #6666C6;
}
.macos8 .thumb[data-axis="v"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='0' y='1' width='1' height='7' fill='%23333393'/%3E%3Crect x='1' y='0' width='1' height='1' fill='%23EEEEEE'/%3E%3Crect x='1' y='1' width='1' height='6' fill='%23CCCCFB'/%3E%3Crect x='2' y='1' width='1' height='7' fill='%23333393'/%3E%3Crect x='3' y='0' width='1' height='1' fill='%23EEEEEE'/%3E%3Crect x='3' y='1' width='1' height='6' fill='%23CCCCFB'/%3E%3Crect x='4' y='1' width='1' height='7' fill='%23333393'/%3E%3Crect x='5' y='0' width='1' height='1' fill='%23EEEEEE'/%3E%3Crect x='5' y='1' width='1' height='6' fill='%23CCCCFB'/%3E%3Crect x='6' y='1' width='1' height='7' fill='%23333393'/%3E%3Crect x='7' y='0' width='1' height='1' fill='%23EEEEEE'/%3E%3Crect x='7' y='1' width='1' height='6' fill='%23CCCCFB'/%3E%3C/svg%3E");
}
.macos8 .thumb[data-axis="h"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='1' y='0' width='7' height='1' fill='%23333393'/%3E%3Crect x='0' y='1' width='1' height='1' fill='%23EEEEEE'/%3E%3Crect x='1' y='1' width='6' height='1' fill='%23CCCCFB'/%3E%3Crect x='1' y='2' width='7' height='1' fill='%23333393'/%3E%3Crect x='0' y='3' width='1' height='1' fill='%23EEEEEE'/%3E%3Crect x='1' y='3' width='6' height='1' fill='%23CCCCFB'/%3E%3Crect x='1' y='4' width='7' height='1' fill='%23333393'/%3E%3Crect x='0' y='5' width='1' height='1' fill='%23EEEEEE'/%3E%3Crect x='1' y='5' width='6' height='1' fill='%23CCCCFB'/%3E%3Crect x='1' y='6' width='7' height='1' fill='%23333393'/%3E%3Crect x='0' y='7' width='1' height='1' fill='%23EEEEEE'/%3E%3Crect x='1' y='7' width='6' height='1' fill='%23CCCCFB'/%3E%3C/svg%3E");
}
.macos8 .cross-outline path { stroke: #000; }

/* ── Windows 98 (1998) ── */
.win98 .arrow {
  background: #c0c0c0;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  box-shadow: inset -1px -1px 0 #808080;
}
.win98 .arrow.pressed {
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  box-shadow: none;
}
.win98 .track {
  background-color: #c0c0c0;
  background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23808080'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23808080'/%3E%3C/svg%3E");
  background-size: 2px 2px;
}
.win98 .thumb {
  background: #c0c0c0;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  box-shadow: inset -1px -1px 0 #808080;
}
.win98 .cross-outline path { stroke: none; }