@charset "UTF-8";
:root{--ink:#10120f;--paper:#f1f3ed;--lime:#c3fa10;--gutter:4.6vw;--vh:100svh;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color-scheme:dark;--p:0}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:var(--paper);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}a,button{-webkit-tap-highlight-color:transparent}img{display:block;max-width:100%;height:auto}button{font:inherit}h1,h2,h3,p{margin:0}::selection{background:var(--lime);color:var(--ink)}a:focus-visible,button:focus-visible{outline:2px solid var(--lime);outline-offset:6px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;left:20px;top:-100px;z-index:100;padding:16px;background:var(--lime);color:var(--ink)}.skip:focus{top:20px}.header{position:fixed;inset:0 0 auto;z-index:40;height:94px;padding:19px var(--gutter);display:flex;align-items:center;justify-content:space-between;color:var(--paper);mix-blend-mode:difference}.logo{display:block;width:118px;flex-shrink:0}.logo img{width:100%}.header-descriptor{position:absolute;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.08em;color:#c4c7bf}.header nav{display:flex;align-items:center;gap:28px;font-size:14px}.header nav>a{position:relative;display:flex;align-items:center;min-height:44px}.header nav>a:after{content:"";position:absolute;height:1px;background:currentColor;left:0;right:0;bottom:7px;transform:scaleX(0);transform-origin:left;transition:transform .3s}.header nav>a:hover:after{transform:scaleX(1)}
.experience{height:840svh;position:relative}.stage{height:var(--vh);min-height:520px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:var(--ink)}.scene{position:absolute;inset:0;overflow:hidden}.impact{z-index:1;background:radial-gradient(ellipse at 50% 48%,#28302030,transparent 64%),var(--ink);opacity:var(--hero-alpha,1)}.impact-top{position:absolute;left:var(--gutter);right:var(--gutter);top:120px;display:flex;justify-content:space-between;font-size:14px;color:#c0c4b9}.hero-back{position:absolute;top:18%;left:0;width:100%;text-align:center;font-size:min(19.4vw,27vh);font-weight:800;letter-spacing:-.075em;line-height:1.04;transform:translateX(var(--hero-type-x,0px));color:#eff2e7}.hero-object{position:absolute;width:min(52vw,79vh);left:50%;top:52%;transform:translate(calc(-50% + var(--hero-x,0px)),calc(-50% + var(--hero-y,0px))) scale(var(--hero-scale,1)) rotate(var(--hero-rotate,-18deg));transform-origin:50% 50%;z-index:2;will-change:transform}.hero-object img{width:100%;filter:drop-shadow(0 15px 30px #0005)}.hero-front{position:absolute;z-index:3;bottom:14%;left:0;width:100%;text-align:center;font-size:min(14.4vw,22vh);font-weight:800;line-height:1.12;letter-spacing:-.075em;transform:translateX(var(--hero-front-x,0px));opacity:var(--hero-copy-alpha,1)}.hero-front span{color:var(--lime)}.hero-positioning{position:absolute;left:var(--gutter);bottom:44px;font-size:14px;line-height:1.8;opacity:var(--hero-copy-alpha,1)}.explore{position:absolute;left:50%;bottom:49px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;font-size:12px;white-space:nowrap;opacity:var(--hero-copy-alpha,1)}.scroll-mark{height:29px;width:1px;position:relative;background:#fff4;overflow:hidden}.scroll-mark:after{content:"";position:absolute;left:0;top:0;width:1px;height:16px;background:var(--lime);animation:scroll-marker 2.3s infinite}.hero-serial{position:absolute;right:var(--gutter);bottom:50px;text-align:right;font-size:12px;line-height:1.5;color:#87917e;opacity:var(--hero-copy-alpha,1)}
.scene-heading{position:absolute;top:122px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:12px;line-height:1.5;color:#b9c0b1;z-index:6}.scene-heading span:first-child{letter-spacing:.06em}.detail{z-index:2;background:#171a16;clip-path:circle(var(--detail-aperture,0%) at 50% 50%);visibility:hidden}.detail.active{visibility:visible}.detail-word{position:absolute;top:15%;left:50%;transform:translateX(-50%);font-weight:800;font-size:min(40vw,63vh);line-height:1;white-space:nowrap;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px #77836952}.detail-object{position:absolute;left:50%;top:48%;width:min(85vw,123vh);transform:translate(calc(-50% + var(--detail-x,0px)),-50%) scale(var(--detail-scale,1)) rotate(var(--detail-rotate,-8deg));will-change:transform}.detail-still{width:100%;mix-blend-mode:lighten}.detail-video{display:none;width:100%;height:auto;max-height:85svh;object-fit:contain}.video-ready .detail-still{display:none}.video-ready .detail-video{display:block}.detail-copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:10%;display:flex;align-items:end;justify-content:space-between;z-index:3;opacity:var(--detail-copy-alpha,1);transform:translateY(var(--detail-copy-y,0px))}.detail-copy h2{font-size:clamp(48px,6.3vw,100px);font-weight:600;letter-spacing:-.065em;line-height:1.15}.detail-copy h2 span{color:var(--lime)}.detail-copy p{font-size:16px;line-height:1.8;padding-bottom:7px;color:#bec6b6}.detail-caption{position:absolute;right:var(--gutter);top:48%;writing-mode:vertical-rl;letter-spacing:.12em;font-size:12px;color:#a6af9c}
.range{z-index:3;background:var(--ink);clip-path:polygon(0 var(--range-cut-left,100%),100% var(--range-cut-right,100%),100% 100%,0 100%);visibility:hidden}.range.active{visibility:visible}.range-beat{position:absolute;inset:0;background:var(--ink)}.range-ghost{position:absolute;left:50%;top:23%;transform:translateX(-50%);font-size:25vw;line-height:1;font-family:Impact,"Arial Black",Arial,sans-serif;font-weight:900;letter-spacing:-.055em;color:#252b21;white-space:nowrap}.range-object{position:absolute;width:72vw;max-width:140vh;left:51%;top:48%;transform:translate(calc(-50% + var(--part-x,0px)),calc(-50% + var(--part-y,0px))) rotate(var(--part-rotate,0deg)) scale(var(--part-scale,1));will-change:transform;z-index:2}.range-object img{width:100%;filter:drop-shadow(0 25px 30px #0005)}.range-copy{position:absolute;left:var(--gutter);bottom:10%;z-index:4;transform:translateY(var(--part-copy-y,0px))}.range-copy h3{font-size:clamp(64px,11vw,180px);line-height:1.1;letter-spacing:-.075em;font-weight:800}.range-copy h3 span{color:var(--lime)}.range-copy p{font-size:16px;line-height:1.8;margin-top:20px;color:#c6ccbf}.range-number{position:absolute;right:var(--gutter);bottom:10.5%;font-family:Arial,sans-serif;font-size:100px;font-weight:400;letter-spacing:-.08em;line-height:1;color:#414d37}.screw-beat{clip-path:inset(var(--screw-inset,100%) 0 0);background:#151913}.screw-beat .range-ghost{color:#2b3226}.screw-object{transform:translate(calc(-50% + var(--screw-x,0px)),calc(-50% + var(--screw-y,0px))) rotate(var(--screw-rotate,0deg)) scale(var(--screw-scale,1))}.screw-beat .range-copy{transform:translateY(var(--screw-copy-y,0px))}.screw-beat .range-number{color:#59634e}
.connection{z-index:4;background:var(--lime);color:var(--ink);clip-path:circle(var(--about-aperture,0%) at 100% 100%);visibility:hidden}.connection.active{visibility:visible}.connection .scene-heading{color:#37411a}.connection-top{position:absolute;top:26%;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;font-size:16px}.connection h2{position:absolute;left:var(--gutter);right:var(--gutter);top:50%;transform:translateY(-50%);font-size:clamp(76px,12.6vw,210px);font-weight:800;line-height:1.08;letter-spacing:-.075em}.about-line{display:block}.about-line.first{transform:translateX(var(--about-first-x,0px))}.about-line.second{text-align:right;transform:translateX(var(--about-second-x,0px))}.simple-word{color:var(--ink);position:relative}.simple-word:after{content:"";position:absolute;left:0;right:5%;height:.045em;background:var(--ink);bottom:.03em;transform:scaleX(var(--simple-line,0));transform-origin:left}.connection-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:10%;display:flex;justify-content:space-between;gap:25px;align-items:end}.connection-bottom>p{font-size:16px;line-height:1.9}.connection-method{display:flex;gap:25px;font-size:14px!important}.connection-method span{border-bottom:1px solid #10120f5c;padding-bottom:4px}
.timeline{position:absolute;left:var(--gutter);right:var(--gutter);bottom:24px;z-index:10;display:flex;align-items:center;gap:15px;opacity:var(--timeline-alpha,0);color:var(--paper);mix-blend-mode:difference;pointer-events:none;font-size:12px}.timeline-number{width:20px}.timeline-track{height:1px;flex:1;background:#ffffff42}.timeline-track i{display:block;width:calc(var(--p)*100%);height:1px;background:#fff}.timeline-title{min-width:120px;text-align:right}.footer{position:relative;padding:40px var(--gutter) 25px;overflow:hidden;background:var(--ink);isolation:isolate}.footer-top{display:flex;justify-content:space-between;font-size:12px;color:#b9c1af;letter-spacing:.04em}.footer-top a{font-size:14px;letter-spacing:0;min-height:44px;display:flex;align-items:center}.footer-statement{font-size:clamp(40px,6vw,96px);line-height:1.2;letter-spacing:-.065em;font-weight:600;text-align:center;margin:80px 0 25px}.footer-logo{margin:25px auto 65px;width:75vw;transform:translateY(var(--footer-y,0px))}.footer-logo img{width:100%}.footer-bottom{border-top:1px solid #ffffff2b;display:flex;justify-content:space-between;padding-top:22px;font-size:12px;line-height:1.8;color:#c0c7b7}.product-note{color:#7f8b72;font-size:12px;line-height:1.7;margin-top:14px}
@keyframes scroll-marker{0%{transform:translateY(-20px)}70%,100%{transform:translateY(45px)}}
@media(min-width:1600px){.hero-back{top:17%}.hero-front{bottom:12%}.hero-object{width:min(52vw,85vh)}}
@media(max-width:900px){.header-descriptor{display:none}.hero-back{font-size:24vw;top:24%}.hero-front{font-size:20vw;bottom:19%}.hero-object{width:80vw;top:49%}.hero-serial{display:none}.explore{left:auto;right:var(--gutter);transform:none}.range-object{width:102vw;max-width:none}.range-copy h3{font-size:13vw}.range-number{font-size:65px}.connection h2{font-size:14vw}.connection-top{top:27%}.connection-bottom{display:block}.connection-method{margin-top:22px}.footer-logo{width:85vw}}
@media(max-width:600px){:root{--gutter:6vw}.header{height:80px;padding:16px var(--gutter)}.logo{width:96px}.header nav{gap:16px}.experience{height:720svh}.stage{min-height:480px}.impact-top{top:108px;font-size:12px}.hero-back{font-size:28vw;letter-spacing:-.075em;top:23%;line-height:1.02}.hero-object{width:117vw;top:48%}.hero-front{font-size:22.7vw;bottom:20%;line-height:1.12;letter-spacing:-.09em}.hero-positioning{font-size:14px;bottom:44px;line-height:1.7}.explore{font-size:12px;bottom:49px;gap:10px;max-width:130px;white-space:normal;line-height:1.7}.scroll-mark{flex-shrink:0}.scene-heading{top:108px;font-size:12px;gap:20px}.scene-heading span:first-child{letter-spacing:0}.scene-heading span:last-child{text-align:right}.detail-word{font-size:65vw;top:25%;letter-spacing:-.08em}.detail-object{width:116vw;top:45%;max-width:none}.detail-copy{bottom:14%;display:block}.detail-copy h2{font-size:17vw;line-height:1.12}.detail-copy p{position:absolute;right:0;bottom:0;font-size:14px;line-height:1.8;padding:0}.detail-caption{display:none}.range-ghost{font-size:34vw;top:24%;letter-spacing:-.06em}.range-object{width:146vw;left:50%;top:44%;max-width:none}.range-copy{bottom:15%;left:var(--gutter);right:var(--gutter)}.range-copy h3{font-size:23vw;line-height:1.05;letter-spacing:-.075em}.range-copy h3 span{display:block;text-align:right}.range-copy p{margin-top:24px;font-size:14px;letter-spacing:-.025em}.range-number{font-size:46px;right:var(--gutter);bottom:5%;display:none}.screw-object{width:148vw;top:43%}.connection-top{top:25%;font-size:14px}.connection h2{font-size:23vw;line-height:1.18;letter-spacing:-.09em;left:5vw;right:7vw;top:47%}.connection-bottom{bottom:12%;left:var(--gutter);right:var(--gutter)}.connection-bottom>p{font-size:14px;line-height:1.9}.connection-method{gap:20px;font-size:12px!important;margin-top:22px}.timeline{bottom:22px;font-size:12px;gap:12px}.timeline-title{min-width:104px}.footer{padding-top:26px}.footer-statement{font-size:12vw;margin:59px 0 24px;line-height:1.3}.footer-logo{width:94vw;margin-left:-3vw;margin-bottom:37px}.footer-bottom{font-size:12px;gap:20px;align-items:end}.footer-bottom p:first-child{max-width:180px}.footer-top{font-size:12px}.product-note{font-size:12px;margin-top:18px;max-width:90%}}
@media(max-width:360px){.header{padding-inline:5vw}.header nav{gap:11px;font-size:12px}.logo{width:90px}.hero-positioning{font-size:12px}.explore{font-size:12px;max-width:118px}.scene-heading{font-size:12px}.connection-bottom>p{font-size:13px}.connection-method{gap:14px}.detail-copy p{font-size:13px}.range-copy p{font-size:13px}}
@media(max-height:650px) and (max-width:600px){.impact-top,.scene-heading{top:90px}.hero-back{top:23%}.hero-object{width:103vw;top:48%}.hero-front{bottom:22%;font-size:21vw}.hero-positioning{bottom:35px}.explore{bottom:39px}.detail-copy h2{font-size:15vw}.detail-object{top:43%;width:108vw}.detail-copy{bottom:13%}.connection-top{top:23%}.connection h2{top:45%;font-size:22vw}.connection-bottom{bottom:10%}.connection-method{margin-top:13px}.range-copy{bottom:14%}.range-copy h3{font-size:21vw}}
.static-mode .experience{height:auto}.static-mode .stage{height:auto;min-height:0;position:relative;overflow:visible}.static-mode .scene{position:relative;inset:auto;min-height:100svh;height:100svh;visibility:visible!important;clip-path:none!important;opacity:1!important;overflow:hidden}.static-mode .impact{height:max(100svh,620px)}.static-mode .hero-object{transform:translate(-50%,-50%) rotate(-12deg)!important}.static-mode .hero-back,.static-mode .hero-front{transform:none!important;opacity:1!important}.static-mode .hero-positioning,.static-mode .hero-serial,.static-mode .explore{opacity:1!important}.static-mode .detail-object{transform:translate(-50%,-50%) rotate(-5deg)!important}.static-mode .detail-copy,.static-mode .range-copy,.static-mode .about-line,.static-mode .footer-logo{transform:none!important;opacity:1!important}.static-mode .range{height:auto}.static-mode .range-beat{position:relative;height:100svh;min-height:620px;clip-path:none!important}.static-mode .range-object{transform:translate(-50%,-50%)!important}.static-mode .connection{min-height:640px}.static-mode .timeline{display:none}.static-mode .scroll-mark:after{animation:none}.static-mode .simple-word:after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scroll-mark:after{animation:none}}
.header.on-lime{mix-blend-mode:normal;color:var(--ink)}.header.on-lime .header-descriptor{color:#354215}.header.on-lime a:focus-visible,.header.on-lime button:focus-visible{outline-color:var(--ink)}

/* A single real-time model spans the opening and the exploded view. */
.bearing-stage{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .35s ease}
.bearing-stage canvas{display:block;width:100%;height:100%;outline:none}
.has-3d .bearing-stage{visibility:visible;opacity:1}
.has-3d .stage{background:radial-gradient(ellipse at 48% 42%,#242a21 0%,#10120f 66%)}
.has-3d .impact{z-index:auto;background:none;opacity:1;overflow:visible}
.has-3d .hero-back{z-index:1;opacity:var(--hero-copy-alpha,1)}
.has-3d .hero-front,.has-3d .impact-top,.has-3d .hero-positioning,.has-3d .explore,.has-3d .hero-serial{z-index:3}
.has-3d .impact-top{opacity:var(--hero-copy-alpha,1)}
.has-3d .hero-object,.has-3d .detail-object{display:none}
.has-3d .detail{z-index:3;clip-path:none;background:none;opacity:var(--bearing-detail-alpha,0);pointer-events:none}
.has-3d .detail-word{display:none}
.has-3d .range{z-index:4}.has-3d .connection{z-index:5}
.has-3d .detail-copy{bottom:11%}
.bearing-note{position:absolute;left:var(--gutter);right:var(--gutter);bottom:55px;display:flex;justify-content:space-between;gap:12px;font-size:12px;line-height:1.5;color:#a5ae9d}
.model-instruction{display:none}.has-3d .model-instruction{display:block}
.static-mode.has-3d .bearing-stage{position:absolute;inset:0;height:max(100svh,620px);z-index:2}
.static-mode.has-3d .impact{z-index:auto}
.static-mode.has-3d .impact-top,.static-mode.has-3d .hero-back{opacity:1}
.static-mode.has-3d .detail{z-index:3;background:#171a16}
.static-mode.has-3d .detail-object{display:block}
.static-mode.has-3d .detail-object .detail-still{content:url('/assets/bearing-alpha.webp');max-height:66svh;width:auto;margin:auto}
.static-mode .model-instruction{display:none}
@media(max-width:600px){.has-3d .detail-copy{bottom:15%}.has-3d .detail-copy h2{font-size:15vw}.has-3d .detail-copy p{font-size:14px}.bearing-note{bottom:56px}.has-3d .hero-back{top:22%}.has-3d .hero-front{bottom:21%}}
@media(prefers-reduced-motion:reduce){.bearing-stage{transition:none}}

/* Precision presentation: neutral studio, a consistent type scale and safe edges. */
:root{--ink:#0d1011;--paper:#f2f4f1;--muted:#aeb6b2;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-optical-sizing:auto}
.header{height:calc(94px + var(--safe-top));padding-top:calc(19px + var(--safe-top));mix-blend-mode:normal;background:linear-gradient(180deg,#0d1011d9,#0d101170 70%,transparent);transition:color .25s,background .25s}
.header:after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:#dbe5df16}
.header-descriptor{font-size:12px;letter-spacing:.14em;color:#99a39e}
.header nav{font-size:14px;gap:28px}
.logo{width:124px}.header.on-lime{background:linear-gradient(180deg,#c3fa10d9,#c3fa1060 70%,transparent)}
.header.on-lime:after{background:#10120f22}
.stage,.has-3d .stage{background:radial-gradient(ellipse at var(--stage-light-x,48%) 40%,#29303570 0%,#171c1e50 28%,#0d1011 70%)}
.stage:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,transparent calc(var(--gutter) - 1px),#b9c7c305 var(--gutter),transparent calc(var(--gutter) + 1px),transparent calc(100% - var(--gutter) - 1px),#b9c7c305 calc(100% - var(--gutter)),transparent calc(100% - var(--gutter) + 1px))}
.impact{background:radial-gradient(ellipse at 50% 43%,#29303550,transparent 65%),var(--ink)}
.impact-top{top:calc(126px + var(--safe-top));font-size:14px;letter-spacing:.04em;color:#aeb8b2}
.hero-back{font-size:min(18.2vw,25.5vh);font-weight:700;letter-spacing:-.055em;color:#e8ede9;top:19%}
.hero-front{font-size:min(12.9vw,19.5vh);font-weight:700;letter-spacing:-.055em;bottom:14.5%}
.hero-positioning{line-height:1.85;color:#c1cac4;bottom:calc(48px + var(--safe-bottom))}
.explore{font-size:14px;bottom:calc(51px + var(--safe-bottom));gap:16px}.hero-serial{color:#9aa69e;bottom:calc(51px + var(--safe-bottom));letter-spacing:.055em}
.scene-heading{top:calc(124px + var(--safe-top));font-size:13px;align-items:center;color:#aeb8b2;gap:24px}
.scene-heading:after{content:"";height:1px;flex:1;background:#d8e3dc20;order:1}.scene-heading span:last-child{order:2;font-size:14px;color:#e2e7e2;white-space:nowrap}.scene-heading span:first-child{font-variant-numeric:tabular-nums;letter-spacing:.055em;white-space:nowrap}
.detail{background:#14191a}.detail-word{color:transparent;-webkit-text-stroke-color:#b0bdb322;letter-spacing:-.045em}
.detail-copy h2{font-size:clamp(48px,5.8vw,92px);font-weight:600;letter-spacing:-.045em;line-height:1.18}
.detail-copy p{font-size:16px;line-height:1.8;color:#b9c3bc}.detail-caption{color:#89958e;font-size:12px;letter-spacing:.16em}
.bearing-note{bottom:calc(56px + var(--safe-bottom));font-size:13px;color:#a8b3ac}
.range-beat,.screw-beat{background:radial-gradient(ellipse at 52% 40%,#20272a88,transparent 64%),var(--ink)}
.range-ghost,.screw-beat .range-ghost{font-family:Arial,sans-serif;font-size:23vw;font-weight:600;letter-spacing:-.06em;top:21%;color:transparent;-webkit-text-stroke:1px #c9d5ce18}
.range-copy{bottom:11%}.range-copy h3{font-size:clamp(62px,9.7vw,155px);font-weight:650;letter-spacing:-.055em;line-height:1.12}.range-copy p{font-size:16px;color:#b9c4bc;margin-top:18px;letter-spacing:.01em}.range-number{font-size:76px;color:#87998b42}
.connection{background:radial-gradient(ellipse at 40% 38%,#c8ff1e,var(--lime) 60%,#b4e81a)}
.connection .scene-heading span:last-child{color:#182009}.connection .scene-heading:after{background:#23350c30}
.connection h2{font-weight:650;letter-spacing:-.055em;font-size:clamp(76px,12.1vw,194px);line-height:1.12}
.connection-top{font-size:16px;letter-spacing:.025em}.connection-bottom>p{font-size:16px}
.connection-method{gap:32px!important}.connection-method span{display:flex;flex-direction:column;gap:13px;min-width:82px;border-color:#10120f50;padding-bottom:9px}.connection-method i{font-style:normal;font-size:12px;line-height:1;letter-spacing:.04em;opacity:.6;font-variant-numeric:tabular-nums}
.timeline{bottom:calc(23px + var(--safe-bottom));font-variant-numeric:tabular-nums;letter-spacing:.01em}.timeline-track{background:#e3ede52a}.timeline-track i{background:#edf3ee}
.footer{background:radial-gradient(ellipse at 50% 55%,#1d252580,transparent 65%),var(--ink);padding-bottom:calc(28px + var(--safe-bottom))}
.footer-top{align-items:center;color:#a9b6ac}.footer-top span{font-size:12px;letter-spacing:.10em}.footer-top a{font-size:14px}
.footer-statement{font-weight:550;letter-spacing:-.045em;line-height:1.24;font-size:clamp(40px,5.5vw,88px);margin:90px 0 25px}.footer-logo{width:72vw;margin-bottom:72px}.footer-bottom{color:#b6c1b9;border-color:#d6e6dc26;position:relative}.footer-bottom:before{content:"";position:absolute;top:-1px;left:0;width:36px;height:1px;background:var(--lime)}.product-note{color:#a0aea3;max-width:680px}
.has-product-3d:not(.static-mode) .bearing-stage{transition:none}
.has-product-3d:not(.static-mode) .range{background:none;clip-path:none!important}
.has-product-3d:not(.static-mode) .range-beat{background:none;clip-path:none!important;pointer-events:none}
.has-product-3d:not(.static-mode) .rail-beat{opacity:var(--rail-scene-alpha,0)}
.has-product-3d:not(.static-mode) .screw-beat{opacity:var(--screw-scene-alpha,0)}
.has-product-3d:not(.static-mode) .range-object{display:none}
.static-mode.has-3d .detail-object .detail-still{content:normal;width:100%;max-height:none}
.static-mode .stage:before{display:none}.static-mode .detail-copy p{position:static}
@media(max-width:900px){.hero-back{font-size:24vw}.hero-front{font-size:19.5vw}.range-copy h3{font-size:12vw}.connection h2{font-size:14vw}.footer-logo{width:85vw}}
@media(max-width:600px){
 :root{--gutter:6vw}.header{height:calc(86px + var(--safe-top));padding:calc(15px + var(--safe-top)) var(--gutter) 15px}.logo{width:112px}.header nav{gap:12px;font-size:13px}.header-descriptor{display:none}
 .impact-top,.scene-heading{top:calc(112px + var(--safe-top))}.impact-top{font-size:13px;letter-spacing:0}.scene-heading{font-size:12px;gap:12px}.scene-heading span:last-child{font-size:13px}.scene-heading:after{opacity:.7}
 .hero-back,.has-3d .hero-back{font-size:26.6vw;top:24%;letter-spacing:-.055em}.hero-front,.has-3d .hero-front{font-size:21.5vw;bottom:22%;letter-spacing:-.055em;line-height:1.12}
 .hero-positioning{font-size:14px;bottom:calc(45px + var(--safe-bottom))}.explore{font-size:13px;bottom:calc(48px + var(--safe-bottom));max-width:122px;line-height:1.7;gap:12px}.hero-serial{display:none}
 .detail-copy,.has-3d .detail-copy{bottom:calc(13% + var(--safe-bottom));display:block}.detail-copy h2,.has-3d .detail-copy h2{font-size:14.8vw;letter-spacing:-.045em;line-height:1.14}.detail-copy p,.has-3d .detail-copy p{position:static;font-size:14px;line-height:1.65;margin-top:13px;padding:0}.detail-copy p br{display:none}.detail-copy p br:after{content:" "}
 .bearing-note{bottom:calc(55px + var(--safe-bottom));font-size:12px}.range-ghost{font-size:32vw;top:24%}.range-copy{bottom:calc(13% + var(--safe-bottom))}.range-copy h3{font-size:20vw;letter-spacing:-.055em;line-height:1.10;font-weight:650}.range-copy p{margin-top:20px;font-size:14px;letter-spacing:0}.range-number{display:none}
 .connection-top{font-size:14px;top:25%}.connection h2{font-size:21.6vw;line-height:1.19;left:var(--gutter);right:var(--gutter);top:46%;letter-spacing:-.055em}.connection-bottom{bottom:calc(11% + var(--safe-bottom))}.connection-bottom>p{font-size:15px;line-height:1.8}.connection-method{display:grid;grid-template-columns:repeat(3,1fr);gap:18px!important;margin-top:25px;font-size:13px!important}.connection-method span{gap:10px;min-width:0;padding-bottom:8px}
 .timeline{bottom:calc(22px + var(--safe-bottom));font-size:12px}.footer{padding-top:26px}.footer-statement{font-size:11.3vw;line-height:1.3;margin:68px 0 26px}.footer-logo{width:88vw;margin:22px auto 44px}.footer-top span{letter-spacing:.065em;font-size:11px}.footer-bottom{font-size:12px;line-height:1.8}.product-note{font-size:12px;line-height:1.8;max-width:100%}
}
@media(max-width:360px){.header{padding-inline:5vw}.logo{width:104px}.header nav{gap:8px;font-size:13px}.impact-top{font-size:12px}.hero-positioning{font-size:13px}.explore{font-size:12px;max-width:113px}.scene-heading{gap:8px}.scene-heading:after{display:none}.detail-copy h2,.has-3d .detail-copy h2{font-size:14vw}.connection-bottom>p{font-size:14px}.connection-method{gap:14px!important}}
@media(max-height:650px) and (max-width:600px){.impact-top,.scene-heading{top:calc(102px + var(--safe-top))}.hero-back,.has-3d .hero-back{top:25%;font-size:25vw}.hero-front,.has-3d .hero-front{font-size:20.5vw;bottom:23%}.detail-copy,.has-3d .detail-copy{bottom:calc(13% + var(--safe-bottom))}.detail-copy p{margin-top:9px;font-size:13px}.range-copy h3{font-size:19vw}.range-copy p{margin-top:14px}.connection-top{top:24%}.connection h2{top:45%;font-size:20.5vw}.connection-bottom{bottom:calc(10% + var(--safe-bottom))}.connection-method{margin-top:18px}}
@media(max-height:520px) and (min-aspect-ratio:6/5){.static-mode .scene,.static-mode .range-beat,.static-mode .connection{min-height:620px;height:620px}.static-mode .impact{height:660px}.static-mode.has-3d .bearing-stage{height:660px}.hero-back{top:23%;font-size:120px}.hero-front{bottom:19%;font-size:100px}.connection h2{font-size:105px}.connection-top{top:25%}.detail-copy h2{font-size:55px}.range-copy h3{font-size:90px}.scene-heading,.impact-top{top:120px}}

/* Continuous travelling shot. Adjacent products share the stage, never a cut. */
body:not(.static-mode) .bearing-stage{transition:none}
body:not(.static-mode) .detail{background:transparent;clip-path:none;opacity:1}
body:not(.static-mode) .detail>:not(.detail-object){opacity:var(--bearing-detail-alpha,0)}
body:not(.static-mode) .detail-object{opacity:var(--bearing-image-alpha,0);transform:translate(calc(-50% + var(--detail-x,0px) + var(--bearing-travel-x,0px)),calc(-50% + var(--bearing-travel-y,0px))) rotate(calc(var(--detail-rotate,0deg) + var(--bearing-travel-roll,0rad))) scale(calc(var(--detail-scale,1)*var(--bearing-travel-scale,1)))}
body:not(.static-mode) .range,body:not(.static-mode) .range-beat{background:transparent;clip-path:none!important;opacity:1}
body:not(.static-mode) .rail-beat>:not(.range-object){opacity:var(--rail-scene-alpha,0)}
body:not(.static-mode) .screw-beat>:not(.range-object){opacity:var(--screw-scene-alpha,0)}
body:not(.static-mode) .range-object{width:min(90vw,110vh);left:50%;top:43%;max-width:none}
body:not(.static-mode) .rail-object{transform:translate(calc(-50% + var(--rail-travel-x,110vw)),calc(-50% + var(--rail-travel-y,0px))) rotate(calc(var(--part-rotate,0deg) + var(--rail-travel-roll,0rad))) scale(var(--rail-travel-scale,1))}
body:not(.static-mode) .screw-object{transform:translate(calc(-50% + var(--screw-travel-x,110vw)),calc(-50% + var(--screw-travel-y,0px))) rotate(calc(var(--screw-rotate,0deg) + var(--screw-travel-roll,0rad))) scale(var(--screw-travel-scale,1))}
body:not(.static-mode) .rail-beat .range-copy,body:not(.static-mode) .screw-beat .range-copy{transform:none}
body:not(.static-mode) .connection{clip-path:polygon(var(--about-cut-top,115%) 0,100% 0,100% 100%,var(--about-cut-bottom,100%) 100%)}
body:not(.static-mode) .connection>:not(h2){opacity:var(--about-copy-alpha,0);transform:translateY(var(--about-copy-y,32px))}
body:not(.static-mode) .connection h2{opacity:var(--about-copy-alpha,0)}
body:not(.static-mode) .connection .about-line{transform:translateY(var(--about-copy-y,32px))}
.timeline-number,.timeline-title{opacity:var(--chapter-alpha,1)}

/* One opaque entry state covers both poster and GPU preparation. Removing it
   changes opacity only, so text, camera and product framing never jump. */
.scene-entry{display:none}
html[data-scene-boot] .scene-entry{position:absolute;inset:0;height:100svh;min-height:480px;z-index:30;display:grid;place-content:center;justify-items:center;gap:25px;background:var(--ink);color:var(--muted);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s .55s}
html[data-scene-boot=loading] .scene-entry{opacity:1;visibility:visible;transition:none}
.scene-entry span{font-size:15px;font-weight:400;letter-spacing:.12em}
.scene-entry i{display:block;width:72px;height:1px;background:#ffffff20;overflow:hidden}
.scene-entry i:after{content:"";display:block;width:28px;height:1px;background:var(--lime);animation:entry-progress 1.2s ease-in-out infinite}
html:not([data-scene-boot=loading]) .scene-entry i:after{animation:none}
@keyframes entry-progress{0%{transform:translateX(-30px)}100%{transform:translateX(74px)}}
@media(prefers-reduced-motion:reduce){html[data-scene-boot] .scene-entry{transition:none}.scene-entry i:after{animation:none;transform:translateX(22px)}}
/* Show the fully prepared canvas and retire its preview in one soft handoff. */
body.scene-upgrading .bearing-stage{opacity:0!important;transition:opacity .55s ease!important}
body.scene-upgrading .hero-object,body.scene-upgrading:not(.static-mode) .detail-object,body.scene-upgrading.has-product-3d:not(.static-mode) .range-object{display:block;transition:opacity .55s ease}
body.scene-upgrading .hero-object{opacity:var(--hero-alpha,1)}
body.scene-upgrading.static-mode .hero-object{opacity:1}
body.scene-upgrading:not(.static-mode) .detail-object{opacity:var(--bearing-image-alpha,0)}
body.scene-upgrading:not(.static-mode) .rail-object{opacity:var(--rail-scene-alpha,0)}
body.scene-upgrading:not(.static-mode) .screw-object{opacity:var(--screw-scene-alpha,0)}
body.scene-upgrading.scene-revealing .bearing-stage{opacity:1!important}
body.scene-upgrading.scene-revealing .hero-object,body.scene-upgrading.scene-revealing:not(.static-mode) .detail-object,body.scene-upgrading.scene-revealing:not(.static-mode) .range-object{opacity:0}
@media(prefers-reduced-motion:reduce){body.scene-upgrading .bearing-stage,body.scene-upgrading .hero-object,body.scene-upgrading .detail-object,body.scene-upgrading .range-object{transition:none!important}}
@media(max-width:600px){body:not(.static-mode) .range-object{width:112vw}}

/* Share the stage's stacking context: outline words < real product < copy.
   Parent opacity/clip-path would trap all descendants above the WebGL canvas. */
body.has-product-3d:not(.static-mode) .range,
body.has-product-3d:not(.static-mode) .range-beat{z-index:auto;opacity:1;overflow:visible;isolation:auto;clip-path:none!important}
body.has-product-3d:not(.static-mode) .range-ghost{z-index:1}
body.has-product-3d:not(.static-mode) .range-copy,
body.has-product-3d:not(.static-mode) .range-number{z-index:4}