* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
}

body {
  display: grid;
  place-items: center;
  font-family: Arial, Helvetica, sans-serif;
}

.app-shell {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.machine {
  position: relative;

  width: min(
    100vw,
    calc(100vh * 16 / 9)
  );

  aspect-ratio: 16 / 9;

  overflow: hidden;
  background: #000;
  touch-action: manipulation;
}

.machine-base {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  user-select: none;
  pointer-events: none;
}

.reel {
  position: absolute;

  width: 23.25%;
  height: auto;

  transform-origin: 50% 50%;

  user-select: none;
  pointer-events: none;
}

.reel-left {
  left: 25.65%;
  top: 27.4%;
}

.reel-right {
  left: 51.15%;
  top: 27.4%;
}

.hotspot {
  position: absolute;

  padding: 0;
  margin: 0;
  border: 0;

  background: transparent;

  cursor: pointer;
  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;
}

.play-button {
  left: 31.7%;
  top: 76.3%;
  width: 12.2%;
  height: 17.5%;
}

.stop-button {
  left: 44.2%;
  top: 76.3%;
  width: 11.7%;
  height: 17.5%;
}

.hotspot:focus-visible {
  outline: 3px solid white;
  outline-offset: -3px;
}

/* Press D to toggle this while positioning controls */
body.debug .hotspot {
  background: rgba(0, 255, 255, 0.22);
  outline: 2px solid cyan;
}

.loop-button {
  left: 56%;
  top: 76.3%;
  width: 12.2%;
  height: 17.5%;
}

body.loop-off .loop-button::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 14%;
  background: rgba(0, 0, 0, 0.38);
}

body.playing .play-button::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 14%;
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.4);
}


/* ==================================================
   SUPERSEAL LOOPER REELS - CATALOG UI V1
   ================================================== */


/* PREVIOUS LOOP */

.previous-button {
  left: 27.2%;
  top: 84.1%;
  width: 4.7%;
  height: 8.3%;
}


/* CHANGE LOOP KNOB */

.change-loop-button {
  left: 32.2%;
  top: 82.2%;
  width: 8.4%;
  height: 12.2%;
  border-radius: 50%;
}


/* NEXT LOOP */

.next-button {
  left: 72.4%;
  top: 84.1%;
  width: 4.7%;
  height: 8.3%;
}


/* LOOP BUTTON */

.loop-button {
  left: 56%;
  top: 76.3%;
  width: 12.2%;
  height: 17.5%;
}


/* ==================================================
   OLD SCHOOL GREEN DATA DISPLAY
   ================================================== */

.looper-data-strip {
  position: absolute;

  left: 22%;
  bottom: 1.25%;

  width: 56%;
  height: 5.6%;

  z-index: 20;

  display: flex;
  align-items: center;

  padding:
    0.35%
    0.8%;

  background:
    linear-gradient(
      180deg,
      #030803,
      #061106
    );

  border:
    max(1px, 0.12vw)
    solid
    #1b451d;

  border-radius: 0.45vw;

  box-shadow:
    inset 0 0 1.2vw
    rgba(0,255,70,0.08),
    0 0 0.45vw
    rgba(0,0,0,0.9);

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  color: #63ff73;
}


/* TRACK INFO */

.track-readout {
  flex: 1;
  min-width: 0;

  padding-right: 1%;
}

.track-title {
  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  font-size:
    min(1.18vw, 2.1vh);

  line-height: 1.05;

  font-weight: 700;

  text-shadow:
    0 0 0.35vw
    rgba(70,255,100,0.8);
}

.track-subline {
  display: flex;

  gap: 2%;

  margin-top: 0.25%;

  overflow: hidden;

  white-space: nowrap;

  font-size:
    min(0.72vw, 1.3vh);

  opacity: 0.78;
}

#trackCounter {
  flex: 0 0 auto;
}

#trackProducer {
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ==================================================
   FIVE STAR RATING
   ================================================== */

.rating-panel {
  display: flex;
  align-items: center;

  gap: 0.25vw;

  flex: 0 0 auto;
}

.rating-label {
  margin-right: 0.2vw;

  font-size:
    min(0.65vw, 1.2vh);

  opacity: 0.65;
}

.rating-stars {
  display: flex;
}

.rating-star {
  appearance: none;

  border: 0;
  padding: 0 0.11vw;

  background: transparent;

  color: #173f1d;

  font-size:
    min(1.45vw, 2.6vh);

  cursor: pointer;

  line-height: 1;

  text-shadow: none;
}

.rating-star:hover,
.rating-star.rated {
  color: #72ff7c;

  text-shadow:
    0 0 0.42vw
    rgba(70,255,90,0.95);
}


/* ==================================================
   LIVE BPM
   ================================================== */

.live-bpm {
  position: absolute;

  /*
    Positioned over the illustrated BPM digits.
    We may tune this a few pixels after seeing it.
  */

  left: 29.05%;
  top: 30.25%;

  width: 5.8%;
  height: 4.5%;

  z-index: 15;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #030303;

  color: #ff1717;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  font-weight: 700;

  font-size:
    min(2.1vw, 3.7vh);

  letter-spacing: 0.05em;

  line-height: 1;

  text-shadow:
    0 0 0.45vw
    rgba(255,0,0,0.8);

  pointer-events: none;
}


/* LOOP OFF FEEDBACK */

body.loop-off .loop-button::after {
  content: "";

  position: absolute;
  inset: 8%;

  border-radius: 14%;

  background:
    rgba(0,0,0,0.42);
}


/* DEBUG HIT AREAS */

body.debug .previous-button,
body.debug .next-button,
body.debug .change-loop-button,
body.debug .loop-button {
  background:
    rgba(0,255,255,0.24);

  outline:
    2px solid cyan;
}


/* ==================================================
   LIVE AUDIO LEVEL METER
   ================================================== */

.live-level-meter {
  position: absolute;

  /*
    Overlay for the illustrated LEVEL meter.
    These coordinates are intentionally easy to tune.
  */
  left: 78.85%;
  top: 28.8%;

  width: 2.55%;
  height: 31.8%;

  z-index: 18;

  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;

  padding:
    0.35%
    0.25%;

  pointer-events: none;
}

.meter-segment {
  display: block;

  width: 100%;
  height: 4.3%;

  border-radius: 8%;

  opacity: 0.10;

  filter: brightness(0.35);
}

.meter-green {
  background: #37ff43;
}

.meter-yellow {
  background: #ffe627;
}

.meter-red {
  background: #ff2b22;
}

.meter-segment.meter-on {
  opacity: 0.98;

  filter:
    brightness(1.25)
    drop-shadow(
      0 0 0.22vw
      currentColor
    );
}

body:not(.playing)
.meter-segment {
  opacity: 0.07;
}


/* ==================================================
   POSITION CORRECTIONS - V2
   ================================================== */


/*
  LIVE BPM
  Align directly over the illustrated 120 display.
*/

.live-bpm {
  left: 20.75%;
  top: 19.65%;

  width: 4.30%;
  height: 4.30%;

  font-size:
    min(2.05vw, 3.65vh);

  border-radius: 0.2vw;
}


/*
  LIVE LEVEL METER
  Align directly over the 11 illustrated LEDs.
*/

.live-level-meter {
  left: 82.40%;
  top: 45.83%;

  width: 1.62%;
  height: 20.74%;

  padding: 0;

  justify-content: space-between;
}

.meter-segment {
  height: 7.1%;
  border-radius: 10%;
}


/* ==================================================
   PHYSICAL CONTROLS V1
   ================================================== */

