@font-face {
  font-family: "Sinkin Sans";
  font-weight: 700;
  font-style: oblique;
  src: url("SinkinSans-700BoldItalic-webfont.woff") format("woff");
}
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
/* hidden things */
  background: #000;
  background: no-repeat linear-gradient(180deg, #0c2f1b 0%, #000 35%, #000 65%, #0c2f1b 100%);
}
body,
body button {
  font-family: "Sinkin Sans";
  color: #fff;
}
body.filtered .filtered-quiet,
body.results .results-quiet,
body:not(.results ) .results-only,
body:not(.filtered ) .filtered-only,
body:not(.filtered ):not(results ) .all-quiet {
  display: none;
}
body.filtered .all-only,
body.results .all-only {
  display: none;
}
ul#selection {
  position: relative;
  list-style-type: none;
  overflow-y: scroll;
  height: calc(100% - 20px);
  display: inline-block;
/* width: 700px; */
  margin: 0;
  padding-top: 0px;
  padding-bottom: 20px;
  padding-left: 0;
/* border-right: 3px solid #ffffff80; */
  transition: border-color 0.2s linear 0.4s;
  border-color: rgba(255,255,255,0);
}
ul#selection li,
ul#selection input,
ul#selection svg#srch {
  margin-top: 20px;
}
ul#selection li {
  display: block;
  position: relative;
  height: 100px;
  width: 400px;
  text-align: right;
  margin-right: 165px;
  padding-left: 40px;
}
ul#selection li > div {
  height: 100%;
  background-color: rgba(136,136,136,0.239);
  padding-right: 10px;
}
ul#selection li > div > *,
ul#selection li > div img {
  transition-property: filter, color;
  transition-duration: 0.2s;
}
ul#selection li > div:is(.selected ) {
  color: #808080;
}
ul#selection li > div img,
ul#selection li > div svg {
  filter: grayscale(0%);
}
ul#selection li > div img:is(.selected * ),
ul#selection li > div svg:is(.selected * ) {
  filter: grayscale(100%);
}
ul#selection li img {
  -webkit-mask: linear-gradient(to right, #000, #000 50%, transparent);
  mask: linear-gradient(to right, #000, #000 50%, transparent);
}
ul#selection li figure,
ul#selection li img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  margin: 0;
}
ul#selection li svg {
  left: 100%;
  padding: 0;
  top: 0;
  height: 100px;
}
ul#selection svg#srch {
  margin-top: 21px;
  fill: #fff;
  height: 29px;
  margin-left: 5px;
  cursor: pointer;
}
ul#selection svg#srch .batsu {
  display: none;
}
ul#selection svg#srch.active .batsu {
  display: initial;
}
ul#selection svg#srch.active .glass {
  display: none;
}
ul#selection svg#arrow {
  right: 0;
  stroke: #fff;
  stroke-width: 0.3;
  fill: transparent;
  cursor: pointer;
}
.view ul#selection svg#arrow {
  right: initial;
  left: 10px;
  transform: rotate(180deg);
}
ul#selection svg#arrow .halo {
  stroke-width: 0.6;
  filter: url("#arrowblur");
  opacity: 0;
  transition: opacity 0.2s linear;
}
ul#selection svg#arrow:hover .halo {
  opacity: 0.6;
}
ul#selection u {
  text-decoration: none;
}
ul#selection u:is(.results * ) {
  text-decoration: underline;
}
ul#selection .edge {
  width: 30px;
  height: 100%;
  position: absolute;
  left: 0px;
}
ul#selection svg.graph {
  height: 200px;
  left: calc(100% - 60px);
  float: right;
  clear: right;
  position: static;
  margin-top: -120px;
  margin-bottom: -50px;
}
#display {
  position: absolute;
  right: -200px;
  padding-right: 200px;
  height: 100%;
  width: 1000px;
  overflow-x: visible;
  overflow-y: scroll;
  transform: skewX(2deg);
  transform-origin: bottom right;
  scroll-snap-align: center;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
  -ms-overflow-style: none;
