:root{
  color-scheme:light;
  --bg:#E9E3D6;
  --card:#F2EDE2;
  --ink:#141210;
  --muted:#5E5850;
  --line:#B0A692;
  --brand:#6E1B2E;
  --chip:#E0D9CB;
  --accent-ink:#F2EDE2;
  --ok:#28744A;
  --okbg:#DDE9DF;
  --no:#A13F3F;
  --nobg:#F0DCDC;
  --warn:#9A6A12;
  --warnbg:#EFE4C9;
}
html[data-scheme="midnight"]{
  color-scheme:dark;
  --bg:#0A1224;
  --card:#111C33;
  --ink:#E7E2D6;
  --muted:#8792A8;
  --line:#2A3650;
  --brand:#D2A24C;
  --chip:#18253D;
  --accent-ink:#0A1224;
  --ok:#76C79A;
  --okbg:#123429;
  --no:#E58B7B;
  --nobg:#3A2330;
  --warn:#E0B65A;
  --warnbg:#332A16;
}
html[data-scheme="grass"]{
  color-scheme:light;
  --bg:#CBD6C4;
  --card:#D9E1D2;
  --ink:#12211A;
  --muted:#42574A;
  --line:#A3B29B;
  --brand:#B4671B;
  --chip:#C0CEB8;
  --accent-ink:#12211A;
  --ok:#276B45;
  --okbg:#C7D9C9;
  --no:#963F38;
  --nobg:#E6C9C2;
  --warn:#8A6513;
  --warnbg:#D8D3AA;
}

html{background:var(--bg)}
body{
  min-height:100vh;
  padding:0 0 80px !important;
  background:var(--bg) !important;
  color:var(--ink);
  font-family:'Familjen Grotesk',sans-serif !important;
  transition:background .45s,color .45s;
  isolation:isolate;
}
body::before{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0 0 auto;
  height:390px;
  pointer-events:none;
  background:url('/assets/images/project-constellations.svg') center top/cover no-repeat;
  opacity:.17;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 52%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 52%,transparent 100%);
}
html[data-scheme="midnight"] body::before{opacity:.2}
html[data-scheme="grass"] body::before{opacity:.14}

.project-shell-header{
  width:min(100% - 40px,1180px);
  margin:0 auto;
  padding:28px 0 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.project-crumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  color:var(--muted);
  font-family:'Sometype Mono',monospace;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.project-crumbs a{color:inherit;text-decoration:none}
.project-crumbs a:hover{color:var(--brand)}
.project-crumbs .current{color:var(--ink)}
.project-crumbs .sep{opacity:.55}
.project-schemes{
  display:inline-flex;
  flex:none;
  gap:7px;
}
.project-schemes button{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--muted);
}
.project-schemes button:hover{color:var(--brand);border-color:var(--brand)}
.project-schemes button[aria-pressed="true"],
html[data-scheme="midnight"] .project-schemes button[data-s="midnight"],
html[data-scheme="grass"] .project-schemes button[data-s="grass"],
html[data-scheme="paper"] .project-schemes button[data-s="paper"]{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--bg);
}
.project-schemes svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.wrap{position:relative;z-index:1;max-width:820px !important}
.project-intro{
  position:relative;
  left:50%;
  width:min(calc(100vw - 40px),1180px);
  transform:translateX(-50%);
  padding:23px 0 28px;
}
.project-intro h1{
  margin:0;
  font-family:'Fraunces',serif;
  font-size:clamp(48px,7.4vw,82px);
  font-weight:500;
  font-variation-settings:'SOFT' 0,'WONK' 1;
  line-height:.92;
  letter-spacing:-.04em;
}
.project-intro .sub{
  max-width:68ch;
  margin:22px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
}
.project-intro .graphcta{margin:22px 0 0}
.project-trainer .project-intro .sub{max-width:none}