.hardware-control {
  position: absolute;

  z-index: 30;

  margin: 0;
  padding: 0;

  border: 0;

  appearance: none;

  cursor: grab;

  touch-action: none;

  -webkit-tap-highlight-color:
    transparent;
}

.hardware-control:active {
  cursor: grabbing;
}

.hardware-control:focus-visible {
  outline:
    2px solid rgba(255,255,255,0.9);

  outline-offset: 3px;
}


/* --------------------------------------------------
   ROTARY KNOBS
-------------------------------------------------- */

.css-knob {
  --knob-angle: 0deg;

  aspect-ratio: 1;

  border-radius: 50%;

  transform:
    translate(-50%, -50%)
    rotate(var(--knob-angle));

  box-shadow:
    0 0.45vw 0.65vw
    rgba(0,0,0,0.65),
    inset 0 0 0 0.20vw
    rgba(0,0,0,0.72);
}


/*
  Temporary brushed-metal knob.
*/

.metal-knob {
  background:
    radial-gradient(
      circle at 38% 31%,
      #fff5dc 0%,
      #ddc8a8 18%,
      #bba27f 44%,
      #e6d2b4 67%,
      #8d775d 100%
    );

  border:
    0.18vw solid #111;
}


/*
  Pointer line.
*/

.metal-knob::after,
.dark-knob::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 7%;

  width: 8%;
  height: 38%;

  border-radius: 999px;

  transform:
    translateX(-50%);

  background: #111;

  box-shadow:
    0 0 0.10vw
    rgba(255,255,255,0.20);
}


/*
  BPM knob
*/

.bpm-rotary {
  left: 24.55%;
  top: 31.55%;

  width: 5.45%;
}


/*
  Pitch knob
*/

.pitch-rotary {
  left: 77.35%;
  top: 31.55%;

  width: 5.45%;
}


/*
  Change Loop knob
*/

.dark-knob {
  background:
    radial-gradient(
      circle at 38% 30%,
      #444 0%,
      #282828 28%,
      #111 67%,
      #050505 100%
    );

  border:
    0.18vw solid #050505;
}

.dark-knob::after {
  background: #e8e8e8;
}

.loop-selector-rotary {
  left: 34.15%;
  top: 86.60%;

  width: 4.55%;
}


/* --------------------------------------------------
   LIVE PITCH DISPLAY
-------------------------------------------------- */

.live-pitch {
  position: absolute;

  left: 74.20%;
  top: 19.65%;

  width: 6.00%;
  height: 4.30%;

  z-index: 20;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #030303;

  color: #ff1717;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  font-weight: 700;

  font-size:
    min(1.60vw, 2.9vh);

  line-height: 1;

  text-shadow:
    0 0 0.45vw
    rgba(255,0,0,0.8);

  pointer-events: none;
}


/* --------------------------------------------------
   LEVEL SLIDER
-------------------------------------------------- */

.level-slider-control {
  left: 79.55%;
  top: 47.3%;

  width: 3.15%;
  height: 15.7%;

  background: transparent;

  transform:
    translateX(-50%);

  overflow: visible;
}


.level-slider-handle {
  position: absolute;

  left: 50%;
  top: 18%;

  width: 100%;
  height: 18%;

  transform:
    translate(-50%, -50%);

  border:
    0.14vw solid #080808;

  border-radius: 0.25vw;

  background:
    linear-gradient(
      to bottom,
      #414141 0%,
      #222 42%,
      #777 48%,
      #333 55%,
      #151515 100%
    );

  box-shadow:
    0 0.25vw 0.35vw
    rgba(0,0,0,0.65);

  pointer-events: none;
}


/* Development positioning helper */

body.debug .hardware-control {
  outline:
    2px solid magenta;
}


/* ==================================================
   PHYSICAL CONTROL ALIGNMENT - V2
   ================================================== */

/*
  BPM knob
  Move left into the center of its recessed socket.
*/
.bpm-rotary {
  left: 21.21%;
  top: 31.55%;
}


/*
  PITCH knob
  Move slightly right into the center of its socket.
*/
.pitch-rotary {
  left: 78.82%;
  top: 31.55%;
}


/*
  CHANGE LOOP knob
  Move substantially left and slightly down.
*/
.loop-selector-rotary {
  left: 27.56%;
  top: 87.32%;
}


/*
  LEVEL is already centered correctly.
  Keep its present position.
*/


/* ==================================================
   BPM / PITCH NUDGE BUTTONS
   ================================================== */

.nudge-button {
  position: absolute;

  z-index: 35;

  padding: 0;
  margin: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}


/* BPM < */

.bpm-down-button {
  left: 17.52%;
  top: 24.35%;

  width: 3.1%;
  height: 5.8%;
}


/* BPM > */

.bpm-up-button {
  left: 25.85%;
  top: 24.35%;

  width: 3.1%;
  height: 5.8%;
}


/* PITCH < */

.pitch-down-button {
  left: 70.72%;
  top: 24.35%;

  width: 3.1%;
  height: 5.8%;
}


/* PITCH > */

.pitch-up-button {
  left: 79.80%;
  top: 24.35%;

  width: 3.1%;
  height: 5.8%;
}


body.debug .nudge-button {
  background:
    rgba(255,0,255,0.25);

  outline:
    2px solid magenta;
}


/* ==================================================
   SYSTEM / GEAR MENU
   ================================================== */

.settings-button {
  left: 67.1%;
  top: 82.0%;

  width: 6.2%;
  height: 11.2%;

  border-radius: 50%;

  z-index: 35;
}


.system-menu {
  position: absolute;

  inset: 0;

  z-index: 100;

  display: grid;
  place-items: center;

  background:
    rgba(0,0,0,0.58);
}


.system-menu[hidden] {
  display: none;
}


.system-menu-panel {
  width: 31%;

  padding: 1.4%;

  border:
    0.16vw solid
    #34793e;

  border-radius: 0.65vw;

  background:
    linear-gradient(
      180deg,
      #071008,
      #020502
    );

  box-shadow:
    0 0 1.5vw
    rgba(0,0,0,0.85),
    inset 0 0 1vw
    rgba(60,255,90,0.05);

  font-family:
    "Courier New",
    ui-monospace,
    monospace;
}


.system-menu-title {
  margin-bottom: 5%;

  color: #72ff7c;

  text-align: center;

  font-size:
    min(1.25vw, 2.3vh);

  font-weight: 700;

  letter-spacing: 0.08em;
}


.system-menu-item {
  display: block;

  width: 100%;

  margin-top: 3%;

  padding: 4%;

  border:
    0.1vw solid
    #255d2d;

  border-radius: 0.35vw;

  background: #081109;

  color: #68ff78;

  text-decoration: none;

  text-align: center;

  font-family: inherit;

  font-size:
    min(0.95vw, 1.7vh);

  cursor: pointer;
}


.system-menu-item:hover,
.system-menu-item:focus-visible {
  background: #123018;

  outline: none;
}


.system-menu-close {
  appearance: none;
}


/* ==================================================
   MODE CONTROLS
   ================================================== */

.mode-control {
  position: absolute;

  z-index: 40;

  margin: 0;
  padding: 0;

  border: 0;

  border-radius: 10%;

  background: transparent;

  appearance: none;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;
}


.speed-booster-control {
  left: 14.45%;
  top: 45.45%;

  width: 6.15%;
  height: 7.55%;
}


.one-shot-control {
  left: 14.45%;
  top: 53.45%;

  width: 6.15%;
  height: 6.15%;
}


.reverse-control {
  left: 14.45%;
  top: 60.15%;

  width: 6.15%;
  height: 6.15%;
}


