.pk-guide-overlay { position:fixed; inset:0; z-index:3500; display:flex; align-items:center; justify-content:center; }
.pk-guide-overlay[hidden] { display:none; }
.pk-guide { position:relative; width:min(540px,100%); padding:28px; text-align:left; }
.pk-guide h2 { margin:8px 52px 16px 0; font-size:25px; font-style:italic; }
.pk-guide .modal-close-btn { position:absolute; right:18px; top:18px; }
.pk-guide-step { font-size:10px; color:#ffe798; font-weight:900; letter-spacing:2px; }
.pk-guide-content { min-height:185px; color:#c2d3e4; font-size:14px; line-height:1.7; }
.pk-guide-content p { margin:0 0 14px; }
.pk-guide-content strong { color:#f4f8ff; }
.pk-guide-content kbd { display:inline-block; padding:1px 7px; border:1px solid #52667c; border-radius:6px; color:#fff; background:#071426; font:inherit; font-weight:800; }
.pk-guide-progress { display:flex; gap:6px; margin:0 0 22px; }
.pk-guide-progress span { height:4px; flex:1; border-radius:3px; background:#34475b; }
.pk-guide-progress .active { background:#ffd43b; }
.pk-guide-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pk-guide-actions button { min-height:48px; padding:10px; }
@media(max-width:600px) { .pk-guide { padding:22px 18px; } .pk-guide-content { min-height:0; } }
.pk-guide-overlay { padding:16px; box-sizing:border-box; }
.pk-tutorial { box-sizing:border-box; height:min(700px,calc(100dvh - 32px)); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; overflow:hidden; }
.pk-tutorial > h2 { min-height:60px; flex-shrink:0; margin-bottom:10px; }
.pk-tutorial .pk-guide-progress { flex-shrink:0; }
.pk-tutorial .pk-guide-content { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:8px; scrollbar-width:thin; scrollbar-color:#52667c transparent; }
.pk-tutorial .pk-guide-content p:has(>strong:first-child) { padding-left:14px; border-left:2px solid #52667c; }
.pk-tutorial .pk-guide-content p > strong:first-child { display:block; color:#ffe798; margin-bottom:3px; }
.pk-tutorial .pk-guide-actions { flex-shrink:0; margin-top:18px; }
.pk-audio-options { box-sizing:border-box; max-height:calc(100dvh - 32px); overflow-y:auto; color:#c2d3e4; font-size:14px; line-height:1.6; }
.pk-audio-options .pk-audio-intro { margin:0 0 22px; }
.pk-audio-toggle { display:flex; align-items:center; gap:16px; position:relative; padding:16px; margin-bottom:12px; border:1px solid #344b64; border-radius:14px; background:#0a1b2d; cursor:pointer; }
.pk-audio-toggle > span:first-child { flex:1; }
.pk-audio-toggle strong { display:block; color:#f4f8ff; font-size:15px; }
.pk-audio-toggle small { display:block; margin-top:4px; font-size:12px; color:#a9bed3; }
.pk-audio-toggle input { position:absolute; width:1px; height:1px; opacity:0; }
.pk-audio-switch { width:44px; height:26px; flex-shrink:0; border-radius:20px; background:#344b64; border:1px solid #60768d; transition:background .15s; }
.pk-audio-switch::after { content:''; display:block; width:18px; height:18px; margin:3px; border-radius:50%; background:#e8f0f8; transition:transform .15s; }
.pk-audio-toggle input:checked + .pk-audio-switch { background:#efbf32; border-color:#ffe798; }
.pk-audio-toggle input:checked + .pk-audio-switch::after { transform:translateX(18px); background:#10233c; }
.pk-audio-toggle:focus-within { outline:2px solid #ffe798; outline-offset:3px; }
.pk-audio-volume { display:grid; grid-template-columns:1fr auto; align-items:center; gap:14px; margin-top:22px; padding:18px 16px; border:1px solid #344b64; border-radius:14px; background:#0a1b2d; }
.pk-audio-volume label { color:#f4f8ff; font-weight:700; }
.pk-audio-volume output { color:#ffe798; font-weight:800; font-variant-numeric:tabular-nums; }
.pk-audio-volume input { grid-column:1 / -1; width:100%; margin:0; min-height:28px; cursor:pointer; accent-color:#ffd43b; }
.pk-audio-volume input:focus-visible { outline:2px solid #ffe798; outline-offset:4px; }
.pk-audio-options .pk-audio-note { margin:22px 0 0; padding-top:18px; border-top:1px solid #344b64; color:#a9bed3; font-size:12px; }
@media(max-width:600px) { .pk-tutorial > h2 { font-size:22px; min-height:56px; } .pk-audio-toggle { padding:13px; gap:10px; } }