/* klaboo.com coming soon. Lockup proportions match the app sidebar (mark 46, gap 9, wordmark 0.2324 px per unit). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(80% 90% at 50% 42%, #242b25 0%, #191e1b 55%, #111411 100%) fixed, #191e1b;
  color: #f5f5ea;
  font: 15px/1.5 'Avenir Next', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* --u is one sidebar pixel. 151.19 x 46.42 is the sidebar lockup box. */
.lockup {
  --u: min(3.2px, 0.5556vw, 0.7324vh);
  display: flex;
  gap: calc(9 * var(--u));
  align-items: flex-start;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 12px;
}
.lockup:focus-visible { outline: 2px solid #F28C28; outline-offset: 14px; }
.mark { display: block; flex: none; width: calc(46 * var(--u)); height: calc(46 * var(--u)); transform-origin: 50% 55%; }
.wordmark {
  display: block;
  overflow: visible;
  width: calc(107.352 * var(--u));
  height: calc(56.008 * var(--u));
  margin: calc(-5.5776 * var(--u));
  margin-top: calc(-4.0151 * var(--u));
}
.wordmark .ltr, .wordmark .ln, #k-click { transform-box: fill-box; }
.wordmark .ln { transform-origin: 0% 50%; }
#k-click { transform-origin: 0% 0%; }
.msg { margin-top: clamp(30px, 6vh, 56px); text-align: center; }
.soon { margin: 0; font-size: clamp(13px, 1.5vw, 17px); font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; padding-left: 0.32em; }
.tag { margin: 10px 0 0; color: #9fa79c; font-size: clamp(14px, 1.4vw, 16px); }
.foot { padding: 0 20px 22px; text-align: center; font-size: 12px; color: #5f685d; letter-spacing: 0.02em; }
/* With JavaScript, start hidden; app.js animates in. If it never runs, reveal anyway. */
.js .lockup:not(.ready), .js .msg:not(.ready), .js .foot:not(.ready) { opacity: 0; animation: reveal 0.5s ease 2.5s forwards; }
@keyframes reveal { to { opacity: 1; } }