@layer reset,base,layout,components;
@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  body,h1,h2,h3,p,figure,pre{margin:0}
  img{max-width:100%;height:auto;display:block}
  button,input,select{font:inherit}
  button,a,input{-webkit-tap-highlight-color:transparent}
  button{cursor:pointer}
  a{color:inherit}
  [hidden]{display:none!important}
}
@layer base {
  :root{--paper:#f7f0e6;--parchment:#f5ebdd;--oxblood:#571f2b;--wine:#79323d;--copper:#c78249;--ochre:#d5ae65;--ink:#2c2223;--muted:#756361;--line:#dacec0;--white:#fffaf4;--serif:Georgia,'Times New Roman',serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;color-scheme:light}
  html{scroll-padding-top:100px;scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
  ::selection{background:var(--ochre);color:var(--ink)}
  :focus-visible{outline:3px solid var(--copper);outline-offset:5px}
  h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:1.12;text-wrap:balance}
  h1{font-size:clamp(42px,5.4vw,76px)}
  h2{font-size:clamp(30px,3.4vw,46px)}
  h3{font-size:27px}
  p{max-width:72ch}
  code{font-family:var(--mono);font-size:.85em}
  p code,li code,td code{background:#e9dfd3;border-radius:3px;padding:2px 4px;overflow-wrap:anywhere}
  pre{font-family:var(--mono);font-size:13px;line-height:1.8;overflow:auto;tab-size:4}
  pre code{font-size:inherit}
  button{color:inherit}
  a{text-underline-offset:4px}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
}
@layer layout {
  .wrap{max-width:1280px;margin-inline:auto;padding-inline:48px}
  .site-header{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:20}
  .header-inner{height:88px;display:flex;align-items:center;justify-content:space-between;gap:35px}
  .brand{flex-shrink:0}
  .brand img{width:150px;height:46px;object-fit:contain}
  nav{display:flex;align-items:center;gap:30px;font-size:13px;font-weight:600}
  nav a{text-decoration:none}
  nav a:hover,nav a[aria-current=page]{color:var(--wine)}
  .nav-action{border:1px solid var(--oxblood);padding:10px 18px;display:flex;gap:22px}
  .hero{padding-top:70px;padding-bottom:64px;display:grid;grid-template-columns:1.03fr 1fr;gap:64px;align-items:center}
  .hero h1{max-width:640px}
  .hero h1 em,.page-head h1 em{font-style:normal;color:var(--wine)}
  .hero .lead{margin-top:26px;max-width:520px}
  .section{padding-block:70px}
  .section-line{border-top:1px solid var(--line)}
  .section-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:36px}
  .section-heading p{max-width:390px;color:var(--muted);font-size:15px}
  .split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
  .three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
  .page-head{padding-block:64px 46px}
  .page-head h1{max-width:950px}
  .page-head .lead{max-width:770px;margin-top:22px}
  .reading{max-width:850px}
  .prose p,.prose ul,.prose ol,.prose table{margin-block:18px}
  .prose h2{margin-top:46px;margin-bottom:20px}
  .prose h3{margin-top:28px;margin-bottom:14px}
  .prose li{margin-block:7px}
  .prose .codehilite,.prose pre{margin-block:20px}
  .site-footer{padding-top:54px;border-top:1px solid var(--line);background:#f0e5d7}
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:36px}
  .footer-grid h2{font:600 12px/1.6 var(--mono);letter-spacing:.02em;margin-bottom:16px}
  .footer-grid a:not(:has(img)){display:block;font-size:13px;text-decoration:none;margin-bottom:10px}
  .footer-brand p{font-family:var(--serif);font-size:22px;line-height:1.4;margin-top:16px}
  .footer-bottom{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line);margin-top:44px;padding-block:20px;font-size:11px;color:var(--muted)}
}
@layer components {
  .skip{position:fixed;top:-70px;left:15px;background:var(--oxblood);color:white;padding:10px 20px;z-index:50}
  .skip:focus{top:12px}
  .eyebrow{font:11px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.13em;color:var(--wine);margin-bottom:20px}
  .eyebrow .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--copper);margin-right:9px}
  .lead{font-size:19px;line-height:1.65;color:var(--muted)}
  .actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
  .button{display:inline-flex;justify-content:space-between;align-items:center;gap:30px;padding:13px 21px;background:var(--oxblood);border:1px solid var(--oxblood);color:var(--white);font-size:13px;font-weight:600;text-decoration:none}
  .button:hover{background:var(--wine)}
  .button.secondary{background:transparent;color:var(--oxblood)}
  .button.secondary:hover{background:var(--parchment)}
  .text-link{font-size:13px;font-weight:600;color:var(--wine);text-decoration:none;border-bottom:1px solid var(--copper);padding-bottom:3px}
  .fine{font-size:12px;color:var(--muted);margin-top:20px}
  .hero-proof{display:flex;gap:22px;flex-wrap:wrap;font:10px/1.8 var(--mono);text-transform:uppercase;letter-spacing:.07em;margin-top:26px;color:var(--muted)}
  .terminal{background:#302326;color:#f4e8da;border:1px solid #51373b;min-width:0;box-shadow:10px 10px 0 #e7d9c7}
  .terminal-bar{padding:15px 20px;border-bottom:1px solid #61434a;display:flex;justify-content:space-between;gap:10px;font:10px/1.6 var(--mono);color:#d2b8af}
  .terminal-dots{display:flex;gap:5px;align-items:center}.terminal-dots i{width:6px;height:6px;border-radius:50%;background:#a16e67}
  .terminal-body{padding:25px 24px;min-height:270px}
  .terminal pre{font-size:12px;color:#f4e8da}
  .terminal .prompt{color:#dca66c}
  .terminal .string{color:#e6b580}
  .terminal .comment{color:#c6afa9}
  .terminal-footer{border-top:1px solid #61434a;padding:14px 20px;font-size:11px;color:#d7c3bc;display:flex;align-items:center;gap:9px}
  .terminal-footer span:first-child{width:5px;height:5px;background:var(--ochre);border-radius:50%}
  .console-tabs{display:flex;gap:0;border-bottom:1px solid #61434a}
  .console-tabs button{flex:1;border:0;border-bottom:2px solid transparent;background:none;padding:13px 5px;color:#d7c3bc;font:11px var(--mono)}
  .console-tabs button[aria-selected=true]{color:#ffe6bf;border-bottom-color:var(--copper);background:#442d33}
  .console-tabs button:hover{background:#442d33}
  .copy{border:1px solid currentColor;background:transparent;padding:3px 9px;color:inherit;font:10px/1.6 var(--mono)}
  .terminal-tip{font-size:12px;color:#d7c3bc;margin-top:20px}
  .principle-bar{display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid var(--line);padding-block:23px;gap:28px}
  .principle-bar p{font-size:13px;color:var(--muted)}
  .principle-bar strong{color:var(--oxblood);display:block;font-size:14px;margin-bottom:3px}
  .feature{border-top:2px solid var(--oxblood);padding-top:22px}
  .feature .number{font:11px var(--mono);color:var(--wine);margin-bottom:24px}
  .feature h3{margin-bottom:16px}
  .feature p{color:var(--muted);font-size:15px}
  .feature .text-link{display:inline-block;margin-top:22px}
  .migration-band{background:var(--oxblood);color:var(--parchment);padding-block:65px}
  .migration-band .eyebrow{color:#e8ba84}
  .migration-band p{color:#e0c7c4;margin-top:20px}
  .migration-band .button{background:var(--parchment);color:var(--oxblood);border-color:var(--parchment)}
  .pipeline{display:grid;grid-template-columns:1fr 32px 1fr;align-items:center;gap:15px;font:12px/1.7 var(--mono)}
  .pipeline .box{border:1px solid #a67277;padding:20px;text-align:center}
  .pipeline .box small{display:block;font:11px/1.6 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#e0c7c4;margin-top:6px}
  .pipeline .wide{grid-column:1/-1;background:#71343e;border-color:#a67277}
  .pipeline .arrow{color:var(--ochre);text-align:center}
  .course-intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:start}
  .course-intro .lead{font-size:17px;margin-top:24px}
  .course-stats{display:flex;gap:40px;margin:30px 0}
  .course-stats strong{font:40px/1 var(--serif);color:var(--oxblood);display:block}
  .course-stats span{font:11px var(--mono);display:block;margin-top:9px;color:var(--muted)}
  .module-preview{display:flex;gap:23px;padding:19px 0;border-top:1px solid var(--line);text-decoration:none}
  .module-preview>span{font:11px/2 var(--mono);color:var(--wine)}
  .module-preview div{flex:1}
  .module-preview h3{font-size:25px;margin-bottom:6px}
  .module-preview p{font-size:13px;color:var(--muted)}
  .module-preview b{font-weight:400;color:var(--wine)}
  .module-preview:hover h3{color:var(--wine)}
  .note{background:#eee1d2;border-left:3px solid var(--copper);padding:18px 22px;font-size:13px}
  .note a{color:var(--wine)}
  .page-head .note{margin-top:30px;max-width:900px}
  .section .note{margin-top:30px}
  .codehilite{position:relative;background:#efe5d8;padding:22px;border:1px solid var(--line);overflow:auto;max-width:100%}
  .codehilite pre{background:transparent!important}
  .codehilite .copy{position:absolute;right:8px;top:6px;color:var(--wine);background:var(--paper)}
  .codehilite:has(.copy) pre{padding-top:14px}
  .table-scroll{overflow:auto;max-width:100%}
  table{border-collapse:collapse;width:100%;font-size:14px;text-align:left}
  th,td{border-bottom:1px solid var(--line);padding:13px 16px;vertical-align:top}
  th{color:var(--oxblood);font-weight:600}
  .resources-list{list-style:none;padding:0}
  .resources-list li{display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding:23px 0}
  .resources-list a{font-family:var(--serif);font-size:23px;text-decoration:none}
  .resources-list p{font-size:13px;color:var(--muted);margin-top:7px}
  .course-toolbar{display:flex;align-items:center;gap:24px;margin-block:25px}
  .course-toolbar input{padding:12px 16px;width:100%;max-width:470px;background:var(--white);border:1px solid var(--line);border-radius:0}
  .course-toolbar label{font:12px var(--mono)}
  .course-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:55px;padding-bottom:70px}
  .course-nav{position:sticky;top:115px;align-self:start}
  .course-nav a{display:block;text-decoration:none;font-size:13px;margin-bottom:15px}
  .course-nav a:hover{color:var(--wine)}
  .course-module{margin-bottom:44px;scroll-margin-top:110px}
  .course-module h2{font-size:34px}
  .course-module>p{font-size:14px;color:var(--muted);margin-top:12px;margin-bottom:22px}
  .lesson-link{display:grid;grid-template-columns:38px 1fr auto;gap:16px;padding:18px 0;text-decoration:none;border-top:1px solid var(--line);align-items:baseline}
  .lesson-link .lesson-no{font:11px var(--mono);color:var(--wine)}
  .lesson-link strong{font-size:16px;font-weight:500}
  .lesson-link small{font:11px var(--mono);color:var(--muted);white-space:nowrap}
  .lesson-link:hover strong{color:var(--wine)}
  .lesson-link .goal{display:block;font-size:12px;color:var(--muted);margin-top:6px}
  .crumb{font:11px var(--mono);color:var(--muted);margin-bottom:26px}
  .crumb a{text-decoration:none}
  .lesson-head h1{font-size:clamp(36px,4.2vw,57px);max-width:1000px}
  .lesson-meta{display:flex;flex-wrap:wrap;gap:20px;font:11px/1.6 var(--mono);color:var(--muted);margin-top:22px}
  .video-wrap{padding-bottom:55px}
  .lesson-video{max-width:1100px;margin-inline:auto}
  .video-label{display:flex;justify-content:space-between;gap:20px;font:11px/1.7 var(--mono);color:var(--wine);margin-bottom:14px}
  .lesson-video video{display:block;width:100%;aspect-ratio:16/9;background:var(--ink);border:1px solid var(--line)}
  .video-tools{display:flex;align-items:center;flex-wrap:wrap;gap:18px 28px;padding-block:18px;font-size:12px}
  .video-tools label{display:flex;gap:12px;align-items:center}
  .video-tools select{border:1px solid var(--line);padding:5px 8px;background:var(--white);color:var(--ink)}
  .video-chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .video-chapters button{display:flex;text-align:left;gap:12px;background:transparent;border:1px solid var(--line);padding:11px 13px;font-size:12px;line-height:1.5}
  .video-chapters button span{font:11px/1.8 var(--mono);color:var(--wine)}
  .video-chapters button:hover,.video-chapters button[aria-current=true]{background:#eee1d2;border-color:var(--copper)}
  .lesson-layout{display:grid;grid-template-columns:235px minmax(0,1fr);gap:55px;padding-bottom:70px}
  .lesson-layout>*{min-width:0}
  .course-layout>*{min-width:0}
  .scene-nav{position:sticky;top:115px;align-self:start;max-height:calc(100vh - 140px);overflow:auto;padding:4px 8px 4px 0}
  .scene-nav .eyebrow{margin-bottom:14px}
  .scene-nav a{display:block;font-size:12px;color:var(--muted);text-decoration:none;padding:7px 0}
  .scene-nav a:hover{color:var(--wine)}
  .scene{border-top:1px solid var(--line);padding-block:35px;scroll-margin-top:100px;min-width:0}
  .scene:first-child{padding-top:0;border-top:0}
  .scene h2{font-size:32px;margin-bottom:22px}
  .scene .scene-number{font:10px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--wine);margin-bottom:12px}
  .scene .narration{font-size:16px;line-height:1.9}
  .scene p{margin-block:16px}
  .scene .narration blockquote{margin:0}
  .scene .narration>p:first-child{margin-top:0}
  .scene details{margin-top:22px;border:1px solid var(--line);background:var(--white)}
  .scene summary{padding:14px 18px;font-size:12px;font-weight:600;cursor:pointer;color:var(--wine)}
  .scene .screen-content{padding:0 22px 18px;font-size:14px;overflow-wrap:anywhere;min-width:0}
  .screen-content>pre{background:#efe5d8;padding:20px}
  .screen-content .codehilite{margin-block:16px}
  .lesson-end{border-top:2px solid var(--oxblood);padding-top:28px;display:flex;justify-content:space-between;gap:30px}
  .lesson-end a{max-width:48%;text-decoration:none;font-size:14px}
  .lesson-end small{display:block;font:10px var(--mono);color:var(--muted);margin-bottom:10px}
  .empty-results{padding:28px;border:1px solid var(--line)}
  .inline-install{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);padding:15px 18px;background:var(--white);margin-top:26px;max-width:530px;overflow:auto}
  .inline-install code{font-size:12px;white-space:nowrap}
  .diagram-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-block:28px}
  .diagram-row span{border:1px solid var(--line);padding:14px 18px;background:var(--white);font:12px var(--mono)}
  .diagram-row b{font-weight:400;color:var(--wine)}
  .faq details{border-top:1px solid var(--line);padding:20px 0}
  .faq summary{font-family:var(--serif);font-size:24px;cursor:pointer}
  .faq p{color:var(--muted);font-size:15px;margin-top:18px}
  @media(max-width:1050px){
    .wrap{padding-inline:30px}.hero{gap:32px}.hero h1{font-size:56px}
    nav{gap:18px}.header-inner{gap:20px}
    .terminal-body{padding:22px 18px}.terminal pre{font-size:11px}
    .course-intro,.split{gap:38px}
    .lesson-layout{grid-template-columns:190px minmax(0,1fr);gap:30px}
  }
  @media(max-width:760px){
    .wrap{padding-inline:23px}.header-inner{height:73px;flex-wrap:wrap}.brand img{width:125px;height:39px}
    .menu-toggle{border:1px solid var(--line);background:transparent;padding:7px 12px;font-size:12px}
    nav{width:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:18px}
    nav a{padding:12px 0;border-top:1px solid var(--line)}
    .header-inner:has(nav:not([hidden])){height:auto;min-height:73px;padding-top:15px;padding-bottom:8px}
    .header-inner .nav-action{padding:10px 14px;margin-top:10px}
    .hero{padding-top:40px;padding-bottom:42px;grid-template-columns:1fr;gap:35px}.hero h1{font-size:clamp(43px,10.6vw,64px)}
    .hero .lead{font-size:17px;margin-top:22px}.hero .actions{gap:12px}
    .terminal{box-shadow:6px 6px 0 #e7d9c7}.terminal pre{font-size:12px}.terminal-body{min-height:230px;padding:22px 18px}
    .principle-bar{grid-template-columns:1fr;gap:18px;padding-block:23px}
    .principle-bar strong{display:inline;margin-right:8px}
    .section{padding-block:45px}.section-heading{display:block;margin-bottom:28px}.section-heading p{margin-top:20px}
    .three,.split,.course-intro{grid-template-columns:1fr;gap:32px}
    .feature{padding-top:18px}.feature .number{margin-bottom:14px}
    .migration-band{padding-block:45px}.migration-band .pipeline{margin-top:10px}
    .footer-grid{grid-template-columns:1fr 1fr;gap:35px 20px}.footer-bottom{display:block}.footer-bottom span{display:block;margin-bottom:5px}
    .page-head{padding-block:40px 32px}.page-head h1{font-size:44px}.page-head .lead{font-size:17px}
    .course-layout,.lesson-layout{grid-template-columns:minmax(0,1fr);gap:28px}
    .course-nav{position:static;display:flex;gap:15px;overflow:auto;padding-bottom:10px;white-space:nowrap}
    .course-nav a{margin:0;font-size:12px}
    .course-toolbar{display:block}.course-toolbar input{display:block;margin-top:10px}
    .lesson-link{grid-template-columns:28px 1fr;gap:10px}.lesson-link small{grid-column:2}
    .scene-nav{position:static;max-height:none;border-block:1px solid var(--line);padding-block:18px}
    .scene-nav a{padding:4px 0}.lesson-head h1{font-size:38px}
    .video-chapters{grid-template-columns:1fr}
    .video-label{font-size:10px;flex-wrap:wrap;gap:5px}
    .scene h2{font-size:28px}.scene .screen-content{padding-inline:13px}.codehilite{padding:17px 13px}
    .resources-list li{display:block}.resources-list a{font-size:21px}
    table{font-size:12px}th,td{padding:10px}
  }
  @media print{
    .site-header,.site-footer,.scene-nav,.copy,.lesson-end{display:none!important}
    .lesson-layout{display:block}.scene details{display:block}.screen-content{display:block}
    body{background:white;color:black}.wrap{padding:0;max-width:none}
  }
}
[data-video-captions] {padding:.45rem .7rem;border:1px solid currentColor;background:transparent;color:inherit;font:inherit;cursor:pointer}
[data-video-captions][aria-pressed="true"] {background:#571f2b;color:#fffaf4}