:root {

  --bg:
    #0f1a21;

  --panel:
    #17252e;

  --panel-soft:
    #1c2b35;

  --white:
    #ffffff;

  --muted:
    #87969f;

  --line:
    rgba(255,255,255,.09);

  --red:
    #d71920;

  --green:
    #24ae80;

  --blue:
    #4c84f2;

  --violet:
    #8a69ef;

  --amber:
    #dc8a21;

}


* {
  box-sizing:
    border-box;
}


html,
body {

  margin:
    0;

  min-height:
    100%;

  background:
    var(--bg);

}


body {

  min-height:
    100vh;

  color:
    var(--white);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

}


button,
a {
  -webkit-tap-highlight-color:
    transparent;
}


button {
  font:
    inherit;
}


.hidden {
  display:
    none !important;
}


.remote {

  width:
    min(100%, 580px);

  min-height:
    100vh;

  margin:
    0 auto;

  padding:
    max(18px, env(safe-area-inset-top))
    18px
    max(28px, env(safe-area-inset-bottom));

}


.remote-header {

  min-height:
    70px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

}


.brand {

  display:
    flex;

  align-items:
    center;

  gap:
    11px;

}


.brand-mark {

  width:
    50px;

  height:
    50px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    14px;

  background:
    white;

  color:
    #13212a;

  font-size:
    12px;

  font-weight:
    950;

}


.brand > div:last-child {

  display:
    grid;

  gap:
    3px;

}


.brand span {

  color:
    #7e909a;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .15em;

}


.brand strong {

  font-size:
    13px;

  font-weight:
    900;

}


.tv-status {

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    9px 11px;

  border:
    1px solid var(--line);

  border-radius:
    999px;

  color:
    #7f8e97;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .11em;

}


.tv-status i {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    #69767e;

}


.tv-status.online {

  color:
    #9de0c8;

}


.tv-status.online i {

  background:
    var(--green);

  box-shadow:
    0 0 0 6px
    rgba(36,174,128,.09);

}


.auth-error {

  margin-top:
    40px;

  padding:
    28px;

  border:
    1px solid
    rgba(215,25,32,.24);

  border-radius:
    26px;

  background:
    rgba(215,25,32,.055);

}


.auth-error span {

  color:
    #ff8883;

  font-size:
    8px;

  font-weight:
    950;

  letter-spacing:
    .15em;

}


.auth-error strong {

  display:
    block;

  margin-top:
    10px;

  font-size:
    20px;

  line-height:
    1.25;

}


.auth-error a {

  display:
    inline-block;

  margin-top:
    25px;

  color:
    white;

  font-size:
    8px;

  font-weight:
    950;

  letter-spacing:
    .12em;

  text-decoration:
    none;

}


.controller {

  padding-top:
    21px;

}


.now-playing {

  padding:
    24px;

  border:
    1px solid var(--line);

  border-radius:
    29px;

  background:
    linear-gradient(
      145deg,
      #1b2b35,
      #15232c
    );

  box-shadow:
    0 26px 60px
    rgba(0,0,0,.15);

}


.case-heading {

  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    15px;

}


.case-heading > div:first-child {

  display:
    grid;

  gap:
    4px;

}


.case-heading span {

  color:
    #809099;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .15em;

}


.case-heading strong {

  font-size:
    13px;

  font-weight:
    950;

}


.phase-pill {

  padding:
    8px 11px;

  border-radius:
    999px;

  background:
    rgba(76,132,242,.10);

  color:
    #8eb3ff;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .14em;

}


.now-playing h1 {

  margin:
    33px 0 0;

  font-size:
    37px;

  line-height:
    .95;

  font-weight:
    950;

  letter-spacing:
    -.055em;

}


.now-playing > p {

  margin:
    13px 0 0;

  color:
    #91a0a9;

  font-size:
    12px;

  line-height:
    1.52;

}


.animation-state {

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  margin-top:
    25px;

  padding-top:
    17px;

  border-top:
    1px solid var(--line);

  color:
    #91a0a9;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .14em;

}


.animation-state i {

  width:
    8px;

  height:
    8px;

  border-radius:
    50%;

  background:
    var(--green);

}


.animation-state.running {

  color:
    #ffc08f;

}


