.lab .decoder{border:1px solid rgba(227,179,92,.32);border-radius:16px;background:linear-gradient(170deg,var(--bg-panel),var(--bg-1));margin:26px 0 32px;overflow:hidden;box-shadow:0 24px 70px -30px #000c}.lab .decoder .d-top{display:flex;align-items:center;gap:10px;padding:13px 20px;border-bottom:1px solid var(--hairline-soft);font-family:var(--font-mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}.lab .decoder .d-top .dots{display:flex;gap:5px;margin-right:4px}.lab .decoder .d-top .dots i{width:7px;height:7px;border-radius:50%;border:1px solid var(--hairline)}.lab .decoder .d-top .dots i:first-child{background:#e3b35c99;border-color:transparent}.lab .decoder .d-top .d-count{margin-left:auto;color:var(--ink-faint);letter-spacing:.16em}.lab .decoder .d-top .d-count b{color:var(--gold-bright);font-weight:500}.lab .lens{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px 6px}.lab .lens .chip{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--hairline);border-radius:999px;padding:7px 14px;color:var(--ink-dim);background:none;cursor:pointer;touch-action:manipulation;transition:.25s}.lab .lens .chip:hover{color:var(--gold-bright);border-color:#e3b35c80}.lab .lens .chip.on{background:var(--gold-bright);color:#221503;border-color:var(--gold-bright)}.lab .lens .chip .k{opacity:.85;margin-left:6px;font-family:var(--font-ar)}.lab .recite{font-family:var(--font-quran);direction:rtl;text-align:center;padding:clamp(22px,3.4vw,38px) clamp(16px,3vw,32px) 22px;line-height:2.35}.lab .recite .ayah{display:inline}.lab .recite .w{display:inline-block;padding:.02em .12em;border-radius:8px;cursor:pointer;color:var(--ink);font:inherit;font-size:clamp(26px,3.7vw,38px);background:none;border:none;-webkit-appearance:none;appearance:none;touch-action:manipulation;transition:color .3s,text-shadow .3s,box-shadow .3s,opacity .3s}.lab .recite .w:hover{text-shadow:0 0 26px rgba(244,214,143,.6)}.lab .recite .w.done{color:var(--ink);border-bottom:2px solid rgba(227,179,92,.5)}.lab .recite .w.sel{color:var(--ink);box-shadow:inset 0 0 0 1px var(--gold);text-shadow:0 0 26px rgba(244,214,143,.6)}.lab .recite .w.dim{opacity:.5}.lab .recite .w.dim.sel{opacity:1}.lab .recite .w.match{color:var(--ink);text-shadow:0 0 24px rgba(244,214,143,.6)}.lab .recite .ayah-no{font-family:var(--font-mono);direction:ltr;font-size:12px;color:var(--gold);border:1px solid var(--hairline);border-radius:50%;width:26px;height:26px;display:inline-grid;place-items:center;vertical-align:middle;margin:0 .3em}.lab .d-readout{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:1px;background:var(--hairline-soft);font-family:var(--font-mono);animation:d-readout-in .16s var(--ease-out) both}.lab .d-readout>div{background:var(--bg-1);padding:14px 16px;min-height:74px}.lab .d-readout .r-k{font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:5px}.lab .d-readout .r-v{font-size:12.5px;color:var(--ink);letter-spacing:.03em;line-height:1.6;overflow-wrap:break-word}.lab .d-readout .r-v .big{font-family:var(--font-ar);font-size:1.6rem;color:var(--gold-bright);direction:rtl;display:inline-block}.lab .d-readout .r-v .root{font-family:var(--font-ar);font-size:1.2rem;color:var(--ink);letter-spacing:.2em;direction:rtl}.lab .d-readout .wide{grid-column:1/-1;border-top:1px solid var(--hairline-soft)}.lab .d-readout .r-v .tag{display:inline-block;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;border-radius:5px;border:1px solid;margin-bottom:5px}.lab .tag.gen{color:var(--gold-bright);border-color:#e3b35c80}.lab .tag.acc{color:var(--copper-bright);border-color:#c98a4b80}.lab .tag.nom,.lab .tag.verb{color:var(--teal);border-color:#8fd0c280}.lab .tag.mabni{color:var(--silver);border-color:#cdd8ec66}.lab .d-empty{padding:22px 16px;text-align:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--ink-faint)}.lab .d-stage{max-height:clamp(300px,46vh,540px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--gold-deep) transparent}.lab .d-stage::-webkit-scrollbar{width:9px}.lab .d-stage::-webkit-scrollbar-track{background:transparent}.lab .d-stage::-webkit-scrollbar-thumb{background:var(--gold-deep);border-radius:8px;border:3px solid var(--bg-panel)}.lab .decoder [data-dec-panel]{border-top:1px solid rgba(227,179,92,.28);background:linear-gradient(180deg,rgba(227,179,92,.035),transparent 46%);max-height:52vh;overflow-y:auto}@keyframes d-readout-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}.lab .d-sheet{display:contents}.lab .d-handle{display:none}@media(max-width:640px){.lab .d-stage{max-height:none;overflow:visible;overscroll-behavior:auto}.lab .decoder{overflow:visible;padding-bottom:52px}.lab .d-sheet{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:50;max-height:58vh;background:linear-gradient(180deg,var(--bg-panel),var(--bg-1));border-top:1px solid rgba(227,179,92,.4);border-radius:20px 20px 0 0;box-shadow:0 -26px 64px -22px #000000eb;transform:translateY(100%);transition:transform .34s cubic-bezier(.32,.72,0,1)}.lab .decoder.sheet-in .d-sheet{transform:translateY(calc(100% - 46px))}.lab .decoder.sheet-in.sheet-open .d-sheet{transform:translateY(0)}.lab .d-handle{display:block;flex:none;position:relative;width:100%;height:44px;padding:0;background:none;border:0;-webkit-appearance:none;appearance:none;cursor:pointer}.lab .d-handle:before{content:"";position:absolute;top:10px;left:50%;transform:translate(-50%);width:40px;height:4px;border-radius:3px;background:var(--hairline);transition:background .2s}.lab .d-handle:hover:before,.lab .decoder.sheet-in.sheet-open .d-handle:before{background:var(--gold-deep)}.lab .decoder [data-dec-panel]{position:static;flex:1;min-height:0;max-height:none;overflow-y:auto;border-top:none;background:none;border-radius:0;-webkit-overflow-scrolling:touch}.lab .d-readout{grid-template-columns:1fr}.lab .d-readout>div{min-height:0;padding:10px 15px}.lab .d-readout .r-v{line-height:1.45}.lab .d-empty{padding-bottom:24px}}@media(max-width:640px)and (prefers-reduced-motion:reduce){.lab .d-sheet{transition:none}}html:not(.js) .lab .lens,html:not(.js) .lab .d-readout,html:not(.js) .lab .d-empty,html:not(.js) .lab .decoder [data-dec-panel]{display:none}html:not(.js) .lab .d-stage{max-height:none;overflow:visible}html:not(.js) .lab .recite .w{cursor:text}@media(prefers-reduced-motion:reduce){.lab .recite .w,.lab .lens .chip{transition:none}.lab .d-readout{animation:none}}
