/* Interactive page styles — single owner.
 * Loaded after desktop-shell.css. Safe balanced extract.
 */



#desktop-interactive-learning { position:fixed; inset:0 var(--desktop-right-width) 0 var(--desktop-left-width); z-index:82; overflow-y:auto; background:#0b0d10; color:#ebeef2; }
body.desktop-nav-collapsed #desktop-interactive-learning { left:0; }
body.context-collapsed #desktop-interactive-learning { right:0; }
body.desktop-light #desktop-interactive-learning { background:#f7f9fb; color:#202833; }

/* Keep the real lesson button transparent. Earlier catalogue markup changed
   from card children to nested buttons, so generic button chrome covered the
   whole card with a grey rectangle. */
#desktop-interactive-learning .interactive-lesson-card { position:relative; }
#desktop-interactive-learning .interactive-lesson-open { display:block !important; box-sizing:border-box !important; width:100% !important; min-height:230px !important; padding:20px 21px 52px !important; border:0 !important; border-radius:0 !important; outline:0 !important; background:transparent !important; background-image:none !important; box-shadow:none !important; color:inherit !important; text-align:left !important; font:inherit !important; cursor:pointer !important; }
#desktop-interactive-learning .interactive-lesson-open > i { display:grid !important; place-items:center !important; width:36px !important; height:36px !important; margin:0 0 18px !important; border:1px solid color-mix(in srgb,var(--lesson-color) 52%,#35404a) !important; border-radius:7px !important; background:color-mix(in srgb,var(--lesson-color) 10%,#151b20) !important; color:var(--lesson-color) !important; font-size:19px !important; }
#desktop-interactive-learning .interactive-lesson-open > span { display:block !important; color:var(--lesson-color) !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.1em !important; }
#desktop-interactive-learning .interactive-lesson-open h3 { margin:7px 0 8px !important; color:#f0f4f5 !important; font-size:19px !important; line-height:1.32 !important; }
#desktop-interactive-learning .interactive-lesson-open p { min-height:56px !important; margin:0 !important; color:#94a0aa !important; font-size:12px !important; line-height:1.65 !important; }
#desktop-interactive-learning .interactive-lesson-open b { position:absolute !important; bottom:17px !important; left:21px !important; color:#d4dde0 !important; font-size:12px !important; }
#desktop-interactive-learning .interactive-completion { position:absolute !important; z-index:3 !important; top:13px !important; right:13px !important; display:inline-flex !important; align-items:center !important; gap:4px !important; min-height:0 !important; padding:5px 7px !important; border:1px solid rgba(133,149,160,.28) !important; border-radius:999px !important; background:rgba(12,16,21,.78) !important; box-shadow:none !important; color:#8e9ca5 !important; font:600 10px/1 inherit !important; cursor:pointer !important; }

/* The interactive catalog is mounted outside #app.  Keep its controls fully
   styled here instead of inheriting the browser's default button chrome. */
