.tutorial-dialog{width:min(500px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;border:1px solid #dedfd5;border-radius:16px;background:#f7f6f0;color:#29362e;box-shadow:0 28px 100px #10231855;overflow:hidden}
.tutorial-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.tutorial-dialog::backdrop{background:#1b2926aa;backdrop-filter:blur(5px)}
html:has(#tutorial-dialog[open]){overflow:hidden;scrollbar-gutter:auto}
body:has(#tutorial-dialog[open]){padding-right:var(--tutorial-scroll-gap,0px)}
.tutorial-top{height:36px;display:flex;align-items:center;justify-content:flex-end;padding:0 14px}
.tutorial-swipe-hint{display:flex;align-items:center;gap:8px;margin:0 auto 0 0;color:#315548;font:600 12px var(--sans,Arial,sans-serif);pointer-events:none}
.tutorial-swipe-hint[hidden]{display:none}
.tutorial-swipe-hint span{display:inline-block;font-size:24px;line-height:1;animation:tutorial-swipe-cue 1.6s ease-in-out infinite}
.tutorial-skip{display:flex;align-items:center;gap:9px;min-height:32px;border:0;background:none;color:#647166;padding:4px 7px;font:12px var(--sans,Arial,sans-serif);cursor:pointer}
.tutorial-skip span{font-size:20px;line-height:1}
.tutorial-poster{width:100%;aspect-ratio:4/5;max-height:calc(100dvh - 132px);min-height:0;display:grid;place-items:center;overflow:hidden;touch-action:pan-y pinch-zoom}
.tutorial-slide{grid-area:1/1;width:100%;height:100%;min-height:0;min-width:0;display:grid;place-items:center;animation:tutorial-arrive .18s ease-out}
.tutorial-slide img{width:100%;height:100%;min-height:0;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}
.tutorial-image-failed{padding:24px;text-align:center;box-sizing:border-box}.tutorial-image-failed h2{font:42px/1.1 var(--serif,Georgia,serif)}.tutorial-image-failed p{font-size:16px;line-height:1.7}
.tutorial-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px 16px;border-top:1px solid #e3e4da;min-height:68px;box-sizing:border-box}
.tutorial-controls button{min-height:44px;border-radius:7px;font:13px var(--sans,Arial,sans-serif);cursor:pointer;padding:10px 16px}
.tutorial-back{border:1px solid #dce0d3;background:transparent;color:#315548}.tutorial-back:disabled{visibility:hidden;pointer-events:none}
.tutorial-next{background:#315548;color:#fffefa;border:1px solid #315548;min-width:106px}
.tutorial-dots{display:flex;gap:7px;align-items:center}.tutorial-dots i{width:6px;height:6px;border-radius:50%;background:#cdd3c6}.tutorial-dots i.active{background:#315548;width:18px;border-radius:4px}
.tutorial-help{display:block;border:0;background:none;color:var(--green,#315548);padding:0;margin:0 0 13px;text-align:left;font:12px var(--sans,Arial,sans-serif);text-decoration:underline;text-underline-offset:4px;cursor:pointer;min-height:32px}
.tutorial-dialog button:focus-visible,.tutorial-help:focus-visible{outline:3px solid #cd775b;outline-offset:3px}
.tutorial-dialog .tutorial-skip:focus-visible{outline-offset:-2px;border-radius:4px}
@keyframes tutorial-arrive{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes tutorial-swipe-cue{0%,100%{opacity:1;transform:translateX(0)}50%{opacity:.25;transform:translateX(-5px)}}
@media(max-width:400px){.tutorial-controls{padding:10px 14px 14px;gap:8px}.tutorial-controls button{padding:9px 12px;font-size:12px;min-width:0}.tutorial-top{height:34px}}
@media(prefers-reduced-motion:reduce){.tutorial-slide,.tutorial-swipe-hint span{animation:none}}