:root{
    --gold:#ffc94d; --gold2:#ffdf8e; --coral:#ff6b57; --green:#39d98a;
    --ink:#eaf2ff; --dim:#9fb7d8;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html{background:#241b4d;}
  html,body{margin:0;padding:0;}
  body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    color:var(--ink);
    background:linear-gradient(180deg,#241b4d 0%,#4a2560 34%,#a34a66 62%,#e0785a 82%,#f2a95c 100%);
    background-attachment:fixed;
    min-height:100vh;
    touch-action:manipulation;
  }
  .screen{display:none;}
  .screen.active{display:block;}
  .screen:not(.active){display:none !important;}
  /* ============ ACCUEIL ============ */
  #home{max-width:560px;margin:0 auto;padding:18px 14px 40px;}
  #home header{position:relative;text-align:center;padding:8px 0 4px;}
  .brandmark{
    position:absolute;left:0;top:8px;width:118px;padding:0;
    border:0;background:transparent;
    transition:transform .15s ease,opacity .15s ease;
  }
  .brandmark:hover{
    background:transparent;opacity:.94;transform:translateY(-1px);
  }
  .brandmark:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}
  .brandmark img{
    display:block;width:100%;height:auto;opacity:1;filter:none;
  }
  #home h1{font-size:44px;margin:6px 0 0;letter-spacing:2px;text-shadow:0 3px 20px #ffc94d66;}
  #home .tagline{font-size:14px;color:#ffe9c4;margin:2px 0 10px;}
  #hometot{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;font-size:14px;font-weight:800;color:#ffd5dc;margin-bottom:14px;}
  #hometot span{display:flex;align-items:center;gap:6px;}
  .wrow{
    width:100%;display:flex;align-items:center;gap:12px;text-align:left;
    border:2px solid #ffffff2c;background:#00000038;border-radius:16px;
    padding:12px 14px;margin:9px 0;cursor:pointer;color:var(--ink);
  }
  .wrow:active{transform:scale(.985);}
  .wrow .wico{flex:0 0 46px;}
  .wrow .winfo{flex:1;}
  .wrow .wname{font-size:17px;font-weight:800;}
  .wrow .wsub{font-size:11.5px;color:#ffe4c9;margin-top:1px;}
  .wrow .pal{display:inline-block;background:#ffffff22;border-radius:6px;padding:1px 7px;font-size:10px;font-weight:800;margin-top:5px;}
  .wbar{height:6px;border-radius:3px;background:#ffffff1e;margin-top:7px;overflow:hidden;}
  .wbar div{height:100%;background:var(--gold);border-radius:3px;}
  .wcount{font-size:11px;font-weight:800;color:var(--gold2);white-space:nowrap;}
  /* mondes verrouillés */
  .wrow.locked{opacity:.6;cursor:default;}
  .wrow.locked .wico{filter:grayscale(1) brightness(.9);}
  .wrow.locked .wbar div{background:#ffffff40;}
  .wcond{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:#ffd5a1;margin-top:4px;}
  .wcond svg{flex:0 0 auto;}
  .classebadge{background:#39d98a1f;border:1.5px solid #39d98a77;color:#b8ffdc;border-radius:12px;
    padding:8px 12px;font-size:12.5px;font-weight:800;text-align:center;margin:2px 0 10px;}
  /* ============ NIVEAUX ============ */
  #lvscreen{max-width:560px;margin:0 auto;padding:14px 14px 40px;}
  .topnav{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
  .backbtn{border:none;background:#ffffff22;color:var(--ink);border-radius:10px;
    min-width:44px;min-height:44px;padding:8px 13px;font-size:15px;font-weight:800;cursor:pointer;}
  #lvwname{font-size:22px;font-weight:900;}
  #lvwblurb{font-size:13px;color:#ffe4c9;margin:4px 2px 10px;line-height:1.45;}
  /* légende des petits soleils : discrète, lue avant de choisir un niveau */
  #stlegende{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11px;font-weight:700;
    color:#ffe4c9cc;background:#00000030;border-radius:10px;padding:6px 10px;margin:0 0 12px;}
  #stlegende span{display:inline-flex;align-items:center;gap:4px;}
  #stlegende .sunico{flex:0 0 auto;}
  /* rangées égales : toutes les cases d'un monde gardent exactement la même taille */
  #lvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:10px;grid-auto-rows:1fr;}
  .lvcard{
    border:2px solid #ffffff30;background:#00000038;border-radius:14px;
    padding:10px 4px 8px;text-align:center;cursor:pointer;color:var(--ink);
  }
  .lvcard .num{font-size:20px;font-weight:900;}
  .lvcard .st{font-size:12px;margin-top:3px;color:#ffffff55;display:flex;align-items:center;justify-content:center;gap:1px;flex-wrap:wrap;}
  .lvcard .st .stf{display:inline-flex;align-items:center;gap:2px;margin-left:4px;}
  .lvcard.done{border-color:var(--gold);background:#ffc94d24;}
  .lvcard.done .st{color:var(--gold);}
  /* niveaux-découverte (chantier « Comprendre ») : badge sur la carte,
     « Revoir le cours » sous la carte une fois le niveau réussi ; le pied est
     réservé sur toute la grille pour que les cases restent identiques */
  .lvcell{display:flex;flex-direction:column;gap:5px;min-width:0;}
  .lvcell .lvcard{position:relative;width:100%;flex:1;}
  .lvdec{position:absolute;top:4px;right:4px;line-height:0;}
  .lvpied{flex:0 0 38px;height:38px;display:flex;align-items:stretch;}
  .lvcours{flex:1;border:1.5px solid #ffc94d66;background:#ffc94d14;color:var(--gold2);border-radius:9px;
    padding:2px 4px;font-size:10.5px;font-weight:800;cursor:pointer;line-height:1.2;}
  /* ============ JEU ============ */
  #play{min-height:100vh;flex-direction:column;padding:8px;gap:8px;max-width:640px;margin:0 auto;}
  #play.screen{display:none;}
  #play.screen.active{display:flex;}
  #topbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
  #topbar .name{font-size:14px;font-weight:800;flex:1;min-width:120px;line-height:1.25;}
  #topbar .name small{display:block;font-weight:600;color:#ffe4c9;font-size:11px;}
  #fruitctr{font-size:12.5px;font-weight:800;color:#ffd5dc;display:flex;align-items:center;gap:4px;white-space:nowrap;}
  .iconbtn{border:none;background:#ffffff22;color:var(--ink);border-radius:10px;
    min-width:44px;min-height:44px;padding:8px 11px;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap;}
  #rotatehint{font-size:12px;color:#ffe9c4;background:#00000042;border-radius:10px;padding:6px 10px;display:none;}
  #introline{font-size:13px;line-height:1.4;background:#00000042;border-radius:10px;padding:8px 11px;color:#ffeeda;}
  #defiline{display:none;font-size:12px;font-weight:700;line-height:1.4;color:#ffe9c4;
    background:#ffc94d1a;border:1px solid #ffc94d44;border-radius:10px;padding:6px 10px;}
  /* Coup de pouce : explication textuelle, rayons et fractions bien composées. */
  #hintov{position:fixed;inset:0;background:#10182eb8;display:none;align-items:center;justify-content:center;z-index:60;padding:16px;}
  #hintov.show{display:flex;}
  #hintcard{background:#1c2848;border:2px solid #ffc94d55;border-radius:18px;padding:18px 16px 14px;
    max-width:410px;width:100%;max-height:min(85vh,720px);overflow-y:auto;box-shadow:0 16px 60px #00000088;}
  #hinttitle{font-size:17px;font-weight:900;color:var(--gold);margin-bottom:6px;}
  #hinttext{font-size:14px;line-height:1.5;color:#ffeeda;margin-bottom:4px;}
  .hline{background:#ffffff0e;border-radius:12px;padding:10px 8px 11px;margin:10px 0;}
  .hsvg{width:100%;display:block;margin-bottom:6px;}
  .slbl{font-size:17px;font-weight:800;text-anchor:middle;paint-order:stroke;stroke:#101a33;stroke-width:4px;}
  .sref{font-size:13px;font-weight:700;fill:#d8c6ae;}
  .href{background:#ffffff08;border-radius:12px;padding:5px 8px 2px;margin:8px 0 2px;}
  .href svg{width:100%;display:block;}
  .heq{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;color:#fff;font-size:18px;font-weight:800;row-gap:5px;}
  .heq .op{margin:0 7px;}
  /* un membre d'égalité ne se coupe jamais : le retour à la ligne tombe avant un = */
  .heqseg{display:inline-flex;align-items:center;white-space:nowrap;}
  .frac{display:inline-flex;flex-direction:column;text-align:center;margin:0 4px;line-height:1.1;}
  .frac .fn{border-bottom:2.5px solid #fff;padding:0 6px 2px;}
  .frac .fd{padding:2px 6px 0;}
  /* fraction empilée citée DANS une phrase (règle R5) : petite, calée au milieu */
  .fracin{font-size:.72em;font-weight:800;vertical-align:middle;margin:0 3px;line-height:1.05;}
  .fracin .fn{border-bottom-width:1.5px;padding:0 3px 1px;}
  .fracin .fd{padding:1px 3px 0;}
  #hintclose{display:block;margin:12px auto 0;background:var(--gold);color:#4a2b10;border:none;border-radius:11px;
    padding:10px 20px;font-weight:800;font-size:14px;cursor:pointer;}
  /* « D'où vient Solèy ? » : la mention complète de Refraction (patron du Coup de pouce) */
  #aproposov{position:fixed;inset:0;background:#10182eb8;display:none;align-items:center;justify-content:center;z-index:75;padding:16px;}
  #aproposov.show{display:flex;}
  #aproposcard{background:#1c2848;border:2px solid #ffc94d55;border-radius:18px;padding:18px 16px 14px;
    max-width:430px;width:100%;max-height:min(85vh,620px);overflow-y:auto;box-shadow:0 16px 60px #00000088;}
  #aproposti{font-size:17px;font-weight:900;color:var(--gold);margin-bottom:6px;}
  #aproposte{font-size:14px;line-height:1.6;color:#ffeeda;margin:0;}
  #aproposok{display:block;margin:14px auto 0;background:var(--gold);color:#4a2b10;border:none;border-radius:11px;
    min-height:44px;padding:10px 20px;font:inherit;font-weight:800;font-size:14px;cursor:pointer;}
  /* Point de cours (chantier « Comprendre », lot 1) : panneau plein écran sur le
     patron du Coup de pouce ; la cascade se dessine et le texte suit son rythme
     (délais CSS --win-*, mêmes keyframes que la cinématique de victoire). */
  #coursov{position:fixed;inset:0;background:#10182ecc;display:none;align-items:center;justify-content:center;z-index:70;padding:10px;}
  #coursov.show{display:flex;}
  #courscard{background:#1c2848;border:2px solid #ffc94d55;border-radius:18px;padding:16px 16px 12px;
    max-width:480px;width:100%;max-height:min(94vh,860px);overflow-y:auto;box-shadow:0 16px 60px #00000088;}
  #courssur{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:#ffd5a1;}
  #courstitre{font-size:22px;font-weight:900;color:var(--gold);margin:1px 0 8px;}
  #coursbody .cscene{background:#101a33;border-radius:12px;padding:8px 6px;}
  #coursbody .cfade{opacity:0;animation:win-label .35s ease var(--win-delay,0s) both;}
  #coursbody .cligne{opacity:0;animation:win-label .5s ease var(--win-delay,0s) both;}
  #coursbody p.cligne{font-size:14px;line-height:1.5;color:#ffeeda;margin:9px 2px;}
  #coursbody .ceq{margin:10px 0 2px;}
  .cpredire{background:#8fd0ff14;border:1.5px solid #8fd0ff55;border-radius:12px;padding:10px 12px 12px;margin:12px 0;}
  .cpredire p{margin:0 0 10px;font-size:14px;line-height:1.5;color:#dceaff;}
  #cpredirebtn{display:block;margin:0 auto;background:#2c3f6e;color:#dceaff;border:1.5px solid #8fd0ff88;border-radius:11px;
    min-height:44px;padding:9px 18px;font:inherit;font-weight:800;cursor:pointer;}
  .creponse{margin:0;font-size:14.5px;font-weight:800;color:#bfe2ff;text-align:center;animation:win-label .45s ease both;}
  .csavoir{background:linear-gradient(160deg,#ffc94d22,#ffc94d0d);border:2px solid var(--gold);border-radius:14px;
    padding:10px 12px 12px;margin:14px 0 4px;box-shadow:0 4px 18px #ffc94d22;}
  .csavoirtitre{font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);}
  .csavoir p{margin:6px 0 0;font-size:14.5px;font-weight:700;line-height:1.5;color:#fff3c4;}
  /* « J'ai compris ! » vit À LA FIN du cours : pour l'atteindre il faut être
     descendu jusqu'en bas (décision de Gwenael, 14/08 — comme un texte qu'on fait
     défiler avant de valider). Seule la flèche est épinglée, pour dire le chemin. */
  #coursbtns{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:16px;}
  #coursbas{position:sticky;bottom:0;height:0;z-index:3;}
  /* Voile de bas de panneau : il DOIT descendre jusqu'au bord visible, sinon le texte
     réapparaît en pleine lumière sous la zone estompée (défaut vu par Gwenael, 15/08).
     L'ancre collante s'arrête au bord du contenu : les 12 px de remplissage bas et les
     16 px latéraux se rattrapent en débords négatifs. Le panneau étant à défilement,
     ses coins arrondis écrêtent proprement ce débord — aucun angle carré. */
  #coursbas::before{content:'';position:absolute;left:-16px;right:-16px;bottom:-12px;height:70px;
    background:linear-gradient(to top,#1c2848 34%,#1c2848dd 62%,#1c284800);pointer-events:none;}
  /* pastille-flèche : chevron DESSINÉ (le caractère « ⌄ » se posait trop haut dans le
     rond et rendait fin), posée bas dans le voile pour ne pas s'asseoir sur le texte ;
     on peut appuyer dessus pour descendre d'un écran */
  #coursfleche{position:absolute;left:50%;bottom:-4px;width:34px;height:34px;padding:0;
    display:flex;align-items:center;justify-content:center;
    background:#243358;color:var(--gold);border:1.5px solid #ffc94d66;border-radius:50%;
    font:inherit;line-height:0;cursor:pointer;
    box-shadow:0 4px 14px #0b122899;animation:cfleche 1.3s ease-in-out infinite;}
  @keyframes cfleche{0%,100%{transform:translate(-50%,-2px);}50%{transform:translate(-50%,4px);}}
  #courscard:not(.deborde) #coursbas,#courscard.enbas #coursbas{visibility:hidden;}
  #coursbody{padding-bottom:30px;}
  #coursok{background:var(--gold);color:#4a2b10;border:none;border-radius:11px;min-height:44px;
    padding:10px 20px;font:inherit;font-weight:800;font-size:14px;cursor:pointer;}
  #boardbox{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 10px 40px #00000055;}
  /* `touch-action:none` : sans lui, un doigt qui part d'une pièce POSÉE fait défiler
     la page et le navigateur annule le geste — on ne pourrait jamais la déplacer.
     Mesuré avant de le poser (17/08) : la page du jeu ne défile pas d'un pixel sur
     390×844, 320×700 ni 768×1024, la règle ne retire donc rien. Dans l'atelier, qui
     défile de 60 px, tout le reste de la page reste évidemment défilable. */
  #board{display:block;width:100%;height:auto;background:#16223f;touch-action:none;}
  #toolbox{display:flex;gap:8px;flex-wrap:wrap;padding:9px;background:#00000042;border-radius:14px;min-height:60px;align-items:center;}
  .chip{
    width:58px;height:68px;border-radius:12px;border:2px solid #ffffff2e;background:#1d2c52;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;
    padding:0;color:inherit;font:inherit;transition:transform .12s;
    /* GLISSER-DÉPOSER : sans ceci, un doigt qui part d'une pièce fait défiler la page
       au lieu de la tirer. Posé sur la PIÈCE seulement — le plateau et le reste de
       l'écran gardent leur défilement normal. */
    touch-action:none;
  }
  /* la pièce qui suit le doigt ; `pointer-events:none` pour qu'elle ne se mette
     jamais entre le doigt et la case visée */
  .fantome{position:fixed;z-index:60;width:56px;height:56px;margin:-28px 0 0 -28px;
    pointer-events:none;opacity:.94;filter:drop-shadow(0 7px 16px #000a);}
  .fantome svg{width:100%;height:100%;display:block;}
  /* la case visée s'allume — verte si la pièce peut s'y poser, rouge sinon : l'élève
     sait AVANT de lâcher, il n'a pas à deviner */
  #cible{position:absolute;display:none;pointer-events:none;box-sizing:border-box;
    border:3px solid var(--gold);border-radius:9px;background:#ffc94d24;z-index:5;}
  #cible.non{border-color:#ff7a6b;background:#ff7a6b24;}
  body.entirage{cursor:grabbing;}
  .chip svg{width:42px;height:42px;}
  .chip span{font-size:9.5px;color:var(--dim);font-weight:700;text-align:center;}
  .chip.sel{border-color:var(--gold);background:#33406e;transform:translateY(-3px);}
  .chip.used{opacity:.26;pointer-events:none;}
  #status{font-size:12.5px;line-height:1.5;color:#ffd9c2;min-height:18px;padding:0 3px;}
  #status .ok{color:var(--green);font-weight:700;}
  #status .bad{color:#ff9c8a;}
  /* paysage : plateau à son vrai ratio, commandes lisibles dans la colonne de droite */
  @media (orientation:landscape){
    #play{--sidebar-min:clamp(220px,30vw,320px);flex-direction:row;max-width:none;width:100%;height:100vh;height:100dvh;min-height:0;
      overflow:hidden;align-items:stretch;justify-content:center;padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));}
    #playleft{flex:0 0 auto;height:auto;width:auto;min-width:0;min-height:0;
      max-width:calc(100% - var(--sidebar-min) - 5px);aspect-ratio:var(--board-ratio,3 / 2);
      display:flex;align-items:center;justify-content:center;}
    #playleft #boardbox{flex:1;width:100%;height:100%;max-width:none;max-height:none;display:flex;}
    #board{width:100%;height:100%;max-width:100%;max-height:100%;}
    #playright{width:auto;min-width:0;max-width:420px;flex:1 1 var(--sidebar-min);overflow-y:auto;padding-right:2px;}
    #topbar,#introline,#toolbox,#status{flex-shrink:0;}
    #rotatehint{display:none !important;}
    body.immersive{overflow:hidden;}
    body.immersive #play{height:100vh;height:100dvh;min-height:0;gap:5px;
      padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));}
    body.immersive #introline{display:none;}
  }
  #play:fullscreen,#play:-webkit-full-screen,:fullscreen #play,:-webkit-full-screen #play{
    max-width:none;width:100%;height:100vh;height:100dvh;margin:0;
    background:linear-gradient(180deg,#241b4d 0%,#4a2560 34%,#a34a66 62%,#e0785a 82%,#f2a95c 100%);
  }
  #play::backdrop{background:#241b4d;}
  @media (orientation:landscape) and (max-height:520px){
    #playright{gap:5px;}
    #topbar{gap:5px;}
    #topbar .name{font-size:14px;min-width:96px;}
    #topbar .name small{display:none;}
    .iconbtn,.backbtn{padding:7px 9px;}
    #introline{font-size:11.5px;padding:6px 8px;}
    #toolbox{gap:6px;padding:7px;min-height:0;}
  }
  @media (orientation:portrait){body.immersive #play{padding:4px;gap:5px;}}
  body.immersive #topbar .name small{display:none;}
  #fstoast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);
    background:#1c2848;border:2px solid #ffc94d66;border-radius:16px;padding:15px 16px;font-size:13px;
    line-height:1.5;color:#ffeeda;max-width:380px;width:calc(100vw - 32px);z-index:80;
    box-shadow:0 10px 40px #00000088;display:none;}
  #fstoast.show{display:block;}
  #fstitle{font-size:16px;font-weight:900;color:var(--gold);margin-bottom:6px;}
  #fstoast b{color:var(--gold);}
  #fsclose{display:block;margin:12px auto 0;background:var(--gold);color:#4a2b10;border:0;border-radius:10px;
    min-height:44px;padding:8px 18px;font:inherit;font-weight:800;cursor:pointer;}
  #fsbtn.help-only{font-size:11.5px;padding-inline:10px;}
  #fsbtn[hidden]{display:none !important;}
  #playleft{display:flex;flex-direction:column;gap:8px;}
  #playright{display:flex;flex-direction:column;gap:8px;}
  /* victoire */
  #winov{
    position:absolute;inset:0;background:#10182e96;backdrop-filter:blur(2px);
    display:none;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;z-index:6;
  }
  #winov.show{display:flex;}
  #winov h2{font-size:34px;margin:0;color:var(--gold);text-shadow:0 2px 18px #ffc94d88;}
  #winstars{display:flex;justify-content:center;gap:9px;filter:drop-shadow(0 2px 10px #ffc94d88);}
  .sunico{vertical-align:-2px;}
  #winov p{margin:2px 0 10px;font-size:15px;}
  #winov button{background:var(--gold);color:#4a2b10;border:none;border-radius:12px;padding:12px 22px;font-size:16px;font-weight:800;cursor:pointer;}
  #winov .stay{background:transparent;color:#c9d8f2;font-size:13px;font-weight:600;padding:6px;}
  #splash{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;z-index:5;}
  #splash.show{display:flex;}
  #splash div{
    font-size:52px;font-weight:900;color:var(--gold);text-shadow:0 3px 24px #ffc94dcc,0 2px 0 #7a4a12;
    animation:splashin .6s cubic-bezier(.2,1.6,.4,1) both;
  }
  @keyframes splashin{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
  .cf{position:absolute;width:10px;height:14px;border-radius:2px;pointer-events:none;z-index:4;animation:cfall linear both;}
  @keyframes cfall{
    0%{transform:translateY(-8vh) rotate(0deg);opacity:1}
    100%{transform:translateY(115vh) rotate(660deg);opacity:.85}
  }
  .beam,.beampath{stroke-linecap:round;opacity:.94;stroke-dasharray:16 12;animation:flow .7s linear infinite;fill:none;}
  @keyframes flow{to{stroke-dashoffset:-28;}}
  .beam.win-draw,.beampath.win-draw{
    stroke-dasharray:var(--win-length) var(--win-length);
    animation:win-draw var(--win-duration) linear var(--win-delay) both;
  }
  @keyframes win-draw{from{stroke-dashoffset:var(--win-length);}to{stroke-dashoffset:0;}}
  .beamlbl.win-label{animation:win-label .14s ease var(--win-label-delay) both;}
  @keyframes win-label{from{opacity:0;}to{opacity:1;}}
  .beamlbl{font-size:25px;font-weight:800;stroke:#101a33;stroke-width:6;paint-order:stroke;text-anchor:middle;}
  .tile{fill:#223a63;stroke:#7fb0ff3d;stroke-width:2;}
  .gridline{stroke:#ffffff10;stroke-width:1.5;}
  .tneed{font-weight:800;fill:#3b2a17;text-anchor:middle;}
  .tlit .glowring{animation:pulse 1.2s ease-in-out infinite;}
  @keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
  .shake{animation:shk .3s;}
  @keyframes shk{25%{transform:translateX(3px)}75%{transform:translateX(-3px)}}
  footer{margin-top:16px;font-size:11px;color:#ffffff99;text-align:center;line-height:1.55;}
  .site-footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 8px;margin-top:7px;}
  .site-footer a,.site-footer button{color:#ffe3bd;font:inherit;}
  .site-footer a{text-underline-offset:2px;}
  .site-footer button{border:0;padding:0;background:none;text-decoration:underline;cursor:pointer;text-underline-offset:2px;}
  @media (max-width:420px){
    .brandmark{width:104px;}
  }
  @media (max-width:350px){
    .brandmark{width:94px;}
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  }