:root{
  --paper:#F3F5F2; 
  --card:#FFFFFF; 
  --card-hover:#F8FAF7;
  --ink:#11181C; 
  --soft:#56616A;
  --rule:#C7CDCE; 
  --blue:#1E3FD0; 
  --blue-hover:#1530A0;
  --blue-wash:#DFE4FA;
  --display:"Archivo",system-ui,-apple-system,sans-serif;
  --body:"Source Serif 4",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --shadow-sm:0 2px 6px rgba(0,0,0,0.04);
  --shadow:0 6px 16px rgba(0,0,0,0.08);
  --radius:6px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#10161A; 
    --card:#1A232A; 
    --card-hover:#212D36;
    --ink:#E3E8E2; 
    --soft:#909DA4;
    --rule:#2C3840; 
    --blue:#7E9BFF; 
    --blue-hover:#A0B5FF;
    --blue-wash:#1D2747; 
    --shadow-sm:0 2px 6px rgba(0,0,0,0.25);
    --shadow:0 6px 16px rgba(0,0,0,0.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#10161A; 
  --card:#1A232A; 
  --card-hover:#212D36;
  --ink:#E3E8E2; 
  --soft:#909DA4;
  --rule:#2C3840; 
  --blue:#7E9BFF; 
  --blue-hover:#A0B5FF;
  --blue-wash:#1D2747; 
  --shadow-sm:0 2px 6px rgba(0,0,0,0.25);
  --shadow:0 6px 16px rgba(0,0,0,0.4);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color 0.2s ease, color 0.2s ease;
}
.wrap{max-width:940px;margin:0 auto;padding:0 24px 120px}

/* Lock Screen Overlay */
.lock-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  background:var(--paper);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  backdrop-filter:blur(12px);
}
.lock-screen.hidden-lock{
  display:none!important;
}
.lock-card{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:40px 36px;
  width:100%;
  max-width:440px;
  box-shadow:var(--shadow);
  text-align:center;
  animation:fadeIn 0.3s ease;
}
.lock-icon{
  font-size:36px;
  margin-bottom:12px;
  display:inline-block;
}
.lock-card h2{
  font-family:var(--display);
  font-weight:800;
  font-size:24px;
  margin:0 0 8px;
}
.lock-card p{
  font-size:14px;
  color:var(--soft);
  margin:0 0 24px;
}
.lock-form{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.lock-input-group{
  position:relative;
  display:flex;
  align-items:center;
}
.lock-input{
  width:100%;
  padding:12px 14px;
  font-family:var(--mono);
  font-size:15px;
  background:var(--paper);
  color:var(--ink);
  border:1.5px solid var(--rule);
  border-radius:4px;
  outline:none;
  transition:border-color .15s ease;
}
.lock-input:focus{
  border-color:var(--blue);
}
.lock-submit{
  width:100%;
  padding:12px 16px;
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  background:var(--blue);
  color:#FFFFFF;
  border:none;
  border-radius:4px;
  cursor:pointer;
  transition:background .15s ease, transform .1s ease;
}
.lock-submit:hover{
  background:var(--blue-hover);
}
.lock-submit:active{
  transform:scale(0.98);
}
.lock-error{
  font-family:var(--mono);
  font-size:12px;
  color:#D93025;
  margin-top:4px;
  min-height:18px;
}
.shake{
  animation:shake 0.4s ease;
}

@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%,60%{transform:translateX(-8px)}
  40%,80%{transform:translateX(8px)}
}
@keyframes fadeIn{
  from{opacity:0;transform:scale(0.96)}
  to{opacity:1;transform:scale(1)}
}

header{padding:56px 0 28px}
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--soft);
  margin:0 0 20px;
}
h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(34px,6.6vw,64px);
  line-height:.96;
  letter-spacing:-.02em;
  margin:0 0 22px;
  text-wrap:balance;
}
h1 em{font-style:normal;color:var(--blue)}
.lede{font-size:clamp(17px,2.1vw,20px);max-width:62ch;margin:0 0 14px;line-height:1.5}
.lede.dim{color:var(--soft)}
.thesis{font-size:clamp(17px,2.1vw,19px);max-width:64ch;margin:0 0 16px;line-height:1.55}

