body.masir-open{overflow:hidden}
.masir-trial-launch{background:var(--yellow);color:#111;border-color:var(--yellow);font-weight:700;width:100%;margin-top:10px}
.masir-dialog{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#f5f1e7;color:#111;font-family:'SA Hazm',Arial,sans-serif;overflow:hidden}
.masir-dialog[open]{display:flex;flex-direction:column}.masir-dialog::backdrop{background:#111}
.masir-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 10px max(20px,env(safe-area-inset-left));border-bottom:1px solid #d9d2c0;flex:none}
.masir-top strong{font-size:1rem}.masir-top strong span{font-size:.8rem;font-weight:500}.masir-progress{font-size:.8rem;color:#554f40}.masir-close{border:1px solid #cbc3b4;background:none;color:#111;border-radius:50%;width:44px;height:44px;font:28px Arial;cursor:pointer}
.masir-layout{display:flex;flex-direction:column;flex:1;min-height:0}.masir-scene{position:relative;flex:0 0 min(43dvh,370px);overflow:hidden;background:#e7e2d7;--walk:100;--bridge-size:0;--traveler:11%}
.masir-scene img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.9}
.masir-scene svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 2px 2px #fff9)}
.masir-base{fill:none;stroke:#514a3e;stroke-width:8;stroke-dasharray:4 12;opacity:.5}
.masir-walked,.masir-bridge,.masir-ahead{fill:none;stroke:#ffc900;stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .35s,opacity .35s}
.masir-walked{stroke-dasharray:100;stroke-dashoffset:var(--walk)}
.masir-bridge{stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--bridge-size)*100);opacity:var(--bridge-size)}
.masir-scene[data-stage="5"] .masir-bridge,.masir-scene[data-stage="6"] .masir-bridge{stroke-dashoffset:0;opacity:1}
.masir-ahead{stroke-dasharray:4 13;opacity:.4}.masir-scene[data-stage="5"] .masir-ahead,.masir-scene[data-stage="6"] .masir-ahead{stroke-dasharray:none;opacity:.9}
.masir-stop-point{fill:#171717;stroke:#ffc900;stroke-width:3;opacity:0;transition:opacity .3s}.masir-scene[data-stage="2"] .masir-stop-point,.masir-scene[data-stage="3"] .masir-stop-point,.masir-scene[data-stage="4"] .masir-stop-point,.masir-scene[data-stage="5"] .masir-stop-point,.masir-scene[data-stage="6"] .masir-stop-point{opacity:1}
.masir-return-point{fill:#ffc900;stroke:#171717;stroke-width:3;opacity:0}.masir-scene[data-stage="5"] .masir-return-point,.masir-scene[data-stage="6"] .masir-return-point{opacity:1}
.masir-cloud{position:absolute;inset:0;background:linear-gradient(115deg,transparent 24%,#1118 53%,transparent 85%);opacity:0;transition:opacity .45s;pointer-events:none}.masir-scene[data-stage="2"] .masir-cloud,.masir-scene[data-stage="3"] .masir-cloud{opacity:.65}
.masir-gap{position:absolute;top:30%;right:47%;background:#181818;color:#fff;border-radius:999px;padding:5px 14px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s;font-size:.85rem}.masir-scene[data-stage="2"] .masir-gap,.masir-scene[data-stage="3"] .masir-gap{opacity:1;transform:none}
.masir-traveler{position:absolute;right:var(--traveler);bottom:15%;width:300px;height:400px;background:url('/images/masir-traveler-frames.webp') 0 0 / 1200px 400px no-repeat;transform:scale(.28);transform-origin:bottom right;transition:right .4s,bottom .4s,transform .3s}
.masir-scene[data-stage="2"] .masir-traveler,.masir-scene[data-stage="3"] .masir-traveler{background-position:-300px 0;transform:scale(.31) rotate(-3deg)}
.masir-scene[data-stage="3"][data-response="2"] .masir-traveler,.masir-scene[data-stage="4"] .masir-traveler{background-position:-600px 0;transform:scale(.32)}
.masir-scene[data-stage="5"] .masir-traveler,.masir-scene[data-stage="6"] .masir-traveler{right:26%;bottom:30%;background-position:-900px 0}
.masir-scene-label{position:absolute;bottom:12px;right:16px;background:#f5f1e7e8;color:#111;padding:5px 12px;border-radius:10px;font-size:.85rem}
.masir-scroll{overflow-y:auto;overscroll-behavior:contain;flex:1;min-height:0}.masir-body{max-width:630px;margin:auto;padding:22px 22px 24px}.masir-body h2{font-size:clamp(1.55rem,5.4vw,2.5rem);line-height:1.45;margin:6px 0 12px;outline:none}.masir-body p{font-size:1rem;line-height:1.8;color:#4c463c}.masir-kicker{font-size:.88rem;color:#645431}.masir-note{padding:12px 16px;border-right:3px solid #ffc900;background:#fff9e9;border-radius:9px;line-height:1.8}
.masir-walk-meter{width:100%;height:10px;border-radius:99px;background:#dcd4bd;margin:23px 0}.masir-walk-meter span{display:block;width:0;height:100%;border-radius:inherit;background:#ffc900;transition:width .16s}
.masir-shrink{margin-top:16px}.masir-plank{width:calc(100% * var(--size,1));height:48px;border-radius:9px;background:#171717;color:#fff;display:flex;align-items:center;justify-content:center;transition:width .25s;max-width:100%;margin-bottom:18px}.masir-plank span{white-space:nowrap;font-size:.9rem}.masir-shrink label{display:block;font-size:1rem;margin-bottom:12px}.masir-shrink input{width:100%;min-height:42px;accent-color:#c89d00;direction:rtl;cursor:pointer}.masir-scale{display:flex;justify-content:space-between;font-size:.82rem;color:#665f4d}.masir-shrink-hint{min-height:2.8em;color:#3b352a!important}
.masir-ticket{border:1px solid #c9bea9;border-radius:18px;background:#fffdf6;padding:20px;box-shadow:0 8px 30px #29211712}.masir-ticket>span{display:block;font-size:.82rem;color:#6b5a34}.masir-ticket>strong{display:block;margin:8px 0;font-size:1.22rem}.masir-ticket p{color:#111;margin:6px 0}.masir-ticket small{display:block;border-top:1px dashed #d1c8b8;padding-top:12px;margin-top:15px;font-size:.86rem}.masir-status{min-height:1.4em}
.masir-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:12px max(20px,env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom));border-top:1px solid #d9d2c0;background:#f5f1e7;flex:none}
.masir-primary,.masir-walk{flex:1;max-width:550px;min-height:52px;border:0;border-radius:12px;background:#ffc900;color:#111;font:700 1rem 'SA Hazm',Arial;cursor:pointer;transition:transform .15s}
.masir-walk{touch-action:none;user-select:none}.masir-walk:active,.masir-primary:active{transform:scale(.985)}.masir-primary:disabled{opacity:.45;cursor:default}.masir-secondary{display:flex;justify-content:center;gap:12px;flex-basis:100%}.masir-secondary button{background:none;border:0;border-bottom:1px solid #9e843c;min-height:44px;color:#282216;font:inherit;cursor:pointer}
.masir-dialog button:focus-visible,.masir-dialog input:focus-visible{outline:3px solid #987700;outline-offset:3px}.masir-enter{animation:masir-enter .3s ease both}@keyframes masir-enter{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:850px){.masir-layout{flex-direction:row}.masir-scene{flex:0 0 56%}.masir-scroll{display:flex;align-items:safe center}.masir-body{width:min(100%,630px);padding:36px}.masir-top{padding-inline:40px}.masir-footer{padding-inline:12%}.masir-scene img{object-position:center}}
@media(max-height:700px) and (max-width:849px){.masir-scene{flex-basis:30dvh}.masir-body{padding-top:12px}}
@media(max-width:849px){.masir-dialog[data-stage="6"] .masir-scene{flex-basis:24dvh}.masir-dialog[data-stage="6"] .masir-body{padding-top:12px}}
@media(prefers-reduced-motion:reduce){.masir-dialog *, .masir-dialog *::before{animation:none!important;transition:none!important}}
[data-theme="dark"] .masir-dialog{background:#111412;color:#f3f2e9;color-scheme:dark}
[data-theme="dark"] .masir-top,[data-theme="dark"] .masir-footer{background:#111412;border-color:#393e35}
[data-theme="dark"] .masir-top strong,[data-theme="dark"] .masir-close,[data-theme="dark"] .masir-body h2{color:#f3f2e9}
[data-theme="dark"] .masir-progress,[data-theme="dark"] .masir-kicker,[data-theme="dark"] .masir-body p{color:#c6c6bd}
[data-theme="dark"] .masir-note{background:#383318;color:#f3f2e9}
[data-theme="dark"] .masir-ticket{background:#1c211d;color:#f3f2e9;border-color:#494c3c}
[data-theme="dark"] .masir-ticket p,[data-theme="dark"] .masir-ticket small,[data-theme="dark"] .masir-ticket strong,[data-theme="dark"] .masir-secondary button{color:#f3f2e9}
.masir-scene::before,.masir-scene::after{content:"";position:absolute;left:0;right:0;height:14px;background:#111;z-index:5;pointer-events:none}.masir-scene::before{top:0}.masir-scene::after{bottom:0}
.masir-speech{position:absolute;top:15%;left:6%;z-index:4;max-width:42%;padding:10px 16px;border:2px solid #111;border-radius:24px 24px 24px 4px;background:#fffdf4;color:#111;font-size:clamp(.92rem,2vw,1.25rem);font-weight:700;line-height:1.55;box-shadow:4px 5px 0 #1112;transition:transform .25s,opacity .25s}
.masir-scene[data-stage="2"] .masir-speech{transform:rotate(-3deg)}.masir-scene[data-stage="4"] .masir-speech{transform:translateY(-8px) rotate(2deg)}
.masir-bubbles{display:grid;gap:9px;margin:14px 0}.masir-bubble{position:relative;min-height:48px;border:2px solid #28251e;border-radius:18px 18px 18px 4px;background:#fffdf6;color:#171717;text-align:right;padding:8px 15px;font:inherit;font-size:.95rem;cursor:pointer;transition:transform .18s,background .18s}.masir-bubble:nth-child(2){margin-inline-start:9%}.masir-bubble:nth-child(3){margin-inline-start:4%;border-color:#b58a00}.masir-bubble[aria-pressed=true]{background:#ffefaa;transform:translateX(-5px)}.masir-reflection{min-height:2.5em;font-size:.9rem!important;color:#54472b!important;margin:6px 0}.masir-sound{border:1px solid #bfb6a2;border-radius:999px;background:none;color:inherit;padding:5px 11px;min-height:36px;font:inherit;font-size:.76rem;cursor:pointer;white-space:nowrap}
@media(max-width:480px){.masir-scene{flex-basis:38dvh}.masir-speech{top:12%;left:5%;max-width:45%;padding:6px 11px}.masir-top strong span{display:none}.masir-progress{font-size:.72rem}.masir-sound{font-size:.68rem;padding:4px 8px}.masir-bubble{min-height:46px;font-size:.9rem}.masir-body{padding-top:14px}}
[data-theme="dark"] .masir-bubble{background:#1c211d;color:#f3f2e9;border-color:#686d61}[data-theme="dark"] .masir-bubble[aria-pressed=true]{background:#50441c;border-color:#ffc900}
.masir-scene.is-walking .masir-traveler{animation:masir-walk-cycle .36s steps(1) infinite}
@keyframes masir-walk-cycle{0%,49%{background-position:0 0}50%,100%{background-position:-900px 0}}

[data-theme="dark"] .masir-reflection,[data-theme="dark"] .masir-shrink-hint{color:#e7dab8!important}

.masir-anchor-title{font-weight:700;margin:14px 0 4px}.masir-dialog[data-stage="4"] .masir-bubbles{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.masir-dialog[data-stage="4"] .masir-bubble{margin:0;min-height:46px;padding:7px 8px;text-align:center;font-size:.84rem}.masir-dialog[data-stage="4"] .masir-shrink{margin-top:8px}.masir-dialog[data-stage="4"] .masir-plank{margin-bottom:8px}.masir-dialog[data-stage="4"] .masir-shrink-hint{min-height:0;margin:4px 0}.masir-dialog[data-stage="4"] .masir-body>p{margin:4px 0}.masir-dialog[data-stage="4"] .masir-bubbles{margin:8px 0}
@media(max-width:380px){.masir-dialog[data-stage="4"] .masir-bubbles{grid-template-columns:1fr}.masir-dialog[data-stage="4"] .masir-bubble{min-height:38px}}
.masir-loop{display:grid;gap:8px;padding:16px 36px 16px 16px;background:#fff9e9;border-radius:14px;line-height:1.7}
.masir-field{display:block;font-weight:700;line-height:1.8}.masir-field input{display:block;width:100%;box-sizing:border-box;padding:14px;margin:8px 0;border:1px solid #aaa18f;border-radius:12px;background:#fffdf6;color:#111;font:inherit;font-weight:400}
.masir-bubble:nth-child(n){margin-inline-start:0;border-radius:12px;min-height:52px;font-size:1rem}.masir-secondary{flex-wrap:wrap}
.masir-enter{animation:masir-soft-enter .35s ease both}@keyframes masir-soft-enter{from{opacity:0;filter:blur(3px);transform:translateY(7px)}to{opacity:1;filter:blur(0);transform:none}}
.masir-dialog[data-stage="7"] .masir-scene{flex-basis:22dvh}
[data-theme="dark"] .masir-loop,[data-theme="dark"] .masir-field input{background:#1c211d;color:#f3f2e9}
@media(max-width:849px){.masir-dialog .masir-scene{flex-basis:23dvh;min-height:125px}.masir-dialog[data-stage="7"] .masir-scene{flex-basis:18dvh}.masir-body{padding:16px 22px}.masir-body h2{font-size:1.55rem}.masir-speech{font-size:.88rem;max-width:46%;padding:6px 10px}.masir-dialog[data-stage="5"] .masir-bubbles{grid-template-columns:repeat(3,minmax(0,1fr))}.masir-dialog[data-stage="5"] .masir-bubble{font-size:.86rem;text-align:center;padding:8px}}
@media(min-width:850px){.masir-dialog[data-stage="7"] .masir-scene{flex-basis:46%}}