/* IE and Edge */
  scrollbar-width: none;
/* Firefox */
/* Hide scrollbar for Chrome, Safari and Opera */
}
#display,
#display * {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#display,
#display > * {
  transition-property: transform, margin, height;
}
#display:is(.backwards,
#display .backwards * ) {
  flex-direction: column-reverse;
}
#display::-webkit-scrollbar {
  display: none;
}
#display.overflow {
  justify-content: flex-start;
}
#display > * {
  display: block;
  transform-origin: top right;
  height: initial;
  flex-direction: column;
  justify-content: flex-end;
  scroll-snap-align: center;
  flex-shrink: 0;
  overflow: visible;
  background-color: transparent;
}
#display:is(.results * ) > svg:not(.found ),
#display > svg:is(.filtered * ):not(.selected ) {
  display: none;
}
#display > svg:not(.backhorizon ):not(.backhorizon ~ * ) *:not(.annotation ):not(.annotation * ),
#display svg.forehorizon ~ svg *:not(.annotation ):not(.annotation * ) {
  display: none;
}
#display > svg,
svg#bling {
  width: 650px;
}
#display > svg .highlight,
svg#bling .highlight {
  opacity: 0;
  fill: rgba(136,136,136,0.239);
}
#display > svg .foreground:not(.feature * ),
svg#bling .foreground:not(.feature * ) {
  cursor: pointer;
}
#display > svg .foreground:not(.feature * ):hover .highlight,
svg#bling .foreground:not(.feature * ):hover .highlight {
  opacity: 1;
}
#display > svg h3,
svg#bling h3,
#display > svg h2,
svg#bling h2 {
  margin: 0;
}
#display > svg h2.brand,
svg#bling h2.brand,
#display > svg h3.year,
svg#bling h3.year {
  display: inline;
}
#display > svg h3.year,
svg#bling h3.year {
  color: #888;
}
#display > svg h3.year::before,
svg#bling h3.year::before {
  content: "(";
}
#display > svg h3.year::after,
svg#bling h3.year::after {
  content: ")";
}
#display > svg .t-arc,
svg#bling .t-arc {
  fill: url("#dis-total");
}
#display > svg foreignObject.annotation,
svg#bling foreignObject.annotation {
  text-align: right;
  font-size: 6px;
}
#display > svg foreignObject.annotation:is(.feature * ),
svg#bling foreignObject.annotation:is(.feature * ) {
  padding-right: 40px;
  transform: translateY(-20px);
}
#display > svg foreignObject.annotation img,
svg#bling foreignObject.annotation img {
  -webkit-mask: linear-gradient(120deg, #000, #000 20%, transparent 80%);
  mask: linear-gradient(120deg, #000, #000 20%, transparent 80%);
  height: 40px;
}
#display > svg foreignObject.annotation img:is(.feature * ),
svg#bling foreignObject.annotation img:is(.feature * ) {
  -webkit-mask: linear-gradient(104deg, #000, #000 70%, transparent 95%);
  mask: linear-gradient(104deg, #000, #000 70%, transparent 95%);
  height: 65px;
}
#display > svg foreignObject.annotation figure,
svg#bling foreignObject.annotation figure {
  float: right;
  clear: right;
  margin: 0;
  margin-left: 5px;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}
#display > svg .background path,
svg#bling .background path {
  stroke: #fff;
  stroke-width: 0.5px;
  stroke-opacity: 0.5;
}
#display > svg .background path.daily,
svg#bling .background path.daily {
  stroke: #008000;
}
#display > svg .background path.daily.sweep,
svg#bling .background path.daily.sweep {
  stroke: url("#daily-sweep");
}
#display > svg .background path.weekend,
svg#bling .background path.weekend {
  stroke: #f00;
}
#display > svg .background path.weekend.sweep,
svg#bling .background path.weekend.sweep {
  stroke: url("#weekend-sweep");
}
#display > svg .background path.doug,
svg#bling .background path.doug {
  stroke: #808080;
}
#display > svg .background path.doug.sweep,
svg#bling .background path.doug.sweep {
  stroke: url("#doug-sweep");
}
#display > svg foreignObject.s-controls,
svg#bling foreignObject.s-controls {
  width: 100%;
}
#display > svg foreignObject.s-controls:is(.feature *,
svg#bling foreignObject.s-controls:is(.feature *,
#display > svg foreignObject.s-controls .inserting * ),
svg#bling foreignObject.s-controls .inserting * ) {
  display: none;
}
#display > svg foreignObject.s-controls > *,
svg#bling foreignObject.s-controls > * {
  margin-right: 1px;
  vertical-align: top;
  appearance: none;
  border: none;
  padding: 0;
  background: none;
  height: 100%;
  width: 19px;
  display: inline-block;
}
#display > svg foreignObject.s-controls svg,
svg#bling foreignObject.s-controls svg {
  height: 100%;
  fill: #888;
  vertical-align: top;
}
#display > svg foreignObject.s-controls svg:hover:not(.deactivated * ),
svg#bling foreignObject.s-controls svg:hover:not(.deactivated * ) {
  fill: #fff;
}
#display > svg foreignObject.s-controls a:not([href] ) svg,
svg#bling foreignObject.s-controls a:not([href] ) svg,
#display > svg foreignObject.s-controls a:not([href] ) svg:hover,
svg#bling foreignObject.s-controls a:not([href] ) svg:hover {
  fill: #333;
}
#display > svg foreignObject.s-controls .select.un:is(.selected * ),
svg#bling foreignObject.s-controls .select.un:is(.selected * ),
#display > svg foreignObject.s-controls use.un:is(.selected * ),
svg#bling foreignObject.s-controls use.un:is(.selected * ),
#display > svg foreignObject.s-controls .select.un:is(.filtered * ),
svg#bling foreignObject.s-controls .select.un:is(.filtered * ),
#display > svg foreignObject.s-controls use.un:is(.filtered * ),
svg#bling foreignObject.s-controls use.un:is(.filtered * ),
#display > svg foreignObject.s-controls .select.ed:not(.selected * ),
svg#bling foreignObject.s-controls .select.ed:not(.selected * ),
#display > svg foreignObject.s-controls use.ed:not(.selected * ),
svg#bling foreignObject.s-controls use.ed:not(.selected * ),
#display > svg foreignObject.s-controls .select.ed:is(.filtered * ),
svg#bling foreignObject.s-controls .select.ed:is(.filtered * ),
#display > svg foreignObject.s-controls use.ed:is(.filtered * ),
svg#bling foreignObject.s-controls use.ed:is(.filtered * ),
#display > svg foreignObject.s-controls .select.no:not(.filtered * ),
svg#bling foreignObject.s-controls .select.no:not(.filtered * ),
#display > svg foreignObject.s-controls use.no:not(.filtered * ),
svg#bling foreignObject.s-controls use.no:not(.filtered * ) {
  display: none;
}
#display > svg.hidden,
svg#bling.hidden {
  opacity: 0;
}
#display > svg.feature,
svg#bling.feature {
  transition: transform 0.3s ease-in-out, width 0.3s ease-in-out, top 0.3s ease-in-out, left 0.3s ease-in-out;
  position: relative;
  top: calc(-100%);
  max-width: 1000px;
}
#display > svg.feature foreignObject.annotation,
svg#bling.feature foreignObject.annotation {
  transition: padding 0.3s ease-in-out, transform 0.3s ease-in-out;
}
#display > svg.feature foreignObject.annotation img,
svg#bling.feature foreignObject.annotation img {
  transition: height 0.3s ease-in-out, mask 0.3s ease-in-out, -webkit-mask-image 0.3s ease-in-out;
}
input {
  font: 700 15px "Sinkin Sans";
  padding-left: 2px;
  margin-left: 40px;
  width: 398px;
}
#selection li > div,
#selection header {
  transition: transform 0.4s ease-out 0.2s;
}
.view #selection li > div,
.view #selection header {
  transform: translateX(-1000px);
  transition-timing-function: ease-in;
}
.list stop {
  stop-color: rgba(136,136,136,0.239);
}
ul#selection::-webkit-scrollbar {
  display: none;
}
h2,
h3 {
  margin-top: 0;
}
#selection li * {
  position: relative;
}
#selection svg {
  position: absolute;
}
/* .daily
   stroke: green
   .sweep
   stroke: url( #daily-sweep )
   
   .weekend
   stroke: red
   .sweep
   stroke: url( #weekend-sweep )
   
   .doug
   stroke: gray
   .sweep
   stroke: url( #doug-sweep ) */
