@import url("https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,400..700;1,7..72,400..700&display=swap");
/* =====================================================================================
   LayoffReady — Kindle edition.
   A presentation-only layer appended after the original stylesheet. It changes look and
   layout (paper, ink, type, spacing) and never touches content or behaviour.
   ===================================================================================== */

/* ---------- 1. Paper & ink tokens ---------- */
html:root:not([data-theme=dark]),html:root[data-theme=light]{
  --bg:#f6f1e7;--bg2:#f1ebdf;--surface:#f6f1e7;--surface2:#efe8db;--surface3:#e6dece;
  --text:#141210;--text2:#26231f;--muted:#5e584e;--border:#d9d0bf;--border2:#c4baa7;
  --ink:#141210;--paper:#f6f1e7;--hair:#d9d0bf;
}
html:root[data-theme=dark]{
  --bg:#121110;--bg2:#161514;--surface:#121110;--surface2:#1b1a18;--surface3:#252321;
  --text:#ece6da;--text2:#d8d1c3;--muted:#9c958a;--border:#2c2a27;--border2:#3b3834;
  --ink:#ece6da;--paper:#121110;--hair:#2c2a27;
}
html:root{
  --brand:var(--ink);--brand2:var(--ink);--easy:var(--ink);--medium:var(--ink);--hard:var(--ink);
  --shadow-sm:none;--shadow:none;--shadow-lg:0 1px 0 var(--hair),0 8px 30px -12px rgba(0,0,0,.18);
  --r:6px;--r-sm:4px;
  --font:"Literata","Bookerly",Georgia,"Times New Roman",serif;
  --display:"Literata","Bookerly",Georgia,serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* every accent (per-track colours, sheet colours) becomes ink */
html:root *{--track:var(--ink)!important;--c:var(--ink)!important}

/* ---------- 2. Base typography: a book page ---------- */
body{font:400 18.5px/1.78 var(--font);background:var(--bg);color:var(--text);font-optical-sizing:auto}
h1,h2,h3,h4{font-family:var(--display);font-weight:600!important;letter-spacing:-.01em!important;color:var(--text)}
p,li,td,.prose,.lead,.lede,.idea,.verdict,.rc-sum,.mi-text p,.rr-sum{color:var(--text2)!important}
.lead,.lede{font-size:19px!important;line-height:1.7}
.muted,.tag,.tag.subtle,.crumbs,.crumbs a,.cs-guides,.rsec-blurb,.tcard p,.th-text .lead,small{color:var(--muted)!important}
a{color:var(--text)!important;text-decoration:underline;text-decoration-color:var(--border2);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--text)}
::selection{background:color-mix(in srgb,var(--ink) 18%,transparent)}
:focus-visible{outline:2px solid var(--ink)!important;outline-offset:2px}
*,*::before,*::after{box-shadow:none!important;text-shadow:none!important}
.grad{background:none!important;-webkit-text-fill-color:currentColor;color:var(--text)!important;font-style:italic}
hr{border:0;border-top:1px solid var(--hair)}

/* UI chrome uses a quiet sans, content uses the serif — like a reader's menus vs the page */
.topbar,.mn-link,.mn-sub-link,.btn,.chip,.chips,.search-btn,.icon-btn,.menu,.toolbar,.sidebar,.toc,.crumbs,.meta,.tag,
.diff,.kicker,.eyebrow,.palette,.modal,.toast,.sf-links,.sf-copy,.prevnext,.ide,.code-bar,.sh-tabs,.reads-chips,
.th-stats,.hero-stats,.rh-stats,.tmeta,.tpct,.shc-meta,.shc-pct,.rr-src,.rr-time,.rr-lvl,.rr-go,.rsec-count,
.ri-c,.sh-count,.cx,.lvl,.tab,.doc-actions,.ad-label,label,input,select{font-family:var(--ui)}
.kicker,.eyebrow{font:600 11.5px var(--ui)!important;letter-spacing:.16em!important;color:var(--muted)!important}
code,pre,kbd{font-family:var(--mono)}
code{background:transparent!important;border:1px solid var(--hair)!important;color:var(--text)!important;border-radius:3px!important}
kbd{background:transparent!important;border-color:var(--border2)!important;color:var(--muted)!important;border-radius:3px!important}