/* Site Chrome & Navigation */
.sitenav{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--paper);
  border-bottom:2px solid var(--ink);
  padding:10px 0 0;
  backdrop-filter:blur(8px);
}
.sitebar{
  max-width:940px;
  margin:0 auto;
  padding:6px 24px 8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--soft);
}
.sitebar-controls{
  display:flex;
  align-items:center;
  gap:8px;
}
.prog-badge{
  color:var(--blue);
  font-weight:600;
}
.navinner{
  max-width:940px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  gap:4px;
  align-items:stretch;
  flex-wrap:wrap;
}
.navbtn{
  flex:1 1 96px;
  text-align:left;
  background:transparent;
  border:none;
  border-bottom:3px solid transparent;
  padding:9px 10px 10px;
  cursor:pointer;
  font-family:var(--display);
  font-weight:600;
  font-size:13px;
  color:var(--soft);
  border-radius:4px 4px 0 0;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.navbtn span{
  display:block;
  font-family:var(--mono);
  font-weight:400;
  font-size:10px;
  letter-spacing:.04em;
  margin-top:3px;
  opacity:.8;
}
.navbtn:hover{color:var(--ink);background:var(--card)}
.navbtn[aria-current="page"]{
  color:var(--blue);
  border-bottom-color:var(--blue);
  background:var(--card);
}

.page{display:none}
.page.active{display:block}

.deep{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  background:var(--card);
  color:var(--blue);
  border:1px solid var(--rule);
  padding:7px 14px;
  border-radius:4px;
  cursor:pointer;
  margin:12px 0 0;
  transition:all .15s ease;
  font-weight:600;
  display:inline-block;
}
.deep:hover{
  background:var(--blue-wash);
  border-color:var(--blue);
}

/* Visual Scale Ledger */
.ledger{
  background:var(--card);
  border:1px solid var(--rule);
  padding:18px 20px;
  border-radius:var(--radius);
  margin:32px 0 16px;
  box-shadow:var(--shadow-sm);
}
.ledger-head, .ledger-foot{
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--soft);
}
.ledger-head{margin-bottom:10px}
.ledger-foot{margin-top:10px}
.bar{
  display:flex;
  height:44px;
  background:var(--rule);
  gap:3px;
  border-radius:4px;
  padding:3px;
  overflow:hidden;
}
.seg{
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--paper);
  border:none;
  border-radius:3px;
  cursor:pointer;
  transition:all 0.15s ease;
  position:relative;
}
.seg span{
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  color:var(--ink);
}
.seg:hover{
  background:var(--blue);
  transform:scaleY(1.04);
}
.seg:hover span{color:#FFFFFF}

/* Method Section */
.method{
  margin-top:56px;
  border-top:2px solid var(--ink);
  padding-top:36px;
}
.loop{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
  margin-top:24px;
}
.loop > div{
  background:var(--card);
  border:1px solid var(--rule);
  border-top:3px solid var(--blue);
  padding:20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.loop > div:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.loop b{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--blue);
  display:block;
  margin-bottom:8px;
}
.loop p{margin:0;font-size:14px;line-height:1.5;color:var(--soft)}

/* Phase List Overview */
.phases{margin-top:56px}
.phase{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:32px;
  padding:36px 0;
  border-top:1px solid var(--rule);
  align-items:start;
}
.phase:first-of-type{border-top:2px solid var(--ink)}
.tick{
  position:sticky;
  top:124px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.tick .num{
  font-family:var(--display);
  font-weight:800;
  font-size:42px;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--ink);
}
.tick .hrs{
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  color:var(--blue);
  background:var(--blue-wash);
  padding:3px 8px;
  border-radius:4px;
  display:inline-block;
  width:fit-content;
  margin-top:4px;
}
.tick .cum{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--soft);
  margin-top:2px;
}
.tag{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--blue);
  font-weight:600;
  margin:4px 0 12px;
  display:inline-block;
}
.summary{
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  margin:0 0 14px;
  max-width:62ch;
}

