.story-page #story_tutorial[hidden], .story-page #story_tutorial [hidden] { display: none !important; }
.story-page #story_tutorial { --spot-top: 0px; --spot-left: 0px; --spot-right: 0px; --spot-bottom: 0px; }
.story-page .tutorial-shade { position: fixed; z-index: 3000; background: transparent; touch-action: none; }
.story-page .tutorial-shade-top { inset: 0 0 auto; height: var(--spot-top); }
.story-page .tutorial-shade-bottom { inset: var(--spot-bottom) 0 0; }
.story-page .tutorial-shade-left { top: var(--spot-top); bottom: calc(100% - var(--spot-bottom)); left: 0; width: var(--spot-left); }
.story-page .tutorial-shade-right { top: var(--spot-top); bottom: calc(100% - var(--spot-bottom)); left: var(--spot-right); right: 0; }
.story-page .tutorial-spotlight { position: fixed; z-index: 3001; top: var(--spot-top); left: var(--spot-left); width: calc(var(--spot-right) - var(--spot-left)); height: calc(var(--spot-bottom) - var(--spot-top)); border: 0; border-radius: 12px; box-shadow: 0 0 0 100vmax #101810c9; pointer-events: none; box-sizing: border-box; }
.story-page #tutorial_card { position: fixed; z-index: 3002; right: max(16px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: min(390px, calc(100% - 32px)); max-height: calc(100dvh - 32px); display: flex; flex-direction: column; padding: 16px 20px; box-sizing: border-box; border: 1px solid #d7dccb; border-radius: 18px; background: #fffef9; color: #26301f; box-shadow: 0 12px 48px #0005; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-align: left; }
.story-page #story_tutorial.tutorial-welcome #tutorial_card { inset: 50% auto auto 50%; width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 22px 28px 28px; border-color: #e1ddbd; border-radius: 26px; background: radial-gradient(ellipse at 50% 12%, #fff5bf80, transparent 65%), #fffef9; box-shadow: 0 24px 80px #10181055, 0 3px 12px #10181018; transform: translate(-50%, -50%); }
.story-page .tutorial-welcome-emblem { display: none; }
.story-page .tutorial-welcome .tutorial-welcome-emblem { display: block; width: 104px; height: 104px; margin: 0 auto 12px; }
.story-page .tutorial-welcome-emblem svg { display: block; width: 100%; height: 100%; }
.story-page .tutorial-emblem-disc { fill: #fbdf00; }
.story-page .tutorial-emblem-book { fill: #fffef9; stroke: #435137; stroke-width: 2; stroke-linejoin: round; }
.story-page .tutorial-emblem-lines { fill: none; stroke: #6c795c; stroke-width: 1.7; stroke-linecap: round; }
.story-page .tutorial-emblem-sparkle { fill: #b29b20; }
.story-page .tutorial-emblem-dot { fill: #82956b; }
.story-page #story_tutorial.tutorial-welcome .tutorial-card-header { justify-content: flex-end; padding: 0; margin-bottom: 2px; }
.story-page #story_tutorial.tutorial-welcome #tutorial_skip { position: static; display: grid; place-items: center; width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #edf0e6; border-color: transparent; color: #68715d; font-size: 1.5rem; font-weight: 400; line-height: 1; }
.story-page #story_tutorial.tutorial-welcome #tutorial_skip:hover { background: #edf0e6; }
.story-page #story_tutorial.tutorial-welcome .tutorial-card-copy { text-align: center; }
.story-page #story_tutorial.tutorial-welcome #tutorial_title { max-width: 310px; padding: 0; margin: 0 auto 12px; font-size: clamp(1.6rem, 5vw, 1.95rem); font-weight: 700; line-height: 1.16; letter-spacing: -.04em; }
.story-page #story_tutorial.tutorial-welcome #tutorial_description { max-width: 330px; margin: 0 auto 24px; color: #68715d; font-size: .9375rem; line-height: 1.65; }
.story-page #story_tutorial.tutorial-welcome #tutorial_next { width: 100%; min-height: 48px; border-radius: 12px; box-shadow: 0 3px 10px #ab960018; }
.story-page #story_tutorial.tutorial-welcome #tutorial_next:hover { background: #f3d400; }
.story-page .tutorial-card-header, .story-page .tutorial-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; }
.story-page .tutorial-card-copy { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.story-page #tutorial_progress { font-size: .75rem; color: #59634e; }
.story-page #tutorial_title { margin: 4px 0 8px; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.02em; }
.story-page #tutorial_description, .story-page #tutorial_status { margin: 0 0 12px; font-size: .875rem; line-height: 1.5; }
.story-page #tutorial_status:empty { display: none; }
.story-page #tutorial_status { color: #76500e; }
.story-page #story_tutorial button { min-height: 44px; min-width: 64px; padding: 10px 16px; border: 1px solid #cdd3c2; border-radius: 10px; font: inherit; font-size: .875rem; font-weight: 650; cursor: pointer; touch-action: manipulation; }
.story-page #tutorial_skip { background: #edf0e6; color: #334127; }
.story-page #tutorial_next { margin-left: auto; background: #fbdf00; border-color: #cbb500; color: #252b1c; }
.story-page #tutorial_retry { background: #fff; color: #334127; }
.story-page #tutorial_back { background: #edf0e6; color: #334127; }
.story-page .tutorial-card-actions { flex-wrap: wrap; }
.story-page #story_tutorial button:disabled { opacity: .65; cursor: default; }
.story-page #story_tutorial button:focus-visible, .story-page .tutorial-action-target:focus-visible { outline: 3px solid #486dba; outline-offset: 3px; }
.story-page.tutorial-active { overflow: hidden; scroll-behavior: auto !important; scroll-padding-bottom: var(--tutorial-reserved, 260px); }
.story-page.tutorial-active body { padding-bottom: var(--tutorial-reserved, 260px); }
.story-page.tutorial-active #translation_modal_box { background: transparent; height: calc(100dvh - var(--tutorial-reserved, 260px)); box-sizing: border-box; padding: 12px; }
.story-page.tutorial-active .story-tools { bottom: calc(var(--tutorial-reserved, 260px) + 8px); }
.story-page.tutorial-active .vocab_sidebar_widget,
.story-page.tutorial-active .mentor_chat_widget { bottom: calc(var(--tutorial-reserved, 260px) + 8px); height: calc(100dvh - var(--tutorial-reserved, 260px) - 32px); max-height: 640px; transition: none; }
.story-page.tutorial-active .tutorial-action-target { scroll-margin: 16px; }
.story-page.tutorial-active #story_text_div .tutorial-action-target { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
@media (max-width: 1000px) {
    .story-page #tutorial_card { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; padding: 12px 16px; max-height: 48dvh; }
}
@media (max-height: 500px) {
    .story-page #story_tutorial.tutorial-welcome #tutorial_card { padding: 12px 20px 16px; }
    .story-page #story_tutorial.tutorial-welcome .tutorial-welcome-emblem { width: 64px; height: 64px; margin-bottom: 8px; }
    .story-page #story_tutorial.tutorial-welcome #tutorial_title { font-size: 1.4rem; }
    .story-page #story_tutorial.tutorial-welcome #tutorial_description { margin-bottom: 12px; font-size: .875rem; }
    .story-page #tutorial_card { padding: 8px 12px; max-height: 55dvh; }
    .story-page #tutorial_title { font-size: 1rem; }
    .story-page #tutorial_description { margin-bottom: 6px; font-size: .8125rem; }
    .story-page .tutorial-card-header { position: relative; padding-right: 76px; min-height: 24px; }
    .story-page #tutorial_skip { position: absolute; right: 0; top: 0; }
    .story-page #tutorial_title { padding-right: 76px; }
}