/* ════════════════════════════════════════════════════════════════════ session.css — the "Session" lesson layout. A lesson laid out as a session you take part in, not a document you page through. First shipped on micro/lessons/magenta-realtime-2.html; the design rules live in .claude/skills/_shared/session-design.md. hero the instrument is the first thing you meet (.hero.stage) strip chapters as regions on a timeline, sticky (.arr) chapters one continuous scroll, prose column + margin (.panel.ch) devices every interactive is an instrument on the desk (.dev) notes the common misreads live beside the prose (.note) equations symbols that explain themselves (.eq + .legend) motion reveal on entry, sliding selectors, canvas intros, an attract-mode demo in the hero (session.js drives it) Load order in : micro.css → teach.css → session.css Load order before : micro.js → session.js [→ session-sound.js] Colour: the page declares ROLES, not colours. Every device uses the same role for the same thing. The framework needs two: --acc the lesson's lead accent (the method, the output, "now") --you whatever the reader does (their input, their choice) A lesson adds its own (e.g. --rgb, --dino) in a :root block of its own. ════════════════════════════════════════════════════════════════════ */ :root{ --acc:var(--warm); --you:var(--teal); --measure:38rem; --gut:3rem; --margin:15rem; --hdr:52px; --arr-h:58px; /* motion tokens: durations and curves, used by CSS and read by session.js */ --t1:.14s; --t2:.26s; --t3:.48s; --t4:.82s; --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1); --stagger:70ms; } @media (max-width:640px){ :root{ --hdr:48px; --arr-h:50px; } } /* ── hero: the stage. Copy on the left, the instrument on the right ── */ .hero.stage{min-height:0;display:block;text-align:left;padding:clamp(2.25rem,6vw,4.75rem) 1.25rem clamp(2rem,4vw,3rem);overflow:visible;} .hero.stage::before{display:none;} .stage-grid{max-width:72rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"copy dev" "more dev";grid-template-rows:auto 1fr;column-gap:clamp(2rem,4.5vw,4.5rem);} .stage-copy{grid-area:copy;align-self:end;} .stage-more{grid-area:more;align-self:start;} .stage-dev{grid-area:dev;align-self:center;margin:0 !important;} /* The minimum is also capped by the screen (14vw): at 1.4x text a one-word title such as "TrackEverything" was ~60px on a 320px phone and ran 80px off the side. break-word is the last resort for an even longer word. */ .hero.stage h1{font-family:var(--font-display);font-style:normal;font-weight:400;font-variation-settings:normal;font-size:clamp(min(2.7rem,14vw),6.2vw,4.9rem);overflow-wrap:break-word;line-height:.98;letter-spacing:-.015em;margin:0 0 1.4rem;color:var(--text);} .stage-kick{font-family:var(--font-heading);font-size:.9rem;color:var(--text3);margin:0 0 .9rem;} .stage-lede{font-size:clamp(1.12rem,1.7vw,1.3rem);line-height:1.6;color:var(--text);max-width:31rem;margin:0 0 1rem;} .stage-try{font-size:1.02rem;line-height:1.6;color:var(--text2);max-width:31rem;margin:0 0 1.4rem;} .stage-pre{font-size:.9rem;line-height:1.55;color:var(--text3);max-width:31rem;margin:0;} .stage-pre b{color:var(--text2);font-weight:600;} .stage-dock{max-width:72rem;margin:clamp(1.75rem,3vw,2.5rem) auto 0;} .stage-dock .go-btn{margin:0;} .stage-dev .dev-ctl{padding-top:.2rem;} @media (max-width:980px){ .stage-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "dev" "more";grid-template-rows:auto;} .stage-copy,.stage-more{max-width:36rem;} .stage-copy .stage-lede{margin-bottom:1.5rem;} .stage-more{margin-top:1.5rem;} } /* ── devices: every interactive is an instrument on the desk ── */ .dev{clear:both;position:relative;margin:2.1rem 0;border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;} .dev-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;padding:1rem 1.15rem .35rem;} .dev .dev-title{font-family:var(--font-heading);font-weight:600;font-size:1.02rem;line-height:1.3;color:var(--text);margin:0;} .dev-state{font-family:var(--font-heading);font-size:.8rem;color:var(--text3);transition:color var(--t2);} .dev-state.live{color:var(--acc);} .dev-state.demo{display:inline-flex;align-items:center;gap:.45em;color:var(--text3);} .dev-state.demo::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--you);animation:ss-blink 1.6s var(--ease-io) infinite;} .dev-hint{font-size:.94rem;line-height:1.6;color:var(--text2);padding:0 1.15rem .9rem;max-width:62ch;margin:0;} .dev-screen{position:relative;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);} .dev-screen canvas{display:block;max-width:100%;touch-action:manipulation;} .dev-ctl{display:flex;flex-wrap:wrap;gap:.55rem .6rem;align-items:center;padding:.9rem 1.15rem .35rem;} .dev-ctl:last-child{padding-bottom:1rem;} .dev-read{font-size:.95rem;line-height:1.55;color:var(--text2);padding:.35rem 1.15rem 1.05rem;margin:0;min-height:2.6em;} .dev-read b{color:var(--text);font-weight:600;} .dev-read .n{font-family:var(--font-mono);font-size:.86em;color:var(--text);font-variant-numeric:tabular-nums;} .dev-fine{font-size:.84rem;line-height:1.55;color:var(--text3);padding:0 1.15rem 1rem;margin:0;max-width:66ch;} .kbtn{font-family:var(--font-heading);font-size:.9rem;font-weight:500;line-height:1.2;min-height:42px;padding:.5rem 1rem;border-radius:10px;border:1px solid var(--border2);background:var(--bg3);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:border-color var(--t1),background var(--t1),transform var(--t1) var(--ease-out);} .kbtn:hover{border-color:var(--text3);} .kbtn:active{transform:scale(.97);} .kbtn svg{width:14px;height:14px;flex-shrink:0;} .kbtn[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 16%,var(--bg3));border-color:var(--acc);} .kbtn.go{background:var(--acc);border-color:var(--acc);color:var(--bg);font-weight:600;} [data-theme="light"] .kbtn.go{color:#fff;} .kbtn.go:hover{filter:brightness(1.06);} .kbtn:disabled{opacity:.45;cursor:default;transform:none;} .kbtn:focus-visible,.arr-rg:focus-visible,.arr-snd:focus-visible,.seg button:focus-visible,.tog:focus-visible,.dev input:focus-visible{outline:2px solid var(--acc);outline-offset:2px;} /* segmented selector: a thumb slides to the pressed option (session.js adds it) */ .seg{position:relative;display:inline-flex;border:1px solid var(--border2);border-radius:11px;overflow:hidden;background:var(--bg3);max-width:100%;isolation:isolate;} .seg button{position:relative;z-index:1;font-family:var(--font-heading);font-size:.86rem;line-height:1.25;color:var(--text2);background:transparent;border:0;border-right:1px solid var(--border2);padding:.5rem .85rem;min-height:42px;cursor:pointer;text-align:left;transition:color var(--t2);} .seg button:last-child{border-right:0;} .seg button[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 18%,var(--bg3));color:var(--text);} .seg.has-thumb button[aria-pressed="true"]{background:transparent;} .seg button small{display:block;font-family:var(--font-mono);font-size:.74rem;color:var(--text3);margin-top:.1rem;transition:color var(--t2);} .seg button[aria-pressed="true"] small{color:var(--acc);} .seg-thumb{position:absolute;z-index:0;top:0;bottom:0;left:0;width:0;background:color-mix(in srgb,var(--acc) 18%,var(--bg3));box-shadow:inset 0 -2px 0 var(--acc);pointer-events:none;transition:transform var(--t3) var(--ease-spring),width var(--t3) var(--ease-spring);} /* toggles: a stream / a feature / a switch that is on or off */ .tog{font-family:var(--font-heading);font-size:.88rem;line-height:1.2;min-height:40px;padding:.45rem .85rem .45rem .6rem;border-radius:10px;border:1px solid var(--border2);background:var(--bg3);color:var(--text2);cursor:pointer;display:inline-flex;align-items:center;gap:.55rem;transition:border-color var(--t2),background var(--t2),color var(--t2),transform var(--t1) var(--ease-out);} .tog::before{content:'';width:12px;height:12px;border-radius:4px;border:1.5px solid var(--c,var(--acc));background:transparent;transition:background var(--t2) var(--ease-out),transform var(--t3) var(--ease-spring);} .tog[aria-pressed="true"]{color:var(--text);border-color:color-mix(in srgb,var(--c,var(--acc)) 70%,var(--border2));background:color-mix(in srgb,var(--c,var(--acc)) 12%,var(--bg3));} .tog[aria-pressed="true"]::before{background:var(--c,var(--acc));transform:scale(1.08);} .tog:active{transform:scale(.97);} .tog:disabled{opacity:.45;cursor:default;} .fad{display:grid;grid-template-columns:minmax(8rem,11rem) minmax(0,1fr) 4.6rem;align-items:center;gap:.4rem .9rem;padding:.3rem 1.15rem;} .fad label{font-size:.92rem;color:var(--text2);} .fad output{font-family:var(--font-mono);font-size:.84rem;color:var(--text);text-align:right;font-variant-numeric:tabular-nums;} .fad input[type=range]{width:100%;min-width:0;} .fad input[type=range]::-webkit-slider-thumb{background:var(--c,var(--acc));width:18px;height:18px;} .fad input[type=range]::-moz-range-thumb{background:var(--c,var(--acc));border:0;width:18px;height:18px;border-radius:50%;} @media (max-width:560px){ .fad{grid-template-columns:minmax(0,1fr) auto;} .fad input[type=range]{grid-column:1/-1;grid-row:2;} } .chips{display:flex;flex-wrap:wrap;gap:.5rem;} /* ── the arrangement strip: chapters as regions on a timeline ── */ .arr{position:sticky;top:var(--hdr);z-index:90;background:color-mix(in srgb,var(--bg) 90%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--border);border-bottom:1px solid var(--border);} .arr-in{max-width:72rem;margin:0 auto;display:flex;align-items:center;gap:.75rem;padding:0 1.25rem;height:var(--arr-h);} .arr-rgs{position:relative;flex:1 1 auto;min-width:0;display:flex;gap:3px;align-items:stretch;height:100%;padding:.62rem 0 .5rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;} .arr-rgs::-webkit-scrollbar{display:none;} .arr-rgs.scrolls{padding-right:1.25rem; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%);} /* a region is never narrower than its own label (number + full name): the label width is the basis and chapter length shares out the rest; if the names outgrow a narrow window the strip scrolls sideways, as on phone */ .arr-rg{flex:var(--g,1) 1 auto;min-width:max-content;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;color:var(--text3);font:inherit;display:flex;flex-direction:column;gap:.32rem;border-radius:4px;transition:flex-grow .35s var(--ease-spring);} .arr-clip{display:block;height:9px;border-radius:3px;background:var(--bg3);border:1px solid var(--border2);position:relative;overflow:hidden;transition:border-color var(--t2);} .arr-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--text4);} .arr-lab{display:flex;gap:.3em;font-family:var(--font-heading);font-size:.76rem;line-height:1.2;white-space:nowrap;padding-right:.6rem;transition:color var(--t2);} .arr-n{font-variant-numeric:tabular-nums;} .arr-rg:hover .arr-lab{color:var(--text2);} .arr-rg.cur .arr-lab{color:var(--text);} .arr-rg.cur .arr-clip{border-color:var(--acc);} .arr-rg.cur .arr-fill{background:color-mix(in srgb,var(--acc) 55%,transparent);} .arr-rg.done .arr-fill{background:var(--text3);} .arr-rg.just-done .arr-clip{animation:ss-done .9s var(--ease-out);} .arr-ph{position:absolute;top:.3rem;height:calc(9px + .62rem);width:2px;margin-left:-1px;background:var(--acc);border-radius:1px;pointer-events:none;left:0;} .arr-snd{flex:0 0 auto;display:inline-flex;align-items:center;gap:.45rem;min-height:36px;padding:.35rem .7rem;border-radius:9px;border:1px solid var(--border2);background:transparent;color:var(--text2);font-family:var(--font-heading);font-size:.82rem;cursor:pointer;} .arr-snd svg{width:16px;height:16px;} .arr-snd[aria-pressed="false"]{color:var(--text3);} /* phone: every region keeps its name and the strip scrolls sideways, like the old tab bar; session.js keeps the current chapter centred while you read */ @media (max-width:720px){ .arr-in{gap:.5rem;padding:0 0 0 .75rem;} .arr-rgs{overflow-x:auto;overflow-y:hidden;gap:10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-right:1.25rem; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 28px),transparent 100%);} .arr-rgs::-webkit-scrollbar{display:none;} .arr-rg{flex:0 0 auto;min-width:calc(var(--g,1) * 3.4rem);container-type:normal;} .arr-rg:first-of-type{margin-left:6px;} .arr-lab{font-size:.76rem;overflow:visible;padding-right:0;} .arr-rg .arr-nm{display:inline;} .arr-snd{margin-right:.75rem;} .arr-snd .snd-l{display:none;} .arr-snd{padding:.35rem .5rem;} } /* ── chapters: one continuous session, prose + margin ── */ .panel.ch{display:block;animation:none;border-top:1px solid var(--border);padding:clamp(3rem,7vw,5.5rem) 1.25rem clamp(3rem,6vw,4.5rem);scroll-margin-top:calc(var(--hdr) + var(--arr-h) - 1px);} .ch-body{max-width:var(--measure);margin:0 auto;overflow-wrap:break-word;} .ch-body::after{content:'';display:block;clear:both;} @media (min-width:1180px){ .ch-body{margin-left:max(1.25rem,calc((100% - var(--measure) - var(--gut) - var(--margin)) / 2));margin-right:auto;} .note{float:right;clear:right;width:var(--margin);margin:.35rem calc(-1 * (var(--margin) + var(--gut))) 1.2rem 0 !important;} .wide{margin-right:calc(-1 * (var(--margin) + var(--gut)));} } .ch-head{margin:0 0 2rem;} .ch-num{font-family:var(--font-heading);font-size:.88rem;color:var(--text3);margin:0 0 .5rem;font-variant-numeric:tabular-nums;} .ch-head h2{font-family:var(--font-display);font-style:normal;font-weight:400;font-size:clamp(min(2.05rem,11vw),4.2vw,3rem);overflow-wrap:break-word;line-height:1.05;letter-spacing:-.01em;color:var(--text);margin:0 0 .6rem;} .ch-dek{font-size:1.12rem;line-height:1.5;color:var(--text2);margin:0;} .ch-body > p,.ch-body li{font-size:1.07rem;line-height:1.78;} .ch-body > p{margin:0 0 1.1rem;} .ch-body ul,.ch-body ol{margin:0 0 1.2rem 1.25rem;} .ch-body li{margin:0 0 .45rem;} .ch-body h3{font-family:var(--font-heading);font-size:1.15rem;font-weight:600;color:var(--text);margin:2.4rem 0 .7rem;} .ch-body strong{font-weight:600;color:var(--text);} .ch-body a{color:var(--acc);text-underline-offset:3px;} .ch-body code{font-family:var(--font-mono);font-size:.86em;background:var(--bg3);padding:.08em .35em;border-radius:5px;} .ch-body .call{font-size:1rem;line-height:1.7;margin:1.6rem 0;} /* margin notes: the common misreads live beside the prose */ .note{font-size:.92rem;line-height:1.62;color:var(--text2);border-left:2px solid var(--border2);padding:.1rem 0 .1rem .95rem;margin:1.5rem 0;} .note-k{display:block;font-family:var(--font-heading);font-weight:600;font-size:.84rem;color:var(--text);margin:0 0 .3rem;} /* equations whose symbols explain themselves */ .eq{font-family:var(--font-display);font-size:clamp(1.18rem,2.5vw,1.5rem);line-height:1.5;text-align:center;color:var(--text);padding:1.1rem .5rem .9rem;margin:1.5rem 0 0;overflow-x:auto;max-width:100%;} .eq .sym{text-decoration:underline dotted var(--text3);text-decoration-thickness:1.5px;text-underline-offset:.22em;padding:0 .06em;border-radius:4px;cursor:help;transition:background var(--t2) var(--ease-out),text-decoration-color var(--t2);} .eq .sym.hl{background:color-mix(in srgb,var(--acc) 26%,transparent);text-decoration-color:var(--acc);} .legend{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.45rem 1.1rem;margin:.4rem 0 1.6rem;padding:1rem 1.15rem;border:1px solid var(--border);border-radius:14px;font-size:.96rem;line-height:1.55;} .lg-row{display:contents;} .lg-row dt{font-family:var(--font-display);color:var(--text);white-space:nowrap;padding:0 .3rem;border-radius:5px;align-self:start;transition:background var(--t2) var(--ease-out);} .lg-row dd{margin:0;color:var(--text2);transition:color var(--t2);} .lg-row.hl dt{background:color-mix(in srgb,var(--acc) 26%,transparent);} .lg-row.hl dd{color:var(--text);} .eq-line{font-family:var(--font-display);font-size:1.2rem;text-align:center;color:var(--text);margin:1.2rem 0 1.4rem;line-height:1.5;} .eq-line .dim{color:var(--text3);font-size:.85em;} /* small structured blocks */ .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1.4rem 0 1.6rem;} .pair.three{grid-template-columns:repeat(3,minmax(0,1fr));} .pair > div{border:1px solid var(--border);border-radius:14px;padding:1rem 1.1rem;background:var(--surface);} .pair h4{font-family:var(--font-heading);font-size:.98rem;font-weight:600;margin:0 0 .15rem;color:var(--text);} .pair .rate{font-family:var(--font-mono);font-size:.8rem;color:var(--acc);margin:0 0 .5rem;} .pair p{font-size:.95rem;line-height:1.6;color:var(--text2);margin:0;} @media (max-width:760px){ .pair.three{grid-template-columns:minmax(0,1fr);} } @media (max-width:560px){ .pair{grid-template-columns:minmax(0,1fr);} } .road,.chain{counter-reset:r;list-style:none;margin:1.2rem 0 1.6rem !important;padding:0;border-left:1px solid var(--border2);} .road li,.chain li{counter-increment:r;position:relative;padding:0 0 .75rem 1.2rem;margin:0 !important;font-size:1rem !important;line-height:1.6 !important;color:var(--text2);} .road li::before,.chain li::before{content:'';position:absolute;left:-4px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--border2);transition:background var(--t3),transform var(--t3) var(--ease-spring);} .road a{color:var(--text);font-weight:600;text-decoration:none;border-bottom:1px solid var(--border2);} .road a:hover{border-bottom-color:var(--acc);} .chain b{color:var(--text);font-weight:600;} .chain li.m::before{background:var(--acc);} .ch-body .quiz{margin:2.4rem 0 0;} .ch-body .quiz-fb.right,.ch-body .quiz-fb.wrong{animation:ss-pop var(--t3) var(--ease-spring);} .ch-body .T{font-size:.95rem;} .ch-body .T td,.ch-body .T th{vertical-align:top;} .tbl{overflow-x:auto;margin:1.2rem 0 1.6rem;} .tbl .T{margin:0;} .ch-body pre.code{font-size:.8rem;} .wide pre.code{margin:0;} .coda{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--border);color:var(--text2);} .foot{border-top:1px solid var(--border);padding:2.2rem 1.25rem 5rem;text-align:center;font-size:.92rem;color:var(--text3);line-height:1.9;} .foot a{color:var(--acc);text-decoration:none;} /* ════════════════════════ motion ════════════════════════ Everything below only applies once session.js has put .ss-motion on (never under prefers-reduced-motion, never with ?still), so a page without JS, a print, or a full-page capture shows every element. */ /* before session.js boots, the hero waits offstage (the snippet sets .ss-pre and removes it by itself after 2.6s if the engine never loads) */ html.ss-pre .hero.stage h1,html.ss-pre .stage-kick,html.ss-pre .stage-lede,html.ss-pre .stage-more > *,html.ss-pre .stage-dev,html.ss-pre .stage-dock{opacity:0;} /* reveal on entry: rise and settle, staggered by --i */ html.ss-motion .rv{opacity:0;transform:translate3d(0,16px,0);transition:opacity var(--t4) var(--ease-out),transform var(--t4) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger));} html.ss-motion .rv.in{opacity:1;transform:none;} /* chapter titles rise through a curtain */ html.ss-motion .ch-head h2.rv,html.ss-motion .hero.stage h1.rv{transform:translate3d(0,.32em,0);clip-path:inset(0 0 100% 0);transition:clip-path var(--t4) var(--ease-out),transform var(--t4) var(--ease-out),opacity var(--t3) var(--ease-out);transition-delay:calc(var(--i,0) * var(--stagger));} html.ss-motion .ch-head h2.rv.in,html.ss-motion .hero.stage h1.rv.in{clip-path:inset(-.2em -.2em -.25em -.2em);transform:none;} /* margin notes slide in from the margin on wide screens */ @media (min-width:1180px){ html.ss-motion .note.rv{transform:translate3d(18px,0,0);} html.ss-motion .note.rv.in{transform:none;} } /* the road: dots light up one after another */ html.ss-motion .road.rv li::before{transform:scale(0);} html.ss-motion .road.rv.in li::before{transform:scale(1);transition-delay:calc(var(--j,0) * 90ms + 200ms);} /* the attract-mode ghost: a finger that demonstrates the instrument */ .ghost{position:absolute;z-index:6;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;pointer-events:none;border:2px solid var(--you);background:color-mix(in srgb,var(--you) 18%,transparent);opacity:0;transform:translate3d(0,0,0);transition:opacity var(--t3);} .ghost.on{opacity:.95;} .ghost::after{content:'';position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--you);opacity:0;} .ghost.tap::after{animation:ss-ripple .6s var(--ease-out);} .ghost.press{background:color-mix(in srgb,var(--you) 42%,transparent);} @keyframes ss-blink{0%,100%{opacity:.25}50%{opacity:1}} @keyframes ss-ripple{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.6)}} @keyframes ss-pop{0%{opacity:0;transform:translateY(6px) scale(.98)}100%{opacity:1;transform:none}} @keyframes ss-done{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 55%,transparent)}100%{box-shadow:0 0 0 7px transparent}} @media (prefers-reduced-motion:reduce){ .arr-rg,.seg-thumb,.kbtn,.tog,.tog::before,.eq .sym,.lg-row dt{transition:none !important;} .dev-state.demo::before,.ghost.tap::after,.arr-rg.just-done .arr-clip,.ch-body .quiz-fb.right,.ch-body .quiz-fb.wrong{animation:none !important;} }