/* ---------- 3. Remove decoration ---------- */
.hero-bg,.tcard::before,.track-hero::before,.mission::before,.read-progress{display:none!important}
.tcard,.track-hero,.btn,.chips,.chip,.icon-btn,.search-btn,.sh-card,.rcard,.resume,.callout,.code,.panel,.menu,.mn-menu,
.mn-sub-in,.ts-menu,.palette-box,.modal-box,.toast,.rev-list a,.sec-card,.filter-search,.pi,.glance,.mission,.mi-steps li,
.ex,.notes,.prevnext a,.rtable,.reads-index a,.sh-chip,.sh-tabs a,.table-wrap,.ide,.ide-settings,.topt,.tgroup,.doc-head .act,
.cs-spot,.ad,.sb-sec summary,.sb-sec li a,.mn-link,.mn-sub-link,.tab,.ack-lic,.rr-star,.rr-cat,.sh-tag,.shc-badge{border-radius:var(--r)!important}
.tbadge,.th-badge,.ts-badge,.pal-badge,.cs-n,.rsec-n,.ms-n,.rc-av,.sh-n,.n,.sn{
  background:transparent!important;color:var(--text)!important;border:1px solid var(--text)!important;border-radius:4px!important;
  font-family:var(--ui)!important;font-weight:600!important}
.mn-badge,.rr-star,.rc-feat,.pill,.soon,.cov,.shc-badge,.sh-tag,.ack-lic,.rr-cat{
  background:transparent!important;color:var(--muted)!important;border:1px solid var(--border2)!important;font-family:var(--ui)!important}
.mn-badge{font-size:8.5px!important;padding:0 4px!important;letter-spacing:.08em}

/* difficulty: words in ink, encoded by a hollow / half / filled marker instead of colour */
.diff{background:transparent!important;color:var(--text)!important;border:1px solid var(--border2);font-weight:600!important;font-family:var(--ui)}
.diff::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;border:1.4px solid var(--ink)}
.diff.Medium::before{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)}
.diff.Hard::before{background:var(--ink)}
.dot{background:transparent!important;border:1.4px solid var(--ink)}
.dot.Medium{background:linear-gradient(90deg,var(--ink) 50%,transparent 50%)!important}
.dot.Hard{background:var(--ink)!important}
.lvl,.rr-lvl span,.lvl-beginner,.lvl-intermediate,.lvl-advanced{background:transparent!important;color:var(--text)!important;border:1px solid var(--border2)!important}
.th-stats .Easy :is(b,.bb),.th-stats .Medium :is(b,.bb),.th-stats .Hard :is(b,.bb),.ok{color:var(--text)!important}

