@font-face { font-family: Chicago12; src: url(ChiKareGo2.woff) format("woff"); src: url(ChiKareGo2.woff2) format("woff2"); }

a { color: inherit; }
* { box-sizing: border-box; -webkit-text-size-adjust: none; }
*:not(dialog) { margin: 0; }
@media(prefers-reduced-motion: no-preference) { html { interpolate-size: allow-keywords; } }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
*:focus { outline: none; }
#root, #__next { isolation: isolate; }
:root { --fakewindow-bottom: 0; --fakewindow-left: 0; }
::selection { color: white; background: black; }

*, html, body { cursor: url(cursor-default.svg) 8 3, auto; }
html { height:100%; font-size: 16px; font-synthesis: none; font-family: sans-serif; } 
body { line-height: 1.4; -webkit-font-smoothing: antialiased; border: 0; margin: 0; background: #ede8e8; color: black; height: 100%; overflow-x: hidden; }
body > div > svg { display: none; }
body > div:first-child { display: flex; padding: 2em 0; flex-direction: column; justify-content: space-between; min-height: 100%; text-align: center; width: 100%; flex-grow: 1; }
body:after { content: ""; position: fixed; opacity: 0; width: var(--fakewindow-width); height: var(--fakewindow-height); border: .15em dotted #000; top: 0; left: 0; pointer-events: none; box-sizing: border-box; }
body.fake-window:after { pointer-events: all; opacity: 1; z-index: 9999; transform: translate(var(--fakewindow-left), var(--fakewindow-top)); }
body.loading * { cursor: url(cursor-wait.svg) 10 5, auto; }
body.loading .status > p:before { content: "BUSY"; }
body.loading .status > p:after { animation: blink 1s infinite; animation-timing-function: steps(1, end); }
body.loading .content, body.loading .content * { pointer-events: none !important; }

button, a, a *, label, label *, select, .title button, .select, .select * {cursor: url(cursor-click.svg) 10 3, auto; }

h1, h2, h3 { font-family: Chicago12, sans-serif; font-weight: bold; line-height: 1; }
h3 { font-weight: normal; font-size: 1.6em; }

header { margin: 0 auto 3em; max-width: 90%; }
header h1 { font-size: 2.6em; margin-top: 0.4em; letter-spacing: -0.03em; }
header h1 br { display: none; }
header figure { font-size: 1.2em; }
header figure span { color: transparent; width: 2em; display: inline-block; position: relative }
header figure span:after { content: ""; color: black; background: currentcolor; width: 100%; height: .07em; display: block; position: absolute; top: 50%; }

footer { position: relative; margin: 3em auto 0; max-width: 90%; display: flex; gap: 0.3em; align-items: center; }
footer a:not(:last-child) { display: inline-block; border-radius: 4px; padding: 0.1em 0.6em; text-decoration: none; font-family: Chicago12, sans-serif; vertical-align: middle; border: 0.1em solid; }
footer a.active:not(:last-child), footer a:active:not(:last-child) { background: black; color: white; border: 0.1em solid black; }
footer a[href="#main"] { opacity: 0; pointer-events: none; position: absolute; left: 50%; width: 20px; margin-left: -10px; }
footer a:last-child { display: inline-flex; }
footer a:last-child svg { width: 0.75em; margin-left: 0.25em; margin-top: -0.25em; }

section { flex-direction: column; font-family: Inconsolata, Menlo, Consolas, "Roboto Mono", monospace; margin: 0 auto; text-align: left; position: relative; }
section:before { pointer-events: none; position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; content: ""; border: .1em solid #000; opacity: 0; transition: width 300ms steps(15, end), height 300ms steps(15, end), bottom 300ms steps(15, end), left 300ms steps(15, end), opacity 1ms 300ms linear; box-sizing: border-box; }
section.closed, section.closed * { pointer-events: none; }
section.closed:before, section#main.closed:before { width: 0%; height: 0%; bottom: var(--fakewindow-bottom); left: var(--fakewindow-left); opacity: 1; border-color: transparent; transition: width 300ms steps(15, end), height 300ms steps(15, end), bottom 300ms steps(15, end), left 300ms steps(15, end), border-color 1ms 300ms linear; }
section.no-transition:before { transition: none !important; }
section.closed > div { opacity: 0; transition: none; }
section > div { border: .1em solid #000; background: white; transition: opacity 1ms 400ms linear; box-shadow: 0.1em 0.1em 0 0 black; }
section > div > div:not(:last-child) { border-bottom: .1em solid #000; }

.content { padding: 1.2em 1em; }
.content h3 { margin-bottom: 0.6em; letter-spacing: -0.03em; }
.content h3:not(:first-child) { margin-top: 2em; }
.content p { font-size: 0.95em; margin-bottom: 1.5em; }
.content h3.flash, .content p.flash { background:linear-gradient(45deg,#000 25%,transparent 0,transparent 75%,#000 0,#000),linear-gradient(45deg,#000 25%,transparent 0,transparent 75%,#000 0,#000); background-color:#fff;background-position:0 0,3px 3px; background-size:6px 6px; color: transparent; }
.content button { background: #fff; border-image: url('data:image/svg+xml,<svg width="81" height="81" viewBox="0 0 81 81" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M61 0H20V6H14H6V14V20H0V61H6V67V75H14H20V81H61V75H67H75V67V61H81V20H75V14V6H67H61V0ZM74 21H67V14H60V7H21V14H14V21H7V60H14V67H21V74H60V67H67V60H74V21Z" /></svg>') 30 stretch; border-style: solid; border-width: 0.3em; color: #000; font-family: Chicago12, sans-serif; font-size: 1.3em; padding: 0 1em 0 1.1em; text-align: center; text-decoration: none; display: inline-block; }
.content button:active, .content button.active { background: #000; border-radius: 0.4em; color: #fff; }
.content svg.inline { display: inline-block; width: 1.1em; vertical-align: sub; margin: 0 0.5em 0 0; }
.content a svg:last-child { width: 0.75em; margin-left: 0.25em; margin-top: -0.25em; display: inline-block; }
.content code:has(svg.inline:first-child) { border-top: 0.3em double; border-bottom: 0.3em double; padding: 0.75em 0.25em; margin-bottom: 1.45em; display: inline-block; font-weight: bold; }
.content code svg.inline:first-child { height: 1.3em; width: auto; }
.content ul { margin-bottom: 1.45em; }
.content input[id^="content"] { top: 0; }
.content input[id^="content"] + label { display: flex; margin-bottom: 1em; margin-top: 0.5em; user-select: none; }
.content input[id^="content"] + label:not([for="content-1"]) { margin-top: 2em; }
.content input[id^="content"] + label h3 { margin-bottom: 0; flex-grow: 1; }
.content input[id^="content"] + label + div { display: none; }
.content input[id^="content"] + label + div .pre-banner pre { display: none; }
.content input[id^="content"] + label:before { margin-right: 0.8em; content: ""; font-family: ui-monospace; text-align: center; line-height: 0.9em; width: 1em; height: 1em; background-image: linear-gradient(#000, #000), linear-gradient(#000, #000); background-size: 60% 0.1em, 0.1em 60%;background-position: center; background-repeat: no-repeat; }
.content input[id^="content"] + label:active:before { background-color: black; background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); }
.content input[id^="content"]:checked + label + div { display: block; margin-bottom: 3em; }
.content input[id^="content"]:checked + label + div .pre-banner pre { display: block; }
.content input[id^="content"]:checked + label:before { background-color: white; background-image: linear-gradient(#000, #000);}
.content input[id^="content"]:checked + label:active:before { background-color: black; background-image: linear-gradient(#fff, #fff); }
.content[data-align="right"] { text-align: right; }
.content[data-align="right"] input[id^="content"] + label:before { order: 2; margin-left: 0.8em; margin-right: 0; }
.content[data-align="center"] { text-align: center; }
.content[data-align="center"] input[id^="content"] + label:before { display: none; }

.status { padding: 0.4em; display: flex; align-items: center; gap: 1.5em; user-select: none; }
.status > p { font-size: 1.1em; line-height: 1; letter-spacing: -0.02em; display: flex; font-family: Chicago12, sans-serif; gap: 0.2em; align-items: center; margin-left: auto; margin-bottom: 0; }
.status > p:after { content: ''; display: block; width: 0.7em; height: 0.7em; border: 0.1em solid; border-radius: 50%; box-sizing: border-box; order: -1; margin-right: 0.7em; color: black; }
.status > p:before { content: 'READY'; order: -1; color: black; }

.title { display: flex; padding: 0 1px; touch-action: none; align-items: center; position: relative; user-select: none; background: white; }
.title, .title > *, body.pre-fake-window, body.pre-fake-window * { cursor: url(cursor-move.svg) 10 5, auto; }
.title:after, .title:before { flex-grow: 1; content: ""; display: block; height: 1.1em; margin: 0.35em 0.1em; background-size: auto 100%; background-repeat: repeat-x; background-position: top; background-image: url('data:image/svg+xml,<svg width="600px" height="11px" viewBox="0 0 600 11" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="600" height="1"></rect><rect x="0" y="8" width="600" height="1"></rect><rect x="0" y="10" width="600" height="1"></rect><rect x="0" y="2" width="600" height="1"></rect><rect x="0" y="4" width="600" height="1"></rect><rect x="0" y="6" width="600" height="1"></rect></svg>'); }
.title h2 { background: #fff; font-family: Chicago12, sans-serif; flex-shrink: 0; font-size: 1.5em; font-weight: normal; line-height: 1; padding: 0 .6em; text-align: center; }
.title button { position: absolute; width: 1.1em; height: 1.1em; padding: 0; border: 0.1em solid black; background: white; display: block; top: 0.35em; left: 0.8em; outline: 0.1em solid white; }
.title button:after, .title button:before { content: ""; opacity: 0; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; }
.title button:after { opacity: 1; }
.title button:before { background: black; background: linear-gradient(#000, #000) 0, linear-gradient(#000, #000) 100%, linear-gradient(#000, #000) top, linear-gradient(#000, #000) bottom; background-repeat: no-repeat; background-size: 22.5% 3.6363636364px, 22.5% 3.6363636364px, 3.6363636364px 22.5%, 3.6363636364px 22.5%; transform: rotate(45deg) scale(0.6); }
.title button:active { background: linear-gradient(#000, #000) 0, linear-gradient(#000, #000) 100%, linear-gradient(#000, #000) top, linear-gradient(#000, #000) bottom, linear-gradient(white, white); background-repeat: no-repeat; background-size: 30% 2px, 30% 2px, 2px 30%, 2px 30%, 100% 100%; }
.title button:active:before { opacity: 1; }


input[type=checkbox]+label { font-size: 1.1em; line-height: 1; letter-spacing: -0.02em; display: flex; align-items: center; user-select: none; font-family: Chicago12, sans-serif; position:relative }
input[type=checkbox]+label p { margin: 0; }
input[type=checkbox]+label:before { content:""; flex-shrink: 0; width: 0.8em; height: 0.8em; margin-right: 0.4em; border:0.1em solid; background-size: 150%; background-position: center; }
input[type=checkbox] { pointer-events: none; opacity: 0; position: absolute; }
input[type=checkbox]:checked+label:before { background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='12' height='12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h1v1H4zM5 5h1v1H5zM6 6h1v1H6zM7 7h1v1H7zM8 8h1v1H8zM9 9h1v1H9zM10 10h1v1h-1zM11 11h1v1h-1zM11 0h1v1h-1zM10 1h1v1h-1zM9 2h1v1H9zM8 3h1v1H8zM7 4h1v1H7zM6 5h1v1H6zM5 6h1v1H5zM4 7h1v1H4zM3 8h1v1H3zM2 9h1v1H2zM1 10h1v1H1zM0 11h1v1H0z'/%3E%3C/svg%3E"); }
select { height: auto; min-width: 8em; font-family: Chicago12, sans-serif; font-size: 1.2em; background-image: url(select-caret.svg); background-position: center right 0.4em; background-size: auto 0.4em; background-repeat: no-repeat; appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; padding-left: 0.5em; background-color: white; border: 0.09em solid black; color: black; border-radius: 0; box-shadow: 0.09em 0.09em 0 0 black; }

.xterm { padding: 10px; pointer-events: none; }
.xterm-screen { width: 100%; max-width: 100%; }
.xterm-viewport { pointer-events: all; }
.xterm-rows .xterm-cursor { background-color: currentcolor; color: currentcolor; animation: blink_block_1 1s step-end infinite; border: none; outline: none !important; }

.icon { float: left; width: 5em; height: auto; font-family: Chicago12, sans-serif; text-decoration: none; line-height: 1; font-size: 1.3em; margin: 0 1em 0.5em 0; text-align: center; }
.icon * { pointer-events: none }
.icon svg { width: 3.2em; height: auto; margin: 0 auto; display: block; }
.icon svg use:last-child { fill: none; }
.icon span { padding: 0.1em 0.1em 0.1em 0.2em; }
.icon:active span, .icon.active span { background: black; color: white; }
.icon:active svg use, .icon.active svg use { fill: white; }
.icon:active svg use:last-child, .icon.active svg use:last-child { fill: black; }

.ruler { padding: 0.25em 0 0; border-bottom: none !important; user-select: none; }
.ruler ul { overflow: hidden; border-bottom: 1px dotted; background-image: linear-gradient(90deg, black 0 1px, transparent 0), linear-gradient(90deg, black 0 1px, transparent 0), linear-gradient(90deg, black 0 1px, transparent 0), linear-gradient(90deg, black 0 1px, transparent 0); background-position: bottom left; background-repeat: repeat-x; background-size: 20px 3px, 40px 6px, 80px 9px, 160px 12px; counter-reset: d -160; display: flex; inset-block-start: 0; inset-inline-start: 160px; list-style: none; padding: 0; width: 100%; font-family: Chicago12, sans-serif; }
.ruler li { align-self: flex-end; counter-increment: d 160; flex: 0 0 160px; }
.ruler li::after { content: counter(d); line-height: 1; padding: 0.3em; font-size: 1.2em; }

.tools { border-top: 1px dotted; border-bottom: 0.2em solid !important; padding: 0 1.5em; user-select: none; }
.tools > div { margin: 0 auto; max-width: 40em; display: flex; padding: 0.6em 0; gap: 0.35em; }
.tools > div:before, .tools > div:after { width: 0.9em; height: 0.9em; display: block; margin: -0.5em auto 0 -0.45em; content: ""; background-image: url(marker1.svg); background-repeat: no-repeat; background-size: auto 100%; }
.tools > div:after { height: 0.6em; width: 3.4em; margin: -0.5em -0.45em 0 auto; background-image: url(marker0.svg); background-position: right; }
.tools input[type="radio"] { position: absolute; pointer-events: none; opacity: 0; }
.tools label { display: inline-flex; width: 3.2em; position: relative; z-index: 1; border: 0.1em solid; background: white; box-shadow: 0.1em 0.1em 0 0 black; flex-direction: column; align-items: center; gap: 0.1em; padding: 0.2em 0.3em; justify-content: center; }
.tools label:first-of-type { align-items: flex-start; }
.tools label:last-of-type { align-items: flex-end; }
.tools label i { height: 0.1em; width: 100%; background: black; display: block; flex-shrink: 0; position: relative; z-index: 2; }
.tools label i:first-child { width: 1.8em; }
.tools label i:nth-child(2) { width: 2.4em; }
.tools label i:nth-child(3) { width: 2em; }
.tools label i:nth-child(4) { width: 2.2em; }
.tools label i:nth-child(5) { width: 1.9em; }
.tools label i:nth-child(6) { width: 2.3em; }
.tools label:before { content: ""; display: block; position: absolute; z-index: 1; inset: 0.1em; }
.tools input[type="radio"]:checked + label:before { background: black; }
.tools input[type="radio"]:checked + label i { background: white; }

.select { position: relative; z-index: 9; }
.select button { background: none; border: none; color: transparent; position: absolute; inset: 0; width: 100%; height: 100%;  display: none;}
.select:focus ul { display: block; }
.select:focus button { display: block; }
.select ul { position: absolute; width: 100%; top: 100%; left: 0; display: none; background: white; border: 0.09em solid black; box-shadow: 0.09em 0.09em 0 0 black; list-style: none; user-select: none; text-align: left; font-family: Chicago12, sans-serif; font-size: 1.2em; padding: 0; margin-top: -0.09em; }
.select ul li { user-select: none; padding: 0.25em 0.5em; line-height: 1; }
.select ul li:first-child { padding-top: 0.32em; }
.select ul li:last-child { padding-bottom: 0.32em; }
.select ul li:active { color: white; background: black; }
.select select { pointer-events: none; }

.pre-banner { float: left; margin-right: 1.5em; font-weight: bold; background: black; color: white; font-size: 0.9em; position: relative; border: 1px solid black; }
.pre-banner pre { opacity: 0; animation: bannerLoop 2.7s infinite steps(1); animation-fill-mode: both; background: black; position: relative; padding: 0 1em 1em; }
.pre-banner pre:not(:first-child) { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; overflow: hidden; } 
.pre-banner pre:first-child { z-index: 2; animation-delay: 0; }
.pre-banner pre:nth-child(2) { animation-delay: 0.3s; padding: 0.25em; }
.pre-banner pre:nth-child(3) { animation-delay: 0.6s; }
.pre-banner pre:nth-child(4) { animation-delay: 0.9s; }
.pre-banner pre:nth-child(5) { animation-delay: 1.2s; }
.pre-banner pre:nth-child(6) { animation-delay: 1.5s; }
.pre-banner pre:nth-child(7) { animation-delay: 1.8s; padding: 0.25em; }
.pre-banner pre:nth-child(8) { animation-delay: 2.1s; }
.pre-banner pre:nth-child(9) { animation-delay: 2.4s; }

#terminal { overflow: hidden; }
#main { max-width: 748px; user-select: none; }
#keyboard { width: 20.82em; margin-top: 2em; left: -140px; user-select: none; }
#keyboard .content { display: flex; flex-wrap: wrap; padding: 0.2em; gap: 0.2em }
#keyboard .content button { padding: 0 0.1em 0 0.2em; min-width: 1.8em; }
#keyboard .content button:last-child { flex-grow: 1; }
#info { width: 25em; margin-top: -16.2em; left: 50%; margin-left: 4em; max-width: 94%; position: absolute; user-select: none; }
#info h3 { display: flex; gap: 0.35em; align-items: flex-start; }
#info h3 svg { width: 1.9em; height: auto; flex-shrink: 0; margin-top: -0.1em; }
#icon-bomb polygon { animation: flicker 0.4s infinite steps(1); }
#icon-bomb polygon:nth-of-type(even) { animation-delay: 0.3s; }
#speed path { box-shadow: 0.06em 0.06em 0 0 white; }
  
#readme { position: absolute; width: 50em; height: 56em; max-height: 90vh; max-width: 100%; inset: 0 15% 0 0; margin: auto; }
#readme > div { height: 100%; display: flex; flex-direction: column; }
#readme .content { overflow-y: scroll; padding: 1.5em; flex-grow: 1; }
#readme .content > div { margin: 0 auto; max-width: 40em; }
#readme .content p, #readme .content p *:not(a, a *), #readme .content ul, #readme .content code { cursor: url(cursor-text.svg) 7 10, auto; }

section.video { position: absolute; height: auto; width: 25em; max-width: 60vh; height: 46.1em; inset: 9% 0 4% 57%; max-height: 82vh; margin: auto auto auto 0; }
section.video > div { height: 100%; overflow: hidden; background: black; position: relative; }
section.video video { width: 100%; height: 100%; object-fit: cover; }
section.video .playback { position: absolute; bottom: 0.5em; left: 0.5em; padding: 0 0.5em; align-items: center; display: flex; gap: 0.4em; }
section.video .playback svg { height: 0.8em;  }
section.video .playback:after { content: attr(data-speed) 'x'; font-family: Chicago12, sans-serif; font-size: 1.75em; text-shadow: 0.06em 0 0 white, -0.06em 0 0 white, 0 0.06em 0 white, 0 -0.075em 0 white, 0.06em 0.06em 0 white, -0.06em 0.06em 0 white, 0.06em -0.06em 0 white, -0.06em -0.06em 0 white; }

@media(max-width: 950px) {
  #info { left: auto; right: 2%; margin-left: 0; }
  section.video { right: 1em; left: auto; }
}

@media(max-width: 750px) {
  #main { max-width: 100%; }
  #main > div { border-left: none; border-right: none; }
  #main .title { pointer-events: none; }
  #info { right: 5%; }
}

@media(max-width: 650px) {
  body { font-size: 15px; }
  main { position: relative; }
  #main > div { border-bottom: none; box-shadow: none; }
  .status { position: absolute; left: 0; width: calc(100% - 20.6em); flex-direction: column; align-items: flex-start; gap: 0.4em; height: 5.5em; white-space: nowrap; }
  .status > p { margin-left: 0; margin-top: auto; color: transparent; }
  #terminal { border-bottom: none; }
  body:not(.connected) .xterm-rows { font-size: 13px; }
  body:not(.connected) .xterm-rows > div { height: 15px !important; line-height: 15px !important; }
  #keyboard { width: 100%; margin-top: -0.1em; left: initial; pointer-events: all; margin-bottom: 2.5em; }
  #keyboard:before { display: none !important; }
  #keyboard > div { border-left: none; border-right: none; }
  #keyboard .title { display: none; }
  #keyboard .content { max-width: 21em; margin: 0 0 0 auto; padding: 0.4em; }
  #main:before { height: calc(100% + 5.5em); bottom: -5.5em; }
  header h1 br { display: block; }
  .status span { display: none; }
  footer a[href="#keyboard"] { opacity: 0; pointer-events: none; position: absolute; }
  .tools > div:after { width: 1em; }
  #info { margin-top: auto; bottom: -0.5em; }
  #readme, section.video { inset: 0.4em 0 0.3em; position: fixed; width: 100%; height: calc(100% - 0.7em); max-height: 100%; max-width: 100%; }
  #readme .title, section.video .title { pointer-events: none; }
  #readme:not(.closed) .title button, section.video:not(.closed) .title button { pointer-events: all; }
}

@media(max-width: 450px) {
  body { font-size: 14px; }
  .xterm { padding: 5px; }
  body:not(.connected) .xterm-rows { padding: 5px; }
  header h1 { margin-top: 0.3em; }
  body > div:first-child { padding: 1.75em 0; }
  #keyboard { margin-bottom: 2em; }
}

@media(max-width: 400px) {
  .status { width: calc(100% - 18em); }
  #keyboard .content { max-width: 18.4em; }
  #info { right: 3%; }
  header h1 { margin-top: 0.2em; }
}

@media(max-width: 360px) {
  #info { right: 0; max-width: 100%; }
}

@media(hover: hover) and (pointer: fine) and (min-width: 800px) {
  @supports selector(::-webkit-scrollbar-button) {
    section#main { max-width: 770px !important; }
    .xterm { padding: 10px 32px 10px 10px; }
    .tools { padding: 0 calc(1.5em + 22px) 0 1.5em; }
    ::-webkit-scrollbar{background-color:#fff;width:22px}
    ::-webkit-scrollbar-track{background:linear-gradient(45deg,#000 25%,transparent 0,transparent 75%,#000 0,#000),linear-gradient(45deg,#000 25%,transparent 0,transparent 75%,#000 0,#000);background-color:#fff;background-position:0 0,2px 2px;background-size:4px 4px;border-left:0.1em solid #000;width:10px}
    ::-webkit-scrollbar-thumb:vertical{background-color:#fff;border:0.1em solid #000;border-right:none;box-sizing:content-box;width:20px}::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement{display:block}::-webkit-scrollbar-button:vertical:start{ border-left: 0.1em solid; border-bottom: 0.1em solid;
       background-image:url(scrollbar-top.svg);background-repeat:no-repeat;height:23.38px}
    ::-webkit-scrollbar-button:vertical:start:active{background-image:url(scrollbar-top-active.svg);background-repeat:no-repeat;height:23.38px}
    ::-webkit-scrollbar-button:vertical:end{
      border-left: 0.1em solid; border-top: 0.1em solid;
      background-image:url(scrollbar-bottom.svg);height:23.38px}
    ::-webkit-scrollbar-button:vertical:end:active{background-image:url(scrollbar-bottom-active.svg);background-repeat:no-repeat;height:23.38px}
  }
}

@media(hover: none) and (pointer: coarse) {
  :root { --fakecursor-top: calc(100% + 7em); --fakecursor-left: calc(100% - 3em); --fakecursor: url(cursor-default.svg); }
  body:before { content: ""; display: block; position: fixed; width: 29px; height: 29px; top: var(--fakecursor-top); left: var(--fakecursor-left); pointer-events: none; box-sizing: border-box; background-image: var(--fakecursor); z-index: 9999; background-repeat: no-repeat; background-position: left top; transition: top 0.18s ease-in-out, left 0.18s ease-in-out; }
  body.loading:before { --fakecursor: url(cursor-wait.svg); }
}

@keyframes blink {
  0% { background: none; } 5% { background: black; } 10% { background: none; } 18% { background: black; } 22% { background: none; } 35% { background: black; } 38% { background: none; } 55% { background: black; } 60% { background: none; } 80% { background: black; } 93% { background: none; } 100% { background: none; }
}

@keyframes flicker {
  0% { opacity: 0; }
  60% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes bannerLoop {
  0% { opacity: 1; }
  11% { opacity: 1; }
  12% { opacity: 0; }
  100% { opacity: 0; }
}