/* ==========================================================================
   drill.css — the whole stylesheet.

   Two views share the page. "cards" shows one flashcard at a time with a
   stage filter and a progress graph; "lab" is a single scrolling page of
   exercises whose solutions stay blurred until revealed. One control block at
   the top right serves both: the view and theme switches joined in a single
   bordered rectangle, and the green save/load buttons under them.

   Sections:
     1  theme tokens          6  progress graph
     2  reset and page        7  summary
     3  header                8  details modal
     4  card                  9  lab
     5  controls             10  responsive and motion
   ========================================================================== */


/* == 1. theme tokens ======================================================
   Dark is the base. Light is applied either explicitly (data-theme="light")
   or, in auto mode, when the OS asks for it. The light values appear twice
   because one selector list cannot cover both "explicit choice" and "inside
   a media query"; the two copies must stay in step.
   ========================================================================== */
:root{
  color-scheme:dark;
  --bg:#0e1613;        /* page background              */
  --glow:#17241e;      /* radial tint behind the header */
  --pane:#151f1a;      /* card, modal, summary, step   */
  --pane-2:#1a2620;    /* title bars                   */
  --edge:#2a3a33;      /* default border               */
  --edge-soft:#22302a; /* internal dividers            */
  --fog:#8fa39a;       /* secondary text               */
  --ink:#e8ede9;       /* primary text                 */
  --amber:#e0a458;     /* accent, commands, cursor     */
  --green:#7fb069;     /* graded "got it", done        */
  --rust:#c0674f;      /* graded "again", warnings     */
  --teal:#6fae9e;      /* the background's own hue, saturated — act tints only */
  --well:rgba(0,0,0,.28);   /* inset code backgrounds */
  --scrim:rgba(6,11,9,.78); /* modal backdrop         */
  --shadow:0 12px 40px rgba(0,0,0,.35);
  --shadow-lg:0 24px 70px rgba(0,0,0,.6);
  --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
}

/* Light palette — copy 1 of 2: auto mode following the OS. */
@media (prefers-color-scheme:light){
  :root[data-theme="auto"],:root:not([data-theme]){
    color-scheme:light;
    --bg:#f5f2ea; --glow:#eae4d6;
    --pane:#fffdf7; --pane-2:#f0ebe0;
    --edge:#d9d0be; --edge-soft:#e6dfd0;
    --fog:#6a6355; --ink:#221e18;
    --amber:#9a5d16; --green:#3d6a2b; --rust:#a03a20; --teal:#2e6b5c;
    --well:rgba(0,0,0,.05);
    --scrim:rgba(60,52,40,.42);
    --shadow:0 10px 30px rgba(90,78,58,.16);
    --shadow-lg:0 20px 56px rgba(90,78,58,.26);
  }
}
/* Light palette — copy 2 of 2: chosen explicitly. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f5f2ea; --glow:#eae4d6;
  --pane:#fffdf7; --pane-2:#f0ebe0;
  --edge:#d9d0be; --edge-soft:#e6dfd0;
  --fog:#6a6355; --ink:#221e18;
  --amber:#9a5d16; --green:#3d6a2b; --rust:#a03a20; --teal:#2e6b5c;
  --well:rgba(0,0,0,.05);
  --scrim:rgba(60,52,40,.42);
  --shadow:0 10px 30px rgba(90,78,58,.16);
  --shadow-lg:0 20px 56px rgba(90,78,58,.26);
}

/* Tints are mixed from the accents, so they follow whichever palette is live. */
:root{
  --amber-wash:color-mix(in srgb,var(--amber) 9%,transparent);
  --amber-line:color-mix(in srgb,var(--amber) 22%,transparent);
  --amber-edge:color-mix(in srgb,var(--amber) 45%,transparent);
  --green-edge:color-mix(in srgb,var(--green) 50%,transparent);
  --green-wash:color-mix(in srgb,var(--green) 13%,transparent);
  --rust-edge:color-mix(in srgb,var(--rust) 50%,transparent);
  --rust-wash:color-mix(in srgb,var(--rust) 13%,transparent);
  --fog-wash:color-mix(in srgb,var(--fog) 10%,transparent);
}


/* == 2. reset and page ==================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}

/* Panels are shown and hidden through the `hidden` attribute. Several classes
   below set `display`, which would otherwise outrank the browser's own
   [hidden] rule and keep them on screen. */
[hidden]{display:none !important}

body{
  min-height:100%;
  background:radial-gradient(1200px 600px at 50% -10%,var(--glow) 0%,transparent 60%),var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.55;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:40px 20px 64px;
}
header,main{width:100%;max-width:760px}
header{margin-bottom:26px}

