body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--ink:#1a1a2e;--muted:#6b7280;--line:#e5e7eb;--bg:#fff;--card:#fff;--backdrop:#f3f2f0}*{box-sizing:border-box}body{background:#fff;background:var(--bg);color:#1a1a2e;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;margin:0}button,input,select{font-family:inherit}.app{margin:0 auto;max-width:1400px;padding:24px}.header{border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--line);flex-wrap:wrap;gap:24px;margin-bottom:24px;padding-bottom:20px}.brand,.header{align-items:center;display:flex}.brand{gap:12px}.logo{display:block;height:40px;width:auto}.logo.databricks{border-radius:8px}.times{color:#6b7280;color:var(--muted);font-size:20px}.header h1{flex:1 1;font-size:20px;font-weight:600;margin:0}.picker{color:#6b7280;color:var(--muted);font-size:14px}.picker select{background:#fff;background:var(--card);border:1px solid #e5e7eb;border:1px solid var(--line);border-radius:8px;color:#1a1a2e;color:var(--ink);font-size:14px;margin-left:6px;padding:6px 10px}.compare{grid-gap:24px;display:grid;gap:24px;grid-template-columns:1fr 1fr}@media (max-width:900px){.compare{grid-template-columns:1fr}}.pane{background:#f3f2f0;background:var(--backdrop);border:1px solid #e5e7eb;border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;gap:12px;padding:16px}.pane-header{align-items:center;display:flex;gap:16px;justify-content:center;min-height:36px}.lang{font-size:15px;font-weight:600}.arrow{background:#fff;background:var(--card);border:1px solid #e5e7eb;border:1px solid var(--line);border-radius:50%;color:#1a1a2e;color:var(--ink);cursor:pointer;font-size:16px;height:36px;line-height:1;transition:background .15s ease;width:36px}.arrow:hover{background:#fff;background:var(--bg)}.viewport{aspect-ratio:16/10;overflow:hidden;position:relative;width:100%}.player{height:100%;height:calc(var(--zoom, 1)*100%);left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);transform:translate(calc(-50% + var(--dx, 0%)),calc(-50% + var(--dy, 0%)));width:100%;width:calc(var(--zoom, 1)*100%)}.scrubber{align-items:center;background:#fff;background:var(--card);border:1px solid #e5e7eb;border:1px solid var(--line);border-radius:16px;display:flex;gap:20px;margin-top:24px;padding:16px 20px}.scrubber input[type=range]{-webkit-appearance:none;appearance:none;background:#e5e7eb;background:var(--line);border-radius:5px;cursor:pointer;flex:1 1;height:10px;outline:none}.scrubber input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:#1a1a2e;background:var(--ink);border:3px solid #fff;border:3px solid var(--card);border-radius:50%;box-shadow:0 1px 4px #00000040;height:22px;width:22px}.scrubber input[type=range]::-moz-range-thumb{background:#1a1a2e;background:var(--ink);border:3px solid #fff;border:3px solid var(--card);border-radius:50%;box-shadow:0 1px 4px #00000040;height:16px;width:16px}.scrubber input[type=range]::-moz-range-track{background:#e5e7eb;background:var(--line);border-radius:5px;height:10px}.frame-count{font-feature-settings:"tnum";color:#6b7280;color:var(--muted);font-size:15px;font-variant-numeric:tabular-nums;min-width:92px;text-align:right;white-space:nowrap}.play-btn{align-items:center;background:#1a1a2e;background:var(--ink);border:1px solid #e5e7eb;border:1px solid var(--line);border-radius:50%;color:#fff;color:var(--card);cursor:pointer;display:flex;flex:none;height:40px;justify-content:center;padding:0;transition:opacity .15s ease;width:40px}.play-btn svg{display:block}.play-btn:hover{opacity:.85}

