/* Section-local composition, using LookTwinStudio 1.2.0 tokens. */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 200; top: -100px; left: 16px; padding: 12px 20px; background: var(--lt-color-ink); color: var(--lt-color-milk); }
.skip-link:focus { top: 12px; }
.kb-header { grid-template-columns: 1fr auto 1fr; }
.kb-header nav, .kb-footer nav { display: flex; gap: 24px; align-items: center; justify-content: end; }
.kb-header nav a { padding: 8px 0; font-size: 13px; }
.kb-hub, .kb-inner { max-width: 1440px; margin: auto; }
.kb-inner { padding: 0 32px 80px; }
.kb-breadcrumbs { font-size: 13px; padding: 24px 0; max-width: 90ch; }
.kb-hero { display: grid; grid-template-columns: 1.12fr 1fr; align-items: stretch; min-height: 660px; }
.kb-hero-copy { padding: 64px 40px 40px 32px; align-self: center; z-index: 1; }
.kb-hero h1 { font-size: clamp(46px, 4.8vw, 72px); line-height: 1.02; letter-spacing: var(--lt-tracking-hero); margin: 32px 0; }
.kb-hero figure { margin: 0; position: relative; min-width: 0; }
.kb-hero figure img { width: 100%; height: 100%; max-height: 760px; object-fit: cover; }
.kb-hero figcaption { position: absolute; bottom: 0; padding: 12px 20px; background: var(--lt-color-milk); font-size: 13px; }
.kb-lead { font: 20px/1.55 var(--lt-font-editorial); max-width: 65ch; }
.kb-meta { font: 12px/1.7 var(--lt-font-utility); color: var(--lt-color-ink); margin: 24px 0; }
.kb-section { padding: 64px 32px; border-top: var(--lt-border); }
.kb-section > h2, .kb-title h1 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.08; letter-spacing: -.04em; max-width: 24ch; }
.kb-section-intro { max-width: 65ch; font-size: 18px; margin: 24px 0 32px; }
.kb-task-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 32px; }
.kb-task-card { padding: 24px; display: flex; flex-direction: column; background: var(--lt-color-sky); }
.kb-task-card h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.025em; }
.kb-task-card h3 a { border: 0; }
.kb-task-card p { font-size: 15px; }
.kb-task-card .lt-utility { font-size: 11px; margin-bottom: 32px; }
.kb-task-card .kb-card-link { margin-top: auto; padding-top: 20px; align-self: start; }
.kb-tone-1 { background: var(--lt-color-butter); }
.kb-tone-2 { background: var(--lt-color-tint); }
.kb-tone-3 { background: var(--lt-color-moss); color: var(--lt-color-milk); }
.kb-tone-3 h3, .kb-tone-3 a { color: var(--lt-color-milk); }
.kb-tone-3 a:hover { color: var(--lt-color-ink); }
.kb-problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 32px; gap: 0 32px; }
.kb-problem { padding: 28px 0; border-top: var(--lt-border); display: flex; flex-direction: column; }
.kb-problem h3 { font-size: 23px; line-height: 1.2; margin-top: 16px; }
.kb-problem p { font-size: 15px; }
.kb-problem > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: auto; font-size: 13px; }
.kb-watch-link { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.kb-watch-link time { font: 12px/1.7 var(--lt-font-utility); white-space: nowrap; }
.kb-watch-link.is-active { background: var(--lt-color-butter); }
.kb-recording-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.kb-recording-heading h2 { font-size: clamp(32px, 3.8vw, 52px); line-height: 1.08; letter-spacing: -.04em; }
.kb-recording-heading .kb-meta { margin: 16px 0 0; }
.kb-recording-page-link { font-size: 14px; }
.kb-group { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; padding-top: 40px; }
.kb-group > h3 { font: italic 30px/1.2 var(--lt-font-editorial); max-width: 20ch; }
.kb-material-row { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 20px; padding: 24px 0; border-top: var(--lt-border); }
.kb-material-row h4 { font-size: 21px; line-height: 1.25; }
.kb-material-row p { margin: 12px 0 0; font-size: 15px; }
.kb-material-row > .lt-utility { padding-top: 6px; }
.kb-format-link { align-self: start; font: 12px/2 var(--lt-font-utility); }
.kb-ai-room { background: var(--lt-color-sky); }
.kb-ai-room > p, .kb-ai-room > ol, .kb-ai-room .kb-prompt { max-width: 76ch; }
.kb-actions { margin: 28px 0 36px; }
.kb-action-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0; }
.kb-action-buttons .lt-btn { white-space: normal; line-height: 1.4; padding: 12px 18px; text-align: center; }
.kb-prompt summary, .kb-original summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.kb-prompt { max-width: 850px; }
.kb-copy-status { min-height: 1.5em; font-size: 13px; margin: 0; }
textarea { display: block; width: 100%; padding: 16px; border: 1px solid var(--lt-color-ink); border-radius: 2px; background: var(--lt-color-milk); color: var(--lt-color-ink); font: 14px/1.6 var(--lt-font-utility); resize: vertical; margin-top: 8px; }
label { font-size: 14px; }
.kb-title { padding: 32px 0 12px; max-width: 1060px; }
.kb-title h1 { max-width: 27ch; margin: 24px 0; }
.kb-reading-layout { display: grid; grid-template-columns: minmax(0, 820px) minmax(220px, 1fr); align-items: start; gap: 64px; }
.kb-prose { min-width: 0; width: 100%; max-width: 100%; font-size: 17px; line-height: 1.7; }
.kb-prose p, .kb-prose li { max-width: 78ch; }
.kb-prose h2 { font-size: 30px; line-height: 1.2; letter-spacing: -.025em; margin: 52px 0 20px; }
.kb-prose h3 { font-size: 23px; line-height: 1.3; margin: 32px 0 16px; }
.kb-prose h4, .kb-prose h5, .kb-prose h6 { font-size: 19px; line-height: 1.4; margin: 24px 0 12px; }
.kb-prose li + li { margin-top: 8px; }
.kb-prose ul, .kb-prose ol { padding-left: 26px; }
.kb-prose hr { border: 0; border-top: var(--lt-border); margin: 32px 0; }
.kb-prose blockquote { margin: 24px 0; border-left: 4px solid var(--lt-color-cherry); padding: 4px 20px; background: var(--lt-color-tint); }
.kb-prose blockquote.kb-editorial { border-left-color: var(--lt-color-moss); background: transparent; border-top: var(--lt-border); border-bottom: var(--lt-border); font-size: 15px; }
.kb-prose blockquote.kb-editorial p { max-width: 78ch; }
.kb-errata { padding: 0; list-style: none; margin: 0; }
.kb-errata li { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 24px; padding: 16px 0; border-top: var(--lt-border); }
.kb-errata time { font: 13px/1.8 var(--lt-font-utility); }
.kb-errata p { margin: 0; max-width: 78ch; line-height: 1.6; }
.kb-errata li > a { justify-self: start; align-self: start; }
#edition ul { max-width: 80ch; padding-left: 22px; }
#edition li + li { margin-top: 8px; }
.kb-context { padding: 24px; background: var(--lt-color-tint); }
.kb-context h2:first-child { margin-top: 0; }
.kb-note { border-left: 3px solid var(--lt-color-moss); padding-left: 16px; font-size: 14px; line-height: 1.6; }
.kb-toc { position: sticky; top: 112px; max-height: calc(100vh - 144px); overflow-y: auto; padding: 20px 0; border-top: var(--lt-border-strong); }
.kb-toc h2 { font: 12px/1.4 var(--lt-font-utility); text-transform: uppercase; letter-spacing: .08em; }
.kb-toc ul { list-style: none; padding: 0; }
.kb-toc li { font-size: 14px; line-height: 1.5; margin: 14px 0; }
.kb-toc > p { font-size: 13px; }
.kb-code { background: var(--lt-color-ink); color: var(--lt-color-milk); margin: 24px 0; padding: 16px; border-radius: 2px; }
.kb-code pre { max-width: 100%; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: 14px/1.65 var(--lt-font-utility); }
.kb-copy-code { display: block; margin: 0 0 12px auto; min-height: 40px; padding: 8px 12px; background: transparent; color: var(--lt-color-milk); border: 1px solid var(--lt-color-milk); font-size: 13px; cursor: pointer; }
.kb-copy-code:hover { color: var(--lt-color-ink); background: var(--lt-color-butter); }
.kb-prose :not(pre) > code { font-size: .9em; overflow-wrap: anywhere; }
.kb-table { max-width: 100%; overflow-x: auto; margin: 24px 0; }
.kb-table table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.55; }
.kb-table th, .kb-table td { min-width: 110px; padding: 12px; text-align: left; vertical-align: top; border: var(--lt-border); }
.kb-table th { background: var(--lt-color-sky); }
.kb-evidence { margin: 32px 0; }
.kb-evidence img { width: 100%; height: auto; }
.kb-evidence figcaption { font-size: 13px; padding: 12px 0; line-height: 1.6; }
.kb-task-source { margin-top: 56px; padding-top: 20px; border-top: var(--lt-border-strong); }
.kb-original { margin-top: 24px; }
.kb-original > .kb-prose { max-width: 820px; }
.kb-skill-room { background: var(--lt-color-ink); color: var(--lt-color-milk); }
.kb-skill-room h2, .kb-skill-room h3, .kb-skill-room a { color: var(--lt-color-milk); }
.kb-skill-room .lt-btn, .kb-skill-room a:hover { color: var(--lt-color-ink); }
.kb-install-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 40px 0; }
.kb-author { display: grid; grid-template-columns: 220px minmax(0, 700px); gap: 48px; align-items: center; }
.kb-author > img { width: 220px; height: auto; }
.kb-watch { background: var(--lt-color-ink); color: var(--lt-color-milk); }
.kb-watch video { display: block; width: 100%; aspect-ratio: 3440/1440; max-height: 65vh; background: var(--lt-color-ink); }
.kb-player-tools { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; padding: 16px 24px; font-size: 14px; }
.kb-player-tools p { margin-right: auto; }
.kb-watch a { color: var(--lt-color-milk); }
.kb-watch a:hover { color: var(--lt-color-ink); }
.kb-watch noscript p { padding: 16px; }
#playback-speed { font: inherit; padding: 8px; background: var(--lt-color-milk); color: var(--lt-color-ink); }
.kb-chapters { padding: 0; list-style: none; }
.kb-chapters li { border-top: var(--lt-border); }
.kb-chapters a { display: grid; grid-template-columns: 100px 1fr; gap: 24px; padding: 16px 0; border: 0; }
.kb-chapters time { font: 13px/1.8 var(--lt-font-utility); }
.kb-chapters .is-active { background: var(--lt-color-butter); }
.kb-transcript-block { padding-bottom: 16px; border-bottom: var(--lt-border); }
.kb-footer { padding: 24px 32px; border-top: var(--lt-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; font-size: 13px; }
:focus-visible { outline: var(--lt-focus-ring); outline-offset: 4px; }
@media (min-width: 1100px) { .kb-hero h1 { width: calc(100% + 80px); text-shadow: var(--lt-overlap-glow); } }
@media (max-width: 1100px) { .kb-header .lt-header__note { display: none; } .kb-header { grid-template-columns: 1fr auto; } .kb-task-grid { grid-template-columns: 1fr 1fr; } .kb-reading-layout { gap: 32px; grid-template-columns: minmax(0, 1fr) 240px; } }
@media (max-width: 800px) { .kb-hero { grid-template-columns: 1fr 1fr; min-height: auto; } .kb-hero-copy { padding: 32px 24px; } .kb-hero h1 { font-size: 42px; } .kb-reading-layout { display: flex; flex-direction: column-reverse; gap: 24px; } .kb-toc { position: static; max-height: 260px; width: 100%; } .kb-problem-grid { grid-template-columns: 1fr 1fr; } .kb-group { grid-template-columns: 1fr; gap: 24px; } .kb-group > h3 { max-width: none; } }
@media (max-width: 600px) { .kb-header { position: static; min-height: 80px; gap: 16px; padding: 16px; } .kb-header nav { gap: 12px; } .kb-header nav a:not(:last-child) { display: none; } .kb-header .lt-header__brand { font-size: 14px; } .kb-hero { display: flex; flex-direction: column; } .kb-hero-copy { padding: 32px 16px; } .kb-hero h1 { font-size: 44px; } .kb-hero figure img { max-height: 460px; object-position: center; } .kb-section { padding: 48px 16px; } .kb-task-grid, .kb-problem-grid, .kb-install-grid { grid-template-columns: 1fr; } .kb-task-card { padding: 24px; } .kb-material-row { grid-template-columns: 24px minmax(0,1fr); gap: 12px; } .kb-format-link { grid-column: 2; justify-self: start; } .kb-inner { padding: 0 16px 48px; } .kb-title { padding-top: 8px; } .kb-title h1 { font-size: 36px; } .kb-prose { font-size: 16px; } .kb-context { padding: 20px 16px; } .kb-prose h2 { font-size: 26px; } .kb-author { grid-template-columns: 1fr; gap: 24px; } .kb-author > img { width: 160px; } .kb-lead { font-size: 18px; } .kb-footer { padding: 24px 16px; } .kb-footer nav { flex-wrap: wrap; gap: 12px; justify-content: start; } .kb-code { padding: 12px; } .kb-chapters a { grid-template-columns: 80px minmax(0,1fr); gap: 12px; } .kb-errata li { grid-template-columns: 72px minmax(0,1fr); gap: 12px; } .kb-player-tools { padding: 12px; gap: 12px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }