/* a quiz's own page (quiz-host.js; build.py quiz_page): the landing, the start dialog, and with ?host the projector, a
   1920×1080 board scaled to the window. Colours and fonts from the quiz's theme (--q-*, --t0…3 and --ti0…3 for the four
   tiles, set by build.py from the chapter's look). The board is read from the back of the class: the question at least
   60 px, the tiles at least 44 px, nothing under 32 px. Solid colours only, no blur behind anything (the site's rule). */
:root{--q-bg:#1f3b63;--q-bgink:#fffcf3;--q-gold:#f1dfb0;--q-paper:#f5ebd6;--q-card:#fffcf3;--q-ink:#2b2622;--q-muted:#5d3c23;--q-acc:#a8322b;--q-acc2:#1f3b63;--q-rule:#d5c29a;
  --q-head:Heebo,Arial,sans-serif;--q-body:Heebo,Arial,sans-serif;--q-ok:#1d7a4b;--q-no:#b23a2f;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body.qz{background:var(--q-bg);color:var(--q-ink);font:400 17px/1.5 var(--q-body);-webkit-text-size-adjust:100%}
body.qzhost{overflow:hidden;height:100vh}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--q-gold);outline-offset:2px}
.qns{color:var(--q-bgink);padding:24px}

/* ---------- the landing ---------- */
.qzland{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px 16px 40px}
.qzback{align-self:center;width:min(720px,100%);color:var(--q-bgink);font-weight:700;font-size:15px;text-decoration:none;opacity:.9}
.qzback:hover{text-decoration:underline}
.qzcard{width:min(720px,100%);background:var(--q-paper);border-radius:18px;border-top:10px solid var(--q-acc);padding:30px 32px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.qzem{color:var(--q-acc);line-height:0}
.qzem svg{width:56px;height:56px}
.qzkick{margin:0;font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--q-acc)}
.qzcard h1{margin:0;font:700 clamp(32px,6vw,52px)/1.1 var(--q-head);color:var(--q-ink)}
.qzsub{margin:0;font-size:18px;color:var(--q-muted);max-width:56ch}
.qzmeta{margin:0;font-weight:700;color:var(--q-ink)}
.qzhow{margin:6px 0 0;font-size:18px;max-width:46ch}
.qzmsg{margin:4px 0;padding:10px 14px;border-radius:10px;background:var(--q-card);border:1px solid var(--q-rule);font-weight:700}
.qzmsg a,.qznote a{color:var(--q-acc)}
.qzgo{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:12px 28px;margin-top:6px;border:0;border-radius:14px;background:var(--q-acc);color:#fff;font:700 20px/1.2 var(--q-body);text-decoration:none;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.25)}
.qzgo:hover{filter:brightness(1.08)}
.qzgo:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(0,0,0,.25)}
.qznote{margin:0;font-size:14px;color:var(--q-muted)}

