/* Carpex AI Academy — shared tokens & components
   Layout concept: a quiet white gallery that cuts to black "cinema" sections; huge light type,
   one floating object per scene, black pills for every action. */
:root {
  --void: #eef0f2;        /* page ground (light) */
  --deck: #ffffff;        /* panel fill */
  --line: rgba(12, 14, 18, .10);
  --chrome: #0b0c0f;      /* primary text */
  --dim: #6f7580;         /* secondary text */
  --faint: #b4b9c1;       /* greyed half of two-tone headlines */
  --cyan: #2a5bff;        /* accent (electric blue) */
  --ember: #0b0c0f;       /* primary button fill */
  --cta-fg: #ffffff;      /* primary button text */
  --lock: #e5484d;
  --field: #ffffff;
  --glass: rgba(255, 255, 255, .72);
  --f-display: "Geist", "Helvetica Neue", Arial, sans-serif;
  --f-hud: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --r: 22px;
  color-scheme: light;
}
.dark {
  --void: #050608;
  --deck: #0d0f14;
  --line: rgba(220, 230, 255, .12);
  --chrome: #f2f4f7;
  --dim: #8b93a1;
  --faint: #3d434d;
  --cyan: #5b84ff;
  --ember: #f2f4f7;
  --cta-fg: #0b0c0f;
  --field: rgba(255, 255, 255, .04);
  --glass: rgba(14, 16, 22, .72);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--void); }
body { margin: 0; background: var(--void); color: var(--chrome); font-family: var(--f-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; text-wrap: balance; letter-spacing: -.035em; line-height: 1; margin: 0; }
.hud { font-family: var(--f-hud); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* buttons: pills */
.btn { display: inline-flex; align-items: center; gap: 12px; padding: 13px 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); color: var(--chrome); font-family: var(--f-body); font-size: 14px; font-weight: 500; letter-spacing: -.01em; text-decoration: none; cursor: pointer; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .3s, background .3s, border-color .3s; }
.btn:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--chrome) 30%, transparent); }
.btn .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--chrome); color: var(--void); font-size: 13px; margin-right: -8px; }
.btn.primary { background: var(--ember); border-color: var(--ember); color: var(--cta-fg); }
.btn.primary .dot { background: var(--cta-fg); color: var(--ember); }
.icon-btn { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: var(--chrome); cursor: pointer; display: grid; place-items: center; }
.icon-btn:hover { border-color: var(--cyan); }
.icon-btn svg { width: 16px; height: 16px; }

/* panel */
.frame { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

/* brand */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--f-display); font-weight: 500; font-size: 17px; letter-spacing: -.03em; }
.brand-mark { width: 26px; height: 26px; display: grid; place-items: center; }
.brand-mark::after { content: ""; width: 18px; height: 18px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; transform: rotate(-45deg); }

.lock-ico { display: inline-block; width: 11px; height: 12px; position: relative; vertical-align: -1px; }
.lock-ico::before { content: ""; position: absolute; left: 2px; top: 0; width: 7px; height: 6px; border: 1.8px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }
.lock-ico::after { content: ""; position: absolute; left: 0; bottom: 0; width: 11px; height: 7px; background: currentColor; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }