.ohole-guide-dialog{width:min(940px,calc(100vw - 24px));max-width:none;max-height:min(94dvh,900px);padding:0;border:1px solid #eedde1;border-radius:26px;background:#fff;color:#242329;box-shadow:0 24px 80px #18071055;overflow:auto}
.ohole-guide-dialog::backdrop{background:#180710a8;backdrop-filter:blur(5px)}
.ohole-guide-shell{padding:clamp(16px,3vw,30px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"head head" "stage info" "stage progress" "stage controls" "footer footer";gap:14px 24px;align-items:center}
.ohole-guide-header{grid-area:head;display:flex;align-items:center;justify-content:space-between;gap:16px}
.ohole-guide-kicker{font-size:.7rem;letter-spacing:.15em;font-weight:800;color:#d70818}
.ohole-guide-heading h2{margin:4px 0 0;font-size:clamp(1.25rem,4vw,1.8rem)}
.ohole-guide-close{width:42px;height:42px;border:0;border-radius:50%;background:#fff0f2;color:#9e0b1c;font-size:1.8rem;line-height:1;cursor:pointer}
.ohole-guide-stage{grid-area:stage;display:grid;place-items:center;min-height:430px;border-radius:22px;padding:18px;background:radial-gradient(ellipse at 50% 15%,#fff 0,#fff2f4 48%,#f4e4e8 100%)}
.ohole-guide-phone{width:min(100%,300px);aspect-ratio:9/15.8;border:7px solid #231c22;border-radius:34px;background:#fff;overflow:hidden;box-shadow:0 18px 35px #26111635;display:flex;flex-direction:column}
.ohole-guide-phone-top{height:48px;flex:none;display:flex;align-items:center;gap:9px;padding:0 13px;border-bottom:1px solid #f3ebed;font-size:1.05rem}
.ohole-guide-mini-logo{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:#e10600;color:#fff;font-size:1.15rem}
.ohole-guide-search{margin-left:auto;width:28px;height:28px;border:1px solid #eee;border-radius:50%;display:grid;place-items:center}
.ohole-guide-tabs{height:38px;display:flex;justify-content:space-around;align-items:center;color:#6e6b70;font-size:.68rem;font-weight:700}
.ohole-guide-tabs .is-current{color:#cf0011;border-bottom:2px solid #e10600;padding:0 4px 6px}
.ohole-guide-mock-screen{position:relative;isolation:isolate;overflow:hidden;flex:1;margin:8px 10px 10px;border-radius:18px;padding:24px 15px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;text-align:center;color:#fff;background:linear-gradient(145deg,#411320,#180e16 70%);transition:background .3s ease}
.ohole-guide-mock-screen::before{content:"";position:absolute;z-index:-1;width:210px;height:210px;right:-85px;top:-80px;border-radius:50%;background:#ee36504a;filter:blur(10px)}
.ohole-guide-mock-screen[data-scene="1"],.ohole-guide-mock-screen[data-scene="7"],.ohole-guide-mock-screen[data-scene="8"]{background:linear-gradient(145deg,#fff1f3,#fff 75%);color:#3b1821}
.ohole-guide-mock-screen[data-scene="3"]{background:linear-gradient(145deg,#fff6f7,#f5e7ed);color:#371721}
.ohole-guide-scene-icon{width:66px;height:66px;border-radius:22px;display:grid;place-items:center;background:#e10600;color:#fff;font-size:2.1rem;font-weight:800;box-shadow:0 8px 22px #e1060040;animation:ohole-guide-float 2s ease-in-out infinite}
.ohole-guide-mock-title{font-size:1.05rem}
.ohole-guide-mock-lines{width:82%;display:grid;gap:7px}
.ohole-guide-mock-lines i{height:7px;border-radius:6px;background:#ffffff65}
.ohole-guide-mock-lines i.short{width:66%;justify-self:center}
.ohole-guide-mock-screen[data-scene="1"] .ohole-guide-mock-lines i,.ohole-guide-mock-screen[data-scene="3"] .ohole-guide-mock-lines i,.ohole-guide-mock-screen[data-scene="7"] .ohole-guide-mock-lines i,.ohole-guide-mock-screen[data-scene="8"] .ohole-guide-mock-lines i{background:#711b2b24}
.ohole-guide-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:5px}
.ohole-guide-chips span{padding:6px 9px;border:1px solid #ffffff55;border-radius:20px;background:#ffffff20;font-size:.61rem;font-weight:700}
.ohole-guide-mock-screen[data-scene="1"] .ohole-guide-chips span,.ohole-guide-mock-screen[data-scene="3"] .ohole-guide-chips span,.ohole-guide-mock-screen[data-scene="7"] .ohole-guide-chips span,.ohole-guide-mock-screen[data-scene="8"] .ohole-guide-chips span{border-color:#d7081833;background:#fff;color:#8d1625}
.ohole-guide-nav{height:55px;flex:none;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #f2e8eb;color:#68646a}
.ohole-guide-nav-item{display:grid;justify-items:center;gap:2px;font-size:1rem}
.ohole-guide-nav-item small{font-size:.48rem}
.ohole-guide-info{grid-area:info;align-self:end}
.ohole-guide-step{font-size:.7rem;letter-spacing:.12em;font-weight:800;color:#d70818}
.ohole-guide-info h3{margin:8px 0;font-size:clamp(1.15rem,3vw,1.55rem)}
.ohole-guide-caption{margin:0;line-height:1.55;color:#625d64;font-size:.95rem}
.ohole-guide-progress{grid-area:progress;width:100%;accent-color:#df0b1d}
.ohole-guide-controls{grid-area:controls;display:flex;align-items:center;justify-content:center;gap:10px}
.ohole-guide-controls button,.ohole-guide-skip{min-height:42px;border:1px solid #eadce0;border-radius:24px;background:#fff;color:#831126;padding:0 16px;font-weight:700;cursor:pointer}
.ohole-guide-controls .ohole-guide-play{min-width:110px;border:0;background:#e10600;color:#fff}
.ohole-guide-footer{grid-area:footer;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#716a70}
.ohole-guide-skip{min-height:36px}
@keyframes ohole-guide-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:640px){.ohole-guide-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 20px);border-radius:20px}.ohole-guide-shell{grid-template-columns:1fr;grid-template-areas:"head" "stage" "info" "progress" "controls" "footer";gap:12px;padding:14px}.ohole-guide-stage{min-height:300px;padding:12px}.ohole-guide-phone{width:min(72vw,280px);aspect-ratio:9/14}.ohole-guide-caption{font-size:.88rem}.ohole-guide-controls button{padding:0 12px}.ohole-guide-footer small{font-size:.7rem}}
@media(prefers-reduced-motion:reduce){.ohole-guide-scene-icon{animation:none}.ohole-guide-mock-screen{transition:none}}