/*
  Sticky-state glow.
*/

.mode-control.is-active {
  box-shadow:
    0 0 0.55vw
    rgba(255,55,25,0.95),
    inset 0 0 0.65vw
    rgba(255,65,35,0.58);
}


.mode-control:focus-visible {
  outline:
    2px solid rgba(255,255,255,0.95);

  outline-offset: 2px;
}


body.debug .mode-control {
  background:
    rgba(255,0,255,0.22);

  outline:
    2px solid magenta;
}


/* ==================================================
   FINAL SYSTEM MENU DETAILS
   ================================================== */

.sphire-powered {
  margin-top: 6%;
  padding-top: 4%;

  border-top:
    1px solid
    rgba(80,255,100,0.22);

  color:
    rgba(105,255,120,0.65);

  text-align: center;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  font-size:
    min(0.68vw, 1.25vh);

  letter-spacing: 0.18em;
}


/* ==================================================
   HITBOX ALIGNMENT - FINAL PASS
   Based on 1920x1080 chassis geometry
   ================================================== */


/* --------------------------------------------------
   BOTTOM TRANSPORT ARROWS
-------------------------------------------------- */

/* LEFT ARROW — restart current beat */
.previous-button {
  left: 19.15%;
  top: 84.05%;

  width: 4.15%;
  height: 7.25%;

  border-radius: 50%;
}


/* RIGHT ARROW — next beat */
.next-button {
  left: 76.70%;
  top: 84.05%;

  width: 4.15%;
  height: 7.25%;

  border-radius: 50%;
}


/* --------------------------------------------------
   MAIN TRANSPORT BUTTONS
-------------------------------------------------- */

.play-button {
  left: 33.55%;
  top: 77.25%;

  width: 10.35%;
  height: 15.55%;
}


.stop-button {
  left: 44.75%;
  top: 77.25%;

  width: 10.35%;
  height: 15.55%;
}


.loop-button {
  left: 56.05%;
  top: 77.25%;

  width: 10.35%;
  height: 15.55%;
}


/* --------------------------------------------------
   GEAR
-------------------------------------------------- */

.settings-button {
  left: 68.65%;
  top: 81.20%;

  width: 7.00%;
  height: 11.75%;

  border-radius: 50%;
}


/* --------------------------------------------------
   MODE BUTTONS
-------------------------------------------------- */

.speed-booster-control {
  left: 16.30%;
  top: 46.15%;

  width: 6.05%;
  height: 6.95%;
}


.one-shot-control {
  left: 16.30%;
  top: 53.95%;

  width: 6.05%;
  height: 5.95%;
}


.reverse-control {
  left: 16.30%;
  top: 60.45%;

  width: 6.05%;
  height: 5.95%;
}


/* --------------------------------------------------
   BPM ARROWS
-------------------------------------------------- */

.bpm-down-button {
  left: 17.15%;
  top: 19.55%;

  width: 2.35%;
  height: 4.85%;
}


.bpm-up-button {
  left: 25.75%;
  top: 19.55%;

  width: 2.35%;
  height: 4.85%;
}


/* --------------------------------------------------
   PITCH ARROWS
-------------------------------------------------- */

.pitch-down-button {
  left: 70.75%;
  top: 19.55%;

  width: 2.35%;
  height: 4.85%;
}


.pitch-up-button {
  left: 79.55%;
  top: 19.55%;

  width: 2.35%;
  height: 4.85%;
}


/* ==================================================
   HITBOX GEOMETRY V3
   Measured against current Superseal chassis
   ================================================== */


/* --------------------------------------------------
   FINAL BOTTOM ARROWS
-------------------------------------------------- */

.final-transport-arrow {
  position: absolute;

  z-index: 55;

  margin: 0;
  padding: 0;

  border: 0;

  border-radius: 50%;

  background: transparent;

  appearance: none;

  cursor: pointer;

  touch-action: manipulation;

  -webkit-tap-highlight-color:
    transparent;
}


/* Actual painted LEFT arrow */

.restart-arrow-button {
  left: 19.05%;
  top: 81.45%;

  width: 5.20%;
  height: 9.55%;
}


/* Actual painted RIGHT arrow */

.next-arrow-button {
  left: 75.80%;
  top: 81.45%;

  width: 5.20%;
  height: 9.55%;
}


/* --------------------------------------------------
   BPM < >
-------------------------------------------------- */

.bpm-down-button {
  left: 16.50%;
  top: 18.60%;

  width: 3.40%;
  height: 6.00%;
}


.bpm-up-button {
  left: 25.35%;
  top: 18.60%;

  width: 3.40%;
  height: 6.00%;
}


/* --------------------------------------------------
   PITCH < >
-------------------------------------------------- */

.pitch-down-button {
  left: 71.25%;
  top: 18.60%;

  width: 3.40%;
  height: 6.00%;
}


.pitch-up-button {
  left: 80.05%;
  top: 18.60%;

  width: 3.40%;
  height: 6.00%;
}


/* --------------------------------------------------
   GEAR
-------------------------------------------------- */

.settings-button {
  left: 67.20%;
  top: 80.40%;

  width: 7.10%;
  height: 12.20%;

  border-radius: 50%;
}


/* --------------------------------------------------
   STICKY MODE LEDs

   These sit directly over the little indicator dots
   already illustrated on the buttons.
-------------------------------------------------- */

.mode-control::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 8%;

  width: 9%;
  aspect-ratio: 1;

  transform:
    translateX(-50%);

  border-radius: 50%;

  background: #260806;

  box-shadow:
    inset 0 0 0.08vw
    rgba(0,0,0,0.9);

  pointer-events: none;
}


/* Speed Booster + Reverse sticky ON */

.mode-control.is-active::after {
  background: #ff2418;

  box-shadow:
    0 0 0.18vw #ff2418,
    0 0 0.45vw rgba(255,36,24,0.9),
    0 0 0.85vw rgba(255,36,24,0.45);
}


/* One Shot is momentary */

.mode-control.is-triggered::after {
  background: #ff2418;

  box-shadow:
    0 0 0.18vw #ff2418,
    0 0 0.45vw rgba(255,36,24,0.9),
    0 0 0.85vw rgba(255,36,24,0.45);
}


/* --------------------------------------------------
   DEBUG

   D now clearly shows the NEW transport arrows too.
-------------------------------------------------- */

body.debug .final-transport-arrow {
  background:
    rgba(0,255,255,0.22);

  outline:
    2px solid cyan;
}


/* ==================================================
   TRANSPORT HITBOX ALIGNMENT V4
   Measured from current 1920x1080 chassis
   ================================================== */


/* Retired legacy previous/next controls should not
   clutter the D debug view anymore. */

.previous-button,
.next-button {
  pointer-events: none !important;
}

body.debug .previous-button,
body.debug .next-button {
  outline: none !important;
  background: transparent !important;
}


/* --------------------------------------------------
   LEFT ARROW
   Restart current beat
-------------------------------------------------- */

.restart-arrow-button {
  left: 19.15%;
  top: 83.60%;

  width: 4.00%;
  height: 7.00%;

  border-radius: 50%;
}


/* --------------------------------------------------
   RIGHT ARROW
   Next beat + immediately play
-------------------------------------------------- */

.next-arrow-button {
  left: 76.75%;
  top: 83.60%;

  width: 4.00%;
  height: 7.00%;

  border-radius: 50%;
}


/* --------------------------------------------------
   GEAR
   Small vertical correction from latest screenshot
-------------------------------------------------- */

.settings-button {
  left: 67.20%;
  top: 81.85%;

  width: 7.10%;
  height: 12.20%;

  border-radius: 50%;
}


