/* The Java interview page's setup screen: hero, tabs, the three numbered steps beside a side
   column. Built to the 2026-09-21 design, colours read off the mockup. The quiz and result
   screens keep css/interview.css; the selection cards are still the shared .ai-pick system
   from css/tool-studio.css, restyled here through .ivj-pick rather than forked. */

/* The theme gives every bare <section> 56px of top padding. This one is a screen, not a band of
   content, and its hero has to meet the navbar. */
#screen-setup { padding: 0; }

/* ---------- hero: a full-bleed dark band, the design's own render on its right ---------- */
/* The navbar carries a bottom margin on every page; the band is meant to sit flush under it. */
.ivj-hero { position: relative; overflow: hidden; margin-top: -1.5rem; color: #fff;
  background: linear-gradient(100deg, #0b192f 0, #0d1b33 55%, #151f36 100%); }
.ivj-hero-in { position: relative; max-width: 77rem; margin: 0 auto; min-height: 17.75rem;
  padding: 2.6rem 1.9rem 2.4rem 3rem; display: flex; flex-direction: column; justify-content: center; }
/* Anchored to the inner box, not the window, so on a very wide screen it stays beside the
   words; both ends are feathered because there its right edge is no longer the window's.
   A FIXED height, pinned to the bottom: sized as a share of the band it grew with a two-line
   title ("Spring Boot Interview Practice") until it ran under the words. The top is feathered
   for the pages where the band is taller than the picture. */
.ivj-hero-art { position: absolute; bottom: 0; right: 0; height: 17.75rem; width: auto; max-width: none;
  pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%);
  mask-image: linear-gradient(90deg, transparent 0, #000 20%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.ivj-hero-txt { position: relative; z-index: 1; }
/* The heading and the lead stop short of the picture; the feature row below them may run on. */
.ivj-hero h1, .ivj-hero-lead { max-width: 35rem; }
.ivj-hero-feats { max-width: 42rem; }
.ivj-hero-pill { display: inline-flex; align-items: center; gap: .6rem; height: 2.1rem; padding: 0 1rem 0 .45rem;
  border-radius: 999px; background: #2e2f6b; font-size: .84rem; font-weight: 600; color: #faedff; }
.ivj-hero-pill > span:first-child { width: 1.4rem; height: 1.4rem; border-radius: .4rem; display: grid;
  place-items: center; font-size: .68rem; color: #fff; background: linear-gradient(135deg, #9c58fe, #6e37fe); }
.ivj-hero h1 { margin: .7rem 0 0; font-size: clamp(2rem, 4.1vw, 3.05rem); font-weight: 800; line-height: 1.1;
  letter-spacing: -.025em; color: #fff; }
.ivj-hero h1 em { font-style: normal; background: linear-gradient(90deg, #6e37fe, #7378ff);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ivj-hero-lead { margin: .75rem 0 0; font-size: 1.04rem; line-height: 1.4; color: #e4effd; }
.ivj-hero-feats { list-style: none; margin: 1.45rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; }
.ivj-hero-feats li { display: flex; align-items: center; gap: .6rem; }
.ivj-hero-feats li > span:first-child { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: .6rem;
  display: grid; place-items: center; font-size: .95rem; color: #fff; background: var(--c); }
.ivj-hero-feats b { display: block; font-size: .74rem; font-weight: 700; line-height: 1.3; color: #f9ffff; }
.ivj-hero-feats i { display: block; font-style: normal; font-size: .7rem; line-height: 1.3; color: #bfc9df; }

/* ---------- the shell under the hero ---------- */
.ivj-wrap { max-width: 77rem; margin: 0 auto; padding: 1.15rem 1.9rem 2.5rem; }
.ivj-tabs { display: flex; flex-wrap: wrap; gap: .7rem; padding: .7rem 1.2rem; border-radius: 1rem;
  background: var(--phoenix-body-emphasis-bg, #fff); box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
.ivj-tab { display: inline-flex; align-items: center; gap: .55rem; height: 2.2rem; padding: 0 1.15rem;
  border: 0; border-radius: .7rem; background: #f3f5fe; font: inherit; font-size: .74rem; font-weight: 600;
  color: #363c62; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s, transform .15s; }
.ivj-tab > .fa-solid, .ivj-tab > .fa-regular { font-size: .82rem; }
a.ivj-tab:hover, button.ivj-tab:hover { background: #e7eafd; color: #2a2f57; text-decoration: none; }
.ivj-tab.is-active, .ivj-tab.is-active:hover { color: #fff; background: linear-gradient(90deg, #4441f9, #683ef9);
  box-shadow: 0 .35rem .9rem rgba(80, 62, 249, .28); }
.ivj-tab.is-soon { cursor: default; opacity: .62; }
.ivj-tab.is-soon:hover { background: #f3f5fe; color: #363c62; }
.ivj-tab > small { margin-left: .1rem; padding: .1rem .4rem; border-radius: 999px; background: #e3e5f3;
  font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #5a5f7a; }
.ivj-tab:focus-visible { outline: 2px solid #4f46e5; outline-offset: 2px; }

.ivj-grid { display: grid; grid-template-columns: minmax(0, 1fr) 22.3rem; gap: .75rem; margin-top: .9rem;
  align-items: start; }
.ivj-panel[hidden] { display: none; }
.ivj-side { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }

/* ---------- the numbered steps ---------- */
.ivj-step { padding: .95rem 1.15rem 1.2rem; border-radius: 1rem;
  background: var(--phoenix-body-emphasis-bg, #fff); box-shadow: 0 1px 3px rgba(15, 23, 42, .05); }
.ivj-step + .ivj-step { margin-top: .45rem; }
.ivj-step-head { display: flex; align-items: flex-start; gap: .95rem; margin: 0 0 .85rem; }
.ivj-step-n { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .95rem; font-weight: 800; color: #f4f9ff; background: linear-gradient(145deg, #6a76f5, #4a45ee); }
.ivj-step-head h2 { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.25; color: #010222; }
.ivj-step-head p { margin: .12rem 0 0; font-size: .76rem; color: #5d6177; }
.ivj-step-more { margin-left: auto; align-self: center; font-size: .72rem; font-weight: 600; color: #3848a8;
  text-decoration: none; white-space: nowrap; }
.ivj-step-more:hover { color: #4f46e5; text-decoration: none; }
.ivj-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
/* four choices read better as two rows of two than as three and a straggler */
.ivj-picks.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* .ai-pick, in this page's proportions: a bigger tile that takes its two colours from the
   card, the tick pinned to the corner, and a lavender wash on the chosen card as drawn. */
.ivj-pick.ai-pick { align-items: center; gap: .95rem; min-height: 5.3rem; padding: .8rem 1rem .8rem .8rem;
  border-color: #eef0f6; box-shadow: none; }
.ivj-pick.ai-pick.is-short { min-height: 4.6rem; }
.ivj-pick.ai-pick .ico { width: 3.4rem; height: 3.4rem; flex: 0 0 3.4rem; border: 0; border-radius: .95rem;
  font-size: 1.55rem; background: var(--tile, #eef2ff); color: var(--ico, #4f46e5); }
.ivj-pick.ai-pick .ico .is-text { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.9rem;
  line-height: 1; }
.ivj-pick.ai-pick .t { font-size: .82rem; font-weight: 800; color: #010121; }
.ivj-pick.ai-pick .s { margin-top: .2rem; font-size: .72rem; line-height: 1.45; color: #6a688c; }
.ivj-pick.ai-pick .tick { position: absolute; top: .7rem; right: .75rem; width: 1.2rem; height: 1.2rem;
  font-size: .6rem; background: #6954f1; }
.ivj-pick.ai-pick.sel { border-color: #6f5ff0; background: #f1eefe; transform: none;
  box-shadow: 0 0 0 1px #6f5ff0, 0 .4rem 1rem rgba(105, 84, 241, .14); }
.ivj-pick.ai-pick.is-empty { opacity: .55; cursor: not-allowed; }
.ivj-pick.ai-pick.is-empty:hover { transform: none; box-shadow: none; border-color: #eef0f6; }

/* ---------- the start row ---------- */
.ivj-launch { position: relative; margin-top: 1.4rem; padding: 0 0 .4rem; text-align: center; }
.ivj-start { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; min-width: 25rem;
  height: 3.75rem; padding: 0 2rem; border: 0; border-radius: .95rem; font: inherit; font-size: 1.04rem; font-weight: 800;
  color: #fff; cursor: pointer; background: linear-gradient(90deg, #2a5afe, #403efb 50%, #7f43fa);
  box-shadow: 0 .8rem 1.7rem rgba(67, 63, 255, .3); transition: transform .15s, box-shadow .15s; }
.ivj-start:hover { transform: translateY(-1px); box-shadow: 0 1rem 2rem rgba(67, 63, 255, .38); }
.ivj-start:disabled { opacity: .6; cursor: progress; transform: none; }
.ivj-start:focus-visible { outline: 2px solid #4f46e5; outline-offset: 3px; }
.ivj-start .fa-arrow-right { transition: transform .15s; }
.ivj-start:hover .fa-arrow-right { transform: translateX(3px); }
.ivj-launch-meta { margin: .95rem 0 0; font-size: .78rem; color: #686d85; }
.ivj-launch-meta .fa-lock { margin-right: .35rem; color: #3a4576; }
.ivj-launch-hint { min-height: 1.2rem; margin: .45rem 0 0; font-size: .74rem; color: #5d6177; }
.ivj-launch-meta a, .ivj-launch-hint a { font-weight: 700; color: #3730a8; text-decoration: none; }
[data-bs-theme="dark"] .ivj-launch-meta a, [data-bs-theme="dark"] .ivj-launch-hint a { color: #a5b4fc; }
.ivj-note { position: absolute; top: .1rem; font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Comic Sans MS", cursive;
  font-size: 1.12rem; line-height: 1.3; color: #3a4bb6; pointer-events: none; }
.ivj-note.l { left: 1.6rem; transform: rotate(-9deg); }
.ivj-note.r { right: 1.4rem; transform: rotate(-9deg); }
.ivj-note svg { display: block; width: 3.6rem; height: 1.5rem; margin: .1rem 0 0 3.4rem; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ivj-note.r svg { margin: .1rem 0 0 -1.2rem; }

/* ---------- the side column ---------- */
.ivj-card { padding: 1.1rem 1.2rem 1.2rem; border-radius: 1rem; border: 1px solid #e9eefb; }
.ivj-card-head { display: flex; align-items: center; gap: .85rem; margin: 0 0 1rem; }
.ivj-card-head h2 { margin: 0; font-size: 1rem; font-weight: 800; color: #000123; }
.ivj-card-head a, .ivj-card-head button { margin-left: auto; border: 0; background: none; padding: 0; font: inherit;
  font-size: .74rem; font-weight: 700; color: #3730a8; text-decoration: none; white-space: nowrap; cursor: pointer; }
.ivj-card-head a:hover, .ivj-card-head button:hover { color: #4f46e5; }
.ivj-card-ico { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; border-radius: .7rem; display: grid; place-items: center;
  font-size: 1.35rem; }
.ivj-why { background: #eef3fd; }
.ivj-why .ivj-card-ico { color: #0f39f8; font-size: 1.9rem; background: none; }
.ivj-why ul { list-style: none; margin: 0; padding: 0 0 0 .25rem; display: flex; flex-direction: column; gap: .6rem; }
.ivj-why li { display: flex; align-items: center; gap: .75rem; font-size: .8rem; color: #353952; }
.ivj-why li > .fa-circle-check { font-size: 1.15rem; color: #0ab94a; }

.ivj-prog { background: #f7f9fd; }
.ivj-prog .ivj-card-ico { color: #6e37fe; background: #eceafd; }
.ivj-prog-body { display: flex; align-items: center; gap: 1rem; }
.ivj-ring { --p: 0; flex: 0 0 auto; position: relative; width: 6.6rem; height: 6.6rem; border-radius: 50%;
  background: conic-gradient(#2cb368 calc(var(--p) * 1%), #efeef3 0); display: grid; place-items: center; }
.ivj-ring::before { content: ""; position: absolute; inset: .62rem; border-radius: 50%; background: #fff; }
.ivj-ring > span { position: relative; text-align: center; line-height: 1.2; }
.ivj-ring b { display: block; font-size: 1.12rem; font-weight: 800; color: #000120; }
.ivj-ring i { display: block; font-style: normal; font-size: .62rem; color: #75768b; }
.ivj-stats { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: .58rem; }
.ivj-stats > div { display: flex; align-items: center; gap: .45rem; font-size: .72rem; color: #6c6e84; }
.ivj-stats > div::before { content: ""; flex: 0 0 auto; width: .4rem; height: .4rem; border-radius: 50%; background: #22b15c; }
.ivj-stats dt { font-weight: 500; }
.ivj-stats dd { margin: 0 0 0 auto; font-size: .78rem; font-weight: 800; color: #070627; }
.ivj-prog-guest { margin: .9rem 0 0; font-size: .74rem; line-height: 1.5; color: #5d6177; }
.ivj-prog-guest a { font-weight: 700; color: #3730a8; text-decoration: none; }
.ivj-quote { position: relative; margin: 1rem 0 0; padding: 1.05rem 1rem 1.05rem 2.9rem; border-radius: .9rem;
  background: #e7e8fc; font-size: .88rem; font-style: italic; line-height: 1.55; color: #444670; }
.ivj-quote > .fa-quote-left { position: absolute; top: .55rem; left: .8rem; font-size: 1.15rem; font-style: normal; color: #4130f7; }

.ivj-pop { background: linear-gradient(180deg, #fef7eb, #faf4ed); border-color: #faecd6; }
.ivj-pop .ivj-card-head { margin-bottom: .75rem; }
.ivj-pop .ivj-card-head { gap: .6rem; }
.ivj-pop .ivj-card-head h2 { font-size: .8rem; letter-spacing: -.01em; white-space: nowrap; }
.ivj-pop .ivj-card-head > .fa-fire { font-size: 1.35rem; color: #ff3e14; }
.ivj-pop ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.ivj-pop li > button, .ivj-pop li > a { width: 100%; text-decoration: none; display: flex; align-items: center; gap: 1rem; padding: .38rem .4rem; border: 0;
  border-radius: .55rem; background: none; font: inherit; font-size: .79rem; text-align: left; color: #2d2e3c; cursor: pointer;
  transition: background-color .15s; }
.ivj-pop li > button:hover, .ivj-pop li > a:hover { background: rgba(255, 170, 60, .16); text-decoration: none; }
.ivj-pop li > button:focus-visible, .ivj-pop li > a:focus-visible { outline: 2px solid #4f46e5; outline-offset: 1px; }
.ivj-pop li > button > b, .ivj-pop li > a > b { flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid;
  place-items: center; font-size: .72rem; font-weight: 800; background: #e2e3fb; color: #090b56; }

/* ---------- the other two panels ---------- */
.ivj-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.ivj-signin { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.ivj-signin > .fa-fire { font-size: 1.6rem; color: #f59e0b; }
.ivj-signin > div { flex: 1 1 14rem; font-size: .82rem; color: #5d6177; }
.ivj-signin b { display: block; font-size: .9rem; color: #010222; }
.ivj-topicbars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem 1.5rem; }

/* ---------- dark theme ---------- */
[data-bs-theme="dark"] .ivj-tabs, [data-bs-theme="dark"] .ivj-step { background: #141827; box-shadow: none; }
[data-bs-theme="dark"] .ivj-tab { background: #1b2133; color: #c3c9dc; }
[data-bs-theme="dark"] a.ivj-tab:hover, [data-bs-theme="dark"] button.ivj-tab:hover { background: #232a40; color: #eef1fb; }
[data-bs-theme="dark"] .ivj-tab.is-active { color: #fff; background: linear-gradient(90deg, #4441f9, #683ef9); }
[data-bs-theme="dark"] .ivj-tab > small { background: #232a40; color: #a3abc2; }
[data-bs-theme="dark"] .ivj-step-head h2, [data-bs-theme="dark"] .ivj-card-head h2, [data-bs-theme="dark"] .ivj-pick.ai-pick .t,
[data-bs-theme="dark"] .ivj-ring b, [data-bs-theme="dark"] .ivj-stats dd, [data-bs-theme="dark"] .ivj-signin b { color: #eef1fb; }
[data-bs-theme="dark"] .ivj-step-head p, [data-bs-theme="dark"] .ivj-pick.ai-pick .s, [data-bs-theme="dark"] .ivj-launch-meta,
[data-bs-theme="dark"] .ivj-launch-hint, [data-bs-theme="dark"] .ivj-stats > div, [data-bs-theme="dark"] .ivj-ring i,
[data-bs-theme="dark"] .ivj-prog-guest, [data-bs-theme="dark"] .ivj-signin > div { color: #a3abc2; }
[data-bs-theme="dark"] .ivj-step-more, [data-bs-theme="dark"] .ivj-card-head a, [data-bs-theme="dark"] .ivj-card-head button,
[data-bs-theme="dark"] .ivj-prog-guest a, [data-bs-theme="dark"] .ivj-note, [data-bs-theme="dark"] .ivj-launch-meta .fa-lock { color: #a5b4fc; }
[data-bs-theme="dark"] .ivj-pick.ai-pick { border-color: #262d45; background: #181d2f; }
[data-bs-theme="dark"] .ivj-pick.ai-pick .ico { background: color-mix(in srgb, var(--ico) 20%, #141827);
  color: color-mix(in srgb, var(--ico) 60%, #fff); }
[data-bs-theme="dark"] .ivj-pick.ai-pick.sel { background: rgba(111, 95, 240, .16); border-color: #8f80fb; }
[data-bs-theme="dark"] .ivj-card { border-color: #262d45; }
[data-bs-theme="dark"] .ivj-why, [data-bs-theme="dark"] .ivj-prog { background: #171c2e; }
[data-bs-theme="dark"] .ivj-why li { color: #c3c9dc; }
[data-bs-theme="dark"] .ivj-ring { background: conic-gradient(#2cb368 calc(var(--p) * 1%), #262d45 0); }
[data-bs-theme="dark"] .ivj-ring::before { background: #171c2e; }
[data-bs-theme="dark"] .ivj-quote { background: rgba(129, 140, 248, .12); color: #c7cdea; }
[data-bs-theme="dark"] .ivj-pop { background: rgba(251, 191, 36, .07); border-color: rgba(251, 191, 36, .16); }
[data-bs-theme="dark"] .ivj-pop li > button, [data-bs-theme="dark"] .ivj-pop li > a { color: #dfe3f3; }
[data-bs-theme="dark"] .ivj-pop li > button > b, [data-bs-theme="dark"] .ivj-pop li > a > b { background: #232a40; color: #c7d2fe; }

/* ---------- narrower ---------- */
@media (max-width: 1199.98px) { .ivj-hero-art { opacity: .55; }
  .ivj-grid { grid-template-columns: minmax(0, 1fr); }
  .ivj-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ivj-pop { grid-column: 1 / -1; } }
/* Behind the words from here down, so it is turned right down, and dropped on a phone. */
@media (max-width: 991.98px) { .ivj-hero-art { opacity: .2; }
  .ivj-hero-in { padding: 2rem 1.25rem; min-height: 0; } .ivj-wrap { padding: 1rem 1rem 2rem; }
  .ivj-note { display: none; } }
@media (max-width: 767.98px) { .ivj-picks, .ivj-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivj-side, .ivj-topicbars { grid-template-columns: minmax(0, 1fr); } .ivj-start { min-width: 0; width: 100%; }
  .ivj-step-more { display: none; } }
@media (max-width: 575.98px) { .ivj-hero-art { display: none; } }
@media (max-width: 479.98px) { .ivj-picks, .ivj-picks.cols-2, .ivj-quick { grid-template-columns: minmax(0, 1fr); }
  .ivj-tabs { padding: .6rem; gap: .45rem; } .ivj-tab { padding: 0 .8rem; } }
@media (prefers-reduced-motion: reduce) { .ivj-tab, .ivj-start, .ivj-start .fa-arrow-right, .ivj-pop li > button { transition: none; }
  .ivj-start:hover { transform: none; } }

/* ---------- the LIGHT hero of the quiz pages (2026-09-21 design) ----------
   The mockup is drawn 1983px wide with a 718px band, so everything here is in EM off one
   viewport-scaled font-size: 16px reproduces it, and a laptop gets the same composition
   smaller. Small text has a px floor (max(...)), because a proportional 9px caption is not
   a caption. The dark .ivj-hero above is still what ai-interview.html wears. */
.ivj-hl { position: relative; overflow: hidden; margin-top: -1.5rem; font-size: clamp(9.6px, .807vw, 16px);
  background:
    radial-gradient(34em 13em at 49% 100%, rgba(208, 208, 247, .75), transparent 72%),
    radial-gradient(40em 26em at 41% 16%, rgba(255, 255, 255, .8), transparent 70%),
    linear-gradient(100deg, #f3f1fd 0, #f5f8fe 35%, #f1f7fe 62%, #eef2fe 100%); }
.ivj-hl-in { position: relative; min-height: 44.875em; }
.ivj-hl-txt { position: relative; z-index: 2; max-width: 55.5em; padding: 3.3em 0 1.4em 5.75em; }

.ivj-hl-pills { margin: 0; display: flex; align-items: center; gap: .5em; }
.ivj-hl-pills > span { display: inline-flex; align-items: center; height: 2.5em; border-radius: 999px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ivj-hl-pills .a { gap: .8em; padding: 0 1.4em 0 1em; font-size: max(.94em, 10.5px); background: #ebe6fe; color: #3f23a6; }
.ivj-hl-pills .a > .fa-trophy { font-size: 1.35em; color: #f8910b; }
.ivj-hl-pills .b { padding: 0 1.1em; font-size: max(.88em, 10px); font-weight: 700; letter-spacing: .03em; background: #daf7fc; color: #2d6081; }

.ivj-hl h1 { margin: .2em 0 0; font-size: 4.95em; font-weight: 800; line-height: .95; letter-spacing: -.025em; color: #060b20; }
.ivj-hl h1 em { display: block; padding-bottom: .08em; font-size: .885em; line-height: 1.08; font-style: normal; white-space: nowrap;
  background: linear-gradient(90deg, #5827fe 0, #3d4efd 50%, #1681ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ivj-hl-lead { margin: .55em 0 0; max-width: 31.5em; font-size: max(1.375em, 14px); line-height: 1.45; color: #50556e; }

.ivj-hl-feats { list-style: none; margin: 2.1em 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1em 1.6em; }
.ivj-hl-feats li { display: flex; align-items: center; gap: .85em; }
.ivj-hl-feats li > span:first-child { flex: 0 0 auto; width: 3.1em; height: 3.1em; min-width: 34px; min-height: 34px; border-radius: .8em;
  display: grid; place-items: center; background: var(--tile); color: var(--ico); }
.ivj-hl-feats li > span:first-child > span { font-size: max(1.5em, 15px); }
.ivj-hl-feats b { display: block; font-size: max(.85em, 11.5px); font-weight: 800; line-height: 1.35; color: #020a30; }
.ivj-hl-feats i { display: block; font-style: normal; font-size: max(.79em, 11px); line-height: 1.35; color: #71758a; }

.ivj-hl-cta { margin: 2.1em 0 0; display: flex; flex-wrap: wrap; gap: 1.5em; }
.ivj-hl-start, .ivj-hl-more { display: inline-flex; align-items: center; justify-content: center; height: 3.45em;
  border-radius: .75em; font-size: max(1.12em, 13.5px); font-weight: 800; text-decoration: none; white-space: nowrap;
  transition: transform .15s, box-shadow .15s; }
.ivj-hl-start { gap: .9em; padding: 0 2.45em; color: #fff; background: linear-gradient(90deg, #4950fb, #793ffd 60%, #8942fd);
  box-shadow: 0 .7em 1.6em rgba(104, 70, 252, .32); }
.ivj-hl-start:hover { color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 .9em 1.9em rgba(104, 70, 252, .4); }
.ivj-hl-start > .fa-play { font-size: 1.25em; }
.ivj-hl-start > .fa-arrow-right { transition: transform .15s; }
.ivj-hl-start:hover > .fa-arrow-right { transform: translateX(3px); }
.ivj-hl-more { gap: .8em; padding: 0 1.7em; color: #4522ba; background: rgba(255, 255, 255, .85); border: 1.5px solid #e0dbf8; }
.ivj-hl-more:hover { color: #4522ba; text-decoration: none; transform: translateY(-1px); box-shadow: 0 .6em 1.3em rgba(80, 60, 200, .12); }
.ivj-hl-start:focus-visible, .ivj-hl-more:focus-visible { outline: 2px solid #4f46e5; outline-offset: 3px; }

.ivj-hl-chips { margin: 1.9em 0 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25em .1em; min-height: 2.75em;
  padding: .2em 1.2em .2em .35em; border-radius: 999px; background: rgba(226, 230, 252, .62); font-size: max(.94em, 11.5px); color: #5a5e7b; }
.ivj-hl-chips > .j { width: 2.3em; height: 2.3em; margin-right: .5em; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #d81406; font-size: 1em; }
.ivj-hl-chips button { border: 0; background: none; padding: .1em .35em; font: inherit; color: inherit; cursor: pointer; border-radius: .4em; }
.ivj-hl-chips button:hover { color: #3f23a6; background: rgba(255, 255, 255, .7); }
.ivj-hl-chips button:focus-visible { outline: 2px solid #4f46e5; }
.ivj-hl-chips button + button::before { content: "\2022"; margin: 0 .75em 0 .35em; color: #8b8fb0; }

.ivj-hl-note { margin: .9em 0 0 -1.1em; width: max-content; font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Comic Sans MS", cursive;
  font-size: max(1.2em, 12px); line-height: 1.25; color: #475aa9; transform: rotate(-8deg); transform-origin: left center; }
.ivj-hl-note svg { display: block; width: 8.5em; height: 1.4em; margin: -.1em 0 0 10em; fill: none; stroke: #6d47d8; stroke-width: 2; stroke-linecap: round; }

/* The scene. Pinned bottom-right at the design's size; the band may be taller than it on a
   narrower window, so its top is feathered. Its left edge is cut in two pieces: the upper part
   starts after where the mockup PAINTED its topic cards (the live ones stand there instead), the
   lower part keeps the notebook. */
.ivj-hl-art { position: absolute; z-index: 1; right: 0; bottom: 0; width: 60.19em; aspect-ratio: 963 / 718; }
.ivj-hl-art > img { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%),
    linear-gradient(90deg, transparent 10.9%, #000 13.2%), linear-gradient(90deg, transparent 0, #000 8%);
  mask-image: linear-gradient(180deg, transparent 0, #000 4%),
    linear-gradient(90deg, transparent 10.9%, #000 13.2%), linear-gradient(90deg, transparent 0, #000 8%);
  -webkit-mask-size: 100% 100%, 100% 72.5%, 100% 27.5%; mask-size: 100% 100%, 100% 72.5%, 100% 27.5%;
  -webkit-mask-position: 0 0, 0 0, 0 100%; mask-position: 0 0, 0 0, 0 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in, source-over; mask-composite: intersect, add; }

.ivj-hl-topics { position: absolute; left: -8.9em; top: 3.6em; width: 15.4em; margin: 0; padding: .45em; list-style: none;
  display: flex; flex-direction: column; gap: .2em; border-radius: 1.5em; background: rgba(255, 255, 255, .38);
  box-shadow: 0 1.2em 2.6em rgba(86, 80, 180, .13); transform: perspective(70em) rotateY(7deg); transform-origin: right center; }
.ivj-hl-topics button { width: 100%; min-height: 4.2em; display: flex; align-items: center; gap: 1.2em; padding: .4em .9em .4em 1.2em;
  border: 1px solid rgba(255, 255, 255, .95); border-radius: 1.05em; background: rgba(250, 251, 255, .86); font: inherit; text-align: left;
  color: #030830; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform .15s, box-shadow .15s, background-color .15s; }
.ivj-hl-topics button:hover { background: #fff; transform: translateX(-3px); box-shadow: 0 .5em 1.2em rgba(86, 80, 180, .16); }
.ivj-hl-topics button:focus-visible { outline: 2px solid #4f46e5; outline-offset: 1px; }
.ivj-hl-topics .ti { flex: 0 0 auto; width: 2.95em; height: 2.95em; border-radius: .75em; display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--ico) 72%, #fff), var(--ico));
  box-shadow: 0 .35em .8em color-mix(in srgb, var(--ico) 35%, transparent); }
.ivj-hl-topics .ti > span { font-size: 1.35em; }
.ivj-hl-topics .ti > .is-text { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 1.6em; line-height: 1; }
.ivj-hl-topics .lb { flex: 1 1 auto; min-width: 0; font-size: max(1.06em, 11px); font-weight: 800; line-height: 1.25; }
.ivj-hl-topics .ch { flex: 0 0 auto; font-size: .8em; color: #5d5fa8; }

/* Opaque on purpose: it covers the card the mockup painted here, numbers and all. */
.ivj-hl-prog { position: absolute; left: 39.3em; top: 14.3em; width: 19.7em; height: 12.7em; padding: 0 1.2em 0 1.5em;
  display: flex; align-items: center; gap: 1.5em; border-radius: 1.5em; border: 1px solid #fff;
  background: linear-gradient(140deg, #f9fbff, #e9effc); box-shadow: 0 1em 2.2em rgba(70, 80, 170, .18); }
.ivj-hl-ring { --p: 0; flex: 0 0 auto; position: relative; width: 6em; height: 6em; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(#5e34ff calc(var(--p) * 1%), #dfe1fa 0); }
.ivj-hl-ring::before { content: ""; position: absolute; inset: .85em; border-radius: 50%; background: #fff; }
.ivj-hl-ring > b { position: relative; font-size: max(1.4em, 12px); font-weight: 800; color: #000528; }
.ivj-hl-prog-body { display: flex; flex-direction: column; gap: .62em; min-width: 0; }
.ivj-hl-prog-body > b { margin-bottom: .2em; font-size: max(1.06em, 11px); font-weight: 800; color: #000528; white-space: nowrap; }
.ivj-hl-prog-body > span { display: flex; align-items: center; gap: .7em; font-size: max(.85em, 10px); color: #424867; white-space: nowrap; }
.ivj-hl-prog-body > span > .fa-solid { width: 1.2em; font-size: 1.25em; text-align: center; }
.ivj-hl-prog-body > span > span:nth-child(2) { margin-right: -.35em; font-weight: 700; }

#practice { scroll-margin-top: 1rem; }

[data-bs-theme="dark"] .ivj-hl { background: linear-gradient(100deg, #141827, #171c2e 60%, #1b2133); }
[data-bs-theme="dark"] .ivj-hl h1, [data-bs-theme="dark"] .ivj-hl-feats b { color: #eef1fb; }
[data-bs-theme="dark"] .ivj-hl h1 em { background: linear-gradient(90deg, #a5b4fc, #7dd3fc); -webkit-background-clip: text; background-clip: text; }
[data-bs-theme="dark"] .ivj-hl-lead, [data-bs-theme="dark"] .ivj-hl-feats i, [data-bs-theme="dark"] .ivj-hl-chips { color: #a3abc2; }
[data-bs-theme="dark"] .ivj-hl-pills .a { background: rgba(129, 140, 248, .16); color: #c4b5fd; }
[data-bs-theme="dark"] .ivj-hl-pills .b { background: rgba(34, 211, 238, .12); color: #7dd3fc; }
[data-bs-theme="dark"] .ivj-hl-more { background: #1b2133; border-color: #2a3250; color: #c4b5fd; }
[data-bs-theme="dark"] .ivj-hl-chips { background: rgba(255, 255, 255, .06); }
[data-bs-theme="dark"] .ivj-hl-note { color: #a5b4fc; }
[data-bs-theme="dark"] .ivj-hl-feats li > span:first-child { background: color-mix(in srgb, var(--ico) 22%, #141827); color: color-mix(in srgb, var(--ico) 60%, #fff); }
[data-bs-theme="dark"] .ivj-hl-art > img { border-radius: 2em 0 0 0; opacity: .92; }

/* Below the bar's own collapse point the scene goes behind the words, faint, and the two live
   cards go: they are shortcuts to things that are one scroll away on a narrow screen. */
@media (max-width: 1199.98px) { .ivj-hl { font-size: 14px; } .ivj-hl-in { min-height: 0; }
  .ivj-hl-txt { max-width: none; padding: 2.4em 1.4em 2.2em; } .ivj-hl h1 { font-size: clamp(2.2rem, 6.4vw, 3.4rem); }
  .ivj-hl h1 em { white-space: normal; } .ivj-hl-art { width: min(60.19em, 92vw); opacity: .16; }
  .ivj-hl-topics, .ivj-hl-prog { display: none; } .ivj-hl-note { display: none; } }
@media (max-width: 575.98px) { .ivj-hl-art { display: none; } .ivj-hl-cta { gap: .8em; }
  .ivj-hl-start, .ivj-hl-more { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ivj-hl-start, .ivj-hl-more, .ivj-hl-start > .fa-arrow-right, .ivj-hl-topics button { transition: none; }
  .ivj-hl-start:hover, .ivj-hl-more:hover, .ivj-hl-topics button:hover { transform: none; } }