.planner-tutorial{width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;margin:auto;padding:30px;border:1px solid var(--border,#373a40);border-radius:20px;background:var(--bg-card,#1a1b1e);color:var(--text-main,#c1c2c5);box-shadow:0 25px 100px #0009;font-family:inherit;line-height:1.55}
.planner-tutorial::backdrop{background:#000b;backdrop-filter:blur(6px)}
.planner-tutorial [hidden]{display:none!important}
.planner-tutorial h2,.planner-tutorial h3,.planner-tutorial strong{color:var(--text-bright,#fff)}
.planner-tutorial h2{font-size:1.8rem;line-height:1.2;margin:20px 0 12px;padding-right:12px;outline:none}
.planner-tutorial h3{font-size:1.15rem;margin-bottom:6px}.planner-tutorial p{margin:0 0 14px}
.planner-tutorial button,.planner-tutorial input,.planner-tutorial select{font:inherit;border:1px solid var(--border,#373a40);border-radius:9px;padding:10px 14px;color:var(--text-bright,#fff);background:var(--color-input-bg,#2c2e33)}
.planner-tutorial button{cursor:pointer;min-height:44px}.planner-tutorial button:disabled{opacity:.5;cursor:default}
.planner-tutorial button.primary{background:var(--accent,#fbaf40);color:#17120b;border-color:transparent;font-weight:600}
.planner-tutorial button:hover:not(:disabled){border-color:var(--accent,#fbaf40)}
.planner-tutorial button:focus-visible,.planner-tutorial input:focus-visible,.planner-tutorial select:focus-visible{outline:2px solid var(--accent,#fbaf40);outline-offset:3px}
.planner-tutorial .tutorial-close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:1.5rem}
.tutorial-eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.16em;color:var(--accent,#fbaf40);padding-right:24px}
.tutorial-progress{display:flex;gap:6px}.tutorial-progress span{height:4px;flex:1;border-radius:5px;background:var(--border,#373a40)}.tutorial-progress .is-current{background:var(--accent,#fbaf40)}.tutorial-progress .is-done{background:var(--success,#40c057)}
.tutorial-intro{font-size:.95rem}.tutorial-roadmap{counter-reset:quest;list-style:none;display:grid;gap:12px;margin:24px 0;padding:0}.tutorial-roadmap li{display:flex;align-items:center;gap:12px}.tutorial-roadmap li::before{counter-increment:quest;content:counter(quest);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--accent-glow,#fbaf4020);color:var(--accent,#fbaf40);font-weight:700}
.tutorial-practice,.tutorial-lore{border:1px solid var(--border,#373a40);background:var(--bg-dark,#101113);border-radius:14px;padding:20px;margin:18px 0}
.tutorial-demo-tag{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted,#868e96);margin-bottom:14px}
.tutorial-empty{text-align:center;padding:8px}.tutorial-character,.tutorial-event{display:flex;align-items:center;gap:18px;margin-bottom:12px}.tutorial-character img,.tutorial-event img{width:70px;height:70px;object-fit:contain;image-rendering:pixelated;flex-shrink:0}
.tutorial-practice form{display:grid;gap:14px}.tutorial-practice label{display:grid;gap:6px}.tutorial-practice input:not([type=radio]):not([type=checkbox]),.tutorial-practice select{width:100%;min-width:0}.tutorial-search{display:flex;gap:8px}.tutorial-search input{flex:1}.tutorial-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tutorial-outfits{display:flex;gap:12px}.tutorial-outfits label{position:relative;flex:1;border:1px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;text-align:center;font-size:.85rem}.tutorial-outfits label:has(:checked){border-color:var(--accent);background:var(--accent-glow)}.tutorial-outfits img{width:64px;height:64px;object-fit:contain;justify-self:center;image-rendering:pixelated}.tutorial-outfits input{position:absolute;left:10px;top:10px}.tutorial-practice fieldset{border:0;padding:0}.tutorial-practice legend{margin-bottom:10px}
.tutorial-practice .tutorial-check{display:flex;align-items:center;gap:8px}.tutorial-check input{width:18px;height:18px}.tutorial-tip{font-size:.85rem;border-left:2px solid var(--accent);padding-left:12px}.tutorial-success,.tutorial-feedback{color:var(--success,#40c057);font-size:.9rem}.tutorial-feedback:empty{display:none}
.tutorial-footer{border-top:1px solid var(--border);padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px}.tutorial-footer>div,.tutorial-answers{display:flex;gap:8px}.planner-tutorial .tutorial-skip{border:0;background:transparent;font-size:.85rem;padding-left:0}.tutorial-lore a{color:var(--accent);font-size:.85rem}.tutorial-answers{margin:18px 0}.planner-tutorial .tutorial-code{display:block;font-size:3rem;letter-spacing:.25em;color:var(--accent);margin:10px 0}
#planner-tutorial-open{font:inherit;white-space:nowrap;cursor:pointer;border:1px solid var(--border);border-radius:9px;padding:8px 14px;background:transparent;color:var(--text-bright)}
@media(max-width:480px){.planner-tutorial{padding:24px 18px}.planner-tutorial h2{font-size:1.5rem}.tutorial-practice,.tutorial-lore{padding:15px}.tutorial-footer{align-items:stretch;flex-direction:column-reverse}.tutorial-footer>div{justify-content:space-between}.tutorial-footer .tutorial-skip{align-self:center}.tutorial-columns{grid-template-columns:1fr}.tutorial-search{flex-wrap:wrap}.tutorial-search input{flex-basis:100%}}