/* ==================================================
   HIDE RETIRED CHANGE LOOP HOTSPOT
   ================================================== */

.change-loop-button {
  pointer-events: none !important;
}

body.debug .change-loop-button {
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}


/* ==================================================
   FLOATING FULLSCREEN CONTROL
   ================================================== */

.fullscreen-control {
  position: fixed;

  top:
    max(
      12px,
      env(safe-area-inset-top)
    );

  right:
    max(
      12px,
      env(safe-area-inset-right)
    );

  z-index: 1000;

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  border:
    1px solid
    rgba(110,255,125,0.5);

  border-radius: 50%;

  background:
    rgba(2,10,3,0.72);

  color: #78ff83;

  font-family:
    Arial,
    sans-serif;

  font-size: 25px;
  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 0 12px
    rgba(0,0,0,0.65);

  opacity: 0.68;

  transition:
    opacity 120ms ease,
    background 120ms ease,
    transform 120ms ease;

  -webkit-tap-highlight-color:
    transparent;
}


.fullscreen-control:hover,
.fullscreen-control:focus-visible {
  opacity: 1;

  background:
    rgba(8,32,12,0.92);

  transform:
    scale(1.06);

  outline: none;
}


.fullscreen-active
.fullscreen-control {
  opacity: 0.42;
}


.fullscreen-active
.fullscreen-control:hover {
  opacity: 1;
}


/* ==================================================
   TRUE FULLSCREEN LAYOUT
   ================================================== */

html:fullscreen,
html:fullscreen body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  background: #000;

  overflow: hidden;
}


html:fullscreen body {
  display: flex;

  align-items: center;
  justify-content: center;
}


/*
  Safari/WebKit compatibility.
*/

html:-webkit-full-screen,
html:-webkit-full-screen body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  background: #000;

  overflow: hidden;
}


/* ==================================================
   GEAR HITBOX - FINAL ALIGNMENT
   ================================================== */

.settings-button {
  left: 68.65%;
  top: 80.35%;

  width: 6.80%;
  height: 12.05%;

  border-radius: 50%;
}


/* ==================================================
   GEAR HITBOX - FINAL ALIGNMENT
   ================================================== */

.settings-button {
  left: 68.65%;
  top: 80.35%;

  width: 6.80%;
  height: 12.05%;

  border-radius: 50%;
}


/* ==================================================
   OCTAGON / SKRATCHY MODE FLIP SWITCH
   ================================================== */

.octagon-mode-switch {
  position: absolute;

  /*
    Upper-right red field.
    Large enough to read without covering the deck.
  */

  right: 2.25%;
  top: 5.25%;

  z-index: 45;

  width: 20.5%;
  height: 8.2%;

  display: grid;

  grid-template-columns:
    1fr 25% 1fr;

  align-items: center;

  gap: 3%;

  padding:
    0.55%
    0.75%;

  border:
    0.16vw solid #111;

  border-radius:
    0.8vw;

  background:
    linear-gradient(
      to bottom,
      #242424,
      #070707
    );

  box-shadow:
    0 0.35vw 0.7vw
    rgba(0,0,0,0.62),
    inset 0 0 0.25vw
    rgba(255,255,255,0.12);

  color: white;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  cursor: pointer;

  appearance: none;

  -webkit-tap-highlight-color:
    transparent;
}


.mode-choice {
  display: flex;

  align-items: center;
  justify-content: center;

  height: 100%;

  text-align: center;

  font-size:
    min(0.74vw, 1.35vh);

  font-weight: 700;

  line-height: 1.07;

  letter-spacing:
    0.015em;

  opacity: 0.38;

  transition:
    opacity 140ms ease,
    text-shadow 140ms ease;
}


.mode-choice-loop {
  opacity: 1;

  color: #70ff7b;

  text-shadow:
    0 0 0.35vw
    rgba(75,255,90,0.55);
}


.octagon-mode-switch.is-octagon
.mode-choice-octagon {
  opacity: 1;

  color: #ffb51c;

  text-shadow:
    0 0 0.35vw
    rgba(255,170,20,0.60);
}


.octagon-mode-switch.is-octagon
.mode-choice-loop {
  opacity: 0.38;

  color: white;

  text-shadow: none;
}


/* --------------------------------------------------
   PHYSICAL FLIP TRACK
-------------------------------------------------- */

.mode-switch-track {
  position: relative;

  display: block;

  width: 100%;
  height: 44%;

  border:
    0.12vw solid
    #050505;

  border-radius:
    999px;

  background:
    #171717;

  box-shadow:
    inset 0 0.15vw 0.4vw
    rgba(0,0,0,0.9);
}


.mode-switch-handle {
  position: absolute;

  top: 50%;
  right: 5%;

  width: 43%;
  aspect-ratio: 1;

  transform:
    translateY(-50%);

  border:
    0.10vw solid
    #050505;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #f5e3c5,
      #aa9475 55%,
      #514536 100%
    );

  box-shadow:
    0 0.15vw 0.25vw
    rgba(0,0,0,0.8);

  transition:
    right 170ms ease;
}


/*
  OCTAGON = handle flips to left.
*/

.octagon-mode-switch.is-octagon
.mode-switch-handle {
  right: 52%;
}


/* --------------------------------------------------
   OCTAGON ACTIVE INDICATOR
-------------------------------------------------- */

.octagon-mode-switch::after {
  content: "";

  position: absolute;

  top: 9%;
  left: 3%;

  width: 2.3%;
  aspect-ratio: 1;

  border-radius: 50%;

  background: #351000;

  box-shadow:
    inset 0 0 0.08vw #000;
}


.octagon-mode-switch.is-octagon::after {
  background: #ff8c00;

  box-shadow:
    0 0 0.2vw #ff8c00,
    0 0 0.55vw
    rgba(255,140,0,0.9);
}


/* --------------------------------------------------
   DEBUG
-------------------------------------------------- */

body.debug
.octagon-mode-switch {
  outline:
    2px solid orange;
}


/* ==================================================
   OCTAGON MODE SWITCH - COMPACT FINAL SIZE
   ================================================== */

.octagon-mode-switch {
  right: 3.15%;
  top: 11.15%;

  width: 15.25%;
  height: 5.65%;

  grid-template-columns:
    1fr 22% 1fr;

  gap: 2%;

  padding:
    0.30%
    0.45%;

  border-radius:
    0.55vw;
}


.mode-choice {
  font-size:
    min(0.57vw, 1.02vh);

  line-height: 1.02;

  letter-spacing:
    0.01em;
}


/* Slightly smaller switch hardware */

.mode-switch-track {
  height: 40%;
}


.mode-switch-handle {
  width: 39%;
}


.octagon-mode-switch.is-octagon
.mode-switch-handle {
  right: 56%;
}


/* Smaller indicator light */

.octagon-mode-switch::after {
  top: 10%;
  left: 3%;

  width: 2%;
}


/* ==================================================
   QBERT PERFORMANCE UPDATE
   ================================================== */


/* --------------------------------------------------
   Reverse captured-sample pad
-------------------------------------------------- */

.reverse-sample-button {
  position: absolute;

  left: 30.55%;
  top: 83.35%;

  z-index: 58;

  width: 3.35%;
  aspect-ratio: 1;

  padding: 0;
  margin: 0;

  border:
    0.14vw solid #090909;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 36% 30%,
      #3d3d3d,
      #121212 58%,
      #040404
    );

  color: #dedede;

  font-size:
    min(1.45vw, 2.55vh);

  font-weight: 800;

  line-height: 1;

  cursor: pointer;

  box-shadow:
    0 0.25vw 0.38vw
    rgba(0,0,0,0.65);

  opacity: 0.72;

  -webkit-tap-highlight-color:
    transparent;
}


