.dy-scene{--dy-pad: clamp(18px, 3.6vh, 46px);--dy-beat-travel: clamp(150px, 20vh, 230px);--dy-teach-travel: clamp(510px, 76vh, 900px)}.dy-scene{overflow:clip}[data-dy=on] .dy-scene{height:calc(var(--vx-pane) + var(--dy-beats) * var(--dy-beat-travel) + var(--dy-teach-travel))}.dy-stage{display:grid;grid-template-areas:"copy device";grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-rows:minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,96px);width:min(1320px,calc(100% - 40px));margin:0 auto;padding:var(--dy-pad) 0}[data-dy=on] .dy-stage{position:sticky;top:var(--vx-hdr);height:var(--vx-pane)}.dy-scene[data-side=device-first] .dy-stage{grid-template-areas:"device copy";grid-template-columns:minmax(0,6fr) minmax(0,5fr)}.dy-scene--wide .dy-stage{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}.dy-copy{grid-area:copy;min-width:0}[data-dy=on] [data-beat]:not([data-shown]){display:none}[data-dy=on] [data-beat][data-shown]{animation:dy-arrive .42s var(--ease) both}[data-dy=on] :is(.dy-thread,.dy-app-thread,.dy-app-answer,.dy-mail-msg,.dy-mail-list,.dy-pair)>[data-beat][data-shown]{animation:none}[data-dy=on] .dy-teach{opacity:0;translate:0 14px;pointer-events:none;transition:opacity .42s var(--ease),translate .42s var(--ease)}[data-dy=on] .dy-teach[data-shown],[data-dy=on] .dy-teach:focus-within{opacity:1;translate:0 0;pointer-events:auto}.dy-device{display:grid;grid-area:device;place-items:center;width:100%;min-width:0;height:100%;min-height:0}[data-dy=on] .dy-device{container-type:size}.dy-phone{margin:0;aspect-ratio:.485;container-type:inline-size}[data-dy=on] .dy-device>.dy-phone{height:min(100cqh,206cqw,780px)}.dy-mail,.dy-app{width:100%;margin:0}.dy-mail{max-width:640px}.dy-app{max-width:900px}[data-dy=on] .dy-device>.dy-mail{height:min(100cqh,650px)}[data-dy=on] .dy-device>.dy-app{height:min(100cqh,700px)}.dy-pair{position:relative;display:flex;align-items:center;justify-content:center}.dy-pair>.dy-phone{flex:none}[data-dy=on] .dy-pair>.dy-phone{height:min(100cqh,130cqw,780px)}.dy-pair>.dy-sheet{position:relative;z-index:2;flex:none;margin-left:-34px}.dy-pair--book{justify-content:flex-start}[data-dy=on] .dy-pair>.dy-book{position:absolute;top:calc((100cqh - min(100cqh,130cqw,780px))/2 + min(100cqh,130cqw,780px)*.09);left:calc(min(100cqh,130cqw,780px)*.485 - (min(440px,74cqw)/2) - 20px);z-index:2;width:min(440px,74cqw)}html:not([data-dy=on]) .dy-stage{padding:clamp(56px,10vh,120px) 0}html:not([data-dy=on]) .dy-phone{width:min(390px,100%);aspect-ratio:auto}html:not([data-dy=on]) .dy-pair{flex-direction:column;gap:24px}html:not([data-dy=on]) .dy-pair>.dy-sheet{margin:0}html:not([data-dy]) .dy-scene[data-tone=night]{background:linear-gradient(180deg,#2c3752,#111726 45%,#0c111e)}@keyframes dy-arrive{0%{opacity:0;translate:0 10px}}