@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/jetbrains-mono-greek-wght.woff2") format("woff2-variations");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+0303, U+0391-03A9, U+03B1-03C9;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/jetbrains-mono-greek-wght.woff2") format("woff2-variations");
  font-weight: 500;
  font-style: normal;
  font-display: block;
  unicode-range: U+0303, U+0391-03A9, U+03B1-03C9;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./fonts/jetbrains-mono-greek-wght.woff2") format("woff2-variations");
  font-weight: 700;
  font-style: normal;
  font-display: block;
  unicode-range: U+0303, U+0391-03A9, U+03B1-03C9;
}

:root {
  --reel-ground: #FAFAF9;
  --reel-card: #FFFFFF;
  --reel-wash: rgba(29, 74, 255, 0.07);
  --reel-wash-green: rgba(13, 122, 62, 0.09);
  --reel-line: #e8e8ed;
  --reel-guide: rgba(29, 74, 255, 0.55);
  --reel-guide-band: rgba(29, 74, 255, 0.06);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--reel-ground);
  color: var(--os-ink);
  font-family: var(--os-font-body);
  -webkit-font-smoothing: antialiased;
}

.reel-frame {
  position: relative;
  overflow: hidden;
  background: var(--reel-ground);
  contain: strict;
}

.reel-frame, .reel-frame * {
  transition: none !important;
  animation: none !important;
}

.rn { position: absolute; left: 0; top: 0; }

.rv { pointer-events: none; }

.rt {
  display: flex;
  flex-direction: column;
  white-space: pre-line;
  margin: 0;
}

.rt > span { display: block; }

.rt .rw { display: inline-flex; }

.rt .rc { display: inline-block; }

.rt .rl { display: block; }

.rt .rs { font-size: 0.62em; position: relative; top: 0.36em; }

.ra svg, .ri svg { width: 100%; height: 100%; display: block; }

.reel-guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.reel-guides .band { position: absolute; left: 0; right: 0; background: var(--reel-guide-band); }
.reel-guides .band.side { top: 0; bottom: 0; left: auto; right: auto; }
.reel-guides .safe { position: absolute; border: 2px dashed var(--reel-guide); }
.reel-guides .tag {
  position: absolute;
  font-family: var(--os-font-mono);
  font-size: 22px;
  color: var(--os-blue);
  padding: 6px 10px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

body.bare { overflow: hidden; }
body.bare .reel-host { position: fixed; left: 0; top: 0; }