/*
  ЧИТАЛЬНЯ — ОБЩИЙ СЛОЙ ОФОРМЛЕНИЯ (25.09.2026)

  Поручение Архитектора: «Улучши каждую читальню, особенно по дизайну, добавь
  интерактивности… нужен магнит на каждую читальню, везде свой уникальный».

  Почему отдельным файлом, а не в <style> страницы. У читален строгий CSP:
  каждый встроенный <style> и <script> разрешён только по хешу. Поменяй в нём
  один знак — и браузер выключит блок целиком (10.09 так три читальни вышли
  голыми, а главная codeeternal.online 15 дней была пустой). Свой файл с того же
  домена разрешён правилом 'self' без хешей — его можно менять сколько угодно.

  Правило, оплаченное той же бедой: НИЧЕГО не прячется в ожидании скрипта.
  Появление карточек — чистая CSS-анимация с fill-mode both: не сработал
  скрипт, не загрузился файл — всё равно видно.

  Цвета — только переменные страницы (--accent, --accent2, --glass…), поэтому
  у каждого сайта читальня остаётся в своей гамме.
*/

/* ── живой фон: элементы .aurora и .gridbg уже описаны в стилях страницы ── */
body{background:var(--void)}
.rr-orb{position:fixed;border-radius:50%;filter:blur(100px);opacity:.14;z-index:0;pointer-events:none}
.rr-orb.a{width:520px;height:520px;background:var(--accent);top:-180px;left:-140px}
.rr-orb.b{width:440px;height:440px;background:var(--accent2);bottom:-160px;right:-120px}

/* ── первый экран ── */
.rr-hero{position:relative}
.rr-hero h1{background:linear-gradient(100deg,var(--text) 0%,var(--text) 55%,color-mix(in srgb,var(--accent) 80%,var(--text)) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.rr-stats{display:flex;flex-wrap:wrap;gap:10px;margin:-14px 0 8px}
.rr-stat{display:inline-flex;align-items:baseline;gap:8px;padding:9px 16px;border-radius:999px;
  background:color-mix(in srgb,var(--accent) 8%,var(--glass));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--glass-border));
  font-size:13px;color:var(--muted)}
.rr-stat b{font-size:17px;color:var(--text);font-weight:700}
.rr-jump{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:12px 22px;border-radius:999px;
  background:linear-gradient(120deg,var(--accent),var(--accent2));color:#07070b;font-weight:700;text-decoration:none;
  font-size:14.5px;letter-spacing:.02em;box-shadow:0 10px 34px -12px var(--accent);transition:transform .25s,box-shadow .25s}
.rr-jump:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px var(--accent)}

/* ── путь читателя ── */
.rr-path{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 22px;padding:16px 20px;border-radius:16px;
  background:var(--glass);border:1px solid var(--glass-border)}
.rr-path-bar{flex:1 1 220px;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.rr-path-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .8s cubic-bezier(.16,1,.3,1)}
.rr-path-txt{font-size:14px;color:var(--muted)}
.rr-path-txt b{color:var(--text)}
.rr-path.rr-done{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}

/* ── поиск и темы ── */
.rr-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 22px}
.rr-search{flex:1 1 240px;min-width:200px;padding:12px 16px;border-radius:12px;border:1px solid var(--glass-border);
  background:rgba(0,0,0,.35);color:var(--text);font:inherit;font-size:15px}
