/* landing AI section, corner button, notebook background and symbols, dark-theme details */
/* ---------- landing: AI check as the headline feature ---------- */
.lex{display:inline-flex;gap:4px;margin:0 0 14px;padding:4px;border:1px solid var(--line2);border-radius:999px;background:var(--card)}
.lex button{border:none;background:none;border-radius:999px;padding:7px 14px;font:700 13.5px var(--font);color:var(--muted);cursor:pointer}
.lex button[aria-pressed="true"]{background:var(--acc);color:var(--on-acc)}
.lex button:not([aria-pressed="true"]):hover{color:var(--ink)}
.hero .lex+.ai-badge{display:flex;width:max-content;max-width:100%}
.ai-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;border:1px solid var(--acc-l);background:var(--card);border-radius:999px;padding:5px 14px 5px 10px;font:600 13.5px var(--font);color:var(--ink);cursor:pointer;box-shadow:0 2px 8px rgba(44,86,214,.1);transition:border-color .15s,box-shadow .15s}
.ai-badge svg{width:16px;height:16px;color:var(--acc)}
.ai-badge b{background:var(--acc);color:var(--on-acc);border-radius:999px;padding:1px 8px;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase}
.ai-badge:hover{border-color:var(--acc);box-shadow:0 4px 14px rgba(44,86,214,.18)}
.aif{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;margin:0 0 40px;padding:36px 40px;border-radius:24px;background:linear-gradient(135deg,var(--acc-w),#f4f0ff 55%,#fff7ec);border:1px solid var(--acc-l);position:relative;overflow:hidden}
.aif::before{content:'';position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(44,86,214,.14),transparent 70%)}
.aif-k{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.aif-k svg{width:18px;height:18px}
.aif h2{font-size:34px;line-height:40px;font-weight:900;letter-spacing:-.015em;margin:10px 0 12px}
.aif-txt>p{margin:0 0 18px;font-size:16.5px;line-height:27px;color:var(--muted);max-width:50ch}
.aif-l{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
.aif-l li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;line-height:23px;font-weight:600}
.aif-l i{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--acc);color:var(--on-acc);margin-top:1px}
.aif-l i svg{width:12px;height:12px}
#ai-try svg{width:17px;height:17px;vertical-align:-3px;margin-right:8px}
.aif-n{font-size:13px;color:var(--muted)}
.aif-demo{position:relative;display:grid;grid-template-columns:150px 44px minmax(0,1fr);align-items:center;gap:0}
.aif-photo{transform:rotate(-4deg);background:var(--card);border-radius:10px;padding:8px 8px 6px;box-shadow:0 10px 24px rgba(42,38,34,.14)}
.aif-photo svg{display:block;width:100%;height:auto}
.aif-photo span{display:block;margin-top:4px;font-size:11.5px;color:var(--muted);text-align:center}
.aif-arrow{display:grid;place-items:center;color:var(--acc)}
.aif-arrow svg{width:26px;height:26px}
.aif-res{background:var(--card);border-radius:16px;padding:16px 18px;box-shadow:0 14px 34px rgba(44,86,214,.16);border:1px solid var(--line)}
.aif-sc{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.aif-sc b{font-size:28px;line-height:32px;font-weight:900;color:var(--sun)}
.aif-sc span{font-size:12.5px;color:var(--muted)}
.aif-st{display:flex;gap:10px;align-items:baseline;padding:7px 0;font-size:14px;line-height:22px}
.aif-st .n{width:22px;height:22px;flex:none;border-radius:50%;background:var(--acc-w);color:var(--acc);font-weight:900;font-size:12px;line-height:22px;text-align:center}
.aif-st .tx{flex:1;min-width:0;overflow-x:auto}
.aif-st .pp{flex:none;font-size:12px;font-weight:700;border-radius:999px;padding:2px 8px}
.aif-e{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.ai-hi{border-color:var(--acc)!important;color:var(--acc)!important;background:var(--acc-w)!important}
@media (max-width:980px){.aif{grid-template-columns:1fr;padding:28px 24px;gap:28px}}
@media (max-width:560px){.aif{padding:22px 16px;border-radius:18px}.aif h2{font-size:26px;line-height:32px}.aif-demo{grid-template-columns:1fr}.aif-photo{width:150px;margin:0 auto}.aif-arrow{transform:rotate(90deg);height:40px}}
@media (prefers-reduced-motion:no-preference){
  .aif-arrow svg{animation:aispark 2.4s ease-in-out infinite}
  @keyframes aispark{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(12deg)}}
}

/* ---------- corner "Exersează" button ---------- */
.fab{position:fixed;right:24px;bottom:24px;z-index:60;display:flex;align-items:center;gap:10px;height:56px;padding:0 24px 0 20px;border:none;border-radius:999px;background:var(--acc);color:var(--on-acc);font:800 16px var(--font);cursor:pointer;box-shadow:0 10px 28px rgba(44,86,214,.35),0 2px 6px rgba(42,38,34,.12);transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease}
.fab[hidden]{display:none}
.fab svg{width:20px;height:20px;flex:none}
.fab:hover{background:var(--acc-h)}
body.has-fab .app{padding-bottom:96px}
@media (max-width:600px){.fab{right:16px;bottom:16px;height:52px;padding:0 20px 0 16px;font-size:15px}}
@media (prefers-reduced-motion:no-preference){
  .fab{animation:fabin .5s cubic-bezier(.3,1.5,.5,1) both}
  .fab::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(44,86,214,.45);animation:fabpulse 3.2s ease-out 1.2s infinite;pointer-events:none}
  .fab:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(44,86,214,.42),0 2px 6px rgba(42,38,34,.12)}
  .fab:active{transform:translateY(1px) scale(.97)}
  @keyframes fabin{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes fabpulse{0%{box-shadow:0 0 0 0 rgba(44,86,214,.4)}60%,100%{box-shadow:0 0 0 14px rgba(44,86,214,0)}}
}

/* ---------- chapter pages: math-notebook background, Subiect colours, drifting symbols ---------- */
/* The paper is painted on the fixed .bgfx layer, not on body with background-attachment:fixed: a fixed
   body background is repainted on every scroll frame (slow on phones), a fixed layer is composited once. */
body.bg-ch{background:var(--bg)}
.bgfx{display:none;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict;transform:translateZ(0)}
body.bg-ch .bgfx{display:block;background:
  radial-gradient(640px 440px at 0% 0%,rgba(44,86,214,.09),transparent 70%),
  radial-gradient(560px 420px at 100% 35%,rgba(181,105,13,.08),transparent 70%),
  radial-gradient(600px 460px at 55% 100%,rgba(178,58,108,.07),transparent 70%),
  linear-gradient(var(--grid) 1px,transparent 1px) 0 0/26px 26px,
  linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/26px 26px,
  var(--bg)}
body.bg-ch .app{position:relative;z-index:1}
/* exercise page: the symbols stay faint so the statement keeps the attention; the sticky bar lets the paper show through */
body.bg-pr .bgfx span{opacity:.055}
body.bg-pr .app.prac .foot{background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
body.bg-pr .app.prac .card{box-shadow:0 1px 0 var(--line),0 10px 30px rgba(42,38,34,.07)}
.bgfx span{position:absolute;font:italic 700 64px/1 "Times New Roman",serif;opacity:.07;user-select:none}
.bgfx span:nth-child(3n+1){color:var(--acc)} .bgfx span:nth-child(3n+2){color:var(--org)} .bgfx span:nth-child(3n){color:var(--rose)}
.bgfx span:nth-child(odd){font-size:84px}
@media (max-width:860px){.bgfx span{font-size:44px}.bgfx span:nth-child(odd){font-size:56px}}
@media (prefers-reduced-motion:no-preference){
  .bgfx span{animation:drift 14s ease-in-out infinite alternate}
  .bgfx span:nth-child(2n){animation-duration:18s;animation-delay:-6s}
  .bgfx span:nth-child(3n){animation-duration:22s;animation-delay:-11s}
  @keyframes drift{from{transform:translate(0,0) rotate(-6deg)}to{transform:translate(14px,-22px) rotate(6deg)}}
}
/* phones: the symbols stay still, the exercise's bottom bar is opaque instead of blurred, and sticky things
   do not animate their top while the top bar comes and goes: all of it costs frames while scrolling */
@media (max-width:760px){
  .bgfx span{animation:none!important}
  .drift,.twinkle,.deco,g.bob,svg .caret{animation:none!important}   /* SVG animations run on the main thread, against the scroll */
  body.bg-pr .app.prac .foot{-webkit-backdrop-filter:none;backdrop-filter:none;background:color-mix(in srgb,var(--bg) 97%,transparent)}
  .sim-bar,.sim-nav,.hm-l,.side,.top{transition:none!important}
}

/* ---------- dark theme details the tokens cannot express ---------- */
:root[data-theme="dark"] .aif{background:linear-gradient(135deg,var(--acc-w),var(--panel) 60%)}
:root[data-theme="dark"] .simpill{background:#0f0e0c;border:1px solid #3a352f}
:root[data-theme="dark"] .dchip.d1 b{color:#6cc47a} :root[data-theme="dark"] .dchip.d2 b{color:#c3d24a}
:root[data-theme="dark"] .dchip.d3 b{color:#f0b45a} :root[data-theme="dark"] .dchip.d4 b{color:#f08a78}
:root[data-theme="dark"] .hero-art svg,:root[data-theme="dark"] .aif-photo{filter:brightness(.92)}
.thm{display:grid;place-items:center;width:40px;height:40px;border:none;border-radius:10px;background:none;color:var(--ink);cursor:pointer;flex:none;transition:background-color .15s}
.thm:hover{background:var(--panel)}
.thm svg{width:20px;height:20px}
.thm .t-sun,:root[data-theme="dark"] .thm .t-moon{display:none}
:root[data-theme="dark"] .thm .t-sun{display:block}
@media (max-width:600px){.thm{width:32px;height:32px}.thm svg{width:18px;height:18px}}