select,button,textarea{font-family:'Familjen Grotesk',sans-serif}
select{
  min-height:40px;
  border:1px solid var(--line) !important;
  border-radius:2px !important;
  background:var(--card) !important;
  color:var(--ink) !important;
}
button{border-radius:2px !important}
.btn{
  background:var(--brand) !important;
  color:var(--accent-ink) !important;
  font-weight:600;
}
.btn.ghost{
  border:1px solid var(--line) !important;
  background:var(--card) !important;
  color:var(--ink) !important;
}
.btn.ghost:hover{border-color:var(--brand) !important;color:var(--brand) !important}
.graphcta{
  border:1px solid var(--brand) !important;
  border-radius:2px !important;
  background:transparent !important;
  color:var(--brand) !important;
  font-family:'Sometype Mono',monospace;
  font-size:11px !important;
  font-weight:500 !important;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.bar{
  padding:18px;
  border:1px solid var(--line);
  background:color-mix(in srgb,var(--card) 84%,transparent);
}
.stats{font-family:'Sometype Mono',monospace;font-size:11.5px !important}
.progress{height:3px !important;border-radius:0 !important;background:var(--line) !important}
.progress>div{background:var(--brand) !important}

.card{
  border:1px solid var(--line) !important;
  border-radius:2px !important;
  background:var(--card) !important;
  box-shadow:none !important;
  padding:clamp(22px,4vw,34px) !important;
}
.cat{
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--brand) !important;
  font-family:'Sometype Mono',monospace;
  font-size:10.5px !important;
  font-weight:500 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.q{
  margin:4px 0 20px !important;
  font-family:'Fraunces',serif;
  font-size:clamp(21px,3vw,28px) !important;
  font-weight:600 !important;
  line-height:1.12;
  letter-spacing:-.02em;
}
.opt{
  min-height:48px;
  border:1px solid var(--line) !important;
  border-radius:2px !important;
  background:color-mix(in srgb,var(--card) 72%,var(--bg)) !important;
  color:var(--ink);
}
.opt:hover:not(:disabled){border-color:var(--brand) !important;background:var(--chip) !important}
.opt.correct{border-color:var(--ok) !important;background:var(--okbg) !important;color:var(--ok) !important}
.opt.wrong{border-color:var(--no) !important;background:var(--nobg) !important;color:var(--no) !important}

.explain{
  border:1px solid var(--line) !important;
  border-radius:2px !important;
  background:var(--chip) !important;
}
textarea{border-radius:2px !important;background:var(--card) !important}
input{accent-color:var(--brand) !important}
#timer{border-radius:2px !important;background:var(--chip) !important}
.timeup{border-radius:2px !important}
.foot,.credit{
  font-family:'Sometype Mono',monospace;
  font-size:10.5px !important;
  line-height:1.55;
}
.foot a,.credit a{color:var(--brand) !important}
.modal{border:1px solid var(--line);border-radius:2px !important;background:var(--card) !important}
.modal h2{font-family:'Fraunces',serif;font-weight:600}

/* Aptitude Sprint */
.project-aptitude .aptitude-setup{
  position:relative;
  left:50%;
  width:min(calc(100vw - 40px),1180px);
  transform:translateX(-50%);
  margin-bottom:12px;
  padding:16px !important;
}
.project-aptitude .modes{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}
.project-aptitude .mode{min-height:116px;padding:16px 18px !important}
.project-aptitude .modeHint{
  display:block;
  max-width:96ch;
  margin:9px 0 0;
  color:var(--muted);
}
.project-aptitude .aptitude-setup .stats{width:auto;margin-left:auto}
.project-aptitude .progress{margin:10px 0 16px}

.panel{
  border:1px solid var(--line) !important;
  border-radius:2px !important;
  background:var(--card) !important;
  box-shadow:none !important;
}
.mode{
  border:1px solid var(--line) !important;
  border-radius:2px !important;
  background:color-mix(in srgb,var(--card) 76%,var(--bg)) !important;
  box-shadow:none !important;
  color:var(--ink) !important;
}
.mode:hover{border-color:var(--brand) !important;box-shadow:none !important}
.mode.on{border-color:var(--brand) !important;background:var(--chip) !important;box-shadow:inset 0 -3px 0 var(--brand) !important}
.mode b{font-family:'Fraunces',serif;font-size:24px !important;font-weight:600}
.mode::after{
  border:1px solid var(--line) !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--muted) !important;
  font-family:'Sometype Mono',monospace;
  font-weight:500 !important;
}
.mode.on::after{border-color:var(--brand) !important;color:var(--brand) !important}
.timer{border-radius:2px !important;background:var(--chip) !important}
.btn.warn{border:1px solid var(--brand) !important;background:transparent !important;color:var(--brand) !important}
.metric{border-radius:2px !important;background:var(--chip) !important}
.table th{font-family:'Sometype Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}

@media(max-width:680px){
  body::before{height:300px;opacity:.13}
  .project-shell-header{width:min(100% - 28px,1180px);padding-top:18px;align-items:flex-start}
  .project-crumbs{max-width:250px;font-size:9px;gap:6px}
  .project-schemes{gap:5px}
  .project-schemes button{width:28px;height:28px}
  .wrap{width:min(100% - 28px,820px)}
  .project-intro{width:calc(100vw - 28px);padding:28px 0 24px}
  .project-intro h1{font-size:clamp(44px,14vw,62px)}
  .project-intro .sub{font-size:14.5px}
  .bar{padding:14px}
  .stats{width:100%;margin-left:0 !important}
}
@media(prefers-reduced-motion:reduce){
  body{transition:none}
}


/* AI / ML Concept Graph */
.project-concept .wrap{max-width:1212px !important;padding:0 16px 48px}
.project-concept .project-intro{padding-bottom:4px}
.project-concept .term{
  margin-top:12px;
  font-family:'Fraunces',serif;
  font-size:clamp(24px,3vw,31px);
  font-weight:600;
  line-height:1.1;
}
.project-concept .defcard,
.project-concept .canvas{
  border-color:var(--line);
  border-radius:2px;
  background:var(--card);
  box-shadow:none;
}
.project-concept .defcard .y #defP{display:block;max-width:90ch}
.project-concept .defcard .tag{
  font-family:'Sometype Mono',monospace;
  font-weight:600;
  letter-spacing:.07em;
}
.project-concept .canvas{overflow:hidden}
.project-concept .canvas svg{background:var(--card)}
.project-concept .nodelabel,
.project-concept .nodesub,
.project-concept .edgelabel{font-family:'Familjen Grotesk',sans-serif}
.project-concept .topictabs button,
.project-concept .ctrl{
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--card);
  color:var(--muted);
  box-shadow:none;
}
.project-concept .topictabs button.on{
  border-color:var(--brand);
  background:var(--brand);
  color:var(--accent-ink);
}
.project-concept .ctrl:hover{border-color:var(--brand);color:var(--brand)}
.project-concept .graphtools{margin-bottom:10px}
.project-concept .hint{font-family:'Sometype Mono',monospace;font-size:11px}