/* ---------- 4. Top bar: a reader's menu line ---------- */
.site-header{background:var(--bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:1px solid var(--hair)}
.brand{font:600 18px var(--display)!important}
.brand-name{letter-spacing:.01em}
.logo{width:26px!important;height:26px!important;border-radius:5px!important;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M15 34l10 10 23-25' stroke='%23f6f1e7' stroke-width='6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M37 18h12v12' stroke='%23f6f1e7' stroke-width='6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat,#141210!important}
[data-theme=dark] .logo{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M15 34l10 10 23-25' stroke='%23121110' stroke-width='6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M37 18h12v12' stroke='%23121110' stroke-width='6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat,#ece6da!important}
.mn-link{background:transparent!important;color:var(--muted)!important;font-weight:500!important;font-size:14.5px!important;text-decoration:none!important}
.mn-link:hover{color:var(--text)!important}
.mn-link.active{color:var(--text)!important;font-weight:600!important}
.mn-link.active::after{background:var(--ink)!important;height:1.5px!important;border-radius:0!important;bottom:-15px!important}
.mn-sub-in,.menu,.mn-menu,.ts-menu{background:var(--bg)!important;border:1px solid var(--border2)!important}
.mn-sub-link{text-decoration:none!important}
.mn-sub-link:hover,.menu a:hover,.menu button:hover{background:var(--surface2)!important}
.mn-sub-link.active{background:var(--surface2)!important}
.mn-sub-link.active :is(b,.bb){color:var(--text)!important}
.search-btn,.icon-btn{background:transparent!important;border-color:var(--hair)!important;color:var(--muted)!important}
.search-btn:hover,.icon-btn:hover{border-color:var(--text)!important;color:var(--text)!important}
.focus-mode #focusBtn{background:var(--ink)!important;color:var(--paper)!important}
.theme-switch .ts-track{background:transparent!important;border:1px solid var(--border2)!important}
.ts-knob{background:var(--ink)!important}
[data-theme=dark] .ts-moon{color:var(--paper)!important}
a.brand,.mn-link,.sb-sec a,.toc a,.prevnext a,.btn,.tcard,.sh-card,.rcard,.topt,.rev-list a,.reads-index a,.sh-tabs a,.mn-sub-link,
.pal-badge,.palette a,.menu a,.sf-links a,.crumbs a,.chip,.rr-go a,.gl-read,.gl-solve,.sh-link,.pi-link,.ide a,.ts-menu a,
.sb-head a,.vs-opt,.sec-card a,.ptag,.pchip,.rr-title,.ri-t{text-decoration:none!important}
.sec-card li a:hover .t,.rr-title:hover,.vs-opt:hover :is(b,.bb){text-decoration:underline!important;text-underline-offset:3px}

/* ---------- 5. Buttons & chips: outlined ink ---------- */
.btn{background:transparent!important;border:1px solid var(--text)!important;color:var(--text)!important;height:42px;font-weight:600;transform:none!important}
.btn:hover{background:var(--surface2)!important}
.btn.primary{background:var(--ink)!important;color:var(--paper)!important}
.btn.primary:hover{opacity:.88}
.chips{background:transparent!important;border-color:var(--hair)!important}
.chip{color:var(--muted)!important;background:transparent!important}
.chip.on{color:var(--text)!important;background:var(--surface2)!important;font-weight:700}
.chip.ghost{border-color:var(--hair)!important}
.filter-search{background:transparent!important;border-color:var(--hair)!important}
.toolbar{background:var(--bg)!important}

/* ---------- 6. Pages read like chapters ---------- */
.main{padding-top:48px}
.hero{padding:88px 0 48px!important;max-width:880px!important}
.hero h1{font-size:clamp(36px,5.4vw,60px)!important;line-height:1.12;font-weight:600!important}
.hero h1 .grad{display:block;font-weight:500}
.hero .lead{max-width:640px;font-size:20px!important}
.hero-stats :is(b,.bb),.th-stats :is(b,.bb),.rh-stats :is(b,.bb),.ring :is(b,.bb){font-family:var(--display)!important;font-weight:600!important}
.cat{max-width:1100px}
.cat .eyebrow,.cat-head .eyebrow{border-bottom:1px solid var(--hair);padding-bottom:10px;margin-bottom:18px}
.tcard,.sh-card,.rcard,.topt,.tgroup,.resume,.sec-card,.rev-list a,.reads-index a,.sh-chip,.mission,.track-hero,.pi,.glance,.callout,
.ex,.notes,.prevnext a,.mi-steps li,.cs-spot{background:transparent!important;border:1px solid var(--hair)!important;transform:none!important}
.tcard:hover,.sh-card:hover,.rcard:hover,.topt:hover,.rev-list a:hover,.reads-index a:hover,.prevnext a:hover{border-color:var(--text)!important}
.sh-card::before{display:none!important}
.tprog,.sb-prog,.sh-bar,.shc-prog{background:var(--surface3)!important;height:3px!important;border-radius:0!important}
.tprog i,.sb-prog i,.sh-bar i,.shc-prog i{background:var(--ink)!important}
.ring .fg{stroke:var(--ink)!important}.ring .bg{stroke:var(--surface3)!important}
.ring circle{stroke-width:6}

/* reading column for long-form pages */
.doc .prose,.static .prose,.article .prose,.sheet .prose{max-width:70ch}
.prose{font-size:19px;line-height:1.8}
.prose h2{font-size:28px;margin-top:2.2em!important;padding-top:.6em;border-top:1px solid var(--hair)}
.prose h3{font-size:22px;margin-top:1.8em!important}
.prose p,.prose li{hyphens:auto;-webkit-hyphens:auto}
.prose blockquote{border-left:2px solid var(--ink);margin-left:0;padding-left:1.2em;font-style:italic;color:var(--text2)}
.doc-head h1,.th-text h1,.static h1,.reads-hero h1,.hub-head h1{font-weight:600!important;line-height:1.15}
.callout{border-left:3px solid var(--ink)!important;border-top:0!important;border-right:0!important;border-bottom:0!important;border-radius:0!important;padding-left:18px!important}
.callout :is(b,.bb),.callout strong{color:var(--text)!important}

/* tables: book-style rules, no fills */
table{border-collapse:collapse}
.table-wrap,.rtable{border:0!important;background:transparent!important}
th{background:transparent!important;color:var(--muted)!important;font-family:var(--ui);font-weight:600;border-bottom:1.5px solid var(--text)!important}
td{border-bottom:1px solid var(--hair)!important;background:transparent!important}
tr:hover td,.rtable tbody tr:hover{background:transparent!important}
.rr-title{color:var(--text)!important}

/* code: a quiet monochrome listing */
.code{background:var(--surface2)!important;border:1px solid var(--hair)!important}
.code-bar{background:transparent!important;border-bottom:1px solid var(--hair)!important;color:var(--muted)!important}
.hl,.code pre{color:var(--text)!important;background:transparent!important}
.hl .c,.hl .c1,.hl .cm,.hl .cs,.hl .ch{color:var(--muted)!important}
.code-acts button,.to-ide,.copy{background:transparent!important;border:1px solid var(--border2)!important;color:var(--text)!important;border-radius:4px!important}

/* approach tabs on problem pages */
.tabs{border-bottom:1px solid var(--hair)}
.tab{background:transparent!important;border:1px solid transparent!important;color:var(--muted)!important}
.tab[aria-selected=true],.tab.on{color:var(--text)!important;border-color:var(--text)!important}
.tab .n{border-color:currentColor!important}
.panel{background:transparent!important;border:1px solid var(--hair)!important}
.panel-head .lvl,.lvl.brute,.lvl.better,.lvl.optimal{background:transparent!important;color:var(--text)!important}

/* sidebar & table of contents: the book's contents page */
.has-sidebar .sidebar{background:var(--bg)!important;border-right:1px solid var(--hair)!important}
.sb-sec summary,.sb-sec li a{color:var(--muted)!important;background:transparent!important}
.sb-sec summary:hover,.sb-sec li a:hover{color:var(--text)!important}
.sb-sec li a[aria-current=page]{color:var(--text)!important;font-weight:600;background:var(--surface2)!important}
.toc a{color:var(--muted)!important}
.toc a.active{color:var(--text)!important;border-left-color:var(--ink)!important;font-weight:600}

/* palette, modals, editor */
.palette-box,.modal-box{background:var(--bg)!important;border:1px solid var(--border2)!important}
.palette-list a.sel,.palette-list a:hover{background:var(--surface2)!important}
.palette-filters button{background:transparent!important;border:1px solid var(--hair)!important;color:var(--muted)!important}
.palette-filters button.on{color:var(--text)!important;border-color:var(--text)!important}
mark{background:transparent;color:var(--text);font-weight:700;text-decoration:underline}
.ide{border:1px solid var(--hair)!important;background:var(--surface2)!important}
.ide-bar,.ide-tabs,.ide-foot{background:transparent!important;border-color:var(--hair)!important}
.java-dot,.ide-lang[data-lang] .java-dot{background:var(--ink)!important}
.ide-submit{background:var(--ink)!important;color:var(--paper)!important}
.toast{background:var(--ink)!important;color:var(--paper)!important}

/* cheat sheets & reads */
.sh-tabs a{background:transparent!important;border-color:var(--hair)!important;color:var(--muted)!important}
.sh-tabs a.on{color:var(--text)!important;border-color:var(--text)!important}
.sh-tabs a i{background:var(--ink)!important}
.sh-tick span{border-color:var(--border2)!important;background:transparent!important}
.sh-tick input:checked+span{background:var(--ink)!important;border-color:var(--ink)!important}
.sh-tick input:checked+span::after{border-color:var(--paper)!important}
.sh-chip.done{background:var(--surface2)!important;border-color:var(--border2)!important}
.reads-hero .kicker{color:var(--muted)!important}
.rsec-credit{font-style:italic}

/* pattern labels, chips and switches: ink instead of pink */
.pi-badge{background:transparent!important;color:var(--text)!important;border:1px solid var(--text)}
.pi-i :is(b,.bb),.pi-h :is(b,.bb){color:var(--muted)!important}
.pchip{background:transparent!important;color:var(--text)!important;border:1px solid var(--border2)}
.ptag{border-color:var(--hair)!important;color:var(--muted)!important}
.vs-opt{color:var(--text2)!important}
.vs-opt.on{background:var(--surface2)!important;color:var(--text)!important;outline:1px solid var(--text)}
.vswitch,.vs-opts{background:transparent!important;border-color:var(--hair)!important}
.sec-card .sc{background:transparent!important;border:1px solid var(--hair)}
.callout{--c:var(--ink)!important;background:var(--surface2)!important}
.ri-n{color:var(--muted)!important;font-family:var(--ui)!important;font-weight:600}

/* footer */
.site-footer{border-top:1px solid var(--hair)!important}
.sf-links a{color:var(--muted)!important}.sf-links a:hover{color:var(--text)!important}
.sf-social a{border-color:var(--hair)!important}

/* ads keep their space but blend with the page */
.ad .ad-label{color:var(--muted)!important}

/* Kindle-style reading position */
.k-progress{position:fixed;right:18px;bottom:0;z-index:30;padding:5px 12px 7px;font:500 11.5px var(--ui);
  letter-spacing:.04em;color:var(--muted);background:var(--bg);border:1px solid var(--hair);border-bottom:0;border-radius:6px 6px 0 0;pointer-events:none}
.home .k-progress,.track .k-progress{display:none}

/* ---------- 7. Responsive ---------- */
@media (max-width:820px){
  body{font-size:17.5px}
  .prose{font-size:17.5px;line-height:1.75}
  .hero{padding:56px 0 36px!important}
  .hero .lead{font-size:18px!important}
  .prose h2{font-size:24px}
  .k-progress{font-size:11px;padding:5px 10px 7px}
}
@media print{.k-progress{display:none}body{background:#fff;color:#000}}

/* reading mode on the main site: monochrome code tokens (main build ships coloured Pygments styles) */
html .hl span{color:var(--text)!important;background:transparent!important}
html .hl .c,html .hl .c1,html .hl .cm,html .hl .cs,html .hl .ch,html .hl .cp{color:var(--muted)!important;font-style:italic}
html .hl .k,html .hl .kd,html .hl .kt,html .hl .kr,html .hl .kc,html .hl .kn{font-weight:700}
html.reading #readBtn{background:var(--ink)!important;color:var(--paper)!important;border-color:var(--ink)!important}

/* code editor follows the paper colours */
.cm-editor,.cm-editor .cm-scroller,.cm-gutters,.ide-body{background:var(--surface2)!important}.cm-gutters{border-right:1px solid var(--hair)!important;color:var(--muted)!important}.cm-activeLine,.cm-activeLineGutter{background:color-mix(in srgb,var(--ink) 5%,transparent)!important}.cm-cursor{border-left-color:var(--ink)!important}
.ide-submit{padding:4px 12px!important;border-radius:4px!important}


.sf-share a{border-color:var(--hair)!important;color:var(--muted)!important;border-radius:var(--r)!important}

.sh-res{background:transparent!important;border-color:var(--hair)!important;border-radius:var(--r)!important;text-decoration:none!important}.sh-res:hover{border-color:var(--text)!important}.sh-res svg,.sh-res.video svg{color:var(--ink)!important}

.diagram,.dg-expand,.dz-bar,.dz-bar button{background:var(--bg)!important;border-color:var(--hair)!important;border-radius:var(--r)!important}.dz{background:var(--bg)!important}.dg-legend i{border-radius:2px}