/* the shell lives only inside Root Search; every rule is under body.qp-roottab64 */
body.qp-roottab64 #qprs-bar{max-width:960px;margin:0 auto 14px;display:flex;gap:8px}
body.qp-roottab64 #qprs-bar.qprs-hide{display:none}
body.qp-roottab64 .qprs-mode{flex:1;appearance:none;cursor:pointer;font:inherit;font-size:14px;
  font-weight:600;background:transparent;color:var(--qprs-dim,#6b8196);
  border:1px solid var(--qprs-line,#dbe4ea);border-radius:11px;padding:.72em .5em;
  display:flex;align-items:center;justify-content:center;gap:.5em}
body.qp-roottab64 .qprs-mode[aria-pressed="true"]{
  background:var(--qprs-soft,#e7f5f6);border-color:var(--qprs-teal,#0f8a90);color:var(--qprs-teal,#0f8a90)}
body.qp-roottab64 .qprs-mode .qprs-ar{font-size:15px}

#qprs-wiz{max-width:960px;margin:0 auto;padding:26px 2px 10px}
#qprs-wiz h2{margin:0 0 6px;font-size:21px;font-weight:700;text-align:center}
#qprs-wiz .qprs-lead{margin:0 auto 18px;font-size:13.5px;line-height:1.55;text-align:center;
  max-width:62ch;color:var(--qprs-dim,#6b8196)}
#qprs-wiz .qprs-cards{display:flex;gap:12px}
#qprs-wiz .qprs-card{flex:1;cursor:pointer;border:1px solid var(--qprs-line,#dbe4ea);
  border-radius:13px;padding:18px 16px;display:flex;flex-direction:column;gap:9px;text-align:left}
#qprs-wiz .qprs-card:hover{border-color:var(--qprs-teal,#0f8a90);background:var(--qprs-soft,#e7f5f6)}
#qprs-wiz .qprs-card h3{margin:2px 0 0;font-size:16.5px;font-weight:700}
#qprs-wiz .qprs-card p{margin:0;font-size:13px;line-height:1.5;color:var(--qprs-dim,#6b8196)}
#qprs-wiz .qprs-pick{margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;
  color:var(--qprs-teal,#0f8a90)}
#qprs-wiz .qprs-foot{text-align:center;font-size:12px;margin-top:16px;color:var(--qprs-dim,#6b8196)}
@media (max-width:820px){ #qprs-wiz .qprs-cards{flex-direction:column} }

#qprs-know{max-width:960px;margin:0 auto;text-align:center;padding:34px 6px 10px}
#qprs-know .qprs-do{margin:0 auto 20px;max-width:76ch;font-size:15px;line-height:1.55;
  font-weight:600}

/* The caret only exists while the line is being typed, and is removed with the
   class - a blinking bar left on a finished sentence reads as a stuck cursor. */
.qprs-blead.is-typing::after,
#qprs-know .qprs-do.is-typing::after{content:'';display:inline-block;width:2px;height:1em;
  margin-left:2px;vertical-align:-2px;background:var(--qprs-teal,#0f8a90);
  animation:qprsCaret .7s steps(1) infinite}
@keyframes qprsCaret{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .qprs-blead.is-typing::after,
  #qprs-know .qprs-do.is-typing::after{animation:none}
}
#qprs-know p{margin:0 auto;max-width:44ch;font-size:13.5px;line-height:1.55;color:var(--qprs-dim,#6b8196)}
#qprs-know .qprs-egs{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.qprs-cross{margin:26px auto 4px;text-align:center;font-size:13px;line-height:1.6;
  color:var(--qprs-dim,#6b8196)}
.qprs-cross a{color:var(--qprs-teal,#0f8a90);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.qprs-cross a:hover{text-decoration-thickness:2px}
#qp-ar-wrap56 > .qprs-cross, #qp-ar-mwrap78 > .qprs-cross{flex:0 0 auto;
  margin:6px auto 2px;padding:0 8px}
.qp-rootchrome20 > .qprs-cross{flex:0 0 auto;margin:2px auto 12px;padding:0 8px}
body.qp-roottab64 .topbar{margin-top:0}
.qprs-blead{font:400 14.5px/1.55 system-ui,-apple-system,sans-serif;text-align:center;
  color:var(--qprs-dim,#6b8196);margin:2px auto 16px;max-width:77ch;padding:0 12px}
body.qp-roottab64 .leftScroll{max-height:none !important;overflow:visible !important;
  -webkit-mask-image:none !important;mask-image:none !important}
body.qp-roottab64 .topbar{position:sticky;top:0;z-index:40;background:var(--panel)}
body.qp-roottab64:not(.qp-rootlab56) #results{padding-bottom:96px}
.qprs-mute03{display:none !important}
/* THE SEARCH TOOLS FOLD AWAY ONCE THE SEARCH IS OVER. Height, opacity and margin all go, so the
   answer moves up rather than sitting under a gap where the grid used to be. */
body.qprs-found22 #qp-mr78-row,
body.qprs-found22 .qprs-crossrow{
  max-height:0 !important; opacity:0 !important; overflow:hidden !important;
  margin-top:0 !important; margin-bottom:0 !important; padding-top:0 !important;
  padding-bottom:0 !important; pointer-events:none !important;
  transition:max-height .34s cubic-bezier(.22,.61,.36,1), opacity .24s ease,
             margin .34s ease, padding .34s ease; }
body.qprs-found22 .qp-mr78-hint22{ display:none !important; }
@media (prefers-reduced-motion: reduce){
  body.qprs-found22 #qp-mr78-row,
  body.qprs-found22 .qprs-crossrow{ transition:none; }
}
#qprs-wiz{ margin-top:-37px; }

#qprs-know{ margin-top:-33px; }
.qprs-what04{ text-align:right; }
/* _3823: the heading row and every rule that styled the dismiss are gone with the controls they
   dressed. DEAD CSS IS A DESCRIPTION OF SOMETHING THAT NO LONGER EXISTS, and the next person to
   read it will look for the element. */
/* _3820 - his two mobile rules. HIS FIRST ONE ARRIVED WITHOUT ITS LEADING DOT AGAIN, so it would
   have matched an element named qprs-blead, of which there are none. */
@media (max-width:767.98px){
  .qprs-blead{ text-align:left; }
  
  .qp-mr78-cell-t{ font-size:12.5px; margin-top:10px; font-family:monospace; }
}
/* THE ENGLISH LINK SITS BESIDE THE INSTRUCTION, pulled up so it shares the line's whitespace
   rather than asking for a line of its own. *//* BACK AND CLEAR ON ONE LINE EACH. They were as tall as two rows of letters for two words. */
#qp-mr78-row ~ * .qp-mr78-back, #qp-mr78-row ~ * .qp-mr78-clear,
.qp-mr78 .qp-mr78-back, .qp-mr78 .qp-mr78-clear,
button.qp-mr78-back, button.qp-mr78-clear{
  display:inline-flex !important; align-items:center !important; gap:7px !important;
  flex-direction:row !important; padding:8px 14px !important; height:auto !important; }
/* ==[ _3820 (MHK): THE SHEET GETS A PROPER BACKDROP AND ONE CLOSE ]======================
   The page behind was fully legible, so the eye had two things to read. DIMMING IS WHAT BRINGS
   THE SHEET FORWARD; the blur only softens what is left, and too much of it turns the backdrop
   into a texture that draws attention of its own.
   And one exit instead of three: the back arrow, the burger and the purple cross were a toolbar
   on something that needs a way out. */
@media (max-width:767.98px){
  #big-iframe-overlay.qp-bsheet19::before{ content:''; position:fixed; inset:0; z-index:-1;
    background:rgba(8,12,20,.46); backdrop-filter:blur(3px) saturate(108%);
    -webkit-backdrop-filter:blur(3px) saturate(108%); pointer-events:none; }
  .qp-bsheet19-x20{ position:absolute; top:9px; right:12px; z-index:8; width:30px; height:30px;
    border:0; border-radius:999px; cursor:pointer; display:grid; place-items:center;
    background:rgba(125,145,165,.26); color:#3a4a58; font:600 16px/1 system-ui,sans-serif;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
  .qp-bsheet19-x20:hover{ background:rgba(125,145,165,.38); }
}
@media (max-width:767.98px){
  /* THE STRIP OF PAGE LEFT SHOWING IS THE WHOLE TRICK - it says the thing underneath is still
     there and you are on top of it, not somewhere else. */
  #big-iframe-overlay.qp-bsheet19{ top:46px !important; border-radius:20px 20px 0 0 !important;
    overflow:hidden !important; box-shadow:0 -10px 40px rgba(0,0,0,.30) !important;
    transition:transform .26s cubic-bezier(.22,.61,.36,1); }
  #big-iframe-overlay.qp-bsheet19.is-dragging19{ transition:none; }
  .qp-bsheet19-grab{ position:relative; z-index:5; height:26px; display:flex;
    align-items:center; justify-content:center; cursor:grab;
    touch-action:none; -webkit-user-select:none; user-select:none; flex:0 0 auto; }
  .qp-bsheet19-grab span{ display:block; width:40px; height:5px; border-radius:999px;
    background:rgba(125,145,165,.55); }
  .qp-bsheet19-grab:active{ cursor:grabbing; }
}
@media (max-width:767.98px){
  .qprs-what04{ margin-bottom:-19px; }
  #results .qprs-ra-card .qprs-ra-m{ font-size:14.5px; }
  #results .qprs-ra-card .qprs-ra-ar{ font-size:23px; margin-top:8px; margin-bottom:8px;
    padding:3px; }
  /* THE DESKTOP HAS ITS CORNER LINK; THE PHONE HAD AN EMPTY SHELF WHERE ONE SHOULD BE. */
  .qprs-homelink18{ display:block; }
}
/* ==[ _3818: ONE WAY BACK, IN TWO PLACES THAT NEEDED IT ]================================
   The phone has no floating corner link, so the space beside the results heading sat empty; and
   the root answer ended with an invitation to the very tool the reader is already using. Both
   become the same link. TWO GAPS WITH ONE SHAPE ARE ONE GAP. */
.qprs-homelink18{ display:none; text-align:right; margin:0 0 6px; }
.qprs-homelink18 button{ background:transparent; border:0; padding:4px 2px; font:inherit;
  font-size:13.5px; cursor:pointer; color:var(--qprs-teal,#0f8a90); }
.qprs-homelink18 button:hover{ text-decoration:underline; }
.qprs-backhome18{ display:block; text-align:center; margin:22px 0 0; }
.qprs-backhome18 button{ background:transparent; border:0; padding:6px 4px; font:inherit;
  font-size:14px; cursor:pointer; color:var(--qprs-teal,#0f8a90); }
.qprs-backhome18 button:hover{ text-decoration:underline; }
/* 7 - the two doors, louder. Same hues, more of them. */
/* 10 - the popup: reading first, Arabic beneath it, and a close that never scrolls away. */
.qprs-wl-l{ display:block; }
.qprs-wl-tr{ display:block; font-size:15px; font-style:italic; opacity:.85; }
.qprs-wl-ar{ display:block; direction:rtl; font-size:21px; margin:2px 0 0 0 !important; }
#qprs-words81 .qprs-wl-card{ position:relative; }
#qprs-words81 .qprs-wl-x{ position:sticky; top:6px; float:right; z-index:3; }
/* ==[ _3807 (MHK): THE PHONE LAYOUT, WHICH HAD BEEN INHERITING THE DESKTOP'S ]===============
   The cards were built for a four-across grid and were being handed the full width of a phone one
   at a time. Everything followed from that: text jammed to the right with a hand's width of empty
   paper beside it, eight results to a screen, and a scroll with no end.
   A CARD SIZED FOR A COLUMN DOES NOT BECOME A ROW BY BEING GIVEN MORE WIDTH. On a phone it is a
   row, so it is laid out as one: the Arabic and its reading right-justified against the middle,
   the meaning left-justified against it - the same facing-columns idea he approved for the word
   list, so the two screens read the same way. */
@media (max-width:767.98px){
  .qprs-sugg-list{display:block}
  #results .qprs-ra-card{display:flex;align-items:baseline;gap:14px;width:auto;max-width:none;
    min-width:0;margin:0 0 8px;padding:11px 14px;border-radius:12px;text-align:inherit;
    scroll-snap-align:none}
  #results .qprs-ra-card .qprs-ra-w{flex:1 1 50%;min-width:0;text-align:right;font-size:15.5px;
    line-height:1.4}
  #results .qprs-ra-card .qprs-ra-ar{font-size:16px}
  #results .qprs-ra-card .qprs-ra-w i{font-size:15.5px}
  #results .qprs-ra-card .qprs-ra-m{flex:1 1 50%;min-width:0;margin-top:0;text-align:left;
    font-size:12.5px;line-height:1.4}
  /* THE LEAD SENTENCES WERE TAKING A THIRD OF THE SCREEN before a single result. They say the same
     thing in less room now, and the second one goes entirely once the reader is clearly already
     typing - it is an instruction for the first keystroke, not for every one after it. */
  .qprs-ra-lead{font-size:14px;line-height:1.4;margin:0 0 4px}
  /* THE TWO DOORS ARE ONE STACK, EQUAL WIDTH. Two centred pills of different lengths read as a
     mistake; the same two at one width read as a pair. */
  .qprs-ra-acts{flex-direction:column;align-items:stretch;gap:9px;margin-top:16px}
  .qprs-ra-more,.qprs-ra-use{width:100%;padding:.75em 1em;font-size:14px}
  /* The root answer, tightened: the big root keeps its size because it is the answer, everything
     around it gives way to it. */
  .qprs-rootans{padding-left:2px;padding-right:2px}
  .qprs-ra-lead+.qprs-rootcard{margin-top:10px}
  .qprs-rc-m{font-size:14px;line-height:1.5;max-width:34ch;margin-left:auto;margin-right:auto}
  .qprs-blead{font-size:14.5px;line-height:1.5}
  .qprs-crossrow{font-size:13.5px}
  /* NOTHING SHOULD END BEHIND THE TAB BAR. The last card was being cut off by it, which reads as
     the list having failed rather than having finished. */
  body.qp-roottab64 #results{padding-bottom:120px}
}
#qprs-learn05{position:fixed;inset:0;z-index:200600;display:flex;flex-direction:column;
  background:var(--qprs-bg,#fbfbf8)}
.qprs-l05-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 18px;border-bottom:1px solid var(--qprs-line,#dbe4ea);
  background:var(--qprs-bg,#fbfbf8)}
.qprs-l05-head span{font-size:16px;font-weight:700;color:var(--qprs-teal,#0f8a90)}
.qprs-l05-x{width:38px;height:38px;border:0;border-radius:999px;cursor:pointer;font-size:20px;
  line-height:1;background:rgba(125,145,165,.14);color:inherit}
.qprs-l05-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:20px 18px 56px}
.qprs-l05-hero,.qprs-l05-toc,.qprs-l05-sec{max-width:720px;margin:0 auto 16px;
  border-radius:16px;padding:22px 22px 20px;background:var(--qprs-panel,#fff);
  border:1px solid var(--qprs-line,#dbe4ea)}
.qprs-l05-hero{background:linear-gradient(160deg,#fdfbf4,#f4f7f2)}
body:not(.qp-theme-light) .qprs-l05-hero{background:linear-gradient(160deg,#16232e,#132420)}
.qprs-l05-tag{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.1em;
  padding:5px 11px;border-radius:999px;background:rgba(15,138,144,.14);
  color:var(--qprs-teal,#0f8a90);margin:0 0 12px}
.qprs-l05-hero h2{margin:0 0 10px;font-size:25px;font-weight:700;letter-spacing:-.02em}
.qprs-l05-hero p{margin:0;font-size:15.5px;line-height:1.6;color:var(--qprs-dim,#6b8196)}
.qprs-l05-toc h4{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--qprs-teal,#0f8a90)}
.qprs-l05-toc ol{margin:0;padding-left:22px}
.qprs-l05-toc li{margin:0 0 7px;font-size:14.5px}
.qprs-l05-toc a{color:inherit;text-decoration:none}
.qprs-l05-toc a:hover{text-decoration:underline}
.qprs-l05-kicker{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#b07d2b;margin:0 0 8px}
.qprs-l05-sec h3{margin:0 0 12px;font-size:20px;font-weight:700;letter-spacing:-.02em}
.qprs-l05-sec p{margin:0 0 12px;font-size:15.5px;line-height:1.7}
.qprs-l05-sec p:last-child{margin-bottom:0}
/* ==[ _3823 (MHK): ONE STATE, ONE SWITCH ]==============================================
   Closed by default everywhere, opened by the link, closed by the cross. That is the whole
   behaviour now, and it is the same on a phone and a desktop.
   FOUR MECHANISMS BECOME ONE. The panel used to be open on desktop and closed on mobile, with a
   remembered dismissal that folded the desktop into the mobile shape, and a rule that hid the
   dismissal in the cases where it made no sense. Every one of those existed to manage a default
   that has now gone. A DEFAULT NOBODY ASKED FOR IS THE PARENT OF EVERY EXCEPTION THAT FOLLOWS IT.
   .is-min07, .qprs-what04-off and the qpRootWhat07 preference are all removed rather than left
   inert. */
.qprs-what04{position:relative;margin:0 0 22px;text-align:center}
.qprs-what04-link{background:transparent;border:0;font:inherit;font-size:14.5px;cursor:pointer;
  color:var(--qprs-teal,#0f8a90);text-decoration:underline;text-underline-offset:3px;padding:6px}
.qprs-what04-body{display:none}
.qprs-what04.is-open05 .qprs-what04-body{display:block;text-align:left;margin-top:12px;
  padding:18px 44px 16px 18px;border-radius:14px;background:var(--qprs-soft,#e7f5f6)}
.qprs-what04.is-open05 .qprs-what04-mark{display:none}
.qprs-what04-more{margin-top:12px;background:transparent;border:0;font:inherit;font-size:14px;
  font-weight:600;cursor:pointer;color:var(--qprs-teal,#0f8a90);padding:0}
/* THE CROSS SITS ON THE TEXT, NOT ON THE PANEL, because the text is what it closes and the
   padding above reserves its corner so no sentence ever runs underneath it. */
.qprs-what04-x{position:absolute;top:-4px;right:-28px;width:26px;height:26px;border:0;
  border-radius:999px;cursor:pointer;display:grid;place-items:center;font:600 15px/1 inherit;
  background:rgba(125,145,165,.18);color:var(--qprs-dim,#6b8196)}
.qprs-what04-x:hover{background:rgba(125,145,165,.30);color:var(--qprs-ink,#0f2233)}
@media (min-width:768px){
  .qprs-what04-x{right:-6px;top:-6px}
}
  .qprs-what04-orn{position:absolute;inset:0;pointer-events:none;opacity:.5;
    background:radial-gradient(circle at 4% 50%, rgba(15,138,144,.16), rgba(15,138,144,0) 16%),
               radial-gradient(circle at 96% 50%, rgba(15,138,144,.16), rgba(15,138,144,0) 16%)}
  .qprs-what04-mark{position:relative;flex:0 0 auto;width:118px;text-align:center;
    color:var(--qprs-teal,#0f8a90)}
  .qprs-what04-ar{font-size:20px;line-height:1.2;margin:0 0 6px;direction:rtl;
    color:var(--qprs-ink,#0f2233)}
  .qprs-what04-mark svg{width:86px;height:auto;display:block;margin:0 auto}
  .qprs-leaf04{fill:currentColor;fill-opacity:.16}
  .qprs-what04-txt{position:relative;flex:1 1 auto;min-width:0}
  .qprs-what04-txt h3{margin:0 0 8px;font-size:21px;font-weight:700;letter-spacing:-.02em;
    color:var(--qprs-ink,#0f2233)}
  
  .qprs-what04-txt p{margin:0;font-size:15px;line-height:1.6;max-width:95ch;
    color:var(--qprs-dim,#6b8196)}
  
  .qprs-what04-txt p + p{ margin-top:11px; }
.qprs-crossrow{margin:6px 0 0;text-align:center}
/* AN EMPTY BOX STILL OCCUPIES ITS PADDING. When the builder is down to its last root the results
   area can be left holding nothing but its own spacing, which reads as a hole in the page. */
body.qp-roottab64 .qp-mr78-res:empty{display:none !important;padding:0 !important;margin:0 !important}
body.qp-roottab64 #qp-mr78-row:empty{display:none !important;margin:0 !important}

/* ==[ _3811 (MHK): HIS OWN MEASUREMENTS FOR THE READING HEADER ]===========================
   Handed to me as finished CSS off a live page, so they are applied as given rather than
   reasoned about - HE HAS THE SCREEN IN FRONT OF HIM AND I HAVE A HARNESS THAT CANNOT SEE
   OPTICAL CENTRES.
   TWO DEPARTURES, BOTH DELIBERATE. His chevron rule was written 'vv-surah-chevron {' with no
   leading dot, which is a type selector for an element that does not exist and would have done
   nothing at all - it is a class here. And each rule is scoped inside the reading header, because
   .qp-help-img61 and .vv-title are not unique to it and a bare rule would have reached into
   screens he was not looking at. A MEASUREMENT TAKEN ON ONE SCREEN SHOULD BE APPLIED TO THAT
   SCREEN. */
#verse-viewer-host .vv-head .vv-title-area{ margin-top:-19px; }
#verse-viewer-host .vv-head-single{ padding-top:18px; }
#verse-viewer-host .vv-head-clean .vv-title{ margin-top:19px; }   
#verse-viewer-host .vv-surah-chevron{ margin-left:-5px !important; margin-top:22px !important; }   
/* THE BISMILLAH LEAVES THE READING HEADER ENTIRELY. It was shrunk at _3791 and hidden on phones
   to make room for the controls; he now wants it gone at every width, so the two breakpoint rules
   go with it rather than sitting there describing sizes for something that is never drawn. A RULE
   THAT CAN NEVER APPLY IS A RULE SOMEBODY WILL LATER TRY TO UNDERSTAND. */
#verse-viewer-host .vv-head-row .vv-head-bismi{ display:none !important; }
.qprs-sugg-list{display:grid;grid-template-columns:1fr;gap:10px;max-width:560px;margin:16px auto 0}
@media (min-width:820px){
  .qprs-sugg-list{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));max-width:960px}
}
.qprs-sugg-more{font:400 12.5px/1.5 system-ui,-apple-system,sans-serif;margin:14px auto 0;
  color:var(--qprs-dim,#6b8196);opacity:.85}
#qprs-words81{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;
  justify-content:center;background:rgba(8,20,28,.55);padding:18px}
.qprs-wl-card{position:relative;max-width:520px;width:100%;max-height:84vh;overflow:auto;
  background:var(--panel,#fff);border-radius:18px;padding:22px 20px 18px}
.qprs-wl-card h3{margin:0 0 14px;font:600 16px/1.3 system-ui,-apple-system,sans-serif}
.qprs-wl-root{font-size:21px;letter-spacing:.1em;color:var(--qprs-teal,#0f8a90)}
.qprs-wl-x{position:absolute;top:10px;right:12px;border:0;background:none;cursor:pointer;
  font-size:20px;line-height:1;opacity:.55}
.qprs-wl-list{margin:0;padding:0 0 0 26px}
.qprs-wl-list li{margin:0 0 11px;line-height:1.45}
.qprs-wl-ar{font-size:19px;direction:rtl;display:inline-block;margin-left:9px}
.qprs-wl-tr{font-size:13px;font-style:italic;opacity:.8;margin-left:9px}
.qprs-wl-list li{display:flex;align-items:baseline;gap:18px;margin:0 0 11px}
.qprs-wl-l{flex:1 1 0;min-width:0;text-align:right}
.qprs-wl-r{flex:1 1 0;min-width:0;text-align:left;font-size:12.5px;line-height:1.45;
  color:var(--qprs-dim,#6b8196)}
.qprs-wl-ar{font-size:19px;direction:rtl;display:inline-block;margin-left:0;margin-right:9px}
.qprs-wl-tr{font-size:13px;font-style:italic;opacity:.8;margin-left:0}
.qprs-wl-en{display:none}
.qprs-wl-means{margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--qprs-line,#dbe4ea)}
.qprs-wl-means h4{margin:0 0 9px;font:700 13px/1 system-ui,-apple-system,sans-serif;
  letter-spacing:.02em}
.qprs-wl-mrow{display:flex;flex-wrap:wrap;gap:7px 16px}
.qprs-wl-m{font-size:13.5px;color:var(--qprs-teal,#0f8a90)}
.qprs-wl-m sup{font-size:10px;opacity:.65;margin-left:3px}
body.qp-roottab64 .qp-mr78-res{ display:grid; grid-template-columns:1fr; gap:12px;
  align-content:start; }
@media (min-width:820px){
  body.qp-roottab64 .qp-mr78-res{ grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); }
}
body.qp-roottab64 .qp-mr78-res > :not(.qp-mr78-root){ grid-column:1 / -1; }
.qprs-rc-found{ font:700 11.5px/1 system-ui,-apple-system,sans-serif; letter-spacing:.24em;
  text-transform:uppercase; text-align:center; opacity:.5; padding:10px 0 2px; }
.qprs-rootcard{ flex-direction:column !important; align-items:center !important;
  justify-content:center; gap:4px; padding:20px 14px 15px !important;
  border-radius:18px !important; text-align:center; }
.qprs-rootcard .qp-mr78-root-ar{ flex:0 0 auto !important; text-align:center !important;
  padding-right:0 !important; font-size:36px !important; line-height:1.35 !important;
  letter-spacing:.12em; direction:rtl; }
.qprs-rootcard .qp-mr78-root-tr{ flex:0 0 auto !important; text-align:center !important;
  padding-left:0 !important; border-left:none !important; padding-top:20px;
  font-size:15px !important; font-family:monospace; font-weight:600;
  letter-spacing:.07em; opacity:.95; }
.qprs-rc-m{ font:400 12.5px/1.5 system-ui,-apple-system,sans-serif; opacity:.72;
  direction:ltr; max-width:24ch; }
.qprs-rc-c{ font:600 10.5px/1 system-ui,-apple-system,sans-serif; letter-spacing:.12em;
  text-transform:uppercase; opacity:.45; margin-top:4px; }
.qprs-ra-more.is-open{border-color:var(--qprs-teal,#0f8a90);color:var(--qprs-teal,#0f8a90)}
#vocab-search-section-list .qprs-rootans{max-width:960px;margin:18px auto 0;text-align:center;
  color:var(--qprs-ink,#0f2233)}
.qprs-ra-lead{font-size:13px;color:var(--qprs-dim,#6b8196);margin-bottom:10px}
.qprs-ra-root{display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  background:transparent;border:none;cursor:pointer;padding:4px 10px}
.qprs-ra-ar{font-size:46px;line-height:1.3;letter-spacing:.16em;direction:rtl;
  color:var(--qprs-teal,#0f8a90)}
.qprs-ra-tr{font-size:15px;color:var(--qprs-dim,#6b8196)}
.qprs-ra-via{font-size:13.5px;line-height:1.6;margin:8px auto 0;max-width:52ch;
  color:var(--qprs-dim,#6b8196)}
.qprs-ra-via b{font-weight:600;color:var(--qprs-ink,#0f2233)}
.qprs-ra-acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:18px 0 0}
/* ==[ _3815 (MHK): TWO DOORS THAT LOOK LIKE DOORS ]=======================================
   They were two outlined pills in the dim text colour, which is the styling of something you may
   ignore. They are the only two things to do on this screen. GIVEN THE SAME WEIGHT, TWO CHOICES
   READ AS ONE DECISION DEFERRED; given different colours they read as two different questions.
   Teal for the words of the root, amber for where it is used - filled, bordered in the same hue,
   and written in a darker shade of it so the text carries its own contrast rather than relying on
   the fill. Each has its own dark-theme value; NOT ONE PALETTE DIMMED, which is how a tint that
   works on white turns to mud on black. */
.qprs-ra-more,.qprs-ra-use{margin:0;border-radius:999px;padding:.6em 1.2em;font:inherit;
  font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background .14s ease,border-color .14s ease,transform .14s ease}
.qprs-ra-more:hover,.qprs-ra-use:hover{transform:translateY(-1px)}
.qprs-ra-more{background:rgba(15,138,144,.12);border:1px solid rgba(15,138,144,.38);color:#0a6f74}
.qprs-ra-more:hover{background:rgba(15,138,144,.20)}
.qprs-ra-use{background:rgba(191,132,26,.13);border:1px solid rgba(191,132,26,.40);color:#8a5e0c}
.qprs-ra-use:hover{background:rgba(191,132,26,.22)}
body:not(.qp-theme-light) .qprs-ra-more{background:rgba(90,214,205,.14);
  border-color:rgba(90,214,205,.34);color:#7fe3da}
body:not(.qp-theme-light) .qprs-ra-more:hover{background:rgba(90,214,205,.24)}
body:not(.qp-theme-light) .qprs-ra-use{background:rgba(232,180,74,.14);
  border-color:rgba(232,180,74,.34);color:#f0c368}
body:not(.qp-theme-light) .qprs-ra-use:hover{background:rgba(232,180,74,.24)}
.qprs-ra-more:hover{border-color:var(--qprs-teal,#0f8a90);color:var(--qprs-teal,#0f8a90)}
.qprs-ra-more.is-open .qprs-ra-caret{display:inline-block;transform:rotate(180deg)}
.qprs-ra-strip{display:flex;gap:10px;overflow-x:auto;padding:14px 2px 6px;margin-top:6px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.qprs-ra-card{position:relative;flex:0 0 auto;min-width:150px;max-width:230px;text-align:right;
  border:1px solid var(--qprs-line,#dbe4ea);border-radius:12px;padding:11px 12px 8px;
  cursor:pointer;scroll-snap-align:start}
.qprs-ra-card:hover{border-color:var(--qprs-teal,#0f8a90)}
.qprs-ra-w{font-size:16px;line-height:1.45;direction:ltr}
/* NOWRAP IS A TRADE AND IT IS THE RIGHT ONE HERE: a reading too long for the card is trimmed with
   an ellipsis rather than folded in half, and the full text is on the element's title so it is
   never actually lost. TRIMMED IS RECOGNISABLE; HALVED IS NOT. */
.qprs-ra-w i{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qprs-ra-ar{display:block;direction:rtl;margin-top:3px;font-size:17px}
.qprs-ra-w i{font-size:17px;font-style:normal;color:#b0297f;}
/* ==[ _3817 (MHK): HIS COLOURS, ONE PAIR PER THEME ]=====================================
   The reading and the letters that answered it are two levels of one thing, so they are two
   shades of one hue rather than two different colours - the lit letters lead and the rest of the
   word follows. Magenta on light, lime on dark, both his.
   NOT ONE PAIR DIMMED FOR THE OTHER THEME: a magenta that reads on white goes muddy on black, and
   these two families are chosen for their own backgrounds. */
body.qp-theme-light .qprs-ra-w i{color:#b0297f}
body.qp-theme-light .qprs-hl99{color:#e90595}
body:not(.qp-theme-light) .qprs-ra-w i{color:#7ca239}
body:not(.qp-theme-light) .qprs-hl99{color:#97e905}
#qprs-know .qprs-do{margin-top:26px}
.qprs-ra-ar{font-size:27px}
.qprs-dbg99{position:absolute;top:4px;left:6px;z-index:2;border:1px solid rgba(220,38,38,.45);
  background:rgba(220,38,38,.10);color:#dc2626;border-radius:6px;padding:1px 5px;font:700 10px/1.4
  ui-monospace,Menlo,monospace;cursor:pointer}
.qprs-dbg99:hover{background:rgba(220,38,38,.20)}
.qprs-hl99{font-weight:800;font-style:inherit;color:inherit}
.qprs-hl99.is-run{text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1.5px}
.qprs-ra-w i.qprs-old99{font-size:13px;font-style:italic;color:var(--qprs-dim,#6b8196)}
.qprs-ra-m{font-size:12.5px;line-height:1.5;margin-top:3px;direction:ltr;text-align:right;
  color:var(--qprs-dim,#6b8196)}
.qprs-ra-go{position:static;width:100%;height:auto;margin-top:9px;padding:6px 0 0;
  display:flex;align-items:center;justify-content:flex-end;gap:6px;cursor:pointer;
  background:transparent;border:0;border-top:1px solid var(--qprs-line,#dbe4ea);color:#16a34a}
.qprs-ra-golbl{font:600 10px/1 system-ui,-apple-system,sans-serif;letter-spacing:.12em;
  text-transform:uppercase;opacity:.6}
.qprs-ra-card.is-pick{min-width:0;max-width:none;width:100%}
.qprs-ra-go:hover{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.45)}
.qprs-ra-strip{padding-right:40px;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 96px),rgba(0,0,0,0.06));
          mask-image:linear-gradient(to right,#000 calc(100% - 96px),rgba(0,0,0,0.06))}
.qprs-ra-strip.is-end{padding-right:2px;-webkit-mask-image:none;mask-image:none}
.qprs-ra-strip::-webkit-scrollbar{height:0;width:0}
.qprs-ra-strip{scrollbar-width:none}
#results #vocab-search-section ~ #vocab-search-section{display:none !important}

body.qp-roottab64 #qp-rootshead59 .qp-rh59-cap{cursor:pointer}
body.qp-roottab64 #qp-rootshead59 .qp-rh59-cap:hover{opacity:.75}
#qprs-know .qprs-eg{appearance:none;cursor:pointer;font:inherit;font-size:13px;
  border:1px solid var(--qprs-line,#dbe4ea);border-radius:999px;padding:.42em .95em;background:transparent}
#qprs-know .qprs-eg:hover{border-color:var(--qprs-teal,#0f8a90);color:var(--qprs-teal,#0f8a90)}


/* the word card is two DESTINATIONS, so it is labelled as two */
body.qp-roottab64 .vr-balanced70 .vr-col-word,
body.qp-roottab64 .vr-balanced70 .vr-root{position:relative;padding-top:15px!important}
body.qp-roottab64 .vr-balanced70 .vr-col-word::before{content:"Word"}
body.qp-roottab64 .vr-balanced70 .vr-root::before{content:"Root"}
body.qp-roottab64 .vr-balanced70 .vr-col-word::before,
body.qp-roottab64 .vr-balanced70 .vr-root::before{
  position:absolute;top:2px;left:0;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:700;opacity:.6}



@media (max-width:767.98px){
  body:not(.qp-theme-light) .qp-bsheet19-x20{ color:#a0b6ca; }
}