@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap";.journey-hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;align-items:start}.journey-hero .hero-copy{padding:3rem 0 2rem 2rem}.journey-hero .hero-house-wrap{padding:2rem 1.5rem 2rem .5rem}.journey-home-actions{display:flex;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}.journey-house{width:100%;max-width:680px;margin:auto;color:#fbf3ff;position:relative}.jh-roof{height:95px;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(140deg,#c49bd9,#159B72 50%,#3f215f);display:flex;justify-content:center;align-items:flex-end;padding-bottom:13px;border-bottom:5px solid #d6ae69;filter:drop-shadow(0 3px 5px #0003)}.jh-roof span{font-family:Noto Naskh Arabic,serif;font-size:1.65rem;color:#fff0c9}.jh-building{background:linear-gradient(90deg,#4c2e68,#8057a0 50%,#4c2e68);border:3px solid #c3a0d5;border-radius:0 0 22px 22px;box-shadow:0 24px 60px #13051f55;overflow:hidden}.jh-floor{padding:.7rem .8rem .95rem;border-bottom:7px solid #3e2358;box-shadow:inset 0 -2px #d7b89455;background-image:linear-gradient(90deg,transparent 48%,#ffffff04 50%,transparent 52%)}.jh-floor-label{font-size:.8rem!important;margin:0 0 .65rem!important;font-weight:500;color:#f2dbad;text-align:center}.jh-floor-label .vn-bi,.jh-floor-label .bi{align-items:center}.jh-floor-label .ar{font-size:1em;color:inherit!important}.jh-rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;direction:ltr}.jh-room{display:flex;align-items:center;flex-direction:column;min-width:0;border:1px solid #c4a2da3d;border-radius:12px;padding:.65rem .35rem .45rem;background:#32194740;color:#f8efff;position:relative;cursor:pointer}.jh-room:disabled{opacity:.7;cursor:not-allowed}.jh-room.jh-available{border-color:#dfbf8390}.jh-room.jh-done{background:#b789d025;border-color:#f0d59d}.jh-door-frame{width:70%;max-width:86px;height:100px;position:relative;display:block;border:4px solid #c9a070;border-radius:28px 28px 2px 2px;perspective:500px;background:#201229;box-shadow:0 5px 9px #14051a60;overflow:hidden}.jh-light{position:absolute;inset:0;background:radial-gradient(ellipse at bottom,#fff3ae,#b67acd 75%);opacity:.12}.jh-door{position:absolute;inset:0;background:linear-gradient(120deg,#a37ab8,#684283);border-radius:23px 23px 0 0;transform-origin:left center;transition:transform .6s ease;display:flex;justify-content:center;align-items:center;color:#f5dbaa;box-shadow:inset 0 0 0 2px #4c2d64}.jh-door-panel{position:absolute;inset:10px 8px;border:1px solid #dfbfda55;border-radius:15px 15px 2px 2px}.jh-handle{position:absolute;right:8px;top:58%;width:7px;height:7px;border-radius:50%;background:#ffe2a8;box-shadow:0 0 5px #f4cf82}.jh-done .jh-light{opacity:.75}.jh-opening .jh-door{transform:rotateY(-100deg)}.jh-opening .jh-light{opacity:1}.jh-room-name{font-size:.73rem;line-height:1.45;margin-top:.65rem;min-height:3rem;width:100%}.jh-room-name>[lang],.jh-room-status>[lang]{text-align:center!important;color:inherit!important}.jh-room-name .ar{font-size:1.14em;line-height:1.65}.jh-room-status{font-size:.62rem;color:#e6d1f0;min-height:2.3rem;margin-top:.3rem}.jh-progress-label{font-size:.65rem;color:#f7dfa5}.jh-room progress{width:85%;height:4px;margin-top:.25rem;accent-color:#f2cf88}.jh-entrance{padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;background:#35204366}.jh-main-door{position:relative;display:flex;width:105px;height:90px;border:4px solid #dab375;border-radius:40px 40px 2px 2px;background:#fff0b4;overflow:hidden;perspective:400px}.jh-main-door>span{width:50%;height:100%;background:linear-gradient(100deg,#82549d,#4f2e70);transition:transform .8s;transform-origin:left center;border:1px solid #c3a1bb}.jh-main-door>span:nth-child(2){transform-origin:right center}.jh-main-door>svg{position:absolute;top:45%;left:38%;color:#f4d597;transition:opacity .2s}.jh-entered .jh-main-door>span:first-child,.jh-knocking .jh-main-door>span:first-child{transform:rotateY(-95deg)}.jh-entered .jh-main-door>span:nth-child(2),.jh-knocking .jh-main-door>span:nth-child(2){transform:rotateY(95deg)}.jh-entered .jh-main-door>svg,.jh-knocking .jh-main-door>svg{opacity:0}.jh-knocking .jh-main-door{animation:jhKnock .35s 2}.jh-entry-button{min-height:48px;max-width:100%;background:#fbefd6;color:#512f6b;border-color:#f7d58e}.jh-entry-button:disabled{opacity:1;background:transparent;color:#f5e7fa;border-color:transparent;cursor:default}.jh-key-collection{text-align:center;padding:1rem .25rem}.jh-key-collection .bi>[lang]{text-align:center!important;color:#f5e7ff!important}.jh-key-row{display:grid;grid-template-columns:repeat(10,1fr);gap:.3rem;margin-top:.7rem}.jh-key-row>span{display:flex;flex-direction:column;align-items:center;gap:.1rem;color:#9b83ae;background:#ffffff08;padding:.35rem .05rem;border-radius:9px}.jh-key-row>span.collected{background:#ecd29920;color:#f7da99;box-shadow:inset 0 0 0 1px #ffe2a130}.jh-key-row small{font-size:.6rem}.jh-final{border:1px solid #e8c581;border-radius:18px;padding:1rem;background:#9b70b42b;text-align:center;color:#ffebbd}.journey-complete .jh-building{box-shadow:0 0 32px #edce9250,0 15px 45px #15071f50}.jh-final .bi>[lang]{text-align:center!important;color:inherit!important}.jr-dialog{border:1px solid #d8bbeb;border-radius:24px;padding:2rem;width:min(500px,calc(100% - 2rem));max-height:90dvh;overflow:auto;background:#fcf8ff;color:#0D5D4B;text-align:center;box-shadow:0 24px 80px #10051a66}.jr-dialog::backdrop{background:#160d26b5;backdrop-filter:blur(4px)}.jr-dialog .bi>[lang]{text-align:center!important}.jr-close{position:absolute;right:.7rem;top:.4rem;font-size:1.8rem;border:0;background:none;min-width:44px;min-height:44px}.jr-animation{height:155px;position:relative;display:grid;place-items:center;margin:1rem 0}.jr-frame{width:100px;height:135px;border:7px solid #ca9e62;border-radius:40px 40px 0 0;background:radial-gradient(#fff3ac,#cf9adb);perspective:500px;overflow:hidden;box-shadow:0 0 30px #d9b9ea}.jr-door{height:100%;width:100%;border-radius:30px 30px 0 0;background:linear-gradient(135deg,#a67bbd,#583273);transform-origin:left;animation:jrOpen 1.8s ease forwards}.jr-animation>svg{position:absolute;color:#ebc26c;animation:jrKey 1.8s ease forwards;filter:drop-shadow(0 3px 3px #55385d)}.jr-count{font-size:2rem;color:#68408b}.jr-dialog .btn{margin-top:.7rem;min-height:48px}.journey-house button:focus-visible{outline:3px solid #ffe3a5;outline-offset:3px}@keyframes jhKnock{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}@keyframes jrOpen{0%,40%{transform:rotateY(0)}to{transform:rotateY(-100deg)}}@keyframes jrKey{0%{transform:rotate(-30deg) scale(.7)}45%{transform:rotate(65deg) scale(1)}to{transform:translateY(-45px) rotate(0);opacity:0}}@media(max-width:1100px){.journey-hero{grid-template-columns:1fr!important}.journey-hero .hero-copy,.lang-ar .journey-hero .hero-copy{padding:1.5rem 1.2rem .5rem;text-align:center}.journey-hero .hero-house-wrap,.lang-ar .journey-hero .hero-house-wrap{padding:1rem}.journey-home-actions{justify-content:center}.journey-house{max-width:620px}}@media(max-width:650px){.jh-roof{height:70px}.jh-floor{padding:.65rem .4rem .8rem}.jh-rooms{gap:.35rem}.jh-room{padding:.5rem .2rem}.jh-door-frame{height:84px;width:76%;border-width:3px}.jh-room-name{font-size:.65rem;min-height:3.3rem}.jh-room-status{font-size:.6rem;min-height:2.6rem}.jh-key-row{gap:.15rem}.jh-key-row svg{width:16px}.jr-dialog{padding:1.6rem 1rem}.jh-entrance{padding:.75rem}}@media(prefers-reduced-motion:reduce){.jh-door,.jh-main-door>span{transition:none}.jh-knocking .jh-main-door,.jr-door,.jr-animation>svg{animation:none}.jr-door{transform:rotateY(-100deg)}.jr-animation>svg{opacity:0}}.vn-bi{display:flex;flex-direction:column;gap:.35rem}.vn-bi>[lang=ms]{text-align:left;direction:ltr}.vn-bi>[lang=ar]{text-align:right;direction:rtl}.vn-bi>.ar{font-size:1.3em;color:inherit}.vn-instruction{font-size:.94rem;color:#675773;line-height:1.7}.vn-map{margin:1rem 0 1.5rem}.vn-root{max-width:480px;margin:0 auto 1.5rem;padding:1rem 1.3rem;border-radius:12px;color:#fff;background:#159B72;position:relative;font-weight:650}.vn-root .vn-bi>[lang]{text-align:center}.vn-root:after{content:"";position:absolute;left:50%;bottom:-1.5rem;height:1.5rem;border-left:2px solid #d3c1e7}.vn-branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.8rem;align-items:start}.vn-node{background:var(--tone-bg,#f8f5fc);border:1px solid var(--tone-line,#d9c9e8);border-top:4px solid var(--tone,#76529c);border-radius:12px;min-width:0;overflow:hidden}.vn-node-button{display:flex;align-items:center;gap:.65rem;text-align:start;background:none;border:0;padding:1rem;width:100%;color:var(--tone,#159B72);min-height:84px}.vn-node-button>.vn-bi{flex:1;font-weight:650;font-size:1rem}.vn-node-number{font-size:.88rem;align-self:start;padding-top:.15rem}.vn-node>div{padding:0 1rem 1rem}.vn-node p{font-size:1rem}.vn-node .vn-concept-example{font-size:1.55rem;background:#fff;border-radius:8px;padding:.5rem .65rem;line-height:2.1;color:#382747}.vn-compact .vn-node-button{min-height:70px}.tone-isim{--tone:#215ca4;--tone-bg:#edf5ff;--tone-line:#b8d3f4}.tone-fiil{--tone:#9c4b0b;--tone-bg:#fff3e7;--tone-line:#eac49e}.tone-harf{--tone:#146953;--tone-bg:#eaf8f2;--tone-line:#add9c9}.tone-mixed{--tone:#68517f;--tone-bg:#f4effa;--tone-line:#d3c3e2}.vn-more{border:1px solid #e0d5eb;background:#fcfaff;border-radius:10px;padding:1rem;margin:1rem 0}.vn-more summary{font-size:.98rem}.vn-more summary>.vn-bi{display:inline-flex;vertical-align:top}.vn-more[open] summary{margin-bottom:.75rem}.vn-tip{padding:1.1rem 1.25rem;border-inline-start:4px solid #b78329;background:#fff8e9;border-radius:10px;margin:1.2rem 0}.vn-tip strong{color:#7c551c}.vn-tip p:last-child{margin-bottom:0}.vn-legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:1rem 0}.vn-legend>span{display:flex;align-items:center;gap:.4rem;color:var(--tone);font-size:.875rem}.vn-legend .vn-bi{flex-direction:row;align-items:center;gap:.35rem}.vn-legend i{width:10px;height:10px;border-radius:3px;background:var(--tone)}.vn-sentence{display:flex;justify-content:center;align-items:stretch;gap:.6rem;flex-wrap:wrap;margin:.8rem 0;padding:1rem .6rem;background:#fcfaff;border-radius:12px;border:1px solid #ece4f3}.vn-word{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;max-width:100%;padding:.4rem .9rem;border:1px solid var(--tone-line,#d9c9e8);border-bottom:3px solid var(--tone,#76529c);border-radius:10px;background:var(--tone-bg,#f8f5fc);color:var(--tone,#159B72);min-height:52px;transition:background .15s,box-shadow .15s}.vn-word>.ar{font-size:1.95rem;line-height:2;overflow-wrap:anywhere}.vn-word .vn-word-label{font-size:.875rem;gap:0}.vn-word-label>[lang]{text-align:center}.vn-word-label>.ar{font-size:1.1em}.vn-word.is-selected{box-shadow:0 0 0 2px var(--tone);background:#fff}.vn-word:disabled{opacity:.5}.vn-word.correct:disabled{opacity:1}.vn-analysis-slot{min-height:65px}.vn-analysis{display:grid;grid-template-columns:minmax(100px,auto) 1fr;gap:1rem;align-items:center;padding:1rem 1.2rem;border-inline-start:4px solid var(--tone);background:var(--tone-bg);border-radius:10px}.vn-analysis-word{font-size:2rem;color:var(--tone);text-align:center}.vn-analysis p{margin:0!important;font-size:1rem}.vn-lab{padding:1.2rem;border:1px solid #ded0eb;background:#faf7fd;border-radius:14px;margin-bottom:1.8rem}.vn-lab h3{margin-top:0}.vn-switch{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.vn-switch .btn{font-size:.9rem;padding:.55rem .85rem}.vn-build-target{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;min-height:110px;background:#fff;border:2px dashed #c2a9d9;border-radius:12px;padding:1rem}.vn-build-target>.vn-bi>[lang]{text-align:center;color:#726080}.vn-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:.75rem}.vn-summary-card{border:1px solid var(--tone-line,#ddcfea);border-top:4px solid var(--tone,#76529c);padding:1.1rem;border-radius:12px;background:var(--tone-bg,#faf7fd);min-width:0}.vn-summary-card strong{color:var(--tone,#159B72)}.vn-summary-card>p.ar{font-size:1.6rem;color:#483159;background:#fff;padding:.6rem;border-radius:8px;line-height:2.1}.vn-summary-card p{font-size:1rem}.vn-key-challenge{padding:1.2rem;border:1px solid #e2c88f;background:#fffaf0;border-radius:12px;margin:1.4rem 0}.vn-key-challenge>p.ar{font-size:1.8rem;text-align:center}.lang-ar .vn-map,.lang-ar .vn-summary,.lang-ar .vn-lab,.lang-ar .vn-key-challenge,.lang-ar .vn-more,.lang-ar .vn-tip{direction:rtl}.lang-ar .vn-bi>[lang=ar]{text-align:right}.lang-ar .vn-root .vn-bi>[lang]{text-align:center}.lang-ar .vn-analysis{direction:rtl}.vn-node-button:hover{background:#ffffff70}.vn-more summary:hover{color:#45245f}@media(max-width:650px){.vn-branches,.vn-summary-grid{grid-template-columns:1fr}.vn-node-button{min-height:66px}.vn-root{font-size:.95rem}.vn-word{padding:.35rem .7rem}.vn-word>.ar{font-size:1.75rem}.vn-sentence{gap:.5rem;padding:.8rem .4rem}.vn-analysis{grid-template-columns:1fr;gap:.3rem}.vn-lab,.vn-key-challenge{padding:1rem}.vn-word-label{font-size:.875rem!important}.vn-legend{gap:.5rem}.vn-summary-card{padding:1rem}.vn-summary-card>p.ar{font-size:1.5rem}.vn-build-target{padding:.7rem}}@media(prefers-reduced-motion:reduce){.vn-word{transition:none}}@media print{.vn-node>div[hidden]{display:block}.vn-summary-grid{grid-template-columns:repeat(2,1fr)}.vn-summary-card{break-inside:avoid}.vn-key-challenge{display:none}}.infographic-notes{--ig-purple:#159B72;--ig-line:#d8c7e9;--ig-soft:#f4edf9;color:#352440;min-width:0}.ig-banner{display:flex;align-items:flex-start;gap:1rem;padding:1.3rem;border:1px solid var(--ig-line);border-radius:20px;background:linear-gradient(120deg,#ede1f7,#FBFDFC)}.ig-banner>svg{flex-shrink:0;color:#159B72;margin-top:.4rem}.ig-banner h3{margin:0!important}.ig-banner p:last-child{margin-bottom:0}.ig-instruction{font-size:.94rem;color:#685474}.ig-map{display:grid;grid-template-columns:repeat(var(--ig-count,3),minmax(0,1fr));gap:.8rem;margin:1rem 0}.ig-node{border:1px solid var(--ig-line);border-radius:16px;background:#faf7fd;overflow:hidden;min-width:0}.ig-node.is-open{border-color:#159B72;box-shadow:0 5px 18px #159B7215}.ig-node-trigger{display:flex;align-items:center;gap:.65rem;width:100%;min-height:86px;background:none;border:0;padding:1rem;color:#0D5D4B}.ig-node-trigger>.vn-bi{flex:1;font-weight:650}.ig-index{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;background:#E8F6F0;font-size:.8rem}.ig-node>div{padding:0 1rem 1rem}.ig-example{font-size:clamp(1.35rem,3vw,1.7rem)!important;line-height:2.15!important;overflow-wrap:anywhere;margin:.8rem 0!important;color:#1F64A5}.ig-section-title{display:flex;align-items:center;gap:.7rem;color:#159B72;margin:1rem 0}.ig-section-title h3{margin:0!important}.ig-rule-panel{border:1px solid var(--ig-line);border-radius:15px;padding:1rem 1.2rem;background:#FBFDFC;margin:.9rem 0}.ig-rule-panel summary,.ig-compare summary,.ig-summary-card summary{cursor:pointer;color:#0D5D4B}.ig-rule-panel summary .vn-bi{display:inline-flex;vertical-align:top}.ig-full-rule{line-height:1.95;white-space:pre-line}.ig-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1rem 0}.ig-compare,.ig-summary-card{border:1px solid var(--ig-line);border-radius:18px;padding:1.1rem;margin:0;background:#FBFDFC;min-width:0}.ig-application{background:#eef7f3;border-color:#b6d9ca}.ig-attention,.ig-conditions{background:#fff8ed;border-color:#e7d3b3}.ig-chip{display:flex;gap:.6rem;align-items:center;font-weight:650}.ig-tap{font-size:.82rem;color:#65716B;font-weight:400;margin-top:.5rem}.ig-compare[open] .ig-tap,.ig-summary-card[open] .ig-tap{display:none}.ig-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}.ig-summary-1{background:#eef7f3;border-color:#b6d9ca}.ig-summary-2{background:#fff8ed;border-color:#e7d3b3}.ig-modes{display:flex;justify-content:center;gap:.65rem;flex-wrap:wrap;margin:1rem 0}.ig-clue{display:flex;align-items:flex-start;gap:.8rem;border-radius:15px;background:#FFF7E3;padding:1rem;color:#7A4C00}.ig-clue svg{flex-shrink:0;margin-top:.2rem}.ig-answer-line{border:2px solid transparent;border-radius:16px;transition:background-color .2s,border-color .2s}.ig-answer-line.ig-solved{background:#edf8f3;border-color:#54957a;animation:igGlow .65s ease-out}.infographic-notes :is(button,summary):focus-visible{outline:3px solid #a96b1c;outline-offset:4px}.ig-identify{margin:1rem 0}.ig-compare summary>.ig-example,.ig-summary-card summary>.ig-example{font-weight:500}@keyframes igGlow{0%{box-shadow:0 0 #4d957950}to{box-shadow:0 0 0 14px transparent}}@media(max-width:650px){.ig-map,.ig-comparison,.ig-summary{grid-template-columns:1fr}.ig-banner{align-items:center;flex-direction:column;text-align:center;padding:1rem}.ig-node-trigger{min-height:68px}.ig-example{text-align:center}.ig-section-title,.ig-chip{justify-content:center}.ig-rule-panel{padding:1rem}.ig-summary-card summary,.ig-compare summary{text-align:center}.ig-modes .btn{min-height:44px}.ig-clue{flex-direction:column;align-items:center}}@media(prefers-reduced-motion:reduce){.ig-answer-line{transition:none}.ig-answer-line.ig-solved{animation:none}}.t1-infographic{--t1-ink:#0D5D4B;--t1-line:#d8c4ea;color:#33243f}.t1-banner{display:flex;gap:1rem;align-items:center;padding:1.2rem;border-radius:18px;background:linear-gradient(130deg,#eee2fa,#f9f4fd);border:1px solid var(--t1-line)}.t1-banner svg{color:var(--t1-ink);flex-shrink:0}.t1-banner h3{margin:0 0 .5rem}.t1-flow,.t1-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:1rem 0}.t1-card{border:1px solid var(--t1-line);border-radius:16px;overflow:hidden;background:#faf7fd;min-width:0}.t1-card.is-open{border-color:#8253a8;box-shadow:0 5px 18px #159B7215}.t1-card>button{display:flex;align-items:center;gap:.7rem;width:100%;padding:1rem;background:transparent;border:0;color:var(--t1-ink);min-height:85px}.t1-card>button .vn-bi{flex:1}.t1-card>div{padding:0 1rem 1rem}.t1-example{display:block;font-size:1.65rem;line-height:2!important;color:#0D5D4B}.t1-keypoint{display:flex;justify-content:center;gap:.7rem;align-items:center;padding:1rem;background:#f0e8f8;border-radius:13px;color:#0D5D4B;margin-top:1.2rem}.t1-comparisons{display:grid;gap:.8rem}.t1-compare{padding:1rem 1.2rem;border:1px solid #d8c4ea;border-inline-start:5px solid #a979b5;border-radius:14px;background:#fcf9fd;margin:0}.t1-compare.is-complete{border-color:#95c5b5;border-inline-start-color:#28705b;background:#eff8f4}.t1-compare summary{cursor:pointer}.t1-compare summary .vn-bi{display:inline-flex}.t1-compare.is-complete .t1-example{color:#205e4b}.t1-build{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;padding:1.5rem;border:2px dashed #bc9cd5;border-radius:18px;margin:1rem 0;font-family:Noto Naskh Arabic,serif;font-size:2rem;background:#f8f2fc}.t1-gap{min-width:4rem;border-bottom:2px solid #aa84c7}.t1-build.t1-success{border:2px solid #4f9278;background:#edf8f2;animation:t1Glow .65s ease-out}.t1-choices{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin:1rem 0}.t1-choices .t1-selected{background:#159B72;color:#fff}.t1-question{text-align:center;font-size:2rem;padding:1.3rem;background:#FFF7E3;border-radius:18px}.t1-summary-card{margin:0;padding:1rem;border:1px solid var(--t1-line);border-radius:16px;background:#FBFDFC;min-width:0}.t1-summary-card summary{color:#0D5D4B;cursor:pointer}.t1-summary-card:nth-child(2){background:#eef7f3}.t1-summary-card:nth-child(3){background:#fff6e9}.t1-summary-card .t1-example{font-size:1.45rem;overflow-wrap:anywhere}.t1-infographic button:focus-visible,.t1-infographic summary:focus-visible{outline:3px solid #99631b;outline-offset:4px}@keyframes t1Glow{0%{box-shadow:0 0 #76ba9855}to{box-shadow:0 0 0 15px transparent}}@media(max-width:650px){.t1-flow,.t1-summary{grid-template-columns:1fr}.t1-banner{flex-direction:column;text-align:center}.t1-card>button{min-height:64px}.t1-example{text-align:center}.t1-build{font-size:1.8rem;padding:1rem}.t1-summary-card summary{text-align:center}}@media(prefers-reduced-motion:reduce){.t1-build.t1-success{animation:none}}:root{font-size:16px;--purple:#159B72;--purple-dark:#073E34;--ink:#2f263d;--muted:#736780;--gold:#ac7c2c;--line:#e7e1ee;--soft:#f6f3fa;--paper:#fff}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:#F5FBF8;color:var(--ink)}.app{min-height:100vh;background:radial-gradient(ellipse at 15% 0%,#41C79B35,transparent 52%),linear-gradient(145deg,#073E34,#159B72 58%,#25A77A);background-attachment:fixed;padding-bottom:1px}button,input,select{font:inherit}button,summary{cursor:pointer}button,a,input,select{-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #c99946;outline-offset:4px}button{color:inherit}svg{flex-shrink:0}h1,h2,h3,p{overflow-wrap:anywhere}h1,h2,h3{font-weight:650}p{line-height:1.85;white-space:pre-line}a{color:#0D5D4B;text-decoration:underline}.ar{font-family:Noto Naskh Arabic,Traditional Arabic,Georgia,serif;line-height:1.9;font-size:1.3em;letter-spacing:0!important}.bi{display:flex;flex-direction:column;gap:.25rem}.bi>[lang=ms]{direction:ltr;text-align:left}.bi>[lang=ar]{direction:rtl;text-align:right}.lang-bi .bi>[lang=ar]{color:#65716B}.lang-ar .bi>[lang=ar]{text-align:inherit;color:inherit}.topbar{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:85px;padding:1rem 1.3rem;color:#fff}.brand{display:flex;align-items:center;gap:.7rem;background:none;border:0;color:#fff;font-weight:650;font-size:.95rem;letter-spacing:.07em;padding:0}.language-choice select{background:#ffffff10;color:#fff;border:1px solid #ffffff45;border-radius:9px;padding:.65rem .9rem;min-height:44px;max-width:190px}.language-choice option{background:#fff;color:var(--ink)}.official-logo{display:block;position:relative;overflow:hidden;background:#fff;border-radius:10px;flex-shrink:0}.official-logo img{position:absolute;width:150%;height:auto;max-width:none;left:50%;top:50%;transform:translate(-50%,-50%)}.hero-logo{width:310px;height:219px;margin:0 auto}.compact-logo{width:134px;height:89px}.shell{width:calc(100% - 2rem);max-width:940px;margin:0 auto 2rem;padding:1.8rem 2rem;border-radius:18px;background:var(--paper)}.shell h1{font-size:clamp(1.45rem,3.8vw,2rem);line-height:1.35;margin:.15rem 0 1rem}.shell h1 .ar{font-size:1.07em}.shell h2{font-size:1.25rem;margin:.3rem 0 1rem;line-height:1.5}.shell h3{font-size:1.1rem;margin:1rem 0 .6rem}.shell p{margin:.8rem 0}.home-shell{max-width:690px;background:none;padding:0;border:0}.home-panel{background:#fff;border-radius:20px;padding:1.3rem 2.5rem 1.5rem;box-shadow:0 18px 65px #23113324}.home-intro{font-size:1rem;text-align:center;margin:.15rem 0 1.1rem!important}.home-intro .bi{text-align:center}.home-intro>[lang]{text-align:center}.home-intro .ar{font-size:1.14em}.house-gate{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:.9rem;padding:1.05rem 0;border-block:1px solid var(--line);margin:1.1rem 0 1.3rem}.house-symbol{position:relative;color:#a38cae;width:72px;height:80px;display:grid;place-items:center}.house-lock{position:absolute;left:26px;top:36px;background:#fff;border-radius:8px;padding:4px;color:#8e6c37}.gate-copy{min-width:0}.gate-copy>strong{font-size:.95rem;gap:.1rem}.gate-copy>strong .ar{font-size:1.1em}.gate-caption{font-size:.86rem;line-height:1.55;margin-top:.4rem;gap:.2rem}.gate-caption .ar{font-size:1.15em}.house-gate progress{margin-top:.6rem}.house-gate.is-ready .house-symbol,.house-gate.is-open .house-symbol{color:#976b25}.house-gate.is-open{background:#fffcf4;border-color:#ebd7ad;border-radius:12px;padding:1.05rem}.gate-button{grid-column:1/-1;width:100%;margin-top:.25rem}.house-gate.is-opening .house-lock{animation:unlock-turn 1s ease-in-out both}.house-gate.is-open .house-symbol{animation:open-door .6s ease-out both}.house-gate.is-opening .house-symbol>svg{animation:open-door 1s ease both}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:46px;padding:.75rem 1.2rem;background:var(--purple);color:#fff;border:1px solid var(--purple);border-radius:10px;font-weight:600;font-size:.95rem;text-decoration:none}.btn .bi>[lang=ar]{color:inherit;font-size:1.14em}.btn.light{background:#fff;color:var(--purple);border-color:#dfd4eb}.btn.gold{background:#ae7c2b;color:#fff;border-color:#ae7c2b}.btn.selected,.btn.light.selected{background:#eee6f8;border-color:#8261ac}.btn:hover:not(:disabled){filter:brightness(.97)}.start-button{display:flex;width:100%;padding:.8rem 1.2rem}.start-button .bi{flex:1;text-align:center;gap:.1rem}.start-button .bi>[lang]{text-align:center}.next-topic{font-size:.85rem;margin:.65rem 0 0!important;color:var(--muted);text-align:center;gap:0}.next-topic>[lang]{text-align:center!important}.next-topic .ar{font-size:1.15em}.home-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:1rem}.home-menu button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;background:#fff;border:0;border-radius:12px;padding:1.1rem .65rem;min-height:112px;color:#65498a;font-size:.9rem}.home-menu button .bi{gap:.1rem}.home-menu button .bi>[lang]{text-align:center}.home-menu .ar{font-size:1.1em}.home-menu button:hover{background:#f4eefb}.back-strip{padding:0;background:none;margin-bottom:.5rem;border-radius:0}.back-strip .text-btn{color:#fff}.text-btn{display:inline-flex;align-items:center;gap:.5rem;border:0;background:none;padding:.4rem 0;color:var(--purple);font-size:.9rem}.text-btn .bi{gap:0}.text-btn .ar{font-size:1.08em}.reading-shell{max-width:850px}.reading-title{padding-top:1rem}.eyebrow{font-size:.85rem;color:#65716B;font-weight:600}.eyebrow .ar{font-size:1.1em}.reading-title .eyebrow{flex-direction:row;gap:.7rem;align-items:center}.reading-title h1{font-size:1.6rem;margin-top:.6rem}.step-track{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:1.25rem 0 1.5rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem;position:relative}.step-track button{display:flex;align-items:center;justify-content:center;flex:1;max-width:64px;min-height:42px;border:1px solid #DCE8E2;border-radius:9px;background:#fff;color:#8B9992;font-weight:600;font-size:.95rem}.step-track button.current{background:var(--purple);border-color:var(--purple);color:#fff}.step-track button.done{background:#EFF9F5;color:#0D5D4B;border-color:#CBE6DC}.step-track button.done.current{background:var(--purple);color:#fff}.step-track button:disabled{background:#FBFDFC}.lesson-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem;min-width:0}.reading-shell>.lesson-panel{border:0;border-radius:0;padding:0}.step-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.step-heading h2{margin-top:0}.step-count{font-size:.85rem;color:#8a7a95;text-align:end}.step-count .ar{font-size:1.07em}.lead{font-size:1.07rem;line-height:1.9}.lead .ar{font-size:1.4em}.lesson-panel .bi{gap:.55rem}.lesson-panel .step-heading .bi{gap:.1rem}.note{padding:1.1rem 1.2rem;background:var(--soft);border-inline-start:3px solid #F3A31A;border-radius:0 8px 8px 0;margin:1.5rem 0}.note>p:last-child{margin-bottom:0}.note .ar{color:#5F6E67!important}.note strong{font-size:.95rem}.lesson-footer{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);margin-top:1.8rem;padding-top:1.25rem}.lesson-footer .bi{gap:0}.step-hint{font-size:.85rem;color:var(--muted);margin:.7rem 0 0!important}.step-hint .ar{font-size:1.1em}.example{font-size:clamp(1.65rem,4vw,2.2rem);line-height:2.1!important;text-align:center;background:#EEF6FD;padding:1.3rem;border-radius:11px;color:#1F64A5}.flash{width:100%;min-height:210px;padding:1.8rem;border:1px dashed #9EC8ED;border-radius:14px;background:#EEF6FD;color:#1F64A5;text-align:start}.flash h3{font-size:1.5rem}.options{display:flex;flex-direction:column;gap:.7rem;margin:1.5rem 0}.option{display:flex;gap:.9rem;align-items:center;text-align:start;padding:.95rem 1rem;background:#fff;border:1px solid #d9cde5;border-radius:9px;min-height:56px;color:var(--ink)}.option .bi{flex:1}.option:disabled{opacity:1}.option-number{font-size:.85rem;color:#8a759e;flex-shrink:0}.correct{background:#eef5ed!important;border-color:#6f946a!important}.wrong{background:#fff0ee!important;border-color:#c2887b!important}.feedback{background:#f4f0f8;padding:1.1rem;border-radius:10px;margin:1.2rem 0}.feedback.success{background:#eef5ed}.feedback.retry{background:#fff5ec}.achievement{text-align:center;padding:1.3rem 0;display:flex;flex-direction:column;align-items:center;gap:.5rem}.achievement>svg{color:#ac7c2c}.achievement h2{font-size:2rem}.achievement .bi{max-width:680px}.achievement>.bi>[lang]{text-align:center}.achievement .note{text-align:start;width:100%}.earned-key{color:#a3732c;background:#fbf4e5;border:1px solid #eddfbb;padding:1.1rem;border-radius:50%;margin-bottom:.5rem}.topic-controls{display:flex;gap:.8rem;align-items:stretch;margin-top:1.4rem}.search{display:flex;align-items:center;gap:.65rem;border:1px solid #ddd3e7;border-radius:9px;padding:.7rem .85rem;flex:1;background:#fff;min-width:0}.search svg{color:#9f88b3}.search input{width:100%;min-width:0;color:var(--ink);border:0;padding:.2rem;background:none}.search button{border:0;background:none;font-size:1.3rem;color:#997dae}.page-intro{color:var(--muted);font-size:.95rem}.page-intro .ar{font-size:1.2em}.filters,.actions,.number-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.4rem}.filter{padding:.55rem .9rem;background:#fff;color:var(--muted);border:1px solid #e4dcea;border-radius:8px;font-size:.85rem}.filter .ar{font-size:1.1em}.filter.selected{color:var(--purple);background:#f2ecf9;border-color:#c4afd7}.topic-list{border-top:1px solid var(--line)}.topic-row{display:flex;align-items:center;gap:.3rem;border-bottom:1px solid var(--line)}.topic-link{display:flex;align-items:center;gap:1rem;flex:1;min-width:0;border:0;background:none;padding:1rem .25rem;text-align:start}.topic-link h2{font-size:1rem;flex:1;margin:0;font-weight:550}.topic-link h2 .ar{font-size:1.2em}.topic-number{width:34px;height:38px;display:grid;place-items:center;font-size:.9rem;color:#9f8aac;flex-shrink:0}.topic-number.finished{color:#a3732c}.topic-step-count{font-size:.85rem;color:#9a89a7;white-space:nowrap}.topic-link>svg{color:#ac9ab7}.save-btn{padding:.6rem;border:0;background:none;color:#bcadca}.save-btn.saved{color:#a47528}.save-btn.saved svg{fill:#f2e2bf}.topic-link:hover h2{color:var(--purple)}.tool-list{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:1.5rem}.tool-card{display:flex;align-items:center;gap:1.25rem;text-align:start;padding:1.4rem .4rem;background:#fff;border:0;border-bottom:1px solid var(--line)}.tool-card>svg{color:#987ab3}.tool-card>div{flex:1}.tool-card h2{font-size:1.1rem;margin:0}.tool-card h2 .ar{font-size:1.15em}.tool-card p{font-size:.9rem;color:var(--muted);margin:.4rem 0 0}.tool-card p .ar{font-size:1.15em}.tool-card:hover{background:#FBFDFC}.word-line,.builder-target{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;padding:1.5rem 0}.word{font-size:1.8rem;color:var(--purple-dark);background:#faf7fd;border:1px solid #d9cbe6;border-radius:8px;padding:.35rem 1rem}.word.selected{background:var(--purple);color:#fff;border-color:var(--purple)}.builder-target{align-items:center;min-height:110px;border:1px dashed #b79dcc;border-radius:10px;padding:1rem;background:#faf7fd;margin:1rem 0}.classify-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.7rem 0;border-bottom:1px solid #dfd4e9}.classify-row>.ar{min-width:80px;font-size:1.65rem}.classify-row .actions{margin:0}.classify-row .btn{padding:.4rem .6rem;font-size:.85rem}.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.5rem 0}.gloss-card{padding:1.15rem;text-align:start;background:#fff;border:1px solid var(--line);border-radius:10px}.gloss-card h3{margin:0 0 .7rem;font-size:1.05rem}.gloss-card>span{font-size:.85rem;color:#947ba5}.gloss-card p{font-size:.95rem}.notice{background:#fff4dc;color:#715628;padding:1rem;border:1px solid #dac08d;max-width:900px;margin:1rem auto;border-radius:8px}details{margin-top:1.4rem}summary{font-weight:550;color:var(--purple);display:list-item}summary>.bi{display:inline-flex}.footer{display:flex;justify-content:center;color:#ece2f7;max-width:950px;margin:1.3rem auto 1.8rem;font-size:.85rem;opacity:.85}.footer>.bi{flex-direction:row;gap:1rem;align-items:center}.footer .ar{color:#ece2f7!important;font-size:1.1em}.skip-link{position:absolute;top:-100px;background:#fff;padding:1rem;z-index:100}.skip-link:focus{top:0}#content:focus{outline:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes unlock-turn{0%{transform:rotate(0)}45%{transform:rotate(-45deg);color:#c59434}to{transform:rotate(0);opacity:.3}}@keyframes open-door{0%{opacity:.35;transform:scale(.91)}to{opacity:1;transform:scale(1)}}@media(max-width:650px){.topbar{min-height:73px;padding:.8rem 1rem}.brand{font-size:.82rem;gap:.5rem}.brand>svg{width:20px}.language-choice select{font-size:.85rem;padding:.6rem;max-width:150px}.compact-logo{width:112px;height:75px}.shell{padding:1.4rem 1.15rem;border-radius:15px}.home-shell{padding:0;max-width:520px}.home-panel{padding:1rem 1.3rem 1.25rem;border-radius:16px}.hero-logo{width:270px;max-width:100%;height:191px}.home-intro{font-size:.95rem}.house-gate{grid-template-columns:59px 1fr;gap:.6rem}.house-symbol{width:57px}.house-symbol>svg{width:56px}.house-lock{left:18px;top:38px;padding:3px}.house-lock svg{width:17px}.gate-caption{font-size:.82rem}.gate-caption .ar{font-size:1.14em}.home-menu{gap:.5rem}.home-menu button{padding:.9rem .3rem;font-size:.8rem;min-height:107px}.home-menu .ar{font-size:1.16em}.home-menu button>svg{width:20px}.reading-title h1{font-size:1.4rem}.step-track{gap:.4rem;margin-bottom:1.2rem}.step-track button{max-width:48px;min-height:39px;font-size:.9rem}.lesson-panel{padding:1.1rem}.reading-shell>.lesson-panel{padding:0}.step-heading{gap:.6rem}.step-heading h2{font-size:1.15rem}.step-count{font-size:.78rem}.lesson-footer .btn{padding:.65rem .8rem;font-size:.85rem}.lesson-footer{gap:.6rem}.lead{font-size:1.03rem}.lead .ar{font-size:1.42em}.topic-link{gap:.45rem}.topic-link h2{font-size:.95rem}.topic-number{width:25px;font-size:.82rem}.topic-link>svg{display:none}.topic-step-count{font-size:.78rem}.save-btn{padding:.55rem .3rem}.topic-controls{gap:.5rem}.topic-controls>.btn{padding:.6rem .7rem;font-size:.85rem}.level-filters{gap:.35rem}.filter{padding:.45rem .7rem}.card-grid{grid-template-columns:1fr}.tool-card{gap:.85rem;padding:1.25rem 0}.tool-card>svg:last-child{width:16px}.tool-card h2{font-size:1rem}.tool-card p{font-size:.85rem}.word{font-size:1.6rem;padding:.3rem .8rem}.note{padding:1rem}.footer{font-size:.8rem}.back-strip{padding:0 0 .1rem;background:none}.number-nav .btn{min-width:41px;padding:.6rem .8rem}}@media(max-width:360px){.hero-logo{width:245px;height:173px}.home-panel{padding:1rem}.home-menu button{font-size:.75rem}.topbar{gap:.5rem}.brand{font-size:.74rem}.language-choice select{max-width:130px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media print{.app{background:#fff}.topbar,.footer,.step-track,.lesson-footer,.btn,.back-strip{display:none}.shell{max-width:none;width:100%;padding:0;border:0;margin:0}.note{break-inside:avoid}}.home-shell{max-width:740px}.home-panel{padding:1.1rem 2.2rem 1.5rem}.home-panel .hero-logo{width:180px;height:123px}.home-panel .home-intro{font-size:.94rem;margin:.1rem 0 .6rem!important}.house-experience{margin:.6rem 0 1.1rem}.house-scene{position:relative;width:100%;max-width:370px;aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:24px;background:#f6f1fc;isolation:isolate}.house-art{position:absolute;inset:0;background-image:url(../house-nahu-sprite.png);background-size:200% 133.333333%;background-repeat:no-repeat}.house-art-closed{background-position:left 45%;opacity:1;transition:opacity 1.1s ease}.house-art-open{background-position:right 45%;opacity:0;transition:opacity 1.1s ease}.is-opening .house-art-open,.is-open .house-art-open{opacity:1}.is-opening .house-art-closed,.is-open .house-art-closed{opacity:0}.window-light{position:absolute;width:14.2%;height:26.3%;top:42.47%;clip-path:polygon(50% 0,72% 16%,91% 34%,100% 50%,100% 100%,0 100%,0 50%,9% 34%,28% 16%);pointer-events:none;background:radial-gradient(ellipse at center,#fff8c2ba,#ffc75c70 46%,#ffc75c00 74%);mix-blend-mode:screen;filter:blur(2px);transition:opacity 1s ease}.window-light-left{left:18.1%}.window-light-right{left:67.9%}.scene-lock{position:absolute;top:62%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:45px;height:45px;border-radius:50%;color:#7b5219;background:#fff7de;border:1px solid #dcb874;box-shadow:0 3px 12px #4c2b3926}.is-ready .scene-lock{background:#f5cf7b;color:#593805}.is-opening .scene-lock{animation:house-unlock 1.1s ease forwards}.house-progress-panel{position:relative;z-index:1;max-width:560px;margin:.65rem auto 0;padding:1rem 1.15rem;background:#fcfaff;border:1px solid #e6dceb;border-radius:14px}.key-progress-heading{display:flex;gap:.65rem;align-items:center}.collection-icon{color:#987024;display:flex}.key-progress-heading>.bi{flex:1;font-size:.94rem;gap:.1rem}.key-progress-heading>.bi>.ar{font-size:1.16em}.key-total{display:flex;align-items:baseline;gap:.35rem;white-space:nowrap;color:#766187}.key-total b{font-size:1.65rem;color:#159B72;font-weight:700}.key-total>span{font-size:.95rem}.key-collection{display:grid;grid-template-columns:repeat(19,minmax(0,1fr));gap:4px;margin:1rem 0 .7rem}.key-collection>span{display:grid;place-items:center;min-height:26px;color:#c7bdd1;border-radius:5px;background:#f0eaf6}.key-collection>span.collected{background:#f6e4b7;color:#8b6018}.key-collection svg{max-width:100%}.house-step-progress{appearance:none;display:block;width:100%;height:5px;border:0;border-radius:20px;background:#e9e0f1;overflow:hidden}.house-step-progress::-webkit-progress-bar{background:#e9e0f1}.house-step-progress::-webkit-progress-value{background:#8660ac;border-radius:20px}.house-step-progress::-moz-progress-bar{background:#8660ac}.house-status{font-size:.9rem;color:#6b597c;line-height:1.65;margin-top:.65rem;gap:.1rem}.house-status>.ar{font-size:1.15em}.is-open .house-progress-panel{background:#fffaf0;border-color:#e6cf9f}.is-open .key-total b{color:#9c7020}.open-house-button{margin:.9rem 0 0;width:100%}.new-key-status:empty{display:none}.new-key-status{font-size:.9rem;color:#8a601e;margin-top:.6rem}.new-key-status>.bi{gap:.1rem}.key-arrival{position:absolute;left:46%;top:35%;color:#b88725;filter:drop-shadow(0 2px 4px #fff);animation:house-key-arrival 2.7s ease-in-out both}.home-panel .start-button{max-width:560px;margin:0 auto}.home-panel .next-topic{max-width:560px;margin:.65rem auto 0!important}.home-menu{max-width:650px;margin:1rem auto 0}.home-menu button{min-height:98px}.lang-ar .key-progress-heading{direction:rtl}.lang-ar .key-total{direction:ltr}.lang-ar .house-status>.ar{text-align:right}@keyframes house-unlock{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}45%{transform:translate(-50%,-50%) rotate(-40deg);opacity:1}to{transform:translate(-50%) rotate(0);opacity:0}}@keyframes house-key-arrival{0%{opacity:0;transform:translateY(-30px) scale(.65)}25%{opacity:1;transform:translateY(0) scale(1.25)}65%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(160px) scale(.5)}}@media(max-width:650px){.home-panel{padding:1rem 1rem 1.2rem}.home-panel .hero-logo{width:145px;height:99px}.home-panel .home-intro{font-size:.875rem}.house-scene{max-width:290px;border-radius:18px}.house-progress-panel{padding:.85rem}.key-collection{gap:3px}.key-collection>span{min-height:23px}.key-collection svg{width:12px}.key-progress-heading{gap:.5rem}.key-progress-heading>.bi{font-size:.875rem}.key-total b{font-size:1.45rem}.house-status{font-size:.875rem}.scene-lock{width:36px;height:36px}.scene-lock svg{width:20px}.home-menu button{min-height:94px;font-size:.875rem}.home-menu{gap:.5rem}.key-arrival svg{width:27px}}@media(prefers-reduced-motion:reduce){.house-art,.window-light{transition:none}.key-arrival{animation:none;display:none}.is-opening .scene-lock{animation:none;opacity:0}}@media print{.house-scene{print-color-adjust:exact;-webkit-print-color-adjust:exact}.key-arrival,.scene-lock{display:none}}.house-layout-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1.15rem auto;max-width:620px}.house-part-button{border:1px solid #ded0eb;background:#faf7fd;border-radius:13px;padding:1rem;display:flex;gap:.7rem;text-align:start;align-items:flex-start;color:#563579}.house-part-number{color:#a6782b;background:#fff3d8;min-width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:.9rem}.house-part-button>div{flex:1;min-width:0}.house-part-button strong{font-size:1.05rem}.house-part-button .part-tag{font-size:.9rem;margin-top:.4rem;color:#786386}.house-part-button .ar{font-size:1.15em}.house-part-button:hover{background:#eee5f8;border-color:#ad8fc8}.house-map-intro{font-size:1rem;max-width:560px;margin:1rem auto!important;color:#675174}.house-route-note{background:#f5effb;border-radius:10px;padding:1rem;margin:1rem 0;font-size:1rem}.house-route-note .ar{font-size:1.25em}.house-filter-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.house-filter-nav .btn{font-size:.9rem;padding:.55rem .8rem}.room-description{border-inline-start:3px solid #b89354;padding:.5rem 1rem;margin:1rem 0}.decoration-controls{display:flex;flex-direction:column;gap:.7rem;margin:1.2rem 0}.decoration-controls select{font:inherit;background:#fff;border:1px solid #d6c3e5;border-radius:9px;padding:.75rem;width:100%;min-height:48px;color:#463057}.house-note-link{margin:0 0 1rem;padding:.7rem 1rem;border:1px solid #e5d8ef;background:#faf7fd;border-radius:9px;font-size:.9rem}.house-note-link .ar{font-size:1.15em}.lang-ar .house-part-button{direction:rtl}.home-panel .house-scene{max-width:310px}.home-panel .hero-logo{width:155px;height:106px}.home-panel .house-progress-panel{margin-top:.5rem}.house-layout-nav+.start-button{margin-top:1rem}@media(max-width:650px){.house-part-button{padding:.85rem;gap:.5rem}.house-part-number{min-width:24px;height:26px}.house-part-button strong{font-size:.94rem}.house-part-button .part-tag{font-size:.875rem}.house-layout-nav{gap:.55rem}.home-panel .house-scene{max-width:265px}.home-panel .hero-logo{width:140px;height:96px}}@media(max-width:360px){.house-layout-nav{grid-template-columns:1fr}}.related-topic-links{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.related-topic-links .btn{justify-content:flex-start;text-align:start}.lesson-reference{font-size:.875rem;margin:1.2rem 0}.key-collection{grid-template-columns:repeat(25,minmax(0,1fr))!important;gap:3px}.key-collection>span{min-height:19px}.key-collection svg{width:11px}.lesson-reference .ar{font-size:1.15em}.curriculum-update{font-size:.9rem;background:#fff6df;border:1px solid #ead6a5;border-radius:10px;padding:.8rem;margin:.7rem 0}.curriculum-update .ar{font-size:1.2em}@media(max-width:650px){.key-collection{grid-template-columns:repeat(15,minmax(0,1fr))!important}.key-collection>span{min-height:19px}}.learning-path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0;text-align:left;width:100%}.learning-space{display:flex;align-items:center;gap:14px;width:100%;padding:18px;border:1px solid #d8caeb;border-radius:18px;background:#fff;color:#452569;text-align:start;cursor:pointer;font:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}.learning-space:hover{transform:translateY(-2px);border-color:#76519c;box-shadow:0 5px 18px #159B7218}.learning-space:focus-visible{outline:3px solid #8054af;outline-offset:3px}.learning-space:first-child{grid-column:1/-1}.space-current{border:2px solid #76519c;background:#f7f1fc}.space-complete{border-color:#b19449;background:#fffcf3}.space-index{display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:50%;background:#eee3fa;font-weight:700;font-size:20px}.space-complete .space-index{background:#f4e6b7;color:#795a12}.space-copy{display:grid;gap:7px;flex:1;min-width:0}.space-copy strong{font-size:17px}.space-description{font-size:14px;line-height:1.6;color:#67577b}.space-copy progress{width:100%;height:7px;accent-color:#76519c}.space-count{font-size:14px}.space-review{margin-top:30px;padding-top:20px;border-top:1px solid #d8caeb}@media(max-width:640px){.learning-path{grid-template-columns:1fr}.learning-space{padding:15px;gap:10px}}@media(prefers-reduced-motion:reduce){.learning-space{transition:none}.learning-space:hover{transform:none}}.reward-dialog{width:min(560px,calc(100% - 1.5rem));max-height:calc(100dvh - 1.5rem);border:1px solid #d9c19b;border-radius:22px;padding:1.2rem 1.5rem;background:#fff;color:#3f2c52;overflow:auto;box-shadow:0 30px 100px #25123966}.reward-dialog::backdrop{background:#261137bd;backdrop-filter:blur(5px)}.reward-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}.reward-eyebrow{font-size:.875rem;color:#86653a}.reward-top .text-btn{min-height:44px;padding:.3rem .6rem}.reward-title{margin:.25rem 0;font-size:1.8rem;color:#684191}.reward-dialog h3{margin:.4rem 0 .7rem;font-size:1.05rem}.reward-title>[lang],.reward-dialog h3 .bi>[lang]{text-align:center!important}.reward-scene{max-width:265px!important;width:100%;margin:.4rem auto}.reward-scene .house-art{transition:opacity 1s ease}.reward-turning-key{position:absolute;left:50%;top:61%;color:#ad7621;background:#fff0cd;border:1px solid #dab165;border-radius:50%;width:54px;height:54px;display:grid;place-items:center;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 6px #fff6)}.reward-stage-0 .reward-turning-key{animation:reward-key-appear .8s ease both}.reward-stage-1 .reward-turning-key{animation:reward-key-turn 1.2s ease both}.reward-stage-2 .reward-turning-key{animation:reward-key-collect 1.25s ease both}.reward-stage-3 .reward-turning-key{display:none}.reward-status{font-size:1rem;color:#785627;text-align:center;min-height:45px}.reward-status .bi>[lang]{text-align:center!important}.reward-counter{display:flex;justify-content:center;align-items:center;gap:.5rem;margin:.7rem auto;color:#996c25;background:#fff6e3;border:1px solid #ebd39d;border-radius:13px;padding:.7rem 1rem;max-width:250px}.reward-counter strong{font-size:1.8rem}.reward-counter>.bi{font-size:.875rem}.reward-counter>.bi .ar{font-size:1.1em}.reward-copy{font-size:1rem;line-height:1.7}.reward-copy>[lang]{text-align:center!important}.reward-actions{display:flex;flex-direction:column;gap:.6rem}.reward-actions .bi>[lang]{text-align:center!important}.reward-audio{display:flex;justify-content:center;margin:.7rem auto 0;min-height:44px}.reward-audio-message{font-size:.875rem}.reward-spark{position:absolute;left:var(--x);top:25%;width:6px;height:10px;background:#d3a549;opacity:0;pointer-events:none;border-radius:2px}.reward-stage-2 .reward-spark{animation:reward-spark-fall 1.3s var(--delay) ease-out both}.reward-stage-3 .reward-counter{animation:reward-counter-settle .4s ease both}.house-progress-panel .metaphor-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.9rem}.metaphor-progress>div{border:1px solid #e4d8ed;border-radius:9px;padding:.5rem;background:#fff;min-width:0}.metaphor-progress .bi{font-size:.875rem}.metaphor-progress .ar{font-size:1.12em}.metaphor-progress progress{width:100%;height:5px;accent-color:#b38a35}.metaphor-progress small{font-size:.875rem;color:#785e88}.foundation-light{position:absolute;left:6%;width:88%;top:83%;height:4%;background:radial-gradient(ellipse,#ffd977a8,transparent 70%);filter:blur(3px);pointer-events:none}.pillar-light{position:absolute;top:43%;height:37%;width:5%;background:linear-gradient(90deg,transparent,#ffe19399,transparent);filter:blur(2px);pointer-events:none}.pillar-light-left{left:6%}.pillar-light-right{right:6%}.main-house-sparks{position:absolute;inset:0;pointer-events:none}.main-house-sparks .reward-spark{animation:reward-spark-fall 1.3s var(--delay) ease-out both}@keyframes reward-key-appear{0%{opacity:0;transform:translate(-50%,-160%) scale(1.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes reward-key-turn{0%{transform:translate(-50%,-50%) rotate(0)}65%,to{transform:translate(-50%,-50%) rotate(-90deg)}}@keyframes reward-key-collect{0%{opacity:1;transform:translate(-50%,-50%) rotate(-90deg)}40%{opacity:1;transform:translate(-50%,10%) rotate(0)}to{opacity:0;transform:translate(-50%,140px) scale(.4)}}@keyframes reward-spark-fall{0%{opacity:0;transform:translateY(0)}20%{opacity:1}to{opacity:0;transform:translate(var(--drift),180px) rotate(170deg)}}@keyframes reward-counter-settle{0%{transform:scale(.94)}70%{transform:scale(1.04)}to{transform:scale(1)}}@media(max-width:650px){.reward-dialog{padding:1rem;border-radius:16px}.reward-scene{max-width:220px!important}.reward-title{font-size:1.5rem}.reward-turning-key{width:43px;height:43px}.reward-turning-key svg{width:31px}.reward-dialog h3{font-size:1rem}}@media(prefers-reduced-motion:reduce){.reward-dialog *{animation:none!important;transition:none!important}.reward-spark,.key-arrival{display:none!important}}@media print{.reward-dialog{display:none}}.app{position:relative;isolation:isolate}.app:before{content:"";position:fixed;inset:-12px;z-index:-1;pointer-events:none;background-image:url(../islamic-pattern.svg);background-size:260px 260px;opacity:.23;filter:blur(1.6px)}.official-logo{isolation:isolate;box-shadow:0 0 22px #159B7226}.official-logo:after{content:"";position:absolute;inset:-25% auto -25% -75%;width:35%;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,#eee4fa18 15%,#fff9 50%,#ddc8f233 75%,transparent);transform:translate(0) skew(-20deg);animation:logo-light-sweep 7s ease-in-out infinite}.official-logo:hover:after,.official-logo:focus-within:after{animation-play-state:paused}@keyframes logo-light-sweep{0%,12%{transform:translate(0) skew(-20deg);opacity:0}18%{opacity:.8}52%{transform:translate(650%) skew(-20deg);opacity:.8}58%,to{transform:translate(650%) skew(-20deg);opacity:0}}@media(max-width:650px){.app:before{background-size:190px 190px;opacity:.2}}@media(prefers-reduced-motion:reduce){.official-logo:after{animation:none;opacity:0}}@media print{.app{background:#fff}.app:before,.official-logo:after{display:none}}:root{--bg-deep:#29143e;--bg-mid:#4a286d;--bg-soft:#72509a;--gold-soft:#e8c47b;--cream:#fff7eb}body{background:var(--bg-deep)}.app{background:radial-gradient(circle at 72% 30%,rgba(179,113,224,.24),transparent 34%),radial-gradient(circle at 18% 10%,rgba(130,79,174,.32),transparent 36%),linear-gradient(135deg,#261039,#3b1c59 48%,#5a327e)}.app:before{inset:0;background-image:url(../arabesque-gold.png);background-size:430px auto;background-repeat:repeat;opacity:.075;filter:hue-rotate(228deg) saturate(.45) brightness(1.4);mix-blend-mode:screen}.topbar{max-width:1440px;min-height:92px;padding:1rem 2rem;border-bottom:1px solid rgba(255,255,255,.08)}.brand{font-family:Georgia,Times New Roman,serif;font-size:1.15rem;letter-spacing:.02em}.brand svg{color:var(--gold-soft)}.shell{max-width:1180px}.reading-shell{max-width:1080px}.home-stage{width:min(1440px,calc(100% - 3rem));margin:0 auto 2rem;min-height:calc(100vh - 150px);display:grid;place-items:center}.home-hero{position:relative;width:100%;min-height:680px;display:grid;grid-template-columns:minmax(340px,.82fr) minmax(500px,1.18fr);align-items:center;gap:2rem;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:34px;background:linear-gradient(115deg,#220f33b3,#4a256775);box-shadow:0 28px 90px #12071d4d;backdrop-filter:blur(2px)}.home-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 48%,rgba(239,201,255,.16),transparent 36%),linear-gradient(90deg,rgba(18,7,28,.34),transparent 50%);pointer-events:none}.hero-copy{position:relative;z-index:2;padding:4rem 1rem 4rem 4.5rem;color:var(--cream)}.hero-official-logo{position:relative;display:block;width:min(350px,74%);margin:0 0 1.05rem;border-radius:26px;padding:.4rem;background:linear-gradient(135deg,#ffffff24,#ffffff0d);box-shadow:0 14px 34px #1303203d,inset 0 0 0 1px #ffffff24;overflow:hidden}.hero-official-logo:before{content:"";position:absolute;inset:-30% auto -30% -45%;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),rgba(255,244,214,.68),rgba(255,255,255,.12),transparent);transform:skew(-22deg);animation:logoShine 4.6s ease-in-out infinite}.hero-official-logo:after{content:"";position:absolute;inset:0;border-radius:26px;box-shadow:0 0 28px #d1a3ff2e,0 0 48px #e8c47b1a;pointer-events:none}.hero-official-logo img{display:block;width:100%;height:auto;object-fit:contain;border-radius:20px;filter:drop-shadow(0 10px 22px rgba(19,3,32,.18))}.ruang-mark{width:88px;height:88px;display:grid;place-items:center;color:var(--gold-soft);margin:0 0 .6rem}.ruang-mark svg{width:78px;height:78px;stroke-width:1.3}.hero-copy h1{font-family:Georgia,Times New Roman,serif;font-weight:500;font-size:clamp(5rem,8vw,8.8rem);line-height:.88;letter-spacing:-.055em;margin:0;color:#fff2df;text-shadow:0 8px 38px rgba(8,1,15,.3)}.hero-welcome{margin:0 0 .75rem;color:#f0d8ad;letter-spacing:.14em;text-transform:uppercase;font-size:.86rem;font-weight:700}.hero-welcome .ar{color:#f0d8ad!important;font-size:1.06em;letter-spacing:normal;text-transform:none}.hero-summary{max-width:560px;margin:1.1rem 0 0;color:#f4ebfb;line-height:1.85;font-size:1.05rem}.hero-summary .ar{color:#f5eafb!important;font-size:1.12em}.hero-summary.emphasis{margin-top:.55rem;color:#ffe7bc;font-weight:700}.hero-summary.emphasis .ar{color:#ffe7bc!important}.hero-highlights{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.35rem 0 .25rem}.hero-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .9rem;border-radius:999px;background:#ffffff14;border:1px solid rgba(255,233,188,.22);color:#fff3df;font-size:.9rem;font-weight:600;backdrop-filter:blur(4px)}.hero-chip:before{content:"\2726";color:var(--gold-soft)}.hero-chip .ar{color:#fff3df!important;font-size:1.06em}.ruang-rule{display:flex;align-items:center;gap:16px;margin:2rem 0 2.2rem;width:min(360px,90%)}.ruang-rule span{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold-soft))}.ruang-rule span:last-child{background:linear-gradient(90deg,var(--gold-soft),transparent)}.ruang-rule i{width:11px;height:11px;border:2px solid var(--gold-soft);transform:rotate(45deg)}.hero-start{min-width:310px;display:flex;align-items:center;justify-content:center;gap:.9rem;padding:1rem 1.35rem;border-radius:999px;border:1px solid rgba(255,221,162,.72);background:linear-gradient(135deg,#753796f2,#482064f5);color:#fff7ec;font-weight:700;font-size:1.05rem;box-shadow:0 0 0 3px #ce8eff14,0 16px 36px #15071e3d}.hero-start:hover{transform:translateY(-2px);box-shadow:0 0 0 4px #d8a1ff1c,0 18px 42px #15071e52}.hero-start .bi{flex-direction:row;gap:.5rem}.hero-start .bi>[lang=ar]{color:#f5dfc0}.hero-start>svg:first-child{color:var(--gold-soft)}.hero-house-wrap{position:relative;z-index:1;padding:3.5rem 4rem 3.5rem 0;display:grid;place-items:center}.hero-house-wrap:before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(244,196,255,.23),rgba(114,60,157,.07) 52%,transparent 72%);filter:blur(10px)}.hero-house-wrap .house-experience{width:100%;margin:0;position:relative}.hero-house-wrap .house-scene{max-width:590px;width:min(100%,590px);border-radius:30px;background:#ffffff0a;box-shadow:0 34px 65px #0a021261,0 0 0 1px #ffffff14}.hero-house-wrap .scene-lock{width:58px;height:58px;background:#34154aeb;color:var(--gold-soft);border-color:#e8c47bb3;box-shadow:0 0 30px #e8c47b33}.learning-overlay{position:fixed;inset:0;z-index:90;display:flex;justify-content:flex-end;background:#13071d94;backdrop-filter:blur(8px);animation:overlay-in .22s ease-out}.learning-drawer{position:relative;width:min(620px,94vw);height:100%;overflow:auto;padding:2rem 2rem 2.4rem;background:linear-gradient(180deg,#3b1c56,#2b153f);color:#fff;border-left:1px solid rgba(237,202,255,.18);box-shadow:-26px 0 80px #0a021161;animation:drawer-in .28s ease-out}.drawer-close{position:absolute;top:1.1rem;right:1.2rem;width:44px;height:44px;border:0;border-radius:50%;background:#ffffff14;color:#fff;font-size:1.9rem;line-height:1}.drawer-heading{display:flex;gap:1rem;align-items:flex-start;padding-right:3rem;margin-bottom:1.4rem}.drawer-heading>svg{color:var(--gold-soft);margin-top:.25rem}.drawer-heading h2{margin:0;font-family:Georgia,Times New Roman,serif;font-size:2rem;font-weight:550}.drawer-heading p{margin:.35rem 0 0;color:#c9b8d7;line-height:1.55;font-size:.92rem}.drawer-heading .ar{color:#dfcde8!important}.drawer-key-summary{display:grid;grid-template-columns:52px 1fr;gap:.8rem 1rem;align-items:center;padding:1rem 1.1rem;margin:0 0 1rem;border-radius:18px;background:#ffffff12;border:1px solid rgba(232,196,123,.22)}.drawer-key-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#4b2b1c;background:linear-gradient(145deg,#f3d69a,#c88e3f)}.drawer-key-summary>div{display:flex;align-items:center;gap:1rem}.drawer-key-summary>div>.bi{flex:1}.drawer-key-summary>div>span{font-size:1.2rem;font-weight:700;color:#f5d999}.drawer-key-summary progress{grid-column:1/-1;width:100%;height:6px;accent-color:#d4a556}.learning-drawer .learning-path{display:flex;flex-direction:column;gap:.75rem;margin:1rem 0}.learning-drawer .learning-space{position:relative;display:grid;grid-template-columns:64px 1fr 22px;align-items:center;gap:1rem;min-height:96px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#ffffff12,#ffffff0b);color:#fff;padding:.95rem 1rem;overflow:hidden}.learning-drawer .learning-space:before{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--accent,rgba(232,196,123,.65));opacity:.9}.learning-drawer .learning-space:hover{background:#ffffff1a;transform:translate(-2px)}.learning-drawer .learning-space.space-current{border-color:#efc97f9e;box-shadow:0 0 0 1px #efc97f2e inset;background:linear-gradient(90deg,#c17d3c24,#ffffff0f)}.learning-drawer .learning-space.space-complete{border-color:#dbbf7c47}.learning-drawer .space-index{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:#ffffff14;color:#f0d18f;font-size:.95rem;font-weight:800;letter-spacing:.04em;box-shadow:inset 0 0 0 1px #ffffff14}.learning-drawer .space-icon-emoji{font-size:1.2rem;line-height:1}.learning-drawer .space-copy{display:flex;flex-direction:column;gap:.35rem;min-width:0}.learning-drawer .space-meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.learning-drawer .space-tag{display:inline-flex;padding:.2rem .58rem;border-radius:999px;background:#ffffff17;color:#f7e4bf;font-size:.76rem;font-weight:700;letter-spacing:.02em}.learning-drawer .space-tag .ar{color:#f7e4bf!important;font-size:1.02em}.learning-drawer .space-pill{display:inline-flex;padding:.2rem .55rem;border-radius:999px;background:#00000029;color:#d7c5e1;font-size:.73rem}.learning-drawer .space-copy strong,.learning-drawer .space-copy strong .ar{color:#fff!important}.learning-drawer .space-description,.learning-drawer .space-count{color:#bdaacb}.learning-drawer .space-description .ar,.learning-drawer .space-count .ar{color:#d1c0dc!important}.learning-drawer .learning-space progress{accent-color:#d7aa61;width:100%}.learning-drawer .learning-space>svg{color:#c7b1d5}.learning-drawer .space-entry{--accent:#d4b36e}.learning-drawer .space-irab{--accent:#d98f6b}.learning-drawer .space-isim{--accent:#d36fb3}.learning-drawer .space-jumlah-ismiyyah{--accent:#9a8df2}.learning-drawer .space-jumlah-fiiliyyah{--accent:#78a0ff}.learning-drawer .space-fiil-mudari{--accent:#4eb7b0}.learning-drawer .space-marfuat{--accent:#9bc46a}.learning-drawer .space-mansubat{--accent:#ff9f6b}.learning-drawer .space-majrurat{--accent:#64c1d7}.learning-drawer .space-tawabi{--accent:#c38cff}.learning-drawer .space-irab-aplikasi{--accent:#f0d18f}.drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.2rem}.drawer-actions .btn{border-radius:14px;background:#ffffff12;border-color:#ffffff24;color:#fff}.drawer-actions .drawer-primary{grid-column:1/-1;background:linear-gradient(135deg,#7b4aa0,#5e337e);border-color:#b890c8}.drawer-actions .btn .ar{color:#eee0f3!important}.shell h1{font-family:Georgia,Times New Roman,serif;font-weight:550;color:#39234d;font-size:clamp(2rem,3vw,2.8rem);letter-spacing:-.02em}.shell h2{color:#4b315e}.reading-title h1{font-family:Georgia,Times New Roman,serif;font-size:clamp(2rem,3vw,2.7rem);font-weight:550}.topic-row,.tool-card{transition:background .18s ease,transform .18s ease}.topic-row:hover,.tool-card:hover{background:#faf7fd}.topic-link h2,.tool-card h2{font-weight:600}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}@keyframes drawer-in{0%{transform:translate(36px);opacity:.4}to{transform:translate(0);opacity:1}}@media(max-width:980px){.home-stage{width:min(100% - 1.4rem,900px)}.home-hero{grid-template-columns:1fr;min-height:auto;padding-top:2rem}.hero-copy{text-align:center;padding:2rem 1.3rem 0}.ruang-mark,.ruang-rule{margin-inline:auto}.hero-start{min-width:min(340px,90%)}.hero-house-wrap{padding:1rem 1.5rem 2.5rem}.hero-house-wrap .house-scene{max-width:500px}.topbar{padding-inline:1rem}}@media(max-width:650px){.app:before{background-size:260px auto;opacity:.06}.topbar{min-height:74px}.home-stage{width:calc(100% - 1rem);min-height:auto;margin-bottom:1rem}.home-hero{border-radius:22px;gap:.5rem}.hero-copy{padding-top:1.4rem}.ruang-mark{width:64px;height:64px}.ruang-mark svg{width:58px;height:58px}.hero-copy h1{font-size:clamp(4rem,20vw,6rem)}.ruang-rule{margin:1.25rem auto 1.5rem}.hero-start{min-width:0;width:90%;padding:.85rem 1rem}.hero-house-wrap{padding:.4rem 1rem 1.5rem}.hero-house-wrap .house-scene{max-width:360px;border-radius:20px}.learning-drawer{width:100%;padding:1.3rem 1rem 1.8rem}.drawer-heading{padding-right:2.4rem}.drawer-heading h2{font-size:1.65rem}.drawer-actions{grid-template-columns:1fr}.drawer-actions .drawer-primary{grid-column:auto}.shell{width:calc(100% - 1rem)}}.topic-copy{display:flex;flex-direction:column;gap:.28rem;flex:1;min-width:0}.topic-stage{display:inline-flex;align-self:flex-start;padding:.15rem .55rem;border-radius:999px;background:#f3ecfb;color:#725190;font-size:.77rem;font-weight:650}.topic-stage .ar{color:#725190!important;font-size:1.02em}.topic-link h2{margin:0}.lang-ar .home-hero{grid-template-columns:minmax(500px,1.18fr) minmax(340px,.82fr)}.lang-ar .hero-copy{text-align:right;padding:4rem 4.5rem 4rem 1.5rem}.lang-ar .hero-summary,.lang-ar .hero-welcome{margin-inline-start:auto}.lang-ar .hero-highlights{justify-content:flex-end}.lang-ar .ruang-rule{margin-inline-start:auto}.lang-ar .hero-house-wrap{padding:3.5rem 0 3.5rem 4rem}.lang-ar .drawer-close{right:auto;left:1.2rem}.lang-ar .drawer-heading{padding-right:0;padding-left:3rem}.lang-ar .space-meta{justify-content:flex-end}@media(max-width:980px){.hero-summary{max-width:none}.lang-ar .home-hero{grid-template-columns:1fr}.lang-ar .hero-copy{text-align:center;padding:2rem 1.3rem 0}.lang-ar .hero-highlights{justify-content:center}.lang-ar .ruang-rule{margin-inline:auto}.lang-ar .hero-house-wrap{padding:1rem 1.5rem 2.5rem}}.note,.vn-tip,.feedback,.vn-summary-card,.vn-analysis,.vn-node,.gloss-card,.tool-card{position:relative;overflow:hidden}.note{background:#f7f2fb!important;border-inline-start:4px solid #9f7ec0!important}.note:before{content:"\1f4dd";position:absolute;top:.75rem;right:.8rem;font-size:1.05rem;opacity:.18}.vn-tip{background:linear-gradient(135deg,#fff8ef,#f6f1ff)!important;border:1px solid #eadfc2!important;border-radius:14px!important;padding:1rem 1.1rem 1rem 3rem!important}.vn-tip:before{content:"\1f4a1";position:absolute;left:.95rem;top:.95rem;font-size:1.1rem}.feedback.success{background:#eef7ef!important;border:1px solid #b8d7bc!important}.feedback.success:before{content:"\2713";position:absolute;top:.8rem;right:1rem;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#d8efdc;color:#356b3e;font-weight:800}.feedback.retry{background:#fff5ee!important;border:1px solid #e8c8bb!important}.feedback.retry:before{content:"\21ba";position:absolute;top:.8rem;right:1rem;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fde3d5;color:#a05a43;font-weight:800}.vn-node{border-radius:16px!important}.vn-node-button{padding-left:3.1rem!important}.vn-node-button:before{content:"\25c6";position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:.9rem;color:#8f6db4}.tone-isim .vn-node-button:before{content:"\1f3f7"}.tone-fiil .vn-node-button:before{content:"\270d"}.tone-harf .vn-node-button:before{content:"\1f517"}.tone-mixed .vn-node-button:before{content:"\1f9e9"}.vn-summary-grid{gap:1rem!important}.vn-summary-card{border-radius:16px!important;padding-top:1rem!important}.vn-summary-card:nth-child(4n+1){background:#f9f4ff!important;border:1px solid #decef2!important}.vn-summary-card:nth-child(4n+2){background:#f5f9ff!important;border:1px solid #cee0f2!important}.vn-summary-card:nth-child(4n+3){background:#fbf7ee!important;border:1px solid #eadbb5!important}.vn-summary-card:nth-child(4n+4){background:#f4fbf7!important;border:1px solid #cfe8d6!important}.vn-summary-card strong{display:flex;align-items:center;gap:.45rem}.vn-summary-card strong:before{content:"\25c8";color:#916ab4}.vn-analysis{border-radius:14px!important}.gloss-card:nth-child(odd){background:#fcf9ff!important}.gloss-card:nth-child(2n){background:#f8fbff!important}.tool-card:nth-child(4n+1){background:#fcf9ff}.tool-card:nth-child(4n+2){background:#faf7ee}.tool-card:nth-child(4n+3){background:#f7fbff}.tool-card:nth-child(4n+4){background:#f7fcf8}@keyframes logoShine{0%{transform:translate(0) skew(-22deg);opacity:0}12%{opacity:.25}42%{opacity:.9}58%{opacity:.25}to{transform:translate(540%) skew(-22deg);opacity:0}}@media(max-width:650px){.hero-welcome{font-size:.78rem;letter-spacing:.12em}.hero-summary{font-size:.98rem;line-height:1.75}.hero-highlights{justify-content:center}.hero-chip{font-size:.82rem;padding:.48rem .72rem}.learning-drawer .learning-space{grid-template-columns:52px 1fr 18px;gap:.7rem;min-height:88px;padding:.85rem}.learning-drawer .space-index{width:46px;height:46px;border-radius:14px;font-size:.8rem}.learning-drawer .space-pill{font-size:.68rem}.topic-stage{font-size:.72rem}}.hero-copy h1#baitunnahwi-title{font-family:Georgia,Times New Roman,serif;font-size:clamp(3rem,5.8vw,6.7rem);line-height:.92;letter-spacing:-.045em;font-weight:560;color:#fff3df;text-shadow:0 10px 38px rgba(21,4,31,.34);margin:.15rem 0 0;max-width:100%;word-break:normal}@media(max-width:980px){.hero-official-logo{margin-inline:auto;width:min(300px,64%)}.hero-copy h1#baitunnahwi-title{font-size:clamp(3rem,10vw,5.7rem)}}@media(max-width:650px){.hero-official-logo{width:min(240px,68%);margin-bottom:.75rem;padding:.3rem;border-radius:22px}.hero-official-logo img{border-radius:16px}.hero-copy h1#baitunnahwi-title{font-size:clamp(2.55rem,12.5vw,4.1rem);letter-spacing:-.035em}}.header-controls{display:flex;align-items:center;gap:.65rem}.motion-toggle{background:#ffffff12;color:#fff;border:1px solid #ffffff45;border-radius:9px;padding:.6rem .8rem;min-height:44px;font-size:.875rem}.motion-toggle .ar{color:inherit!important;font-size:1em}.hero-official-logo{width:min(350px,100%);height:auto;aspect-ratio:1526/1030;padding:0;isolation:isolate}.hero-official-logo img{position:static;width:100%;max-width:100%;height:100%;left:auto;top:auto;transform:none;object-fit:contain;border-radius:inherit}.hero-official-logo:before{z-index:2;pointer-events:none}.hero-official-logo:after{animation:none;transform:none;opacity:1;background:none;width:auto}.home-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}.hero-copy{padding:2.5rem 0 2.5rem 2.5rem;min-width:0}.hero-house-wrap{padding:2rem 2.5rem 2rem 0;min-width:0}.hero-copy h1#baitunnahwi-title{font-size:clamp(1.8rem,3.3vw,3rem);line-height:1.2;letter-spacing:-.025em;overflow-wrap:anywhere}.lang-ar .hero-copy h1#baitunnahwi-title{font-family:Noto Naskh Arabic,Traditional Arabic,serif;font-size:clamp(2.6rem,5vw,4.5rem);line-height:1.6;letter-spacing:normal}.hero-summary{font-size:1rem;line-height:1.85}.hero-summary .ar{font-size:1.25em;line-height:1.9}.hero-welcome{letter-spacing:.03em;font-size:.95rem;text-transform:none}.hero-key-status{text-align:center;color:#fff0d4;margin:1rem auto 0}.hero-key-status .ar{color:inherit!important}.hero-key-status p{margin:.7rem 0}.hero-start{width:100%;min-width:0}.hero-start .bi{flex-direction:column}.hero-highlights{gap:.45rem}.hero-chip:before{content:none}.learning-overlay{margin:0;padding:0;border:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;color:inherit;overflow:hidden;background:transparent}.learning-overlay::backdrop{background:#13071dbb;backdrop-filter:blur(6px)}.learning-drawer{height:100%;overscroll-behavior:contain;padding-bottom:max(2rem,env(safe-area-inset-bottom));scrollbar-gutter:stable}.drawer-close{inset-inline-end:1rem;inset-inline-start:auto;z-index:2}.drawer-resume{width:100%;background:#754798;border-color:#be99d7}.drawer-next-topic{margin:.65rem 0 1rem;color:#f6eafd}.drawer-next-topic .ar{color:#f6eafd!important}.drawer-heading{padding-inline-end:3rem;padding-inline-start:0}.drawer-actions{padding-top:1rem;border-top:1px solid #ffffff25}.learning-drawer .space-description,.learning-drawer .space-count{color:#e0d1e9}.learning-drawer .space-description .ar,.learning-drawer .space-count .ar{color:#e0d1e9!important}.learning-drawer .space-pill,.learning-drawer .space-tag{font-size:.875rem;line-height:1.5}.learning-drawer .learning-space:before{background:#bd96d5}.space-meta .bi{flex-direction:column}.space-copy .ar{line-height:1.9}.topic-link,.topic-copy{min-width:0}.topic-step-count{white-space:nowrap;font-size:.875rem}.save-btn,.search button,.number-nav button{min-width:44px;min-height:44px}.topic-stage{font-size:.875rem}.step-track{flex-wrap:wrap}.step-track button{min-width:40px;min-height:44px}.step-count{white-space:nowrap}.step-heading{flex-wrap:wrap}.note:before,.feedback:before,.vn-tip:before,.vn-node-button:before,.vn-summary-card strong:before{content:none!important}.vn-tip{padding:1rem 1.1rem!important}.vn-node-button{padding:1rem!important;gap:.65rem}.vn-node-number{display:grid;place-items:center;flex-shrink:0}.vn-summary-card strong{display:flex;flex-direction:column;align-items:stretch}.vn-summary-card strong span{width:100%}.vn-summary-card{min-width:0}.vn-summary-card .ar,.vn-concept-example{overflow-wrap:anywhere}.vn-node-button>.vn-bi{flex:1;min-width:0}.vn-word,.word{max-width:100%;height:auto;white-space:normal}.vn-word .ar,.word.ar{overflow-wrap:anywhere;line-height:2}.vn-sentence,.word-line{row-gap:1rem}.vn-word-label{font-size:.875rem!important}.vn-tip,.note,.feedback{line-height:1.85}.vn-branches{align-items:start}.vn-analysis-slot{min-height:0}.option{min-height:48px;align-items:flex-start}.option .ar{line-height:1.9}.lesson-footer{flex-wrap:wrap;gap:.75rem}.lesson-footer .btn{flex:1;min-width:140px}.decoration-controls select{max-width:100%;width:100%;min-width:0;white-space:normal}.search{min-width:0}.search input{min-width:0;font-size:1rem}.topic-controls{flex-wrap:wrap}.topic-controls .search{flex:1 1 200px}.lang-ar .home-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.lang-ar .hero-copy{padding:2.5rem 2.5rem 2.5rem 0}.lang-ar .hero-house-wrap{padding:2rem 0 2rem 2.5rem}.lang-ar .hero-highlights{justify-content:flex-start}.lang-ar .drawer-heading{padding-inline-start:0;padding-inline-end:3rem}.lang-ar .drawer-close{left:1rem;right:auto}.lang-ar .topic-link>svg,.lang-ar .hero-start>svg:last-child,.lang-ar .learning-space>svg:last-child,.lang-ar .back-link>svg,.lang-ar .back-strip svg{transform:rotate(180deg)}.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-off .hero-official-logo:before,.motion-off .official-logo:after{display:none}@media(max-width:1100px){.home-hero,.lang-ar .home-hero{grid-template-columns:1fr}.hero-copy,.lang-ar .hero-copy{padding:2rem 1.5rem .5rem;text-align:center}.hero-official-logo{margin-inline:auto;width:min(290px,80%)}.hero-copy h1#baitunnahwi-title{font-size:clamp(1.7rem,6vw,3rem)}.hero-summary{max-width:680px;margin-inline:auto}.hero-highlights,.lang-ar .hero-highlights{justify-content:center}.hero-start{max-width:400px;margin-inline:auto}.hero-house-wrap,.lang-ar .hero-house-wrap{padding:1.5rem}.ruang-rule{margin:1.3rem auto}.hero-house-wrap .house-scene{max-width:420px}}@media(max-width:650px){.topbar{gap:.7rem;align-items:flex-start;flex-wrap:wrap}.header-controls{margin-inline-start:auto;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}.motion-toggle{font-size:.875rem;padding:.55rem}.language-choice select{max-width:155px}.hero-copy,.lang-ar .hero-copy{padding:1.25rem 1rem .25rem}.hero-official-logo{width:min(250px,82%)}.hero-summary{font-size:1rem}.hero-house-wrap .house-scene{max-width:340px}.learning-drawer{padding:1.2rem .8rem 2rem}.learning-drawer .learning-space{grid-template-columns:42px minmax(0,1fr) 18px;gap:.65rem}.learning-drawer .space-index{width:40px;height:44px}.shell h1,.reading-title h1{font-size:1.6rem;line-height:1.5}.ar{line-height:2}.vn-branches,.vn-summary-grid{grid-template-columns:1fr!important}.footer>.bi{flex-direction:column;text-align:center}.footer .bi>[lang]{text-align:center}.compact-logo{width:100px;height:68px}.step-track{gap:.35rem}.step-track button{flex:1;max-width:none}.hero-welcome{font-size:1rem}.learning-drawer .space-pill{font-size:.875rem}}@media(max-width:360px){.topbar .brand{font-size:.9rem}.header-controls{width:100%;justify-content:space-between}.hero-copy h1#baitunnahwi-title{font-size:1.7rem}.drawer-key-summary{padding:.8rem;grid-template-columns:38px 1fr}.drawer-key-summary>div{gap:.4rem}.drawer-key-icon{width:36px;height:36px}.step-track button{min-width:32px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-official-logo:before{display:none}}@media print{.header-controls,.hero-start,.hero-key-status .btn{display:none}.home-hero{background:#fff;color:#222;box-shadow:none}.hero-copy *{color:#222!important}}.home-nav-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.6rem .8rem;border:1px solid #ffffff45;border-radius:9px;background:#ffffff12;color:#fff;font-size:.875rem}.home-nav-button .ar{font-size:1em;color:inherit!important}.home-nav-button[aria-current=page]{border-color:#d9bded;background:#ffffff20}.colored-example{line-height:2.2!important}.example-token{color:var(--tone,#159B72);background:var(--tone-bg,#f4effa);border-radius:5px;padding:.08em .16em;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-size:inherit;line-height:inherit}.example-separator{color:#796487}.vn-summary-card .colored-example{font-size:1.55rem;background:#fff;padding:.65rem;border-radius:9px}.hero-key-status:empty{display:none}.vn-rule-text{line-height:1.9;white-space:pre-line}.vn-rule-example{margin:1.25rem 0;padding:clamp(1rem,3vw,1.5rem);border:1px solid #dcd0ea;border-radius:18px;background:#faf7fd}.vn-fresh-example{display:flex;flex-direction:column;gap:.7rem;font-size:clamp(1.4rem,4vw,1.9rem);line-height:2.1}.vn-example-line{display:block;padding:.5rem .8rem;border-radius:12px;overflow-wrap:anywhere}.vn-example-color-0{background:#eee5f7;color:#56327b}.vn-example-color-1{background:#eaf5f3;color:#165f50}.vn-example-color-2{background:#fff1e4;color:#85410b}.vn-intro-only .lead{line-height:1.95}.vn-rule-only .vn-bi{overflow-wrap:anywhere}@media screen and (max-width:650px){.app .bi>[lang],.app .vn-bi>[lang],.app .hero-copy,.app .hero-welcome,.app .hero-summary,.app .shell :is(h1,h2,h3,p),.app .learning-drawer :is(h2,h3,p),.app .vn-fresh-example,.app .colored-example{text-align:center}.app .hero-summary,.app .hero-welcome{margin-inline:auto}.app .vn-legend{justify-content:center}}.app .flash{background:#f1e9fa;color:#4c2b6d;border:2px solid #c8b0df;transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}.app .flash[aria-expanded=true]{background:#159B72;color:#fff;border-color:#159B72;box-shadow:0 8px 24px #4e297333}.app .flash .bi>[lang],.app .flash .ar{color:inherit}.app .flash:focus-visible{outline:3px solid #b7781f;outline-offset:4px}@media(prefers-reduced-motion:reduce){.app .flash{transition:none}}@property --logo-orbit{syntax:"<angle>";initial-value:0deg;inherits:false;}.app .hero-official-logo:before,.app .official-logo:after{content:"";display:block;position:absolute;inset:0;width:auto;height:auto;padding:3px;border-radius:inherit;z-index:3;pointer-events:none;opacity:1;transform:none;background:conic-gradient(from var(--logo-orbit),transparent 0deg 245deg,#c29ce6 285deg,#fff1bd 320deg,transparent 355deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:logoBorderOrbit 4.6s linear infinite}@keyframes logoBorderOrbit{to{--logo-orbit:360deg}}@media(prefers-reduced-motion:reduce){.app .hero-official-logo:before,.app .official-logo:after{animation:none}}.journey-house{padding:0 18px 18px 0;isolation:isolate;filter:drop-shadow(12px 18px 18px rgba(17,5,30,.3))}.jh-building{position:relative;overflow:visible;border:2px solid #b48ecb;border-radius:3px 3px 15px 15px;background:linear-gradient(100deg,#aa82bf,#80579e 20%,#9269ad 60%,#613c80);box-shadow:inset 9px 0 13px #d1b4e54d,inset -7px 0 12px #2c143b55,0 10px #402450,0 15px #2e1b3e}.jh-building:after{content:"";position:absolute;top:8px;bottom:-10px;right:-17px;width:17px;background:linear-gradient(90deg,#57376e,#321b47);transform:skewY(38deg);transform-origin:left top;border-right:2px solid #9770ad;z-index:-1}.jh-roof{position:relative;height:110px;background:repeating-linear-gradient(0deg,transparent 0 10px,#32174635 11px 13px),linear-gradient(135deg,#d4b3e3,#9b70b5 33%,#654181 65%,#382348);border-bottom:8px solid #e2c089;filter:drop-shadow(3px 6px 2px #170d2760)}.jh-roof span{text-shadow:1px 3px 2px #392340;font-size:1.8rem}.jh-floor{position:relative;margin:0 10px;padding:1rem .9rem 1.15rem;background:linear-gradient(90deg,#35204622,transparent 15%,#d4b5e21a 48%,transparent 85%,#35204622);border-bottom:9px solid #634274;box-shadow:0 3px #cfb092,inset 0 6px 9px #321a4c66}.jh-floor:before,.jh-floor:after{content:"";position:absolute;top:0;bottom:-4px;width:11px;background:linear-gradient(90deg,#563569,#d5b9db 45%,#96729e 70%,#4d305f);border-top:5px solid #d5bda2;border-bottom:5px solid #d5bda2;box-shadow:3px 3px 4px #20102b55;pointer-events:none}.jh-floor:before{left:-7px}.jh-floor:after{right:-7px}.jh-floor-label{text-shadow:0 2px 2px #341f47;color:#fff0d2}.jh-room{background:linear-gradient(115deg,#32194140,#3a20552e);border-color:#d7b7e25c;box-shadow:inset 2px 2px 5px #25113944,0 1px #edd6f233}.jh-door-frame{height:111px;border:5px solid #d7b995;border-radius:40px 40px 3px 3px;box-shadow:inset 5px 0 8px #1c0b30,4px 5px #43294c,7px 9px 9px #28173370;overflow:hidden}.jh-door{background:linear-gradient(110deg,#c7a0d8,#966cb0 20%,#72458e 65%,#4b2b68);box-shadow:inset 3px 0 2px #debae166,inset -4px 0 5px #3e224f;border-radius:31px 31px 0 0}.jh-door-panel{inset:12px 9px;border:2px solid #bd94c5;border-bottom-color:#543263;box-shadow:inset 2px 2px 4px #3c204d99,1px 1px #caa3d2;border-radius:22px 22px 3px 3px}.jh-handle{box-shadow:1px 2px 2px #352137,0 0 8px #f4cf8280;background:radial-gradient(circle at 30% 30%,#fff3d1,#b8873e);width:9px;height:9px}.jh-done .jh-door-frame{box-shadow:0 0 17px #f7d78670,4px 5px #43294c}.jh-entrance{margin:0 10px;padding:1.1rem;background:linear-gradient(90deg,#493054aa,#9c77ac66,#493054aa);border-radius:0 0 10px 10px}.jh-main-door{width:125px;height:108px;box-shadow:5px 5px #402644,0 10px 15px #29173560;border-width:6px}.jh-entry-caption{font-size:.8rem;text-align:center;color:#f6e7f9}.jh-entry-caption .bi>[lang]{text-align:center}.login-dialog{width:min(460px,calc(100% - 2rem));max-height:90dvh;overflow:auto;border:1px solid #d8bfe9;border-radius:24px;padding:2rem;background:#fcf8ff;color:#51316b;box-shadow:0 25px 80px #170a2666}.login-dialog::backdrop{background:#1e0d30b3;backdrop-filter:blur(5px)}.login-dialog form{display:grid;gap:.55rem}.login-dialog label{font-weight:650;margin-top:.6rem}.login-dialog input{width:100%;min-width:0;min-height:48px;padding:.7rem .8rem;border:1px solid #bca3d0;border-radius:10px;background:#fff;color:#332140;font-size:1rem}.login-dialog input:focus-visible{outline:3px solid #a981c2;outline-offset:2px}.login-password{display:flex;gap:.4rem}.login-password input{flex:1}.login-password button{flex-shrink:0;min-height:44px}.login-demo-note{background:#f1e7fa;border-radius:12px;padding:.85rem;font-size:.88rem}.login-hint{font-size:.8rem;margin:.25rem 0!important}.login-submit{width:100%;margin-top:.75rem;min-height:48px;justify-content:center}.login-dialog h2{margin:.6rem 0}.login-dialog .jr-close{color:#159B72}.login-dialog{position:fixed}.jh-key-collection{padding-top:1.5rem}@media screen and (max-width:1100px){.app .bi>[lang],.app .vn-bi>[lang],.app .hero-copy,.app .hero-welcome,.app .hero-summary,.app .shell :is(h1,h2,h3,p),.app .learning-drawer :is(h2,h3,p),.app .vn-fresh-example,.app .colored-example{text-align:center}.app .hero-summary,.app .hero-welcome{margin-inline:auto}.app .vn-legend{justify-content:center}.app .footer>.bi{flex-direction:column}.journey-home-actions{justify-content:center}.login-dialog h2,.login-dialog>svg{text-align:center}.jh-entry-caption>[lang]{text-align:center!important}}@media(max-width:650px){.journey-house{padding-right:12px}.jh-building:after{width:11px;right:-11px}.jh-roof{height:80px}.jh-floor{padding:.7rem .3rem .9rem;margin:0 7px}.jh-floor:before,.jh-floor:after{width:8px}.jh-door-frame{height:87px;border-width:3px}.jh-door-panel{inset:9px 6px}.jh-entrance{margin:0 7px}.login-dialog{padding:1.6rem 1rem}.jh-room-name{font-size:.67rem}}.jh-roof{height:auto!important;aspect-ratio:3/1;clip-path:none;background:none;border:0;padding:0;display:block;position:relative;overflow:visible;filter:drop-shadow(3px 5px 3px #31164a55);z-index:2;margin-bottom:-2px}.jh-roof:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#fefbff 10%,#f1e8fa 48%,#d4c3e5);clip-path:polygon(50% 4%,99% 100%,1% 100%)}.jh-roof-slope{position:absolute;bottom:3%;width:58%;height:clamp(19px,3.8vw,32px);display:flex;gap:1px;background:#3d1d60;border-radius:10px;box-shadow:0 6px #482466,0 9px 3px #80648d70;padding:2px;z-index:2}.jh-roof-left{left:1%;transform:rotate(-32deg);transform-origin:0 50%}.jh-roof-right{right:1%;transform:rotate(32deg);transform-origin:100% 50%}.jh-roof .jh-roof-tile{flex:1;min-width:0;height:100%;border-radius:6px 6px 8px 8px;background:linear-gradient(180deg,#a376cc,#8150ad 32%,#633590 76%,#502775);box-shadow:inset 0 2px 2px #c89de180,inset -2px -2px 1px #43245d,1px 2px 1px #321747}.jh-roof .jh-ridge-cap{position:absolute;top:0;left:47.5%;width:5%;height:clamp(25px,4.8vw,42px);border-radius:14px 14px 11px 11px;background:linear-gradient(90deg,#643694,#9d71c3 40%,#6b3d96 85%);box-shadow:0 4px 3px #32184477;z-index:3}.jh-roof .jh-gable-title{position:absolute;left:25%;right:25%;bottom:10%;text-align:center;color:#69418c;text-shadow:0 1px 0 #fff;font-family:Noto Naskh Arabic,serif;font-size:clamp(1.2rem,3vw,1.8rem);line-height:1.4}.jh-building{border-color:#d5c5e2;background:linear-gradient(110deg,#faf5ff,#eee5f8 40%,#e7dcf1 78%,#d4c4e1);box-shadow:inset 5px 0 8px #ffffffa0,inset -6px 0 12px #b6a0ca80,0 7px #c2afcf,0 12px #ad96be}.jh-building:after{background:linear-gradient(90deg,#c6b2d6,#a58dbb);border-right-color:#d1bfe1}.jh-floor{background:linear-gradient(90deg,#b7a0c933,transparent 17%,#ffffff38 50%,transparent 85%,#b7a0c933);border-bottom-color:#d2c0df;box-shadow:0 3px #eee5f4,inset 0 5px 7px #b5a0c647}.jh-floor:before,.jh-floor:after{background:linear-gradient(90deg,#bfa8cf,#fefaff 42%,#e3d4ed 74%,#b8a0c8);border-top-color:#eee3f5;border-bottom-color:#e0d1eb;box-shadow:3px 3px 5px #9c85af60}.jh-floor-label{color:#61407b;text-shadow:0 1px 0 #fff}.jh-room{background:linear-gradient(130deg,#ffffff75,#dfd1eb66);color:#4e2e69;border-color:#c6b1d780;box-shadow:inset 1px 2px 5px #b6a0c633,0 1px #fff9}.jh-room:disabled{opacity:1;color:#6a527e;background:#e6dcee99;border-color:#cabbd5}.jh-room.jh-available{border-color:#ab80bf}.jh-room.jh-done{background:linear-gradient(130deg,#fffaf0,#f0e4f7);border-color:#c39a53}.jh-room-name{color:#4e2e69}.jh-room-status{color:#6d537e}.jh-progress-label{color:#6a477d}.jh-room progress{accent-color:#79509e}.jh-door-frame{border-color:#f3e5c5;box-shadow:inset 4px 0 7px #311c46,3px 4px #b3a0c0,6px 7px 7px #aa92bb80}.jh-entrance{background:linear-gradient(90deg,#cdbada66,#f8f2fd88,#cdbada66);border-top:1px solid #fcf8ff}.jh-entry-caption{color:#61417a}.jh-main-door{border-color:#e5bd78;box-shadow:3px 4px #b8a1c1,0 7px 9px #a58cb060}.jh-entrance:after{content:"";display:block;width:65%;height:12px;background:linear-gradient(#f9f4fe,#d4c2e1);border-bottom:4px solid #baa5c8;box-shadow:0 5px #e9ddf3,0 9px #baa4c9;border-radius:2px;margin-bottom:8px}.jh-done .jh-door-frame{box-shadow:0 0 15px #efc87890,3px 4px #baa3bf}.journey-complete .jh-building{box-shadow:0 0 32px #f2d89865,inset 5px 0 8px #ffffffa0,0 10px #c2afcf}.journey-home-actions.journey-guide-actions{margin-top:1.2rem;margin-bottom:1rem}.app .journey-hero .hero-copy{text-align:center}.app .journey-hero .hero-copy .bi>[lang]{text-align:center}.app .journey-hero .hero-copy :is(.hero-summary,.hero-welcome,.hero-official-logo,.hero-start){margin-inline:auto}.app .journey-hero .journey-home-actions{justify-content:center}.cloud-status{text-align:center;padding:.7rem 1rem;background:#f5edf9;color:#0D5D4B;font-size:.88rem}.cloud-status .bi>[lang]{text-align:center!important}.account-links{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}.header-controls{flex-wrap:wrap}.login-dialog fieldset{display:flex;flex-direction:column;gap:.6rem}

/* Baitunnahwi layout: bilik dipusatkan; Tingkat 2 empat bilik sebaris. */
.jh-floor .jh-rooms{margin-left:auto!important;margin-right:auto!important;justify-content:center!important;align-items:stretch!important;}
.jh-floor-1 .jh-rooms{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:520px!important;}
.jh-floor-2 .jh-rooms{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:680px!important;}
.jh-floor-3 .jh-rooms{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:360px!important;}
@media(max-width:650px){
  .jh-floor-1 .jh-rooms{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:100%!important;}
  .jh-floor-2 .jh-rooms{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:100%!important;gap:.25rem!important;}
  .jh-floor-3 .jh-rooms{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:78%!important;}
  .jh-floor-2 .jh-room{padding:.45rem .12rem!important;}
  .jh-floor-2 .jh-door-frame{width:82%!important;height:72px!important;}
  .jh-floor-2 .jh-room-name{font-size:.58rem!important;line-height:1.35!important;min-height:3.5rem!important;}
  .jh-floor-2 .jh-room-status{font-size:.53rem!important;line-height:1.25!important;}
}

/* Google OAuth login */
.google-login-wrap{width:100%;margin:.35rem 0 1rem}.google-login-btn{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:.7rem;border:1px solid #d7cde2;border-radius:12px;background:#fff;color:#372842;font:700 14px/1.2 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 14px rgba(70,42,90,.07);transition:.18s ease}.google-login-btn:hover{border-color:#159B72;background:#faf7fd;transform:translateY(-1px)}.google-login-btn:focus-visible{outline:3px solid #e6cb85;outline-offset:2px}.google-login-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.google-g{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0);color:#fff;font-weight:900;font-family:Arial,sans-serif;font-size:14px;box-shadow:inset 0 0 0 2px #fff}.login-divider{display:flex;align-items:center;gap:.7rem;margin:.9rem 0 0;color:#75687e;font-size:12px}.login-divider:before,.login-divider:after{content:"";height:1px;flex:1;background:#e8e0ec}.login-divider span{white-space:nowrap}

/* Bright topic-note styling across lesson steps */
.reading-shell{--lesson-accent:#159B72;--lesson-accent-soft:#efe7ff;--lesson-note-bg:linear-gradient(135deg,#f5efff,#e6d7ff);--lesson-note-border:#b388ff;--lesson-example-bg:linear-gradient(135deg,#f7f0ff,#ede3ff);--lesson-flash-bg:linear-gradient(135deg,#f6f1ff,#ece4ff);--lesson-feedback-bg:#f4efff;--lesson-panel-edge:#eadbff}
.reading-shell:has(.step-track button:nth-child(1).current){--lesson-accent:#2f86ff;--lesson-accent-soft:#e9f3ff;--lesson-note-bg:linear-gradient(135deg,#eef6ff,#d8eaff);--lesson-note-border:#73b1ff;--lesson-example-bg:linear-gradient(135deg,#f2f8ff,#e3efff);--lesson-flash-bg:linear-gradient(135deg,#eff7ff,#ddeeff);--lesson-feedback-bg:#eef6ff;--lesson-panel-edge:#cfe2ff}
.reading-shell:has(.step-track button:nth-child(2).current){--lesson-accent:#ff8a2a;--lesson-accent-soft:#fff1e5;--lesson-note-bg:linear-gradient(135deg,#fff4ea,#ffe0c0);--lesson-note-border:#ffae5b;--lesson-example-bg:linear-gradient(135deg,#fff7ef,#ffe8cf);--lesson-flash-bg:linear-gradient(135deg,#fff5eb,#ffe5c7);--lesson-feedback-bg:#fff3e6;--lesson-panel-edge:#ffd9ad}
.reading-shell:has(.step-track button:nth-child(3).current){--lesson-accent:#20b96a;--lesson-accent-soft:#e8fff1;--lesson-note-bg:linear-gradient(135deg,#effff5,#d2f8df);--lesson-note-border:#62d08e;--lesson-example-bg:linear-gradient(135deg,#f3fff7,#dff8e9);--lesson-flash-bg:linear-gradient(135deg,#effff5,#d8f8e5);--lesson-feedback-bg:#effff5;--lesson-panel-edge:#b7edca}
.reading-shell:has(.step-track button:nth-child(4).current){--lesson-accent:#ff4fa3;--lesson-accent-soft:#fff0f7;--lesson-note-bg:linear-gradient(135deg,#fff1f8,#ffd6e8);--lesson-note-border:#ff8fbd;--lesson-example-bg:linear-gradient(135deg,#fff4f9,#ffe3ef);--lesson-flash-bg:linear-gradient(135deg,#fff1f7,#ffddea);--lesson-feedback-bg:#fff0f7;--lesson-panel-edge:#ffc5dc}
.reading-shell:has(.step-track button:nth-child(5).current){--lesson-accent:#00b7ad;--lesson-accent-soft:#e9fffd;--lesson-note-bg:linear-gradient(135deg,#effffd,#ccf9f4);--lesson-note-border:#58dccf;--lesson-example-bg:linear-gradient(135deg,#f2fffd,#dff9f6);--lesson-flash-bg:linear-gradient(135deg,#edfffd,#d5faf5);--lesson-feedback-bg:#ecfffd;--lesson-panel-edge:#b0efe7}
.reading-shell:has(.step-track button:nth-child(6).current){--lesson-accent:#ffbf2f;--lesson-accent-soft:#fff9e8;--lesson-note-bg:linear-gradient(135deg,#fffbe8,#ffe79a);--lesson-note-border:#ffd15a;--lesson-example-bg:linear-gradient(135deg,#fffdf0,#fff0be);--lesson-flash-bg:linear-gradient(135deg,#fffbe8,#ffefbd);--lesson-feedback-bg:#fff9ea;--lesson-panel-edge:#ffe29f}
.reading-shell:has(.step-track button:nth-child(7).current){--lesson-accent:#7c43d6;--lesson-accent-soft:#f2ebff;--lesson-note-bg:linear-gradient(135deg,#f7f2ff,#dfd0ff);--lesson-note-border:#af8cff;--lesson-example-bg:linear-gradient(135deg,#f8f3ff,#e7dbff);--lesson-flash-bg:linear-gradient(135deg,#f5efff,#e5d8ff);--lesson-feedback-bg:#f4eeff;--lesson-panel-edge:#d8c5ff}
.lesson-panel{background:linear-gradient(180deg,#fff, #fff 55%, var(--lesson-accent-soft));border-color:var(--lesson-panel-edge);box-shadow:0 16px 32px rgba(84,56,122,.08)}
.step-heading h2{color:var(--lesson-accent)}
.note{padding:1.15rem 1.2rem;background:var(--lesson-note-bg);border-inline-start:6px solid var(--lesson-note-border);border-radius:0 14px 14px 0;box-shadow:0 10px 20px rgba(90,63,124,.08)}
.note strong{color:var(--lesson-accent)}
.note .ar{color:#4e4262!important}
.example{background:var(--lesson-example-bg);border:1px solid var(--lesson-panel-edge);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.flash{background:var(--lesson-flash-bg);border:1px dashed var(--lesson-note-border);box-shadow:0 10px 20px rgba(90,63,124,.07)}
.feedback{background:var(--lesson-feedback-bg);border-inline-start:5px solid var(--lesson-note-border)}
.feedback.success{background:linear-gradient(135deg,#effff4,#d9f7e2);border-inline-start-color:#62d08e}.feedback.retry{background:linear-gradient(135deg,#fff9eb,#ffe3bc);border-inline-start-color:#ffbf2f}
.option:hover{border-color:var(--lesson-note-border);background:#fffdfd}.option:focus-visible{outline:3px solid color-mix(in srgb,var(--lesson-note-border) 55%, white);outline-offset:2px}
.step-track button.current{background:var(--lesson-accent)!important;border-color:var(--lesson-accent)!important;color:#fff!important;box-shadow:0 10px 18px rgba(90,63,124,.18)}

/* FORCE BRIGHT TOPIC NOTES — visible in every lesson */
.reading-shell .lesson-panel{background:linear-gradient(180deg,#ffffff 0%,#fff9fe 100%)!important;border:2px solid #ead4ff!important;box-shadow:0 16px 36px rgba(95,46,145,.10)!important}
.reading-shell .note{background:linear-gradient(135deg,#fff3a8,#ffd86e)!important;border:2px solid #f2b91f!important;border-inline-start:9px solid #ff8a00!important;border-radius:16px!important;color:#3f2f00!important;padding:1.15rem 1.25rem!important;box-shadow:0 10px 22px rgba(207,145,0,.16)!important}
.reading-shell .note strong{color:#8f4b00!important}.reading-shell .note .ar{color:#4b3200!important}
.reading-shell .example{background:linear-gradient(135deg,#dff5ff,#bfe4ff)!important;border:2px solid #63aef5!important;color:#173f6b!important;box-shadow:0 10px 22px rgba(63,125,255,.12)!important}
.reading-shell .flash{background:linear-gradient(135deg,#EEF6FD,#DCECF9)!important;border:2px dashed #2585D8!important;color:#1F64A5!important;box-shadow:0 10px 22px rgba(124,67,214,.12)!important}
.reading-shell .feedback{background:linear-gradient(135deg,#dffbea,#bff3cf)!important;border:2px solid #62cf83!important;border-inline-start:9px solid #20a75b!important;color:#1e5b35!important}
.reading-shell .feedback.retry{background:linear-gradient(135deg,#fff0df,#ffd2ad)!important;border-color:#ff9b45!important;border-inline-start-color:#ff7a00!important;color:#713800!important}
.reading-shell .vn-tip{background:linear-gradient(135deg,#fff2b8,#ffd86f)!important;border-inline-start:7px solid #ff9a00!important;border-radius:14px!important}
.reading-shell .vn-more{background:linear-gradient(135deg,#f5ecff,#e3d2ff)!important;border:2px solid #c09df4!important}
.reading-shell .vn-node:nth-child(5n+1){--tone:#2f86ff;--tone-bg:#e5f2ff;--tone-line:#8ec3ff}
.reading-shell .vn-node:nth-child(5n+2){--tone:#ff7a00;--tone-bg:#fff0df;--tone-line:#ffc081}
.reading-shell .vn-node:nth-child(5n+3){--tone:#18a65b;--tone-bg:#e4f9ec;--tone-line:#8bddaa}
.reading-shell .vn-node:nth-child(5n+4){--tone:#d83f92;--tone-bg:#ffe6f2;--tone-line:#ff9fc9}
.reading-shell .vn-node:nth-child(5n){--tone:#159B72;--tone-bg:#efe5ff;--tone-line:#bd9cff}
.reading-shell .step-track button.current{transform:translateY(-2px);box-shadow:0 9px 18px rgba(92,49,128,.22)!important}

/* ===== BAITUNNAHWI THEME INSPIRED BY CEKAP I'RAB ===== */
:root{--purple:#159B72;--purple-dark:#073e34;--ink:#18221f;--muted:#68756f;--gold:#f3a31a;--line:#e5ece8;--soft:#f2faf6;--paper:#fff}
body{background:#0d5d4b;color:var(--ink)}
.app{background:
radial-gradient(circle at 12% 4%,rgba(21,155,114,.16),transparent 28%),
radial-gradient(circle at 90% 15%,rgba(243,163,26,.12),transparent 26%),
linear-gradient(145deg,#073e34,#0d7058 55%,#25A77A);background-attachment:fixed}
.topbar{color:#fff}.brand{color:#fff}.brand:hover{background:#ffffff12}.home-nav-button,.language-choice select{background:#ffffff12!important;border-color:#ffffff28!important;color:#fff!important}.language-choice select option{color:#1d2d28;background:#fff}.bn-mastery-nav{background:linear-gradient(135deg,#159B72,#25A77A)!important;border-color:#41c79b!important}.bn-mastery-nav:hover{background:linear-gradient(135deg,#0d7058,#159B72)!important}
.cloud-status{background:#e8f7f1;color:#0d5d4b}
.journey-hero{background:transparent}.journey-house{color:#effff9}.jh-roof{background:linear-gradient(140deg,#41c79b,#159B72 52%,#073e34);border-bottom-color:#f3a31a}.jh-roof span{color:#fff4c8}.jh-building{background:linear-gradient(90deg,#073e34,#159B72 50%,#073e34);border-color:#41c79b;box-shadow:0 24px 60px #022b2455}.jh-floor{border-bottom-color:#0a4f41}.jh-floor-label{color:#ffe08a}.jh-room{border-color:#a6e2cf55;background:#032f2845;color:#f4fffb}.jh-room.jh-available{border-color:#f3a31a99}.jh-room.jh-done{background:#41c79b25;border-color:#ffe08a}.jh-door-frame{border-color:#d8a54d;background:#072a24}.jh-light{background:radial-gradient(ellipse at bottom,#fff3ae,#41c79b 75%)}.jh-door{background:linear-gradient(120deg,#25A77A,#0d5d4b);color:#ffe08a;box-shadow:inset 0 0 0 2px #073e34}.jh-room-status{color:#d6f1e7}.jh-progress-label{color:#ffe08a}.jh-room progress{accent-color:#f3a31a}.jh-entrance{background:#073e3466}.jh-main-door{border-color:#d8a54d;background:#fff0b4}.jh-main-door>span{background:linear-gradient(100deg,#25A77A,#0d5d4b)}.jh-key-row>span{color:#a6cfc2}.jh-key-row>span.collected{background:#f3a31a22;color:#ffe08a;box-shadow:inset 0 0 0 1px #ffe08a44}.jh-final{border-color:#f3a31a;background:#f3a31a1f;color:#fff0b9}.journey-complete .jh-building{box-shadow:0 0 32px #f3a31a55,0 15px 45px #022b244f}
.jr-dialog{border-color:#b7e7d7;background:#fbfffd;color:#0d5d4b}.jr-frame{border-color:#d8a54d;background:radial-gradient(#fff3ac,#41c79b);box-shadow:0 0 30px #6edbb6}.jr-door{background:linear-gradient(135deg,#25A77A,#0d5d4b)}.jr-count{color:#0d7058}
.vn-root{background:linear-gradient(135deg,#073e34,#159B72)}.vn-root:after{border-color:#9bd8c4}.vn-tip{border-inline-start-color:#f3a31a;background:#fff8e9}.vn-more{border-color:#d9ebe4;background:#fbfefc}
.tone-isim{--tone:#2585d8;--tone-bg:#edf5ff;--tone-line:#b8d3f4}.tone-fiil{--tone:#cf4e4b;--tone-bg:#fff0ef;--tone-line:#efc4c2}.tone-harf{--tone:#159B72;--tone-bg:#eaf8f2;--tone-line:#add9c9}.tone-mixed{--tone:#f3a31a;--tone-bg:#fff8e8;--tone-line:#f0d79d}
.reading-shell{--lesson-accent:#159B72;--lesson-accent-soft:#eefaf6;--lesson-note-bg:linear-gradient(135deg,#edf9f4,#d8f3e9);--lesson-note-border:#7fd0b3;--lesson-example-bg:linear-gradient(135deg,#f7fffb,#fff8e8);--lesson-flash-bg:linear-gradient(135deg,#eef9f5,#e7f8f6);--lesson-feedback-bg:#edf8f4;--lesson-panel-edge:#d6ebe3}
.reading-shell .lesson-panel{background:linear-gradient(180deg,#fff,#fbfefc)!important;border:2px solid #d6ebe3!important;box-shadow:0 16px 36px rgba(13,80,61,.10)!important}
.reading-shell .note{background:linear-gradient(135deg,#fff8de,#ffe6a1)!important;border:2px solid #efcc68!important;border-inline-start:9px solid #f3a31a!important;color:#5d4614!important}.reading-shell .note strong{color:#8a5a00!important}.reading-shell .note .ar{color:#5b4416!important}
.reading-shell .example{background:linear-gradient(135deg,#e8f8f2,#d2efe4)!important;border:2px solid #74c9aa!important;color:#0d5d4b!important}
.reading-shell .flash{background:linear-gradient(135deg,#edf8f4,#d8f2e8)!important;border:2px dashed #62bfa0!important;color:#0d5d4b!important}
.reading-shell .feedback{background:linear-gradient(135deg,#e8f8f1,#ccebdc)!important;border:2px solid #68bf95!important;border-inline-start:9px solid #159B72!important;color:#0d5d4b!important}.reading-shell .feedback.retry{background:linear-gradient(135deg,#fff1df,#ffd6aa)!important;border-color:#efb155!important;border-inline-start-color:#f3a31a!important;color:#704700!important}
.reading-shell .vn-node:nth-child(5n+1){--tone:#159B72;--tone-bg:#e9f8f2;--tone-line:#8bd1b8}.reading-shell .vn-node:nth-child(5n+2){--tone:#f3a31a;--tone-bg:#fff5df;--tone-line:#efca78}.reading-shell .vn-node:nth-child(5n+3){--tone:#2585d8;--tone-bg:#eaf4fd;--tone-line:#9dc9ef}.reading-shell .vn-node:nth-child(5n+4){--tone:#cf4e4b;--tone-bg:#fff0ef;--tone-line:#efb9b6}.reading-shell .vn-node:nth-child(5n){--tone:#25A77A;--tone-bg:#e7f8f3;--tone-line:#91d8c0}
.step-track button.current{background:#159B72!important;border-color:#159B72!important}.step-track button.done{background:#e8f6f0;color:#0d7058;border-color:#b9e0d2}.btn,.primary-btn{background:linear-gradient(135deg,#159B72,#25A77A)!important;border-color:#159B72!important;color:#fff!important}.btn:hover,.primary-btn:hover{filter:brightness(.96)}
a{color:#0d7058}.filter.selected{color:#0d7058;background:#eaf8f2;border-color:#9ed6c2}.topic-link:hover{background:#f3faf7}
.google-login-btn:hover{border-color:#75c3a7;background:#f3faf7}.login-divider:before,.login-divider:after{background:#dfece7}

/* ===== CEKAP HARMONY — cohesive multicolor, not rainbow ===== */
:root{
  --emerald:#159B72;
  --teal:#25A77A;
  --mint:#41C79B;
  --dark:#0D5D4B;
  --deep:#073E34;
  --orange:#F3A31A;
  --coral:#CF4E4B;
  --blue:#2585D8;
  --cream:#FFFAF0;
  --ink:#18221F;
  --muted:#68756F;
  --line:#E5ECE8;
  --white:#FFFFFF;
}

/* Overall: mostly white + emerald, accents only where meaningful */
body{background:
 radial-gradient(circle at 12% 4%,rgba(21,155,114,.08),transparent 28%),
 radial-gradient(circle at 90% 15%,rgba(243,163,26,.07),transparent 26%),
 #fbfdfb!important;color:var(--ink)!important}
.app{background:transparent!important}

/* Header */
.topbar{background:linear-gradient(90deg,var(--deep),var(--emerald),var(--teal))!important;color:#fff!important}
.brand{color:#fff!important}
.home-nav-button,.language-choice select{
 background:rgba(255,255,255,.12)!important;
 color:#fff!important;border:1px solid rgba(255,255,255,.24)!important
}
.bn-mastery-nav{
 background:linear-gradient(135deg,var(--orange),#F6B93D)!important;
 color:#fff!important;border:0!important;
 box-shadow:0 8px 20px rgba(243,163,26,.22)!important
}

/* Home hero */
.journey-hero .hero-copy{
 background:linear-gradient(135deg,var(--deep),var(--emerald) 52%,var(--teal))!important;
 color:#fff!important;border-radius:28px!important;
 box-shadow:0 24px 70px rgba(8,72,57,.22)!important;
 padding:2.4rem!important
}
.journey-hero .hero-copy .bi>[lang]{color:inherit!important}
.journey-home-actions .btn,.journey-home-actions .primary-btn{
 background:linear-gradient(135deg,#FFD660,#F5AD22)!important;
 color:#463000!important;border:0!important;
 box-shadow:0 10px 25px rgba(243,163,26,.2)!important
}
.journey-home-actions .text-btn{
 color:#fff!important;border-color:rgba(255,255,255,.35)!important
}

/* House: one family, subtle floor distinction */
.jh-roof{
 background:linear-gradient(140deg,var(--mint),var(--emerald) 50%,var(--deep))!important;
 border-bottom-color:var(--orange)!important
}
.jh-building{
 background:#fff!important;border:3px solid #bfe5d7!important;
 box-shadow:0 24px 60px rgba(8,72,57,.16)!important
}
.jh-floor{border-bottom:7px solid #eaf3ef!important;box-shadow:none!important}
.jh-floor-1{background:linear-gradient(180deg,#F4FCF9,#EAF8F2)!important}
.jh-floor-2{background:linear-gradient(180deg,#FFFDF6,#FFF7E8)!important}
.jh-floor-3{background:linear-gradient(180deg,#F5FAFE,#EAF4FD)!important}
.jh-floor-label{font-weight:800!important}
.jh-floor-1 .jh-floor-label{color:var(--dark)!important}
.jh-floor-2 .jh-floor-label{color:#9A5A00!important}
.jh-floor-3 .jh-floor-label{color:#1F64A5!important}

.jh-room{
 background:#fff!important;color:var(--ink)!important;
 border:1px solid var(--line)!important;
 box-shadow:0 10px 30px rgba(13,80,61,.06)!important
}
.jh-floor-1 .jh-room{border-top:4px solid var(--emerald)!important}
.jh-floor-2 .jh-room{border-top:4px solid var(--orange)!important}
.jh-floor-3 .jh-room{border-top:4px solid var(--blue)!important}
.jh-room.jh-done{background:#FFFBEB!important;border-color:#F0D79D!important}
.jh-room.jh-available{box-shadow:0 0 0 2px rgba(243,163,26,.18),0 10px 30px rgba(13,80,61,.06)!important}
.jh-room-status{color:var(--muted)!important}
.jh-progress-label{color:var(--dark)!important}
.jh-room progress{accent-color:var(--emerald)!important}

.jh-door-frame{background:#fff!important;border-color:#D8A54D!important}
.jh-floor-1 .jh-door{background:linear-gradient(120deg,var(--teal),var(--dark))!important}
.jh-floor-2 .jh-door{background:linear-gradient(120deg,#F6B93D,var(--orange))!important}
.jh-floor-3 .jh-door{background:linear-gradient(120deg,#4CA1E8,var(--blue))!important}
.jh-door{color:#fff4c8!important}
.jh-entrance{background:#F8FCFA!important}
.jh-main-door>span{background:linear-gradient(100deg,var(--teal),var(--dark))!important}
.jh-key-row>span{background:#fff!important;color:#8BA096!important;border:1px solid var(--line)!important}
.jh-key-row>span.collected{background:#FFF4CF!important;color:#805900!important;border-color:#F0D79D!important}
.jh-final{background:linear-gradient(135deg,#FFF9E8,#fff)!important;color:#6B4A00!important;border-color:#F0D79D!important}

/* Lesson shell */
.reading-shell .lesson-panel{
 background:#fff!important;border:1px solid var(--line)!important;
 box-shadow:0 18px 55px rgba(16,71,56,.08)!important
}
.step-heading h2{color:var(--dark)!important}

/* Step track: cohesive palette used as accents only */
.step-track button{
 background:#fff!important;border:1px solid var(--line)!important;
 color:#6C7B74!important
}
.step-track button:nth-child(1){border-top:4px solid var(--emerald)!important}
.step-track button:nth-child(2){border-top:4px solid var(--teal)!important}
.step-track button:nth-child(3){border-top:4px solid var(--blue)!important}
.step-track button:nth-child(4){border-top:4px solid var(--orange)!important}
.step-track button:nth-child(5){border-top:4px solid var(--mint)!important}
.step-track button:nth-child(6){border-top:4px solid var(--coral)!important}
.step-track button:nth-child(7){border-top:4px solid var(--dark)!important}
.step-track button.current{
 background:linear-gradient(135deg,var(--dark),var(--emerald))!important;
 border-color:var(--emerald)!important;color:#fff!important
}
.step-track button.done{background:#EDF8F4!important;color:var(--dark)!important;border-color:#B9E0D2!important}

/* Notes: semantic roles, all from CEKAP palette */
.reading-shell .note{
 background:linear-gradient(135deg,#FFF9E8,#FFF3C9)!important;
 border:1px solid #F0D79D!important;
 border-inline-start:7px solid var(--orange)!important;
 color:#5F4A16!important
}
.reading-shell .note strong{color:#805900!important}
.reading-shell .note .ar{color:#5F4A16!important}

.reading-shell .example{
 background:linear-gradient(135deg,#F7FFFB,#E7F7F1)!important;
 border:1px solid #B9DFD2!important;color:var(--dark)!important
}
.reading-shell .flash{
 background:linear-gradient(135deg,#F0F7FD,#E6F1FB)!important;
 border:1px dashed #9BCAF0!important;color:#1F64A5!important
}
.reading-shell .feedback{
 background:linear-gradient(135deg,#EFFAF6,#DFF3EA)!important;
 border:1px solid #B9DFD2!important;
 border-inline-start:7px solid var(--emerald)!important;color:var(--dark)!important
}
.reading-shell .feedback.retry{
 background:linear-gradient(135deg,#FFF1EF,#FFE3E0)!important;
 border-color:#EFB9B6!important;border-inline-start-color:var(--coral)!important;color:#7E3331!important
}
.reading-shell .vn-tip{
 background:#FFF9E9!important;border-inline-start:6px solid var(--orange)!important
}
.reading-shell .vn-more{
 background:#FBFEFC!important;border:1px solid #D9EBE4!important
}

/* Visual nodes — CEKAP accents, calm backgrounds */
.reading-shell .vn-node:nth-child(4n+1){--tone:var(--emerald);--tone-bg:#EAF8F2;--tone-line:#ADD9C9}
.reading-shell .vn-node:nth-child(4n+2){--tone:var(--blue);--tone-bg:#EAF4FD;--tone-line:#B8D3F4}
.reading-shell .vn-node:nth-child(4n+3){--tone:var(--orange);--tone-bg:#FFF5DF;--tone-line:#F0D79D}
.reading-shell .vn-node:nth-child(4n){--tone:var(--coral);--tone-bg:#FFF0EF;--tone-line:#EFC4C2}

/* Topic lists: white cards, accent strips */
.topic-link,.topic-card,.topic-item{
 background:#fff!important;border:1px solid var(--line)!important;
 box-shadow:0 10px 30px rgba(13,80,61,.05)!important
}
.topic-link:nth-child(4n+1),.topic-card:nth-child(4n+1),.topic-item:nth-child(4n+1){border-inline-start:4px solid var(--emerald)!important}
.topic-link:nth-child(4n+2),.topic-card:nth-child(4n+2),.topic-item:nth-child(4n+2){border-inline-start:4px solid var(--blue)!important}
.topic-link:nth-child(4n+3),.topic-card:nth-child(4n+3),.topic-item:nth-child(4n+3){border-inline-start:4px solid var(--orange)!important}
.topic-link:nth-child(4n),.topic-card:nth-child(4n),.topic-item:nth-child(4n){border-inline-start:4px solid var(--coral)!important}
.topic-link:hover{background:#F7FCFA!important}

/* Filters / buttons */
.filter{background:#fff!important;border:1px solid var(--line)!important;color:var(--muted)!important}
.filter.selected{background:#EDF8F4!important;color:var(--dark)!important;border-color:#B9DFD2!important}
.btn,.primary-btn{background:linear-gradient(135deg,var(--dark),var(--emerald))!important;color:#fff!important;border:0!important}
.btn:hover,.primary-btn:hover{filter:brightness(.98)}
.option{background:#fff!important;border:1px solid var(--line)!important}
.option:hover{background:#F7FCFA!important;border-color:#B9DFD2!important}

/* Login */
.login-dialog{background:#fff!important;border:1px solid var(--line)!important;box-shadow:0 24px 70px rgba(8,72,57,.18)!important}
.google-login-btn{background:#fff!important;border:1px solid #D8E9E2!important}
.google-login-btn:hover{background:#F3FAF7!important;border-color:#94D8C0!important}

/* Mobile */
@media(max-width:650px){
  .journey-hero .hero-copy{padding:1.3rem!important;border-radius:22px!important}
}


/* ===== BAITUNNAHWI FULL HARMONIZATION ===== */
:root{
  --bn-emerald:#159B72;
  --bn-teal:#25A77A;
  --bn-mint:#41C79B;
  --bn-deep:#0D5D4B;
  --bn-deeper:#073E34;
  --bn-gold:#F3A31A;
  --bn-gold-soft:#FFF7E3;
  --bn-blue:#2585D8;
  --bn-blue-soft:#EEF6FD;
  --bn-coral:#CF4E4B;
  --bn-coral-soft:#FEF0EF;
  --bn-green-soft:#EFF9F5;
  --bn-cream:#FFFAF0;
  --bn-paper:#FFFFFF;
  --bn-line:#E2ECE6;
  --bn-shadow:0 14px 34px rgba(12,79,60,.08);
  --bn-text:#1E2925;
  --bn-muted:#65716B;
}
body,.app{color:var(--bn-text)!important}
/* generic surfaces */
.card,.home-panel,.topic-link,.topic-card,.topic-item,.tool-card,.gloss-card,.builder-target,.room-description,.space-entry,.space-description,.house-progress-panel,.house-route-note,.space-copy,.space-review,.space-meta,.reward-copy,.learning-drawer,.login-dialog,.reward-dialog,.jr-dialog,.drawer-heading,.drawer-actions,.ig-banner,.ig-section-title,.ig-summary-card,.ig-comparison,.ig-rule-panel,.ig-full-rule,.ig-application,.ig-attention,.ig-clue,.ig-solved,.t1-card,.t1-summary-card,.vn-summary-card,.vn-rule-only,.vn-concept-example,.vn-summary,.vn-tip,.vn-more,.lesson-reference,.topic-controls,.page-intro,.home-menu,.home-intro,.hero-key-status,.hero-highlights{background:var(--bn-paper)!important;border:1px solid var(--bn-line)!important;box-shadow:var(--bn-shadow)!important;border-radius:18px!important}
.home-panel,.space-entry,.space-description,.house-progress-panel,.house-route-note,.topic-controls,.page-intro{background:linear-gradient(180deg,#ffffff,#fbfdfc)!important}
/* related topic cards / list rows */
.topic-list .topic-link:nth-child(4n+1),.related-topic-links .topic-link:nth-child(4n+1),.house-layout-nav .house-part-button:nth-child(4n+1),.card-grid .card:nth-child(4n+1),.tool-list .tool-card:nth-child(4n+1){border-inline-start:5px solid var(--bn-emerald)!important}
.topic-list .topic-link:nth-child(4n+2),.related-topic-links .topic-link:nth-child(4n+2),.house-layout-nav .house-part-button:nth-child(4n+2),.card-grid .card:nth-child(4n+2),.tool-list .tool-card:nth-child(4n+2){border-inline-start:5px solid var(--bn-blue)!important}
.topic-list .topic-link:nth-child(4n+3),.related-topic-links .topic-link:nth-child(4n+3),.house-layout-nav .house-part-button:nth-child(4n+3),.card-grid .card:nth-child(4n+3),.tool-list .tool-card:nth-child(4n+3){border-inline-start:5px solid var(--bn-gold)!important}
.topic-list .topic-link:nth-child(4n),.related-topic-links .topic-link:nth-child(4n),.house-layout-nav .house-part-button:nth-child(4n),.card-grid .card:nth-child(4n),.tool-list .tool-card:nth-child(4n){border-inline-start:5px solid var(--bn-coral)!important}
.topic-link:hover,.topic-card:hover,.topic-item:hover,.tool-card:hover,.house-part-button:hover{background:#F8FCFA!important;transform:translateY(-2px)}
.topic-number,.house-part-number,.space-index,.collection-icon,.drawer-key-icon{background:linear-gradient(135deg,var(--bn-deep),var(--bn-emerald))!important;color:#fff!important}
.space-pill,.part-tag,.hero-chip,.topic-step-count,.space-tag,.drawer-key-summary,.drawer-next-topic,.achievement,.reward-counter{background:var(--bn-gold-soft)!important;color:#7A4C00!important;border:1px solid #F2D59A!important}
/* lesson content */
.reading-shell .reading-title,.reading-shell .lesson-footer,.reading-shell .back-strip,.reading-shell .topic-copy{color:var(--bn-text)!important}
.reading-shell .lesson-panel{background:linear-gradient(180deg,#ffffff,#fbfdfc)!important;border:1px solid var(--bn-line)!important;box-shadow:0 18px 55px rgba(16,71,56,.08)!important;border-radius:24px!important}
.reading-shell .step-heading{padding-bottom:.45rem;border-bottom:1px solid #edf2ef}
.reading-shell .step-heading h2{color:var(--bn-deep)!important}
.reading-shell .step-count,.reading-shell .step-hint,.reading-shell .eyebrow,.reading-shell .house-note-link,.reading-shell .room-description,.reading-shell .next-topic,.reading-shell .back-link,.reading-shell .lesson-reference{color:var(--bn-muted)!important}
.reading-shell .note{background:linear-gradient(135deg,#FFF9EA,#FFF1C9)!important;border:1px solid #F1D79A!important;border-inline-start:8px solid var(--bn-gold)!important;color:#644B10!important;border-radius:18px!important;box-shadow:0 10px 22px rgba(204,150,33,.10)!important}
.reading-shell .note strong{color:#7A4C00!important}.reading-shell .note .ar{color:#6B521A!important}
.reading-shell .example,.reading-shell .colored-example{background:linear-gradient(135deg,#F4FBF8,#E7F5EF)!important;border:1px solid #B9DDD0!important;color:var(--bn-deep)!important;border-radius:18px!important;box-shadow:0 10px 22px rgba(21,155,114,.08)!important}
.reading-shell .flash{background:linear-gradient(135deg,#F0F7FD,#E4F0FB)!important;border:1px dashed #9EC8ED!important;color:#215F95!important;border-radius:18px!important;box-shadow:0 10px 22px rgba(37,133,216,.08)!important}
.reading-shell .feedback,.reading-shell .correct{background:linear-gradient(135deg,#EFFAF5,#DCF3E8)!important;border:1px solid #B9DDD0!important;border-inline-start:8px solid var(--bn-emerald)!important;color:var(--bn-deep)!important;border-radius:18px!important}
.reading-shell .feedback.retry,.reading-shell .wrong{background:linear-gradient(135deg,#FEF0EF,#FEE0DD)!important;border:1px solid #E8B6B3!important;border-inline-start:8px solid var(--bn-coral)!important;color:#803A37!important}
.reading-shell .options .option{background:#fff!important;border:1px solid var(--bn-line)!important;border-radius:14px!important;box-shadow:none!important}
.reading-shell .options .option:hover,.reading-shell .options .option.is-selected{border-color:#AAD6C6!important;background:#F7FCF9!important}
.reading-shell .btn,.reading-shell .primary-btn,.reading-shell .gate-button,.reading-shell .save-btn{background:linear-gradient(135deg,var(--bn-deeper),var(--bn-emerald))!important;border:0!important;color:#fff!important;box-shadow:0 10px 22px rgba(13,93,75,.18)!important}
.reading-shell .btn.light,.text-btn,.drawer-resume,.drawer-close,.reward-actions .btn.light{background:#fff!important;color:var(--bn-deep)!important;border:1px solid var(--bn-line)!important;box-shadow:none!important}
.reading-shell .btn.light:hover,.text-btn:hover{background:#F6FBF8!important}
.reading-shell .step-track{gap:.55rem!important}
.reading-shell .step-track button{background:#fff!important;border:1px solid var(--bn-line)!important;color:var(--bn-muted)!important;border-radius:14px!important;box-shadow:none!important}
.reading-shell .step-track button:nth-child(1){border-top:4px solid var(--bn-emerald)!important}
.reading-shell .step-track button:nth-child(2){border-top:4px solid var(--bn-teal)!important}
.reading-shell .step-track button:nth-child(3){border-top:4px solid var(--bn-blue)!important}
.reading-shell .step-track button:nth-child(4){border-top:4px solid var(--bn-gold)!important}
.reading-shell .step-track button:nth-child(5){border-top:4px solid var(--bn-mint)!important}
.reading-shell .step-track button:nth-child(6){border-top:4px solid var(--bn-coral)!important}
.reading-shell .step-track button:nth-child(7){border-top:4px solid var(--bn-deep)!important}
.reading-shell .step-track button.current{background:linear-gradient(135deg,var(--bn-deep),var(--bn-emerald))!important;border-color:var(--bn-emerald)!important;color:#fff!important;box-shadow:0 10px 22px rgba(13,93,75,.18)!important}
.reading-shell .step-track button.done:not(.current){background:#EFF9F5!important;color:var(--bn-deep)!important;border-color:#CBE6DC!important}
/* infographic / map blocks */
.infographic-notes,.t1-infographic,.vn-lab,.vn-map,.t1-summary,.t1-comparisons,.ig-map{gap:1rem!important}
.ig-banner{background:linear-gradient(135deg,var(--bn-deep),var(--bn-emerald))!important;color:#fff!important;border:0!important}
.ig-banner p,.ig-banner h3,.ig-instruction{color:inherit!important}
.ig-section-title{background:linear-gradient(135deg,#F6FBF8,#ECF8F3)!important;color:var(--bn-deep)!important}
.ig-node,.ig-summary-card,.ig-comparison,.ig-rule-panel,.ig-full-rule,.ig-application,.ig-attention,.ig-clue,.ig-solved,.t1-card,.t1-summary-card,.vn-summary-card{background:#fff!important;border:1px solid var(--bn-line)!important}
.ig-node{border-radius:18px!important;overflow:hidden}
.ig-node-trigger{background:#fff!important;color:var(--bn-text)!important}
.ig-node:nth-child(4n+1) .ig-node-trigger{border-inline-start:6px solid var(--bn-emerald)!important}
.ig-node:nth-child(4n+2) .ig-node-trigger{border-inline-start:6px solid var(--bn-blue)!important}
.ig-node:nth-child(4n+3) .ig-node-trigger{border-inline-start:6px solid var(--bn-gold)!important}
.ig-node:nth-child(4n) .ig-node-trigger{border-inline-start:6px solid var(--bn-coral)!important}
.ig-index,.vn-node-number{background:linear-gradient(135deg,var(--bn-deep),var(--bn-emerald))!important;color:#fff!important}
.ig-example,.ig-answer-line,.t1-example,.vn-fresh-example,.vn-rule-example,.vn-example-line{background:var(--bn-blue-soft)!important;border:1px solid #C7DDF2!important;border-radius:14px!important;color:#225E95!important}
.ig-comparison,.t1-compare{display:grid;gap:.8rem}
.ig-chip,.t1-keypoint,.vn-legend{background:var(--bn-gold-soft)!important;color:#7A4C00!important;border:1px solid #F2D59A!important}
.ig-attention,.vn-tip{background:var(--bn-gold-soft)!important;border-inline-start:6px solid var(--bn-gold)!important;color:#6A520F!important}
.ig-full-rule,.vn-rule-only{background:linear-gradient(135deg,#F4FBF8,#E9F7F0)!important;border-color:#CBE6DC!important}
.ig-application,.vn-concept-example{background:linear-gradient(135deg,#F8FBFE,#EEF5FB)!important;border-color:#D0E1F0!important}
.ig-clue{background:linear-gradient(135deg,#FFF8EB,#FFF2D4)!important;border-color:#F1D79A!important}
.ig-solved{background:linear-gradient(135deg,#EFFAF5,#E2F4EC)!important;border-color:#C1E2D5!important}
/* visual node map */
.vn-node{background:#fff!important;border:1px solid var(--bn-line)!important;border-radius:16px!important;box-shadow:0 10px 24px rgba(12,79,60,.06)!important}
.vn-node:nth-child(4n+1){border-top:4px solid var(--bn-emerald)!important}
.vn-node:nth-child(4n+2){border-top:4px solid var(--bn-blue)!important}
.vn-node:nth-child(4n+3){border-top:4px solid var(--bn-gold)!important}
.vn-node:nth-child(4n){border-top:4px solid var(--bn-coral)!important}
.vn-node-button,.vn-word,.vn-analysis-word,.vn-build-target{background:#fff!important;border:1px solid var(--bn-line)!important;color:var(--bn-text)!important}
.vn-analysis-slot{background:#F8FBF9!important;border:1px dashed #C5D9D1!important}
.vn-summary-grid .vn-summary-card:nth-child(3n+1){border-top:4px solid var(--bn-emerald)!important}.vn-summary-grid .vn-summary-card:nth-child(3n+2){border-top:4px solid var(--bn-blue)!important}.vn-summary-grid .vn-summary-card:nth-child(3n){border-top:4px solid var(--bn-gold)!important}
/* topik 1 special sections */
.t1-banner{background:linear-gradient(135deg,var(--bn-deep),var(--bn-emerald))!important;color:#fff!important;border:0!important;border-radius:22px!important;box-shadow:0 18px 44px rgba(13,93,75,.18)!important}
.t1-card:nth-child(4n+1),.t1-summary-card:nth-child(4n+1){border-top:4px solid var(--bn-emerald)!important}.t1-card:nth-child(4n+2),.t1-summary-card:nth-child(4n+2){border-top:4px solid var(--bn-blue)!important}.t1-card:nth-child(4n+3),.t1-summary-card:nth-child(4n+3){border-top:4px solid var(--bn-gold)!important}.t1-card:nth-child(4n),.t1-summary-card:nth-child(4n){border-top:4px solid var(--bn-coral)!important}
.t1-build,.builder-target{background:#F7FCFA!important;border:1px dashed #BCD7CC!important}
.t1-choices .option{background:#fff!important;border:1px solid var(--bn-line)!important}
.t1-choices .option.is-selected{background:#F3FAF7!important;border-color:#A8D5C6!important}
.t1-success{background:linear-gradient(135deg,#EFFAF5,#E2F4EC)!important;border:1px solid #C1E2D5!important;color:var(--bn-deep)!important}
/* drawers, dialogs, rewards */
.learning-overlay,.bn-mo{background:rgba(9,54,42,.46)!important}
.learning-drawer,.reward-dialog,.jr-dialog,.login-dialog{background:#fff!important;border:1px solid var(--bn-line)!important}
.drawer-primary,.open-house-button,.start-button,.login-submit,.jh-entry-button,.reward-actions .btn:not(.light){background:linear-gradient(135deg,var(--bn-deeper),var(--bn-emerald))!important;border:0!important;color:#fff!important}
.drawer-close,.drawer-resume,.save-btn.saved{background:#F6FBF8!important;color:var(--bn-deep)!important;border:1px solid var(--bn-line)!important}
.reward-top,.drawer-heading,.login-divider{background:linear-gradient(180deg,#F9FCFB,#F1F8F5)!important;border-bottom:1px solid var(--bn-line)!important}
.reward-stage-0,.reward-stage-1,.reward-stage-2,.reward-stage-3,.reward-spark,.key-arrival{color:var(--bn-gold)!important}
/* reference page button/nav consistency */
#bn-mastery-nav,.bn-mastery-nav{background:linear-gradient(135deg,var(--bn-gold),#F6B73C)!important;color:#fff!important;border:0!important;box-shadow:0 10px 22px rgba(243,163,26,.2)!important}
#bn-mastery-nav:hover,.bn-mastery-nav:hover{filter:brightness(.98)}
/* forms */
input,select,textarea,.search,.bn-search{border:1px solid #D6E5DE!important;border-radius:12px!important;background:#fff!important;color:var(--bn-text)!important}
input:focus,select:focus,textarea:focus,.search:focus,.bn-search:focus{outline:3px solid rgba(65,199,155,.15)!important;border-color:#7ACFB3!important}
@media (max-width: 768px){
  .card,.home-panel,.topic-link,.topic-card,.topic-item,.tool-card,.learning-drawer,.login-dialog,.reward-dialog,.jr-dialog,.ig-banner,.ig-section-title,.ig-summary-card,.ig-comparison,.ig-rule-panel,.ig-full-rule,.ig-application,.ig-attention,.ig-clue,.ig-solved,.t1-card,.t1-summary-card,.vn-summary-card{border-radius:16px!important}
  .reading-shell .lesson-panel{border-radius:20px!important}
}

/* ===== FINAL CEKAP HARMONY OVERRIDE — ALL LESSON CONTENT ===== */
:root{--purple:#159B72!important;--purple-dark:#073E34!important;--ink:#1E2925!important;--muted:#65716B!important;--gold:#F3A31A!important;--line:#E2ECE6!important;--soft:#F4FAF7!important;--paper:#FFFFFF!important}
html,body{background:#F5FBF8!important;color:#1E2925!important}
.app{background:linear-gradient(145deg,#F3FAF7,#EEF7F3 55%,#F8FCFA)!important}
.shell{background:#FFFFFF!important;border:1px solid #E2ECE6!important;box-shadow:0 18px 48px rgba(13,93,75,.08)!important}
.reading-shell{background:#FFFFFF!important;color:#1E2925!important}
.reading-shell .back-link,.reading-shell .back-link *{color:#0D5D4B!important}
.reading-title .eyebrow,.reading-title .eyebrow *{color:#159B72!important}
.reading-title h1,.reading-title h1 *{color:#073E34!important}
.reading-shell .house-note-link,.reading-shell .house-note-link *{background:#F8FCFA!important;border-color:#CDE5DB!important;color:#385A4E!important}
.step-track{border-bottom-color:#E2ECE6!important}
.step-track button{background:#F8FCFA!important;border-color:#DCE8E2!important;color:#65716B!important}
.step-track button.done{background:#EAF7F1!important;color:#0D5D4B!important;border-color:#B9DFD2!important}
.step-track button.current,.step-track button.done.current{background:linear-gradient(135deg,#0D5D4B,#159B72)!important;color:#FFFFFF!important;border-color:#159B72!important}
.step-heading h2,.step-heading h2 *{color:#0D5D4B!important}
.step-count,.step-count *{color:#65716B!important}
.lesson-panel{background:#FFFFFF!important;border-color:#E2ECE6!important}
.infographic-notes{color:#1E2925!important}
.ig-banner{background:linear-gradient(135deg,#0D5D4B,#159B72)!important;color:#FFFFFF!important;border:0!important}
.ig-banner *{color:#FFFFFF!important}
.ig-instruction,.ig-instruction *{color:#65716B!important}
.ig-section-title,.ig-section-title *{color:#0D5D4B!important}
.ig-node{background:#FFFFFF!important;border:1px solid #DCE8E2!important;box-shadow:0 8px 20px rgba(13,93,75,.06)!important}
.ig-node.is-open{border-color:#159B72!important;box-shadow:0 10px 24px rgba(21,155,114,.12)!important}
.ig-node-trigger,.ig-node-trigger *{color:#0D5D4B!important}
.ig-index{background:#EAF7F1!important;color:#0D5D4B!important}
.ig-node:nth-child(4n+1){border-inline-start:6px solid #159B72!important}
.ig-node:nth-child(4n+2){border-inline-start:6px solid #2585D8!important}
.ig-node:nth-child(4n+3){border-inline-start:6px solid #F3A31A!important}
.ig-node:nth-child(4n){border-inline-start:6px solid #CF4E4B!important}
.ig-example,.ig-example *{background:#EEF6FD!important;color:#1F64A5!important;border-color:#C4DCF1!important}
.ig-rule-panel,.ig-compare,.ig-summary-card{background:#FFFFFF!important;border-color:#DCE8E2!important}
.ig-rule-panel summary,.ig-compare summary,.ig-summary-card summary,.ig-rule-panel summary *,.ig-compare summary *,.ig-summary-card summary *{color:#0D5D4B!important}
.ig-clue{background:#FFF7E3!important;color:#7A4C00!important}
.ig-application{background:#EFF9F5!important;border-color:#B9DFD2!important;color:#0D5D4B!important}
.ig-attention,.ig-conditions{background:#FFF7E3!important;border-color:#F2D59A!important;color:#7A4C00!important}
.note{background:#FFF7E3!important;border-color:#F2D59A!important;border-inline-start-color:#F3A31A!important;color:#5F4B16!important}
.note strong{color:#7A4C00!important}.note .ar{color:#5F4B16!important}
.example,.colored-example{background:#EFF9F5!important;border-color:#B9DFD2!important;color:#0D5D4B!important}
.flash{background:#EEF6FD!important;border-color:#9EC8ED!important;color:#1F64A5!important}
.feedback,.feedback.success,.correct{background:#EFF9F5!important;border-color:#B9DFD2!important;color:#0D5D4B!important}
.feedback.retry,.wrong{background:#FEF0EF!important;border-color:#E8B6B3!important;color:#803A37!important}
.vn-node{background:#FFFFFF!important;border-color:#DCE8E2!important;color:#1E2925!important}
.vn-node-button,.vn-node-button *{color:#0D5D4B!important}
.vn-tip{background:#FFF7E3!important;border-inline-start-color:#F3A31A!important;color:#6A520F!important}
.vn-more{background:#FBFDFC!important;border-color:#DCE8E2!important}
.t1-banner{background:linear-gradient(135deg,#0D5D4B,#159B72)!important;color:#FFFFFF!important}
.t1-banner *{color:#FFFFFF!important}
.t1-card,.t1-summary-card{background:#FFFFFF!important;border-color:#DCE8E2!important;color:#1E2925!important}
.option{background:#FFFFFF!important;border-color:#DCE8E2!important;color:#1E2925!important}
.option:hover{background:#F5FBF8!important;border-color:#B9DFD2!important}
.btn,.primary-btn,.login-submit,.drawer-primary,.start-button,.open-house-button{background:linear-gradient(135deg,#0D5D4B,#159B72)!important;color:#FFFFFF!important;border-color:#159B72!important}
.text-btn,.btn.light{background:#FFFFFF!important;color:#0D5D4B!important;border-color:#DCE8E2!important}
a{color:#0D5D4B!important}
.lang-bi .bi>[lang=ar]{color:#526C62!important}
@media(max-width:650px){.shell{border-radius:24px!important}.reading-title h1{color:#073E34!important}.step-track button{background:#F8FCFA!important}.step-track button.current{background:linear-gradient(135deg,#0D5D4B,#159B72)!important}}
@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap";.journey-hero{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)!important;align-items:start}.journey-hero .hero-copy{padding:3rem 0 2rem 2rem}.journey-hero .hero-house-wrap{padding:2rem 1.5rem 2rem .5rem}.journey-home-actions{display:flex;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}.journey-house{width:100%;max-width:680px;margin:auto;color:#fbf3ff;position:relative}.jh-roof{height:95px;clip-path:polygon(50% 0,100% 100%,0 100%);background:linear-gradient(140deg,#c49bd9,#159B72 50%,#3f215f);display:flex;justify-content:center;align-items:flex-end;padding-bottom:13px;border-bottom:5px solid #d6ae69;filter:drop-shadow(0 3px 5px #0003)}.jh-roof span{font-family:Noto Naskh Arabic,serif;font-size:1.65rem;color:#fff0c9}.jh-building{background:linear-gradient(90deg,#4c2e68,#8057a0 50%,#4c2e68);border:3px solid #c3a0d5;border-radius:0 0 22px 22px;box-shadow:0 24px 60px #13051f55;overflow:hidden}.jh-floor{padding:.7rem .8rem .95rem;border-bottom:7px solid #3e2358;box-shadow:inset 0 -2px #d7b89455;background-image:linear-gradient(90deg,transparent 48%,#ffffff04 50%,transparent 52%)}.jh-floor-label{font-size:.8rem!important;margin:0 0 .65rem!important;font-weight:500;color:#f2dbad;text-align:center}.jh-floor-label .vn-bi,.jh-floor-label .bi{align-items:center}.jh-floor-label .ar{font-size:1em;color:inherit!important}.jh-rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;direction:ltr}.jh-room{display:flex;align-items:center;flex-direction:column;min-width:0;border:1px solid #c4a2da3d;border-radius:12px;padding:.65rem .35rem .45rem;background:#32194740;color:#f8efff;position:relative;cursor:pointer}.jh-room:disabled{opacity:.7;cursor:not-allowed}.jh-room.jh-available{border-color:#dfbf8390}.jh-room.jh-done{background:#b789d025;border-color:#f0d59d}.jh-door-frame{width:70%;max-width:86px;height:100px;position:relative;display:block;border:4px solid #c9a070;border-radius:28px 28px 2px 2px;perspective:500px;background:#201229;box-shadow:0 5px 9px #14051a60;overflow:hidden}.jh-light{position:absolute;inset:0;background:radial-gradient(ellipse at bottom,#fff3ae,#b67acd 75%);opacity:.12}.jh-door{position:absolute;inset:0;background:linear-gradient(120deg,#a37ab8,#684283);border-radius:23px 23px 0 0;transform-origin:left center;transition:transform .6s ease;display:flex;justify-content:center;align-items:center;color:#f5dbaa;box-shadow:inset 0 0 0 2px #4c2d64}.jh-door-panel{position:absolute;inset:10px 8px;border:1px solid #dfbfda55;border-radius:15px 15px 2px 2px}.jh-handle{position:absolute;right:8px;top:58%;width:7px;height:7px;border-radius:50%;background:#ffe2a8;box-shadow:0 0 5px #f4cf82}.jh-done .jh-light{opacity:.75}.jh-opening .jh-door{transform:rotateY(-100deg)}.jh-opening .jh-light{opacity:1}.jh-room-name{font-size:.73rem;line-height:1.45;margin-top:.65rem;min-height:3rem;width:100%}.jh-room-name>[lang],.jh-room-status>[lang]{text-align:center!important;color:inherit!important}.jh-room-name .ar{font-size:1.14em;line-height:1.65}.jh-room-status{font-size:.62rem;color:#e6d1f0;min-height:2.3rem;margin-top:.3rem}.jh-progress-label{font-size:.65rem;color:#f7dfa5}.jh-room progress{width:85%;height:4px;margin-top:.25rem;accent-color:#f2cf88}.jh-entrance{padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;background:#35204366}.jh-main-door{position:relative;display:flex;width:105px;height:90px;border:4px solid #dab375;border-radius:40px 40px 2px 2px;background:#fff0b4;overflow:hidden;perspective:400px}.jh-main-door>span{width:50%;height:100%;background:linear-gradient(100deg,#82549d,#4f2e70);transition:transform .8s;transform-origin:left center;border:1px solid #c3a1bb}.jh-main-door>span:nth-child(2){transform-origin:right center}.jh-main-door>svg{position:absolute;top:45%;left:38%;color:#f4d597;transition:opacity .2s}.jh-entered .jh-main-door>span:first-child,.jh-knocking .jh-main-door>span:first-child{transform:rotateY(-95deg)}.jh-entered .jh-main-door>span:nth-child(2),.jh-knocking .jh-main-door>span:nth-child(2){transform:rotateY(95deg)}.jh-entered .jh-main-door>svg,.jh-knocking .jh-main-door>svg{opacity:0}.jh-knocking .jh-main-door{animation:jhKnock .35s 2}.jh-entry-button{min-height:48px;max-width:100%;background:#fbefd6;color:#512f6b;border-color:#f7d58e}.jh-entry-button:disabled{opacity:1;background:transparent;color:#f5e7fa;border-color:transparent;cursor:default}.jh-key-collection{text-align:center;padding:1rem .25rem}.jh-key-collection .bi>[lang]{text-align:center!important;color:#f5e7ff!important}.jh-key-row{display:grid;grid-template-columns:repeat(10,1fr);gap:.3rem;margin-top:.7rem}.jh-key-row>span{display:flex;flex-direction:column;align-items:center;gap:.1rem;color:#9b83ae;background:#ffffff08;padding:.35rem .05rem;border-radius:9px}.jh-key-row>span.collected{background:#ecd29920;color:#f7da99;box-shadow:inset 0 0 0 1px #ffe2a130}.jh-key-row small{font-size:.6rem}.jh-final{border:1px solid #e8c581;border-radius:18px;padding:1rem;background:#9b70b42b;text-align:center;color:#ffebbd}.journey-complete .jh-building{box-shadow:0 0 32px #edce9250,0 15px 45px #15071f50}.jh-final .bi>[lang]{text-align:center!important;color:inherit!important}.jr-dialog{border:1px solid #d8bbeb;border-radius:24px;padding:2rem;width:min(500px,calc(100% - 2rem));max-height:90dvh;overflow:auto;background:#fcf8ff;color:#0D5D4B;text-align:center;box-shadow:0 24px 80px #10051a66}.jr-dialog::backdrop{background:#160d26b5;backdrop-filter:blur(4px)}.jr-dialog .bi>[lang]{text-align:center!important}.jr-close{position:absolute;right:.7rem;top:.4rem;font-size:1.8rem;border:0;background:none;min-width:44px;min-height:44px}.jr-animation{height:155px;position:relative;display:grid;place-items:center;margin:1rem 0}.jr-frame{width:100px;height:135px;border:7px solid #ca9e62;border-radius:40px 40px 0 0;background:radial-gradient(#fff3ac,#cf9adb);perspective:500px;overflow:hidden;box-shadow:0 0 30px #d9b9ea}.jr-door{height:100%;width:100%;border-radius:30px 30px 0 0;background:linear-gradient(135deg,#a67bbd,#583273);transform-origin:left;animation:jrOpen 1.8s ease forwards}.jr-animation>svg{position:absolute;color:#ebc26c;animation:jrKey 1.8s ease forwards;filter:drop-shadow(0 3px 3px #55385d)}.jr-count{font-size:2rem;color:#68408b}.jr-dialog .btn{margin-top:.7rem;min-height:48px}.journey-house button:focus-visible{outline:3px solid #ffe3a5;outline-offset:3px}@keyframes jhKnock{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}@keyframes jrOpen{0%,40%{transform:rotateY(0)}to{transform:rotateY(-100deg)}}@keyframes jrKey{0%{transform:rotate(-30deg) scale(.7)}45%{transform:rotate(65deg) scale(1)}to{transform:translateY(-45px) rotate(0);opacity:0}}@media(max-width:1100px){.journey-hero{grid-template-columns:1fr!important}.journey-hero .hero-copy,.lang-ar .journey-hero .hero-copy{padding:1.5rem 1.2rem .5rem;text-align:center}.journey-hero .hero-house-wrap,.lang-ar .journey-hero .hero-house-wrap{padding:1rem}.journey-home-actions{justify-content:center}.journey-house{max-width:620px}}@media(max-width:650px){.jh-roof{height:70px}.jh-floor{padding:.65rem .4rem .8rem}.jh-rooms{gap:.35rem}.jh-room{padding:.5rem .2rem}.jh-door-frame{height:84px;width:76%;border-width:3px}.jh-room-name{font-size:.65rem;min-height:3.3rem}.jh-room-status{font-size:.6rem;min-height:2.6rem}.jh-key-row{gap:.15rem}.jh-key-row svg{width:16px}.jr-dialog{padding:1.6rem 1rem}.jh-entrance{padding:.75rem}}@media(prefers-reduced-motion:reduce){.jh-door,.jh-main-door>span{transition:none}.jh-knocking .jh-main-door,.jr-door,.jr-animation>svg{animation:none}.jr-door{transform:rotateY(-100deg)}.jr-animation>svg{opacity:0}}.vn-bi{display:flex;flex-direction:column;gap:.35rem}.vn-bi>[lang=ms]{text-align:left;direction:ltr}.vn-bi>[lang=ar]{text-align:right;direction:rtl}.vn-bi>.ar{font-size:1.3em;color:inherit}.vn-instruction{font-size:.94rem;color:#675773;line-height:1.7}.vn-map{margin:1rem 0 1.5rem}.vn-root{max-width:480px;margin:0 auto 1.5rem;padding:1rem 1.3rem;border-radius:12px;color:#fff;background:#159B72;position:relative;font-weight:650}.vn-root .vn-bi>[lang]{text-align:center}.vn-root:after{content:"";position:absolute;left:50%;bottom:-1.5rem;height:1.5rem;border-left:2px solid #d3c1e7}.vn-branches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:.8rem;align-items:start}.vn-node{background:var(--tone-bg,#f8f5fc);border:1px solid var(--tone-line,#d9c9e8);border-top:4px solid var(--tone,#76529c);border-radius:12px;min-width:0;overflow:hidden}.vn-node-button{display:flex;align-items:center;gap:.65rem;text-align:start;background:none;border:0;padding:1rem;width:100%;color:var(--tone,#159B72);min-height:84px}.vn-node-button>.vn-bi{flex:1;font-weight:650;font-size:1rem}.vn-node-number{font-size:.88rem;align-self:start;padding-top:.15rem}.vn-node>div{padding:0 1rem 1rem}.vn-node p{font-size:1rem}.vn-node .vn-concept-example{font-size:1.55rem;background:#fff;border-radius:8px;padding:.5rem .65rem;line-height:2.1;color:#382747}.vn-compact .vn-node-button{min-height:70px}.tone-isim{--tone:#215ca4;--tone-bg:#edf5ff;--tone-line:#b8d3f4}.tone-fiil{--tone:#9c4b0b;--tone-bg:#fff3e7;--tone-line:#eac49e}.tone-harf{--tone:#146953;--tone-bg:#eaf8f2;--tone-line:#add9c9}.tone-mixed{--tone:#68517f;--tone-bg:#f4effa;--tone-line:#d3c3e2}.vn-more{border:1px solid #e0d5eb;background:#fcfaff;border-radius:10px;padding:1rem;margin:1rem 0}.vn-more summary{font-size:.98rem}.vn-more summary>.vn-bi{display:inline-flex;vertical-align:top}.vn-more[open] summary{margin-bottom:.75rem}.vn-tip{padding:1.1rem 1.25rem;border-inline-start:4px solid #b78329;background:#fff8e9;border-radius:10px;margin:1.2rem 0}.vn-tip strong{color:#7c551c}.vn-tip p:last-child{margin-bottom:0}.vn-legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:1rem 0}.vn-legend>span{display:flex;align-items:center;gap:.4rem;color:var(--tone);font-size:.875rem}.vn-legend .vn-bi{flex-direction:row;align-items:center;gap:.35rem}.vn-legend i{width:10px;height:10px;border-radius:3px;background:var(--tone)}.vn-sentence{display:flex;justify-content:center;align-items:stretch;gap:.6rem;flex-wrap:wrap;margin:.8rem 0;padding:1rem .6rem;background:#fcfaff;border-radius:12px;border:1px solid #ece4f3}.vn-word{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;max-width:100%;padding:.4rem .9rem;border:1px solid var(--tone-line,#d9c9e8);border-bottom:3px solid var(--tone,#76529c);border-radius:10px;background:var(--tone-bg,#f8f5fc);color:var(--tone,#159B72);min-height:52px;transition:background .15s,box-shadow .15s}.vn-word>.ar{font-size:1.95rem;line-height:2;overflow-wrap:anywhere}.vn-word .vn-word-label{font-size:.875rem;gap:0}.vn-word-label>[lang]{text-align:center}.vn-word-label>.ar{font-size:1.1em}.vn-word.is-selected{box-shadow:0 0 0 2px var(--tone);background:#fff}.vn-word:disabled{opacity:.5}.vn-word.correct:disabled{opacity:1}.vn-analysis-slot{min-height:65px}.vn-analysis{display:grid;grid-template-columns:minmax(100px,auto) 1fr;gap:1rem;align-items:center;padding:1rem 1.2rem;border-inline-start:4px solid var(--tone);background:var(--tone-bg);border-radius:10px}.vn-analysis-word{font-size:2rem;color:var(--tone);text-align:center}.vn-analysis p{margin:0!important;font-size:1rem}.vn-lab{padding:1.2rem;border:1px solid #ded0eb;background:#faf7fd;border-radius:14px;margin-bottom:1.8rem}.vn-lab h3{margin-top:0}.vn-switch{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.vn-switch .btn{font-size:.9rem;padding:.55rem .85rem}.vn-build-target{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;min-height:110px;background:#fff;border:2px dashed #c2a9d9;border-radius:12px;padding:1rem}.vn-build-target>.vn-bi>[lang]{text-align:center;color:#726080}.vn-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:.75rem}.vn-summary-card{border:1px solid var(--tone-line,#ddcfea);border-top:4px solid var(--tone,#76529c);padding:1.1rem;border-radius:12px;background:var(--tone-bg,#faf7fd);min-width:0}.vn-summary-card strong{color:var(--tone,#159B72)}.vn-summary-card>p.ar{font-size:1.6rem;color:#483159;background:#fff;padding:.6rem;border-radius:8px;line-height:2.1}.vn-summary-card p{font-size:1rem}.vn-key-challenge{padding:1.2rem;border:1px solid #e2c88f;background:#fffaf0;border-radius:12px;margin:1.4rem 0}.vn-key-challenge>p.ar{font-size:1.8rem;text-align:center}.lang-ar .vn-map,.lang-ar .vn-summary,.lang-ar .vn-lab,.lang-ar .vn-key-challenge,.lang-ar .vn-more,.lang-ar .vn-tip{direction:rtl}.lang-ar .vn-bi>[lang=ar]{text-align:right}.lang-ar .vn-root .vn-bi>[lang]{text-align:center}.lang-ar .vn-analysis{direction:rtl}.vn-node-button:hover{background:#ffffff70}.vn-more summary:hover{color:#45245f}@media(max-width:650px){.vn-branches,.vn-summary-grid{grid-template-columns:1fr}.vn-node-button{min-height:66px}.vn-root{font-size:.95rem}.vn-word{padding:.35rem .7rem}.vn-word>.ar{font-size:1.75rem}.vn-sentence{gap:.5rem;padding:.8rem .4rem}.vn-analysis{grid-template-columns:1fr;gap:.3rem}.vn-lab,.vn-key-challenge{padding:1rem}.vn-word-label{font-size:.875rem!important}.vn-legend{gap:.5rem}.vn-summary-card{padding:1rem}.vn-summary-card>p.ar{font-size:1.5rem}.vn-build-target{padding:.7rem}}@media(prefers-reduced-motion:reduce){.vn-word{transition:none}}@media print{.vn-node>div[hidden]{display:block}.vn-summary-grid{grid-template-columns:repeat(2,1fr)}.vn-summary-card{break-inside:avoid}.vn-key-challenge{display:none}}.infographic-notes{--ig-purple:#159B72;--ig-line:#d8c7e9;--ig-soft:#f4edf9;color:#352440;min-width:0}.ig-banner{display:flex;align-items:flex-start;gap:1rem;padding:1.3rem;border:1px solid var(--ig-line);border-radius:20px;background:linear-gradient(120deg,#ede1f7,#FBFDFC)}.ig-banner>svg{flex-shrink:0;color:#159B72;margin-top:.4rem}.ig-banner h3{margin:0!important}.ig-banner p:last-child{margin-bottom:0}.ig-instruction{font-size:.94rem;color:#685474}.ig-map{display:grid;grid-template-columns:repeat(var(--ig-count,3),minmax(0,1fr));gap:.8rem;margin:1rem 0}.ig-node{border:1px solid var(--ig-line);border-radius:16px;background:#faf7fd;overflow:hidden;min-width:0}.ig-node.is-open{border-color:#159B72;box-shadow:0 5px 18px #159B7215}.ig-node-trigger{display:flex;align-items:center;gap:.65rem;width:100%;min-height:86px;background:none;border:0;padding:1rem;color:#0D5D4B}.ig-node-trigger>.vn-bi{flex:1;font-weight:650}.ig-index{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;border-radius:50%;background:#E8F6F0;font-size:.8rem}.ig-node>div{padding:0 1rem 1rem}.ig-example{font-size:clamp(1.35rem,3vw,1.7rem)!important;line-height:2.15!important;overflow-wrap:anywhere;margin:.8rem 0!important;color:#1F64A5}.ig-section-title{display:flex;align-items:center;gap:.7rem;color:#159B72;margin:1rem 0}.ig-section-title h3{margin:0!important}.ig-rule-panel{border:1px solid var(--ig-line);border-radius:15px;padding:1rem 1.2rem;background:#FBFDFC;margin:.9rem 0}.ig-rule-panel summary,.ig-compare summary,.ig-summary-card summary{cursor:pointer;color:#0D5D4B}.ig-rule-panel summary .vn-bi{display:inline-flex;vertical-align:top}.ig-full-rule{line-height:1.95;white-space:pre-line}.ig-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1rem 0}.ig-compare,.ig-summary-card{border:1px solid var(--ig-line);border-radius:18px;padding:1.1rem;margin:0;background:#FBFDFC;min-width:0}.ig-application{background:#eef7f3;border-color:#b6d9ca}.ig-attention,.ig-conditions{background:#fff8ed;border-color:#e7d3b3}.ig-chip{display:flex;gap:.6rem;align-items:center;font-weight:650}.ig-tap{font-size:.82rem;color:#65716B;font-weight:400;margin-top:.5rem}.ig-compare[open] .ig-tap,.ig-summary-card[open] .ig-tap{display:none}.ig-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9rem}.ig-summary-1{background:#eef7f3;border-color:#b6d9ca}.ig-summary-2{background:#fff8ed;border-color:#e7d3b3}.ig-modes{display:flex;justify-content:center;gap:.65rem;flex-wrap:wrap;margin:1rem 0}.ig-clue{display:flex;align-items:flex-start;gap:.8rem;border-radius:15px;background:#FFF7E3;padding:1rem;color:#7A4C00}.ig-clue svg{flex-shrink:0;margin-top:.2rem}.ig-answer-line{border:2px solid transparent;border-radius:16px;transition:background-color .2s,border-color .2s}.ig-answer-line.ig-solved{background:#edf8f3;border-color:#54957a;animation:igGlow .65s ease-out}.infographic-notes :is(button,summary):focus-visible{outline:3px solid #a96b1c;outline-offset:4px}.ig-identify{margin:1rem 0}.ig-compare summary>.ig-example,.ig-summary-card summary>.ig-example{font-weight:500}@keyframes igGlow{0%{box-shadow:0 0 #4d957950}to{box-shadow:0 0 0 14px transparent}}@media(max-width:650px){.ig-map,.ig-comparison,.ig-summary{grid-template-columns:1fr}.ig-banner{align-items:center;flex-direction:column;text-align:center;padding:1rem}.ig-node-trigger{min-height:68px}.ig-example{text-align:center}.ig-section-title,.ig-chip{justify-content:center}.ig-rule-panel{padding:1rem}.ig-summary-card summary,.ig-compare summary{text-align:center}.ig-modes .btn{min-height:44px}.ig-clue{flex-direction:column;align-items:center}}@media(prefers-reduced-motion:reduce){.ig-answer-line{transition:none}.ig-answer-line.ig-solved{animation:none}}.t1-infographic{--t1-ink:#0D5D4B;--t1-line:#d8c4ea;color:#33243f}.t1-banner{display:flex;gap:1rem;align-items:center;padding:1.2rem;border-radius:18px;background:linear-gradient(130deg,#eee2fa,#f9f4fd);border:1px solid var(--t1-line)}.t1-banner svg{color:var(--t1-ink);flex-shrink:0}.t1-banner h3{margin:0 0 .5rem}.t1-flow,.t1-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin:1rem 0}.t1-card{border:1px solid var(--t1-line);border-radius:16px;overflow:hidden;background:#faf7fd;min-width:0}.t1-card.is-open{border-color:#8253a8;box-shadow:0 5px 18px #159B7215}.t1-card>button{display:flex;align-items:center;gap:.7rem;width:100%;padding:1rem;background:transparent;border:0;color:var(--t1-ink);min-height:85px}.t1-card>button .vn-bi{flex:1}.t1-card>div{padding:0 1rem 1rem}.t1-example{display:block;font-size:1.65rem;line-height:2!important;color:#0D5D4B}.t1-keypoint{display:flex;justify-content:center;gap:.7rem;align-items:center;padding:1rem;background:#f0e8f8;border-radius:13px;color:#0D5D4B;margin-top:1.2rem}.t1-comparisons{display:grid;gap:.8rem}.t1-compare{padding:1rem 1.2rem;border:1px solid #d8c4ea;border-inline-start:5px solid #a979b5;border-radius:14px;background:#fcf9fd;margin:0}.t1-compare.is-complete{border-color:#95c5b5;border-inline-start-color:#28705b;background:#eff8f4}.t1-compare summary{cursor:pointer}.t1-compare summary .vn-bi{display:inline-flex}.t1-compare.is-complete .t1-example{color:#205e4b}.t1-build{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;padding:1.5rem;border:2px dashed #bc9cd5;border-radius:18px;margin:1rem 0;font-family:Noto Naskh Arabic,serif;font-size:2rem;background:#f8f2fc}.t1-gap{min-width:4rem;border-bottom:2px solid #aa84c7}.t1-build.t1-success{border:2px solid #4f9278;background:#edf8f2;animation:t1Glow .65s ease-out}.t1-choices{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin:1rem 0}.t1-choices .t1-selected{background:#159B72;color:#fff}.t1-question{text-align:center;font-size:2rem;padding:1.3rem;background:#FFF7E3;border-radius:18px}.t1-summary-card{margin:0;padding:1rem;border:1px solid var(--t1-line);border-radius:16px;background:#FBFDFC;min-width:0}.t1-summary-card summary{color:#0D5D4B;cursor:pointer}.t1-summary-card:nth-child(2){background:#eef7f3}.t1-summary-card:nth-child(3){background:#fff6e9}.t1-summary-card .t1-example{font-size:1.45rem;overflow-wrap:anywhere}.t1-infographic button:focus-visible,.t1-infographic summary:focus-visible{outline:3px solid #99631b;outline-offset:4px}@keyframes t1Glow{0%{box-shadow:0 0 #76ba9855}to{box-shadow:0 0 0 15px transparent}}@media(max-width:650px){.t1-flow,.t1-summary{grid-template-columns:1fr}.t1-banner{flex-direction:column;text-align:center}.t1-card>button{min-height:64px}.t1-example{text-align:center}.t1-build{font-size:1.8rem;padding:1rem}.t1-summary-card summary{text-align:center}}@media(prefers-reduced-motion:reduce){.t1-build.t1-success{animation:none}}:root{font-size:16px;--purple:#159B72;--purple-dark:#073E34;--ink:#2f263d;--muted:#736780;--gold:#ac7c2c;--line:#e7e1ee;--soft:#f6f3fa;--paper:#fff}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:#F5FBF8;color:var(--ink)}.app{min-height:100vh;background:radial-gradient(ellipse at 15% 0%,#41C79B35,transparent 52%),linear-gradient(145deg,#073E34,#159B72 58%,#25A77A);background-attachment:fixed;padding-bottom:1px}button,input,select{font:inherit}button,summary{cursor:pointer}button,a,input,select{-webkit-tap-highlight-color:transparent}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #c99946;outline-offset:4px}button{color:inherit}svg{flex-shrink:0}h1,h2,h3,p{overflow-wrap:anywhere}h1,h2,h3{font-weight:650}p{line-height:1.85;white-space:pre-line}a{color:#0D5D4B;text-decoration:underline}.ar{font-family:Noto Naskh Arabic,Traditional Arabic,Georgia,serif;line-height:1.9;font-size:1.3em;letter-spacing:0!important}.bi{display:flex;flex-direction:column;gap:.25rem}.bi>[lang=ms]{direction:ltr;text-align:left}.bi>[lang=ar]{direction:rtl;text-align:right}.lang-bi .bi>[lang=ar]{color:#65716B}.lang-ar .bi>[lang=ar]{text-align:inherit;color:inherit}.topbar{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:85px;padding:1rem 1.3rem;color:#fff}.brand{display:flex;align-items:center;gap:.7rem;background:none;border:0;color:#fff;font-weight:650;font-size:.95rem;letter-spacing:.07em;padding:0}.language-choice select{background:#ffffff10;color:#fff;border:1px solid #ffffff45;border-radius:9px;padding:.65rem .9rem;min-height:44px;max-width:190px}.language-choice option{background:#fff;color:var(--ink)}.official-logo{display:block;position:relative;overflow:hidden;background:#fff;border-radius:10px;flex-shrink:0}.official-logo img{position:absolute;width:150%;height:auto;max-width:none;left:50%;top:50%;transform:translate(-50%,-50%)}.hero-logo{width:310px;height:219px;margin:0 auto}.compact-logo{width:134px;height:89px}.shell{width:calc(100% - 2rem);max-width:940px;margin:0 auto 2rem;padding:1.8rem 2rem;border-radius:18px;background:var(--paper)}.shell h1{font-size:clamp(1.45rem,3.8vw,2rem);line-height:1.35;margin:.15rem 0 1rem}.shell h1 .ar{font-size:1.07em}.shell h2{font-size:1.25rem;margin:.3rem 0 1rem;line-height:1.5}.shell h3{font-size:1.1rem;margin:1rem 0 .6rem}.shell p{margin:.8rem 0}.home-shell{max-width:690px;background:none;padding:0;border:0}.home-panel{background:#fff;border-radius:20px;padding:1.3rem 2.5rem 1.5rem;box-shadow:0 18px 65px #23113324}.home-intro{font-size:1rem;text-align:center;margin:.15rem 0 1.1rem!important}.home-intro .bi{text-align:center}.home-intro>[lang]{text-align:center}.home-intro .ar{font-size:1.14em}.house-gate{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:.9rem;padding:1.05rem 0;border-block:1px solid var(--line);margin:1.1rem 0 1.3rem}.house-symbol{position:relative;color:#a38cae;width:72px;height:80px;display:grid;place-items:center}.house-lock{position:absolute;left:26px;top:36px;background:#fff;border-radius:8px;padding:4px;color:#8e6c37}.gate-copy{min-width:0}.gate-copy>strong{font-size:.95rem;gap:.1rem}.gate-copy>strong .ar{font-size:1.1em}.gate-caption{font-size:.86rem;line-height:1.55;margin-top:.4rem;gap:.2rem}.gate-caption .ar{font-size:1.15em}.house-gate progress{margin-top:.6rem}.house-gate.is-ready .house-symbol,.house-gate.is-open .house-symbol{color:#976b25}.house-gate.is-open{background:#fffcf4;border-color:#ebd7ad;border-radius:12px;padding:1.05rem}.gate-button{grid-column:1/-1;width:100%;margin-top:.25rem}.house-gate.is-opening .house-lock{animation:unlock-turn 1s ease-in-out both}.house-gate.is-open .house-symbol{animation:open-door .6s ease-out both}.house-gate.is-opening .house-symbol>svg{animation:open-door 1s ease both}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:46px;padding:.75rem 1.2rem;background:var(--purple);color:#fff;border:1px solid var(--purple);border-radius:10px;font-weight:600;font-size:.95rem;text-decoration:none}.btn .bi>[lang=ar]{color:inherit;font-size:1.14em}.btn.light{background:#fff;color:var(--purple);border-color:#dfd4eb}.btn.gold{background:#ae7c2b;color:#fff;border-color:#ae7c2b}.btn.selected,.btn.light.selected{background:#eee6f8;border-color:#8261ac}.btn:hover:not(:disabled){filter:brightness(.97)}.start-button{display:flex;width:100%;padding:.8rem 1.2rem}.start-button .bi{flex:1;text-align:center;gap:.1rem}.start-button .bi>[lang]{text-align:center}.next-topic{font-size:.85rem;margin:.65rem 0 0!important;color:var(--muted);text-align:center;gap:0}.next-topic>[lang]{text-align:center!important}.next-topic .ar{font-size:1.15em}.home-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:1rem}.home-menu button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;background:#fff;border:0;border-radius:12px;padding:1.1rem .65rem;min-height:112px;color:#65498a;font-size:.9rem}.home-menu button .bi{gap:.1rem}.home-menu button .bi>[lang]{text-align:center}.home-menu .ar{font-size:1.1em}.home-menu button:hover{background:#f4eefb}.back-strip{padding:0;background:none;margin-bottom:.5rem;border-radius:0}.back-strip .text-btn{color:#fff}.text-btn{display:inline-flex;align-items:center;gap:.5rem;border:0;background:none;padding:.4rem 0;color:var(--purple);font-size:.9rem}.text-btn .bi{gap:0}.text-btn .ar{font-size:1.08em}.reading-shell{max-width:850px}.reading-title{padding-top:1rem}.eyebrow{font-size:.85rem;color:#65716B;font-weight:600}.eyebrow .ar{font-size:1.1em}.reading-title .eyebrow{flex-direction:row;gap:.7rem;align-items:center}.reading-title h1{font-size:1.6rem;margin-top:.6rem}.step-track{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:1.25rem 0 1.5rem;border-bottom:1px solid var(--line);margin-bottom:1.5rem;position:relative}.step-track button{display:flex;align-items:center;justify-content:center;flex:1;max-width:64px;min-height:42px;border:1px solid #DCE8E2;border-radius:9px;background:#fff;color:#8B9992;font-weight:600;font-size:.95rem}.step-track button.current{background:var(--purple);border-color:var(--purple);color:#fff}.step-track button.done{background:#EFF9F5;color:#0D5D4B;border-color:#CBE6DC}.step-track button.done.current{background:var(--purple);color:#fff}.step-track button:disabled{background:#FBFDFC}.lesson-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:1.5rem;min-width:0}.reading-shell>.lesson-panel{border:0;border-radius:0;padding:0}.step-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.step-heading h2{margin-top:0}.step-count{font-size:.85rem;color:#8a7a95;text-align:end}.step-count .ar{font-size:1.07em}.lead{font-size:1.07rem;line-height:1.9}.lead .ar{font-size:1.4em}.lesson-panel .bi{gap:.55rem}.lesson-panel .step-heading .bi{gap:.1rem}.note{padding:1.1rem 1.2rem;background:var(--soft);border-inline-start:3px solid #F3A31A;border-radius:0 8px 8px 0;margin:1.5rem 0}.note>p:last-child{margin-bottom:0}.note .ar{color:#5F6E67!important}.note strong{font-size:.95rem}.lesson-footer{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--line);margin-top:1.8rem;padding-top:1.25rem}.lesson-footer .bi{gap:0}.step-hint{font-size:.85rem;color:var(--muted);margin:.7rem 0 0!important}.step-hint .ar{font-size:1.1em}.example{font-size:clamp(1.65rem,4vw,2.2rem);line-height:2.1!important;text-align:center;background:#EEF6FD;padding:1.3rem;border-radius:11px;color:#1F64A5}.flash{width:100%;min-height:210px;padding:1.8rem;border:1px dashed #9EC8ED;border-radius:14px;background:#EEF6FD;color:#1F64A5;text-align:start}.flash h3{font-size:1.5rem}.options{display:flex;flex-direction:column;gap:.7rem;margin:1.5rem 0}.option{display:flex;gap:.9rem;align-items:center;text-align:start;padding:.95rem 1rem;background:#fff;border:1px solid #d9cde5;border-radius:9px;min-height:56px;color:var(--ink)}.option .bi{flex:1}.option:disabled{opacity:1}.option-number{font-size:.85rem;color:#8a759e;flex-shrink:0}.correct{background:#eef5ed!important;border-color:#6f946a!important}.wrong{background:#fff0ee!important;border-color:#c2887b!important}.feedback{background:#f4f0f8;padding:1.1rem;border-radius:10px;margin:1.2rem 0}.feedback.success{background:#eef5ed}.feedback.retry{background:#fff5ec}.achievement{text-align:center;padding:1.3rem 0;display:flex;flex-direction:column;align-items:center;gap:.5rem}.achievement>svg{color:#ac7c2c}.achievement h2{font-size:2rem}.achievement .bi{max-width:680px}.achievement>.bi>[lang]{text-align:center}.achievement .note{text-align:start;width:100%}.earned-key{color:#a3732c;background:#fbf4e5;border:1px solid #eddfbb;padding:1.1rem;border-radius:50%;margin-bottom:.5rem}.topic-controls{display:flex;gap:.8rem;align-items:stretch;margin-top:1.4rem}.search{display:flex;align-items:center;gap:.65rem;border:1px solid #ddd3e7;border-radius:9px;padding:.7rem .85rem;flex:1;background:#fff;min-width:0}.search svg{color:#9f88b3}.search input{width:100%;min-width:0;color:var(--ink);border:0;padding:.2rem;background:none}.search button{border:0;background:none;font-size:1.3rem;color:#997dae}.page-intro{color:var(--muted);font-size:.95rem}.page-intro .ar{font-size:1.2em}.filters,.actions,.number-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 1.4rem}.filter{padding:.55rem .9rem;background:#fff;color:var(--muted);border:1px solid #e4dcea;border-radius:8px;font-size:.85rem}.filter .ar{font-size:1.1em}.filter.selected{color:var(--purple);background:#f2ecf9;border-color:#c4afd7}.topic-list{border-top:1px solid var(--line)}.topic-row{display:flex;align-items:center;gap:.3rem;border-bottom:1px solid var(--line)}.topic-link{display:flex;align-items:center;gap:1rem;flex:1;min-width:0;border:0;background:none;padding:1rem .25rem;text-align:start}.topic-link h2{font-size:1rem;flex:1;margin:0;font-weight:550}.topic-link h2 .ar{font-size:1.2em}.topic-number{width:34px;height:38px;display:grid;place-items:center;font-size:.9rem;color:#9f8aac;flex-shrink:0}.topic-number.finished{color:#a3732c}.topic-step-count{font-size:.85rem;color:#9a89a7;white-space:nowrap}.topic-link>svg{color:#ac9ab7}.save-btn{padding:.6rem;border:0;background:none;color:#bcadca}.save-btn.saved{color:#a47528}.save-btn.saved svg{fill:#f2e2bf}.topic-link:hover h2{color:var(--purple)}.tool-list{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:1.5rem}.tool-card{display:flex;align-items:center;gap:1.25rem;text-align:start;padding:1.4rem .4rem;background:#fff;border:0;border-bottom:1px solid var(--line)}.tool-card>svg{color:#987ab3}.tool-card>div{flex:1}.tool-card h2{font-size:1.1rem;margin:0}.tool-card h2 .ar{font-size:1.15em}.tool-card p{font-size:.9rem;color:var(--muted);margin:.4rem 0 0}.tool-card p .ar{font-size:1.15em}.tool-card:hover{background:#FBFDFC}.word-line,.builder-target{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;padding:1.5rem 0}.word{font-size:1.8rem;color:var(--purple-dark);background:#faf7fd;border:1px solid #d9cbe6;border-radius:8px;padding:.35rem 1rem}.word.selected{background:var(--purple);color:#fff;border-color:var(--purple)}.builder-target{align-items:center;min-height:110px;border:1px dashed #b79dcc;border-radius:10px;padding:1rem;background:#faf7fd;margin:1rem 0}.classify-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;padding:.7rem 0;border-bottom:1px solid #dfd4e9}.classify-row>.ar{min-width:80px;font-size:1.65rem}.classify-row .actions{margin:0}.classify-row .btn{padding:.4rem .6rem;font-size:.85rem}.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.5rem 0}.gloss-card{padding:1.15rem;text-align:start;background:#fff;border:1px solid var(--line);border-radius:10px}.gloss-card h3{margin:0 0 .7rem;font-size:1.05rem}.gloss-card>span{font-size:.85rem;color:#947ba5}.gloss-card p{font-size:.95rem}.notice{background:#fff4dc;color:#715628;padding:1rem;border:1px solid #dac08d;max-width:900px;margin:1rem auto;border-radius:8px}details{margin-top:1.4rem}summary{font-weight:550;color:var(--purple);display:list-item}summary>.bi{display:inline-flex}.footer{display:flex;justify-content:center;color:#ece2f7;max-width:950px;margin:1.3rem auto 1.8rem;font-size:.85rem;opacity:.85}.footer>.bi{flex-direction:row;gap:1rem;align-items:center}.footer .ar{color:#ece2f7!important;font-size:1.1em}.skip-link{position:absolute;top:-100px;background:#fff;padding:1rem;z-index:100}.skip-link:focus{top:0}#content:focus{outline:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes unlock-turn{0%{transform:rotate(0)}45%{transform:rotate(-45deg);color:#c59434}to{transform:rotate(0);opacity:.3}}@keyframes open-door{0%{opacity:.35;transform:scale(.91)}to{opacity:1;transform:scale(1)}}@media(max-width:650px){.topbar{min-height:73px;padding:.8rem 1rem}.brand{font-size:.82rem;gap:.5rem}.brand>svg{width:20px}.language-choice select{font-size:.85rem;padding:.6rem;max-width:150px}.compact-logo{width:112px;height:75px}.shell{padding:1.4rem 1.15rem;border-radius:15px}.home-shell{padding:0;max-width:520px}.home-panel{padding:1rem 1.3rem 1.25rem;border-radius:16px}.hero-logo{width:270px;max-width:100%;height:191px}.home-intro{font-size:.95rem}.house-gate{grid-template-columns:59px 1fr;gap:.6rem}.house-symbol{width:57px}.house-symbol>svg{width:56px}.house-lock{left:18px;top:38px;padding:3px}.house-lock svg{width:17px}.gate-caption{font-size:.82rem}.gate-caption .ar{font-size:1.14em}.home-menu{gap:.5rem}.home-menu button{padding:.9rem .3rem;font-size:.8rem;min-height:107px}.home-menu .ar{font-size:1.16em}.home-menu button>svg{width:20px}.reading-title h1{font-size:1.4rem}.step-track{gap:.4rem;margin-bottom:1.2rem}.step-track button{max-width:48px;min-height:39px;font-size:.9rem}.lesson-panel{padding:1.1rem}.reading-shell>.lesson-panel{padding:0}.step-heading{gap:.6rem}.step-heading h2{font-size:1.15rem}.step-count{font-size:.78rem}.lesson-footer .btn{padding:.65rem .8rem;font-size:.85rem}.lesson-footer{gap:.6rem}.lead{font-size:1.03rem}.lead .ar{font-size:1.42em}.topic-link{gap:.45rem}.topic-link h2{font-size:.95rem}.topic-number{width:25px;font-size:.82rem}.topic-link>svg{display:none}.topic-step-count{font-size:.78rem}.save-btn{padding:.55rem .3rem}.topic-controls{gap:.5rem}.topic-controls>.btn{padding:.6rem .7rem;font-size:.85rem}.level-filters{gap:.35rem}.filter{padding:.45rem .7rem}.card-grid{grid-template-columns:1fr}.tool-card{gap:.85rem;padding:1.25rem 0}.tool-card>svg:last-child{width:16px}.tool-card h2{font-size:1rem}.tool-card p{font-size:.85rem}.word{font-size:1.6rem;padding:.3rem .8rem}.note{padding:1rem}.footer{font-size:.8rem}.back-strip{padding:0 0 .1rem;background:none}.number-nav .btn{min-width:41px;padding:.6rem .8rem}}@media(max-width:360px){.hero-logo{width:245px;height:173px}.home-panel{padding:1rem}.home-menu button{font-size:.75rem}.topbar{gap:.5rem}.brand{font-size:.74rem}.language-choice select{max-width:130px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media print{.app{background:#fff}.topbar,.footer,.step-track,.lesson-footer,.btn,.back-strip{display:none}.shell{max-width:none;width:100%;padding:0;border:0;margin:0}.note{break-inside:avoid}}.home-shell{max-width:740px}.home-panel{padding:1.1rem 2.2rem 1.5rem}.home-panel .hero-logo{width:180px;height:123px}.home-panel .home-intro{font-size:.94rem;margin:.1rem 0 .6rem!important}.house-experience{margin:.6rem 0 1.1rem}.house-scene{position:relative;width:100%;max-width:370px;aspect-ratio:1;margin:0 auto;overflow:hidden;border-radius:24px;background:#f6f1fc;isolation:isolate}.house-art{position:absolute;inset:0;background-image:url(../house-nahu-sprite.png);background-size:200% 133.333333%;background-repeat:no-repeat}.house-art-closed{background-position:left 45%;opacity:1;transition:opacity 1.1s ease}.house-art-open{background-position:right 45%;opacity:0;transition:opacity 1.1s ease}.is-opening .house-art-open,.is-open .house-art-open{opacity:1}.is-opening .house-art-closed,.is-open .house-art-closed{opacity:0}.window-light{position:absolute;width:14.2%;height:26.3%;top:42.47%;clip-path:polygon(50% 0,72% 16%,91% 34%,100% 50%,100% 100%,0 100%,0 50%,9% 34%,28% 16%);pointer-events:none;background:radial-gradient(ellipse at center,#fff8c2ba,#ffc75c70 46%,#ffc75c00 74%);mix-blend-mode:screen;filter:blur(2px);transition:opacity 1s ease}.window-light-left{left:18.1%}.window-light-right{left:67.9%}.scene-lock{position:absolute;top:62%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:45px;height:45px;border-radius:50%;color:#7b5219;background:#fff7de;border:1px solid #dcb874;box-shadow:0 3px 12px #4c2b3926}.is-ready .scene-lock{background:#f5cf7b;color:#593805}.is-opening .scene-lock{animation:house-unlock 1.1s ease forwards}.house-progress-panel{position:relative;z-index:1;max-width:560px;margin:.65rem auto 0;padding:1rem 1.15rem;background:#fcfaff;border:1px solid #e6dceb;border-radius:14px}.key-progress-heading{display:flex;gap:.65rem;align-items:center}.collection-icon{color:#987024;display:flex}.key-progress-heading>.bi{flex:1;font-size:.94rem;gap:.1rem}.key-progress-heading>.bi>.ar{font-size:1.16em}.key-total{display:flex;align-items:baseline;gap:.35rem;white-space:nowrap;color:#766187}.key-total b{font-size:1.65rem;color:#159B72;font-weight:700}.key-total>span{font-size:.95rem}.key-collection{display:grid;grid-template-columns:repeat(19,minmax(0,1fr));gap:4px;margin:1rem 0 .7rem}.key-collection>span{display:grid;place-items:center;min-height:26px;color:#c7bdd1;border-radius:5px;background:#f0eaf6}.key-collection>span.collected{background:#f6e4b7;color:#8b6018}.key-collection svg{max-width:100%}.house-step-progress{appearance:none;display:block;width:100%;height:5px;border:0;border-radius:20px;background:#e9e0f1;overflow:hidden}.house-step-progress::-webkit-progress-bar{background:#e9e0f1}.house-step-progress::-webkit-progress-value{background:#8660ac;border-radius:20px}.house-step-progress::-moz-progress-bar{background:#8660ac}.house-status{font-size:.9rem;color:#6b597c;line-height:1.65;margin-top:.65rem;gap:.1rem}.house-status>.ar{font-size:1.15em}.is-open .house-progress-panel{background:#fffaf0;border-color:#e6cf9f}.is-open .key-total b{color:#9c7020}.open-house-button{margin:.9rem 0 0;width:100%}.new-key-status:empty{display:none}.new-key-status{font-size:.9rem;color:#8a601e;margin-top:.6rem}.new-key-status>.bi{gap:.1rem}.key-arrival{position:absolute;left:46%;top:35%;color:#b88725;filter:drop-shadow(0 2px 4px #fff);animation:house-key-arrival 2.7s ease-in-out both}.home-panel .start-button{max-width:560px;margin:0 auto}.home-panel .next-topic{max-width:560px;margin:.65rem auto 0!important}.home-menu{max-width:650px;margin:1rem auto 0}.home-menu button{min-height:98px}.lang-ar .key-progress-heading{direction:rtl}.lang-ar .key-total{direction:ltr}.lang-ar .house-status>.ar{text-align:right}@keyframes house-unlock{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}45%{transform:translate(-50%,-50%) rotate(-40deg);opacity:1}to{transform:translate(-50%) rotate(0);opacity:0}}@keyframes house-key-arrival{0%{opacity:0;transform:translateY(-30px) scale(.65)}25%{opacity:1;transform:translateY(0) scale(1.25)}65%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(160px) scale(.5)}}@media(max-width:650px){.home-panel{padding:1rem 1rem 1.2rem}.home-panel .hero-logo{width:145px;height:99px}.home-panel .home-intro{font-size:.875rem}.house-scene{max-width:290px;border-radius:18px}.house-progress-panel{padding:.85rem}.key-collection{gap:3px}.key-collection>span{min-height:23px}.key-collection svg{width:12px}.key-progress-heading{gap:.5rem}.key-progress-heading>.bi{font-size:.875rem}.key-total b{font-size:1.45rem}.house-status{font-size:.875rem}.scene-lock{width:36px;height:36px}.scene-lock svg{width:20px}.home-menu button{min-height:94px;font-size:.875rem}.home-menu{gap:.5rem}.key-arrival svg{width:27px}}@media(prefers-reduced-motion:reduce){.house-art,.window-light{transition:none}.key-arrival{animation:none;display:none}.is-opening .scene-lock{animation:none;opacity:0}}@media print{.house-scene{print-color-adjust:exact;-webkit-print-color-adjust:exact}.key-arrival,.scene-lock{display:none}}.house-layout-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:1.15rem auto;max-width:620px}.house-part-button{border:1px solid #ded0eb;background:#faf7fd;border-radius:13px;padding:1rem;display:flex;gap:.7rem;text-align:start;align-items:flex-start;color:#563579}.house-part-number{color:#a6782b;background:#fff3d8;min-width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:.9rem}.house-part-button>div{flex:1;min-width:0}.house-part-button strong{font-size:1.05rem}.house-part-button .part-tag{font-size:.9rem;margin-top:.4rem;color:#786386}.house-part-button .ar{font-size:1.15em}.house-part-button:hover{background:#eee5f8;border-color:#ad8fc8}.house-map-intro{font-size:1rem;max-width:560px;margin:1rem auto!important;color:#675174}.house-route-note{background:#f5effb;border-radius:10px;padding:1rem;margin:1rem 0;font-size:1rem}.house-route-note .ar{font-size:1.25em}.house-filter-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.house-filter-nav .btn{font-size:.9rem;padding:.55rem .8rem}.room-description{border-inline-start:3px solid #b89354;padding:.5rem 1rem;margin:1rem 0}.decoration-controls{display:flex;flex-direction:column;gap:.7rem;margin:1.2rem 0}.decoration-controls select{font:inherit;background:#fff;border:1px solid #d6c3e5;border-radius:9px;padding:.75rem;width:100%;min-height:48px;color:#463057}.house-note-link{margin:0 0 1rem;padding:.7rem 1rem;border:1px solid #e5d8ef;background:#faf7fd;border-radius:9px;font-size:.9rem}.house-note-link .ar{font-size:1.15em}.lang-ar .house-part-button{direction:rtl}.home-panel .house-scene{max-width:310px}.home-panel .hero-logo{width:155px;height:106px}.home-panel .house-progress-panel{margin-top:.5rem}.house-layout-nav+.start-button{margin-top:1rem}@media(max-width:650px){.house-part-button{padding:.85rem;gap:.5rem}.house-part-number{min-width:24px;height:26px}.house-part-button strong{font-size:.94rem}.house-part-button .part-tag{font-size:.875rem}.house-layout-nav{gap:.55rem}.home-panel .house-scene{max-width:265px}.home-panel .hero-logo{width:140px;height:96px}}@media(max-width:360px){.house-layout-nav{grid-template-columns:1fr}}.related-topic-links{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}.related-topic-links .btn{justify-content:flex-start;text-align:start}.lesson-reference{font-size:.875rem;margin:1.2rem 0}.key-collection{grid-template-columns:repeat(25,minmax(0,1fr))!important;gap:3px}.key-collection>span{min-height:19px}.key-collection svg{width:11px}.lesson-reference .ar{font-size:1.15em}.curriculum-update{font-size:.9rem;background:#fff6df;border:1px solid #ead6a5;border-radius:10px;padding:.8rem;margin:.7rem 0}.curriculum-update .ar{font-size:1.2em}@media(max-width:650px){.key-collection{grid-template-columns:repeat(15,minmax(0,1fr))!important}.key-collection>span{min-height:19px}}.learning-path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0;text-align:left;width:100%}.learning-space{display:flex;align-items:center;gap:14px;width:100%;padding:18px;border:1px solid #d8caeb;border-radius:18px;background:#fff;color:#452569;text-align:start;cursor:pointer;font:inherit;transition:transform .2s,border-color .2s,box-shadow .2s}.learning-space:hover{transform:translateY(-2px);border-color:#76519c;box-shadow:0 5px 18px #159B7218}.learning-space:focus-visible{outline:3px solid #8054af;outline-offset:3px}.learning-space:first-child{grid-column:1/-1}.space-current{border:2px solid #76519c;background:#f7f1fc}.space-complete{border-color:#b19449;background:#fffcf3}.space-index{display:grid;place-items:center;flex:0 0 40px;height:40px;border-radius:50%;background:#eee3fa;font-weight:700;font-size:20px}.space-complete .space-index{background:#f4e6b7;color:#795a12}.space-copy{display:grid;gap:7px;flex:1;min-width:0}.space-copy strong{font-size:17px}.space-description{font-size:14px;line-height:1.6;color:#67577b}.space-copy progress{width:100%;height:7px;accent-color:#76519c}.space-count{font-size:14px}.space-review{margin-top:30px;padding-top:20px;border-top:1px solid #d8caeb}@media(max-width:640px){.learning-path{grid-template-columns:1fr}.learning-space{padding:15px;gap:10px}}@media(prefers-reduced-motion:reduce){.learning-space{transition:none}.learning-space:hover{transform:none}}.reward-dialog{width:min(560px,calc(100% - 1.5rem));max-height:calc(100dvh - 1.5rem);border:1px solid #d9c19b;border-radius:22px;padding:1.2rem 1.5rem;background:#fff;color:#3f2c52;overflow:auto;box-shadow:0 30px 100px #25123966}.reward-dialog::backdrop{background:#261137bd;backdrop-filter:blur(5px)}.reward-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}.reward-eyebrow{font-size:.875rem;color:#86653a}.reward-top .text-btn{min-height:44px;padding:.3rem .6rem}.reward-title{margin:.25rem 0;font-size:1.8rem;color:#684191}.reward-dialog h3{margin:.4rem 0 .7rem;font-size:1.05rem}.reward-title>[lang],.reward-dialog h3 .bi>[lang]{text-align:center!important}.reward-scene{max-width:265px!important;width:100%;margin:.4rem auto}.reward-scene .house-art{transition:opacity 1s ease}.reward-turning-key{position:absolute;left:50%;top:61%;color:#ad7621;background:#fff0cd;border:1px solid #dab165;border-radius:50%;width:54px;height:54px;display:grid;place-items:center;transform:translate(-50%,-50%);filter:drop-shadow(0 2px 6px #fff6)}.reward-stage-0 .reward-turning-key{animation:reward-key-appear .8s ease both}.reward-stage-1 .reward-turning-key{animation:reward-key-turn 1.2s ease both}.reward-stage-2 .reward-turning-key{animation:reward-key-collect 1.25s ease both}.reward-stage-3 .reward-turning-key{display:none}.reward-status{font-size:1rem;color:#785627;text-align:center;min-height:45px}.reward-status .bi>[lang]{text-align:center!important}.reward-counter{display:flex;justify-content:center;align-items:center;gap:.5rem;margin:.7rem auto;color:#996c25;background:#fff6e3;border:1px solid #ebd39d;border-radius:13px;padding:.7rem 1rem;max-width:250px}.reward-counter strong{font-size:1.8rem}.reward-counter>.bi{font-size:.875rem}.reward-counter>.bi .ar{font-size:1.1em}.reward-copy{font-size:1rem;line-height:1.7}.reward-copy>[lang]{text-align:center!important}.reward-actions{display:flex;flex-direction:column;gap:.6rem}.reward-actions .bi>[lang]{text-align:center!important}.reward-audio{display:flex;justify-content:center;margin:.7rem auto 0;min-height:44px}.reward-audio-message{font-size:.875rem}.reward-spark{position:absolute;left:var(--x);top:25%;width:6px;height:10px;background:#d3a549;opacity:0;pointer-events:none;border-radius:2px}.reward-stage-2 .reward-spark{animation:reward-spark-fall 1.3s var(--delay) ease-out both}.reward-stage-3 .reward-counter{animation:reward-counter-settle .4s ease both}.house-progress-panel .metaphor-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin-top:.9rem}.metaphor-progress>div{border:1px solid #e4d8ed;border-radius:9px;padding:.5rem;background:#fff;min-width:0}.metaphor-progress .bi{font-size:.875rem}.metaphor-progress .ar{font-size:1.12em}.metaphor-progress progress{width:100%;height:5px;accent-color:#b38a35}.metaphor-progress small{font-size:.875rem;color:#785e88}.foundation-light{position:absolute;left:6%;width:88%;top:83%;height:4%;background:radial-gradient(ellipse,#ffd977a8,transparent 70%);filter:blur(3px);pointer-events:none}.pillar-light{position:absolute;top:43%;height:37%;width:5%;background:linear-gradient(90deg,transparent,#ffe19399,transparent);filter:blur(2px);pointer-events:none}.pillar-light-left{left:6%}.pillar-light-right{right:6%}.main-house-sparks{position:absolute;inset:0;pointer-events:none}.main-house-sparks .reward-spark{animation:reward-spark-fall 1.3s var(--delay) ease-out both}@keyframes reward-key-appear{0%{opacity:0;transform:translate(-50%,-160%) scale(1.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes reward-key-turn{0%{transform:translate(-50%,-50%) rotate(0)}65%,to{transform:translate(-50%,-50%) rotate(-90deg)}}@keyframes reward-key-collect{0%{opacity:1;transform:translate(-50%,-50%) rotate(-90deg)}40%{opacity:1;transform:translate(-50%,10%) rotate(0)}to{opacity:0;transform:translate(-50%,140px) scale(.4)}}@keyframes reward-spark-fall{0%{opacity:0;transform:translateY(0)}20%{opacity:1}to{opacity:0;transform:translate(var(--drift),180px) rotate(170deg)}}@keyframes reward-counter-settle{0%{transform:scale(.94)}70%{transform:scale(1.04)}to{transform:scale(1)}}@media(max-width:650px){.reward-dialog{padding:1rem;border-radius:16px}.reward-scene{max-width:220px!important}.reward-title{font-size:1.5rem}.reward-turning-key{width:43px;height:43px}.reward-turning-key svg{width:31px}.reward-dialog h3{font-size:1rem}}@media(prefers-reduced-motion:reduce){.reward-dialog *{animation:none!important;transition:none!important}.reward-spark,.key-arrival{display:none!important}}@media print{.reward-dialog{display:none}}.app{position:relative;isolation:isolate}.app:before{content:"";position:fixed;inset:-12px;z-index:-1;pointer-events:none;background-image:url(../islamic-pattern.svg);background-size:260px 260px;opacity:.23;filter:blur(1.6px)}.official-logo{isolation:isolate;box-shadow:0 0 22px #159B7226}.official-logo:after{content:"";position:absolute;inset:-25% auto -25% -75%;width:35%;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,#eee4fa18 15%,#fff9 50%,#ddc8f233 75%,transparent);transform:translate(0) skew(-20deg);animation:logo-light-sweep 7s ease-in-out infinite}.official-logo:hover:after,.official-logo:focus-within:after{animation-play-state:paused}@keyframes logo-light-sweep{0%,12%{transform:translate(0) skew(-20deg);opacity:0}18%{opacity:.8}52%{transform:translate(650%) skew(-20deg);opacity:.8}58%,to{transform:translate(650%) skew(-20deg);opacity:0}}@media(max-width:650px){.app:before{background-size:190px 190px;opacity:.2}}@media(prefers-reduced-motion:reduce){.official-logo:after{animation:none;opacity:0}}@media print{.app{background:#fff}.app:before,.official-logo:after{display:none}}:root{--bg-deep:#29143e;--bg-mid:#4a286d;--bg-soft:#72509a;--gold-soft:#e8c47b;--cream:#fff7eb}body{background:var(--bg-deep)}.app{background:radial-gradient(circle at 72% 30%,rgba(179,113,224,.24),transparent 34%),radial-gradient(circle at 18% 10%,rgba(130,79,174,.32),transparent 36%),linear-gradient(135deg,#261039,#3b1c59 48%,#5a327e)}.app:before{inset:0;background-image:url(../arabesque-gold.png);background-size:430px auto;background-repeat:repeat;opacity:.075;filter:hue-rotate(228deg) saturate(.45) brightness(1.4);mix-blend-mode:screen}.topbar{max-width:1440px;min-height:92px;padding:1rem 2rem;border-bottom:1px solid rgba(255,255,255,.08)}.brand{font-family:Georgia,Times New Roman,serif;font-size:1.15rem;letter-spacing:.02em}.brand svg{color:var(--gold-soft)}.shell{max-width:1180px}.reading-shell{max-width:1080px}.home-stage{width:min(1440px,calc(100% - 3rem));margin:0 auto 2rem;min-height:calc(100vh - 150px);display:grid;place-items:center}.home-hero{position:relative;width:100%;min-height:680px;display:grid;grid-template-columns:minmax(340px,.82fr) minmax(500px,1.18fr);align-items:center;gap:2rem;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:34px;background:linear-gradient(115deg,#220f33b3,#4a256775);box-shadow:0 28px 90px #12071d4d;backdrop-filter:blur(2px)}.home-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 48%,rgba(239,201,255,.16),transparent 36%),linear-gradient(90deg,rgba(18,7,28,.34),transparent 50%);pointer-events:none}.hero-copy{position:relative;z-index:2;padding:4rem 1rem 4rem 4.5rem;color:var(--cream)}.hero-official-logo{position:relative;display:block;width:min(350px,74%);margin:0 0 1.05rem;border-radius:26px;padding:.4rem;background:linear-gradient(135deg,#ffffff24,#ffffff0d);box-shadow:0 14px 34px #1303203d,inset 0 0 0 1px #ffffff24;overflow:hidden}.hero-official-logo:before{content:"";position:absolute;inset:-30% auto -30% -45%;width:42%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),rgba(255,244,214,.68),rgba(255,255,255,.12),transparent);transform:skew(-22deg);animation:logoShine 4.6s ease-in-out infinite}.hero-official-logo:after{content:"";position:absolute;inset:0;border-radius:26px;box-shadow:0 0 28px #d1a3ff2e,0 0 48px #e8c47b1a;pointer-events:none}.hero-official-logo img{display:block;width:100%;height:auto;object-fit:contain;border-radius:20px;filter:drop-shadow(0 10px 22px rgba(19,3,32,.18))}.ruang-mark{width:88px;height:88px;display:grid;place-items:center;color:var(--gold-soft);margin:0 0 .6rem}.ruang-mark svg{width:78px;height:78px;stroke-width:1.3}.hero-copy h1{font-family:Georgia,Times New Roman,serif;font-weight:500;font-size:clamp(5rem,8vw,8.8rem);line-height:.88;letter-spacing:-.055em;margin:0;color:#fff2df;text-shadow:0 8px 38px rgba(8,1,15,.3)}.hero-welcome{margin:0 0 .75rem;color:#f0d8ad;letter-spacing:.14em;text-transform:uppercase;font-size:.86rem;font-weight:700}.hero-welcome .ar{color:#f0d8ad!important;font-size:1.06em;letter-spacing:normal;text-transform:none}.hero-summary{max-width:560px;margin:1.1rem 0 0;color:#f4ebfb;line-height:1.85;font-size:1.05rem}.hero-summary .ar{color:#f5eafb!important;font-size:1.12em}.hero-summary.emphasis{margin-top:.55rem;color:#ffe7bc;font-weight:700}.hero-summary.emphasis .ar{color:#ffe7bc!important}.hero-highlights{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.35rem 0 .25rem}.hero-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .9rem;border-radius:999px;background:#ffffff14;border:1px solid rgba(255,233,188,.22);color:#fff3df;font-size:.9rem;font-weight:600;backdrop-filter:blur(4px)}.hero-chip:before{content:"\2726";color:var(--gold-soft)}.hero-chip .ar{color:#fff3df!important;font-size:1.06em}.ruang-rule{display:flex;align-items:center;gap:16px;margin:2rem 0 2.2rem;width:min(360px,90%)}.ruang-rule span{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold-soft))}.ruang-rule span:last-child{background:linear-gradient(90deg,var(--gold-soft),transparent)}.ruang-rule i{width:11px;height:11px;border:2px solid var(--gold-soft);transform:rotate(45deg)}.hero-start{min-width:310px;display:flex;align-items:center;justify-content:center;gap:.9rem;padding:1rem 1.35rem;border-radius:999px;border:1px solid rgba(255,221,162,.72);background:linear-gradient(135deg,#753796f2,#482064f5);color:#fff7ec;font-weight:700;font-size:1.05rem;box-shadow:0 0 0 3px #ce8eff14,0 16px 36px #15071e3d}.hero-start:hover{transform:translateY(-2px);box-shadow:0 0 0 4px #d8a1ff1c,0 18px 42px #15071e52}.hero-start .bi{flex-direction:row;gap:.5rem}.hero-start .bi>[lang=ar]{color:#f5dfc0}.hero-start>svg:first-child{color:var(--gold-soft)}.hero-house-wrap{position:relative;z-index:1;padding:3.5rem 4rem 3.5rem 0;display:grid;place-items:center}.hero-house-wrap:before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(244,196,255,.23),rgba(114,60,157,.07) 52%,transparent 72%);filter:blur(10px)}.hero-house-wrap .house-experience{width:100%;margin:0;position:relative}.hero-house-wrap .house-scene{max-width:590px;width:min(100%,590px);border-radius:30px;background:#ffffff0a;box-shadow:0 34px 65px #0a021261,0 0 0 1px #ffffff14}.hero-house-wrap .scene-lock{width:58px;height:58px;background:#34154aeb;color:var(--gold-soft);border-color:#e8c47bb3;box-shadow:0 0 30px #e8c47b33}.learning-overlay{position:fixed;inset:0;z-index:90;display:flex;justify-content:flex-end;background:#13071d94;backdrop-filter:blur(8px);animation:overlay-in .22s ease-out}.learning-drawer{position:relative;width:min(620px,94vw);height:100%;overflow:auto;padding:2rem 2rem 2.4rem;background:linear-gradient(180deg,#3b1c56,#2b153f);color:#fff;border-left:1px solid rgba(237,202,255,.18);box-shadow:-26px 0 80px #0a021161;animation:drawer-in .28s ease-out}.drawer-close{position:absolute;top:1.1rem;right:1.2rem;width:44px;height:44px;border:0;border-radius:50%;background:#ffffff14;color:#fff;font-size:1.9rem;line-height:1}.drawer-heading{display:flex;gap:1rem;align-items:flex-start;padding-right:3rem;margin-bottom:1.4rem}.drawer-heading>svg{color:var(--gold-soft);margin-top:.25rem}.drawer-heading h2{margin:0;font-family:Georgia,Times New Roman,serif;font-size:2rem;font-weight:550}.drawer-heading p{margin:.35rem 0 0;color:#c9b8d7;line-height:1.55;font-size:.92rem}.drawer-heading .ar{color:#dfcde8!important}.drawer-key-summary{display:grid;grid-template-columns:52px 1fr;gap:.8rem 1rem;align-items:center;padding:1rem 1.1rem;margin:0 0 1rem;border-radius:18px;background:#ffffff12;border:1px solid rgba(232,196,123,.22)}.drawer-key-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#4b2b1c;background:linear-gradient(145deg,#f3d69a,#c88e3f)}.drawer-key-summary>div{display:flex;align-items:center;gap:1rem}.drawer-key-summary>div>.bi{flex:1}.drawer-key-summary>div>span{font-size:1.2rem;font-weight:700;color:#f5d999}.drawer-key-summary progress{grid-column:1/-1;width:100%;height:6px;accent-color:#d4a556}.learning-drawer .learning-path{display:flex;flex-direction:column;gap:.75rem;margin:1rem 0}.learning-drawer .learning-space{position:relative;display:grid;grid-template-columns:64px 1fr 22px;align-items:center;gap:1rem;min-height:96px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,#ffffff12,#ffffff0b);color:#fff;padding:.95rem 1rem;overflow:hidden}.learning-drawer .learning-space:before{content:"";position:absolute;inset:auto 0 0;height:3px;background:var(--accent,rgba(232,196,123,.65));opacity:.9}.learning-drawer .learning-space:hover{background:#ffffff1a;transform:translate(-2px)}.learning-drawer .learning-space.space-current{border-color:#efc97f9e;box-shadow:0 0 0 1px #efc97f2e inset;background:linear-gradient(90deg,#c17d3c24,#ffffff0f)}.learning-drawer .learning-space.space-complete{border-color:#dbbf7c47}.learning-drawer .space-index{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:#ffffff14;color:#f0d18f;font-size:.95rem;font-weight:800;letter-spacing:.04em;box-shadow:inset 0 0 0 1px #ffffff14}.learning-drawer .space-icon-emoji{font-size:1.2rem;line-height:1}.learning-drawer .space-copy{display:flex;flex-direction:column;gap:.35rem;min-width:0}.learning-drawer .space-meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.learning-drawer .space-tag{display:inline-flex;padding:.2rem .58rem;border-radius:999px;background:#ffffff17;color:#f7e4bf;font-size:.76rem;font-weight:700;letter-spacing:.02em}.learning-drawer .space-tag .ar{color:#f7e4bf!important;font-size:1.02em}.learning-drawer .space-pill{display:inline-flex;padding:.2rem .55rem;border-radius:999px;background:#00000029;color:#d7c5e1;font-size:.73rem}.learning-drawer .space-copy strong,.learning-drawer .space-copy strong .ar{color:#fff!important}.learning-drawer .space-description,.learning-drawer .space-count{color:#bdaacb}.learning-drawer .space-description .ar,.learning-drawer .space-count .ar{color:#d1c0dc!important}.learning-drawer .learning-space progress{accent-color:#d7aa61;width:100%}.learning-drawer .learning-space>svg{color:#c7b1d5}.learning-drawer .space-entry{--accent:#d4b36e}.learning-drawer .space-irab{--accent:#d98f6b}.learning-drawer .space-isim{--accent:#d36fb3}.learning-drawer .space-jumlah-ismiyyah{--accent:#9a8df2}.learning-drawer .space-jumlah-fiiliyyah{--accent:#78a0ff}.learning-drawer .space-fiil-mudari{--accent:#4eb7b0}.learning-drawer .space-marfuat{--accent:#9bc46a}.learning-drawer .space-mansubat{--accent:#ff9f6b}.learning-drawer .space-majrurat{--accent:#64c1d7}.learning-drawer .space-tawabi{--accent:#c38cff}.learning-drawer .space-irab-aplikasi{--accent:#f0d18f}.drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1.2rem}.drawer-actions .btn{border-radius:14px;background:#ffffff12;border-color:#ffffff24;color:#fff}.drawer-actions .drawer-primary{grid-column:1/-1;background:linear-gradient(135deg,#7b4aa0,#5e337e);border-color:#b890c8}.drawer-actions .btn .ar{color:#eee0f3!important}.shell h1{font-family:Georgia,Times New Roman,serif;font-weight:550;color:#39234d;font-size:clamp(2rem,3vw,2.8rem);letter-spacing:-.02em}.shell h2{color:#4b315e}.reading-title h1{font-family:Georgia,Times New Roman,serif;font-size:clamp(2rem,3vw,2.7rem);font-weight:550}.topic-row,.tool-card{transition:background .18s ease,transform .18s ease}.topic-row:hover,.tool-card:hover{background:#faf7fd}.topic-link h2,.tool-card h2{font-weight:600}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}@keyframes drawer-in{0%{transform:translate(36px);opacity:.4}to{transform:translate(0);opacity:1}}@media(max-width:980px){.home-stage{width:min(100% - 1.4rem,900px)}.home-hero{grid-template-columns:1fr;min-height:auto;padding-top:2rem}.hero-copy{text-align:center;padding:2rem 1.3rem 0}.ruang-mark,.ruang-rule{margin-inline:auto}.hero-start{min-width:min(340px,90%)}.hero-house-wrap{padding:1rem 1.5rem 2.5rem}.hero-house-wrap .house-scene{max-width:500px}.topbar{padding-inline:1rem}}@media(max-width:650px){.app:before{background-size:260px auto;opacity:.06}.topbar{min-height:74px}.home-stage{width:calc(100% - 1rem);min-height:auto;margin-bottom:1rem}.home-hero{border-radius:22px;gap:.5rem}.hero-copy{padding-top:1.4rem}.ruang-mark{width:64px;height:64px}.ruang-mark svg{width:58px;height:58px}.hero-copy h1{font-size:clamp(4rem,20vw,6rem)}.ruang-rule{margin:1.25rem auto 1.5rem}.hero-start{min-width:0;width:90%;padding:.85rem 1rem}.hero-house-wrap{padding:.4rem 1rem 1.5rem}.hero-house-wrap .house-scene{max-width:360px;border-radius:20px}.learning-drawer{width:100%;padding:1.3rem 1rem 1.8rem}.drawer-heading{padding-right:2.4rem}.drawer-heading h2{font-size:1.65rem}.drawer-actions{grid-template-columns:1fr}.drawer-actions .drawer-primary{grid-column:auto}.shell{width:calc(100% - 1rem)}}.topic-copy{display:flex;flex-direction:column;gap:.28rem;flex:1;min-width:0}.topic-stage{display:inline-flex;align-self:flex-start;padding:.15rem .55rem;border-radius:999px;background:#f3ecfb;color:#725190;font-size:.77rem;font-weight:650}.topic-stage .ar{color:#725190!important;font-size:1.02em}.topic-link h2{margin:0}.lang-ar .home-hero{grid-template-columns:minmax(500px,1.18fr) minmax(340px,.82fr)}.lang-ar .hero-copy{text-align:right;padding:4rem 4.5rem 4rem 1.5rem}.lang-ar .hero-summary,.lang-ar .hero-welcome{margin-inline-start:auto}.lang-ar .hero-highlights{justify-content:flex-end}.lang-ar .ruang-rule{margin-inline-start:auto}.lang-ar .hero-house-wrap{padding:3.5rem 0 3.5rem 4rem}.lang-ar .drawer-close{right:auto;left:1.2rem}.lang-ar .drawer-heading{padding-right:0;padding-left:3rem}.lang-ar .space-meta{justify-content:flex-end}@media(max-width:980px){.hero-summary{max-width:none}.lang-ar .home-hero{grid-template-columns:1fr}.lang-ar .hero-copy{text-align:center;padding:2rem 1.3rem 0}.lang-ar .hero-highlights{justify-content:center}.lang-ar .ruang-rule{margin-inline:auto}.lang-ar .hero-house-wrap{padding:1rem 1.5rem 2.5rem}}.note,.vn-tip,.feedback,.vn-summary-card,.vn-analysis,.vn-node,.gloss-card,.tool-card{position:relative;overflow:hidden}.note{background:#f7f2fb!important;border-inline-start:4px solid #9f7ec0!important}.note:before{content:"\1f4dd";position:absolute;top:.75rem;right:.8rem;font-size:1.05rem;opacity:.18}.vn-tip{background:linear-gradient(135deg,#fff8ef,#f6f1ff)!important;border:1px solid #eadfc2!important;border-radius:14px!important;padding:1rem 1.1rem 1rem 3rem!important}.vn-tip:before{content:"\1f4a1";position:absolute;left:.95rem;top:.95rem;font-size:1.1rem}.feedback.success{background:#eef7ef!important;border:1px solid #b8d7bc!important}.feedback.success:before{content:"\2713";position:absolute;top:.8rem;right:1rem;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#d8efdc;color:#356b3e;font-weight:800}.feedback.retry{background:#fff5ee!important;border:1px solid #e8c8bb!important}.feedback.retry:before{content:"\21ba";position:absolute;top:.8rem;right:1rem;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fde3d5;color:#a05a43;font-weight:800}.vn-node{border-radius:16px!important}.vn-node-button{padding-left:3.1rem!important}.vn-node-button:before{content:"\25c6";position:absolute;left:1rem;top:50%;transform:translateY(-50%);font-size:.9rem;color:#8f6db4}.tone-isim .vn-node-button:before{content:"\1f3f7"}.tone-fiil .vn-node-button:before{content:"\270d"}.tone-harf .vn-node-button:before{content:"\1f517"}.tone-mixed .vn-node-button:before{content:"\1f9e9"}.vn-summary-grid{gap:1rem!important}.vn-summary-card{border-radius:16px!important;padding-top:1rem!important}.vn-summary-card:nth-child(4n+1){background:#f9f4ff!important;border:1px solid #decef2!important}.vn-summary-card:nth-child(4n+2){background:#f5f9ff!important;border:1px solid #cee0f2!important}.vn-summary-card:nth-child(4n+3){background:#fbf7ee!important;border:1px solid #eadbb5!important}.vn-summary-card:nth-child(4n+4){background:#f4fbf7!important;border:1px solid #cfe8d6!important}.vn-summary-card strong{display:flex;align-items:center;gap:.45rem}.vn-summary-card strong:before{content:"\25c8";color:#916ab4}.vn-analysis{border-radius:14px!important}.gloss-card:nth-child(odd){background:#fcf9ff!important}.gloss-card:nth-child(2n){background:#f8fbff!important}.tool-card:nth-child(4n+1){background:#fcf9ff}.tool-card:nth-child(4n+2){background:#faf7ee}.tool-card:nth-child(4n+3){background:#f7fbff}.tool-card:nth-child(4n+4){background:#f7fcf8}@keyframes logoShine{0%{transform:translate(0) skew(-22deg);opacity:0}12%{opacity:.25}42%{opacity:.9}58%{opacity:.25}to{transform:translate(540%) skew(-22deg);opacity:0}}@media(max-width:650px){.hero-welcome{font-size:.78rem;letter-spacing:.12em}.hero-summary{font-size:.98rem;line-height:1.75}.hero-highlights{justify-content:center}.hero-chip{font-size:.82rem;padding:.48rem .72rem}.learning-drawer .learning-space{grid-template-columns:52px 1fr 18px;gap:.7rem;min-height:88px;padding:.85rem}.learning-drawer .space-index{width:46px;height:46px;border-radius:14px;font-size:.8rem}.learning-drawer .space-pill{font-size:.68rem}.topic-stage{font-size:.72rem}}.hero-copy h1#baitunnahwi-title{font-family:Georgia,Times New Roman,serif;font-size:clamp(3rem,5.8vw,6.7rem);line-height:.92;letter-spacing:-.045em;font-weight:560;color:#fff3df;text-shadow:0 10px 38px rgba(21,4,31,.34);margin:.15rem 0 0;max-width:100%;word-break:normal}@media(max-width:980px){.hero-official-logo{margin-inline:auto;width:min(300px,64%)}.hero-copy h1#baitunnahwi-title{font-size:clamp(3rem,10vw,5.7rem)}}@media(max-width:650px){.hero-official-logo{width:min(240px,68%);margin-bottom:.75rem;padding:.3rem;border-radius:22px}.hero-official-logo img{border-radius:16px}.hero-copy h1#baitunnahwi-title{font-size:clamp(2.55rem,12.5vw,4.1rem);letter-spacing:-.035em}}.header-controls{display:flex;align-items:center;gap:.65rem}.motion-toggle{background:#ffffff12;color:#fff;border:1px solid #ffffff45;border-radius:9px;padding:.6rem .8rem;min-height:44px;font-size:.875rem}.motion-toggle .ar{color:inherit!important;font-size:1em}.hero-official-logo{width:min(350px,100%);height:auto;aspect-ratio:1526/1030;padding:0;isolation:isolate}.hero-official-logo img{position:static;width:100%;max-width:100%;height:100%;left:auto;top:auto;transform:none;object-fit:contain;border-radius:inherit}.hero-official-logo:before{z-index:2;pointer-events:none}.hero-official-logo:after{animation:none;transform:none;opacity:1;background:none;width:auto}.home-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0}.hero-copy{padding:2.5rem 0 2.5rem 2.5rem;min-width:0}.hero-house-wrap{padding:2rem 2.5rem 2rem 0;min-width:0}.hero-copy h1#baitunnahwi-title{font-size:clamp(1.8rem,3.3vw,3rem);line-height:1.2;letter-spacing:-.025em;overflow-wrap:anywhere}.lang-ar .hero-copy h1#baitunnahwi-title{font-family:Noto Naskh Arabic,Traditional Arabic,serif;font-size:clamp(2.6rem,5vw,4.5rem);line-height:1.6;letter-spacing:normal}.hero-summary{font-size:1rem;line-height:1.85}.hero-summary .ar{font-size:1.25em;line-height:1.9}.hero-welcome{letter-spacing:.03em;font-size:.95rem;text-transform:none}.hero-key-status{text-align:center;color:#fff0d4;margin:1rem auto 0}.hero-key-status .ar{color:inherit!important}.hero-key-status p{margin:.7rem 0}.hero-start{width:100%;min-width:0}.hero-start .bi{flex-direction:column}.hero-highlights{gap:.45rem}.hero-chip:before{content:none}.learning-overlay{margin:0;padding:0;border:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;color:inherit;overflow:hidden;background:transparent}.learning-overlay::backdrop{background:#13071dbb;backdrop-filter:blur(6px)}.learning-drawer{height:100%;overscroll-behavior:contain;padding-bottom:max(2rem,env(safe-area-inset-bottom));scrollbar-gutter:stable}.drawer-close{inset-inline-end:1rem;inset-inline-start:auto;z-index:2}.drawer-resume{width:100%;background:#754798;border-color:#be99d7}.drawer-next-topic{margin:.65rem 0 1rem;color:#f6eafd}.drawer-next-topic .ar{color:#f6eafd!important}.drawer-heading{padding-inline-end:3rem;padding-inline-start:0}.drawer-actions{padding-top:1rem;border-top:1px solid #ffffff25}.learning-drawer .space-description,.learning-drawer .space-count{color:#e0d1e9}.learning-drawer .space-description .ar,.learning-drawer .space-count .ar{color:#e0d1e9!important}.learning-drawer .space-pill,.learning-drawer .space-tag{font-size:.875rem;line-height:1.5}.learning-drawer .learning-space:before{background:#bd96d5}.space-meta .bi{flex-direction:column}.space-copy .ar{line-height:1.9}.topic-link,.topic-copy{min-width:0}.topic-step-count{white-space:nowrap;font-size:.875rem}.save-btn,.search button,.number-nav button{min-width:44px;min-height:44px}.topic-stage{font-size:.875rem}.step-track{flex-wrap:wrap}.step-track button{min-width:40px;min-height:44px}.step-count{white-space:nowrap}.step-heading{flex-wrap:wrap}.note:before,.feedback:before,.vn-tip:before,.vn-node-button:before,.vn-summary-card strong:before{content:none!important}.vn-tip{padding:1rem 1.1rem!important}.vn-node-button{padding:1rem!important;gap:.65rem}.vn-node-number{display:grid;place-items:center;flex-shrink:0}.vn-summary-card strong{display:flex;flex-direction:column;align-items:stretch}.vn-summary-card strong span{width:100%}.vn-summary-card{min-width:0}.vn-summary-card .ar,.vn-concept-example{overflow-wrap:anywhere}.vn-node-button>.vn-bi{flex:1;min-width:0}.vn-word,.word{max-width:100%;height:auto;white-space:normal}.vn-word .ar,.word.ar{overflow-wrap:anywhere;line-height:2}.vn-sentence,.word-line{row-gap:1rem}.vn-word-label{font-size:.875rem!important}.vn-tip,.note,.feedback{line-height:1.85}.vn-branches{align-items:start}.vn-analysis-slot{min-height:0}.option{min-height:48px;align-items:flex-start}.option .ar{line-height:1.9}.lesson-footer{flex-wrap:wrap;gap:.75rem}.lesson-footer .btn{flex:1;min-width:140px}.decoration-controls select{max-width:100%;width:100%;min-width:0;white-space:normal}.search{min-width:0}.search input{min-width:0;font-size:1rem}.topic-controls{flex-wrap:wrap}.topic-controls .search{flex:1 1 200px}.lang-ar .home-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.lang-ar .hero-copy{padding:2.5rem 2.5rem 2.5rem 0}.lang-ar .hero-house-wrap{padding:2rem 0 2rem 2.5rem}.lang-ar .hero-highlights{justify-content:flex-start}.lang-ar .drawer-heading{padding-inline-start:0;padding-inline-end:3rem}.lang-ar .drawer-close{left:1rem;right:auto}.lang-ar .topic-link>svg,.lang-ar .hero-start>svg:last-child,.lang-ar .learning-space>svg:last-child,.lang-ar .back-link>svg,.lang-ar .back-strip svg{transform:rotate(180deg)}.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.motion-off .hero-official-logo:before,.motion-off .official-logo:after{display:none}@media(max-width:1100px){.home-hero,.lang-ar .home-hero{grid-template-columns:1fr}.hero-copy,.lang-ar .hero-copy{padding:2rem 1.5rem .5rem;text-align:center}.hero-official-logo{margin-inline:auto;width:min(290px,80%)}.hero-copy h1#baitunnahwi-title{font-size:clamp(1.7rem,6vw,3rem)}.hero-summary{max-width:680px;margin-inline:auto}.hero-highlights,.lang-ar .hero-highlights{justify-content:center}.hero-start{max-width:400px;margin-inline:auto}.hero-house-wrap,.lang-ar .hero-house-wrap{padding:1.5rem}.ruang-rule{margin:1.3rem auto}.hero-house-wrap .house-scene{max-width:420px}}@media(max-width:650px){.topbar{gap:.7rem;align-items:flex-start;flex-wrap:wrap}.header-controls{margin-inline-start:auto;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}.motion-toggle{font-size:.875rem;padding:.55rem}.language-choice select{max-width:155px}.hero-copy,.lang-ar .hero-copy{padding:1.25rem 1rem .25rem}.hero-official-logo{width:min(250px,82%)}.hero-summary{font-size:1rem}.hero-house-wrap .house-scene{max-width:340px}.learning-drawer{padding:1.2rem .8rem 2rem}.learning-drawer .learning-space{grid-template-columns:42px minmax(0,1fr) 18px;gap:.65rem}.learning-drawer .space-index{width:40px;height:44px}.shell h1,.reading-title h1{font-size:1.6rem;line-height:1.5}.ar{line-height:2}.vn-branches,.vn-summary-grid{grid-template-columns:1fr!important}.footer>.bi{flex-direction:column;text-align:center}.footer .bi>[lang]{text-align:center}.compact-logo{width:100px;height:68px}.step-track{gap:.35rem}.step-track button{flex:1;max-width:none}.hero-welcome{font-size:1rem}.learning-drawer .space-pill{font-size:.875rem}}@media(max-width:360px){.topbar .brand{font-size:.9rem}.header-controls{width:100%;justify-content:space-between}.hero-copy h1#baitunnahwi-title{font-size:1.7rem}.drawer-key-summary{padding:.8rem;grid-template-columns:38px 1fr}.drawer-key-summary>div{gap:.4rem}.drawer-key-icon{width:36px;height:36px}.step-track button{min-width:32px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-official-logo:before{display:none}}@media print{.header-controls,.hero-start,.hero-key-status .btn{display:none}.home-hero{background:#fff;color:#222;box-shadow:none}.hero-copy *{color:#222!important}}.home-nav-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px;padding:.6rem .8rem;border:1px solid #ffffff45;border-radius:9px;background:#ffffff12;color:#fff;font-size:.875rem}.home-nav-button .ar{font-size:1em;color:inherit!important}.home-nav-button[aria-current=page]{border-color:#d9bded;background:#ffffff20}.colored-example{line-height:2.2!important}.example-token{color:var(--tone,#159B72);background:var(--tone-bg,#f4effa);border-radius:5px;padding:.08em .16em;box-decoration-break:clone;-webkit-box-decoration-break:clone;font-size:inherit;line-height:inherit}.example-separator{color:#796487}.vn-summary-card .colored-example{font-size:1.55rem;background:#fff;padding:.65rem;border-radius:9px}.hero-key-status:empty{display:none}.vn-rule-text{line-height:1.9;white-space:pre-line}.vn-rule-example{margin:1.25rem 0;padding:clamp(1rem,3vw,1.5rem);border:1px solid #dcd0ea;border-radius:18px;background:#faf7fd}.vn-fresh-example{display:flex;flex-direction:column;gap:.7rem;font-size:clamp(1.4rem,4vw,1.9rem);line-height:2.1}.vn-example-line{display:block;padding:.5rem .8rem;border-radius:12px;overflow-wrap:anywhere}.vn-example-color-0{background:#eee5f7;color:#56327b}.vn-example-color-1{background:#eaf5f3;color:#165f50}.vn-example-color-2{background:#fff1e4;color:#85410b}.vn-intro-only .lead{line-height:1.95}.vn-rule-only .vn-bi{overflow-wrap:anywhere}@media screen and (max-width:650px){.app .bi>[lang],.app .vn-bi>[lang],.app .hero-copy,.app .hero-welcome,.app .hero-summary,.app .shell :is(h1,h2,h3,p),.app .learning-drawer :is(h2,h3,p),.app .vn-fresh-example,.app .colored-example{text-align:center}.app .hero-summary,.app .hero-welcome{margin-inline:auto}.app .vn-legend{justify-content:center}}.app .flash{background:#f1e9fa;color:#4c2b6d;border:2px solid #c8b0df;transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}.app .flash[aria-expanded=true]{background:#159B72;color:#fff;border-color:#159B72;box-shadow:0 8px 24px #4e297333}.app .flash .bi>[lang],.app .flash .ar{color:inherit}.app .flash:focus-visible{outline:3px solid #b7781f;outline-offset:4px}@media(prefers-reduced-motion:reduce){.app .flash{transition:none}}@property --logo-orbit{syntax:"<angle>";initial-value:0deg;inherits:false;}.app .hero-official-logo:before,.app .official-logo:after{content:"";display:block;position:absolute;inset:0;width:auto;height:auto;padding:3px;border-radius:inherit;z-index:3;pointer-events:none;opacity:1;transform:none;background:conic-gradient(from var(--logo-orbit),transparent 0deg 245deg,#c29ce6 285deg,#fff1bd 320deg,transparent 355deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:logoBorderOrbit 4.6s linear infinite}@keyframes logoBorderOrbit{to{--logo-orbit:360deg}}@media(prefers-reduced-motion:reduce){.app .hero-official-logo:before,.app .official-logo:after{animation:none}}.journey-house{padding:0 18px 18px 0;isolation:isolate;filter:drop-shadow(12px 18px 18px rgba(17,5,30,.3))}.jh-building{position:relative;overflow:visible;border:2px solid #b48ecb;border-radius:3px 3px 15px 15px;background:linear-gradient(100deg,#aa82bf,#80579e 20%,#9269ad 60%,#613c80);box-shadow:inset 9px 0 13px #d1b4e54d,inset -7px 0 12px #2c143b55,0 10px #402450,0 15px #2e1b3e}.jh-building:after{content:"";position:absolute;top:8px;bottom:-10px;right:-17px;width:17px;background:linear-gradient(90deg,#57376e,#321b47);transform:skewY(38deg);transform-origin:left top;border-right:2px solid #9770ad;z-index:-1}.jh-roof{position:relative;height:110px;background:repeating-linear-gradient(0deg,transparent 0 10px,#32174635 11px 13px),linear-gradient(135deg,#d4b3e3,#9b70b5 33%,#654181 65%,#382348);border-bottom:8px solid #e2c089;filter:drop-shadow(3px 6px 2px #170d2760)}.jh-roof span{text-shadow:1px 3px 2px #392340;font-size:1.8rem}.jh-floor{position:relative;margin:0 10px;padding:1rem .9rem 1.15rem;background:linear-gradient(90deg,#35204622,transparent 15%,#d4b5e21a 48%,transparent 85%,#35204622);border-bottom:9px solid #634274;box-shadow:0 3px #cfb092,inset 0 6px 9px #321a4c66}.jh-floor:before,.jh-floor:after{content:"";position:absolute;top:0;bottom:-4px;width:11px;background:linear-gradient(90deg,#563569,#d5b9db 45%,#96729e 70%,#4d305f);border-top:5px solid #d5bda2;border-bottom:5px solid #d5bda2;box-shadow:3px 3px 4px #20102b55;pointer-events:none}.jh-floor:before{left:-7px}.jh-floor:after{right:-7px}.jh-floor-label{text-shadow:0 2px 2px #341f47;color:#fff0d2}.jh-room{background:linear-gradient(115deg,#32194140,#3a20552e);border-color:#d7b7e25c;box-shadow:inset 2px 2px 5px #25113944,0 1px #edd6f233}.jh-door-frame{height:111px;border:5px solid #d7b995;border-radius:40px 40px 3px 3px;box-shadow:inset 5px 0 8px #1c0b30,4px 5px #43294c,7px 9px 9px #28173370;overflow:hidden}.jh-door{background:linear-gradient(110deg,#c7a0d8,#966cb0 20%,#72458e 65%,#4b2b68);box-shadow:inset 3px 0 2px #debae166,inset -4px 0 5px #3e224f;border-radius:31px 31px 0 0}.jh-door-panel{inset:12px 9px;border:2px solid #bd94c5;border-bottom-color:#543263;box-shadow:inset 2px 2px 4px #3c204d99,1px 1px #caa3d2;border-radius:22px 22px 3px 3px}.jh-handle{box-shadow:1px 2px 2px #352137,0 0 8px #f4cf8280;background:radial-gradient(circle at 30% 30%,#fff3d1,#b8873e);width:9px;height:9px}.jh-done .jh-door-frame{box-shadow:0 0 17px #f7d78670,4px 5px #43294c}.jh-entrance{margin:0 10px;padding:1.1rem;background:linear-gradient(90deg,#493054aa,#9c77ac66,#493054aa);border-radius:0 0 10px 10px}.jh-main-door{width:125px;height:108px;box-shadow:5px 5px #402644,0 10px 15px #29173560;border-width:6px}.jh-entry-caption{font-size:.8rem;text-align:center;color:#f6e7f9}.jh-entry-caption .bi>[lang]{text-align:center}.login-dialog{width:min(460px,calc(100% - 2rem));max-height:90dvh;overflow:auto;border:1px solid #d8bfe9;border-radius:24px;padding:2rem;background:#fcf8ff;color:#51316b;box-shadow:0 25px 80px #170a2666}.login-dialog::backdrop{background:#1e0d30b3;backdrop-filter:blur(5px)}.login-dialog form{display:grid;gap:.55rem}.login-dialog label{font-weight:650;margin-top:.6rem}.login-dialog input{width:100%;min-width:0;min-height:48px;padding:.7rem .8rem;border:1px solid #bca3d0;border-radius:10px;background:#fff;color:#332140;font-size:1rem}.login-dialog input:focus-visible{outline:3px solid #a981c2;outline-offset:2px}.login-password{display:flex;gap:.4rem}.login-password input{flex:1}.login-password button{flex-shrink:0;min-height:44px}.login-demo-note{background:#f1e7fa;border-radius:12px;padding:.85rem;font-size:.88rem}.login-hint{font-size:.8rem;margin:.25rem 0!important}.login-submit{width:100%;margin-top:.75rem;min-height:48px;justify-content:center}.login-dialog h2{margin:.6rem 0}.login-dialog .jr-close{color:#159B72}.login-dialog{position:fixed}.jh-key-collection{padding-top:1.5rem}@media screen and (max-width:1100px){.app .bi>[lang],.app .vn-bi>[lang],.app .hero-copy,.app .hero-welcome,.app .hero-summary,.app .shell :is(h1,h2,h3,p),.app .learning-drawer :is(h2,h3,p),.app .vn-fresh-example,.app .colored-example{text-align:center}.app .hero-summary,.app .hero-welcome{margin-inline:auto}.app .vn-legend{justify-content:center}.app .footer>.bi{flex-direction:column}.journey-home-actions{justify-content:center}.login-dialog h2,.login-dialog>svg{text-align:center}.jh-entry-caption>[lang]{text-align:center!important}}@media(max-width:650px){.journey-house{padding-right:12px}.jh-building:after{width:11px;right:-11px}.jh-roof{height:80px}.jh-floor{padding:.7rem .3rem .9rem;margin:0 7px}.jh-floor:before,.jh-floor:after{width:8px}.jh-door-frame{height:87px;border-width:3px}.jh-door-panel{inset:9px 6px}.jh-entrance{margin:0 7px}.login-dialog{padding:1.6rem 1rem}.jh-room-name{font-size:.67rem}}.jh-roof{height:auto!important;aspect-ratio:3/1;clip-path:none;background:none;border:0;padding:0;display:block;position:relative;overflow:visible;filter:drop-shadow(3px 5px 3px #31164a55);z-index:2;margin-bottom:-2px}.jh-roof:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,#fefbff 10%,#f1e8fa 48%,#d4c3e5);clip-path:polygon(50% 4%,99% 100%,1% 100%)}.jh-roof-slope{position:absolute;bottom:3%;width:58%;height:clamp(19px,3.8vw,32px);display:flex;gap:1px;background:#3d1d60;border-radius:10px;box-shadow:0 6px #482466,0 9px 3px #80648d70;padding:2px;z-index:2}.jh-roof-left{left:1%;transform:rotate(-32deg);transform-origin:0 50%}.jh-roof-right{right:1%;transform:rotate(32deg);transform-origin:100% 50%}.jh-roof .jh-roof-tile{flex:1;min-width:0;height:100%;border-radius:6px 6px 8px 8px;background:linear-gradient(180deg,#a376cc,#8150ad 32%,#633590 76%,#502775);box-shadow:inset 0 2px 2px #c89de180,inset -2px -2px 1px #43245d,1px 2px 1px #321747}.jh-roof .jh-ridge-cap{position:absolute;top:0;left:47.5%;width:5%;height:clamp(25px,4.8vw,42px);border-radius:14px 14px 11px 11px;background:linear-gradient(90deg,#643694,#9d71c3 40%,#6b3d96 85%);box-shadow:0 4px 3px #32184477;z-index:3}.jh-roof .jh-gable-title{position:absolute;left:25%;right:25%;bottom:10%;text-align:center;color:#69418c;text-shadow:0 1px 0 #fff;font-family:Noto Naskh Arabic,serif;font-size:clamp(1.2rem,3vw,1.8rem);line-height:1.4}.jh-building{border-color:#d5c5e2;background:linear-gradient(110deg,#faf5ff,#eee5f8 40%,#e7dcf1 78%,#d4c4e1);box-shadow:inset 5px 0 8px #ffffffa0,inset -6px 0 12px #b6a0ca80,0 7px #c2afcf,0 12px #ad96be}.jh-building:after{background:linear-gradient(90deg,#c6b2d6,#a58dbb);border-right-color:#d1bfe1}.jh-floor{background:linear-gradient(90deg,#b7a0c933,transparent 17%,#ffffff38 50%,transparent 85%,#b7a0c933);border-bottom-color:#d2c0df;box-shadow:0 3px #eee5f4,inset 0 5px 7px #b5a0c647}.jh-floor:before,.jh-floor:after{background:linear-gradient(90deg,#bfa8cf,#fefaff 42%,#e3d4ed 74%,#b8a0c8);border-top-color:#eee3f5;border-bottom-color:#e0d1eb;box-shadow:3px 3px 5px #9c85af60}.jh-floor-label{color:#61407b;text-shadow:0 1px 0 #fff}.jh-room{background:linear-gradient(130deg,#ffffff75,#dfd1eb66);color:#4e2e69;border-color:#c6b1d780;box-shadow:inset 1px 2px 5px #b6a0c633,0 1px #fff9}.jh-room:disabled{opacity:1;color:#6a527e;background:#e6dcee99;border-color:#cabbd5}.jh-room.jh-available{border-color:#ab80bf}.jh-room.jh-done{background:linear-gradient(130deg,#fffaf0,#f0e4f7);border-color:#c39a53}.jh-room-name{color:#4e2e69}.jh-room-status{color:#6d537e}.jh-progress-label{color:#6a477d}.jh-room progress{accent-color:#79509e}.jh-door-frame{border-color:#f3e5c5;box-shadow:inset 4px 0 7px #311c46,3px 4px #b3a0c0,6px 7px 7px #aa92bb80}.jh-entrance{background:linear-gradient(90deg,#cdbada66,#f8f2fd88,#cdbada66);border-top:1px solid #fcf8ff}.jh-entry-caption{color:#61417a}.jh-main-door{border-color:#e5bd78;box-shadow:3px 4px #b8a1c1,0 7px 9px #a58cb060}.jh-entrance:after{content:"";display:block;width:65%;height:12px;background:linear-gradient(#f9f4fe,#d4c2e1);border-bottom:4px solid #baa5c8;box-shadow:0 5px #e9ddf3,0 9px #baa4c9;border-radius:2px;margin-bottom:8px}.jh-done .jh-door-frame{box-shadow:0 0 15px #efc87890,3px 4px #baa3bf}.journey-complete .jh-building{box-shadow:0 0 32px #f2d89865,inset 5px 0 8px #ffffffa0,0 10px #c2afcf}.journey-home-actions.journey-guide-actions{margin-top:1.2rem;margin-bottom:1rem}.app .journey-hero .hero-copy{text-align:center}.app .journey-hero .hero-copy .bi>[lang]{text-align:center}.app .journey-hero .hero-copy :is(.hero-summary,.hero-welcome,.hero-official-logo,.hero-start){margin-inline:auto}.app .journey-hero .journey-home-actions{justify-content:center}.cloud-status{text-align:center;padding:.7rem 1rem;background:#f5edf9;color:#0D5D4B;font-size:.88rem}.cloud-status .bi>[lang]{text-align:center!important}.account-links{display:flex;flex-direction:column;gap:.7rem;margin-top:1rem}.header-controls{flex-wrap:wrap}.login-dialog fieldset{display:flex;flex-direction:column;gap:.6rem}

/* Baitunnahwi layout: bilik dipusatkan; Tingkat 2 empat bilik sebaris. */
.jh-floor .jh-rooms{margin-left:auto!important;margin-right:auto!important;justify-content:center!important;align-items:stretch!important;}
.jh-floor-1 .jh-rooms{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:520px!important;}
.jh-floor-2 .jh-rooms{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:680px!important;}
.jh-floor-3 .jh-rooms{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:360px!important;}
@media(max-width:650px){
  .jh-floor-1 .jh-rooms{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:100%!important;}
  .jh-floor-2 .jh-rooms{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-width:100%!important;gap:.25rem!important;}
  .jh-floor-3 .jh-rooms{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:78%!important;}
  .jh-floor-2 .jh-room{padding:.45rem .12rem!important;}
  .jh-floor-2 .jh-door-frame{width:82%!important;height:72px!important;}
  .jh-floor-2 .jh-room-name{font-size:.58rem!important;line-height:1.35!important;min-height:3.5rem!important;}
  .jh-floor-2 .jh-room-status{font-size:.53rem!important;line-height:1.25!important;}
}

/* Google OAuth login */
.google-login-wrap{width:100%;margin:.35rem 0 1rem}.google-login-btn{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:.7rem;border:1px solid #d7cde2;border-radius:12px;background:#fff;color:#372842;font:700 14px/1.2 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 14px rgba(70,42,90,.07);transition:.18s ease}.google-login-btn:hover{border-color:#159B72;background:#faf7fd;transform:translateY(-1px)}.google-login-btn:focus-visible{outline:3px solid #e6cb85;outline-offset:2px}.google-login-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.google-g{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(from -45deg,#4285f4 0 25%,#34a853 0 50%,#fbbc05 0 75%,#ea4335 0);color:#fff;font-weight:900;font-family:Arial,sans-serif;font-size:14px;box-shadow:inset 0 0 0 2px #fff}.login-divider{display:flex;align-items:center;gap:.7rem;margin:.9rem 0 0;color:#75687e;font-size:12px}.login-divider:before,.login-divider:after{content:"";height:1px;flex:1;background:#e8e0ec}.login-divider span{white-space:nowrap}

/* Bright topic-note styling across lesson steps */
.reading-shell{--lesson-accent:#159B72;--lesson-accent-soft:#efe7ff;--lesson-note-bg:linear-gradient(135deg,#f5efff,#e6d7ff);--lesson-note-border:#b388ff;--lesson-example-bg:linear-gradient(135deg,#f7f0ff,#ede3ff);--lesson-flash-bg:linear-gradient(135deg,#f6f1ff,#ece4ff);--lesson-feedback-bg:#f4efff;--lesson-panel-edge:#eadbff}
.reading-shell:has(.step-track button:nth-child(1).current){--lesson-accent:#2f86ff;--lesson-accent-soft:#e9f3ff;--lesson-note-bg:linear-gradient(135deg,#eef6ff,#d8eaff);--lesson-note-border:#73b1ff;--lesson-example-bg:linear-gradient(135deg,#f2f8ff,#e3efff);--lesson-flash-bg:linear-gradient(135deg,#eff7ff,#ddeeff);--lesson-feedback-bg:#eef6ff;--lesson-panel-edge:#cfe2ff}
.reading-shell:has(.step-track button:nth-child(2).current){--lesson-accent:#ff8a2a;--lesson-accent-soft:#fff1e5;--lesson-note-bg:linear-gradient(135deg,#fff4ea,#ffe0c0);--lesson-note-border:#ffae5b;--lesson-example-bg:linear-gradient(135deg,#fff7ef,#ffe8cf);--lesson-flash-bg:linear-gradient(135deg,#fff5eb,#ffe5c7);--lesson-feedback-bg:#fff3e6;--lesson-panel-edge:#ffd9ad}
.reading-shell:has(.step-track button:nth-child(3).current){--lesson-accent:#20b96a;--lesson-accent-soft:#e8fff1;--lesson-note-bg:linear-gradient(135deg,#effff5,#d2f8df);--lesson-note-border:#62d08e;--lesson-example-bg:linear-gradient(135deg,#f3fff7,#dff8e9);--lesson-flash-bg:linear-gradient(135deg,#effff5,#d8f8e5);--lesson-feedback-bg:#effff5;--lesson-panel-edge:#b7edca}
.reading-shell:has(.step-track button:nth-child(4).current){--lesson-accent:#ff4fa3;--lesson-accent-soft:#fff0f7;--lesson-note-bg:linear-gradient(135deg,#fff1f8,#ffd6e8);--lesson-note-border:#ff8fbd;--lesson-example-bg:linear-gradient(135deg,#fff4f9,#ffe3ef);--lesson-flash-bg:linear-gradient(135deg,#fff1f7,#ffddea);--lesson-feedback-bg:#fff0f7;--lesson-panel-edge:#ffc5dc}
.reading-shell:has(.step-track button:nth-child(5).current){--lesson-accent:#00b7ad;--lesson-accent-soft:#e9fffd;--lesson-note-bg:linear-gradient(135deg,#effffd,#ccf9f4);--lesson-note-border:#58dccf;--lesson-example-bg:linear-gradient(135deg,#f2fffd,#dff9f6);--lesson-flash-bg:linear-gradient(135deg,#edfffd,#d5faf5);--lesson-feedback-bg:#ecfffd;--lesson-panel-edge:#b0efe7}
.reading-shell:has(.step-track button:nth-child(6).current){--lesson-accent:#ffbf2f;--lesson-accent-soft:#fff9e8;--lesson-note-bg:linear-gradient(135deg,#fffbe8,#ffe79a);--lesson-note-border:#ffd15a;--lesson-example-bg:linear-gradient(135deg,#fffdf0,#fff0be);--lesson-flash-bg:linear-gradient(135deg,#fffbe8,#ffefbd);--lesson-feedback-bg:#fff9ea;--lesson-panel-edge:#ffe29f}
.reading-shell:has(.step-track button:nth-child(7).current){--lesson-accent:#7c43d6;--lesson-accent-soft:#f2ebff;--lesson-note-bg:linear-gradient(135deg,#f7f2ff,#dfd0ff);--lesson-note-border:#af8cff;--lesson-example-bg:linear-gradient(135deg,#f8f3ff,#e7dbff);--lesson-flash-bg:linear-gradient(135deg,#f5efff,#e5d8ff);--lesson-feedback-bg:#f4eeff;--lesson-panel-edge:#d8c5ff}
.lesson-panel{background:linear-gradient(180deg,#fff, #fff 55%, var(--lesson-accent-soft));border-color:var(--lesson-panel-edge);box-shadow:0 16px 32px rgba(84,56,122,.08)}
.step-heading h2{color:var(--lesson-accent)}
.note{padding:1.15rem 1.2rem;background:var(--lesson-note-bg);border-inline-start:6px solid var(--lesson-note-border);border-radius:0 14px 14px 0;box-shadow:0 10px 20px rgba(90,63,124,.08)}
.note strong{color:var(--lesson-accent)}
.note .ar{color:#4e4262!important}
.example{background:var(--lesson-example-bg);border:1px solid var(--lesson-panel-edge);box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.flash{background:var(--lesson-flash-bg);border:1px dashed var(--lesson-note-border);box-shadow:0 10px 20px rgba(90,63,124,.07)}
.feedback{background:var(--lesson-feedback-bg);border-inline-start:5px solid var(--lesson-note-border)}
.feedback.success{background:linear-gradient(135deg,#effff4,#d9f7e2);border-inline-start-color:#62d08e}.feedback.retry{background:linear-gradient(135deg,#fff9eb,#ffe3bc);border-inline-start-color:#ffbf2f}
.option:hover{border-color:var(--lesson-note-border);background:#fffdfd}.option:focus-visible{outline:3px solid color-mix(in srgb,var(--lesson-note-border) 55%, white);outline-offset:2px}
.step-track button.current{background:var(--lesson-accent)!important;border-color:var(--lesson-accent)!important;color:#fff!important;box-shadow:0 10px 18px rgba(90,63,124,.18)}

/* FORCE BRIGHT TOPIC NOTES — visible in every lesson */
.reading-shell .lesson-panel{background:linear-gradient(180deg,#ffffff 0%,#fff9fe 100%)!important;border:2px solid #ead4ff!important;box-shadow:0 16px 36px rgba(95,46,145,.10)!important}
.reading-shell .note{background:linear-gradient(135deg,#fff3a8,#ffd86e)!important;border:2px solid #f2b91f!important;border-inline-start:9px solid #ff8a00!important;border-radius:16px!important;color:#3f2f00!important;padding:1.15rem 1.25rem!important;box-shadow:0 10px 22px rgba(207,145,0,.16)!important}
.reading-shell .note strong{color:#8f4b00!important}.reading-shell .note .ar{color:#4b3200!important}
.reading-shell .example{background:linear-gradient(135deg,#dff5ff,#bfe4ff)!important;border:2px solid #63aef5!important;color:#173f6b!important;box-shadow:0 10px 22px rgba(63,125,255,.12)!important}
.reading-shell .flash{background:linear-gradient(135deg,#EEF6FD,#DCECF9)!important;border:2px dashed #2585D8!important;color:#1F64A5!important;box-shadow:0 10px 22px rgba(124,67,214,.12)!important}
.reading-shell .feedback{background:linear-gradient(135deg,#dffbea,#bff3cf)!important;border:2px solid #62cf83!important;border-inline-start:9px solid #20a75b!important;color:#1e5b35!important}
.reading-shell .feedback.retry{background:linear-gradient(135deg,#fff0df,#ffd2ad)!important;border-color:#ff9b45!important;border-inline-start-color:#ff7a00!important;color:#713800!important}
.reading-shell .vn-tip{background:linear-gradient(135deg,#fff2b8,#ffd86f)!important;border-inline-start:7px solid #ff9a00!important;border-radius:14px!important}
.reading-shell .vn-more{background:linear-gradient(135deg,#f5ecff,#e3d2ff)!important;border:2px solid #c09df4!important}
.reading-shell .vn-node:nth-child(5n+1){--tone:#2f86ff;--tone-bg:#e5f2ff;--tone-line:#8ec3ff}
.reading-shell .vn-node:nth-child(5n+2){--tone:#ff7a00;--tone-bg:#fff0df;--tone-line:#ffc081}
.reading-shell .vn-node:nth-child(5n+3){--tone:#18a65b;--tone-bg:#e4f9ec;--tone-line:#8bddaa}
.reading-shell .vn-node:nth-child(5n+4){--tone:#d83f92;--tone-bg:#ffe6f2;--tone-line:#ff9fc9}
.reading-shell .vn-node:nth-child(5n){--tone:#159B72;--tone-bg:#efe5ff;--tone-line:#bd9cff}
.reading-shell .step-track button.current{transform:translateY(-2px);box-shadow:0 9px 18px rgba(92,49,128,.22)!important}

/* ===== BAITUNNAHWI THEME INSPIRED BY CEKAP I'RAB ===== */
:root{--purple:#159B72;--purple-dark:#073e34;--ink:#18221f;--muted:#68756f;--gold:#f3a31a;--line:#e5ece8;--soft:#f2faf6;--paper:#fff}
body{background:#0d5d4b;color:var(--ink)}
.app{background:
radial-gradient(circle at 12% 4%,rgba(21,155,114,.16),transparent 28%),
radial-gradient(circle at 90% 15%,rgba(243,163,26,.12),transparent 26%),
linear-gradient(145deg,#073e34,#0d7058 55%,#25A77A);background-attachment:fixed}
.topbar{color:#fff}.brand{color:#fff}.brand:hover{background:#ffffff12}.home-nav-button,.language-choice select{background:#ffffff12!important;border-color:#ffffff28!important;color:#fff!important}.language-choice select option{color:#1d2d28;background:#fff}.bn-mastery-nav{background:linear-gradient(135deg,#159B72,#25A77A)!important;border-color:#41c79b!important}.bn-mastery-nav:hover{background:linear-gradient(135deg,#0d7058,#159B72)!important}
.cloud-status{background:#e8f7f1;color:#0d5d4b}
.journey-hero{background:transparent}.journey-house{color:#effff9}.jh-roof{background:linear-gradient(140deg,#41c79b,#159B72 52%,#073e34);border-bottom-color:#f3a31a}.jh-roof span{color:#fff4c8}.jh-building{background:linear-gradient(90deg,#073e34,#159B72 50%,#073e34);border-color:#41c79b;box-shadow:0 24px 60px #022b2455}.jh-floor{border-bottom-color:#0a4f41}.jh-floor-label{color:#ffe08a}.jh-room{border-color:#a6e2cf55;background:#032f2845;color:#f4fffb}.jh-room.jh-available{border-color:#f3a31a99}.jh-room.jh-done{background:#41c79b25;border-color:#ffe08a}.jh-door-frame{border-color:#d8a54d;background:#072a24}.jh-light{background:radial-gradient(ellipse at bottom,#fff3ae,#41c79b 75%)}.jh-door{background:linear-gradient(120deg,#25A77A,#0d5d4b);color:#ffe08a;box-shadow:inset 0 0 0 2px #073e34}.jh-room-status{color:#d6f1e7}.jh-progress-label{color:#ffe08a}.jh-room progress{accent-color:#f3a31a}.jh-entrance{background:#073e3466}.jh-main-door{border-color:#d8a54d;background:#fff0b4}.jh-main-door>span{background:linear-gradient(100deg,#25A77A,#0d5d4b)}.jh-key-row>span{color:#a6cfc2}.jh-key-row>span.collected{background:#f3a31a22;color:#ffe08a;box-shadow:inset 0 0 0 1px #ffe08a44}.jh-final{border-color:#f3a31a;background:#f3a31a1f;color:#fff0b9}.journey-complete .jh-building{box-shadow:0 0 32px #f3a31a55,0 15px 45px #022b244f}
.jr-dialog{border-color:#b7e7d7;background:#fbfffd;color:#0d5d4b}.jr-frame{border-color:#d8a54d;background:radial-gradient(#fff3ac,#41c79b);box-shadow:0 0 30px #6edbb6}.jr-door{background:linear-gradient(135deg,#25A77A,#0d5d4b)}.jr-count{color:#0d7058}
.vn-root{background:linear-gradient(135deg,#073e34,#159B72)}.vn-root:after{border-color:#9bd8c4}.vn-tip{border-inline-start-color:#f3a31a;background:#fff8e9}.vn-more{border-color:#d9ebe4;background:#fbfefc}
.tone-isim{--tone:#2585d8;--tone-bg:#edf5ff;--tone-line:#b8d3f4}.tone-fiil{--tone:#cf4e4b;--tone-bg:#fff0ef;--tone-line:#efc4c2}.tone-harf{--tone:#159B72;--tone-bg:#eaf8f2;--tone-line:#add9c9}.tone-mixed{--tone:#f3a31a;--tone-bg:#fff8e8;--tone-line:#f0d79d}
.reading-shell{--lesson-accent:#159B72;--lesson-accent-soft:#eefaf6;--lesson-note-bg:linear-gradient(135deg,#edf9f4,#d8f3e9);--lesson-note-border:#7fd0b3;--lesson-example-bg:linear-gradient(135deg,#f7fffb,#fff8e8);--lesson-flash-bg:linear-gradient(135deg,#eef9f5,#e7f8f6);--lesson-feedback-bg:#edf8f4;--lesson-panel-edge:#d6ebe3}
.reading-shell .lesson-panel{background:linear-gradient(180deg,#fff,#fbfefc)!important;border:2px solid #d6ebe3!important;box-shadow:0 16px 36px rgba(13,80,61,.10)!important}
.reading-shell .note{background:linear-gradient(135deg,#fff8de,#ffe6a1)!important;border:2px solid #efcc68!important;border-inline-start:9px solid #f3a31a!important;color:#5d4614!important}.reading-shell .note strong{color:#8a5a00!important}.reading-shell .note .ar{color:#5b4416!important}
.reading-shell .example{background:linear-gradient(135deg,#e8f8f2,#d2efe4)!important;border:2px solid #74c9aa!important;color:#0d5d4b!important}
.reading-shell .flash{background:linear-gradient(135deg,#edf8f4,#d8f2e8)!important;border:2px dashed #62bfa0!important;color:#0d5d4b!important}
.reading-shell .feedback{background:linear-gradient(135deg,#e8f8f1,#ccebdc)!important;border:2px solid #68bf95!important;border-inline-start:9px solid #159B72!important;color:#0d5d4b!important}.reading-shell .feedback.retry{background:linear-gradient(135deg,#fff1df,#ffd6aa)!important;border-color:#efb155!important;border-inline-start-color:#f3a31a!important;color:#704700!important}
.reading-shell .vn-node:nth-child(5n+1){--tone:#159B72;--tone-bg:#e9f8f2;--tone-line:#8bd1b8}.reading-shell .vn-node:nth-child(5n+2){--tone:#f3a31a;--tone-bg:#fff5df;--tone-line:#efca78}.reading-shell .vn-node:nth-child(5n+3){--tone:#2585d8;--tone-bg:#eaf4fd;--tone-line:#9dc9ef}.reading-shell .vn-node:nth-child(5n+4){--tone:#cf4e4b;--tone-bg:#fff0ef;--tone-line:#efb9b6}.reading-shell .vn-node:nth-child(5n){--tone:#25A77A;--tone-bg:#e7f8f3;--tone-line:#91d8c0}
.step-track button.current{background:#159B72!important;border-color:#159B72!important}.step-track button.done{background:#e8f6f0;color:#0d7058;border-color:#b9e0d2}.btn,.primary-btn{background:linear-gradient(135deg,#159B72,#25A77A)!important;border-color:#159B72!important;color:#fff!important}.btn:hover,.primary-btn:hover{filter:brightness(.96)}
a{color:#0d7058}.filter.selected{color:#0d7058;background:#eaf8f2;border-color:#9ed6c2}.topic-link:hover{background:#f3faf7}
.google-login-btn:hover{border-color:#75c3a7;background:#f3faf7}.login-divider:before,.login-divider:after{background:#dfece7}

/* ===== CEKAP HARMONY — cohesive multicolor, not rainbow ===== */
:root{
  --emerald:#159B72;
  --teal:#25A77A;
  --mint:#41C79B;
  --dark:#0D5D4B;
  --deep:#073E34;
  --orange:#F3A31A;
  --coral:#CF4E4B;
  --blue:#2585D8;
  --cream:#FFFAF0;
  --ink:#18221F;
  --muted:#68756F;
  --line:#E5ECE8;
  --white:#FFFFFF;
}

/* Overall: mostly white + emerald, accents only where meaningful */
body{background:
 radial-gradient(circle at 12% 4%,rgba(21,155,114,.08),transparent 28%),
 radial-gradient(circle at 90% 15%,rgba(243,163,26,.07),transparent 26%),
 #fbfdfb!important;color:var(--ink)!important}
.app{background:transparent!important}

/* Header */
.topbar{background:linear-gradient(90deg,var(--deep),var(--emerald),var(--teal))!important;color:#fff!important}
.brand{color:#fff!important}
.home-nav-button,.language-choice select{
 background:rgba(255,255,255,.12)!important;
 color:#fff!important;border:1px solid rgba(255,255,255,.24)!important
}
.bn-mastery-nav{
 background:linear-gradient(135deg,var(--orange),#F6B93D)!important;
 color:#fff!important;border:0!important;
 box-shadow:0 8px 20px rgba(243,163,26,.22)!important
}

/* Home hero */
.journey-hero .hero-copy{
 background:linear-gradient(135deg,var(--deep),var(--emerald) 52%,var(--teal))!important;
 color:#fff!important;border-radius:28px!important;
 box-shadow:0 24px 70px rgba(8,72,57,.22)!important;
 padding:2.4rem!important
}
.journey-hero .hero-copy .bi>[lang]{color:inherit!important}
.journey-home-actions .btn,.journey-home-actions .primary-btn{
 background:linear-gradient(135deg,#FFD660,#F5AD22)!important;
 color:#463000!important;border:0!important;
 box-shadow:0 10px 25px rgba(243,163,26,.2)!important
}
.journey-home-actions .text-btn{
 color:#fff!important;border-color:rgba(255,255,255,.35)!important
}

/* House: one family, subtle floor distinction */
.jh-roof{
 background:linear-gradient(140deg,var(--mint),var(--emerald) 50%,var(--deep))!important;
 border-bottom-color:var(--orange)!important
}
.jh-building{
 background:#fff!important;border:3px solid #bfe5d7!important;
 box-shadow:0 24px 60px rgba(8,72,57,.16)!important
}
.jh-floor{border-bottom:7px solid #eaf3ef!important;box-shadow:none!important}
.jh-floor-1{background:linear-gradient(180deg,#F4FCF9,#EAF8F2)!important}
.jh-floor-2{background:linear-gradient(180deg,#FFFDF6,#FFF7E8)!important}
.jh-floor-3{background:linear-gradient(180deg,#F5FAFE,#EAF4FD)!important}
.jh-floor-label{font-weight:800!important}
.jh-floor-1 .jh-floor-label{color:var(--dark)!important}
.jh-floor-2 .jh-floor-label{color:#9A5A00!important}
.jh-floor-3 .jh-floor-label{color:#1F64A5!important}

.jh-room{
 background:#fff!important;color:var(--ink)!important;
 border:1px solid var(--line)!important;
 box-shadow:0 10px 30px rgba(13,80,61,.06)!important
}
.jh-floor-1 .jh-room{border-top:4px solid var(--emerald)!important}
.jh-floor-2 .jh-room{border-top:4px solid var(--orange)!important}
.jh-floor-3 .jh-room{border-top:4px solid var(--blue)!important}
.jh-room.jh-done{background:#FFFBEB!important;border-color:#F0D79D!important}
.jh-room.jh-available{box-shadow:0 0 0 2px rgba(243,163,26,.18),0 10px 30px rgba(13,80,61,.06)!important}
.jh-room-status{color:var(--muted)!important}
.jh-progress-label{color:var(--dark)!important}
.jh-room progress{accent-color:var(--emerald)!important}

.jh-door-frame{background:#fff!important;border-color:#D8A54D!important}
.jh-floor-1 .jh-door{background:linear-gradient(120deg,var(--teal),var(--dark))!important}
.jh-floor-2 .jh-door{background:linear-gradient(120deg,#F6B93D,var(--orange))!important}
.jh-floor-3 .jh-door{background:linear-gradient(120deg,#4CA1E8,var(--blue))!important}
.jh-door{color:#fff4c8!important}
.jh-entrance{background:#F8FCFA!important}
.jh-main-door>span{background:linear-gradient(100deg,var(--teal),var(--dark))!important}
.jh-key-row>span{background:#fff!important;color:#8BA096!important;border:1px solid var(--line)!important}
.jh-key-row>span.collected{background:#FFF4CF!important;color:#805900!important;border-color:#F0D79D!important}
.jh-final{background:linear-gradient(135deg,#FFF9E8,#fff)!important;color:#6B4A00!important;border-color:#F0D79D!important}

/* Lesson shell */
.reading-shell .lesson-panel{
 background:#fff!important;border:1px solid var(--line)!important;
 box-shadow:0 18px 55px rgba(16,71,56,.08)!important
}
.step-heading h2{color:var(--dark)!important}

/* Step track: cohesive palette used as accents only */
.step-track button{
 background:#fff!important;border:1px solid var(--line)!important;
 color:#6C7B74!important
}
.step-track button:nth-child(1){border-top:4px solid var(--emerald)!important}
.step-track button:nth-child(2){border-top:4px solid var(--teal)!important}
.step-track button:nth-child(3){border-top:4px solid var(--blue)!important}
.step-track button:nth-child(4){border-top:4px solid var(--orange)!important}
.step-track button:nth-child(5){border-top:4px solid var(--mint)!important}
.step-track button:nth-child(6){border-top:4px solid var(--coral)!important}
.step-track button:nth-child(7){border-top:4px solid var(--dark)!important}
.step-track button.current{
 background:linear-gradient(135deg,var(--dark),var(--emerald))!important;
 border-color:var(--emerald)!important;color:#fff!important
}
.step-track button.done{background:#EDF8F4!important;color:var(--dark)!important;border-color:#B9E0D2!important}

/* Notes: semantic roles, all from CEKAP palette */
.reading-shell .note{
 background:linear-gradient(135deg,#FFF9E8,#FFF3C9)!important;
 border:1px solid #F0D79D!important;
 border-inline-start:7px solid var(--orange)!important;
 color:#5F4A16!important
}
.reading-shell .note strong{color:#805900!important}
.reading-shell .note .ar{color:#5F4A16!important}

.reading-shell .example{
 background:linear-gradient(135deg,#F7FFFB,#E7F7F1)!important;
 border:1px solid #B9DFD2!important;color:var(--dark)!important
}
.reading-shell .flash{
 background:linear-gradient(135deg,#F0F7FD,#E6F1FB)!important;
 border:1px dashed #9BCAF0!important;color:#1F64A5!important
}
.reading-shell .feedback{
 background:linear-gradient(135deg,#EFFAF6,#DFF3EA)!important;
 border:1px solid #B9DFD2!important;
 border-inline-start:7px solid var(--emerald)!important;color:var(--dark)!important
}
.reading-shell .feedback.retry{
 background:linear-gradient(135deg,#FFF1EF,#FFE3E0)!important;
 border-color:#EFB9B6!important;border-inline-start-color:var(--coral)!important;color:#7E3331!important
}
.reading-shell .vn-tip{
 background:#FFF9E9!important;border-inline-start:6px solid var(--orange)!important
}
.reading-shell .vn-more{
 background:#FBFEFC!important;border:1px solid #D9EBE4!important
}

/* Visual nodes — CEKAP accents, calm backgrounds */
.reading-shell .vn-node:nth-child(4n+1){--tone:var(--emerald);--tone-bg:#EAF8F2;--tone-line:#ADD9C9}
.reading-shell .vn-node:nth-child(4n+2){--tone:var(--blue);--tone-bg:#EAF4FD;--tone-line:#B8D3F4}
.reading-shell .vn-node:nth-child(4n+3){--tone:var(--orange);--tone-bg:#FFF5DF;--tone-line:#F0D79D}
.reading-shell .vn-node:nth-child(4n){--tone:var(--coral);--tone-bg:#FFF0EF;--tone-line:#EFC4C2}

/* Topic lists: white cards, accent strips */
.topic-link,.topic-card,.topic-item{
 background:#fff!important;border:1px solid var(--line)!important;
 box-shadow:0 10px 30px rgba(13,80,61,.05)!important
}
.topic-link:nth-child(4n+1),.topic-card:nth-child(4n+1),.topic-item:nth-child(4n+1){border-inline-start:4px solid var(--emerald)!important}
.topic-link:nth-child(4n+2),.topic-card:nth-child(4n+2),.topic-item:nth-child(4n+2){border-inline-start:4px solid var(--blue)!important}
.topic-link:nth-child(4n+3),.topic-card:nth-child(4n+3),.topic-item:nth-child(4n+3){border-inline-start:4px solid var(--orange)!important}
.topic-link:nth-child(4n),.topic-card:nth-child(4n),.topic-item:nth-child(4n){border-inline-start:4px solid var(--coral)!important}
.topic-link:hover{background:#F7FCFA!important}

/* Filters / buttons */
.filter{background:#fff!important;border:1px solid var(--line)!important;color:var(--muted)!important}
.filter.selected{background:#EDF8F4!important;color:var(--dark)!important;border-color:#B9DFD2!important}
.btn,.primary-btn{background:linear-gradient(135deg,var(--dark),var(--emerald))!important;color:#fff!important;border:0!important}
.btn:hover,.primary-btn:hover{filter:brightness(.98)}
.option{background:#fff!important;border:1px solid var(--line)!important}
.option:hover{background:#F7FCFA!important;border-color:#B9DFD2!important}

/* Login */
.login-dialog{background:#fff!important;border:1px solid var(--line)!important;box-shadow:0 24px 70px rgba(8,72,57,.18)!important}
.google-login-btn{background:#fff!important;border:1px solid #D8E9E2!important}
.google-login-btn:hover{background:#F3FAF7!important;border-color:#94D8C0!important}

/* Mobile */
@media(max-width:650px){
  .journey-hero .hero-copy{padding:1.3rem!important;border-radius:22px!important}
}


/* ===== BAITUNNAHWI FULL HARMONIZATION ===== */
:root{
  --bn-emerald:#159B72;
  --bn-teal:#25A77A;
  --bn-mint:#41C79B;
  --bn-deep:#0D5D4B;
  --bn-deeper:#073E34;
  --bn-gold:#F3A31A;
  --bn-gold-soft:#FFF7E3;
  --bn-blue:#2585D8;
  --bn-blue-soft:#EEF6FD;
  --bn-coral:#CF4E4B;
  --bn-coral-soft:#FEF0EF;
  --bn-green-soft:#EFF9F5;
  --bn-cream:#FFFAF0;
  --bn-paper:#FFFFFF;
  --bn-line:#E2ECE6;
  --bn-shadow:0 14px 34px rgba(12,79,60,.08);
  --bn-text:#1E2925;
  --bn-muted:#65716B;
}
body,.app{color:var(--bn-text)!important}
/* generic surfaces */
.card,.home-panel,.topic-link,.topic-card,.topic-item,.tool-card,.gloss-card,.builder-target,.room-description,.space-entry,.space-description,.house-progress-panel,.house-route-note,.space-copy,.space-review,.space-meta,.reward-copy,.learning-drawer,.login-dialog,.reward-dialog,.jr-dialog,.drawer-heading,.drawer-actions,.ig-banner,.ig-section-title,.ig-summary-card,.ig-comparison,.ig-rule-panel,.ig-full-rule,.ig-application,.ig-attention,.ig-clue,.ig-solved,.t1-card,.t1-summary-card,.vn-summary-card,.vn-rule-only,.vn-concept-example,.vn-summary,.vn-tip,.vn-more,.lesson-reference,.topic-controls,.page-intro,.home-menu,.home-intro,.hero-key-status,.hero-highlights{background:var(--bn-paper)!important;border:1px solid var(--bn-line)!important;box-shadow:var(--bn-shadow)!important;border-radius:18px!important}
.home-panel,.space-entry,.space-description,.house-progress-panel,.house-route-note,.topic-controls,.page-intro{background:linear-gradient(180deg,#ffffff,#fbfdfc)!important}
/* related topic cards / list rows */
.topic-list .topic-link:nth-child(4n+1),.related-topic-links .topic-link:nth-child(4n+1),.house-layout-nav .house-part-button:nth-child(4n+1),.card-grid .card:nth-child(4n+1),.tool-list .tool-card:nth-child(4n+1){border-inline-start:5px solid var(--bn-emerald)!important}
.topic-list .topic-link:nth-child(4n+2),.related-topic-links .topic-link:nth-child(4n+2),.house-layout-nav .house-part-button:nth-child(4n+2),.card-grid .card:nth-child(4n+2),.tool-list .tool-card:nth-child(4n+2){border-inline-start:5px solid var(--bn-blue)!important}
.topic-list .topic-link:nth-child(4n+3),.related-topic-links .topic-link:nth-child(4n+3),.house-layout-nav .house-part-button:nth-child(4n+3),.card-grid .card:nth-child(4n+3),.tool-list .tool-card:nth-child(4n+3){border-inline-start:5px solid var(--bn-gold)!important}
.topic-list .topic-link:nth-child(4n),.related-topic-links .topic-link:nth-child(4n),.house-layout-nav .house-part-button:nth-child(4n),.card-grid .card:nth-child(4n),.tool-list .tool-card:nth-child(4n){border-inline-start:5px solid var(--bn-coral)!important}
.topic-link:hover,.topic-card:hover,.topic-item:hover,.tool-card:hover,.house-part-button:hover{background:#F8FCFA!important;transform:translateY(-2px)}
.topic-number,.house-part-number,.space-index,.collection-icon,.drawer-key-icon{background:linear-gradient(135deg,var(--bn-deep),var(--bn-emerald))!important;color:#fff!important}
.space-pill,.part-tag,.hero-chip,.topic-step-count,.space-tag,.drawer-key-summary,.drawer-next-topic,.achievement,.reward-counter{background:var(--bn-gold-soft)!important;color:#7A4C00!important;border:1px solid #F2D59A!important}
/* lesson content */
.reading-shell .reading-title,.reading-shell .lesson-footer,.reading-shell .back-strip,.reading-shell .topic-copy{color:var(--bn-text)!important}
.reading-shell .lesson-panel{background:linear-gradient(180deg,#ffffff,#fbfdfc)!important;border:1px solid var(--bn-line)!important;box-shadow:0 18px 55px rgba(16,71,56,.08)!important;border-radius:24px!important}
.reading-shell .step-heading{padding-bottom:.45rem;border-bottom:1px solid #edf2ef}
.reading-shell .step-heading h2{color:var(--bn-deep)!important}
.reading-shell .step-count,.reading-shell .step-hint,.reading-shell .eyebrow,.reading-shell .house-note-link,.reading-shell .room-description,.reading-shell .next-topic,.reading-shell .back-link,.reading-shell .lesson-reference{color:var(--bn-muted)!important}
.reading-shell .note{background:linear-gradient(135deg,#FFF9EA,#FFF1C9)!important;border:1px solid #F1D79A!important;border-inline-start:8px solid var(--bn-gold)!important;color:#644B10!important;border-radius:18px!important;box-shadow:0 10px 22px rgba(204,150,33,.10)!important}
.reading-shell .note strong{color:#7A4C00!important}.reading-shell .note .ar{color:#6B521A!important}
.reading-shell .example,.reading-shell .colored-example{background:linear-gradient(135deg,#F4FBF8,#E7F5EF)!important;border:1px solid #B9DDD0!important;color:var(--bn-deep)!important;border-radius:18px!important;box-shadow:0 10px 22px rgba(21,155,114,.08)!important}
.reading-shell .flash{background:linear-gradient(135deg,#F0F7FD,#E4F0FB)!important;border:1px dashed #9EC8ED!important;color:#215F95!important;border-radius:18px!important;box-shadow:0 10px 22px rgba(37,133,216,.08)!important}
.reading-shell .feedback,.reading-shell .correct{background:linear-gradient(135deg,#EFFAF5,#DCF3E8)!important;border:1px solid #B9DDD0!important;border-inline-start:8px solid var(--bn-emerald)!important;color:var(--bn-deep)!important;border-radius:18px!important}
.reading-shell .feedback.retry,.reading-shell .wrong{background:linear-gradient(135deg,#FEF0EF,#FEE0DD)!important;border:1px solid #E8B6B3!important;border-inline-start:8px solid var(--bn-coral)!important;color:#803A37!important}
.reading-shell .options .option{background:#fff!important;border:1px solid var(--bn-line)!important;border-radius:14px!important;box-shadow:none!important}
.reading-shell .options .option:hover,.reading-shell .options .option.is-selected{border-color:#AAD6C6!important;background:#F7FCF9!important}
.reading-shell .btn,.reading-shell .primary-btn,.reading-shell .gate-button,.reading-shell .save-btn{background:linear-gradient(135deg,var(--bn-deeper),var(--bn-emerald))!important;border:0!important;color:#fff!important;box-shadow:0 10px 22px rgba(13,93,75,.18)!important}
.reading-shell .btn.light,.text-btn,.drawer-resume,.drawer-close,.reward-actions .btn.light{background:#fff!important;color:var(--bn-deep)!important;border:1px solid var(--bn-line)!important;box-shadow:none!important}
.reading-shell .btn.light:hover,.text-btn:hover{background:#F6FBF8!important}
.reading-shell .step-track{gap:.55rem!important}
.reading-shell .step-track button{background:#fff!important;border:1px solid var(--bn-line)!important;color:var(--bn-muted)!important;border-radius:14px!important;box-shadow:none!important}
.reading-shell .step-track button:nth-child(1){border-top:4px solid var(--bn-emerald)!important}
.reading-shell .step-track button:nth-child(2){border-top:4px solid var(--bn-teal)!important}
.reading-shell .step-track button:nth-child(3){border-top:4px solid var(--bn-blue)!important}
.reading-shell .step-track button:nth-child(4){border-top:4px solid var(--bn-gold)!important}
.reading-shell .step-track button:nth-child(5){border-top:4px solid var(--bn-mint)!important}
.reading-shell .step-track button:nth-child(6){border-top:4px solid var(--bn-coral)!important}
.reading-shell .step-track button:nth-child(7){border-top:4px solid var(--bn-deep)!important}
.reading-shell .step-track button.current{background:linear-gradient(135deg,var(--bn-deep),var(--bn-emerald))!important;border-color:var(--bn-emerald)!important;color:#fff!important;box-shadow:0 10px 22px rgba(13,93,75,.18)!important}
.reading-shell .step-track button.done:not(.current){background:#EFF9F5!important;color:var(--bn-deep)!important;border-color:#CBE6DC!important}
/* infographic / map blocks */
.infographic-notes,.t1-infographic,.vn-lab,.vn-map,.t1-summary,.t1-comparisons,.ig-map{gap:1rem!important}
.ig-banner{background:linear-gradient(135deg,var(--bn-deep),var(--bn-emerald))!important;color:#fff!important;border:0!important}
.ig-banner p,.ig-banner h3,.ig-instruction{color:inherit!important}
.ig-section-title{background:linear-gradient(135deg,#F6FBF8,#ECF8F3)!important;color:var(--bn-deep)!important}
.ig-node,.ig-summary-card,.ig-comparison,.ig-rule-panel,.ig-full-rule,.ig-application,.ig-attention,.ig-clue,.ig-solved,.t1-card,.t1-summary-card,.vn-summary-card{background:#fff!important;border:1px solid var(--bn-line)!important}
.ig-node{border-radius:18px!important;overflow:hidden}
.ig-node-trigger{background:#fff!important;color:var(--bn-text)!important}
.ig-node:nth-child(4n+1) .ig-node-trigger{border-inline-start:6px solid var(--bn-emerald)!important}
.ig-node:nth-child(4n+2) .ig-node-trigger{border-inline-start:6px solid var(--bn-blue)!important}
.ig-node:nth-child(4n+3) .ig-node-trigger{border-inline-start:6px solid var(--bn-gold)!important}
.ig-node:nth-child(4n) .ig-node-trigger{border-inline-start:6px solid var(--bn-coral)!important}
.ig-index,.vn-node-number{background:linear-gradient(135deg,var(--bn-deep),var(--bn-emerald))!important;color:#fff!important}
.ig-example,.ig-answer-line,.t1-example,.vn-fresh-example,.vn-rule-example,.vn-example-line{background:var(--bn-blue-soft)!important;border:1px solid #C7DDF2!important;border-radius:14px!important;color:#225E95!important}
.ig-comparison,.t1-compare{display:grid;gap:.8rem}
.ig-chip,.t1-keypoint,.vn-legend{background:var(--bn-gold-soft)!important;color:#7A4C00!important;border:1px solid #F2D59A!important}
.ig-attention,.vn-tip{background:var(--bn-gold-soft)!important;border-inline-start:6px solid var(--bn-gold)!important;color:#6A520F!important}
.ig-full-rule,.vn-rule-only{background:linear-gradient(135deg,#F4FBF8,#E9F7F0)!important;border-color:#CBE6DC!important}
.ig-application,.vn-concept-example{background:linear-gradient(135deg,#F8FBFE,#EEF5FB)!important;border-color:#D0E1F0!important}
.ig-clue{background:linear-gradient(135deg,#FFF8EB,#FFF2D4)!important;border-color:#F1D79A!important}
.ig-solved{background:linear-gradient(135deg,#EFFAF5,#E2F4EC)!important;border-color:#C1E2D5!important}
/* visual node map */
.vn-node{background:#fff!important;border:1px solid var(--bn-line)!important;border-radius:16px!important;box-shadow:0 10px 24px rgba(12,79,60,.06)!important}
.vn-node:nth-child(4n+1){border-top:4px solid var(--bn-emerald)!important}
.vn-node:nth-child(4n+2){border-top:4px solid var(--bn-blue)!important}
.vn-node:nth-child(4n+3){border-top:4px solid var(--bn-gold)!important}
.vn-node:nth-child(4n){border-top:4px solid var(--bn-coral)!important}
.vn-node-button,.vn-word,.vn-analysis-word,.vn-build-target{background:#fff!important;border:1px solid var(--bn-line)!important;color:var(--bn-text)!important}
.vn-analysis-slot{background:#F8FBF9!important;border:1px dashed #C5D9D1!important}
.vn-summary-grid .vn-summary-card:nth-child(3n+1){border-top:4px solid var(--bn-emerald)!important}.vn-summary-grid .vn-summary-card:nth-child(3n+2){border-top:4px solid var(--bn-blue)!important}.vn-summary-grid .vn-summary-card:nth-child(3n){border-top:4px solid var(--bn-gold)!important}
/* topik 1 special sections */
.t1-banner{background:linear-gradient(135deg,var(--bn-deep),var(--bn-emerald))!important;color:#fff!important;border:0!important;border-radius:22px!important;box-shadow:0 18px 44px rgba(13,93,75,.18)!important}
.t1-card:nth-child(4n+1),.t1-summary-card:nth-child(4n+1){border-top:4px solid var(--bn-emerald)!important}.t1-card:nth-child(4n+2),.t1-summary-card:nth-child(4n+2){border-top:4px solid var(--bn-blue)!important}.t1-card:nth-child(4n+3),.t1-summary-card:nth-child(4n+3){border-top:4px solid var(--bn-gold)!important}.t1-card:nth-child(4n),.t1-summary-card:nth-child(4n){border-top:4px solid var(--bn-coral)!important}
.t1-build,.builder-target{background:#F7FCFA!important;border:1px dashed #BCD7CC!important}
.t1-choices .option{background:#fff!important;border:1px solid var(--bn-line)!important}
.t1-choices .option.is-selected{background:#F3FAF7!important;border-color:#A8D5C6!important}
.t1-success{background:linear-gradient(135deg,#EFFAF5,#E2F4EC)!important;border:1px solid #C1E2D5!important;color:var(--bn-deep)!important}
/* drawers, dialogs, rewards */
.learning-overlay,.bn-mo{background:rgba(9,54,42,.46)!important}
.learning-drawer,.reward-dialog,.jr-dialog,.login-dialog{background:#fff!important;border:1px solid var(--bn-line)!important}
.drawer-primary,.open-house-button,.start-button,.login-submit,.jh-entry-button,.reward-actions .btn:not(.light){background:linear-gradient(135deg,var(--bn-deeper),var(--bn-emerald))!important;border:0!important;color:#fff!important}
.drawer-close,.drawer-resume,.save-btn.saved{background:#F6FBF8!important;color:var(--bn-deep)!important;border:1px solid var(--bn-line)!important}
.reward-top,.drawer-heading,.login-divider{background:linear-gradient(180deg,#F9FCFB,#F1F8F5)!important;border-bottom:1px solid var(--bn-line)!important}
.reward-stage-0,.reward-stage-1,.reward-stage-2,.reward-stage-3,.reward-spark,.key-arrival{color:var(--bn-gold)!important}
/* reference page button/nav consistency */
#bn-mastery-nav,.bn-mastery-nav{background:linear-gradient(135deg,var(--bn-gold),#F6B73C)!important;color:#fff!important;border:0!important;box-shadow:0 10px 22px rgba(243,163,26,.2)!important}
#bn-mastery-nav:hover,.bn-mastery-nav:hover{filter:brightness(.98)}
/* forms */
input,select,textarea,.search,.bn-search{border:1px solid #D6E5DE!important;border-radius:12px!important;background:#fff!important;color:var(--bn-text)!important}
input:focus,select:focus,textarea:focus,.search:focus,.bn-search:focus{outline:3px solid rgba(65,199,155,.15)!important;border-color:#7ACFB3!important}
@media (max-width: 768px){
  .card,.home-panel,.topic-link,.topic-card,.topic-item,.tool-card,.learning-drawer,.login-dialog,.reward-dialog,.jr-dialog,.ig-banner,.ig-section-title,.ig-summary-card,.ig-comparison,.ig-rule-panel,.ig-full-rule,.ig-application,.ig-attention,.ig-clue,.ig-solved,.t1-card,.t1-summary-card,.vn-summary-card{border-radius:16px!important}
  .reading-shell .lesson-panel{border-radius:20px!important}
}

/* ===== FINAL CEKAP HARMONY OVERRIDE — ALL LESSON CONTENT ===== */
:root{--purple:#159B72!important;--purple-dark:#073E34!important;--ink:#1E2925!important;--muted:#65716B!important;--gold:#F3A31A!important;--line:#E2ECE6!important;--soft:#F4FAF7!important;--paper:#FFFFFF!important}
html,body{background:#F5FBF8!important;color:#1E2925!important}
.app{background:linear-gradient(145deg,#F3FAF7,#EEF7F3 55%,#F8FCFA)!important}
.shell{background:#FFFFFF!important;border:1px solid #E2ECE6!important;box-shadow:0 18px 48px rgba(13,93,75,.08)!important}
.reading-shell{background:#FFFFFF!important;color:#1E2925!important}
.reading-shell .back-link,.reading-shell .back-link *{color:#0D5D4B!important}
.reading-title .eyebrow,.reading-title .eyebrow *{color:#159B72!important}
.reading-title h1,.reading-title h1 *{color:#073E34!important}
.reading-shell .house-note-link,.reading-shell .house-note-link *{background:#F8FCFA!important;border-color:#CDE5DB!important;color:#385A4E!important}
.step-track{border-bottom-color:#E2ECE6!important}
.step-track button{background:#F8FCFA!important;border-color:#DCE8E2!important;color:#65716B!important}
.step-track button.done{background:#EAF7F1!important;color:#0D5D4B!important;border-color:#B9DFD2!important}
.step-track button.current,.step-track button.done.current{background:linear-gradient(135deg,#0D5D4B,#159B72)!important;color:#FFFFFF!important;border-color:#159B72!important}
.step-heading h2,.step-heading h2 *{color:#0D5D4B!important}
.step-count,.step-count *{color:#65716B!important}
.lesson-panel{background:#FFFFFF!important;border-color:#E2ECE6!important}
.infographic-notes{color:#1E2925!important}
.ig-banner{background:linear-gradient(135deg,#0D5D4B,#159B72)!important;color:#FFFFFF!important;border:0!important}
.ig-banner *{color:#FFFFFF!important}
.ig-instruction,.ig-instruction *{color:#65716B!important}
.ig-section-title,.ig-section-title *{color:#0D5D4B!important}
.ig-node{background:#FFFFFF!important;border:1px solid #DCE8E2!important;box-shadow:0 8px 20px rgba(13,93,75,.06)!important}
.ig-node.is-open{border-color:#159B72!important;box-shadow:0 10px 24px rgba(21,155,114,.12)!important}
.ig-node-trigger,.ig-node-trigger *{color:#0D5D4B!important}
.ig-index{background:#EAF7F1!important;color:#0D5D4B!important}
.ig-node:nth-child(4n+1){border-inline-start:6px solid #159B72!important}
.ig-node:nth-child(4n+2){border-inline-start:6px solid #2585D8!important}
.ig-node:nth-child(4n+3){border-inline-start:6px solid #F3A31A!important}
.ig-node:nth-child(4n){border-inline-start:6px solid #CF4E4B!important}
.ig-example,.ig-example *{background:#EEF6FD!important;color:#1F64A5!important;border-color:#C4DCF1!important}
.ig-rule-panel,.ig-compare,.ig-summary-card{background:#FFFFFF!important;border-color:#DCE8E2!important}
.ig-rule-panel summary,.ig-compare summary,.ig-summary-card summary,.ig-rule-panel summary *,.ig-compare summary *,.ig-summary-card summary *{color:#0D5D4B!important}
.ig-clue{background:#FFF7E3!important;color:#7A4C00!important}
.ig-application{background:#EFF9F5!important;border-color:#B9DFD2!important;color:#0D5D4B!important}
.ig-attention,.ig-conditions{background:#FFF7E3!important;border-color:#F2D59A!important;color:#7A4C00!important}
.note{background:#FFF7E3!important;border-color:#F2D59A!important;border-inline-start-color:#F3A31A!important;color:#5F4B16!important}
.note strong{color:#7A4C00!important}.note .ar{color:#5F4B16!important}
.example,.colored-example{background:#EFF9F5!important;border-color:#B9DFD2!important;color:#0D5D4B!important}
.flash{background:#EEF6FD!important;border-color:#9EC8ED!important;color:#1F64A5!important}
.feedback,.feedback.success,.correct{background:#EFF9F5!important;border-color:#B9DFD2!important;color:#0D5D4B!important}
.feedback.retry,.wrong{background:#FEF0EF!important;border-color:#E8B6B3!important;color:#803A37!important}
.vn-node{background:#FFFFFF!important;border-color:#DCE8E2!important;color:#1E2925!important}
.vn-node-button,.vn-node-button *{color:#0D5D4B!important}
.vn-tip{background:#FFF7E3!important;border-inline-start-color:#F3A31A!important;color:#6A520F!important}
.vn-more{background:#FBFDFC!important;border-color:#DCE8E2!important}
.t1-banner{background:linear-gradient(135deg,#0D5D4B,#159B72)!important;color:#FFFFFF!important}
.t1-banner *{color:#FFFFFF!important}
.t1-card,.t1-summary-card{background:#FFFFFF!important;border-color:#DCE8E2!important;color:#1E2925!important}
.option{background:#FFFFFF!important;border-color:#DCE8E2!important;color:#1E2925!important}
.option:hover{background:#F5FBF8!important;border-color:#B9DFD2!important}
.btn,.primary-btn,.login-submit,.drawer-primary,.start-button,.open-house-button{background:linear-gradient(135deg,#0D5D4B,#159B72)!important;color:#FFFFFF!important;border-color:#159B72!important}
.text-btn,.btn.light{background:#FFFFFF!important;color:#0D5D4B!important;border-color:#DCE8E2!important}
a{color:#0D5D4B!important}
.lang-bi .bi>[lang=ar]{color:#526C62!important}
@media(max-width:650px){.shell{border-radius:24px!important}.reading-title h1{color:#073E34!important}.step-track button{background:#F8FCFA!important}.step-track button.current{background:linear-gradient(135deg,#0D5D4B,#159B72)!important}}


/* ===== TOPIC 1 CEKAP I'RAB HARMONY TEST ===== */
body:has(.topic-v18_1){background:#f5fbf8!important}
.app:has(.topic-v18_1){background:linear-gradient(180deg,#eef9f4 0,#f7fbf9 28%,#fff 100%)!important}
.topic-v18_1{--t1-green:#159B72;--t1-dark:#0D5D4B;--t1-teal:#25A77A;--t1-gold:#F3A31A;--t1-blue:#2585D8;--t1-coral:#CF4E4B;--t1-line:#DCEBE4;--t1-ink:#202B27;--t1-muted:#66736D}
.topic-v18_1 .back-link{color:var(--t1-green)!important;font-weight:800!important}
.topic-v18_1 .reading-title{background:linear-gradient(135deg,#0D5D4B,#159B72 58%,#25A77A)!important;color:#fff!important;padding:1.4rem 1.3rem!important;border-radius:22px!important;box-shadow:0 18px 40px rgba(13,93,75,.18)!important;margin-bottom:1rem!important}
.topic-v18_1 .reading-title .eyebrow,.topic-v18_1 .reading-title h1,.topic-v18_1 .reading-title .bi>[lang]{color:#fff!important}
.topic-v18_1 .house-note-link{background:#FFF8E4!important;color:#7A4C00!important;border:1px solid #F1D79A!important;border-radius:14px!important;padding:.9rem 1rem!important}
.topic-v18_1 .step-track{background:#fff!important;border:1px solid var(--t1-line)!important;border-radius:18px!important;padding:.9rem!important;margin:1rem 0 1.25rem!important;box-shadow:0 10px 28px rgba(13,80,61,.06)!important}
.topic-v18_1 .step-track button{background:#fff!important;border:1px solid var(--t1-line)!important;color:#6B7972!important;border-radius:13px!important}
.topic-v18_1 .step-track button:nth-child(1){border-top:4px solid var(--t1-green)!important}.topic-v18_1 .step-track button:nth-child(2){border-top:4px solid var(--t1-teal)!important}.topic-v18_1 .step-track button:nth-child(3){border-top:4px solid var(--t1-blue)!important}.topic-v18_1 .step-track button:nth-child(4){border-top:4px solid var(--t1-gold)!important}.topic-v18_1 .step-track button:nth-child(5){border-top:4px solid #41C79B!important}.topic-v18_1 .step-track button:nth-child(6){border-top:4px solid var(--t1-coral)!important}.topic-v18_1 .step-track button:nth-child(7){border-top:4px solid var(--t1-dark)!important}
.topic-v18_1 .step-track button.current{background:linear-gradient(135deg,var(--t1-dark),var(--t1-green))!important;border-color:var(--t1-green)!important;color:#fff!important;box-shadow:0 9px 20px rgba(13,93,75,.18)!important}
.topic-v18_1 .step-track button.done:not(.current){background:#EEF8F4!important;color:var(--t1-dark)!important;border-color:#C2E3D6!important}
.topic-v18_1 .lesson-panel{background:#fff!important;border:1px solid var(--t1-line)!important;border-radius:24px!important;padding:1.35rem!important;box-shadow:0 18px 50px rgba(13,80,61,.08)!important}
.topic-v18_1 .step-heading{border-bottom:1px solid #EDF3F0!important;padding-bottom:.65rem!important;margin-bottom:1.1rem!important}.topic-v18_1 .step-heading h2{color:var(--t1-dark)!important}.topic-v18_1 .step-count{color:#7B8A83!important}
.topic-v18_1 .infographic-notes{background:transparent!important}
.topic-v18_1 .ig-banner,.topic-v18_1 .t1-banner{background:linear-gradient(135deg,var(--t1-dark),var(--t1-green))!important;color:#fff!important;border:0!important;border-radius:20px!important;box-shadow:0 14px 34px rgba(13,93,75,.16)!important}
.topic-v18_1 .ig-banner *,.topic-v18_1 .t1-banner *{color:#fff!important}
.topic-v18_1 .ig-instruction{background:#F7FBF9!important;border:1px solid var(--t1-line)!important;color:var(--t1-muted)!important;border-radius:14px!important;padding:.85rem 1rem!important}
.topic-v18_1 .ig-node{background:#fff!important;border:1px solid var(--t1-line)!important;border-radius:18px!important;overflow:hidden!important;box-shadow:0 10px 26px rgba(13,80,61,.06)!important}
.topic-v18_1 .ig-node:nth-child(3n+1){border-inline-start:7px solid var(--t1-green)!important}.topic-v18_1 .ig-node:nth-child(3n+2){border-inline-start:7px solid var(--t1-blue)!important}.topic-v18_1 .ig-node:nth-child(3n){border-inline-start:7px solid var(--t1-gold)!important}
.topic-v18_1 .ig-node-trigger{background:#fff!important;color:var(--t1-ink)!important}.topic-v18_1 .ig-index{background:var(--t1-dark)!important;color:#fff!important}
.topic-v18_1 .ig-example,.topic-v18_1 .t1-example{background:#EEF6FD!important;border:1px solid #C7DDF2!important;color:#205F96!important;border-radius:14px!important}
.topic-v18_1 .ig-section-title{background:#EFF9F5!important;border:1px solid #CBE6DC!important;color:var(--t1-dark)!important;border-radius:16px!important}
.topic-v18_1 .ig-summary-card,.topic-v18_1 .t1-card,.topic-v18_1 .t1-summary-card,.topic-v18_1 .ig-comparison,.topic-v18_1 .ig-rule-panel,.topic-v18_1 .ig-full-rule,.topic-v18_1 .ig-application,.topic-v18_1 .ig-attention{background:#fff!important;border:1px solid var(--t1-line)!important;border-radius:17px!important;box-shadow:0 10px 24px rgba(13,80,61,.06)!important}
.topic-v18_1 .t1-card:nth-child(4n+1),.topic-v18_1 .t1-summary-card:nth-child(4n+1){border-top:5px solid var(--t1-green)!important}.topic-v18_1 .t1-card:nth-child(4n+2),.topic-v18_1 .t1-summary-card:nth-child(4n+2){border-top:5px solid var(--t1-blue)!important}.topic-v18_1 .t1-card:nth-child(4n+3),.topic-v18_1 .t1-summary-card:nth-child(4n+3){border-top:5px solid var(--t1-gold)!important}.topic-v18_1 .t1-card:nth-child(4n),.topic-v18_1 .t1-summary-card:nth-child(4n){border-top:5px solid var(--t1-coral)!important}
.topic-v18_1 .note,.topic-v18_1 .vn-tip{background:#FFF8E4!important;border:1px solid #F1D79A!important;border-inline-start:7px solid var(--t1-gold)!important;color:#654C11!important;border-radius:16px!important}.topic-v18_1 .note .ar{color:#654C11!important}
.topic-v18_1 .example,.topic-v18_1 .colored-example{background:#EEF8F4!important;border:1px solid #BFDCCF!important;color:var(--t1-dark)!important;border-radius:16px!important}
.topic-v18_1 .flash{background:#EEF6FD!important;border:1px dashed #9EC8ED!important;color:#205F96!important;border-radius:16px!important}
.topic-v18_1 .feedback,.topic-v18_1 .correct,.topic-v18_1 .t1-success{background:#EFF9F5!important;border:1px solid #BFDCCF!important;border-inline-start:7px solid var(--t1-green)!important;color:var(--t1-dark)!important;border-radius:16px!important}.topic-v18_1 .feedback.retry,.topic-v18_1 .wrong{background:#FEF0EF!important;border:1px solid #E8B6B3!important;border-inline-start:7px solid var(--t1-coral)!important;color:#803A37!important}
.topic-v18_1 .vn-node{background:#fff!important;border:1px solid var(--t1-line)!important;border-radius:16px!important;box-shadow:0 10px 24px rgba(13,80,61,.06)!important}.topic-v18_1 .vn-node:nth-child(4n+1){border-top:5px solid var(--t1-green)!important}.topic-v18_1 .vn-node:nth-child(4n+2){border-top:5px solid var(--t1-blue)!important}.topic-v18_1 .vn-node:nth-child(4n+3){border-top:5px solid var(--t1-gold)!important}.topic-v18_1 .vn-node:nth-child(4n){border-top:5px solid var(--t1-coral)!important}
.topic-v18_1 .option{background:#fff!important;border:1px solid var(--t1-line)!important;color:var(--t1-ink)!important}.topic-v18_1 .option:hover{background:#F7FBF9!important;border-color:#AED7C6!important}
.topic-v18_1 .btn,.topic-v18_1 .primary-btn{background:linear-gradient(135deg,var(--t1-dark),var(--t1-green))!important;border:0!important;color:#fff!important}.topic-v18_1 .btn.light,.topic-v18_1 .text-btn{background:#fff!important;color:var(--t1-dark)!important;border:1px solid var(--t1-line)!important}
.topic-v18_1 .lesson-footer{border-top:1px solid #EAF1ED!important}
@media(max-width:650px){.topic-v18_1 .reading-title{padding:1.1rem!important;border-radius:18px!important}.topic-v18_1 .lesson-panel{padding:1rem!important;border-radius:20px!important}.topic-v18_1 .step-track{padding:.65rem!important;gap:.38rem!important}}

/* ===== FRONT PAGE HARMONY — WOW BUT MATCHED ===== */
.home-stage{
  min-height:100vh!important;
  background:
    radial-gradient(circle at 12% 10%,rgba(65,199,155,.14),transparent 26%),
    radial-gradient(circle at 88% 16%,rgba(243,163,26,.10),transparent 24%),
    linear-gradient(180deg,#F8FCFA 0%,#EEF8F4 48%,#FFF9EA 100%)!important;
}
.home-hero.journey-hero{
  width:min(1240px,calc(100% - 28px))!important;
  margin:0 auto!important;
  padding:36px 0 50px!important;
  gap:24px!important;
}
.journey-hero .hero-copy{
  background:
    radial-gradient(circle at 85% 16%,rgba(255,255,255,.15),transparent 26%),
    linear-gradient(145deg,#073E34 0%,#0D5D4B 42%,#159B72 74%,#25A77A 100%)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:30px!important;
  box-shadow:0 26px 70px rgba(7,62,52,.22)!important;
  padding:2.8rem 2.4rem!important;
  overflow:hidden!important;
  position:relative!important;
}
.journey-hero .hero-copy:after{
  content:""!important;
  position:absolute!important;
  width:180px!important;height:180px!important;
  border-radius:50%!important;
  right:-58px!important;bottom:-70px!important;
  background:rgba(243,163,26,.12)!important;
  border:1px solid rgba(255,224,138,.22)!important;
}
.hero-official-logo{
  background:#fff!important;
  border:1px solid rgba(255,255,255,.65)!important;
  border-radius:22px!important;
  padding:12px 16px!important;
  box-shadow:0 12px 28px rgba(7,62,52,.16)!important;
}
.hero-official-logo img{
  filter:none!important;
}
.hero-welcome{
  color:#DFF6ED!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
}
.journey-hero .hero-copy h1{
  color:#FFFFFF!important;
  text-shadow:0 2px 0 rgba(0,0,0,.08)!important;
}
.hero-summary{
  color:#F1FBF7!important;
  background:rgba(255,255,255,.08)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:18px!important;
  padding:1rem 1.1rem!important;
  box-shadow:none!important;
}
.journey-home-actions{
  gap:.8rem!important;
}
.journey-home-actions .btn,
.journey-home-actions .hero-start,
.journey-home-actions .primary-btn{
  border-radius:14px!important;
  min-height:48px!important;
  font-weight:800!important;
}
.journey-home-actions .btn.light{
  background:#FFFFFF!important;
  color:#0D5D4B!important;
  border:1px solid #D9E8E1!important;
  box-shadow:0 10px 24px rgba(7,62,52,.14)!important;
}
.journey-home-actions .hero-start,
.journey-home-actions .primary-btn{
  background:linear-gradient(135deg,#F3A31A,#F7C65B)!important;
  color:#513500!important;
  border:0!important;
  box-shadow:0 12px 26px rgba(243,163,26,.24)!important;
}
.journey-home-actions .btn:hover,
.journey-home-actions .hero-start:hover,
.journey-home-actions .primary-btn:hover{
  transform:translateY(-2px)!important;
}
.hero-house-wrap{
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,252,250,.98))!important;
  border:1px solid #DDEBE5!important;
  border-radius:30px!important;
  box-shadow:0 24px 64px rgba(16,81,61,.12)!important;
  padding:1.5rem!important;
}
.journey-house{
  filter:none!important;
}
.jh-roof{
  background:linear-gradient(140deg,#41C79B,#159B72 52%,#073E34)!important;
  border-bottom-color:#F3A31A!important;
  box-shadow:none!important;
}
.jh-roof span{
  color:#FFF4C8!important;
}
.jh-building{
  background:#FFFFFF!important;
  border-color:#B9DFD2!important;
  box-shadow:0 18px 45px rgba(16,81,61,.12)!important;
}
.jh-floor{
  box-shadow:none!important;
  border-bottom-color:#E9F2EE!important;
}
.jh-floor-1{background:linear-gradient(180deg,#F4FBF8,#EAF7F1)!important}
.jh-floor-2{background:linear-gradient(180deg,#FFFCF4,#FFF6E6)!important}
.jh-floor-3{background:linear-gradient(180deg,#F5FAFE,#EBF4FC)!important}
.jh-floor-label{
  font-weight:800!important;
}
.jh-floor-1 .jh-floor-label{color:#0D5D4B!important}
.jh-floor-2 .jh-floor-label{color:#9A5A00!important}
.jh-floor-3 .jh-floor-label{color:#1F64A5!important}
.jh-room{
  background:#FFFFFF!important;
  color:#24302B!important;
  border:1px solid #DDE9E3!important;
  border-radius:14px!important;
  box-shadow:0 8px 18px rgba(16,81,61,.06)!important;
}
.jh-floor-1 .jh-room{border-top:4px solid #159B72!important}
.jh-floor-2 .jh-room{border-top:4px solid #F3A31A!important}
.jh-floor-3 .jh-room{border-top:4px solid #2585D8!important}
.jh-room.jh-available{
  box-shadow:0 0 0 2px rgba(243,163,26,.15),0 10px 22px rgba(16,81,61,.08)!important;
}
.jh-room.jh-done{
  background:#FFF9E8!important;
  border-color:#F0D79D!important;
}
.jh-room-name{color:#24302B!important}
.jh-room-status{color:#6F7D76!important}
.jh-progress-label{color:#52655D!important}
.jh-room progress{accent-color:#159B72!important}
.jh-door-frame{
  background:#FFFFFF!important;
  border-color:#D8A54D!important;
  box-shadow:0 8px 15px rgba(133,96,36,.12)!important;
}
.jh-floor-1 .jh-door{background:linear-gradient(135deg,#25A77A,#0D5D4B)!important}
.jh-floor-2 .jh-door{background:linear-gradient(135deg,#F7C65B,#F3A31A)!important}
.jh-floor-3 .jh-door{background:linear-gradient(135deg,#56A8EA,#2585D8)!important}
.jh-door{color:#FFFFFF!important}
.jh-entrance{
  background:linear-gradient(180deg,#FBFDFC,#F3F9F6)!important;
}
.jh-entry-caption{color:#52655D!important}
.jh-entry-button{
  background:linear-gradient(135deg,#0D5D4B,#159B72)!important;
  color:#FFFFFF!important;
  border:0!important;
  box-shadow:0 10px 22px rgba(13,93,75,.18)!important;
}
.jh-key-collection{
  background:#FFFFFF!important;
  border-top:1px solid #E6EFEA!important;
}
.jh-key-row>span{
  background:#F7FAF8!important;
  color:#8A9892!important;
  border:1px solid #E1EAE5!important;
}
.jh-key-row>span.collected{
  background:#FFF4CF!important;
  color:#805900!important;
  border-color:#F0D79D!important;
}
.jh-final{
  background:linear-gradient(135deg,#FFF8E5,#FFFDF8)!important;
  color:#704E00!important;
  border-color:#EED18D!important;
}
.home-menu,.home-intro,.hero-highlights,.hero-key-status{
  background:#FFFFFF!important;
  border:1px solid #DDE9E3!important;
  box-shadow:0 14px 34px rgba(16,81,61,.07)!important;
}
.topbar{
  background:rgba(7,62,52,.96)!important;
  color:#FFFFFF!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  backdrop-filter:blur(12px)!important;
}
.brand,.home-nav-button{color:#FFFFFF!important}
.home-nav-button,.language-choice select{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#FFFFFF!important;
}
.language-choice select option{
  color:#24302B!important;
  background:#FFFFFF!important;
}
.bn-mastery-nav{
  background:linear-gradient(135deg,#F3A31A,#F6B83D)!important;
  color:#FFFFFF!important;
  border:0!important;
  box-shadow:0 8px 18px rgba(243,163,26,.20)!important;
}
@media(max-width:1100px){
  .home-hero.journey-hero{padding:24px 0 38px!important}
  .journey-hero .hero-copy{padding:2rem 1.5rem!important}
}
@media(max-width:650px){
  .home-hero.journey-hero{width:min(100% - 18px,1240px)!important;padding:14px 0 28px!important}
  .journey-hero .hero-copy,.hero-house-wrap{border-radius:22px!important}
  .journey-hero .hero-copy{padding:1.45rem 1rem!important}
  .hero-house-wrap{padding:.85rem!important}
  .jh-room{border-radius:11px!important}
}


/* ===== FRONT HOUSE MATCHING FIX — remove purple, improve readability ===== */

/* Brand/header stays emerald */
.topbar{
  background:linear-gradient(90deg,#073E34 0%,#0D5D4B 55%,#159B72 100%)!important;
}
.brand,.topbar .bi,.topbar button{color:#FFFFFF!important}

/* Rumah Nahu roof/title: clear emerald family */
.jh-roof,
.jh-roof-left,
.jh-roof-right,
.jh-roof-slope,
.jh-ridge-cap{
  background:linear-gradient(145deg,#41C79B 0%,#159B72 46%,#0D5D4B 100%)!important;
  border-color:#D9B15C!important;
}
.jh-roof span,
.jh-gable-title,
.jh-roof .bi,
.jh-roof [lang]{
  color:#FFFFFF!important;
  text-shadow:0 2px 5px rgba(0,0,0,.28)!important;
}

/* If Rumah Nahu appears as a separate label, make it a green badge */
.jh-gable-title{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:linear-gradient(135deg,#0D5D4B,#159B72)!important;
  color:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.26)!important;
  border-radius:999px!important;
  padding:.38rem .95rem!important;
  box-shadow:0 8px 18px rgba(7,62,52,.20)!important;
}

/* Main house shell: no purple */
.jh-building{
  background:#FFFFFF!important;
  border:3px solid #B9DFD2!important;
  box-shadow:0 22px 52px rgba(13,93,75,.15)!important;
}

/* Floors use matching soft CEKAP palette */
.jh-floor-1{
  background:linear-gradient(180deg,#F3FBF7,#E5F5EE)!important;
}
.jh-floor-2{
  background:linear-gradient(180deg,#FFFCF3,#FFF3D9)!important;
}
.jh-floor-3{
  background:linear-gradient(180deg,#F3F9FD,#E4F1FB)!important;
}
.jh-floor{
  border-bottom:7px solid #FFFFFF!important;
}

/* Floor labels: dark enough to read */
.jh-floor-label,
.jh-floor-label [lang]{
  font-weight:800!important;
  text-shadow:none!important;
}
.jh-floor-1 .jh-floor-label,
.jh-floor-1 .jh-floor-label [lang]{color:#0B5C49!important}
.jh-floor-2 .jh-floor-label,
.jh-floor-2 .jh-floor-label [lang]{color:#8A5700!important}
.jh-floor-3 .jh-floor-label,
.jh-floor-3 .jh-floor-label [lang]{color:#185B91!important}

/* Room cards and all text: high contrast */
.jh-room{
  background:#FFFFFF!important;
  color:#23302B!important;
  border:1px solid #D9E7E1!important;
  box-shadow:0 9px 20px rgba(16,81,61,.07)!important;
}
.jh-floor-1 .jh-room{border-top:4px solid #159B72!important}
.jh-floor-2 .jh-room{border-top:4px solid #F3A31A!important}
.jh-floor-3 .jh-room{border-top:4px solid #2585D8!important}

.jh-room-name,
.jh-room-name [lang]{
  color:#23302B!important;
  font-weight:700!important;
}
.jh-room-status,
.jh-room-status [lang]{
  color:#63726B!important;
  font-weight:600!important;
}
.jh-progress-label{
  color:#465A52!important;
  font-weight:700!important;
}

/* Door palette: coordinated green / gold / blue, never purple */
.jh-door-frame{
  background:#FFFFFF!important;
  border-color:#D5A950!important;
  box-shadow:0 7px 15px rgba(118,85,32,.13)!important;
}
.jh-floor-1 .jh-door{
  background:linear-gradient(135deg,#41C79B,#159B72 55%,#0D5D4B)!important;
  box-shadow:inset 0 0 0 2px #0D5D4B!important;
}
.jh-floor-2 .jh-door{
  background:linear-gradient(135deg,#FFD36B,#F3A31A 60%,#C67A00)!important;
  box-shadow:inset 0 0 0 2px #B36B00!important;
}
.jh-floor-3 .jh-door{
  background:linear-gradient(135deg,#72B9EF,#2585D8 60%,#185B91)!important;
  box-shadow:inset 0 0 0 2px #185B91!important;
}
.jh-door,
.jh-door svg{
  color:#FFFFFF!important;
}
.jh-door-panel{
  border-color:rgba(255,255,255,.42)!important;
}
.jh-handle{
  background:#FFF0B8!important;
  box-shadow:0 0 6px rgba(110,74,0,.24)!important;
}

/* Available/done states */
.jh-room.jh-available{
  border-color:#E7C06C!important;
  box-shadow:0 0 0 2px rgba(243,163,26,.13),0 10px 22px rgba(16,81,61,.08)!important;
}
.jh-room.jh-done{
  background:linear-gradient(180deg,#FFFDF6,#FFF5D8)!important;
  border-color:#E8CC8D!important;
}

/* Entrance */
.jh-entrance{
  background:linear-gradient(180deg,#FBFEFC,#EDF7F2)!important;
}
.jh-main-door{
  background:#FFF8DC!important;
  border-color:#D5A950!important;
}
.jh-main-door>span{
  background:linear-gradient(100deg,#25A77A,#0D5D4B)!important;
  border-color:#0B5C49!important;
}
.jh-main-door>svg{color:#F4C95D!important}
.jh-entry-caption,
.jh-entry-caption [lang]{
  color:#3D554C!important;
  font-weight:700!important;
}
.jh-entry-button{
  background:linear-gradient(135deg,#0D5D4B,#159B72)!important;
  color:#FFFFFF!important;
  border:0!important;
}

/* Keys */
.jh-key-collection{
  background:#FFFFFF!important;
  color:#26342E!important;
}
.jh-key-collection .bi>[lang]{
  color:#26342E!important;
}
.jh-key-row>span{
  background:#F7FAF8!important;
  color:#75857D!important;
  border:1px solid #E0E9E4!important;
}
.jh-key-row>span.collected{
  background:#FFF4CE!important;
  color:#755100!important;
  border-color:#E5C46E!important;
}

/* Explicitly neutralize common old purple house values/selectors */
.journey-house,
.jh-room,
.jh-building,
.jh-floor,
.jh-entrance,
.jh-key-collection{
  --purple:#159B72!important;
  --purple-dark:#0D5D4B!important;
}
.journey-house *{
  text-decoration-color:currentColor;
}

/* Hero copy text readability */
.journey-hero .hero-copy,
.journey-hero .hero-copy h1,
.journey-hero .hero-copy p,
.journey-hero .hero-copy [lang]{
  color:#FFFFFF!important;
}
.hero-summary{
  color:#F5FFFB!important;
}
.hero-welcome{
  color:#D9F5EA!important;
}

/* Small screens */
@media(max-width:650px){
  .jh-room-name{font-size:.66rem!important}
  .jh-room-status{font-size:.58rem!important}
  .jh-floor-2 .jh-room-name{font-size:.57rem!important}
  .jh-floor-2 .jh-room-status{font-size:.52rem!important}
}


/* ===== FINAL FRONT PAGE — ZERO PURPLE ===== */
.home-stage,
.home-hero,
.journey-hero,
.hero-house-wrap{
  --purple:#159B72!important;
  --purple-dark:#0D5D4B!important;
}
.home-stage{
  background:
    radial-gradient(circle at 10% 8%,rgba(65,199,155,.13),transparent 27%),
    radial-gradient(circle at 90% 10%,rgba(243,163,26,.09),transparent 23%),
    linear-gradient(180deg,#F9FDFC 0%,#EEF8F4 52%,#FFF9EC 100%)!important;
}
.journey-hero .hero-copy{
  background:linear-gradient(145deg,#073E34 0%,#0D5D4B 45%,#159B72 78%,#25A77A 100%)!important;
  border-color:#59B99A!important;
}
.journey-hero .hero-copy h1,
.journey-hero .hero-copy h2,
.journey-hero .hero-copy h3,
.journey-hero .hero-copy p,
.journey-hero .hero-copy span,
.journey-hero .hero-copy [lang]{
  color:#FFFFFF!important;
}
.hero-welcome{color:#DDF7ED!important}
.hero-summary{
  background:rgba(255,255,255,.09)!important;
  color:#F4FFF9!important;
  border-color:rgba(255,255,255,.18)!important;
}

/* logo card */
.hero-official-logo{
  background:#FFFFFF!important;
  border:1px solid #DDEAE4!important;
  box-shadow:0 12px 26px rgba(7,62,52,.12)!important;
}

/* entire house */
.journey-house,
.journey-house *{
  --purple:#159B72!important;
  --purple-dark:#0D5D4B!important;
}
.jh-roof,
.jh-roof-left,
.jh-roof-right,
.jh-roof-slope,
.jh-ridge-cap{
  background:linear-gradient(145deg,#41C79B 0%,#159B72 48%,#0D5D4B 100%)!important;
}
.jh-roof span,.jh-roof [lang],.jh-gable-title{
  color:#FFFFFF!important;
}
.jh-gable-title{
  background:linear-gradient(135deg,#0D5D4B,#159B72)!important;
  border-color:#41C79B!important;
}
.jh-building{background:#FFFFFF!important;border-color:#B8DDD0!important}
.jh-floor-1{background:linear-gradient(180deg,#F3FBF7,#E6F5EE)!important}
.jh-floor-2{background:linear-gradient(180deg,#FFFCF3,#FFF3D8)!important}
.jh-floor-3{background:linear-gradient(180deg,#F4F9FD,#E7F2FB)!important}

.jh-floor-1 .jh-floor-label,.jh-floor-1 .jh-floor-label [lang]{color:#0D5D4B!important}
.jh-floor-2 .jh-floor-label,.jh-floor-2 .jh-floor-label [lang]{color:#8C5900!important}
.jh-floor-3 .jh-floor-label,.jh-floor-3 .jh-floor-label [lang]{color:#1D6097!important}

.jh-room{background:#FFFFFF!important;color:#24302B!important;border-color:#DDE9E3!important}
.jh-room-name,.jh-room-name [lang]{color:#24302B!important}
.jh-room-status,.jh-room-status [lang]{color:#64736C!important}
.jh-progress-label{color:#465A52!important}
.jh-floor-1 .jh-room{border-top-color:#159B72!important}
.jh-floor-2 .jh-room{border-top-color:#F3A31A!important}
.jh-floor-3 .jh-room{border-top-color:#2585D8!important}

.jh-floor-1 .jh-door{background:linear-gradient(135deg,#41C79B,#159B72 58%,#0D5D4B)!important}
.jh-floor-2 .jh-door{background:linear-gradient(135deg,#FFD46D,#F3A31A 62%,#C77A00)!important}
.jh-floor-3 .jh-door{background:linear-gradient(135deg,#71B8ED,#2585D8 62%,#185B91)!important}
.jh-door,.jh-door svg{color:#FFFFFF!important}
.jh-door-panel{border-color:rgba(255,255,255,.45)!important}

.jh-entrance{background:linear-gradient(180deg,#FBFEFC,#EDF7F2)!important}
.jh-main-door>span{background:linear-gradient(100deg,#25A77A,#0D5D4B)!important}
.jh-entry-caption,.jh-entry-caption [lang]{color:#3F554D!important}
.jh-entry-button{
  background:linear-gradient(135deg,#0D5D4B,#159B72)!important;
  color:#FFFFFF!important;
}
.jh-key-collection{background:#FFFFFF!important}
.jh-key-collection .bi>[lang]{color:#27342E!important}
.jh-key-row>span{background:#F7FAF8!important;color:#77877F!important}
.jh-key-row>span.collected{background:#FFF4CE!important;color:#765100!important}

/* top bar and buttons */
.topbar{background:linear-gradient(90deg,#073E34,#0D5D4B 55%,#159B72)!important}
.bn-mastery-nav{
  background:linear-gradient(135deg,#F3A31A,#F6BD4A)!important;
  color:#FFFFFF!important;
}
.home-nav-button,.language-choice select{
  background:rgba(255,255,255,.10)!important;
  color:#FFFFFF!important;
  border-color:rgba(255,255,255,.20)!important;
}


/* ===== ORANGE FRONT MATCHING FIX ===== */
.journey-home-actions .btn,
.journey-home-actions .primary-btn,
.journey-home-actions .hero-start,
.journey-home-actions .open-house-button,
.journey-home-actions .start-button,
.home-menu .btn,
.home-menu .primary-btn{
  background:linear-gradient(135deg,#F3A31A,#F6BD4A)!important;
  color:#FFFFFF!important;
  border:1px solid #D99818!important;
  box-shadow:0 12px 24px rgba(243,163,26,.28)!important;
}
.journey-home-actions .btn.light,
.journey-home-actions .text-btn,
.home-menu .btn.light,
.home-menu .text-btn{
  background:#FFFFFF!important;
  color:#0D5D4B!important;
  border:1px solid #DCE8E2!important;
  box-shadow:0 10px 20px rgba(13,93,75,.08)!important;
}
.journey-home-actions .btn.light *,
.journey-home-actions .text-btn *,
.home-menu .btn.light *,
.home-menu .text-btn *{
  color:#0D5D4B!important;
}
/* Make front containers warmer */
.hero-house-wrap{
  background:linear-gradient(180deg,#FFFDF8,#FFF6E7)!important;
  border:1px solid #F0DEC0!important;
}
/* If there are text/icon-only buttons on white cards */
.home-stage button,
.home-stage .btn,
.home-stage .text-btn{
  text-shadow:none!important;
}

/* ===== EXTRA FRONT ORANGE OVERRIDES V2 ===== */
.journey-home-actions > *:not(.btn-light),
.journey-home-actions .continue-button,
.journey-home-actions .resume-button,
.journey-home-actions .sambung-button,
.journey-home-actions .hero-resume,
button[aria-label*="Sambung"],
button[title*="Sambung"]{
  background:linear-gradient(135deg,#F3A31A,#F6BD4A)!important;
  color:#FFFFFF!important;
  border:1px solid #DE9D24!important;
}
.journey-home-actions .btn.light,
.journey-home-actions .secondary-button,
.journey-home-actions .ghost-button,
.journey-home-actions .white-button,
.journey-home-actions .btn.light span,
.journey-home-actions .btn.light svg,
.journey-home-actions .white-button span,
.journey-home-actions .white-button svg{
  color:#0D5D4B!important;
  fill:#0D5D4B!important;
  stroke:#0D5D4B!important;
}


/* ===== BOX STYLE FIX: Cuba Semula + Hiasan + non-curved boxes ===== */
/* Buttons that were too pill-shaped */
.text-btn,
.btn.light,
.home-nav-button,
.language-choice select,
.journey-home-actions .btn,
.journey-home-actions .primary-btn,
.journey-home-actions .hero-start,
.journey-home-actions .btn.light,
.journey-home-actions .text-btn,
.house-part-button,
.part-filter button,
.part-filter .btn,
.topic-filter button,
.topic-filter .btn,
.filter-chip,
.filter-btn,
.tab-btn,
.tab-button,
.back-strip .text-btn,
.cloud-status .text-btn,
.login-dialog .text-btn,
.reward-actions .btn,
.reward-actions .btn.light,
.drawer-actions .btn,
.drawer-actions .btn.light,
button[aria-current="page"],
button[title*="hiasan"],
button[title*="Hiasan"]{
  border-radius: 14px !important;
}

/* Section and cards that should look more 'kotak' */
.card,
.home-panel,
.topic-link,
.topic-card,
.topic-item,
.tool-card,
.gloss-card,
.builder-target,
.room-description,
.space-entry,
.space-description,
.house-progress-panel,
.house-route-note,
.space-copy,
.space-review,
.space-meta,
.reward-copy,
.learning-drawer,
.login-dialog,
.reward-dialog,
.jr-dialog,
.drawer-heading,
.drawer-actions,
.ig-banner,
.ig-section-title,
.ig-summary-card,
.ig-comparison,
.ig-rule-panel,
.ig-full-rule,
.ig-application,
.ig-attention,
.ig-clue,
.ig-solved,
.t1-card,
.t1-summary-card,
.vn-summary-card,
.vn-rule-only,
.vn-concept-example,
.vn-summary,
.vn-tip,
.vn-more,
.lesson-reference,
.topic-controls,
.page-intro,
.home-menu,
.home-intro,
.hero-key-status,
.hero-highlights,
.hero-copy,
.hero-house-wrap,
.cloud-status,
.notice,
.lesson-panel,
.room-card,
.reference-panel,
.reference-card,
.house-layout-nav,
.house-layout-nav .house-part-button,
.topic-list .topic-link,
.related-topic-links .topic-link,
.jh-final,
.jh-room,
.jh-key-row > span {
  border-radius: 12px !important;
}

/* Make try-again / retry button more box-like and visible */
.cloud-status .text-btn{
  min-height: 42px;
}

/* House section tabs / hiasan / categories */
.house-layout-nav .house-part-button,
.part-filter .btn,
.topic-filter .btn,
.filter-btn,
.filter-chip,
.tab-btn,
.tab-button {
  padding-inline: 1rem !important;
  padding-block: .72rem !important;
  border: 1px solid var(--bn-line, #DCE8E2) !important;
  background: #ffffff !important;
  color: var(--bn-deep, #0D5D4B) !important;
  box-shadow: 0 8px 18px rgba(13,93,75,.06) !important;
}

/* Active states remain colored but still box-shaped */
.house-layout-nav .house-part-button[aria-current="page"],
.part-filter .btn.active,
.topic-filter .btn.active,
.filter-btn.active,
.filter-chip.active,
.tab-btn.active,
.tab-button.active {
  background: linear-gradient(135deg, #F3A31A, #F6BD4A) !important;
  color: #ffffff !important;
  border-color: #DE9D24 !important;
}

/* Avoid pill shape on white icon boxes at front */
.home-stage .btn,
.home-stage .text-btn,
.home-stage button,
.home-menu .btn,
.home-menu .text-btn {
  border-radius: 14px !important;
}


/* ===== SOFT PREMIUM BOX STYLE ===== */
:root{
  --soft-premium-radius: 18px;
  --soft-premium-radius-lg: 22px;
  --soft-premium-line: #DCE8E2;
  --soft-premium-shadow: 0 14px 32px rgba(13,93,75,.08), 0 3px 10px rgba(18,46,40,.04);
  --soft-premium-shadow-hover: 0 18px 40px rgba(13,93,75,.11), 0 5px 14px rgba(18,46,40,.06);
}

/* Main soft-premium cards */
.card,
.home-panel,
.topic-link,
.topic-card,
.topic-item,
.tool-card,
.gloss-card,
.builder-target,
.room-description,
.space-entry,
.space-description,
.house-progress-panel,
.house-route-note,
.space-copy,
.space-review,
.space-meta,
.reward-copy,
.learning-drawer,
.login-dialog,
.reward-dialog,
.jr-dialog,
.drawer-heading,
.drawer-actions,
.ig-banner,
.ig-section-title,
.ig-summary-card,
.ig-comparison,
.ig-rule-panel,
.ig-full-rule,
.ig-application,
.ig-attention,
.ig-clue,
.ig-solved,
.t1-card,
.t1-summary-card,
.vn-summary-card,
.vn-rule-only,
.vn-concept-example,
.vn-summary,
.vn-tip,
.vn-more,
.lesson-reference,
.topic-controls,
.page-intro,
.home-menu,
.home-intro,
.hero-key-status,
.hero-highlights,
.hero-copy,
.hero-house-wrap,
.cloud-status,
.notice,
.lesson-panel,
.room-card,
.reference-panel,
.reference-card,
.house-layout-nav,
.jh-final,
.jh-room,
.jh-key-row > span{
  border-radius: var(--soft-premium-radius) !important;
  border: 1px solid var(--soft-premium-line) !important;
  box-shadow: var(--soft-premium-shadow) !important;
}

/* Bigger feature panels */
.home-panel,
.hero-copy,
.hero-house-wrap,
.lesson-panel,
.login-dialog,
.reward-dialog,
.jr-dialog,
.learning-drawer{
  border-radius: var(--soft-premium-radius-lg) !important;
}

/* Buttons: soft premium boxes */
.text-btn,
.btn.light,
.home-nav-button,
.language-choice select,
.journey-home-actions .btn,
.journey-home-actions .primary-btn,
.journey-home-actions .hero-start,
.journey-home-actions .btn.light,
.journey-home-actions .text-btn,
.house-part-button,
.part-filter button,
.part-filter .btn,
.topic-filter button,
.topic-filter .btn,
.filter-chip,
.filter-btn,
.tab-btn,
.tab-button,
.back-strip .text-btn,
.cloud-status .text-btn,
.login-dialog .text-btn,
.reward-actions .btn,
.reward-actions .btn.light,
.drawer-actions .btn,
.drawer-actions .btn.light,
.home-stage .btn,
.home-stage .text-btn,
.home-stage button,
.home-menu .btn,
.home-menu .text-btn{
  border-radius: 16px !important;
  min-height: 46px !important;
  border: 1px solid var(--soft-premium-line) !important;
  box-shadow: 0 10px 22px rgba(13,93,75,.06) !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.text-btn:hover,
.btn.light:hover,
.home-nav-button:hover,
.journey-home-actions .btn:hover,
.journey-home-actions .primary-btn:hover,
.journey-home-actions .hero-start:hover,
.house-part-button:hover,
.part-filter button:hover,
.topic-filter button:hover,
.filter-chip:hover,
.filter-btn:hover,
.tab-btn:hover,
.tab-button:hover,
.home-stage .btn:hover,
.home-menu .btn:hover,
.topic-link:hover,
.topic-card:hover,
.tool-card:hover,
.jh-room:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--soft-premium-shadow-hover) !important;
}

/* Active/selected buttons remain elegant */
.house-layout-nav .house-part-button[aria-current="page"],
.part-filter .btn.active,
.topic-filter .btn.active,
.filter-btn.active,
.filter-chip.active,
.tab-btn.active,
.tab-button.active,
.cloud-status .text-btn{
  border-radius: 16px !important;
}

/* Retry / cuba semula button gets premium shape */
.cloud-status .text-btn{
  padding-inline: 1rem !important;
  font-weight: 700 !important;
}

/* White utility buttons clearer */
.journey-home-actions .btn.light,
.journey-home-actions .text-btn,
.home-menu .text-btn,
.home-stage .text-btn,
.text-btn,
.btn.light{
  background: #FFFFFF !important;
  color: #0D5D4B !important;
}

/* Front white icon boxes */
.home-stage button,
.home-menu .btn,
.home-menu .text-btn{
  background: linear-gradient(180deg,#FFFFFF,#FBFDFC) !important;
}

/* Slightly smoother key and room boxes */
.jh-room,
.jh-key-row > span{
  padding: .72rem .42rem .55rem !important;
}


/* ===== FINAL ELEGANT HOME — EMERALD LUXURY ISLAMIC LEARNING ===== */
:root{
  --el-deep:#073E34;
  --el-emerald:#159B72;
  --el-teal:#25A77A;
  --el-gold:#F3A31A;
  --el-gold2:#F7C766;
  --el-cream:#FFFAF0;
  --el-paper:#FFFFFF;
  --el-ink:#18221F;
  --el-muted:#66746D;
  --el-line:#DFEAE5;
}

/* Page atmosphere */
.home-stage{
  min-height:100vh!important;
  background:
    radial-gradient(circle at 8% 8%,rgba(21,155,114,.10),transparent 25%),
    radial-gradient(circle at 94% 12%,rgba(243,163,26,.08),transparent 22%),
    linear-gradient(180deg,#FBFEFC 0%,#F3F9F6 58%,#FFF9ED 100%)!important;
  position:relative!important;
  overflow:hidden!important;
}
.home-stage:before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background-image:url("./islamic-pattern.svg")!important;
  background-size:420px!important;
  background-repeat:repeat!important;
  opacity:.025!important;
}
.home-stage>*{position:relative;z-index:1}

/* Top navigation */
.topbar{
  background:rgba(7,62,52,.96)!important;
  backdrop-filter:blur(14px)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 8px 28px rgba(7,62,52,.10)!important;
}
.brand{
  color:#fff!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
}
.home-nav-button,.language-choice select{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  color:#fff!important;
  border-radius:12px!important;
}
.bn-mastery-nav{
  background:linear-gradient(135deg,var(--el-gold),var(--el-gold2))!important;
  color:#fff!important;
  border:0!important;
  border-radius:12px!important;
  box-shadow:0 8px 18px rgba(243,163,26,.20)!important;
}

/* Main hero layout */
.home-hero.journey-hero{
  width:min(1240px,calc(100% - 34px))!important;
  margin:0 auto!important;
  padding:42px 0 56px!important;
  gap:30px!important;
  align-items:stretch!important;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)!important;
}

/* Left hero: elegant emerald block */
.journey-hero .hero-copy{
  background:
    radial-gradient(circle at 84% 14%,rgba(255,255,255,.12),transparent 24%),
    linear-gradient(145deg,var(--el-deep) 0%,#0B5747 45%,var(--el-emerald) 78%,var(--el-teal) 100%)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:28px!important;
  padding:3rem 2.5rem!important;
  box-shadow:0 26px 72px rgba(7,62,52,.20)!important;
  overflow:hidden!important;
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.journey-hero .hero-copy:before{
  content:""!important;
  position:absolute!important;
  width:220px!important;height:220px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  border-radius:50%!important;
  right:-90px!important;top:-80px!important;
}
.journey-hero .hero-copy:after{
  content:""!important;
  position:absolute!important;
  width:150px!important;height:150px!important;
  border-radius:50%!important;
  right:-55px!important;bottom:-58px!important;
  background:rgba(243,163,26,.10)!important;
  border:1px solid rgba(247,199,102,.18)!important;
}
.hero-official-logo{
  width:min(250px,76%)!important;
  margin:0 auto 1.15rem!important;
  background:#fff!important;
  border:1px solid rgba(255,255,255,.60)!important;
  border-radius:20px!important;
  padding:10px 14px!important;
  box-shadow:0 12px 28px rgba(2,40,32,.14)!important;
}
.hero-official-logo img{
  width:100%!important;
  height:auto!important;
  display:block!important;
}
.hero-welcome{
  color:#D8F4E9!important;
  font-size:1rem!important;
  font-weight:700!important;
  letter-spacing:.015em!important;
  margin-bottom:.45rem!important;
}
.journey-hero .hero-copy h1{
  color:#fff!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(2.45rem,5vw,4.45rem)!important;
  line-height:1.02!important;
  letter-spacing:.015em!important;
  margin:.25rem 0 1rem!important;
  text-shadow:0 2px 0 rgba(0,0,0,.08)!important;
}
.hero-summary{
  color:#F1FBF7!important;
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:16px!important;
  padding:1rem 1.1rem!important;
  line-height:1.75!important;
  box-shadow:none!important;
}

/* Elegant CTA hierarchy */
.journey-home-actions{
  margin-top:1.25rem!important;
  gap:.75rem!important;
  justify-content:center!important;
}
.journey-home-actions .hero-start,
.journey-home-actions .primary-btn,
.journey-home-actions .btn:not(.light):not(.text-btn){
  background:linear-gradient(135deg,var(--el-gold),var(--el-gold2))!important;
  color:#513500!important;
  border:0!important;
  border-radius:14px!important;
  font-weight:800!important;
  min-height:48px!important;
  box-shadow:0 12px 26px rgba(243,163,26,.24)!important;
}
.journey-home-actions .btn.light,
.journey-home-actions .text-btn{
  background:#fff!important;
  color:var(--el-deep)!important;
  border:1px solid #DCE8E2!important;
  border-radius:14px!important;
  min-height:48px!important;
  box-shadow:0 10px 22px rgba(7,62,52,.10)!important;
}
.journey-home-actions .btn.light *,
.journey-home-actions .text-btn *{
  color:var(--el-deep)!important;
}

/* Right house showcase: white premium frame, house design remains intact */
.hero-house-wrap{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFDFC 100%)!important;
  border:1px solid var(--el-line)!important;
  border-radius:28px!important;
  box-shadow:0 24px 62px rgba(16,81,61,.11)!important;
  padding:1.5rem!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.journey-house{
  width:100%!important;
  max-width:690px!important;
  filter:none!important;
}

/* Keep existing house design, only polish container/text readability */
.jh-room-name,.jh-room-name [lang]{
  color:#24302B!important;
  font-weight:700!important;
}
.jh-room-status,.jh-room-status [lang]{
  color:#64736C!important;
}
.jh-progress-label{
  color:#465A52!important;
  font-weight:700!important;
}
.jh-floor-label,.jh-floor-label [lang]{
  font-weight:800!important;
}
.jh-key-collection .bi>[lang]{
  color:#26342E!important;
}

/* Progress / supporting cards */
.home-menu,.home-intro,.hero-highlights,.hero-key-status{
  background:#fff!important;
  border:1px solid var(--el-line)!important;
  border-radius:18px!important;
  box-shadow:0 14px 34px rgba(16,81,61,.07)!important;
}
.jh-key-row>span{
  border-radius:12px!important;
  background:#F7FAF8!important;
  border:1px solid #E1EAE5!important;
}
.jh-key-row>span.collected{
  background:#FFF4CF!important;
  color:#805900!important;
  border-color:#F0D79D!important;
}

/* Hover is subtle, premium */
.journey-home-actions .btn:hover,
.journey-home-actions .hero-start:hover,
.journey-home-actions .primary-btn:hover,
.home-nav-button:hover,
.bn-mastery-nav:hover{
  transform:translateY(-1px)!important;
  filter:brightness(.99)!important;
}

/* Tablet/mobile */
@media(max-width:1100px){
  .home-hero.journey-hero{
    grid-template-columns:1fr!important;
    width:min(100% - 26px,860px)!important;
    padding:28px 0 44px!important;
  }
  .journey-hero .hero-copy{
    padding:2.2rem 1.6rem!important;
  }
  .hero-house-wrap{
    padding:1.1rem!important;
  }
}
@media(max-width:650px){
  .home-hero.journey-hero{
    width:min(100% - 16px,860px)!important;
    padding:14px 0 30px!important;
    gap:16px!important;
  }
  .journey-hero .hero-copy{
    border-radius:22px!important;
    padding:1.6rem 1rem!important;
  }
  .hero-house-wrap{
    border-radius:22px!important;
    padding:.75rem!important;
  }
  .journey-hero .hero-copy h1{
    font-size:clamp(2.2rem,11vw,3.25rem)!important;
  }
  .hero-summary{
    font-size:.98rem!important;
  }
  .journey-home-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  .journey-home-actions .btn,
  .journey-home-actions .hero-start,
  .journey-home-actions .primary-btn{
    width:100%!important;
  }
}


/* ===== FINAL HOUSE ZERO-PURPLE EDGE ===== */
.hero-house-wrap{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF9EE 100%)!important;
  border:1px solid #E9D9BA!important;
  box-shadow:0 24px 62px rgba(13,93,75,.10)!important;
}
.journey-house{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  color:#24302B!important;
}
.journey-house:before,.journey-house:after{
  display:none!important;
  content:none!important;
}
.jh-building{
  background:#FFFDF8!important;
  border-color:#E4CFA3!important;
  box-shadow:0 18px 42px rgba(139,94,22,.10)!important;
}
.jh-roof,.jh-roof-left,.jh-roof-right,.jh-roof-slope,.jh-ridge-cap{
  background:linear-gradient(145deg,#F7C766 0%,#F3A31A 54%,#C87800 100%)!important;
  border-color:#D89A22!important;
  box-shadow:none!important;
}
.jh-gable-title{
  background:linear-gradient(135deg,#0D5D4B,#159B72)!important;
  color:#FFFFFF!important;
  border-color:#41C79B!important;
}
.jh-floor-1{background:linear-gradient(180deg,#F4FBF8,#E9F6F0)!important}
.jh-floor-2{background:linear-gradient(180deg,#FFF9EB,#FFEBC4)!important}
.jh-floor-3{background:linear-gradient(180deg,#F4F9FD,#E8F2FA)!important}
.jh-floor{border-bottom-color:#FFFFFF!important}
.jh-room{border-color:#E3E8E5!important;background:#FFFFFF!important}
.jh-door-frame{border-color:#D8A54D!important;background:#FFFDF8!important}
.jh-floor-1 .jh-door{background:linear-gradient(135deg,#41C79B,#159B72 58%,#0D5D4B)!important}
.jh-floor-2 .jh-door{background:linear-gradient(135deg,#FFD46D,#F3A31A 62%,#C77A00)!important}
.jh-floor-3 .jh-door{background:linear-gradient(135deg,#6EB6EC,#2585D8 62%,#185B91)!important}
.jh-main-door>span{background:linear-gradient(100deg,#25A77A,#0D5D4B)!important}
.jh-entrance{background:linear-gradient(180deg,#FFFCF4,#F5FAF7)!important}
.jh-key-collection{background:#FFFDF8!important}
/* Explicit legacy purple suppression on house-only selectors */
.journey-house,.journey-house *{
  --purple:#159B72!important;
  --purple-dark:#0D5D4B!important;
  --lav:#F4FBF8!important;
  --rose:#FFF3D9!important;
}

/* ===== FINAL MATCHING FIX: readable buttons + orange roof + no purple edges ===== */
:root{
  --bn-match-deep:#0D5D4B;
  --bn-match-mid:#159B72;
  --bn-match-gold:#F3A31A;
  --bn-match-gold2:#FFC247;
  --bn-match-gold3:#D88400;
  --bn-match-paper:#FFFDF8;
  --bn-match-cream:#FFF5E6;
  --bn-match-line:#E7D2AC;
  --bn-match-text:#134C40;
  --bn-match-brown:#5B3600;
}

/* Make all hero buttons readable and matching */
.journey-home-actions .hero-start,
.journey-home-actions .primary-btn,
.journey-home-actions .btn:not(.light):not(.text-btn),
.journey-guide-actions .hero-start{
  background:linear-gradient(135deg,var(--bn-match-gold2) 0%,var(--bn-match-gold) 58%,var(--bn-match-gold3) 100%)!important;
  color:var(--bn-match-brown)!important;
  border:1px solid rgba(178,111,0,.18)!important;
  box-shadow:0 14px 30px rgba(243,163,26,.24)!important;
  text-shadow:none!important;
}
.journey-home-actions .hero-start *,
.journey-home-actions .primary-btn *,
.journey-home-actions .btn:not(.light):not(.text-btn) *,
.journey-guide-actions .hero-start *{
  color:var(--bn-match-brown)!important;
  fill:currentColor!important;
  stroke:currentColor!important;
  opacity:1!important;
}

.journey-home-actions .btn.light,
.journey-home-actions .text-btn,
.home-stage .btn.light,
.home-stage .text-btn,
.home-menu .btn.light,
.home-menu .text-btn{
  background:#FFFFFF!important;
  color:var(--bn-match-text)!important;
  border:1px solid #DDE9E1!important;
  box-shadow:0 10px 22px rgba(7,62,52,.10)!important;
  text-shadow:none!important;
}
.journey-home-actions .btn.light *,
.journey-home-actions .text-btn *,
.home-stage .btn.light *,
.home-stage .text-btn *,
.home-menu .btn.light *,
.home-menu .text-btn *{
  color:var(--bn-match-text)!important;
  fill:currentColor!important;
  stroke:currentColor!important;
  opacity:1!important;
}
/* keep guide icon warm gold, other light-button icons teal */
.journey-guide-actions .btn.light svg{color:#D7A03A!important}
.journey-home-actions .btn.light svg,
.home-stage .text-btn svg,
.home-menu .text-btn svg{color:var(--bn-match-text)!important}

/* Elegant home panel harmony */
.home-stage{
  background:linear-gradient(180deg,#EEF7F1 0%,#F9F5EA 100%)!important;
}
.journey-hero .hero-copy{
  background:linear-gradient(145deg,#0D5D4B 0%,#128463 52%,#1AAA7B 100%)!important;
}
.hero-summary{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.16)!important;
}

/* House: orange roof, cream walls, zero purple edges */
.jh-roof{
  filter:drop-shadow(0 8px 16px rgba(151,97,5,.16))!important;
}
.jh-roof:before{
  background:linear-gradient(135deg,#FFFDFB 6%,#FFF5E7 55%,#F8E7C7 100%)!important;
}
.jh-roof-slope,
.jh-roof-left,
.jh-roof-right{
  background:transparent!important;
  box-shadow:none!important;
}
.jh-roof .jh-roof-tile{
  background:linear-gradient(180deg,#FFD15A 0%,#F4A51E 54%,#D88400 100%)!important;
  box-shadow:inset 0 2px 2px rgba(255,243,193,.88), inset -2px -2px 1px rgba(171,97,0,.55), 1px 2px 1px rgba(145,85,0,.35)!important;
}
.jh-roof .jh-ridge-cap{
  background:linear-gradient(180deg,#FFD76D 0%,#F3A31A 70%,#D88400 100%)!important;
  box-shadow:0 4px 6px rgba(170,102,0,.24)!important;
}
.jh-building,
.jh-entrance,
.jh-key-collection{
  background:linear-gradient(180deg,var(--bn-match-paper) 0%,var(--bn-match-cream) 100%)!important;
  border-color:var(--bn-match-line)!important;
}
.jh-building:before,
.jh-building:after,
.jh-floor:before,
.jh-floor:after,
.jh-entrance:after{
  background:linear-gradient(180deg,#F9EED9 0%,#EAD7B1 100%)!important;
  border-color:#E4CCA4!important;
  box-shadow:none!important;
}
.jh-floor{
  border-bottom-color:#F3E3C2!important;
  box-shadow:inset 0 6px 8px rgba(207,179,134,.16)!important;
}
.jh-floor-label,
.jh-room-name,
.jh-room-status,
.jh-progress-label,
.journey-house,
.journey-house *{
  color:#2C5147!important;
}
.jh-room{
  background:#FFFFFF!important;
  border-color:#E4E8E3!important;
}
.jh-room.jh-done{
  background:linear-gradient(180deg,#FFFDF6 0%,#FFF3D9 100%)!important;
  border-color:#E0BF7A!important;
}
.jh-door-frame{
  border-color:#D8A54D!important;
  background:#FFFDF8!important;
}
.jh-floor-1 .jh-door{background:linear-gradient(135deg,#45C99D,#159B72 58%,#0D5D4B)!important}
.jh-floor-2 .jh-door{background:linear-gradient(135deg,#FFD46D,#F3A31A 62%,#C77A00)!important}
.jh-floor-3 .jh-door{background:linear-gradient(135deg,#76BDEE,#2B88D8 62%,#185B91)!important}
.jh-main-door>span{background:linear-gradient(100deg,#25A77A,#0D5D4B)!important}
.jh-gable-title{
  background:linear-gradient(135deg,#0D5D4B,#159B72)!important;
  color:#FFFFFF!important;
  border-color:#41C79B!important;
}
/* Remove any legacy purple tint in house shell */
.jh-building,
.jh-floor,
.jh-floor:before,
.jh-floor:after,
.jh-building:before,
.jh-building:after,
.jh-entrance,
.jh-entrance:after,
.jh-roof,
.jh-roof *{
  --purple:transparent!important;
  --purple-dark:transparent!important;
}

/* ===== user final tweak: green text on main study button + white roof background ===== */
.journey-home-actions .hero-start,
.journey-guide-actions .hero-start,
.home-stage .hero-start{
  color:#0D5D4B!important;
}
.journey-home-actions .hero-start *,
.journey-guide-actions .hero-start *,
.home-stage .hero-start *{
  color:#0D5D4B!important;
  fill:currentColor!important;
  stroke:currentColor!important;
  opacity:1!important;
}

/* keep white/light button text clearly readable */
.journey-home-actions .btn.light,
.journey-home-actions .text-btn,
.home-stage .btn.light,
.home-stage .text-btn{
  color:#0D5D4B!important;
}
.journey-home-actions .btn.light *,
.journey-home-actions .text-btn *,
.home-stage .btn.light *,
.home-stage .text-btn *{
  color:#0D5D4B!important;
  fill:currentColor!important;
  stroke:currentColor!important;
  opacity:1!important;
}

/* white roof background / face */
.jh-roof:before,
.jh-roof-left,
.jh-roof-right,
.jh-roof-slope{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF8EF 100%)!important;
  border-color:#E8D5B2!important;
}
/* orange roof tiles remain as accent, without purple */
.jh-roof .jh-roof-tile{
  background:linear-gradient(180deg,#FFD15A 0%,#F4A51E 54%,#D88400 100%)!important;
}
.jh-roof .jh-ridge-cap{
  background:linear-gradient(180deg,#FFD76D 0%,#F3A31A 70%,#D88400 100%)!important;
}

/* ===== final mobile/readability/home-roof patch ===== */
/* Main action button: ensure text is fully visible and matching */
.journey-home-actions .hero-start,
.journey-guide-actions .hero-start,
.home-stage .hero-start{
  background:linear-gradient(135deg,#F5B23A 0%,#F7D36F 100%)!important;
  color:#0D5D4B!important;
  border:1px solid #E4C37E!important;
  box-shadow:0 12px 24px rgba(197,139,35,.22)!important;
}
.journey-home-actions .hero-start:hover,
.journey-guide-actions .hero-start:hover,
.home-stage .hero-start:hover{
  background:linear-gradient(135deg,#F0A62A 0%,#F6CC5A 100%)!important;
}
.journey-home-actions .hero-start,
.journey-guide-actions .hero-start{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.75rem!important;
}
.journey-home-actions .hero-start *,
.journey-guide-actions .hero-start *,
.home-stage .hero-start *,
.journey-home-actions .hero-start .bi,
.journey-guide-actions .hero-start .bi,
.journey-home-actions .hero-start .bi > [lang],
.journey-guide-actions .hero-start .bi > [lang],
.journey-home-actions .hero-start span,
.journey-guide-actions .hero-start span{
  color:#0D5D4B!important;
  fill:currentColor!important;
  stroke:none!important;
  opacity:1!important;
  text-shadow:none!important;
  visibility:visible!important;
}
.journey-home-actions .hero-start .bi,
.journey-guide-actions .hero-start .bi{
  display:inline-flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
  gap:.55rem!important;
  font-weight:800!important;
}
.journey-home-actions .hero-start > svg:first-child,
.journey-guide-actions .hero-start > svg:first-child{
  color:#0D5D4B!important;
  stroke-width:2!important;
}

/* Keep light buttons readable */
.journey-home-actions .btn.light,
.journey-home-actions .text-btn,
.home-stage .btn.light,
.home-stage .text-btn{
  color:#0D5D4B!important;
}
.journey-home-actions .btn.light *,
.journey-home-actions .text-btn *,
.home-stage .btn.light *,
.home-stage .text-btn *{
  color:#0D5D4B!important;
  opacity:1!important;
}

/* Roof: white background, orange tiles, no purple edges */
.jh-roof{
  background:#FFFFFF!important;
  filter:drop-shadow(0 8px 18px rgba(205,161,82,.16))!important;
}
.jh-roof:before{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFDF8 100%)!important;
}
.jh-roof-slope,
.jh-roof-left,
.jh-roof-right{
  background:transparent!important;
  box-shadow:0 5px 0 #EFD9A8,0 8px 4px rgba(188,145,65,.18)!important;
}
.jh-roof .jh-roof-tile{
  background:linear-gradient(180deg,#FFD66E 0%,#F4B22F 52%,#DB8D0A 100%)!important;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.55),inset -1px -2px 1px rgba(150,90,0,.28),1px 2px 1px rgba(159,100,8,.24)!important;
}
.jh-roof .jh-ridge-cap{
  background:linear-gradient(180deg,#FFD66E 0%,#F1A628 65%,#D88500 100%)!important;
  box-shadow:0 4px 4px rgba(175,113,0,.18)!important;
}
.jh-roof .jh-gable-title{
  color:#FFFFFF!important;
  text-shadow:none!important;
}

/* Neutralize remaining purple house edges */
.jh-building,
.jh-floor,
.jh-entrance{
  border-color:#E8DEC9!important;
}
.jh-building:after{
  background:linear-gradient(90deg,#E8DCC8,#D5C3A7)!important;
  border-right-color:#D6C3A4!important;
}
.jh-floor:before,
.jh-floor:after{
  background:linear-gradient(90deg,#EADFCF,#FFFDF8 42%,#EFE6D9 74%,#DCCDB8)!important;
  border-top-color:#F5EEE4!important;
  border-bottom-color:#E8DCCE!important;
  box-shadow:2px 2px 5px rgba(162,133,92,.18)!important;
}

/* Mobile title: keep BAITUNNAHWI in one line */
@media (max-width: 650px){
  #baitunnahwi-title,
  .journey-hero .hero-copy h1{
    font-size:clamp(2.5rem,10.2vw,4rem)!important;
    line-height:1.02!important;
    white-space:nowrap!important;
    letter-spacing:-.03em!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
  .journey-hero .hero-copy{overflow:hidden!important}
}

/* ===== user final refinement: icons, roof blue, gold logo, dark-green login ===== */

/* Home action icons */
.journey-guide-actions > .btn.light:first-child > svg,
.journey-guide-actions > .hero-start[aria-haspopup="dialog"] > svg{
  display:none!important;
}
.journey-guide-actions > .btn.light:first-child::before{
  content:"📖";
  font-size:1.24rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:.7rem;
}
.journey-guide-actions > .hero-start[aria-haspopup="dialog"]::before{
  content:"🚪";
  font-size:1.24rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-right:.72rem;
}
.journey-guide-actions > .btn.light:first-child,
.journey-guide-actions > .hero-start[aria-haspopup="dialog"]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* Improve readability on main CTA and other home buttons */
.journey-guide-actions > .hero-start,
.journey-home-actions > .hero-start,
.journey-home-actions > .btn.light,
.journey-guide-actions > .btn.light{
  font-weight:800!important;
  letter-spacing:.01em!important;
}
.journey-guide-actions > .hero-start .bi,
.journey-home-actions > .hero-start .bi,
.journey-home-actions > .btn.light .bi,
.journey-guide-actions > .btn.light .bi{
  color:#0B5B49!important;
}
.journey-guide-actions > .hero-start .bi > [lang],
.journey-home-actions > .hero-start .bi > [lang],
.journey-home-actions > .btn.light .bi > [lang],
.journey-guide-actions > .btn.light .bi > [lang]{
  color:#0B5B49!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* Blue roof background with warm gold/orange tiles, and no purple edge */
.jh-roof{
  background:#eaf5ff!important;
  filter:drop-shadow(0 10px 18px rgba(101,146,190,.18))!important;
}
.jh-roof:before{
  background:linear-gradient(180deg,#f7fbff 0%,#deefff 55%,#c8e2fa 100%)!important;
  clip-path:polygon(50% 4%,99% 100%,1% 100%)!important;
}
.jh-roof-slope,
.jh-roof-left,
.jh-roof-right{
  background:transparent!important;
  box-shadow:0 4px 0 #d6b66c,0 8px 4px rgba(184,145,65,.18)!important;
}
.jh-roof .jh-roof-tile{
  background:linear-gradient(180deg,#ffd971 0%,#f3b12e 55%,#db8c0b 100%)!important;
  box-shadow:inset 0 2px 2px rgba(255,255,255,.55),inset -1px -2px 1px rgba(145,88,0,.24),1px 2px 1px rgba(159,100,8,.22)!important;
}
.jh-roof .jh-ridge-cap{
  background:linear-gradient(180deg,#ffd971 0%,#f0a62a 65%,#d98700 100%)!important;
  box-shadow:0 4px 4px rgba(175,113,0,.18)!important;
}
.jh-roof .jh-gable-title{
  background:linear-gradient(135deg,#0b7562,#18a17f)!important;
  color:#ffffff!important;
}
.jh-building,
.jh-floor,
.jh-entrance,
.jh-building:after,
.jh-floor:before,
.jh-floor:after{
  border-color:#e7dbc8!important;
}
.jh-building:after{
  background:linear-gradient(90deg,#e9ddcb,#d9c8ae)!important;
  border-right-color:#d5c2a2!important;
}

/* Gold shine animation on official logo */
.hero-official-logo{
  box-shadow:0 16px 36px rgba(15,61,49,.16), inset 0 0 0 1px rgba(244,201,111,.28)!important;
}
.hero-official-logo:before{
  background:linear-gradient(90deg,transparent,rgba(255,243,197,.12),rgba(247,214,111,.88),rgba(255,247,214,.22),transparent)!important;
  animation:logoShine 4.2s ease-in-out infinite!important;
}
.hero-official-logo:after{
  box-shadow:0 0 20px rgba(248,204,92,.25),0 0 42px rgba(236,193,75,.2)!important;
}
.hero-official-logo img{
  filter:drop-shadow(0 10px 22px rgba(151,115,29,.18))!important;
}

/* Dark green login popup text */
.login-dialog,
.login-dialog h2,
.login-dialog p,
.login-dialog label,
.login-dialog span,
.login-dialog .login-hint,
.login-dialog .login-divider,
.login-dialog .text-btn,
.login-dialog .jr-close,
.login-dialog .google-login-btn,
.login-dialog .google-login-wrap,
.login-dialog .bi,
.login-dialog .bi > [lang],
.login-dialog .vn-bi,
.login-dialog .vn-bi > [lang]{
  color:#0B5B49!important;
}
.login-dialog{
  background:#f8fffc!important;
  border-color:#bfe2d4!important;
  box-shadow:0 25px 80px rgba(10,52,42,.22)!important;
}
.login-dialog input{
  border-color:#b8d9ce!important;
  color:#0B5B49!important;
  background:#fff!important;
}
.login-dialog input::placeholder{color:#6b8f84!important}
.login-dialog input:focus-visible{outline:3px solid #f1c35c!important}
.login-dialog .login-demo-note{
  background:#effaf5!important;
  color:#0B5B49!important;
}
.login-dialog .login-divider:before,
.login-dialog .login-divider:after{
  background:#dceee7!important;
}
.login-dialog .google-login-btn{
  border-color:#bfd8cf!important;
  background:#fff!important;
  box-shadow:0 4px 14px rgba(11,91,73,.08)!important;
}
.login-dialog .google-login-btn:hover{
  border-color:#159B72!important;
  background:#f8fffc!important;
}
.login-dialog .login-submit{
  background:linear-gradient(135deg,#0f7b67,#18a17f)!important;
  color:#fff!important;
}
.login-dialog .login-submit *,
.login-dialog .login-submit .bi > [lang]{
  color:#fff!important;
}

/* Mobile heading stay in one line */
@media (max-width:650px){
  #baitunnahwi-title,
  .journey-hero .hero-copy h1{
    white-space:nowrap!important;
    font-size:clamp(2.45rem,9.2vw,3.95rem)!important;
    line-height:1.02!important;
    letter-spacing:-.035em!important;
  }
}

/* ===== Final UI fixes: knock icon, gold-only logo shine, official Google G ===== */
.hero-official-logo{box-shadow:0 16px 34px rgba(108,79,10,.14), inset 0 0 0 1px rgba(240,193,76,.30)!important}
.hero-official-logo:before{
  background:linear-gradient(90deg,transparent,rgba(255,244,211,.12),rgba(246,203,91,.98),rgba(255,246,215,.14),transparent)!important;
  animation:logoShine 4.2s ease-in-out infinite!important;
}
.hero-official-logo:after{
  box-shadow:0 0 22px rgba(244,198,74,.20),0 0 44px rgba(232,179,40,.18)!important;
}
.hero-official-logo img{filter:drop-shadow(0 10px 24px rgba(171,125,19,.18))!important}

.journey-guide-actions .hero-start,
.journey-guide-actions .btn.light{
  color:#0B5B49!important;
}
.journey-guide-actions .hero-start .bi,
.journey-guide-actions .hero-start .bi [lang],
.journey-guide-actions .btn.light .bi,
.journey-guide-actions .btn.light .bi [lang]{
  color:#0B5B49!important;
  opacity:1!important;
  text-shadow:none!important;
}
.journey-guide-actions .bn-custom-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:1.35rem!important;
  min-width:1.35rem!important;
  height:1.35rem!important;
  margin-right:.72rem!important;
  font-size:1.18rem!important;
  line-height:1!important;
}
.journey-guide-actions .hero-start > svg,
.journey-guide-actions .btn.light > svg{
  display:none!important;
}

.google-g{
  width:22px!important;
  height:22px!important;
  border-radius:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:0!important;
  color:transparent!important;
  overflow:hidden!important;
}
.google-g svg{display:block;width:20px;height:20px}

/* ===== Single icon cleanup ===== */
/* disable earlier emoji/pseudo icons so only one icon renders */
.journey-guide-actions > .btn.light:first-child::before,
.journey-guide-actions > .hero-start[aria-haspopup="dialog"]::before{
  content:none!important;
  display:none!important;
}
.journey-guide-actions .bn-custom-icon{
  margin-right:.72rem!important;
  width:1.45rem!important;
  min-width:1.45rem!important;
  height:1.45rem!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#0B5B49!important;
}
.journey-guide-actions .bn-custom-icon svg{
  width:1.4rem!important;
  height:1.4rem!important;
  display:block!important;
  fill:none!important;
  stroke:#0B5B49!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
/* keep original React icon hidden */
.journey-guide-actions > .btn.light:first-child > svg,
.journey-guide-actions > .hero-start[aria-haspopup="dialog"] > svg{
  display:none!important;
}

/* ===== REVIEWED FINAL: prevent duplicate icons and keep gold-only logo light ===== */
.journey-guide-actions > .btn.light:first-child::before,
.journey-guide-actions > .hero-start[aria-haspopup="dialog"]::before{
  content:none!important;
  display:none!important;
}
.journey-guide-actions > .btn.light:first-child > svg,
.journey-guide-actions > .hero-start[aria-haspopup="dialog"] > svg{
  display:none!important;
}
.journey-guide-actions .bn-custom-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  margin-right:.65rem!important;
  color:#0B5B49!important;
}
.journey-guide-actions .bn-custom-icon svg{
  display:block!important;
  width:22px!important;
  height:22px!important;
  fill:none!important;
  stroke:#0B5B49!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

/* Logo light: gold only, explicitly suppress old purple glow */
.hero-official-logo{
  box-shadow:0 16px 34px rgba(108,79,10,.14),inset 0 0 0 1px rgba(240,193,76,.30)!important;
}
.hero-official-logo:before{
  background:linear-gradient(90deg,transparent,rgba(255,244,211,.08),rgba(246,203,91,.98),rgba(255,244,211,.08),transparent)!important;
}
.hero-official-logo:after{
  box-shadow:0 0 20px rgba(246,203,91,.24),0 0 42px rgba(232,179,40,.18)!important;
}
.hero-official-logo img{
  filter:drop-shadow(0 10px 22px rgba(171,125,19,.16))!important;
}

/* Official Google G remains clean */
.google-g{
  background:transparent!important;
  color:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  font-size:0!important;
}
.google-g svg{display:block!important;width:20px!important;height:20px!important}