/* exxam.ru — стили страницы primer.html */
:root{
    --bg:#fbefef; --card:#ffffff; --ink:#3a2f3f; --muted:#7c6d7a;
    --accent:#7d6396; --accent-soft:#f3ecf7; --ok:#5c8f70; --ok-soft:#e9f4ec;
    --bad:#c96a6a; --bad-soft:#fbe9e9; --line:#f0d9dc; --amber:#9b5a6a;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
       background:var(--bg);color:var(--ink);line-height:1.55}
  .wrap{max-width:860px;margin:0 auto;padding:20px 16px 60px}
  header.top{display:flex;align-items:flex-start;gap:12px;margin:8px 0 18px}
  .badge{background:var(--accent);color:#fff;border-radius:10px;padding:10px 14px;font-weight:700;white-space:nowrap}
  h1{font-size:20px;margin:0 0 2px}
  .note{font-size:13px;color:var(--muted)}
  .proto{border:1px dashed var(--amber);background:#fdf1f2;border-radius:10px;
         padding:10px 14px;font-size:13px;color:var(--amber);margin-bottom:18px}
  .card{background:var(--card);border:1px solid var(--line);border-radius:14px;
        padding:20px;margin-bottom:18px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
  section.solve{background:#fff;border:3px solid var(--accent)}
  .card h2{margin:0 0 12px;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
  .chip{font-size:12px;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:600}
  .chip.gray{background:#f7eef2;color:var(--muted)}
  .chip.green{background:var(--ok-soft);color:var(--ok)}
  .sub{color:var(--muted);font-size:13px}
  p{margin:8px 0}
  .ex{border-left:3px solid var(--line);background:#fdf7f9;padding:8px 12px;margin:10px 0;border-radius:0 8px 8px 0;overflow-x:auto}
  .ex.green{border-color:var(--ok);background:var(--ok-soft)}
  .ex.red{border-color:var(--bad);background:var(--bad-soft)}
  code, .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;
        background:#f7eef2;padding:1px 5px;border-radius:5px}
  pre code{display:block;background:#2f2735;color:#efe0e7;padding:12px 14px;border-radius:10px;
       overflow-x:auto;line-height:1.5;font-size:13px}
  button{cursor:pointer;font-family:inherit}
  .btn{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:9px;
       padding:8px 14px;font-size:14px;font-weight:600}
  .btn:hover{background:#fbefef}
  .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
  .btn.primary:hover{background:#6b5282}
  .btn.ghost{background:transparent;color:var(--accent)}
  .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .spread{justify-content:space-between}
  .answer{display:none;border:1px solid #e3d3ea;background:#f7eef4;border-radius:10px;padding:12px 14px;margin-top:12px}
  .answer .big{font-size:20px;font-weight:800;color:var(--accent)}
  .mode{display:flex;gap:8px;margin-bottom:14px}
  .mode .btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
  .steps .step{border:1px solid var(--line);border-radius:12px;margin:8px 0;background:#fff;overflow:hidden}
  .step .h{font-weight:700;color:var(--accent);display:flex;gap:10px;align-items:center;
      padding:12px 14px;cursor:pointer;user-select:none}
  .step .h:hover{background:#fdf7f9}
  .step .h .n{background:var(--accent);color:#fff;border-radius:50%;min-width:22px;height:22px;
      display:inline-flex;align-items:center;justify-content:center;font-size:12px;flex:none}
  .step .h .tt{flex:1;color:var(--ink)}
  .step .h .chev{color:var(--accent);transition:transform .15s;flex:none}
  .step.open .h .chev{transform:rotate(180deg)}
  .step .body{display:none;padding:0 16px 14px;border-top:1px solid var(--line);padding-top:12px}
  .step.open .body{display:block}
  .fstep{border:1px solid var(--line);border-radius:12px;margin:8px 0;background:#fff;overflow:hidden}
  .fstep summary{cursor:pointer;font-weight:700;padding:12px 14px;display:flex;gap:8px;align-items:center;list-style:none}
  .fstep summary::-webkit-details-marker{display:none}
  .fstep summary::before{content:"▸";color:var(--accent);transition:transform .15s}
  .fstep[open] summary::before{transform:rotate(90deg)}
  .fstep .fbody{padding:0 16px 14px;border-top:1px solid var(--line);padding-top:12px}
  .bar{height:8px;border-radius:99px;background:#f0e2e9;overflow:hidden;margin:6px 0 10px}
  .bar>i{display:block;height:100%;width:0%;background:var(--accent);transition:width .25s}
  input[type=text]{border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:15px;
       font-family:ui-monospace,Menlo,monospace;width:140px}
  .train-fb{font-weight:700;display:none;padding:8px 10px;border-radius:8px;font-size:14px}
  .train-fb.ok{display:block;background:var(--ok-soft);color:var(--ok)}
  .train-fb.bad{display:block;background:var(--bad-soft);color:var(--bad)}
  .accord details{border:1px solid var(--line);border-radius:10px;margin:8px 0;background:#fff}
  .accord summary{cursor:pointer;font-weight:700;padding:12px 14px;list-style:none;display:flex;align-items:center;gap:8px}
  .accord summary::-webkit-details-marker{display:none}
  .accord summary::before{content:"▸";color:var(--accent);transition:transform .15s}
  .accord details[open] summary::before{transform:rotate(90deg)}
  .accord .body{padding:2px 16px 14px}
  .check li{margin:4px 0}
  table.mini{border-collapse:collapse;font-size:14px}
  table.mini td, table.mini th{border:1px solid var(--line);padding:4px 10px;text-align:left}
  table.mini tr.ok td{background:var(--ok-soft);font-weight:700}
  .muted{color:var(--muted)}
body::before{content:"";position:fixed;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#c5b3d3,#f5cbcb,#7d6396);z-index:100}