.defs {
  display: none;
}
#display {
  --pop-offset: 0px;
  transform: scaleY(var(--vertical)) skew(var(--base-skew), var(--persp-skew-y));
  height: calc(100% / var(--vertical) - var(--m-top) - var(--m-bottom));
  bottom: 0;
  padding-bottom: var(--m-bottom);
  padding-top: calc(var(--m-top) + 100px);
}
#display.I {
  --base-skew: 2deg;
  --persp-skew-x: -10deg;
  --persp-skew-y: -1deg;
  --vertical: 0.8;
  --y-scale: 1;
  --m-top: 0px;
  --m-bottom: 10px;
}
#display.V {
  --base-skew: 15deg;
  --persp-skew-x: -10deg;
  --persp-skew-y: -3deg;
  --vertical: 0.95;
  --y-scale: 1.03;
  --m-top: 0px;
  --m-bottom: 20px;
}
#display.X {
  --base-skew: 30deg;
  --persp-skew-x: -5deg;
  --persp-skew-y: -8deg;
  --vertical: 0.9;
  --y-scale: 1.1;
  --m-top: 20px;
  --m-bottom: 50px;
}
#display.Y {
  --base-skew: 40deg;
  --persp-skew-x: -5deg;
  --persp-skew-y: -8deg;
  --vertical: 0.85;
  --y-scale: 1.07;
  --m-top: 30px;
  --m-bottom: 50px;
}
#display.M {
  --base-skew: 50deg;
  --persp-skew-x: -5deg;
  --persp-skew-y: -7deg;
  --vertical: 0.85;
  --y-scale: 1.08;
  --m-top: 35px;
  --m-bottom: 40px;
}
#display.O {
  --base-skew: 0deg;
  --persp-skew-x: 0deg;
  --persp-skew-y: 0deg;
  --vertical: 1;
  --y-scale: 1;
  --m-top: 0px;
  --m-bottom: 0px;
  width: 100%;
  transition: none;
}
#display.O > *:not(.feature,
#display.O .inserting ) * {
  display: none;
}
#display.locked {
  overflow-y: hidden;
}
#display.locked * {
  transition: opacity 0.2s ease-in-out;
}
#display > svg .background {
  transform: none /* scaleY( calc( 1 / var( --y-scale ) )
                 ) skewX( calc( var( --base-skew ) - var( --persp-skew-x ) )
                 ) scaleY( var( --y-scale )); */;
}
#display > svg .foreground {
  transform: skewX(calc(var(--persp-skew-x) - var(--base-skew))) scaleY(var(--y-scale));
