#tutorialDialog{width:min(420px,calc(100% - 28px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #e5c5ba;border-radius:22px;background:#fffaf6;color:#302622;overflow:auto;box-shadow:0 20px 70px #28181166}
#tutorialDialog::backdrop{background:#261d19b3;backdrop-filter:blur(5px)}
.tutorial-card{padding:0 22px 12px}
.tutorial-toolbar{display:flex;align-items:center;justify-content:center;margin:0 -22px;padding:14px 12px;background:#bd3f2f;color:#fff;font-size:24px;font-weight:800;line-height:1.4;text-align:center}
/* The example buttons retain the real app's shapes and colours. */
.tutorial-illustration{margin:14px 0;padding:12px;border:1px solid #e5cfc3;border-radius:14px;background:#f7eee7;display:flex;flex-direction:column;gap:12px}
.tutorial-example{display:grid;gap:8px}
.tutorial-preview-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:9px 13px;border:1px solid #a8bdc7;border-radius:14px;background:#fff;color:#243d40;text-align:left}
.tutorial-preview-row strong{display:block;font-size:15px;line-height:1.4}
#tutorialDialog[data-step="0"] .tutorial-preview-row::after{content:"→";display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#6f96a6;color:#fff;font-size:16px}
#tutorialDialog[data-step="1"] .tutorial-preview-row{border-color:#d5e0db;border-radius:12px;color:#203f39}
#tutorialDialog[data-step="2"] .tutorial-example{padding:16px;border:1px solid #d5dfe2;border-radius:14px;background:#fff}
.tutorial-shop-heading{font-size:16px;line-height:1.5}
.tutorial-shop-actions{display:grid;grid-template-columns:1fr 72px;gap:9px;margin-top:12px}
.tutorial-shop-actions span{display:grid;place-items:center;min-height:44px;border-radius:12px;font-size:14px;font-weight:700}
.tutorial-shop-actions span:first-child{color:white;background:#6f96a6}.tutorial-shop-actions span:last-child{color:#243d40;border:1px solid #a8bdc7;background:white}
.tutorial-count{width:max-content;margin:0 auto 8px;padding:2px 10px;border-radius:20px;background:#f4ded5;color:#9c3023;font-size:13px;font-weight:700}
#tutorialTitle{margin:0 0 10px;font-size:24px;line-height:1.4;letter-spacing:0;font-weight:800;color:#302622;text-align:center;outline:none}
#tutorialDescription{margin:0;color:#4d4038;font-size:15px;line-height:1.75;min-height:82px;font-weight:500}
.tutorial-dots{display:flex;justify-content:center;gap:7px;margin:18px 0}
.tutorial-dots i{width:7px;height:7px;border-radius:50%;background:#decfc5}.tutorial-dots i.active{background:#bd3f2f}
.tutorial-actions{display:flex;gap:10px;justify-content:flex-end}.tutorial-actions button{min-height:48px;padding:12px 16px;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer}
.tutorial-next{flex:1;border:1px solid #bd3f2f;background:#bd3f2f;color:#fff}.tutorial-back{border:1px solid #d4b9ab;background:#fff;color:#59473e}.tutorial-back[hidden]{display:none}
.tutorial-skip{display:block;margin:8px auto 0;min-height:44px;padding:8px 16px;background:transparent;border:0;color:#65534a;font-size:13px;cursor:pointer}
.tutorial-replay{display:block;margin:20px 0;min-height:44px;padding:10px 14px;border:1px solid #b9c9c7;border-radius:10px;background:#edf4f3;color:#294c40;font-size:14px;cursor:pointer}
#tutorialDialog button:focus-visible,.tutorial-replay:focus-visible{outline:3px solid #9c3023;outline-offset:3px}
#tutorialDialog[data-step="3"] .tutorial-example{justify-items:center;text-align:center;gap:8px}.tutorial-info-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid #a8bdc7;border-radius:50%;font-size:24px;font-weight:700;background:#fff;color:#243d40}.tutorial-home-action{display:grid;place-items:center;min-height:44px;padding:10px 16px;border:1px solid #c5d4d1;border-radius:10px;background:#edf4f3;color:#243d40;font-size:15px}
@media(max-height:620px){.tutorial-card{padding:0 18px 8px}.tutorial-toolbar{margin:0 -18px;padding:8px 12px;font-size:22px}.tutorial-illustration{margin:10px 0;padding:8px}.tutorial-example{gap:6px}.tutorial-preview-row{min-height:38px;padding:7px 11px}.tutorial-dots{margin:8px 0}#tutorialDescription{min-height:0;font-size:14px;line-height:1.6}#tutorialTitle{font-size:22px}.tutorial-skip{margin-top:0}}