.reverse-sample-button.sampler-armed {
  opacity: 1;

  color: #73ff83;

  box-shadow:
    0 0 0.45vw
      rgba(70,255,95,0.55),
    0 0.25vw 0.38vw
      rgba(0,0,0,0.65);
}


body.debug
.reverse-sample-button {
  outline:
    2px solid cyan;
}


/* --------------------------------------------------
   PLAY sampler armed state
-------------------------------------------------- */

.play-button.sampler-armed {
  box-shadow:
    inset 0 0 0.7vw
      rgba(65,255,85,0.20),
    0 0 0.38vw
      rgba(65,255,85,0.35);
}


/* --------------------------------------------------
   Current-track Favorite heart
-------------------------------------------------- */

.favorite-current-button {
  position: absolute;

  left: 61.35%;
  bottom: 1.12%;

  z-index: 48;

  width: 2.35%;
  height: 4.25%;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color: #174820;

  font-size:
    min(1.18vw, 2.05vh);

  line-height: 1;

  cursor: pointer;

  transition:
    color 100ms ease,
    text-shadow 100ms ease,
    transform 100ms ease;
}


.favorite-current-button:hover {
  transform:
    scale(1.12);
}


.favorite-current-button.is-favorite {
  color: #62ff78;

  text-shadow:
    0 0 0.35vw
    rgba(70,255,90,0.72);
}


/* --------------------------------------------------
   Octagon Reverse unavailable
-------------------------------------------------- */

.reverse-control.is-unavailable,
.reverse-control:disabled {
  cursor: not-allowed;

  opacity: 0.43;

  box-shadow: none !important;
}


/* --------------------------------------------------
   Search + Favorites Crates
-------------------------------------------------- */

.crate-overlay {
  position: absolute;

  inset: 0;

  z-index: 150;

  display: grid;
  place-items: center;

  background:
    rgba(0,0,0,0.68);
}


.crate-overlay[hidden] {
  display: none;
}


.crate-panel {
  width: 48%;
  height: 65%;

  display: flex;
  flex-direction: column;

  padding: 1.3%;

  border:
    0.16vw solid #34793e;

  border-radius: 0.7vw;

  background:
    linear-gradient(
      180deg,
      #061008,
      #010401
    );

  box-shadow:
    0 0 2vw
    rgba(0,0,0,0.9),
    inset 0 0 1vw
    rgba(60,255,90,0.04);

  font-family:
    "Courier New",
    ui-monospace,
    monospace;
}


.crate-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 2%;
}


.crate-title {
  color: #72ff7c;

  font-size:
    min(1.25vw, 2.25vh);

  font-weight: 800;

  letter-spacing: 0.08em;
}


.crate-close {
  width: 7%;
  aspect-ratio: 1;

  border:
    0.08vw solid #2d6835;

  border-radius: 50%;

  background: #071009;

  color: #70ff7d;

  font-size:
    min(1.5vw, 2.7vh);

  cursor: pointer;
}


.crate-tabs {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 1.5%;

  margin-bottom: 2%;
}


.crate-tab {
  padding: 2.1%;

  border:
    0.08vw solid #275b2d;

  border-radius: 0.32vw;

  background: #071008;

  color: #2d7838;

  font-family: inherit;

  font-weight: 800;

  cursor: pointer;
}


.crate-tab.is-active {
  color: #6fff7b;

  background: #102d15;

  box-shadow:
    inset 0 0 0.5vw
    rgba(60,255,80,0.08);
}


.crate-search-input {
  width: 100%;

  box-sizing: border-box;

  margin-bottom: 2%;

  padding: 2%;

  border:
    0.08vw solid #34793e;

  border-radius: 0.32vw;

  outline: none;

  background: #010401;

  color: #70ff7d;

  font-family: inherit;

  font-size:
    min(0.92vw, 1.65vh);
}


.crate-search-input::placeholder {
  color: #296533;
}


.crate-results {
  flex: 1;

  overflow-y: auto;

  border-top:
    1px solid
    rgba(70,255,90,0.16);
}


.crate-result {
  display: grid;

  grid-template-columns:
    1fr 9%;

  gap: 1%;

  align-items: center;

  border-bottom:
    1px solid
    rgba(70,255,90,0.12);
}


.crate-result-info {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  padding: 2%;

  border: 0;

  background: transparent;

  color: #65ff75;

  font-family: inherit;

  text-align: left;

  cursor: pointer;
}


.crate-result-info strong {
  font-size:
    min(0.82vw, 1.5vh);
}


.crate-result-info span {
  margin-top: 0.4%;

  color: #319840;

  font-size:
    min(0.59vw, 1.05vh);
}


.crate-result-info:hover {
  background:
    rgba(55,255,75,0.07);
}


.crate-favorite {
  border: 0;

  background: transparent;

  color: #58ff6d;

  font-size:
    min(1.35vw, 2.4vh);

  cursor: pointer;
}


.crate-empty {
  padding: 8%;

  color: #368343;

  text-align: center;

  font-size:
    min(0.75vw, 1.4vh);
}


.system-menu-note {
  margin-top: 3%;
  padding: 3%;

  border:
    1px solid
    rgba(255,170,40,0.22);

  border-radius: 0.3vw;

  color:
    rgba(255,190,70,0.76);

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  font-size:
    min(0.63vw, 1.12vh);

  line-height: 1.25;

  text-align: center;
}



/* ==================================================
   QBERT PERFORMANCE POLISH V2
   ================================================== */


/* --------------------------------------------------
   Floating REV SAMPLE performance pad
   -------------------------------------------------- */

.reverse-sample-button {
  /*
    Float completely outside the transport section.
  */

  left: 2.5% !important;
  bottom: 11.0% !important;

  top: auto !important;

  width: 8.25% !important;
  height: 7.4% !important;

  aspect-ratio: auto !important;

  z-index: 70;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 2%;

  border:
    0.15vw solid
    #121212;

  border-radius:
    0.65vw;

  background:
    linear-gradient(
      180deg,
      #282828,
      #080808
    );

  color: #858585;

  box-shadow:
    0 0.35vw 0.65vw
    rgba(0,0,0,0.65);

  opacity: 1;
}


.reverse-sample-icon {
  display: block;

  font-size:
    min(1.65vw, 3vh);

  line-height: 0.9;
}


.reverse-sample-label {
  display: block;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  font-size:
    min(0.60vw, 1.08vh);

  font-weight: 800;

  letter-spacing:
    0.06em;

  line-height: 1;
}


/*
  Loaded/armed = obvious red illuminated sampler pad.
*/

.reverse-sample-button.sampler-armed {
  border-color:
    #ff3b25;

  background:
    radial-gradient(
      circle at 50% 42%,
      #ff5c45 0%,
      #dc1e11 48%,
      #620900 100%
    );

  color: white;

  text-shadow:
    0 0 0.3vw
    rgba(255,255,255,0.8);

  box-shadow:
    0 0 0.35vw
    #ff2918,
    0 0 0.9vw
    rgba(255,40,20,0.72),
    0 0.35vw 0.65vw
    rgba(0,0,0,0.75);
}


/*
  Put debug box around the new, intentional position.
*/

body.debug
.reverse-sample-button {
  outline:
    2px solid cyan;
}


/* --------------------------------------------------
   HOTKEY MAP
   -------------------------------------------------- */

