:root{
  /* typography compliance: keep evolved-minimal system precise. Inter** Mono** coordinates */
  --navy:#071426;
  --metal:#35536B;
  --steel:#A8B8C5;
  --lime:#B8FF4D;
  --cream:#F5F1DC;
  --coral:#FF6B4A;
  --shadow:#02070D;
  --mono:"Space Mono", monospace;
  --body:"Inter", sans-serif;
  --display:"Bebas Neue", sans-serif;
  --progress:0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--shadow)}
body{margin:0;color:var(--cream);font-family:var(--body);background:radial-gradient(circle at 30% 0%,rgba(53,83,107,.72),transparent 38%),linear-gradient(135deg,var(--shadow),var(--navy) 42%,#0a1d32 100%);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,rgba(184,255,77,.03) 1px,transparent 1px),linear-gradient(0deg,rgba(168,184,197,.035) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(circle at center,black,transparent 78%);pointer-events:none;z-index:1}
.grain{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.33;background-image:radial-gradient(circle at 20% 10%,rgba(245,241,220,.28) 0 1px,transparent 1.5px),radial-gradient(circle at 80% 40%,rgba(168,184,197,.25) 0 1px,transparent 1.8px),radial-gradient(circle at 40% 80%,rgba(184,255,77,.12) 0 1px,transparent 1.4px);background-size:23px 31px,37px 41px,19px 29px;mix-blend-mode:screen}
.hud-frame{position:fixed;inset:18px;z-index:20;pointer-events:none;border:1px solid rgba(168,184,197,.22);box-shadow:0 0 34px rgba(184,255,77,.08),inset 0 0 55px rgba(53,83,107,.12)}
.hud-frame:before,.hud-frame:after{content:"";position:absolute;inset:-1px;border:1px solid transparent;background:linear-gradient(90deg,transparent,rgba(184,255,77,.75),transparent) border-box;clip-path:inset(0 calc(100% - (var(--progress)*1%)) 96% 0);filter:drop-shadow(0 0 8px var(--lime))}
.hud-frame:after{clip-path:inset(96% 0 0 calc(100% - (var(--progress)*1%)));background:linear-gradient(90deg,transparent,rgba(255,107,74,.7),transparent) border-box}
.hud-line{position:absolute;left:28px;right:28px;display:flex;justify-content:space-between;font:700 11px/1 var(--mono);letter-spacing:.14em;color:rgba(168,184,197,.88);text-transform:uppercase}.hud-top{top:15px}.hud-bottom{bottom:15px}.corner{position:absolute;width:42px;height:42px;border-color:var(--lime);opacity:.75}.corner-tl{left:-2px;top:-2px;border-left:2px solid;border-top:2px solid}.corner-tr{right:-2px;top:-2px;border-right:2px solid;border-top:2px solid}.corner-bl{left:-2px;bottom:-2px;border-left:2px solid;border-bottom:2px solid}.corner-br{right:-2px;bottom:-2px;border-right:2px solid;border-bottom:2px solid}
.nav-rail{position:fixed;right:32px;top:50%;transform:translateY(-50%);z-index:25;display:flex;flex-direction:column;gap:16px}.rail-dot{width:42px;height:16px;color:var(--steel);font:700 9px var(--mono);text-decoration:none;position:relative;letter-spacing:.12em}.rail-dot:before{content:"";position:absolute;right:0;top:6px;width:28px;height:2px;background:rgba(168,184,197,.35);transition:.35s}.rail-dot span{opacity:0;transform:translateX(-6px);display:block;transition:.35s}.rail-dot.active{color:var(--lime)}.rail-dot.active:before{width:42px;background:var(--lime);box-shadow:0 0 16px var(--lime)}.rail-dot.active span{opacity:1;transform:none}
.scene{min-height:100vh;position:relative;display:grid;grid-template-columns:minmax(42px,1fr) repeat(10,minmax(0,112px)) minmax(42px,1fr);align-items:center;padding:90px 0;isolation:isolate;overflow:hidden}.scene:before{content:attr(data-chapter);position:absolute;left:62px;top:78px;font:700 11px var(--mono);color:var(--lime);letter-spacing:.22em}.scene:after{content:attr(data-word);position:absolute;right:7vw;bottom:5vh;font:400 clamp(96px,18vw,260px)/.78 var(--display);letter-spacing:.01em;color:rgba(168,184,197,.045);z-index:-1}.hero-copy{grid-column:2/7;z-index:4}.kicker{font:700 12px var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--lime);margin:0 0 20px}.hero-copy h1,.chapter-copy h2{font-family:var(--display);font-weight:400;text-transform:uppercase;margin:0;letter-spacing:.015em}.hero-copy h1{font-size:clamp(78px,15vw,218px);line-height:.78;text-shadow:0 0 32px rgba(184,255,77,.18)}.lead,.chapter-copy p:not(.kicker){font-size:clamp(16px,1.45vw,22px);line-height:1.7;color:rgba(245,241,220,.78);max-width:620px}.chapter-copy h2{font-size:clamp(92px,13vw,192px);line-height:.8;color:var(--cream)}.side-left{grid-column:2/6}.side-right{grid-column:8/12}.center-copy{grid-column:4/10;text-align:center;align-self:start;margin-top:4vh}.center-copy p{margin-left:auto;margin-right:auto}.final-copy{grid-column:3/11;text-align:center;z-index:4}.final-copy p{margin-left:auto;margin-right:auto}
.scene-light{position:absolute;left:5%;right:5%;bottom:0;height:42vh;background:radial-gradient(ellipse at center,rgba(184,255,77,.18),rgba(53,83,107,.18) 42%,transparent 70%);filter:blur(12px)}.counter-shelf{position:absolute;left:7%;right:7%;bottom:14%;height:16px;background:linear-gradient(90deg,transparent,var(--metal),var(--steel),var(--metal),transparent);box-shadow:0 0 52px rgba(184,255,77,.22);border-radius:50%}
.counter-object{grid-column:8/12;width:min(38vw,420px);justify-self:center;position:relative;filter:drop-shadow(0 34px 50px rgba(0,0,0,.45))}.counter-object svg,.scan-panel svg,.new-object svg{width:100%;overflow:visible}.object-fill{fill:rgba(245,241,220,.08);stroke:rgba(245,241,220,.22);stroke-width:1.5}.draw-stroke{fill:none;stroke:var(--steel);stroke-width:3;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 4.8s ease-in-out infinite alternate}.steam{fill:none;stroke:var(--lime);stroke-width:5;stroke-linecap:round;opacity:.68;stroke-dasharray:120;animation:steam 5s ease-in-out infinite}.orbit,.ring,.spoon{fill:none;stroke:var(--coral);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 18;opacity:.72}.object-label,.mono-tag{font:700 11px var(--mono);letter-spacing:.16em;color:var(--steel);text-transform:uppercase}.object-label{position:absolute;left:12%;bottom:4%;background:rgba(2,7,13,.72);padding:10px 14px;border:1px solid rgba(168,184,197,.25)}
.blob{position:absolute;border-radius:45% 55% 62% 38%/46% 39% 61% 54%;filter:blur(.2px);mix-blend-mode:screen;animation:morph 12s ease-in-out infinite alternate;z-index:-1}.field-a{width:34vw;height:29vw;background:rgba(184,255,77,.11);right:7%;top:12%}.field-b{width:23vw;height:20vw;background:rgba(255,107,74,.14);left:12%;bottom:9%;animation-delay:-4s}.field-c{width:31vw;height:25vw;background:rgba(53,83,107,.62);left:42%;top:9%}.field-d{width:18vw;height:18vw;background:rgba(184,255,77,.16);right:17%;bottom:18%;animation-delay:-7s}.field-e{width:30vw;height:30vw;background:rgba(255,107,74,.16);left:10%;top:22%}
.scan-panel{grid-column:7/12;position:relative;min-height:560px;border:1px solid rgba(168,184,197,.28);background:linear-gradient(150deg,rgba(7,20,38,.72),rgba(53,83,107,.2));box-shadow:inset 0 0 80px rgba(184,255,77,.07);display:grid;place-items:center;overflow:hidden}.scan-panel:before,.bloom-stage:before,.new-object:before,.receipt-strip:before{content:"";position:absolute;inset:16px;border:1px solid rgba(184,255,77,.35);clip-path:polygon(0 0,26% 0,26% 2px,2px 2px,2px 26%,0 26%,0 0,100% 0,100% 26%,calc(100% - 2px) 26%,calc(100% - 2px) 2px,74% 2px,74% 0,100% 0,100% 100%,74% 100%,74% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 74%,100% 74%,100% 100%,0 100%,0 74%,2px 74%,2px calc(100% - 2px),26% calc(100% - 2px),26% 100%,0 100%)}.cup-line{max-width:420px}.scan-beam{position:absolute;left:0;right:0;height:2px;background:var(--lime);box-shadow:0 0 20px var(--lime),0 0 90px var(--lime);animation:beam 4s ease-in-out infinite}.barcode{position:absolute;top:48px;right:46px;display:flex;gap:5px;height:72px;align-items:stretch}.barcode i{display:block;width:3px;background:rgba(245,241,220,.6)}.barcode i:nth-child(2n){width:8px;background:rgba(184,255,77,.75)}.lime-node{fill:var(--lime);filter:drop-shadow(0 0 12px var(--lime))}.coral-node{fill:var(--coral)}.scan-panel .mono-tag{position:absolute;bottom:44px;left:46px}
.bloom-stage{grid-column:2/12;min-height:62vh;position:relative;display:grid;place-items:center}.bloom-core{font:400 clamp(100px,18vw,250px)/1 var(--display);color:var(--lime);text-shadow:0 0 48px rgba(184,255,77,.3);z-index:3}.morph{position:absolute;border-radius:50%;background:rgba(245,241,220,.08);border:1px solid rgba(168,184,197,.22);animation:morph 9s ease-in-out infinite alternate}.m1{width:240px;height:170px;background:rgba(184,255,77,.18);left:20%;top:25%}.m2{width:310px;height:210px;background:rgba(255,107,74,.14);right:22%;top:30%;animation-delay:-3s}.m3{width:170px;height:220px;background:rgba(53,83,107,.46);left:37%;bottom:10%;animation-delay:-6s}.m4{width:150px;height:120px;background:rgba(245,241,220,.11);right:40%;bottom:17%;animation-delay:-1s}.contour{position:absolute;width:min(78vw,900px);stroke:rgba(245,241,220,.27);fill:none;stroke-width:1.4;stroke-dasharray:12 10;animation:float 10s ease-in-out infinite}
.new-object{grid-column:2/8;position:relative;min-height:520px;display:grid;place-items:center;border:1px solid rgba(168,184,197,.18);background:radial-gradient(circle at center,rgba(184,255,77,.1),transparent 60%)}.new-object .mono-tag{position:absolute;bottom:42px;left:42px}.receipt-strip{grid-column:3/11;position:relative;display:flex;justify-content:space-around;gap:14px;padding:34px 28px;margin-bottom:20vh;background:rgba(245,241,220,.08);border:1px solid rgba(168,184,197,.25);transform:rotate(-1.5deg)}.receipt-strip span{font:400 clamp(28px,5vw,74px) var(--display);color:var(--cream);letter-spacing:.03em}.dawn-orb{position:absolute;width:46vw;height:46vw;border-radius:50%;left:50%;top:8%;transform:translateX(-50%);background:radial-gradient(circle,var(--coral),rgba(184,255,77,.2) 32%,transparent 68%);opacity:.28;filter:blur(18px)}.loop-mark{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);width:190px;height:190px}.loop-mark span{position:absolute;inset:0;border:2px solid rgba(184,255,77,.55);border-radius:50%;border-left-color:transparent;animation:spin 8s linear infinite}.loop-mark span:nth-child(2){inset:28px;border-color:rgba(255,107,74,.55);border-right-color:transparent;animation-duration:11s}.loop-mark span:nth-child(3){inset:58px;border-color:rgba(168,184,197,.45);border-bottom-color:transparent;animation-duration:6s}
.scanner-target{transition:transform .7s ease,filter .7s ease,border-color .7s ease}.scanner-target.in-view{transform:translateY(-8px);filter:drop-shadow(0 0 28px rgba(184,255,77,.18))}.chapter-copy{transition:opacity .8s ease,transform .8s ease;opacity:.45;transform:translateY(24px)}.chapter-copy.in-view,.hero-copy.in-view{opacity:1;transform:none}.hero-copy{transition:.8s ease}
@keyframes draw{to{stroke-dashoffset:0}}@keyframes steam{50%{stroke-dashoffset:-80;opacity:.32;transform:translateY(-8px)}}@keyframes morph{to{border-radius:59% 41% 38% 62%/36% 60% 40% 64%;transform:translate3d(18px,-22px,0) rotate(8deg)}}@keyframes beam{0%,100%{top:15%;opacity:.2}50%{top:82%;opacity:1}}@keyframes float{50%{transform:translateY(-18px) scale(1.03)}}@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:850px){.scene{grid-template-columns:24px repeat(6,1fr) 24px;padding:100px 0}.hero-copy,.side-left,.side-right,.center-copy,.final-copy{grid-column:2/8;text-align:left}.counter-object,.scan-panel,.bloom-stage,.new-object,.receipt-strip{grid-column:2/8;width:auto}.counter-object{margin-top:40px}.nav-rail{display:none}.hud-frame{inset:10px}.scene:after{right:3vw}.receipt-strip{flex-wrap:wrap}.receipt-strip span{font-size:38px}}