*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--tk-page);
  color: var(--tx);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

:root[data-theme="dark"] { --tk-page: #0E0E10; }
:root[data-theme="light"] { --tk-page: #E9E9E5; }

a { color: inherit; text-decoration: none; }
button { font: inherit; }

::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; }

.tk-skip {
  position: fixed;
  top: -60px;
  left: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--acc);
  color: var(--onacc);
  font: 500 14px/1 'Outfit', system-ui, sans-serif;
  transition: top .15s ease;
}
.tk-skip:focus { top: 12px; }

.tk-prototype-gate {
  position: fixed;
  z-index: 90;
  inset-block-start: max(8px, env(safe-area-inset-top, 0px));
  inset-inline-end: max(8px, env(safe-area-inset-right, 0px));
  width: min(560px, calc(100vw - 16px));
  max-height: min(35dvh, 240px);
  overflow: auto;
  padding: 8px 11px;
  border: 1px solid rgba(203, 242, 76, .55);
  border-radius: 12px;
  background: #111214;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
  color: #F5F5F3;
  font: 500 12px/1.4 'Outfit', system-ui, sans-serif;
}
.tk-prototype-gate summary { cursor: pointer; }
.tk-prototype-gate strong { color: #CBF24C; font-weight: 700; }
.tk-prototype-gate div { margin-block-start: 6px; }
.tk-prototype-gate a {
  color: #F5F5F3;
  text-decoration: underline;
  text-decoration-color: #CBF24C;
  text-underline-offset: 2px;
}
.tk-prototype-gate summary:focus-visible,
.tk-prototype-gate a:focus-visible {
  outline: 2px solid #CBF24C;
  outline-offset: 2px;
}

.tk {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tk-bezel {
  position: relative;
  padding: 11px;
  background: linear-gradient(155deg, #48484a, #0b0b0d 42%, #232326);
  border-radius: 56px;
  box-shadow: 0 26px 56px -22px rgba(0, 0, 0, .38), 0 0 0 1px rgba(0, 0, 0, .28);
}

.tk-stage {
  --tk-status-h: calc(54px + env(safe-area-inset-top, 0px));
  position: relative;
  width: 393px;
  height: 852px;
  border-radius: 45px;
  overflow: hidden;
  background: var(--bg);
}

.tk-statusbar {
  height: var(--tk-status-h);
}

/* The full-screen chart is drawn on a phone turned on its side, so the frame
   turns with it: 852 × 393 instead of 393 × 852, and no status bar, because the
   canvas draws none there. */
.tk-stage[data-orientation="landscape"] {
  --tk-status-h: 0px;
  width: 852px;
  height: 393px;
}
.tk-stage[data-orientation="landscape"] .tk-statusbar,
.tk-stage[data-orientation="landscape"] .tk-tabbar,
.tk-stage[data-orientation="landscape"] .tk-island,
.tk-stage[data-orientation="landscape"] .tk-home-indicator { display: none; }

/* The screen spans the whole frame and holds the status bar open with padding,
   rather than starting below it. Visually the two are the same — the content
   box is identical either way — but the containing block is not, and that is
   what the canvas' own geometry depends on: a popover or a share sheet is drawn
   as `position:absolute; inset:0`, and in the canvas that resolves against the
   whole phone, status bar included. Starting the screen below the bar would
   stop those overlays 54 px short of where they were drawn. */
.tk-screen {
  position: absolute;
  left: 0;
  zoom: var(--tk-zoom, 1);
  top: 0;
  width: calc(100% / var(--tk-zoom, 1));
  height: calc(100% / var(--tk-zoom, 1));
  padding-top: calc(var(--tk-status-h) / var(--tk-zoom, 1));
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transform-origin: 50% 50%;
}
.tk-screen[hidden] { display: none; }

.tk-screen > [data-screen-label] {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.tk-stage[data-fixed-dark] { background: #0B0B0B; }
.tk-stage[data-fixed-dark] .tk-screen { background: #0B0B0B; }
.tk-stage[data-fixed-dark] .tk-home-indicator { background: #F5F5F3; }

.tk-tabbar[hidden] { display: none; }
.tk-stage:has(.tk-tabbar:not([hidden])) .tk-home-indicator { bottom: 5px; }

@media (max-width: 1099px), (max-height: 900px) {
  .tk-home-indicator { display: none; }
}

.tk-desk { display: none; position: relative; width: 100%; height: 100dvh; }
.tk-deskscreen { position: absolute; inset: 0; }
.tk-deskscreen[hidden] { display: none; }
.tk-deskscreen > [data-screen-label] {
  height: 100dvh;
  min-height: 700px;
  max-width: 1400px;
  margin: 0 auto;
}
.tk-deskscreen > [data-screen-label] > div:last-child { overflow-y: auto; }

.tk[data-surface="desk"] .tk-bezel { display: none; }
.tk[data-surface="desk"] .tk-desk { display: block; }
.tk[data-surface="desk"] { display: block; background: var(--bg); }

@media (max-width: 1099px), (max-height: 900px) {
  .tk-bezel {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    height: 100dvh;
  }
  .tk-stage {
    width: 100%;
    height: 100%;
    max-width: 560px;
    margin: 0 auto;
    border-radius: 0;
  }
}

[data-toggle] { display: contents; cursor: pointer; }
[data-toggle] > [data-when] { cursor: pointer; }
[data-toggle][data-on] > [data-when="off"] { display: none; }
[data-toggle]:not([data-on]) > [data-when="on"] { display: none; }
[data-toggle]:focus { outline: none; }
[data-toggle]:focus-visible > [data-when] {
  outline: 2px solid var(--acc, #CBF24C);
  outline-offset: 2px;
}

[data-switch] { cursor: pointer; }
[data-switch]:not([data-on]) { background: #242424; }
[data-switch]:focus-visible { outline: 2px solid #CBF24C; outline-offset: 2px; }

[data-nav], [data-tabbar] a { cursor: pointer; }
[data-tabbar] a:focus-visible { outline: 2px solid var(--acc, #CBF24C); outline-offset: -2px; }

:root[data-bold-text] .tk-stage :where(div, span, a, p, h1, h2, h3, dt, dd, li) { font-weight: 600; }
:root[data-contrast] .tk-stage,
:root[data-contrast] .tk-desk,
:root[data-contrast] {
  --mut: var(--tx);
  --fnt: var(--tx);
  --line: color-mix(in srgb, var(--tx) 42%, transparent);
}
:root[data-transparency="off"] .tk-dim { display: none; }
:root[data-text="l"] .tk-stage { --tk-zoom: 1.12; }
:root[data-text="xl"] .tk-stage { --tk-zoom: 1.25; }

/* Der Name jedes Bildschirms für den Rotor: unsichtbar, aber vorhanden —
   `display:none` läse auch VoiceOver nicht. */
.tk-a11y-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}