/* One editorial stage, drawn for Misk rather than a matrix of feature cards. */
.intro-replay{display:inline-flex;align-items:center;gap:11px;background:none;border:0;color:var(--green);font-family:inherit;font-size:12px;font-weight:700;padding:12px 0;margin-top:12px;cursor:pointer}.intro-replay span{width:26px;height:26px;display:grid;place-items:center;border:1px solid #93afa2;border-radius:50%;font-size:11px}.intro-replay:hover{text-decoration:underline}
#misk-intro{color:#172c28;background:#f8faf2;font-family:Cairo,Tahoma,sans-serif;line-height:1.8;max-width:none;width:100%;height:100%;max-height:none;border:0;padding:0;overflow:auto;margin:0;inset:0}
/* Lock the page beneath the open native modal; the tour keeps its own scroll. */
html:has(dialog#misk-intro[open]),body:has(dialog#misk-intro[open]){overflow:hidden}
#misk-intro::backdrop{background:#102c25c9}#misk-intro[hidden],#misk-intro [hidden]{display:none!important}
#misk-intro:focus{outline:none}.intro-shell{width:min(1180px,calc(100% - 70px));margin:auto;min-height:100dvh;display:flex;flex-direction:column;padding-block:24px 22px}
.intro-top{display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid #d9e2d4;padding-bottom:20px}.intro-top .brand{display:flex;align-items:center;gap:12px;color:#172c28;text-decoration:none;font-size:29px;font-weight:700}.intro-top .brand img{object-fit:contain;width:45px;height:45px}.intro-top>span{font-size:10px;letter-spacing:2px;color:#748174}.intro-skip{font-size:11px;background:none;border:0;color:#647367;padding:10px;cursor:pointer}.intro-skip:hover{color:#087f6a;text-decoration:underline}
.intro-story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);align-items:center;gap:65px;flex:1;padding-block:36px}.intro-copy .eyebrow{color:#087f6a;font-size:11px;letter-spacing:.5px;margin-bottom:22px}.intro-copy :is(h1,h2){white-space:pre-line;font-size:clamp(28px,3.1vw,48px);font-weight:700;line-height:1.65;letter-spacing:-1.3px;margin:0 0 23px}.intro-copy>p{font-size:13px;color:#627067;max-width:400px;line-height:2.1}.intro-copy .intro-hint{font-size:10px;border-top:1px solid #d9e2d4;margin-top:28px;padding-top:14px;color:#7a877b}
.intro-visual{position:relative;min-height:390px;align-self:stretch;display:flex;align-items:center;min-width:0}.intro-visual:before{content:'';position:absolute;inset:12% 0 9% 0;border:1px solid #d7e2d2;background:#eaf1e2;transform:skewY(-3deg);border-radius:3px}.intro-visual:after{content:'';position:absolute;inset:15% 9px 6% -9px;border:1px solid #c69a5169;transform:skewY(3deg);pointer-events:none;z-index:0}.intro-scene{position:relative;z-index:1;width:100%;min-height:360px;padding:22px 30px;display:grid;align-content:center;animation:intro-enter .55s both}.intro-demo-caption{font-size:9px;letter-spacing:.5px;color:#728072;display:block;margin-top:14px;text-align:center}.intro-visual .demo-paper{width:min(360px,100%);background:#fffef7;border:1px solid #c8d8c5;margin:auto;box-shadow:15px 20px 0 #b7ccb625;padding:24px 27px;position:relative;transform:rotate(-2deg)}.demo-paper .paper-top{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#748174;border-bottom:1px solid #dde6d7;padding-bottom:12px;margin-bottom:20px}.paper-brand{font-size:16px;color:#087f6a;font-weight:700}.demo-paper h3{font-size:20px;margin:12px 0;color:#183c31}.demo-paper p{font-size:11px;color:#637362;line-height:1.95}.intro-answer-row{display:flex;gap:10px;margin-top:16px;direction:ltr}.intro-answer-row button{flex:1;min-height:43px;border:1px solid #c2d4bc;background:transparent;border-radius:3px;color:#087f6a;font:700 15px Cairo,sans-serif;cursor:pointer}.intro-answer-row [aria-pressed=true]{background:#087f6a;color:#fff;border-color:#087f6a}.intro-question{font:600 29px Cairo,sans-serif;direction:ltr;display:block;text-align:center;letter-spacing:2px;padding-block:12px;color:#183c31}.intro-demo-feedback{min-height:42px;padding-top:8px;margin-bottom:0!important;font-size:10px!important}.intro-demo-feedback[data-correct=true]{color:#087f6a!important}.intro-pencil{position:absolute;top:8px;left:12px;width:115px;transform:rotate(-14deg);animation:intro-pencil 4s ease-in-out infinite;z-index:3}.intro-pencil svg{width:100%;overflow:visible}.intro-notebook{position:absolute;right:4px;bottom:8px;color:#087f6a;font-size:9px;writing-mode:vertical-rl;letter-spacing:2px}
.teacher-sheet{transform:rotate(2deg)!important}.lesson-rail{display:flex;gap:0;margin-block:22px 15px;border-bottom:1px solid #d5dfcc}.lesson-rail button{flex:1;background:none;border:0;border-bottom:2px solid transparent;color:#758170;font:11px Cairo,sans-serif;padding:10px 5px;cursor:pointer}.lesson-rail [aria-pressed=true]{border-color:#087f6a;color:#087f6a;font-weight:700}.lesson-content{min-height:115px}.lesson-content h4{font-size:16px;margin:0 0 12px}.lesson-lines{display:flex;gap:9px;align-items:flex-end;height:45px;padding-top:10px}.lesson-lines i{display:block;width:10px;height:28px;background:#b2c8a7;animation:intro-bars 3s ease-in-out infinite}.lesson-lines i:nth-child(2){height:36px;animation-delay:.3s}.lesson-lines i:nth-child(3){height:22px;animation-delay:.6s}.lesson-lines i:nth-child(4){height:40px;animation-delay:.9s}.intro-document-tab{position:absolute;top:-14px;right:22px;background:#087f6a;color:#f6f8ef;font-size:9px;padding:7px 17px}
.quran-paper{transform:rotate(-1deg)!important}.quran-arch{position:absolute;top:-42px;left:20px;width:72px;height:102px;border:1px solid #c69a51;border-radius:50% 50% 0 0;z-index:-1}.quran-arch:before{content:'';position:absolute;inset:10px;border:1px solid #c69a5169;border-radius:50% 50% 0 0}.intro-wird{display:flex;gap:12px;flex-direction:column;margin-top:17px}.intro-wird button{display:flex;align-items:center;justify-content:space-between;background:none;border:0;border-bottom:1px solid #dce5d6;padding:8px 0;color:#637362;font:12px Cairo,sans-serif;text-align:right;cursor:pointer}.intro-wird button span:last-child{height:21px;width:21px;border:1px solid #bfceb4;display:grid;place-items:center;color:transparent;font-size:11px}.intro-wird [aria-pressed=true] span:last-child{background:#087f6a;color:#fff;border-color:#087f6a}.intro-leaf{position:absolute;width:66px;height:95px;right:9px;bottom:5px;transform:rotate(7deg);animation:intro-leaf 4s ease-in-out infinite}.intro-leaf path{stroke:#8da47a;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.family-paper{transform:rotate(1deg)!important}.family-rail{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block:21px 24px;position:relative}.family-rail:before{content:'';height:1px;position:absolute;left:20px;right:20px;top:13px;background:#b6c8ab}.family-rail button{position:relative;font:9px Cairo,sans-serif;color:#6a7866;border:0;background:none;padding:0;cursor:pointer;min-width:64px}.family-rail i{display:grid;place-items:center;width:26px;height:26px;border:1px solid #b6c8ab;background:#fffef7;margin:0 auto 8px;border-radius:50%;font-style:normal;color:#087f6a}.family-rail [aria-pressed=true] i{background:#087f6a;color:#fff;border-color:#087f6a}.family-note{min-height:88px}.family-note h4{font-size:16px;margin:0 0 12px}.family-mark{display:flex;align-items:center;gap:10px;border-top:1px solid #dce5d6;padding-top:14px;margin-top:14px;font-size:9px;color:#788571}.family-mark img{width:28px;height:28px;object-fit:contain;animation:intro-mark 5s ease-in-out infinite}
.intro-bottom{border-top:1px solid #d9e2d4;padding-top:20px}.intro-chapters{display:flex;align-items:center;justify-content:space-between;gap:30px}.intro-chapters [role=tablist]{display:flex;gap:24px}.intro-chapters [role=tab]{font:11px Cairo,sans-serif;display:flex;align-items:center;gap:8px;background:none;border:0;color:#768273;cursor:pointer;padding:6px 0;border-bottom:2px solid transparent}.intro-chapters [role=tab] span{font-size:9px;color:#99a490}.intro-chapters [aria-selected=true]{color:#087f6a;border-color:#087f6a;font-weight:700}.intro-count{font-size:10px;color:#788571;direction:ltr;letter-spacing:2px}.intro-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}.intro-move{display:flex;gap:12px}.intro-next{border:1px solid #087f6a;background:#087f6a;color:#fffef7;font:700 12px Cairo,sans-serif;min-height:43px;padding:11px 23px;border-radius:4px;cursor:pointer}.intro-prev{border:1px solid #ccd8c6;background:transparent;color:#667663;font:11px Cairo,sans-serif;padding:9px 15px;border-radius:4px;cursor:pointer}.intro-prev:disabled{opacity:.4;cursor:default}.intro-pause{background:none;border:0;color:#788571;font:10px Cairo,sans-serif;padding:8px 0;cursor:pointer}.intro-footer-note{font-size:9px;color:#83907d;margin:15px 0 0}.intro-next:hover{background:#066b59}.intro-controls :focus-visible,#misk-intro button:focus-visible,#misk-intro a:focus-visible{outline:3px solid #c69a51;outline-offset:5px}
#misk-intro[data-paused=true] *,#misk-intro[data-paused=true] *:before,#misk-intro[data-paused=true] *:after{animation-play-state:paused!important}
body.intro-page #misk-intro{position:relative;height:auto;width:100%}body.intro-page .intro-shell{min-height:calc(100dvh - 86px);padding-top:30px}body.intro-page .intro-top .brand{visibility:hidden}body.intro-page .intro-links{display:flex;justify-content:center;gap:26px;flex-wrap:wrap;padding:25px 20px 40px;font-size:12px;color:#087f6a}
@keyframes intro-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes intro-pencil{0%,100%{transform:translateY(0) rotate(-14deg)}50%{transform:translateY(-9px) rotate(-11deg)}}@keyframes intro-bars{0%,100%{transform:scaleY(.85);transform-origin:bottom}50%{transform:scaleY(1);transform-origin:bottom}}@keyframes intro-leaf{0%,100%{transform:rotate(7deg)}50%{transform:rotate(2deg)}}@keyframes intro-mark{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:900px){.intro-shell{width:calc(100% - 40px)}.intro-story{gap:25px;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);padding-block:26px}.intro-copy :is(h1,h2){font-size:34px}.intro-scene{padding:18px}.intro-visual{min-height:360px}.intro-copy>p{font-size:12px}.intro-chapters [role=tablist]{gap:15px}.intro-chapters [role=tab]{font-size:10px}}
@media(max-width:650px){.intro-shell{width:calc(100% - 34px);padding-block:14px 17px;min-height:100dvh}.intro-top{padding-bottom:12px}.intro-top .brand{font-size:25px}.intro-top .brand img{width:34px;height:34px}.intro-top>span{display:none}.intro-skip{font-size:10px}.intro-story{display:flex;flex-direction:column;gap:8px;padding-block:22px 18px;align-items:stretch}.intro-copy .eyebrow{font-size:9px;margin:0 0 9px}.intro-copy :is(h1,h2){font-size:26px;line-height:1.65;letter-spacing:-.7px;margin-bottom:12px}.intro-copy>p{font-size:11px;line-height:1.9;max-width:none;margin:0}.intro-copy .intro-hint{display:none}.intro-visual{min-height:295px;align-self:auto}.intro-scene{min-height:295px;padding:23px 20px 15px}.intro-visual .demo-paper{max-width:300px;padding:17px 22px}.demo-paper .paper-top{margin-bottom:12px;padding-bottom:9px}.demo-paper h3{font-size:17px}.intro-question{font-size:23px;padding-block:4px}.intro-answer-row{margin-top:8px}.intro-answer-row button{min-height:36px}.intro-demo-feedback{min-height:39px;font-size:9px!important}.intro-pencil{width:90px;top:9px;left:2px}.intro-demo-caption{font-size:8px;margin-top:10px}.lesson-rail{margin-block:14px 12px}.lesson-content{min-height:94px}.lesson-lines{height:36px}.quran-arch{height:75px;width:52px;top:-26px}.intro-leaf{width:45px;right:0}.intro-wird{gap:5px;margin-top:10px}.intro-wird button{font-size:11px;padding:5px 0}.family-rail{margin-block:14px 17px}.family-note{min-height:75px}.family-mark{margin-top:7px;padding-top:10px}.intro-bottom{padding-top:13px}.intro-chapters{gap:15px}.intro-chapters [role=tablist]{gap:13px;flex-wrap:wrap}.intro-chapters [role=tab]{font-size:9px;gap:5px;padding-block:4px}.intro-chapters [role=tab] span{display:none}.intro-count{font-size:8px;letter-spacing:1px;white-space:nowrap}.intro-actions{gap:12px;margin-top:14px;flex-wrap:wrap}.intro-next{min-height:39px;font-size:11px;padding:9px 17px}.intro-prev{font-size:10px;padding:8px 12px}.intro-pause{font-size:9px}.intro-footer-note{font-size:8px;margin-top:11px}}
@media(prefers-reduced-motion:reduce){#misk-intro *,#misk-intro *:before,#misk-intro *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{#misk-intro,.intro-replay{display:none!important}}

/* Pause keeps the next scene visible. */
#misk-intro[data-paused=true] .intro-scene{animation:none!important}.intro-top{position:sticky;top:0;z-index:5;background:#f8faf2}.intro-groups{width:100%;height:55px;margin-top:5px}.intro-groups circle{animation:intro-dot 4s ease-in-out infinite}.intro-groups circle:nth-child(4n){animation-delay:.5s}.intro-groups circle:nth-child(4n+1){animation-delay:1s}@keyframes intro-dot{0%,100%{fill:#9bb78d}50%{fill:#087f6a}}

/* Mobile reading sizes */
@media(max-width:650px){.intro-copy>p{font-size:13px}.intro-demo-caption,.intro-footer-note{font-size:10px}.intro-chapters [role=tab]{font-size:11px}.intro-next{font-size:12px}.intro-demo-feedback{font-size:10px!important}}

/* Keep controls in view on short desktop windows without shrinking type. */
@media(min-width:901px) and (max-height:800px){
  dialog#misk-intro[open] .intro-shell{padding-block:16px}
  dialog#misk-intro[open] .intro-top{padding-bottom:12px}
  dialog#misk-intro[open] .intro-story{padding-block:18px}
  dialog#misk-intro[open] .intro-visual{min-height:330px}
  dialog#misk-intro[open] .intro-scene{min-height:330px;padding-block:16px}
  dialog#misk-intro[open] .demo-paper{padding:18px 24px}
  dialog#misk-intro[open] .demo-paper .paper-top{padding-bottom:8px;margin-bottom:12px}
  dialog#misk-intro[open] .demo-paper h3{margin-block:8px}
  dialog#misk-intro[open] .intro-question{padding-block:8px}
  dialog#misk-intro[open] .intro-answer-row{margin-top:10px}
  dialog#misk-intro[open] .intro-demo-caption{margin-top:10px}
  dialog#misk-intro[open] .intro-demo-feedback{min-height:38px}
  dialog#misk-intro[open] .lesson-rail{margin-block:16px 12px}
  dialog#misk-intro[open] .lesson-content{min-height:105px}
  dialog#misk-intro[open] .intro-wird{gap:8px;margin-top:12px}
  dialog#misk-intro[open] .intro-wird button{padding-block:6px}
  dialog#misk-intro[open] .family-rail{margin-block:16px 18px}
  dialog#misk-intro[open] .family-mark{padding-top:10px;margin-top:10px}
  dialog#misk-intro[open] .intro-bottom{padding-top:14px}
  dialog#misk-intro[open] .intro-actions{margin-top:14px}
  dialog#misk-intro[open] .intro-footer-note{margin-top:10px}
}