.live2d-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:2}
.live2d-fallback{display:none;position:absolute;z-index:2;right:10%;top:18%;width:min(40vw,550px);height:auto;border-radius:50%;box-shadow:0 15px 70px #aec1d52e}
.viewport[data-character="unavailable"] .live2d-canvas{display:none}
.viewport[data-character="unavailable"] .live2d-fallback{display:block}
.journey #world{touch-action:pan-y pinch-zoom}
.journey .loading{transition:opacity .25s,visibility .25s}
@media(prefers-reduced-motion:reduce){.live2d-canvas{filter:none!important;translate:none!important}}

/* The small viewport unit keeps browser chrome from stretching the scene. */
.journey .viewport{min-height:0}
@media(max-width:1100px) and (max-aspect-ratio:6/5){
  body.attendme .journey,body.future-home .journey{height:380svh}
  body.attendme .viewport{height:100svh;min-height:var(--minimum-stage,0px);top:min(0px,calc(100svh - var(--minimum-stage,0px)))}
  body.future-home .journey .viewport{height:calc(100svh - var(--nav-height));min-height:var(--minimum-stage,0px);top:min(var(--nav-height),calc(100svh - var(--minimum-stage,0px)))}
  body.attendme .viewport .chapter-copy,body.attendme .viewport[data-chapter] .chapter-copy,
  body.future-home .journey .viewport .hero-copy{left:24px;right:24px;top:88px;width:auto;max-width:none;pointer-events:none}
  body.future-home .journey .viewport .hero-copy{top:20px}
  body.attendme .viewport .chapter-copy h1,body.attendme .viewport[data-chapter] h1,
  body.future-home .journey .viewport .hero-title{font-size:clamp(1.5rem,6.8vw,2.25rem);line-height:1.45!important;letter-spacing:-.04em!important;margin:0 0 12px}
  body.attendme .viewport .chapter-en,body.attendme .viewport[data-chapter] .chapter-en,
  body.future-home .journey .hero-tag{font-size:.875rem!important;line-height:1.65;margin:0 0 10px}
  body.attendme .viewport .chapter-description,body.attendme .viewport[data-chapter] .chapter-description{font-size:.9375rem;line-height:1.8;letter-spacing:0;margin:0 0 14px;max-width:none}
  body.attendme .viewport .chapter-description br{display:none}
  body.attendme .viewport .main-cta,body.attendme .viewport[data-chapter] .main-cta{width:min(240px,100%);height:auto;min-height:48px;padding:10px 22px}
  body.attendme .viewport .main-cta span{font-size:.9375rem;letter-spacing:0}
  body.attendme .viewport .hero-detail,body.attendme .viewport[data-chapter] .hero-detail{font-size:.875rem;min-height:44px;margin-top:4px;padding-block:8px}
  body.attendme .viewport .chapter-kicker,body.attendme .viewport .system-log,body.attendme .viewport .scene-quote,
  body.future-home .journey .hero-badge{display:none}
  body.future-home .journey .hero-sub{font-size:1rem;line-height:1.8;margin-bottom:10px}
  body.future-home .journey .hero-lead{font-size:.9375rem!important;line-height:1.85!important;margin:0}
  body.future-home .journey .hero-ctas{gap:8px;margin-top:16px;flex-wrap:wrap}
  body.future-home .journey .hero-ctas .btn{font-size:.875rem!important;min-height:48px;padding:10px 16px;gap:8px;max-width:100%}
  .journey .live2d-fallback{width:min(52vw,320px);right:24%;top:auto;bottom:20px}
  .journey .fallback-notice{inset:auto 16px 16px!important;max-height:60%;overflow:auto;padding:20px}
  .journey .character-speech{max-width:min(230px,calc(100% - 32px));font-size:.9375rem;line-height:1.6;padding:10px 16px}
}
/* Landscape: copy on the left, character on the right, no offscreen minimum. */
@media(max-width:1100px) and (max-height:560px) and (min-aspect-ratio:6/5){
  body.attendme .viewport{height:100svh;min-height:0;top:0}
  body.future-home .journey .viewport{height:calc(100svh - var(--nav-height));min-height:0;top:var(--nav-height)}
  body.attendme .viewport .chapter-copy,body.attendme .viewport[data-chapter] .chapter-copy,
  body.future-home .journey .viewport .hero-copy{top:76px;left:max(20px,env(safe-area-inset-left));width:43%;max-width:none;max-height:calc(100% - 84px);overflow-y:auto;padding-right:8px;pointer-events:auto;scrollbar-width:thin}
  body.future-home .journey .viewport .hero-copy{top:12px;max-height:calc(100% - 24px)}
  body.attendme .viewport .chapter-copy h1,body.attendme .viewport[data-chapter] h1,
  body.future-home .journey .viewport .hero-title{font-size:clamp(1.375rem,3.5vw,1.875rem);line-height:1.4!important;margin:0 0 10px}
  body.attendme .viewport .chapter-description,body.attendme .viewport[data-chapter] .chapter-description{font-size:.875rem;line-height:1.7;margin:0 0 12px;letter-spacing:0}
  body.attendme .viewport .chapter-en,body.attendme .viewport[data-chapter] .chapter-en{font-size:.875rem;margin:0 0 8px}
  body.attendme .viewport .main-cta,body.attendme .viewport[data-chapter] .main-cta{width:min(240px,100%);height:auto;min-height:44px;padding:8px 18px}
  body.attendme .viewport .main-cta span{font-size:.875rem;letter-spacing:0}
  body.attendme .viewport .hero-detail{min-height:44px;margin-top:2px;font-size:.875rem}
  body.attendme .viewport .chapter-kicker,body.attendme .viewport .system-log,body.attendme .viewport .scene-quote,
  body.future-home .journey .hero-badge{display:none}
  body.future-home .journey .hero-tag{margin-bottom:10px;font-size:.8125rem!important}
  body.future-home .journey .hero-sub,body.future-home .journey .hero-lead{font-size:.9375rem!important;line-height:1.75!important}
  body.future-home .journey .hero-ctas{margin-top:12px;gap:8px}
  .journey .live2d-fallback{width:28%;right:10%;top:20%;bottom:auto}
}
@media(max-width:760px){
  body.attendme .header{height:68px;padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right));gap:8px}
  body.attendme .brand img{width:80px;height:48px}
  body.attendme .header-right{gap:8px}
  body.attendme .directory-shortcut{min-width:44px;min-height:44px;gap:6px;padding:6px;font-size:.875rem}
  body.attendme .header-contact{min-height:44px;font-size:.8125rem;padding:8px 12px;gap:8px;white-space:nowrap}
  body.attendme .header-nav{display:none}
  body.attendme .site-menu{padding:20px;max-height:calc(100svh - 32px - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain}
  body.attendme .menu-heading{gap:12px;margin-bottom:12px}
  body.attendme .menu-links{gap:0 20px}
  body.attendme .menu-links a{min-height:48px;overflow-wrap:anywhere}
  body.attendme .content-nav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:12px 20px;gap:22px}
  body.attendme .content-nav a{flex:none;white-space:nowrap;min-height:44px}
  body.attendme .site-content :is(article,section,.section-heading,.about-intro,.company-profile,.service-list){min-width:0}
  body.attendme .site-content :is(p,dd,a){overflow-wrap:anywhere}
  body.attendme .company-profile>div{grid-template-columns:76px minmax(0,1fr);gap:12px}
  body.attendme .company-profile dd{margin:0}
  body.attendme .section-actions{align-items:stretch}
  body.attendme .solid-link{max-width:100%;gap:16px}
  body.attendme .company-footer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
}
@media(max-width:380px){
  body.attendme .viewport .chapter-copy,body.attendme .viewport[data-chapter] .chapter-copy,body.future-home .journey .viewport .hero-copy{left:16px;right:16px}
  body.attendme .menu-links{grid-template-columns:minmax(0,1fr)}
  body.attendme .header-contact span{display:none}
}
@media(hover:none){.journey .film-grain{display:none}.journey :is(.main-cta,.hero-ctas a):hover{transform:none!important}}

