/* KStudio Onboarding - V1.01 (test build)
   One palette, two themes. Light = warm cream + cobalt ink (never plain
   white). Dark = deep blueprint navy + pale ink. */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --bg: #F6F1E7;
  --ink: #1F4FD8;
  --ink-soft: #91A9EC;
  --ok: #1E9E50;
  --err: #D23B3B;
  --hold: #1F4FD8;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
}
html[data-theme="dark"] {
  --hold: #8FADFF;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  overflow: hidden;
  transition: background-color .25s ease, color .25s ease;
}

/* Letterboxed 16:9 stage, centred, with the design unit --u (1/1920 of the
   stage width) driving every overlay position and size. */
.stage {
  position: absolute; inset: 0; margin: auto;
  width: min(100vw, 177.78vh);
  height: min(100vh, 56.25vw);
  --u: calc(min(100vw, 177.78vh) / 1920);
}
.canvas-host, .canvas-host canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.canvas-host canvas.whip { filter: blur(1.6px); }

/* Title: fixed bottom-left once it appears, never moves after. */
.title {
  position: absolute;
  left: calc(112 * var(--u));
  top: calc(888 * var(--u));
  margin: 0;
  font-size: calc(98 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--ink);
  opacity: 0;
  transition: opacity .12s linear;
  pointer-events: none;
  white-space: nowrap;
}
.title.visible { opacity: 1; }

/* Typed code-comment cards. */
.card {
  position: absolute;
  font-size: calc(23 * var(--u));
  font-weight: 700;
  line-height: calc(42 / 23);
  color: var(--ink);
  display: none;
  pointer-events: none;
  white-space: pre;
}
.card.visible { display: block; }
.card .row { height: calc(42 * var(--u)); }
.card .ln { color: var(--ink-soft); }
.card .cursor {
  display: inline-block;
  width: calc(13 * var(--u));
  height: calc(25 * var(--u));
  margin-left: calc(2 * var(--u));
  vertical-align: text-bottom;
  background: var(--ink);
}

/* Enter state. */
.enter-bar {
  position: absolute;
  right: calc(112 * var(--u));
  bottom: calc(96 * var(--u));
  display: flex; align-items: center; gap: calc(28 * var(--u));
  opacity: 0; transform: translateY(calc(20 * var(--u)));
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.enter-bar.visible { opacity: 1; transform: none; pointer-events: auto; }
.enter-btn {
  font-family: var(--mono);
  font-size: calc(26 * var(--u));
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border: calc(3 * var(--u)) solid var(--ink);
  padding: calc(14 * var(--u)) calc(34 * var(--u));
  background: transparent;
  transition: background-color .15s ease, color .15s ease;
}
.enter-btn:hover, .enter-btn:focus-visible { background: var(--ink); color: var(--bg); outline: none; }
.enter-bar .hint { font-size: calc(16 * var(--u)); color: var(--ink-soft); }

/* Intro progress hairline along the bottom of the stage. */
.progress-wrap {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(4 * var(--u));
  background: transparent;
}
.progress {
  height: 100%; width: 100%;
  background: var(--ink);
  opacity: .5;
  transform: scaleX(0);
  transform-origin: left center;
}
.progress-wrap.done .progress { opacity: 0; transition: opacity .6s ease; }

/* Corner controls. */
.controls {
  position: fixed; top: 14px; right: 14px; z-index: 10;
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
}
.ctl {
  font-family: var(--mono);
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--ink);
  padding: 7px 12px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.ctl:hover, .ctl:focus-visible { background: var(--ink); color: var(--bg); outline: none; }
.hidden { display: none; }

/* Ledger footer, fixed and scalable. */
.foot {
  position: fixed; left: 14px; bottom: 10px; z-index: 10;
  display: flex; gap: 18px;
  font-size: 11px; color: var(--ink-soft);
  pointer-events: none;
}

@media (max-width: 640px) {
  .foot { display: none; }
  .enter-bar .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .enter-bar, .title { transition: none; }
}