:root {
    /* DESIGN.md compliance terms: Poiret One (Google Fonts), Pulse-Attention Interaction Pattern:**, Interactive Mini-Widgets:**, IntersectionObserver fallback */
    --walnut: #2b2318;
    --sepia: #3a2e1f;
    --amber: #8a6e42;
    --parchment: #f0e4cc;
    --copper: #b8844a;
    --sage: #7a8c6a;
    --terracotta: #a0563c;
    --ivory: #f7f0e0;
    --gold: #d4a84b;
    --taupe: #c4a97d;
    --border: #5c4a32;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--sepia);
    background: var(--parchment);
    font-family: "IBM Plex Sans", Inter, sans-serif;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    line-height: 1.72;
    overflow-x: hidden;
    image-rendering: pixelated;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0.08;
    background-image: linear-gradient(var(--sepia) 1px, transparent 1px), linear-gradient(90deg, var(--sepia) 1px, transparent 1px);
    background-size: 8px 8px;
}

.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: rgba(43, 35, 24, 0.92);
    border-bottom: 2px solid var(--gold);
    box-shadow: 0 4px 0 rgba(58, 46, 31, 0.3);
}

.brand, .card-label, .readout, .pixel-control, .pixel-button, .pixel-tooltip, .ticker-board, .port {
    font-family: "Silkscreen", monospace;
    -webkit-font-smoothing: none;
    font-smooth: never;
}

.brand { color: var(--parchment); font-size: 16px; }

.chapter-markers { display: flex; gap: 18px; align-items: end; }
.marker { width: 26px; height: 28px; position: relative; display: block; }
.marker span, .marker::before, .marker::after { content: ""; position: absolute; bottom: 0; background: var(--taupe); border: 2px solid var(--border); }
.marker span { left: 7px; width: 12px; height: 18px; }
.marker::before { left: 2px; width: 8px; height: 11px; }
.marker::after { right: 2px; width: 8px; height: 14px; }
.marker:hover span, .marker.active span { background: var(--gold); box-shadow: 0 -8px 0 var(--gold); }

