/* ==========================================================================
   Cachito: the reading site's stylesheet.
   Sections: 1 Tokens · 2 Base · 3 Buttons · 4 Sidebar · 5 Page chrome · 6 Lesson content · 7 Chapter pages
             8 Home · 9 Kept components (sampler, studio, code controls, locks, side panel) · 10 Responsive · 11 Print
   The brand is the logo's: navy ink, a violet block, one orange piece. Orange is used sparingly, like the piece itself.
   ========================================================================== */

@font-face{font-family:Figtree;src:url(fonts/figtree-var.woff2) format('woff2');font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:Figtree;src:url(fonts/figtree-italic-var.woff2) format('woff2');font-weight:400 800;font-style:italic;font-display:swap}
@font-face{font-family:Fredoka;src:url(fonts/fredoka-var.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

/* 1 · Tokens ---------------------------------------------------------- */
:root{
  color-scheme:light;
  --ink:#1D1838;          /* headings, strong text */
  --text:#2B2751;         /* body copy */
  --muted:#625D86;        /* secondary text, 6.4:1 on white */
  --faint:#8E8AAE;        /* tertiary, never for essential text */
  --violet:#5B4BFF;       /* the block: primary actions, links, current place */
  --violet-d:#4838E6;
  --violet-dd:#3A2DC4;
  --violet-soft:#EEEBFF;
  --violet-tint:#F7F5FF;
  --violet-line:#DAD5FF;
  --orange:#FF7A1A;       /* the missing piece: a spark, never a surface */
  --orange-d:#D9610A;
  --orange-soft:#FFF1E4;
  --paper:#FFFFFF;
  --canvas:#FBFAFF;
  --line:#E7E4F5;
  --line-strong:#D4CFEA;
  --ok:#0C8F63;--ok-soft:#E3F6EE;
  --bad:#CC2E48;--bad-soft:#FDECEF;
  --warn:#B25E00;--warn-soft:#FFF3D9;
  --radius:14px;--radius-sm:10px;--radius-lg:24px;
  --shadow-1:0 1px 2px rgba(29,24,56,.06),0 1px 1px rgba(29,24,56,.04);
  --shadow-2:0 10px 30px -10px rgba(29,24,56,.2),0 2px 8px rgba(29,24,56,.06);
  --shadow-3:0 28px 60px -24px rgba(58,45,196,.38),0 8px 20px -8px rgba(29,24,56,.14);
  --body:Figtree,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:Fredoka,Figtree,ui-rounded,system-ui,sans-serif;
  --mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --sidebar:304px;--bar:64px;
  --panel-ease:cubic-bezier(.32,.72,0,1);
  /* legacy names, kept for the components carried over below */
  --accent:var(--violet);--forest:var(--violet-dd);--muted-strong:var(--ink);--sans:var(--body);--serif:var(--display);
  accent-color:var(--violet);scrollbar-color:#CFCAEB transparent;
}

/* 2 · Base ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
::selection{background:#D9D3FF;color:var(--ink)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--paper);color:var(--text);font:400 16px/1.65 var(--body);font-feature-settings:'kern','liga';-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.skip-link{position:fixed;z-index:100;top:-100px;left:20px;padding:12px 18px;border-radius:10px;background:var(--violet);color:#fff;font-weight:600}
.skip-link:focus{top:14px}
.tn,.lesson .lesson-body td:not(:is(.db,.cf) *),.reader-meta,.chapter-number,.lesson-index{font-variant-numeric:tabular-nums}

/* The brand's own pieces, reused wherever a label needs a little personality. */
.sq{display:inline-block;width:.62em;height:.62em;border-radius:.16em;background:var(--orange);transform:rotate(12deg);flex:none}
.eyebrow,.section-label{display:inline-flex;align-items:center;gap:10px;font:700 12px/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase;color:var(--violet-dd)}
.eyebrow .status-dot,.eyebrow .sq{margin:0}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--orange);transform:rotate(12deg);margin-right:8px;vertical-align:middle}

/* The wordmark: Fredoka in navy with an orange square for the i's dot. */
.cachito{font:600 34px/1 var(--display);letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.cachito .cl{display:inline-block}
.cachito-i{position:relative;display:inline-block}
.cachito-dot{position:absolute;left:50%;top:.1em;width:.2em;height:.2em;margin-left:-.1em;border-radius:.04em;background:var(--orange);transform:rotate(10deg)}
@keyframes cachito-letter{0%{opacity:0;transform:translateY(.4em)}100%{opacity:1;transform:translateY(0)}}
@keyframes cachito-dot{0%{opacity:0;transform:translateY(-1.2em) scale(0) rotate(-180deg)}26%{opacity:1;transform:translateY(-1.2em) scale(2) rotate(-20deg)}48%{transform:translateY(-1.2em) scale(2) rotate(10deg)}71%{transform:translateY(.07em) scale(1.25,.75) rotate(10deg)}83%{transform:translateY(-.16em) scale(.92,1.1) rotate(10deg)}100%{opacity:1;transform:translateY(0) scale(1) rotate(10deg)}}
.cachito.is-intro .cl{animation:cachito-letter .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * 60ms)}
.cachito.is-intro .cachito-dot{animation:cachito-dot 1.4s cubic-bezier(.3,.7,.3,1) .1s both}
.on-dark .cachito,.cachito.is-light{color:#fff}

/* 3 · Buttons --------------------------------------------------------- */
/* One family: .btn plus a tone. The older class names stay so existing markup keeps working. */
.btn,.primary-button,.sticky-next,.sticky-finish,.course-end button,.sticky-previous,.browse-button,.sample-link,#motion-toggle,.reading-controls button,.sticky-disabled{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0 20px;border:1px solid transparent;border-radius:12px;
  font:650 15px/1 var(--body);letter-spacing:0;text-decoration:none;white-space:nowrap;transition:background-color .16s,border-color .16s,box-shadow .16s,transform .16s,color .16s}
.btn-primary,.primary-button,.sticky-next,.sticky-finish,.course-end button{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 6px 16px -6px rgba(91,75,255,.6)}
.btn-primary:hover,.primary-button:hover,.sticky-next:hover,.sticky-finish:hover:not(:disabled),.course-end button:hover{background:var(--violet-d);border-color:var(--violet-d);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 22px -8px rgba(91,75,255,.7)}
.btn-primary:active,.primary-button:active,.sticky-next:active{transform:none}
.btn-ghost,.sticky-previous,.browse-button,#motion-toggle,.reading-controls button,.sample-link{background:var(--paper);border-color:var(--line-strong);color:var(--ink);box-shadow:var(--shadow-1)}
.btn-ghost:hover,.sticky-previous:hover,.browse-button:hover,#motion-toggle:hover,.reading-controls button:hover,.sample-link:hover{border-color:var(--violet);color:var(--violet-dd);background:var(--violet-tint)}
.btn-lg,.primary-button{min-height:54px;padding:0 26px;font-size:16px;border-radius:14px}
.btn-sm,.sticky-previous,.sticky-next,.sticky-finish,#motion-toggle,.reading-controls button{min-height:38px;padding:0 14px;font-size:14px;border-radius:10px}
.btn .ic,.primary-button .ic{flex:none}
.sticky-disabled{color:var(--faint);background:transparent;border-color:var(--line);box-shadow:none;cursor:default}
[data-finish]:disabled{cursor:default;opacity:.7}

/* 6 (first) · Reading typography ------------------------------------- */
.lesson .lesson-body h1:not(:is(.db,.cf) *),.lesson .lesson-body h2:not(:is(.db,.cf) *),.home h2,.home h1{font-family:var(--display);font-weight:500;color:var(--ink);text-wrap:balance}
.lesson .lesson-body h1:not(:is(.db,.cf) *){margin:0 0 28px;max-width:26ch;font-size:clamp(34px,3.6vw,50px);line-height:1.08;letter-spacing:-.015em}
.lesson .lesson-body h2:not(:is(.db,.cf) *){margin:56px 0 18px;font-size:clamp(26px,2.4vw,32px);line-height:1.2;letter-spacing:-.01em}
.lesson .lesson-body h3:not(:is(.db,.cf) *){margin:36px 0 12px;font:700 20px/1.35 var(--body);color:var(--ink)}
.lesson .lesson-body h4:not(:is(.db,.cf) *){margin:26px 0 8px;font:700 16px/1.4 var(--body);color:var(--ink)}
.lesson .lesson-body p:not(:is(.db,.cf) *){margin:16px 0}
.lesson .lesson-body p:not(:is(.db,.cf) *),.lesson .lesson-body li:not(:is(.db,.cf) *){max-width:70ch;font-size:17px;line-height:1.72}
.lesson .lesson-body ul:not(:is(.db,.cf) *),.lesson .lesson-body ol:not(:is(.db,.cf) *){margin:18px 0;padding-left:26px}
.lesson .lesson-body li:not(:is(.db,.cf) *){margin:8px 0;padding-left:4px}
.lesson .lesson-body li:not(:is(.db,.cf) *)::marker{color:var(--violet);font-weight:700}
.lesson .lesson-body strong:not(:is(.db,.cf) *){font-weight:700;color:var(--ink)}
.lesson .lesson-body :is(p,li,td,dd,figcaption) a:not([class]):not(:is(.db,.cf) *){color:var(--violet-dd);text-decoration:underline;text-decoration-color:var(--violet-line);text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color .15s}
.lesson .lesson-body :is(p,li,td,dd,figcaption) a:not([class]):hover:not(:is(.db,.cf) *){text-decoration-color:var(--violet)}
.lesson .lesson-body hr:not(:is(.db,.cf) *){margin:44px 0;border:0;border-top:1px solid var(--line)}
main p,main li{overflow-wrap:anywhere}
.lesson .lesson-body code:not(:is(.db,.cf) *){padding:2px 6px;border-radius:6px;background:var(--violet-soft);color:var(--violet-dd);font:500 .88em/1.6 var(--mono);overflow-wrap:anywhere}
main :not(pre)>code{overflow-wrap:anywhere;white-space:normal}

/* 9 · Kept components, recoloured: company studio, task brief and examples, the sampler and its animations, private-track locks, the side-panel toggle */
.diagram-scroll-hint{margin-right:auto;display:none}@media(max-width:760px){.diagram-scroll-hint{display:block;font-size:9px}.featured-diagram+.visual-toolbar{margin:8px 0 0}.visual-toolbar{align-items:center;gap:7px;flex-wrap:wrap}}

.featured-diagram+.visual-toolbar{margin:8px 0 0}