@media (min-width:981px) {
  #desktop-interactive-learning .interactive-learning-shell {
    width:min(1240px,calc(100% - 64px));
    margin:0 auto;
    padding:38px 0 72px;
  }
  #desktop-interactive-learning .interactive-learning-head {
    padding:0 0 28px;
    border-bottom:1px solid #252b32;
  }
  #desktop-interactive-learning .interactive-learning-head > a {
    display:inline-flex; align-items:center; min-height:28px; margin-bottom:24px;
    color:#87929e; font-size:12px; text-decoration:none;
  }
  #desktop-interactive-learning .interactive-learning-head > a:hover { color:#62d3c5; }
  #desktop-interactive-learning .interactive-hero { display:flex; align-items:center; justify-content:space-between; gap:42px; }
  #desktop-interactive-learning .interactive-hero > div { max-width:720px; }
  #desktop-interactive-learning .interactive-hero > div > span,
  #desktop-interactive-learning .interactive-section-title > div > span { color:#55d6c8; font-size:10px; font-weight:800; letter-spacing:.15em; }
  #desktop-interactive-learning .interactive-hero h1 { margin:9px 0 12px; color:#f3f7f7; font-size:42px; font-weight:820; line-height:1.1; letter-spacing:-.045em; }
  #desktop-interactive-learning .interactive-hero p { margin:0; color:#99a5ae; font-size:14px; line-height:1.75; }
  #desktop-interactive-learning .interactive-hero > aside { display:grid; grid-template-columns:38px minmax(0,1fr); column-gap:11px; min-width:180px; padding:15px 17px; border:1px solid #28544f; border-radius:9px; background:linear-gradient(135deg,rgba(20,61,56,.62),rgba(14,20,26,.84)); }
  #desktop-interactive-learning .interactive-hero > aside i { grid-row:span 2; display:grid; place-items:center; width:34px; height:34px; border-radius:7px; background:#164941; color:#5ce1d1; font-size:19px; }
  #desktop-interactive-learning .interactive-hero > aside span { color:#68d9cd; font-size:9px; font-weight:800; letter-spacing:.12em; }
  #desktop-interactive-learning .interactive-hero > aside strong { margin-top:4px; color:#edf8f6; font-size:14px; line-height:1.4; }
  #desktop-interactive-learning .interactive-progress { display:grid; grid-template-columns:auto auto minmax(180px,1fr) auto; align-items:center; gap:18px; margin-top:27px; padding:14px 17px; border:1px solid #252f35; border-radius:9px; background:rgba(17,23,29,.74); }
  #desktop-interactive-learning .interactive-progress > div:first-child { display:grid; gap:3px; }
  #desktop-interactive-learning .interactive-progress span { color:#86939c; font-size:11px; }
  #desktop-interactive-learning .interactive-progress strong { color:#dff8f4; font-size:18px; }
  #desktop-interactive-learning .interactive-progress strong small { color:#7f9191; font-size:11px; font-weight:500; }
  #desktop-interactive-learning .interactive-progress-track { height:6px; overflow:hidden; border-radius:999px; background:#222a30; }
  #desktop-interactive-learning .interactive-progress-track i { display:block; height:100%; min-width:0; border-radius:inherit; background:linear-gradient(90deg,#38cdbc,#71abf7); box-shadow:0 0 12px rgba(56,205,188,.4); }
  #desktop-interactive-learning .interactive-progress p { margin:0; color:#84909a; font-size:11px; line-height:1.45; text-align:right; }
  #desktop-interactive-learning .interactive-learning-layout { padding-top:30px; }
  #desktop-interactive-learning .interactive-section-title { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:16px; }
  #desktop-interactive-learning .interactive-section-title h2 { margin:7px 0 0; color:#eef4f4; font-size:23px; letter-spacing:-.02em; }
  #desktop-interactive-learning .interactive-section-title > p { margin:0; color:#78858e; font-size:12px; }
  #desktop-interactive-learning .interactive-lesson-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
  #desktop-interactive-learning .interactive-lesson-card { position:relative; min-height:254px; overflow:hidden; border:1px solid #29313a; border-radius:10px; background:linear-gradient(145deg,#151a20,#101318); transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
  #desktop-interactive-learning .interactive-lesson-card::after { position:absolute; right:-43px; bottom:-48px; width:144px; height:144px; border:1px solid color-mix(in srgb,var(--lesson-color) 38%,transparent); border-radius:50%; content:""; opacity:.5; pointer-events:none; }
  #desktop-interactive-learning .interactive-lesson-card:hover { border-color:var(--lesson-color); transform:translateY(-3px); box-shadow:0 16px 32px rgba(0,0,0,.25); }
  #desktop-interactive-learning .interactive-lesson-open { display:block; width:100%; min-height:254px; padding:20px 21px 76px; border:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; }
  #desktop-interactive-learning .interactive-lesson-open > i { display:grid; place-items:center; width:36px; height:36px; margin-bottom:18px; border:1px solid color-mix(in srgb,var(--lesson-color) 52%,#35404a); border-radius:7px; background:color-mix(in srgb,var(--lesson-color) 10%,#151b20); color:var(--lesson-color); font-size:19px; }
  #desktop-interactive-learning .interactive-lesson-open > span { color:var(--lesson-color); font-size:10px; font-weight:800; letter-spacing:.1em; }
  #desktop-interactive-learning .interactive-lesson-open h3 { margin:7px 0 8px; color:#f0f4f5; font-size:19px; line-height:1.32; }
  #desktop-interactive-learning .interactive-lesson-open p { min-height:56px; margin:0; color:#94a0aa; font-size:12px; line-height:1.65; }
  #desktop-interactive-learning .interactive-lesson-stats { position:absolute; left:21px; right:21px; bottom:42px; display:flex; align-items:center; justify-content:space-between; gap:9px; padding-top:9px; border-top:1px solid rgba(120,137,149,.16); color:#81909a; font-size:10px; line-height:1.2; }
  #desktop-interactive-learning .interactive-lesson-stats b { position:static; color:color-mix(in srgb,var(--lesson-color) 78%,#d7eff0); font-size:10px; font-weight:750; }
  #desktop-interactive-learning .interactive-lesson-stats span { overflow:hidden; color:#7e8993; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
  #desktop-interactive-learning .interactive-lesson-open b { position:absolute; left:21px; bottom:17px; color:#d4dde0; font-size:12px; }
  #desktop-interactive-learning .interactive-lesson-open em { margin-left:6px; color:var(--lesson-color); font-size:17px; font-style:normal; }
  #desktop-interactive-learning .interactive-completion { position:absolute; z-index:2; top:13px; right:13px; display:inline-flex; align-items:center; gap:4px; padding:5px 7px; border:1px solid rgba(133,149,160,.28); border-radius:999px; background:rgba(12,16,21,.78); color:#8e9ca5; font:600 10px/1 inherit; cursor:pointer; }
  #desktop-interactive-learning .interactive-completion i { font-size:12px; }
  #desktop-interactive-learning .interactive-lesson-card.is-completed .interactive-completion { border-color:rgba(74,217,189,.45); background:rgba(24,104,88,.24); color:#6ce2d0; }
  #desktop-interactive-learning .interactive-lesson-card.is-completed { border-color:rgba(80,204,183,.42); }
  #desktop-interactive-learning .interactive-study-bar { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; min-height:60px; padding:0 28px; border-bottom:1px solid #283038; background:#101419; }
  #desktop-interactive-learning .interactive-study-bar button,
  #desktop-interactive-learning .interactive-study-bar a { border:0; background:transparent; color:#9ba7ae; font:600 12px inherit; text-decoration:none; cursor:pointer; }
  #desktop-interactive-learning .interactive-study-bar a { color:#62d3c5; }
  #desktop-interactive-learning .interactive-study-bar div { display:flex; align-items:baseline; gap:10px; }
  #desktop-interactive-learning .interactive-study-bar span { color:#7d8a93; font-size:11px; }
  #desktop-interactive-learning .interactive-study-bar strong { color:#edf3f3; font-size:14px; }
  #desktop-interactive-learning .interactive-study-frame { display:block; width:100%; height:calc(100vh - 60px); border:0; background:#fff; }
}

