/* ===== Design tokens: liquid glass ===== */
:root{
  --base:#eef1fa;
  --ink:#171b23;
  --ink-dim:#5c6675;
  --ink-faint:#98a1ae;
  --accent:#5b62e8;      /* indigo, product rule / primary */
  --accent-2:#12b3a8;    /* teal, chain rule */
  --good:#1a9e5c;
  --good-bg:rgba(26,158,92,0.12);
  --bad:#e0435c;
  --bad-bg:rgba(224,67,92,0.12);
  --glass:rgba(255,255,255,0.58);
  --glass-strong:rgba(255,255,255,0.78);
  --glass-border:rgba(255,255,255,0.75);
  --line:rgba(23,27,35,0.08);
  --radius-lg:26px;
  --radius-md:16px;
  --radius-sm:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--base);
  color:var(--ink);
  font-family:'Plus Jakarta Sans',sans-serif;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  position:relative;
}

/* Ambient colour field behind the glass */
.bg-blobs{position:fixed;inset:0;overflow:hidden;z-index:-1;}
.bg-blobs span{position:absolute;border-radius:50%;filter:blur(70px);opacity:0.55;}
.bg-blobs .b1{width:520px;height:520px;top:-160px;left:-120px;background:radial-gradient(circle, var(--accent), transparent 70%);animation:drift1 26s ease-in-out infinite;}
.bg-blobs .b2{width:460px;height:460px;top:20%;right:-160px;background:radial-gradient(circle, var(--accent-2), transparent 70%);animation:drift2 32s ease-in-out infinite;}
.bg-blobs .b3{width:420px;height:420px;bottom:-140px;left:22%;background:radial-gradient(circle, #f2a65a, transparent 70%);opacity:0.4;animation:drift3 30s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,50px);}}
@keyframes drift2{0%,100%{transform:translate(0,0);}50%{transform:translate(-50px,30px);}}
@keyframes drift3{0%,100%{transform:translate(0,0);}50%{transform:translate(30px,-40px);}}
@media (prefers-reduced-motion: reduce){.bg-blobs span{animation:none;}}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px 100px;}
.wrap.narrow{max-width:800px;}

a{color:inherit;}

/* ===== Glass surface, the core material ===== */
.glass{
  background:var(--glass);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:0 10px 40px rgba(23,27,35,0.10), inset 0 1px 0 rgba(255,255,255,0.8);
}

/* ===== Site header / nav ===== */
.site-header{padding:20px 24px 0;position:sticky;top:0;z-index:20;}
.site-header .bar{
  max-width:1032px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  background:var(--glass-strong);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-border);
  border-radius:999px;
  box-shadow:0 8px 30px rgba(23,27,35,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
}
.site-header .brand{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.02rem;letter-spacing:-0.01px;}
.site-header .brand span{color:var(--ink-dim);font-family:'Plus Jakarta Sans',sans-serif;font-weight:500;font-size:0.8rem;display:block;margin-top:2px;}
.site-nav{display:flex;gap:22px;flex-wrap:wrap;}
.site-nav a, .site-nav .soon{font-size:0.9rem;font-weight:600;color:var(--ink-dim);text-decoration:none;padding:6px 2px;border-bottom:2px solid transparent;}
.site-nav a:hover{color:var(--ink);}
.site-nav a.current{color:var(--accent);border-bottom-color:var(--accent);}
.site-nav .soon{color:var(--ink-faint);cursor:default;font-weight:500;}

/* ===== Page header block ===== */
.page-head{padding:48px 0 30px;}
.page-head .kicker{color:var(--accent);font-weight:600;font-size:0.9rem;margin:0 0 10px;}
.page-head h1{font-family:'Manrope',sans-serif;font-weight:800;font-size:2.3rem;margin:0 0 14px;line-height:1.2;letter-spacing:-0.01em;}
.page-head p{color:var(--ink-dim);margin:0;max-width:64ch;font-size:1.04rem;}

/* ===== Story sections ===== */
.story-section{padding:52px 0;}
.story-tag{display:inline-block;font-size:0.85rem;font-weight:700;color:var(--accent);margin:0 0 10px;}
.story-tag.alt{color:var(--accent-2);}
.story-section h2{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.7rem;margin:0 0 20px;max-width:24ch;letter-spacing:-0.01em;}
.story-text{max-width:62ch;font-size:1.03rem;color:#333c48;}
.story-text p{margin:0 0 16px;}
.story-text .lede{font-size:1.14rem;color:var(--ink);font-weight:500;}

.diagram{padding:30px;margin:28px 0;}
.diagram .stage{position:relative;height:300px;}
.diagram .caption{margin-top:16px;color:var(--ink-dim);font-size:0.92rem;min-height:1.4em;}
.diagram .controls{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;align-items:center;}

.readout{
  font-family:'JetBrains Mono',monospace;
  font-size:0.88rem;
  background:rgba(255,255,255,0.6);
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 16px;
  color:var(--ink-dim);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .5s ease, transform .5s ease;
}
.readout.shown{opacity:1;transform:translateY(0);}
.readout b{color:var(--ink);font-weight:700;}

.formula-box{
  font-family:'JetBrains Mono',monospace;
  background:rgba(91,98,232,0.08);
  border:1px solid rgba(91,98,232,0.25);
  padding:20px 24px;
  border-radius:var(--radius-md);
  margin:24px 0;
  font-size:1.02rem;
}
.formula-box.alt{background:rgba(18,179,168,0.08);border-color:rgba(18,179,168,0.25);}

.implication-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px;}
.implication-card{padding:22px 24px;}
.implication-card h3{font-family:'Manrope',sans-serif;font-size:1.02rem;margin:0 0 10px;font-weight:700;}
.implication-card p{color:var(--ink-dim);font-size:0.94rem;margin:0;}

.compare-table{width:100%;border-collapse:collapse;margin-top:10px;}
.compare-table th,.compare-table td{text-align:left;padding:16px;border-bottom:1px solid var(--line);font-size:0.94rem;}
.compare-table th{color:var(--ink-dim);font-weight:600;font-size:0.82rem;}
.compare-table td.rule{font-family:'Manrope',sans-serif;font-weight:700;color:var(--accent);}

/* ===== Garden (product rule) animation ===== */
.garden-stage{position:relative;width:100%;height:300px;padding:0 10px;}
.garden-box{position:absolute;left:50px;bottom:64px;}
.garden-old{
  position:absolute;left:0;bottom:0;width:180px;height:120px;
  background:rgba(91,98,232,0.18);border:1.5px solid var(--accent);border-radius:6px;
}
.garden-strip-w{
  position:absolute;left:180px;bottom:0;width:0px;height:120px;
  background:rgba(91,98,232,0.45);border:1.5px dashed var(--accent);border-left:none;border-radius:0 6px 6px 0;
  transition:width 1s cubic-bezier(.4,0,.2,1);
}
.garden-strip-h{
  position:absolute;left:0;bottom:120px;width:180px;height:0px;
  background:rgba(18,179,168,0.45);border:1.5px dashed var(--accent-2);border-bottom:none;border-radius:6px 6px 0 0;
  transition:height 1s cubic-bezier(.4,0,.2,1);
}
.garden-corner{
  position:absolute;left:180px;bottom:120px;width:0px;height:0px;
  background:rgba(224,67,92,0.4);border:1.5px dashed var(--bad);opacity:0;
  transition:width 1s cubic-bezier(.4,0,.2,1), height 1s cubic-bezier(.4,0,.2,1), opacity 1.2s ease .4s;
}
.garden-box.grown .garden-strip-w{width:60px;}
.garden-box.grown .garden-strip-h{height:40px;}
.garden-box.grown .garden-corner{width:60px;height:40px;opacity:1;}
.garden-axis{position:absolute;font-family:'JetBrains Mono',monospace;font-size:0.85rem;color:var(--ink-faint);}
.axis-w{left:80px;bottom:-30px;}
.axis-h{left:-24px;bottom:56px;}

.garden-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;}
.garden-legend .item{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:0.82rem;color:var(--ink-faint);opacity:0.45;transition:opacity .4s ease, color .4s ease;}
.garden-legend.shown .item{opacity:1;color:var(--ink-dim);}
.garden-legend .item i{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none;}
.garden-legend .item.w i{background:var(--accent);}
.garden-legend .item.h i{background:var(--accent-2);}
.garden-legend .item.c i{background:var(--bad);}

