@font-face {
  font-family: "Archivo"; font-weight: 900; font-stretch: 125%; font-display: swap;
  src: url("/fonts/archivo-900-expanded-subset-2.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Sans"; font-weight: 500 600; font-display: swap;
  src: url("/fonts/instrument-sans-subset-2.woff2") format("woff2");
}
:root {
  --sky-top: #0B2C4C;
  --sky: #05203A;
  --cream: #FDECC2;
  --quiet: #7A90AB;
  --bar: rgba(3, 18, 33, .82);
  --vh: 1vh;
  --u: min(10.6vw, calc(19 * var(--vh)));
  --tb: clamp(52px, 4.8vmin, 150px);
  color-scheme: dark;
}
@supports (height: 1dvh) { :root { --vh: 1dvh; } }
@media (max-aspect-ratio: 1/1) {
  :root { --u: min(19vw, calc(12.5 * var(--vh))); }
  h1 span { display: block; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: linear-gradient(var(--sky-top), var(--sky) 70%) fixed, var(--sky);
  color: var(--cream);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
#stars { position: fixed; top: 0; left: 0; display: block; image-rendering: crisp-edges; image-rendering: pixelated; }
main {
  position: fixed; left: 0; right: 0; top: 0;
  bottom: calc(var(--tb) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  text-align: center;
}
.group { position: relative; display: flex; flex-direction: column; align-items: center; }
.lede {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: min(calc(100vw - 32px), 34em); margin-top: calc(var(--u) * .42);
  font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif; font-weight: 500;
  font-size: clamp(15px, calc(var(--u) * .2), 30px); line-height: 1.4; text-wrap: balance;
}
.lede .fine { margin-top: .6em; font-size: max(12px, .72em); color: var(--quiet); }
.lede a { color: inherit; text-underline-offset: .2em; }
.lede a:focus-visible { outline: 2px solid #48AEB4; outline-offset: 2px; }
.kip {
  display: block; width: calc(var(--u) * 3.29); height: auto; aspect-ratio: 92 / 59;
  image-rendering: crisp-edges; image-rendering: pixelated; margin-bottom: calc(var(--u) * -.036); transform: translateX(-8.7%);
}
h1 {
  font-family: "Archivo", "Arial Black", "Segoe UI", sans-serif; font-stretch: 125%; font-weight: 900;
  font-size: var(--u); line-height: .78; letter-spacing: -.01em; color: var(--cream);
  white-space: nowrap;
}
@media (max-aspect-ratio: 1/1) { h1 { line-height: .9; } }
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: calc(var(--tb) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bar); border-top: 1px solid rgba(253, 236, 194, .08);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--tb) * .16);
  font-size: calc(var(--tb) * .2);
}
.app { width: calc(var(--tb) * .6); height: calc(var(--tb) * .6); border-radius: calc(var(--tb) * .14); }
.tray {
  position: absolute; right: max(calc(var(--tb) * .3), env(safe-area-inset-right, 0px)); top: 0;
  height: var(--tb); display: flex; align-items: center; gap: calc(var(--tb) * .28);
  font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif; font-weight: 600; line-height: 1.25; text-align: right;
  white-space: nowrap;
}
.tray small, .widget small { display: block; font-size: .92em; font-weight: 500; color: var(--quiet); }
.widget {
  position: absolute; left: max(calc(var(--tb) * .2), env(safe-area-inset-left, 0px)); top: calc(var(--tb) * .1);
  height: calc(var(--tb) * .8); padding: 0 calc(var(--tb) * .2) 0 calc(var(--tb) * .16);
  border-radius: calc(var(--tb) * .14);
  display: flex; align-items: center; gap: calc(var(--tb) * .2);
  font-family: "Instrument Sans", "Segoe UI", system-ui, sans-serif; font-weight: 600; line-height: 1.25;
  white-space: nowrap; color: inherit; text-decoration: none;
}
.widget span { display: block; }
.widget:hover { background: rgba(253, 236, 194, .08); }
.widget:active { background: rgba(253, 236, 194, .05); }
.widget:focus-visible { outline: 2px solid #48AEB4; outline-offset: 2px; }
#github { display: block; height: calc(var(--tb) * .42); width: auto; aspect-ratio: 1; image-rendering: crisp-edges; image-rendering: pixelated; }
.pill {
  height: calc(var(--tb) * .8); padding: 0 calc(var(--tb) * .24) 0 calc(var(--tb) * .14);
  border-radius: calc(var(--tb) * .2); background: #0E3354; box-shadow: inset 0 0 0 1px rgba(253, 236, 194, .12);
  display: flex; align-items: center; gap: calc(var(--tb) * .16); overflow: hidden;
}
#pill-kip { display: block; height: calc(var(--tb) * .62); width: auto; aspect-ratio: 67 / 41; image-rendering: crisp-edges; image-rendering: pixelated; }
@media (max-width: 640px) {
  .app { display: none; }
  .taskbar {
    justify-content: space-between;
    padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px));
  }
  .widget, .tray { position: static; }
}
.a1 { background: #FDECC2; opacity: .85; }
.a2 { background: #48AEB4; opacity: .7; }
.a3 { background: #AE8E4E; opacity: .75; }
.a4 { background: #DE7866; opacity: .6; }
.a5 { background: #84C6A8; opacity: .7; }
html:not(.js) #kip { display: none; }