*{box-sizing:border-box}html{scroll-behavior:auto;background:#000}body{margin:0;background:#000;color:#f7f7f8;font-family:"Microsoft YaHei","微软雅黑",Arial,sans-serif;line-height:1.6;letter-spacing:0;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{color:inherit}.prototype-tag{position:fixed;z-index:80;left:22px;bottom:20px;color:rgba(255,255,255,.34);font-size:9px;letter-spacing:.12em;pointer-events:none}.proto-header{position:fixed;z-index:70;top:0;left:0;width:100%;height:76px;padding:0 max(32px,4vw);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.55);backdrop-filter:blur(16px)}.proto-logo{display:flex;flex-direction:column;line-height:1}.proto-logo strong{font-size:20px}.proto-logo span{margin-top:6px;color:#7e7e88;font-size:9px}.proto-header nav{display:flex;gap:30px;font-size:12px;color:#b2b2ba}.proto-header nav a{position:relative;padding:10px 0}.proto-header nav a::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:linear-gradient(135deg,#954fec,#584cd6);transition:right .25s}.proto-header nav a:hover::after,.proto-header nav a:focus-visible::after{right:0}.header-progress{display:flex;align-items:center;gap:10px;color:#d8d8dd;font-size:10px}.header-progress i{width:54px;height:1px;background:rgba(255,255,255,.22);position:relative}.header-progress i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--progress,16%);background:linear-gradient(135deg,#954fec,#584cd6);transition:width .5s}.scene-inner{width:min(1440px,calc(100% - 96px));margin:0 auto}.proto-scene{position:relative;min-height:100svh;overflow:hidden}.sticky-stage{position:sticky;top:0;min-height:100svh;padding-top:116px}.eyebrow{margin:0 0 20px;color:rgba(247,247,248,.54);font-size:11px;font-weight:600;letter-spacing:.12em}.scene-label h2,.scene-brand h2,.scene-contact h2{margin:0;font-size:clamp(48px,4.4vw,64px);font-weight:600;line-height:1.12}.scene-label h2 em,.scene-brand h2 em,.scene-contact h2 em{font-style:normal;color:transparent;background:linear-gradient(135deg,#954fec,#584cd6);-webkit-background-clip:text;background-clip:text}.scene-label>p:last-child{max-width:520px;margin-top:22px;color:#a2a2aa;font-size:16px;line-height:1.8}.action{position:relative;min-width:156px;min-height:48px;padding:0 24px;display:inline-flex;align-items:center;justify-content:center;gap:30px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s,background-position .3s}.action span{transition:transform .2s}.action:hover{transform:translateY(-2px)}.action:hover span{transform:translateX(4px)}.action:active{transform:translateY(1px)}.action-primary{border-color:transparent;background:linear-gradient(135deg,#954fec,#584cd6);background-size:160% 160%;box-shadow:0 16px 40px rgba(88,76,214,.22)}.action-primary:hover{background-position:100% 100%;box-shadow:0 20px 50px rgba(88,76,214,.4)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #954fec;outline-offset:3px}.scene-hero{display:flex;align-items:center;background:#000}.scene-hero canvas{position:absolute;inset:0;width:100%;height:100%}.scene-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:88px 88px;mask-image:radial-gradient(circle at center,#000,transparent 72%)}.hero-content{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}.hero-content h1{margin:0;font-size:clamp(64px,6.4vw,92px);font-weight:600;line-height:1.08}.hero-content h1 em{font-style:normal;color:transparent;background:linear-gradient(135deg,#954fec,#584cd6);-webkit-background-clip:text;background-clip:text}.hero-copy{max-width:680px;margin:28px auto 32px;color:#a2a2aa;font-size:16px;line-height:1.8}.hero-actions{display:flex;gap:12px}.hero-signal{margin-top:42px;display:flex;align-items:center;gap:12px;color:#73737c;font-size:9px;letter-spacing:.12em}.hero-signal b{width:7px;height:7px;border-radius:50%;background:#954fec;box-shadow:0 0 0 5px rgba(149,79,236,.12),0 0 20px #954fec}.hero-index{position:absolute;z-index:2;left:max(32px,4vw);right:max(32px,4vw);bottom:26px;display:flex;justify-content:space-between;color:#55555d;font-size:9px;letter-spacing:.12em}.scene-products{height:210svh;background:#f5f5f7;color:#17171b}.scene-products .sticky-stage{display:grid;grid-template-columns:.72fr 1.28fr;gap:5vw;align-items:center;padding-bottom:40px}.scene-products .eyebrow{color:#6e6e77}.scene-products .scene-label>p:last-child{color:#66666e}.product-stage{height:min(72vh,720px);position:relative;display:flex;align-items:center;justify-content:center;background:#0a0a0d;overflow:hidden}.asset-orbit{position:absolute;border:1px solid rgba(149,79,236,.25);border-radius:50%;width:68%;aspect-ratio:1}.orbit-b{width:45%;border-color:rgba(255,255,255,.12)}.asset-placeholder{width:min(420px,56%);aspect-ratio:1;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.2);background:radial-gradient(circle,rgba(149,79,236,.2),transparent 62%);color:#fff;text-align:center}.asset-placeholder span{font-size:72px;font-weight:700;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.35)}.asset-placeholder strong{font-size:16px}.asset-placeholder small{margin-top:8px;color:#797985;font-size:9px;letter-spacing:.12em}.product-rail{position:absolute;left:4%;right:4%;bottom:24px;display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:rgba(255,255,255,.12)}.rail-item{min-width:0;padding:13px 10px;background:#111116;display:flex;flex-direction:column}.rail-item b{color:#9d77ed;font-size:10px}.rail-item span{margin:7px 0 3px;font-size:11px}.rail-item small{color:#5f5f69;font-size:7px;white-space:nowrap}.scene-meta{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:space-between;color:#72727a;font-size:9px;letter-spacing:.12em}.scene-meta strong{color:#17171b}.scene-paths{height:240svh;background:#08080b}.path-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:6vw;align-items:center}.path-visual{height:min(62vh,600px);position:relative;background:#111116;border:1px solid rgba(255,255,255,.12);overflow:hidden}.path-line{position:absolute;left:50%;top:-10%;bottom:-10%;width:1px;background:rgba(255,255,255,.14);transform:rotate(22deg)}.path-active{position:absolute;width:320px;aspect-ratio:1;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(149,79,236,.5);box-shadow:inset 0 0 90px rgba(149,79,236,.08),0 0 70px rgba(88,76,214,.16)}.path-copy{position:absolute;left:9%;right:9%;top:50%;transform:translateY(-50%);text-align:center}.path-copy>span{color:#9d77ed;font-size:11px}.path-copy strong{display:block;margin:12px 0;font-size:34px}.path-copy p{color:#a2a2aa;font-size:13px}.path-copy a{display:inline-flex;margin-top:18px;border-bottom:1px solid #954fec;padding-bottom:6px;font-size:12px}.path-nodes{position:absolute;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px}.path-nodes i{width:7px;height:28px;background:#2b2b32}.path-nodes i.active{background:linear-gradient(180deg,#954fec,#584cd6)}.path-list{grid-column:1/-1;position:absolute;left:0;right:0;bottom:28px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.14)}.path-list article{padding:18px 20px;border-right:1px solid rgba(255,255,255,.14);opacity:.38;transition:opacity .3s,background .3s}.path-list article.active{opacity:1;background:rgba(149,79,236,.07)}.path-list b{color:#9d77ed;font-size:10px}.path-list strong{display:block;margin:8px 0;font-size:14px}.path-list span{color:#777782;font-size:10px}.scene-ai{height:250svh;background:#000}.scene-ai .sticky-stage{display:grid;grid-template-columns:.66fr 1.34fr;gap:4vw;align-items:center}.ai-console{position:relative;border:1px solid rgba(255,255,255,.16);background:#0d0d12;box-shadow:0 40px 120px rgba(0,0,0,.6);transform-origin:center}.console-bar{height:54px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12);font-size:10px;color:#9696a0}.console-bar b{display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#954fec;box-shadow:0 0 15px #954fec}.console-grid{min-height:510px;display:grid;grid-template-columns:.7fr 1.05fr .9fr}.console-input,.console-preview,.console-result{padding:24px;border-right:1px solid rgba(255,255,255,.1)}.console-result{border-right:0}.console-input label{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;color:#777782;font-size:10px}.console-input select,.console-input input,.color-value{height:44px;border:1px solid rgba(255,255,255,.14);background:#111118;color:#fff;padding:0 12px}.color-value{display:flex;align-items:center;gap:10px}.color-value i{width:18px;height:18px;background:linear-gradient(135deg,#954fec,#584cd6)}.console-preview{position:relative;display:flex;align-items:center;justify-content:center;background:#08080b;overflow:hidden}.preview-scanner{position:absolute;left:0;right:0;height:120px;top:-130px;background:linear-gradient(180deg,transparent,rgba(149,79,236,.13),transparent)}.asset-placeholder.mini{width:78%;background:none}.asset-placeholder.mini span{font-size:46px}.result-top{display:flex;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1);font-size:9px;color:#777782}.result-top b{color:#9d77ed}.result-block{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.1)}.result-block small{display:block;color:#777782;font-size:9px}.result-block strong{display:block;margin-top:6px;font-size:12px}.delivery-line{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:25px}.delivery-line i{height:3px;background:#262630}.delivery-line i.active{background:linear-gradient(135deg,#954fec,#584cd6);box-shadow:0 0 12px rgba(149,79,236,.5)}.delivery-labels{display:flex;justify-content:space-between;margin-top:7px;color:#666670;font-size:8px}.console-action{position:absolute;right:24px;bottom:20px}.scene-brand{display:flex;align-items:center;background:#f5f5f7;color:#17171b}.scene-brand .eyebrow{color:#66666e}.brand-layout{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center}.brand-copy{max-width:570px;margin:28px 0;color:#66666e;font-size:16px;line-height:1.9}.inline-link{display:inline-flex;justify-content:space-between;width:min(450px,100%);padding:16px 0;border-top:1px solid rgba(17,17,22,.18);font-size:13px;font-weight:600}.brand-metric{border-top:1px solid rgba(17,17,22,.18)}.brand-metric>div{display:grid;grid-template-columns:1fr 1fr;align-items:end;padding:30px 0;border-bottom:1px solid rgba(17,17,22,.18)}.brand-metric strong{font-size:clamp(42px,5vw,76px);line-height:1}.brand-metric span{color:#66666e;font-size:11px}.scene-contact{min-height:100svh;display:flex;align-items:center;text-align:center;background:#08080b}.contact-layout{display:flex;flex-direction:column;align-items:center}.scene-contact h2{font-size:clamp(56px,6vw,88px)}.scene-contact p:not(.eyebrow){max-width:620px;margin:28px 0 34px;color:#a2a2aa}.contact-note{margin-top:35px;color:#55555d;font-size:9px;letter-spacing:.12em}body[data-variant="b"] .scene-products .sticky-stage{grid-template-columns:.55fr 1.45fr}body[data-variant="b"] .product-stage{height:min(78vh,780px)}body[data-variant="b"] .focus-asset{width:min(520px,64%)}body[data-variant="b"] .scene-paths{background:#000}body[data-variant="b"] .scene-ai .sticky-stage{grid-template-columns:.5fr 1.5fr}body[data-variant="c"] .scene-products .sticky-stage{grid-template-columns:1fr 1fr}body[data-variant="c"] .scene-ai{background:#08080b}body[data-variant="c"] .scene-ai .sticky-stage{display:block;padding-top:104px}body[data-variant="c"] .ai-heading{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:28px}body[data-variant="c"] .ai-heading>p:last-child{max-width:400px}body[data-variant="c"] .ai-console{width:100%}.motion-reveal{opacity:0;transform:translateY(28px)}
@media(max-width:1000px){.proto-header nav{display:none}.scene-inner{width:calc(100% - 56px)}.scene-products .sticky-stage,.path-layout,.scene-ai .sticky-stage,.brand-layout{grid-template-columns:1fr}.scene-products,.scene-paths,.scene-ai{height:auto;min-height:0}.sticky-stage{position:relative;min-height:auto;padding:120px 0 90px}.product-stage{height:620px;margin-top:45px}.path-visual{height:520px;margin-top:45px}.path-list{position:relative;bottom:auto;margin-top:20px}.ai-console{margin-top:45px}.console-grid{grid-template-columns:1fr 1fr}.console-result{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1)}.console-action{position:relative;right:auto;bottom:auto;width:calc(100% - 48px);margin:0 24px 24px}.ai-heading{display:block!important}.brand-layout{gap:50px}}
@media(max-width:640px){.proto-header{height:66px;padding:0 20px}.proto-logo strong{font-size:17px}.header-progress i{width:36px}.scene-inner{width:calc(100% - 40px)}.prototype-tag{display:none}.hero-content h1{font-size:42px}.hero-copy{font-size:15px}.hero-actions{width:100%;display:grid}.action{min-height:52px;width:100%}.hero-index{left:20px;right:20px}.scene-label h2,.scene-brand h2,.scene-contact h2{font-size:36px}.sticky-stage{padding-top:100px}.scene-products .sticky-stage{display:block}.product-stage{height:500px}.asset-placeholder{width:72%}.asset-placeholder span{font-size:52px}.product-rail{grid-template-columns:repeat(3,1fr)}.rail-item:nth-child(n+4){display:none}.scene-meta{position:relative;bottom:auto;margin-top:16px}.path-visual{height:460px}.path-list{grid-template-columns:1fr}.path-list article{border-right:0;border-bottom:1px solid rgba(255,255,255,.14)}.path-copy strong{font-size:26px}.console-grid{display:block}.console-input,.console-preview,.console-result{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}.console-preview{min-height:360px}.console-result{padding-bottom:32px}.brand-metric>div{grid-template-columns:1fr}.brand-metric span{margin-top:10px}.scene-contact h2{font-size:42px}.scene-contact{padding:100px 0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.motion-reveal{opacity:1!important;transform:none!important}*{animation:none!important;transition:none!important}.scene-hero canvas{display:none}.sticky-stage{position:relative!important}}
/* Semantic line breaks and scene-specific effects. */
.title-line{display:block;white-space:nowrap}.scene-label h2,.scene-brand h2,.scene-contact h2{text-wrap:balance}.scene-label>p:last-child,.hero-copy,.brand-copy,.scene-contact p{text-wrap:pretty}.scene-brand{isolation:isolate}.brand-layout{position:relative;z-index:2}.brand-echo{position:absolute;z-index:0;left:-4vw;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:clamp(150px,19vw,360px);font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(17,17,22,.08);pointer-events:none;will-change:transform}.scene-contact{isolation:isolate}.contact-layout{position:relative;z-index:2}.contact-field{position:absolute;z-index:0;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.contact-field i{position:absolute;width:min(70vw,920px);aspect-ratio:1;border:1px solid rgba(149,79,236,.15);border-radius:50%;box-shadow:inset 0 0 90px rgba(88,76,214,.03);will-change:transform}.contact-field i:nth-child(2){width:min(48vw,620px);border-color:rgba(255,255,255,.09)}.contact-field i:nth-child(3){width:min(25vw,320px);border-color:rgba(149,79,236,.28)}
@media(min-width:841px) and (max-width:1100px){.scene-inner{width:calc(100% - 64px)}.scene-products .sticky-stage{display:grid;grid-template-columns:.72fr 1.28fr;gap:4vw}.path-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:4vw}.scene-ai .sticky-stage{display:grid;grid-template-columns:.58fr 1.42fr;gap:3vw}.scene-products{height:210svh;min-height:auto}.scene-paths{height:240svh;min-height:auto}.scene-ai{height:250svh;min-height:auto}.sticky-stage{position:sticky;top:0;min-height:100svh;padding:100px 0 34px}.product-stage{height:min(68vh,620px);margin-top:0}.path-visual{height:min(60vh,540px);margin-top:0}.path-list{position:absolute;bottom:20px;margin-top:0}.ai-console{margin-top:0}.scene-label h2{font-size:clamp(40px,4.7vw,52px)}.scene-label>p:last-child{font-size:14px}.console-grid{min-height:470px;grid-template-columns:.65fr 1fr .9fr}.console-input,.console-preview,.console-result{padding:18px}.console-result{grid-column:auto;border-top:0}.console-action{position:absolute;right:18px;bottom:16px;width:auto;margin:0}.asset-placeholder span{font-size:54px}}
@media(max-width:840px){.title-line{white-space:nowrap}.brand-echo{font-size:40vw}.contact-field i{width:120vw}.contact-field i:nth-child(2){width:86vw}.contact-field i:nth-child(3){width:52vw}}
@media(max-width:640px){.sticky-stage{padding-top:94px;padding-bottom:54px}.scene-products .product-stage{height:360px;margin-top:28px}.scene-products .asset-placeholder{width:66%}.scene-products .product-rail{bottom:12px}.scene-products .rail-item{padding:9px 8px}}
/* Revision: one viewport per narrative screen, pill actions, black scroll header, visual AI generator. */
.proto-header{background:transparent;border-bottom-color:transparent;transition:background .35s,border-color .35s,box-shadow .35s}.proto-header.is-scrolled{background:#000;border-bottom-color:rgba(255,255,255,.14);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.action{border-radius:999px}.action-primary{border-radius:999px}.scene-products,.scene-paths,.scene-ai{height:100svh;min-height:100svh}.scene-products .sticky-stage,.scene-paths .sticky-stage,.scene-ai .sticky-stage{position:relative;top:auto;height:100svh;min-height:100svh}.scene-products .sticky-stage,.path-layout,.scene-ai .sticky-stage{align-items:center}.scene-paths .path-list{bottom:20px}.scene-ai .ai-console{transform-origin:center center}
.console-input textarea{min-height:58px;resize:none;border:1px solid rgba(255,255,255,.14);background:#111118;color:#fff;padding:10px 12px;outline:none}.console-input textarea:focus{border-color:#954fec}.generated-collar{position:relative;width:min(78%,390px);height:66%;min-height:230px;filter:drop-shadow(0 24px 38px rgba(149,79,236,.12));transform:scale(.9);transition:transform .6s,filter .6s}.collar-back{position:absolute;left:12%;right:12%;top:9%;height:42%;border:3px solid rgba(185,151,255,.75);border-bottom:0;border-radius:50% 50% 0 0;background:repeating-linear-gradient(90deg,rgba(149,79,236,.16) 0 4px,rgba(255,255,255,.04) 4px 8px);box-shadow:inset 0 14px 24px rgba(149,79,236,.1)}.collar-left,.collar-right{position:absolute;bottom:10%;width:49%;height:54%;background:linear-gradient(145deg,rgba(149,79,236,.55),rgba(88,76,214,.14));border:2px solid rgba(210,193,255,.7);filter:drop-shadow(0 0 10px rgba(149,79,236,.18))}.collar-left{left:1%;clip-path:polygon(0 0,100% 8%,73% 100%,18% 91%);transform:rotate(2deg)}.collar-right{right:1%;clip-path:polygon(0 8%,100% 0,82% 91%,27% 100%);transform:rotate(-2deg)}.collar-band{position:absolute;left:38%;right:38%;bottom:7%;height:33%;border:2px solid rgba(210,193,255,.72);background:linear-gradient(180deg,rgba(149,79,236,.55),rgba(88,76,214,.25));clip-path:polygon(12% 0,88% 0,100% 100%,0 100%)}.collar-label{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);color:#fff;font-weight:700;font-size:11px;letter-spacing:.16em}.collar-scanline{position:absolute;left:8%;right:8%;top:45%;height:1px;background:#fff;box-shadow:0 0 15px #fff;opacity:.42}.generated-collar.is-generating{animation:collarGenerate .9s ease-in-out infinite alternate}.generated-collar.is-generated{transform:scale(1);filter:drop-shadow(0 25px 48px rgba(149,79,236,.35))}.generated-collar.is-generated .collar-scanline{animation:scanLine 2.2s linear infinite}.craft-pique .collar-left,.craft-pique .collar-right{background:repeating-linear-gradient(135deg,rgba(149,79,236,.62) 0 5px,rgba(255,255,255,.12) 5px 10px)}.craft-jacquard .collar-left,.craft-jacquard .collar-right{background:linear-gradient(135deg,rgba(149,79,236,.7),rgba(255,255,255,.08));border-style:dashed}.craft-plain .collar-left,.craft-plain .collar-right{background:rgba(149,79,236,.32)}.preview-caption{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;color:#8d8d98;font-size:9px;letter-spacing:.08em}.preview-caption b{color:#b99bff}.console-input input[readonly]{cursor:default}.scene-ai .console-grid{min-height:0;height:470px}.scene-ai .console-action{min-height:42px}
@keyframes collarGenerate{to{transform:scale(1.03) rotate(1deg);filter:drop-shadow(0 0 28px rgba(149,79,236,.55))}}@keyframes scanLine{from{transform:translateY(-70px);opacity:.1}50%{opacity:.8}to{transform:translateY(150px);opacity:.1}}
@media(min-width:841px) and (max-width:1100px){.scene-products,.scene-paths,.scene-ai{height:100svh;min-height:100svh}.scene-products .sticky-stage,.scene-paths .sticky-stage,.scene-ai .sticky-stage{position:relative;height:100svh;min-height:100svh;padding:90px 0 24px}.scene-products .product-stage{height:min(65vh,560px)}.scene-paths .path-visual{height:min(58vh,500px)}.scene-ai .console-grid{height:430px}.generated-collar{min-height:190px}}
@media(max-width:840px){.scene-products,.scene-paths,.scene-ai{height:auto;min-height:100svh}.scene-products .sticky-stage,.scene-paths .sticky-stage,.scene-ai .sticky-stage{height:auto;min-height:100svh}.scene-ai .console-grid{height:auto}.generated-collar{height:300px;width:74%}}
@media(prefers-reduced-motion:reduce){.generated-collar.is-generating,.generated-collar.is-generated .collar-scanline{animation:none!important}.proto-header{transition:none}}
/* Keep the AI action above the next stacked narrative panel. */
.scene-ai .console-action{bottom:78px}
/* 2026-07 stacked narrative panel prototype */
.scene-inner{width:min(1860px,calc(100% - 96px))}
@media(min-width:841px){
.scene-inner{width:min(1860px,calc(100% - 200px))}
main{position:relative;background:#000;padding-bottom:12px}
main>.proto-scene:not(.scene-hero){
position:sticky;
top:12px;
width:calc(100% - 24px);
height:calc(100svh - 24px);
min-height:calc(100svh - 24px);
margin:12px auto 0;
border-radius:32px;
overflow:hidden;
transform-origin:50% 0;
will-change:transform,filter;
box-shadow:0 -1px 0 rgba(255,255,255,.12),0 -24px 70px rgba(0,0,0,.22)
}
main>.proto-scene:nth-of-type(2){z-index:2}
main>.proto-scene:nth-of-type(3){z-index:3}
main>.proto-scene:nth-of-type(4){z-index:4}
main>.proto-scene:nth-of-type(5){z-index:5}
main>.proto-scene:nth-of-type(6){z-index:6}
main>.proto-scene:not(.scene-hero)>.sticky-stage{
top:auto;
width:100%;
max-width:none;
height:100%;
min-height:100%;
padding:104px 100px 0
}
.scene-brand,.scene-contact{height:calc(100svh - 24px)}
.scene-brand>.scene-inner,.scene-contact>.scene-inner{width:min(1860px,calc(100% - 200px))}
.scene-products .product-stage{height:min(68vh,680px)}
.scene-paths .path-visual{height:min(58vh,580px)}
.scene-ai .console-grid{height:min(55vh,500px)}
}
/* Keep authenticated actions visually consistent after switching logout to POST. */
.proto-account{display:flex;align-items:center;gap:18px}
.proto-logout-form{display:inline-flex;margin:0}
.proto-logout-form button,.portal-logout-form button{position:relative;padding:10px 0;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.proto-logout-form button::after,.portal-logout-form button::after{content:"";position:absolute;left:0;right:100%;bottom:4px;height:1px;background:linear-gradient(135deg,#954fec,#584cd6);transition:right .25s}
.proto-logout-form button:hover::after,.proto-logout-form button:focus-visible::after,.portal-logout-form button:hover::after,.portal-logout-form button:focus-visible::after{right:0}
/* P5 company profile: black editorial About layout based on the supplied UEMO reference. */
.scene-brand{background:#19191b!important;color:#f7f7f8!important;display:block!important;min-height:calc(100svh - 24px);isolation:isolate}
.brand-about{position:relative;min-height:calc(100svh - 24px);padding-top:clamp(130px,16vh,190px);padding-bottom:70px;overflow:hidden}
@media(min-width:841px){.brand-about{width:min(1860px,calc(100% - 200px));margin:0 auto}}
.about-intro{position:relative;z-index:4;width:min(620px,46%);margin-left:auto;margin-right:6vw}
.about-intro .eyebrow{color:rgba(255,255,255,.45);margin-bottom:26px}
.about-intro h2{margin:0;color:#fff;font-size:clamp(22px,2.25vw,38px);line-height:1.22;font-weight:650}
.about-intro-copy{margin-top:38px;color:rgba(255,255,255,.56);font-size:13px;line-height:1.8}
.about-intro-copy p{margin:0 0 18px}
.about-word,.about-word-outline{position:absolute;left:-2vw;top:36%;font-size:clamp(190px,27vw,520px);font-weight:800;line-height:.82;letter-spacing:0;white-space:nowrap;pointer-events:none}
.about-word{z-index:2;color:#f7f7f8}
.about-word-outline{z-index:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.1);transform:translateX(7%);will-change:transform}
.about-story{position:absolute;z-index:5;left:26%;bottom:2%;width:min(340px,24%);text-shadow:0 3px 20px rgba(0,0,0,.35)}
.about-story blockquote{margin:0;color:#fff;font-size:clamp(20px,2.25vw,36px);line-height:1.12;font-weight:650}
.about-story p{margin:20px 0 10px;color:rgba(255,255,255,.46);font-size:11px}
.about-story span{color:rgba(255,255,255,.34);font-size:10px}
.about-visual{display:none}
@media(max-width:840px){.brand-about{min-height:calc(100svh - 12px);padding-top:112px;padding-bottom:50px}.about-intro{width:calc(100% - 40px);margin:0 20px}.about-intro h2{font-size:25px}.about-intro-copy{margin-top:20px;font-size:12px}.about-word,.about-word-outline{top:35%;font-size:45vw}.about-story{left:20px;bottom:3%;width:58%}.about-story blockquote{font-size:24px}}
@media(prefers-reduced-motion:reduce){.about-word-outline{transform:none!important}.about-intro>*,.about-story>*,.about-visual,.about-word{opacity:1!important;transform:none!important}}
@media(max-width:840px){
main{background:#000}
main>.proto-scene:not(.scene-hero){
width:calc(100% - 12px);
margin:6px auto 0;
border-radius:20px;
overflow:hidden
}
}
@media(max-width:620px){.request-dialog{max-height:calc(100svh - 24px);overflow:auto}.dialog-panel{padding:28px 20px}.dialog-form-grid{grid-template-columns:1fr}.dialog-form-grid .dialog-form-wide{grid-column:auto}}
@media(prefers-reduced-motion:reduce){
main>.proto-scene:not(.scene-hero){position:relative!important;top:auto!important;transform:none!important;filter:none!important}
}
/* Formal homepage integration: keep the fluid layer between particles and copy. */
.scene-hero #particleField{z-index:0}
.scene-hero #splashCanvas{z-index:1;mix-blend-mode:screen}
.hero-content,.hero-index{z-index:3}
.focus-asset-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34;filter:saturate(.8) contrast(1.08);z-index:-1}
.focus-asset span,.focus-asset strong,.focus-asset small{position:relative;z-index:1}
.rail-item{cursor:pointer;transition:background .25s,transform .25s}
.rail-item:hover{background:#1b1b27;transform:translateY(-3px)}
.request-dialog{border:0;padding:0;background:transparent;color:#f7f7f8;width:min(520px,calc(100% - 32px));margin:auto}
.request-dialog::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(8px)}
.dialog-panel{position:relative;padding:32px;background:#111116;border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.dialog-panel h2{margin:0;font-size:30px;font-weight:600}.dialog-panel>p{color:#a2a2aa;margin:8px 0 24px}.dialog-panel label{display:flex;flex-direction:column;gap:7px;margin-top:15px;color:#a2a2aa;font-size:11px}.dialog-panel input,.dialog-panel textarea,.dialog-panel select{width:100%;border:1px solid rgba(255,255,255,.16);background:#0b0b10;color:#fff;padding:12px;outline:none}.dialog-panel input:focus,.dialog-panel textarea:focus,.dialog-panel select:focus{border-color:#954fec}.dialog-close{position:absolute;right:14px;top:10px;border:0;background:none;color:#fff;font-size:26px;cursor:pointer}.dialog-submit{width:100%;margin-top:20px}.dialog-submit:disabled{opacity:.55;cursor:wait}.dialog-status{color:#c5aaff!important;font-size:12px}.dialog-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dialog-form-grid .dialog-form-wide{grid-column:1/-1}.dialog-panel input[type="file"]{font-size:11px}
/* 2026-07-29 audit pass: protect the content zone and keep controls readable. */
.catalog-card picture{display:block;width:100%}.ai-mobile-launch,.ai-mobile-close{display:none}
@media(min-width:841px){
.scene-products .sticky-stage{padding-top:88px;padding-bottom:24px}.catalog-heading{margin-bottom:16px}.catalog-heading>p{max-width:430px;margin-top:4px;font-size:12px;line-height:1.6}.catalog-browser{gap:32px}.catalog-grid{gap:10px 20px}.catalog-card img{aspect-ratio:2.25}.catalog-card figcaption{margin-top:6px;gap:2px}.catalog-card figcaption strong{font-size:13px}.catalog-card figcaption span{font-size:9px}
.scene-ai .sticky-stage{padding-top:90px;padding-bottom:18px}.scene-ai .console-grid{height:390px}.console-input,.console-preview,.console-result{padding:18px}.console-input label{gap:5px;margin-bottom:10px;font-size:11px}.console-input select,.console-input input,.color-value{height:38px}.result-block{padding:11px 0}.result-block small{font-size:10px}.result-block strong{font-size:13px}.scene-ai .console-action{bottom:16px}
}
@media(max-width:840px){
body.ai-workspace-open{overflow:hidden}.scene-products,.scene-products .sticky-stage{height:100svh;min-height:100svh}.scene-products .sticky-stage{padding:94px 20px 24px;display:block}.catalog-heading{margin-bottom:18px}.catalog-heading .scene-label h2{font-size:34px;line-height:1.08}.catalog-heading>p{max-width:340px;margin-top:12px;font-size:12px;line-height:1.5}.catalog-browser{display:block}.catalog-sidebar{display:flex;align-items:end;gap:14px;overflow:hidden}.catalog-switch-label{flex:0 0 auto}.catalog-filters{display:flex;flex:1;overflow-x:auto;gap:8px;margin:0;padding-bottom:2px;scrollbar-width:none}.catalog-filters::-webkit-scrollbar{display:none}.catalog-filter{flex:0 0 auto;width:auto;min-height:30px;padding:0 12px;border:1px solid #dedee4;border-radius:999px;font-size:11px}.catalog-filter::before{display:none}.catalog-filter b{margin-left:8px}.catalog-more{display:none}.catalog-results{overflow:hidden;margin-top:18px}.catalog-grid{display:flex;overflow-x:auto;gap:14px;padding:0 0 14px;scroll-snap-type:x mandatory;scrollbar-width:none}.catalog-grid::-webkit-scrollbar{display:none}.catalog-card{flex:0 0 min(74vw,290px);scroll-snap-align:start}.catalog-card img{aspect-ratio:1.35}.catalog-card figcaption{margin-top:8px}
.scene-ai,.scene-ai .sticky-stage{height:100svh;min-height:100svh}.scene-ai .sticky-stage{padding:94px 20px 24px;display:block}.scene-ai .ai-heading>p:last-child{max-width:340px;margin-top:14px;font-size:12px;line-height:1.55}.ai-mobile-launch{display:inline-flex;width:auto;min-width:0;margin-top:20px;padding-inline:18px;font-size:12px}.scene-ai .ai-console{display:none}.scene-ai .ai-console.is-open{display:block;position:fixed;inset:12px;z-index:100;margin:0;overflow:auto;background:#0d0d12}.ai-console.is-open .console-bar{position:sticky;top:0;z-index:2;background:#0d0d12}.ai-console.is-open .console-grid{display:block;height:auto}.ai-console.is-open .console-input,.ai-console.is-open .console-preview,.ai-console.is-open .console-result{border-right:0;border-bottom:1px solid rgba(255,255,255,.1);padding:18px}.ai-console.is-open .console-preview{min-height:280px}.ai-console.is-open .console-action{position:relative;right:auto;bottom:auto;width:calc(100% - 36px);margin:0 18px 18px}.ai-mobile-close{display:inline-flex;align-items:center;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:transparent;color:#fff;padding:7px 11px;font:inherit;font-size:10px;cursor:pointer}
}