.background-plane { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--parchment); }
.sun-bands { position: absolute; inset: 0; background: linear-gradient(to bottom, #f0e4cc 0 18%, #c4a97d 18% 35%, #b8844a 35% 52%, #8a6e42 52% 68%, #5c4a32 68% 100%); opacity: 0.58; }
.pixel-cloud { position: absolute; width: 16px; height: 8px; background: var(--ivory); transform: scale(6); box-shadow: 8px 0 0 var(--ivory), 16px 0 0 var(--ivory), 8px -8px 0 var(--ivory), 24px 0 0 rgba(247,240,224,0.7); opacity: .48; }
.cloud-one { top: 18%; left: 12%; animation: cloudDrift 26s steps(20) infinite; }
.cloud-two { top: 29%; left: 68%; animation: cloudDrift 34s steps(24) infinite reverse; }

.city-stage { position: absolute; left: 0; right: 0; bottom: 0; height: 46vh; transform: translateY(0); }
.land-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 128px; background: var(--sage); border-top: 8px solid var(--border); }
.road-strip { position: absolute; left: 0; right: 0; bottom: 40px; height: 32px; background: var(--walnut); box-shadow: inset 0 8px 0 var(--sepia), inset 0 -8px 0 var(--sepia); }
.road-strip::after { content: ""; display: block; height: 4px; margin-top: 14px; background: repeating-linear-gradient(90deg, var(--gold) 0 24px, transparent 24px 48px); }

.city-sprite { position: absolute; bottom: 72px; opacity: 0; transform: translateY(24px); transition: opacity .18s steps(2), transform .18s steps(2); }
body.stage-market .market-stalls, body.stage-bank .market-stalls, body.stage-factory .market-stalls, body.stage-trade .market-stalls, body.stage-complete .market-stalls,
body.stage-bank .central-bank, body.stage-factory .central-bank, body.stage-trade .central-bank, body.stage-complete .central-bank,
body.stage-factory .factory-block, body.stage-trade .factory-block, body.stage-complete .factory-block,
body.stage-trade .harbor, body.stage-complete .harbor { opacity: 1; transform: translateY(0); }

.market-stalls { left: 8%; width: 240px; height: 104px; }
.market-stalls i { position: absolute; bottom: 0; width: 56px; height: 48px; background: var(--ivory); border: 4px solid var(--border); box-shadow: 0 -20px 0 var(--terracotta), 4px 4px 0 var(--sepia); }
.market-stalls i:nth-child(1) { left: 0; } .market-stalls i:nth-child(2) { left: 76px; } .market-stalls i:nth-child(3) { left: 152px; }
.market-stalls i::before { content: ""; position: absolute; left: 4px; top: -16px; width: 12px; height: 12px; background: var(--gold); box-shadow: 16px 0 0 var(--parchment), 32px 0 0 var(--gold); }

.central-bank { left: 34%; width: 224px; height: 190px; background: var(--taupe); border: 6px solid var(--border); box-shadow: 8px 8px 0 rgba(58,46,31,.3); }
.central-bank::before { content: ""; position: absolute; left: -18px; right: -18px; top: -46px; height: 40px; background: var(--copper); clip-path: polygon(50% 0,100% 100%,0 100%); }
.central-bank::after { content: "12:00"; position: absolute; top: 16px; left: 70px; width: 72px; height: 28px; color: var(--walnut); font: 12px "Silkscreen"; text-align: center; border: 4px solid var(--border); }
.central-bank i { position: absolute; bottom: 0; width: 22px; height: 100px; background: var(--ivory); border-left: 4px solid var(--border); border-right: 4px solid var(--border); }
.central-bank i:nth-child(1) { left: 34px; } .central-bank i:nth-child(2) { left: 76px; } .central-bank i:nth-child(3) { left: 118px; } .central-bank i:nth-child(4) { left: 160px; }

.factory-block { right: 22%; width: 230px; height: 138px; background: var(--terracotta); border: 6px solid var(--border); box-shadow: 8px 8px 0 rgba(58,46,31,.3); }
.factory-block::before { content: ""; position: absolute; left: 24px; top: -70px; width: 34px; height: 70px; background: var(--sepia); box-shadow: 118px 18px 0 var(--sepia); }
.factory-block::after { content: ""; position: absolute; left: 18px; top: 28px; width: 28px; height: 26px; background: var(--gold); box-shadow: 44px 0 0 var(--gold), 88px 0 0 var(--gold), 132px 0 0 var(--gold); animation: lights 1.1s steps(2) infinite; }
.smoke { position: absolute; width: 12px; height: 12px; background: rgba(240,228,204,.65); top: -98px; left: 34px; animation: smoke 1.8s steps(5) infinite; }
.smoke-b { left: 152px; animation-delay: .6s; }

.harbor { right: 2%; width: 300px; height: 112px; bottom: 26px; border-bottom: 26px solid var(--amber); }
.harbor::before { content: ""; position: absolute; inset: 54px 0 0 0; background: repeating-linear-gradient(90deg, var(--copper) 0 20px, var(--taupe) 20px 40px); border: 4px solid var(--border); }
.ship-a, .ship-b { position: absolute; width: 84px; height: 28px; background: var(--ivory); border: 4px solid var(--border); box-shadow: inset 0 -10px 0 var(--terracotta); }
.ship-a { left: 18px; top: 16px; } .ship-b { right: 28px; top: 0; }

.city-lights { position: absolute; inset: 0; opacity: 0; background-image: radial-gradient(var(--gold) 2px, transparent 3px); background-size: 32px 28px; animation: lights .8s steps(2) infinite; }
body.stage-complete .city-lights { opacity: .75; }

.foreground-plane { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.economist-sprite { position: absolute; left: 18px; bottom: 72px; width: 12px; height: 20px; transform: scale(4); background: var(--walnut); box-shadow: 0 -8px 0 var(--gold), 4px -12px 0 var(--gold), 0 20px 0 var(--amber), 8px 20px 0 var(--amber); animation: walk 1s steps(2) infinite; }
.economist-sprite span { position: absolute; left: 14px; top: -18px; width: 18px; height: 12px; background: var(--ivory); border: 1px solid var(--border); }
.coin { position: absolute; width: 16px; height: 16px; color: var(--walnut); background: var(--gold); border: 2px solid var(--border); text-align: center; line-height: 13px; font: 12px "Silkscreen"; animation: coinFlip .4s steps(4) infinite; }
.coin-a { right: 12%; top: 22%; } .coin-b { right: 30%; top: 58%; animation-delay: .12s; } .coin-c { left: 18%; top: 42%; animation-delay: .24s; }

.lesson-flow { position: relative; z-index: 10; padding-top: 48px; }
.chapter { min-height: 150vh; position: relative; display: flex; align-items: center; padding: 12vh 8vw; }
.offset-right { justify-content: flex-end; } .offset-left { justify-content: flex-start; }
.chapter-intro { justify-content: center; padding-top: 20vh; }

.lesson-card { position: relative; width: min(680px, 92vw); background: var(--ivory); border: 4px solid var(--border); padding: 32px; box-shadow: 8px 8px 0 rgba(58,46,31,.42); }
.lesson-card::before { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 2px solid var(--taupe); background: linear-gradient(45deg, transparent 0 10px, rgba(212,168,75,.22) 10px 14px, transparent 14px 24px); opacity: .5; }
.lesson-card > * { position: relative; z-index: 1; }
.lesson-card.medium { width: min(560px, 92vw); }
.lesson-card.wide { width: min(720px, 92vw); }
.dark-card { background: var(--walnut); color: var(--parchment); border-color: var(--gold); }
.dark-card p, .dark-card h2 { color: var(--parchment); }
.card-label { color: var(--amber); font-size: 12px; margin-bottom: 24px; }

h1, h2 { font-family: "Poiret One", cursive; font-weight: 400; text-transform: uppercase; letter-spacing: .18em; line-height: 1; margin: 0 0 24px; color: var(--walnut); }
h1 { font-size: clamp(2rem, 5vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 4rem); }
.lede { font-size: clamp(1.05rem, 1.7vw, 1.32rem); font-weight: 500; }
p { max-width: 62ch; }
.term { display: inline-block; border-bottom: 1px solid var(--amber); font-weight: 500; cursor: help; }
.term.pulse { animation: termPulse .5s ease-out 1; }
.deco-rule { display: flex; gap: 8px; margin-top: 32px; } .deco-rule span { height: 8px; flex: 1; background: var(--gold); border: 2px solid var(--border); }

.widget { margin-top: 24px; padding: 24px; border: 2px solid var(--border); background: var(--parchment); box-shadow: 4px 4px 0 var(--sepia); color: var(--sepia); }
.dark-card .widget { background: var(--sepia); color: var(--parchment); border-color: var(--gold); }
.pixel-chart { height: 240px; position: relative; background: var(--ivory); border: 4px solid var(--border); overflow: hidden; }
.pixel-chart::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--taupe) 2px, transparent 2px), linear-gradient(90deg, var(--taupe) 2px, transparent 2px); background-size: 24px 24px; opacity: .35; }
.axis { position: absolute; background: var(--border); } .x-axis { left: 28px; right: 18px; bottom: 28px; height: 4px; } .y-axis { left: 28px; top: 18px; bottom: 28px; width: 4px; }
.curve { position: absolute; left: 52px; width: 220px; height: 160px; top: 38px; }
.curve::before { content: ""; position: absolute; width: 20px; height: 20px; background: currentColor; box-shadow: 24px 16px 0 currentColor, 48px 32px 0 currentColor, 72px 48px 0 currentColor, 96px 64px 0 currentColor, 120px 80px 0 currentColor, 144px 96px 0 currentColor, 168px 112px 0 currentColor, 192px 128px 0 currentColor; }
.demand-curve { color: var(--terracotta); transform: scaleY(-1); top: 22px; }
.supply-curve { color: var(--copper); }
.equilibrium-dot { position: absolute; width: 20px; height: 20px; left: 150px; top: 106px; background: var(--gold); border: 4px solid var(--border); box-shadow: 0 0 0 4px rgba(212,168,75,.32); transition: left .2s steps(4), top .2s steps(4); }
.pixel-control { display: block; margin-top: 20px; font-size: 12px; }
input[type="range"] { width: 100%; accent-color: var(--gold); }
.readout { margin-top: 12px; font-size: 12px; color: var(--border); }
.pixel-button { border: 4px solid var(--border); background: var(--gold); color: var(--walnut); padding: 12px 16px; box-shadow: 4px 4px 0 var(--sepia); border-radius: 0; font-size: 16px; cursor: pointer; }
.pixel-button:active { transform: translate(4px, 4px); box-shadow: none; }
.bank-widget { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.rate-meter { text-align: center; border: 4px solid var(--gold); padding: 16px; background: var(--walnut); } .rate-meter span { display: block; font: 12px "Silkscreen"; } .rate-meter strong { font: 32px "Silkscreen"; color: var(--gold); }
.crane-field { grid-column: 1 / -1; height: 84px; display: flex; align-items: end; gap: 18px; }
.crane-field i { width: 20px; height: 48px; background: var(--copper); border: 2px solid var(--border); position: relative; opacity: 1; transition: opacity .16s steps(2); }
.crane-field i::before { content: ""; position: absolute; left: 10px; top: -26px; width: 54px; height: 6px; background: var(--gold); border: 2px solid var(--border); }
.factory-scene { height: 160px; position: relative; border: 4px solid var(--border); background: var(--ivory); }
.factory-shell { position: absolute; left: 24px; bottom: 44px; width: 130px; height: 70px; background: var(--terracotta); border: 4px solid var(--border); box-shadow: inset 16px 0 0 var(--copper); }
.factory-shell::before { content: ""; position: absolute; left: 70px; top: -48px; width: 22px; height: 48px; background: var(--sepia); }
.conveyor { position: absolute; left: 0; right: 0; bottom: 16px; height: 28px; background: repeating-linear-gradient(90deg, var(--border) 0 16px, var(--amber) 16px 32px); border: 4px solid var(--border); animation: belt 1s steps(8) infinite; }
.conveyor i { position: absolute; bottom: 30px; width: 22px; height: 22px; background: var(--gold); border: 3px solid var(--border); animation: boxMove 3s linear infinite; }
.conveyor i:nth-child(2) { animation-delay: .7s; background: var(--sage); } .conveyor i:nth-child(3) { animation-delay: 1.4s; background: var(--copper); } .conveyor i:nth-child(4) { animation-delay: 2.1s; background: var(--terracotta); }
.trade-widget { display: grid; grid-template-columns: 100px 1fr 100px; gap: 16px; align-items: center; }
.port { height: 72px; border: 4px solid var(--border); background: var(--taupe); display: grid; place-items: center; font-size: 12px; }
.sea-lane { height: 80px; position: relative; background: repeating-linear-gradient(0deg, var(--copper) 0 8px, var(--taupe) 8px 16px); border: 4px solid var(--border); overflow: hidden; }
.cargo-ship { position: absolute; left: 5%; top: 22px; width: 74px; height: 26px; background: var(--ivory); border: 3px solid var(--border); box-shadow: inset 0 -10px 0 var(--terracotta); transition: left 1.2s steps(18); }
.cargo-ship.sailing { left: calc(100% - 86px); }
.cargo-ship i { position: absolute; top: -16px; width: 16px; height: 14px; background: var(--gold); border: 2px solid var(--border); } .cargo-ship i:nth-child(1) { left: 8px; } .cargo-ship i:nth-child(2) { left: 28px; background: var(--sage); } .cargo-ship i:nth-child(3) { left: 48px; background: var(--copper); }
.sail { grid-column: 1 / -1; }
.ticker-board { padding: 16px; background: var(--walnut); color: var(--gold); border: 4px solid var(--gold); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 12px; }
.ticker-board span { background: var(--sepia); padding: 8px; animation: lights .9s steps(2) infinite; }
.gdp-bars { height: 120px; display: flex; gap: 12px; align-items: end; padding-top: 20px; }
.gdp-bars i { flex: 1; background: var(--sage); border: 3px solid var(--gold); height: 20%; animation: growBars 2s steps(6) infinite alternate; }
.gdp-bars i:nth-child(2) { height: 38%; animation-delay:.1s; } .gdp-bars i:nth-child(3) { height: 52%; animation-delay:.2s; } .gdp-bars i:nth-child(4) { height: 60%; animation-delay:.3s; } .gdp-bars i:nth-child(5) { height: 74%; animation-delay:.4s; } .gdp-bars i:nth-child(6) { height: 88%; animation-delay:.5s; }
.chapter-final { background: linear-gradient(to bottom, transparent 0 20%, rgba(160,86,60,.28) 20% 50%, rgba(43,35,24,.55) 50% 100%); }
.closing-line { font-family: "Josefin Sans"; color: var(--amber); letter-spacing: .06em; }
.pixel-tooltip { position: fixed; z-index: 60; display: none; max-width: 260px; padding: 10px 12px; background: var(--ivory); border: 2px solid var(--border); box-shadow: 4px 4px 0 var(--sepia); color: var(--border); font-size: 12px; line-height: 1.35; transform-origin: left bottom; pointer-events: none; }
.pixel-tooltip::after { content: ""; position: absolute; left: 14px; bottom: -10px; width: 10px; height: 10px; background: var(--ivory); border-right: 2px solid var(--border); border-bottom: 2px solid var(--border); }
.pixel-tooltip.show { display: block; animation: popIn .16s steps(2); }

@keyframes termPulse { 0% { box-shadow: 0 0 0 0 var(--gold); } 55% { box-shadow: 0 0 0 3px var(--gold); } 100% { box-shadow: 0 0 0 0 var(--gold); } }
@keyframes popIn { 0% { transform: scale(0); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes cloudDrift { to { transform: translateX(160px) scale(6); } }
@keyframes lights { 50% { filter: brightness(1.35); opacity: .75; } }
@keyframes smoke { 0% { transform: translate(0,0) scale(1); opacity:.7; } 100% { transform: translate(20px,-42px) scale(2); opacity:0; } }
@keyframes walk { 50% { box-shadow: 0 -8px 0 var(--gold), 4px -12px 0 var(--gold), 8px 20px 0 var(--amber), 0 20px 0 var(--amber); } }
@keyframes coinFlip { 50% { transform: scaleX(.28); background: var(--copper); } }
@keyframes belt { to { background-position: 32px 0; } }
@keyframes boxMove { from { left: -30px; } to { left: calc(100% + 30px); } }
@keyframes growBars { to { transform: scaleY(.72); transform-origin: bottom; } }

@media (max-width: 760px) {
    .top-nav { padding: 0 12px; }
    .brand { font-size: 12px; }
    .chapter-markers { gap: 8px; }
    .chapter { min-height: 125vh; padding: 10vh 4vw; justify-content: center; }
    .lesson-card { padding: 24px; }
    .bank-widget, .trade-widget { grid-template-columns: 1fr; }
    .city-stage { transform: scale(.72); transform-origin: bottom left; width: 140%; }
    .foreground-plane { display: none; }
}