.text { transition: color .6s ease; }

.bgv { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: #F0F3F8 url("../assets/yrd-white-curtain-loop-1080p-poster.jpg") center / cover no-repeat; }   
.bgv video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bgv video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }

.cover { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

.sheet { position: fixed; inset: 0; z-index: 0; background: #FFFFFF; pointer-events: none; }

.split { position: fixed; inset: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); z-index: 1; display: grid; grid-template-columns: minmax(0, 0.41421356fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  overflow: clip; touch-action: pinch-zoom; }
.panel { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; }
.panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.text { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }

.stage { position: absolute; left: 0; top: 0; width: 1018px; height: 900px; transform-origin: 0 0; pointer-events: none; }
.lbl { position: absolute; transform: translate(-50%, -50%); font-size: var(--lf, 14px); line-height: var(--lh-body-sm); font-weight: 400; letter-spacing: var(--ls-body-sm); color: var(--label); white-space: nowrap;   
  opacity: 0; transition: opacity .45s ease; }
.panel[data-form="ring"] .lbl-ring, .panel[data-form="out"] .lbl-out { opacity: 1; transition: opacity .6s ease .5s; }

.sec { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.sec.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease .3s, visibility 0s; }
.txt { position: absolute; left: calc(var(--fx) + 96 * var(--u)); top: calc(50% + var(--hh) - 183 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--ut)); }   
.ln { display: block; white-space: nowrap; }
.t-title { font-family: var(--heading); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 500; letter-spacing: var(--ls-h3); }   
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; letter-spacing: var(--ls-body); }   

.hero { color: var(--hero-ink); }
.hero .txt { left: calc(var(--fx) + 80 * var(--u)); top: 50%; transform: translateY(-50%); gap: var(--sp-hero-lead); }   
.hero h1 { margin: 0; font-family: var(--heading); font-weight: 500; font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }   
.hero h1 .ln:first-child { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }   
.hero h1 .ln + .ln { margin-top: var(--sp-meta); }                                                                
.hero .lead { font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }   
.hero .ask { position: absolute; left: calc(var(--fx) + 908 * var(--u)); top: calc(50% + 75 * var(--u)); transform: translateY(-50%); display: flex; align-items: center; gap: var(--sp-column-gap); margin: 0; }   
.hero .ask.is-off { display: none !important; }   
.hero .ask-l { font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: #1A1A1A; white-space: nowrap; }   
.hero .ask-i { display: flex; gap: var(--sp-column-gap); }
.hero .ai { display: block; width: calc(32 * var(--ut)); height: calc(32 * var(--ut)); padding: 0; border: 0; background: transparent; cursor: pointer; transition: opacity .2s ease; }
.hero .ai svg { display: block; width: 100%; height: 100%; }
.hero .ai:hover { opacity: .7; }
.hero .ai:focus-visible { outline: 2px solid #93DCE6; outline-offset: 4px; border-radius: 50%; }