/* ENGINE layer, loaded after pixel.css: one green engine, glow instead of hard shadows,
   floating islands, a flowing engine path and a engineline that fills as you scroll. */
:root{--glow-text:0 0 22px #ffe52b59,0 0 2px #ffe52b;--island:#bfa319;--soil:#514918}
body{background:radial-gradient(1200px 520px at 50% -120px,#ffe52b1f,transparent 70%),radial-gradient(circle,#ffe52b10 1px,transparent 1.6px) 0 0/26px 26px,var(--color-paper)}
.px-h1,.px-home h2,.engine-home h2,.workbench-head h1,.guide-head h1,.pg-head h1,.px-title,.desk-agent h2,.protocol-step h2,.guide-note h3,.lab-close h2{text-shadow:none!important}
.px-h1 span,.engine-home h2 span,.px-title em,.guide-head h1 span,.workbench-head h1 span{color:var(--color-accent);text-shadow:var(--glow-text)}
.px-tag{font-family:var(--font-term)!important;font-size:20px;letter-spacing:.06em}
.px-tag::before{box-shadow:0 0 10px var(--color-accent)}
.px-btn{box-shadow:0 -3px 0 var(--drop),0 3px 0 var(--drop),-3px 0 0 var(--drop),3px 0 0 var(--drop),0 0 24px #ffe52b40!important}
.px-btn:hover{box-shadow:0 -3px 0 var(--drop),0 3px 0 var(--drop),-3px 0 0 var(--drop),3px 0 0 var(--drop),0 0 34px #ffe52b80!important}
.px-btn.ghost{box-shadow:0 -3px 0 var(--color-accent),0 3px 0 var(--color-accent),-3px 0 0 var(--color-accent),3px 0 0 var(--color-accent)!important}
.logo-crop img{width:auto!important;height:30px!important;filter:drop-shadow(0 0 8px #ffe52b80)}
.lab-top .brand b,.lab-footer .brand b{font-size:28px;text-shadow:var(--glow-text)}
@keyframes flow{to{stroke-dashoffset:-48}}
@keyframes drift{50%{transform:translate(var(--dx,0),-8px)}}
@keyframes pulse{50%{opacity:.55}}

/* Page-long engineline (wide screens) */
.engineline{position:fixed;left:26px;top:130px;bottom:60px;width:4px;background:var(--color-rule);z-index:20}
.engineline>b{position:absolute;left:0;top:0;width:100%;height:calc(var(--engine,0)*100%);background:var(--color-accent);box-shadow:0 0 14px var(--color-accent)}
.engineline i{position:absolute;left:-5px;top:calc(var(--i)*20% - 7px);width:14px;height:14px;background:var(--color-paper);box-shadow:0 0 0 3px var(--color-rule-strong)}
.engineline i::after{content:'';position:absolute;inset:0;background:var(--color-accent);box-shadow:0 0 12px var(--color-accent);opacity:clamp(0,(var(--engine,0)*5 - var(--i) + .02)*100,1)}
.engineline span{position:absolute;left:24px;top:-3px;font:16px var(--font-term);color:var(--color-dim);white-space:nowrap}
@media(max-width:1279px){.engineline{display:none}}

/* Hero */
.engine-hero{display:block!important;padding-block:56px 20px!important;text-align:center}
.engine-hero .hero-copy{max-width:900px;margin:0 auto}
.hero-mark{width:clamp(150px,18vw,230px);height:auto;image-rendering:pixelated;filter:drop-shadow(0 0 22px #ffe52b99);animation:pulse 3.2s ease-in-out infinite}
.engine-hero .px-h1{font-size:clamp(46px,6.6vw,104px);line-height:.98;margin:26px 0 22px}
.engine-hero .px-h1 span{display:inline}
.engine-hero .hero-copy p{margin:0 auto;max-width:640px;font-size:20px}
.engine-hero .hero-actions{justify-content:center;margin:34px 0 0}

/* Growth path */
.engine-path{position:relative;height:380px;margin-top:28px;background:none!important;box-shadow:none!important;overflow:visible!important}
.path-line{position:absolute;left:0;right:0;top:110px;width:100%;height:240px;overflow:visible}
.path-line path{fill:none;stroke:var(--color-accent);vector-effect:non-scaling-stroke}
.path-line .glow{stroke-width:16;opacity:.18;filter:blur(4px)}
.path-line .core{stroke-width:4;stroke-dasharray:24 12;animation:flow 1.6s linear infinite;filter:drop-shadow(0 0 6px var(--color-accent))}
.path-node{position:absolute;left:var(--x);top:var(--y);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;z-index:2;animation:drift 4s steps(6) infinite;animation-delay:calc(var(--x) * -.05s)}
.node-bubble{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 14px;background:var(--color-panel);box-shadow:0 -3px 0 var(--color-rule-strong),0 3px 0 var(--color-rule-strong),-3px 0 0 var(--color-rule-strong),3px 0 0 var(--color-rule-strong),0 0 22px #ffe52b2a;position:relative}
.node-bubble::after{content:'';position:absolute;left:50%;bottom:-11px;width:10px;height:8px;margin-left:-5px;background:var(--color-rule-strong)}
.node-bubble b{font:18px var(--font-term);letter-spacing:.08em;color:var(--color-ink)}
.island{position:relative;width:96px;height:22px;margin-top:46px;background:var(--color-accent);box-shadow:inset 0 -6px 0 var(--island),0 0 18px #ffe52b40}
.island::after{content:'';position:absolute;left:12px;right:12px;top:22px;height:14px;background:var(--soil);box-shadow:0 8px 0 -0px var(--color-panel);clip-path:polygon(0 0,100% 0,85% 100%,15% 100%)}
.island .px-sprite{position:absolute;left:50%;bottom:20px;transform:translateX(-50%)}
.path-heart{position:absolute;left:45%;top:-6px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:3}
.heart-creature{filter:drop-shadow(0 0 26px #ffe52b66);animation:drift 3s steps(4) infinite;transition:transform .2s steps(2)}
.island.big{width:220px;height:26px;margin-top:-8px}
.island.big::after{left:26px;right:26px;height:22px}
.feed{margin-top:40px}
.heart-stage{margin-top:12px;font:18px var(--font-term);color:var(--color-muted);letter-spacing:.08em}
.reacting .heart-creature{animation:grow .5s steps(3)}
@keyframes grow{40%{transform:scale(1.14)}}
.engine-path[data-stage="learn"] .n-learn .node-bubble,.engine-path[data-stage="create"] .n-create .node-bubble,.engine-path[data-stage="interact"] .n-interact .node-bubble,.engine-path:not([data-stage]) .n-grow .node-bubble,.engine-path[data-stage="grow"] .n-grow .node-bubble{box-shadow:0 -3px 0 var(--color-accent),0 3px 0 var(--color-accent),-3px 0 0 var(--color-accent),3px 0 0 var(--color-accent),0 0 30px #ffe52b66}

/* Ticker */
.engine-home .ticker-band{margin-top:30px;font-family:var(--font-term)!important;font-size:34px!important;letter-spacing:.12em}
.engine-home .ticker-band i{box-shadow:0 0 10px var(--color-paper)}

/* Growth cycle story */
.engine-home .reaction-story{height:320svh}
.engine-home .story-pin{gap:30px;justify-content:center}
.stage-track{display:flex;align-items:center;justify-content:center;gap:0;max-width:820px;width:100%;margin:0 auto}
.stage-track>i{flex:1;height:4px;background:var(--color-rule)}
.st{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--color-panel);font:18px var(--font-term);letter-spacing:.08em;color:var(--color-dim);box-shadow:0 -2px 0 var(--color-rule),0 2px 0 var(--color-rule),-2px 0 0 var(--color-rule),2px 0 0 var(--color-rule);filter:grayscale(1);opacity:.6}
.reaction-story:not([data-stage]) .st,.reaction-story[data-stage="0"] .st-0,.reaction-story[data-stage="1"] :is(.st-0,.st-1),.reaction-story[data-stage="2"] :is(.st-0,.st-1,.st-2),.reaction-story[data-stage="3"] .st{filter:none;opacity:1;color:var(--color-ink);box-shadow:0 -2px 0 var(--color-accent),0 2px 0 var(--color-accent),-2px 0 0 var(--color-accent),2px 0 0 var(--color-accent),0 0 18px #ffe52b55}
.reaction-story[data-stage="1"] .stage-track>i:nth-of-type(1),.reaction-story[data-stage="2"] .stage-track>i:is(:nth-of-type(1),:nth-of-type(2)),.reaction-story[data-stage="3"] .stage-track>i{background:var(--color-accent);box-shadow:0 0 10px var(--color-accent)}
.story-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center;max-width:1180px;width:100%;margin:0 auto}
.story-creature{position:relative;display:flex;flex-direction:column;align-items:center}
.story-creature [data-story-creature]{position:relative;z-index:1;animation:drift 3s steps(4) infinite;filter:drop-shadow(0 0 30px #ffe52b59)}
.pedestal-glow{position:absolute;left:50%;top:50%;width:360px;height:360px;transform:translate(-50%,-55%);background:radial-gradient(circle,#ffe52b26,transparent 65%)}
.pedestal{width:280px;height:28px;margin-top:-6px;background:var(--color-accent);box-shadow:inset 0 -8px 0 var(--island),0 0 24px #ffe52b55}
.story-creature .pill{margin-top:22px;padding:6px 12px;background:var(--color-panel);font:20px var(--font-term);letter-spacing:.1em;color:var(--color-accent);box-shadow:0 0 0 2px var(--color-rule-strong)}
.engine-home .story-pin header{text-align:left;max-width:none;margin:0}
.engine-home .story-pin h2{font-size:clamp(44px,5vw,80px);line-height:1;margin:16px 0 18px}
.engine-home .story-pin p{margin:0 0 24px;max-width:560px;font-size:19px}
.stage-agents{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.stage-agents li{display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--color-panel);box-shadow:0 -2px 0 var(--color-rule-strong),0 2px 0 var(--color-rule-strong),-2px 0 0 var(--color-rule-strong),2px 0 0 var(--color-rule-strong)}
.stage-agents b{display:block;font:700 22px var(--font-pixel)}
.stage-agents span{font:18px var(--font-term);color:var(--color-muted);letter-spacing:.04em}

/* Crew map */
.engine-crew{padding-block:110px 60px}
.engine-crew>header,.engine-feed>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:16px 56px;align-items:end;margin-bottom:56px}
.engine-crew>header p{grid-column:2;grid-row:1/3;margin:0 0 22px;font-size:18px;color:var(--color-muted)}
.engine-home h2{font:700 clamp(40px,4.6vw,72px)/1 var(--font-pixel);margin:16px 0 0}
.crew-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 34px}
.crew-node{position:relative;display:flex;flex-direction:column;padding:0 4px}
.crew-node:nth-child(even){margin-top:46px}
.crew-node::before{content:'';position:absolute;right:calc(100% - 2px);top:104px;width:38px;height:4px;background:repeating-linear-gradient(90deg,var(--color-accent) 0 8px,transparent 8px 14px);filter:drop-shadow(0 0 4px var(--color-accent))}
.crew-node:nth-child(4n+1)::before{display:none}
.crew-island{position:relative;height:150px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:30px;margin-bottom:22px}
.crew-island::after{content:'';position:absolute;left:10%;right:10%;bottom:0;height:24px;background:var(--color-accent);box-shadow:inset 0 -7px 0 var(--island),0 0 22px #ffe52b40}
.crew-island .px-sprite{position:relative;z-index:1}
.crew-stage{display:inline-flex;align-items:center;gap:8px;font:18px var(--font-term);letter-spacing:.1em;color:var(--color-accent)}
.crew-node h3{font:700 30px var(--font-pixel);margin:6px 0 8px}
.crew-node p{font-size:15px;line-height:1.5;color:var(--color-muted);margin:0 0 12px}
.crew-node ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crew-node li{font:16px var(--font-term);padding:2px 8px;background:var(--color-panel);color:var(--color-ink);box-shadow:0 0 0 2px var(--color-rule)}

/* Powered coins */
.engine-feed{padding-block:60px}
.engine-feed>header{grid-template-columns:1fr auto}
.engine-feed .hc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.engine-feed .hc{--f:var(--color-rule-strong)}
.engine-feed .hc:hover{--f:var(--color-accent)}

/* Close */
.engine-home .engine-close{display:block;padding-block:50px 110px;border:0!important}
.close-card{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;padding:48px 56px;background:radial-gradient(600px 300px at 20% 50%,#ffe52b1f,transparent 70%),var(--color-panel);box-shadow:0 -4px 0 var(--color-accent),0 4px 0 var(--color-accent),-4px 0 0 var(--color-accent),4px 0 0 var(--color-accent),0 0 60px #ffe52b33}
.close-art{filter:drop-shadow(0 0 30px #ffe52b66)}
.close-card p{font-size:19px;color:var(--color-muted);margin:16px 0 28px;max-width:520px}

/* Other pages pick up the glow */
.pg-head .tag-px,.eyebrow{color:var(--color-accent)}
.protocol-step .eyebrow{box-shadow:0 0 18px #ffe52b66!important}

@media(max-width:1100px){
  .crew-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crew-node:nth-child(even){margin-top:0}
  .crew-node::before{display:none}
  .engine-feed .hc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story-grid{gap:36px}
}
@media(max-width:860px){
  .engine-path{height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:36px}
  .path-line{display:none}
  .path-heart{position:static;transform:none;width:100%;margin-bottom:22px}
  .path-node{position:static;transform:none;animation:none}
  .path-node .island,.node-bubble::after{display:none}
  .node-bubble{flex-direction:row;padding:8px 10px}
  .node-bubble .px-sprite{width:22px;height:22px}
  .engine-home .reaction-story{height:300svh}
  .story-grid{grid-template-columns:1fr;gap:18px;justify-items:center}
  .story-creature [data-story-creature] svg{width:150px;height:150px}
  .pedestal{width:180px;height:18px}.pedestal-glow{width:220px;height:220px}
  .story-creature .pill{margin-top:10px;font-size:16px}
  .engine-home .story-pin header{text-align:center}
  .engine-home .story-pin p{margin-inline:auto;font-size:16px;margin-bottom:14px}
  .stage-agents li{padding:8px 10px;text-align:left}
  .stage-agents .px-sprite{width:34px;height:34px}
  .stage-agents b{font-size:18px}.stage-agents span{font-size:15px}
  .st b{display:none}.st{padding:6px}
  .engine-crew>header,.engine-feed>header{grid-template-columns:1fr}
  .engine-crew>header p{grid-column:1;grid-row:auto}
  .close-card{grid-template-columns:1fr;text-align:center;justify-items:center;padding:36px 22px;gap:24px}
  .close-card p{margin-inline:auto}
}
@media(max-width:600px){
  .engine-hero .px-h1{font-size:clamp(40px,11.5vw,60px)}
  .engine-hero .hero-copy p{font-size:17px}
  .heart-creature svg{width:150px;height:150px}
  .island.big{width:170px}
  .engine-home .story-pin h2{font-size:32px;margin:8px 0 10px}
  .engine-home .story-pin{gap:14px;padding-block:20px}
  .crew-map{gap:34px 16px}
  .crew-island{height:110px;padding-bottom:26px;margin-bottom:12px}
  .crew-island .px-sprite{width:60px;height:60px}
  .crew-node h3{font-size:22px}.crew-node p{font-size:13px}
  .crew-node li{font-size:14px}
  .engine-feed .hc-grid{gap:16px}
  .close-art svg{width:150px;height:150px}
  .engine-home .ticker-band{font-size:24px!important}
}
@media(prefers-reduced-motion:reduce){.engine-home .reaction-story{height:auto}}
/* hero fit: the path runs through the islands, the whole strip shows above the fold */
.path-line{top:0!important;height:260px!important}
.engine-hero{padding-block:30px 10px!important}
.hero-mark{width:clamp(120px,13vw,170px)}
.engine-hero .px-h1{font-size:clamp(44px,5.6vw,88px);margin:18px 0 18px}
.engine-hero .hero-actions{margin-top:26px}
@media(min-width:861px){.engine-path{height:330px;margin-top:20px}}
.lab-top .brand{gap:12px}
.engine-hero .px-h1 span{display:block}
/* engineline: labels only where there is room beside the content */
.engineline{left:18px}
.engineline span{display:none}
@media(min-width:1600px){.engineline span{display:block}}
/* crew islands: a floating platform with soil, not a full-width bar */
.crew-island::after{left:22%;right:22%}
.crew-island::before{content:'';position:absolute;left:28%;right:28%;bottom:-14px;height:14px;background:var(--soil);clip-path:polygon(0 0,100% 0,80% 100%,20% 100%)}
.crew-island{margin-bottom:34px}
/* Powered coins header: tag, title, link stacked left */
.engine-feed>header{display:flex!important;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px}
.engine-feed>header .px-tag{width:100%}
.engine-feed>header h2{margin:0}
.close-card h2{color:var(--color-ink)!important}

@media(max-width:860px){.path-heart{order:-1}.engine-path{margin-top:26px}}

/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
 * ENGINE · playful pixel machinery · yellow / olive · LIFE layout retained by request */
html,body{overflow-x:clip}
.logo-crop{width:36px!important;height:36px!important;overflow:visible!important}
.logo-crop img{width:36px!important;height:36px!important;object-fit:contain}
.hero-mark{width:76px;height:76px;animation:none}
.engine-hero .hero-copy{max-width:1050px}
.engine-hero .px-h1{max-width:1000px;margin:18px auto 22px;overflow-wrap:anywhere;min-width:0}
.engine-hero .hero-copy p{max-width:720px}
.engine-gear{overflow:visible}
.engine-rotor{transform-origin:150px 150px;animation:engine-spin 24s linear infinite}
.engine-gear[data-power="2"] .engine-rotor{animation-duration:20s}
.engine-gear[data-power="3"] .engine-rotor{animation-duration:16s}
.engine-gear[data-power="4"] .engine-rotor{animation-duration:12s}
@keyframes engine-spin{to{transform:rotate(360deg)}}
.px-btn,.nav-links a,.f-links a{white-space:nowrap}
@media(max-width:860px){.hero-mark{width:64px;height:64px}.engine-hero .hero-copy p{font-size:17px}.lab-top .brand b{font-size:25px}.engine-path .path-heart{min-height:240px}}
@media(prefers-reduced-motion:reduce){.engine-rotor{animation:none!important}}