/* One focus ring for every interactive element. */
:is(button,a,input,[tabindex]):focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* Serif body text, shared by card faces, modal prose, lab tasks and the lab
   intro — so inline <code> and <b> only need styling once. */
.prose{font-family:var(--serif);color:var(--ink)}
.prose b{font-weight:600}
.prose code{
  font-family:var(--mono);font-size:.82em;color:var(--amber);
  background:var(--amber-wash);border:1px solid var(--amber-line);
  border-radius:3px;padding:1px 6px;white-space:nowrap;
}
/* An alias chip: a code span that turned out to name something in
   examples/gitconfig. It reads as code with an underline, so that it is
   recognisably clickable without becoming a second kind of button. */
.prose .alias{
  font-family:var(--mono);font-size:.82em;color:var(--green);
  background:var(--green-wash);border:1px solid var(--green-edge);
  border-radius:3px;padding:1px 6px;white-space:nowrap;cursor:pointer;
  text-decoration:underline dotted;text-underline-offset:3px;
  transition:border-color .15s,background .15s;
}
.prose .alias:hover,.prose .alias:focus-visible{
  border-color:var(--green);background:color-mix(in srgb,var(--green) 16%,transparent);
}

/* A small figure inside a card answer, written as "|" lines in the data. */
.prose .drawing{
  display:block;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--fog);
  background:var(--well);border:1px solid var(--edge-soft);border-radius:4px;
  padding:11px 13px;margin-top:12px;white-space:pre;overflow-x:auto;
}
/* A terminal block embedded inside an answer. */
.prose .cmdline{
  display:block;font-family:var(--mono);font-size:13.5px;color:var(--amber);
  background:var(--well);border:1px solid var(--edge-soft);border-radius:4px;
  padding:8px 12px;margin-top:12px;white-space:pre-wrap;
}


/* == 3. header ============================================================ */
.topline{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}
.prompt{color:var(--fog)}
.prompt b{color:var(--ink);font-weight:600}
.prompt .cmd{color:var(--amber)}
.cursor{
  display:inline-block;width:8px;height:16px;background:var(--amber);
  vertical-align:text-bottom;margin-left:2px;animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.sub{margin-top:10px;color:var(--fog);font-size:13.5px}
.sub code{color:var(--amber);font-size:.92em}
/* Prose link, not a button: the blurb reads as a sentence and the pill shape
   of .link would break the line. */
.sub a{color:var(--amber);text-decoration:none;border-bottom:1px solid var(--amber-edge)}
.sub a:hover{border-bottom-color:var(--amber)}

/* A panel groups one cluster of interface into a rectangle of its own — the
   two filters, or the deck's grading row, graph and legend. Quieter than the
   card: same surface, no shadow, tighter radius. */
.panel{
  background:var(--pane);border:1px solid var(--edge);border-radius:6px;
  padding:14px 16px;margin-top:16px;
}
.panel > :first-child{margin-top:0}

/* Stage chips and the small header buttons share one pill shape. */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:16px}
.chip,.tbtn{
  font-family:var(--mono);font-size:11.5px;color:var(--fog);
  background:transparent;border:1px solid var(--edge);border-radius:3px;
  padding:4px 10px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
}
.chip:hover{color:var(--ink);border-color:var(--fog)}
.tbtn:hover{color:var(--amber);border-color:var(--amber);background:var(--amber-wash)}
.chip.on{color:var(--bg);background:var(--amber);border-color:var(--amber);font-weight:600}

/* Keyword filter. Sits above the stage chips and composes with them. */
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
#search{
  flex:1;min-width:200px;max-width:360px;
  font-family:var(--mono);font-size:12px;color:var(--ink);
  background:var(--pane);border:1px solid var(--edge);border-radius:3px;
  padding:6px 10px;
  transition:border-color .15s;
}
#search::placeholder{color:var(--fog);opacity:.75}
#search:focus{border-color:var(--amber)}
.fcount{font-size:11.5px;color:var(--fog)}
.fcount.none{color:var(--rust)}

/* The control column at the top right: switches first, progress under them. */
.console{margin-left:auto;display:flex;flex-direction:column;align-items:stretch;gap:9px}

/* The view and theme switches share one border and one width, so the pair
   reads as a single block rather than two widgets that happen to be near
   each other. Nothing is allowed between them. */
.switches{
  display:flex;flex-direction:column;
  border:1px solid var(--edge);border-radius:4px;overflow:hidden;
  background:var(--pane);
}
.switches .seg{border:0;border-radius:0}
.switches .seg + .seg{border-top:1px solid var(--edge)}
.switches .seg button{flex:1}

