.tutorial-runtime{position:absolute;z-index:90;inset:0;container-type:inline-size;pointer-events:none;overflow:hidden;color:#102b3b}.tutorial-runtime.hidden{display:none}.tutorial-runtime.is-active{pointer-events:auto}
.tutorial-story{position:absolute;inset:0;background:#05080c;cursor:pointer}.tutorial-story.hidden,.tutorial-dialogue.hidden,.tutorial-caption.hidden,.tutorial-skip.hidden,.tutorial-instruction.hidden{display:none}
.tutorial-story__image{width:100%;height:100%;object-fit:cover;transition:transform .8s ease,opacity .45s ease}.tutorial-story[data-scene="letter"].is-letter-focus .tutorial-story__image{transform:scale(1.12) translate(3%,-2%)}.tutorial-story[data-scene="arrival"].is-door-focus .tutorial-story__image{transform:scale(1.06)}
.tutorial-story.is-opening-fade::before{content:"";position:absolute;z-index:3;inset:0;background:#000;pointer-events:none;animation:tutorial-story-opening-fade .38s ease-out both}.tutorial-runtime[data-reduced-motion="true"] .tutorial-story.is-opening-fade::before{animation-duration:.01ms}
.tutorial-story::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(4,10,15,.22) 58%,rgba(3,9,14,.86) 100%)}
.tutorial-story__caption{position:absolute;z-index:1;left:5%;right:5%;bottom:5%;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:20px 24px;border:3px solid #8eb7c4;border-radius:18px;background:linear-gradient(145deg,rgba(255,253,242,.97),rgba(239,248,244,.96));box-shadow:0 8px 0 #06121b,0 18px 36px #0009}.tutorial-story__speaker,.tutorial-speaker{display:inline-block;justify-self:start;padding:5px 12px;border-radius:999px;background:#17465a;color:#fff;font:400 15px NeoDunggeunmo,Pretendard,sans-serif}.tutorial-story__text{font-size:clamp(19px,2.1vw,28px);font-weight:850;line-height:1.48;word-break:keep-all}.tutorial-story__progress{font-weight:900;color:#486474;white-space:nowrap}
.tutorial-story__audio-prompt{position:absolute;z-index:2;left:50%;bottom:calc(5% + 138px);translate:-50% 0;min-width:min(340px,82%);padding:11px 18px;border:2px solid #e0b44f;border-radius:999px;background:rgba(7,33,40,.94);box-shadow:0 5px 0 rgba(0,0,0,.4),0 0 22px rgba(255,210,95,.24);color:#fff1bd;text-align:center;font:400 clamp(14px,1.7vw,19px)/1.35 NeoDunggeunmo,Pretendard,sans-serif;pointer-events:none;animation:tutorial-audio-prompt 1.4s ease-in-out infinite}.tutorial-story__audio-prompt.hidden{display:none}
.tutorial-shade{position:absolute;inset:0;background:rgba(4,11,17,.64);opacity:0;pointer-events:none;transition:opacity .25s}.tutorial-runtime.is-active:not(.is-viewing):not(.is-story) .tutorial-shade{opacity:1}
.tutorial-dialogue{position:absolute;z-index:4;left:4%;right:4%;bottom:15px;height:clamp(260px,52vh,560px);pointer-events:none}.tutorial-portrait{position:absolute;bottom:0;left:-1%;width:min(39vw,370px);height:min(80vh,560px);object-fit:contain;object-position:left bottom;filter:drop-shadow(0 14px 18px #000b)}.tutorial-dialogue[data-side="right"] .tutorial-portrait{left:auto;right:-1%;object-position:right bottom}
.tutorial-dialogue__box,.tutorial-caption{position:absolute;z-index:2;left:14%;right:14%;bottom:0;min-height:155px;padding:21px 76px 20px;border:4px solid #8eb7c4;border-radius:18px;background:linear-gradient(150deg,rgba(255,253,242,.98),rgba(239,248,244,.98));box-shadow:0 8px 0 #06121b,0 18px 34px #0008;pointer-events:auto;cursor:pointer}.tutorial-dialogue__text,.tutorial-caption__text{min-height:58px;margin-top:7px;font-size:clamp(19px,2.1vw,27px);font-weight:850;line-height:1.48;text-align:left;word-break:keep-all;overflow-wrap:normal}.tutorial-next{position:absolute;right:21px;bottom:14px;color:#8a5a15;font-size:20px;animation:tutorial-next 1s ease-in-out infinite}
.tutorial-caption{z-index:4;left:50%;right:auto;bottom:34px;width:min(720px,86%);transform:translateX(-50%)}.tutorial-caption__text{font-size:clamp(18px,2vw,25px)}
.tutorial-skip{position:absolute;z-index:7;right:max(13px,env(safe-area-inset-right));top:max(13px,env(safe-area-inset-top));min-width:92px;min-height:43px;border:2px solid #a6c4cf;border-radius:999px;background:#102a3be8;color:#fff;font-weight:900;box-shadow:0 5px 14px #0007;pointer-events:auto;cursor:pointer}
.tutorial-instruction{position:absolute;z-index:6;left:50%;bottom:calc(var(--museum-bottom-hud-height,106px) + 12px);width:min(650px,calc(100% - 28px));padding:13px 22px;border:3px solid #8eb7c4;border-radius:999px;background:#102a3bf2;color:#fff;text-align:center;font-weight:900;font-size:clamp(15px,1.7vw,21px);line-height:1.35;word-break:keep-all;transform:translateX(-50%);box-shadow:0 8px 18px #0008;pointer-events:none}
.tutorial-dialogue__actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:13px}.tutorial-dialogue__actions.hidden{display:none}.tutorial-dialogue__actions button{min-height:46px;padding:9px 13px;border:3px solid #89a9b6;border-radius:11px;background:#fff;color:#142a39;text-align:left;font-weight:900;font-size:clamp(15px,1.65vw,19px);line-height:1.3;word-break:keep-all;cursor:pointer}.tutorial-dialogue__actions button:first-child{border-color:#d29c32;background:#fff5cf}.tutorial-dialogue__actions button:last-child{text-align:center;background:#e9f1f2}
.tutorial-runtime.is-curator-menu .tutorial-dialogue{inset:15px 3% 15px;height:auto}.tutorial-runtime.is-curator-menu .tutorial-portrait{left:0;bottom:4%;width:min(25vw,270px);height:min(76vh,540px)}.tutorial-runtime.is-curator-menu .tutorial-dialogue__box{left:27%;right:1%;bottom:4%;min-height:0;padding:18px 28px 20px}.tutorial-runtime.is-curator-menu .tutorial-dialogue__text{min-height:0}.tutorial-runtime.is-curator-menu .tutorial-dialogue__actions{gap:7px;margin-top:11px}.tutorial-runtime.is-curator-menu .tutorial-dialogue__actions button{min-height:43px;padding:7px 12px}
.tutorial-focus{position:absolute;z-index:3;border:4px solid #ffd968;border-radius:18px;box-shadow:0 0 0 9999px rgba(2,8,13,.58),0 0 32px 10px rgba(255,213,82,.62);pointer-events:none;opacity:0;transition:left .35s ease,top .35s ease,width .35s ease,height .35s ease,opacity .2s}.tutorial-focus.is-visible{opacity:1;animation:tutorial-focus 1.3s ease-in-out infinite}
.device:has(.tutorial-runtime.is-active)>.hud,.device:has(.tutorial-runtime.is-active)>.joystick,.device:has(.tutorial-runtime.is-active)>.action-button,.device:has(.tutorial-runtime.is-active)>#museumBottomHud{opacity:0!important;pointer-events:none!important;transition:opacity .18s ease}
.exhibit-info .tutorial-info-hint{margin:12px 0 0;padding:11px 14px;border:2px solid #d9aa42;border-radius:12px;background:#fff7d9;color:#604312;font-weight:850;line-height:1.45;word-break:keep-all}.exhibit-info .tutorial-info-hint.hidden{display:none}
@keyframes tutorial-story-opening-fade{from{opacity:1}to{opacity:0}}@keyframes tutorial-audio-prompt{50%{filter:brightness(1.18);box-shadow:0 5px 0 rgba(0,0,0,.4),0 0 30px rgba(255,210,95,.4)}}@keyframes tutorial-next{50%{transform:translateY(4px)}}@keyframes tutorial-focus{50%{filter:brightness(1.18);box-shadow:0 0 0 9999px rgba(2,8,13,.58),0 0 42px 13px rgba(255,213,82,.78)}}
@container(max-width:700px){.tutorial-story__image{height:64%;object-fit:cover;object-position:center center}.tutorial-story{background:#070b10}.tutorial-story__caption{left:8px;right:8px;bottom:10px;grid-template-columns:1fr auto;padding:14px 16px}.tutorial-story__audio-prompt{bottom:198px;min-width:min(310px,86%);padding:9px 13px;font-size:14px}.tutorial-story__speaker{grid-column:1/-1;font-size:12px}.tutorial-story__text{font-size:17px}.tutorial-story__progress{font-size:12px}.tutorial-dialogue{left:6px;right:6px;bottom:7px;height:44vh;min-height:300px}.tutorial-portrait{left:-14%;width:57cqw;height:44vh;object-fit:contain;object-position:left bottom}.tutorial-dialogue[data-side="right"] .tutorial-portrait{left:auto;right:-14%;object-position:right bottom}.tutorial-dialogue__box{left:4px;right:4px;min-height:158px;padding:15px 17px 19px}.tutorial-speaker{font-size:12px;padding:4px 8px}.tutorial-dialogue__text{font-size:17px;line-height:1.4}.tutorial-dialogue__actions{gap:6px;margin-top:9px}.tutorial-dialogue__actions button{min-height:42px;padding:8px 10px;font-size:14px}.tutorial-caption{bottom:10px;width:calc(100% - 16px);min-height:142px;padding:16px 18px}.tutorial-caption__text{font-size:17px}.tutorial-skip{min-width:78px;min-height:39px;font-size:12px}.tutorial-instruction{bottom:calc(var(--museum-bottom-hud-height,118px) + 8px);padding:11px 14px;font-size:15px;border-radius:16px}}
@container(max-width:700px){.tutorial-runtime.is-curator-menu .tutorial-dialogue{--curator-menu-lift:238px;inset:6px;height:auto;min-height:0}.tutorial-runtime.is-curator-menu .tutorial-dialogue[data-choice-count="4"]{--curator-menu-lift:282px}.tutorial-runtime.is-curator-menu .tutorial-dialogue[data-choice-count="5"]{--curator-menu-lift:326px}.tutorial-runtime.is-curator-menu .tutorial-portrait{left:-4%;bottom:var(--curator-menu-lift);width:58cqw;height:min(39vh,320px);object-position:left bottom}.tutorial-runtime.is-curator-menu .tutorial-dialogue__box{left:4px;right:4px;bottom:0;min-height:0;padding:13px 14px 15px}.tutorial-runtime.is-curator-menu .tutorial-dialogue__text{font-size:16px}.tutorial-runtime.is-curator-menu .tutorial-dialogue__actions{gap:5px;margin-top:8px}.tutorial-runtime.is-curator-menu .tutorial-dialogue__actions button{min-height:40px;padding:6px 9px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.tutorial-story__image,.tutorial-focus{transition:none}.tutorial-story.is-opening-fade::before{animation-duration:.01ms}.tutorial-focus,.tutorial-next,.tutorial-story__audio-prompt{animation:none}}