.exit{
  background:var(--card);
  border:1px solid var(--rule);
  border-left:4px solid var(--ink);
  padding:16px 20px;
  border-radius:var(--radius);
  margin-top:14px;
  box-shadow:var(--shadow-sm);
}
.exit b{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink);
  display:block;
  margin-bottom:6px;
}
.exit p{margin:0;font-size:14.5px;line-height:1.5;color:var(--soft)}

/* Skip section */
.skip{
  margin-top:76px;
  border-top:2px solid var(--ink);
  padding-top:36px;
}
.skip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin-top:24px;
}
.skip-grid > div{
  background:var(--card);
  border:1px solid var(--rule);
  padding:20px;
  border-radius:var(--radius);
  transition:transform .2s ease;
}
.skip-grid > div:hover{transform:translateY(-2px)}
.skip-grid b{
  font-family:var(--display);
  font-size:16px;
  font-weight:600;
  display:block;
  margin-bottom:6px;
  color:var(--ink);
}
.skip-grid p{margin:0;font-size:14px;line-height:1.5;color:var(--soft)}

h2{
  font-family:var(--display);
  font-weight:800;
  font-size:26px;
  letter-spacing:-.01em;
  margin:0 0 8px;
}
.sub{color:var(--soft);margin:0 0 26px;max-width:62ch}

/* Block & Task Items */
.block{border-top:1px solid var(--rule);padding:36px 0 8px}
.block:first-of-type{border-top:2px solid var(--ink);margin-top:40px}
.block.fallow{background:var(--card);padding:24px 22px;border-top:1px dashed var(--rule);border-radius:var(--radius);margin-top:36px}
.block-head{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.bnum{
  font-family:var(--display);
  font-weight:800;
  font-size:34px;
  letter-spacing:-.03em;
  line-height:1;
}
h3{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(22px,3.2vw,29px);
  letter-spacing:-.015em;
  margin:0;
  line-height:1.1;
}
.when{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--blue);
  font-weight:600;
}
.block > p{margin:0 0 16px;max-width:62ch}

.stack{
  background:var(--card);
  border:1px solid var(--rule);
  border-left:3px solid var(--blue);
  padding:14px 18px;
  border-radius:4px;
  margin:16px 0 20px;
}
.block.fallow .stack{background:var(--paper)}
.stack b{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
  display:block;
  margin-bottom:4px;
}
.stack p{margin:0;font-size:14px;color:var(--soft);line-height:1.5}

.tasks{list-style:none;padding:0;margin:20px 0 30px}
.task{
  border-top:1px solid var(--rule);
  padding:12px 0;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:16px;
  align-items:start;
}
.task:last-child{border-bottom:1px solid var(--rule)}
.t{
  font-family:var(--mono);
  font-size:11px;
  color:var(--blue);
  padding-top:3px;
  letter-spacing:.02em;
  font-weight:600;
}
.task-body{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.task label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.task input[type=checkbox]{
  appearance:none;
  -webkit-appearance:none;
  flex:0 0 15px;
  width:15px;
  height:15px;
  margin-top:5px;
  border:1.5px solid var(--soft);
  border-radius:3px;
  background:transparent;
  cursor:pointer;
  transition:all .15s ease;
}
.task input[type=checkbox]:checked{
  background:var(--blue);
  border-color:var(--blue);
}
.task input[type=checkbox]:checked + span{
  color:var(--soft);
  text-decoration:line-through;
  opacity:.85;
}
.task code{
  font-family:var(--mono);
  font-size:.86em;
  background:var(--card);
  padding:2px 6px;
  border-radius:3px;
  border:1px solid var(--rule);
}
.block.fallow .task code{background:var(--paper)}

/* Task Comment Note UI */
.note-row{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  margin-top:2px;
}
.note-btn{
  background:transparent;
  border:1px solid transparent;
  color:var(--soft);
  font-family:var(--mono);
  font-size:11px;
  cursor:pointer;
  padding:2px 6px;
  border-radius:3px;
  transition:all 0.15s ease;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.note-btn:hover{
  color:var(--blue);
  background:var(--card);
  border-color:var(--rule);
}
.note-btn.has-note{
  color:var(--blue);
  font-weight:600;
}
.task-note-input{
  width:100%;
  max-width:560px;
  font-family:var(--mono);
  font-size:12px;
  padding:6px 10px;
  background:var(--card);
  color:var(--ink);
  border:1px dashed var(--rule);
  border-radius:4px;
  outline:none;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.task-note-input:focus{
  border-color:var(--blue);
  border-style:solid;
  background:var(--paper);
}

/* Module Maps & Tables */
.map{width:100%;border-collapse:collapse;margin:22px 0 8px;font-size:15px}
.map th{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--soft);
  text-align:left;
  padding:0 12px 10px 0;
  border-bottom:1px solid var(--rule);
  font-weight:400;
}
.map td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.map td:first-child{font-family:var(--display);font-weight:600;font-size:15px}
.pri{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;white-space:nowrap;font-weight:600}
.p-hi{color:var(--blue)}
.p-mid{color:var(--ink)}
.p-lo{color:var(--soft)}

.skel,.check,.leak,.where,.meet{font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--ink)}
.skel em,.check em,.leak em,.where em,.meet em{font-style:normal;color:var(--blue);font-weight:600}
.story{font-size:14.5px;color:var(--ink)}
.lvl{font-family:var(--mono);font-size:10px;color:var(--soft);display:block;margin-top:2px}

.said{font-style:italic;font-size:14px;color:var(--soft)}
.verdict input{
  width:100%;
  font-family:var(--mono);
  font-size:12px;
  padding:5px 8px;
  background:var(--paper);
  color:var(--ink);
  border:1px solid var(--rule);
  border-radius:4px;
  outline:none;
}
.verdict input:focus{
  border-color:var(--blue);
}

.note{
  background:var(--card);
  padding:18px 22px;
  border-left:3px solid var(--blue);
  border-radius:4px;
  margin:24px 0;
  box-shadow:var(--shadow-sm);
}
.note b{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--blue);
  display:block;
  margin-bottom:6px;
}
.note p{margin:0 0 10px;font-size:15px}
.note p:last-child{margin-bottom:0}

