/* Knowledge Tree shared styles: the tree page and every module page.
   Fonts: Outfit (geometric sans) + JetBrains Mono (readouts). */

:root {
  --kt-bg: #070b12;
  --kt-ink: #eef3fb;
  --kt-dim: rgba(238, 243, 251, 0.62);
  --kt-faint: rgba(238, 243, 251, 0.14);
  --kt-glass: rgba(14, 20, 32, 0.62);
  --kt-glass-hi: rgba(28, 38, 58, 0.72);
  --kt-line: rgba(255, 255, 255, 0.10);
  --kt-accent: #3ff0ff;
  --kt-accent-ink: #03222a;
  --kt-warm: #ffc53d;
  --kt-good: #5ee08a;
  --kt-warn: #ffb43d;
  --kt-bad: #ff5d6c;
  --kt-radius: 14px;
  --kt-sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --kt-top: var(--slop-nav-height, 50px);
  --kt-bottom-inset: 0px;
}
:root[data-skin="studio"] {
  --kt-bg: #e9edf3;
  --kt-ink: #121a26;
  --kt-dim: rgba(18, 26, 38, 0.64);
  --kt-faint: rgba(18, 26, 38, 0.12);
  --kt-glass: rgba(255, 255, 255, 0.66);
  --kt-glass-hi: rgba(255, 255, 255, 0.86);
  --kt-line: rgba(18, 26, 38, 0.12);
  --kt-accent: #0a8fb0;
  --kt-accent-ink: #ffffff;
}

html, body { margin: 0; height: 100%; background: var(--kt-bg); overflow: hidden; }
body.kt { font-family: var(--kt-sans); color: var(--kt-ink); -webkit-font-smoothing: antialiased; }
.kt *, .kt *::before, .kt *::after { box-sizing: border-box; }
.kt button { font-family: inherit; color: inherit; }
.kt a.kt-btn { text-decoration: none; }
.kt [hidden] { display: none !important; }
.kt :focus-visible { outline: 2px solid var(--kt-accent); outline-offset: 2px; }

.kt-stage { position: fixed; left: 0; right: 0; top: var(--kt-top); bottom: 0; }
.kt-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }

.kt-loading { position: fixed; left: 0; right: 0; top: var(--kt-top); height: 3px; z-index: 30; overflow: hidden; }
.kt-loading::after { content: ''; position: absolute; inset: 0; width: 40%; background: var(--kt-accent); animation: kt-load 1.1s ease-in-out infinite; }
@keyframes kt-load { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.kt-loading.done { display: none; }

.kt-glass {
  background: var(--kt-glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--kt-line);
  border-radius: var(--kt-radius);
}

.kt-hud { position: fixed; z-index: 10; pointer-events: none; }
.kt-hud > * { pointer-events: auto; }
body.kt-hide-ui .kt-hud, body.kt-hide-ui .kt-card { display: none !important; }

.kt-kicker { font: 600 11px/1.2 var(--kt-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kt-dim); }
.kt-kicker a { color: inherit; text-decoration: none; }
.kt-kicker a:hover { color: var(--kt-accent); }
.kt-title { margin: 4px 0 0; font-weight: 300; font-size: 22px; line-height: 1.05; letter-spacing: -.01em; }
.kt-title b { display: block; font-weight: 700; font-size: 40px; color: var(--kt-accent); letter-spacing: -.02em; }

.kt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  background: var(--kt-glass-hi); border: 1px solid var(--kt-line);
  font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap;
}
.kt-btn:hover { border-color: var(--kt-accent); }
.kt-btn.primary { background: var(--kt-accent); color: var(--kt-accent-ink); border-color: transparent; font-weight: 600; }
.kt-btn.on { background: var(--kt-accent); color: var(--kt-accent-ink); border-color: transparent; }
.kt-btn[disabled] { opacity: .45; cursor: default; }

.kt-seg { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--kt-faint); }
.kt-seg button {
  flex: 1; min-height: 34px; border: 0; border-radius: 9px; background: none; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--kt-dim); padding: 0 6px;
}
.kt-seg button[aria-pressed="true"] { background: var(--kt-glass-hi); color: var(--kt-ink); }

.kt-range { width: 100%; accent-color: var(--kt-accent); height: 28px; margin: 0; }
.kt-mono { font-family: var(--kt-mono); font-variant-numeric: tabular-nums; }

.kt-card {
  position: fixed; z-index: 20; left: 16px; bottom: calc(16px + var(--kt-bottom-inset));
  width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - var(--kt-top) - 32px - var(--kt-bottom-inset));
  overflow: auto; padding: 18px 18px 16px; display: none;
}
.kt-card.open { display: block; animation: kt-rise .22s ease-out; }
@keyframes kt-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.kt-card h2 { margin: 6px 0 10px; font-size: 22px; line-height: 1.15; }
.kt-card p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; }
.kt-card .fact { padding: 10px 12px; border-radius: 10px; background: var(--kt-faint); font-size: 14px; }
.kt-card .try { font-size: 14px; color: var(--kt-accent); font-weight: 600; }
.kt-card .x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--kt-faint); cursor: pointer; font-size: 18px; line-height: 1; }

.kt-modal { position: fixed; inset: var(--kt-top) 0 0 0; z-index: 40; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5); padding: 16px; }
.kt-modal.open { display: flex; }
.kt-modal .kt-glass { width: min(680px, 100%); max-height: 100%; overflow: auto; padding: 24px; background: var(--kt-glass-hi); }
.kt-modal h2 { margin: 0 0 4px; font-size: 26px; }
.kt-modal h3 { margin: 20px 0 6px; font-size: 17px; color: var(--kt-accent); }
.kt-modal p { margin: 0 0 10px; line-height: 1.55; font-size: 15px; }

.kt-toasts { position: fixed; z-index: 35; left: 50%; top: calc(var(--kt-top) + 14px); transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(440px, calc(100vw - 32px)); }
.kt-toast { padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 15px; text-align: center; animation: kt-rise .2s ease-out; pointer-events: auto; }
.kt-toast.good { border-color: var(--kt-good); }
.kt-toast.warn { border-color: var(--kt-warn); }
.kt-toast.bad { border-color: var(--kt-bad); }
.kt-toast button { margin-left: 8px; background: none; border: 0; color: var(--kt-accent); font-weight: 700; cursor: pointer; font-size: 14px; text-decoration: underline; }

.kt-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .kt-card.open, .kt-toast { animation: none; }
  .kt-loading::after { animation-duration: 3s; }
}