/* The first character is a render of the same model, not a separate illustration. */
.journey .arrival{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:1;transition:opacity .36s ease,visibility .36s}
.journey .arrival-character{position:absolute;left:var(--poster-left,56%);top:var(--poster-top,1%);width:var(--poster-width,37%);height:var(--poster-height,100%);--poster-cut:100%;--poster-opacity:1;--poster-hologram:0}
.journey .arrival-surface{position:absolute;inset:0;opacity:var(--poster-opacity);mask-image:linear-gradient(to bottom,transparent calc(var(--poster-cut) - 2%),#000 calc(var(--poster-cut) + 2%));filter:saturate(calc(1 - var(--poster-hologram)*.45)) brightness(calc(1 + var(--poster-hologram)*.13))}
.journey .arrival-poster{display:block;width:100%;height:100%;max-width:none;object-fit:fill}
.journey .arrival-data{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 7px,#63d6ed44 8px 9px,transparent 10px 14px);mask:url('/assets/live2d/model/arrival-closed-20260909.webp') center/100% 100% no-repeat;mix-blend-mode:screen;opacity:.4;animation:arrival-data-settle 2.2s ease-out both}
.journey .arrival-ring{position:absolute;left:12%;top:94%;width:76%;height:13%;border:1px solid #81c9dd66;border-radius:50%;transform:translateY(-50%);box-shadow:0 0 32px #89deed30,inset 0 0 24px #c4e6fd44}
.journey .arrival-ring::before,.journey .arrival-ring::after{content:"";position:absolute;inset:-18%;border:1px dashed #5eb6d375;border-radius:50%;animation:arrival-ring-breathe 3.2s ease-in-out infinite}
.journey .arrival-ring::after{inset:15%;border-style:solid;border-color:#e196c86b;animation-delay:-1.6s}
.journey .arrival-line{position:absolute;top:12%;bottom:12%;left:50%;width:1px;opacity:.45;background:linear-gradient(transparent,#a0dce7,transparent);transform:scaleY(0);animation:arrival-line-collect 2.2s ease-out both}
.journey .arrival-fragments{position:absolute;inset:-5% -12%;overflow:hidden}
.journey .arrival-fragments i{position:absolute;top:calc(12% + var(--i)*10%);left:calc(8% + var(--side)*84%);width:14px;height:2px;background:linear-gradient(90deg,transparent,#73cfe4);opacity:0;animation:arrival-fragment 3.6s ease-in-out calc(var(--i)*-.42s) infinite}
.journey .arrival-fragments i:nth-child(2n){background:linear-gradient(90deg,#eba0cf,transparent)}
.journey .arrival-label{position:absolute;top:97%;left:0;width:100%;text-align:center;font:400 9px/1.2 'Segoe UI',sans-serif;letter-spacing:.22em;color:#517c90;opacity:.8}
.journey .arrival-label::after{content:"";display:inline-block;width:24px;height:1px;margin-left:8px;vertical-align:middle;background:#4cacc4;transform-origin:left;animation:arrival-link 2s ease-in-out infinite}
.viewport[data-entrance="poster"] .live2d-canvas,.viewport[data-entrance="failed"] .live2d-canvas{opacity:0!important}
.viewport[data-entrance="blending"] .live2d-canvas{transition:opacity .36s ease}
.viewport[data-entrance="blending"] .arrival,.viewport[data-entrance="live"] .arrival{opacity:0;visibility:hidden}
.viewport[data-entrance="live"] .arrival{display:none}
.viewport[data-entrance="failed"] .arrival-ring,.viewport[data-entrance="failed"] .arrival-fragments,.viewport[data-entrance="failed"] .arrival-label,.viewport[data-entrance="failed"] .arrival-data{display:none}
@keyframes arrival-data-settle{from{opacity:.8;transform:translateY(4px)}to{opacity:0;transform:none}}
@keyframes arrival-line-collect{0%{transform:scaleY(0)}35%{transform:scaleY(1)}100%{transform:scaleY(.65);opacity:0}}
@keyframes arrival-ring-breathe{0%,100%{transform:scale(.94);opacity:.35}50%{transform:scale(1.04);opacity:.8}}
@keyframes arrival-fragment{0%,100%{opacity:0;transform:translate(0,18px)}25%{opacity:.5}65%{opacity:0;transform:translate(calc((.5 - var(--side))*56px),-24px)}}
@keyframes arrival-link{0%,100%{transform:scaleX(.25);opacity:.35}50%{transform:scaleX(1);opacity:.8}}

/* This layer spans both the poster and the real model during the handoff. */
.journey .viewport :is(.arrival,.arrival-effects),.journey .viewport :is(.arrival,.arrival-effects) *,.journey .viewport :is(.arrival,.arrival-effects) ::before,.journey .viewport :is(.arrival,.arrival-effects) ::after{animation-play-state:var(--entrance-play-state,running)!important}
.journey .viewport:is([data-entrance="blending"],[data-entrance="live"])[data-entrance-interrupted] .arrival{display:none}
.journey .arrival-effects{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;contain:paint}
.journey .arrival-effects[hidden]{display:none}
.journey .arrival-effect-frame{position:absolute;left:var(--poster-left,56%);top:var(--poster-top,1%);width:var(--poster-width,37%);height:var(--poster-height,100%)}
.journey .arrival-contour,.journey .arrival-slices,.journey .arrival-transfer{position:absolute;inset:0;mask:url('/assets/live2d/model/arrival-closed-20260909.webp') center/100% 100% no-repeat}
.journey .arrival-contour{background:repeating-linear-gradient(0deg,transparent 0 16px,#89e7fc52 17px,#edb2dc42 18px,transparent 20px),linear-gradient(118deg,transparent 28%,#68d4ee45 40%,#f1ffff9c 49%,#eda6d253 58%,transparent 70%);mix-blend-mode:screen;animation:arrival-contour-breathe 2.8s ease-in-out infinite}
.journey .arrival-volume{position:absolute;inset:3% 4% 3%;opacity:.55;background:linear-gradient(90deg,transparent,#a5deed18 22%,#c6e9f320 50%,#edc7e823 78%,transparent);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);transform-origin:50% 100%;animation:arrival-volume-breathe 3.6s ease-in-out infinite}
.journey .arrival-rails{position:absolute;inset:4% -2% 5%;opacity:.65}
.journey .arrival-rails i{position:absolute;top:0;bottom:0;left:0;width:12px;border-top:1px solid #75cce8;border-bottom:1px solid #e8a5d4;background:repeating-linear-gradient(to bottom,#8ccfe082 0 1px,transparent 1px 24px) left top/3px 100% no-repeat;animation:arrival-rail-track 3.6s ease-in-out infinite}
.journey .arrival-rails i:last-child{left:auto;right:0;transform:scaleX(-1);animation-delay:-1.8s}
.journey .arrival-slices i{position:absolute;left:0;top:calc(7% + var(--slice)*7.1%);width:100%;height:2.2%;background:linear-gradient(90deg,transparent,#8ee6f28a 20%,#f3ffffb0 50%,#eab2db70 80%,transparent);opacity:0;animation:arrival-slice-drift 3.4s ease-in-out calc(var(--slice)*-.24s) infinite}
.journey .arrival-scan{position:absolute;inset:5% -7%;pointer-events:none}
.journey .arrival-scan::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,#89dcec 12%,#efffff 45%,#e6bbe0 88%,transparent);box-shadow:0 0 9px 2px #a9e6f360;animation:arrival-scan-pass 2.7s cubic-bezier(.4,0,.2,1) infinite}
.journey .arrival-scan::after{content:"";position:absolute;inset:-1% 3% 88%;background:linear-gradient(transparent,#9cdbed30,transparent);animation:arrival-scan-pass 2.7s cubic-bezier(.4,0,.2,1) infinite}
.journey .arrival-transfer::before{content:"";position:absolute;inset:-12% -50%;opacity:0;background:linear-gradient(113deg,transparent 34%,#b6eff774 45%,#fcffffd6 49%,#e7c2e994 54%,transparent 67%);transform:translateX(-85%)}
.journey .arrival-dust{position:absolute;inset:0 -7%}
.journey .arrival-dust i{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:3px;height:3px;opacity:0;background:#a5dfee;box-shadow:0 0 7px #a5dfee80;animation:arrival-dust-rise 3.2s ease-out calc(var(--n)*-.27s) infinite}
.journey .arrival-dust i:nth-child(3n){width:8px;height:1px;background:#e3add4}
.journey .arrival-effects[data-phase="settling"]{animation:arrival-effects-release 1.1s ease-out both}
.journey .arrival-effects[data-phase="settling"] .arrival-transfer::before{animation:arrival-transfer-pass .68s cubic-bezier(.2,.65,.25,1) both}
.journey .arrival-effects[data-phase="settling"] .arrival-contour{animation:arrival-contour-release .75s ease-out both}
.journey .arrival-effects[data-phase="settling"] .arrival-slices{animation:arrival-slices-release .6s ease-out both}
@keyframes arrival-contour-breathe{0%,100%{opacity:.18}50%{opacity:.55}}
@keyframes arrival-volume-breathe{0%,100%{opacity:.3;transform:scaleX(.92)}50%{opacity:.65;transform:scaleX(1.02)}}
@keyframes arrival-rail-track{0%,100%{opacity:.25;translate:0 -4px}50%{opacity:.7;translate:0 4px}}
@keyframes arrival-slice-drift{0%,20%,65%,100%{opacity:0;transform:translateX(-12px)}30%{opacity:.6;transform:translateX(-3px)}46%{opacity:.15;transform:translateX(8px)}}
@keyframes arrival-scan-pass{0%{opacity:0;transform:translateY(0)}12%,72%{opacity:.8}90%,100%{opacity:0;transform:translateY(calc(var(--poster-height,80vh)*.86))}}
@keyframes arrival-dust-rise{0%,100%{opacity:0;transform:translate(0,15px) scale(.6)}25%{opacity:.7}70%{opacity:0;transform:translate(calc((50 - var(--x))*.18px),-27px) scale(1)}}
@keyframes arrival-transfer-pass{0%{opacity:0;transform:translateX(-85%)}18%,48%{opacity:.85}100%{opacity:0;transform:translateX(70%)}}
@keyframes arrival-contour-release{0%{opacity:.45}25%{opacity:.65}100%{opacity:0}}
@keyframes arrival-slices-release{to{opacity:0;transform:translateY(-5px)}}
@keyframes arrival-effects-release{0%,40%{opacity:1}100%{opacity:0}}
@media(max-width:600px){.journey .arrival-slices i:nth-child(2n),.journey .arrival-dust i:nth-child(n+7){display:none}.journey .arrival-rails{inset-inline:2%}.journey .arrival-volume{opacity:.3}}
@media(prefers-reduced-motion:reduce){
 .journey .arrival-effects{display:none}
 .journey .arrival,.viewport[data-entrance="blending"] .live2d-canvas{transition:none}
 .journey .arrival *,.journey .arrival ::before,.journey .arrival ::after{animation:none!important}
 .journey .arrival-data,.journey .arrival-line,.journey .arrival-fragments,.journey .arrival-label::after{display:none}
 .journey .arrival-surface{filter:none;mask-image:none;opacity:1}
}