.animation-state.running i {

  background:
    var(--amber);

  animation:
    runningPulse
    1.1s
    ease-in-out
    infinite;

}


@keyframes runningPulse {

  0%,
  100% {
    opacity:
      .45;

    transform:
      scale(.75);
  }

  50% {
    opacity:
      1;

    transform:
      scale(1.15);
  }

}


.next-beat {

  display:
    grid;

  gap:
    6px;

  margin-top:
    17px;

  padding:
    16px 18px;

  border:
    1px solid var(--line);

  border-radius:
    18px;

  background:
    rgba(255,255,255,.025);

}


.next-beat span {

  color:
    #788992;

  font-size:
    6.5px;

  font-weight:
    950;

  letter-spacing:
    .16em;

}


.next-beat strong {

  font-size:
    12px;

  font-weight:
    850;

}


.next-button {

  width:
    100%;

  min-height:
    114px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-top:
    17px;

  padding:
    0 27px;

  border:
    0;

  border-radius:
    27px;

  background:
    var(--red);

  color:
    white;

  box-shadow:
    0 25px 55px
    rgba(215,25,32,.22);

  cursor:
    pointer;

  transition:
    opacity .25s ease,
    transform .18s ease;

}


.next-button:active {

  transform:
    scale(.985);

}


.next-button:disabled {

  opacity:
    .30;

  box-shadow:
    none;

}


.next-button span {

  font-size:
    11px;

  font-weight:
    950;

  letter-spacing:
    .17em;

}


.next-button strong {

  font-size:
    52px;

  line-height:
    1;

  font-weight:
    350;

}


.secondary-controls {

  display:
    grid;

  grid-template-columns:
    1fr
    1fr;

  gap:
    12px;

  margin-top:
    12px;

}


.secondary-controls button {

  min-height:
    66px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  border:
    1px solid var(--line);

  border-radius:
    20px;

  background:
    var(--panel);

  color:
    white;

  cursor:
    pointer;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .06em;

}


.secondary-controls button span {

  font-size:
    18px;

}


.presenter-notes {

  margin-top:
    18px;

  padding:
    20px;

  border:
    1px solid var(--line);

  border-radius:
    24px;

  background:
    rgba(255,255,255,.025);

}


.presenter-notes header {

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

}


.presenter-notes header span {

  color:
    #85959e;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .15em;

}


.presenter-notes header i {

  padding:
    5px 7px;

  border-radius:
    999px;

  background:
    rgba(138,105,239,.09);

  color:
    #a992f1;

  font-size:
    6px;

  font-style:
    normal;

  font-weight:
    950;

  letter-spacing:
    .12em;

}


.presenter-notes p {

  margin:
    16px 0 0;

  color:
    #c2cbd0;

  font-size:
    12px;

  line-height:
    1.62;

}


.case-selector {

  margin-top:
    18px;

  padding:
    20px;

  border:
    1px solid var(--line);

  border-radius:
    24px;

  background:
    var(--panel);

}


.case-selector header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    15px;

}


.case-selector header span {

  color:
    #87969f;

  font-size:
    7px;

  font-weight:
    950;

  letter-spacing:
    .15em;

}


.case-selector header small {

  color:
    #596872;

  font-size:
    6px;

  font-weight:
    900;

  letter-spacing:
    .10em;

}


.case-grid {

  display:
    grid;

  grid-template-columns:
    repeat(5,1fr);

  gap:
    8px;

}


.case-grid button {

  aspect-ratio:
    1;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid var(--line);

  border-radius:
    15px;

  background:
    #132129;

  color:
    #8d9ba3;

  font-size:
    11px;

  font-weight:
    950;

  cursor:
    pointer;

}


.case-grid button.active {

  border-color:
    rgba(215,25,32,.34);

  background:
    rgba(215,25,32,.11);

  color:
    white;

  box-shadow:
    inset 0 0 0 1px
    rgba(215,25,32,.08);

}


.remote-footer {

  min-height:
    90px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    15px;

  margin-top:
    15px;

  padding:
    0 5px;

  color:
    #687881;

  font-size:
    6.5px;

  font-weight:
    900;

  letter-spacing:
    .10em;

}


.remote-footer strong {

  color:
    #7c8b94;

}


@media (min-width: 700px) {

  .remote {
    padding-top:
      35px;
  }

}