markup (index.html) as semantic markers only — they no longer carry their own background; see body[data-nulvr-chapter] above. */ .chapter::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:30;opacity:.12;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E")} .chapter::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:calc(67px + env(safe-area-inset-top));height:1px;background:rgba(17,17,17,.09);z-index:45;transform-origin:left;transform:scaleX(0)} body.experience-live .chapter.is-active::before{animation:lineIn .9s var(--ease) .05s forwards} @keyframes lineIn{to{transform:scaleX(1)}} .chapter-head{position:absolute;z-index:50;left:0;right:0;top:0;height:calc(70px + env(safe-area-inset-top));padding:calc(21px + env(safe-area-inset-top)) var(--pad) 0;display:flex;justify-content:space-between;align-items:flex-start} .brand{font-size:14px;font-weight:700;letter-spacing:.16em;white-space:nowrap}.brand i{font-style:normal;font-size:7px;font-weight:600;letter-spacing:.18em;color:#777;vertical-align:2px} .text-button{font-size:8px;font-weight:650;letter-spacing:.16em;cursor:pointer} .head-state{display:flex;align-items:center;gap:7px;font-size:6.5px;letter-spacing:.14em;color:#686868}.head-state .text-button{margin-left:8px;color:var(--ink)} .live-dot{width:5px;height:5px;border-radius:50%;background:#6c8768;box-shadow:0 0 0 3px rgba(108,135,104,.08)} .eyebrow{font-size:8px;line-height:1.3;letter-spacing:.18em;font-weight:650;color:#5c5c5c;margin:0 0 11px} h1,h2,h3,p{margin-top:0}h1,h2{font-weight:700;letter-spacing:-.048em;line-height:.93;margin-bottom:15px}h1{font-size:clamp(39px,11.2vw,48px)}h2{font-size:clamp(36px,10.5vw,45px)} .body-copy{font-size:12.5px;line-height:1.49;color:#343434;max-width:330px;margin-bottom:0} .reveal-block{opacity:0;transform:translateY(16px)}.chapter.is-active .reveal-block{animation:reveal var(--chapter-in) var(--ease) .08s forwards}@keyframes reveal{to{opacity:1;transform:none}} .chapter-foot{position:absolute;z-index:50;left:var(--pad);right:var(--pad);bottom:calc(17px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:flex-end;font-size:7px;line-height:1.35;letter-spacing:.14em;color:#606060} /* Immediate opening experience */ .startup-item{opacity:0;transform:translateY(10px)} body.experience-live #laboratory.is-active .startup-item{animation:startupReveal .72s var(--ease) forwards} body.experience-live #laboratory.is-active .callout--a{animation-delay:.18s}body.experience-live #laboratory.is-active .callout--b{animation-delay:.28s}body.experience-live #laboratory.is-active .callout--c{animation-delay:.36s}body.experience-live #laboratory.is-active .hero-copy{animation-delay:.24s}body.experience-live #laboratory.is-active .hero-meta{animation-delay:.42s} @keyframes startupReveal{to{opacity:1;transform:none}} .hero-drafting{position:absolute;z-index:1;inset:66px 0 80px;pointer-events:none}.hero-drafting svg{width:100%;height:100%;display:block}.draft-lines>*{fill:none;stroke:#596167;stroke-width:.55;opacity:.26;stroke-dasharray:900;stroke-dashoffset:900}.draft-nodes circle{fill:var(--brass);opacity:0} body.experience-live #laboratory.is-active .draft-lines>*{animation:draw 1.25s var(--ease) .05s forwards}body.experience-live #laboratory.is-active .draft-nodes circle{animation:nodeIn .35s ease .7s forwards} @keyframes draw{to{stroke-dashoffset:0}}@keyframes nodeIn{to{opacity:.7}} /* Full-screen menu */ .menu{position:fixed;z-index:1100;inset:0;background:var(--paper);padding:calc(22px + env(safe-area-inset-top)) var(--pad) calc(24px + env(safe-area-inset-bottom));visibility:hidden;clip-path:circle(0 at calc(100% - 36px) 34px);transition:clip-path .48s var(--ease),visibility .48s} .menu.is-open{visibility:visible;clip-path:circle(165% at calc(100% - 36px) 34px)} .menu-head{display:flex;justify-content:space-between;align-items:flex-start}.menu-head small{display:block;margin-top:5px;font-size:6px;letter-spacing:.15em;color:#777}.brand--menu{font-size:17px} .menu ol{list-style:none;padding:0;margin:76px 0 0}.menu li{border-bottom:1px solid rgba(0,0,0,.11)}.menu a{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:12px 0}.menu a span{font-size:7px;letter-spacing:.14em;color:#777}.menu a b{font-size:23px;letter-spacing:-.035em;font-weight:600}.menu a em{font-style:normal;font-size:6px;letter-spacing:.08em;color:#777;text-align:right;max-width:112px;line-height:1.35} .menu-foot{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(24px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;font-size:6px;letter-spacing:.16em;color:#707070} /* Engine field */ .engine-window{position:absolute;z-index:2;overflow:visible;pointer-events:none}.engine-square{position:absolute;aspect-ratio:1/1;transform:translateZ(0);overflow:visible} .engine-blueprint{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;pointer-events:none;user-select:none;-webkit-user-drag:none;mix-blend-mode:multiply;filter:grayscale(.52) contrast(.95) saturate(.48);opacity:.075} .engine-blueprint--hero{opacity:.12;filter:grayscale(.42) contrast(.97) saturate(.58)} .engine-3d-canvas{position:absolute;inset:-3%;width:106%!important;height:106%!important;display:block;z-index:4;pointer-events:none;opacity:0;transition:opacity .45s ease;filter:drop-shadow(0 12px 24px rgba(25,25,25,.09))}.engine-3d-canvas.is-ready{opacity:1} .engine-render-status{position:absolute;z-index:7;left:6.5%;top:7%;font-size:5.5px;letter-spacing:.14em;color:#777;padding:4px 6px;border:1px solid rgba(0,0,0,.09);background:rgba(251,250,247,.62);backdrop-filter:blur(3px)}.engine-render-status.is-live{color:#6f5324;border-color:rgba(166,124,53,.25)} .engine-window::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:radial-gradient(ellipse at 42% 43%,rgba(255,255,255,.78),rgba(255,255,255,0) 54%)} .hero-engine{left:0;right:0;top:58px;height:68vh;min-height:500px;will-change:transform;transform:translate3d(calc(var(--mx,0)*6px),calc(var(--my,0)*5px),0)} .engine-square--hero{width:clamp(650px,174vw,735px);left:clamp(-244px,-57vw,-194px);top:-20px}.hero-vignette{position:absolute;z-index:6;left:0;right:0;bottom:-2px;height:34%;background:linear-gradient(to bottom,rgba(244,242,237,0),rgba(244,242,237,.52) 45%,var(--ivory) 88%)} .hero-copy{position:absolute;z-index:20;left:var(--pad);right:var(--pad);bottom:95px}.hero-copy h1{max-width:355px}.hero-copy .body-copy{max-width:335px;font-size:11.5px} .hero-meta{position:absolute;z-index:20;left:var(--pad);right:var(--pad);top:82px;display:flex;justify-content:space-between;gap:7px;font-size:5.2px;letter-spacing:.13em;color:#6f6f6f} .callout{position:absolute;z-index:19;font-size:5.4px;letter-spacing:.12em;line-height:1.35;color:#676767}.callout span,.callout strong,.callout small{display:block}.callout strong{font-size:7px;color:var(--brass-deep);margin:3px 0 4px}.callout small{font-size:4.7px;letter-spacing:.08em}.callout::before{content:"";position:absolute;height:1px;background:rgba(17,17,17,.35);top:5px}.callout--a{left:var(--pad);top:152px;width:100px}.callout--a::before{left:93px;width:42px}.callout--b{right:var(--pad);top:203px;text-align:right;width:98px}.callout--b::before{right:91px;width:38px}.callout--c{right:var(--pad);top:465px;text-align:right;width:98px}.callout--c::before{right:92px;width:41px} .chapter-foot--core{font-size:7px}.gesture-mark{font-size:17px;line-height:.7;animation:gesture 1.8s ease-in-out infinite}@keyframes gesture{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(4px);opacity:1}} /* Research */ .research-grid,.alps-grid{position:absolute;inset:0;opacity:.34;background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,transparent 3%,#000 16%,#000 79%,transparent 96%)} .research-copy{position:absolute;z-index:15;left:var(--pad);right:var(--pad);top:104px}.research-copy h2{max-width:355px}.research-orbit{position:absolute;z-index:1;right:-122px;top:186px;width:362px;height:362px;border:1px solid rgba(0,0,0,.12);border-radius:50%}.research-orbit i{position:absolute;inset:12%;border:1px solid rgba(0,0,0,.12);border-radius:50%}.research-orbit i:nth-child(2){inset:27%}.research-orbit i:nth-child(3){inset:41%;border-color:rgba(166,124,53,.38)}.research-orbit b{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:var(--brass);transform:translate(-50%,-50%)} .chapter.is-active .research-orbit{animation:orbitEnter .9s var(--ease) forwards}@keyframes orbitEnter{from{transform:translate(24px,12px) rotate(-8deg);opacity:0}to{transform:none;opacity:1}} .research-sequence{position:absolute;z-index:10;left:var(--pad);right:var(--pad);bottom:62px;border-top:1px solid rgba(0,0,0,.16)}.research-sequence>div{display:grid;grid-template-columns:40px 82px 1fr;align-items:center;min-height:67px;border-bottom:1px solid rgba(0,0,0,.13)}.research-sequence small{font-size:6px;letter-spacing:.13em;color:#777}.research-sequence strong{font-size:10px;letter-spacing:.13em}.research-sequence p{font-size:7.5px;line-height:1.4;color:#666;margin:0} /* Systems */ .systems-copy{position:absolute;z-index:20;top:91px;left:var(--pad);right:var(--pad)}.systems-copy .body-copy{max-width:315px;font-size:10.8px}.systems-engine{left:0;right:0;top:205px;height:57vh;min-height:410px}.engine-square--systems{width:clamp(620px,162vw,690px);left:clamp(-265px,-58vw,-198px);top:-12px}.system-index{position:absolute;z-index:20;left:var(--pad);right:var(--pad);bottom:42px;display:grid;grid-template-columns:repeat(7,1fr);gap:2px;border-top:1px solid rgba(0,0,0,.14);padding-top:7px}.system-index span{font-size:4.8px;letter-spacing:.07em;color:#666;text-align:center} /* Evidence */ .evidence-copy{position:absolute;z-index:20;top:91px;left:var(--pad);right:var(--pad)}.evidence-engine{left:0;right:0;top:167px;height:59vh;min-height:420px}.engine-square--evidence{width:clamp(585px,152vw,650px);left:clamp(-168px,-38vw,-118px);top:-8px}.evidence-chain{position:absolute;z-index:20;left:var(--pad);right:var(--pad);bottom:84px;display:flex;align-items:center;gap:5px;white-space:nowrap}.evidence-chain span{font-size:4.8px;letter-spacing:.09em;color:#5e5e5e}.evidence-chain i{height:1px;flex:1;background:rgba(0,0,0,.2);position:relative}.evidence-chain i::after{content:"";position:absolute;right:0;top:-1.5px;width:4px;height:4px;border-radius:50%;background:var(--brass)} .verification-line{position:absolute;z-index:20;left:var(--pad);right:var(--pad);bottom:52px;border-top:1px solid rgba(0,0,0,.14);padding-top:7px;display:flex;justify-content:space-between;font-size:6px;letter-spacing:.13em}.verification-line strong{color:var(--brass-deep)} /* Standards */ .standards-copy{position:absolute;z-index:15;top:96px;left:var(--pad);right:var(--pad)}.standards-copy .body-copy{font-size:10.8px;max-width:310px}.principles-list{position:absolute;z-index:15;left:var(--pad);right:var(--pad);top:304px;margin:0;padding:0;list-style:none;border-top:1px solid rgba(0,0,0,.15)}.principles-list li{display:grid;grid-template-columns:34px 1fr;align-items:center;min-height:53px;border-bottom:1px solid rgba(0,0,0,.15)}.principles-list span{font-size:6px;color:#747474;letter-spacing:.13em}.principles-list strong{font-size:9.6px;letter-spacing:.07em;font-weight:600}.standards-mark{position:absolute;z-index:1;right:-24px;top:139px;width:180px;height:180px;border:1px solid rgba(0,0,0,.10);border-radius:50%;display:grid;place-content:center;text-align:center;transform:rotate(-14deg)}.standards-mark::before,.standards-mark::after{content:"";position:absolute;border:1px solid rgba(0,0,0,.08);border-radius:50%;inset:18px}.standards-mark::after{inset:39px;border-color:rgba(166,124,53,.28)}.standards-mark span{font-size:7px;letter-spacing:.2em}.standards-mark b{font-size:46px;line-height:.9;font-weight:500;color:rgba(0,0,0,.16)} /* ALPS */ .alps-copy{position:absolute;z-index:15;top:96px;left:var(--pad);right:var(--pad)}.alps-title{font-size:clamp(82px,25vw,112px);letter-spacing:-.07em;margin:0;line-height:.76}.alps-subtitle{font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:9px 0 19px;color:var(--brass-deep)}.alps-copy .body-copy{font-size:10.8px;max-width:315px}.alps-seal{position:absolute;z-index:2;right:-72px;top:113px;width:245px;height:245px;border:1px solid rgba(0,0,0,.12);border-radius:50%;display:grid;place-content:center}.alps-seal i{position:absolute;border:1px solid rgba(0,0,0,.10);border-radius:50%;inset:13%}.alps-seal i:nth-of-type(2){inset:29%;border-color:rgba(166,124,53,.28)}.alps-seal i:nth-of-type(3){inset:43%}.alps-seal span{font-size:6px;letter-spacing:.18em;color:#666}.status-grid{position:absolute;z-index:15;left:var(--pad);right:var(--pad);top:365px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(0,0,0,.15);border-left:1px solid rgba(0,0,0,.15)}.status-grid div{min-height:63px;border-right:1px solid rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.15);padding:10px}.status-grid span,.status-grid strong{display:block}.status-grid span{font-size:5.5px;letter-spacing:.14em;color:#777;margin-bottom:6px}.status-grid strong{font-size:8px;letter-spacing:.1em}.pipeline{position:absolute;z-index:15;left:var(--pad);right:var(--pad);bottom:106px}.pipeline-line{height:1px;background:rgba(0,0,0,.2);position:relative}.pipeline-line i{position:absolute;top:-3px;left:0;width:7px;height:7px;border:1px solid var(--brass-deep);background:var(--paper);border-radius:50%;transform:translateX(-50%)}.pipeline-labels{display:grid;grid-template-columns:repeat(6,1fr);margin-top:8px}.pipeline-labels span{font-size:4.7px;letter-spacing:.07em;text-align:center;color:#777}.pipeline-labels span:first-child{text-align:left}.pipeline-labels span:last-child{text-align:right}.alps-statement{position:absolute;z-index:15;left:var(--pad);bottom:53px;font-size:9px;line-height:1.5;letter-spacing:.08em;font-weight:600;margin:0} /* Access */ .access-mark{position:absolute;right:-30px;top:116px;font-size:300px;line-height:.8;font-weight:700;letter-spacing:-.1em;color:rgba(0,0,0,.035)}.access-copy{position:absolute;z-index:15;left:var(--pad);right:var(--pad);top:127px}.access-copy h2{font-size:43px}.cta-stack{position:absolute;z-index:15;left:var(--pad);right:var(--pad);top:458px;display:grid;gap:10px}.cta{height:48px;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:8px;letter-spacing:.15em;font-weight:600;cursor:pointer}.cta-primary{background:var(--ink);color:var(--paper)}.cta-secondary{background:transparent;color:var(--ink)}.access-footer{position:absolute;z-index:15;left:var(--pad);right:var(--pad);bottom:calc(20px + env(safe-area-inset-bottom));display:grid;gap:5px;font-size:7px;letter-spacing:.08em;color:#666}.access-footer strong{font-size:9px;color:var(--ink)}.access-footer small{font-size:6.5px;max-width:300px;line-height:1.4}.access-footer .count{position:absolute;right:0;bottom:0} /* Persistent stage rail */ .experience-rail{position:fixed;z-index:80;left:50%;bottom:calc(36px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(230px,58vw);display:grid;grid-template-columns:18px 1fr 58px;gap:8px;align-items:center;font-size:5.5px;letter-spacing:.13em;color:#6a6a6a;pointer-events:none;mix-blend-mode:multiply}.rail-track{height:1px;background:rgba(0,0,0,.14);position:relative}.rail-track i{display:block;height:1px;width:0;background:var(--brass-deep);transition:width .38s var(--ease)}#railName{text-align:right;white-space:nowrap} #laboratory .chapter-foot,#research .chapter-foot,#systems .chapter-foot,#evidence .chapter-foot,#standards .chapter-foot,#alps .chapter-foot{bottom:calc(14px + env(safe-area-inset-bottom))} /* Contact */ .contact-sheet{position:fixed;z-index:1150;inset:0;background:rgba(17,17,17,.17);display:flex;align-items:flex-end;visibility:hidden;opacity:0;transition:.3s var(--ease)}.contact-sheet.is-open{visibility:visible;opacity:1}.contact-panel{width:100%;background:var(--paper);padding:24px var(--pad) calc(24px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .4s var(--ease)}.contact-sheet.is-open .contact-panel{transform:translateY(0)}.contact-panel-head{display:flex;justify-content:space-between;font-size:7px;letter-spacing:.14em}.contact-panel h3{font-size:29px;line-height:1;letter-spacing:-.035em;margin:50px 0 16px}.contact-panel p{font-size:12px;line-height:1.5;color:#444;margin-bottom:28px}.noscript{position:fixed;z-index:2000;inset:0;display:grid;place-content:center;background:var(--ivory);padding:30px;text-align:center;font-size:12px} /* Compact handsets */ @media(max-height:760px){ .hero-engine{height:66vh;min-height:458px}.engine-square--hero{width:615px;left:-207px;top:-25px}.hero-copy{bottom:84px}.hero-copy h1{font-size:37px}.hero-copy .body-copy{font-size:10.5px}.callout--c{display:none}.hero-meta{top:76px} .research-copy{top:88px}.research-sequence>div{min-height:58px}.research-orbit{top:165px} .systems-copy,.evidence-copy{top:82px}.systems-copy h2,.evidence-copy h2{font-size:35px}.systems-engine{top:180px;height:55vh;min-height:365px}.engine-square--systems{width:575px;left:-214px;top:-18px}.evidence-engine{top:155px;height:56vh;min-height:365px}.engine-square--evidence{width:535px;left:-116px;top:-12px} .standards-copy{top:84px}.principles-list{top:264px}.principles-list li{min-height:45px}.standards-mark{top:125px} .alps-copy{top:82px}.alps-title{font-size:78px}.status-grid{top:320px}.pipeline{bottom:95px}.alps-statement{bottom:43px}.alps-seal{top:92px} .access-copy{top:108px}.access-copy h2{font-size:37px}.cta-stack{top:405px} .experience-rail{bottom:calc(30px + env(safe-area-inset-bottom))} } @media(max-width:370px){:root{--pad:20px}.body-copy{font-size:11.5px}.engine-square--hero{left:-208px}.engine-square--systems{left:-238px}.engine-square--evidence{left:-130px}.system-index span{font-size:4.2px}.callout--b{right:18px}.callout--a{left:18px}.menu a b{font-size:21px}.menu a em{max-width:90px}} @media(min-width:431px){:root{--pad:28px}} /* Desktop becomes a wider engineering plate, not a scaled phone */ @media(min-width:800px){ :root{--pad:48px}.chapter-head{padding-top:30px}.chapter::before{top:82px}.brand{font-size:16px}.head-state{font-size:7px} .hero-engine{top:72px;height:82vh}.engine-square--hero{width:min(980px,78vw);left:calc(50% - min(490px,39vw));top:-44px}.hero-copy{left:7vw;bottom:8vh;width:390px}.hero-copy h1{font-size:58px}.hero-copy .body-copy{font-size:12px}.hero-meta{top:100px}.callout--a{left:7vw;top:190px}.callout--b{right:7vw;top:230px}.callout--c{right:7vw;top:auto;bottom:170px} .research-copy,.systems-copy,.evidence-copy,.standards-copy,.alps-copy,.access-copy{left:7vw;right:auto;width:390px}.research-copy{top:140px}.research-sequence{left:auto;right:7vw;width:42vw;bottom:11vh}.research-orbit{width:520px;height:520px;right:11vw;top:135px} .systems-copy,.evidence-copy{top:132px}.systems-engine,.evidence-engine{left:38vw;right:0;top:90px;height:82vh}.engine-square--systems,.engine-square--evidence{width:min(880px,63vw);left:0;top:0}.system-index{left:7vw;right:7vw;bottom:7vh}.evidence-chain{left:7vw;right:7vw;bottom:10vh}.verification-line{left:7vw;right:7vw;bottom:7vh} .standards-copy{top:132px}.principles-list{left:auto;right:7vw;width:46vw;top:150px}.standards-mark{right:38vw;top:340px;width:220px;height:220px} .alps-copy{top:132px}.alps-title{font-size:132px}.status-grid{left:auto;right:7vw;width:42vw;top:180px}.pipeline{left:7vw;right:7vw;bottom:13vh}.alps-statement{left:7vw;bottom:8vh}.alps-seal{right:17vw;top:400px;width:310px;height:310px} .access-copy{top:160px}.cta-stack{left:7vw;right:auto;width:390px;top:430px}.access-footer{left:auto;right:7vw;width:340px;bottom:8vh}.access-mark{right:8vw;font-size:520px;top:100px} .experience-rail{bottom:4vh;width:280px} } @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.gesture-mark{animation:none!important}.engine-3d-canvas{transition:none}} /* v10 — one continuous live NULVR machine across the whole experience. */ .continuity-engine{position:fixed;z-index:8;left:0;right:0;top:66px;height:70vh;min-height:500px;pointer-events:none;overflow:visible;opacity:1;transition:top .85s var(--ease),height .85s var(--ease),opacity .5s ease,transform .85s var(--ease);will-change:transform,top,height} .continuity-plate{position:absolute;left:50%;top:50%;width:clamp(690px,176vw,770px);aspect-ratio:1/1;transform:translate(-50%,-50%);overflow:visible} .continuity-reference{position:absolute;inset:-1%;width:102%;height:102%;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(.46) contrast(.98) saturate(.50);opacity:.105;transition:opacity .65s ease,filter .65s ease;user-select:none;-webkit-user-drag:none} .continuity-canvas{position:absolute;inset:-7%;width:114%!important;height:114%!important;display:block;filter:drop-shadow(0 18px 22px rgba(55,48,40,.09));opacity:0;transition:opacity .55s ease} .continuity-canvas.is-ready{opacity:.985} .continuity-instrument{position:absolute;inset:3%;width:94%;height:94%;overflow:visible;mix-blend-mode:multiply;opacity:.34;transform-origin:50% 50%;animation:instrumentDrift 28s linear infinite} .instrument-rings>*{fill:none;stroke:#596167;stroke-width:.72;opacity:.38;stroke-dasharray:3 8}.instrument-rings circle:nth-child(2),.instrument-rings circle:nth-child(4){stroke:#9a7135;opacity:.18} .instrument-ticks>*{fill:none;stroke:#2f3437;stroke-width:1.2;opacity:.42}.instrument-nodes circle{fill:#a27836;opacity:.62} @keyframes instrumentDrift{to{transform:rotate(360deg)}} .continuity-label{position:absolute;z-index:12;top:49%;font-size:5.2px;letter-spacing:.12em;line-height:1.35;color:#6a6a6a;display:flex;gap:5px;align-items:baseline;white-space:nowrap;opacity:.84} .continuity-label b{font-size:6.3px;color:var(--brass-deep);font-weight:600}.continuity-label--left{left:14%}.continuity-label--left::after{content:"";width:52px;height:1px;background:rgba(17,17,17,.32);margin-left:5px}.continuity-label--right{right:13%;flex-direction:row-reverse}.continuity-label--right::after{content:"";width:46px;height:1px;background:rgba(17,17,17,.32);margin-right:5px} /* Existing static plates stay as drafting ghosts; the moving canvas is global. */ .engine-window .engine-blueprint{opacity:.035!important}.engine-window{z-index:2}.hero-engine,.systems-engine,.evidence-engine{pointer-events:none}.engine-3d-canvas{display:none!important} .chapter-head,.hero-copy,.hero-meta,.callout,.chapter-foot,.systems-copy,.evidence-copy,.standards-copy,.alps-copy,.research-copy,.access-copy,.research-sequence,.system-index,.evidence-chain,.verification-line,.principles-list,.status-grid,.pipeline,.alps-statement{z-index:20} body[data-nulvr-chapter="0"] .continuity-engine{top:62px;height:69vh;transform:translate3d(-1.5vw,-.5vh,0) scale(1)} body[data-nulvr-chapter="0"] .continuity-reference{opacity:.135} body[data-nulvr-chapter="1"] .continuity-engine{top:156px;height:61vh;transform:translate3d(10vw,0,0) scale(.90)} body[data-nulvr-chapter="1"] .continuity-reference{opacity:.075} body[data-nulvr-chapter="2"] .continuity-engine{top:174px;height:59vh;transform:translate3d(-4vw,1vh,0) scale(.96)} body[data-nulvr-chapter="2"] .continuity-reference{opacity:.085} body[data-nulvr-chapter="3"] .continuity-engine{top:144px;height:63vh;transform:translate3d(5vw,1vh,0) scale(1.04)} body[data-nulvr-chapter="3"] .continuity-reference{opacity:.07;filter:grayscale(.55) contrast(1.04) saturate(.45)} body[data-nulvr-chapter="4"] .continuity-engine{top:150px;height:54vh;transform:translate3d(18vw,5vh,0) scale(.72);opacity:.72} body[data-nulvr-chapter="4"] .continuity-reference{opacity:.04} body[data-nulvr-chapter="5"] .continuity-engine{top:180px;height:44vh;transform:translate3d(20vw,2vh,0) scale(.58);opacity:.86} body[data-nulvr-chapter="5"] .continuity-reference{opacity:.045} body[data-nulvr-chapter="6"] .continuity-engine{top:240px;height:34vh;transform:translate3d(24vw,7vh,0) scale(.46);opacity:.34} body[data-nulvr-chapter="6"] .continuity-reference{opacity:.02} /* Give the opening statement more air while retaining the machine as the visual anchor. */ #laboratory .hero-copy{bottom:86px;max-width:360px;background:linear-gradient(90deg,rgba(244,242,237,.90),rgba(244,242,237,.63) 72%,transparent);padding:10px 16px 8px 0} #laboratory .hero-copy h1{letter-spacing:-.045em} #laboratory .callout{backdrop-filter:blur(1.2px)} @media(max-height:720px){ .continuity-engine{min-height:420px}.continuity-plate{width:620px} body[data-nulvr-chapter="0"] .continuity-engine{top:58px;height:65vh} #laboratory .hero-copy{bottom:72px} } @media(max-width:370px){.continuity-plate{width:650px}.continuity-label{display:none}} @media(min-width:760px){ .continuity-engine{top:76px;height:84vh}.continuity-plate{width:min(1080px,78vw)} body[data-nulvr-chapter="0"] .continuity-engine{transform:translate3d(13vw,0,0) scale(1)} body[data-nulvr-chapter="1"] .continuity-engine{transform:translate3d(24vw,0,0) scale(.88)} body[data-nulvr-chapter="2"] .continuity-engine{transform:translate3d(19vw,0,0) scale(.94)} body[data-nulvr-chapter="3"] .continuity-engine{transform:translate3d(22vw,0,0) scale(1)} body[data-nulvr-chapter="4"] .continuity-engine{transform:translate3d(27vw,3vh,0) scale(.72)} body[data-nulvr-chapter="5"] .continuity-engine{transform:translate3d(26vw,2vh,0) scale(.64)} } @media(prefers-reduced-motion:reduce){.continuity-instrument{animation:none}.continuity-engine{transition:none}.continuity-reference{transition:none}} /* v11 — Mechanical Body Rebuild: denser reference-faithful machine + finger-linked disassembly. */ .continuity-plate{width:clamp(720px,184vw,810px)} .continuity-reference{opacity:.085;filter:grayscale(.58) contrast(1.04) saturate(.38)} .continuity-canvas{inset:-9%;width:118%!important;height:118%!important;filter:drop-shadow(0 20px 26px rgba(44,39,34,.105))} .continuity-instrument{opacity:.39} .instrument-rings>*{stroke-width:.62;opacity:.43;stroke-dasharray:2.4 7.2} .instrument-rings circle:nth-child(1){stroke-width:.9;opacity:.50} .instrument-rings circle:nth-child(3){stroke:#303437;opacity:.28} body[data-nulvr-chapter="0"] .continuity-engine{top:68px;height:71vh;transform:translate3d(-2vw,-.8vh,0) scale(1.02)} body[data-nulvr-chapter="1"] .continuity-engine{top:148px;height:63vh;transform:translate3d(8vw,0,0) scale(.94)} body[data-nulvr-chapter="2"] .continuity-engine{top:166px;height:62vh;transform:translate3d(-3vw,1vh,0) scale(.99)} body[data-nulvr-chapter="3"] .continuity-engine{top:136px;height:65vh;transform:translate3d(4vw,.5vh,0) scale(1.06)} body[data-nulvr-chapter="4"] .continuity-engine{top:145px;height:57vh;transform:translate3d(14vw,4vh,0) scale(.79);opacity:.80} body[data-nulvr-chapter="5"] .continuity-engine{top:174px;height:48vh;transform:translate3d(17vw,1vh,0) scale(.66);opacity:.92} #laboratory .hero-copy{background:linear-gradient(90deg,rgba(244,242,237,.94),rgba(244,242,237,.72) 68%,rgba(244,242,237,0));} @media(max-height:760px){.continuity-plate{width:660px}} @media(max-width:370px){.continuity-plate{width:690px}} @media(min-width:760px){ .continuity-plate{width:min(1160px,82vw)} body[data-nulvr-chapter="0"] .continuity-engine{transform:translate3d(14vw,0,0) scale(1.04)} body[data-nulvr-chapter="1"] .continuity-engine{transform:translate3d(23vw,0,0) scale(.91)} body[data-nulvr-chapter="2"] .continuity-engine{transform:translate3d(18vw,0,0) scale(.97)} body[data-nulvr-chapter="3"] .continuity-engine{transform:translate3d(21vw,0,0) scale(1.04)} } /* v12 — Reference Anatomy / explicit 16-stage body + component-led choreography. */ .instrument-micro>*{fill:none;stroke:#4f5558;stroke-width:.62;opacity:.34} .instrument-micro text{fill:#5f6466;stroke:none;font-size:13px;letter-spacing:2.2px;font-family:Arial,sans-serif;opacity:.52} .continuity-label--spine{top:auto;bottom:15%;left:27%;font-size:4.7px;opacity:.68} .continuity-label--spine::before{content:"";position:absolute;right:100%;top:5px;width:34px;height:1px;background:rgba(17,17,17,.28);margin-right:7px} .continuity-label--spine b{font-size:5.8px} /* Frame 0: the statement owns a clean upper field; the mechanical body begins below it. */ #laboratory .hero-copy{top:104px;bottom:auto;max-width:355px;padding:9px 18px 13px 0;background:linear-gradient(180deg,rgba(244,242,237,.99) 0%,rgba(244,242,237,.96) 78%,rgba(244,242,237,0) 100%)} #laboratory .hero-copy h1{font-size:clamp(38px,10.8vw,47px);max-width:345px;margin-bottom:13px} #laboratory .hero-copy .body-copy{max-width:330px;font-size:10.8px;line-height:1.46} #laboratory .hero-meta{top:75px} #laboratory .callout--a{top:375px} #laboratory .callout--b{top:443px} #laboratory .callout--c{top:auto;bottom:116px} /* Keep the camera framing almost fixed between chapters. Mechanical parts now carry the transition. */ .continuity-plate{width:clamp(710px,178vw,790px)} .continuity-reference{opacity:.070;filter:grayscale(.62) contrast(1.05) saturate(.34)} .continuity-canvas{inset:-8%;width:116%!important;height:116%!important;filter:drop-shadow(0 17px 24px rgba(44,39,34,.10))} body[data-nulvr-chapter="0"] .continuity-engine{top:214px;height:61vh;transform:translate3d(3vw,0,0) scale(.94);opacity:1} body[data-nulvr-chapter="1"] .continuity-engine{top:148px;height:63vh;transform:translate3d(2vw,0,0) scale(.93);opacity:1} body[data-nulvr-chapter="2"] .continuity-engine{top:150px;height:63vh;transform:translate3d(1vw,0,0) scale(.93);opacity:1} body[data-nulvr-chapter="3"] .continuity-engine{top:140px;height:64vh;transform:translate3d(2vw,0,0) scale(.96);opacity:1} body[data-nulvr-chapter="4"] .continuity-engine{top:156px;height:59vh;transform:translate3d(2vw,1vh,0) scale(.90);opacity:.90} body[data-nulvr-chapter="5"] .continuity-engine{top:170px;height:54vh;transform:translate3d(2vw,1vh,0) scale(.85);opacity:.94} body[data-nulvr-chapter="6"] .continuity-engine{top:214px;height:42vh;transform:translate3d(7vw,3vh,0) scale(.70);opacity:.42} body[data-nulvr-chapter="0"] .continuity-reference{opacity:.082} body[data-nulvr-chapter="1"] .continuity-reference,body[data-nulvr-chapter="2"] .continuity-reference{opacity:.054} body[data-nulvr-chapter="3"] .continuity-reference{opacity:.048} body[data-nulvr-chapter="4"] .continuity-reference{opacity:.035} body[data-nulvr-chapter="5"] .continuity-reference{opacity:.030} @media(max-height:760px){ #laboratory .hero-copy{top:94px} #laboratory .hero-copy h1{font-size:35px} #laboratory .hero-copy .body-copy{font-size:9.8px;max-width:310px} body[data-nulvr-chapter="0"] .continuity-engine{top:190px;height:60vh} #laboratory .callout--a{top:330px}#laboratory .callout--b{top:390px}#laboratory .callout--c{display:none} .continuity-plate{width:650px} } @media(max-width:370px){ #laboratory .hero-copy{top:100px} #laboratory .hero-copy h1{font-size:34px} .continuity-label--spine{display:none} .continuity-plate{width:660px} } @media(min-width:800px){ #laboratory .hero-copy{top:132px;left:7vw;bottom:auto;width:430px;max-width:430px;background:linear-gradient(180deg,rgba(244,242,237,.98),rgba(244,242,237,.88) 82%,transparent)} #laboratory .hero-copy h1{font-size:58px;max-width:430px} #laboratory .hero-copy .body-copy{font-size:12px} .continuity-plate{width:min(1120px,78vw)} body[data-nulvr-chapter="0"] .continuity-engine{top:164px;height:72vh;transform:translate3d(18vw,0,0) scale(.94)} body[data-nulvr-chapter="1"] .continuity-engine{transform:translate3d(19vw,0,0) scale(.92)} body[data-nulvr-chapter="2"] .continuity-engine{transform:translate3d(18vw,0,0) scale(.92)} body[data-nulvr-chapter="3"] .continuity-engine{transform:translate3d(19vw,0,0) scale(.95)} body[data-nulvr-chapter="4"] .continuity-engine{transform:translate3d(20vw,1vh,0) scale(.89)} body[data-nulvr-chapter="5"] .continuity-engine{transform:translate3d(20vw,1vh,0) scale(.85)} } /* v13 — Mechanical choreography + reference-proportion rebuild. UI is intentionally unchanged; only the persistent machine framing is tuned. */ .continuity-plate{width:clamp(730px,183vw,825px)} .continuity-canvas{inset:-11%;width:122%!important;height:122%!important;filter:drop-shadow(0 20px 28px rgba(44,39,34,.115))} .continuity-reference{opacity:.058;filter:grayscale(.68) contrast(1.06) saturate(.30)} .continuity-instrument{opacity:.34} .instrument-rings circle:first-child{opacity:.42} /* Keep the viewport stable so the body—not the page container—performs the transition. */ body[data-nulvr-chapter="0"] .continuity-engine{top:218px;height:61vh;transform:translate3d(2vw,0,0) scale(.93)} body[data-nulvr-chapter="1"] .continuity-engine{top:150px;height:64vh;transform:translate3d(1vw,0,0) scale(.93)} body[data-nulvr-chapter="2"] .continuity-engine{top:148px;height:65vh;transform:translate3d(1vw,0,0) scale(.94)} body[data-nulvr-chapter="3"] .continuity-engine{top:140px;height:65vh;transform:translate3d(1vw,0,0) scale(.95)} body[data-nulvr-chapter="4"] .continuity-engine{top:150px;height:62vh;transform:translate3d(1vw,0,0) scale(.92);opacity:.94} body[data-nulvr-chapter="5"] .continuity-engine{top:166px;height:57vh;transform:translate3d(1vw,0,0) scale(.90);opacity:.97} body[data-nulvr-chapter="6"] .continuity-engine{top:214px;height:42vh;transform:translate3d(6vw,3vh,0) scale(.70);opacity:.40} /* More room for the opening statement; no mechanical element should own this field. */ #laboratory .hero-copy{top:100px;max-width:360px;background:linear-gradient(180deg,rgba(244,242,237,.995) 0%,rgba(244,242,237,.975) 79%,rgba(244,242,237,0) 100%)} #laboratory .hero-copy h1{max-width:350px} #laboratory .callout--a{top:385px} #laboratory .callout--b{top:455px} /* Verification spine is a functional lower subsystem, not a second decorative engine. */ .continuity-label--spine{bottom:12.5%;left:24%;letter-spacing:.14em} @media(max-height:760px){ body[data-nulvr-chapter="0"] .continuity-engine{top:194px;height:60vh} .continuity-plate{width:670px} #laboratory .hero-copy{top:92px} #laboratory .callout--a{top:336px}#laboratory .callout--b{top:400px} } @media(max-width:370px){.continuity-plate{width:680px}} @media(min-width:800px){ .continuity-plate{width:min(1180px,82vw)} body[data-nulvr-chapter="0"] .continuity-engine{top:170px;height:73vh;transform:translate3d(17vw,0,0) scale(.94)} body[data-nulvr-chapter="1"],body[data-nulvr-chapter="2"],body[data-nulvr-chapter="3"],body[data-nulvr-chapter="4"],body[data-nulvr-chapter="5"]{--v13-desktop:1} body[data-nulvr-chapter="1"] .continuity-engine{transform:translate3d(18vw,0,0) scale(.92)} body[data-nulvr-chapter="2"] .continuity-engine{transform:translate3d(18vw,0,0) scale(.92)} body[data-nulvr-chapter="3"] .continuity-engine{transform:translate3d(18vw,0,0) scale(.94)} body[data-nulvr-chapter="4"] .continuity-engine{transform:translate3d(19vw,0,0) scale(.90)} body[data-nulvr-chapter="5"] .continuity-engine{transform:translate3d(19vw,0,0) scale(.88)} } /* v14 — distinct-stage geometry + isolated evidence core + full rear turbine integration. */ html,body{overscroll-behavior:none} .continuity-plate{width:clamp(740px,188vw,850px)} .continuity-canvas{inset:-12%;width:124%!important;height:124%!important} /* Keep the machine centered enough that the rear annulus remains fully readable in every state. */ body[data-nulvr-chapter="0"] .continuity-engine{transform:translate3d(0,0,0) scale(.91)} body[data-nulvr-chapter="1"] .continuity-engine{transform:translate3d(0,0,0) scale(.91)} body[data-nulvr-chapter="2"] .continuity-engine{transform:translate3d(0,0,0) scale(.91)} body[data-nulvr-chapter="3"] .continuity-engine{transform:translate3d(0,0,0) scale(.94)} body[data-nulvr-chapter="4"] .continuity-engine{transform:translate3d(0,1vh,0) scale(.89);opacity:.96} body[data-nulvr-chapter="5"] .continuity-engine{transform:translate3d(0,1vh,0) scale(.88);opacity:.98} /* Evidence is intentionally the most optically isolated state. */ body[data-nulvr-chapter="3"] .continuity-instrument{opacity:.44} body[data-nulvr-chapter="3"] .continuity-reference{opacity:.035} /* LAB is terminal; the visual system quiets rather than implying another forward chapter. */ body[data-nulvr-chapter="6"] .gesture-mark{display:none} @media(max-height:760px){.continuity-plate{width:700px}} @media(max-width:370px){.continuity-plate{width:710px}} @media(min-width:800px){ .continuity-plate{width:min(1210px,84vw)} body[data-nulvr-chapter="0"] .continuity-engine, body[data-nulvr-chapter="1"] .continuity-engine, body[data-nulvr-chapter="2"] .continuity-engine, body[data-nulvr-chapter="3"] .continuity-engine, body[data-nulvr-chapter="4"] .continuity-engine, body[data-nulvr-chapter="5"] .continuity-engine{transform:translate3d(16vw,0,0) scale(.90)} } /* v15 — true axial depth + evidence internals + ALPS final assembly. Interface hierarchy is unchanged; only the persistent machine field is re-framed. */ .continuity-plate{width:clamp(760px,191vw,875px)} .continuity-canvas{inset:-13%;width:126%!important;height:126%!important;filter:drop-shadow(0 21px 30px rgba(44,39,34,.105))} /* More oblique camera geometry needs a little more horizontal breathing room without moving the page between chapters. */ body[data-nulvr-chapter="0"] .continuity-engine{top:218px;height:61vh;transform:translate3d(-1vw,0,0) scale(.90)} body[data-nulvr-chapter="1"] .continuity-engine{top:150px;height:64vh;transform:translate3d(-1vw,0,0) scale(.90)} body[data-nulvr-chapter="2"] .continuity-engine{top:150px;height:65vh;transform:translate3d(-1vw,0,0) scale(.90)} body[data-nulvr-chapter="3"] .continuity-engine{top:142px;height:65vh;transform:translate3d(-1vw,0,0) scale(.92)} /* Solid Standards geometry sits lower; the calibration drawing remains visible behind the copy. */ body[data-nulvr-chapter="4"] .continuity-engine{top:198px;height:55vh;transform:translate3d(-1vw,2vh,0) scale(.84);opacity:.90} /* ALPS gets more room for the compact final assembly rather than showing an exploded body. */ body[data-nulvr-chapter="5"] .continuity-engine{top:174px;height:57vh;transform:translate3d(-1vw,0,0) scale(.91);opacity:.99} body[data-nulvr-chapter="3"] .continuity-reference{opacity:.028} body[data-nulvr-chapter="5"] .continuity-reference{opacity:.024} @media(max-height:760px){ .continuity-plate{width:720px} body[data-nulvr-chapter="4"] .continuity-engine{top:178px;height:54vh} } @media(max-width:370px){.continuity-plate{width:730px}} @media(min-width:800px){ .continuity-plate{width:min(1240px,85vw)} body[data-nulvr-chapter="0"] .continuity-engine, body[data-nulvr-chapter="1"] .continuity-engine, body[data-nulvr-chapter="2"] .continuity-engine, body[data-nulvr-chapter="3"] .continuity-engine, body[data-nulvr-chapter="5"] .continuity-engine{transform:translate3d(15vw,0,0) scale(.89)} body[data-nulvr-chapter="4"] .continuity-engine{transform:translate3d(15vw,4vh,0) scale(.84)} } /* v16.1 Android terminal-gesture hardening */ .brand-static{cursor:default;user-select:none;-webkit-user-select:none} #access{overscroll-behavior:none;touch-action:none} /* v17 — Final mechanical fidelity / single-engine composition. The detached lower engine and verification shaft are removed completely. */ .continuity-label--spine{display:none!important} #laboratory .callout--c{top:510px;bottom:auto} .continuity-canvas{filter:drop-shadow(0 22px 31px rgba(44,39,34,.11))} body[data-nulvr-chapter="0"] .continuity-engine{transform:translate3d(-2vw,0,0) scale(.90)} body[data-nulvr-chapter="1"] .continuity-engine{transform:translate3d(-2vw,0,0) scale(.90)} body[data-nulvr-chapter="2"] .continuity-engine{transform:translate3d(-2vw,0,0) scale(.90)} body[data-nulvr-chapter="3"] .continuity-engine{transform:translate3d(-2vw,0,0) scale(.92)} body[data-nulvr-chapter="4"] .continuity-engine{transform:translate3d(-2vw,2vh,0) scale(.84)} body[data-nulvr-chapter="5"] .continuity-engine{transform:translate3d(-2vw,0,0) scale(.92)} @media(max-height:760px){#laboratory .callout--c{display:none}} @media(min-width:800px){ body[data-nulvr-chapter="0"] .continuity-engine,body[data-nulvr-chapter="1"] .continuity-engine,body[data-nulvr-chapter="2"] .continuity-engine,body[data-nulvr-chapter="3"] .continuity-engine,body[data-nulvr-chapter="5"] .continuity-engine{transform:translate3d(14vw,0,0) scale(.89)} } /* v17.2 — optical continuity lock. One persistent machine keeps a stable apparent scale through every chapter. Evidence remains a focus state without reading as a replacement model; LAB stays quiet but legible. */ body[data-nulvr-chapter="0"] .continuity-engine{transform:translate3d(-2vw,0,0) scale(.90)} body[data-nulvr-chapter="1"] .continuity-engine{transform:translate3d(-2vw,0,0) scale(.90)} body[data-nulvr-chapter="2"] .continuity-engine{transform:translate3d(-2vw,0,0) scale(.89)} body[data-nulvr-chapter="3"] .continuity-engine{transform:translate3d(-2vw,0,0) scale(.90)} body[data-nulvr-chapter="4"] .continuity-engine{transform:translate3d(-2vw,1.5vh,0) scale(.87);opacity:.94} body[data-nulvr-chapter="5"] .continuity-engine{transform:translate3d(-2vw,0,0) scale(.90);opacity:.99} body[data-nulvr-chapter="6"] .continuity-engine{top:226px;height:42vh;transform:translate3d(-1vw,2vh,0) scale(.84);opacity:.62} @media(max-height:760px){ body[data-nulvr-chapter="6"] .continuity-engine{top:206px;height:40vh;transform:translate3d(-1vw,1vh,0) scale(.82)} } @media(min-width:800px){ body[data-nulvr-chapter="0"] .continuity-engine, body[data-nulvr-chapter="1"] .continuity-engine, body[data-nulvr-chapter="2"] .continuity-engine, body[data-nulvr-chapter="3"] .continuity-engine, body[data-nulvr-chapter="5"] .continuity-engine{transform:translate3d(14vw,0,0) scale(.89)} body[data-nulvr-chapter="4"] .continuity-engine{transform:translate3d(14vw,2vh,0) scale(.86)} body[data-nulvr-chapter="6"] .continuity-engine{transform:translate3d(14vw,2vh,0) scale(.83)} } /* v17.4 — persistent silhouette lock. ALPS remains a hard-docked state, but the same axial machine and rear annulus remain readable. LAB quiets the machine without collapsing it into a miniature secondary model. */ body[data-nulvr-chapter="5"] .continuity-engine{top:168px;height:59vh;transform:translate3d(-2vw,0,0) scale(.91);opacity:.99} body[data-nulvr-chapter="6"] .continuity-engine{top:192px;height:51vh;transform:translate3d(-2vw,1vh,0) scale(.89);opacity:.70} body[data-nulvr-chapter="5"] .continuity-reference{opacity:.022} body[data-nulvr-chapter="6"] .continuity-reference{opacity:.018} @media(max-height:760px){ body[data-nulvr-chapter="5"] .continuity-engine{top:158px;height:57vh} body[data-nulvr-chapter="6"] .continuity-engine{top:180px;height:48vh;transform:translate3d(-2vw,1vh,0) scale(.87);opacity:.68} } @media(min-width:800px){ body[data-nulvr-chapter="5"] .continuity-engine{transform:translate3d(14vw,0,0) scale(.90)} body[data-nulvr-chapter="6"] .continuity-engine{top:168px;height:61vh;transform:translate3d(14vw,1vh,0) scale(.89);opacity:.72} } /* v17.5 — motion visibility, text-safe composition, and high-DPI cleanup */ :root{--paper-rgb:244,242,237} #laboratory .hero-copy, #research .research-copy, #systems .systems-copy, #evidence .evidence-copy, #standards .standards-copy, #alps .alps-copy, #access .access-copy, #laboratory .hero-meta, #research .research-sequence, #systems .system-index, #evidence .evidence-chain, #evidence .verification-line, #standards .principles-list, #alps .status-grid, #alps .pipeline, #alps .alps-statement, #access .cta-stack, #access .access-footer, .callout{ /* v17.7 — this was accidentally forcing position:relative on elements that are already position:absolute in their own base rules (see top of file). That collapsed every copy block and info-band into normal document flow, stacking them on top of each other instead of at their intended absolute coordinates — the real cause of most text/text and text/engine collisions across RESEARCH, SYSTEMS, EVIDENCE, ALPS, etc. isolation:isolate alone still gives these elements their own stacking context. */ isolation:isolate; } #laboratory .hero-copy::before, #research .research-copy::before, #systems .systems-copy::before, #evidence .evidence-copy::before, #standards .standards-copy::before, #alps .alps-copy::before, #access .access-copy::before, #laboratory .hero-meta::before, #research .research-sequence::before, #systems .system-index::before, #evidence .evidence-chain::before, #evidence .verification-line::before, #standards .principles-list::before, #alps .status-grid::before, #alps .pipeline::before, #alps .alps-statement::before, #access .cta-stack::before, #access .access-footer::before, .callout::after{ content:""; position:absolute; inset:-10px -12px; z-index:-1; background:linear-gradient(180deg, rgba(var(--paper-rgb),0.96) 0%, rgba(var(--paper-rgb),0.90) 70%, rgba(var(--paper-rgb),0.72) 100%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius:10px; } #research .research-sequence::before, #systems .system-index::before, #evidence .evidence-chain::before, #evidence .verification-line::before, #standards .principles-list::before, #alps .status-grid::before, #alps .pipeline::before, #alps .alps-statement::before, #access .cta-stack::before, #access .access-footer::before{ inset:-8px; background:linear-gradient(180deg, rgba(var(--paper-rgb),0.93) 0%, rgba(var(--paper-rgb),0.86) 100%); border:1px solid rgba(0,0,0,.06); } #laboratory .hero-copy, #research .research-copy, #systems .systems-copy, #evidence .evidence-copy, #standards .standards-copy, #alps .alps-copy, #access .access-copy{padding-right:18px} #laboratory .hero-meta{padding:0 8px 0 0} .callout{padding:8px 10px 8px 0} .callout::before{z-index:1} .callout::after{inset:-6px -8px} /* move persistent engine away from text-heavy areas on mobile */ body[data-nulvr-chapter="0"] .continuity-engine{top:94px;height:64vh;transform:translate3d(2vw,3vh,0) scale(.92)} body[data-nulvr-chapter="1"] .continuity-engine{top:162px;height:57vh;transform:translate3d(10vw,4vh,0) scale(.84)} body[data-nulvr-chapter="2"] .continuity-engine{top:214px;height:54vh;transform:translate3d(13vw,5vh,0) scale(.82)} body[data-nulvr-chapter="3"] .continuity-engine{top:202px;height:53vh;transform:translate3d(16vw,6vh,0) scale(.80)} body[data-nulvr-chapter="4"] .continuity-engine{top:248px;height:48vh;transform:translate3d(18vw,8vh,0) scale(.77)} body[data-nulvr-chapter="5"] .continuity-engine{top:258px;height:45vh;transform:translate3d(12vw,7vh,0) scale(.79);opacity:.96} body[data-nulvr-chapter="6"] .continuity-engine{top:280px;height:40vh;transform:translate3d(10vw,8vh,0) scale(.76);opacity:.72} body[data-nulvr-chapter="4"] .continuity-reference, body[data-nulvr-chapter="5"] .continuity-reference, body[data-nulvr-chapter="6"] .continuity-reference{opacity:.016} /* additional mobile text spacing */ #standards .principles-list{top:348px} #alps .status-grid{top:386px} #alps .pipeline{bottom:126px} #alps .alps-statement{bottom:68px;max-width:310px} #access .cta-stack{top:494px} #access .access-footer{bottom:calc(26px + env(safe-area-inset-bottom))} /* keep desktop close to prior composition */ @media(min-width:800px){ body[data-nulvr-chapter="0"] .continuity-engine, body[data-nulvr-chapter="1"] .continuity-engine, body[data-nulvr-chapter="2"] .continuity-engine{transform:translate3d(14vw,0,0) scale(.89)} body[data-nulvr-chapter="3"] .continuity-engine{transform:translate3d(16vw,2vh,0) scale(.86)} body[data-nulvr-chapter="4"] .continuity-engine{transform:translate3d(18vw,3vh,0) scale(.84)} body[data-nulvr-chapter="5"] .continuity-engine{top:176px;height:58vh;transform:translate3d(14vw,3vh,0) scale(.85)} body[data-nulvr-chapter="6"] .continuity-engine{top:188px;height:56vh;transform:translate3d(13vw,4vh,0) scale(.83);opacity:.74} } /* v17.6 — Retina Mechanical Clarity / Text Collision Lock Removes intentional grain/ghost layers on mobile, protects typography from the engine layer, and keeps the single persistent WebGL engine visually clean. */ @media(max-width:799px){ /* The prior paper-noise layer reads as pixelation on high-DPI Android screens. */ .chapter::after{opacity:0!important;background-image:none!important} /* Raster study/ghost overlays are useful as reference, but double edges against WebGL on mobile. */ .continuity-reference,.engine-blueprint{opacity:0!important;display:none!important} .continuity-instrument{opacity:.13!important;mix-blend-mode:normal!important} .continuity-canvas{ filter:drop-shadow(0 12px 18px rgba(44,39,34,.075))!important; image-rendering:auto; transform:translateZ(0); } /* Eliminate micro-label collisions over the mechanical body on phone layouts. */ .continuity-label,.callout{display:none!important} /* Typography is always above the engine and sits on a flat paper shield—no blur/card effect. */ #laboratory .hero-copy,#research .research-copy,#systems .systems-copy,#evidence .evidence-copy, #standards .standards-copy,#alps .alps-copy,#access .access-copy{ z-index:46!important; isolation:isolate; padding:8px 30px 12px 0!important; /* v17.7 — the fade used to begin at 74% of the box, well inside where wrapped body copy actually reaches (text runs edge-to-edge to the padding gutter). Keep the shield fully opaque across the entire text measure and only fade inside the gutter itself. */ background:linear-gradient(90deg,rgba(var(--paper-rgb),.995) 0%,rgba(var(--paper-rgb),.995) 94%,rgba(var(--paper-rgb),0) 100%)!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important; } #laboratory .hero-copy::before,#research .research-copy::before,#systems .systems-copy::before, #evidence .evidence-copy::before,#standards .standards-copy::before,#alps .alps-copy::before, #access .access-copy::before{display:none!important} #research .research-sequence,#systems .system-index,#evidence .evidence-chain,#evidence .verification-line, #standards .principles-list,#alps .status-grid,#alps .pipeline,#alps .alps-statement, #access .cta-stack,#access .access-footer{ z-index:46!important; background:rgba(var(--paper-rgb),.965)!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important; } #research .research-sequence::before,#systems .system-index::before,#evidence .evidence-chain::before, #evidence .verification-line::before,#standards .principles-list::before,#alps .status-grid::before, #alps .pipeline::before,#alps .alps-statement::before,#access .cta-stack::before,#access .access-footer::before{ display:none!important } /* Give each text-heavy chapter a clean mechanical field instead of placing copy through the rotor. */ body[data-nulvr-chapter="1"] .continuity-engine{top:190px;height:54vh;transform:translate3d(14vw,5vh,0) scale(.82)} body[data-nulvr-chapter="2"] .continuity-engine{top:226px;height:52vh;transform:translate3d(15vw,5vh,0) scale(.81)} body[data-nulvr-chapter="3"] .continuity-engine{top:220px;height:51vh;transform:translate3d(17vw,6vh,0) scale(.80)} body[data-nulvr-chapter="4"] .continuity-engine{top:238px;height:49vh;transform:translate3d(19vw,8vh,0) scale(.78)} body[data-nulvr-chapter="5"] .continuity-engine{top:242px;height:47vh;transform:translate3d(14vw,7vh,0) scale(.80);opacity:.98} body[data-nulvr-chapter="6"] .continuity-engine{top:252px;height:38vh;transform:translate3d(12vw,6vh,0) scale(.78);opacity:.78} /* The CTA/footer must never cut through the final engine state. */ #access .cta-stack{top:500px;padding-top:10px!important;padding-bottom:10px!important} #access .access-footer{padding-top:8px!important} /* Keep lower informational bands readable and non-overlapping. */ #standards .principles-list{top:350px!important} #alps .status-grid{top:390px!important} #alps .pipeline{bottom:126px!important} #alps .alps-statement{bottom:70px!important} } @media(max-width:370px){ #standards .principles-list{top:342px!important} #alps .status-grid{top:378px!important} #access .cta-stack{top:488px!important} } /* v18.2 — Clear Typography Field / No Shields / Engine-First Layout Keep the DOM plate movement in the same temporal language as the authored WebGL flight. This prevents the CSS container from arriving early while the camera is still travelling. */ .continuity-engine{ transition:top 1.08s cubic-bezier(.22,.61,.36,1),height 1.08s cubic-bezier(.22,.61,.36,1),opacity .68s ease,transform 1.08s cubic-bezier(.22,.61,.36,1)!important; } @media(max-width:799px){ /* Terminal LABORATORY is a deliberate final hero, not a small engine clipped below the CTA. */ body[data-nulvr-chapter="6"] .continuity-engine{ top:214px!important; height:50vh!important; transform:translate3d(8vw,2vh,0) scale(.86)!important; opacity:.90!important; } } @media(max-width:370px){ body[data-nulvr-chapter="6"] .continuity-engine{ top:208px!important; height:48vh!important; transform:translate3d(7vw,2vh,0) scale(.84)!important; } } @media(min-width:800px){ body[data-nulvr-chapter="6"] .continuity-engine{ top:170px!important; height:61vh!important; transform:translate3d(12vw,1vh,0) scale(.90)!important; opacity:.88!important; } } @media(prefers-reduced-motion:reduce){ .continuity-engine{transition:none!important} } /* v18.1 — scene-aware text choreography. Copy is allowed to travel around the persistent engine and resize by chapter, instead of staying structurally pinned to the top edge. */ .hero-copy,.research-copy,.systems-copy,.evidence-copy,.standards-copy,.alps-copy,.access-copy, .hero-meta,.research-sequence,.system-index,.evidence-chain,.verification-line,.principles-list, .status-grid,.pipeline,.alps-statement,.cta-stack,.access-footer{ transition:left 1.02s var(--ease), right 1.02s var(--ease), top 1.02s var(--ease), bottom 1.02s var(--ease), width 1.02s var(--ease), max-width 1.02s var(--ease), transform 1.02s var(--ease), opacity .55s ease, font-size .7s var(--ease)!important; } .hero-copy h1,.research-copy h2,.systems-copy h2,.evidence-copy h2,.standards-copy h2,.alps-copy h2,.access-copy h2,.alps-title{ transition:font-size .92s var(--ease), max-width 1.02s var(--ease), letter-spacing .92s var(--ease)!important; } @media(max-width:799px){ /* CORE: allow the front-half opening to dominate the upper and central field. */ #laboratory .hero-copy{left:var(--pad)!important; right:auto!important; top:auto!important; bottom:96px!important; width:min(58vw,210px)!important; max-width:min(58vw,210px)!important; padding:10px 18px 10px 0!important; transform:translate3d(0,0,0)!important; background:linear-gradient(90deg,rgba(var(--paper-rgb),.98) 0%,rgba(var(--paper-rgb),.96) 86%,rgba(var(--paper-rgb),0) 100%)!important} #laboratory .hero-copy h1{font-size:clamp(31px,8.8vw,38px)!important; max-width:205px!important; line-height:.94!important} #laboratory .hero-copy .body-copy{font-size:10.2px!important; max-width:190px!important} #laboratory .hero-meta{left:var(--pad)!important; right:auto!important; width:170px!important; top:84px!important; gap:4px!important; flex-wrap:wrap!important; justify-content:flex-start!important} /* RESEARCH: text moves into the lower-right field while the machine occupies the left/centre. */ #research .research-copy{left:auto!important; right:var(--pad)!important; top:364px!important; width:170px!important; max-width:170px!important; transform:translate3d(0,0,0)!important} #research .research-copy h2{font-size:31px!important; max-width:165px!important} #research .research-copy .body-copy{font-size:10.4px!important; max-width:166px!important} #research .research-sequence{left:var(--pad)!important; right:110px!important; bottom:78px!important; transform:none!important} /* SYSTEMS: keep the architecture readable; copy sits mid-left, not at the top edge. */ #systems .systems-copy{left:var(--pad)!important; right:auto!important; top:138px!important; width:178px!important; max-width:178px!important; transform:none!important} #systems .systems-copy h2{font-size:30px!important} #systems .systems-copy .body-copy{font-size:10.1px!important; max-width:172px!important} #systems .system-index{left:var(--pad)!important; right:var(--pad)!important; bottom:84px!important} /* EVIDENCE: copy uses the upper-right free space; supporting lines move lower. */ #evidence .evidence-copy{left:auto!important; right:var(--pad)!important; top:126px!important; width:176px!important; max-width:176px!important; transform:none!important} #evidence .evidence-copy h2{font-size:31px!important} #evidence .evidence-chain{left:var(--pad)!important; right:var(--pad)!important; bottom:124px!important} #evidence .verification-line{left:var(--pad)!important; right:var(--pad)!important; bottom:82px!important} /* STANDARDS: move statement down-left so the calibration geometry can breathe. */ #standards .standards-copy{left:var(--pad)!important; right:auto!important; top:338px!important; width:174px!important; max-width:174px!important; transform:none!important} #standards .standards-copy h2{font-size:29px!important} #standards .standards-copy .body-copy{font-size:10px!important; max-width:170px!important} #standards .principles-list{left:auto!important; right:var(--pad)!important; width:176px!important; top:136px!important} /* ALPS: let the ALPS wordmark live lower-left and keep the metric bands in the upper/right field. */ #alps .alps-copy{left:var(--pad)!important; right:auto!important; top:312px!important; width:188px!important; max-width:188px!important; transform:none!important} #alps .alps-title{font-size:58px!important; line-height:.80!important} #alps .alps-subtitle{font-size:9px!important; margin:7px 0 12px!important} #alps .alps-copy .body-copy{font-size:9.8px!important; max-width:182px!important} #alps .status-grid{left:auto!important; right:var(--pad)!important; width:186px!important; top:126px!important} #alps .pipeline{left:var(--pad)!important; right:var(--pad)!important; bottom:116px!important} #alps .alps-statement{left:var(--pad)!important; right:var(--pad)!important; bottom:70px!important; max-width:280px!important} /* LABORATORY / ACCESS: final copy and CTA occupy separate clear fields around the machine. */ #access .access-copy{left:auto!important; right:var(--pad)!important; top:112px!important; width:178px!important; max-width:178px!important; transform:none!important} #access .access-copy h2{font-size:33px!important; line-height:.94!important} #access .cta-stack{left:var(--pad)!important; right:auto!important; width:188px!important; top:446px!important} #access .access-footer{left:auto!important; right:var(--pad)!important; width:170px!important; bottom:calc(28px + env(safe-area-inset-bottom))!important} } @media(min-width:800px){ /* On larger screens, retain the same idea with gentler movement. */ #research .research-copy{left:auto!important; right:8vw!important; top:48vh!important; width:320px!important} #systems .systems-copy{top:18vh!important; width:330px!important} #evidence .evidence-copy{left:auto!important; right:8vw!important; top:18vh!important; width:320px!important} #standards .standards-copy{top:44vh!important; width:320px!important} #alps .alps-copy{top:42vh!important; width:340px!important} #access .access-copy{left:auto!important; right:8vw!important; top:18vh!important; width:320px!important} } /* v18.2 — clear typography field. Remove the strip/shield treatment and place copy in cleaner empty zones so the engine stays visually unobstructed. */ @media(max-width:799px){ /* Remove all background strips/shields behind text. */ #laboratory .hero-copy,#research .research-copy,#systems .systems-copy,#evidence .evidence-copy, #standards .standards-copy,#alps .alps-copy,#access .access-copy, #laboratory .hero-meta,#research .research-sequence,#systems .system-index,#evidence .evidence-chain, #evidence .verification-line,#standards .principles-list,#alps .status-grid,#alps .pipeline, #alps .alps-statement,#access .cta-stack,#access .access-footer{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; border-radius:0!important; box-shadow:none!important; } #laboratory .hero-copy::before,#research .research-copy::before,#systems .systems-copy::before, #evidence .evidence-copy::before,#standards .standards-copy::before,#alps .alps-copy::before, #access .access-copy::before,#laboratory .hero-meta::before,#research .research-sequence::before, #systems .system-index::before,#evidence .evidence-chain::before,#evidence .verification-line::before, #standards .principles-list::before,#alps .status-grid::before,#alps .pipeline::before, #alps .alps-statement::before,#access .cta-stack::before,#access .access-footer::before, .callout::after{display:none!important;content:none!important} /* make copy feel like labels in empty space, not cards */ #laboratory .hero-copy,#research .research-copy,#systems .systems-copy,#evidence .evidence-copy, #standards .standards-copy,#alps .alps-copy,#access .access-copy{ padding:0!important; } #laboratory .hero-meta,#research .research-sequence,#systems .system-index,#evidence .evidence-chain, #evidence .verification-line,#standards .principles-list,#alps .status-grid,#alps .pipeline, #alps .alps-statement,#access .cta-stack,#access .access-footer{ padding:0!important; } /* engine placements: create clearer text fields */ body[data-nulvr-chapter="0"] .continuity-engine{top:90px!important;height:63vh!important;transform:translate3d(4vw,2vh,0) scale(.90)!important} body[data-nulvr-chapter="1"] .continuity-engine{top:148px!important;height:57vh!important;transform:translate3d(-8vw,1vh,0) scale(.82)!important} body[data-nulvr-chapter="2"] .continuity-engine{top:198px!important;height:54vh!important;transform:translate3d(14vw,5vh,0) scale(.80)!important} body[data-nulvr-chapter="3"] .continuity-engine{top:180px!important;height:54vh!important;transform:translate3d(15vw,5vh,0) scale(.79)!important} body[data-nulvr-chapter="4"] .continuity-engine{top:132px!important;height:53vh!important;transform:translate3d(17vw,-1vh,0) scale(.76)!important} body[data-nulvr-chapter="5"] .continuity-engine{top:124px!important;height:52vh!important;transform:translate3d(18vw,-1vh,0) scale(.77)!important;opacity:.98!important} body[data-nulvr-chapter="6"] .continuity-engine{top:150px!important;height:47vh!important;transform:translate3d(14vw,1vh,0) scale(.79)!important;opacity:.78!important} /* CORE */ #laboratory .hero-copy{left:var(--pad)!important;right:auto!important;top:auto!important;bottom:88px!important;width:160px!important;max-width:160px!important} #laboratory .hero-copy h1{font-size:30px!important;max-width:158px!important;line-height:.94!important} #laboratory .hero-copy .body-copy{font-size:9.8px!important;max-width:156px!important;line-height:1.42!important} #laboratory .hero-meta{left:var(--pad)!important;right:auto!important;top:80px!important;width:160px!important;display:grid!important;grid-template-columns:1fr!important;gap:2px!important} /* RESEARCH rebuilt to avoid headline/sequence overlap */ #research .research-copy{left:var(--pad)!important;right:auto!important;top:96px!important;width:170px!important;max-width:170px!important} #research .research-copy h2{font-size:29px!important;max-width:168px!important;line-height:.95!important} #research .research-copy .body-copy{font-size:10px!important;max-width:168px!important} #research .research-sequence{left:var(--pad)!important;right:var(--pad)!important;top:auto!important;bottom:70px!important;display:grid!important;grid-template-columns:1fr!important;gap:0!important} #research .research-sequence>div{min-height:50px!important;padding:8px 0!important;background:transparent!important} #research .research-sequence p{max-width:190px!important} #research .research-orbit{right:-138px!important;top:210px!important;width:330px!important;height:330px!important;opacity:.82!important} /* SYSTEMS */ #systems .systems-copy{left:var(--pad)!important;right:auto!important;top:116px!important;width:165px!important;max-width:165px!important} #systems .systems-copy h2{font-size:29px!important} #systems .systems-copy .body-copy{font-size:9.9px!important;max-width:162px!important} #systems .system-index{left:var(--pad)!important;right:var(--pad)!important;bottom:70px!important} /* EVIDENCE */ #evidence .evidence-copy{left:auto!important;right:var(--pad)!important;top:92px!important;width:166px!important;max-width:166px!important;text-align:left!important} #evidence .evidence-copy h2{font-size:30px!important;max-width:164px!important} #evidence .evidence-chain{left:var(--pad)!important;right:var(--pad)!important;bottom:118px!important} #evidence .verification-line{left:var(--pad)!important;right:var(--pad)!important;bottom:76px!important} /* STANDARDS */ #standards .standards-copy{left:var(--pad)!important;right:auto!important;top:332px!important;width:165px!important;max-width:165px!important} #standards .standards-copy h2{font-size:28px!important;max-width:162px!important} #standards .standards-copy .body-copy{font-size:9.8px!important;max-width:162px!important} #standards .principles-list{left:auto!important;right:var(--pad)!important;width:170px!important;top:98px!important} #standards .principles-list li{min-height:47px!important} /* ALPS */ #alps .alps-copy{left:var(--pad)!important;right:auto!important;top:320px!important;width:175px!important;max-width:175px!important} #alps .alps-title{font-size:54px!important;line-height:.8!important} #alps .alps-copy .body-copy{font-size:9.6px!important;max-width:172px!important} #alps .status-grid{left:auto!important;right:var(--pad)!important;width:176px!important;top:98px!important} #alps .status-grid div{min-height:58px!important;padding:8px 6px!important} #alps .pipeline{left:var(--pad)!important;right:var(--pad)!important;bottom:108px!important} #alps .alps-statement{left:var(--pad)!important;right:var(--pad)!important;bottom:66px!important;max-width:255px!important;font-size:8.3px!important} /* LAB */ #access .access-copy{left:auto!important;right:var(--pad)!important;top:96px!important;width:164px!important;max-width:164px!important} #access .access-copy h2{font-size:31px!important;max-width:164px!important} #access .access-copy .body-copy{font-size:9.9px!important;max-width:162px!important} #access .cta-stack{left:var(--pad)!important;right:auto!important;width:174px!important;top:388px!important} #access .access-footer{left:auto!important;right:var(--pad)!important;width:160px!important;bottom:calc(54px + env(safe-area-inset-bottom))!important} #access .access-footer .count{position:static!important;margin-top:6px!important} } @media(max-width:370px){ #laboratory .hero-copy{width:150px!important;max-width:150px!important} #research .research-copy,#systems .systems-copy,#evidence .evidence-copy,#standards .standards-copy,#alps .alps-copy,#access .access-copy{width:156px!important;max-width:156px!important} #standards .principles-list,#alps .status-grid{width:162px!important} #access .cta-stack{top:376px!important;width:168px!important} } @media(min-width:800px){ /* larger screens: still no shields */ #laboratory .hero-copy,#research .research-copy,#systems .systems-copy,#evidence .evidence-copy, #standards .standards-copy,#alps .alps-copy,#access .access-copy, #laboratory .hero-meta,#research .research-sequence,#systems .system-index,#evidence .evidence-chain, #evidence .verification-line,#standards .principles-list,#alps .status-grid,#alps .pipeline, #alps .alps-statement,#access .cta-stack,#access .access-footer{ background:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } #research .research-copy{right:9vw!important;top:20vh!important;width:300px!important} #research .research-sequence{right:9vw!important;left:auto!important;width:320px!important;bottom:8vh!important} #standards .standards-copy{top:52vh!important;width:300px!important} #alps .alps-copy{top:46vh!important;width:320px!important} #access .access-footer{bottom:10vh!important} } /* ================================================================ v18.3 — True Clear Fields / Split-Zone Typography / Engine Isolation The machine and typography now occupy physically separate screen zones. No shields, no paper cards, no text-on-engine compositing. ================================================================ */ /* Keep the persistent mechanical field synchronized with chapter choreography. */ .continuity-engine{ transition: top 1.12s cubic-bezier(.22,.61,.36,1), height 1.12s cubic-bezier(.22,.61,.36,1), opacity .62s ease, transform 1.12s cubic-bezier(.22,.61,.36,1)!important; } @media(max-width:799px){ /* Decorative geometry must never compete with the engine or become a pseudo-shield. */ #standards .standards-mark, #alps .alps-seal, #access .access-mark{display:none!important} /* Clear-field rule: typography and data bands remain transparent and unmasked. */ #laboratory .hero-copy,#research .research-copy,#systems .systems-copy,#evidence .evidence-copy, #standards .standards-copy,#alps .alps-copy,#access .access-copy, #research .research-sequence,#systems .system-index,#evidence .evidence-chain,#evidence .verification-line, #standards .principles-list,#alps .status-grid,#alps .pipeline,#alps .alps-statement, #access .cta-stack,#access .access-footer{ background:none!important; background-color:transparent!important; background-image:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; } /* 00 / CORE — front-half engine owns upper/right field; copy stays lower/left. */ body[data-nulvr-chapter="0"] .continuity-engine{ top:82px!important;height:60vh!important; transform:translate3d(13vw,-1vh,0) scale(.86)!important; opacity:1!important; } #laboratory .hero-copy{ left:var(--pad)!important;right:auto!important;top:auto!important;bottom:88px!important; width:154px!important;max-width:154px!important; } #laboratory .hero-copy h1{font-size:29px!important;max-width:152px!important;line-height:.94!important} #laboratory .hero-copy .body-copy{font-size:9.6px!important;max-width:150px!important;line-height:1.43!important} #laboratory .hero-meta{left:var(--pad)!important;right:auto!important;top:80px!important;width:148px!important} /* 01 / RESEARCH — one left typography rail; engine remains right/centre; sequence below it. */ body[data-nulvr-chapter="1"] .continuity-engine{ top:152px!important;height:52vh!important; transform:translate3d(20vw,0,0) scale(.73)!important; } #research .research-copy{left:var(--pad)!important;right:auto!important;top:94px!important;width:158px!important;max-width:158px!important} #research .research-copy h2{font-size:28px!important;max-width:156px!important;line-height:.95!important} #research .research-copy .body-copy{font-size:9.8px!important;max-width:154px!important;line-height:1.42!important} #research .research-sequence{left:var(--pad)!important;right:var(--pad)!important;bottom:66px!important} #research .research-sequence>div{min-height:48px!important;padding:7px 0!important} /* 02 / SYSTEMS — architecture copy upper-left; machine moves distinctly to lower-right. */ body[data-nulvr-chapter="2"] .continuity-engine{ top:188px!important;height:51vh!important; transform:translate3d(22vw,3vh,0) scale(.74)!important; } #systems .systems-copy{left:var(--pad)!important;right:auto!important;top:104px!important;width:157px!important;max-width:157px!important} #systems .systems-copy h2{font-size:28px!important;max-width:155px!important;line-height:.95!important} #systems .systems-copy .body-copy{font-size:9.7px!important;max-width:153px!important;line-height:1.42!important} #systems .system-index{left:var(--pad)!important;right:var(--pad)!important;bottom:68px!important} /* 03 / EVIDENCE — engine shifts left; claim occupies clean upper-right field. */ body[data-nulvr-chapter="3"] .continuity-engine{ top:190px!important;height:50vh!important; transform:translate3d(-17vw,3vh,0) scale(.72)!important; } #evidence .evidence-copy{left:auto!important;right:var(--pad)!important;top:92px!important;width:154px!important;max-width:154px!important} #evidence .evidence-copy h2{font-size:29px!important;max-width:152px!important;line-height:.95!important} #evidence .evidence-chain{left:var(--pad)!important;right:var(--pad)!important;bottom:116px!important} #evidence .verification-line{left:var(--pad)!important;right:var(--pad)!important;bottom:76px!important} /* 04 / STANDARDS — repaired collision from v18.2 recording. The entire text system becomes a right-side rail; engine is isolated on the left. */ body[data-nulvr-chapter="4"] .continuity-engine{ top:218px!important;height:43vh!important; transform:translate3d(-31vw,3vh,0) scale(.64)!important; opacity:.98!important; } #standards .principles-list{ left:auto!important;right:var(--pad)!important;top:92px!important; width:164px!important;max-width:164px!important; } #standards .principles-list li{min-height:43px!important;grid-template-columns:28px 1fr!important} #standards .principles-list strong{font-size:8.7px!important;line-height:1.25!important} #standards .standards-copy{ left:auto!important;right:var(--pad)!important;top:354px!important; width:164px!important;max-width:164px!important; } #standards .standards-copy h2{font-size:27px!important;max-width:162px!important;line-height:.94!important} #standards .standards-copy .body-copy{font-size:9.6px!important;max-width:160px!important;line-height:1.42!important} /* 05 / ALPS — machine gets the left field; metrics + ALPS identity share a clean right rail. */ body[data-nulvr-chapter="5"] .continuity-engine{ top:200px!important;height:45vh!important; transform:translate3d(-32vw,1vh,0) scale(.66)!important; opacity:.99!important; } #alps .status-grid{left:auto!important;right:var(--pad)!important;top:90px!important;width:166px!important} #alps .status-grid div{min-height:54px!important;padding:7px 5px!important} #alps .alps-copy{left:auto!important;right:var(--pad)!important;top:330px!important;width:166px!important;max-width:166px!important} #alps .alps-title{font-size:51px!important;line-height:.80!important} #alps .alps-subtitle{font-size:8.4px!important;margin:6px 0 10px!important} #alps .alps-copy .body-copy{font-size:9.35px!important;max-width:164px!important;line-height:1.40!important} #alps .pipeline{left:var(--pad)!important;right:var(--pad)!important;bottom:106px!important} #alps .alps-statement{left:var(--pad)!important;right:auto!important;bottom:64px!important;width:226px!important;max-width:226px!important;font-size:8.1px!important} /* 06 / LABORATORY — repaired CTA collision from v18.2 recording. Copy and CTAs own the left rail; engine is moved to the right with a smaller envelope. */ body[data-nulvr-chapter="6"] .continuity-engine{ top:186px!important;height:42vh!important; transform:translate3d(32vw,0,0) scale(.67)!important; opacity:.92!important; } #access .access-copy{left:var(--pad)!important;right:auto!important;top:94px!important;width:158px!important;max-width:158px!important} #access .access-copy h2{font-size:29px!important;max-width:156px!important;line-height:.94!important} #access .access-copy .body-copy{font-size:9.7px!important;max-width:154px!important;line-height:1.42!important} #access .cta-stack{left:var(--pad)!important;right:auto!important;top:382px!important;width:158px!important} #access .cta{height:43px!important;font-size:7.3px!important} #access .access-footer{left:auto!important;right:var(--pad)!important;width:154px!important;bottom:calc(52px + env(safe-area-inset-bottom))!important} /* Chapter-aware typography motion: labels travel into the free field instead of simply fading in. */ #research .reveal-block,#systems .reveal-block,#access .reveal-block{transform:translate3d(-13px,8px,0)} #evidence .reveal-block,#standards .reveal-block,#alps .reveal-block{transform:translate3d(13px,8px,0)} .chapter.is-active .reveal-block{animation:revealSpatial var(--chapter-in) var(--ease) .08s forwards!important} @keyframes revealSpatial{to{opacity:1;transform:translate3d(0,0,0)}} /* Supporting information enters slightly after the chapter title so the engine is seen first. */ .chapter.is-active .research-sequence, .chapter.is-active .system-index, .chapter.is-active .evidence-chain, .chapter.is-active .verification-line, .chapter.is-active .principles-list, .chapter.is-active .status-grid, .chapter.is-active .pipeline, .chapter.is-active .alps-statement, .chapter.is-active .cta-stack, .chapter.is-active .access-footer{ animation:fieldSettle .72s var(--ease) .13s both; } @keyframes fieldSettle{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:translate3d(0,0,0)}} } @media(max-width:370px){ /* Narrow Android devices: protect the clear gutter rather than enlarging typography. */ #research .research-copy,#systems .systems-copy,#evidence .evidence-copy, #standards .standards-copy,#alps .alps-copy,#access .access-copy{width:150px!important;max-width:150px!important} #standards .principles-list,#alps .status-grid{width:154px!important;max-width:154px!important} #access .cta-stack{width:150px!important} body[data-nulvr-chapter="4"] .continuity-engine{transform:translate3d(-34vw,3vh,0) scale(.61)!important} body[data-nulvr-chapter="5"] .continuity-engine{transform:translate3d(-34vw,1vh,0) scale(.63)!important} body[data-nulvr-chapter="6"] .continuity-engine{transform:translate3d(34vw,0,0) scale(.64)!important} } @media(min-width:800px){ /* Desktop follows the same split-field concept with a wider mechanical stage. */ body[data-nulvr-chapter="4"] .continuity-engine{top:190px!important;height:56vh!important;transform:translate3d(-14vw,1vh,0) scale(.82)!important} #standards .principles-list{left:auto!important;right:7vw!important;width:330px!important;top:16vh!important} #standards .standards-copy{left:auto!important;right:7vw!important;top:55vh!important;width:330px!important} body[data-nulvr-chapter="5"] .continuity-engine{top:176px!important;height:58vh!important;transform:translate3d(-15vw,1vh,0) scale(.83)!important} #alps .status-grid{left:auto!important;right:7vw!important;width:340px!important;top:15vh!important} #alps .alps-copy{left:auto!important;right:7vw!important;top:50vh!important;width:340px!important} body[data-nulvr-chapter="6"] .continuity-engine{top:180px!important;height:56vh!important;transform:translate3d(17vw,1vh,0) scale(.82)!important;opacity:.94!important} #access .access-copy{left:7vw!important;right:auto!important;top:18vh!important;width:320px!important} #access .cta-stack{left:7vw!important;right:auto!important;width:320px!important;top:55vh!important} } /* ================================================================ v18.4 — Hard Clear Fields / No Haze / Mechanical Viewport Recording-driven correction from v18.3. ================================================================ */ /* A fixed, non-moving viewport owns the engine. The engine may move inside it, but cannot cross into typography territory on split-field chapters. */ .continuity-mask{ position:fixed; inset:0; z-index:8; pointer-events:none; overflow:hidden; clip-path:inset(0 0 0 0); transition:clip-path 1.02s cubic-bezier(.22,.61,.36,1); contain:paint; } .continuity-mask .continuity-engine{ position:absolute!important; z-index:1!important; } /* Remove every CSS-originated white wash around or behind the mechanical field. */ .engine-window::before, .hero-vignette{ display:none!important; content:none!important; background:none!important; opacity:0!important; } @media(max-width:799px){ /* No image-overlay haze. Only the live mechanical render remains. */ .continuity-reference, .engine-blueprint{ display:none!important; opacity:0!important; } .chapter::after{ display:none!important; opacity:0!important; background:none!important; } .continuity-canvas{ filter:drop-shadow(0 11px 17px rgba(36,33,30,.065))!important; } .continuity-instrument{ opacity:.09!important; mix-blend-mode:normal!important; } /* STANDARDS — hard left mechanical field, hard right information field. */ body[data-nulvr-chapter="4"] .continuity-mask{ clip-path:inset(0 47% 0 0); } body[data-nulvr-chapter="4"] .continuity-engine{ top:218px!important; height:43vh!important; transform:translate3d(-31vw,3vh,0) scale(.62)!important; opacity:1!important; } #standards .principles-list, #standards .standards-copy{ z-index:16!important; } /* ALPS — the wordmark and status rail are physically unreachable by the engine. */ body[data-nulvr-chapter="5"] .continuity-mask{ clip-path:inset(0 47% 0 0); } body[data-nulvr-chapter="5"] .continuity-engine{ top:200px!important; height:45vh!important; transform:translate3d(-32vw,1vh,0) scale(.64)!important; opacity:1!important; } #alps .status-grid, #alps .alps-copy, #alps .pipeline, #alps .alps-statement{ z-index:16!important; } /* LABORATORY — left copy/CTA field and right mechanical field are now disjoint. */ body[data-nulvr-chapter="6"] .continuity-mask{ clip-path:inset(0 0 0 48%); } body[data-nulvr-chapter="6"] .continuity-engine{ top:186px!important; height:42vh!important; transform:translate3d(32vw,0,0) scale(.64)!important; opacity:.98!important; } #access .access-copy, #access .cta-stack, #access .access-footer{ z-index:16!important; } /* Full mechanical viewport for the chapters that already have safe vertical clearance. */ body[data-nulvr-chapter="0"] .continuity-mask, body[data-nulvr-chapter="1"] .continuity-mask, body[data-nulvr-chapter="2"] .continuity-mask, body[data-nulvr-chapter="3"] .continuity-mask{ clip-path:inset(0 0 0 0); } } @media(max-width:370px){ body[data-nulvr-chapter="4"] .continuity-mask, body[data-nulvr-chapter="5"] .continuity-mask{clip-path:inset(0 49% 0 0)} body[data-nulvr-chapter="6"] .continuity-mask{clip-path:inset(0 0 0 50%)} } @media(min-width:800px){ body[data-nulvr-chapter="4"] .continuity-mask, body[data-nulvr-chapter="5"] .continuity-mask{clip-path:inset(0 42% 0 0)} body[data-nulvr-chapter="6"] .continuity-mask{clip-path:inset(0 0 0 42%)} } /* ================================================================ v18.5 — True Collision-Free Composition / Measured Exclusion Zones The machine field is derived from live typography geometry. No shields. ================================================================ */ :root{ --engine-clip-top:78px;--engine-clip-right:10px;--engine-clip-bottom:58px;--engine-clip-left:190px; --engine-safe-top:78px;--engine-safe-height:620px;--engine-safe-x:92px;--engine-safe-y:0px;--engine-safe-scale:.68; } /* Hard clipping updates immediately at chapter entry. This is intentional: an interpolated clip rectangle can temporarily expose the machine behind protected typography. */ .continuity-mask{ clip-path:inset(var(--engine-clip-top) var(--engine-clip-right) var(--engine-clip-bottom) var(--engine-clip-left))!important; transition:none!important; contain:paint!important; } html body .continuity-mask .continuity-engine{ top:var(--engine-safe-top)!important; left:0!important;right:0!important; height:var(--engine-safe-height)!important; min-height:0!important; transform:translate3d(var(--engine-safe-x),var(--engine-safe-y),0) scale(var(--engine-safe-scale))!important; opacity:1!important; transition:top .95s var(--ease),height .95s var(--ease),transform .95s var(--ease),opacity .4s ease!important; transform-origin:50% 50%!important; } /* There is no longer any image / CSS atmosphere capable of whitening the core. */ .continuity-reference,.engine-blueprint,.hero-vignette,.engine-window::before,.chapter::after{ display:none!important;opacity:0!important;background:none!important;filter:none!important; } .continuity-canvas{filter:drop-shadow(0 10px 15px rgba(32,30,28,.055))!important} .continuity-instrument{opacity:.055!important;mix-blend-mode:normal!important} @media(max-width:799px){ /* Engine-first mobile: remove secondary labels that previously competed with the opening machine. */ #laboratory .callout{display:none!important} #laboratory .hero-meta{top:84px!important;left:var(--pad)!important;width:138px!important;gap:2px!important} #laboratory .hero-copy{left:var(--pad)!important;right:auto!important;bottom:78px!important;width:150px!important;max-width:150px!important} #laboratory .hero-copy h1{font-size:28px!important;line-height:.94!important;max-width:148px!important} #laboratory .hero-copy .body-copy{font-size:9.4px!important;line-height:1.42!important;max-width:148px!important} /* RESEARCH — all explanatory copy is a left rail; the sequence is a low baseline. */ #research .research-copy{left:var(--pad)!important;right:auto!important;top:94px!important;width:150px!important;max-width:150px!important} #research .research-copy h2{font-size:27px!important;line-height:.95!important} #research .research-copy .body-copy{font-size:9.5px!important;line-height:1.42!important} #research .research-sequence{left:var(--pad)!important;right:var(--pad)!important;bottom:62px!important;display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:10px!important;border-top:1px solid rgba(46,52,56,.22)!important} #research .research-sequence>div{min-height:74px!important;padding:9px 0 0!important;border:0!important} #research .research-sequence small{font-size:6.8px!important} #research .research-sequence strong{font-size:8.2px!important} #research .research-sequence p{font-size:7.1px!important;line-height:1.28!important;max-width:104px!important} /* SYSTEMS is the composition benchmark: left copy, right machine, low index. */ #systems .systems-copy{left:var(--pad)!important;right:auto!important;top:104px!important;width:150px!important;max-width:150px!important} #systems .systems-copy h2{font-size:27px!important;line-height:.95!important} #systems .systems-copy .body-copy{font-size:9.4px!important;line-height:1.42!important} #systems .system-index{left:var(--pad)!important;right:var(--pad)!important;bottom:62px!important} /* EVIDENCE — deliberately smaller optical envelope; no crop against TRACE STATE. */ #evidence .evidence-copy{left:auto!important;right:var(--pad)!important;top:92px!important;width:148px!important;max-width:148px!important} #evidence .evidence-copy h2{font-size:28px!important;line-height:.95!important} #evidence .evidence-chain{left:var(--pad)!important;right:var(--pad)!important;bottom:112px!important} #evidence .verification-line{left:var(--pad)!important;right:var(--pad)!important;bottom:72px!important} /* STANDARDS — one clean right typography rail. No decorative mark, no text crossing the engine field. */ #standards .standards-mark{display:none!important} #standards .principles-list{left:auto!important;right:var(--pad)!important;top:88px!important;width:158px!important;max-width:158px!important} #standards .principles-list li{min-height:40px!important;grid-template-columns:25px 1fr!important;padding:6px 0!important;background:transparent!important} #standards .principles-list strong{font-size:8.35px!important;line-height:1.23!important} #standards .standards-copy{left:auto!important;right:var(--pad)!important;top:326px!important;width:158px!important;max-width:158px!important} #standards .standards-copy h2{font-size:26px!important;line-height:.94!important;max-width:156px!important} #standards .standards-copy .body-copy{font-size:9.25px!important;line-height:1.4!important;max-width:156px!important} /* ALPS — status card is gone. Four states now read as an editorial telemetry rail. */ #alps .alps-seal{display:none!important} #alps .status-rail{ position:absolute!important;left:auto!important;right:var(--pad)!important;top:90px!important; width:158px!important;max-width:158px!important;display:grid!important;grid-template-columns:1fr!important; gap:0!important;background:transparent!important;border:0!important;box-shadow:none!important;z-index:16!important; } #alps .status-rail>div{ display:grid!important;grid-template-columns:58px 1fr!important;align-items:baseline!important; min-height:0!important;padding:5px 0!important;border:0!important;border-bottom:1px solid rgba(46,52,56,.16)!important;background:transparent!important; } #alps .status-rail span{font-size:6.6px!important;letter-spacing:.17em!important;color:var(--mid)!important} #alps .status-rail strong{font-size:7.7px!important;line-height:1.15!important;letter-spacing:.06em!important;text-align:right!important;font-weight:600!important} #alps .alps-copy{left:auto!important;right:var(--pad)!important;top:282px!important;width:158px!important;max-width:158px!important} #alps .alps-title{font-size:49px!important;line-height:.80!important} #alps .alps-subtitle{font-size:8.1px!important;margin:6px 0 9px!important} #alps .alps-copy .body-copy{font-size:9.15px!important;line-height:1.39!important;max-width:156px!important} #alps .pipeline{left:var(--pad)!important;right:var(--pad)!important;bottom:102px!important} #alps .alps-statement{left:var(--pad)!important;right:auto!important;bottom:61px!important;width:218px!important;max-width:218px!important;font-size:7.8px!important} /* LABORATORY — CTAs become technical text links, not blocks/cards. */ #access .access-mark{display:none!important} #access .access-copy{left:var(--pad)!important;right:auto!important;top:94px!important;width:150px!important;max-width:150px!important} #access .access-copy h2{font-size:28px!important;line-height:.94!important;max-width:148px!important} #access .access-copy .body-copy{font-size:9.4px!important;line-height:1.42!important;max-width:148px!important} #access .cta-stack{left:var(--pad)!important;right:auto!important;top:350px!important;width:150px!important;display:flex!important;flex-direction:column!important;gap:0!important;background:transparent!important} #access .cta{ position:relative!important;width:100%!important;height:auto!important;min-height:0!important;padding:11px 20px 9px 0!important; display:block!important;border:0!important;border-top:1px solid rgba(17,17,17,.42)!important;border-radius:0!important; background:transparent!important;color:var(--ink)!important;text-align:left!important;font-size:7.4px!important;letter-spacing:.15em!important; } #access .cta::after{content:'↗';position:absolute;right:0;top:8px;font-size:12px;line-height:1;font-weight:400;letter-spacing:0} #access .cta-secondary::after{content:'↖'} #access .access-footer{ left:var(--pad)!important;right:var(--pad)!important;width:auto!important;bottom:calc(48px + env(safe-area-inset-bottom))!important; display:grid!important;grid-template-columns:1fr auto!important;gap:3px 16px!important;padding-top:9px!important;border-top:1px solid rgba(46,52,56,.18)!important; } #access .access-footer strong{grid-column:1/2!important} #access .access-footer small{grid-column:1/2!important;max-width:210px!important} #access .access-footer .count{position:static!important;grid-column:2/3!important;grid-row:1/2!important;margin:0!important;text-align:right!important} /* Protected typography remains completely transparent: never solve collision by covering the machine. */ #laboratory .hero-copy,#laboratory .hero-meta,#research .research-copy,#research .research-sequence, #systems .systems-copy,#systems .system-index,#evidence .evidence-copy,#evidence .evidence-chain,#evidence .verification-line, #standards .standards-copy,#standards .principles-list,#alps .alps-copy,#alps .status-rail,#alps .pipeline,#alps .alps-statement, #access .access-copy,#access .cta-stack,#access .access-footer{ background:transparent!important;background-image:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important; } } @media(max-width:370px){ #standards .principles-list,#standards .standards-copy,#alps .status-rail,#alps .alps-copy{width:148px!important;max-width:148px!important} #access .access-copy,#access .cta-stack,#research .research-copy,#systems .systems-copy{width:142px!important;max-width:142px!important} } @media(min-width:800px){ #alps .status-grid{display:none!important} #alps .status-rail{position:absolute;right:7vw;top:15vh;width:320px;display:grid;grid-template-columns:1fr 1fr;gap:0 28px;background:transparent;border:0} #alps .status-rail>div{padding:9px 0;border-bottom:1px solid rgba(46,52,56,.18);display:flex;justify-content:space-between;gap:20px} #alps .status-rail span{font-size:8px;letter-spacing:.16em;color:var(--mid)} #alps .status-rail strong{font-size:9px;letter-spacing:.07em;font-weight:600} #alps .alps-copy{right:7vw!important;top:43vh!important;width:320px!important;max-width:320px!important} #standards .principles-list{right:7vw!important;width:320px!important;top:14vh!important} #standards .standards-copy{right:7vw!important;top:52vh!important;width:320px!important;max-width:320px!important} #access .access-copy{left:7vw!important;top:17vh!important;width:300px!important;max-width:300px!important} #access .cta-stack{left:7vw!important;top:52vh!important;width:300px!important} #access .cta{height:auto!important;padding:14px 22px 12px 0!important;border:0!important;border-top:1px solid rgba(17,17,17,.42)!important;background:transparent!important;text-align:left!important} #access .cta::after{content:'↗';float:right} } /* ================================================================ v18.6 — Open Technical Field / Restored Material Depth / Watermark Atlas Recording + user-reference correction. - No rectangular engine clipping or white typography strips. - The live machine stays visible and is composed around open copy fields. - Reference images are converted to transparent technical watermarks below WebGL. ================================================================ */ :root{ --ivory:#F0EEE8; --paper:#F7F5F0; --paper-2:#ECE9E2; } body[data-nulvr-chapter="0"],body[data-nulvr-chapter="2"],body[data-nulvr-chapter="4"]{background:#F0EEE8!important;--paper-rgb:240,238,232} body[data-nulvr-chapter="1"],body[data-nulvr-chapter="3"]{background:#ECE9E2!important;--paper-rgb:236,233,226} body[data-nulvr-chapter="5"],body[data-nulvr-chapter="6"]{background:#F5F2EC!important;--paper-rgb:245,242,236} /* Background technical field: always below the persistent WebGL engine. */ .technical-field{ position:fixed;inset:0;z-index:3;pointer-events:none;overflow:hidden; background: radial-gradient(circle at 82% 24%,rgba(119,106,84,.035),transparent 34%), linear-gradient(135deg,rgba(255,255,255,.14),rgba(96,89,78,.018) 48%,rgba(255,255,255,0)); } .watermark-layer{ position:absolute;inset:-12%;opacity:0; background-repeat:no-repeat;background-position:center;background-size:contain; mix-blend-mode:multiply;filter:contrast(.94) saturate(.78); transform:translate3d(0,8px,0) scale(1.04); transition:opacity .72s ease,transform 1.05s var(--ease); will-change:opacity,transform; } /* v18.9.10 — removed the legacy --radial/--blueprint/--engineering watermark variants: only .watermark-layer--chapter is ever present in the DOM (see index.html), so these rules and the ~5.2MB of PNG/JPG images they pointed to were dead weight. */ /* v18.5's hard corridor is completely retired. Only the viewport edge can crop the engine. */ .continuity-mask{ clip-path:inset(0)!important; overflow:hidden!important; transition:none!important; } html body .continuity-mask .continuity-engine{ top:var(--engine-safe-top)!important; height:var(--engine-safe-height)!important; transform:translate3d(var(--engine-safe-x),var(--engine-safe-y),0) scale(var(--engine-safe-scale))!important; transform-origin:50% 50%!important; opacity:1!important; transition:top 1.08s var(--ease),height 1.08s var(--ease),transform 1.08s var(--ease),opacity .5s ease!important; } .continuity-canvas{ opacity:1; filter:drop-shadow(0 13px 19px rgba(42,37,30,.10)) contrast(1.025) saturate(1.08)!important; } .continuity-canvas.is-ready{opacity:1!important} .continuity-instrument{opacity:.085!important;mix-blend-mode:multiply!important} /* No typography may acquire a protective paper background. */ #laboratory .hero-copy,#laboratory .hero-meta, #research .research-copy,#research .research-sequence, #systems .systems-copy,#systems .system-index, #evidence .evidence-copy,#evidence .evidence-chain,#evidence .verification-line, #standards .standards-copy,#standards .principles-list, #alps .alps-copy,#alps .status-rail,#alps .pipeline,#alps .alps-statement, #access .access-copy,#access .cta-stack,#access .access-footer{ background:transparent!important;background-image:none!important; backdrop-filter:none!important;-webkit-backdrop-filter:none!important; box-shadow:none!important;border-radius:0!important; } @media(max-width:799px){ /* Open editorial fields. Narrower copy columns leave a real mechanical lane instead of masking one. */ #laboratory .hero-copy{width:143px!important;max-width:143px!important;bottom:73px!important} #laboratory .hero-copy h1{font-size:27px!important;max-width:142px!important} #laboratory .hero-copy .body-copy{font-size:9.15px!important;max-width:141px!important} #laboratory .hero-meta{width:132px!important;top:82px!important} #research .research-copy{top:92px!important;width:143px!important;max-width:143px!important} #research .research-copy h2{font-size:26px!important;max-width:142px!important} #research .research-copy .body-copy{font-size:9.25px!important;max-width:141px!important} #research .research-sequence{bottom:58px!important;gap:8px!important} #research .research-sequence>div{min-height:68px!important;padding-top:8px!important} #research .research-sequence p{font-size:6.85px!important;line-height:1.27!important} #systems .systems-copy{top:100px!important;width:143px!important;max-width:143px!important} #systems .systems-copy h2{font-size:26px!important;max-width:142px!important} #systems .systems-copy .body-copy{font-size:9.2px!important;max-width:141px!important} #systems .system-index{bottom:59px!important} #evidence .evidence-copy{top:90px!important;width:143px!important;max-width:143px!important} #evidence .evidence-copy h2{font-size:27px!important;max-width:142px!important} #evidence .evidence-copy .body-copy{font-size:9.2px!important;max-width:141px!important} #evidence .evidence-chain{bottom:108px!important} #evidence .verification-line{bottom:69px!important} #standards .principles-list{right:var(--pad)!important;top:84px!important;width:145px!important;max-width:145px!important} #standards .principles-list li{min-height:38px!important;grid-template-columns:23px 1fr!important;padding:5px 0!important} #standards .principles-list strong{font-size:8.0px!important;line-height:1.20!important} #standards .standards-copy{right:var(--pad)!important;top:318px!important;width:145px!important;max-width:145px!important} #standards .standards-copy h2{font-size:25px!important;max-width:144px!important} #standards .standards-copy .body-copy{font-size:9.05px!important;max-width:143px!important} #alps .status-rail{right:var(--pad)!important;top:86px!important;width:145px!important;max-width:145px!important} #alps .status-rail>div{grid-template-columns:52px 1fr!important;padding:4px 0!important} #alps .status-rail span{font-size:6.2px!important} #alps .status-rail strong{font-size:7.25px!important} #alps .alps-copy{right:var(--pad)!important;top:270px!important;width:145px!important;max-width:145px!important} #alps .alps-title{font-size:45px!important} #alps .alps-copy .body-copy{font-size:8.95px!important;max-width:143px!important} #alps .pipeline{bottom:98px!important} #alps .alps-statement{bottom:59px!important;width:205px!important;max-width:205px!important} #access .access-copy{top:92px!important;width:143px!important;max-width:143px!important} #access .access-copy h2{font-size:27px!important;max-width:142px!important} #access .access-copy .body-copy{font-size:9.2px!important;max-width:141px!important} #access .cta-stack{top:338px!important;width:143px!important} #access .cta{padding:10px 18px 8px 0!important;font-size:7.1px!important;background:transparent!important} #access .access-footer{bottom:calc(44px + env(safe-area-inset-bottom))!important} /* Keep the watermark atlas delicate on phone displays. */ .technical-field{background:linear-gradient(145deg,rgba(255,255,255,.10),rgba(93,83,67,.018) 52%,rgba(255,255,255,0))} } @media(max-width:370px){ #standards .principles-list,#standards .standards-copy,#alps .status-rail,#alps .alps-copy{width:136px!important;max-width:136px!important} #research .research-copy,#systems .systems-copy,#access .access-copy,#access .cta-stack{width:136px!important;max-width:136px!important} } @media(min-width:800px){ .watermark-layer{inset:-8%} } @media(max-width:799px){ /* Compact optical plate: the complete machine can sit beside the copy without a rectangular mask. */ .continuity-plate{width:clamp(600px,158vw,650px)!important} .continuity-canvas{inset:-8%!important;width:116%!important;height:116%!important} } @media(max-width:799px){ /* Engine-first handoff: on the three side-rail chapters, copy waits until the machine has cleared its travelling path instead of being painted over during the camera move. */ #standards.is-active .standards-copy{animation-delay:.42s!important} #standards.is-active .principles-list{animation-delay:.38s!important} #alps.is-active .alps-copy{animation-delay:.50s!important} #alps.is-active .status-rail{animation:fieldSettle .62s var(--ease) .46s both!important} #alps.is-active .pipeline,#alps.is-active .alps-statement{animation-delay:.48s!important} #access.is-active .access-copy{animation-delay:.55s!important} #access.is-active .cta-stack,#access.is-active .access-footer{animation:fieldSettle .62s var(--ease) .52s both!important} } /* ================================================================ v18.7 — Transition-Safe Typography / Material Depth / Watermark Lift Refinement pass from on-device v18.6 review. - No paper shields and no hard engine masks. - Typography reveals by semantic line so the section stays alive while the machine clears its camera path. - Watermarks are perceptible enough to break the light field without haze. - WebGL remains the dominant foreground object. ================================================================ */ :root{--chapter-in:560ms} /* Engine optical polish is isolated to the WebGL canvas — never to the page field. */ .continuity-canvas{ filter:brightness(1.075) contrast(1.035) saturate(1.16) drop-shadow(0 14px 21px rgba(39,34,28,.11))!important; } .continuity-instrument{opacity:.105!important} /* Line-level choreography removes the old all-or-nothing reveal blank frame. */ .chapter.is-active .reveal-block{ opacity:1!important;transform:none!important;animation:none!important; } .reveal-block>.eyebrow,.reveal-block>h2,.reveal-block>.body-copy, .reveal-block>.alps-subtitle{ opacity:0;transform:translate3d(0,7px,0); } .chapter.is-active .reveal-block>.eyebrow{animation:v187TextIn .42s var(--ease) .03s both!important} .chapter.is-active .reveal-block>h2{animation:v187TextIn .54s var(--ease) .10s both!important} .chapter.is-active .reveal-block>.alps-subtitle{animation:v187TextIn .48s var(--ease) .15s both!important} .chapter.is-active .reveal-block>.body-copy{animation:v187TextIn .52s var(--ease) .19s both!important} @keyframes v187TextIn{to{opacity:1;transform:translate3d(0,0,0)}} /* Supporting rails begin quickly on safe chapters so there is never a dead handoff. */ #research.is-active .research-sequence, #systems.is-active .system-index, #evidence.is-active .evidence-chain, #evidence.is-active .verification-line{ animation:fieldSettle .58s var(--ease) .16s both!important; } /* STANDARDS transition safety: identity appears immediately; large copy + principle rail wait for the mechanical crossing to clear. No rectangle hides either layer. */ #standards.is-active .standards-copy>.eyebrow{animation-delay:.04s!important} #standards.is-active .standards-copy>h2{animation-delay:.74s!important} #standards.is-active .standards-copy>.body-copy{animation-delay:.86s!important} #standards.is-active .principles-list{animation:fieldSettle .48s var(--ease) .80s both!important} /* ALPS / LAB retain the same staged handoff but keep their section identity alive. */ #alps.is-active .alps-copy>.eyebrow{animation-delay:.04s!important} #alps.is-active .alps-copy>h2{animation-delay:.62s!important} #alps.is-active .alps-copy>.alps-subtitle{animation-delay:.70s!important} #alps.is-active .alps-copy>.body-copy{animation-delay:.78s!important} #alps.is-active .status-rail{animation:fieldSettle .52s var(--ease) .62s both!important} #alps.is-active .pipeline,#alps.is-active .alps-statement{animation:fieldSettle .52s var(--ease) .72s both!important} #access.is-active .access-copy>.eyebrow{animation-delay:.04s!important} #access.is-active .access-copy>h2{animation-delay:.58s!important} #access.is-active .access-copy>.body-copy{animation-delay:.70s!important} #access.is-active .cta-stack,#access.is-active .access-footer{animation:fieldSettle .52s var(--ease) .76s both!important} /* The transient state is non-visual infrastructure, used to keep low-level telemetry from competing with the camera flight while the title identity stays present. */ body.is-chapter-transitioning #alps.is-active .pipeline, body.is-chapter-transitioning #alps.is-active .alps-statement, body.is-chapter-transitioning #access.is-active .access-footer{pointer-events:none} @media(max-width:799px){ /* STANDARDS: a slightly tighter, farther-left machine lane gives the complete fan geometry room without entering the right typography rail. */ #standards .principles-list{top:82px!important;width:143px!important;max-width:143px!important} #standards .standards-copy{top:314px!important;width:143px!important;max-width:143px!important} #standards .standards-copy h2{font-size:24.5px!important;max-width:142px!important} #standards .standards-copy .body-copy{font-size:8.95px!important;max-width:141px!important} /* LABORATORY returns to Engine-First: larger optical envelope, closer to centre, while the copy/CTA remains a narrow left rail. */ #access .access-copy{top:90px!important;width:140px!important;max-width:140px!important} #access .access-copy h2{font-size:26px!important;max-width:139px!important} #access .access-copy .body-copy{font-size:9.0px!important;max-width:138px!important} #access .cta-stack{top:330px!important;width:140px!important} #access .access-footer{bottom:calc(42px + env(safe-area-inset-bottom))!important} /* Watermarks stay broad and architectural rather than reading as image panels. */ } @media(max-width:370px){ #standards .principles-list,#standards .standards-copy{width:134px!important;max-width:134px!important} #access .access-copy,#access .cta-stack{width:132px!important;max-width:132px!important} } @media(prefers-reduced-motion:reduce){ .reveal-block>.eyebrow,.reveal-block>h2,.reveal-block>.body-copy,.reveal-block>.alps-subtitle{opacity:1!important;transform:none!important;animation:none!important} #standards.is-active .principles-list,#alps.is-active .status-rail,#alps.is-active .pipeline,#alps.is-active .alps-statement,#access.is-active .cta-stack,#access.is-active .access-footer{animation:none!important;opacity:1!important;transform:none!important} } /* ================================================================ v18.8 — Hero-Dominant Core / Visible Watermark Family / Persistent Motion ================================================================ */ /* Use the user's reference images directly via .watermark-layer--chapter (see v18.9.x block below for the actual per-chapter image assignment). */ .watermark-layer{filter:grayscale(.72) sepia(.05) contrast(.82) brightness(1.08) saturate(.55)!important;mix-blend-mode:multiply!important} .watermark-layer::before,.watermark-layer::after{ content:"";position:absolute;pointer-events:none;background-image:inherit;background-repeat:no-repeat; background-size:210% auto;opacity:.36;filter:grayscale(.82) contrast(.78) brightness(1.12); } .watermark-layer::before{width:64%;height:48%;right:-4%;top:8%;background-position:72% 31%;transform:rotate(-4deg)} .watermark-layer::after{width:54%;height:40%;left:-6%;bottom:5%;background-position:22% 72%;transform:rotate(5deg);opacity:.24} /* CORE watermark image/position is set by .watermark-layer--chapter below (v18.9.x block). */ /* Metal depth: preserve mid-tones and warm accents without a white wash. */ .continuity-canvas{ filter:brightness(1.045) contrast(1.055) saturate(1.19) drop-shadow(0 15px 22px rgba(39,34,28,.12))!important; } .continuity-instrument{opacity:.115!important} @media(max-width:799px){ /* CORE copy stays in a clean lower-left field while the larger engine owns the upper half. */ #laboratory .hero-meta{top:82px!important;width:126px!important} #laboratory .hero-copy{bottom:70px!important;width:146px!important;max-width:146px!important} #laboratory .hero-copy h1{font-size:28.5px!important;line-height:.93!important;max-width:145px!important} #laboratory .hero-copy .body-copy{font-size:9.2px!important;line-height:1.40!important;max-width:144px!important} /* STANDARDS: decongest the upper-right rail and leave more breathing room around the machine. */ #standards .principles-list{top:80px!important;width:138px!important;max-width:138px!important} #standards .principles-list li{min-height:35px!important;grid-template-columns:22px 1fr!important;padding:4px 0!important} #standards .principles-list strong{font-size:7.65px!important;line-height:1.18!important} #standards .standards-copy{top:286px!important;width:138px!important;max-width:138px!important} #standards .standards-copy h2{font-size:24px!important;line-height:.93!important;max-width:137px!important} #standards .standards-copy .body-copy{font-size:8.8px!important;line-height:1.38!important;max-width:136px!important} /* LABORATORY: stronger ending, but the copy and CTA still own a narrow left lane. */ #access .access-copy{top:88px!important;width:137px!important;max-width:137px!important} #access .access-copy h2{font-size:26.5px!important;line-height:.94!important;max-width:136px!important} #access .access-copy .body-copy{font-size:8.95px!important;line-height:1.39!important;max-width:135px!important} #access .cta-stack{top:320px!important;width:137px!important} #access .cta{font-size:6.9px!important;letter-spacing:.14em!important;padding:10px 14px 8px 0!important} } @media(max-width:370px){ #standards .principles-list,#standards .standards-copy{width:130px!important;max-width:130px!important} #access .access-copy,#access .cta-stack{width:128px!important;max-width:128px!important} } /* ================================================================ v18.9.4 — Source Watermark Text Removal / Zero Overlay Masking No paper-coloured patches, masks, shields, neutralizers, or text stickers. v18.8 watermark assets render natively and continuously. ================================================================ */ /* Defensive kill-switch: legacy cleanup nodes must never paint even if an older cached HTML fragment is injected by a browser/service worker. */ .watermark-script-cleanup,.wm-clean{display:none!important;background:none!important;filter:none!important;mask:none!important;-webkit-mask:none!important} /* Header/copy collision layers remain editorial-only; they do not paint backgrounds. */ #laboratory .chapter-head{z-index:70!important} #laboratory .head-state{position:relative;z-index:2} #laboratory .hero-copy,#laboratory .hero-meta{z-index:52!important} #access .access-copy,#access .cta-stack,#access .access-footer{z-index:52!important} #access .cta-stack{isolation:isolate} #access .cta-stack::before{display:none!important} @media(max-width:799px){ #laboratory .hero-copy{width:146px!important;max-width:146px!important} #access .access-copy{width:137px!important;max-width:137px!important} #access .cta-stack{left:var(--pad)!important;width:137px!important;max-width:137px!important} } /* ================================================================ v18.9.5 — Single Watermark Per Chapter / Engine Copper Headlines - One and only one native watermark DOM layer exists for the active chapter. - No duplicated ::before / ::after image fragments. - No masking, paper-coloured patches, or cleanup overlays. - The first word of each primary chapter headline uses engine copper. - ALPS (05) remains monochrome by design. ================================================================ */ :root{--engine-copper:#B3822C} /* A single background-image layer. It swaps its native source by chapter. */ .watermark-layer::before,.watermark-layer::after{content:none!important;display:none!important;background-image:none!important} .watermark-layer--chapter{opacity:0!important} /* 00 CORE — blueprint */ body[data-nulvr-chapter="0"] .watermark-layer--chapter{ background-image:url('assets/watermarks/user-blueprint-field-v1894.webp')!important; opacity:.205!important;background-size:132vw!important;background-position:49% 23%!important; transform:translate3d(2vw,-3vh,0) scale(1.05)!important } /* 01 RESEARCH — blueprint */ body[data-nulvr-chapter="1"] .watermark-layer--chapter{ background-image:url('assets/watermarks/user-blueprint-field-v1894.webp')!important; opacity:.225!important;background-size:151vw!important;background-position:66% 39%!important; transform:translate3d(8vw,0,0) scale(1.05)!important } /* 02 SYSTEMS — engineering */ body[data-nulvr-chapter="2"] .watermark-layer--chapter{ background-image:url('assets/watermarks/user-engineering-field.webp')!important; opacity:.205!important;background-size:162vw!important;background-position:65% 48%!important; transform:translate3d(7vw,2vh,0) scale(1.05)!important } /* 03 EVIDENCE — blueprint */ body[data-nulvr-chapter="3"] .watermark-layer--chapter{ background-image:url('assets/watermarks/user-blueprint-field-v1894.webp')!important; opacity:.215!important;background-size:157vw!important;background-position:38% 51%!important; transform:translate3d(-5vw,2vh,0) scale(1.06)!important } /* 04 STANDARDS — engineering */ body[data-nulvr-chapter="4"] .watermark-layer--chapter{ background-image:url('assets/watermarks/user-engineering-field.webp')!important; opacity:.205!important;background-size:166vw!important;background-position:24% 48%!important; transform:translate3d(-7vw,1vh,0) scale(1.05)!important } /* 05 ALPS — blueprint; title intentionally remains monochrome */ body[data-nulvr-chapter="5"] .watermark-layer--chapter{ background-image:url('assets/watermarks/user-blueprint-field-v1894.webp')!important; opacity:.220!important;background-size:160vw!important;background-position:42% 45%!important; transform:translate3d(-5vw,0,0) scale(1.04)!important } /* 06 LABORATORY — engineering */ body[data-nulvr-chapter="6"] .watermark-layer--chapter{ background-image:url('assets/watermarks/user-engineering-field.webp')!important; opacity:.215!important;background-size:164vw!important;background-position:73% 50%!important; transform:translate3d(8vw,1vh,0) scale(1.04)!important } .title-copper{color:var(--engine-copper)!important} #alps .alps-title{color:inherit!important} /* ================================================================ v18.9.7 — Core Background Replacement / Dark Rough Bronze Headlines - CORE uses the user-supplied blueprint image directly as the sole watermark. - No generated imagery, image composites, or masking overlays. - First headline word uses a darker, more tactile bronze treatment. - ALPS remains monochrome. ================================================================ */ :root{ --engine-bronze-dark:#765026; --engine-bronze-mid:#8A612D; --engine-bronze-low:#5B3B1B; } /* 00 CORE — user-supplied image, presented with the same watermark framing as page 01. */ body[data-nulvr-chapter="0"] .watermark-layer--chapter{ background-image:url('assets/watermarks/core-page2-style-v1899.webp')!important; background-repeat:no-repeat!important; background-size:151vw!important; background-position:66% 39%!important; transform:translate3d(8vw,0,0) scale(1.05)!important; opacity:.225!important; mix-blend-mode:normal!important; filter:none!important; } /* Darker, rougher bronze: CSS-only metallic grain, no image texture. */ .title-copper{ color:var(--engine-bronze-dark)!important; background-image: repeating-linear-gradient(101deg, rgba(43,27,13,.26) 0, rgba(43,27,13,.26) .55px, rgba(255,236,196,.10) .8px, rgba(255,236,196,.10) 1.15px, transparent 1.45px, transparent 2.7px), linear-gradient(180deg, #5F3D1C 0%, #815827 25%, #936832 43%, #6B461F 64%, #7B5224 100%); -webkit-background-clip:text!important; background-clip:text!important; -webkit-text-fill-color:transparent!important; -webkit-text-stroke:.18px rgba(67,42,19,.58); text-shadow:0 .45px .35px rgba(53,33,15,.20); filter:contrast(1.14) saturate(.90); } #alps .alps-title{ color:inherit!important; background:none!important; -webkit-text-fill-color:currentColor!important; -webkit-text-stroke:0!important; text-shadow:none!important; filter:none!important; } @media(max-width:799px){ body[data-nulvr-chapter="0"] .watermark-layer--chapter{ background-size:151vw!important; background-position:66% 39%!important; transform:translate3d(8vw,0,0) scale(1.05)!important; opacity:.225!important; } .title-copper{-webkit-text-stroke:.16px rgba(67,42,19,.60)} } /* v18.9.10 — engine load fallback (see script.js engineLoadFallback()). If the WebGL canvas never becomes ready (three.js CDN import blocked/slow/down), lift the always- present static reference image to a clearly visible opacity instead of leaving the page looking broken. !important so it wins over every per-chapter opacity rule above. */ body.engine-load-fallback .continuity-reference{ opacity:.55!important; filter:grayscale(.25) contrast(1.03) saturate(.55)!important; transition:opacity 1.1s ease!important; }