/* AI Analyst Growth Map */
.project-growth{
  --blue:#6E1B2E; --blue-soft:#E6D5D5;
  --green:#28744A; --green-soft:#DDE9DF;
  --amber:#9A6A12; --amber-soft:#EFE4C9;
  --red:#A13F3F; --red-soft:#F0DCDC;
  --purple:#70518A; --purple-soft:#E2D8E6;
  --canvas:#F2EDE2; --data:#E3DED4; --data-ink:#403B35;
  --data-chip:#D6D0C4; --data-chip-ink:#514A42;
  --root-ink:#F2EDE2; --root-muted:#D2CABC;
  --dialog-block:#E8E2D7; --shadow:none;
}
html[data-scheme="midnight"] .project-growth{
  --blue:#D2A24C; --blue-soft:#302916;
  --green:#76C79A; --green-soft:#123429;
  --amber:#E0B65A; --amber-soft:#332A16;
  --red:#E58B7B; --red-soft:#3A2330;
  --purple:#B99AE0; --purple-soft:#2C2440;
  --canvas:#111C33; --data:#18253D; --data-ink:#D7DFEC;
  --data-chip:#22304A; --data-chip-ink:#C2CCDB;
  --root-ink:#0A1224; --root-muted:#37445C;
  --dialog-block:#18253D; --shadow:none;
}
html[data-scheme="grass"] .project-growth{
  --blue:#B4671B; --blue-soft:#DBC6AC;
  --green:#276B45; --green-soft:#C7D9C9;
  --amber:#8A6513; --amber-soft:#D8D3AA;
  --red:#963F38; --red-soft:#E6C9C2;
  --purple:#6E547E; --purple-soft:#D3C8D5;
  --canvas:#D9E1D2; --data:#C9D3C3; --data-ink:#263A2D;
  --data-chip:#B8C6B2; --data-chip-ink:#314536;
  --root-ink:#D9E1D2; --root-muted:#819387;
  --dialog-block:#CED8C8; --shadow:none;
}
.project-growth .shell{position:relative;z-index:1;max-width:1240px}
.project-growth .project-shell-header,
.project-growth .project-intro,
.project-growth .tabs,
.project-growth main,
.project-growth footer{width:min(100% - 40px,1180px);margin-left:auto;margin-right:auto}
.project-growth .project-intro{left:auto;transform:none;padding-bottom:30px}
.project-growth .project-intro h1{
  margin:0;
  font-family:'Fraunces',serif;
  font-size:clamp(48px,7.4vw,82px);
  font-weight:500;
  font-variation-settings:'SOFT' 0,'WONK' 1;
  line-height:.92;
  letter-spacing:-.04em;
}
.project-growth .project-intro .eyebrow{
  margin-bottom:12px;
  color:var(--brand);
  font-family:'Sometype Mono',monospace;
  font-size:10.5px;
  font-weight:600;
}
.project-growth .project-intro .lead{max-width:760px;margin:22px 0 0;font-size:16px}
.project-growth .tabs{
  width:fit-content;
  max-width:calc(100% - 40px);
  padding:0;
  border:1px solid var(--line);
  border-radius:2px;
  background:var(--card);
}
.project-growth .tab{border-radius:0;background:transparent}
.project-growth .tab[aria-selected="true"]{
  background:var(--brand);
  color:var(--accent-ink);
  box-shadow:none;
}
.project-growth .mode-head h2,
.project-growth .dialog-top h2{font-family:'Fraunces',serif;font-weight:600}
.project-growth .tree-action,
.project-growth .node,
.project-growth .branch-toggle,
.project-growth dialog{
  border-radius:2px;
  box-shadow:none;
}
.project-growth .tree-wrap{
  border-radius:2px;
  background-color:var(--canvas);
  background-image:none;
}
.project-growth .node:hover{box-shadow:none}
.project-growth .node.root{background:var(--ink);border-color:var(--ink)}
.project-growth .node-title{font-family:'Familjen Grotesk',sans-serif}
.project-growth .node-sub,
.project-growth .mode-chip,
.project-growth .data-chip,
.project-growth .pan-hint,
.project-growth footer{font-family:'Sometype Mono',monospace}
.project-growth .tree-action{background:var(--card)}
.project-growth .mode-note{border-left-color:var(--brand)}
.project-growth dialog{border:1px solid var(--line)}