/* Resource Index Cards */
.res{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px}
.res div{
  background:var(--card);
  padding:18px 20px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease;
}
.res div:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.res b{font-family:var(--display);font-weight:600;font-size:15px;display:block;margin-bottom:6px}
.res p{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--soft)}
.res a{
  font-family:var(--mono);
  font-size:11.5px;
  word-break:break-all;
  color:var(--blue);
  text-decoration:none;
}
.res a:hover{text-decoration:underline}

/* Footer */
.sitefoot{
  max-width:940px;
  margin:60px auto 0;
  padding:20px 24px 90px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:11px;
  color:var(--soft);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.foot-link{
  background:none;
  border:none;
  font-family:inherit;
  font-size:inherit;
  color:var(--blue);
  cursor:pointer;
  padding:0 2px;
  font-weight:600;
}
.foot-link:hover{text-decoration:underline}

.theme-btn,.lock-btn,.backup-btn{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  background:var(--card);
  color:var(--blue);
  border:1px solid var(--rule);
  padding:5px 12px;
  border-radius:4px;
  cursor:pointer;
  transition:all .15s ease;
}
.theme-btn:hover,.lock-btn:hover,.backup-btn:hover{background:var(--blue-wash);border-color:var(--blue)}
a{color:var(--blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

@media(max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 18px 80px}
  header{padding:40px 0 20px}
  .res{grid-template-columns:1fr}
  .task{grid-template-columns:48px 1fr;gap:12px}
  .map,.map tbody,.map tr,.map td{display:block;width:100%}
  .map thead{display:none}
  .map tr{border-bottom:1px solid var(--rule);padding:12px 0}
  .map td{border:none;padding:2px 0}
  .map td.pri{margin-top:5px}
  .skel,.check,.leak,.where{margin-top:6px}
  .navinner{padding:0 18px;gap:2px}
  .navbtn{flex:1 1 30%;font-size:12px;padding:7px 6px 8px}
  .navbtn span{display:none}
  .sitebar{padding:5px 18px 7px}
  .sitefoot{padding:16px 18px 70px}
  .phase{grid-template-columns:1fr;gap:12px;padding:28px 0}
  .tick{position:static;flex-direction:row;align-items:baseline;gap:12px}
  .tick .num{font-size:32px}
  .loop{grid-template-columns:1fr}
  .skip-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}