@media (max-width:1180px) and (min-width:981px) {
  #desktop-interactive-learning .interactive-lesson-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #desktop-interactive-learning .interactive-progress { grid-template-columns:auto 1fr; }
  #desktop-interactive-learning .interactive-progress p { display:none; }
}

.interactive-beta-note { width:max-content; max-width:100%; margin-top:16px; padding:7px 10px; display:flex; align-items:center; gap:8px; border:1px solid rgba(106,211,197,.34); border-radius:999px; background:rgba(71,204,186,.1); color:#a8eee4; font-size:11px; line-height:1.3; }.interactive-beta-note b { color:#73e1d4; font-size:11px; }.interactive-beta-note span { color:#9ebbb8; }.interactive-beta-badge { width:max-content; margin-top:9px; padding:4px 7px; display:block; border:1px solid rgba(91,207,190,.34); border-radius:999px; background:rgba(75,207,188,.12); color:#5bd3c2; font-size:10px; font-style:normal; font-weight:750; line-height:1.2; }body.desktop-light .interactive-beta-note { border-color:rgba(51,158,143,.3); background:#effbf8; color:#3f7c74; }body.desktop-light .interactive-beta-note b,body.desktop-light .interactive-beta-badge { color:#217f72; }body.desktop-light .interactive-beta-note span { color:#5d807c; }body.desktop-light .interactive-beta-badge { border-color:rgba(41,151,135,.28); background:#ecfaf7; }

/* Daylight mode keeps the same layout, but the route card must belong to the
   light surface rather than looking like a leftover dark-theme component. */
@media (min-width:981px) {
  body.desktop-light #desktop-interactive-learning .interactive-hero > aside {
    border-color:#b9dcd7;
    background:linear-gradient(135deg,#edf9f7 0%,#f8fbfb 100%);
    box-shadow:0 8px 20px rgba(37,111,101,.07);
  }
  body.desktop-light #desktop-interactive-learning .interactive-hero > aside i {
    background:#dcf3ef;
    color:#168f83;
  }
  body.desktop-light #desktop-interactive-learning .interactive-hero > aside span { color:#168f83; }
  body.desktop-light #desktop-interactive-learning .interactive-hero > aside strong { color:#2e4b50; }

  /* This route is a long, independently scrolling catalog.  A fixed global
     signature cuts through lesson cards, so it is intentionally omitted. */
  body.route-interactive-learning #desktop-studio-credit { display:none !important; }
}

/* Make the limited beta availability unmistakable without turning the whole
   hero into a warning banner. */