@media(max-width:680px){
  .project-concept .wrap{padding-left:14px;padding-right:14px}
  .project-growth .project-shell-header,
  .project-growth .project-intro,
  .project-growth .tabs,
  .project-growth main,
  .project-growth footer{width:min(100% - 28px,1180px)}
  .project-growth .tabs{max-width:calc(100% - 28px)}
  .project-growth .project-intro{left:50%;width:calc(100vw - 28px);margin-left:0;margin-right:0;transform:translateX(-50%);padding-top:28px}
  .project-growth .project-intro h1{font-size:clamp(44px,14vw,62px)}
  .project-growth .tree-wrap{padding:12px}
}

/* Retired PM Skills Gym chrome may still be injected by an older service worker. */
.pmg-site-nav,#pmg-site-nav-style{display:none !important}

@media(max-width:900px){
  .project-aptitude .modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .project-aptitude .aptitude-setup .stats{width:100%;margin-left:0}
}
@media(max-width:560px){
  .project-aptitude .aptitude-setup{
    width:calc(100vw - 28px);
    padding:14px !important;
  }
  .project-aptitude .modes{grid-template-columns:1fr}
  .project-aptitude .mode{min-height:auto}
}

/* Aptitude hero rhythm */
.project-aptitude .project-intro{padding-top:23px}
@media(max-width:680px){
  .project-aptitude .project-intro{padding-top:20px}
}

/* Aptitude subtitle uses the full hero width. */
.project-aptitude .project-intro .sub,
.project-aptitude .project-intro .modeHint{max-width:none}