/* ============================================================
   TypeMaster Pro — theme.css
   Professional, premium palette — crisp white surfaces, light
   gray panels, and a single confident navy-blue accent. Built as
   CSS-variable overrides on Bootstrap 5.3 (no build step needed).
   ============================================================ */

:root{
  /* -- Brand palette (light) --------------------------------------- */
  --tm-ink:        #16233a;   /* primary text — deep navy-charcoal */
  --tm-ink-soft:   #5b6472;   /* secondary text — slate gray */
  --tm-paper:      #ffffff;   /* page background — white */
  --tm-panel:      #ffffff;   /* card / header / footer background */
  --tm-panel-tint: #f4f6f9;   /* soft light-gray panel (hero, CTA) */
  --tm-line:       #e3e7ee;   /* hairline rule */
  --tm-line-strong:#cdd5e0;
  --tm-navy:       #1c3358;   /* primary accent — navy blue */
  --tm-navy-light: #4f7cb8;   /* lighter navy-blue for hover/highlights */
  --tm-navy-dark:  #101c33;   /* deep navy for hovers/dark surfaces */
  --tm-navy-soft:  #eaf0f7;   /* pale navy tint background */
  --tm-success:    #1e7a4c;
  --tm-danger:     #a5382f;

  --tm-font-display: 'Fraunces', Georgia, serif;
  --tm-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tm-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bs-body-font-family: var(--tm-font-body);
  --bs-body-bg: var(--tm-paper);
  --bs-body-color: var(--tm-ink);
  --bs-primary: var(--tm-navy);
  --bs-primary-rgb: 28,51,88;
  --bs-secondary: var(--tm-ink-soft);
  --bs-secondary-rgb: 91,100,114;
  --bs-success: var(--tm-success);
  --bs-danger: var(--tm-danger);
  --bs-link-color: var(--tm-navy);
  --bs-link-hover-color: var(--tm-navy-dark);
  --bs-border-color: var(--tm-line);
  --bs-border-radius: .3rem;
  --bs-border-radius-lg: .4rem;
  --bs-border-radius-sm: .2rem;
}

html{ scroll-behavior:smooth; }
body{
  line-height:1.65;
  background:var(--tm-paper);
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

.skip-link{ position:absolute; top:.5rem; left:.5rem; z-index:2000; background:var(--tm-panel); padding:.5rem 1rem; border-radius:.3rem; }

h1,h2,h3,h4,h5{ font-family:var(--tm-font-display); font-weight:600; letter-spacing:-.015em; color:var(--tm-ink); }
h1{ font-weight:500; }
.lead{ color:var(--tm-ink-soft); font-family:var(--tm-font-body); }
p{ color:var(--tm-ink); }
.text-body-secondary{ color:var(--tm-ink-soft) !important; }
:focus-visible{ outline:2px solid var(--tm-navy); outline-offset:3px; }

.eyebrow{
  font-family:var(--tm-font-mono); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; color:var(--tm-navy-dark); font-weight:600;
  display:inline-flex; align-items:center; gap:.65rem;
}
.eyebrow::after{ content:''; display:inline-block; width:2.5rem; height:1px; background:var(--tm-navy); opacity:.6; }
.text-center .eyebrow{ justify-content:center; }
.text-center .eyebrow::before{ content:''; display:inline-block; width:2.5rem; height:1px; background:var(--tm-navy); opacity:.6; }

.text-brass{ color:var(--tm-navy-dark); }
.font-mono{ font-family:var(--tm-font-mono); }
.bump{ display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--tm-navy); margin-right:.55em; position:relative; top:-2px; }