.interactive-beta-note {
  min-height:46px;
  margin-top:18px;
  padding:7px 14px 7px 8px;
  gap:10px;
  border-width:1px;
  font-size:13px;
  font-weight:600;
}
.interactive-beta-note b {
  display:inline-flex;
  align-items:center;
  min-height:32px;
  padding:0 10px;
  border-radius:999px;
  background:#168f83;
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.01em;
  white-space:nowrap;
}
.interactive-beta-note span { color:#547873; font-size:13px; font-weight:600; }
body.desktop-light .interactive-beta-note {
  border-color:#9eddd4;
  background:#e8f8f5;
  box-shadow:0 5px 15px rgba(30,126,113,.08);
}
body.desktop-light .interactive-beta-note b { background:#137f74; color:#fff; }
body.desktop-light .interactive-beta-note span { color:#476e69; }

/* Interaction studio: a denser, more legible dark learning surface. */
#desktop-interactive-learning {
  background:
    linear-gradient(rgba(79,224,205,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(79,224,205,.035) 1px,transparent 1px),
    #090c10;
  background-size:44px 44px;
}
#desktop-interactive-learning .interactive-learning-shell { position:relative; }
#desktop-interactive-learning .interactive-learning-head { position:relative; }
#desktop-interactive-learning .interactive-learning-head::after {
  position:absolute; right:0; bottom:-1px; width:min(46%,480px); height:1px;
  background:linear-gradient(90deg,transparent,#45d9c7,transparent); content:"";
}
#desktop-interactive-learning .interactive-hero h1 {
  text-shadow:0 0 32px rgba(97,228,212,.12);
}
#desktop-interactive-learning .interactive-hero > aside {
  position:relative; overflow:hidden; border-color:rgba(83,232,211,.32); box-shadow:inset 0 1px rgba(255,255,255,.055),0 18px 42px rgba(0,0,0,.2);
}
#desktop-interactive-learning .interactive-hero > aside::after {
  position:absolute; width:110px; height:110px; margin:-56px 0 0 112px;
  border:1px solid rgba(85,231,210,.22); border-radius:50%; content:""; pointer-events:none;
}
#desktop-interactive-learning .interactive-progress {
  border-color:rgba(92,132,142,.32); background:rgba(13,19,25,.88); box-shadow:inset 0 1px rgba(255,255,255,.035);
}
#desktop-interactive-learning .interactive-lesson-card {
  border-color:rgba(113,137,151,.24); background:linear-gradient(155deg,rgba(25,32,40,.98),rgba(13,17,23,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.12);
}
#desktop-interactive-learning .interactive-lesson-card::before {
  position:absolute; top:0; left:20px; right:20px; height:2px;
  background:linear-gradient(90deg,transparent,var(--lesson-color),transparent); content:""; opacity:.68;
}
#desktop-interactive-learning .interactive-lesson-card:hover {
  border-color:color-mix(in srgb,var(--lesson-color) 60%,#4d5964);
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 22px 42px rgba(0,0,0,.28),0 0 0 1px color-mix(in srgb,var(--lesson-color) 11%,transparent);
}
#desktop-interactive-learning .interactive-lesson-open > i {
  box-shadow:0 0 0 5px color-mix(in srgb,var(--lesson-color) 5%,transparent),0 10px 20px rgba(0,0,0,.16);
}
#desktop-interactive-learning .interactive-lesson-card:hover .interactive-lesson-open > i {
  background:color-mix(in srgb,var(--lesson-color) 18%,#10161c) !important;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--lesson-color) 9%,transparent),0 0 22px color-mix(in srgb,var(--lesson-color) 24%,transparent);
}
#desktop-interactive-learning .interactive-lesson-stats {
  display:flex; align-items:center; gap:8px; margin-top:11px; color:#71808b;
}
#desktop-interactive-learning .interactive-lesson-stats::before { width:5px; height:5px; border-radius:50%; background:var(--lesson-color); box-shadow:0 0 9px var(--lesson-color); content:""; }
#desktop-interactive-learning .interactive-lesson-stats b { color:#b7c4c9; font-weight:700; }
#desktop-interactive-learning .interactive-lesson-stats span { color:#6e7d87; }
#desktop-interactive-learning .interactive-completion:hover,
#desktop-interactive-learning .interactive-lesson-card.is-completed .interactive-completion {
  border-color:color-mix(in srgb,var(--lesson-color) 55%,#40505a) !important;
  background:color-mix(in srgb,var(--lesson-color) 14%,#10161b) !important;
  color:var(--lesson-color) !important;
}
#desktop-interactive-learning .interactive-lesson-card.is-completed::before { opacity:1; }