/* One animated viewport layer behind the site's translucent panels. */
.jik-rain-page {
  isolation: isolate;
  --jik-panel: rgb(255 255 255 / .72);
  --jik-chrome: rgb(248 250 255 / .84);
  --jik-rain-ink: #455780;
  background: #eef1f9;
}
[data-bs-theme="dark"] .jik-rain-page {
  --jik-panel: rgb(27 32 44 / .76);
  --jik-chrome: rgb(29 35 48 / .86);
  --jik-rain-ink: #a9b7dd;
  background: #0e1421;
}
.jik-rain-page .app-shell { position: relative; background: transparent; }
.jik-rain-page .app-topbar,
.jik-rain-page .app-sidebar { background: var(--jik-chrome) !important; }
.jik-rain-page .app-page > footer { background: var(--jik-chrome); }
.jik-rain-page .card { --bs-card-bg: var(--jik-panel); background-color: var(--jik-panel); }
.jik-rain-page .code-panel,
.jik-rain-page .applet-canvas-shell { background: var(--jik-panel); }
.jik-rain-page main > section:not(.hero):not(.jik-tutorial) {
  background: var(--jik-panel);
  border: 1px solid var(--bs-border-color, #d8deeb);
  border-radius: 1rem;
  padding: clamp(1rem, 2vw, 1.8rem);
}
.jik-code-hero { position: relative; background: radial-gradient(circle at 90% 10%, #6f42c155 0, transparent 45%), linear-gradient(135deg, #111827cc, #212529b8 68%); background-color: transparent !important; }
.jik-code-hero .jik-hero-content { position: relative; }
.jik-code-rain { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; user-select: none; contain: strict; }
.jik-rain-snippet { position: absolute; top: 0; left: var(--lane); width: max-content; max-width: 28rem; color: var(--jik-rain-ink); opacity: .48; border-left: 1px solid currentColor; padding: .45rem .8rem; transform: translate3d(0, var(--still-y), 0); }
.jik-rain-snippet > span { display: block; margin-bottom: .5rem; font: 600 .62rem/1.4 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .14em; color: inherit; }
.jik-rain-snippet pre { margin: 0; white-space: pre; font: .79rem/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
.jik-code-rain[data-motion="ready"] .jik-rain-snippet { animation: jik-fall var(--duration) linear var(--delay) infinite; animation-play-state: paused; }
.jik-code-rain[data-running="true"] .jik-rain-snippet { animation-play-state: running; }
@keyframes jik-fall {
  0% { transform: translate3d(-10px, -110%, 0); opacity: 0; }
  10% { opacity: .54; }
  82% { opacity: .48; }
  100% { transform: translate3d(14px, var(--fall-height, 110vh), 0); opacity: 0; }
}
/* Light-background ink differs from the readable dark tutorial editor palette. */
.jik-code-rain .jik-token-native { color: #614595; }
.jik-code-rain .jik-token-form { color: #315b94; }
.jik-code-rain .jik-token-number { color: #875029; }
.jik-code-rain .jik-token-string, .jik-code-rain .jik-token-keyword { color: #226d5f; }
.jik-code-rain .jik-token-comment, .jik-code-rain .jik-token-punctuation { color: #536587; }
[data-bs-theme="dark"] .jik-code-rain .jik-token-native { color: #b9a7ff; }
[data-bs-theme="dark"] .jik-code-rain .jik-token-form { color: #8fbeff; }
[data-bs-theme="dark"] .jik-code-rain .jik-token-number { color: #f3c88e; }
[data-bs-theme="dark"] .jik-code-rain .jik-token-string,
[data-bs-theme="dark"] .jik-code-rain .jik-token-keyword { color: #99dec8; }
[data-bs-theme="dark"] .jik-code-rain .jik-token-comment,
[data-bs-theme="dark"] .jik-code-rain .jik-token-punctuation { color: #9aaccb; }
.jik-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: 1.6rem; }
.jik-hero-actions a { color: #ddd4ff; text-underline-offset: .3em; font-size: .9rem; }
.jik-motion-button { border: 1px solid #b0a5cd80; border-radius: 2rem; background: #141e30cc; color: #e2ddf0; padding: .4rem .85rem; font-size: .78rem; }
.jik-motion-floating { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1020; max-width: calc(100vw - 2.2rem); min-height: 2.7rem; box-shadow: 0 3px 16px #0003; }
.jik-motion-button:disabled { opacity: .75; }
.jik-motion-button:focus-visible, .jik-tutorial button:focus-visible, .jik-tutorial select:focus-visible, .jik-tutorial pre:focus-visible { outline: 3px solid #9786ff; outline-offset: 3px; }
.jik-tutorial { scroll-margin-top: 5rem; border: 1px solid var(--bs-border-color, #d8deeb); border-radius: 1rem; background: var(--jik-panel, #fff); overflow: hidden; }
.jik-tutorial-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.8rem 2rem 1.1rem; }
.jik-tutorial-heading h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -.025em; }
.jik-tutorial-heading p:last-child { margin: .6rem 0 0; max-width: 48rem; color: var(--bs-secondary-color, #596579); }
.jik-language-mark { font: 500 3.6rem/1 ui-monospace, Consolas, monospace; color: var(--bs-primary, #0d6efd); opacity: .18; letter-spacing: -.12em; padding-right: .4rem; }
.jik-tutorial-controls { display: flex; justify-content: space-between; align-items: end; gap: 1rem; padding: .5rem 2rem 1.5rem; }
.jik-tutorial [hidden] { display: none !important; }
.jik-topic-picker { display: flex; flex-direction: column; gap: .4rem; flex: 1; max-width: 24rem; }
.jik-topic-picker label { font-size: .78rem; font-weight: 600; color: var(--bs-secondary-color, #596579); }
.jik-topic-picker select { width: 100%; min-height: 2.65rem; border: 1px solid var(--bs-border-color, #cbd2df); border-radius: .5rem; color: var(--bs-body-color, #202c40); background: var(--bs-body-bg, #fff); padding: .45rem .7rem; font-size: .95rem; }
.jik-stepper { display: flex; align-items: center; gap: .85rem; }
.jik-stepper span { min-width: 3.2rem; text-align: center; font: .78rem ui-monospace, monospace; color: var(--bs-secondary-color, #596579); }
.jik-stepper button { border: 1px solid var(--bs-border-color, #cbd2df); border-radius: 50%; width: 2.5rem; height: 2.5rem; background: var(--bs-body-bg, #fff); color: var(--bs-body-color, #202c40); }
.jik-lesson { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-top: 1px solid var(--bs-border-color, #d8deeb); }
.jik-lesson-code { background: #111a2be8; color: #e0e7f6; min-width: 0; }
.jik-file-bar { display: flex; justify-content: space-between; align-items: center; min-height: 3rem; border-bottom: 1px solid #ffffff12; padding: .65rem 1.35rem; color: #a9b6d1; font: .73rem ui-monospace, monospace; gap: .6rem; }
.jik-file-dot { display: inline-block; width: .45rem; height: .45rem; margin-right: .6rem; background: #a997ff; border-radius: 50%; }
.jik-copy { color: #d7dff0; background: #ffffff0a; border: 1px solid #637394; border-radius: .3rem; padding: .25rem .6rem; font: .73rem system-ui, sans-serif; }
.jik-lesson-code pre { padding: 1.55rem 1.35rem; margin: 0; min-height: 12rem; font: .87rem/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; overflow: auto; white-space: pre; }
.jik-lesson-code code { color: inherit; font-size: inherit; }
.jik-result { border-top: 1px solid #ffffff12; padding: .9rem 1.35rem 1.2rem; }
.jik-result > span { display: block; margin-bottom: .45rem; color: #9daecb; font-size: .67rem; letter-spacing: .12em; text-transform: uppercase; }
.jik-result > code { color: #b1ebd4; display: block; white-space: pre-wrap; overflow-wrap: anywhere; font: .83rem/1.6 ui-monospace, monospace; }
.jik-lesson-explanation { padding: 1.6rem 1.9rem; }
.jik-lesson-number { color: var(--bs-secondary-color, #596579); font: .72rem ui-monospace, monospace; }
.jik-lesson-explanation h3 { font-size: 1.3rem; font-weight: 700; margin: .75rem 0; }
.jik-lesson-explanation p { line-height: 1.75; font-size: .94rem; }
.jik-lesson-note { font-size: .83rem !important; color: var(--bs-secondary-color, #596579); }
.jik-lesson-explanation .btn { margin-top: .3rem; font-size: .86rem; }
.jik-copy-status { min-height: 1.2rem; font-size: .82rem; margin: .65rem 1.5rem; }
.jik-token-native { color: #b9a7ff; }
.jik-token-form { color: #8fbeff; }
.jik-token-number { color: #f3c88e; }
.jik-token-string, .jik-token-keyword { color: #99dec8; }
.jik-token-comment { color: #9aabc6; }
.jik-token-punctuation { color: #9aaccb; }
@media (max-width: 1199.98px) {
  .jik-lesson { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
  .jik-code-rain { opacity: .8; }
  .jik-rain-snippet:nth-child(n+5) { display: none; }
  .jik-rain-snippet { left: var(--mobile-lane); }
  .jik-tutorial-heading { padding: 1.3rem 1.2rem .8rem; }
  .jik-language-mark { display: none; }
  .jik-tutorial-controls { padding: .5rem 1.2rem 1.2rem; gap: .7rem; align-items: end; flex-wrap: wrap; }
  .jik-topic-picker { min-width: 0; max-width: none; flex-basis: 100%; }
  .jik-stepper { gap: .25rem; margin-left: auto; }
  .jik-stepper button { width: 2.2rem; height: 2.2rem; }
  .jik-stepper span { min-width: 2.7rem; font-size: .7rem; }
  .jik-lesson-code pre { font-size: .75rem; padding: 1.3rem 1rem; min-height: 10rem; }
  .jik-file-bar, .jik-result { padding-left: 1rem; padding-right: 1rem; }
  .jik-lesson-explanation { padding: 1.4rem 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .jik-code-rain[data-motion="ready"] .jik-rain-snippet { animation: none; transform: translate3d(0, var(--still-y), 0); opacity: .4; }
}
@media print {
  .jik-code-rain, .jik-motion-floating, .jik-hero-actions, .jik-tutorial-controls, .jik-copy, .jik-copy-status { display: none !important; }
  .jik-tutorial .jik-lesson[hidden] { display: grid !important; }
  .jik-lesson { break-inside: avoid; }
}