/* Presentation variant: same animations and language controls, without the playback bar. */
@font-face{font-family:Switzer;src:url('/fonts/switzer-400.woff2') format('woff2');font-weight:400;font-display:swap}
body{color:#070707;background:white;font-family:Inter,Arial,sans-serif}
.app{max-width:none;padding:28px 32px}
.scrubber{display:none!important}
.header h1{font-size:18px;font-weight:500}
.logo.gt{width:38px;height:26px}.logo.databricks{width:132px;height:24px;border-radius:0}
.pane,.picker select{border-radius:0}.pane{padding:16px;background:#f8f9fb;gap:16px}
.arrow{border-radius:0}.compare{gap:24px}
@media(max-width:900px) and (min-width:641px){.compare{grid-template-columns:1fr 1fr}.header{gap:16px}.header h1{display:none}.app{padding:20px}}

@font-face{font-family:Inter;src:url(/fonts/inter-100-900.woff2) format("woff2");font-weight:100 900;font-display:swap}
.header h1{font-family:Switzer,Inter,sans-serif}

/* Fit the pinned presentation viewport; the parent page owns vertical scrolling. */
html,body,#root{height:100%;overflow:hidden}
.app{height:100%;display:flex;flex-direction:column;min-width:0;padding:22px 32px 32px}
.header{flex-shrink:0;justify-content:space-between;gap:12px;margin-bottom:20px;padding-bottom:16px}
.header h1{display:none}
.compare{flex:1;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.pane{min-width:0;min-height:0;overflow:hidden}
.pane-header{flex-shrink:0}.viewport{flex:1;min-height:0;aspect-ratio:auto}
.picker{min-width:0}.picker select{max-width:100%;margin-left:4px}
@media(max-width:640px){.app{padding:16px}.header{gap:10px;margin-bottom:12px;padding-bottom:12px}.logo.gt{width:28px}.logo.databricks{width:108px}.picker{font-size:12px}.picker select{font-size:12px;max-width:180px}.compare{gap:10px}.pane{padding:8px;gap:6px}.pane-header{gap:6px}.lang{font-size:12px}.arrow{width:28px;height:28px;flex-shrink:0}}

/* Chapter selection comes from page scroll; keep its controlled React picker
   mounted only as the bridge target, outside the visible and focusable UI. */
.header{display:none}

/* Direct language choices sit over the right animation. */
.language-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0;border-bottom:1px solid #07070725;min-height:40px}
.language-tab{appearance:none;min-width:0;min-height:40px;padding:8px 5px;border:0;border-radius:0;background:transparent;color:#626262;font:400 13px/1.4 Inter,Arial,sans-serif;cursor:pointer;overflow-wrap:anywhere}
.language-tab[aria-selected=true]{color:#2f5ce0;box-shadow:inset 0 -2px #2f5ce0;background:#fff}
.language-tab:focus-visible{outline:2px solid #2f5ce0;outline-offset:-2px}
.pane-header{min-height:40px}
@media(max-width:640px){.compare{grid-template-columns:minmax(0,1fr);grid-template-rows:1fr 1fr}.language-tab{font-size:12px}.app{padding:16px}.pane{padding:12px}}

/* Bare animation canvases, keeping their source/translation baselines aligned. */
.app{padding:16px 24px 24px}
.pane{padding:0;border:0;border-radius:0;background:transparent;gap:12px}
.compare{gap:32px}
.language-tabs{width:100%;align-self:start}
@media(max-width:640px){.app{padding:8px 16px 16px}.compare{gap:16px}.pane{padding:0;gap:6px}}

/* Align the English heading rule with the translated language-tab baseline. */
.pane-header{height:41px;min-height:41px;border-bottom:1px solid #07070725}

/* Both ready canvases enter on the same clock, independent of scroll speed. */
.viewport{transform:none;will-change:opacity,translate}
html[data-pair-ready="false"] .viewport{visibility:hidden}
html[data-pair-ready="true"] .viewport{animation:pair-arrival 420ms cubic-bezier(.22,.61,.36,1) both}
@keyframes pair-arrival{from{opacity:0;translate:0 48px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.viewport{animation:none!important}}