.hotkey-overlay {
  position: absolute;

  inset: 0;

  z-index: 180;

  display: grid;

  place-items: center;

  background:
    rgba(0,0,0,0.70);
}


.hotkey-overlay[hidden] {
  display: none;
}


.hotkey-panel {
  width: 39%;

  padding: 1.45%;

  border:
    0.15vw solid #367b3e;

  border-radius:
    0.65vw;

  background:
    linear-gradient(
      180deg,
      #061008,
      #010401
    );

  color: #6fff7b;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  box-shadow:
    0 0 2vw
    rgba(0,0,0,0.92);
}


.hotkey-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 5%;

  font-size:
    min(1.12vw, 2vh);

  font-weight: 800;

  letter-spacing:
    0.08em;
}


.hotkey-close {
  width: 9%;
  aspect-ratio: 1;

  border:
    1px solid #34793e;

  border-radius: 50%;

  background: #071009;

  color: #70ff7d;

  font-size:
    min(1.4vw, 2.5vh);

  cursor: pointer;
}


.hotkey-grid {
  display: grid;

  grid-template-columns:
    27% 1fr;

  align-items: center;

  gap:
    0.65vw
    1vw;

  font-size:
    min(0.77vw, 1.4vh);
}


.hotkey-grid kbd {
  display: block;

  padding: 5%;

  border:
    1px solid #34793e;

  border-radius:
    0.26vw;

  background: #0b180d;

  color: #a1ffab;

  text-align: center;

  font-family: inherit;

  font-weight: 800;

  box-shadow:
    inset 0 -0.14vw 0
    rgba(0,0,0,0.55);
}


.hotkey-note {
  margin-top: 6%;

  padding-top: 4%;

  border-top:
    1px solid
    rgba(255,170,30,0.22);

  color:
    rgba(255,185,70,0.78);

  font-size:
    min(0.62vw, 1.1vh);

  line-height: 1.3;

  text-align: center;
}


/* ==================================================
   SUPERSEAL PRODUCT UI V3
   ================================================== */


/* --------------------------------------------------
   Bottom green utility-bar extension
   -------------------------------------------------- */

.superseal-utility-dock {
  position: absolute;

  left: 72.2%;
  bottom: 1.05%;

  z-index: 62;

  width: 25.2%;
  height: 5.55%;

  display: grid;

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

  gap: 0.35%;

  padding: 0.25%;

  box-sizing: border-box;

  border:
    1px solid #145c23;

  border-radius:
    0 0.3vw 0.3vw 0;

  background:
    linear-gradient(
      180deg,
      #07170a,
      #010602
    );

  box-shadow:
    0 0 0.45vw
    rgba(0,0,0,0.65);
}


.superseal-utility-dock button {
  min-width: 0;

  padding: 0 2%;

  border:
    1px solid
    rgba(75,255,95,0.22);

  border-radius:
    0.18vw;

  background:
    rgba(10,38,14,0.76);

  color: #5cff70;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  font-size:
    min(0.49vw, 0.88vh);

  font-weight: 800;

  line-height: 1;

  cursor: pointer;

  overflow: hidden;

  text-overflow: ellipsis;
}


.superseal-utility-dock button:hover {
  background:
    rgba(35,105,45,0.72);

  color: #a5ffae;
}


.superseal-utility-dock
.account-tool {
  border-color:
    rgba(255,185,50,0.42);

  color: #ffc660;
}


.superseal-utility-dock
.account-tool.is-signed-in {
  border-color:
    rgba(70,255,95,0.52);

  color: #76ff85;
}


/* --------------------------------------------------
   README
   -------------------------------------------------- */

.readme-overlay,
.profile-overlay {
  position: absolute;

  inset: 0;

  z-index: 220;

  display: grid;

  place-items: center;

  background:
    rgba(0,0,0,0.76);
}


.readme-overlay[hidden],
.profile-overlay[hidden] {
  display: none;
}


.readme-panel {
  width: 61%;
  height: 78%;

  display: flex;
  flex-direction: column;

  padding: 1.4%;

  box-sizing: border-box;

  border:
    0.15vw solid #347b3e;

  border-radius:
    0.65vw;

  background:
    linear-gradient(
      180deg,
      #061008,
      #010401
    );

  box-shadow:
    0 0 2vw
    rgba(0,0,0,0.94);

  color: #70ff7d;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;
}


.readme-header,
.profile-header {
  display: flex;

  justify-content: space-between;
  align-items: center;

  margin-bottom: 3%;

  font-size:
    min(1.15vw, 2.05vh);

  font-weight: 800;

  letter-spacing:
    0.08em;
}


.readme-close,
.profile-close {
  width: 6%;
  aspect-ratio: 1;

  border:
    1px solid #347b3e;

  border-radius: 50%;

  background: #071009;

  color: #70ff7d;

  cursor: pointer;
}


.readme-content {
  flex: 1;

  overflow-y: auto;

  padding-right: 2%;

  color: #8dda94;

  font-size:
    min(0.69vw, 1.28vh);

  line-height: 1.55;
}


.readme-content h2 {
  margin:
    4% 0 1.2%;

  color: #71ff7e;

  font-size:
    min(0.82vw, 1.5vh);

  letter-spacing:
    0.06em;
}


.readme-content h2:first-child {
  margin-top: 0;
}


.readme-warning {
  margin: 2% 0;

  padding: 2%;

  border:
    1px solid
    rgba(255,180,50,0.28);

  border-radius:
    0.28vw;

  color: #ffc15a;

  background:
    rgba(85,48,4,0.19);
}


.readme-powered {
  margin-top: 6%;

  padding-top: 3%;

  border-top:
    1px solid
    rgba(70,255,90,0.20);

  color: #4fbf5d;

  text-align: center;

  letter-spacing: 0.2em;
}


/* --------------------------------------------------
   Profile
   -------------------------------------------------- */

.profile-panel {
  width: 34%;

  padding: 1.5%;

  box-sizing: border-box;

  border:
    0.15vw solid #347b3e;

  border-radius:
    0.65vw;

  background:
    linear-gradient(
      180deg,
      #061008,
      #010401
    );

  color: #70ff7d;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  box-shadow:
    0 0 2vw
    rgba(0,0,0,0.94);
}


.profile-user {
  margin: 4% 0;

  color: #a0ffaa;

  text-align: center;

  font-size:
    min(0.9vw, 1.6vh);

  font-weight: 800;
}


.profile-sync,
.profile-reset-note {
  margin: 3% 0;

  color: #58a963;

  text-align: center;

  font-size:
    min(0.61vw, 1.1vh);

  line-height: 1.35;
}


.profile-reset,
.profile-signout {
  width: 100%;

  margin-top: 3%;

  padding: 3%;

  border:
    1px solid #347b3e;

  border-radius:
    0.28vw;

  background: #071009;

  color: #70ff7d;

  font-family: inherit;

  cursor: pointer;
}


.profile-reset {
  border-color:
    rgba(255,180,50,0.42);

  color: #ffc35a;
}


/* ==================================================
   SUPERSEAL PRODUCT UI V4
   FLOATING CRATES / ACCOUNT PANEL
   ================================================== */

.superseal-utility-dock {
  /*
    Get completely off the rating strip.
  */

  left: auto !important;
  right: 2.15% !important;

  bottom: 7.0% !important;

  width: 10.75% !important;
  height: 20.5% !important;

  display: grid !important;

  grid-template-columns:
    1fr !important;

  grid-template-rows:
    0.65fr
    1fr
    1fr
    1fr
    1fr !important;

  gap: 2.5% !important;

  padding: 0.45% !important;

  border-radius:
    0.55vw !important;

  background:
    linear-gradient(
      180deg,
      rgba(6,22,9,0.96),
      rgba(1,7,2,0.96)
    ) !important;

  box-shadow:
    0 0.4vw 0.8vw
    rgba(0,0,0,0.72) !important;
}