.rr-search::placeholder{color:var(--muted)}
.rr-search:focus{outline:2px solid var(--accent);outline-offset:2px}
.rr-chips{display:flex;flex-wrap:wrap;gap:8px}
.rr-chip{padding:8px 14px;border-radius:999px;border:1px solid var(--glass-border);background:var(--glass);color:var(--muted);
  font:inherit;font-size:13px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.rr-chip:hover{color:var(--text);border-color:var(--accent)}
.rr-chip[aria-pressed="true"]{color:#07070b;background:var(--accent);border-color:var(--accent);font-weight:600}
.rr-empty{padding:26px;border-radius:16px;border:1px dashed var(--glass-border);color:var(--muted);text-align:center}

/* ── карточки ── */
.grid{counter-reset:rr}
.grid .card{animation:rr-in .7s cubic-bezier(.16,1,.3,1) both}
.grid .card:nth-child(2){animation-delay:.05s}.grid .card:nth-child(3){animation-delay:.1s}
.grid .card:nth-child(4){animation-delay:.15s}.grid .card:nth-child(5){animation-delay:.2s}
.grid .card:nth-child(6){animation-delay:.25s}.grid .card:nth-child(n+7){animation-delay:.3s}
@keyframes rr-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.grid .card{display:flex;flex-direction:column;transition:border-color .3s,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s}
.grid .card:hover{transform:translateY(-4px);box-shadow:0 22px 50px -26px var(--accent)}
.grid .card>p:last-child{margin-top:auto;padding-top:10px}
.grid .card::after{counter-increment:rr;content:counter(rr,decimal-leading-zero);position:absolute;top:18px;right:20px;
  font-size:13px;font-weight:700;letter-spacing:.08em;color:color-mix(in srgb,var(--accent) 60%,var(--muted))}
.rr-badge{display:none;align-items:center;gap:6px;font-size:12px;color:var(--accent);margin-left:10px}
.card.rr-read .rr-badge{display:inline-flex}
.card.rr-read{border-color:color-mix(in srgb,var(--accent) 45%,var(--glass-border))}
.card[hidden]{display:none}

/* ── магнит ── */
.rr-magnet{position:relative;margin:10px 0 0;padding:34px;border-radius:24px;overflow:hidden;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 11%,rgba(8,8,14,.88)),rgba(8,8,14,.9) 55%,color-mix(in srgb,var(--accent2) 9%,rgba(8,8,14,.9)));
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--glass-border));box-shadow:0 30px 80px -40px var(--accent)}
.rr-magnet::before{content:'';position:absolute;inset:-40% -20% auto auto;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%);pointer-events:none}
.rr-magnet>*{position:relative}
.rr-mlabel{display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.rr-magnet h2{font-size:clamp(24px,3.6vw,36px);line-height:1.15;margin-bottom:10px;letter-spacing:-.01em}
.rr-mlead{color:var(--muted);max-width:68ch;margin-bottom:24px}
.rr-note{font-size:13px;color:var(--muted);margin-top:16px}
.rr-row{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.rr-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted);flex:1 1 150px}
.rr-field input,.rr-field select,.rr-field textarea{padding:11px 13px;border-radius:11px;border:1px solid var(--glass-border);
  background:rgba(0,0,0,.4);color:var(--text);font:inherit;font-size:15px}
.rr-field textarea{min-height:92px;resize:vertical}
/* 25.09: Safari/WebKit рисует <select> системным светлым полем и игнорирует наш фон — светлый текст на светлом.
   appearance:none возвращает управление оформлением; стрелка — два градиента, без картинок (CSP img-src). */
.rr-field select{-webkit-appearance:none;appearance:none;background-color:#0d0d16;color:var(--text);padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.rr-field select option{background:#0d0d16;color:#E8E8ED}
.rr-field input[type=range]{padding:0;accent-color:var(--accent)}
.rr-btn{padding:12px 20px;border-radius:12px;border:1px solid var(--accent);background:var(--accent);color:#07070b;font:inherit;
  font-weight:700;font-size:14.5px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.rr-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px -12px var(--accent)}
.rr-btn.ghost{background:transparent;color:var(--text);border-color:var(--glass-border)}
.rr-btn.ghost:hover{border-color:var(--accent)}
.rr-btn:disabled{opacity:.5;cursor:default;transform:none}
.rr-big{font-size:clamp(40px,7vw,76px);font-weight:700;line-height:1;letter-spacing:-.03em;color:var(--accent)}
.rr-out{margin-top:22px;padding:22px;border-radius:16px;background:rgba(0,0,0,.35);border:1px solid var(--glass-border)}
.rr-out p{color:var(--muted);margin-top:8px}
.rr-out p b{color:var(--text)}
.rr-cta{display:inline-block;margin-top:16px;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.rr-grid-dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:16px}
.rr-dot{width:10px;height:10px;border-radius:3px;background:rgba(255,255,255,.08)}
.rr-dot.on{background:var(--accent);box-shadow:0 0 8px -1px var(--accent)}
.rr-pop{animation:rr-pop .45s cubic-bezier(.16,1,.3,1) both}
@keyframes rr-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.rr-dot.past{background:color-mix(in srgb,var(--muted) 45%,transparent)}
.rr-canvas{display:block;width:100%;border-radius:16px;background:rgba(0,0,0,.4);border:1px solid var(--glass-border);touch-action:none}
.rr-list{list-style:none;display:grid;gap:10px;margin-top:10px}
.rr-list li{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--glass-border)}
.rr-ok{color:#39FF14}.rr-bad{color:#FF5A7A}
.rr-mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;word-break:break-all}
.rr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:640px){
  .rr-magnet{padding:22px 18px;border-radius:18px}
  .rr-stats{margin-top:-8px}
}
@media (prefers-reduced-motion:reduce){
  .grid .card,.rr-pop{animation:none}
  .rr-path-fill,.rr-jump,.grid .card{transition:none}
}

/* 30.09.2026: блок «AIfa Creativity» (rr.js, начало файла) — отступ от раздела выше и ссылка-кнопка */
.rr-cr{margin-top:28px}.rr-cr .rr-btn{display:inline-block;text-decoration:none}