:root {
  --blue: #63aecc;
  --blue-strong: #9ad4ea;
  --ink: #070b10;
  --text: #f5f8fb;
  --muted: #c5d0d8;
  --amber: #ffb020;
  --cream: #f6f1e7;
  --good: #3ee08a;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; }
body {
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input { font-family: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; }
img { display: block; max-width: 100%; }
.kiosk, .kiosk * { user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.kiosk { touch-action: manipulation; }

body.screen { display: grid; place-items: center; overflow: hidden; }
.frame {
  position: relative;
  overflow: hidden;
  container-type: size;
  background: var(--ink);
  color: var(--text);
}
.frame.tv { width: min(100vw, 177.78vh); height: min(100vh, 56.25vw); }
.frame.totem { width: min(100vw, 56.25vh); height: min(100vh, 177.78vw); }

.home-link {
  position: absolute; z-index: 30; top: 1.2cqw; left: 1.2cqw;
  width: 2.2cqw; height: 2.2cqw; border-radius: 99px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45); color: #fff; text-decoration: none;
  font-size: 1.2cqw; opacity: .35;
}
.home-link:hover { opacity: 1; }
.embedded .home-link { display: none; }