/*
  Anthropic-inspired professional visual layer.
  Presentation only: content, order and lesson structure stay untouched.
*/

:root{
  --bg:#f5f5f2;
  --surface:#ebe7de;
  --card:#fffdf8;
  --card-2:#f8f4eb;
  --paper:#f5f5f2;
  --cream:#fff8ea;
  --prompt:#eceae4;
  --note:#fff6b8;
  --border:#d8d0c3;
  --border-strong:#c7bdae;
  --text:#3e1c33;
  --muted:#6f655e;
  --muted-2:#8a8078;
  --accent:#d97757;
  --pumpkin:#c96f3a;
  --anthracite:#2f2d2a;
  --zero:#9b948b;
  --avio:#6f8fa2;
  --purple:#3e1c33;
  --green:#7d9d85;
  --gold:#c99a3d;
  --teal:#7fa9b1;
  --orange:#d97757;
  --danger:#b58a35;
  --lavender:#6e5467;
  --lavender-bg:#f1e8ef;
  --blush:#f7e6df;
}

*{
  letter-spacing:0!important;
  box-sizing:border-box;
}

html{
  background:var(--bg);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  background:
    radial-gradient(circle at 20% 0%,rgba(217,119,87,.08),transparent 30%),
    linear-gradient(180deg,#f8f7f3 0%,#f5f5f2 42%,#efebe3 100%)!important;
  color:var(--text)!important;
  font-family:"Open Sans","Montserrat","Segoe UI",Arial,sans-serif!important;
}

body::selection{
  background:rgba(217,119,87,.26);
  color:var(--text);
}

a{
  color:var(--accent)!important;
  text-underline-offset:3px;
}

h1,h2,h3,h4,.stitle,.section-title,.slide-title,.module-title,.lesson-name,.next-title,
.model-name,.model-3-name,.stat-num,.big-letter{
  color:var(--text)!important;
  letter-spacing:0!important;
  text-wrap:balance;
}

h1,.stitle,.slide-title{
  font-weight:850!important;
}

h2,.section-title{
  font-weight:820!important;
}

p,li,.lesson-desc,.module-desc,.next-desc,.ssub,.hero-sub,.footer-text,
.q-use,.dt-ex,.model-sub,.model-cases,.proj-desc,.flow-step-desc,.cg-ex,.p-when,
.role-output,.ms-text p,.wk-desc,.rm-desc,.wl-text p,.ss-text,.sv-use,.sv-desc{
  color:var(--muted)!important;
}

strong{
  color:var(--text)!important;
}

em{
  color:var(--accent)!important;
  font-style:normal!important;
}

/* Navigation */
nav,.top-bar,.nav-bar{
  background:rgba(245,245,242,.9)!important;
  border-bottom:1px solid var(--border)!important;
  box-shadow:0 8px 24px rgba(62,28,51,.07);
  backdrop-filter:blur(18px);
}

.nav-logo,.breadcrumb,.nav-back a{
  color:var(--text)!important;
}

.nav-logo span{
  color:var(--accent)!important;
}

.nav-links a,.breadcrumb,.nav-counter{
  color:var(--muted)!important;
}

.nav-cta,.lesson-nav a.next,.print-btn,.btn-primary,.tab.active,.btn-restart{
  background:var(--pumpkin)!important;
  color:#fffaf4!important;
  border:1px solid rgba(62,28,51,.08)!important;
  border-radius:8px!important;
  box-shadow:0 10px 22px rgba(201,111,58,.22)!important;
}

.btn-secondary,.lesson-nav a,.nav-btn,.next-link a{
  background:rgba(255,255,255,.62)!important;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  color:var(--text)!important;
}

.btn-primary:hover,.btn-secondary:hover,.nav-cta:hover,.lesson-nav a:hover,.nav-btn:hover,.next-link a:hover{
  transform:none!important;
  border-color:rgba(201,111,58,.55)!important;
  opacity:1!important;
}

/* Page shells */
.container{
  max-width:900px!important;
}

.wrapper{
  max-width:1000px;
  margin:0 auto;
  background:var(--card)!important;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  box-shadow:0 22px 70px rgba(62,28,51,.12);
}

.doc-header{
  border-bottom:1px solid var(--border)!important;
}

/* Cards and panels */
.promise-card,.module-card,.method-card,.lesson-intro,.exercise,.takeaway,.analogy,
.trace-preview,.projects-visual .proj-card,.proj-card,.model-card,.next-lesson,
.example,.insight,.template-box,.template,.template-body,.template-header,
.tool-card,.pattern-card,.server-card,.combo-card,.business-models .bm-card,.bm-card,
.mc,.proposition,.rm-week,.req-card,.step,.t-item,.ht,.recipe,.rule-card,
.comparison,.quick-ref,.definition-box,.comp,.proc-step,.final-box,.principle,
.delegation-box,.wk,.rg,.challenge,.flow-case .fc,.rm,.roi-calc,.comp-card,.wn,.wl,.ss,
.level,.chain-block,.role-card,.meta,.q-card,.dt-item,.diff-card,.capabilities,
.pattern,.canvas,.agent-card,.flow-step,.wt-box,.l-row,.tradeoff,.rule,
.letter-card,.example-section,.ref-item,.how-to,.example-proj,.model,.pos-card,
.completion-box,.email-block,.universal,.install-box,.code-block,.doc-types{
  background:var(--card)!important;
  border-color:var(--border)!important;
  border-radius:8px!important;
  box-shadow:0 12px 32px rgba(62,28,51,.07);
}

.lesson-intro,.takeaway,.insight,.exercise,.analogy,.final-box,.principle,.completion-box{
  background:linear-gradient(180deg,#fffdf8,#f8f4eb)!important;
}

.exercise{
  border-style:solid!important;
  border-color:rgba(201,111,58,.5)!important;
  background:linear-gradient(180deg,#fffaf4,#f8eadf)!important;
}

.exercise-label,.challenge h3{
  color:var(--pumpkin)!important;
}

.analogy{
  border-left:3px solid var(--teal)!important;
}

.module-card,.promise-card,.method-card,.next-lesson{
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.module-card{
  --phase:var(--green);
  position:relative;
}

.module-card::before{
  content:"";
  display:block;
  height:4px;
  background:var(--phase);
  opacity:.78;
}

.module-card.m0,.module-card.m1{
  --phase:var(--green);
}

.module-card.m2{
  --phase:var(--avio);
}

.module-card.m3,.module-card.m4,.module-card.m5{
  --phase:var(--purple);
}

.module-card.m6{
  --phase:var(--gold);
}

.module-card:hover,.promise-card:hover,.method-card:hover,.next-lesson:hover{
  transform:translateY(-1px);
  border-color:rgba(217,119,87,.5)!important;
  box-shadow:0 16px 38px rgba(62,28,51,.1);
}

.promise-card::before,.bm-card::before,.mc::before,.q-card::before,.letter-card::before{
  height:3px!important;
  opacity:.72;
  background:var(--accent)!important;
}

/* Badges, pills and tabs */
.hero-badge,.section-tag,.mod-badge,.doc-badge,.header-badge{
  border-radius:999px!important;
  background:#efe7dc!important;
  border:1px solid var(--border-strong)!important;
  color:var(--text)!important;
}

.lesson-tabs{
  background:#ece7dd!important;
  border-color:var(--border)!important;
  border-radius:8px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

.tab{
  border-radius:7px!important;
  color:var(--muted)!important;
}

.tab.active{
  color:#fffaf4!important;
}

.module-num,.lesson-num,.step-num,.proc-num,.wl-num,.ss-num,.ms-num,.cg-num,.s5num,.rmw-num{
  background:#eee7dc!important;
  color:var(--text)!important;
  border-color:var(--border)!important;
}

.m0 .module-num,.m1 .module-num,
.badge-base,.tr-green,.td-green{
  background:#e8f0e5!important;
  color:#526f59!important;
}

.m2 .module-num,.badge-med,.td-purple,.tr-purple{
  background:#e3edf1!important;
  color:#4f7184!important;
}

.m3 .module-num,.m4 .module-num,.m5 .module-num,
.badge-adv,.td-orange,.td-gold,.tr-orange{
  background:#eee4eb!important;
  color:var(--purple)!important;
}

.m6 .module-num,.badge-master,.tr-gold{
  background:#f4ead1!important;
  color:#8a6420!important;
}

/* Hero */
.hero{
  min-height:auto!important;
  justify-content:flex-start!important;
  overflow:hidden;
  padding:150px 24px 88px!important;
}

.hero-glow{
  display:none!important;
}

.hero h1{
  font-size:68px!important;
  line-height:.98!important;
  letter-spacing:0!important;
}

.hero h1 .line1{
  color:var(--anthracite)!important;
}

.hero h1 .line2,
h1 em,.completion-box h2{
  background:none!important;
  -webkit-text-fill-color:initial!important;
  color:var(--accent)!important;
}

.hero h1 .line2{
  display:flex!important;
  justify-content:center;
  align-items:baseline;
  flex-wrap:wrap;
  column-gap:.22em;
  row-gap:0;
  max-width:100%;
}

.hero h1 .title-zero{
  color:var(--zero)!important;
}

.hero h1 .title-master{
  color:var(--gold)!important;
}

.hero-sub{
  font-size:20px!important;
  line-height:1.65!important;
  color:var(--muted)!important;
}

.hero-stats{
  gap:16px!important;
}

.hero-stats .stat{
  min-width:118px;
  padding:14px 18px;
  background:rgba(255,253,248,.78);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 8px 22px rgba(62,28,51,.06);
}

.stat-num{
  color:var(--text)!important;
}

.promise{
  background:#eee9df!important;
  border-top:1px solid var(--border)!important;
  border-bottom:1px solid var(--border)!important;
}

/* Semantic learning surfaces */
.prompt-box,.template-body,.trace-body,.code-block,.cb-body,.pb-body,.cmd,.step-cmd,
.proj-instructions,.install-box,.universal-body,.ib-body,.proc-prompt,
.example-body,.example-text,.delegation-box,.db-body,pre,code{
  background:var(--prompt)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
  border-radius:8px!important;
}

.example-good,.chain-feed,.combo-result,.output,.ai-output{
  background:var(--cream)!important;
  border-color:#e5d9c5!important;
}

.example-good-label,.check,.diff-easy,.et-follow,.rs-recommended{
  color:var(--green)!important;
}

.example-bad,.comp-col.bad,.lv-1,.ht-pre,.t-problem,.error,.warning,
.example-header.bad,.cmp-bad,.comp-without,.rb-risk,.c-n8n{
  background:#fbf0d4!important;
  border-color:#d7b461!important;
}

.example-bad-label,.bad,.rb-risk,.pf-x,.diff-hard,.t-problem,
.example-header.bad,.comp-col.bad .comp-label,.comp-col.bad .comp-item::before,
.cmp-bad .cmp-label,.comp-without .comp-header h3,.c-n8n .comp-label{
  color:#8c651f!important;
}

.note,.ref-item:has(.rl-e),.takeaway{
  background:#fff9c9!important;
  border-color:#e3ca62!important;
}

.tip,.tip-box,.rule{
  background:linear-gradient(180deg,var(--blush),var(--lavender-bg))!important;
  border-color:#decbd8!important;
}

.tip-text,.tip-box,.note,.rule-text{
  color:var(--text)!important;
}

.lesson-intro,.example-good,.takeaway,.diff-easy,.comp-with,.ht-post{
  border-color:rgba(125,157,133,.45)!important;
}

/* Icons: soft, friendly, rounded */
.icon-mark{
  --icon-a:var(--purple);
  --icon-b:var(--accent);
  --icon-bg:#fffdf8;
  --icon-ring:#d8d0c3;
  border-radius:12px!important;
  background:rgba(255,253,248,.72)!important;
  border:1px solid var(--icon-ring)!important;
  box-shadow:0 6px 14px rgba(62,28,51,.045)!important;
}

.icon-mark::before{
  background:var(--icon-a)!important;
  width:54%!important;
  height:54%!important;
  opacity:.94;
}

.tone-purple{--icon-a:var(--purple)!important;--icon-ring:#cdbdca!important;}
.tone-orange{--icon-a:var(--accent)!important;--icon-ring:#e6c2b2!important;}
.tone-green{--icon-a:var(--green)!important;--icon-ring:#c9d8c6!important;}
.tone-gold{--icon-a:#a97724!important;--icon-ring:#e2cc83!important;}
.tone-teal{--icon-a:#5f9098!important;--icon-ring:#c4d6d9!important;}
.tone-red{--icon-a:#9b7223!important;--icon-ring:#e0c879!important;}
.tone-soft{--icon-a:#756978!important;--icon-ring:#d6cec4!important;}

.brain-visual.icon-mark,.crown.icon-mark{
  border-radius:18px!important;
}

/* Infographics */
body:has(.wrapper){
  width:auto!important;
  min-width:0!important;
  padding:32px!important;
  background:var(--bg)!important;
}

.header{
  background:linear-gradient(180deg,#fffdf8,#f3eee5)!important;
  border-bottom:1px solid var(--border)!important;
}

.header h1,.header p{
  color:var(--text)!important;
}

.main{
  background:#f7f4ee!important;
}

.footer{
  background:#f1ece3!important;
  border-top:1px solid var(--border)!important;
}

.footer-course{
  color:var(--text)!important;
}

/* Tables */
table,.comp-table,.server-table,.cr-table{
  border-color:var(--border)!important;
}

td,th{
  border-color:rgba(62,28,51,.12)!important;
}

th,.section-title,.prompt-label,.use-title,.comp-title,.ref-title{
  color:var(--text)!important;
}

.server-table tr:hover td,.comp-table tr:hover td{
  background:rgba(217,119,87,.05)!important;
}

/* Inline syntax colors stay useful but softer */
.pt,.h-t,.t{color:#b7654a!important;}
.pr,.h-r,.r{color:#5d3852!important;}
.pa,.h-a,.a,.cb-key{color:#557c5d!important;}
.pc,.h-c,.c{color:#527f87!important;}
.pe,.h-e,.e,.cb-val{color:#a97724!important;}
.cb-comment{color:#8f857d!important;}

/* Slides */
.slide{
  background:var(--bg)!important;
}

.slide::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 38%);
}

.slide > *{
  position:relative;
}

.s1,.s2,.s3,.s4,.s5,.s6{
  background:var(--bg)!important;
}

/* PDF/document pages */
.top-bar + .container .doc-header h1,
.doc-header h1{
  font-size:38px!important;
  line-height:1.08!important;
}

.model-cards,.req-grid,.server-grid,.patterns,.business-models{
  gap:14px!important;
}

/* Gentle color roles */
.lv-2,.m-sonnet,.mc-sonnet,.m3-sonnet,.p3,.bm-2,.mc-2{
  border-color:rgba(62,28,51,.26)!important;
}

.lv-3,.m-opus,.mc-opus,.p4,.bm-5,.mc-5{
  border-color:rgba(201,154,61,.42)!important;
}

.m-haiku,.mc-haiku,.p2,.bm-3{
  border-color:rgba(125,157,133,.38)!important;
}

.model-name,.model-3-name,.level-pct,.p-name,.agent-role,.bm-revenue,.mc-revenue{
  color:var(--text)!important;
}

/* Legacy slide/infographic color cleanup */
.header h1 span,.stitle span,.big-question,
[style*="background:linear-gradient"][style*="-webkit-text-fill-color"],
[style*="background: linear-gradient"][style*="-webkit-text-fill-color"]{
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  -webkit-text-fill-color:currentColor!important;
  color:var(--accent)!important;
}

.letter-card,.level,.model,.model-3,.cmp-col,.plan,.comp-card{
  background:var(--card)!important;
  border-color:var(--border)!important;
}

.letter-card::before,.lc-t::before,.lc-e::before{
  background:var(--accent)!important;
}

.lc-r::before,.lc-c::before{
  background:var(--text)!important;
}

.lc-a::before{
  background:var(--green)!important;
}

.lc-t .big-letter,.lc-e .big-letter,.rl-t,.rl-e,.h-t,.h-e,.pt,.pe,.t,.e{
  color:var(--accent)!important;
}

.lc-r .big-letter,.lc-c .big-letter,.rl-r,.rl-c,.h-r,.h-c,.pr,.pc,.r,.c{
  color:var(--text)!important;
}

.lc-a .big-letter,.rl-a,.h-a,.pa,.a{
  color:var(--green)!important;
}

.ref-letter{
  background:#efe7dc!important;
  border:1px solid var(--border)!important;
}

.rl-a{
  background:#e8f0e5!important;
}

.rl-t,.rl-e{
  background:#f7e0d4!important;
}

.m-sonnet::before,.m3-sonnet::before{
  background:var(--accent)!important;
  color:#fffaf4!important;
}

.metric-bar,.workflow-nodes{
  background:var(--prompt)!important;
  border-color:var(--border)!important;
}

.metric-fill,.mf-speed,.mf-quality,.mf-cost{
  background:var(--green)!important;
}

.chain-arrow,.wn-arrow{
  color:var(--accent)!important;
}

.big-quote,.challenge,.principle,.definition-box,.roi-calc,.example-section,.comparison{
  background:var(--card)!important;
  border-color:var(--border)!important;
}

.chain-feed,.fc.result{
  background:var(--cream)!important;
  border-color:#e5d9c5!important;
  color:var(--text)!important;
}

.plan-features li,.model-3-use,.cmp-item,.db-body,.ss-text,.fc-text,
.example-text,.level-body p,.lv-detail p,.chip{
  color:var(--muted)!important;
}

/* Mobile */
@media (max-width:640px){
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }

  body:has(.wrapper){
    padding:14px!important;
  }

  nav,.top-bar,.nav-bar{
    padding:12px 16px!important;
  }

  .lesson-nav,.nav-links,.nav-counter{
    display:none!important;
  }

  .container{
    padding:44px 18px 72px!important;
  }

  .hero{
    width:100%!important;
    max-width:100%!important;
    min-height:auto!important;
    padding:72px 24px 56px!important;
    justify-content:flex-start!important;
  }

  .hero > :not(.hero-glow){
    transform:none!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .hero h1{
    max-width:calc(100vw - 40px);
    font-size:50px!important;
  }

  .hero h1 .line2{
    font-size:40px!important;
    line-height:1.05!important;
    overflow-wrap:normal!important;
  }

  .hero-sub{
    width:100%!important;
    max-width:310px!important;
    font-size:15px!important;
  }

  .btn-primary,.btn-secondary{
    width:100%;
    max-width:280px;
  }

  .hero-stats{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:292px!important;
    width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
    gap:14px!important;
  }

  .hero-stats .stat{
    min-width:0;
    padding:12px 10px!important;
  }

  h1,.stitle,.slide-title{
    font-size:42px!important;
  }

  h2,.section-title{
    font-size:26px!important;
    line-height:1.16!important;
    overflow-wrap:anywhere;
  }

  .lesson-tabs{
    flex-direction:column;
  }

  .module-header,.next-lesson,.rm-week{
    align-items:flex-start!important;
  }

  .module-meta{
    align-items:flex-start!important;
    width:100%;
  }

  .lesson-item{
    align-items:flex-start!important;
  }

  .wrapper{
    max-width:100%;
  }

  .promise,.who,.syllabus,.path,.methodology{
    overflow:hidden;
  }

  .promise-inner,.who-inner,.syllabus-inner,.path-inner,.method-inner{
    max-width:100%!important;
  }

  .promise-grid,.who-grid,.method-grid{
    grid-template-columns:1fr!important;
  }

  .promise-card,.method-card,.timeline-content{
    width:100%!important;
    max-width:100%!important;
  }
}

@media print{
  body{
    background:#fff!important;
    color:#111827!important;
  }

  .top-bar,.nav-bar,nav{
    display:none!important;
  }

  .container{
    max-width:100%!important;
    padding:24px!important;
  }
}