/* The elective studio is a distinct room at the end of the same book. */
.company-area{border-top:1px solid #c6c0eb;margin-top:28px;padding-top:26px}
.company-area>h2{color:#2e2662;letter-spacing:1.05px}
.company-area>.part-intro{margin-left:0;border:1px solid #cac5ef;background:#e4e1f9;border-radius:6px;padding:12px 11px;font-weight:600}
.company-area .toc-chapter{border-bottom:1px solid #d8d4f2}
.company-area .toc-chapter>summary{font-weight:600}
.track-area{border-top:2px solid #e3c9cc;margin-top:28px;padding-top:26px}.track-area .toc-part-heading .part-label{color:#8c1f2b}.track-area>.part-intro{margin-left:0;border:1px solid #e6cfd2;background:#f7ecee;border-radius:6px;padding:12px 11px;font-weight:600}.track-area .toc-chapter{border-bottom:1px solid #eadfe1}.track-area .toc-chapter>summary{font-weight:600}
.company-page{--forest:#2b2264}
.company-page .lesson-body{max-width:860px}
.company-page .lesson-body>h1{font-size:clamp(36px,4vw,53px);letter-spacing:-1.5px;line-height:1.1;border-bottom:1px solid #d0cbee;padding-bottom:27px}
.company-page .lesson-body>h2{border-top:1px solid #d5d0f0;padding-top:29px;margin-top:53px}
.company-page .lesson-body>h2:first-of-type{border-top:0;padding-top:0}
.company-page .lesson-body>h2+.figwrap{margin-top:24px}
.company-page .figwrap{background:#f2f0fc;border-color:#d2cdf1;padding:8px;box-shadow:0 10px 25px #241c590a}
.company-page .figwrap img{border-radius:8px}
.company-page .tablewrap{border:1px solid #d7d3f1;border-radius:8px;overflow:auto;box-shadow:0 8px 22px #221b5308}
.company-page .tablewrap table{min-width:620px;margin:0}
.company-page .tablewrap tr:nth-child(even){background:#f2f0fc}
.company-page .tablewrap th{background:#e7e5f9;position:sticky;top:0}
.company-page .lesson-body blockquote{border-color:#7e71cd;background:#e5e2fb}
.studio-hero{background:linear-gradient(120deg,#1c1648,#2b2268 70%,#3d318b);border-radius:16px;color:#eeebfe;padding:30px 34px;margin:29px 0 40px;box-shadow:0 18px 35px #1c144f1c}
.studio-hero p{font:400 clamp(19px,2.5vw,27px)/1.38 var(--display);max-width:710px;margin:16px 0 24px;color:#ece9fd}
.studio-eyebrow{font:600 10px var(--body);letter-spacing:2px;color:#b2a9ea}
.studio-key{display:flex;flex-wrap:wrap;gap:9px}
.studio-key span{border:1px solid #9389d799;border-radius:30px;padding:5px 11px;font-size:10px;color:#d6d1f7}
.studio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:22px 0 36px}
.studio-card{--brand:#38306a;display:flex;flex-direction:column;min-height:245px;padding:21px 23px;border:1px solid #d1ccee;border-top:4px solid var(--brand);border-radius:9px;background:#fff;color:#1f1a3d;transition:transform .18s,box-shadow .18s;box-shadow:0 8px 20px #1f194709}
.studio-card:hover,.studio-card:focus-visible{transform:translateY(-3px);box-shadow:0 16px 30px #1f19471c}
.studio-card .studio-brand{display:flex;align-items:center;gap:11px;color:var(--brand);font-size:16px;font-weight:700;line-height:1.3}
.studio-card svg{width:31px;height:31px;flex:none}
.studio-card strong{font:400 20px/1.2 var(--display);margin:21px 0 10px}
.studio-card small{font-size:11px;line-height:1.65;color:#49417c}
.studio-pressure{font-size:10px;font-weight:600;color:#322b61;margin-top:13px}
.studio-confidence{font-size:9px;letter-spacing:.3px;color:#574d98;margin-top:14px}
.studio-card .card-arrow{display:block;margin-top:auto;padding-top:17px;color:var(--brand);font-size:11px;font-weight:650}
.openai-card{--brand:#281d73}.reddit-card{--brand:#d45e36}.meta-card{--brand:#4774c6}.db-card{--brand:#ae5b35}.observe-card{--brand:#217c81}
@media(max-width:760px){.studio-grid{grid-template-columns:1fr;gap:12px}.studio-card{min-height:0;padding:18px}.studio-card strong{margin-top:15px}.studio-hero{padding:23px 20px;margin-top:16px}.studio-hero p{font-size:20px}.company-page .lesson-body>h1{font-size:36px}.company-page .figwrap img{min-width:560px}}
@media(prefers-reduced-motion:reduce){.studio-card{transition:none}}

/* A brief is the entry point; concrete examples are readable without swiping. */
.lesson-body .task-brief{margin:24px 0 30px;padding:25px 28px;border:1px solid #b0a9e1;border-left:5px solid #312679;border-radius:10px;background:linear-gradient(120deg,#e5e2fb,#f6f4fe);box-shadow:0 8px 24px #21195006}
.task-label{font:700 10px/1.5 var(--body);letter-spacing:.15em;color:#362c75;margin-bottom:13px}
.lesson-body .task-brief blockquote{margin:0;padding:0;border:0;background:none;border-radius:0}
.lesson-body .task-brief blockquote p{font:400 23px/1.55 var(--display);color:#201a49;margin:0;max-width:none}
.example-cards{display:grid;gap:16px;margin:25px 0 32px;min-width:0}
.example-card{min-width:0;border:1px solid #c7c1ed;border-radius:9px;overflow:hidden;background:#f8f7fe}
.lesson-body .example-title{font:650 13px/1.5 var(--body);color:#2e2661;margin:0;padding:13px 19px;background:#e4e1f9;border-bottom:1px solid #cdc7f2}
.example-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin:0}
.example-value{min-width:0;padding:18px 19px}
.example-value+.example-value{border-left:1px solid #d2cdf2;background:#edebfc}
.example-value dt{font:650 10px/1.5 var(--body);letter-spacing:.07em;text-transform:uppercase;color:#4c428c;margin-bottom:9px}
.example-value dd{margin:0;font-size:14px;line-height:1.7;overflow-wrap:anywhere;color:#211b48}
.example-value code{white-space:normal;overflow-wrap:anywhere;font-size:13px}
.lesson-body .example-reason{margin:0;padding:13px 19px;border-top:1px solid #d2cdf2;font-size:13px;line-height:1.65;color:#413877;max-width:none}
.lesson-body details.concept-refresher{background:#f6f4fe;border-style:dashed;margin:25px 0}
@media(max-width:760px){.lesson-body .task-brief{padding:20px 18px}.lesson-body .task-brief blockquote p{font-size:21px}.example-pair{grid-template-columns:minmax(0,1fr)}.example-value+.example-value{border-left:0;border-top:1px solid #d2cdf2}.example-value{padding:15px 17px}.lesson-body .example-title,.lesson-body .example-reason{padding-left:17px;padding-right:17px}}
@media print{.example-card,.task-brief{break-inside:avoid;box-shadow:none}}

/* Source paths stay readable on narrow screens without widening the lesson. */
main p,main li{overflow-wrap:anywhere}
main :not(pre)>code{overflow-wrap:anywhere;white-space:normal}

/* Intro timelines are authored for a narrow page and do not need horizontal panning. */
.lesson-body img[src*="/project-context/"]{min-width:0;width:100%;max-width:520px;height:auto}
.figwrap:has(img[src*="/project-context/"])+.visual-toolbar .diagram-scroll-hint{display:none}

.specialization-note{display:flex;align-items:flex-start;gap:18px;margin-top:18px;padding:18px 20px;border:1px solid var(--line);border-left:4px solid #735078;border-radius:8px;background:#f4eef5;color:var(--ink)}
.specialization-note strong{min-width:210px;font:700 13px/1.5 var(--body);text-transform:uppercase;letter-spacing:.5px;color:#68446f}
.specialization-note span{font:400 15px/1.55 var(--body)}
@media(max-width:760px){.specialization-note{display:block}.specialization-note strong,.specialization-note span{display:block}.specialization-note span{margin-top:8px}}

/* Real UI examples must fit the reading column, including narrow screens. */
.lesson-body img[src*="/ui-lessons/"]{display:block;width:100%;min-width:0;max-width:700px;height:auto;margin-inline:auto}
.figwrap:has(img[src*="/ui-lessons/"])+.visual-toolbar .diagram-scroll-hint{display:none}

/* Three-problem homepage sampler. */
.sample-showcase{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fbfbf8;box-shadow:0 18px 50px rgba(29,24,56,.07)}
.sample-tabs{display:grid;grid-template-columns:repeat(3,1fr);padding:8px;border-bottom:1px solid var(--line);background:#e7e5f8}
.sample-tabs button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:10px 13px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:650 12px/1.3 var(--body);cursor:pointer;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.sample-tabs button span{color:var(--accent);font:750 9px/1 var(--body);letter-spacing:.8px}
.sample-tabs button:hover{color:var(--ink)}
.sample-tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);box-shadow:0 2px 10px rgba(29,24,56,.09)}
.sample-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sample-stage{display:grid;background:var(--paper)}
.sample-panel{grid-area:1/1;align-self:start;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(14px) scale(.995);transition:opacity .24s ease,transform .24s ease,visibility 0s linear .24s}
.sample-panel.active{z-index:1;visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
.sample-panel-grid{display:grid;grid-template-columns:minmax(280px,.78fr) minmax(430px,1.22fr);gap:34px;padding:34px}
.sample-problem{display:flex;flex-direction:column;align-items:flex-start}
.sample-problem .sample-kicker{color:var(--accent);font:750 10px/1.4 var(--body);letter-spacing:1.35px}
.sample-problem h3{margin:13px 0 0;font:500 clamp(27px,3vw,38px)/1.12 var(--display);letter-spacing:-.75px}
.sample-given{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:20px}
.sample-given code{padding:7px 9px;border:1px solid var(--line);border-radius:5px;background:#eae7f9;color:var(--ink);font:650 12px/1.2 var(--mono);white-space:normal;overflow-wrap:anywhere}
.sample-given span{color:var(--muted);font:600 11px/1.4 var(--body)}
.sample-answer{margin-top:auto;padding-top:28px}
.sample-answer>span{display:block;margin-bottom:7px;color:var(--muted);font:750 9px/1.4 var(--body);letter-spacing:1.2px}
.sample-answer strong{display:block;color:var(--accent);font:700 20px/1.25 var(--body)}
.sample-answer p{margin:9px 0 0;color:var(--muted);font:400 13px/1.6 var(--body)}
.window-demo,.payment-demo,.aws-demo{align-self:stretch;padding:23px;border:1px solid var(--line);border-radius:9px;background:#f1effc}
.visual-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.visual-title span{color:var(--ink);font:750 9px/1.35 var(--body);letter-spacing:1.1px}
.visual-title small{color:var(--muted);font:550 10px/1.35 var(--body)}
.window-step{display:grid;grid-template-columns:74px minmax(0,1fr) 72px;gap:12px;align-items:center}
.window-step>span{font:650 11px/1.3 var(--body)}
.window-step>em{color:var(--muted);font:500 10px/1.3 var(--body);text-align:right}
.letter-row{display:grid;grid-template-columns:repeat(13,minmax(18px,1fr));gap:3px;min-width:0}
.letter-row b{display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--line);border-radius:4px;background:var(--paper);color:#78827a;font:700 11px/1 var(--mono)}
.letter-row b.candidate{border-color:#aca4e1;background:#ddd9f6;color:var(--ink)}
.letter-row b.winner{border-color:var(--accent);background:var(--accent);color:white}
.window-arrow{margin:15px 84px;padding:8px 10px;border-radius:4px;background:#e5e2f9;color:var(--accent);font:650 10px/1.3 var(--body);text-align:center}
.window-step.final>span{color:var(--accent)}
.window-demo>p{margin:20px 0 0;padding-top:15px;border-top:1px solid var(--line);color:var(--muted);font:500 11px/1.5 var(--body);text-align:center}
.payment-demo{position:relative}
.payment-route{display:grid;grid-template-columns:28px minmax(100px,1fr) 18px minmax(120px,1fr) auto;gap:9px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:7px;background:var(--paper)}
.payment-route i{display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#ddd9f6;color:var(--accent);font:750 9px/1 var(--body);font-style:normal}
.payment-route>span{font:650 12px/1.35 var(--body)}
.payment-route small{color:var(--muted);font:550 9px/1.3 var(--mono)}
.payment-route>b{color:#796ec1;font:600 14px/1 var(--body)}
.payment-route>strong{padding:6px 8px;border-radius:4px;background:#ddd9f6;color:var(--accent);font:700 10px/1.3 var(--body);white-space:nowrap}
.lost-reply{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0;color:#925346;font:700 10px/1.4 var(--body);letter-spacing:.4px;text-transform:uppercase}
.lost-reply span{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#f3e2dd}
.payment-route.retry{border-color:#8f84db;background:#eceafb}
.payment-record{padding:7px 9px;border-left:3px solid var(--accent);background:#ddd9f6}
.no-second-charge{margin-top:15px;padding:10px;border-radius:6px;background:var(--accent);color:#fff;font:650 11px/1.4 var(--body);text-align:center}
.no-second-charge span{margin-right:7px}
.aws-entry{display:flex;align-items:center;justify-content:center;gap:12px;margin:0 auto 14px;padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--paper);font:600 11px/1.35 var(--body)}
.aws-entry span{color:var(--muted)}
.aws-entry strong{color:var(--accent);font-size:12px}
.aws-zones{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.aws-zones section{padding:15px;border:1px solid var(--line);border-radius:7px;background:var(--paper)}
.aws-zones header{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;font:750 10px/1.3 var(--body);letter-spacing:.5px}
.aws-zones header span{padding:4px 6px;border-radius:999px;font:700 8px/1 var(--body);letter-spacing:.2px;text-transform:uppercase}
.aws-zones div{padding:12px;border-radius:5px;font:650 12px/1.3 var(--body);text-align:center}
.aws-zones small{display:block;margin-top:8px;color:var(--muted);font:500 9px/1.4 var(--body);text-align:center}
.aws-zones .failed{border-color:#dcc6bf;background:#faf3f0}
.aws-zones .failed header span{background:#f0dcd5;color:#8e4e41}
.aws-zones .failed div{background:#f3e3de;color:#8e4e41;text-decoration:line-through}
.aws-zones .healthy{border-color:#a49be0;background:#eceafb}
.aws-zones .healthy header span{background:#d0caf6;color:var(--accent)}
.aws-zones .healthy div{background:#d8d4f7;color:var(--accent)}
.aws-database{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding:12px;border-radius:7px;background:#e8edf2;color:#354c5c;font:600 10px/1.35 var(--body)}
.aws-database strong{padding:4px 7px;border-radius:4px;background:#d8e2e8;font-size:9px;text-transform:uppercase}
.sample-panel-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 34px;border-top:1px solid var(--line);background:#fbfbf8}
.sample-panel-footer a,.sample-panel-footer button{color:var(--accent);font:650 12px/1.5 var(--body);text-decoration:none}
.sample-panel-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.sample-panel-footer button{padding:7px 0;border:0;background:transparent;cursor:pointer}
.sample-panel-footer button:hover{text-decoration:underline;text-underline-offset:4px}
.sample-panel-footer button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.sample-panel,.sample-tabs button{transition:none}}

@media(max-width:900px){
  .sample-panel-grid{grid-template-columns:1fr;gap:24px}
  .sample-answer{margin-top:25px;padding-top:0}
}
@media(max-width:760px){
  .sample-tabs{padding:6px}
  .sample-tabs button{align-items:flex-start;flex-direction:column;justify-content:center;gap:4px;min-height:62px;padding:8px;font-size:10px;text-align:left}
  .sample-tabs button span{font-size:8px}
  .sample-panel-grid{gap:20px;padding:22px 18px}
  .sample-problem h3{font-size:28px;line-height:1.13}
  .sample-given{margin-top:16px}
  .sample-answer{margin-top:20px}
  .sample-answer strong{font-size:17px}
  .window-demo,.payment-demo,.aws-demo{padding:17px 12px}
  .visual-title{align-items:flex-start;flex-direction:column;gap:4px;margin-bottom:18px}
  .window-step{grid-template-columns:1fr;gap:7px}
  .window-step>em{text-align:left}
  .letter-row{grid-row:2}
  .window-arrow{margin:11px 0}
  .payment-route{grid-template-columns:27px minmax(0,1fr) 14px minmax(0,1fr);gap:7px;padding:11px}
  .payment-route>strong{grid-column:2/5;justify-self:start;margin-top:2px}
  .payment-route>span{font-size:10px}
  .payment-route>b{font-size:11px}
  .aws-entry{gap:8px;font-size:9px}
  .aws-entry strong{font-size:10px}
  .aws-zones{gap:8px}
  .aws-zones section{padding:11px 8px}
  .aws-zones header{align-items:flex-start;flex-direction:column;gap:5px}
  .aws-zones div{padding:10px 5px;font-size:10px}
  .sample-panel-footer{align-items:flex-start;flex-direction:column;gap:9px;padding:16px 18px}
}

/* The sampler demonstrates three different visual explanations, not static cards. */
/* Algorithm animation: six slow, explicit states keep the window and Counter in sync. */
.window-demo{position:relative;overflow:hidden}
.window-story{display:grid;min-height:55px;margin:0 0 15px;padding:12px 14px;border-left:3px solid var(--accent);background:#e5e2f9}
.window-story section{grid-area:1/1;display:flex;align-items:flex-start;flex-direction:column;justify-content:center;gap:4px;opacity:0}
.window-story .story-six{opacity:1}
.window-story b{color:var(--accent);font:750 9px/1.25 var(--body);letter-spacing:.8px}
.window-story strong{color:var(--ink);font:600 11px/1.4 var(--body)}
.window-story code{padding:1px 4px;border:1px solid #bdb6ea;border-radius:3px;background:#f2f1fd;font:700 10px/1 var(--mono)}
.window-animation-grid{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:18px;align-items:stretch}
.window-track-column{align-self:start;min-width:0;padding-top:8px}
.window-scan-track{position:relative;margin:8px 2px 11px}
.window-scan-track .letter-row{position:relative;z-index:1}
.window-scan-track .letter-row b.target-letter{border-color:#a69de0;background:#e5e2f9;color:var(--accent)}
.window-frame{position:absolute;z-index:2;top:-4px;bottom:-4px;left:69.23%;width:30.77%;pointer-events:none}
.window-frame::before{position:absolute;inset:0 -2px;border:2px solid var(--accent);border-radius:7px;background:rgba(122,107,255,.13);box-shadow:0 0 0 2px rgba(122,107,255,.07);content:""}
.index-rail{position:relative;height:32px;margin:0 2px}
.index-pointer{position:absolute;left:3.845%;display:grid;place-items:center;width:12px;height:12px;transform:translateX(-50%)}
.index-pointer::before{position:absolute;bottom:9px;content:"↑";font:700 9px/1 var(--body)}
.index-pointer b{font:800 11px/1 var(--mono)}
.pointer-i{top:0;color:var(--accent)}
.pointer-j{top:17px;color:#765e19}
.counter-demo{align-self:stretch;min-height:210px;padding:13px 12px;border:1px solid var(--line);border-radius:7px;background:var(--paper)}
.counter-demo header{display:flex;align-items:flex-start;flex-direction:column;gap:2px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.counter-demo header span{color:var(--accent);font:750 9px/1.3 var(--body);letter-spacing:.9px}
.counter-demo header small{color:var(--muted);font:550 8px/1.3 var(--body)}
.counter-head{display:grid;grid-template-columns:1fr 38px 58px;gap:4px;margin:11px 0 6px;color:var(--muted);font:650 7px/1.2 var(--body);letter-spacing:.3px;text-align:center;text-transform:uppercase}
.counter-head span:first-child{text-align:left}
.counter-states{display:grid}
.counter-state{grid-area:1/1;align-self:start;opacity:0}
.counter-state.count-ten{opacity:1}
.counter-state>div{display:grid;grid-template-columns:1fr 38px 58px;gap:4px;align-items:center;margin-bottom:5px}
.counter-state>div>*{display:grid;place-items:center;min-height:24px;font-style:normal}
.counter-state>div b{justify-content:start;color:var(--ink);font:750 10px/1 var(--mono)}
.counter-state>div i{border-radius:4px;background:#e7e4f8;color:var(--muted);font:700 10px/1 var(--mono)}
.counter-state>div strong{border:1px solid #b4ade4;border-radius:4px;background:#f0eefc;color:var(--accent);font:750 11px/1 var(--mono)}
.counter-state>div.missing strong{border-color:#dfc4bc;background:#faf0ed;color:#985245}
.counter-state>div.extra strong{border-color:#d9c898;background:#faf5e6;color:#82691e}
.counter-state>p{margin:10px 0 0;padding:8px 5px 0;border-top:1px solid var(--line);color:#985245;font:700 9px/1.35 var(--body);text-align:center}
.counter-state>p.complete{color:var(--accent)}
.sample-panel.sample-animate .window-frame{animation:windowScan 32s ease-in-out infinite}
.sample-panel.sample-animate .pointer-i{animation:pointerI 32s ease-in-out infinite}
.sample-panel.sample-animate .pointer-j{animation:pointerJ 32s ease-in-out infinite}
.sample-panel.sample-animate .story-one{animation:stageOne 32s ease infinite}
.sample-panel.sample-animate .story-two{animation:stageTwo 32s ease infinite}
.sample-panel.sample-animate .story-three{animation:stageThree 32s ease infinite}
.sample-panel.sample-animate .story-four{animation:stageFour 32s ease infinite}
.sample-panel.sample-animate .story-five{animation:stageFive 32s ease infinite}
.sample-panel.sample-animate .story-six{animation:stageSix 32s ease infinite}
.sample-panel.sample-animate .count-one{animation:countOne 32s ease infinite}
.sample-panel.sample-animate .count-two{animation:countTwo 32s ease infinite}
.sample-panel.sample-animate .count-three{animation:countThree 32s ease infinite}
.sample-panel.sample-animate .count-four{animation:countFour 32s ease infinite}
.sample-panel.sample-animate .count-five{animation:countFive 32s ease infinite}
.sample-panel.sample-animate .count-six{animation:countSix 32s ease infinite}
.sample-panel.sample-animate .count-seven{animation:countSeven 32s ease infinite}
.sample-panel.sample-animate .count-eight{animation:countEight 32s ease infinite}
.sample-panel.sample-animate .count-nine{animation:countNine 32s ease infinite}
.sample-panel.sample-animate .count-ten{animation:countTen 32s ease infinite}
.sample-panel.sample-animate .window-scan-track .letter-row b:nth-child(10),.sample-panel.sample-animate .window-scan-track .letter-row b:nth-child(11),.sample-panel.sample-animate .window-scan-track .letter-row b:nth-child(13){animation:windowWinner 32s ease infinite}

/* Architecture animation: events arrive in causal order. */
.payment-route{position:relative;overflow:hidden}
.payment-packet{position:absolute;z-index:3;top:50%;left:13%;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(91,75,255,.12);opacity:0;text-decoration:none}
.sample-panel.sample-animate .first-attempt{animation:paymentFirstSequence 12.8s ease infinite}
.sample-panel.sample-animate .first-attempt .payment-packet{animation:paymentPacketFirst 12.8s ease-in-out infinite}
.sample-panel.sample-animate .first-attempt>strong{animation:paymentFirstSuccess 12.8s ease infinite}
.sample-panel.sample-animate .lost-reply{animation:paymentLost 12.8s ease infinite}
.sample-panel.sample-animate .payment-route.retry{animation:paymentRetrySequence 12.8s ease infinite}
.sample-panel.sample-animate .payment-route.retry .payment-packet{animation:paymentPacketRetry 12.8s ease-in-out infinite}
.sample-panel.sample-animate .payment-route.retry>strong{animation:paymentReturnSequence 12.8s ease infinite}
.sample-panel.sample-animate .no-second-charge{animation:paymentConclusion 12.8s cubic-bezier(.2,.8,.2,1) infinite}

/* AWS animation: packets reroute as health and database roles change. */
.aws-entry,.aws-database,.aws-zones section{position:relative;overflow:hidden}
.aws-entry-packet,.zone-packet,.database-packet{position:absolute;z-index:3;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(91,75,255,.12);opacity:0}
.aws-entry-packet{top:50%;left:12%;margin-top:-4px}
.zone-packet{top:-5px;left:50%;margin-left:-4px}
.database-packet{top:50%;left:16%;margin-top:-4px}
.sample-panel.sample-animate .aws-entry-packet{animation:awsEntryPacket 13.2s ease-in-out infinite}
.sample-panel.sample-animate .aws-zones .failed{animation:awsZoneFailure 13.2s ease infinite}
.sample-panel.sample-animate .aws-zones .failed header span,.sample-panel.sample-animate .aws-zones .failed small{animation:awsFailureLabel 13.2s ease infinite}
.sample-panel.sample-animate .aws-zones .failed .zone-packet{animation:awsFailedPacket 13.2s ease-in infinite}
.sample-panel.sample-animate .aws-zones .healthy{animation:awsHealthyPulse 13.2s ease infinite}
.sample-panel.sample-animate .aws-zones .healthy .zone-packet{animation:awsHealthyPackets 13.2s ease-in-out infinite}
.sample-panel.sample-animate .aws-database{animation:awsDatabaseWake 13.2s ease infinite}
.sample-panel.sample-animate .database-packet{animation:awsDatabasePacket 13.2s ease-in-out infinite}
.sample-panel.sample-animate .aws-database strong{animation:awsFailoverLabel 13.2s ease infinite}

@keyframes windowScan{
  0%{left:0;width:7.69%;opacity:1}
  2.5%{left:0;width:15.38%}
  5%{left:0;width:23.08%}
  7.5%{left:0;width:30.77%}
  10%{left:0;width:38.46%}
  12.5%,25%{left:0;width:46.15%}
  27.5%,37.5%{left:7.69%;width:38.46%}
  40%{left:7.69%;width:46.15%}
  42.5%{left:7.69%;width:53.85%}
  45%{left:7.69%;width:61.54%}
  47.5%{left:7.69%;width:69.23%}
  50%,56.25%{left:7.69%;width:76.92%}
  58.75%{left:15.38%;width:69.23%}
  61.25%{left:23.08%;width:61.54%}
  63.75%{left:30.77%;width:53.85%}
  66.25%{left:38.46%;width:46.15%}
  68.75%{left:46.15%;width:38.46%}
  71.25%{left:46.15%;width:46.15%}
  73.75%,81.25%{left:46.15%;width:53.85%}
  83.75%{left:53.85%;width:46.15%}
  86.25%{left:61.54%;width:38.46%}
  88.75%,93.75%{left:69.23%;width:30.77%}
  100%{left:0;width:7.69%;opacity:1}
}
@keyframes pointerI{0%,25%{left:3.845%}27.5%,56.25%{left:11.535%}58.75%{left:19.225%}61.25%{left:26.915%}63.75%{left:34.605%}66.25%{left:42.295%}68.75%,81.25%{left:49.985%}83.75%{left:57.675%}86.25%{left:65.365%}88.75%,93.75%{left:73.055%}100%{left:3.845%}}
@keyframes pointerJ{0%{left:3.845%}2.5%{left:11.535%}5%{left:19.225%}7.5%{left:26.915%}10%{left:34.605%}12.5%,37.5%{left:42.295%}40%{left:49.985%}42.5%{left:57.675%}45%{left:65.365%}47.5%{left:73.055%}50%,68.75%{left:80.745%}71.25%{left:88.435%}73.75%,93.75%{left:96.155%}100%{left:3.845%}}
@keyframes stageOne{0%,12.5%{opacity:1;transform:none}14%,93.75%{opacity:0;transform:translateY(-4px)}96%,100%{opacity:1;transform:none}}
@keyframes stageTwo{0%,12.5%{opacity:0;transform:translateY(4px)}14%,24.5%{opacity:1;transform:none}26%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes stageThree{0%,24.5%{opacity:0;transform:translateY(4px)}26%,36%{opacity:1;transform:none}38.5%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes stageFour{0%,36%{opacity:0;transform:translateY(4px)}38.5%,56%{opacity:1;transform:none}58%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes stageFive{0%,56%{opacity:0;transform:translateY(4px)}58%,81%{opacity:1;transform:none}83%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes stageSix{0%,81%{opacity:0;transform:translateY(4px)}83%,93.75%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes countOne{0%,6.5%{opacity:1}8.5%,93.75%{opacity:0}96%,100%{opacity:1}}
@keyframes countTwo{0%,6.5%{opacity:0}8.5%,11.5%{opacity:1}13.5%,100%{opacity:0}}
@keyframes countThree{0%,11.5%{opacity:0}13.5%,26%{opacity:1}28%,100%{opacity:0}}
@keyframes countFour{0%,26%{opacity:0}28%,46.5%{opacity:1}48.5%,100%{opacity:0}}
@keyframes countFive{0%,46.5%{opacity:0}48.5%,49%{opacity:1}51%,100%{opacity:0}}
@keyframes countSix{0%,49%{opacity:0}51%,62.75%{opacity:1}64.75%,100%{opacity:0}}
@keyframes countSeven{0%,62.75%{opacity:0}64.75%,67.75%{opacity:1}69.75%,100%{opacity:0}}
@keyframes countEight{0%,67.75%{opacity:0}69.75%,72.75%{opacity:1}74.75%,100%{opacity:0}}
@keyframes countNine{0%,72.75%{opacity:0}74.75%,87.75%{opacity:1}89.75%,100%{opacity:0}}
@keyframes countTen{0%,87.75%{opacity:0}89.75%,93.75%{opacity:1}96%,100%{opacity:0}}
@keyframes windowWinner{0%,87.75%{border-color:#a69de0;background:#e5e2f9;color:var(--accent);transform:scale(1)}89.75%,93.75%{border-color:var(--accent);background:var(--accent);color:#fff;transform:scale(1)}96%,100%{border-color:#a69de0;background:#e5e2f9;color:var(--accent);transform:scale(1)}}
@keyframes paymentFirstSequence{0%{opacity:0;transform:translateY(10px)}8%,100%{opacity:1;transform:none}}
@keyframes paymentPacketFirst{0%,8%{left:13%;opacity:0}13%{opacity:1}27%{left:76%;opacity:1}31%,100%{left:86%;opacity:0}}
@keyframes paymentPacketRetry{0%,51%{left:13%;opacity:0}56%{opacity:1}67%{left:62%;opacity:1}71%,100%{left:68%;opacity:0}}
@keyframes paymentFirstSuccess{0%,25%{opacity:0;transform:scale(.88)}32%,100%{opacity:1;transform:scale(1)}}
@keyframes paymentLost{0%,32%{opacity:0;transform:scale(.8)}39%{opacity:1;transform:scale(1.08)}45%,100%{opacity:1;transform:scale(1)}}
@keyframes paymentRetrySequence{0%,43%{opacity:0;transform:translateY(10px)}51%,100%{opacity:1;transform:none}}
@keyframes paymentReturnSequence{0%,67%{opacity:0;transform:scale(.88)}74%,100%{opacity:1;transform:scale(1)}}
@keyframes paymentConclusion{0%,75%{opacity:0;transform:translateY(9px)}86%,100%{opacity:1;transform:none}}
@keyframes awsEntryPacket{0%{left:12%;opacity:0}4%{opacity:1}17%{left:76%;opacity:1}20%,100%{left:82%;opacity:0}}
@keyframes awsZoneFailure{0%,24%{border-color:var(--line);background:var(--paper);transform:none}29%{transform:translateX(-3px)}33%{transform:translateX(3px)}38%,100%{border-color:#dcc6bf;background:#faf3f0;transform:none}}
@keyframes awsFailureLabel{0%,31%{opacity:0}40%,100%{opacity:1}}
@keyframes awsFailedPacket{0%,17%{top:-5px;opacity:0;background:var(--accent)}21%{opacity:1}32%{top:48%;opacity:1;background:var(--accent)}36%{background:#9a574a;box-shadow:0 0 0 7px rgba(154,87,74,.14)}39%,100%{top:52%;opacity:0;background:#9a574a}}
@keyframes awsHealthyPulse{0%,39%{box-shadow:none}48%{box-shadow:0 0 0 5px rgba(91,75,255,.09)}60%,100%{box-shadow:none}}
@keyframes awsHealthyPackets{0%,39%{top:-5px;opacity:0}43%{opacity:1}54%{top:48%;opacity:1}58%{opacity:0;top:52%}62%{top:-5px;opacity:0}66%{opacity:1}75%{top:48%;opacity:1}79%,100%{top:52%;opacity:0}}
@keyframes awsDatabaseWake{0%,61%{border-color:transparent;filter:saturate(.35)}72%,100%{border-color:#9eb3c0;filter:none}}
@keyframes awsDatabasePacket{0%,64%{left:16%;opacity:0}68%{opacity:1}79%{left:68%;opacity:1}83%,100%{left:76%;opacity:0}}
@keyframes awsFailoverLabel{0%,78%{opacity:0;transform:scale(.8)}86%,100%{opacity:1;transform:scale(1)}}

@media(prefers-reduced-motion:reduce){
  .sample-panel.sample-animate *{animation:none!important}
  .window-frame{left:69.23%;width:30.77%;opacity:1}
  .pointer-i{left:73.055%}
  .pointer-j{left:96.155%}
  .window-story section{opacity:0!important}
  .window-story .story-six{opacity:1!important}
  .window-scan-track .letter-row b:nth-child(10),.window-scan-track .letter-row b:nth-child(11),.window-scan-track .letter-row b:nth-child(13){border-color:var(--accent);background:var(--accent);color:#fff}
  .counter-state{opacity:0!important}
  .counter-state.count-ten{opacity:1!important}
  .payment-packet,.aws-entry-packet,.zone-packet,.database-packet{display:none}
}

@media(max-width:760px){
  .window-story{min-height:72px}
  .window-scan-track{margin:8px 2px 11px}
  .window-animation-grid{grid-template-columns:1fr}
  .counter-demo{width:100%;max-width:240px;min-height:205px;margin:0 auto}
}

/* Private track lock: a blurred decoy behind a small unlock form; real content arrives only after the password. */
.track-lock{position:relative;isolation:isolate;overflow:hidden}
.track-lock-veil{filter:blur(6px);opacity:.75;pointer-events:none;user-select:none;-webkit-user-select:none}
.track-lock-veil .veil-row{display:flex;align-items:center;gap:10px;padding:14px 4px;border-bottom:1px solid #eadfe1;font:600 14px/1.35 var(--body)}
.track-lock-veil .veil-row .chapter-title{flex:1}
.track-lock-veil .part-intro{display:block}
.track-lock-form{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 14px;text-align:center;background:linear-gradient(180deg,#fdf8f800,#fdf8f8cc 28%,#fdf8f8cc 72%,#fdf8f800)}
.track-lock-eyebrow{display:inline-flex;align-items:center;gap:6px;color:#8c1f2b;font:750 10px/1.3 var(--body);letter-spacing:1.6px}
.track-lock-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%}
.track-lock-row label{flex:1 1 150px;max-width:260px}
.track-lock-row input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid #d9bfc3;border-radius:8px;background:#fff;color:var(--ink);font:500 14px/1.2 var(--body);letter-spacing:.5px;transition:border-color .15s,box-shadow .15s}
.track-lock-row input:focus{outline:0;border-color:#8c1f2b;box-shadow:0 0 0 3px #8c1f2b22}
.track-lock-row button{padding:10px 22px;border:0;border-radius:999px;background:#8c1f2b;color:#fff;font:700 13px/1.2 var(--body);letter-spacing:.4px;cursor:pointer;box-shadow:0 8px 18px #8c1f2b33;transition:transform .15s,box-shadow .15s,background .15s}
.track-lock-row button:hover{background:#75161f;transform:translateY(-1px);box-shadow:0 10px 22px #8c1f2b40}
.track-lock-row button:focus-visible{outline:3px solid #8c1f2b55;outline-offset:2px}
.track-lock-note{margin:0;max-width:300px;color:var(--muted);font:400 11.5px/1.5 var(--body)}
.track-lock.is-busy .track-lock-row button{opacity:.6;pointer-events:none}
.track-lock.is-wrong .track-lock-row input{border-color:#b3202e;animation:lock-shake .35s}
.track-lock.is-wrong .track-lock-note{color:#b3202e}
@keyframes lock-shake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@media(prefers-reduced-motion:reduce){.track-lock.is-wrong .track-lock-row input{animation:none}.track-lock-row button{transition:none}}
html.lock-checking .track-lock{visibility:hidden}
.lock-rail{margin-top:2px;min-height:250px;border-radius:8px}
.lock-rail .track-lock-form{gap:8px;padding:14px 10px}
.lock-rail .track-lock-row label{flex-basis:100%;max-width:none}
.lock-rail .track-lock-row button{width:100%}
.lock-page{min-height:62vh;border-radius:12px}
.lock-page .track-lock-veil{padding-bottom:40px}
.lock-page .track-lock-form{gap:14px;background:linear-gradient(180deg,#fdf8f800,#fdf8f8d9 22%,#fdf8f8d9 78%,#fdf8f800)}
.lock-page .track-lock-eyebrow{font-size:11px}
.lock-page .track-lock-row input{font-size:15px;padding:12px 14px}
.lock-page .track-lock-row button{padding:12px 28px;font-size:14px}
.optional-paths .lock-card{display:block;min-height:160px;border:1px solid #e3c9cc;border-radius:8px;background:#f7ecee}
.lock-card .veil-card{display:flex;flex-direction:column;padding:24px;color:var(--ink)}
.lock-card .veil-card span{color:#8c1f2b;font:750 10px/1.3 var(--body);letter-spacing:1.15px}
.lock-card .veil-card strong{margin-top:14px;font:700 17px/1.35 var(--body)}
.lock-card .veil-card small{margin-top:8px;color:var(--muted);font:400 13px/1.55 var(--body)}
.lock-card .track-lock-form{padding:14px}
.lock-card .track-lock-note{display:none}
/* Evidence labels in the private track: Official, Reported, Aggregator, Generated. Hover or focus explains each. */
.evidence{display:inline-block;padding:1px 8px 1px 7px;border:1px solid;border-radius:999px;font:700 10px/1.7 var(--body);letter-spacing:.9px;text-transform:uppercase;vertical-align:2px;white-space:nowrap;cursor:help}
.evidence::before{content:"";display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:currentColor;vertical-align:1px}
.evidence-official{color:#221861;background:#e0dcf9;border-color:#b2a9ed}
.evidence-reported{color:#1f3f8c;background:#e6ecf8;border-color:#bccbee}
.evidence-aggregator{color:#7a4b00;background:#f8efdc;border-color:#e6cf9c}
.evidence-generated{color:#5a5560;background:#eeecf0;border-color:#d5d0d9}
.evidence:focus-visible{outline:2px solid currentColor;outline-offset:2px}
td .evidence,th .evidence{vertical-align:1px}

/* The page lays out once and only the panel's transform animates: moving the margin would re-lay out the text, and re-draw the design board, on every frame. */
:root{--panel-ease:cubic-bezier(.32,.72,0,1)}
.panel-toggle{display:none;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:6px;background:none;color:var(--muted)}
.panel-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.panel-toggle:focus-visible{outline-width:2px;outline-offset:1px}
@media(hover:hover){.panel-toggle:hover{background:#d5d1f4;color:var(--forest)}}
.panel-toggle:active{background:#c6bff0}
@media(pointer:coarse){.panel-toggle{width:44px;height:44px}}
.panel-hide{position:absolute;top:33px;right:12px}
@media(max-width:1200px){.panel-hide{top:2px;right:2px}}
.panel-show{position:fixed;z-index:22;top:17px;left:12px;visibility:hidden;opacity:0;border-color:var(--line);background:var(--paper);transition:opacity .12s ease,visibility 0s linear .12s}
@media(min-width:761px){
  .panel-hide,.panel-show{display:flex}
  .lesson .sidebar{transition:transform .24s var(--panel-ease)}
  .panel-closed .lesson .sidebar{transform:translateX(-100%);visibility:hidden;transition:transform .24s var(--panel-ease),visibility 0s linear .24s}
  .panel-closed .lesson .reading-shell{margin-left:0}
  .panel-closed .lesson main{max-width:calc(1120px + var(--sidebar))}
  .panel-closed .lesson .reading-bar{padding-left:64px}
  .panel-closed .panel-show{visibility:visible;opacity:1;transition:opacity .16s ease .08s}
}
@media print{.panel-toggle{display:none!important}}

/* 4 · Sidebar --------------------------------------------------------- */
.sidebar{position:fixed;inset:0 auto 0 0;z-index:30;display:flex;flex-direction:column;width:var(--sidebar);height:100dvh;padding:24px 16px 0;overflow:hidden;background:var(--violet-tint);border-right:1px solid var(--line)}
.sidebar>nav{display:flex;flex-direction:column;flex:1;min-height:0}
.identity{display:flex;flex-shrink:0;align-items:center;margin:0 6px 20px;line-height:1.2;min-height:44px}
.identity>span{display:flex;flex-direction:column;gap:8px}
.identity>.cachito{display:block}
.identity .cachito{font-size:32px}
.identity small{font:500 12.5px/1.35 var(--body);letter-spacing:0;color:var(--muted)}
.search-box{display:flex;flex-shrink:0;align-items:center;gap:10px;margin:0 0 6px;padding:0 12px;min-height:44px;border:1px solid var(--line-strong);border-radius:12px;background:var(--paper);color:var(--muted);box-shadow:var(--shadow-1);transition:border-color .15s,box-shadow .15s}
.search-box:focus-within{border-color:var(--violet);box-shadow:0 0 0 4px rgba(91,75,255,.14)}
.search-box .ic{flex:none}
.search-box input{width:100%;min-width:0;border:0;background:transparent;outline:0;color:var(--ink);font-size:14.5px;caret-color:var(--violet)}
.search-box input::placeholder{color:var(--faint)}
.search-box kbd{flex:none;padding:1px 7px;border:1px solid var(--line-strong);border-radius:6px;color:var(--muted);font:600 12px/1.5 var(--body)}
.contents-label{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;margin:18px 8px 4px;font:700 11px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.contents-label button{display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:18px;line-height:1}
.contents-label button:hover{background:#fff;color:var(--ink)}
#search-results{flex:1;min-height:0;overflow:auto;margin:6px 0}
#search-results>a{display:block;padding:11px 12px;border-radius:10px;font:600 14px/1.4 var(--body);color:var(--ink)}
#search-results>a:hover{background:#fff}
#search-results small{display:block;margin-top:2px;color:var(--muted);font-weight:500;font-size:12.5px}
#search-results p{padding:10px 12px;color:var(--muted);font-size:14px}
#contents-tree{flex:1;min-height:0;overflow:auto;padding:0 2px 16px 0;margin-right:-6px;scrollbar-width:thin;scrollbar-color:#CFCAEB transparent}
.toc-area{--part-ink:var(--violet-dd);--part-tint:var(--violet-soft)}
.toc-area.part-1{--part-ink:#4838E6;--part-tint:#EEEBFF}
.toc-area.part-2{--part-ink:#0A7D68;--part-tint:#DDF5EF}
.toc-area.part-3{--part-ink:#B5520A;--part-tint:#FFEBDA}
.toc-area.part-4{--part-ink:#B8285F;--part-tint:#FFE5EE}
.toc-area.part-5{--part-ink:#2159C7;--part-tint:#E3EDFF}
.toc-area.part-6{--part-ink:#7A3FD0;--part-tint:#F0E7FF}
.toc-area.part-7{--part-ink:#A8222F;--part-tint:#FBE6E8}
.company-area{--part-ink:#7A3FD0;--part-tint:#F0E7FF}
.toc-area>.toc-part-heading{display:flex;flex-direction:column;gap:3px;margin:24px 8px 8px;padding:0;border:0;background:none;font:700 11px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--part-ink)}
.toc-part-heading .part-label{display:flex;align-items:center;gap:8px;font:700 11px/1.4 var(--body);letter-spacing:.1em;color:var(--part-ink)}
.toc-part-heading .part-label::before{content:"";flex:none;width:9px;height:9px;border-radius:2.5px;background:var(--part-ink);transform:rotate(12deg)}
.toc-part-heading .part-title{font:700 15.5px/1.35 var(--body);letter-spacing:0;text-transform:none;color:var(--ink)}
.shelf-note{margin:0 8px 8px;color:var(--muted);font-size:12.5px}
.toc-link{display:block;padding:8px 10px;border-radius:10px;font:500 14px/1.45 var(--body);color:#4A4570;overflow-wrap:anywhere;transition:background-color .12s,color .12s}
.toc-link:hover{background:var(--paper);color:var(--ink)}
.toc-link.overview{margin-top:4px;font-weight:650;color:var(--ink)}
.toc-link.part-intro{margin:0 0 0 0;padding:6px 10px;font-size:13px;color:var(--muted)}
.toc-link.active{background:var(--violet);color:#fff;font-weight:650;box-shadow:0 8px 18px -8px rgba(91,75,255,.75)}
.toc-link.active:hover{background:var(--violet-d);color:#fff}
.toc-link.completed:not(.active)::after{content:'✓';margin-left:6px;color:var(--ok);font-size:12px;font-weight:800}
.toc-chapter{margin:0;padding:0;border:0;background:none}
.toc-chapter>summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px;padding:9px 10px;border-radius:10px;list-style:none;font:600 14px/1.45 var(--body);color:var(--ink);cursor:pointer}
.toc-chapter>summary::-webkit-details-marker{display:none}
.toc-chapter>summary:hover{background:var(--paper)}
.toc-chapter>summary>span:first-child:not(.chapter-number){grid-column:1/3}
.chapter-number{display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:44px;padding:3px 6px;border:0;border-radius:7px;background:var(--part-tint);color:var(--part-ink);font:700 12px/1.35 var(--body)}
.chapter-number small{font:700 9.5px/1 var(--body);letter-spacing:.04em}
.chapter-title{font-weight:650;line-height:1.45}
.chevron{margin-left:auto;color:var(--faint);font-size:18px;line-height:1.2;transition:transform .15s}
.toc-chapter[open]>summary>.chevron{transform:rotate(90deg)}
.toc-lessons{margin:2px 0 12px 20px;padding-left:12px;border-left:2px solid var(--line)}
.toc-lessons>.toc-link{margin:1px 0}
.toc-lessons>.numbered-lesson{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:baseline;gap:8px;padding-left:6px}
.lesson-index{padding:1px 0;border-radius:6px;background:var(--part-tint);color:var(--part-ink);font:700 11.5px/1.7 var(--body);text-align:center;white-space:nowrap}
.numbered-lesson.active .lesson-index{background:rgba(255,255,255,.2);color:#fff}
.lesson-title{min-width:0}
.toc-section{margin:14px 8px 4px;color:var(--muted);font:700 11px/1.4 var(--body);letter-spacing:.09em;text-transform:uppercase}
.toc-page-label{margin:14px 10px 6px;color:var(--muted);font:700 10.5px/1.4 var(--body);letter-spacing:.1em}
.toc-headings{margin:0 4px 14px 14px;padding:0 0 0 10px;list-style:none;border-left:2px solid var(--violet-line)}
.toc-headings li::marker{content:""}
.toc-headings a{display:block;padding:5px 8px;border-left:2px solid transparent;margin-left:-12px;padding-left:10px;font:500 13px/1.45 var(--body);color:var(--muted)}
.toc-headings .depth-2>a{font-weight:600}
.toc-headings .depth-3>a{padding-left:20px;font-weight:500}
.toc-headings a:hover{color:var(--ink)}
.toc-headings a.current-heading{color:var(--violet-dd);border-left-color:var(--violet);background:var(--violet-soft);border-radius:0 8px 8px 0}
.reference-area,.company-area,.track-area{border-top:1px solid var(--line);margin-top:26px;padding-top:6px}
.rail-footer{display:flex;flex-shrink:0;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 -16px;padding:13px 22px 15px;border-top:1px solid var(--line);background:var(--violet-tint);color:var(--muted);font:600 11.5px/1.4 var(--body);letter-spacing:.02em}
.rail-footer .status-dot{margin:0}
.rail-footer button{margin-left:auto;padding:4px 0;border:0;background:none;color:var(--violet-dd);font:650 12.5px/1.4 var(--body);text-decoration:underline;text-decoration-color:var(--violet-line);text-underline-offset:3px}
.rail-footer button:hover{text-decoration-color:var(--violet)}
.mobile-bar,.mobile-close,.drawer-backdrop{display:none}
.mobile-close{place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:var(--ink);font-size:26px;line-height:1}

/* 5 · Page chrome ----------------------------------------------------- */
.reading-shell{min-height:100vh;margin-left:var(--sidebar)}
.reading-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;height:var(--bar);padding:0 48px;background:rgba(255,255,255,.88);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px);border-bottom:1px solid var(--line);color:var(--muted);font:600 13px/1.3 var(--body)}
.reading-bar>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reading-controls{display:flex;flex-shrink:0;align-items:center;gap:12px}
.sticky-sequence{display:flex;flex-shrink:0;align-items:center;gap:8px}
#saved-progress{padding:6px 12px;border-radius:999px;background:var(--violet-soft);color:var(--violet-dd);font:650 12.5px/1.3 var(--body);white-space:nowrap}
#motion-toggle{color:var(--muted);box-shadow:none;font-weight:600}
#motion-toggle::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
#motion-toggle[aria-pressed="false"]::before{background:var(--faint)}
.read-progress{position:sticky;top:calc(var(--bar) - 1px);z-index:21;height:3px;margin-top:-3px}
.read-progress>span{display:block;width:0;height:3px;background:linear-gradient(90deg,var(--violet),#8A7DFF);border-radius:0 3px 3px 0}
main{max-width:1120px;margin:0 auto;padding:44px 64px 32px;outline:none}
.reader-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 24px;color:var(--muted);font:700 12px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase}
.reader-meta>span:first-child{color:var(--violet-dd)}
.step-navigation{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:64px;padding:32px 0 8px;border-top:1px solid var(--line)}
.step-navigation a{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-1);transition:border-color .15s,box-shadow .15s,transform .15s}
.step-navigation a:hover{border-color:var(--violet);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.step-navigation a span,.course-end>span{color:var(--violet-dd);font:700 11.5px/1.4 var(--body);letter-spacing:.09em}
.step-navigation a strong{max-width:none;color:var(--ink);font:650 16px/1.4 var(--body)}
.next-step{align-items:flex-end;text-align:right}
.step-navigation a:hover strong{color:var(--violet-dd)}
.course-end{display:flex;flex-direction:column;gap:12px;grid-column:1/-1;padding:24px;border:1px solid var(--violet-line);border-radius:var(--radius);background:var(--violet-tint)}
.course-end strong{font:600 16px/1.5 var(--body);color:var(--ink)}
.course-end button{align-self:flex-start}
.page-footer{display:flex;justify-content:space-between;gap:12px;margin-top:56px;padding:22px 0;border-top:1px solid var(--line);color:var(--muted);font:600 12.5px/1.5 var(--body);letter-spacing:.04em}
.page-footer>span:first-child{font:600 15px/1 var(--display);letter-spacing:.02em;color:var(--ink)}
.page-footer>span:last-child{letter-spacing:0;font-weight:500}
.mobile-location{min-width:0;text-align:right;line-height:1.35}
.mobile-page-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:650 14px/1.3 var(--body);color:var(--ink)}
.mobile-page-position{display:block;margin-top:2px;font:600 11px/1.3 var(--body);letter-spacing:.04em;color:var(--muted)}
.mobile-bar{gap:12px}
.mobile-bar>#open-contents{flex-shrink:0}

/* 6 · Lesson content (continued) -------------------------------------- */
.lesson .lesson-body:not(:is(.db,.cf) *){min-width:0}

/* Code: one unit, an editor-style header over a deep-navy body. The header is added by app.js. */
.lesson .lesson-body .code-example:not(:is(.db,.cf) *){min-width:0;max-width:100%;margin:26px 0;overflow:hidden;border:1px solid #2C2658;border-radius:14px;background:#17132F;box-shadow:0 14px 30px -18px rgba(23,19,47,.7)}
.lesson .lesson-body .code-actions:not(:is(.db,.cf) *){display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:6px 8px 6px 18px;border-bottom:1px solid #2C2658;background:#1E1940}
.lesson .lesson-body .code-label:not(:is(.db,.cf) *){display:inline-flex;align-items:center;gap:9px;color:#A9A3D8;font:700 11.5px/1 var(--body);letter-spacing:.1em}
.lesson .lesson-body .code-label:not(:is(.db,.cf) *)::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--orange);transform:rotate(12deg)}
.code-actions .copy-code{position:static;flex:none;opacity:1;min-height:32px;padding:0 12px;border:1px solid #3B3470;border-radius:8px;background:transparent;color:#D8D4FF;font:650 13px/1 var(--body);transition:background-color .15s,border-color .15s}
.code-actions .copy-code:hover,.code-actions .copy-code:focus-visible{background:#2A2358;border-color:#6E62FF;color:#fff}
.lesson .lesson-body pre:not(:is(.db,.cf) *){position:relative;margin:22px 0;padding:22px 24px;overflow:auto;max-height:650px;border-radius:14px;background:#17132F;color:#ECE9FF;font-size:13.5px;line-height:1.8;tab-size:4;scrollbar-width:thin;scrollbar-color:#4A4290 transparent}
.lesson .lesson-body .code-example pre:not(:is(.db,.cf) *){max-width:100%;margin:0;border-radius:0;overscroll-behavior-x:contain}
.lesson .lesson-body pre code:not(:is(.db,.cf) *){padding:0;background:none;color:inherit;font-size:inherit;white-space:pre;overflow-wrap:normal}
.code-file{margin:26px 0;max-width:100%;overflow:hidden;border:1px solid #2C2658;border-radius:14px}
.code-file figcaption{display:flex;justify-content:space-between;gap:15px;padding:12px 18px;background:#1E1940;color:#A9A3D8;font:650 12.5px/1.4 var(--mono)}
.code-file pre{margin:0;border-radius:0;max-height:440px}

/* The question: the lesson's opening quote and the "task brief" are the same idea, so they share a look. */
.lesson .lesson-body blockquote:not(:is(.db,.cf) *){position:relative;margin:30px 0;padding:24px 28px 24px 62px;border:1px solid var(--violet-line);border-radius:18px;background:linear-gradient(180deg,var(--violet-tint),#fff);color:var(--ink);font:500 clamp(18px,1.7vw,21px)/1.6 var(--body)}
.lesson .lesson-body blockquote:not(:is(.db,.cf) *)::before{content:"";position:absolute;left:26px;top:30px;width:16px;height:16px;border-radius:4.5px;background:var(--orange);transform:rotate(12deg)}
.lesson .lesson-body blockquote p:not(:is(.db,.cf) *){max-width:none;margin:4px 0;font-size:inherit;line-height:1.55}
.lesson .lesson-body .task-brief:not(:is(.db,.cf) *){margin:28px 0 32px;padding:26px 30px 26px 62px;border:1px solid var(--violet-line);border-radius:18px;background:linear-gradient(180deg,var(--violet-tint),#fff);position:relative}
.lesson .lesson-body .task-brief:not(:is(.db,.cf) *)::before{content:"";position:absolute;left:26px;top:31px;width:16px;height:16px;border-radius:4.5px;background:var(--orange);transform:rotate(12deg)}
.task-label{margin-bottom:12px;color:var(--violet-dd);font:700 12px/1.5 var(--body);letter-spacing:.1em}
.lesson .lesson-body .task-brief blockquote:not(:is(.db,.cf) *){margin:0;padding:0;border:0;border-radius:0;background:none}
.lesson .lesson-body .task-brief blockquote:not(:is(.db,.cf) *)::before{display:none}
.lesson .lesson-body .task-brief blockquote p:not(:is(.db,.cf) *){margin:0;max-width:none;color:var(--ink);font:500 clamp(18px,1.7vw,21px)/1.6 var(--body)}
.example-card{border-color:var(--line);border-radius:14px;background:var(--paper);box-shadow:var(--shadow-1)}
.lesson .lesson-body .example-title:not(:is(.db,.cf) *){padding:13px 20px;background:var(--violet-tint);color:var(--ink);font:700 13.5px/1.5 var(--body)}
.example-value dt{color:var(--muted);font:700 11.5px/1.5 var(--body)}
.example-value dd{color:var(--text)}
.example-value+.example-value{background:var(--violet-tint);border-left-color:var(--line)}
.lesson .lesson-body .example-reason:not(:is(.db,.cf) *){border-top-color:var(--line);color:var(--muted)}

/* Callouts: the guide's markers. Soft tint, a small label, no accent bars. */
.mk{position:relative;margin:26px 0;padding:36px 22px 18px!important;border:1px solid var(--violet-line);border-radius:14px;background:var(--violet-tint)}
.mk::before{content:attr(data-mk);position:absolute;top:13px;left:22px;display:inline-flex;align-items:center;gap:8px;color:var(--violet-dd);font:700 11.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase}
.mk::after{content:"";position:absolute;top:13px;right:20px;width:9px;height:9px;border-radius:2.5px;background:var(--violet);opacity:.55;transform:rotate(12deg)}
.mk>:first-child{margin-top:0}.mk>:last-child{margin-bottom:0}
.mk-changed,.mk-followup{border-color:#FFD9B8;background:var(--orange-soft)}
.mk-changed::before,.mk-followup::before{color:var(--orange-d)}
.mk-changed::after,.mk-followup::after{background:var(--orange)}
.mk-depth{border-color:#BDE8DB;background:#EEFAF6}
.mk-depth::before{color:#0A7D68}
.mk-depth::after{background:#0E9F85}
.mk-invariant{border-color:var(--violet-line);background:var(--violet-soft)}
.mk-redraw{border-color:var(--violet-line);background:var(--violet-tint)}
.mk-aside{border-color:var(--line);background:#F6F5FB}
.mk-aside::before{color:var(--muted)}
.mk-aside::after{background:var(--faint)}

/* Disclosure */
.lesson .lesson-body details:not(:is(.db,.cf) *){margin:26px 0;padding:0 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-1)}
.lesson .lesson-body details[open]:not(:is(.db,.cf) *){border-color:var(--violet-line);padding-bottom:22px}
.lesson .lesson-body details>summary:not(:is(.db,.cf) *){display:flex;align-items:center;gap:14px;padding:18px 0;color:var(--ink);font:650 15px/1.4 var(--body);cursor:pointer;list-style:none}
.lesson .lesson-body details>summary:not(:is(.db,.cf) *)::-webkit-details-marker{display:none}
.lesson .lesson-body details>summary:not(:is(.db,.cf) *)::before{content:'+';display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:var(--violet-soft);color:var(--violet-dd);font:500 19px/1 var(--body)}
.lesson .lesson-body details[open]>summary:not(:is(.db,.cf) *)::before{content:'−'}
.lesson .lesson-body details[open]>summary:not(:is(.db,.cf) *){margin-bottom:20px;border-bottom:1px solid var(--line)}
.lesson .lesson-body details h2:not(:is(.db,.cf) *){font-size:26px}.lesson-body details h3{font-size:18px}
.lesson .lesson-body details.concept-refresher:not(:is(.db,.cf) *){border-style:dashed;background:var(--violet-tint)}

/* Tables */
.tablewrap{max-width:100%;margin:26px 0;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-1)}
.lesson .lesson-body table:not(:is(.db,.cf) *){width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.6;text-align:left}
.lesson .lesson-body th:not(:is(.db,.cf) *){padding:13px 16px;background:var(--violet-tint);color:var(--muted);font:700 12px/1.4 var(--body);letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.lesson .lesson-body td:not(:is(.db,.cf) *){min-width:120px;padding:14px 16px;border-top:1px solid var(--line);vertical-align:top}
.lesson .lesson-body tr:first-child td:not(:is(.db,.cf) *){border-top:0}
.lesson .lesson-body tbody tr:hover td:not(:is(.db,.cf) *){background:#FCFBFF}
.lesson .lesson-body td code:not(:is(.db,.cf) *){font-size:12.5px}

/* Figures and diagrams */
.mer,.figwrap{max-width:100%;margin:30px 0;padding:18px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-1);scrollbar-width:thin}
.mer img{display:block;min-width:0;max-width:none;margin:auto}
.figwrap img{display:block;width:100%;height:auto}
.lesson-lead img,.lesson .lesson-body img[src*="/project-context/"]:not(:is(.db,.cf) *){min-width:0;width:100%;max-width:520px;height:auto}
.lesson .lesson-body img[src*="/ui-lessons/"]:not(:is(.db,.cf) *){display:block;width:100%;min-width:0;max-width:700px;height:auto}
.figwrap:has(img[src*="/project-context/"])+.visual-toolbar .diagram-scroll-hint,.figwrap:has(img[src*="/ui-lessons/"])+.visual-toolbar .diagram-scroll-hint{display:none}
.visual-toolbar{display:flex;justify-content:flex-end;gap:8px;margin:-18px 0 26px;color:var(--muted);font-size:13px}
.visual-toolbar button{min-height:34px;padding:0 12px;border:1px solid var(--line-strong);border-radius:9px;background:var(--paper);color:var(--ink);font:600 13px/1 var(--body)}
.visual-toolbar button:hover{border-color:var(--violet);color:var(--violet-dd);background:var(--violet-tint)}
.diagram-scroll-hint{margin-right:auto;display:none}
.featured-diagram+.visual-toolbar{margin:8px 0 0}
.visual-gallery figure{margin:30px 0;padding-bottom:20px;border-bottom:1px solid var(--line)}
.visual-gallery img{display:block;max-width:100%}
.visual-gallery figcaption{color:var(--muted);font-size:14px}

/* Sources and references */
.sources{margin-top:48px!important}
.sources a{font-size:14px}
.citation,.concept-reference{color:inherit}
.citation{color:var(--violet-dd)}

/* 7 · Chapter and part pages ------------------------------------------ */
.chapter-lede{max-width:34em!important;margin:0 0 8px;color:var(--muted);font:400 clamp(18px,1.8vw,22px)/1.6 var(--body)}
.chapter-contract{margin:36px 0;padding:24px 28px;border:1px solid var(--violet-line);border-radius:var(--radius);background:var(--violet-tint)}
.chapter-contract p{margin:10px 0 0;font-size:15px}
.lesson .lesson-body .chapter-outline:not(:is(.db,.cf) *){margin:0;padding:0;display:grid;gap:12px;list-style:none}
.lesson .lesson-body .chapter-outline li:not(:is(.db,.cf) *){position:relative;display:flex;align-items:flex-start;gap:20px;max-width:none;margin:0;padding:20px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);box-shadow:var(--shadow-1);font-size:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.lesson .lesson-body .chapter-outline li:hover:not(:is(.db,.cf) *){border-color:var(--violet);box-shadow:var(--shadow-2);transform:translateY(-2px)}
.lesson .lesson-body .chapter-outline .outline-index:not(:is(.db,.cf) *){flex:none;min-width:62px;padding:2px 10px;border-radius:8px;background:var(--violet-soft);color:var(--violet-dd);font:700 13.5px/1.9 var(--body);text-align:center;white-space:nowrap}
.lesson .lesson-body .chapter-outline h2:not(:is(.db,.cf) *){margin:0 0 4px;color:var(--ink);font:650 18px/1.4 var(--body);letter-spacing:0}
.lesson .lesson-body .chapter-outline h2 a:not(:is(.db,.cf) *){color:inherit;text-decoration:none}
.lesson .lesson-body .chapter-outline h2 a:not(:is(.db,.cf) *)::after{content:"";position:absolute;inset:0;border-radius:inherit}
.lesson .lesson-body .chapter-outline li:hover h2 a:not(:is(.db,.cf) *){color:var(--violet-dd)}
.lesson .lesson-body .chapter-outline p:not(:is(.db,.cf) *){margin:0;max-width:none;color:var(--muted);font-size:15px;line-height:1.55}
.specialization-note{margin-top:20px;border:1px solid var(--violet-line);border-left-width:1px;border-radius:var(--radius);background:var(--violet-tint)}
.specialization-note strong{color:var(--violet-dd);letter-spacing:.06em}

/* 8 · Home ------------------------------------------------------------ */
/* The home page has no persistent sidebar: the contents open as a drawer, and a top bar carries the brand and the way in. */
.home .reading-shell{margin-left:0}
.home .reading-bar,.home .reader-meta,.home .mobile-bar{display:none}
.home .read-progress{display:none}
.home main{max-width:none;margin:0;padding:0}
.home .lesson-body{max-width:none}
.home .lesson-body :is(ul,ol){margin:0;padding:0;list-style:none}
.home .lesson-body li{margin:0;padding:0;max-width:none;font-size:inherit;line-height:inherit}
.home .lesson-body p,.home .lesson-body li{max-width:none}
.home .sidebar{position:fixed;z-index:44;width:min(92vw,392px);transform:translateX(-101%);box-shadow:none;transition:transform .26s var(--panel-ease),box-shadow .26s}
.home.contents-open .sidebar{transform:none;box-shadow:24px 0 60px -12px rgba(29,24,56,.3)}
.home .mobile-close,.contents-open .mobile-close{display:grid}
.home .mobile-close{position:absolute;top:14px;right:12px;z-index:2}
.home .drawer-backdrop:not([hidden]),.drawer-backdrop:not([hidden]){position:fixed;inset:0;z-index:43;display:block;border:0;background:rgba(29,24,56,.5);backdrop-filter:blur(3px)}
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 32px}

/* Top bar */
.site-nav{position:sticky;top:0;z-index:31;border-bottom:1px solid var(--line);background:rgba(255,255,255,.86);backdrop-filter:saturate(1.5) blur(14px);-webkit-backdrop-filter:saturate(1.5) blur(14px)}
.site-nav-in{display:flex;align-items:center;gap:32px;max-width:1240px;height:68px;margin:0 auto;padding:0 32px}
.site-nav .identity{margin:0}
.site-nav .cachito{font-size:30px}
.site-nav-links{display:flex;align-items:center;gap:6px}
.site-nav-links a{padding:9px 13px;border-radius:10px;color:var(--text);font:600 15px/1 var(--body);transition:background-color .15s,color .15s}
.site-nav-links a:hover{background:var(--violet-soft);color:var(--violet-dd)}
.site-nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto}

/* Section scaffolding */
.home section{scroll-margin-top:84px}
.sec{padding:96px 0}
.sec-head{max-width:720px;margin:0 0 48px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{margin:14px 0 0;font:500 clamp(32px,3.6vw,46px)/1.12 var(--display);letter-spacing:-.02em;color:var(--ink)}
.sec-head p{margin:18px 0 0;color:var(--muted);font-size:clamp(17px,1.5vw,19px);line-height:1.65}
.sec-head.center p{margin-inline:auto;max-width:36em}

/* Hero */
.home-hero{position:relative;overflow:hidden;padding:0;border:0;background:radial-gradient(900px 520px at 88% -8%,#E6E0FF 0,rgba(230,224,255,0) 70%),radial-gradient(600px 420px at 4% 108%,#FFEBDA 0,rgba(255,235,218,0) 70%),#fff}
.home-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(91,75,255,.16) 1px,transparent 1.4px) 0 0/26px 26px;-webkit-mask-image:linear-gradient(115deg,transparent 35%,#000 100%);mask-image:linear-gradient(115deg,transparent 35%,#000 100%);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:56px;align-items:center;max-width:1240px;margin:0 auto;padding:60px 32px 88px}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 14px;border:1px solid var(--violet-line);border-radius:999px;background:rgba(255,255,255,.85);color:var(--violet-dd);font:650 14px/1 var(--body);box-shadow:var(--shadow-1)}
.pill .sq{width:9px;height:9px}
.home-hero h1{margin:26px 0 0;max-width:17ch;font:500 clamp(40px,4.7vw,62px)/1.06 var(--display);letter-spacing:-.02em;color:var(--ink)}
.home-hero h1 em{font-style:normal;color:var(--violet)}
.hero-lede{max-width:33em;margin:26px 0 0;color:var(--text);font:400 clamp(18px,1.7vw,20.5px)/1.65 var(--body)}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-top:34px}
.hero-actions>span,.hero-note{flex-basis:100%;margin-top:6px;color:var(--muted);font:500 14.5px/1.5 var(--body)}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px 28px;margin:38px 0 0;padding:0;list-style:none}
.hero-proof li{display:flex;align-items:center;gap:10px;margin:0;color:var(--ink);font:650 15px/1.3 var(--body)}
.hero-proof li::before{content:"";flex:none;width:8px;height:8px;border-radius:2px;background:var(--orange);transform:rotate(12deg)}
.hero-art{position:relative;width:100%;max-width:540px;justify-self:end;aspect-ratio:1/1.04}
.hero-panel{position:absolute;inset:7% 0 0 8%;border:1px solid var(--violet-line);border-radius:36px;background:linear-gradient(150deg,#EFEBFF 0,#F8F6FF 58%,#FFF1E4 100%);box-shadow:var(--shadow-3)}
.hero-card{position:absolute;padding:18px 20px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow-2)}
.hero-card small{display:block;color:var(--violet-dd);font:700 11.5px/1.3 var(--body);letter-spacing:.09em}
.hero-card strong{display:block;margin-top:6px;color:var(--ink);font:650 17px/1.3 var(--body)}
.hero-card-a{top:16%;left:0;width:62%}
.hero-bar{height:8px;margin-top:14px;border-radius:99px;background:var(--violet-soft);overflow:hidden}
.hero-bar i{display:block;height:100%;width:62%;border-radius:99px;background:linear-gradient(90deg,var(--violet),#8A7DFF)}
.hero-card-b{top:42%;left:10%;width:66%}
.mini-flow{display:flex;align-items:center;flex-wrap:wrap;gap:8px 6px;margin:0}
.mini-flow span{padding:5px 9px;border:1px solid var(--violet-line);border-radius:8px;background:var(--violet-tint);color:var(--ink);font:650 12.5px/1 var(--body)}
.mini-flow b{color:var(--faint);font:600 14px/1 var(--body)}
.hero-card-b p{margin:12px 0 0;color:var(--muted);font:500 14px/1.45 var(--body)}
.hero-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);font:650 13.5px/1 var(--body);box-shadow:var(--shadow-2);white-space:nowrap}
.hero-chip::before{content:"✓";display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ok-soft);color:var(--ok);font-size:12px;font-weight:800}
.hero-chip-1{top:7%;right:2%}
.hero-chip-2{top:40%;right:-3%}
.hero-chip-3{bottom:21%;left:0}
.hero-art .chito{position:absolute;right:0;bottom:-2%;width:38%;height:auto;filter:drop-shadow(0 18px 18px rgba(58,45,196,.25))}
.hero-art .miga{position:absolute;left:2%;bottom:-3%;width:18%;height:auto;filter:drop-shadow(0 12px 12px rgba(217,97,10,.25))}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero-art .chito{animation:bob 5.5s ease-in-out infinite}
.hero-art .miga{animation:bob 4.6s ease-in-out -1.8s infinite}
.hero-chip-1{animation:bob 6s ease-in-out -1s infinite}
.hero-chip-2{animation:bob 5s ease-in-out -3s infinite}

/* How it works */
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none;counter-reset:how}
.how-grid li{position:relative;margin:0;padding:32px 30px 34px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-1)}
.how-num{display:grid;place-items:center;width:46px;height:46px;margin-bottom:20px;border-radius:14px;background:var(--violet);color:#fff;font:600 22px/1 var(--display);box-shadow:0 8px 18px -8px rgba(91,75,255,.7)}
.how-grid li:nth-child(2) .how-num{background:#0E9F85;box-shadow:0 8px 18px -8px rgba(14,159,133,.7)}
.how-grid li:nth-child(3) .how-num{background:var(--orange);box-shadow:0 8px 18px -8px rgba(255,122,26,.7)}
.how-grid h3{margin:0 0 10px;color:var(--ink);font:700 21px/1.3 var(--body)}
.how-grid p{margin:0;color:var(--muted);font-size:16px;line-height:1.65}

/* The sampler (its animations are carried over; this is its frame) */
.home-mechanism{margin:0;padding:96px 0;border:0;background:linear-gradient(180deg,var(--violet-tint),#fff 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.home .home-mechanism .section-heading{display:block;max-width:720px;margin:0 0 40px}
.home .section-heading h2{margin:14px 0 0;font:500 clamp(32px,3.6vw,46px)/1.12 var(--display);letter-spacing:-.02em}
.home .section-heading p{margin:16px 0 0;color:var(--muted);font:400 18px/1.65 var(--body)}
.sample-showcase{overflow:hidden;border:1px solid var(--line);border-radius:26px;background:#fff;box-shadow:var(--shadow-3)}
.sample-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px;border-bottom:1px solid var(--line);background:var(--violet-tint)}
.sample-tabs button{min-height:52px;padding:10px 14px;border-radius:14px;color:var(--muted);font:650 15px/1.3 var(--body)}
.sample-tabs button span{color:var(--violet);font:700 12px/1 var(--body);letter-spacing:.04em}
.sample-tabs button:hover{color:var(--ink);background:rgba(255,255,255,.7)}
.sample-tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-2)}
.sample-stage{background:#fff}
.sample-panel-grid{gap:40px;padding:40px}
.sample-problem .sample-kicker{color:var(--violet-dd);font:700 12px/1.4 var(--body);letter-spacing:.1em}
.sample-problem h3{margin:14px 0 0;color:var(--ink);font:500 clamp(26px,2.8vw,34px)/1.18 var(--display);letter-spacing:-.015em}
.sample-given{gap:10px;margin-top:22px}
.sample-given code{padding:8px 11px;border-radius:9px;border-color:var(--violet-line);background:var(--violet-tint);color:var(--ink);font:600 13.5px/1.2 var(--mono)}
.sample-given span{color:var(--muted);font:600 13px/1.4 var(--body)}
.sample-answer>span{color:var(--muted);font:700 11.5px/1.4 var(--body);letter-spacing:.1em}
.sample-answer strong{color:var(--violet-dd);font:600 22px/1.25 var(--display)}
.sample-answer p{color:var(--muted);font:400 15.5px/1.65 var(--body)}
.window-demo,.payment-demo,.aws-demo{border-radius:18px;border-color:var(--line);background:var(--violet-tint)}
.visual-title span{color:var(--ink);font:700 11.5px/1.35 var(--body);letter-spacing:.09em}
.visual-title small{color:var(--muted);font:500 12px/1.35 var(--body)}
.window-story strong{font-size:13px}.window-story b{font-size:11px}
.sample-panel-footer{padding:20px 40px;border-top:1px solid var(--line);background:var(--violet-tint)}
.sample-panel-footer a,.sample-panel-footer button{color:var(--violet-dd);font:700 15px/1.5 var(--body)}
.aws-zones .healthy{border-color:#BDE8DB;background:#EEFAF6}
.aws-zones .healthy header span{background:#CFF1E7;color:#0A7D68}
.aws-zones .healthy div{background:#DDF5EF;color:#0A7D68}

/* What's inside */
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.feat{--tile:var(--violet-soft);--tile-ink:var(--violet-dd);position:relative;padding:30px 28px 32px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-1);transition:border-color .18s,box-shadow .18s,transform .18s}
.feat:hover{border-color:var(--violet-line);box-shadow:var(--shadow-2);transform:translateY(-3px)}
.feat:nth-child(2){--tile:#DDF5EF;--tile-ink:#0A7D68}
.feat:nth-child(3){--tile:#FFEBDA;--tile-ink:#B5520A}
.feat:nth-child(4){--tile:#FFE5EE;--tile-ink:#B8285F}
.feat:nth-child(5){--tile:#E3EDFF;--tile-ink:#2159C7}
.feat:nth-child(6){--tile:#F0E7FF;--tile-ink:#7A3FD0}
.feat .tile{display:grid;place-items:center;width:52px;height:52px;margin-bottom:22px;border-radius:15px;background:var(--tile);color:var(--tile-ink)}
.feat h3{margin:0 0 10px;color:var(--ink);font:700 20px/1.3 var(--body)}
.feat p{margin:0;color:var(--muted);font-size:16px;line-height:1.65}

/* Meet Chito and Miga */
.home-meet{position:relative;overflow:hidden;padding:96px 0;background:var(--ink);color:#E6E2FF}
.home-meet::before{content:"";position:absolute;inset:-20% -10% auto auto;width:560px;height:560px;border-radius:50%;background:radial-gradient(closest-side,rgba(122,107,255,.38),rgba(122,107,255,0));pointer-events:none}
.meet-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.home-meet .eyebrow{color:#FFB37A}
.home-meet h2{margin:16px 0 0;color:#fff;font:500 clamp(32px,3.6vw,46px)/1.12 var(--display);letter-spacing:-.02em;max-width:16ch}
.home-meet p{max-width:32em;margin:20px 0 0;color:#CFCAF2;font-size:18px;line-height:1.7}
.home-meet p strong{color:#fff}
.cast{display:flex;align-items:flex-end;justify-content:center;gap:clamp(24px,5vw,56px);padding:44px 32px 36px;border:1px solid rgba(255,255,255,.12);border-radius:30px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03))}
.cast figure{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0;text-align:center}
.cast .chito{width:min(100%,240px);height:auto}
.cast .miga{width:min(100%,128px);height:auto}
.cast figcaption strong{display:block;color:#fff;font:600 28px/1.1 var(--display)}
.cast figcaption span{display:block;margin-top:4px;color:#C9C4EE;font-size:15px;line-height:1.45}

/* The path */
.journey-section{padding:96px 0 40px}
.home .journey-section>h2{display:none}
.journey-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.journey-card{grid-column:span 2;display:flex;flex-direction:column;gap:18px;min-height:0;padding:28px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow-1);transition:border-color .18s,box-shadow .18s,transform .18s}
.journey-card:nth-child(n+4){grid-column:span 3}
.journey-card:hover{border-color:var(--pt);box-shadow:var(--shadow-2);transform:translateY(-3px)}
.journey-card:nth-child(1){--pt:#5B4BFF}.journey-card:nth-child(2){--pt:#0E9F85}.journey-card:nth-child(3){--pt:#E8650A}.journey-card:nth-child(4){--pt:#D83A74}.journey-card:nth-child(5){--pt:#2F6FDE}
.journey-card:first-child{grid-column:span 2;min-height:0}
.journey-number{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--pt);color:#fff;font:600 24px/1 var(--display);box-shadow:0 10px 20px -10px var(--pt)}
.journey-card h3{margin:0 0 8px;color:var(--ink);font:700 20px/1.3 var(--body)}
.journey-card h3 span{margin-left:4px;color:var(--pt);font-size:16px}
.journey-card p{margin:0 0 16px;color:var(--muted);font-size:16px;line-height:1.6}
.journey-meta{display:inline-block;padding:5px 11px;border-radius:999px;background:var(--violet-tint);color:var(--muted);font:650 12.5px/1.3 var(--body)}

/* Optional paths */
.optional-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:0 0 96px}
.optional-paths>a{position:relative;display:flex;flex-direction:column;min-height:170px;padding:28px;border:1px solid var(--violet-line);border-radius:22px;background:linear-gradient(180deg,var(--violet-tint),#fff);transition:border-color .18s,box-shadow .18s,transform .18s}
.optional-paths>a:hover{border-color:var(--violet);box-shadow:var(--shadow-2);transform:translateY(-3px)}
.optional-paths>a span{color:var(--violet-dd);font:700 12px/1.3 var(--body);letter-spacing:.1em}
.optional-paths>a strong{margin-top:14px;color:var(--ink);font:700 20px/1.35 var(--body)}
.optional-paths>a small{margin-top:8px;color:var(--muted);font:400 15.5px/1.6 var(--body)}
.optional-paths .lock-card{display:block;min-height:170px;border:1px solid #F0C9CE;border-radius:22px;background:linear-gradient(180deg,#FFF6F7,#fff)}

/* The finish */
.home-finish{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px;align-items:center;margin:0 0 96px;padding:64px 56px;border-radius:32px;background:linear-gradient(135deg,#1D1838 0,#2B2160 60%,#3A2DC4 130%);color:#fff}
.home-finish::after{content:"";position:absolute;right:-34px;top:-34px;width:120px;height:120px;border-radius:30px;background:var(--orange);transform:rotate(14deg);pointer-events:none}
.home-finish>*{position:relative;z-index:1}
.home-finish .section-label{color:#FFB37A}
.home-finish h2{margin:16px 0 0;color:#fff;font:500 clamp(32px,3.6vw,46px)/1.12 var(--display);letter-spacing:-.02em;max-width:17ch}
.home-finish .finish-side{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.home-finish .primary-button{background:#fff;border-color:#fff;color:var(--ink);box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.home-finish .primary-button:hover{background:var(--violet-soft);border-color:var(--violet-soft)}
.home-finish .browse-button{background:transparent;border-color:rgba(255,255,255,.4);color:#fff;box-shadow:none}
.home-finish .browse-button:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.home-finish p{margin:0;color:#CFCAF2;font:500 14.5px/1.5 var(--body)}
.finish-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.finish-text>p{margin-top:16px}
.finish-art{display:flex;justify-content:center}
.finish-art .chito{width:min(100%,230px);height:auto;filter:drop-shadow(0 18px 24px rgba(0,0,0,.35))}
.home .page-footer{max-width:1240px;margin:0 auto;padding:28px 32px 36px}
.home-footer{border-top:1px solid var(--line);background:var(--violet-tint)}

/* 10 · Responsive ----------------------------------------------------- */
@media(min-width:1600px){:root{--sidebar:328px}.sidebar{padding-left:20px;padding-right:20px}main{padding-top:52px}}
@media(max-width:1200px){
  :root{--sidebar:280px}
  main{padding:36px 40px 24px}
  .reading-bar{padding:0 32px}
  .has-sequence #saved-progress{display:none}
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-chip-3{display:none}
  .hero-card-b{left:8%;width:76%}
  .mini-flow{gap:5px}
  .mini-flow span{padding:4px 7px;font-size:12px}
}
@media(max-width:1000px){
  :root{--sidebar:260px}
  main{padding:30px 28px 20px}
  .reading-bar{padding:0 24px}
  .reading-controls{gap:10px}
  #saved-progress{display:none}
  .site-nav-links{display:none}
  .hero-in{grid-template-columns:1fr;gap:56px;padding:56px 32px 72px}
  .home-hero h1{max-width:16ch}
  .hero-art{justify-self:center;max-width:500px}
  .how-grid,.meet-in,.home-finish{grid-template-columns:1fr}
  .meet-in{gap:44px}
  .home-finish{padding:48px 36px}
  .finish-art{display:none}
  .journey-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journey-card,.journey-card:nth-child(n+4),.journey-card:first-child{grid-column:auto}
  .optional-paths{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sample-panel-grid{grid-template-columns:1fr;gap:28px;padding:30px}
  .sample-answer{margin-top:8px;padding-top:0}
  .sample-panel-footer{padding:18px 30px}
}
@media(max-width:760px){
  html{scroll-padding-top:80px}
  :root{--sidebar:300px;--bar:52px}
  body{font-size:16px}
  .sidebar{z-index:44;width:min(90vw,360px);padding-top:18px;transform:translateX(-101%);box-shadow:none;transition:transform .26s var(--panel-ease),box-shadow .26s}
  .contents-open .sidebar{transform:none;box-shadow:24px 0 60px -12px rgba(29,24,56,.3)}
  .mobile-close{position:absolute;top:12px;right:10px;z-index:2;display:grid}
  .reading-shell{margin:0}
  .mobile-bar{position:sticky;top:0;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px;padding:0 14px 0 10px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
  .mobile-bar button{display:flex;align-items:center;gap:8px;min-height:40px;padding:0 13px;border:0;border-radius:12px;background:var(--violet-soft);color:var(--violet-dd);font:650 14.5px/1 var(--body)}
  .mobile-bar button span{font-size:14.5px}
  .reading-bar{position:static;height:56px;padding:0 14px;gap:8px;background:var(--paper)}
  .has-sequence>span{display:none}
  .has-sequence .reading-controls{width:100%;justify-content:space-between}
  .sticky-sequence{flex:1;gap:8px}
  .sticky-sequence>a,.sticky-sequence>button,.sticky-sequence>.sticky-disabled{flex:1;min-height:40px}
  #motion-toggle{padding:0 12px;font-size:13px}
  .read-progress{top:55px}
  main{padding:26px 20px 20px}
  .reader-meta{margin-bottom:20px;font-size:11.5px;letter-spacing:.06em}
  .reader-meta span:last-child{max-width:130px;text-align:right}
  .lesson .lesson-body h1:not(:is(.db,.cf) *){font-size:34px;line-height:1.1;margin-bottom:22px}
  .lesson .lesson-body h2:not(:is(.db,.cf) *){font-size:26px;margin-top:44px}
  .lesson .lesson-body h3:not(:is(.db,.cf) *){font-size:18.5px}
  .lesson .lesson-body blockquote:not(:is(.db,.cf) *),.lesson-body .task-brief{padding:20px 20px 20px 52px;border-radius:16px}
  .lesson .lesson-body blockquote:not(:is(.db,.cf) *)::before,.lesson-body .task-brief::before{left:20px;top:25px}
  .lesson .lesson-body details:not(:is(.db,.cf) *){padding:0 16px}
  .lesson .lesson-body details>summary:not(:is(.db,.cf) *){font-size:14.5px}
  .lesson .lesson-body pre:not(:is(.db,.cf) *){padding:18px 16px;font-size:13px}
  .lesson .lesson-body .code-actions:not(:is(.db,.cf) *){min-height:48px;padding-left:14px}
  .code-actions .copy-code{min-height:40px}
  .lesson .lesson-body td:not(:is(.db,.cf) *){padding:12px;font-size:13.5px}
  .lesson .lesson-body th:not(:is(.db,.cf) *){padding:12px;font-size:11.5px}
  .mer,.figwrap{padding:10px}
  .figwrap{overflow:auto}
  .figwrap img{min-width:550px}
  .copy-code{opacity:1}
  .step-navigation{grid-template-columns:1fr;gap:12px;margin-top:44px;padding-top:24px}
  .next-step{align-items:flex-start;text-align:left}
  .chapter-lede{font-size:18px!important}
  .chapter-contract{padding:20px}
  .lesson .lesson-body .chapter-outline li:not(:is(.db,.cf) *){gap:14px;padding:16px 18px}
  .lesson .lesson-body .chapter-outline .outline-index:not(:is(.db,.cf) *){min-width:54px}
  .page-footer{flex-direction:column;font-size:12px}
  /* Home */
  .home .read-progress{top:60px}
  .site-nav-in{height:60px;gap:12px;padding:0 16px}
  .site-nav .cachito{font-size:27px}
  .site-nav .btn-start{display:none}
  .wrap,.hero-in{padding-left:20px;padding-right:20px}
  .hero-in{gap:44px;padding-top:40px;padding-bottom:56px}
  .home-hero h1{font-size:clamp(38px,11.4vw,50px);max-width:none}
  .hero-lede{font-size:17.5px}
  .hero-actions .btn,.hero-actions .primary-button{flex:1 1 100%}
  .hero-proof{gap:16px;margin-top:32px}
  .hero-art{max-width:420px;aspect-ratio:1/1.12}
  .hero-card{padding:14px 15px}
  .hero-card strong{font-size:15px}
  .hero-card-a{top:13%;width:68%}
  .hero-card-b{top:41%;left:6%;width:84%}
  .hero-chip{font-size:12.5px;padding:8px 12px}
  .hero-chip-2,.hero-chip-3{display:none}
  .hero-card-b p:last-child{display:none}
  .mini-flow{gap:4px}
  .mini-flow span{padding:4px 7px;font-size:12px}
  .mini-flow b{font-size:12px}
  .sec,.home-mechanism,.home-meet{padding:64px 0}
  .sec-head{margin-bottom:34px}
  .feat-grid,.journey-grid,.optional-paths{grid-template-columns:1fr}
  .home .journey-section{padding:64px 0 24px}
  .optional-paths{padding-bottom:64px}
  .how-grid li,.feat,.journey-card{padding:22px}
  .how-grid{gap:14px}
  .how-grid li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:2px 16px}
  .how-grid .how-num{grid-row:1/span 2;margin:0}
  .how-grid h3,.how-grid p{grid-column:2}
  .how-grid h3{margin:2px 0 4px;font-size:19px}
  .feat-grid{gap:14px}
  .feat{display:grid;grid-template-columns:48px minmax(0,1fr);gap:2px 16px}
  .feat .tile{grid-row:1/span 2;width:48px;height:48px;margin:0}
  .feat h3,.feat p{grid-column:2}
  .feat h3{margin:2px 0 4px;font-size:18.5px}
  .feat p,.how-grid p{font-size:15.5px}
  .sample-tabs{gap:4px;padding:6px}
  .sample-tabs button{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:56px;padding:8px 11px;font-size:13px}
  .sample-panel-grid{padding:22px 18px;gap:22px}
  .sample-problem h3{font-size:25px}
  .sample-panel-footer{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px}
  .cast{padding:30px 18px 26px;gap:22px}
  .cast .chito{width:min(100%,150px)}
  .cast .miga{width:min(100%,86px)}
  .cast figcaption strong{font-size:23px}
  .cast figcaption span{font-size:14px}
  .home-finish{margin-bottom:56px;padding:40px 24px;border-radius:26px}
  .home-finish::after{width:140px;height:140px;right:-40px;top:-40px}
  .finish-actions .btn,.finish-actions .primary-button{flex:1 1 100%}
}
@media(max-width:440px){
  .reading-bar{height:auto;min-height:56px;padding:8px 14px}
  .has-sequence .reading-controls{flex-wrap:wrap;gap:8px}
  .sticky-sequence{flex:1 1 100%;min-width:0}
  #motion-toggle{margin-left:auto}
  .sticky-sequence>a,.sticky-sequence>button,.sticky-sequence>.sticky-disabled{padding:0 10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* 11 · Print ---------------------------------------------------------- */
@media print{
  .sidebar,.reading-bar,.read-progress,.mobile-bar,.site-nav,.step-navigation,.copy-code,.visual-toolbar,.panel-toggle,.home-meet,.hero-art{display:none!important}
  .reading-shell{margin:0}
  main{max-width:none;padding:0}
  .lesson .lesson-body details:not(:is(.db,.cf) *){display:block}
  .mer,.figwrap{overflow:visible;break-inside:avoid}
  .mer img,.figwrap img{max-width:100%;min-width:0}
  .lesson .lesson-body pre:not(:is(.db,.cf) *){max-height:none;white-space:pre-wrap;background:#fff;color:#111;border:1px solid #bbb}
  .lesson .lesson-body pre code:not(:is(.db,.cf) *){white-space:pre-wrap}
  .lesson .lesson-body .code-example:not(:is(.db,.cf) *){border-color:#bbb;background:#fff}
  .lesson .lesson-body .code-actions:not(:is(.db,.cf) *){display:none}
  .example-card,.task-brief{break-inside:avoid;box-shadow:none}
}