/* --------------------------------------------------
   CRATES header
-------------------------------------------------- */

.utility-dock-title {
  display: flex;

  align-items: center;
  justify-content: center;

  color: #65ff76;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  font-size:
    min(0.62vw, 1.1vh);

  font-weight: 800;

  letter-spacing:
    0.14em;

  line-height: 1;

  text-shadow:
    0 0 0.25vw
    rgba(60,255,80,0.42);
}


/* --------------------------------------------------
   Floating panel buttons
-------------------------------------------------- */

.superseal-utility-dock
button {
  width: 100% !important;
  height: 100% !important;

  min-width: 0;

  padding: 0 4% !important;

  border:
    1px solid
    rgba(70,255,90,0.28) !important;

  border-radius:
    0.25vw !important;

  background:
    rgba(10,38,14,0.82) !important;

  color:
    #68ff78 !important;

  font-size:
    min(0.57vw, 1.02vh) !important;

  font-weight: 800 !important;

  line-height: 1 !important;

  text-align: center;
}


/* --------------------------------------------------
   Current beat favorite now behaves like a dock button
-------------------------------------------------- */

.superseal-utility-dock
.favorite-current-button {
  position: static !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  width: 100% !important;
  height: 100% !important;

  transform: none !important;

  font-size:
    min(0.55vw, 0.98vh) !important;

  text-shadow: none;
}


.superseal-utility-dock
.favorite-current-button.is-favorite {
  border-color:
    rgba(255,80,65,0.62) !important;

  background:
    rgba(110,12,8,0.84) !important;

  color:
    #ff786c !important;

  box-shadow:
    inset 0 0 0.35vw
    rgba(255,50,35,0.14);
}


/* --------------------------------------------------
   Sign In / Profile should be the strongest control
-------------------------------------------------- */

.superseal-utility-dock
.account-tool {
  border-color:
    rgba(255,190,55,0.62) !important;

  color:
    #ffd06a !important;

  background:
    rgba(66,42,5,0.82) !important;
}


.superseal-utility-dock
.account-tool.is-signed-in {
  border-color:
    rgba(70,255,95,0.58) !important;

  color:
    #8cff99 !important;

  background:
    rgba(12,62,20,0.84) !important;
}


/* --------------------------------------------------
   README and old Hotkeys are no longer dock controls
-------------------------------------------------- */

.superseal-utility-dock
[data-tool="readme"],
.superseal-utility-dock
[data-tool="hotkeys"] {
  display: none !important;
}


/* --------------------------------------------------
   Give rating area its full width back
-------------------------------------------------- */

.rating,
.rating-stars,
.stars,
.star-rating {
  overflow: visible !important;
}


/* ==================================================
   SUPERSEAL PRODUCT UI V5
   AUTH STATUS
   ================================================== */

.superseal-utility-dock {
  grid-template-rows:
    0.95fr
    1fr
    1fr
    1fr
    1fr !important;
}


.utility-dock-title {
  flex-direction: column;

  gap: 9%;

  line-height: 1;
}


.utility-dock-heading {
  color: #68ff78;

  font-size:
    min(0.58vw, 1.05vh);

  font-weight: 800;

  letter-spacing:
    0.14em;
}


.utility-auth-status {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 5%;

  color: #607565;

  font-size:
    min(0.40vw, 0.74vh);

  font-weight: 800;

  letter-spacing:
    0.035em;

  white-space: nowrap;
}


.utility-auth-led {
  width: 0.42vw;
  height: 0.42vw;

  min-width: 5px;
  min-height: 5px;

  border-radius: 50%;

  background: #351010;

  box-shadow:
    inset 0 0 0.08vw
    rgba(0,0,0,0.9);
}


.superseal-utility-dock.is-authenticated
.utility-auth-status {
  color: #84ff91;
}


.superseal-utility-dock.is-authenticated
.utility-auth-led {
  background: #43ff59;

  box-shadow:
    0 0 0.18vw #43ff59,
    0 0 0.45vw
    rgba(60,255,80,0.75);
}


/* ==================================================
   SUPERSEAL PRODUCT UI V6
   ================================================== */


/* --------------------------------------------------
   Crate rating controls
-------------------------------------------------- */

.crate-rating-tools {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 1.5%;

  margin-bottom: 2%;
}


.crate-rating-tools select {
  width: 100%;

  padding: 2.4%;

  border:
    1px solid #34793e;

  border-radius:
    0.28vw;

  outline: none;

  background: #071009;

  color: #6fff7b;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  font-size:
    min(0.64vw, 1.16vh);

  cursor: pointer;
}


.crate-personal-rating {
  margin-top: 1% !important;

  color: #73ff80 !important;

  letter-spacing:
    0.08em;
}


/* --------------------------------------------------
   Skratchy's nose Easter egg
-------------------------------------------------- */

.seal-nose-easter-egg {
  position: absolute;

  /*
    Invisible hotspot over Skratchy's black nose.
  */

  left: 57.7%;
  top: 19.0%;

  z-index: 56;

  width: 4.15%;
  height: 5.55%;

  margin: 0;
  padding: 0;

  border: 0;

  border-radius:
    52% 48% 58% 54%;

  transform:
    rotate(-4deg);

  background: transparent;

  cursor: pointer;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    background 180ms ease,
    box-shadow 180ms ease;
}


/*
  We cannot recolor the baked-in nose itself, so the
  active state lays a subtle red tint over it.
*/

.seal-nose-easter-egg.is-active {
  background:
    rgba(185,18,14,0.26);

  box-shadow:
    inset 0 0 0.8vw
    rgba(255,55,35,0.25),
    0 0 0.4vw
    rgba(255,35,20,0.24);

  mix-blend-mode:
    multiply;
}


/* --------------------------------------------------
   Hide only the dynamic reel artwork
-------------------------------------------------- */

.machine.reels-hidden-by-nose
.reel,
.reels-hidden-by-nose
.reel {
  opacity: 0 !important;

  transition:
    opacity 260ms ease;
}


/*
  Normal state also fades back in nicely.
*/

.reel {
  transition:
    opacity 260ms ease;
}


/*
  D debug mode can reveal the nose hotspot for us,
  but ordinary users never see it.
*/

body.debug
.seal-nose-easter-egg {
  outline:
    2px dashed red;

  background:
    rgba(255,0,0,0.10);
}


/* ==================================================
   SUPERSEAL PRODUCT UI V7
   Nose Alignment + Performance Flash
   ================================================== */


/*
  Tighter hotspot centered on the actual black nose.
*/

.seal-nose-easter-egg {
  left: 57.35% !important;
  top: 18.65% !important;

  width: 3.65% !important;
  height: 5.00% !important;

  border-radius:
    48% 52% 58% 50% !important;

  transform:
    rotate(-5deg) !important;
}


/*
  Very fast visual acknowledgement when the nose is
  being used as a musical retrigger control.
*/

.seal-nose-easter-egg.is-stutter-flash {
  background:
    rgba(235,25,16,0.24) !important;

  box-shadow:
    inset 0 0 0.65vw
      rgba(255,65,40,0.36),
    0 0 0.48vw
      rgba(255,38,22,0.38) !important;
}


/*
  Keep the hidden-reels red nose state slightly more
  persistent than the momentary stutter flash.
*/

