/* Yana product presentation: one quiet, shared visual system. */
:root{--canvas:#fff;--canvas-alt:#f5f5f7;--raised:#fff;--ink:#1d1d1f;--muted:#626269;--faint:#86868b;--pink:#454d5d;--pink-strong:#1d1d1f;--pink-soft:#f2f2f4;--line:#e6e6e9;--line-strong:#d6d6da;--display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif;--sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;--shadow-card:0 18px 54px rgba(20,20,24,.07)}
html{scroll-behavior:smooth}
body.sakura-site,body.sakura-site.home-page{background:#fff!important;color:#1d1d1f;font-family:var(--sans)}
body.sakura-site::before,body.sakura-site main::before,#sakura-canvas,.sakura-site .ecosystem-prologue::before{display:none!important}
.sakura-site main{background:#fff!important}
.sakura-site :is(h1,h2,h3,.brand,.accent-line){font-family:var(--display);font-style:normal;color:#1d1d1f}
.sakura-site :is(h1,h2){font-weight:620;letter-spacing:-.045em}
.sakura-site :is(h3){font-weight:600;letter-spacing:-.025em}
.sakura-site :is(p,.lead,.hero-copy){color:#626269}
.sakura-site :is(.eyebrow,.global-mega-intro small,.orbit-product small){color:#6e6e73;letter-spacing:.14em}
.sakura-site .site-nav{background:#fff!important;border-bottom:1px solid #e9e9ec;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.sakura-site .brand img.brand-mark{box-shadow:none}
.sakura-site .global-mega-panel{background:#fff!important;border:1px solid #e9e9ec;box-shadow:0 18px 48px rgba(20,20,24,.08);backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.sakura-site .nav-scrim{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(18,18,22,.18)}
.sakura-site :is(.nav-links>a:hover,.global-nav-group>summary:hover,.global-nav-group[open]>summary,.global-mega-link:hover,.global-mega-link.is-current){background:#f5f5f7;color:#1d1d1f;box-shadow:none}
.sakura-site :is(.hero,.page-hero,.ecosystem-prologue,.yana-intro){background:#fff!important}
.sakura-site .chapter:nth-of-type(even),.sakura-site .section:nth-of-type(even){background:#fff!important}
.sakura-site :is(.product-card,.route-card,.support-guide article,.contact-list,.visual-window,.platform-map,.control-field,.execution-stage,.wheelbot-stage,.hero-stage,.feature-visual,.orbit-core,.orbit-product,.apple-glass){background:#fff!important;border:1px solid #e6e6e9!important;box-shadow:0 18px 54px rgba(20,20,24,.07)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;filter:none!important}
.sakura-site :is(.route-card,.product-card):hover{background:#fbfbfc!important;box-shadow:0 24px 60px rgba(20,20,24,.1)!important}
.sakura-site :is(.platform-node.core,.field-node,.wheelbot-endpoint,.wheelbot-sensor,.decision-console){background:#fafafa!important;border-color:#e6e6e9!important;box-shadow:none!important}
.sakura-site .decision-console{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.sakura-site :is(.quote-band,.site-footer){background:#f5f5f7!important;color:#1d1d1f}
.sakura-site .site-footer :is(p,a,.footer-bottom){color:#626269}
.sakura-site .quote-band :is(h2,p){color:#1d1d1f}
.sakura-site :is(.button:not(.ghost):not(.light),.nav-cta,.studio-download-cta){background:#1d1d1f!important;border:1px solid #1d1d1f!important;color:#fff!important;text-shadow:none!important;box-shadow:none!important;filter:none!important}
.sakura-site :is(.button:not(.ghost):not(.light),.nav-cta)::before,.sakura-site :is(.button:not(.ghost):not(.light),.nav-cta)::after{display:none!important}
.sakura-site :is(.button.ghost,.button.light){background:#fff!important;color:#1d1d1f!important;border:1px solid #d6d6da!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.sakura-site :is(.button,.nav-cta):hover{transform:translateY(-2px);filter:none!important}
.sakura-site :is(.button,.nav-cta):focus-visible,.liquid-button:focus-visible{outline:3px solid #7c9cff;outline-offset:3px}
.sakura-site .liquid-stage{--pad:0px;padding:0;isolation:isolate}
.sakura-site .liquid-stage--explore{--h:56px}
.sakura-site .liquid-stage--cta{--h:42px}
.sakura-site .liquid-stage--knob{--h:42px}
.sakura-site .liquid-stage--decision{--h:36px}
.sakura-site .liquid-fx{display:none!important}
.sakura-site .liquid-plate,.sakura-site .liquid-stage.hot .liquid-plate,.sakura-site .liquid-stage.press .liquid-plate{inset:0;background:#1d1d1f!important;border:1px solid #1d1d1f;box-shadow:none!important;transition:background .2s ease,transform .2s ease}
.sakura-site .liquid-stage:hover .liquid-plate{background:#3a3a3c!important;transform:translateY(-2px)}
.sakura-site .liquid-button{color:#fff!important;font-size:.82rem;letter-spacing:-.015em;min-height:var(--h)}
.sakura-site .liquid-button--explore{font-size:.92rem;padding:0 24px;gap:12px}
.sakura-site .liquid-button--explore .ico{width:19px;height:19px}
.sakura-site .liquid-button--cta{padding:0 18px;font-size:.78rem}
.sakura-site .liquid-button--knob{width:var(--h);padding:0;font-size:.78rem}
.sakura-site .liquid-button--decision{padding:0 14px;font-size:.68rem}
.sakura-site .liquid-button .lbl{transform:none}
.sakura-site .liquid-stage--decision .liquid-plate{background:#f5f5f7!important;border-color:#e4e4e8}
.sakura-site .liquid-stage--decision .liquid-button{color:#1d1d1f!important}
.sakura-site .liquid-stage--decision.is-selected .liquid-plate{background:#1d1d1f!important;border-color:#1d1d1f}
.sakura-site .liquid-stage--decision.is-selected .liquid-button{color:#fff!important}
.sakura-site .liquid-stage--decision:hover .liquid-plate{transform:none}
.yana-intro{min-height:calc(100svh - 64px);border-bottom:1px solid #ededf0}
.yana-intro::before{display:none!important}
.yana-intro-inner{width:min(100% - 36px,1120px);padding-block:clamp(112px,16vh,180px)}
.yana-intro-copy h1{max-width:1050px;font-size:clamp(3.5rem,7.7vw,8rem);line-height:1.02;font-weight:640}
.yana-intro-copy h1 em{color:#86868b;font-weight:570}
.yana-intro-copy>p:not(.eyebrow){max-width:700px;color:#626269;font-size:clamp(1.05rem,1.5vw,1.3rem)}
.yana-liquid-wrap{width:300px;height:72px;margin-top:28px}
.ecosystem-prologue{height:auto!important;border-bottom:1px solid #ededf0}
.prologue-sticky{position:relative;top:auto;width:min(100% - 48px,1180px);min-height:0;height:auto;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(40px,6vw,100px);padding-block:clamp(96px,11vw,150px)}
.prologue-copy{transform:none!important;opacity:1!important}
.prologue-copy h1{max-width:11ch;font-size:clamp(3.2rem,5.6vw,6rem)}
.prologue-copy h1 em{color:#86868b}
.showcase-intro-panel{align-self:center;display:grid;gap:0;border:1px solid #e6e6e9;border-radius:26px;background:#fff;box-shadow:0 26px 70px rgba(20,20,24,.07);overflow:hidden}
.showcase-intro-panel>a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 32px;border-bottom:1px solid #e9e9ec;text-decoration:none;transition:background .2s ease,padding .25s ease}
.showcase-intro-panel>a:last-child{border-bottom:0}
.showcase-intro-panel>a:hover,.showcase-intro-panel>a:focus-visible{background:#f5f5f7;padding-left:38px}
.showcase-intro-panel b{display:block;font-size:clamp(1.35rem,2vw,1.8rem);letter-spacing:-.035em}
.showcase-intro-panel small{display:block;color:#77777e;font-size:.75rem;letter-spacing:.08em}
.showcase-intro-panel i{font-style:normal;font-size:1.4rem;color:#86868b}
.showcase-scene{position:relative;display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);align-items:center;gap:clamp(42px,6vw,96px);width:min(100% - 48px,1320px);min-height:min(780px,95svh);margin:auto;padding-block:clamp(88px,10vw,140px);border-bottom:1px solid #ededf0}
.showcase-scene:nth-of-type(even){grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr)}
.showcase-scene:nth-of-type(even) .showcase-copy{order:2}
.showcase-scene:nth-of-type(even) .showcase-visual{order:1}
.showcase-copy{max-width:460px}
.showcase-copy .eyebrow{font-size:.72rem}
.showcase-copy h2{font-size:clamp(2.9rem,4.7vw,5.6rem);line-height:1.04;margin:12px 0 24px;text-wrap:balance}
.showcase-copy p:not(.eyebrow){font-size:clamp(1.04rem,1.32vw,1.2rem);line-height:1.68}
.showcase-copy a{display:inline-flex;align-items:center;gap:12px;margin-top:20px;color:#1d1d1f;font-weight:650;text-decoration:none;border-bottom:1px solid #1d1d1f;padding-bottom:5px}
.showcase-copy a:hover{gap:18px}
.showcase-visual{position:relative;display:grid;place-items:center;min-width:0;min-height:460px;padding:clamp(24px,4vw,56px);border:1px solid #e6e6e9;border-radius:30px;background:#f5f5f7;overflow:hidden}
.showcase-visual::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 72% 22%,rgba(255,255,255,.92),transparent 52%)}
.showcase-visual--ai .flow{position:relative;display:grid;gap:12px;width:min(100%,580px)}
.showcase-visual--ai .flow-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;border:1px solid #e3e3e7;border-radius:15px;background:#fff;box-shadow:0 12px 28px rgba(20,20,24,.05)}
.showcase-visual--ai .flow-row:nth-child(2){margin-inline:6%}
.showcase-visual--ai .flow-row:nth-child(3){margin-inline:12%}
.showcase-visual--ai .flow-row strong{font-size:1rem}
.showcase-visual--ai .flow-row span{color:#77777e;font:.69rem var(--mono)}
.showcase-visual--ai .flow-line{height:24px;width:1px;margin-left:50%;background:#c9c9ce}
.showcase-visual--studio img{position:relative;display:block;width:100%;height:auto;border-radius:18px;border:1px solid #e3e3e7;box-shadow:0 26px 55px rgba(20,20,24,.14)}
.showcase-visual--wheelbot .bot-diagram{position:relative;display:grid;justify-items:center;gap:30px;width:min(100%,560px)}
.showcase-visual--wheelbot .bot-board{display:grid;place-items:center;width:min(90%,390px);aspect-ratio:1.6;border:1px solid #d8d8dc;border-radius:22px;background:#fff;box-shadow:0 28px 50px rgba(20,20,24,.09)}
.showcase-visual--wheelbot .bot-board strong{font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.05em}
.showcase-visual--wheelbot .bot-board span{color:#77777e;font-size:.75rem;letter-spacing:.13em}
.showcase-visual--wheelbot .bot-meta{display:flex;justify-content:space-between;width:100%;gap:12px}
.showcase-visual--wheelbot .bot-meta span{padding:10px 14px;border:1px solid #e2e2e6;border-radius:999px;background:#fff;color:#5e5e64;font:.72rem var(--mono)}
.showcase-visual--wheelbot .bot-track{width:1px;height:38px;background:#bdbdc4}
.sakura-site .hero-stage--architecture{display:grid;place-items:center;min-height:300px;padding:clamp(24px,5vw,70px)}
.architecture-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(100%,900px)}
.architecture-strip .architecture-step{display:grid;align-content:center;min-height:140px;padding:24px;border:1px solid #e6e6e9;border-radius:18px;background:#fff}
.architecture-strip small{color:#86868b;font:.68rem var(--mono);letter-spacing:.1em}
.architecture-strip strong{margin-top:12px;font-size:clamp(1.15rem,2vw,1.65rem);letter-spacing:-.03em}
.architecture-strip span{margin-top:5px;color:#626269;font-size:.8rem}
.architecture-strip .architecture-step:nth-child(2){background:#f5f5f7}
.home-page .execution-stage{background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.home-page .execution-stage::before{display:none!important}
.home-page .rail-signal{animation:none!important;opacity:0;transition:opacity .15s}
.home-page .execution-stage.is-transitioning .rail-signal{opacity:1;animation:rail-flow .72s linear 1!important}
.sakura-site :is(.orbit-signal,.wheelbot-link i,.sylva-scroll i){animation:none!important}
.sakura-site .screenshot-stack .shot{animation:none!important;opacity:0}
.sakura-site .screenshot-stack .shot:first-child{opacity:1}
.sakura-site .depth-card{transform:none!important;filter:none!important}
.sakura-site .reveal-section{transform:none!important;opacity:1!important;filter:none!important}
.sakura-site .scroll-spatial{transform:none!important;transition:none!important}
@media(max-width:900px){.prologue-sticky,.showcase-scene,.showcase-scene:nth-of-type(even){grid-template-columns:1fr}.showcase-scene:nth-of-type(even) .showcase-copy,.showcase-scene:nth-of-type(even) .showcase-visual{order:initial}.showcase-scene{min-height:0}.showcase-visual{min-height:340px}.showcase-copy{max-width:680px}}
@media(max-width:600px){.yana-intro-copy h1{font-size:clamp(3.1rem,14vw,5rem)}.yana-intro-inner{padding-block:90px}.prologue-sticky{width:min(100% - 32px,1180px);padding-block:78px}.showcase-scene{width:min(100% - 32px,1320px);gap:32px;padding-block:78px}.showcase-copy h2{font-size:clamp(2.6rem,12vw,4.2rem)}.showcase-visual{min-height:310px;padding:22px;border-radius:22px}.showcase-visual--ai .flow-row{padding:14px}.showcase-visual--wheelbot .bot-meta{flex-wrap:wrap;justify-content:center}.showcase-intro-panel>a{padding:22px 24px}.sakura-site .global-mega-panel{background:#fff!important}.architecture-strip{grid-template-columns:1fr}.architecture-strip .architecture-step{min-height:92px;padding:18px}.architecture-strip strong{margin-top:6px}.sakura-site .hero-stage--architecture{padding:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sakura-site *, .sakura-site *::before,.sakura-site *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Scroll and pointer driven 3D presentation. No idle animation loop or WebGL. */
.yana-intro-inner{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(36px,5vw,100px);width:min(100% - 64px,1320px);padding-block:clamp(92px,10vh,140px);text-align:left}
.yana-intro-copy{max-width:630px;margin:0}
.yana-intro-copy h1{max-width:650px;margin:18px 0 0;font-size:clamp(4rem,5.8vw,6.9rem);line-height:1.02}
.yana-intro-copy>p:not(.eyebrow){max-width:580px;margin:28px 0 22px}
.yana-liquid-wrap{margin:20px 0 0;width:300px}
.yana-liquid-wrap .liquid-stage{left:0;transform:translateY(-50%)}
.yana-hero-object{position:relative;width:min(100%,690px);aspect-ratio:1.08;margin-inline:auto;border-radius:34px;transform-style:preserve-3d;transform:perspective(1300px) rotateX(var(--motion-rx,8deg)) rotateY(var(--motion-ry,-14deg)) translateY(var(--motion-lift,0px));backface-visibility:hidden}
.yana-hero-object::before{content:"";position:absolute;inset:7% 0 4% 0;border-radius:42px;background:radial-gradient(circle at 65% 35%,#fff 0,#f4f4f6 53%,#ededf0 100%);border:1px solid #e7e7ea;transform:translateZ(-40px)}
.hero-object-backplate{position:absolute;inset:13% 6% 14% 4%;border:1px solid #e4e4e8;border-radius:26px;background:#fff;transform:translateZ(10px) rotateZ(-6deg);box-shadow:0 25px 70px rgba(20,20,24,.11)}
.hero-object-window{position:absolute;inset:12% 2% 13% 5%;display:flex;flex-direction:column;overflow:hidden;border:8px solid #292a2e;border-bottom-width:11px;border-radius:20px;background:#fff;transform:translateZ(68px);box-shadow:0 34px 70px rgba(20,20,24,.23)}
.hero-object-bar{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-bottom:1px solid #ededf0;background:#fafafa;color:#626269;font:.61rem var(--mono);letter-spacing:.08em}
.hero-object-bar i{width:7px;height:7px;border-radius:50%;background:#d2d2d7}
.hero-object-bar b{margin-left:auto;font-weight:600}
.hero-object-window img{display:block;width:100%;height:calc(100% - 36px);object-fit:cover;object-position:top left;filter:saturate(.72)}
.hero-object-base{position:absolute;left:3%;right:4%;bottom:1%;height:23%;border:1px solid #aeb0b6;border-radius:4px 4px 22px 22px;background:linear-gradient(180deg,#c5c7cc 0 2px,#e9eaed 3px 57%,#bfc1c6 82%,#f7f7f8);clip-path:polygon(7% 0,93% 0,100% 100%,0 100%);transform-origin:50% 0;transform:translateZ(18px) rotateX(66deg);box-shadow:0 18px 30px rgba(20,20,24,.18)}
.hero-object-base span{position:absolute;left:38%;right:38%;bottom:7%;height:34%;border:1px solid #a9aab0;border-radius:6px;background:#d5d6da}
.hero-object-chip{position:absolute;right:-1%;top:4%;display:grid;gap:4px;padding:13px 18px;border:1px solid #e1e1e5;border-radius:14px;background:#fff;transform:translateZ(105px);box-shadow:0 18px 32px rgba(20,20,24,.12)}
.hero-object-chip b{font-size:.72rem;letter-spacing:.06em}.hero-object-chip small{color:#77777e;font:.61rem var(--mono)}
.motion-surface.motion-active{will-change:transform}
.sakura-site :is(.showcase-visual,.hero-stage,.feature-visual).motion-surface{transform:perspective(1300px) rotateX(var(--motion-rx,7deg)) rotateY(var(--motion-ry,-9deg)) translateY(var(--motion-lift,0px))!important;transform-style:preserve-3d;backface-visibility:hidden}
.sakura-site .showcase-visual.motion-surface{overflow:visible;box-shadow:0 36px 75px rgba(20,20,24,.1)}
.showcase-visual--ai .flow-row:nth-of-type(1){transform:translateZ(18px)}
.showcase-visual--ai .flow-row:nth-of-type(3){transform:translateZ(48px)}
.showcase-visual--ai .flow-row:nth-of-type(5){transform:translateZ(78px)}
.showcase-visual--studio img{transform:translateZ(72px)}
.showcase-visual--wheelbot .bot-board{transform:translateZ(72px) rotateX(3deg)}
.showcase-visual--wheelbot .bot-meta{transform:translateZ(38px)}
.architecture-strip .architecture-step:first-child{transform:translateZ(20px)}
.architecture-strip .architecture-step:nth-child(2){transform:translateZ(48px)}
.architecture-strip .architecture-step:last-child{transform:translateZ(76px)}
.motion-entered .hero-object-window{animation:yana-depth-in 1.25s cubic-bezier(.16,1,.3,1) both}
.motion-entered .hero-object-chip{animation:yana-chip-in 1.2s .2s cubic-bezier(.16,1,.3,1) both}
.motion-entered.showcase-visual .flow-row,.motion-entered.showcase-visual .bot-board,.motion-entered.showcase-visual img{animation:yana-element-in .85s cubic-bezier(.16,1,.3,1) both}
.motion-entered.showcase-visual,.motion-entered.hero-stage{animation:yana-scene-in 1.05s cubic-bezier(.16,1,.3,1) both}
.motion-entered.showcase-visual .flow-row:nth-of-type(3){animation-delay:.12s}
.motion-entered.showcase-visual .flow-row:nth-of-type(5){animation-delay:.24s}
@keyframes yana-depth-in{from{opacity:.35;transform:translateZ(-80px) rotateY(26deg) scale(.82)}to{opacity:1;transform:translateZ(68px) rotateY(0) scale(1)}}
@keyframes yana-chip-in{from{opacity:0;transform:translateZ(0) translateY(25px)}to{opacity:1;transform:translateZ(105px) translateY(0)}}
@keyframes yana-element-in{from{opacity:.45;translate:0 34px}to{opacity:1;translate:0 0}}
@keyframes yana-scene-in{from{opacity:.5;rotate:y -25deg;translate:0 45px}to{opacity:1;rotate:y 0deg;translate:0 0}}
@media(max-width:900px){.yana-intro-inner{grid-template-columns:1fr;gap:12px;max-width:720px;text-align:center}.yana-intro-copy{margin:auto}.yana-intro-copy h1{margin-inline:auto}.yana-intro-copy>p:not(.eyebrow){margin-inline:auto}.yana-liquid-wrap{margin-inline:auto}.yana-liquid-wrap .liquid-stage{left:50%;transform:translate(-50%,-50%)}.yana-hero-object{width:min(100%,600px);aspect-ratio:1.2}.hero-object-chip{right:0}}
@media(max-width:600px){.yana-intro-inner{width:min(100% - 32px,720px);padding-block:74px 48px}.yana-intro-copy h1{font-size:clamp(3.2rem,13vw,5.4rem)}.yana-intro-copy>p:not(.eyebrow){margin-block:20px}.yana-hero-object{width:min(100%,420px);aspect-ratio:1.03}.hero-object-window{inset:13% 2% 14% 3%;border-width:5px;border-bottom-width:7px}.hero-object-chip{top:3%;padding:9px 11px}.showcase-visual.motion-surface{transform:perspective(950px) rotateX(var(--motion-rx,5deg)) rotateY(var(--motion-ry,-7deg)) translateY(var(--motion-lift,0px))!important}}
@media(prefers-reduced-motion:reduce){.yana-hero-object,.sakura-site :is(.showcase-visual,.hero-stage,.feature-visual).motion-surface{transform:none!important}.motion-entered *{animation:none!important}}

/* Each product has a distinct staged object. Layers move only on scroll or pointer input. */
.showcase-visual--ai{perspective:1100px}
.showcase-visual--ai .flow{transform-style:preserve-3d;transform:translateY(calc(var(--motion-progress,0) * -20px)) rotateY(-8deg)}
.showcase-visual--ai .flow::before{content:"YANA / AUTHORITY LAYER";position:absolute;left:5%;right:5%;top:-55px;padding:10px 14px;border:1px solid #e2e2e6;border-radius:10px;background:#fff;color:#86868b;font:.65rem var(--mono);letter-spacing:.11em;transform:translateZ(8px)}
html[lang="vi"] .showcase-visual--ai .flow::before{content:"YANA / LỚP QUYỀN HẠN"}
html[lang="ko"] .showcase-visual--ai .flow::before{content:"YANA / 권한 계층"}
.showcase-visual--ai .flow-row{position:relative;min-height:70px;transform-style:preserve-3d;box-shadow:0 18px 28px rgba(20,20,24,.09),0 3px 0 #e3e3e7}
.showcase-visual--ai .flow-row:nth-of-type(1){transform:translateZ(15px) translateX(calc(var(--motion-progress,0) * -22px)) rotateY(-5deg)}
.showcase-visual--ai .flow-row:nth-of-type(3){transform:translateZ(70px) translateX(calc(var(--motion-progress,0) * 18px)) rotateY(3deg)}
.showcase-visual--ai .flow-row:nth-of-type(5){transform:translateZ(125px) translateX(calc(var(--motion-progress,0) * -26px)) rotateY(-4deg)}
.showcase-visual--ai .flow-row:nth-of-type(3){border-color:#c8c8ce;background:#fefefe}
.showcase-visual--ai .flow-row:nth-of-type(3)::before{content:"";position:absolute;left:-7px;top:15px;bottom:15px;width:4px;border-radius:5px;background:#1d1d1f}
.showcase-visual--ai .flow-line{position:relative;height:28px;background:#b9b9c0;transform:translateZ(35px)}
.showcase-visual--ai .flow-line::after{content:"";position:absolute;left:-4px;bottom:-1px;width:9px;height:9px;border-radius:50%;background:#1d1d1f}
.showcase-visual--studio{perspective:1100px}
.studio-display{position:relative;width:92%;margin-inline:auto;transform-style:preserve-3d;transform:translateY(calc(var(--motion-progress,0) * -15px))}
.showcase-visual--studio .studio-display img{display:block;width:100%;height:auto;transform:translateZ(35px) rotateY(4deg);border:7px solid #27282c;border-radius:19px;box-shadow:0 33px 65px rgba(20,20,24,.22)}
.studio-layer{position:absolute;z-index:2;display:grid;gap:4px;min-width:158px;padding:14px 17px;border:1px solid #dddde2;border-radius:15px;background:rgba(255,255,255,.98);box-shadow:0 15px 36px rgba(20,20,24,.14);transform-style:preserve-3d}
.studio-layer strong{color:#1d1d1f;font-size:.78rem;letter-spacing:-.015em}
.studio-layer small{color:#7a7a80;font:.59rem var(--mono);letter-spacing:.075em}
.studio-layer--files{left:1%;top:8%;transform:translateZ(100px) translateX(calc(var(--motion-progress,0) * -12px))}
.studio-layer--terminal{right:1%;bottom:9%;transform:translateZ(110px) translateX(calc(var(--motion-progress,0) * 12px))}
.studio-layer--control{right:3%;top:-8%;transform:translateZ(90px) translateY(calc(var(--motion-progress,0) * -12px))}
.showcase-visual--wheelbot{perspective:1200px}
.bot-diagram{transform-style:preserve-3d}
.bot-assembly{position:relative;width:min(100%,530px);height:300px;transform-style:preserve-3d;transform:translateY(calc(var(--motion-progress,0) * -20px)) rotateX(12deg) rotateY(-16deg)}
.bot-floor{position:absolute;left:10%;right:10%;bottom:9%;height:58%;border:1px solid #e1e1e5;border-radius:50%;background:radial-gradient(ellipse,#e0e0e4 0,#f4f4f6 65%,transparent 70%);transform:rotateX(68deg) translateZ(-42px)}
.bot-wheel{position:absolute;bottom:15%;width:26%;aspect-ratio:1;border:12px solid #33353a;border-radius:50%;background:radial-gradient(circle,#e4e5e7 0 12%,#656870 13% 17%,#c4c7cc 18% 24%,#303238 25% 53%,#181a1e 54%);box-shadow:inset 0 0 0 6px #5f6269,0 18px 25px rgba(20,20,24,.23);transform-style:preserve-3d}
.bot-wheel::after{content:"";position:absolute;inset:28%;border:3px solid #94979f;border-radius:50%}
.bot-wheel--left{left:4%;transform:translateZ(65px) rotateY(-11deg)}
.bot-wheel--right{right:4%;transform:translateZ(65px) rotateY(11deg)}
.bot-body{position:absolute;left:21%;right:21%;top:12%;height:52%;display:grid;place-items:center;border:1px solid #b8bbc2;border-radius:30px 30px 23px 23px;background:linear-gradient(160deg,#fdfdfd,#d6d9de 68%,#a9adb6);box-shadow:inset 0 2px 1px #fff,0 17px 0 #6f737b,0 33px 28px rgba(20,20,24,.23);transform:translateZ(82px)}
.bot-body::before{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.8);border-radius:23px}
.bot-face{display:grid;justify-items:center;gap:8px;position:relative;z-index:1}
.bot-face b{font-size:clamp(1.35rem,2.5vw,2rem);letter-spacing:-.07em}
.bot-face small{color:#5f6269;font:.58rem var(--mono);letter-spacing:.09em}
.bot-sensor{position:absolute;top:-26px;left:calc(50% - 29px);width:58px;height:40px;border:7px solid #42444a;border-radius:16px 16px 12px 12px;background:radial-gradient(circle at 50% 48%,#1c1d21 0 28%,#777a82 30% 38%,#ececef 40%);box-shadow:0 10px 16px rgba(20,20,24,.15);transform:translateZ(43px)}
.bot-callout{position:absolute;z-index:2;padding:10px 12px;border:1px solid #dadbe0;border-radius:10px;background:#fff;color:#626269;font:.58rem var(--mono);letter-spacing:.07em;box-shadow:0 12px 25px rgba(20,20,24,.08)}
.bot-callout--left{top:2%;left:0;transform:translateZ(150px) translateX(calc(var(--motion-progress,0) * -20px))}
.bot-callout--right{right:0;bottom:0;transform:translateZ(150px) translateX(calc(var(--motion-progress,0) * 20px))}
.bot-caption{position:relative;margin-top:10px;color:#86868b;text-align:center;font:.6rem var(--mono);letter-spacing:.09em;transform:translateZ(15px)}
.motion-entered.showcase-visual .studio-layer{animation:yana-card-in .9s cubic-bezier(.16,1,.3,1) both}
.motion-entered.showcase-visual .studio-layer--terminal{animation-delay:.12s}
.motion-entered.showcase-visual .studio-layer--control{animation-delay:.24s}
.motion-entered.showcase-visual .bot-body{animation:yana-bot-in 1s cubic-bezier(.16,1,.3,1) both}
.motion-entered.showcase-visual .bot-wheel{animation:yana-wheel-in .95s cubic-bezier(.16,1,.3,1) both}
.motion-entered.showcase-visual .bot-wheel--right{animation-delay:.12s}
.motion-entered.showcase-visual .bot-callout{animation:yana-card-in .9s .25s cubic-bezier(.16,1,.3,1) both}
@keyframes yana-card-in{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@keyframes yana-bot-in{from{opacity:.2;translate:0 -42px}to{opacity:1;translate:0 0}}
@keyframes yana-wheel-in{from{opacity:.2;translate:0 55px}to{opacity:1;translate:0 0}}
@media(max-width:900px){.studio-layer--files{left:0}.studio-layer--terminal{right:0}.studio-layer--control{right:2%}}
@media(max-width:600px){.showcase-visual--ai .flow{margin-top:38px}.showcase-visual--ai .flow::before{top:-42px}.showcase-visual--ai .flow-row{min-height:58px}.studio-display{width:96%}.studio-layer{min-width:105px;padding:8px 10px;border-radius:10px}.studio-layer strong{font-size:.65rem}.studio-layer small{font-size:.5rem}.studio-layer--files{left:0;top:4%}.studio-layer--terminal{right:0;bottom:5%}.studio-layer--control{top:-13%}.showcase-visual--studio .studio-display img{border-width:4px}.bot-assembly{height:220px}.bot-wheel{border-width:7px}.bot-body{top:18%;height:50%;border-radius:19px;box-shadow:inset 0 2px 1px #fff,0 10px 0 #6f737b,0 23px 18px rgba(20,20,24,.2)}.bot-body::before{inset:6px;border-radius:14px}.bot-sensor{top:-19px;left:calc(50% - 20px);width:40px;height:30px;border-width:5px}.bot-callout{font-size:.47rem;padding:7px}.bot-face b{font-size:1.1rem}.bot-face small{font-size:.44rem}}
@media(prefers-reduced-motion:reduce){.studio-display,.showcase-visual--ai .flow,.bot-assembly{transform:none!important}}

/* Liquid glass styling with bounded CSS compositing instead of per-button WebGL. */
.sakura-site .liquid-stage{isolation:isolate}
.sakura-site .liquid-plate,
.sakura-site .liquid-stage.hot .liquid-plate,
.sakura-site .liquid-stage.press .liquid-plate{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.92)!important;
  background:linear-gradient(158deg,rgba(255,255,255,.94) 0%,rgba(244,247,251,.72) 43%,rgba(219,225,234,.58) 100%)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,1),inset 0 -2px 5px rgba(129,139,157,.18),0 0 0 1px rgba(153,164,181,.33),0 9px 22px rgba(60,70,88,.12)!important;
  -webkit-backdrop-filter:blur(7px) saturate(1.15);
  backdrop-filter:blur(7px) saturate(1.15);
}
.sakura-site .liquid-plate::after{content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.65),transparent 38%,rgba(255,255,255,.3) 70%,transparent)}
.sakura-site .liquid-stage:hover .liquid-plate{background:linear-gradient(158deg,rgba(255,255,255,.98),rgba(225,232,242,.76))!important;box-shadow:inset 0 1px 1px #fff,0 0 0 1px rgba(135,146,164,.45),0 13px 27px rgba(60,70,88,.17)!important}
.sakura-site .liquid-stage.press .liquid-plate{transform:translateY(1px) scale(.985)}
.sakura-site .liquid-button,
.sakura-site .liquid-stage--decision .liquid-button,
.sakura-site .liquid-stage--decision.is-selected .liquid-button{color:#1d1d1f!important;text-shadow:0 1px 0 rgba(255,255,255,.65)!important}
.sakura-site .liquid-stage--decision.is-selected .liquid-plate{background:linear-gradient(160deg,#e7edf6,#cbd6e5)!important;border-color:#fff!important;box-shadow:inset 0 1px 1px #fff,0 0 0 1px #9aaac0,0 8px 19px rgba(52,75,105,.15)!important}
.sakura-site :is(.button:not(.ghost):not(.light),.nav-cta,.studio-download-cta){
  border:1px solid rgba(255,255,255,.95)!important;
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(228,235,244,.73))!important;
  color:#1d1d1f!important;
  box-shadow:inset 0 1px 1px #fff,0 0 0 1px rgba(148,159,176,.36),0 9px 21px rgba(58,68,85,.12)!important;
  -webkit-backdrop-filter:blur(7px) saturate(1.15);backdrop-filter:blur(7px) saturate(1.15)
}
.sakura-site :is(.button.ghost,.button.light){background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(237,242,248,.65))!important;border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 0 0 1px rgba(148,159,176,.24),inset 0 1px 1px #fff!important}
.hero-object-window{border:8px solid rgba(250,252,255,.93)!important;border-bottom-width:11px!important;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(151,160,175,.48),0 35px 70px rgba(52,63,80,.2)!important}
.hero-object-bar{background:linear-gradient(#fff,#eef2f7)!important;border-bottom-color:#dfe5ed!important}
.hero-object-base{background:linear-gradient(180deg,#f9fbfe 0 2px,#e9edf3 3px 57%,#c5ccd5 82%,#fff)!important}
.showcase-visual--studio .studio-display img{border-color:rgba(253,254,255,.93)!important;box-shadow:0 0 0 1px rgba(145,154,170,.36),0 33px 65px rgba(40,52,70,.18)!important}
.hero-object-chip,.studio-layer,.showcase-intro-panel{background:linear-gradient(155deg,rgba(255,255,255,.97),rgba(237,242,248,.84))!important;border-color:rgba(255,255,255,.95)!important;box-shadow:inset 0 1px 1px #fff,0 0 0 1px rgba(157,168,184,.28),0 16px 33px rgba(50,62,80,.1)!important}
@media(max-width:600px){.hero-object-window{border-width:5px!important;border-bottom-width:7px!important}}
@media(prefers-reduced-motion:reduce){.sakura-site .liquid-plate,.sakura-site :is(.button,.nav-cta,.studio-download-cta){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}

/* Short brand reveal on the home pages. All motion finishes and the layer is removed. */
.yana-opening{position:fixed;inset:0;z-index:1000;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;padding:clamp(22px,4vw,52px);background:radial-gradient(circle at 50% 46%,#fff 0,#f8f9fb 55%,#eef1f5 100%);color:#1d1d1f;isolation:isolate}
.yana-opening::before{content:"";position:absolute;inset:15% -20%;pointer-events:none;background:linear-gradient(90deg,transparent 49.94%,rgba(108,118,135,.15) 50%,transparent 50.06%),linear-gradient(0deg,transparent 49.94%,rgba(108,118,135,.12) 50%,transparent 50.06%);opacity:.65}
.yana-opening.is-playing{animation:yana-opening-exit .82s 1.85s cubic-bezier(.72,0,.24,1) both}
.opening-top,.opening-bottom{position:relative;display:flex;justify-content:space-between;gap:16px;color:#777f8c;font:.68rem var(--mono);letter-spacing:.13em}
.opening-top{align-self:start}.opening-bottom{align-self:end}
.opening-top span:last-child{position:absolute;left:50%;transform:translateX(-50%)}
.opening-center{position:relative;display:grid;justify-items:center;align-content:center;perspective:1000px}
.opening-mark{width:76px;height:76px;margin-bottom:clamp(24px,4vh,48px);border-radius:20px;box-shadow:0 18px 34px rgba(43,53,70,.13)}
.opening-mark img{display:block;width:100%;height:100%}
.is-playing .opening-mark{animation:yana-opening-mark .75s .06s cubic-bezier(.16,1,.3,1) both}
.opening-word{display:flex;align-items:center;justify-content:center;gap:.01em;font-family:var(--sans);font-size:clamp(5.5rem,21vw,16rem);font-weight:760;line-height:.88;letter-spacing:-.09em;white-space:nowrap;transform-style:preserve-3d}
.opening-word span{display:inline-block;transform-origin:50% 100%}
.is-playing .opening-word span{animation:yana-opening-letter .78s cubic-bezier(.16,1,.3,1) both}
.is-playing .opening-word span:nth-child(1){animation-delay:.18s}
.is-playing .opening-word span:nth-child(2){animation-delay:.27s}
.is-playing .opening-word span:nth-child(3){animation-delay:.36s}
.is-playing .opening-word span:nth-child(4){animation-delay:.45s}
.opening-caption{margin:clamp(26px,4vh,48px) 0 0;color:#5f6672!important;font-size:clamp(1rem,1.6vw,1.35rem);font-weight:520;letter-spacing:-.025em;text-align:center}
.is-playing .opening-caption{animation:yana-opening-caption .7s .72s both}
.opening-rule{width:min(430px,70vw);height:1px;margin-top:28px;background:#aab2bf;transform-origin:center}
.is-playing .opening-rule{animation:yana-opening-rule .7s .92s both}
.opening-skip{position:absolute;top:clamp(18px,3vw,40px);right:clamp(18px,3vw,40px);z-index:2;min-height:44px;padding:0 18px;border:1px solid #fff;border-radius:999px;background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(224,232,242,.8));color:#343b46;font:600 .76rem var(--sans);box-shadow:inset 0 1px #fff,0 0 0 1px rgba(142,154,172,.3),0 8px 20px rgba(51,65,83,.1);cursor:pointer}
.opening-skip span{margin-left:9px}
.opening-skip:hover{background:#fff}
.opening-skip:focus-visible{outline:3px solid #7c9cff;outline-offset:3px}
body.opening-active .yana-intro-copy,body.opening-active .yana-hero-object{opacity:0}
.yana-intro-copy,.yana-hero-object{transition:opacity .72s cubic-bezier(.16,1,.3,1)}
@keyframes yana-opening-mark{from{opacity:0;transform:translateY(44px) rotateX(62deg) scale(.66)}to{opacity:1;transform:translateY(0) rotateX(0) scale(1)}}
@keyframes yana-opening-letter{from{opacity:0;transform:translateY(55px) rotateX(-68deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}
@keyframes yana-opening-caption{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes yana-opening-rule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes yana-opening-exit{0%{transform:translateY(0)}100%{transform:translateY(-105%)}}
.hero-object-base{display:none!important}
.hero-object-window{inset:12% 2% 8% 5%}

/* Wheelbot is represented by the supplied firmware and its real control layers. */
.wheelbot-system{position:relative;display:grid;align-content:center;gap:20px;width:min(100%,600px);min-height:370px;transform-style:preserve-3d;transform:translateY(calc(var(--motion-progress,0) * -13px))}
.wheelbot-system-top{display:flex;justify-content:space-between;gap:12px;color:#777f8c;font:.65rem var(--mono);letter-spacing:.08em;transform:translateZ(12px)}
.wheelbot-firmware-card{display:grid;gap:10px;padding:clamp(26px,4vw,42px);border:1px solid rgba(255,255,255,.95);border-radius:23px;background:linear-gradient(155deg,#fff,#e8edf4);box-shadow:inset 0 1px #fff,0 0 0 1px rgba(155,166,181,.3),0 25px 50px rgba(47,59,77,.13);transform:translateZ(85px) rotateY(-5deg)}
.wheelbot-firmware-card small{color:#79818e;font:.68rem var(--mono);letter-spacing:.1em}
.wheelbot-firmware-card strong{font-size:clamp(1.65rem,3.5vw,2.6rem);font-weight:680;letter-spacing:-.055em}
.wheelbot-firmware-card span{color:#5d6571;font-size:.85rem}
.wheelbot-system-rail{display:flex;justify-content:space-around;height:28px;margin-inline:10%;border-bottom:1px solid #aeb7c4;transform:translateZ(24px)}
.wheelbot-system-rail span{width:1px;height:100%;background:#aeb7c4}
.wheelbot-system-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;transform-style:preserve-3d}
.wheelbot-system-parts>div{display:grid;gap:8px;min-height:90px;padding:16px;border:1px solid #e0e5ec;border-radius:15px;background:#fff;box-shadow:0 12px 23px rgba(47,59,77,.07)}
.wheelbot-system-parts>div:nth-child(1){transform:translateZ(18px)}
.wheelbot-system-parts>div:nth-child(2){transform:translateZ(37px)}
.wheelbot-system-parts>div:nth-child(3){transform:translateZ(56px)}
.wheelbot-system-parts small{color:#838b97;font:.58rem var(--mono);letter-spacing:.07em}
.wheelbot-system-parts strong{font-size:.84rem;line-height:1.25}
.wheelbot-scene-download{justify-self:end;color:#333b46!important;font-size:.78rem;font-weight:650;text-decoration:none;border-bottom:1px solid #aeb7c4;transform:translateZ(60px)}
.wheelbot-scene-download span{margin-left:6px}
.motion-entered .wheelbot-firmware-card{animation:yana-firmware-in 1s cubic-bezier(.16,1,.3,1) both}
.motion-entered .wheelbot-system-parts>div{animation:yana-card-in .8s .25s cubic-bezier(.16,1,.3,1) both}
@keyframes yana-firmware-in{from{opacity:0;translate:0 48px}to{opacity:1;translate:0 0}}
.firmware-release{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(36px,6vw,90px);width:var(--content);margin-inline:auto;border-top:1px solid #e5e8ec}
.firmware-release-copy{max-width:590px}
.firmware-release-copy h2{font-size:clamp(2.3rem,4vw,4.5rem);line-height:1.07;letter-spacing:-.05em}
.firmware-release-copy p:last-child{color:#5f6672;font-size:1.05rem;line-height:1.65}
.firmware-release-panel{display:grid;gap:16px;min-width:0;padding:clamp(26px,4vw,42px);border:1px solid #e2e6eb;border-radius:25px;background:linear-gradient(145deg,#fff,#f1f4f8);box-shadow:0 24px 55px rgba(43,54,70,.09)}
.firmware-release-head{display:flex;justify-content:space-between;gap:12px;color:#7c8591;font:.65rem var(--mono);letter-spacing:.08em}
.firmware-release-panel>strong{font-size:clamp(1.2rem,2vw,1.6rem);overflow-wrap:anywhere}
.firmware-release-panel>a{justify-self:start;text-decoration:none}
.firmware-release-panel>small{margin-top:10px;color:#6c7480}
.firmware-release-panel>code{display:block;overflow-wrap:anywhere;color:#47505d;font-size:.72rem}
.firmware-reference{scroll-margin-top:84px}
.firmware-reference .firmware-release-copy a{color:#35658f;text-underline-offset:4px}
.firmware-reference .firmware-release-panel{background:linear-gradient(145deg,#fff,#f1f6fc)}
.firmware-reference .firmware-release-panel>p{margin:0;color:#5f6672;line-height:1.6}
.wheelbot-source-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.wheelbot-source-actions .button{text-align:center;text-decoration:none;line-height:1.25}
@media(max-width:600px){.wheelbot-source-actions .button{width:100%}}
@media(max-width:760px){.opening-top,.opening-bottom{font-size:.54rem}.opening-top span:last-child{display:none}.opening-bottom span:last-child{display:none}.opening-mark{width:60px;height:60px}.opening-word{font-size:clamp(5rem,22vw,8rem)}.opening-caption{max-width:18ch}.firmware-release{grid-template-columns:1fr}.wheelbot-system{min-height:320px}.wheelbot-firmware-card{transform:translateZ(55px) rotateY(-3deg)}.wheelbot-system-parts>div{min-height:76px;padding:10px}.wheelbot-system-parts small{font-size:.48rem}.wheelbot-system-parts strong{font-size:.68rem}}
@media(prefers-reduced-motion:reduce){.yana-opening{display:none!important}.opening-active .yana-intro-copy,.opening-active .yana-hero-object{opacity:1!important}.wheelbot-system,.wheelbot-firmware-card,.wheelbot-system-parts>div{transform:none!important}}

/* Lighten the Studio presentation and keep the largest layer still while scrolling. */
.sakura-site .site-nav{background:rgba(255,255,255,.97)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.sakura-site .nav-scrim{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(24,31,42,.08)}
.yana-hero-object{aspect-ratio:1.28;transform:perspective(1300px) rotateX(2deg) rotateY(-5deg) translateY(0)!important}
.yana-hero-object::before,.hero-object-backplate{display:none!important}
.hero-object-window{inset:5% 2% 5% 2%;border-width:4px!important;border-bottom-width:5px!important;transform:translateZ(0);box-shadow:0 0 0 1px rgba(163,174,189,.38),0 15px 32px rgba(45,58,76,.07)!important}
.hero-object-window img{filter:none}
.hero-object-chip{top:0;right:0;transform:translateZ(16px);box-shadow:0 8px 20px rgba(45,58,76,.08)!important}
.motion-surface.motion-active{will-change:auto}
.showcase-visual.motion-active{will-change:transform}
.motion-entered .hero-object-window{animation:yana-hero-reveal .65s ease-out both}
.motion-entered .hero-object-chip{animation:yana-hero-reveal .7s .1s ease-out both}
@keyframes yana-hero-reveal{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.yana-opening.is-playing{animation:yana-opening-fade .55s 1.9s ease-in-out both}
.is-playing .opening-mark{animation:yana-opening-simple .65s .06s ease-out both}
.is-playing .opening-word span{animation:yana-opening-simple .7s ease-out both}
@keyframes yana-opening-simple{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}
@keyframes yana-opening-fade{from{opacity:1}to{opacity:0}}
@media(max-width:900px){.yana-hero-object{aspect-ratio:1.2}}
@media(max-width:600px){.yana-hero-object{aspect-ratio:1.1}.hero-object-window{inset:7% 2% 6%;border-width:3px!important;border-bottom-width:4px!important}.hero-object-chip{top:1%}}

/* Refined opening lockup: smaller mixed-case type, no drafting grid. */
.yana-opening{display:flex;align-items:center;justify-content:center;background:#fafbfd}
.yana-opening::before,.opening-top,.opening-bottom,.opening-rule{display:none}
.opening-center{grid-template-columns:auto auto;column-gap:18px;row-gap:19px;align-items:center;justify-content:center;width:max-content;max-width:100%}
.opening-mark{grid-column:1;grid-row:1;align-self:center;width:68px;height:68px;margin:0;border-radius:18px;box-shadow:0 9px 22px rgba(60,88,126,.09)}
.opening-word{grid-column:2;grid-row:1;justify-content:start;font-size:clamp(4.5rem,10vw,8rem);font-weight:570;line-height:1;letter-spacing:-.075em;color:#47658b}
.opening-caption{grid-column:1/-1;margin:0;color:#667385!important;font-size:clamp(.94rem,1.3vw,1.12rem);font-weight:450}
.yana-opening.is-playing{animation-duration:.43s;animation-delay:1.5s}
.is-playing .opening-word span:nth-child(1){animation-delay:.08s}
.is-playing .opening-word span:nth-child(2){animation-delay:.14s}
.is-playing .opening-word span:nth-child(3){animation-delay:.2s}
.is-playing .opening-word span:nth-child(4){animation-delay:.26s}
.is-playing .opening-caption{animation-delay:.48s}
.sakura-site .brand span{color:#47658b}
@media(max-width:600px){.opening-center{column-gap:12px;row-gap:15px}.opening-mark{width:50px;height:50px;border-radius:14px}.opening-word{font-size:clamp(3.8rem,17vw,6rem)}}
@media(prefers-reduced-motion:reduce){.yana-hero-object{transform:none!important}.yana-opening{display:none!important}}

/* The same Yana introduction continues across every inner page. */
.yana-opening--inner{background:#fafbfd}
.yana-opening--inner .opening-center{row-gap:12px}
.yana-opening--inner .opening-mark{width:58px;height:58px;border-radius:16px}
.yana-opening--inner .opening-word{font-size:clamp(4rem,9vw,6rem)}
.yana-opening--inner .opening-caption{font-size:clamp(.85rem,1.1vw,1rem)}
.yana-opening--inner.is-playing{animation:yana-opening-fade .3s .78s ease-out both}
.yana-opening--inner.is-playing .opening-mark,.yana-opening--inner.is-playing .opening-word span{animation-duration:.45s}
.yana-opening--inner.is-playing .opening-caption{animation-duration:.35s;animation-delay:.24s}
body.opening-active{overflow:hidden}
@media(max-width:600px){.yana-opening--inner .opening-mark{width:48px;height:48px}.yana-opening--inner .opening-word{font-size:clamp(3.4rem,15vw,5.3rem)}}
@media(prefers-reduced-motion:reduce){body.opening-active{overflow:auto}}

/* Center the visible Yana wordmark; the separate mark sits above it. */
.yana-opening .opening-center{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:auto;max-width:100%;text-align:center}
.yana-opening .opening-mark{flex:none;margin:0}
.yana-opening .opening-word{justify-content:center;margin:0}
.yana-opening .opening-caption{margin:0}

/* Project-grounded Wheelbot concept artwork; the technical status remains explicit. */
.wheelbot-stage{display:grid!important;justify-items:center;align-content:center;gap:12px;min-height:0!important;padding:clamp(18px,3vw,34px)!important;background:#fff!important;overflow:hidden}
.wheelbot-concept{width:min(100%,1000px);margin:0}
.wheelbot-concept img{display:block;width:100%;height:auto;aspect-ratio:1.42;object-fit:contain;background:#fff;border-radius:clamp(16px,2vw,26px)}
.wheelbot-concept figcaption{margin:12px 0 0;color:#667080;text-align:center;font:.69rem var(--mono);letter-spacing:.06em}
.wheelbot-stage .stage-note{max-width:65ch;margin:0!important;color:#667080;font-size:.7rem!important;line-height:1.5}
.showcase-visual--wheelbot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden!important}
.showcase-visual--wheelbot .wheelbot-concept img{aspect-ratio:1.45;object-fit:contain}
.wheelbot-scene-download{position:relative;z-index:1}
@media(max-width:600px){.wheelbot-concept img,.showcase-visual--wheelbot .wheelbot-concept img{aspect-ratio:1.12}.wheelbot-concept figcaption{font-size:.57rem}.wheelbot-stage .stage-note{font-size:.62rem!important}}

/* Keep the large Wheelbot image's hit area stable at its corners. */
.sakura-site :is(.showcase-visual--wheelbot,.wheelbot-stage).motion-surface{transform:none!important;transform-style:flat;backface-visibility:visible}
.sakura-site .showcase-visual--wheelbot.motion-active{will-change:auto}
@media (hover:hover) and (pointer:fine) and (min-width:901px){.sakura-site .global-mega-panel{top:100%}}

/* Depth comes from layered content and scroll timing, without rotating whole panels. */
.sakura-site :is(.showcase-visual,.hero-stage,.feature-visual).motion-surface{transform:none!important;transform-style:flat;backface-visibility:visible}
.sakura-site .showcase-visual.motion-active{will-change:auto}
.showcase-visual--ai .flow{transform:translateY(calc(var(--motion-progress,0) * -8px))}
.showcase-visual--ai .flow-row:nth-of-type(1){transform:translateX(calc(var(--motion-progress,0) * -8px))}
.showcase-visual--ai .flow-row:nth-of-type(3){transform:translateX(calc(var(--motion-progress,0) * 7px))}
.showcase-visual--ai .flow-row:nth-of-type(5){transform:translateX(calc(var(--motion-progress,0) * -9px))}
.showcase-visual--studio .studio-display img{transform:none}
.motion-entered.showcase-visual,.motion-entered.hero-stage{animation:yana-scene-calm .7s cubic-bezier(.16,1,.3,1) both}
@keyframes yana-scene-calm{from{opacity:.72;translate:0 20px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.motion-entered.showcase-visual,.motion-entered.hero-stage{animation:none}}

/* Center product hero copy and visual within the same readable measure. */
.sakura-site :is(.hero,.page-hero) .hero-inner{width:min(1180px,100%);margin-inline:auto;text-align:center}
.sakura-site :is(.hero,.page-hero) h1{margin-inline:auto}
.sakura-site :is(.hero,.page-hero) .hero-copy{margin-inline:auto}
.sakura-site :is(.hero,.page-hero) .hero-actions{justify-content:center}
.sakura-site :is(.hero,.page-hero) .hero-stage{margin-inline:auto}
.sakura-site :is(.hero,.page-hero) h1{max-width:min(100%,920px)}
.sakura-site :is(.hero,.page-hero) .lead{max-width:760px;margin-inline:auto}
.sakura-site :is(.hero,.page-hero) .sakura-actions{justify-content:center}

/* Interaction happens on selection, without continuous 3D rotation. */
.showcase-visual--ai .flow-row[role="button"],.studio-layer[role="button"]{cursor:pointer;transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
.showcase-visual--ai .flow-row[aria-pressed="true"]{background:#f5f8fc;border-color:#8da6c9;box-shadow:0 10px 24px rgba(63,93,136,.1)}
.showcase-visual--ai .flow-row[aria-pressed="true"]::before{background:#54769f}
.studio-layer[aria-pressed="true"]{border-color:#8da6c9!important;box-shadow:inset 0 1px 1px #fff,0 0 0 2px rgba(92,127,171,.45),0 12px 26px rgba(50,75,110,.12)!important}
.showcase-visual :is([role="button"],button):focus-visible,.wheelbot-stage button:focus-visible{outline:2px solid #476c9c;outline-offset:4px}
.showcase-detail{position:relative;z-index:3;width:min(100%,580px);min-height:2.5em;margin:18px 0 0;color:#53677f;font-size:.83rem;line-height:1.5;text-align:center}
.studio-detail{width:92%;margin:28px 0 0}
.wheelbot-view-switch{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;border:1px solid #d9e0e9;border-radius:999px;background:#f3f6fa}
.wheelbot-view-switch button{min-height:38px;padding:7px 15px;border:0;border-radius:999px;background:transparent;color:#617086;font:600 .78rem var(--sans);cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.wheelbot-view-switch button[aria-pressed="true"]{background:#fff;color:#325479;box-shadow:0 2px 9px rgba(61,82,113,.11)}
.wheelbot-view[hidden]{display:none!important}
.wheelbot-view{animation:yana-view-enter .3s ease-out both}
.wheelbot-view img{transform:translate3d(var(--wheelbot-x,0px),var(--wheelbot-y,0px),0) scale(1);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover) and (pointer:fine){.wheelbot-view:hover img{transform:translate3d(var(--wheelbot-x,0px),var(--wheelbot-y,0px),0) scale(1.035)}}
.wheelbot-view:active img{transform:translate3d(var(--wheelbot-x,0px),var(--wheelbot-y,0px),0) scale(1.02)}
.wheelbot-zoom{display:inline-block;margin-left:.6em;color:#3f628e;text-decoration:underline;text-underline-offset:3px}
@keyframes yana-view-enter{from{opacity:.5;translate:0 7px}to{opacity:1;translate:0 0}}
@media(max-width:600px){.showcase-detail{font-size:.74rem}.studio-detail{margin-top:18px}.wheelbot-view-switch button{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){.wheelbot-view{animation:none}.wheelbot-view img,.wheelbot-view:hover img,.wheelbot-view:active img{transform:none!important;transition:none!important}}

/* An explicit image viewer makes the print layout useful on touch screens. */
.wheelbot-view{position:relative}
.wheelbot-inspect-trigger{position:absolute;z-index:4;top:18px;right:18px;min-height:38px;padding:8px 13px;border:1px solid rgba(181,193,209,.8);border-radius:999px;background:rgba(255,255,255,.94);color:#33577f;font:600 .76rem var(--sans);box-shadow:0 5px 15px rgba(28,46,73,.1);cursor:pointer}
.wheelbot-inspect-trigger:hover{background:#fff;box-shadow:0 8px 18px rgba(28,46,73,.16)}
.wheelbot-inspector{width:min(1100px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:0;border:1px solid #dfe5ec;border-radius:22px;background:#fff;color:#1d2632;box-shadow:0 28px 85px rgba(20,35,56,.25);overflow:hidden}
.wheelbot-inspector::backdrop{background:rgba(31,43,60,.58)}
.wheelbot-inspector__panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:calc(100dvh - 30px)}
.wheelbot-inspector header,.wheelbot-inspector footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 19px;background:#fff}
.wheelbot-inspector header{border-bottom:1px solid #e5eaf0}
.wheelbot-inspector footer{border-top:1px solid #e5eaf0}
.wheelbot-inspector header strong{font-size:.86rem}
.wheelbot-inspector button{flex:none;min-height:36px;padding:7px 12px;border:1px solid #d7e0ea;border-radius:999px;background:#f7f9fc;color:#33577f;font:600 .76rem var(--sans);cursor:pointer}
.wheelbot-inspector button:hover{background:#eaf0f7}
.wheelbot-inspector button:focus-visible,.wheelbot-inspect-trigger:focus-visible{outline:2px solid #476c9c;outline-offset:3px}
.wheelbot-inspector__viewport{min-height:0;overflow:auto;background:#f7f9fc}
.wheelbot-inspector__viewport img{display:block;width:100%;max-width:100%;height:auto;margin:auto}
.wheelbot-inspector.is-zoomed .wheelbot-inspector__viewport img{width:auto;max-width:none}
.wheelbot-inspector__caption{color:#626f7e;font-size:.75rem;line-height:1.4}
@media(max-width:600px){.wheelbot-inspect-trigger{top:10px;right:10px;font-size:.68rem}.wheelbot-inspector header,.wheelbot-inspector footer{padding:10px 12px}.wheelbot-inspector__caption{font-size:.65rem}}



/* Yana's editorial homepage hero uses the artwork across the whole section. */
.sakura-site .yana-intro{position:relative;min-height:calc(100svh - 64px);overflow:hidden;background:radial-gradient(ellipse 57% 72% at 77% 53%,#f3f7fc 0%,#fafbfd 50%,#fff 100%)!important}
.yana-intro-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-start;width:min(100% - 80px,1320px);min-height:calc(100svh - 64px);padding-block:clamp(90px,10vh,140px);text-align:left}
.yana-intro-copy{position:relative;z-index:2;max-width:600px;margin:0}
.yana-intro-copy h1{max-width:620px}
.yana-intro-copy>p:not(.eyebrow){max-width:510px}
.yana-hero-object.yana-brand-hero{position:absolute;z-index:0;top:0;left:50%;display:block;width:100vw;height:100%;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;translate:-50% 0;transform:none!important;overflow:hidden;pointer-events:none}
.yana-brand-hero::before,.yana-brand-hero::after{display:none!important}
.yana-brand-hero__art{position:absolute;top:calc(50% - 20px);right:clamp(50px,5vw,110px);left:auto;display:block;width:min(58vw,840px);height:auto;aspect-ratio:3/2;object-fit:contain;object-position:center;max-width:none;transform:translateY(-50%);-webkit-mask-image:radial-gradient(ellipse 62% 54% at 50% 50%,#000 44%,transparent 94%);mask-image:radial-gradient(ellipse 62% 54% at 50% 50%,#000 44%,transparent 94%);filter:none!important;user-select:none}
.yana-brand-hero__signature{position:absolute;right:max(8vw,48px);bottom:6%;display:flex;align-items:center;gap:8px;padding:0;border:0;background:transparent;box-shadow:none}
.yana-brand-hero__signature img{display:block;width:26px;height:26px}
.yana-brand-hero__signature strong{color:#47678d;font:650 1.15rem var(--display);letter-spacing:-.05em}
.yana-brand-hero__signature small{margin-left:6px;color:#667e9c;font:650 .52rem var(--sans);letter-spacing:.12em;text-transform:uppercase}
.motion-entered .yana-brand-hero__art{animation:yana-brand-art-in .8s cubic-bezier(.16,1,.3,1) both}
.motion-entered .yana-brand-hero__signature{animation:yana-brand-art-in .6s .2s cubic-bezier(.16,1,.3,1) both}
@keyframes yana-brand-art-in{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@media(max-width:900px){.yana-intro-inner{width:min(100% - 48px,680px);min-height:0;display:flex;flex-direction:column;align-items:stretch;padding-block:90px 52px;text-align:center}.yana-intro-copy{width:100%;max-width:680px;margin-inline:auto}.yana-intro-copy h1,.yana-intro-copy>p:not(.eyebrow){margin-inline:auto}.yana-liquid-wrap{margin-inline:auto}.yana-hero-object.yana-brand-hero{position:relative;left:auto;top:auto;width:min(100%,680px);height:auto;aspect-ratio:1.38;margin-top:12px;translate:none;overflow:visible}.yana-brand-hero__art{top:0;right:0;width:100%;height:100%;aspect-ratio:auto;transform:none;object-fit:cover;object-position:70% center;-webkit-mask-image:radial-gradient(ellipse 66% 58% at 55% 50%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 66% 58% at 55% 50%,#000 50%,transparent 100%)}.yana-brand-hero__signature{right:7%;bottom:2%}}
@media(max-width:600px){.yana-intro-inner{width:min(100% - 32px,680px);padding-block:78px 38px}.yana-hero-object.yana-brand-hero{width:100%;aspect-ratio:1.32;margin-top:6px}.yana-brand-hero__signature{right:6%;bottom:0}.yana-brand-hero__signature small{font-size:.46rem}}
@media(prefers-reduced-motion:reduce){.motion-entered .yana-brand-hero__art,.motion-entered .yana-brand-hero__signature{animation:none}}

/* A small pointer-driven perspective keeps the sculpture alive without a render loop. */
@media(min-width:901px) and (hover:hover) and (pointer:fine){
  .yana-brand-hero__art{transform:translate3d(var(--brand-x,0px),calc(-50% + var(--brand-y,0px)),0) perspective(1300px) rotateX(var(--brand-rx,0deg)) rotateY(var(--brand-ry,0deg));transition:transform .24s ease-out;transform-origin:50% 50%}
  .yana-intro:hover .yana-brand-hero__art{will-change:transform}
}
@media(prefers-reduced-motion:reduce){.yana-brand-hero__art{transform:translateY(-50%)!important}}

/* True WebGL sculpture. The original image is only a fallback when WebGL is unavailable. */
.yana-intro-inner{pointer-events:none}
.yana-intro-copy{pointer-events:auto}
.yana-hero-object.yana-brand-hero{pointer-events:auto}
.yana-brand-hero__canvas{position:absolute;top:calc(50% - 20px);right:clamp(50px,5vw,110px);display:block;width:min(58vw,840px);height:auto;aspect-ratio:3/2;transform:translateY(-50%);background:transparent;touch-action:none;cursor:grab;outline-offset:5px}
.yana-brand-hero.is-3d-ready .yana-brand-hero__art{visibility:hidden}
.yana-intro.is-dragging-brand .yana-brand-hero__canvas{cursor:grabbing}
.yana-brand-hero__hint{position:absolute;left:max(53vw,calc(50% + 90px));bottom:7%;z-index:2;color:#78889c;font:650 .62rem var(--sans);letter-spacing:.14em;text-transform:uppercase;pointer-events:none;opacity:0;transition:opacity .4s}
.yana-brand-hero.is-3d-ready .yana-brand-hero__hint{opacity:.8}
.yana-brand-hero__shadow{position:absolute;z-index:0;right:6%;top:calc(50% + min(18vw,205px));width:min(49vw,650px);height:90px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(92,139,184,.13) 0%,rgba(137,169,204,.06) 46%,transparent 73%);filter:blur(18px);opacity:0;pointer-events:none;transition:opacity .7s}
.yana-brand-hero.is-3d-ready .yana-brand-hero__shadow{opacity:1}
@media(max-width:900px){.yana-brand-hero__canvas{top:0;right:0;width:100%;height:100%;aspect-ratio:auto;transform:none}}
@media(max-width:900px){.yana-brand-hero__hint{left:5%;bottom:3%}}
@media(max-width:900px){.yana-brand-hero__shadow{right:8%;top:70%;width:84%;height:55px}}
@media(prefers-reduced-motion:reduce){.yana-brand-hero__canvas{transform:translateY(-50%)} }
@media(max-width:900px) and (prefers-reduced-motion:reduce){.yana-brand-hero__canvas{transform:none}}


/* Studio product story: editorial sections without continuous rendering. */
.studio-journey,.studio-status{padding-block:clamp(90px,10vw,150px)!important}
.studio-journey-head,.studio-status-head{max-width:800px;margin-bottom:clamp(44px,6vw,82px)}
.studio-journey-head h2,.studio-status-head h2,.studio-boundary h2{margin:.2em 0 .3em;font-size:clamp(3rem,6vw,6rem);line-height:1.03;letter-spacing:-.065em;color:#1d1d1f}
.studio-journey-head h2 span,.studio-status-head h2 span,.studio-boundary h2 span{color:#7b8491}
.studio-journey-head>p:last-child,.studio-status-head>p:last-child,.studio-boundary-copy>p:not(.eyebrow){max-width:64ch;color:#626b77;font-size:clamp(1rem,1.4vw,1.25rem);line-height:1.7}
.studio-journey-steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,50px);margin:0;padding:30px 0 0;list-style:none;border-top:1px solid #dce3eb}
.studio-journey-steps li{position:relative;min-width:0;padding-top:25px}
.studio-journey-steps li::before{position:absolute;top:-37px;left:0;width:13px;height:13px;border:3px solid #fff;border-radius:50%;background:#7895b9;box-shadow:0 0 0 1px #b6c8dd;content:""}
.studio-journey-steps li>span,.studio-status-kicker{color:#5e7ea5;font:700 .68rem var(--mono);letter-spacing:.11em}
.studio-journey-steps h3{margin:16px 0 10px;color:#1d1d1f;font-size:clamp(1.3rem,1.8vw,1.8rem);line-height:1.2;letter-spacing:-.035em}
.studio-journey-steps p{margin:0;color:#69717d;line-height:1.65}
.studio-boundary{padding:clamp(90px,10vw,150px) 24px;background:linear-gradient(155deg,#f5f8fc,#fff 68%)!important}
.studio-boundary-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(40px,7vw,120px);width:min(1180px,100%);margin:auto}
.studio-boundary-copy>a{display:inline-flex;gap:12px;margin-top:25px;color:#3f638e;font-weight:650;text-decoration:none;border-bottom:1px solid #a6bad4;padding-bottom:6px}
.studio-boundary-copy>a:hover{color:#213e60}
.studio-boundary-map{display:grid;gap:0;padding:clamp(25px,4vw,46px);border:1px solid #dfe6ee;border-radius:30px;background:#fff;box-shadow:0 22px 64px rgba(46,73,105,.07)}
.studio-boundary-lane{display:grid;gap:10px;padding:24px 26px;border:1px solid #e2e8f0;border-radius:19px;background:#f9fbfe}
.studio-boundary-lane:last-child{background:#eef4fb;border-color:#d8e4f1}
.studio-boundary-lane small{color:#6583a7;font:700 .65rem var(--mono);letter-spacing:.14em}
.studio-boundary-lane strong{color:#1d2632;font-size:clamp(1.6rem,2.2vw,2.4rem);letter-spacing:-.05em}
.studio-boundary-lane span{color:#616f7f;font-size:.9rem;line-height:1.5}
.studio-boundary-divider{display:grid;place-items:center;height:54px}
.studio-boundary-divider span{height:38px;border-left:1px solid #b9cadf}
.studio-status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,3vw,38px)}
.studio-status-grid article{padding:clamp(28px,4vw,50px);border:1px solid #e0e7ef;border-radius:28px;background:#fbfcfe}
.studio-status-grid article:nth-child(2){background:#fff}
.studio-status-grid h3{margin:15px 0 22px;color:#1d1d1f;font-size:clamp(1.8rem,3vw,3rem);letter-spacing:-.055em}
.studio-status-grid ul{display:grid;gap:15px;margin:0;padding:0;list-style:none}
.studio-status-grid li{position:relative;padding-left:23px;color:#5d6672;line-height:1.55}
.studio-status-grid li::before{position:absolute;top:.65em;left:0;width:7px;height:7px;border-radius:50%;background:#7a9ac0;content:""}
.studio-status-note{max-width:75ch;margin:28px 0 0;color:#7a8491;font-size:.82rem;line-height:1.6}
@media(max-width:900px){.studio-journey-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}.studio-boundary-inner{grid-template-columns:1fr}.studio-boundary-map{max-width:680px}.studio-status-grid{grid-template-columns:1fr}}
@media(max-width:600px){.studio-journey,.studio-status{padding-block:75px!important}.studio-journey-head h2,.studio-status-head h2,.studio-boundary h2{font-size:clamp(2.7rem,12vw,4rem)}.studio-journey-steps{grid-template-columns:1fr;gap:20px;padding-top:8px;border-top:0;border-left:1px solid #dce3eb}.studio-journey-steps li{padding:0 0 24px 27px}.studio-journey-steps li::before{top:6px;left:-7px}.studio-boundary{padding:75px 16px}.studio-boundary-map{padding:16px;border-radius:22px}.studio-boundary-lane{padding:20px}}

/* A quiet chapter map gives the homepage a clear route without autoplay. */
.home-tour{padding:clamp(42px,5vw,80px) 24px!important;background:#fff!important}
.home-tour-inner{display:grid;grid-template-columns:minmax(220px,.85fr) minmax(0,2fr);gap:clamp(30px,5vw,80px);align-items:end}
.home-tour-lead .eyebrow{margin-bottom:17px;color:#547497}
.home-tour-lead>p:last-child{max-width:31ch;margin:0;color:#303a47;font-size:clamp(1.2rem,1.75vw,1.75rem);font-weight:570;line-height:1.42;letter-spacing:-.035em}
.home-tour-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #dce4ed}
.home-tour-steps a{position:relative;display:flex;flex-direction:column;min-width:0;min-height:126px;gap:9px;padding:25px 15px 14px 0;color:#1d2630;text-decoration:none}
.home-tour-steps a::before{position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:#7da6d0;content:""}
.home-tour-steps span{color:#6382a4;font:700 .7rem var(--mono);letter-spacing:.08em}
.home-tour-steps strong{font-size:clamp(.9rem,1.12vw,1.08rem);line-height:1.2;letter-spacing:-.02em}
.home-tour-steps small{color:#7c8692;font-size:.78rem;line-height:1.35}
.home-tour-steps a:hover strong,.home-tour-steps a:focus-visible strong{color:#3f6b9c}
.home-tour-steps a:focus-visible{outline:2px solid #76a4d5;outline-offset:4px}
@media(max-width:900px){.home-tour-inner{grid-template-columns:1fr}.home-tour-lead>p:last-child{max-width:48ch}}
@media(max-width:600px){.home-tour{padding:52px 20px!important}.home-tour-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:8px}.home-tour-steps a{min-height:105px}.home-tour-steps a:nth-child(n+3){border-top:1px solid #dce4ed}.home-tour-steps a:nth-child(n+3)::before{top:-4px}}

.home-next{display:inline-grid!important;grid-template-columns:1fr auto;align-items:center;column-gap:20px;row-gap:6px;width:max-content;max-width:100%;margin-top:30px!important;padding:16px 0 10px!important;border:0!important;border-top:1px solid #cbd9e7!important;color:#305b88!important;text-decoration:none!important;background:transparent!important;box-shadow:none!important}
.home-next span{grid-column:1;align-self:end;color:#7290af;font:700 .63rem var(--mono);letter-spacing:.14em}
.home-next strong{grid-column:1;align-self:start;font-size:1rem;letter-spacing:-.02em}
.home-next b{grid-column:2;grid-row:1/3;align-self:center;font-size:1.5rem;font-weight:400;line-height:1}
.home-next:hover strong,.home-next:focus-visible strong{text-decoration:underline;text-underline-offset:4px}
.home-next:focus-visible{outline:2px solid #76a4d5;outline-offset:4px}
.home-origin-copy>.home-next--inline{display:grid!important;margin-top:30px!important}

/* Keep the added destinations in the header at desktop widths; the same links remain in Resources on mobile. */
@media(max-width:900px){.sakura-site .nav-actions :is(.nav-action--updates,.nav-action--source){display:none}}
@media(max-width:460px){.sakura-site .nav-actions .nav-action--download{display:none}}

/* Yana navigation: one visual system for desktop, touch, and search. */
.sakura-site .site-nav {
  --nav-bg-alpha: .1;
  --nav-border-alpha: .06;
  --nav-shadow-alpha: 0;
  --nav-blur: 3px;
  position: sticky;
  z-index: 100;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 20px;
  min-height: 70px;
  border-color: rgba(100,130,163,var(--nav-border-alpha))!important;
  background: rgba(255,255,255,var(--nav-bg-alpha))!important;
  box-shadow: 0 10px 35px rgba(43,69,99,var(--nav-shadow-alpha))!important;
  -webkit-backdrop-filter: blur(var(--nav-blur)) saturate(135%);
  backdrop-filter: blur(var(--nav-blur)) saturate(135%);
}
.sakura-site .site-nav:empty { visibility:hidden; }
.sakura-site .nav-links { min-width:0; gap:3px; }
.sakura-site .global-nav-group { position:relative; }
.sakura-site .global-nav-group>summary,
.sakura-site .nav-links>.nav-about {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 11px; border-radius:12px;
  color:#283747; font-size:.84rem; white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.sakura-site .global-nav-group.is-active-page>summary { font-weight:680; background:rgba(218,232,246,.29); }
.sakura-site .global-nav-group.is-active-page>summary::before { content:""; width:5px; height:5px; margin-right:7px; border-radius:50%; background:#7698bb; }
.sakura-site .global-nav-group>summary:focus-visible,
.sakura-site .nav-links a:focus-visible,
.sakura-site .nav-actions :is(a,button,summary):focus-visible,
.sakura-site .nav-mobile-actions summary:focus-visible,
.yana-command-panel :is(input,button,a):focus-visible { outline:2px solid #7198c1; outline-offset:3px; box-shadow:0 0 0 5px rgba(114,153,193,.15); }
@media(min-width:1381px) {
  .sakura-site .global-nav-group { position:static; }
  .sakura-site .global-mega-panel {
    position:absolute!important; top:100%!important;
    left:0!important; right:0!important; z-index:200;
    display:grid!important; grid-template-columns:minmax(200px,.8fr) minmax(0,2fr)!important; gap:36px!important;
    width:100%!important; max-width:none!important;
    padding:28px max(36px,calc((100vw - 1120px)/2)) 32px!important;
    border:1px solid rgba(119,149,181,.23)!important; border-top:0!important;
    border-radius:0 0 22px 22px!important; background:rgba(252,253,255,.96)!important;
    box-shadow:0 25px 70px rgba(50,76,108,.12)!important;
    transform:none!important;
    -webkit-backdrop-filter:blur(24px) saturate(135%);
    backdrop-filter:blur(24px) saturate(135%);
    animation:yana-nav-open .27s cubic-bezier(.18,.85,.28,1) both;
  }
  .sakura-site .global-mega-intro { display:block; }
  .sakura-site .global-mega-column { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@keyframes yana-nav-open { from{opacity:0;translate:0 -6px;scale:.985;filter:blur(2px)} to{opacity:1;translate:0 0;scale:1;filter:blur(0)} }
.sakura-site .global-mega-intro small { color:#6a87a7; font:.7rem var(--mono); letter-spacing:.12em; }
.sakura-site .global-mega-intro h3 { max-width:none; margin:5px 0 0; color:#1e2b38; font-size:1.24rem; line-height:1.2; letter-spacing:-.035em; }
.sakura-site .global-mega-column { gap:4px; }
.sakura-site .global-mega-link { display:grid; grid-template-columns:25px minmax(0,1fr); align-items:start; gap:9px; min-height:58px; padding:10px; border-radius:13px; transition:background .18s ease,transform .18s ease; }
.sakura-site .global-mega-link:hover,.sakura-site .global-mega-link:focus-visible,.sakura-site .global-mega-link.is-current { background:rgba(213,228,244,.5); transform:translateX(2px); }
.nav-link-icon { display:grid; place-items:center; width:23px; height:23px; border-radius:7px; color:#5e82aa; background:#edf4fc; font-size:.85rem; }
.sakura-site .global-mega-link strong { display:block; color:#24364a; font-size:.82rem; line-height:1.2; }
.sakura-site .global-mega-link small { display:block; margin-top:3px; color:#788696; font-size:.69rem; line-height:1.35; }
.external-indicator { font-size:.7em; color:#7894b3; }
.sakura-site .nav-actions { gap:7px; white-space:nowrap; }
.sakura-site .nav-actions>a:not(.liquid-button),
.sakura-site .nav-search-trigger,
.sakura-site .nav-language-menu>summary {
  display:inline-flex; align-items:center; justify-content:center; min-height:36px;
  padding:0 10px; border:1px solid rgba(135,156,179,.23); border-radius:999px;
  color:#344255; background:rgba(255,255,255,.66); font:600 .75rem var(--sans);
  text-decoration:none; box-shadow:none; transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.sakura-site .nav-actions>a:hover,.sakura-site .nav-search-trigger:hover,.sakura-site .nav-language-menu>summary:hover { background:#eef5fd; border-color:#bfd1e6; transform:translateY(-1px); }
.sakura-site .nav-search-trigger { gap:7px; cursor:pointer; }
.nav-search-trigger svg { width:15px; height:15px; }
.nav-search-trigger kbd { padding:2px 4px; border:1px solid #dbe5f0; border-radius:5px; color:#7a8ba1; background:#fff; font:600 .6rem var(--mono); }
.sakura-site .nav-actions>.nav-start { gap:9px; padding:0 16px; color:#fff; background:#496b92; border-color:#496b92; }
.sakura-site .nav-actions>.nav-start:hover { color:#fff; background:#365b84; }
.nav-start-arrow { font-size:1.05rem; }
.sakura-site .nav-mobile-actions { display:none; }
.sakura-site .nav-language-menu { position:relative; }
.sakura-site .nav-language-menu>summary { min-width:42px; padding:0 10px; list-style:none; cursor:pointer; }
.sakura-site .nav-language-menu>summary::-webkit-details-marker { display:none; }
.sakura-site .nav-language-panel { position:absolute; top:calc(100% + 10px); right:0; z-index:210; display:grid; gap:3px; width:190px; padding:10px; border:1px solid #d9e4f0; border-radius:17px; background:rgba(252,253,255,.96); box-shadow:0 18px 50px rgba(37,65,97,.14); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); animation:yana-nav-open .2s ease both; }
.sakura-site .nav-language-panel>small { padding:5px 8px; color:#8699ad; font:700 .62rem var(--mono); letter-spacing:.12em; }
.sakura-site .nav-language-panel>a,.sakura-site .nav-language-panel>.is-unavailable { display:block; padding:9px 10px; border-radius:9px; color:#324761; font-size:.8rem; text-decoration:none; }
.sakura-site .nav-language-panel>a:hover,.sakura-site .nav-language-panel>a[aria-current] { background:#eaf2fb; }
.sakura-site .nav-language-panel>.is-unavailable { color:#9aabbc; cursor:not-allowed; }
.sakura-site .nav-language-panel>.is-unavailable small { display:block; font-size:.65rem; }
.nav-scrim { z-index:90; }
.yana-command-shell[hidden] { display:none!important; }
.yana-command-shell { position:fixed; inset:0; z-index:500; display:grid; place-items:start center; padding:clamp(55px,11vh,130px) 16px 20px; }
.yana-command-backdrop { position:absolute; inset:0; background:rgba(31,44,61,.27); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.yana-command-panel { position:relative; width:min(620px,100%); max-height:min(670px,calc(100vh - 85px)); display:flex; flex-direction:column; border:1px solid rgba(129,156,185,.3); border-radius:24px; background:rgba(252,253,255,.97); box-shadow:0 32px 100px rgba(27,49,77,.22); overflow:hidden; animation:yana-nav-open .28s cubic-bezier(.18,.85,.28,1) both; }
.yana-command-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px 9px; color:#314964; font-size:.76rem; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.yana-command-close { padding:5px 8px; border:1px solid #dce5ef; border-radius:8px; color:#697d94; background:#f8fbfe; font:.7rem var(--mono); cursor:pointer; }
.yana-command-field { display:flex; align-items:center; gap:12px; margin:0 17px; padding:8px 13px; border:1px solid #dce6f0; border-radius:13px; background:#fff; }
.yana-command-field>span { color:#6c89a9; font-size:1.6rem; }
.yana-command-field input { width:100%; height:36px; border:0; outline:0; color:#243548; background:transparent; font:500 1rem var(--sans); }
.yana-command-results { min-height:70px; overflow:auto; padding:10px 12px 14px; }
.yana-command-category { padding:14px 12px 6px; color:#8a9aad; font:700 .62rem var(--mono); letter-spacing:.13em; text-transform:uppercase; }
.yana-command-result { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:11px 13px; border-radius:12px; color:#23354a; text-decoration:none; }
.yana-command-result.is-active,.yana-command-result:hover { background:#eaf2fb; }
.yana-command-result strong { display:block; font-size:.88rem; }
.yana-command-result small { display:block; margin-top:2px; color:#75869a; font-size:.73rem; }
.yana-command-result>span:last-child { color:#7697ba; }
.yana-command-empty { display:grid; gap:5px; padding:18px 12px; color:#697b8e; font-size:.84rem; }
.yana-command-empty strong { color:#354d67; }
.yana-command-suggestion { display:block; margin:2px 8px; padding:9px 12px; border-radius:9px; color:#45678d; background:#f2f7fc; text-decoration:none; font-size:.8rem; }
.yana-command-help { margin:0; padding:11px 20px; border-top:1px solid #e8edf3; color:#8a97a6; font:.68rem var(--mono); }
.yana-navigation-open .yana-brand-hero__canvas,.yana-search-open .yana-brand-hero__canvas { pointer-events:none!important; }
.yana-navigation-open .yana-intro,.yana-search-open .yana-intro { cursor:default; }
@media(max-width:1380px) {
  .sakura-site .site-nav { grid-template-columns:1fr auto auto; gap:12px; padding-inline:16px; }
  .sakura-site .menu-knob { display:grid; place-items:center; grid-column:3; grid-row:1; justify-self:end; }
  .sakura-site .nav-actions { grid-column:2; grid-row:1; justify-self:end; }
  .sakura-site .nav-links { position:absolute; top:calc(100% + 9px); left:12px; right:12px; display:none; flex-direction:column; align-items:stretch; gap:2px; max-width:680px; max-height:calc(100dvh - 96px); overflow:auto; margin-left:auto; padding:15px; border:1px solid #d7e2ee; border-radius:23px; background:rgba(252,253,255,.97); box-shadow:0 24px 70px rgba(43,69,99,.17); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
  .sakura-site.yana-navigation-open .site-nav { z-index:600; }
  .sakura-site .nav-links.open { display:flex; }
  .sakura-site .global-nav-group { width:100%; }
  .sakura-site .global-nav-group>summary,.sakura-site .nav-links>.nav-about { width:100%; min-height:43px; justify-content:space-between; padding:0 13px; }
  .sakura-site .global-mega-panel { position:static!important; display:block!important; width:100%!important; max-width:none!important; margin:3px 0 8px; padding:14px!important; border:1px solid #e5ecf3!important; border-radius:16px!important; background:#f7faff!important; box-shadow:none!important; transform:none!important; animation:none!important; }
  .sakura-site .global-mega-intro { display:none; }
  .sakura-site .global-mega-column { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sakura-site .nav-links.is-nested>:not(.global-nav-group[open]) { display:none!important; }
  .sakura-site .nav-links.is-nested .global-nav-group[open]>summary { justify-content:flex-start; gap:6px; font-weight:700; }
  .sakura-site .nav-links.is-nested .global-nav-group[open]>summary::before { content:"←"; width:auto; height:auto; margin-right:2px; border-radius:0; background:none; font-size:1.05rem; }
  .sakura-site .nav-links.is-nested .global-nav-group[open]>summary::after { display:none; }
  .sakura-site .nav-mobile-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:7px; padding-top:12px; border-top:1px solid #e6edf4; }
  .sakura-site .nav-mobile-actions>a,.sakura-site .mobile-language-group>summary { display:block; min-height:38px; padding:10px 12px; border-radius:10px; color:#496686; background:#f2f7fc; font-size:.8rem; text-decoration:none; }
  .sakura-site .mobile-language-group>summary { cursor:pointer; list-style:none; }
  .sakura-site .mobile-language-group { grid-column:1/-1; }
  .sakura-site .mobile-language-group>div { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:8px 0; }
  .sakura-site .mobile-language-group>div>* { padding:9px; border-radius:8px; color:#496686; background:#f6f9fd; font-size:.75rem; text-decoration:none; }
  .sakura-site .mobile-language-group>div>[aria-disabled] { color:#9aabbc; }
  .sakura-site .nav-actions>:not(.nav-search-trigger):not(.nav-language-menu) { display:none!important; }
  .sakura-site .nav-search-trigger kbd { display:none; }
  .yana-navigation-open .yana-intro { filter:blur(2px) brightness(.95); }
}
@media(max-width:600px) {
  .sakura-site .site-nav { min-height:62px; grid-template-columns:auto 1fr auto; gap:8px; padding-inline:12px; }
  .sakura-site .site-nav .brand span { display:inline!important; }
  .sakura-site .brand { font-size:1.24rem; }
  .sakura-site .brand img.brand-mark { width:27px; height:27px; }
  .sakura-site .nav-actions { grid-column:2; justify-self:end; }
  .sakura-site .nav-actions>.nav-language-menu { display:none; }
  .sakura-site .nav-search-trigger { width:38px; min-height:38px; padding:0; }
  .sakura-site .nav-search-trigger span { display:none; }
  .sakura-site .menu-knob { grid-column:3; }
  .sakura-site .nav-links { left:8px; right:8px; max-height:calc(100dvh - 78px); }
  .sakura-site .global-mega-column { grid-template-columns:1fr; }
  .sakura-site .global-mega-link { min-height:51px; }
  .yana-command-shell { padding-top:55px; }
  .yana-command-panel { max-height:calc(100dvh - 70px); }
}
@media(prefers-reduced-motion:reduce) {
  .sakura-site .site-nav,.sakura-site .global-mega-panel,.sakura-site .nav-language-panel,.yana-command-panel { animation:none!important; transition:none!important; }
  .yana-navigation-open .yana-intro { filter:none; }
}

/* Pause looping animations in scenes scrolled out of view (class set by yana-motion.js). */
.yana-offscreen,.yana-offscreen *,.yana-offscreen *::before,.yana-offscreen *::after{animation-play-state:paused!important}

/* Keep Korean words together while allowing long identifiers to fit narrow screens. */
html[lang="ko"] { word-break:keep-all; }
html[lang="ko"] .sakura-site :is(h1,h2,h3,p,li,a,button,summary,figcaption) { overflow-wrap:break-word; }