* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Neucha', 'Segoe Print', 'Comic Sans MS', cursive;
  color: #f2eefb;
  background:
    radial-gradient(ellipse at 15% 85%, rgba(80, 12, 150, .55), transparent 60%),
    radial-gradient(ellipse at 90% 10%, rgba(8, 45, 140, .7), transparent 55%),
    radial-gradient(ellipse at 70% 90%, rgba(120, 0, 90, .35), transparent 50%),
    linear-gradient(180deg, #02020c 0%, #05051a 45%, #0a0a26 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

#sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: twinkle 3s ease-in-out infinite;
  box-shadow: 0 0 6px 2px rgba(255, 255, 255, .5);
}

.star.big {
  background: #ffe9c0;
  box-shadow: 0 0 12px 4px rgba(255, 240, 180, .6);
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(.5); }
  50% { opacity: 1; transform: scale(1.2); }
}

.shoot {
  position: absolute;
  width: 140px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
  animation: shoot 9s linear infinite;
  opacity: 0;
}

@keyframes shoot {
  0% { transform: translate(0, 0) rotate(-35deg); opacity: 0; }
  4% { opacity: 1; }
  18% { transform: translate(-60vw, 40vh) rotate(-35deg); opacity: 0; }
  100% { transform: translate(-60vw, 40vh) rotate(-35deg); opacity: 0; }
}