/* Segmented switch — used for both the view and the theme. */
.seg{display:flex;border:1px solid var(--edge);border-radius:3px;overflow:hidden}
.seg button{
  font-family:var(--mono);font-size:11.5px;color:var(--fog);
  background:transparent;border:0;border-left:1px solid var(--edge);
  padding:4px 10px;cursor:pointer;transition:color .15s,background .15s;
}
.seg button:first-child{border-left:0}
.seg button:hover{color:var(--ink)}
.seg button.on{color:var(--bg);background:var(--amber);font-weight:600}

/* Progress files. Green throughout — amber belongs to the switches above,
   and the two rows must not read as the same kind of control. */
.progress{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:7px}
.pbtn{color:var(--green);border-color:var(--green-edge)}
.pbtn:hover{color:var(--green);border-color:var(--green);background:var(--green-wash)}

/* Progress readouts: bound filename, transient status message. The buttons
   above are the only thing allowed to decide how wide this column is, so the
   readouts are taken out of its intrinsic width by `width:0` and given the
   width back by a percentage minimum, which intrinsic sizing ignores. Without
   this a long filename stretches the column, and the switches stretch with it.
   The row keeps its height whether or not anything is in it, so a message
   arriving moves nothing. */
.readout{
  display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;
  gap:2px 7px;width:0;min-width:100%;min-height:14px;line-height:1.2;
}
.tfile{
  font-size:11.5px;color:var(--green);opacity:.8;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tstatus{font-size:11.5px;color:var(--fog);opacity:0;transition:opacity .2s}
.tstatus.show{opacity:.85}
.tstatus.err{color:var(--rust)}


/* == 4. card ============================================================== */
.pane{
  background:var(--pane);border:1px solid var(--edge);border-radius:8px;
  box-shadow:var(--shadow);
  min-height:320px;display:flex;flex-direction:column;overflow:hidden;
  cursor:pointer;transition:transform .12s ease;
}
.pane:active{transform:scale(.995)}

/* Title bar, reused by the card and the details modal. */
.bar{
  display:flex;align-items:center;gap:12px;
  background:var(--pane-2);border-bottom:1px solid var(--edge-soft);
  padding:10px 14px;font-size:12px;color:var(--fog);
}
.dots{display:flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--edge);display:block}
.bar .grow{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .count{font-variant-numeric:tabular-nums}

/* `.swap` is the brief fade while question and answer exchange places. */
.face{
  flex:1;padding:28px 34px 18px;
  display:flex;flex-direction:column;gap:15px;
  transition:opacity .18s ease,transform .18s ease;
}
.face.swap{opacity:0;transform:translateY(4px)}
.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--amber)}
.eyebrow.ans{color:var(--green)}
.prose.q{font-size:20px;line-height:1.5;max-width:58ch}
.prose.a{font-size:17.5px;line-height:1.6;max-width:60ch}

/* The footnote on the answer side of a card the lab practises: quiet in the
   fog colour, green when it is about to take the reader there. */
.labnote{
  align-self:flex-start;max-width:60ch;margin-top:2px;padding:0;
  border:0;background:none;cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--fog);
}
.labnote:hover,.labnote:focus-visible{color:var(--green)}

.footrow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 34px 16px;font-size:12px;color:var(--fog);
}
.footrow .hint{opacity:.75}


