/* 教程弹窗 v4：恢复原版紧凑方形媒体区，不再固定占屏高 86%。 */
.tutorial-modal-back[hidden] { display:none!important; }
.tutorial-modal-back:disabled {pointer-events:none;}
.tutorial-modal-header { flex-shrink:0; }
.tutorial-modal-close { cursor:pointer; }

.tutorial-modal-card.has-web-tutorial {
    width:100%;
    max-width:390px;
    height:auto;
    max-height:calc(100vh - 36px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    max-height:calc(100dvh - 36px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
}
.tutorial-modal-card.has-web-tutorial .tutorial-modal-body {
    display:block;
    flex:0 1 auto;
    min-height:0;
    overflow:auto;
    padding:10px;
    -webkit-overflow-scrolling:touch;
}
.tutorial-media.is-web-page {
    --tutorial-embed-nav-height:46px;
    position:relative;
    flex:none;
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
    min-width:0;
    min-height:0;
    overflow:hidden;
    border-radius:12px;
    border:1px solid #e8eef7;
    background:#fff;
    box-sizing:border-box;
}
.tutorial-media.is-web-page iframe {
    position:absolute;
    top:calc(0px - var(--tutorial-embed-nav-height));
    left:0;
    width:100%;
    height:calc(100% + var(--tutorial-embed-nav-height));
    border:0;
    background:#fff;
    object-fit:fill;
}
@media(max-width:390px) {
    .tutorial-modal-card.has-web-tutorial .tutorial-modal-body{padding:9px;}
}
@media (max-height:480px) and (orientation:landscape) {
    .tutorial-modal-card.has-web-tutorial .tutorial-modal-body{overflow:auto;}
}