a { color: #00e5ff; }
a:hover { color: #ff2d95; }

/* ---------- шапка ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 22px;
  background: rgba(4, 4, 18, .78);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid rgba(157, 77, 255, .35);
}

.logo {
  font-family: 'Lobster', cursive;
  font-size: 1.9rem;
  text-decoration: none;
  color: #ffe600;
  text-shadow: 0 0 12px rgba(255, 230, 0, .8), 2px 2px 0 #000;
  transform: rotate(-3deg);
  display: inline-block;
  animation: flick 4s ease-in-out infinite;
}

@keyframes flick {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: .55; }
  94% { opacity: 1; }
  97% { opacity: .7; }
  98% { opacity: 1; }
}

nav { display: flex; flex-wrap: wrap; gap: 8px; }

nav a {
  font-family: 'Lobster', cursive;
  font-size: 1.1rem;
  text-decoration: none;
  padding: 5px 14px;
  color: #00e5ff;
  border: 2px solid rgba(0, 229, 255, .45);
  border-radius: 14px;
  background: rgba(0, 40, 80, .25);
  transition: .18s;
  transform: rotate(-1deg);
}

nav a:hover {
  color: #000;
  background: #00e5ff;
  box-shadow: 0 0 16px rgba(0, 229, 255, .8);
  transform: rotate(0) translateY(-2px);
}

nav a:nth-child(2) { color: #ff2d95; border-color: rgba(255,45,149,.5); background: rgba(90,0,60,.25); }
nav a:nth-child(2):hover { background: #ff2d95; color: #000; box-shadow: 0 0 16px rgba(255,45,149,.8); }
nav a:nth-child(3) { color: #39ff14; border-color: rgba(57,255,20,.5); background: rgba(0,70,20,.25); }
nav a:nth-child(3):hover { background: #39ff14; color: #000; box-shadow: 0 0 16px rgba(57,255,20,.8); }

/* ---------- типографика ---------- */
.wrap { max-width: 1050px; margin: 0 auto; padding: 34px 20px 80px; }

.graffiti {
  font-family: 'Lobster', cursive;
  color: #ff2d95;
  line-height: 1.08;
  text-shadow:
    -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000,
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000,
    0 0 18px #ff2d95, 0 0 36px rgba(255, 45, 149, .6);
  letter-spacing: 1px;
}

.hero-center { text-align: center; padding: 26px 0 10px; }

h1.hero-tag { font-size: clamp(2.4rem, 7vw, 4.6rem); transform: rotate(-2deg); }

.hero-sub {
  font-family: 'Pacifico', cursive;
  color: #bfe8ff;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  margin-top: 14px;
  text-shadow: 0 0 12px rgba(0, 229, 255, .8);
}

h2 {
  font-family: 'Lobster', cursive;
  font-size: 1.9rem;
  color: #00e5ff;
  margin: 34px 0 14px;
  transform: rotate(-1deg);
  text-shadow: 0 0 12px rgba(0, 229, 255, .6), 2px 2px 0 #000;
  position: relative;
}

h2::after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(100% + 6px);
  width: 120px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='6'%3E%3Cpath d='M2 4 Q 20 0 40 4 T 80 4 T 118 3' fill='none' stroke='%23ff2d95' stroke-width='3'/%3E%3C/svg%3E") no-repeat;
}

h3 {
  font-family: 'Lobster', cursive;
  color: #ffe600;
  font-size: 1.3rem;
  margin: 18px 0 8px;
  text-shadow: 0 0 8px rgba(255, 230, 0, .5), 2px 2px 0 #000;
}

.center { text-align: center; }

section { scroll-margin-top: 90px; }

/* ---------- карточка-контент ---------- */
.panel {
  background: rgba(20, 10, 44, .6);
  border: 2px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  padding: 26px 28px;
  margin: 22px 0;
  box-shadow: 0 0 34px rgba(157, 77, 255, .22);
  backdrop-filter: blur(4px);
}

.panel p, .panel li { font-size: 1.18rem; line-height: 1.6; }
.panel p { margin: 10px 0; }
.panel ul { padding-left: 24px; margin: 10px 0; }

.paint {
  background: rgba(255, 45, 149, .14);
  border-left: 5px solid #ff2d95;
  border-radius: 0 14px 14px 0;
  padding: 12px 18px;
  margin: 16px 0;
}

.paint.cyan { background: rgba(0, 229, 255, .12); border-left-color: #00e5ff; }
.paint.pink { background: rgba(255, 45, 149, .16); border-left-color: #ff2d95; }

.panel.cyan { border-color: rgba(0, 229, 255, .4); background: rgba(0, 50, 85, .35); box-shadow: 0 0 34px rgba(0, 229, 255, .18); }
.paint.green { background: rgba(57, 255, 20, .1); border-left-color: #39ff14; }
.paint.yellow { background: rgba(255, 230, 0, .1); border-left-color: #ffe600; }
.paint.purple { background: rgba(157, 77, 255, .14); border-left-color: #9d4dff; }

.eq {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  background: rgba(0, 0, 0, .45);
  color: #b9ff5c;
  border: 2px dashed rgba(57, 255, 20, .55);
  border-radius: 12px;
  padding: 12px 18px;
  display: inline-block;
  font-size: 1.25rem;
  box-shadow: 0 0 14px rgba(57, 255, 20, .25);
  margin: 8px 0;
}

code.el {
  font-family: 'Pacifico', cursive;
  font-size: 1.25rem;
  color: #ffe600;
  text-shadow: 0 0 8px rgba(255, 230, 0, .6);
  white-space: nowrap;
}

kbd, .chip {
  display: inline-block;
  font-family: 'Lobster', cursive;
  color: #000;
  background: linear-gradient(135deg, #ffe600, #ffb100);
  border-radius: 8px;
  padding: 2px 10px;
  margin: 2px 2px;
  box-shadow: 0 2px 0 #000;
}

.chip.cyan { background: linear-gradient(135deg, #00e5ff, #0077ff); }
.chip.pink { background: linear-gradient(135deg, #ff2d95, #b100ff); }
.chip.green { background: linear-gradient(135deg, #39ff14, #00b359); color: #062; }
.chip.purple { background: linear-gradient(135deg, #9d4dff, #5a00b3); color: #fff; }

/* ---------- таблицы ---------- */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0;
  background: rgba(0, 0, 0, .3);
  border-radius: 12px;
  overflow: hidden;
}

th, td {
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 8px 12px;
  text-align: left;
  font-size: 1.06rem;
}

th { font-family: 'Lobster', cursive; color: #00e5ff; background: rgba(0, 60, 120, .35); }

/* ---------- сетка уроков ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.card {
  background: rgba(22, 12, 50, .62);
  border: 2px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  padding: 16px 18px;
  text-decoration: none;
  color: #f2eefb;
  display: block;
  transition: .18s;
  position: relative;
}

.card:hover {
  transform: rotate(-1.6deg) translateY(-6px);
  border-color: #ff2d95;
  box-shadow: 0 0 26px rgba(255, 45, 149, .5);
  color: #fff;
}

.card .num {
  font-family: 'Pacifico', cursive;
  color: #00e5ff;
  font-size: 1.05rem;
  text-shadow: 0 0 8px rgba(0, 229, 255, .7);
}

.card h3 {
  margin: 6px 0 8px;
  font-size: 1.35rem;
  color: #ffe600;
}

.card p { font-size: 1rem; line-height: 1.45; opacity: .9; }

.card .go {
  display: inline-block;
  margin-top: 10px;
  font-family: 'Lobster', cursive;
  color: #ff2d95;
}

.card:hover .go { color: #39ff14; }

/* ---------- кнопки ---------- */
.btn {
  display: inline-block;
  padding: .65em 1.5em;
  font-family: 'Lobster', cursive;
  font-size: 1.2rem;
  color: #000;
  text-decoration: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #ffe600, #ffb100);
  border: 2px solid #000;
  box-shadow: 0 4px 0 #000, 0 0 18px rgba(255, 230, 0, .55);
  transition: .15s;
  transform: rotate(-1deg);
  margin: 6px 6px 0 0;
}

.btn:hover {
  transform: rotate(0) translateY(-2px);
  box-shadow: 0 6px 0 #000, 0 0 28px rgba(255, 230, 0, .9);
  color: #000;
}

.btn.pink { background: linear-gradient(135deg, #ff2d95, #c400ff); box-shadow: 0 4px 0 #000, 0 0 18px rgba(255, 45, 149, .55); }
.btn.pink:hover { box-shadow: 0 6px 0 #000, 0 0 28px rgba(255, 45, 149, .9); }
.btn.cyan { background: linear-gradient(135deg, #00e5ff, #0066ff); box-shadow: 0 4px 0 #000, 0 0 18px rgba(0, 229, 255, .55); }
.btn.cyan:hover { box-shadow: 0 6px 0 #000, 0 0 28px rgba(0, 229, 255, .9); }
.btn.green { background: linear-gradient(135deg, #39ff14, #00b359); box-shadow: 0 4px 0 #000, 0 0 18px rgba(57, 255, 20, .55); }
.btn.green:hover { box-shadow: 0 6px 0 #000, 0 0 28px rgba(57, 255, 20, .9); }

/* ---------- элементы ---------- */
.mini-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.elt {
  text-align: center;
  border: 2px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  padding: 8px 4px;
  background: rgba(0, 0, 0, .35);
  transition: .15s;
}

.elt:hover { transform: scale(1.1); border-color: #39ff14; box-shadow: 0 0 14px rgba(57, 255, 20, .5); }

.elt .num { font-size: .72rem; color: #9df; }
.elt .sym { font-family: 'Lobster', cursive; font-size: 1.5rem; color: #ffe600; }
.elt .mass { font-size: .78rem; color: #b9ff5c; }

.lesson-no {
  font-family: 'Pacifico', cursive;
  color: #9d4dff;
  font-size: 1.15rem;
  text-shadow: 0 0 10px rgba(157, 77, 255, .8);
}

.pager { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

/* ---------- подвал ---------- */
footer {
  border-top: 2px solid rgba(157, 77, 255, .35);
  background: rgba(4, 4, 18, .8);
  padding: 22px;
  text-align: center;
}

footer p { font-size: 1rem; opacity: .8; }

.dotted { letter-spacing: 6px; color: #9d4dff; }

/* ---------- адаптив ---------- */
@media (max-width: 640px) {
  .wrap { padding: 22px 14px 60px; }
  .panel { padding: 18px 16px; }
  nav { justify-content: center; }
}

/* ===== ВСЕ УРОКИ НА ОДНОЙ СТРАНИЦЕ / УДОБСТВО ===== */
.lessons-tools { text-align: center; margin: 12px 0 6px; }
.all-read-btn { margin: 0 0 8px !important; }

.search-box { position: relative; max-width: 580px; margin: 0 auto; }
.search-box input {
  width: 100%;
  padding: 14px 20px 14px 48px;
  font-family: 'Neucha', 'Segoe Print', 'Comic Sans MS', cursive;
  font-size: 1.15rem;
  color: #f2eefb;
  background: rgba(20, 10, 44, .6);
  border: 2px solid rgba(0, 229, 255, .4);
  border-radius: 16px;
  outline: none;
  transition: .2s;
}
.search-box input::placeholder { color: #9a93bd; }
.search-box input:focus { border-color: #ff2d95; box-shadow: 0 0 18px rgba(255, 45, 149, .4); }
.search-box .s-icon {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  color: #00e5ff;
  font-size: 1.25rem;
  pointer-events: none;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0 8px; }
.chip-btn {
  font-family: 'Lobster', cursive;
  font-size: 1.02rem;
  color: #ffe600;
  border: 2px solid rgba(255, 230, 0, .4);
  background: rgba(255, 230, 0, .08);
  padding: 6px 14px;
  border-radius: 14px;
  cursor: pointer;
  transition: .18s;
}
.chip-btn:hover { color: #000; background: #ffe600; border-color: #ffe600; }
.chip-btn.active { background: #ffe600; color: #000; border-color: #ffe600; box-shadow: 0 0 14px rgba(255, 230, 0, .7); }

.filter-info {
  text-align: center;
  color: #9d4dff;
  font-family: 'Pacifico', cursive;
  font-size: 1.15rem;
  margin: 14px 0 4px;
}
.filter-none {
  text-align: center;
  color: #ff2d95;
  font-family: 'Lobster', cursive;
  font-size: 1.3rem;
  padding: 26px 10px;
}

.all-layout {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  margin-top: 26px;
  position: relative;
  z-index: 1;
}
.toc {
  flex: 0 0 275px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  background: rgba(20, 10, 44, .6);
  border: 2px solid rgba(255, 255, 255, .13);
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: 0 0 34px rgba(157, 77, 255, .22);
}
.toc-title { font-family: 'Lobster', cursive; font-size: 1.35rem; color: #ffe600; margin-bottom: 10px; text-align: center; }
.toc-group { font-family: 'Lobster', cursive; font-size: 1.05rem; color: #00e5ff; margin: 16px 0 6px; }
.toc-link {
  display: block;
  padding: 5px 9px;
  border-radius: 9px;
  color: #d9d2f5;
  text-decoration: none;
  font-size: 1.05rem;
  border-left: 3px solid transparent;
  transition: .18s;
}
.toc-link span { color: #9d4dff; font-family: 'Pacifico', cursive; margin-right: 6px; }
.toc-link:hover { color: #fff; background: rgba(255, 45, 149, .16); }
.toc-link.on { color: #ff2d95; background: rgba(255, 45, 149, .18); border-left-color: #ff2d95; }
.toc-top {
  display: block;
  margin-top: 16px;
  text-align: center;
  color: #9d4dff;
  text-decoration: none;
  font-family: 'Lobster', cursive;
  font-size: 1.02rem;
}
.toc-top:hover { color: #ff2d95; }

.all-main { flex: 1; min-width: 0; }
.all-search { max-width: 620px; margin: 0 auto; }

.lesson-block {
  margin: 44px 0 54px;
  scroll-margin-top: 90px;
}
.lesson-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 6px 4px 14px;
  margin-bottom: 6px;
  border-bottom: 3px dashed rgba(157, 77, 255, .45);
}
.lesson-head .lesson-no { margin: 0; }
.lesson-title { margin: 0; font-size: 1.7rem; }
.lesson-cat { align-self: center; }
.lesson-block-end { text-align: center; margin-top: 18px; }
.lesson-block-end a { font-family: 'Lobster', cursive; font-size: 1.02rem; text-decoration: none; color: #9d4dff; }
.lesson-block-end a:hover { color: #ff2d95; }

.top-btn {
  position: fixed;
  bottom: 26px; right: 26px;
  z-index: 70;
  width: 50px; height: 50px;
  border-radius: 50%;
  font-family: 'Lobster', cursive;
  font-size: 1.6rem;
  color: #000;
  background: linear-gradient(135deg, #ff2d95, #c400ff);
  border: 2px solid #000;
  box-shadow: 0 4px 0 #000, 0 0 18px rgba(255, 45, 149, .6);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: .25s;
}
.top-btn.visible { opacity: 1; pointer-events: auto; }
.top-btn:hover { transform: translateY(-3px); box-shadow: 0 6px 0 #000, 0 0 26px rgba(255, 45, 149, .9); }

@media (max-width: 900px) {
  .all-layout { flex-direction: column; }
  .all-main { order: 2; }
  .toc { flex: none; position: static; width: 100%; max-height: 300px; }
}