/* animation: 2s ease-in 1 forwards drop
          */
}
#display.O > svg.feature {
  position: relative;
  width: 100%;
  max-width: 1000px;
}
#display.O > svg.feature.in,
#display.O > svg.feature.in .foreground {
  transition: none;
}
#display.O > svg.feature foreignObject {
  padding-right: 25px;
}
#display.O > svg.feature .background {
  opacity: 0;
}
#display.O > svg.feature .foreground {
  animation: none;
}
#display.O > svg.feature text.total:not(.popped ) {
  opacity: 0;
}
#display.O > svg.feature .bling stop.background {
  stop-color: transparent;
}
#display.O > svg.feature .bling .weekend .oversweep stop.background {
  stop-color: #f00;
}
#display.O > svg.feature .bling .daily .oversweep stop.background {
  stop-color: #008000;
}
#display.O > svg.feature .bling mask path.t-arc {
  fill: url("#dis-total-bling");
}
#display.O > svg.feature .bling > radialGradient.sweep {
  transform: translateX(-1px);
}
#display.O > svg.feature .bling > .sweep stop.base {
  stop-color: rgba(136,136,136,0.239);
}
#display.O > svg.feature .bling .spinner {
  fill: none;
}
defs#headdefs #grid {
  stroke: #008080;
  stroke-width: 0.2px;
  stroke-opacity: 0.5;
}
defs#headdefs #highlight {
  fill: rgba(136,136,136,0.239);
}
.daily {
  fill: #008000;
}
.daily stop.base {
  stop-color: #008000;
}
#headdefs g.daily,
.bling g.daily {
  transform: rotate(90deg);
}
.weekend {
  fill: #f00;
}
.weekend stop.base {
  stop-color: #f00;
}
stop.glow {
  stop-color: #0ff;
}
#base {
  background-color: #000;
}
.total {
  fill: none;
  stroke-width: 0.5px;
/* color: black; */
  stroke: currentColor;
}
.total stop {
  stop-color: currentColor;
}
.tic {
  stroke-width: 0.3px;
  opacity: 0.6;
}
.tic .tenth,
.tic .major {
  opacity: 1;
}
.tic .major {
  stroke-width: 0.6px;
}
text.total {
  fill: currentColor;
  dominant-baseline: hanging;
  text-anchor: end;
  font-size: 9px;
  stroke: none;
  margin-right: 3px;
}
#display text.total {
  opacity: 1;
  transition-property: none;
}
#display text.total.popped {
  transition: opacity 1s linear;
  opacity: 1;
}
text.total.d {
  text-anchor: middle;
  font-size: 8px;
/* text-anchor: end; */
  color: #90ee90;
}
text.total.w {
  text-anchor: middle;
  font-size: 8px;
/* text-anchor: start; */
  color: #ffb6c1;
}
.weekend-arc {
  stroke: #ffc0cb;
  stroke-width: 0.5px;
}
.half {
  fill-opacity: 0.4;
}
.pcirc {
  display: none;
}
#display .bling use,
#display .bling path,
#display .bling rect,
#display .bling g,
#display .bling text {
  transition: opacity 0.5s linear;
}
#display .bling g:not(.popped ) use:not(.popped ),
#display .bling g:not(.popped ) path:not(.popped ),
#display .bling g:not(.popped ) rect:not(.popped ),
#display .bling g:not(.popped ) text:not(.popped ) {
  opacity: 0;
}
#display .bling > use:not(.popped ),
#display .bling > path:not(.popped ),
#display .bling > rect:not(.popped ),
#display .bling > text:not(.popped ) {
  opacity: 0;
}
#selection .playbutton {
  position: absolute;
  top: 10px;
  left: 10px;
  height: 25px;
  opacity: 0.6;
}
.playbutton svg * {
  fill: #fff;
}
svg.controls * {
  fill: #888;
}
#display svg.controls {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  position: relative;
  z-index: 10;
}
#display .foreground:hover svg.controls,
#display svg.controls:hover {
  opacity: 1;
}
svg.controls *:hover {
  fill: #fff;
}
svg.controls > use {
  cursor: pointer;
}
.t-arc {
  fill: #fff;
}
svg.feature .foreground > use,
svg.feature .foreground > path:not(.popped ) {
  opacity: 0;
}
.bling stop.base {
  stop-color: #fff;
}
.weekend stop.base {
  stop-color: #f00;
}
.daily stop.base {
  stop-color: #008000;
}
#display .sweep {
  display: none;
}
#display .bling .sweep {
  display: initial;
}
nav {
  position: absolute;
  top: 0;
  right: 0;
}
nav div button,
nav div a {
  border: none;
  background: none;
  cursor: pointer;
  padding-block: 1px;
  padding-inline: 6px;
}
nav div button svg,
nav div a svg {
  height: 29px;
  fill: #fff;
}
nav div button svg .batsu,
nav div a svg .batsu,
nav div button svg .off,
nav div a svg .off {
  display: none;
}
nav div button.filter-toggle:is(.filtered * ) .on,
nav div a.filter-toggle:is(.filtered * ) .on {
  display: none;
}
nav div button.filter-toggle:is(.filtered * ) .off,
nav div a.filter-toggle:is(.filtered * ) .off {
  display: unset;
}
nav div .pane {
  position: fixed;
  max-height: 100%;
  right: 0px;
  display: inline-block;
  max-width: 0;
  opacity: 0;
}
nav div .pane input[type="radio"] {
  display: none;
}
nav div .pane label,
nav div .pane button {
  display: block;
  cursor: pointer;
}
nav div .pane input[type="radio"]:checked + label,
nav div .pane button:hover {
  background: rgba(136,136,136,0.239);
}
nav div .pane button {
  width: 100%;
  text-align: start;
}
nav div:focus-within button svg#srch use {
  display: none;
}
nav div:focus-within button svg#srch use.batsu {
  display: unset;
}
nav div:focus-within .pane,
nav div .pane:hover {
  right: 45px;
  max-width: unset;
  opacity: 1;
}
@-moz-keyframes drop {
  from {
    opacity: 0;
    transform: skew(calc(var(--persp-skew-x) - var(--base-skew)), var(--persp-skew-y)) scaleY(var(--y-scale)) translateY(-50px);
  }
  80% {
    opacity: 0;
    transform: skew(calc(var(--persp-skew-x) - var(--base-skew)), var(--persp-skew-y)) scaleY(var(--y-scale)) translateY(-50px);
  }
  to {
    opacity: 1;
    transform: skew(calc(var(--persp-skew-x) - var(--base-skew)), var(--persp-skew-y)) scaleY(var(--y-scale)) translateY(var(--pop-offset));
  }
}
@-webkit-keyframes drop {
  from {
    opacity: 0;
    transform: skew(calc(var(--persp-skew-x) - var(--base-skew)), var(--persp-skew-y)) scaleY(var(--y-scale)) translateY(-50px);
  }
  80% {
    opacity: 0;
    transform: skew(calc(var(--persp-skew-x) - var(--base-skew)), var(--persp-skew-y)) scaleY(var(--y-scale)) translateY(-50px);
  }
  to {
    opacity: 1;
    transform: skew(calc(var(--persp-skew-x) - var(--base-skew)), var(--persp-skew-y)) scaleY(var(--y-scale)) translateY(var(--pop-offset));
  }
}
@-o-keyframes drop {
  from {
    opacity: 0;
    transform: skew(calc(var(--persp-skew-x) - var(--base-skew)), var(--persp-skew-y)) scaleY(var(--y-scale)) translateY(-50px);
  }
  80% {
    opacity: 0;
    transform: skew(calc(var(--persp-skew-x) - var(--base-skew)), var(--persp-skew-y)) scaleY(var(--y-scale)) translateY(-50px);
  }
  to {
    opacity: 1;
    transform: skew(calc(var(--persp-skew-x) - var(--base-skew)), var(--persp-skew-y)) scaleY(var(--y-scale)) translateY(var(--pop-offset));
  }
}
@keyframes drop {
  from {
    opacity: 0;
    transform: skew(calc(var(--persp-skew-x) - var(--base-skew)), var(--persp-skew-y)) scaleY(var(--y-scale)) translateY(-50px);
  }
  80% {
    opacity: 0;
    transform: skew(calc(var(--persp-skew-x) - var(--base-skew)), var(--persp-skew-y)) scaleY(var(--y-scale)) translateY(-50px);
  }
  to {
    opacity: 1;
    transform: skew(calc(var(--persp-skew-x) - var(--base-skew)), var(--persp-skew-y)) scaleY(var(--y-scale)) translateY(var(--pop-offset));
  }
}
@-moz-keyframes drawer {
  from {
    height: 0px;
  }
}
@-webkit-keyframes drawer {
  from {
    height: 0px;
  }
}
@-o-keyframes drawer {
  from {
    height: 0px;
  }
}
@keyframes drawer {
  from {
    height: 0px;
  }
}