/* ---------- dialogs: the start, who is in ---------- */
.qzdlg{position:fixed;inset:0;z-index:50;background:rgba(8,12,22,.74);display:flex;align-items:center;justify-content:center;padding:16px;direction:rtl;font-family:var(--q-body)}
.qzbox{position:relative;width:min(480px,100%);max-height:calc(100% - 32px);overflow:auto;overscroll-behavior:contain;background:var(--q-paper);color:var(--q-ink);border-radius:14px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:10px;box-shadow:0 20px 50px rgba(0,0,0,.4);font-size:16px;line-height:1.45;text-align:right}
.qzbox.wide{width:min(720px,100%)}
.qzbox h2{margin:0;font:700 26px/1.15 var(--q-head)}
.qzbox p{margin:0}
.qzbox label{font-weight:700;font-size:14px;margin-top:4px}
.qzbox select{font:inherit;font-size:16px;padding:10px 12px;border:2px solid var(--q-rule);border-radius:10px;background:#fff;color:inherit}
.qzbox .qzbtns{display:flex;gap:10px;margin-top:6px}
.qzbox .qzgo{flex:1;margin:0;font-size:18px}
.qzbox .qzerr{min-height:1.4em;font-size:14px;font-weight:700;color:var(--q-no)}
.qzx{position:absolute;left:12px;top:12px;width:34px;height:34px;border:0;border-radius:50%;background:var(--q-card);color:var(--q-ink);font-size:16px;cursor:pointer}
.qzdlg [hidden],.qzbar[hidden]{display:none!important}
.qzopen{background:var(--q-card);border:1px solid var(--q-rule);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.qzopen button{font:inherit;font-size:14px;text-align:right;padding:8px 10px;border:1px solid var(--q-rule);border-radius:8px;background:#fff;color:var(--q-ink);cursor:pointer}
.qzlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.qzlist li{display:flex;align-items:center;gap:12px;justify-content:space-between;background:#fff;border:1px solid var(--q-rule);border-radius:10px;padding:8px 12px}
.qzlist li span{min-width:0;overflow-wrap:anywhere}
.qzlist li small{color:var(--q-muted);font-size:12px;font-weight:700}
.qzlist li.empty{justify-content:center;color:var(--q-muted)}
.qzlist button,.qzall{flex:none;font:700 13px/1 var(--q-body);padding:8px 12px;border-radius:999px;border:1.5px solid var(--q-no);background:#fff;color:var(--q-no);cursor:pointer}
.qzall{align-self:flex-start;font-size:14px;padding:10px 14px}

/* ---------- the teacher's bar: the window's top-left corner, faded out after a few quiet seconds ---------- */
.qzbar{position:fixed;top:8px;left:8px;z-index:40;max-width:calc(100% - 16px);display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;direction:rtl;padding:7px 12px;border-radius:10px;background:#0b1428;color:#e8edf8;font:500 13px/1.3 Heebo,Arial,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.35);transition:opacity .4s}
.qzbar.sleep{opacity:0}
.qzbar.sleep:hover,.qzbar.bad,.qzbar:focus-within{opacity:1}
.qzbar b{color:#f1dfb0;letter-spacing:1px}
.qzbar .qchipb{background:#f1dfb0;color:#0a1f44;font-weight:800;font-size:12px;padding:2px 10px;border-radius:999px}
.qzbar button{font:700 12px/1 Heebo,Arial,sans-serif;padding:6px 10px;border-radius:999px;border:1px solid #3b4a6e;background:#16223f;color:#e8edf8;cursor:pointer}
.qzbar button:hover{background:#22325a}
.qzbar button.go{background:#f1dfb0;border-color:#f1dfb0;color:#0a1f44;font-size:13px;padding:7px 14px}
.qzbar button[data-do="yes"]{background:#b23a2f;border-color:#b23a2f}
.qzbar .qerrb{color:#ffb4a8;font-weight:700}
.qzbar .qnoteb{color:#f1dfb0;font-weight:700}

/* ---------- the projector: 1920 × 1080, scaled to the window ---------- */
.qstage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0c0f14;overflow:hidden}
.qdeck [hidden]{display:none!important}
.qdeck{position:relative;flex:none;width:1920px;height:1080px;transform-origin:center;background:var(--q-bg);color:var(--q-ink);overflow:hidden;font-family:var(--q-body);direction:rtl}
.qwait{margin:0;position:absolute;inset:0;display:grid;place-items:center;color:var(--q-bgink);font-size:48px}
.qhead{position:absolute;top:0;left:0;right:0;height:128px;display:flex;align-items:center;gap:24px;padding:0 64px;color:var(--q-bgink)}
.qem{color:var(--q-gold);line-height:0}
.qem svg{width:64px;height:64px}
.qtitle{font:700 40px/1.1 var(--q-head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:720px}
.qprog{margin-inline-start:auto;font:700 36px/1 var(--q-body);color:var(--q-gold)}
.qpill{display:flex;align-items:center;gap:12px;padding:8px 22px;border-radius:999px;background:rgba(255,255,255,.12);color:var(--q-bgink);font:700 32px/1.2 var(--q-body)}
.qprog:empty+.qpill{margin-inline-start:auto}
.qpill i{width:16px;height:16px;border-radius:50%;background:#e04a3c;animation:qpulse 1.6s infinite}
.qboard{position:absolute;top:128px;left:48px;right:48px;bottom:48px;background:var(--q-paper);border-radius:28px;padding:36px 48px;display:flex;flex-direction:column;gap:26px;box-shadow:0 14px 40px rgba(0,0,0,.35);overflow:hidden}

/* the lobby */
.qlobby{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:56px}
.qlj{display:flex;flex-direction:column;gap:18px;min-width:0;min-height:0}
.qbig{margin:0;font:700 96px/1.05 var(--q-head);color:var(--q-ink)}
.qhow{margin:0;font-size:40px;line-height:1.3}
.qhow b{color:var(--q-acc);white-space:nowrap}
.qcls{margin:0;font-size:40px;font-weight:700;color:var(--q-muted)}
.qcount{margin:0;font-size:44px;font-weight:700;color:var(--q-acc)}
.qnames{flex:1;min-height:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:14px;overflow:hidden}
.qchip{display:inline-flex;align-items:baseline;gap:10px;font:500 40px/1.2 var(--q-body);padding:6px 24px;border:3px solid var(--q-rule);border-radius:999px;background:#fff;color:var(--q-ink)}
.qchip.new{animation:qpop .4s ease-out}
.qchip.guest{border-style:dashed}
.qchip small{font-size:32px;color:var(--q-muted);font-weight:700}
.qchip.more{background:transparent;font-weight:700}
.qnames.many{gap:10px}
.qnames.many .qchip{font-size:32px;padding:4px 18px;border-width:2px}
.qnames.many .qchip small{font-size:32px;font-weight:500}
.qlq{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
.qqr{width:440px;height:440px;padding:24px;background:#fff;border-radius:22px;border:4px solid var(--q-rule);line-height:0}
.qqr svg{width:100%;height:100%}
.qcode{margin:0;white-space:nowrap;font:700 112px/1 var(--q-body);letter-spacing:4px;color:var(--q-ink);font-variant-numeric:tabular-nums}
.qstart{font:700 48px/1 var(--q-body);padding:22px 56px;border:0;border-radius:20px;background:var(--q-acc);color:#fff;cursor:pointer;box-shadow:0 8px 0 rgba(0,0,0,.25)}
.qstart:hover{filter:brightness(1.08)}

.qnote{display:flex;flex-direction:column;gap:18px}
.qqrnote{display:flex;flex-direction:column;align-items:center;gap:18px}

/* a picture: a photo in a white frame with a caption that says what it shows (also its alt text) */
.qpic{position:relative;margin:0;width:min-content;display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;padding:14px 14px 12px;box-shadow:0 10px 18px rgba(35,18,4,.42),0 1px 3px rgba(35,18,4,.3);rotate:var(--r,0deg)}
/* the photo's box comes from its proportions (--ar, set by quiz-host.js pic), the largest box it may fill (--mw × --mh)
   and its own width (--nw: never enlarged), so it has its final size before the photo arrives */
.qpic img{display:block;width:min(var(--mw,440px),calc(var(--mh,470px) * var(--ar,1.3333)),var(--nw,100vw));height:auto;aspect-ratio:var(--ar,auto);object-fit:contain;background:#f3eee4}
.qpic figcaption{max-width:440px;font:700 32px/1.2 var(--q-body);color:var(--q-ink);text-align:center;text-wrap:balance}
.qpic.drop{animation:qdrop .7s cubic-bezier(.2,.9,.3,1.25) .5s backwards}
.qpcol{min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 6px}
.qmain.withpic{grid-template-columns:300px minmax(0,1fr) auto}

/* reading the question */
.qread{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;text-align:center}
.qreadq{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;min-width:0}
.qread.withpic{flex-direction:row;gap:64px;padding:0 24px}
.qread.withpic .qreadq{flex:1}
.qread.withpic .qq.qqbig{font-size:80px}
.qread .qpic.big img{--mw:700px;--mh:560px}
.qread .qpic.big figcaption{max-width:700px}
.qtag{margin:0;font:700 36px/1 var(--q-body);padding:12px 30px;border-radius:999px;background:var(--q-bg);color:var(--q-bgink)}
.qq{margin:0;font:700 64px/1.25 var(--q-head);color:var(--q-ink);overflow-wrap:anywhere;text-wrap:balance}
.qq.qqbig{font-size:88px;line-height:1.22;max-width:1600px;animation:qin .5s ease-out}
.qrbar{width:900px;height:14px;border-radius:7px;background:var(--q-rule);overflow:hidden;direction:rtl}
.qrbar i{display:block;height:100%;width:100%;background:var(--q-acc)}

/* answers open, and the reveal */
.qmain{flex:1;min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px}
.qside{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;text-align:center}
.qring{position:relative;width:240px;height:240px}
.qring svg{width:100%;height:100%}
.qring circle{fill:none;stroke-width:20}
.qring .bg{stroke:var(--q-rule)}
.qring .fg{stroke:var(--q-acc);stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.qring b{position:absolute;inset:0;display:grid;place-items:center;font:700 96px/1 var(--q-body);color:var(--q-ink);font-variant-numeric:tabular-nums}
.qring.low .fg{stroke:var(--q-no)}
.qn{margin:0;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.qn small{font-size:36px;font-weight:700;color:var(--q-muted)}
.qn b{font:700 104px/1 var(--q-body);color:var(--q-ink);font-variant-numeric:tabular-nums}
.qn.qright b{color:var(--q-acc)}
.qwork{min-width:0;min-height:0;display:flex;flex-direction:column;gap:22px}
.qtiles{flex:1 1 0;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:22px}
.qtiles.tf{grid-template-rows:1fr}
.qtile{position:relative;min-height:0;min-width:0;overflow:hidden;display:flex;align-items:center;gap:24px;padding:20px 28px;border-radius:22px;background:var(--t0);color:var(--ti0);box-shadow:inset 0 0 0 4px rgba(0,0,0,.2),0 7px 0 rgba(0,0,0,.2);animation:qpop .35s ease-out backwards;transition:opacity .35s}
.qtrow{flex:1;min-width:0;align-self:stretch;display:flex;align-items:center;gap:24px}
/* a picture answer: the photo at the tile's side, its shape, letter and text beside it */
.qtile.pic{padding:16px 16px 16px 24px}
.qtile.pic>img{flex:none;height:100%;aspect-ratio:1;width:auto;max-width:46%;object-fit:cover;border:5px solid #fff;border-radius:6px;background:#fff}
.qtiles.pics .qtx{font-size:44px}
.qmain.withpic .qtile .qcnt,.qtiles.pics .qtile .qcnt{margin-inline-start:0}
.qtile.t1{background:var(--t1);color:var(--ti1);animation-delay:.07s}
.qtile.t2{background:var(--t2);color:var(--ti2);animation-delay:.14s}
.qtile.t3{background:var(--t3);color:var(--ti3);animation-delay:.21s}
.qsh{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1}
.qsh svg{width:64px;height:64px}
.qsh b{font:700 36px/1 var(--q-body)}
.qtx{flex:1;min-width:0;font:700 48px/1.2 var(--q-body);overflow-wrap:normal}   /* never a word broken in two: a long one shrinks the text instead (fitAll) */
.qtiles.tf .qtx{font-size:72px;text-align:center}
.qtiles.tf .qsh svg{width:84px;height:84px}
.qcnt{flex:none;display:flex;align-items:center;gap:8px;padding:6px 18px;border-radius:999px;background:rgba(0,0,0,.22);color:inherit;font:700 44px/1 var(--q-body);font-variant-numeric:tabular-nums}
.qcnt svg{width:36px;height:36px}
.qmk{position:absolute;top:14px;left:14px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.qmk svg{width:40px;height:40px}
.qmk.ok{color:var(--q-ok)}
.qmk.no{color:var(--q-no)}
.qtile.right{box-shadow:inset 0 0 0 4px rgba(0,0,0,.2),0 0 0 8px var(--q-ok),0 7px 0 rgba(0,0,0,.2)}
.qtile.wrong{opacity:.32}
.qtile.right .qcnt,.qtile.wrong .qcnt{margin-inline-start:72px}
.qexp{flex:none;margin:0;padding:18px 28px;border-radius:18px;background:var(--q-card);border-inline-start:10px solid var(--q-acc);font-size:34px;line-height:1.35;color:var(--q-ink);animation:qin .5s ease-out}

/* a year: the ruler, oldest on the left */
.qyear{flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:120px}
.qs-reveal .qyear{padding-bottom:130px}
.qhint{margin:0;font-size:44px;font-weight:700;text-align:center;color:var(--q-muted)}
.qruler{position:relative;height:120px;margin:0 70px}
.qrline{position:absolute;left:0;right:0;top:50px;height:12px;border-radius:6px;background:var(--q-bg)}
.qtick{position:absolute;top:30px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:30px}
.qtick i{width:6px;height:52px;background:var(--q-bg);border-radius:3px}
.qtick b{font:700 34px/1 var(--q-body);color:var(--q-ink);font-variant-numeric:tabular-nums}
.qmark{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;white-space:nowrap}
.qmark.right{bottom:72px;color:var(--q-ok)}
.qmark.right i{width:72px;height:72px;border-radius:50%;background:var(--q-ok);color:#fff;display:grid;place-items:center}
.qmark.right i svg{width:44px;height:44px}
.qmark.right b{order:-1;font:700 64px/1 var(--q-body);color:var(--q-ok)}
.qmark.avg{top:156px;color:var(--q-muted)}
.qmark.avg i{order:-1;width:0;height:0;border:16px solid transparent;border-bottom:22px solid var(--q-muted);border-top:0}
.qmark.avg.l{transform:translateX(-16px);align-items:flex-start}
.qmark.avg.r{transform:translateX(calc(16px - 100%));align-items:flex-end}
.qmark.avg b{font:700 36px/1.1 var(--q-body);background:var(--q-card);padding:6px 16px;border-radius:12px;border:2px solid var(--q-rule)}
.qt-year .qexp{margin-top:auto}

/* an order: the items as they came (no hint of the order), then the right order left to right with the years */
.qitems{flex:1 1 0;min-height:0;list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:1fr;gap:18px;font-size:46px}
.qitems li{display:flex;align-items:center;padding:12px 32px;border-radius:18px;background:var(--q-card);border:3px solid var(--q-rule);font-weight:700;line-height:1.2;min-height:0;overflow:hidden}
.qline{flex:1 1 0;min-height:0;list-style:none;margin:0;padding:0;display:flex;gap:44px;font-size:40px}
.qline li{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:14px;padding:22px 24px;border-radius:18px;background:var(--q-card);border:3px solid var(--q-rule);border-top:12px solid var(--q-acc);animation:qin .45s ease-out backwards}
.qline li:nth-child(2){animation-delay:.15s}.qline li:nth-child(3){animation-delay:.3s}.qline li:nth-child(4){animation-delay:.45s}.qline li:nth-child(5){animation-delay:.6s}.qline li:nth-child(6){animation-delay:.75s}
.qline li:not(:last-child)::after{content:"";position:absolute;right:-36px;top:50%;border:14px solid transparent;border-left:20px solid var(--q-acc);transform:translateY(-50%)}
.qline b{font:700 1em/1.1 var(--q-body);color:var(--q-acc);direction:rtl;text-align:center}
.qline span{font-weight:700;line-height:1.25;text-align:center;overflow-wrap:anywhere}
/* with pictures: each event a card with its picture (the open question's cards as they came, then the right order) */
.qline.pics li{padding:14px 14px 18px;gap:12px}
.qline.pics img,.qcards img{flex:1 1 0;min-height:0;width:100%;object-fit:cover;border-radius:4px;background:#f3eee4}
.qcards{flex:1 1 0;min-height:0;list-style:none;margin:0;padding:0;display:flex;gap:36px}
.qcards li{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px;padding:14px 14px 20px;border-radius:18px;background:var(--q-card);border:3px solid var(--q-rule);animation:qin .45s ease-out backwards}
.qcards li:nth-child(2){animation-delay:.12s}.qcards li:nth-child(3){animation-delay:.24s}.qcards li:nth-child(4){animation-delay:.36s}.qcards li:nth-child(5){animation-delay:.48s}.qcards li:nth-child(6){animation-delay:.6s}
.qcards span{flex:none;font:700 40px/1.25 var(--q-body);text-align:center;overflow-wrap:anywhere}

/* the top 5 */
.qscores{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.qbigt{margin:0;font:700 80px/1.1 var(--q-head)}
.qsub{margin:0;font-size:36px;color:var(--q-muted);font-weight:700}
.qtop{list-style:none;margin:18px 0 0;padding:0;width:min(1300px,100%);display:flex;flex-direction:column;gap:16px}
.qtop li{display:flex;align-items:center;gap:32px;padding:14px 36px;border-radius:20px;background:var(--q-card);border:3px solid var(--q-rule);animation:qin .4s ease-out backwards}
.qtop li:nth-child(1){background:var(--q-bg);color:var(--q-bgink);border-color:var(--q-bg)}
.qtop li:nth-child(2){animation-delay:.1s}.qtop li:nth-child(3){animation-delay:.2s}.qtop li:nth-child(4){animation-delay:.3s}.qtop li:nth-child(5){animation-delay:.4s}
.qrk{flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:var(--q-acc);color:#fff;font:700 52px/1 var(--q-body)}
.qtop b{flex:1;min-width:0;font:700 56px/1.2 var(--q-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qtop small{font-size:36px;font-weight:700;opacity:.8}
.qpts{font:700 56px/1 var(--q-body);font-variant-numeric:tabular-nums}
.qtop li.empty{justify-content:center;font-size:44px}

/* the podium: third, second, then first */
.qpodium{flex:1;min-height:0;display:flex;flex-direction:column;gap:30px}
.qpod{flex:1 1 0;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;align-items:end;padding:0 120px}
.qp{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;min-width:0;animation:qup .7s ease-out backwards}
.qp.p3{animation-delay:.6s}.qp.p2{animation-delay:2.2s}.qp.p1{animation-delay:3.8s}
.qpn{font:700 52px/1.15 var(--q-head);overflow-wrap:anywhere;max-width:100%}
.qpn small{font:700 32px var(--q-body);color:var(--q-muted)}
.qpp{font-size:36px;font-weight:700;color:var(--q-muted)}
.qpb{width:100%;border-radius:20px 20px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff}
.qpb span{font:700 120px/1 var(--q-body)}
.qpb small{font-size:36px;font-weight:700}
.p1 .qpb{height:330px;background:var(--q-acc)}
.p2 .qpb{height:250px;background:var(--q-bg)}
.p3 .qpb{height:190px;background:var(--q-muted)}
.qhard{flex:none;background:var(--q-card);border:3px solid var(--q-rule);border-radius:20px;padding:18px 32px;animation:qin .6s ease-out 5s backwards}
.qhard h3{margin:0 0 8px;font:700 44px/1.2 var(--q-head)}
.qhard ol{margin:0;padding:0 1.1em 0 0;display:flex;flex-direction:column;gap:6px;font-size:34px;line-height:1.3}
.qhard li b{margin-inline-start:16px;color:var(--q-acc);white-space:nowrap}
.qconf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.qconf i{position:absolute;top:-40px;left:var(--x);width:18px;height:30px;background:var(--c);border-radius:3px;animation:qfall 3.2s ease-in calc(4s + var(--d)) both}

/* ---------- the look "corkboard" (theme.look; the intro deck's detective board, games/quiz/REDESIGN.md) ----------
   Cork in a dark wooden frame; the question, the clock and the explanation on cream notes held by red pins; the tiles as
   paper cards (their colour, shape and letter kept: the pupils match them on the phone); the pictures as polaroids;
   red string between pinned cards (quiz-host.js strings()); a "פוענח" stamp on the right card. Text on the cork itself is
   dark brown (6.5:1); anything smaller goes on a note. */
.look-corkboard{--cork:#c39468;--wood:#5d3c23;--corkink:#2a190b;--note:#fffcf3;--string:#b02a22}
body.qz.look-corkboard,.look-corkboard .qdeck{background-color:var(--cork);background-image:radial-gradient(ellipse at 18% 22%,rgba(255,232,196,.22),transparent 38%),radial-gradient(ellipse at 82% 78%,rgba(90,52,22,.16),transparent 42%),radial-gradient(circle,rgba(92,56,26,.34) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,238,205,.26) 0 .9px,transparent 1.5px),radial-gradient(circle,rgba(110,68,32,.22) 0 1.8px,transparent 2.6px),radial-gradient(circle,rgba(70,40,16,.18) 0 1.2px,transparent 2px);background-size:100% 100%,100% 100%,7px 7px,11px 11px,19px 19px,13px 17px;background-position:0 0,0 0,0 0,3px 5px,9px 2px,5px 11px}
.look-corkboard .qdeck::after{content:"";position:absolute;inset:0;border:24px solid var(--wood);box-shadow:inset 0 0 0 3px #3b2414,inset 0 0 30px rgba(40,20,5,.45);pointer-events:none;z-index:6}
.look-corkboard .qwait{color:var(--corkink)}
/* paper, and the red pin at the top of each note */
.look-corkboard :is(.qnote,.qqrnote,.qq,.qside,.qexp,.qyear,.qcards li,.qline li,.qitems li,.qtop li,.qhard,.qbigt,.qcount,.qpn,.qchip){position:relative;background:var(--note);color:var(--q-ink);border:0;border-radius:3px;box-shadow:0 12px 24px rgba(45,22,6,.38),0 2px 4px rgba(45,22,6,.25)}
.look-corkboard :is(.qnote,.qqrnote,.qq,.qside,.qexp,.qyear,.qtile,.qpic,.qcards li,.qline li,.qitems li,.qtop li,.qhard,.qbigt)::before{content:"";position:absolute;top:-13px;left:calc(50% - 14px);width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#f39a8f 0 4px,#c0352c 5px 11px,#7d1a14 12.5px);box-shadow:3px 6px 5px rgba(40,18,10,.38);z-index:3}
.look-corkboard .qchip::before{content:"";position:absolute;top:-7px;left:calc(50% - 8px);width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#f39a8f 0 2px,#c0352c 3px 6px,#7d1a14 7.5px);box-shadow:2px 3px 3px rgba(40,18,10,.35)}
/* the head on the cork, inside the frame */
.look-corkboard .qhead{padding:0 72px;color:var(--corkink);top:8px}
.look-corkboard .qem{color:var(--q-acc)}
.look-corkboard .qprog:empty{visibility:hidden}
.look-corkboard .qprog{color:var(--q-ink);background:var(--note);padding:10px 26px;border-radius:3px;box-shadow:0 6px 12px rgba(45,22,6,.3);rotate:-1deg}
.look-corkboard .qpill{background:#3b2414;color:var(--note)}
.look-corkboard .qboard{top:136px;left:52px;right:52px;bottom:44px;background:none;box-shadow:none;border-radius:0;padding:18px 36px 22px;overflow:visible}
/* the question on a note; the clock and the count on another */
.look-corkboard .qq{padding:22px 40px 24px;rotate:-.4deg}
.look-corkboard .qq.qqbig{padding:44px 64px 50px}
.look-corkboard .qread .qtag{background:#3b2414;color:var(--note)}
.look-corkboard .qrbar{background:rgba(255,252,243,.6)}
.look-corkboard .qside{justify-content:center;padding:34px 12px 26px;rotate:.6deg}
/* paper cards in the tiles' colours */
.look-corkboard .qtile{overflow:visible;border-radius:4px;box-shadow:inset 0 0 0 3px rgba(0,0,0,.12),0 10px 18px rgba(35,18,4,.42),0 1px 3px rgba(35,18,4,.3)}
.look-corkboard .qtile.t0{rotate:-.7deg}.look-corkboard .qtile.t1{rotate:.6deg}.look-corkboard .qtile.t2{rotate:.5deg}.look-corkboard .qtile.t3{rotate:-.5deg}
.look-corkboard .qtile.right{box-shadow:inset 0 0 0 3px rgba(0,0,0,.12),0 0 0 8px var(--q-ok),0 10px 18px rgba(35,18,4,.42)}
.look-corkboard .qtile.wrong{opacity:.4}
.look-corkboard .qtiles{gap:30px;padding-top:6px}
.look-corkboard .qexp{padding:22px 32px;border-inline-start:10px solid var(--q-acc);rotate:.3deg}
.look-corkboard .qexp::before{left:auto;right:calc(50% - 14px)}
/* the stamp on the right card: over its top corner, as a rubber stamp (it carries the ✓, so the round mark goes) */
.look-corkboard .qtile.right .qmk{display:none}
.qstamp{position:absolute;left:-18px;top:-24px;z-index:4;display:flex;align-items:center;gap:10px;padding:8px 26px 10px 22px;border:6px solid var(--q-ok);border-radius:12px;background:rgba(255,252,243,.95);color:var(--q-ok);font:800 60px/1 var(--q-head);letter-spacing:1px;rotate:-10deg;box-shadow:0 0 0 3px rgba(255,252,243,.95),0 8px 16px rgba(35,18,4,.35);animation:qstamp .5s cubic-bezier(.2,.9,.3,1.3) .4s backwards}
.qstamp svg{width:52px;height:52px}
/* a year on a long note */
.look-corkboard .qyear{padding:44px 40px 30px;rotate:-.3deg}
.look-corkboard .qs-reveal .qyear{padding-bottom:150px}
/* an order: cards in a row, joined by red string at the reveal */
.look-corkboard .qitems li{padding:12px 32px;rotate:-.3deg}
.look-corkboard .qitems li:nth-child(even){rotate:.4deg}
.look-corkboard .qcards{gap:40px;padding-top:14px}
.look-corkboard :is(.qcards,.qline.pics) li{background:#fff;border-radius:2px}
.look-corkboard :is(.qcards,.qline) li:nth-child(odd){rotate:-1.2deg}
.look-corkboard :is(.qcards,.qline) li:nth-child(even){rotate:1deg}
.look-corkboard .qline{padding-top:14px}
.look-corkboard .qline li{border-top:0}
.look-corkboard .qline li::after{display:none}
.qstring{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:4}
.qboard.qs-lobby>.qstring{z-index:0}   /* in the lobby the string runs behind the photos, from pin to pin */
.qlp .qpic{z-index:1}
.qstring path{fill:none;stroke:var(--string,#b02a22);stroke-width:4;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:0;animation:qstr 1s ease-out calc(.35s + var(--k) * .25s) backwards;filter:drop-shadow(2px 4px 2px rgba(40,18,10,.35))}
/* the pictures, pinned */
.look-corkboard .qpic::before{top:-12px}
.look-corkboard .qpcol .qpic,.look-corkboard .qread .qpic{margin-top:14px}
/* the lobby: the title on a note, the names as pinned tags, the QR on a white card, the quiz's pictures beside it */
.look-corkboard .qlobby.pins{grid-template-columns:minmax(0,1fr) 500px 380px;gap:44px}
.look-corkboard .qlj{gap:26px}
.look-corkboard .qnote{padding:34px 44px 32px;gap:14px;rotate:-.5deg}
.look-corkboard .qbig{font-size:88px}
.look-corkboard .qcount{align-self:flex-start;padding:8px 26px;font-size:40px;rotate:.6deg}
.look-corkboard .qnames{gap:22px 18px;padding-top:10px}
.look-corkboard .qchip{padding:8px 24px;border-radius:2px}
.look-corkboard .qchip:nth-child(3n+1){rotate:-1.5deg}.look-corkboard .qchip:nth-child(3n+2){rotate:1.2deg}
.look-corkboard .qchip.guest{background:#f1e6cc}
.look-corkboard .qchip.more{background:var(--note)}
.look-corkboard .qqrnote{background:#fff;padding:36px 34px 24px;rotate:1deg}
.look-corkboard .qqr{width:400px;height:400px;padding:0;border:0;border-radius:0}
.look-corkboard .qcode{font-size:104px}
.qlp{position:relative;min-height:0}
.qlp .qpic{position:absolute;width:236px;padding:10px 10px 8px;gap:6px}
.qlp .qpic img{width:216px;height:138px;max-width:none;max-height:none;object-fit:cover}
/* the lobby's pictures are a decoration (hidden from screen readers), their captions smaller than the board's 32 px */
.qlp .qpic figcaption{font-size:24px;line-height:1.2;max-width:216px}
.qlp .qpic:nth-child(1){top:4px;left:136px}.qlp .qpic:nth-child(2){top:214px;left:0}.qlp .qpic:nth-child(3){top:424px;left:140px}.qlp .qpic:nth-child(4){top:634px;left:12px}
/* the top 5 on index cards */
.look-corkboard .qbigt{align-self:center;padding:14px 48px 16px;rotate:-.6deg}
.look-corkboard .qsub{color:var(--corkink)}
.look-corkboard .qtop{gap:20px;margin-top:22px}
.look-corkboard .qtop li{border-radius:2px;background:var(--note) repeating-linear-gradient(180deg,transparent 0 44px,rgba(31,59,99,.1) 44px 46px)}
.look-corkboard .qtop li:nth-child(1){background:#f1dfb0;color:var(--q-ink)}
.look-corkboard .qtop li:nth-child(odd){rotate:-.4deg}.look-corkboard .qtop li:nth-child(even){rotate:.5deg}
.look-corkboard .qtop li::before{left:auto;right:28px}
/* the podium: medals, the names on tags, the steps as wooden blocks in the look's colours */
.look-corkboard .qpn{padding:6px 26px 8px}
.look-corkboard .qpn small{color:var(--q-muted)}
.look-corkboard .qpp{color:var(--corkink)}
.look-corkboard .qpb{border-radius:4px 4px 0 0;box-shadow:0 10px 18px rgba(35,18,4,.42)}
.look-corkboard .qhard{rotate:.3deg}
.look-corkboard .qhard::before{left:auto;right:60px}
.look-corkboard .qp{gap:10px}
.look-corkboard .p1 .qpb{height:250px}.look-corkboard .p2 .qpb{height:190px}.look-corkboard .p3 .qpb{height:140px}
.look-corkboard .qpb span{font-size:96px}
.qmedal{position:relative;flex:none;width:96px;height:96px;margin-top:62px;border-radius:50%;display:grid;place-items:center;color:#3b2414;box-shadow:0 8px 12px rgba(35,18,4,.4),inset 0 0 0 7px rgba(255,255,255,.35)}
.qmedal b{position:relative;font:800 52px/1 var(--q-body)}
.qmedal i{position:absolute;bottom:66px;left:calc(50% - 28px);width:56px;height:74px;background:linear-gradient(90deg,var(--q-acc) 0 50%,var(--q-acc2) 50%);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);z-index:-1}
.qmedal.m1{background:radial-gradient(circle at 35% 30%,#fff3b0,#d9a91e 58%,#8e6808)}
.qmedal.m2{background:radial-gradient(circle at 35% 30%,#ffffff,#b9bec6 58%,#737882)}
.qmedal.m3{background:radial-gradient(circle at 35% 30%,#f8cfa6,#b6743d 58%,#71451f)}
/* the landing in the same look */
body.qz.look-corkboard .qzback{color:var(--corkink)}
.look-corkboard .qzcard{position:relative;border-radius:3px;border-top:0;box-shadow:0 12px 24px rgba(45,22,6,.38),0 2px 4px rgba(45,22,6,.25)}
.look-corkboard .qzcard::before{content:"";position:absolute;top:-13px;left:calc(50% - 14px);width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#f39a8f 0 4px,#c0352c 5px 11px,#7d1a14 12.5px);box-shadow:3px 6px 5px rgba(40,18,10,.38)}
.qzpins{display:flex;justify-content:center;flex-wrap:wrap;gap:14px 22px;width:min(720px,100%);margin-bottom:6px}
.qzpins .qpic{width:150px;padding:8px 8px 6px;gap:4px;box-shadow:0 8px 14px rgba(35,18,4,.4)}
.qzpins .qpic img{width:134px;height:104px;max-width:none;max-height:none;object-fit:cover}
.qzpins .qpic figcaption{font-size:13px;max-width:134px}
.look-corkboard .qzpins .qpic::before{content:"";position:absolute;top:-8px;left:calc(50% - 9px);width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 36% 32%,#f39a8f 0 2px,#c0352c 3px 7px,#7d1a14 8.5px)}
@media (max-width:560px){.qzpins .qpic:nth-child(n+3){display:none}}

/* ---------- the chapters' deck looks (class "lk" beside look-<name>; each look's variables in quiz-looks.css) ----------
   The deck's cover around the board, the board as one of the deck's paper slides (its bands, its frame line), the
   pictures in the deck's mounts, the deck's seal on the right answer. Text sits on the paper or on the cover's plain
   colour, never on a band. */
body.qz.lk,.lk .qdeck{background:var(--lk-surround),var(--lk-bg)}
.lk .qwait,.lk .qhead{color:var(--lk-hink)}
.lk .qem,.lk .qprog{color:var(--lk-hacc)}
.lk .qpill{background:rgba(0,0,0,.24);color:var(--lk-hink);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14)}
.lk .qboard{isolation:isolate;border-radius:var(--lk-rad);background:var(--lk-deco),var(--lk-paper);padding:var(--lk-pt) 48px var(--lk-pb);outline:2px solid var(--lk-line);outline-offset:var(--lk-lo);box-shadow:0 18px 48px rgba(0,0,0,.45)}
/* reading: the question type as the deck's small heading, between two short lines */
.lk .qtag{display:flex;align-items:center;gap:18px;padding:0;background:none;color:var(--q-acc)}
.lk .qtag::before,.lk .qtag::after{content:"";width:72px;height:3px;background:currentColor;opacity:.5}
/* answering: the clock on a card, the tiles as framed panels (their colour, shape and letter kept) */
.lk .qside{background:var(--q-card);border-radius:var(--lk-rad);box-shadow:inset 0 0 0 2px var(--q-rule);padding:26px 10px}
.lk .qtile{overflow:visible;border-radius:var(--lk-trad);box-shadow:inset 0 0 0 5px rgba(0,0,0,.14),inset 0 0 0 7px rgba(255,255,255,.32),0 6px 0 rgba(0,0,0,.2)}
.lk .qtile.right{box-shadow:inset 0 0 0 5px rgba(0,0,0,.14),inset 0 0 0 7px rgba(255,255,255,.32),0 0 0 8px var(--q-ok),0 6px 0 rgba(0,0,0,.2)}
.lk .qtile.wrong{opacity:.34}
.lk .qtile.right .qmk{display:none}
/* the slide's bands take room, so the answers and the explanation get it back: a narrower clock, tighter tiles, and no
   room kept beside the right tile's count for the round mark (the seal stands in for it) */
.lk .qboard{gap:20px}
.lk .qmain{grid-template-columns:264px minmax(0,1fr);gap:24px}
.lk .qmain.withpic{grid-template-columns:264px minmax(0,1fr) auto}
.lk .qwork{gap:18px}
.lk .qtiles{gap:18px}
.lk .qtile{padding:14px 22px;gap:20px}
.lk .qtile.right .qcnt{margin-inline-start:0}
.lk .qexp{padding:12px 24px;line-height:1.3}
/* a reveal with its own picture: the picture narrower, the question and the explanation at their smallest readable sizes */
.lk .qs-reveal .qmain.withpic{grid-template-columns:240px minmax(0,1fr) auto;gap:20px}
.lk .qs-reveal .qpcol .qpic img{--mw:250px;--mh:400px}
.lk .qs-reveal .qpcol .qpic figcaption{max-width:250px}
.lk .qs-reveal .qq{font-size:60px}
.lk .qs-reveal .withpic .qexp{font-size:32px}
.lk .qexp,.lk .qtop li,.lk .qhard,.lk :is(.qline,.qcards,.qitems) li{border-radius:var(--lk-rad)}
.lk .qexp{box-shadow:inset 0 0 0 2px var(--q-rule)}
/* the seal on the right answer (it carries the ✓, so the round mark goes) */
.lk .qstamp{left:-24px;top:-44px;width:140px;height:140px;padding:0;gap:2px;flex-direction:column;justify-content:center;border:var(--lk-sealborder);border-radius:var(--lk-sealrad);background:var(--lk-seal);color:var(--lk-sealink);clip-path:var(--lk-sealclip);font:800 28px/1.05 var(--q-body);letter-spacing:0;rotate:-12deg;box-shadow:0 8px 16px rgba(0,0,0,.35)}
.lk .qstamp svg{width:42px;height:42px}
.look-tricolore .qstamp svg{width:48px;height:48px}
.look-trench .qstamp{width:176px;height:114px;rotate:-8deg;font-size:30px;box-shadow:none}   /* an oval rubber stamp */
.look-tricolore .qstamp b{position:absolute;bottom:-16px;padding:4px 18px 6px;border-radius:2px;background:#c0303c;color:#fff;box-shadow:0 3px 6px rgba(0,0,0,.3)}
/* the pictures in the deck's mounts */
.lk .qpic{rotate:0deg;background:var(--lk-frame);border:var(--lk-fborder);border-image:var(--lk-fbimg);border-radius:var(--lk-farch);box-shadow:inset 0 0 0 2px var(--lk-fline),0 12px 26px rgba(0,0,0,.3)}
.lk .qpic img{border-radius:var(--lk-farch)}
/* the lobby: the deck's cover (the title on the dark, a line under it), the QR on the paper, the pictures beside it */
.lk .qboard.qs-lobby{background:none;outline:0;box-shadow:none;padding:20px 24px 12px}
.lk .qlobby.pins{grid-template-columns:minmax(0,1fr) 480px 400px;gap:48px}
.lk .qs-lobby .qbig{color:var(--lk-hink);font-size:92px;line-height:1.16}
.lk .qs-lobby .qbig::after{content:"";display:block;width:240px;height:6px;margin-top:28px;background:var(--lk-hacc)}
.lk .qs-lobby :is(.qhow,.qcls){color:var(--lk-hink)}
.lk .qs-lobby :is(.qhow b,.qcount){color:var(--lk-hacc)}
.lk .qs-lobby .qchip{border:0;border-radius:var(--lk-trad);background:var(--lk-paper)}
.lk .qqrnote{background:var(--lk-paper);padding:30px 30px 20px;border-radius:var(--lk-rad);box-shadow:0 14px 36px rgba(0,0,0,.4)}
.lk .qqr{width:400px;height:400px;padding:14px;border:0;border-radius:4px}
.lk .qcode{font-size:100px}
.lk .qlp{display:flex;flex-direction:column;justify-content:center;gap:26px}
.lk .qlp:has(.qpic:nth-child(4)){display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:24px 20px}
.lk .qlp .qpic{position:static;width:auto;padding:10px 10px 8px}
.lk .qlp .qpic img{width:100%;height:250px}
.lk .qlp:has(.qpic:nth-child(3)) .qpic img{height:170px}
.lk .qlp .qpic figcaption{max-width:none}
/* the top 5 (a little tighter: the slide's bands take room) and the podium */
.lk .qtop{gap:12px;margin-top:10px}
.lk .qtop li{padding:10px 36px}
.lk .qtop li:nth-child(1) .qrk{background:var(--q-gold);color:var(--q-ink)}   /* the first row is the look's dark colour */
.lk .qpb{border-radius:var(--lk-rad) var(--lk-rad) 0 0;box-shadow:0 10px 18px rgba(0,0,0,.3)}
.lk .p1 .qpb{height:250px}.lk .p2 .qpb{height:190px}.lk .p3 .qpb{height:140px}
.lk .qpb span{font-size:96px}
/* the landing in the same look */
body.qz.lk .qzback{color:var(--lk-hink)}
.lk .qzcard{border-top:0;border-radius:var(--lk-rad);background:var(--lk-deco),var(--lk-paper);padding-top:max(30px,var(--lk-pt));padding-bottom:max(28px,var(--lk-pb));outline:2px solid var(--lk-line);outline-offset:-12px}
.lk .qzpins .qpic{rotate:0deg}
/* a look's own touches: Karantina (the castle's headings) is too narrow for a question; the sketchbook is light all over */
.look-castle :is(.qq,.qexp,.qhard h3){font-family:var(--q-body)}
.look-castle .qtitle{font-size:52px}.look-castle .qs-lobby .qbig{font-size:124px}.look-castle .qbigt{font-size:104px}.look-castle .qpn{font-size:64px}
.look-castle .qzcard h1{font-size:clamp(44px,8vw,72px)}
/* Cardo (the mosaic) and Bellefair (the salon) have no bold Hebrew: their headings stay at the weight the decks use */
:is(.look-mosaic,.look-salon) :is(.qq,.qbig,.qbigt,.qtitle,.qpn,.qhard h3,.qzcard h1,.qzbox h2){font-weight:400}
/* Bellefair is too light to read a question from the back of the class: the salon asks in its text font, bold */
.look-salon :is(.qq,.qpn,.qhard h3){font-family:var(--q-body);font-weight:700}
.look-sketchbook .qboard,.look-sketchbook .qqrnote{box-shadow:0 10px 30px rgba(90,60,30,.28)}

@keyframes qpulse{50%{opacity:.25}}
@keyframes qdrop{from{translate:0 -140px;rotate:-16deg;opacity:0}}
@keyframes qstamp{from{scale:2.6;opacity:0}}
@keyframes qstr{from{stroke-dashoffset:1200}}
@keyframes qpop{from{transform:scale(.7);opacity:0}}
@keyframes qin{from{transform:translateY(24px);opacity:0}}
@keyframes qup{from{transform:translateY(80px);opacity:0}}
@keyframes qfall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(1150px) rotate(540deg);opacity:.8}}
@media (prefers-reduced-motion:reduce){
  .qpill i,.qchip.new,.qq.qqbig,.qtile,.qexp,.qline li,.qcards li,.qtop li,.qp,.qhard,.qpic.drop,.qstamp,.qstring path{animation:none}
  .qring .fg,.qtile{transition:none}
  .qconf{display:none}
}