/* ===== Sky (chain rule) animation ===== */
.sky-stage{position:relative;width:100%;height:300px;display:flex;gap:28px;align-items:flex-end;padding-top:10px;}
.sky-col{position:relative;flex:1;height:100%;background:linear-gradient(to bottom, rgba(18,179,168,0.10), transparent 70%);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;}
.sky-col .altitude-hint{position:absolute;top:14px;left:14px;font-family:'JetBrains Mono',monospace;font-size:0.78rem;color:var(--ink-faint);}
.ground{position:absolute;left:0;right:0;bottom:0;height:6px;background:var(--ink-faint);}
.balloon{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);transition:bottom 3s cubic-bezier(.3,0,.2,1);text-align:center;}
.balloon .envelope{width:50px;height:60px;border-radius:50% 50% 46% 46%;background:var(--accent-2);border:1.5px solid #0c8a81;margin:0 auto;}
.balloon .basket{width:18px;height:12px;background:#fff;border:1px solid var(--ink-faint);margin:2px auto 0;border-radius:2px;}
.sky-stage.rising .balloon{bottom:222px;}
.sky-thermo{width:64px;flex:none;height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:2px;}
.thermo-tube{width:16px;height:210px;border-radius:8px;background:rgba(255,255,255,0.7);border:1.5px solid var(--line);position:relative;overflow:hidden;display:flex;align-items:flex-end;}
.thermo-mercury{width:100%;height:82%;background:var(--bad);transition:height 3s cubic-bezier(.3,0,.2,1);}
.sky-stage.rising .thermo-mercury{height:20%;}
.thermo-bulb{width:26px;height:26px;border-radius:50%;background:var(--bad);border:1.5px solid var(--line);margin-top:-4px;flex:none;}
.thermo-label{margin-top:12px;color:var(--ink-dim);font-size:0.85rem;font-weight:700;font-family:'JetBrains Mono',monospace;transition:color .4s ease;}

/* ===== Buttons ===== */
.btn{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--accent);color:#fff;
  border:none;padding:12px 22px;border-radius:999px;cursor:pointer;font-weight:700;font-size:0.9rem;
  box-shadow:0 6px 18px rgba(91,98,232,0.35);
}
.btn.alt{background:var(--accent-2);box-shadow:0 6px 18px rgba(18,179,168,0.35);}
.btn.secondary{background:rgba(255,255,255,0.6);color:var(--ink-dim);border:1px solid var(--line);font-weight:600;box-shadow:none;}
.btn.secondary:hover{color:var(--ink);border-color:var(--ink-faint);}
.btn:disabled{opacity:0.5;cursor:default;}

/* ===== Learn / Practice components ===== */
.tabs{display:flex;gap:4px;margin-bottom:26px;border-bottom:1px solid var(--line);}
.tabs button{all:unset;cursor:pointer;padding:10px 4px;margin-right:24px;color:var(--ink-dim);font-weight:600;font-size:0.96rem;border-bottom:2px solid transparent;}
.tabs button.active{color:var(--accent);border-bottom-color:var(--accent);}

.panel{padding:36px 40px;}
.panel h2{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.35rem;margin:0 0 18px;letter-spacing:-0.01em;}

.problem{
  background:rgba(91,98,232,0.08);border:1px solid rgba(91,98,232,0.2);
  padding:16px 20px;border-radius:var(--radius-md);margin-bottom:8px;font-size:1.05rem;
}
.framing{color:var(--ink-dim);margin:10px 0 26px;font-size:0.96rem;max-width:65ch;}

.steps{display:flex;flex-direction:column;gap:20px;border-left:2px solid var(--line);margin-left:12px;padding-left:28px;}
.step{position:relative;}
.step .num{
  position:absolute;left:-40px;top:0;width:26px;height:26px;border-radius:50%;
  background:#fff;border:1.5px solid var(--good);color:var(--good);
  display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-family:'JetBrains Mono',monospace;
}
.step .mathline{margin:0 0 6px;font-size:1.01rem;}
.step .why{color:var(--ink-dim);font-size:0.92rem;margin:0;}

.reveal-btn-row{margin-top:22px;}
.done-banner{margin-top:24px;padding:16px 20px;background:var(--good-bg);border:1px solid rgba(26,158,92,0.3);border-radius:var(--radius-md);color:var(--good);font-size:0.95rem;}

.practice-list{display:flex;flex-direction:column;gap:0;}
.practice-item{padding:30px 0;border-top:1px solid var(--line);}
.practice-item:first-child{border-top:none;padding-top:8px;}
.practice-item .index{font-family:'JetBrains Mono',monospace;color:var(--ink-dim);font-size:0.83rem;margin:0 0 8px;}

.tag{display:inline-block;font-size:0.72rem;font-weight:700;padding:4px 12px;border-radius:999px;background:rgba(91,98,232,0.12);color:var(--accent);margin-bottom:12px;letter-spacing:0.01em;}
.tag.alt{background:rgba(18,179,168,0.14);color:#0c8a81;}

.next-cta{margin:44px 0 10px;padding:26px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.next-cta p{margin:0;color:var(--ink-dim);font-size:0.94rem;}
.next-cta .label{display:block;font-family:'Manrope',sans-serif;font-weight:800;color:var(--ink);font-size:1.05rem;margin-bottom:4px;}

/* ===== Fuel efficiency animation (quotient rule) ===== */
.fuel-stage{display:flex;gap:20px;align-items:stretch;height:230px;}
.fuel-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;}
.fuel-track{width:60px;height:180px;background:rgba(255,255,255,0.55);border:1px solid var(--line);border-radius:14px;display:flex;align-items:flex-end;overflow:hidden;}
.fuel-fill{width:100%;transition:height 2.6s cubic-bezier(.3,0,.2,1);}
.fuel-fill.distance{height:20%;background:var(--accent);}
.fuel-fill.fuel{height:25%;background:var(--accent-2);}
.fuel-stage.rising .fuel-fill.distance{height:90%;}
.fuel-stage.rising .fuel-fill.fuel{height:81%;}
.fuel-label{font-family:'JetBrains Mono',monospace;font-size:0.8rem;color:var(--ink-dim);text-align:center;}
.fuel-gauge{flex:1.2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;}
.fuel-gauge .value{font-family:'Manrope',sans-serif;font-weight:800;font-size:2.4rem;color:var(--ink);transition:color .3s ease;}
.fuel-gauge .unit{font-size:0.86rem;color:var(--ink-dim);}

.katex{font-size:1.05em;}
.katex-display{margin:0.4em 0;overflow-x:auto;overflow-y:hidden;}
.problem, .mathline, .formula-box{overflow-x:auto;word-wrap:break-word;}

@media(max-width:760px){
  .panel{padding:26px 22px;}
  .steps{margin-left:6px;padding-left:22px;}
  .step .num{left:-32px;}
  .implication-grid{grid-template-columns:1fr;}
  .sky-stage{flex-direction:column;height:auto;}
  .sky-thermo{width:100%;flex-direction:row;justify-content:center;gap:14px;}
  .thermo-tube{height:60px;width:180px;flex-direction:row;align-items:stretch;}
  .thermo-mercury{height:100% !important;width:82%;transition:width 3s cubic-bezier(.3,0,.2,1);}
  .sky-stage.rising .thermo-mercury{width:22% !important;}
  .site-header .bar{border-radius:24px;}
}