.seal-nose-easter-egg.is-active {
  background:
    rgba(185,18,14,0.26);

  box-shadow:
    inset 0 0 0.8vw
      rgba(255,55,35,0.25),
    0 0 0.4vw
      rgba(255,35,20,0.24);
}


/* ==================================================
   SUPERSEAL PRODUCT UI V8
   RATING BAR PLAYBACK MODE SELECTOR
   ================================================== */


/* --------------------------------------------------
   Retire old floating Octagon switch
-------------------------------------------------- */

.octagon-switch-retired {
  display: none !important;
}


/* --------------------------------------------------
   Compact selector embedded visually in green bar
-------------------------------------------------- */

.rating-mode-control {
  position: absolute;

  /*
    Green strip:
      left ≈ 22%
      width ≈ 56%

    This places the control in the otherwise-unused
    middle section before RATE + stars.
  */

  left: 53.0%;
  bottom: 1.38%;

  z-index: 66;

  width: 14.4%;
  height: 4.05%;

  display: grid;

  grid-template-columns:
    1fr auto;

  align-items: center;

  gap: 3%;

  box-sizing: border-box;

  padding:
    0.18%
    0.25%
    0.18%
    0.4%;

  border:
    1px solid
    rgba(65,255,85,0.22);

  border-radius:
    0.22vw;

  background:
    rgba(1,14,4,0.93);

  box-shadow:
    inset 0 0 0.32vw
    rgba(0,0,0,0.72);
}


.rating-mode-toggle {
  width: 100%;
  height: 100%;

  min-width: 0;

  display: grid;

  grid-template-columns:
    1fr
    28%
    1.25fr;

  align-items: center;

  gap: 4%;

  margin: 0;
  padding: 0;

  border: 0;

  outline: none;

  background: transparent;

  cursor: pointer;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;
}


.rating-mode-label {
  font-size:
    min(0.43vw, 0.78vh);

  font-weight: 800;

  line-height: 1;

  white-space: nowrap;

  color:
    rgba(80,255,95,0.42);

  transition:
    color 140ms ease,
    text-shadow 140ms ease;
}


/*
  Loop Mode default state.
*/

.rating-mode-loops {
  color: #73ff83;

  text-shadow:
    0 0 0.25vw
    rgba(65,255,85,0.48);
}


/*
  Full Beat state.
*/

.rating-mode-control.is-full-beats
.rating-mode-loops {
  color:
    rgba(80,255,95,0.34);

  text-shadow: none;
}


.rating-mode-control.is-full-beats
.rating-mode-full {
  color: #ffc05b;

  text-shadow:
    0 0 0.25vw
    rgba(255,175,55,0.52);
}


/* --------------------------------------------------
   Tiny hardware switch
-------------------------------------------------- */

.rating-mode-switch-track {
  position: relative;

  width: 100%;
  height: 43%;

  min-height: 5px;

  border:
    1px solid #171717;

  border-radius: 999px;

  background:
    #020302;

  box-shadow:
    inset 0 0 0.25vw
    rgba(0,0,0,0.95);
}


.rating-mode-switch-handle {
  position: absolute;

  left: 7%;
  top: 50%;

  width: 35%;
  aspect-ratio: 1;

  transform:
    translateY(-50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 38% 34%,
      #eee2c3,
      #b9a176 54%,
      #56452e 100%
    );

  box-shadow:
    0 0.08vw 0.18vw
    rgba(0,0,0,0.9);

  transition:
    left 160ms ease;
}


.rating-mode-control.is-full-beats
.rating-mode-switch-handle {
  left: 58%;
}


/* --------------------------------------------------
   Info button
-------------------------------------------------- */

.rating-mode-info {
  height: 88%;
  aspect-ratio: 1;

  margin: 0;
  padding: 0;

  border:
    1px solid
    rgba(90,255,105,0.36);

  border-radius: 50%;

  background:
    rgba(8,35,12,0.78);

  color: #71ff80;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;

  font-size:
    min(0.58vw, 1.05vh);

  font-weight: 800;

  line-height: 1;

  cursor: pointer;
}


.rating-mode-info:hover {
  background:
    rgba(32,95,40,0.82);
}


/* --------------------------------------------------
   Playback mode explanation modal
-------------------------------------------------- */

.mode-info-overlay {
  position: absolute;

  inset: 0;

  z-index: 260;

  display: grid;

  place-items: center;

  background:
    rgba(0,0,0,0.77);
}


.mode-info-overlay[hidden] {
  display: none;
}


.mode-info-panel {
  width: 48%;
  max-height: 76%;

  display: flex;
  flex-direction: column;

  padding: 1.4%;

  box-sizing: border-box;

  border:
    0.15vw solid
    #347b3e;

  border-radius:
    0.65vw;

  background:
    linear-gradient(
      180deg,
      #061008,
      #010401
    );

  box-shadow:
    0 0 2vw
    rgba(0,0,0,0.95);

  color: #78ff85;

  font-family:
    "Courier New",
    ui-monospace,
    monospace;
}


.mode-info-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-bottom: 3%;

  font-size:
    min(1.05vw, 1.9vh);

  font-weight: 800;

  letter-spacing:
    0.08em;
}


.mode-info-close {
  width: 7%;
  aspect-ratio: 1;

  border:
    1px solid #347b3e;

  border-radius: 50%;

  background: #071009;

  color: #70ff7d;

  font-size:
    min(1.25vw, 2.2vh);

  cursor: pointer;
}


.mode-info-content {
  overflow-y: auto;

  padding-right: 2%;

  color: #91c997;

  font-size:
    min(0.69vw, 1.26vh);

  line-height: 1.5;
}


.mode-info-content section {
  margin-bottom: 4%;
}


.mode-info-content h2 {
  margin:
    0 0 1.4%;

  color: #6fff7c;

  font-size:
    min(0.82vw, 1.48vh);

  letter-spacing:
    0.045em;
}


.mode-info-content p {
  margin:
    0 0 1.7%;
}


.mode-info-shared {
  padding: 2.4%;

  border:
    1px solid
    rgba(65,255,85,0.18);

  border-radius:
    0.3vw;

  background:
    rgba(12,42,16,0.34);
}


.mode-info-warning {
  margin-top: 2%;

  padding: 2.3%;

  border:
    1px solid
    rgba(255,180,50,0.32);

  border-radius:
    0.3vw;

  background:
    rgba(75,44,5,0.23);

  color: #ffc15b;

  text-align: center;
}


.mode-info-powered {
  margin-top: 5%;

  padding-top: 3%;

  border-top:
    1px solid
    rgba(70,255,90,0.18);

  color:
    rgba(90,230,105,0.66);

  text-align: center;

  letter-spacing:
    0.18em;
}


/* --------------------------------------------------
   README mode note
-------------------------------------------------- */

.readme-playback-mode-note {
  margin-bottom: 4%;

  padding: 2%;

  border:
    1px solid
    rgba(75,255,95,0.20);

  border-radius:
    0.28vw;

  background:
    rgba(12,45,17,0.28);

  color: #89d693;

  line-height: 1.45;
}


/* --------------------------------------------------
   Final nose alignment nudge
-------------------------------------------------- */

.seal-nose-easter-egg {
  left: 57.00% !important;
  top: 18.50% !important;
}


/* ==================================================
   SUPERSEAL PRODUCT UI V9 - WIDE STATUS BAR

   Match lower hardware width.
   ================================================== */

/* ==================================================
   OLD SCHOOL GREEN DATA DISPLAY
   ================================================== */

.looper-data-strip {
  left: 15.6% !important;
  width: 68.8% !important;
}