:root {
  color-scheme: light;
  --ink: #163568;
  --muted: #50627e;
  --paper: #f7faff;
  --accent: #b9dcff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #2563eb; outline-offset: 6px; }
.site-header, main, footer { width: min(1120px, 90%); margin-inline: auto; }
.site-header { display: flex; justify-content: space-between; align-items: center; padding-block: 27px; border-bottom: 1px solid #d9e5f5; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 750; letter-spacing: -1px; }
.brand-mark { background: var(--ink); color: var(--accent); width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; }
nav a { font-size: 14px; font-weight: 600; }
nav span { margin-left: 12px; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 60px; padding: 92px 0 88px; }
.eyebrow { display: flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: 1.8px; font-size: 11px; font-weight: 750; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2563eb; flex-shrink: 0; }
h1 { font-size: clamp(42px, 5.1vw, 64px); line-height: 1.08; letter-spacing: -2.7px; margin: 24px 0; }
h1 span { color: #2563eb; }
.intro { max-width: 420px; font-size: 17px; color: var(--muted); }
.button { display: inline-flex; align-items: center; gap: 26px; padding: 13px 23px; background: #2563eb; color: white; border-radius: 7px; margin-top: 19px; font-size: 14px; font-weight: 600; transition: background .2s; }
.button:hover { background: #1d4ed8; }
.hero-note { font-size: 12px; color: var(--muted); margin-top: 16px; }
.hero-mascot { min-width: 0; text-align: center; }
.mascot-greeting { display: inline-block; padding: 10px 16px; background: white; border: 1px solid #d9e5f5; border-radius: 18px 18px 18px 4px; color: #2453a1; font-size: 13px; font-weight: 600; box-shadow: 0 5px 20px #16356808; }
.mascot-greeting span { margin-right: 5px; }
.mascot-stage { position: relative; margin-top: 18px; padding: 12px; background: #eff6ff; border-radius: 48% 48% 30% 30%; }
.mascot-stage img { display: block; width: 100%; height: 350px; object-fit: contain; border-radius: 45%; animation: taru-float 4s ease-in-out infinite; }
@keyframes taru-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.topic-pill { position: absolute; z-index: 1; background: white; border: 1px solid #d9e5f5; box-shadow: 0 6px 18px #1635680a; color: #2453a1; padding: 8px 13px; border-radius: 24px; font-size: 12px; font-weight: 650; }
.pill-code { left: 0; top: 24%; transform: rotate(-7deg); }
.pill-ai { right: 3%; top: 39%; transform: rotate(7deg); }
.pill-systems { left: 2%; bottom: 10%; transform: rotate(-4deg); }
.mascot-caption { color: var(--muted); font-size: 12px; margin: 17px 0 0; }
.feature-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; background: #eaf2ff; border: 1px solid #cfe1fb; border-radius: 16px; padding: 22px 26px; margin-bottom: 54px; }
.feature-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #fff; font-size: 27px; }
.feature-copy h2 { font-size: 24px; margin: 5px 0 3px; }
.feature-copy p:last-child { color: var(--muted); font-size: 13px; margin: 0; max-width: 620px; }
.feature-link { display: inline-flex; align-items: center; gap: 18px; padding: 11px 16px; background: #2563eb; color: #fff; border-radius: 7px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.feature-link:hover { background: #1d4ed8; }
.topics { padding-top: 24px; scroll-margin-top: 24px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
h2 { font-size: 30px; letter-spacing: -1px; margin: 8px 0 0; line-height: 1.2; }
.section-heading > p { color: var(--muted); font-size: 13px; margin-bottom: 0; }
.topic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; }
.topic-card { display: flex; flex-direction: column; align-items: flex-start; background: #ffffff; border: 1px solid #d9e5f5; border-radius: 12px; padding: 27px; }
.topic-icon { width: 43px; height: 43px; display: grid; place-items: center; background: #eaf2ff; border-radius: 10px; font: bold 23px monospace; margin-bottom: 24px; }
.topic-number { font-size: 9px; letter-spacing: 1.2px; color: var(--muted); font-weight: 650; }
h3 { font-size: 21px; letter-spacing: -.5px; margin: 5px 0 7px; }
.topic-card > p:not(.topic-number) { color: var(--muted); font-size: 14px; margin: 0 0 26px; }
.coming-soon { margin-top: auto; border: 1px solid #d9e5f5; border-radius: 20px; padding: 4px 11px; font-size: 10px; color: var(--muted); }
.closing { display: flex; align-items: center; justify-content: center; gap: 22px; background: #eaf2ff; border-radius: 12px; margin-top: 50px; padding: 25px; }
.closing > span { font-size: 43px; color: #2563eb; }
.closing p { margin: 0; font-size: 17px; }
footer { display: flex; justify-content: space-between; align-items: center; padding: 32px 0; margin-top: 26px; border-top: 1px solid #d9e5f5; }
footer .brand { font-size: 18px; }
footer p { font-size: 12px; color: var(--muted); }
.skip-link { position: absolute; top: -100px; left: 16px; padding: 10px 18px; background: white; z-index: 1; }
.skip-link:focus { top: 10px; }
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 38px; padding: 50px 0; }
  .hero-mascot { width: min(100%, 440px); justify-self: center; }
  .feature-banner { grid-template-columns: auto 1fr; }
  .feature-link { grid-column: 1 / -1; justify-self: start; }
  .intro { max-width: 540px; }
  .section-heading { display: block; }
  .topic-grid { grid-template-columns: 1fr; }
  .subtopic-grid { grid-template-columns: 1fr; }
  .topic-card { padding: 24px; }
  .topic-icon { margin-bottom: 12px; }
  .section-heading > p { margin-top: 14px; }
}
@media (max-width: 800px) and (max-height: 800px) {
  .site-header { padding-block: 16px; }
  .hero { padding-block: 28px 30px; gap: 24px; }
  .mascot-stage img { height: 250px; }
  .feature-banner { margin-bottom: 28px; padding-block: 16px; }
}
@media (max-width: 400px) {
  nav a { font-size: 12px; }
  nav span { margin-left: 3px; }
  h1 { font-size: 39px; letter-spacing: -2px; }
  footer { align-items: flex-start; flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
  .mascot-stage img { animation: none; }
}

@media (min-width: 801px) and (max-height: 800px) {
  .site-header { padding-block: 16px; }
  .hero { padding: 42px 0 36px; gap: 42px; }
  .hero h1 { margin-block: 14px; }
  .hero-note { margin-top: 9px; }
  .mascot-stage img { height: 270px; }
  .mascot-greeting { padding: 7px 12px; }
  .mascot-caption { margin-top: 9px; }
  .feature-banner { margin-bottom: 30px; padding-block: 16px; }
}

@media (max-width: 560px) {
  .mascot-stage img { height: 300px; }
  .topic-pill { padding: 6px 9px; font-size: 10px; }
  .mascot-greeting { font-size: 12px; }
}

.topic-link { margin-top: auto; color: #1d4ed8; font-size: 14px; font-weight: 650; }
.topic-link:hover, .back-link:hover { text-decoration: underline; }
.topic-page { padding-block: 45px 70px; min-height: 70vh; }
.back-link { display: inline-block; margin-bottom: 32px; font-size: 14px; color: var(--muted); }
.topic-page h1 { max-width: 820px; font-size: clamp(36px, 5vw, 56px); }
.topic-page .intro { max-width: 650px; }
.subtopic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; align-items: stretch; }
.subtopic-grid .topic-card { min-height: 285px; }
.subtopic-grid h2 { margin: 5px 0 7px; font-size: 25px; }
.page-note { margin-top: 28px; font-size: 14px; color: var(--muted); }
.lesson-list { margin-top: 48px; }
.lesson-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.lesson-heading h2 { margin-top: 7px; }
.lesson-count { color: var(--muted); font-size: 12px; border: 1px solid #d9e5f5; border-radius: 20px; padding: 6px 12px; }
.video-card { display: grid; grid-template-columns: minmax(210px, 250px) minmax(280px, 1fr); overflow: hidden; background: #fff; border: 1px solid #d9e5f5; border-radius: 16px; box-shadow: 0 12px 30px #1635680b; transition: transform .2s, box-shadow .2s; }
.video-card + .video-card { margin-top: 16px; }
.video-card:hover { transform: translateY(-2px); box-shadow: 0 15px 34px #16356814; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #142c50; overflow: hidden; }
.video-frame img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.video-frame:hover img { transform: scale(1.03); }
.play-button { position: absolute; inset: 50% auto auto 50%; display: grid; place-items: center; width: 44px; height: 32px; transform: translate(-50%, -50%); background: #2563eb; color: white; border-radius: 9px; font-size: 15px; padding-left: 2px; }
.video-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 24px 28px; }
.lesson-label { color: #2563eb; font-size: 10px; font-weight: 750; letter-spacing: 1.4px; }
.video-info h3 { font-size: 25px; line-height: 1.2; margin: 12px 0 10px; }
.video-info p { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.watch-link { color: #1d4ed8; font-size: 13px; font-weight: 700; }
.watch-link span { margin-left: 6px; }
@media (max-width: 760px) {
  .video-card { grid-template-columns: 1fr; }
  .video-frame { max-width: 300px; width: 100%; }
  .video-info { padding: 22px 25px; }
}

/* ZooKeeper article: a continuous reading layout. */
.article-preview { margin-top: 48px; padding-block: 30px; border-block: 1px solid #d9e5f5; max-width: 780px; }
.article-preview > p:not(.eyebrow) { color: var(--muted); }
.article-preview h2 a:hover { text-decoration: underline; }
.article-card { max-width: none; margin-top: 0; transition: transform .2s, box-shadow .2s; }
.article-card:hover { transform: translateY(-2px); box-shadow: 0 15px 34px #16356814; }
.article-card h2 { margin: 5px 0 7px; font-size: 25px; }
.blog-page { max-width: 780px; }
.blog-header { margin-bottom: 36px; }
.blog-header .practical-link { margin: 16px 0 0; color: var(--muted); font-size: 13px; }.blog-header .practical-link span { margin-right: 5px; color: var(--ink); font-weight: 700; }.blog-header .practical-link a { color: #1d4ed8; font-weight: 700; text-underline-offset: 3px; }
.blog-page .intro { max-width: none; font-size: 20px; }
.blog-post { font-size: 17px; line-height: 1.85; }
.blog-post section { margin-top: 48px; scroll-margin-top: 24px; }
.blog-post h2 { font-size: clamp(25px, 4vw, 32px); line-height: 1.3; }
.blog-post p, .blog-post li { color: var(--muted); }
.blog-post strong { color: var(--ink); }
.blog-post a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; }
.blog-post a.button { color: #fff; text-decoration: none; }
.blog-post a.button:hover { color: #fff; }
.auth-session-demo { margin: 22px 0; padding: 20px; background: #f2f7ff; border: 1px solid #d9e5f5; border-radius: 14px; }
.auth-demo-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.auth-demo-controls button { padding: 10px 15px; border: 1px solid #b5c9e6; border-radius: 8px; background: #fff; color: #234f83; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.auth-demo-controls button:first-child { border-color: #234f83; background: #234f83; color: #fff; }
.auth-demo-controls button:focus-visible { outline: 3px solid #76a5e4; outline-offset: 3px; }
.auth-demo-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.auth-demo-panel { min-width: 0; min-height: 132px; padding: 14px; background: #fff; border: 1px solid #d9e5f5; border-radius: 10px; }
.auth-demo-panel > strong, .auth-demo-label { display: block; }
.auth-demo-panel > strong { font-size: 14px; }
.auth-demo-label { margin: 3px 0 12px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.auth-demo-panel code { display: block; overflow-wrap: anywhere; color: #234f83; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.auth-demo-result p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.blog-post .auth-demo-controls label { display: grid; gap: 5px; color: var(--ink); font-size: 12px; font-weight: 600; }
.blog-post .auth-demo-controls input { width: 140px; padding: 9px 10px; border: 1px solid #b5c9e6; border-radius: 7px; font: inherit; }
.blog-post .auth-demo-controls button { align-self: end; }
.auth-demo-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
@media (max-width: 650px) { .auth-session-demo { padding: 14px; }.auth-demo-panels { grid-template-columns: 1fr; }.auth-demo-panel { min-height: auto; }.auth-demo-controls button { flex: 1 1 100%; } }
.aws-auth-practice { margin: 22px 0; padding: 20px; background: #f2f7ff; border: 1px solid #d9e5f5; border-radius: 14px; }
.aws-auth-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.aws-auth-actions button { padding: 10px 15px; border: 1px solid #b5c9e6; border-radius: 8px; background: #fff; color: #234f83; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.aws-auth-actions button:first-child { border-color: #234f83; background: #234f83; color: #fff; }
.aws-auth-actions button:focus-visible { outline: 3px solid #76a5e4; outline-offset: 3px; }
.aws-auth-status { padding: 11px 13px; background: #fff; border: 1px solid #d9e5f5; border-radius: 8px; color: var(--muted); font-size: 13px; }
.blog-post pre.aws-auth-result-wrap { min-height: 72px; margin: 12px 0 0; overflow-x: auto; background: #fff; }
.aws-auth-result-wrap code { white-space: pre; }
@media (max-width: 520px) { .aws-auth-practice { padding: 14px; }.aws-auth-actions button { flex: 1 1 100%; } }
.article-contents { padding-block: 22px; border-block: 1px solid #d9e5f5; }
.article-contents p { margin: 0; font-weight: 700; color: var(--ink); }
.article-contents ol { margin-bottom: 0; padding-left: 24px; }
.article-contents a { font-size: 16px; font-weight: 400; }
.blog-post code { font-size: .88em; overflow-wrap: anywhere; }
.blog-post pre { padding: 20px; overflow-x: auto; background: #eaf2ff; border-left: 3px solid #2563eb; line-height: 1.7; }
.blog-post pre code { overflow-wrap: normal; }
.blog-post .exercise { padding-left: 16px; border-left: 2px solid #b9dcff; font-size: 15px; }
.blog-post .source-note { font-size: 13px; }
.article-table { overflow-x: auto; margin-block: 24px; }
.article-table:focus-visible { outline: 3px solid #2563eb; outline-offset: 4px; }
.article-table table { width: 100%; border-collapse: collapse; min-width: 540px; font-size: 14px; line-height: 1.6; }
.article-table caption { text-align: left; margin-bottom: 12px; color: var(--muted); }
.article-table th, .article-table td { text-align: left; vertical-align: top; padding: 14px 12px; border-bottom: 1px solid #d9e5f5; }
.article-table thead { background: #eaf2ff; }
.write-steps { padding-left: 25px; }
.write-steps li { padding-left: 6px; margin-bottom: 12px; }

.digital-art-page > h1 { max-width: 850px; }
.krita-welcome-figure { max-width: 650px; margin: 28px auto; overflow: hidden; background: #fff; border: 1px solid #d9e5f5; border-radius: 14px; }
.krita-welcome-image { position: relative; }
.krita-welcome-figure img { display: block; width: 100%; height: auto; }
.transform-demo-figure svg { display: block; width: 100%; height: auto; }
.krita-new-image-highlight { position: absolute; left: 3.7%; top: 12.5%; width: 16.6%; height: 5.7%; border: 4px solid #ed2024; border-radius: 6px; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.krita-dialog-highlight, .krita-custom-highlight, .krita-create-highlight { position: absolute; z-index: 1; pointer-events: none; }
.krita-dialog-highlight { left: 15.8%; top: 21.2%; width: 68.4%; height: 56.8%; border: 5px solid #ffd400; border-radius: 24px; box-shadow: 0 0 0 4px #e5232e; }
.krita-custom-highlight { left: 16.9%; top: 22.5%; width: 22.4%; height: 5.4%; border: 4px solid #20ce61; border-radius: 5px; box-shadow: 0 0 0 2px #fff; }
.krita-create-highlight { left: 76%; top: 74.1%; width: 7.1%; height: 2.9%; border: 4px solid #e5232e; border-radius: 5px; box-shadow: 0 0 0 2px #ffd400; }
.krita-workspace-highlight { position: absolute; z-index: 1; border: 4px solid; border-radius: 5px; pointer-events: none; }
.krita-workspace-highlight > span { position: absolute; display: block; padding: 3px 8px; border-radius: 5px; color: white; font: 750 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.workspace-canvas { left: 19.5%; top: 12.1%; width: 44.8%; height: 84%; border-color: #1675f5; }
.workspace-canvas > span { top: 8px; left: 8px; background: #1675f5; }
.workspace-toolbox { left: .2%; top: 9.3%; width: 4.7%; height: 88%; border-color: #ff861a; }
.workspace-toolbox > span { top: 5px; left: 3px; background: #e66a00; }
.workspace-toolbar { left: .3%; top: 5.6%; width: 79.7%; height: 3.9%; border-color: #f3c623; }
.workspace-toolbar > span { top: -27px; right: 6px; background: #b88a00; }
.workspace-dockers { left: 80.4%; top: 9.3%; width: 19.4%; height: 88%; border-color: #a84ae0; }
.workspace-dockers > span { top: 6px; left: 7px; background: #8432b8; }
.workspace-layers { left: 80.4%; top: 40.8%; width: 19.4%; height: 56%; border-color: #ffd400; }
.workspace-layers > span { top: 6px; right: 6px; background: #b88a00; }
.layers-intro { margin-top: 34px; padding: 0; background: transparent; border: 0; border-radius: 0; }
.layers-intro .eyebrow { margin-top: 0; }
.layers-intro h3 { margin: 4px 0 10px; }
.layers-intro h4 { margin: 28px 0 8px; color: var(--ink); font-size: 19px; line-height: 1.35; }
.layers-intro p { margin-block: 9px; }
.layers-intro .layers-practice { margin-bottom: 0; padding-left: 13px; border-left: 3px solid #20ce61; }
.krita-layers-figure { max-width: 340px; }
.krita-delete-layer-highlight { position: absolute; z-index: 1; left: 94.8%; top: 93.4%; width: 4.5%; height: 4.8%; border: 2px solid #e5232e; border-radius: 5px; box-shadow: 0 0 0 2px #ffd400; pointer-events: none; }
.krita-delete-layer-highlight > span { position: absolute; top: -2px; right: calc(100% + 7px); display: block; padding: 3px 7px; border-radius: 5px; background: #c51f29; color: white; font: 750 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.krita-layers-docker-highlight, .krita-layers-tab-highlight { position: absolute; z-index: 1; border: 4px solid; border-radius: 6px; pointer-events: none; }
.krita-layers-docker-highlight { left: 3.4%; top: 34.9%; width: 94.8%; height: 64%; border-color: #ffd400; box-shadow: 0 0 0 3px #e5232e; }
.krita-layers-tab-highlight { left: 3.5%; top: 35.1%; width: 9.8%; height: 3%; border-color: #20ce61; box-shadow: 0 0 0 2px #fff; }
.krita-layers-tab-highlight > span { position: absolute; top: -28px; left: 0; display: block; padding: 3px 8px; border-radius: 5px; background: #168842; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.krita-default-layers-highlight, .krita-add-layer-highlight { position: absolute; z-index: 1; border: 4px solid; border-radius: 5px; pointer-events: none; }
.krita-default-layers-highlight { left: 3.5%; top: 46.2%; width: 96%; height: 5.6%; border-color: #20ce61; }
.krita-default-layers-highlight > span, .krita-add-layer-highlight > span { position: absolute; display: block; padding: 3px 8px; border-radius: 5px; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.krita-default-layers-highlight > span { top: -27px; left: 4px; background: #168842; }
.krita-add-layer-highlight { left: 4%; top: 94%; width: 4.4%; height: 3.4%; border-color: #e5232e; box-shadow: 0 0 0 2px #ffd400; }
.krita-add-layer-highlight > span { top: -2px; left: calc(100% + 7px); background: #c51f29; }
.krita-new-layer-row-highlight, .krita-new-layer-plus-highlight { position: absolute; z-index: 1; border: 3px solid; border-radius: 5px; pointer-events: none; }
.krita-new-layer-row-highlight { left: 3.5%; top: 18.9%; width: 96%; height: 4.8%; border-color: #20ce61; }
.krita-new-layer-plus-highlight { left: 4.5%; top: 91%; width: 4.7%; height: 4.5%; border-color: #e5232e; box-shadow: 0 0 0 2px #ffd400; }
.krita-duplicate-layer-row-highlight, .krita-duplicate-button-highlight { position: absolute; z-index: 1; border: 3px solid; border-radius: 5px; pointer-events: none; }
.krita-duplicate-layer-row-highlight { left: 2.5%; top: 19.2%; width: 97%; height: 4.9%; border-color: #20ce61; }
.krita-duplicate-button-highlight { left: 12.2%; top: 94%; width: 6.2%; height: 4.6%; border-color: #e5232e; box-shadow: 0 0 0 2px #ffd400; }
.krita-duplicate-button-highlight > span { position: absolute; top: -2px; left: calc(100% + 7px); display: block; padding: 3px 7px; border-radius: 5px; background: #c51f29; color: white; font: 750 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.krita-move-layer-row-highlight, .krita-move-down-highlight, .krita-move-up-highlight { position: absolute; z-index: 1; border: 3px solid; border-radius: 5px; pointer-events: none; }
.krita-move-layer-row-highlight { left: 2.5%; top: 23.2%; width: 97%; height: 4.8%; border-color: #20ce61; }
.krita-move-down-highlight { left: 20.4%; top: 94.2%; width: 5.2%; height: 4.6%; border-color: #e5232e; box-shadow: 0 0 0 2px #ffd400; }
.krita-move-up-highlight { left: 26.2%; top: 94.2%; width: 5.2%; height: 4.6%; border-color: #1683e8; box-shadow: 0 0 0 2px #fff; }
.krita-layer-properties-dialog-highlight, .krita-properties-button-highlight { position: absolute; z-index: 1; border: 3px solid; border-radius: 8px; pointer-events: none; }
.krita-layer-properties-dialog-highlight { left: 7.1%; top: 44.4%; width: 44.5%; height: 42.6%; border: 4px solid #ffd400; box-shadow: 0 0 0 3px #e5232e; }
.krita-properties-button-highlight { left: 77.7%; top: 91.4%; width: 3.5%; height: 4.8%; border-color: #e5232e; box-shadow: 0 0 0 2px #ffd400; }
.krita-properties-button-highlight > span { position: absolute; top: 0; left: calc(100% + 6px); display: block; padding: 3px 7px; border-radius: 5px; background: #c51f29; color: white; font: 750 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.layer-toggle-sequence { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 10px; max-width: 740px; margin: 24px auto; }
.layer-state-card { min-width: 0; margin: 0; overflow: hidden; background: #fff; border: 1px solid #d9e5f5; border-radius: 10px; }
.layer-state-image { position: relative; }
.layer-state-image img { display: block; width: 100%; height: auto; }
.layer-state-card figcaption { padding: 10px 12px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.layer-toggle-arrow { color: #2563eb; font-size: 34px; line-height: 1; font-weight: 750; }
.krita-eye-pair-highlight, .krita-background-eye-highlight { position: absolute; z-index: 1; pointer-events: none; border-radius: 4px; }
.krita-eye-pair-highlight { left: 66.8%; top: 47.8%; width: 6.5%; height: 8.7%; border: 3px solid #20ce61; border-radius: 8px; }
.krita-background-eye-highlight { left: 66.8%; top: 51.2%; width: 5.2%; height: 5.2%; border: 3px solid #e5232e; box-shadow: 0 0 0 2px #ffd400; }
.layer-eye-zoom { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: block; width: 44%; aspect-ratio: 2.15 / 1; overflow: hidden; border: 3px solid #ffd400; border-radius: 9px; background: #454545; box-shadow: 0 2px 12px #0008; }
.layer-eye-zoom img { display: block; width: 100%; height: auto; transform: scale(3); transform-origin: 69.5% 52.7%; }
.layer-eye-zoom-label { position: absolute; top: 4px; left: 5px; padding: 2px 6px; border-radius: 4px; background: #163568ed; color: #fff; font-size: 10px; font-weight: 700; line-height: 1.4; }
.krita-welcome-figure figcaption { padding: 13px 17px; color: var(--muted); font-size: 13px; }
.krita-welcome-figure figcaption strong { color: var(--ink); }
.art-start-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 34px; padding: 22px 26px; background: #eaf2ff; border: 1px solid #cfe1fb; border-radius: 14px; }
.art-start-card .eyebrow { margin: 0; }
.art-start-card h2 { margin: 5px 0; font-size: 23px; }
.art-start-card p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.art-start-card .button { margin: 0; flex-shrink: 0; }
.art-lesson { max-width: 820px; }
.art-lesson kbd { display: inline-block; min-width: 24px; padding: 0 6px; border: 1px solid #cbd7e8; border-radius: 5px; background: white; color: var(--ink); font: 600 .85em ui-monospace, SFMono-Regular, Menlo, monospace; text-align: center; }
.art-exercise { margin-top: 24px; padding: 20px 24px; background: #f2f7ff; border: 1px solid #d9e5f5; border-radius: 12px; }
.art-exercise .eyebrow { margin-top: 0; color: var(--ink); }
.art-exercise ol { margin-bottom: 0; padding-left: 22px; }
.art-exercise li { margin: 7px 0; }
.art-interface-list { padding-left: 23px; }
.art-interface-list li { margin: 8px 0; }
.art-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.art-path-grid article { padding: 18px; border: 1px solid #d9e5f5; border-radius: 10px; background: white; }
.art-path-grid article > span { color: #2563eb; font-size: 11px; font-weight: 750; letter-spacing: 1px; }
.art-path-grid h3 { font-size: 17px; }
.art-path-grid p { margin-bottom: 0; font-size: 13px; }
.art-lesson-link { display: inline-block; margin-top: 12px; color: #1d4ed8; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.brush-steps { padding-left: 24px; }
.brush-steps li { margin: 12px 0; padding-left: 4px; }
.brush-select-figure { max-width: 900px; }
.brush-size-figure { max-width: 900px; }
.chapter3-fill-tool-highlight, .chapter3-color-selector-highlight, .chapter3-tool-options-highlight { position: absolute; z-index: 1; border: 2px solid #ffd400; box-shadow: 0 0 0 1px #e5232e; pointer-events: none; }
.chapter3-fill-tool-highlight { left: .1%; top: 84.5%; width: 4.1%; height: 4.2%; border-radius: 5px; }
.chapter3-selection-tool-highlight, .chapter3-result-fill-tool-highlight { position: absolute; z-index: 1; width: 4%; height: 4.5%; border: 2px solid #ffd400; border-radius: 5px; box-shadow: 0 0 0 1px #e5232e; pointer-events: none; }
.chapter3-selection-tool-highlight { left: .1%; top: 84.7%; }
.chapter3-result-fill-tool-highlight { left: .1%; top: 55.3%; }
.chapter3-selection-tool-highlight > span, .chapter3-result-fill-tool-highlight > span { position: absolute; left: calc(100% + 5px); top: 0; display: block; padding: 3px 7px; border-radius: 5px; background: #168842; color: #fff; font: 750 11px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.chapter3-color-selector-highlight { left: 81.3%; top: 7.4%; width: 18.5%; height: 31.5%; border-radius: 8px; }
.chapter3-fill-tool-highlight > span, .chapter3-color-selector-highlight > span { position: absolute; display: block; padding: 3px 7px; border-radius: 5px; background: #c51f29; color: #fff; font: 750 11px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.chapter3-fill-tool-highlight > span { left: calc(100% + 5px); top: 0; }
.chapter3-color-selector-highlight > span { left: 5px; top: 5px; }
.chapter3-layer-highlight { position: absolute; z-index: 1; left: 81.5%; top: 53.9%; width: 18.2%; height: 4.1%; border: 3px solid #168842; border-radius: 5px; box-shadow: 0 0 0 2px #ffd400; pointer-events: none; }
.chapter3-layer-highlight > span { position: absolute; top: -26px; right: 0; padding: 3px 7px; border-radius: 5px; background: #168842; color: #fff; font: 750 11px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.fish-tool-figure { position: relative; }
.fish-transform-tool-highlight { position: absolute; z-index: 1; left: .1%; top: 35.7%; width: 4.6%; height: 6%; border: 1px solid #ffd400; border-radius: 5px; box-shadow: 0 0 0 1px #e5232e; pointer-events: none; }
.fish-transform-tool-highlight > span { position: absolute; left: calc(100% + 5px); top: 0; padding: 3px 7px; border-radius: 5px; background: #168842; color: #fff; font: 750 11px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.brush-name-figure { position: relative; }
.brush-name-highlight { position: absolute; left: .2%; bottom: .3%; width: 17%; height: 3.4%; border: 1px solid #ffd400; border-radius: 3px; box-shadow: 0 0 0 1px #e5232e; pointer-events: none; }
.brush-name-highlight > span { position: absolute; left: 0; bottom: calc(100% + 5px); padding: 3px 7px; border-radius: 5px; background: #168842; color: #fff; font: 750 11px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.layer-lock-figure { position: relative; }
.layer-lock-highlight { position: absolute; left: 30.6%; top: 60.5%; width: 10.5%; height: 5.5%; border: 1px solid #ffd400; border-radius: 4px; box-shadow: 0 0 0 1px #e5232e; pointer-events: none; }
.layer-lock-note { position: absolute; left: 29.5%; top: 78%; max-width: 31%; padding: 4px 7px; border-radius: 5px; background: #168842; color: #fff; font: 750 11px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: 0 2px 8px #0006; pointer-events: none; }
.alpha-lock-state-figure { position: relative; }
.alpha-lock-state-label { position: absolute; top: 12.3%; left: 24%; max-width: 72%; padding: 5px 8px; border-radius: 5px; color: #fff; font: 750 12px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; box-shadow: 0 2px 8px #0007; pointer-events: none; }
.alpha-lock-full { background: #b4232e; }
.alpha-lock-none { background: #745414; }
.alpha-lock-alpha { background: #168842; }
.apple-kra-highlight { position: absolute; z-index: 1; left: 51.4%; top: 59.7%; width: 21%; height: 5.2%; border: 3px solid #e5232e; border-radius: 8px; box-shadow: 0 0 0 2px #ffd400; pointer-events: none; }
.brush-size-control-highlight, .brush-small-line-highlight, .brush-large-line-highlight { position: absolute; z-index: 1; border: 3px solid; border-radius: 6px; pointer-events: none; }
.brush-size-control-highlight { left: 47.7%; top: 3%; width: 11.8%; height: 5.4%; border-color: #e5232e; box-shadow: 0 0 0 2px #ffd400; }
.brush-size-control-highlight > span, .brush-small-line-highlight > span, .brush-large-line-highlight > span { position: absolute; display: block; padding: 3px 8px; border-radius: 5px; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.brush-size-control-highlight > span { top: calc(100% + 5px); left: 0; background: #c51f29; }
.brush-opacity-control-highlight { position: absolute; z-index: 1; left: 29.2%; top: 3.8%; width: 9.8%; height: 4.6%; border: 3px solid #e5232e; border-radius: 5px; box-shadow: 0 0 0 2px #ffd400; pointer-events: none; }
.brush-opacity-control-highlight > span { position: absolute; top: calc(100% + 6px); left: 0; display: block; padding: 3px 8px; border-radius: 5px; background: #c51f29; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.brush-opacity-label { position: absolute; z-index: 1; left: 18.2%; display: block; padding: 3px 8px; border-radius: 5px; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; pointer-events: none; }
.opacity-100 { top: 20.8%; background: #168842; }
.opacity-50 { top: 33.2%; background: #e66a00; }
.opacity-25 { top: 52%; background: #1675f5; }
.opacity-10 { top: 68.4%; background: #8432b8; }
.brush-small-line-highlight { left: 21.5%; top: 42.5%; width: 25.5%; height: 6.7%; border-color: #20ce61; }
.brush-small-line-highlight > span { top: -27px; left: 0; background: #168842; }
.brush-large-line-highlight { left: 20.8%; top: 59.5%; width: 24.5%; height: 6.9%; border-color: #ff861a; }
.brush-large-line-highlight > span { top: calc(100% + 4px); left: 0; background: #e66a00; }
.transparent-background-eye-highlight { position: absolute; z-index: 2; left: 81.9%; top: 53.5%; width: 2.1%; height: 3%; border: 3px solid #e5232e; border-radius: 5px; box-shadow: 0 0 0 2px #ffd400; pointer-events: none; }
.transparent-background-eye-highlight > span { position: absolute; top: -2px; right: calc(100% + 7px); display: block; padding: 3px 8px; border-radius: 5px; background: #c51f29; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.brush-color-docker-highlight, .brush-color-toolbar-highlight { position: absolute; z-index: 1; border: 3px solid #e5232e; border-radius: 6px; box-shadow: 0 0 0 2px #ffd400; pointer-events: none; }
.brush-color-docker-highlight { left: 81.8%; top: 7.6%; width: 18%; height: 33.2%; }
.brush-color-docker-highlight > span, .brush-color-toolbar-highlight > span { position: absolute; display: block; padding: 3px 8px; border-radius: 5px; background: #c51f29; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.brush-color-docker-highlight > span { top: -29px; right: 0; }
.brush-color-toolbar-highlight { left: 4.8%; top: 3.8%; width: 2.2%; height: 4.2%; }
.brush-color-toolbar-highlight > span { top: calc(100% + 6px); left: 0; }
.brush-explore-presets-highlight, .brush-explore-tooltip-highlight { position: absolute; z-index: 1; border: 3px solid; border-radius: 6px; pointer-events: none; }
.brush-explore-presets-highlight { left: 71.8%; top: 42.2%; width: 16.9%; height: 55.5%; border-color: #ffd400; box-shadow: 0 0 0 3px #e5232e; }
.brush-explore-presets-highlight > span, .brush-explore-tooltip-highlight > span { position: absolute; display: block; padding: 3px 8px; border-radius: 5px; background: #c51f29; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.brush-explore-presets-highlight > span { top: -29px; right: 0; }
.brush-explore-tooltip-highlight { left: 85%; top: 60.7%; width: 14.2%; height: 23.2%; border-color: #e5232e; box-shadow: 0 0 0 2px #ffd400; }
.brush-explore-tooltip-highlight > span { top: -29px; right: 0; }
.specific-color-docker-highlight, .specific-color-values-highlight { position: absolute; z-index: 1; border: 3px solid; border-radius: 6px; pointer-events: none; }
.specific-color-docker-highlight { left: 79%; top: 7.3%; width: 20.8%; height: 27%; border-color: #ffd400; box-shadow: 0 0 0 3px #e5232e; }
.specific-color-docker-highlight > span { position: absolute; top: -29px; right: 0; display: block; padding: 3px 8px; border-radius: 5px; background: #c51f29; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.specific-color-values-highlight { left: 79.2%; top: 15.2%; width: 20.3%; height: 13.8%; border-color: #20ce61; }
.specific-color-values-highlight > span { position: absolute; bottom: 5px; left: 5px; display: block; padding: 3px 8px; border-radius: 5px; background: #168842; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.eraser-mode-highlight, .eraser-size-highlight { position: absolute; z-index: 1; border: 3px solid #e5232e; border-radius: 5px; box-shadow: 0 0 0 2px #ffd400; pointer-events: none; }
.eraser-mode-highlight { left: 22.5%; top: 3.4%; width: 1.8%; height: 4.3%; }
.eraser-size-highlight { left: 39.5%; top: 3.4%; width: 9.6%; height: 4.3%; }
.eraser-mode-highlight > span, .eraser-size-highlight > span { position: absolute; top: calc(100% + 6px); left: 0; display: block; padding: 3px 8px; border-radius: 5px; background: #c51f29; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.eraser-layer-highlight { position: absolute; z-index: 1; left: 79.1%; top: 52.1%; width: 20.6%; height: 3.4%; border: 3px solid #20ce61; border-radius: 5px; pointer-events: none; }
.eraser-layer-highlight > span { position: absolute; top: -2px; right: calc(100% + 7px); display: block; padding: 3px 8px; border-radius: 5px; background: #168842; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.brush-tool-highlight { position: absolute; z-index: 1; left: .1%; top: 25.6%; width: 2.2%; height: 4.3%; border: 3px solid #e5232e; border-radius: 5px; box-shadow: 0 0 0 2px #ffd400; pointer-events: none; }
.eraser-pitfall { margin-top: 20px; padding: 16px 18px; border: 1px solid #fed7aa; border-left: 4px solid #f97316; border-radius: 10px; background: #fff7ed; color: #7c2d12; font-size: 15px; line-height: 1.6; }
.eraser-pitfall strong { color: #7c2d12; }
.brush-tool-highlight > span { position: absolute; top: -2px; left: calc(100% + 7px); display: block; padding: 3px 8px; border-radius: 5px; background: #c51f29; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.toolbar-brush-highlight { position: absolute; z-index: 1; left: 9.45%; top: 3.4%; width: 1.9%; height: 4.3%; border: 3px solid #e5232e; border-radius: 5px; box-shadow: 0 0 0 2px #ffd400; pointer-events: none; }
.toolbar-brush-highlight > span { position: absolute; top: calc(100% + 6px); left: 0; display: block; padding: 3px 8px; border-radius: 5px; background: #c51f29; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.brush-presets-highlight { position: absolute; z-index: 1; left: 73.9%; top: 40.2%; width: 7.5%; height: 3.4%; border: 3px solid #e5232e; border-radius: 5px; box-shadow: 0 0 0 2px #ffd400; pointer-events: none; }
.brush-presets-highlight > span { position: absolute; top: -30px; right: 0; display: block; padding: 3px 8px; border-radius: 5px; background: #c51f29; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.brush-presets-panel-highlight { position: absolute; z-index: 1; left: 70.2%; top: 40.1%; width: 29.4%; height: 59.4%; border: 4px solid #ffd400; border-radius: 7px; box-shadow: 0 0 0 3px #e5232e; pointer-events: none; }
.brush-presets-panel-highlight > span { position: absolute; top: 7px; left: 7px; display: block; padding: 3px 8px; border-radius: 5px; background: #c51f29; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.brush-preset-tile-highlight { position: absolute; z-index: 2; left: 73.9%; top: 53.7%; width: 4.1%; height: 6.5%; border: 3px solid #20ce61; border-radius: 5px; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.brush-popup-highlight { position: absolute; z-index: 1; left: 9%; top: 6.1%; width: 29.5%; height: 58.2%; border: 4px solid #ffd400; border-radius: 7px; box-shadow: 0 0 0 3px #e5232e; pointer-events: none; }
.brush-popup-highlight > span { position: absolute; top: 7px; left: 7px; display: block; padding: 3px 8px; border-radius: 5px; background: #c51f29; color: white; font: 750 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; box-shadow: 0 2px 8px #0006; }
.brush-popup-tile-highlight { position: absolute; z-index: 2; left: 17.5%; top: 16.2%; width: 4.1%; height: 6.5%; border: 3px solid #20ce61; border-radius: 5px; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.art-source { margin-top: 35px; font-size: 13px; }
.art-source a { color: #1d4ed8; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 650px) { .art-start-card { align-items: flex-start; flex-direction: column; }.art-path-grid { grid-template-columns: 1fr; } }

.zookeeper-mascot { display: flex; flex-direction: column; align-items: center; gap: 26px; margin: 0 0 40px; }
.zookeeper-mascot img { display: block; width: 100%; height: auto; border-radius: 16px; }
.zookeeper-thought { position: relative; max-width: 100%; text-align: center; font-size: 13px; }
.zookeeper-thought::before, .zookeeper-thought::after { content: ""; position: absolute; background: white; border: 1px solid #d9e5f5; border-radius: 50%; }
.zookeeper-thought::before { width: 12px; height: 12px; bottom: -17px; left: 43%; }
.zookeeper-thought::after { width: 6px; height: 6px; bottom: -27px; left: 45%; }
.zoo-story { padding-bottom: 28px; }
.chaos-comic { margin: 24px 0 12px; }
.chaos-comic { overflow: hidden; border-radius: 14px; line-height: 0; }
.chaos-comic img { display: block; width: 100%; height: auto; }
.chaos-comic figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.animal-conversation { margin-block: 20px; padding-left: 18px; border-left: 3px solid #b9dcff; }
.animal-conversation p { font-size: 15px; margin-block: 10px; }
.mapping-demo { margin-top: 30px; padding: 22px; background: #f5f9ff; border: 1px solid #d9e5f5; border-radius: 12px; }
.mapping-demo h3 { margin-top: 0; }
.mapping-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.mapping-column { display: flex; flex-direction: column; gap: 8px; }
.mapping-label { margin: 0 0 2px; color: var(--ink) !important; font-size: 11px !important; font-weight: 750; letter-spacing: 1px; text-transform: uppercase; }
.mapping-item, .mapping-resource { display: block; padding: 9px 11px; background: white; border: 1px solid #d9e5f5; border-radius: 8px; color: var(--muted); font-size: 13px; }
.mapping-item { animation: mapping-drift 2.4s ease-in-out infinite; }
.mapping-item:nth-child(3) { animation-delay: .25s; }.mapping-item:nth-child(4) { animation-delay: .5s; }
.mapping-arrows { display: flex; flex-direction: column; gap: 11px; color: #2563eb; font-size: 23px; line-height: 1; }
.mapping-arrows span { animation: arrow-pulse 1.8s ease-in-out infinite; }.mapping-arrows span:nth-child(2) { animation-delay: .3s; }.mapping-arrows span:nth-child(3) { animation-delay: .6s; }
.mapping-resource { background: #fff7e7; border-color: #efd4a0; color: #805018; font-weight: 700; text-align: center; }
.resource-column small { color: var(--muted); font-size: 11px; text-align: center; }
.mapping-note { margin: 16px 0 0; font-size: 13px !important; }
.service-map { margin: 28px 0; padding: 20px; background: #f5f9ff; border: 1px solid #d9e5f5; border-radius: 12px; }
.service-map figcaption { display: flex; flex-direction: column; gap: 3px; margin-bottom: 18px; color: var(--ink); font-size: 15px; }
.service-map figcaption span { color: var(--muted); font-size: 12px; }
.service-map-layout { display: grid; grid-template-columns: 1fr auto minmax(150px, 200px); align-items: center; gap: 13px; }
.service-list { display: grid; gap: 7px; }
.service-node { display: flex; align-items: center; gap: 9px; padding: 7px 9px; background: #fff; border: 1px solid #d9e5f5; border-radius: 8px; font-size: 12px; }
.service-node > span:first-child { font-size: 21px; }.service-node small, .zookeeper-hub small { display: block; color: var(--muted); font-size: 10px; }
.service-links { display: grid; gap: 11px; color: #2563eb; font-size: 20px; line-height: 1; }.service-links i { font-style: normal; animation: arrow-pulse 1.8s ease-in-out infinite; }.service-links i:nth-child(2) { animation-delay: .2s; }.service-links i:nth-child(3) { animation-delay: .4s; }.service-links i:nth-child(4) { animation-delay: .6s; }.service-links i:nth-child(5) { animation-delay: .8s; }
.zookeeper-hub { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 12px; background: #eaf2ff; border: 2px solid #9fc8f6; border-radius: 50%; text-align: center; color: var(--ink); font-size: 13px; }.hub-icon { color: #2563eb; font-size: 25px; }
.ensemble-map { margin: 28px 0; padding: 22px; background: #fbfaf6; border: 1px solid #ddd8ca; border-radius: 12px; text-align: center; }.ensemble-map figcaption { display: flex; flex-direction: column; gap: 3px; margin-bottom: 18px; color: var(--ink); font-size: 15px; }.ensemble-map figcaption span { color: var(--muted); font-size: 12px; }.ensemble-bubble { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 2px solid #9fc8f6; border-radius: 30px; background: #eaf2ff; color: var(--ink); font-weight: 750; }.ensemble-bubble span { color: #2563eb; }.ensemble-lines { display: flex; justify-content: center; gap: 115px; height: 24px; }.ensemble-lines i { display: block; width: 1px; background: #9fc8f6; transform: rotate(25deg); }.ensemble-lines i:last-child { transform: rotate(-25deg); }.ensemble-servers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }.ensemble-server { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 15px 8px; border: 1px solid #d9e5f5; border-radius: 10px; background: white; color: var(--ink); font-size: 12px; }.ensemble-server.leader { border: 2px solid #c49a55; background: #fff7e7; }.server-icon { color: #50627e; font-size: 24px; }.ensemble-server b { color: #2563eb; font-size: 11px; }.ensemble-server.leader b { color: #925010; }.ensemble-server small { color: var(--muted); font-size: 10px; }
.ensemble-story-art { margin: 28px 0; }.ensemble-story-art img { display: block; width: 100%; max-width: 88%; margin-inline: auto; height: auto; border-radius: 14px; }.ensemble-story-art figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.write-story-art { margin: 28px 0; }.write-story-art img { display: block; width: 100%; max-width: 88%; margin-inline: auto; height: auto; border-radius: 14px; }.write-story-art figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.ephemeral-story-art { margin: 28px 0; }.ephemeral-story-art img { display: block; width: 100%; max-width: 88%; margin-inline: auto; height: auto; border-radius: 14px; }.ephemeral-story-art figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.znode-type-art { margin: 20px 0; }.znode-type-art img { display: block; width: 100%; max-width: 88%; margin-inline: auto; height: auto; border-radius: 14px; }.znode-type-art figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.ride-story-art { margin: 28px 0; }.ride-story-art img { display: block; width: 100%; height: auto; border-radius: 14px; }.ride-story-art figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.direct-call-story-art { margin: 28px 0; }.direct-call-story-art img { display: block; width: 100%; height: auto; border-radius: 14px; }.direct-call-story-art figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.kafka-solution-story-art { margin: 28px 0; }.kafka-solution-story-art img { display: block; width: 100%; height: auto; border-radius: 14px; }.kafka-solution-story-art figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
.kafka-complete-art { margin: 28px 0; }.kafka-complete-art img { display: block; width: 100%; height: auto; border-radius: 14px; }.kafka-complete-art figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }
@media (max-width: 560px) { .service-map-layout { grid-template-columns: 1fr; }.service-links { grid-template-columns: repeat(5, 1fr); gap: 4px; text-align: center; }.service-links i { transform: rotate(90deg); }.zookeeper-hub { width: 180px; justify-self: center; }.ensemble-story-art img, .write-story-art img, .ephemeral-story-art img, .znode-type-art img { max-width: 100%; } }
@keyframes mapping-drift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes arrow-pulse { 0%, 100% { opacity: .35; transform: translateX(0); } 50% { opacity: 1; transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .mapping-item, .mapping-arrows span { animation: none; } }
.zoo-manager { display: flex; align-items: center; gap: 24px; margin: 24px 0; }
.zoo-manager img { display: block; width: 32%; max-width: 200px; height: auto; border-radius: 45%; }
.turn-board { flex: 0 0 190px; padding: 16px 18px; background: #fffdf4; border: 2px solid #c49a55; box-shadow: 3px 4px 0 #d8c49f; transform: rotate(2deg); }
.turn-board-title { margin: 0 0 9px; color: #805018 !important; font-size: 14px !important; font-weight: 750; text-align: center; }
.turn-board ol { margin: 0; padding-left: 26px; color: #4d4538; font-size: 14px; line-height: 1.65; }
.turn-board li::marker { color: #a86e20; font-weight: 700; }
.zoo-manager figcaption { flex: 1; }
.zoo-manager figcaption p { font-size: 14px; }
.zoo-manager figcaption .eyebrow { font-size: 11px; }
.zoo-manager figcaption .manager-greeting { font-size: 19px; font-weight: 700; color: var(--ink); margin-block: 8px; }
@media (max-width: 560px) {
  .zoo-manager { flex-direction: column; gap: 12px; }
  .zoo-manager img { width: 55%; max-width: 180px; }
  .turn-board { width: min(100%, 220px); }
}
@media (max-width: 560px) {
  .zookeeper-thought { font-size: 12px; padding: 9px 12px; }
}
.znode-replication { margin: 28px 0; padding: 22px; background: #f5f9ff; border: 1px solid #d9e5f5; border-radius: 12px; }.znode-replication figcaption { display: flex; flex-direction: column; gap: 3px; margin-bottom: 18px; color: var(--ink); font-size: 15px; }.znode-replication figcaption span { color: var(--muted); font-size: 12px; }.replication-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; }.replication-tree { padding: 15px; background: white; border: 1px solid #cfe1fb; border-radius: 9px; }.replication-tree b { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; }.replication-tree code { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; white-space: pre; }.replication-arrow { color: #2563eb; font-size: 28px; animation: arrow-pulse 1.8s ease-in-out infinite; }.replication-followers { display: grid; gap: 9px; }.replication-followers div { padding: 12px; background: #fff; border: 1px solid #d9e5f5; border-radius: 9px; }.replication-followers b, .replication-followers small { display: block; }.replication-followers b { color: var(--ink); font-size: 12px; }.replication-followers small { margin-top: 3px; color: var(--muted); font-size: 11px; }
@media (max-width: 560px) { .replication-flow { grid-template-columns: 1fr; }.replication-arrow { transform: rotate(90deg); text-align: center; } }

/* Practical Docker guide */
.docker-code { margin: 20px 0; border: 1px solid #d9e5f5; border-radius: 10px; overflow: hidden; }
.docker-code-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; background: #eaf2ff; font-size: 13px; }
.docker-code-heading button { padding: 6px 12px; border: 1px solid #b5c9e6; border-radius: 6px; background: white; color: var(--ink); font: inherit; cursor: pointer; }
.docker-code-heading button:hover { background: #dceaff; }
.docker-code-heading button:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.blog-post .docker-code pre { margin: 0; padding: 16px; border: 0; background: #f0f5fc; line-height: 1.6; }
.docker-next { margin-top: 40px; padding-top: 22px; border-top: 1px solid #d9e5f5; }
.docker-next > a { font-size: 21px; font-weight: 700; }
.copy-status { font-size: 13px; }
.kafka-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; margin: 24px 0; }
.kafka-flow > div { display: flex; flex-direction: column; gap: 3px; min-height: 76px; justify-content: center; padding: 14px; border: 1px solid #d9e5f5; border-radius: 10px; background: #eaf2ff; text-align: center; }
.kafka-flow span { color: var(--muted); font-size: 13px; }
.kafka-flow i { color: #2563eb; font-size: 22px; font-style: normal; }
@media (max-width: 560px) { .kafka-flow { grid-template-columns: 1fr; }.kafka-flow i { transform: rotate(90deg); justify-self: center; } }
.kafka-storyboard { margin: 28px 0 34px; padding: 22px; border: 1px solid #d7d9d8; border-radius: 18px; background: #fbfaf7; }
.kafka-storyboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.kafka-storyboard-heading h3 { margin: 3px 0 0; }
.kafka-story-controls { display: flex; gap: 10px; }
.kafka-story-controls button { min-width: 88px; padding: 10px 17px; border: 1px solid #454a4b; border-radius: 8px; background: white; color: #292d2f; font: inherit; font-weight: 700; cursor: pointer; }
.kafka-story-controls button:first-child { background: #eaf3f7; }
.kafka-story-controls button:hover:not(:disabled) { background: #d9eaf0; }
.kafka-story-controls button:focus-visible, .kafka-video-downloads a:focus-visible { outline: 3px solid #4384a1; outline-offset: 3px; }
.kafka-story-controls button:disabled { opacity: .48; cursor: not-allowed; }
.kafka-story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kafka-story-card { min-width: 0; margin: 0; padding: 13px; border: 1px solid #d9d9d5; border-radius: 13px; background: #fff; transition: border-color .25s ease, box-shadow .25s ease; }
.kafka-story-card.is-active { border-color: #7599a8; box-shadow: 0 0 0 3px #7599a81a; }
.kafka-story-card.is-waiting { border-color: #d39a63; }
.kafka-story-card figcaption { display: flex; align-items: flex-start; gap: 10px; min-height: 46px; margin: 2px 3px 8px; color: #25292b; font-size: 14px; line-height: 1.4; }
.kafka-story-card figcaption strong, .kafka-story-card figcaption small { display: block; }
.kafka-story-card figcaption small { margin-top: 3px; color: #666d70; font-size: 12px; }
.kafka-scene-number { display: grid; flex: 0 0 30px; width: 30px; height: 30px; place-items: center; border: 1px solid #c5d7de; border-radius: 50%; color: #426e82; font-size: 11px; font-weight: 700; }
.kafka-story-svg { display: block; width: 100%; height: auto; overflow: visible; }
.kafka-story-svg text { fill: #282c2e; font: 11px/1.2 system-ui, sans-serif; }
.kafka-story-svg .kafka-node-sub, .kafka-story-svg .kafka-svg-note { fill: #6a7173; font-size: 8px; }
.kafka-story-svg .kafka-story-node rect { fill: #fff; stroke: #44494a; stroke-width: 2; }
.kafka-story-svg .kafka-story-node path, .kafka-story-svg .kafka-story-node circle { fill: none; stroke: #44494a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kafka-story-svg .kafka-story-node text { font-size: 9px; }
.kafka-story-svg .kafka-story-node .kafka-node-sub { font-size: 7px; }
.kafka-story-svg .kafka-sketch-line { fill: none; stroke: #53595a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kafka-story-svg .kafka-faint-route { stroke: #9a9fa0; stroke-dasharray: 4 4; }
.kafka-story-svg .kafka-direct-route { stroke: #bd8050; stroke-width: 2.5; }
.kafka-story-svg .kafka-notify-node rect, .kafka-story-svg .kafka-consumer-notify rect { fill: #fff9f2; stroke: #c88b58; }
.kafka-story-svg .kafka-log-node rect { fill: #f2f7f8; stroke: #608698; }
.kafka-story-svg .kafka-event-label { fill: #426d7d; font-size: 6px; font-weight: 700; }
.kafka-story-svg .kafka-packet { fill: #d59155; stroke: white; stroke-width: 1.5; }
.kafka-story-svg .kafka-ack-bubble rect { fill: #edf5f5; stroke: #6a9199; stroke-width: 1.5; }
.kafka-story-svg .kafka-ack-bubble text { fill: #3d6872; font-size: 8px; font-weight: 700; }
.kafka-story-svg .kafka-wait-mark circle { fill: #fff8ee; stroke: #ca8850; stroke-width: 1.5; }
.kafka-story-svg .kafka-wait-mark path { fill: none; stroke: #8d6c4d; stroke-width: 1.5; stroke-linecap: round; }
.kafka-story-svg .kafka-wait-mark text { fill: #976338; font-size: 8px; font-weight: 700; }
.kafka-story-svg .kafka-rider-wait circle { fill: #fff8ee; stroke: #ca8850; stroke-width: 1.5; }
.kafka-story-svg .kafka-rider-wait path { fill: none; stroke: #8d6c4d; stroke-width: 1.5; stroke-linecap: round; }
.kafka-story-caption { min-height: 46px; margin-top: 16px; padding: 12px 14px; border-left: 3px solid #6c93a2; border-radius: 0 8px 8px 0; background: #f0f5f5; color: #3f4749; font-size: 14px; line-height: 1.55; }
.kafka-video-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; color: #687073; font-size: 12px; }
.kafka-video-downloads a { color: #315f76; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .kafka-story-grid { grid-template-columns: 1fr; }.kafka-storyboard { padding: 14px; } }
@media (max-width: 520px) { .kafka-storyboard-heading { align-items: flex-start; flex-direction: column; }.kafka-story-controls { width: 100%; }.kafka-story-controls button { flex: 1; }.kafka-story-card { padding: 9px; }.kafka-video-downloads { align-items: flex-start; flex-direction: column; gap: 8px; } }
.jupyter-visual { margin: 26px 0; padding: 16px; background: #f2f7ff; border: 1px solid #d9e5f5; border-radius: 14px; }
.jupyter-window { overflow: hidden; background: white; border: 1px solid #cad9ed; border-radius: 10px; box-shadow: 0 8px 22px #1635680b; }
.jupyter-toolbar { display: flex; align-items: center; gap: 12px; min-height: 45px; padding: 8px 13px; background: #eaf2ff; border-bottom: 1px solid #d9e5f5; font-size: 12px; }
.jupyter-dots { color: #8aa2c3; font-size: 10px; letter-spacing: 2px; }
.kernel-status { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 11px; }
.kernel-status i { width: 7px; height: 7px; border-radius: 50%; background: #45a779; }
.jupyter-cell { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: start; margin: 12px; padding: 11px; border: 1px solid #dce6f3; border-radius: 7px; }
.cell-prompt { color: #627895; font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.markdown-cell > div { min-width: 0; }
.markdown-cell strong { font-size: 14px; }
.markdown-cell p { margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.blog-post .jupyter-cell pre { margin: 0; padding: 0; background: transparent; border: 0; color: #193b66; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; }
.blog-post .jupyter-cell pre code { font: inherit; overflow-wrap: normal; }
.jupyter-execution { display: flex; align-items: center; gap: 7px; margin: -5px 0 -5px 73px; color: #37669b; font-size: 11px; }
.jupyter-execution span:first-child { color: #2563eb; font-size: 17px; line-height: 1; }
.output-cell { align-items: center; background: #f8fbff; }
.output-cell strong { color: #183b66; font: 600 14px ui-monospace, SFMono-Regular, Menlo, monospace; }
.jupyter-visual figcaption { margin: 11px 3px 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 520px) { .jupyter-visual { padding: 10px; }.jupyter-toolbar { flex-wrap: wrap; gap: 6px 10px; }.kernel-status { margin-left: 0; }.jupyter-cell { grid-template-columns: 36px minmax(0, 1fr); gap: 7px; margin: 9px; padding: 9px; }.jupyter-execution { margin-left: 52px; } }
.numpy-array-visual { margin: 24px 0; padding: 18px; background: #f2f7ff; border: 1px solid #d9e5f5; border-radius: 14px; }
.numpy-dimension-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.numpy-dimension-card { min-width: 0; padding: 14px; background: #fff; border: 1px solid #d9e5f5; border-radius: 10px; }
.blog-post .numpy-dimension-card h3 { margin: 0; font-size: 14px; letter-spacing: 0; }
.numpy-dimension-card > p { margin: 3px 0 12px; color: var(--muted); font-size: 12px; }
.numpy-dimension-art { display: block; width: 100%; height: 150px; overflow: visible; }
.numpy-array-visual figcaption { margin: 12px 2px 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 680px) { .numpy-dimension-grid { grid-template-columns: 1fr; }.numpy-dimension-art { max-width: 300px; } }
.numpy-toc { margin: 26px 0 36px; padding: 17px 19px; border: 1px solid #d9e5f5; border-radius: 12px; background: #f2f7ff; }
.numpy-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.numpy-title-row h1 { margin: 24px 0; }
.blog-header .numpy-advanced-link { display: inline-flex; align-items: center; padding: 8px 13px; border: 1px solid #cfe1fb; border-radius: 22px; background: #eaf2ff; color: #2453a1; font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.blog-header .numpy-advanced-link:hover { background: #dceaff; }
.numpy-toc > strong { display: block; margin-bottom: 10px; font-size: 13px; }
.numpy-toc ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.numpy-toc li { margin: 0; }
.numpy-toc a { display: block; padding: 6px 10px; border: 1px solid #d9e5f5; border-radius: 18px; background: #fff; color: #2453a1; font-size: 12px; font-weight: 650; }
.numpy-toc a:hover { border-color: #9db9dc; background: #eaf2ff; }
.blog-post > section h2 { scroll-margin-top: 18px; }
@media (max-width: 520px) { .numpy-toc { padding: 14px; }.numpy-toc ul { gap: 6px; }.numpy-toc a { padding: 6px 8px; font-size: 11px; } }
.numpy-memory-visual { margin: 24px 0; padding: 18px; background: #f2f7ff; border: 1px solid #d9e5f5; border-radius: 14px; }
.ai-family-diagram { margin: 24px 0 0; padding: 14px; background: #f8fbff; border: 1px solid #d9e5f5; border-radius: 14px; }
.ai-family-diagram img { display: block; width: 100%; height: auto; border-radius: 10px; }
.ai-family-diagram figcaption { margin: 10px 3px 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.numpy-memory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.numpy-memory-card { min-width: 0; padding: 14px; background: #fff; border: 1px solid #d9e5f5; border-radius: 10px; }
.blog-post .numpy-memory-card h3 { margin: 0; font-size: 15px; letter-spacing: 0; }
.numpy-memory-card p { margin: 3px 0 8px; color: var(--muted); font-size: 12px; }
.numpy-memory-card svg { display: block; width: 100%; height: auto; }
.numpy-memory-visual figcaption { margin: 12px 2px 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
@media (max-width: 680px) { .numpy-memory-grid { grid-template-columns: 1fr; }.numpy-memory-card svg { max-width: 360px; } }
.numpy-playground { margin: 22px 0; padding: 18px; background: #f2f7ff; border: 1px solid #d9e5f5; border-radius: 14px; }
.numpy-playground > label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.numpy-playground textarea { display: block; width: 100%; min-height: 180px; resize: vertical; padding: 14px; border: 1px solid #cad9ed; border-radius: 9px; background: #10243e; color: #eff6ff; font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 4; }
.numpy-playground textarea:focus-visible, .numpy-playground button:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.numpy-playground-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.numpy-playground-controls button { padding: 10px 16px; border: 0; border-radius: 7px; background: #2563eb; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.numpy-playground-controls button:hover { background: #1d4ed8; }
.numpy-playground-controls button:disabled { cursor: wait; opacity: .65; }
.numpy-playground-controls span { color: var(--muted); font-size: 12px; }
.blog-post .numpy-playground .numpy-output { min-height: 56px; margin: 12px 0 0; padding: 13px; overflow: auto; border: 1px solid #d9e5f5; border-radius: 8px; background: #fff; color: #193b66; font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.blog-post .numpy-playground .numpy-output code { font: inherit; }
@media (max-width: 520px) { .numpy-playground { padding: 12px; }.numpy-playground-controls { align-items: flex-start; flex-direction: column; gap: 8px; } }
.api-gateway-flow { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr); align-items: center; gap: 12px; margin: 24px 0 34px; padding: 20px; background: #f8fbff; border: 1px solid #d9e5f5; border-radius: 14px; }
.api-gateway-flow > i { color: #2563eb; font-size: 22px; font-style: normal; }
.api-gateway-node { display: flex; min-width: 0; min-height: 68px; flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 10px; text-align: center; background: #fff; border: 1px solid #d9e5f5; border-radius: 10px; }
.api-gateway-node > span { color: #2563eb; font-size: 22px; line-height: 1; }
.api-gateway-node > strong { font-size: 13px; }
.api-gateway-node > small { color: var(--muted); font-size: 11px; }
.api-gateway-highlight { background: #eaf2ff; border-color: #b9d2f3; }
.api-gateway-services { display: grid; gap: 7px; }
.api-gateway-services .api-gateway-node { min-height: 48px; align-items: flex-start; padding: 7px 10px; text-align: left; }
@media (max-width: 560px) { .api-gateway-flow { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; }.api-gateway-flow > i { justify-self: center; transform: rotate(90deg); }.api-gateway-node { width: 100%; }.api-gateway-services { width: 100%; } }
.proxy-types-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin: 24px 0; }
.proxy-type-card { min-width: 0; margin: 0; padding: 22px; background: #fff; border: 1px solid #d9e5f5; border-radius: 14px; }
.proxy-type-card figcaption { display: flex; flex-direction: column; gap: 2px; }
.proxy-type-card figcaption strong { font-size: 18px; }
.proxy-type-card figcaption span, .proxy-type-card > p { color: var(--muted); font-size: 13px; }
.proxy-picture { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin: 20px 0 12px; }
.proxy-picture > i { color: #2563eb; font-size: 20px; font-style: normal; }
.proxy-side-boundary { min-width: 0; padding: 8px; border: 2px dotted #7395c4; border-radius: 10px; background: #f9fbff; }
.proxy-side-label { display: block; margin-bottom: 6px; color: #526c89; font-size: 9px; font-weight: 750; letter-spacing: .09em; text-align: center; text-transform: uppercase; }
.proxy-side-items { display: flex; min-width: 0; align-items: center; gap: 10px; }
.proxy-side-items > .proxy-picture-node { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
.proxy-side-items > i { flex: 0 0 auto; color: #2563eb; font-size: 16px; font-style: normal; }
.proxy-picture-node { display: flex; min-height: 76px; flex-direction: column; justify-content: center; align-items: center; gap: 3px; padding: 8px 4px; text-align: center; background: #f7faff; border: 1px solid #d9e5f5; border-radius: 10px; }
.proxy-picture-node > span { color: #2563eb; font-size: 23px; line-height: 1; }
.proxy-picture-node > strong { font-size: 11px; }
.proxy-picture-node.proxy-highlight { background: #eaf2ff; border-color: #b9d2f3; }
.proxy-picture-servers { display: grid; gap: 6px; }
.proxy-picture-servers .proxy-picture-node { min-height: 46px; flex-direction: row; }
.proxy-type-card > p { margin-bottom: 0; line-height: 1.6; }
@media (max-width: 560px) {
  .proxy-type-card { padding: 16px; }
  .proxy-picture { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .proxy-picture > i { justify-self: center; transform: rotate(90deg); }
  .proxy-side-boundary { width: 100%; padding: 10px; }
  .proxy-side-items { flex-direction: column; gap: 7px; }
  .proxy-side-items > .proxy-picture-node { width: 100%; min-height: 58px; }
  .proxy-side-items > i { transform: rotate(90deg); }
  .proxy-picture-servers { width: 100%; }
}

.lesson-navigation { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; margin-bottom: 32px; }
.lesson-navigation a { color: var(--muted); font-size: 14px; font-weight: 400; }
.lesson-navigation a:hover { text-decoration: underline; }
.lesson-navigation .lesson-next { margin-left: auto; text-align: right; }

.messaging-comparison { margin-top: 64px; }


.lesson-image { margin: 34px 0 40px; }
.lesson-image img { display: block; width: 100%; height: auto; border-radius: 12px; }
.lesson-image figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; }
.aws-signin-screenshot { position: relative; }
.aws-signin-highlight { position: absolute; top: 19.2%; left: 74.4%; width: 8.5%; height: 3.2%; box-sizing: border-box; border: 3px solid #ff9900; border-radius: 6px; pointer-events: none; }
.aws-signin-highlight span { position: absolute; top: calc(100% + 5px); right: 0; padding: 4px 8px; border-radius: 5px; background: #ff9900; color: #172033; font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.aws-login-highlight { position: absolute; box-sizing: border-box; border: 3px solid; border-radius: 6px; pointer-events: none; }
.aws-login-highlight > span { position: absolute; top: -25px; right: 0; padding: 4px 8px; border-radius: 5px; color: #fff; font-size: 12px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.aws-login-highlight-iam { top: 32.8%; left: 18.8%; width: 12.4%; height: 5.3%; border-color: #2684ff; }
.aws-login-highlight-iam > span { background: #1261c9; }
.aws-login-highlight-root { top: 78.1%; left: 19%; width: 20.6%; height: 5.4%; border-color: #ff9900; }
.aws-login-highlight-root > span { background: #a95a00; }
.aws-iam-login-field-highlight { position: absolute; box-sizing: border-box; border: 3px solid; border-radius: 8px; pointer-events: none; }
.aws-iam-login-account-highlight { top: 41.1%; left: 19.8%; width: 20.4%; height: 4.2%; border-color: #38bdf8; }
.aws-iam-login-name-highlight { top: 54.1%; left: 19.8%; width: 20.4%; height: 4.2%; border-color: #38bdf8; }
.aws-iam-login-password-highlight { top: 63%; left: 19.8%; width: 20.4%; height: 4.2%; border-color: #38bdf8; }
.aws-iam-login-submit-highlight { top: 73.3%; left: 19.8%; width: 20.4%; height: 4.4%; border-color: #ff9900; }
.aws-password-reset-field-highlight { position: absolute; box-sizing: border-box; border: 3px solid; border-radius: 9px; pointer-events: none; }
.aws-password-reset-old-highlight { top: 44.7%; left: 35.6%; width: 33.2%; height: 4%; border-color: #38bdf8; }
.aws-password-reset-new-highlight { top: 61.4%; left: 35.6%; width: 33.2%; height: 4%; border-color: #38bdf8; }
.aws-password-reset-confirm-highlight { top: 70.2%; left: 35.6%; width: 33.2%; height: 4%; border-color: #38bdf8; }
.aws-password-reset-submit-highlight { top: 80.3%; left: 35.6%; width: 33.2%; height: 4.6%; border-color: #ff9900; }
.aws-limited-user-identity-highlight, .aws-limited-user-cost-highlight, .aws-limited-user-health-highlight { position: absolute; box-sizing: border-box; border: 3px solid; border-radius: 7px; pointer-events: none; }
.aws-limited-user-identity-highlight { top: 3.4%; left: 95.7%; width: 3.9%; height: 3.3%; border-color: #38bdf8; }
.aws-limited-user-cost-highlight { top: 74.1%; left: 7%; width: 42.5%; height: 25.5%; border-color: #ff9900; }
.aws-limited-user-health-highlight { top: 49.6%; left: 74.4%; width: 18%; height: 6.4%; border-color: #ff9900; }
.aws-root-login-highlight { position: absolute; box-sizing: border-box; border: 3px solid; border-radius: 7px; pointer-events: none; }
.aws-root-choice-highlight { top: 38.8%; left: 18.6%; width: 20.5%; height: 9.8%; border-color: #2684ff; }
.aws-root-email-highlight { top: 65.8%; left: 18.6%; width: 20.5%; height: 4.6%; border-color: #ff9900; }
.aws-auth-highlight { position: absolute; box-sizing: border-box; border: 3px solid; border-radius: 7px; pointer-events: none; }
.aws-auth-email, .aws-auth-password { left: 19.5%; width: 20.7%; border-color: #2684ff; }
.aws-auth-email { top: 61.7%; height: 5.1%; }
.aws-auth-next, .aws-auth-signin { left: 19.5%; width: 20.7%; height: 4.8%; border-color: #ff9900; }
.aws-auth-next { top: 68.7%; }
.aws-auth-password { top: 42.2%; height: 4.8%; }
.aws-auth-signin { top: 53.5%; }
.aws-console-highlight { position: absolute; box-sizing: border-box; border: 3px solid; border-radius: 7px; pointer-events: none; }
.aws-console-search-highlight { top: 1.3%; left: 11%; width: 36.2%; height: 4.9%; border-color: #ff9900; }
.aws-console-recent-highlight { top: 41.2%; left: 7.3%; width: 42%; height: 58.5%; border-color: #38bdf8; }
.aws-iam-result-highlight { position: absolute; top: 22.4%; left: 31%; width: 52.1%; height: 14.8%; box-sizing: border-box; border: 4px solid #ff9900; border-radius: 16px; pointer-events: none; }
.aws-iam-users-highlight { position: absolute; top: 50.4%; left: 1.5%; width: 6.2%; height: 3.1%; box-sizing: border-box; border: 3px solid #38bdf8; border-radius: 5px; pointer-events: none; }
.aws-iam-create-user-button-highlight { position: absolute; top: 16.8%; left: 90.3%; width: 8.2%; height: 4.8%; box-sizing: border-box; border: 3px solid #38bdf8; border-radius: 9px; pointer-events: none; }
.aws-create-user-highlight { position: absolute; box-sizing: border-box; border: 3px solid; border-radius: 7px; pointer-events: none; }
.aws-create-username-highlight { top: 32.1%; left: 20.7%; width: 51.3%; height: 6.3%; border-color: #38bdf8; }
.aws-create-console-highlight { top: 42.2%; left: 20.6%; width: 29%; height: 4.7%; border-color: #ff9900; }
.aws-console-access-highlight, .aws-console-password-highlight, .aws-group-option-highlight, .aws-group-create-highlight, .aws-group-next-highlight { position: absolute; box-sizing: border-box; border: 3px solid; border-radius: 8px; pointer-events: none; }
.aws-console-access-highlight { top: 40.4%; left: 21%; width: 34%; height: 5%; border-color: #ff9900; }
.aws-console-password-highlight { top: 65.1%; left: 23%; width: 49.8%; height: 4.9%; border-color: #38bdf8; }
.aws-group-option-highlight { top: 30.4%; left: 21.5%; width: 24.9%; height: 13.6%; border-color: #38bdf8; }
.aws-group-create-highlight { top: 51.5%; left: 88.6%; width: 8.9%; height: 5%; border-color: #ff9900; }
.aws-group-next-highlight { top: 78.5%; left: 93.4%; width: 5.5%; height: 5.2%; border-color: #38bdf8; }
.aws-review-create-highlight { position: absolute; top: 92.2%; left: 90.8%; width: 8.7%; height: 6.1%; box-sizing: border-box; border: 3px solid #38bdf8; border-radius: 9px; pointer-events: none; }
.aws-retrieve-details-highlight { position: absolute; top: 45.5%; left: 19.8%; width: 79%; height: 36.3%; box-sizing: border-box; border: 3px solid #38bdf8; border-radius: 13px; pointer-events: none; }
.aws-retrieve-download-highlight { position: absolute; top: 84.5%; left: 75.8%; width: 11.4%; height: 5.5%; box-sizing: border-box; border: 3px solid #ff9900; border-radius: 10px; pointer-events: none; }
.aws-created-success-highlight { position: absolute; top: 13.2%; left: 20%; width: 78.5%; height: 17.7%; box-sizing: border-box; border: 3px solid #38bdf8; border-radius: 12px; pointer-events: none; }
.aws-created-user-highlight { position: absolute; top: 62.7%; left: 23.7%; width: 4.3%; height: 3.3%; box-sizing: border-box; border: 3px solid #ff9900; border-radius: 5px; pointer-events: none; }

.dns-animation { margin: 38px 0 48px; padding: 26px; background: #f5f9ff; border: 1px solid #d9e5f5; border-radius: 16px; }
.dns-phase + .dns-phase { margin-top: 24px; }
.dns-phase h3 { margin: 0 0 10px; font-size: 15px; }
.dns-stage { display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; gap: 12px; min-height: 150px; padding: 20px 12px; background: #fff; border: 1px solid #d9e5f5; border-radius: 12px; overflow: hidden; }
.dns-stage-node { padding: 18px 10px; text-align: center; background: #eaf2ff; border: 1px solid #b9d3f5; border-radius: 10px; }
.dns-stage-node strong, .dns-stage-node span { display: block; }
.dns-stage-node span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.dns-stage-lane { position: relative; height: 48px; border-top: 2px dashed #9db7d8; border-bottom: 2px dashed #9db7d8; }
.dns-packet { position: absolute; top: 8px; left: 0; z-index: 1; padding: 7px 9px; border-radius: 7px; color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; opacity: 0; }
.dns-request { background: #2563eb; }
.dns-response { right: 0; left: auto; background: #15935b; }
.dns-animation-status { min-height: 22px; margin: 18px 0 0; color: var(--muted); font-size: 14px; }
@media (max-width: 700px) { .dns-stage { grid-template-columns: 1fr; gap: 16px; }.dns-stage-lane { width: 100%; }.dns-stage-node { width: min(100%, 260px); justify-self: center; } }

.dns-animation .demo-controls { justify-content: center; }
.dns-animation .demo-controls button { min-width: 104px; }

.dns-animation .demo-controls { gap: 16px; }
.dns-animation .demo-controls button { min-width: 116px; padding: 11px 16px; border: 1px solid #b5c9e6; box-shadow: 0 2px 5px #16356818; }

.dns-stage-detail { grid-column: 1 / -1; margin: 4px 8px 0; padding-top: 12px; border-top: 1px solid #d9e5f5; color: var(--muted); font-size: 13px; text-align: center; }

.lookup-chain { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid #d9e5f5; }
.lookup-chain > i { color: #2563eb; font-style: normal; }
.lookup-box { min-height: 58px; padding: 9px 8px; background: #f5f9ff; border: 1px solid #cfe1fb; border-radius: 8px; text-align: center; transition: background-color .2s, border-color .2s; }
.lookup-box b, .lookup-box strong, .lookup-box span { display: block; }
.lookup-box b { color: #2563eb; font-size: 11px; }
.lookup-box strong { margin-top: 3px; font-size: 12px; }
.lookup-box span { margin-top: 3px; color: var(--muted); font-size: 10px; }
@media (max-width: 700px) { .lookup-chain { grid-template-columns: 1fr; }.lookup-chain > i { transform: rotate(90deg); justify-self: center; } }

.lookup-animation { margin: 28px 0 34px; padding: 20px; background: #fff; border: 1px solid #d9e5f5; border-radius: 12px; }
.lookup-sequence { display: flex; align-items: center; gap: 8px; overflow-x: auto; padding: 4px; }
.lookup-sequence .lookup-box { flex: 0 0 128px; }
.lookup-sequence > i { color: #2563eb; font-style: normal; }
.lookup-animation .dns-stage-detail { margin-top: 16px; }
.lookup-animation .demo-controls { justify-content: center; gap: 16px; margin-top: 16px; }
@media (max-width: 700px) { .lookup-sequence { flex-direction: column; overflow-x: visible; }.lookup-sequence > i { transform: rotate(90deg); }.lookup-sequence .lookup-box { flex-basis: auto; width: min(100%, 220px); } }

/* Detailed DNS lookup: keep the explanation visible while following packets. */
.lookup-viewport { overflow-x: auto; overflow-y: hidden; scroll-behavior: auto; border: 1px solid #d9e5f5; border-radius: 10px; }
.lookup-viewport:focus-visible { outline: 3px solid #2563eb; }
.lookup-canvas { position: relative; width: 1150px; height: 190px; padding: 20px; box-sizing: border-box; }
.lookup-nodes { display: flex; justify-content: space-between; gap: 24px; }
.lookup-nodes .lookup-box { box-sizing: border-box; width: 138px; flex-shrink: 0; min-height: 76px; }
.lookup-nodes .lookup-box.is-active { border-color: #2563eb; background: #eaf2ff; box-shadow: 0 0 0 2px #2563eb22; }
.lookup-track { position: absolute; left: 89px; right: 89px; top: 142px; border-top: 2px dashed #b5c9e6; }
.lookup-moving-packet { position: absolute; top: 125px; left: 0; padding: 6px 12px; border-radius: 8px; background: #2563eb; color: white; font-weight: 700; opacity: 0; }
.lookup-moving-packet.is-response { background: #147d51; }
.lookup-animation .dns-stage-detail { min-height: 74px; line-height: 1.6; text-align: left; }
.lookup-animation .demo-controls, .dns-animation .demo-controls { display: flex; justify-content: center; gap: 18px; margin-top: 18px; }
.lookup-animation .demo-controls button, .dns-animation .demo-controls button { padding: 10px 20px; border-radius: 8px; border: 1px solid #b5c9e6; background: #fff; color: #183b66; font: inherit; cursor: pointer; }
.lookup-animation button:disabled { opacity: .45; cursor: default; }
.lookup-animation button:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }

.lookup-animation #lookup-detail { font-weight: 700; margin-top: 18px; }

/* Keep the explanation attached to the travelling arrow. */
.lookup-canvas { height: 335px; }
.lookup-animation .lookup-canvas #lookup-detail { position: absolute; top: 166px; left: 0; width: 240px; box-sizing: border-box; margin: 0; padding: 10px; min-height: 0; border: 0; font-size: 13px; font-weight: 700; line-height: 1.5; text-align: center; color: var(--ink); }

/* Shared visual language for the two DNS stories. */
.dns-animation, .lookup-animation { background: #f8fafc; border: 1px solid #dbe4ed; border-radius: 20px; padding: clamp(16px, 3vw, 28px); box-shadow: 0 8px 28px #203d5b08; }
.dns-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 18px 0; font-size: 12px; color: #526579; }
.dns-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dns-legend span:last-child { margin-left: auto; }
.dns-legend i { width: 7px; height: 7px; border-radius: 50%; }
.request-dot { background: #356cc7; }.response-dot { background: #208064; }
.dns-phase { padding: 0; transition: opacity .25s; }
.dns-phase h3 { color: #53667a; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.dns-stage { grid-template-columns: minmax(85px,1fr) minmax(120px,1.6fr) minmax(85px,1fr); gap: 12px; border-radius: 14px; box-shadow: 0 2px 8px #233e5b05; }
.dns-phase.is-current .dns-stage { border-color: #86a9dd; box-shadow: 0 0 0 3px #356cc70b; }
.dns-stage-node { background: #f5f8fc; border: 1px solid #dce5ef; border-radius: 10px; padding: 16px 6px; font-size: 13px; min-width: 0; }
.dns-stage-node::before { content: '▤'; display: block; font-size: 24px; line-height: 1.2; margin-bottom: 9px; color: #597b9f; }
.dns-stage-node span { font-size: 10px; overflow-wrap: anywhere; }
.dns-stage-lane { border: 0; height: 48px; background: linear-gradient(#dce5ef,#dce5ef) center / 100% 2px no-repeat; }
.dns-packet { top: 9px; padding: 7px 8px; font-size: 10px; border-radius: 20px; box-shadow: 0 3px 8px #233e5b14; }
.dns-request { background: #356cc7; }.dns-response { background: #208064; }
.dns-stage-detail { min-height: 48px; font-weight: 600; color: #354c64; line-height: 1.6; }
.dns-progress { height: 3px; border-radius: 9px; overflow: hidden; background: #e2e9f1; margin: 22px 0 18px; }
.dns-progress span { display: block; height: 100%; background: #356cc7; transform: scaleX(0); transform-origin: left; }
.dns-animation .demo-controls, .lookup-animation .demo-controls { margin-top: 0; gap: 12px; }
.dns-animation .demo-controls button, .lookup-animation .demo-controls button { min-width: 116px; border-radius: 24px; padding: 11px 22px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 5px #17365508; transition: background .2s, box-shadow .2s; }
#dns-play, #lookup-play { background: #234f83; color: white; border-color: #234f83; }
#dns-play:hover, #lookup-play:hover { background: #183d6a; }
.dns-animation button:disabled, .lookup-animation button:disabled { opacity: .4; cursor: default; }
.dns-animation button:focus-visible, .lookup-animation button:focus-visible { outline: 3px solid #76a5e4; outline-offset: 4px; }
.lookup-viewport { background: white; scrollbar-width: thin; scrollbar-color: #b3c5d9 #f5f8fc; }
.lookup-canvas { height: 355px; padding-top: 24px; }
.lookup-nodes .lookup-box { min-height: 92px; border-radius: 12px; padding: 14px 8px; background: #f8fafc; transition: background .25s, border-color .25s, box-shadow .25s; }
.lookup-box strong { font-size: 12px; }.lookup-box span { font-size: 11px; line-height: 1.5; }
.lookup-nodes .lookup-box.is-active { background: #edf4ff; border-color: #7fa6de; box-shadow: 0 3px 12px #356cc712; }
.lookup-moving-packet { top: 135px; border-radius: 20px; background: #356cc7; box-shadow: 0 4px 12px #234f831a; font-size: 13px; }
.lookup-track { top: 152px; }
.lookup-animation .lookup-canvas #lookup-detail { top: 181px; background: #f8fafc; border: 1px solid #e4ebf2; border-radius: 12px; padding: 12px; font-size: 12px; line-height: 1.7; }
.lookup-scenario { font-size: 13px; color: #526579; }
@media(max-width: 480px) { .dns-stage { grid-template-columns: minmax(60px,1fr) minmax(92px,1.4fr) minmax(60px,1fr); padding: 16px 8px; gap: 5px; }.dns-stage-node { font-size: 11px; }.dns-stage-node span { font-size: 9px; }.dns-packet { font-size: 9px; padding: 7px 5px; }.dns-legend span:last-child { display: none; } }
@media(prefers-reduced-motion: reduce) { .dns-phase, .lookup-nodes .lookup-box { transition: none; } }

/* Online store capacity story */
.lb-story { margin: 24px 0 36px; padding: clamp(16px,3vw,28px); background: #f8fafc; border: 1px solid #dce5ef; border-radius: 18px; }
.lb-story-heading > span { font-size: 12px; font-weight: 700; color: #526c89; text-transform: uppercase; letter-spacing: .08em; }
.lb-story-heading h3 { margin: 8px 0 24px; }
.lb-story-stage { display: grid; grid-template-columns: 1fr .7fr 1.2fr 1fr; gap: 16px; align-items: center; min-height: 235px; background: white; border-radius: 12px; padding: 20px; }
.lb-person { color: #267b64; font-size: 54px; text-align: center; }
.lb-person small { display:block; color:#53667a; font-size:12px; }
.lb-crowd { display:grid; grid-template-columns:repeat(3,1fr); font-size:28px; color:#53667a; opacity:0; transition:opacity .4s; }
.lb-server { display:flex; flex-direction:column; align-items:center; gap:8px; border:1px solid #bfd4cb; background:#f1f8f4; border-radius:12px; padding:14px 8px; text-align:center; }
.lb-server small { font-size:11px; color:#526579; }
.lb-server-face { font-size:32px; color:#267b64; }
.lb-server-two { display:none; margin-top:12px; }
.lb-meter { height:5px; background:#dce7e0; width:80%; border-radius:5px; overflow:hidden; }
.lb-meter span { display:block; width:25%; height:100%; background:#359273; transition:width .5s; }
.lb-route { position:relative; height:80px; border-top:1px dashed #b8cbdc; border-bottom:1px dashed #b8cbdc; }
.lb-request, .lb-return { position:absolute; font-size:24px; opacity:0; }
.lb-request { top:2px; color:#356cc7; }.lb-return { bottom:2px; color:#208064; }
.lb-backlog { display:none; color:#c78035; font-size:20px; letter-spacing:2px; }
.lb-choice { display:none; text-align:center; font-size:42px; color:#526c89; }
.lb-issues { font-size:13px; line-height:1.8; padding-left:12px; border-left:3px solid #dce5ef; }
.lb-story-note { min-height:76px; font-size:14px; line-height:1.7; }
.lb-controls { display:flex; justify-content:center; gap:16px; }
.lb-controls button { font:inherit; font-size:13px; padding:11px 24px; border:1px solid #b5c9e6; border-radius:24px; background:white; color:#234f83; cursor:pointer; }
.lb-controls button:first-child { background:#234f83; color:white; }
.lb-controls button:disabled { opacity:.4; cursor:default; }
.lb-controls button:focus-visible { outline:3px solid #76a5e4; outline-offset:3px; }
.lb-story[data-scene="1"] .lb-request { animation:lb-out 1.8s ease-in-out 2; }
.lb-story[data-scene="1"] .lb-return { animation:lb-back 1.8s .9s ease-in-out 2; }
.lb-story[data-scene="2"] .lb-crowd, .lb-story[data-scene="3"] .lb-crowd { opacity:1; }
.lb-story[data-scene="2"] .lb-request { animation:lb-out .65s ease-in-out 5; }
.lb-story[data-scene="2"] .lb-backlog { display:block; margin-top:34px; }
.lb-story[data-scene="2"] .lb-server { background:#fff6eb; border-color:#e2b887; }
.lb-story[data-scene="2"] .lb-meter span { width:100%; background:#c78035; }
.lb-story[data-scene="2"] .lb-server-face { color:#b76c24; }
.lb-story[data-scene="3"] .lb-server-two, .lb-story[data-scene="3"] .lb-choice { display:block; }
.lb-story[data-scene="3"] .lb-server-two { display:flex; }
@keyframes lb-out { 0%{left:0;opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{left:75%;opacity:0} }
@keyframes lb-back { 0%{left:75%;opacity:0} 15%{opacity:1} 85%{opacity:1} 100%{left:0;opacity:0} }
@media(max-width:600px) { .lb-story-stage { grid-template-columns:1fr .6fr 1.2fr; gap:10px; padding:14px; }.lb-issues{grid-column:1 / -1}.lb-story-note{min-height:100px} }
@media(prefers-reduced-motion:reduce) { .lb-story * { animation:none !important; transition:none !important; } }

/* Align customers and servers in matching panels. */
.lb-story-stage { grid-template-columns: minmax(0,1fr) 72px minmax(0,1fr); align-items: center; gap: 18px; }
.lb-customers { box-sizing: border-box; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 18px 12px; border: 1px solid #bfd4cb; border-radius: 12px; background: #f1f8f4; text-align: center; min-width: 0; }
.lb-customer-title { font-size: 14px; margin-bottom: 8px; }
.lb-person { line-height: 1.15; }
.lb-person small { line-height: 1.5; margin-top: 8px; }
.lb-crowd { display: none; gap: 5px; margin-top: 12px; line-height: 1.2; }
.lb-servers { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.lb-server { box-sizing: border-box; min-height: 160px; justify-content: center; }
.lb-server-two { margin-top: 12px; }
.lb-route { align-self: center; width: 100%; box-sizing: border-box; }
.lb-backlog { letter-spacing: 0; text-align: center; }
.lb-issues { grid-column: 1 / -1; padding: 10px 14px; background: #f8fafc; border-left-width: 3px; border-radius: 5px; }
.lb-story[data-scene="2"] .lb-customers, .lb-story[data-scene="3"] .lb-customers { background: #fff6eb; border-color: #e2b887; }
.lb-story[data-scene="2"] .lb-person, .lb-story[data-scene="3"] .lb-person, .lb-story .lb-crowd { color: #b76c24; }
.lb-story[data-scene="2"] .lb-crowd, .lb-story[data-scene="3"] .lb-crowd { display: grid; }
@media(max-width:600px) { .lb-story-stage { grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr); gap: 8px; padding: 12px; }.lb-customers{padding:14px 6px}.lb-crowd{font-size:24px}.lb-server strong{font-size:13px} }

/* Step three: capacity is available; routing is the remaining problem. */
.lb-story[data-scene="3"] .lb-story-stage { grid-template-columns: minmax(0,1fr) minmax(90px,.8fr) minmax(0,1fr); }
.lb-story[data-scene="3"] .lb-customers { background: #f1f8f4; border-color: #bfd4cb; }
.lb-story[data-scene="3"] .lb-person, .lb-story[data-scene="3"] .lb-crowd { color: #267b64; }
.lb-story[data-scene="3"] .lb-route { height: auto; border: 0; }
.lb-story .lb-choice { padding: 14px 6px; border: 1px solid #e2b887; border-radius: 12px; background: #fff6eb; color: #b76c24; }
.lb-choice > span { display: block; font-size: 36px; line-height: 1.2; }
.lb-choice > strong { display: block; font-size: 12px; line-height: 1.4; margin: 8px 0; overflow-wrap: anywhere; }
.lb-choice > small { display: block; font-size: 11px; line-height: 1.4; }

/* Reception-desk analogy: the load balancer appears in the fourth scene. */
.lb-analogy-key { margin: -14px 0 18px; color: #526579; font-size: 13px; }
.lb-storyboard-wrap { display: block; min-width: 0; padding: 12px; overflow: hidden; }
.lb-storyboard { display: block; width: 100%; height: auto; overflow: visible; }
.lb-frame-paper { fill: #fffdf8; stroke: #718096; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lb-frame { opacity: .68; transition: opacity .25s ease, filter .25s ease; }
.lb-frame.is-active { opacity: 1; filter: drop-shadow(0 3px 4px #9ba9b733); }
.lb-frame.is-active .lb-frame-paper { fill: #fffaf0; stroke: #356cc7; stroke-width: 3; }
.lb-frame-number { fill: #526579; font: 700 11px system-ui,sans-serif; letter-spacing: .4px; }
.lb-frame-caption { fill: #354c64; font: 600 10px system-ui,sans-serif; text-anchor: middle; }
.lb-frame-caption-line { fill: none; stroke: #c8d1d9; stroke-width: 1.5; stroke-dasharray: 2 3; }
.lb-ground { fill: none; stroke: #a9b4bc; stroke-width: 1.5; stroke-linecap: round; }
.lb-speech { fill: #536579; font: 700 8px system-ui,sans-serif; text-anchor: middle; }
.lb-empty-note { fill: #768394; font: italic 9px system-ui,sans-serif; text-anchor: middle; }
.lb-desk-label { fill: #526579; font: 700 8px system-ui,sans-serif; text-anchor: middle; }
.lb-route-arrow { fill: none; stroke: #356cc7; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 5 4; }
.lb-arrow-head { fill: none; stroke: #356cc7; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lb-frame.is-active .sketch-customer { animation: lb-sketch-bob .55s ease-in-out 2 alternate; }
.lb-frame.is-active .sketch-clerk { animation: lb-sketch-bob .65s ease-in-out 2 alternate; }
.lb-frame[data-frame="2"].is-active .queue-front, .lb-frame[data-frame="3"].is-active .queue-front, .lb-frame[data-frame="4"].is-active .queue-front { animation: lb-queue-step .75s ease-in-out .1s 2 both; }
.lb-frame[data-frame="2"].is-active .queue-middle, .lb-frame[data-frame="3"].is-active .queue-middle, .lb-frame[data-frame="4"].is-active .queue-middle { animation: lb-queue-step .75s ease-in-out .55s 2 both; }
.lb-frame[data-frame="2"].is-active .queue-back, .lb-frame[data-frame="3"].is-active .queue-back, .lb-frame[data-frame="4"].is-active .queue-back { animation: lb-queue-step .75s ease-in-out 1s 2 both; }
.lb-frame[data-frame="4"].is-active .lb-route-arrow { animation: lb-sketch-route .8s linear 3; }
@keyframes lb-sketch-bob { to { translate: 0 -3px; } }
@keyframes lb-queue-step { 0% { translate: 0 0; } 20% { translate: 2px -2px; } 40% { translate: 4px 1px; } 65% { translate: 7px -1px; } 85%,100% { translate: 9px 0; } }
@keyframes lb-sketch-route { to { stroke-dashoffset: -18; } }
.lb-story[data-scene="3"] .lb-choice { display: none; }
.lb-story[data-scene="4"] .lb-server-two { display: flex; }
.lb-story[data-scene="4"] .lb-crowd { display: grid; opacity: 1; }
.lb-story[data-scene="4"] .lb-story-stage { grid-template-columns: minmax(0,1fr) minmax(105px,.8fr) minmax(0,1fr); }
.lb-story[data-scene="4"] .lb-choice { display: block; }
.lb-story[data-scene="4"] .lb-request { animation: lb-out .9s ease-in-out 4; }
.lb-story[data-scene="4"] .lb-customers { background: #f1f8f4; border-color: #bfd4cb; }
.lb-story[data-scene="4"] .lb-person, .lb-story[data-scene="4"] .lb-crowd { color: #267b64; }
.lb-story[data-scene="3"] .lb-customers { background: #fff6eb; border-color: #e2b887; }
.lb-story[data-scene="3"] .lb-person, .lb-story[data-scene="3"] .lb-crowd { color: #b76c24; }
.lb-story[data-scene="3"] .lb-server:first-child { background: #fff6eb; border-color: #e2b887; }
.lb-story[data-scene="3"] .lb-server:first-child .lb-meter span { width: 100%; background: #c78035; }
.lb-story[data-scene="3"] .lb-server:first-child .lb-server-face { color: #b76c24; }
@media(max-width:600px) { .lb-story[data-scene="4"] .lb-story-stage { grid-template-columns: minmax(0,1fr) 70px minmax(0,1fr); } }
@media(max-width:720px) { .lb-storyboard-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }.lb-storyboard { min-width: 880px; } }

.lb-solution { margin: 28px 0; padding: clamp(16px,3vw,28px); border:1px solid #dce5ef; border-radius:18px; background:#f8fafc; }
.lb-solution svg { display:block; width:100%; height:auto; background:white; border-radius:12px; }
.lb-solution svg text { font-family:inherit; font-size:13px; text-anchor:middle; fill:#354c64; }
.lb-solution .lb-solution-packet text { fill:white; font-weight:700; }
.lb-solution [data-router-face] { font-size:24px; }