/* -- Buttons -------------------------------------------------------- */
.btn{ font-weight:600; letter-spacing:.01em; border-radius:.3rem; padding:.65rem 1.5rem; transition:box-shadow .18s ease, transform .18s ease, background .18s ease; }
.btn-lg{ padding:.85rem 1.9rem; font-size:1rem; }
.btn-brass{
  background:linear-gradient(180deg, var(--tm-navy-light), var(--tm-navy) 65%);
  border:1px solid var(--tm-navy-dark); color:#ffffff;
  box-shadow:0 1px 2px rgba(16,28,51,.12);
}
.btn-brass:hover, .btn-brass:focus{
  background:linear-gradient(180deg, #6f9bd0, var(--tm-navy-light) 65%);
  color:#ffffff; box-shadow:0 10px 24px -8px rgba(16,28,51,.35); transform:translateY(-1px);
}
.btn-brass:active{ transform:translateY(0); box-shadow:0 1px 2px rgba(16,28,51,.12); }
.btn-outline-dark{ border-color:var(--tm-line-strong); color:var(--tm-ink); }
.btn-outline-dark:hover{ background:var(--tm-ink); border-color:var(--tm-ink); color:#fff; }
.btn-outline-light{ border-color:var(--tm-line-strong); color:var(--tm-ink); }
.btn-outline-light:hover{ background:var(--tm-ink); border-color:var(--tm-ink); color:#fff; }

/* -- Header / nav: clean white bar, navy hairline ------------------- */
.site-header{ background:var(--tm-panel); border-bottom:1px solid var(--tm-line-strong); box-shadow:0 1px 0 rgba(28,51,88,.10); position:sticky; top:0; z-index:1030; }
.navbar{ padding-top:.9rem; padding-bottom:.9rem; }
.navbar-brand{ font-family:var(--tm-font-display); font-weight:600; font-size:1.2rem; color:var(--tm-ink); display:flex; align-items:center; gap:.6rem; letter-spacing:-.01em; }
.keycap-mini{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border:1px solid var(--tm-navy); color:var(--tm-navy-dark); border-radius:4px; font-family:var(--tm-font-mono); font-weight:600; font-size:.78rem; background:rgba(28,51,88,.08); }
.navbar-nav{ gap:.35rem; }
.navbar-nav .nav-link{ color:var(--tm-ink-soft); font-size:.9rem; letter-spacing:.02em; position:relative; padding-bottom:.3rem !important; }
.navbar-nav .nav-link::after{ content:''; position:absolute; left:.5rem; right:.5rem; bottom:0; height:1px; background:var(--tm-navy); transform:scaleX(0); transition:transform .18s ease; }
.navbar-nav .nav-link:hover{ color:var(--tm-ink); }
.navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after{ transform:scaleX(1); }
.navbar-nav .nav-link.active{ color:var(--tm-navy-dark); font-weight:600; }
.navbar-toggler{ border-color:var(--tm-line-strong); }
.navbar-toggler-icon{ filter:invert(0); background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(16,28,51,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

/* -- Hero: light gray-panel hero with a navy-edged keyboard card ---- */
.hero{ background:linear-gradient(160deg, var(--tm-panel) 0%, var(--tm-panel-tint) 100%); padding:5rem 0 4.5rem; overflow:hidden; position:relative; border-bottom:1px solid var(--tm-line); }
.hero h1{ font-size:clamp(2.2rem,4vw,3.2rem); color:var(--tm-ink); font-weight:500; line-height:1.1; }
.hero h1 .text-brass{ font-style:italic; }
.hero .lead{ max-width:46ch; font-size:1.1rem; }

.hero-keyboard{ background:var(--tm-panel); border-radius:.5rem; padding:2rem 1.4rem; border:1px solid var(--tm-line-strong); box-shadow:0 30px 60px -25px rgba(16,28,51,.25); position:relative; }
.hero-keyboard::before{ content:''; position:absolute; top:0; left:1.4rem; right:1.4rem; height:1px; background:linear-gradient(90deg, transparent, var(--tm-navy), transparent); }
.keyrow{ display:flex; gap:7px; justify-content:center; flex-wrap:wrap; }
.key-wrap{ position:relative; }
.key{
  width:44px; height:44px; border-radius:6px; background:var(--tm-panel-tint); border-bottom:2px solid var(--tm-line-strong);
  display:flex; align-items:center; justify-content:center; font-family:var(--tm-font-mono); font-weight:600; color:var(--tm-navy-dark);
  animation:tm-press 2.6s ease-in-out infinite;
}
@keyframes tm-press{
  0%,72%,100%{ transform:translateY(0); background:var(--tm-panel-tint); color:var(--tm-navy-dark); border-bottom-color:var(--tm-line-strong); }
  78%{ transform:translateY(2px); background:var(--tm-navy); color:#fff; border-bottom-color:var(--tm-navy-dark); }
  88%{ transform:translateY(0); background:var(--tm-panel-tint); color:var(--tm-navy-dark); border-bottom-color:var(--tm-line-strong); }
}
.hero-keyboard .caption{ text-align:center; color:var(--tm-ink-soft); font-family:var(--tm-font-mono); font-size:.72rem; margin-top:1.3rem; letter-spacing:.12em; }

/* -- Carousel (homepage hero slider) --------------------------------- */
.hero-carousel{ border-radius:.5rem; overflow:hidden; box-shadow:0 30px 60px -25px rgba(16,28,51,.25); border:1px solid var(--tm-line-strong); }
.hero-carousel .carousel-slide{ min-height:360px; display:flex; align-items:center; padding:2.6rem; background-size:cover; background-position:center; }
.hero-carousel .carousel-slide .slide-copy{ max-width:520px; }
.hero-carousel .carousel-slide h2{ color:#ffffff; font-size:clamp(1.5rem,2.6vw,2.1rem); }
.hero-carousel .carousel-slide p{ color:#d7e0ec; }
.hero-carousel .carousel-indicators [data-bs-target]{ background-color:var(--tm-navy-light); width:8px; height:8px; border-radius:50%; }
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon{ background-color:rgba(16,28,51,.55); border-radius:50%; padding:1.3rem; background-size:45%; }

/* -- Section headings --------------------------------------------------- */
.section-head h2{ font-size:clamp(1.6rem,2.6vw,2.1rem); margin-top:.5rem; }

/* -- Cards ---------------------------------------------------------------- */
.card{ background:var(--tm-panel); border:1px solid var(--tm-line); border-radius:.35rem; box-shadow:none; position:relative; }
.card.feature-card{ height:100%; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card.feature-card::before{ content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--tm-navy); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.card.feature-card:hover{ transform:translateY(-4px); border-color:var(--tm-line-strong); box-shadow:0 18px 40px -14px rgba(16,28,51,.16); }
.card.feature-card:hover::before{ transform:scaleX(1); }
.feature-num{ font-family:var(--tm-font-mono); color:var(--tm-navy-dark); font-weight:600; font-size:.78rem; letter-spacing:.06em; }

/* -- Founder message panel ------------------------------------------------ */
.founder-panel{ background:var(--tm-panel-tint); border:1px solid var(--tm-line-strong); border-radius:.5rem; padding:2.6rem; }
.founder-avatar{ width:96px; height:96px; border-radius:50%; background:var(--tm-panel); border:2px solid var(--tm-navy); display:flex; align-items:center; justify-content:center; font-family:var(--tm-font-display); font-size:1.6rem; color:var(--tm-navy-dark); font-weight:600; flex:none; }
.founder-quote{ font-family:var(--tm-font-display); font-style:italic; font-size:1.35rem; color:var(--tm-ink); line-height:1.4; }
.founder-quote::before{ content:'\201C'; color:var(--tm-navy); }
.founder-quote::after{ content:'\201D'; color:var(--tm-navy); }

/* -- Vision / mission ------------------------------------------------------ */
.vm-card{ border-radius:.5rem; padding:2rem; height:100%; }
.vm-card .vm-icon{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--tm-panel-tint); border:1px solid var(--tm-line-strong); color:var(--tm-navy-dark); font-size:1.2rem; margin-bottom:1rem; }

/* -- Gallery ---------------------------------------------------------------- */
.gallery-tile{ border-radius:.4rem; overflow:hidden; border:1px solid var(--tm-line); position:relative; aspect-ratio:4/3; display:flex; align-items:flex-end; }
.gallery-tile .tile-bg{ position:absolute; inset:0; }
.gallery-tile .tile-label{ position:relative; z-index:1; padding:.9rem 1rem; color:#ffffff; font-family:var(--tm-font-mono); font-size:.76rem; letter-spacing:.06em; background:linear-gradient(0deg, rgba(16,28,51,.72), transparent); width:100%; }

/* -- Announcements ------------------------------------------------------------ */
.announce-item{ display:flex; gap:1rem; padding:1.1rem 0; border-bottom:1px solid var(--tm-line); }
.announce-item:last-child{ border-bottom:none; }
.announce-date{ font-family:var(--tm-font-mono); font-size:.72rem; color:var(--tm-navy-dark); white-space:nowrap; padding-top:.2rem; min-width:88px; }

/* -- Download card ------------------------------------------------------------- */
.download-card{ background:var(--tm-ink); color:#dbe3ec; border-radius:.5rem; padding:2.4rem; }
.download-card h3{ color:#ffffff; }
.download-card p{ color:#b7c1d1; }

/* -- CTA band: soft light-gray tinted band, not a hard color block --------- */
.cta-band{ background:linear-gradient(135deg, var(--tm-panel-tint), #e2e9f2); padding:3.5rem 0; border-top:1px solid var(--tm-line-strong); border-bottom:1px solid var(--tm-line-strong); }
.cta-band h2{ color:var(--tm-ink); }
.cta-band p{ color:var(--tm-ink-soft); margin-bottom:0; font-size:1.05rem; }

/* -- Forms ---------------------------------------------------------------- */
.auth-wrap{ max-width:440px; margin:3rem auto; background:var(--tm-panel); border:1px solid var(--tm-line); border-radius:.4rem; padding:2.2rem; box-shadow:0 24px 60px -30px rgba(16,28,51,.2); }
.form-control{ border-color:var(--tm-line-strong); border-radius:.3rem; background:var(--tm-panel); }
.form-control:focus{ border-color:var(--tm-navy); box-shadow:0 0 0 .18rem rgba(28,51,88,.15); }
.form-foot{ margin-top:1.2rem; font-size:.9rem; color:var(--tm-ink-soft); text-align:center; }

/* -- Split login panel ------------------------------------------------------ */
.login-shell{ max-width:960px; margin:3.5rem auto; border-radius:.6rem; overflow:hidden; box-shadow:0 30px 70px -30px rgba(16,28,51,.28); border:1px solid var(--tm-line-strong); }
.login-side{ background:linear-gradient(165deg, var(--tm-panel-tint), #dde6f1); padding:3rem 2.4rem; display:flex; flex-direction:column; justify-content:space-between; min-height:100%; }
.login-side .keyrow{ justify-content:flex-start; }
.login-side blockquote{ font-family:var(--tm-font-display); font-style:italic; font-size:1.3rem; color:var(--tm-ink); margin:2rem 0 0; }
.login-side cite{ font-family:var(--tm-font-mono); font-size:.72rem; color:var(--tm-navy-dark); letter-spacing:.08em; }
.login-form-side{ background:var(--tm-panel); padding:3rem 2.6rem; }
.pw-toggle{ cursor:pointer; }

/* -- Status / message pages ------------------------------------------------ */
.status-wrap{ max-width:540px; background:var(--tm-panel); border:1px solid var(--tm-line); border-radius:.4rem; padding:2.8rem 2rem; margin:3.5rem auto; box-shadow:0 24px 60px -30px rgba(16,28,51,.18); }
.status-icon{ font-size:2.2rem; margin-bottom:.75rem; }
.status-icon-success{ color:var(--tm-success); }
.status-icon-error{ color:var(--tm-danger); }
.status-icon-info{ color:var(--tm-navy); }

/* -- Dashboard / sidebar (kept for pages not yet redesigned) -------------- */
.app-layout{ display:grid; grid-template-columns:270px 1fr; gap:1.5rem; padding:2rem 0; }
@media (max-width:860px){ .app-layout{ grid-template-columns:1fr; } }
.sidebar{ background:var(--tm-panel); border:1px solid var(--tm-line); border-radius:.4rem; padding:1.3rem; align-self:start; }
.sidebar h4{ font-family:var(--tm-font-mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--tm-ink-soft); margin-bottom:.7rem; }
.signup-count{ font-family:var(--tm-font-mono); font-size:2rem; font-weight:600; color:var(--tm-navy-dark); }
.lesson-list{ list-style:none; margin:0; padding:0; }
.lesson-list li{ padding:.6rem .4rem; border-bottom:1px solid var(--tm-line); display:flex; align-items:center; gap:.55rem; font-size:.92rem; }
.lesson-list li:last-child{ border-bottom:none; }
.lesson-list .tick{ color:var(--tm-success); font-weight:700; }
.lesson-list .lock{ color:var(--tm-ink-soft); }
.lesson-list a{ text-decoration:none; color:var(--tm-ink); }
.lesson-list a:hover{ color:var(--tm-navy); }
.progress-bar-tm{ background:var(--tm-line); border-radius:99px; height:8px; overflow:hidden; margin:.5rem 0 1.2rem; }
.progress-bar-tm > div{ background:var(--tm-navy); height:100%; }

/* -- Ad slot ---------------------------------------------------------------- */
.ad-slot{ background:var(--tm-panel); border:1px solid var(--tm-line); border-radius:.35rem; display:flex; align-items:center; justify-content:center; min-height:90px; margin:1.6rem 0; padding:.5rem; text-align:center; }
.ad-slot-label{ color:var(--tm-ink-soft); font-size:.72rem; font-family:var(--tm-font-mono); letter-spacing:.08em; text-transform:uppercase; }

/* -- Footer: light panel, navy hairline top ---------------------------------- */
.site-footer{ background:var(--tm-panel); color:var(--tm-ink-soft); padding:3.5rem 0 1.6rem; margin-top:4rem; border-top:1px solid var(--tm-line-strong); }
.footer-brand{ font-family:var(--tm-font-display); font-weight:600; font-size:1.15rem; color:var(--tm-ink); text-decoration:none; display:inline-flex; align-items:center; gap:.55rem; }
.footer-heading{ font-family:var(--tm-font-mono); text-transform:uppercase; font-size:.7rem; letter-spacing:.1em; color:var(--tm-ink-soft); margin-bottom:.9rem; }
.footer-links{ display:flex; flex-direction:column; gap:.55rem; }
.footer-links a{ color:var(--tm-ink-soft); text-decoration:none; font-size:.9rem; }
.footer-links a:hover{ color:var(--tm-navy-dark); }
.text-footer-soft{ color:var(--tm-ink-soft); }
.footer-bottom{ border-top:1px solid var(--tm-line); margin-top:2.2rem; padding-top:1.3rem; }

/* ============================================================
   Signup page — shares the site-wide white / gray / navy palette.
   Scoped to .signup-* classes (kept for structural compatibility);
   colors below now match the main navy accent used site-wide.
   ============================================================ */
:root{
  --su-navy-deep: #101c33;
  --su-navy:      #1c3358;
  --su-navy-light:#2f4f7e;
  --su-accent:    #4f7cb8;
  --su-white:     #ffffff;
  --su-gray-50:   #f6f7f9;
  --su-gray-100:  #eef0f4;
  --su-gray-300:  #d8dce3;
  --su-gray-500:  #6b7280;
  --su-gray-700:  #3d4450;
}

.signup-shell{ max-width:980px; margin:3.5rem auto; border-radius:.6rem; overflow:hidden; box-shadow:0 30px 70px -30px rgba(16,28,51,.28); border:1px solid var(--su-gray-300); background:var(--su-white); }

.signup-side{
  background:linear-gradient(165deg, var(--su-navy-deep), var(--su-navy) 65%, var(--su-navy-light));
  color:#eef1f6; padding:3rem 2.4rem; display:flex; flex-direction:column; justify-content:space-between; min-height:100%; position:relative; overflow:hidden;
}
.signup-side::before{
  content:''; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image: radial-gradient(circle at 85% 10%, rgba(255,255,255,.06), transparent 45%);
}
.signup-side .eyebrow{ color:#a9c1e0; }
.signup-side .eyebrow::after{ background:#a9c1e0; }
.signup-side h2{ color:#fff; font-size:1.7rem; position:relative; }
.signup-side p{ color:#c4d0e2; position:relative; }
.signup-checklist{ list-style:none; margin:1.6rem 0 0; padding:0; position:relative; }
.signup-checklist li{ display:flex; align-items:flex-start; gap:.65rem; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.1); font-size:.92rem; color:#dbe3f0; }
.signup-checklist li:last-child{ border-bottom:none; }
.signup-checklist i{ color:#7fb0e8; margin-top:.15rem; }

.signup-form-side{ background:var(--su-white); padding:3rem 2.6rem; }
.signup-form-side h1{ color:var(--su-navy-deep); font-family:var(--tm-font-display); }
.signup-form-side .form-label{ color:var(--su-gray-700); font-weight:600; font-size:.88rem; }
.signup-form-side .form-control{
  border-color:var(--su-gray-300); border-radius:.4rem; background:var(--su-gray-50); color:var(--su-navy-deep);
}
.signup-form-side .form-control:focus{ border-color:var(--su-accent); box-shadow:0 0 0 .18rem rgba(79,124,184,.18); background:var(--su-white); }
.signup-form-side .form-text{ color:var(--su-gray-500); }
.signup-form-side .form-foot{ color:var(--su-gray-500); }
.signup-form-side .form-foot a{ color:var(--su-navy); font-weight:600; }

.btn-navy{
  background:var(--su-navy); border:1px solid var(--su-navy-deep); color:#fff;
  box-shadow:0 1px 2px rgba(16,28,51,.15); font-weight:600; letter-spacing:.01em; border-radius:.4rem;
  transition:box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.btn-navy:hover, .btn-navy:focus{ background:var(--su-navy-light); color:#fff; box-shadow:0 10px 24px -8px rgba(28,51,88,.4); transform:translateY(-1px); }
.btn-navy:active{ transform:translateY(0); box-shadow:0 1px 2px rgba(16,28,51,.15); }

.signup-alert{ border-radius:.4rem; border:1px solid; font-size:.9rem; }
.signup-alert-error{ background:#fdf1f0; border-color:#eecbc7; color:#933a32; }
.signup-alert-info{ background:var(--su-gray-50); border-color:var(--su-gray-300); color:var(--su-gray-700); word-break:break-all; }

.pw-strength{ height:4px; border-radius:99px; background:var(--su-gray-100); overflow:hidden; margin-top:.4rem; }
.pw-strength > div{ height:100%; width:0%; background:var(--su-gray-300); transition:width .2s ease, background .2s ease; }

/* ============================================================
   Lesson typing UI — markup is generated dynamically by
   assets/js/lesson.js and assets/js/keyboard-data.js. Those
   scripts reference plain variable names (not the tm- prefixed
   ones) and a set of custom classes that never existed in
   theme.css, so this whole page previously rendered unstyled.
   The aliases below let that existing JS output resolve to the
   current white / light-gray / navy palette without any JS
   changes; the rules after style the actual classes it emits.
   ============================================================ */
:root{
  --ink: var(--tm-ink);
  --ink-soft: var(--tm-ink-soft);
  --bg: var(--tm-paper);
  --bg-panel: var(--tm-panel);
  --line: var(--tm-line);
  --brass: var(--tm-navy);
  --brass-dark: var(--tm-navy-dark);
  --steel: var(--tm-navy);
  --success: var(--tm-success);
  --danger: var(--tm-danger);
}

.video-slot{ margin:1.5rem 0; }
.video-slot iframe{ width:100%; aspect-ratio:16/9; border:0; border-radius:.5rem; box-shadow:0 20px 45px -22px rgba(16,28,51,.25); }
.video-slot .no-video{ background:var(--tm-panel-tint); border:1px dashed var(--tm-line-strong); border-radius:.5rem; padding:1.7rem; text-align:center; color:var(--tm-ink-soft); font-size:.9rem; }

.lesson-panel{ background:var(--tm-panel); border:1px solid var(--tm-line); border-radius:.6rem; padding:1.7rem; margin:1.5rem 0; box-shadow:0 24px 60px -35px rgba(16,28,51,.2); }
.lesson-head{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem; }
.lesson-head h2{ margin-bottom:.15rem; }

.stat-row{ display:flex; gap:1.8rem; flex-wrap:wrap; font-family:var(--tm-font-mono); font-size:.85rem; color:var(--tm-ink-soft); margin-bottom:1.1rem; }
.stat-row b{ color:var(--tm-ink); font-size:1.05rem; }

.progress-bar{ background:var(--tm-line); border-radius:99px; height:8px; overflow:hidden; margin:.5rem 0 1.3rem; }
.progress-bar > div{ background:var(--tm-navy); height:100%; transition:width .25s ease; }

.type-target{ font-family:var(--tm-font-mono); font-size:1.5rem; letter-spacing:.02em; padding:1.1rem 1.2rem; background:var(--tm-panel-tint); border:1px solid var(--tm-line); border-radius:.4rem; margin-bottom:1rem; word-break:break-all; line-height:1.5; }
.type-target .ch{ padding:1px 0; }
.type-target .ch.correct{ color:var(--tm-success); background:#e3f3ea; }
.type-target .ch.wrong{ color:#fff; background:var(--tm-danger); }
.type-target .ch.current{ border-bottom:2px solid var(--tm-navy); }

.type-input{ width:100%; font-family:var(--tm-font-mono); font-size:1.2rem; padding:.8rem .95rem; border:1px solid var(--tm-line-strong); border-radius:.4rem; margin-bottom:1rem; background:var(--tm-panel); color:var(--tm-ink); }
.type-input:focus{ outline:none; border-color:var(--tm-navy); box-shadow:0 0 0 .18rem rgba(28,51,88,.15); }

#fb-msg{ min-height:1.4em; }

.keyboard-section{ margin-top:1.4rem; }
.kb-title{ font-weight:600; color:var(--tm-ink); }
.finger-legend{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:.8rem; font-size:.75rem; color:var(--tm-ink-soft); }
.fl-item{ display:flex; align-items:center; gap:.35rem; }
.fl-dot{ width:10px; height:10px; border-radius:50%; }

.kb-row{ display:flex; gap:5px; margin-bottom:5px; justify-content:center; flex-wrap:wrap; }
.k{ min-width:34px; height:34px; border-radius:.35rem; background:var(--tm-panel-tint); display:flex; align-items:center; justify-content:center; font-size:.78rem; font-family:var(--tm-font-mono); border-bottom:2px solid var(--tm-line-strong); color:var(--tm-ink); transition:background .12s ease, color .12s ease, box-shadow .12s ease; }
.k.wide{ min-width:52px; }
.k.wider{ min-width:64px; }
.k.widest{ min-width:80px; }
.k.space{ min-width:220px; }

/* Per-finger color samples — matches the dots in .finger-legend so a key's
   assigned finger is immediately visible once it lights up as active. */
.k.f-pinky-l  { --finger-c:#9d3891; }
.k.f-ring-l   { --finger-c:#1e6ecc; }
.k.f-middle-l { --finger-c:#1e8c40; }
.k.f-index-l  { --finger-c:#c09010; }
.k.f-thumb    { --finger-c:#6b7280; }
.k.f-index-r  { --finger-c:#c06010; }
.k.f-middle-r { --finger-c:#5c28c0; }
.k.f-ring-r   { --finger-c:#1e7aaa; }
.k.f-pinky-r  { --finger-c:#8a8a18; }

.k.active-key{
  background:var(--finger-c, var(--tm-navy));
  color:#fff;
  border-bottom-color:rgba(0,0,0,.3);
  box-shadow:0 0 0 2px #fff inset, 0 6px 14px -6px rgba(16,28,51,.45);
  position:relative;
  overflow:visible;
  z-index:2;
}

/* Large finger overlay — a big rounded "finger" sits down on top of the
   active key, the way TypingMaster-style tutors show which finger to
   use. f-pinky-l / f-ring-l / ... / f-pinky-r are applied alongside
   .active-key by assets/js/lesson.js, so this is a CSS-only addition;
   no script changes needed. Color still matches the finger legend;
   the 2-letter label on the finger (LP, RI, TH, ...) backs it up for
   anyone who can't rely on color alone. */
.k.active-key::before{
  content:'';
  position:absolute;
  left:50%; bottom:calc(100% - 14px);
  transform:translate(-50%,0);
  width:30px; height:82px;
  border-radius:15px 15px 9px 9px / 36px 36px 10px 10px;
  background:
    radial-gradient(9px 6px at 50% 15px, rgba(255,255,255,.92), rgba(255,255,255,.92) 55%, transparent 60%),
    linear-gradient(100deg, rgba(255,255,255,.55) 0%, var(--finger-c, var(--tm-navy)) 32%, var(--finger-c, var(--tm-navy)) 72%, rgba(0,0,0,.3) 100%);
  box-shadow:
    inset -3px 0 6px rgba(0,0,0,.25),
    inset 3px 0 6px rgba(255,255,255,.2),
    0 12px 20px -9px rgba(16,28,51,.55);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding-bottom:7px;
  font-family:var(--tm-font-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.02em;
  color:rgba(255,255,255,.9);
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  z-index:5;
  pointer-events:none;
  animation:finger-drop .2s ease-out;
}
.k.active-key::after{
  content:'';
  position:absolute;
  left:50%; top:3px;
  transform:translateX(-50%);
  width:17px; height:6px;
  background:rgba(0,0,0,.3);
  border-radius:50%;
  filter:blur(1px);
  z-index:1;
  pointer-events:none;
}
.k.active-key.f-pinky-l::before  { content:'LP'; }
.k.active-key.f-ring-l::before   { content:'LR'; }
.k.active-key.f-middle-l::before { content:'LM'; }
.k.active-key.f-index-l::before  { content:'LI'; }
.k.active-key.f-thumb::before    { content:'TH'; }
.k.active-key.f-index-r::before  { content:'RI'; }
.k.active-key.f-middle-r::before { content:'RM'; }
.k.active-key.f-ring-r::before   { content:'RR'; }
.k.active-key.f-pinky-r::before  { content:'RP'; }

@keyframes finger-drop{
  0%{ opacity:0; transform:translate(-50%,-22px) scale(.9); }
  70%{ opacity:1; transform:translate(-50%,3px) scale(1.05); }
  100%{ opacity:1; transform:translate(-50%,0) scale(1); }
}

.k.home-dot{ position:relative; }
.k.home-dot::after{ content:''; position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%; background:var(--tm-line-strong); }
.hands-row{ display:flex; justify-content:space-between; margin-top:.6rem; font-size:.75rem; color:var(--tm-ink-soft); font-family:var(--tm-font-mono); }

/* ============================================================
   Full hand guide — static markup added in lesson.php, sitting
   outside #lesson-root so lesson.js can't wipe it out, positioned
   right against the bottom of the on-screen keyboard so it reads
   as hands resting on the keys (same idea as the TypingMaster
   hand guide) rather than a separate boxed widget. Reacts to the
   active key's finger class (already applied by lesson.js) using
   :has(), so no script changes are needed: whichever finger class
   is active anywhere on the page lifts and lights up the matching
   finger below.
   ============================================================ */
.hands-guide{
  display:flex; justify-content:center; align-items:flex-start;
  gap:0; margin:-14px auto 1.6rem; padding:0 0 2.2rem;
  position:relative; z-index:3; pointer-events:none;
}

.hand{ position:relative; width:158px; height:184px; }
.hand-l{ transform:rotate(-4deg); margin-right:-6px; }
.hand-r{ transform:scaleX(-1) rotate(-4deg); margin-left:-6px; } /* mirror the left-hand template so the thumb lands on the inner side */

/* skin-tone palette, shared by palm + fingers */
.hand .palm, .hand .finger{
  background:linear-gradient(115deg, #f3caa1 0%, #e2a877 45%, #d4956a 75%, #c07f57 100%);
}

.hand .palm{
  position:absolute; left:20px; right:12px; bottom:0; height:92px;
  border-radius:30% 38% 34% 34% / 55% 55% 45% 45%;
  box-shadow:inset 0 4px 8px rgba(255,235,215,.5), inset 0 -8px 14px rgba(120,60,30,.28), 0 14px 22px -14px rgba(60,30,10,.5);
}
.hand .finger{
  position:absolute; bottom:78px; width:19px; border-radius:50% 50% 40% 40% / 60% 60% 20% 20%;
  box-shadow:inset -3px 0 5px rgba(120,60,30,.3), inset 3px 0 5px rgba(255,235,215,.45);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* knuckle crease */
.hand .finger::before{
  content:''; position:absolute; left:3px; right:3px; bottom:20px; height:1px;
  background:rgba(120,60,30,.25);
}
/* fingernail */
.hand .finger::after{
  content:''; position:absolute; left:50%; top:7px; transform:translateX(-50%);
  width:9px; height:7px; border-radius:50% 50% 45% 45%; background:rgba(255,244,232,.75);
}
.hand .pinky { left:8px;  height:60px; transform:rotate(6deg);  transform-origin:bottom center; }
.hand .ring  { left:32px; height:88px; transform:rotate(2deg);  transform-origin:bottom center; }
.hand .middle{ left:57px; height:98px; }
.hand .index { left:82px; height:84px; transform:rotate(-4deg); transform-origin:bottom center; }
.hand .thumb{
  bottom:18px; right:-4px; left:auto; width:25px; height:60px;
  border-radius:50% 50% 40% 40% / 60% 60% 25% 25%;
  transform:rotate(42deg); transform-origin:bottom center;
}
/* wrist fading below the palm, like an arm reaching up out of frame */
.hand::before{
  content:''; position:absolute; left:36px; right:26px; bottom:-46px; height:70px;
  background:linear-gradient(180deg, #d4956a, rgba(212,149,106,0));
  border-radius:0 0 26px 26px; z-index:-1;
}

/* Active-finger highlight — colors match the on-key finger overlay */
body:has(.k.active-key.f-pinky-l)  .hand-l .pinky {
  background:#9d3891; transform:rotate(6deg) translateY(-16px) scale(1.06);
  box-shadow:inset -2px 0 5px rgba(0,0,0,.3), inset 2px 0 5px rgba(255,255,255,.3), 0 12px 20px -9px rgba(0,0,0,.5);
}
body:has(.k.active-key.f-ring-l)   .hand-l .ring {
  background:#1e6ecc; transform:rotate(2deg) translateY(-16px) scale(1.06);
  box-shadow:inset -2px 0 5px rgba(0,0,0,.3), inset 2px 0 5px rgba(255,255,255,.3), 0 12px 20px -9px rgba(0,0,0,.5);
}
body:has(.k.active-key.f-middle-l) .hand-l .middle {
  background:#1e8c40; transform:translateY(-18px) scale(1.06);
  box-shadow:inset -2px 0 5px rgba(0,0,0,.3), inset 2px 0 5px rgba(255,255,255,.3), 0 12px 20px -9px rgba(0,0,0,.5);
}
body:has(.k.active-key.f-index-l)  .hand-l .index {
  background:#c09010; transform:rotate(-4deg) translateY(-16px) scale(1.06);
  box-shadow:inset -2px 0 5px rgba(0,0,0,.3), inset 2px 0 5px rgba(255,255,255,.3), 0 12px 20px -9px rgba(0,0,0,.5);
}
body:has(.k.active-key.f-index-r)  .hand-r .index {
  background:#c06010; transform:rotate(-4deg) translateY(-16px) scale(1.06);
  box-shadow:inset -2px 0 5px rgba(0,0,0,.3), inset 2px 0 5px rgba(255,255,255,.3), 0 12px 20px -9px rgba(0,0,0,.5);
}
body:has(.k.active-key.f-middle-r) .hand-r .middle {
  background:#5c28c0; transform:translateY(-18px) scale(1.06);
  box-shadow:inset -2px 0 5px rgba(0,0,0,.3), inset 2px 0 5px rgba(255,255,255,.3), 0 12px 20px -9px rgba(0,0,0,.5);
}
body:has(.k.active-key.f-ring-r)   .hand-r .ring {
  background:#1e7aaa; transform:rotate(2deg) translateY(-16px) scale(1.06);
  box-shadow:inset -2px 0 5px rgba(0,0,0,.3), inset 2px 0 5px rgba(255,255,255,.3), 0 12px 20px -9px rgba(0,0,0,.5);
}
body:has(.k.active-key.f-pinky-r)  .hand-r .pinky {
  background:#8a8a18; transform:rotate(6deg) translateY(-16px) scale(1.06);
  box-shadow:inset -2px 0 5px rgba(0,0,0,.3), inset 2px 0 5px rgba(255,255,255,.3), 0 12px 20px -9px rgba(0,0,0,.5);
}
body:has(.k.active-key.f-thumb) .hand-l .thumb,
body:has(.k.active-key.f-thumb) .hand-r .thumb {
  background:#6b7280; transform:rotate(42deg) translateY(-12px) scale(1.06);
  box-shadow:inset -2px 0 5px rgba(0,0,0,.3), inset 2px 0 5px rgba(255,255,255,.3), 0 12px 20px -9px rgba(0,0,0,.5);
}

@media (max-width:520px){
  .hands-guide{ margin-top:-8px; }
  .hand{ width:130px; height:154px; }
  .hand-l{ transform:rotate(-4deg) scale(.85); transform-origin:top center; }
  .hand-r{ transform:scaleX(-1) rotate(-4deg) scale(.85); transform-origin:top center; }
}