/* == 5. controls ========================================================== */
.controls{display:flex;justify-content:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.controls button,.summary button,.gate-actions button{
  font-family:var(--mono);font-size:14px;border-radius:4px;padding:9px 18px;
  cursor:pointer;border:1px solid var(--edge);background:transparent;color:var(--ink);
  transition:border-color .15s,color .15s,background .15s;
}
.controls button:hover,.summary button:hover,.gate-actions button:hover{border-color:var(--fog)}
.ghost{color:var(--fog);min-width:52px}
.ghost:hover{color:var(--ink)}
.green{border-color:var(--green-edge);color:var(--green)}
.green:hover{background:var(--green-wash);border-color:var(--green)}
.rust{border-color:var(--rust-edge);color:var(--rust)}
.rust:hover{background:var(--rust-wash);border-color:var(--rust)}
.amber{border-color:var(--amber-edge);color:var(--amber)}
.amber:hover{background:var(--amber-wash);border-color:var(--amber)}

.keys{margin-top:16px;text-align:center;font-size:12px;color:var(--fog);opacity:.7}


/* == 6. progress graph ====================================================
   One node per visible card, laid out like a commit line. Blank spacers mark
   stage boundaries, but only while the deck is still in its natural order.
   ========================================================================== */
.graph{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;margin-top:28px}
.stage-gap{width:10px;height:1px}
.node{
  width:11px;height:11px;border-radius:50%;
  border:1.5px solid var(--edge);background:transparent;padding:0;cursor:pointer;
  transition:border-color .15s,background .15s,transform .12s;
}
.node:hover{transform:scale(1.3);border-color:var(--fog)}
.node.got{background:var(--green);border-color:var(--green)}
.node.again{background:var(--rust);border-color:var(--rust)}
.node.cur{border-color:var(--amber);box-shadow:0 0 0 3px var(--amber-line)}


/* == 7. summary =========================================================== */
.summary{
  background:var(--pane);border:1px solid var(--edge);border-radius:8px;
  padding:38px 36px;box-shadow:var(--shadow);
}
.summary .status{font-size:14px;color:var(--fog);margin-bottom:14px}
.summary .status b{color:var(--green);font-weight:600}
.summary .status b.r{color:var(--rust)}
.summary h2{font-family:var(--serif);font-size:24px;font-weight:600;margin-bottom:10px}
.summary p{font-family:var(--serif);font-size:16.5px;max-width:54ch;margin-bottom:24px}
.summary .row{display:flex;gap:12px;flex-wrap:wrap}


/* == 8. details modal ===================================================== */
.backdrop{
  position:fixed;inset:0;background:var(--scrim);z-index:50;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal{
  background:var(--pane);border:1px solid var(--edge);border-radius:8px;
  width:100%;max-width:660px;max-height:86vh;
  display:flex;flex-direction:column;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.mbody{padding:26px 28px 28px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}
.mbody h3{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.4;max-width:52ch}
.mbody .prose{font-size:16.5px;line-height:1.62;max-width:58ch}

/* The session gate. Same overlay as the details modal, one step heavier: the
   page behind it is blurred as well as dimmed, since it is not a thing you can
   dismiss by clicking away from it. */
.gate{z-index:60;backdrop-filter:blur(2px)}
.gatebox{max-width:520px}
.gatebox .mbody{gap:14px}
.gate-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
body.gated{overflow:hidden}

/* The alias pop-up. Above the details modal, because a chip can be sitting in
   the modal's own prose. Narrower than the details panel: it holds one
   definition, not a card's whole fine print. */
.apop{z-index:55}
.aliasbox{max-width:560px}
.aliasbox .mbody{gap:14px}
.aliasbox h3{font-family:var(--mono);font-size:16px;color:var(--green)}
.aliasbox .figure{color:var(--ink);white-space:pre-wrap;word-break:break-word}
.aliasbox .prose.small{font-size:14.5px;color:var(--fog)}
.aliasbox .prose.small code{font-size:.86em}
.aliasbox .cmdline{margin-bottom:11px}

/* Pre-rendered ASCII figure. */
.figure{
  font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--fog);
  background:var(--well);border:1px solid var(--edge-soft);border-radius:5px;
  padding:14px 16px;overflow-x:auto;white-space:pre;
}
.links{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--amber);text-decoration:none;
  border:1px solid var(--amber-edge);border-radius:4px;padding:7px 13px;
  transition:background .15s,border-color .15s,color .15s;
}
.link:hover{background:var(--amber-wash);border-color:var(--amber)}
.link .arrow{opacity:.7}
.link.secondary{color:var(--fog);border-color:var(--edge)}
.link.secondary:hover{background:var(--fog-wash);border-color:var(--fog);color:var(--ink)}


/* == 9. lab ===============================================================
   A single scrolling page of exercises. Each solution is blurred and inert
   until its step gets the .open class.
   ========================================================================== */
.lab-intro{
  background:var(--pane);border:1px solid var(--edge);border-radius:8px;
  padding:24px 28px;margin-bottom:26px;box-shadow:var(--shadow);
}
.lab-intro h2{font-size:22px;font-weight:600;margin-bottom:10px}
.lab-intro p{font-size:16px;max-width:60ch}
.lab-intro p + p{margin-top:10px}
.lab-count{margin-top:16px;font-family:var(--mono);font-size:12px;color:var(--fog)}
.lab-count b{color:var(--green)}

/* Act divider: a label with a rule running to the right margin. */
.act{
  display:flex;align-items:center;gap:12px;
  margin:34px 0 16px;font-size:11px;letter-spacing:.18em;color:var(--amber);
}
.act::after{content:'';flex:1;height:1px;background:var(--edge)}

/* Act colour-coding. The acts cycle through four tints — amber, green, teal,
   rust — and each act's tint is mixed faintly into the panes of its own steps,
   so that crossing an act boundary is visible mid-scroll without any step
   shouting over its text. The divider label and its rule take the same tint at
   readable strength; drill.js deals the classes, wrapping after four. The
   mixes lean on the live palette, so both themes come out right on their own. */
.act-c1{--act-tint:var(--amber)}
.act-c2{--act-tint:var(--green)}
.act-c3{--act-tint:var(--teal)}
.act-c4{--act-tint:var(--rust)}
.act[class*="act-c"]{color:var(--act-tint)}
.act[class*="act-c"]::after{background:color-mix(in srgb,var(--act-tint) 30%,var(--edge))}
.step[class*="act-c"]{
  background:color-mix(in srgb,var(--act-tint) 6%,var(--pane));
  border-color:color-mix(in srgb,var(--act-tint) 20%,var(--edge));
}

/* Folding. The divider heads its act, and the round button sits at the far end
   of the rule: .act::after is the rule and takes flex order 0, so ordering the
   button after it puts it at the right margin whatever the label's length. The
   chevron turns a quarter clockwise when the act is shut, so the button reads
   as a hinge rather than a switch. The tally rides in beside it under the same
   order, so a shut act still says what it is hiding. Colour is inherited from
   the divider, which is where the act tint and the optional muting live. */
.act-tally{
  order:1;flex:none;
  font-family:var(--mono);font-size:11px;letter-spacing:0;color:var(--fog);
  font-variant-numeric:tabular-nums;
}
.act-tally.all-done{color:var(--green)}
.act-fold{
  order:1;flex:none;
  width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  color:inherit;background:transparent;border:1px solid var(--edge);
  cursor:pointer;transition:background .15s,border-color .15s;
}
.act-fold:hover{background:var(--well);border-color:currentColor}
.act-fold .chev{font-size:11px;line-height:1;transition:transform .18s ease}
.act-group.folded .act-fold .chev{transform:rotate(-90deg)}
.act-group.folded .act-steps{display:none}

/* An optional act is marked rather than hidden — readers can skip it. The
   muted label and rule outrank the tint by order, so an optional divider stays
   quiet; its steps keep the tint, which is where the colour-coding lives. */
.act.optional{color:var(--fog)}
.act .badge{
  font-size:10px;letter-spacing:.12em;color:var(--bg);
  background:var(--fog);border-radius:3px;padding:2px 7px;
}
.act.optional::after{background:var(--edge-soft)}

.step{
  background:var(--pane);border:1px solid var(--edge);border-radius:8px;
  padding:22px 26px;margin-bottom:14px;box-shadow:var(--shadow);
}
.step-head{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.step-num{font-family:var(--mono);font-size:12px;color:var(--amber);font-variant-numeric:tabular-nums}
.step-head h3{font-family:var(--serif);font-size:18px;font-weight:600;flex:1}
.step-done{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11.5px;color:var(--fog);cursor:pointer}
.step-done input{accent-color:var(--green);cursor:pointer}
.step.done .step-head h3{color:var(--fog)}
.step.done .step-num{color:var(--green)}
.step-task{font-size:16.5px;line-height:1.6;max-width:62ch}
.step-reveal{margin-top:16px}
.step-reveal .tbtn{margin-bottom:10px}

/* The solution. Blurred and unselectable until revealed; the block itself is
   clickable, so the whole area reveals rather than just the button. */
.solution{
  font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--amber);
  background:var(--well);border:1px solid var(--edge-soft);border-radius:5px;
  padding:14px 16px;overflow-x:auto;white-space:pre;
  filter:blur(6px);user-select:none;cursor:pointer;
  transition:filter .22s ease;
}
.step.open .solution{filter:none;user-select:text;cursor:auto}


/* == 10. responsive and motion ============================================ */
@media (max-width:560px){
  body{padding:26px 14px 48px}
  /* The control block gets the full width rather than crowding one edge. */
  .console{width:100%;margin-left:0}
  .progress,.readout{justify-content:flex-start}
  .face{padding:22px 20px 12px}
  .footrow{padding:0 20px 14px;flex-wrap:wrap}
  .prose.q{font-size:17.5px}
  .prose.a{font-size:15.5px}
  .node{width:9px;height:9px}
  .mbody{padding:22px 20px 24px}
  .figure{font-size:11px}
  .step{padding:18px}
  .lab-intro{padding:20px 18px}
  .solution{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .cursor{animation:none}
  *{transition:none !important}
}