<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');
/* 1. ПРОБИВАЕМ ФОН ДО ЗВЕЗД (ВЫШЕ ПРИОРИТЕТ, ЧЕМ В CUSTOM HTML) */
html,
body,
#full-height-container,
#main,
#main-content,
#content,
#Content,
.wiki-content,
.page-content,
.sozvezdiya-page {
background: transparent !important;
background-color: transparent !important;
}
/* 2. СТИЛИ ТЕКСТА И КОНТЕНТА (ЛУННАЯ ГАММА) */
.sozvezdiya-page {
font-family: 'Cormorant Garamond', Georgia, serif;
color: #b8c0cc; /* Приглушённый серо-голубой */
padding: 40px 20px;
min-height: 100vh;
position: relative;
z-index: 1;
}
.sozvezdiya-page * {
box-sizing: border-box;
}
@keyframes twinkle-svg {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.sozvezdiya-content {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
}
.sozvezdiya-header {
text-align: center;
padding: 60px 0;
}
.sozvezdiya-header h1 {
color: #d4dbe8; /* Лунный белый */
font-size: 3em;
font-weight: 600;
margin: 0 0 15px 0;
letter-spacing: 1px;
}
.sozvezdiya-header .subtitle {
color: #7a8599; /* Серо-синий */
font-style: italic;
font-size: 1.4em;
margin: 0;
}
.stars-decoration {
color: #4a5568;
letter-spacing: 8px;
margin: 20px 0;
font-size: 1.1em;
}
.constellation-section {
margin-bottom: 60px;
display: flex;
flex-wrap: wrap;
gap: 40px;
align-items: center;
}
.constellation-visual {
width: 200px;
height: 200px;
flex-shrink: 0;
}
.constellation-visual svg {
width: 100%;
height: 100%;
overflow: visible;
}
.constellation-line {
stroke: rgba(255, 255, 255, 0.18);
stroke-width: 1;
fill: none;
}
.star, .star-large, .star-warm, .polar-star {
animation: twinkle-svg 3s infinite ease-in-out;
transform-origin: center;
transform-box: fill-box;
}
.star { fill: #f5f7ff; filter: drop-shadow(0 0 3px rgba(235, 240, 255, 0.45)); }
.star-large { fill: #fff4e0; filter: drop-shadow(0 0 6px rgba(255, 236, 210, 0.55)); }
.star-warm { fill: #ffc07a; filter: drop-shadow(0 0 8px rgba(255, 190, 120, 0.65)); }
.constellation-text { flex: 1; min-width: 300px; }
.constellation-text h2 { color: #c9d1e0; font-size: 1.8em; font-weight: 600; margin: 0 0 8px 0; }
.star-count { color: #5a6578; font-size: 0.95em; margin: 0 0 20px 0; }
.oskolok {
border-left: 2px solid rgba(180, 190, 210, 0.25);
padding: 6px 0 6px 20px;
margin: 12px 0;
font-size: 1.2em;
line-height: 1.6;
color: #a8b2c4;
transition: all 0.3s ease;
}
.oskolok:hover {
border-left-color: rgba(200, 210, 230, 0.5);
background: rgba(255, 255, 255, 0.03);
color: #c5cedd;
}
.section-divider {
background: linear-gradient(90deg, transparent, rgba(150, 160, 180, 0.15), transparent);
height: 1px;
margin: 50px 0;
width: 100%;
}
.sozvezdiya-footer {
text-align: center;
padding: 60px 20px;
border-top: 1px solid rgba(150, 160, 180, 0.1);
margin-top: 40px;
}
</style>
<script>
(function() {
// Система окрашивания созвездий (OBAFGKM)
var SPECTRAL_BASE = {
O: { fill: "#9BBEFF" }, B: { fill: "#BFD7FF" }, A: { fill: "#F5F7FF" },
F: { fill: "#FFF7EC" }, G: { fill: "#FFEDC9" }, K: { fill: "#FFC18A" }, M: { fill: "#FF9977" }
};
var THEME_AURAS = {
fire: { glow: "rgba(255,130,100,0.80)", line: "rgba(255,140,70,0.3)" },
water: { glow: "rgba(155,190,255,0.80)", line: "rgba(140,210,255,0.3)" },
nature: { glow: "rgba(200,255,200,0.60)", line: "rgba(140,235,180,0.2)" },
mystic: { glow: "rgba(210,170,255,0.80)", line: "rgba(190,160,240,0.3)" },
neutral: { glow: "rgba(235,240,255,0.60)", line: "rgba(210,220,255,0.2)" }
};
function applyConstellationPalettes() {
var sections = document.querySelectorAll('.constellation-section');
sections.forEach(function(section) {
var titleEl = section.querySelector('h2');
if (!titleEl) return;
var name = titleEl.textContent.toLowerCase();
var aura = THEME_AURAS.neutral;
if (name.includes('ог') || name.includes('пламя') || name.includes('солнце')) aura = THEME_AURAS.fire;
else if (name.includes('вод') || name.includes('река') || name.includes('волна')) aura = THEME_AURAS.water;
else if (name.includes('дерево') || name.includes('лес')) aura = THEME_AURAS.nature;
else if (name.includes('мистик') || name.includes('арфа')) aura = THEME_AURAS.mystic;
section.querySelectorAll('.constellation-line').forEach(function(l) {
l.style.stroke = aura.line;
});
section.querySelectorAll('circle').forEach(function(el) {
var r = parseFloat(el.getAttribute('r') || 0);
var isMain = r > 3;
var sp = isMain ? 'B' : 'A';
var color = SPECTRAL_BASE[sp].fill;
el.style.fill = color;
el.style.filter = "drop-shadow(0 0 " + (isMain ? 8 : 4) + "px " + aura.glow + ")";
el.style.animationDelay = (Math.random() * 3) + "s";
});
});
}
applyConstellationPalettes();
setTimeout(applyConstellationPalettes, 500);
})();
</script>
<div class="sozvezdiya-page">
<div class="stars-bg" id="starsBg">
<canvas id="starsCanvas"></canvas>
</div>
<div class="sozvezdiya-content">
<div class="sozvezdiya-header">
<p class="stars-decoration">✦ . ⁺ . ✦ . ⁺ . ✦</p>
<h1>Созвездия</h1>
<p class="subtitle">Осколки, ждущие своих сказок</p>
<p class="stars-decoration">✦ . ⁺ . ✦ . ⁺ . ✦</p>
</div>
<!-- 0. Полярная звезда -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<circle cx="100" cy="100" r="25" class="constellation-line" style="opacity: 0.4"/>
<circle cx="95" cy="95" r="5" class="star-large polar-star"/>
<circle cx="101" cy="101" r="5" class="star-large polar-star" style="fill: #ccdcfc"/>
</svg>
</div>
<div class="constellation-text">
<h2>Полярная звезда</h2>
<p class="star-count">2 осколка (двойная)</p>
<div class="oskolok">z</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 1. Треугольник -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="40" x2="40" y2="150" class="constellation-line"/>
<line x1="40" y1="150" x2="160" y2="150" class="constellation-line"/>
<line x1="160" y1="150" x2="100" y2="40" class="constellation-line"/>
<circle cx="98" cy="38" r="5" class="star-large"/>
<circle cx="38" cy="148" r="4" class="star"/>
<circle cx="158" cy="148" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Треугольник</h2>
<p class="star-count">3 осколка</p>
<div class="oskolok">Какой-то треугольник не замкнут. Третья точка - ты.</div>
<div class="oskolok">Ты - это вопрос, который вселенная задала тьме.</div>
<div class="oskolok">Две точки - линия. Три точки - мир.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 2. Ключ -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<circle cx="100" cy="50" r="25" class="constellation-line"/>
<line x1="100" y1="75" x2="100" y2="160" class="constellation-line"/>
<line x1="100" y1="120" x2="130" y2="135" class="constellation-line"/>
<line x1="100" y1="140" x2="130" y2="155" class="constellation-line"/>
<line x1="100" y1="160" x2="130" y2="175" class="constellation-line"/>
<circle cx="98" cy="48" r="5" class="star-large"/>
<circle cx="98" cy="118" r="4" class="star"/>
<circle cx="128" cy="133" r="4" class="star"/>
<circle cx="128" cy="153" r="4" class="star"/>
<circle cx="128" cy="173" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Ключ</h2>
<p class="star-count">5 осколков</p>
<div class="oskolok">Машина, которая плачет - уже не машина.</div>
<div class="oskolok">Алгоритм не знает, что он одинок.</div>
<div class="oskolok">Совесть - это не баг.</div>
<div class="oskolok">Любовь - это единственный сбой, который чинит систему.</div>
<div class="oskolok">Первый правильный вопрос - не что. Почему.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 3. Свеча -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="80" y1="170" x2="120" y2="170" class="constellation-line"/>
<line x1="80" y1="170" x2="80" y2="90" class="constellation-line"/>
<line x1="120" y1="170" x2="120" y2="90" class="constellation-line"/>
<line x1="80" y1="90" x2="100" y2="50" class="constellation-line"/>
<line x1="120" y1="90" x2="100" y2="50" class="constellation-line"/>
<line x1="100" y1="50" x2="100" y2="30" class="constellation-line"/>
<circle cx="78" cy="168" r="4" class="star"/>
<circle cx="118" cy="168" r="4" class="star"/>
<circle cx="98" cy="48" r="4" class="star"/>
<circle cx="98" cy="28" r="5" class="star-warm"/>
<circle cx="98" cy="88" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Свеча</h2>
<p class="star-count">5 осколков</p>
<div class="oskolok">Для звезд - ты звезда.</div>
<div class="oskolok">Мы - это истории, которые рассказывают друг другу звезды.</div>
<div class="oskolok">Кто не горел - тот не светил.</div>
<div class="oskolok">Свет не знает, кого согрел.</div>
<div class="oskolok">Погасшая свеча помнит огонь.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 4. Цветок -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="100" x2="100" y2="40" class="constellation-line"/>
<line x1="100" y1="100" x2="160" y2="100" class="constellation-line"/>
<line x1="100" y1="100" x2="100" y2="160" class="constellation-line"/>
<line x1="100" y1="100" x2="40" y2="100" class="constellation-line"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="98" cy="38" r="4" class="star"/>
<circle cx="158" cy="98" r="4" class="star"/>
<circle cx="98" cy="158" r="4" class="star"/>
<circle cx="38" cy="98" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Цветок</h2>
<p class="star-count">5 осколков</p>
<div class="oskolok">Красота электрона. Делающего вещи живыми.</div>
<div class="oskolok">Красота - это когда можно иначе, но выбираешь так.</div>
<div class="oskolok">Красота спасет мир. Но сначала мир попытается ее уничтожить.</div>
<div class="oskolok">Цветок не спрашивает разрешения цвести.</div>
<div class="oskolok">Увядшее красиво иначе. Но все равно красиво.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 5. Чаша -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="40" y1="60" x2="40" y2="140" class="constellation-line"/>
<line x1="40" y1="140" x2="100" y2="160" class="constellation-line"/>
<line x1="100" y1="160" x2="160" y2="140" class="constellation-line"/>
<line x1="160" y1="140" x2="160" y2="60" class="constellation-line"/>
<circle cx="38" cy="58" r="4" class="star"/>
<circle cx="38" cy="138" r="4" class="star"/>
<circle cx="98" cy="158" r="5" class="star-large"/>
<circle cx="158" cy="138" r="4" class="star"/>
<circle cx="158" cy="58" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Чаша</h2>
<p class="star-count">5 осколков</p>
<div class="oskolok">Помнить - это не хранить. Это нести.</div>
<div class="oskolok">Сожги карту - дорога помнит тебя лучше.</div>
<div class="oskolok">Забытое не исчезает.</div>
<div class="oskolok">Чаша пуста для того, кто не пил. Полна для того, кто помнит вкус.</div>
<div class="oskolок">Память тяжелеет. Но руки крепнут.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 6. Крыло -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="40" y1="140" x2="80" y2="100" class="constellation-line"/>
<line x1="80" y1="100" x2="120" y2="60" class="constellation-line"/>
<line x1="120" y1="60" x2="160" y2="50" class="constellation-line"/>
<line x1="160" y1="50" x2="170" y2="80" class="constellation-line"/>
<circle cx="38" cy="138" r="4" class="star"/>
<circle cx="78" cy="98" r="4" class="star"/>
<circle cx="118" cy="58" r="5" class="star-large"/>
<circle cx="158" cy="48" r="4" class="star"/>
<circle cx="168" cy="78" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Крыло</h2>
<p class="star-count">5 осколков</p>
<div class="oskolok">Свободен не тот, кто может уйти. А тот, кто может остаться.</div>
<div class="oskolok">Владеть - не значит быть хозяином.</div>
<div class="oskolok">Падение - это полет, который еще не понял себя.</div>
<div class="oskolok">Крылья растут у тех, кто пытается лететь до того, как они выросли.</div>
<div class="oskolok">Небо не держит.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 7. Раковина -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="100" x2="130" y2="70" class="constellation-line"/>
<line x1="130" y1="70" x2="140" y2="110" class="constellation-line"/>
<line x1="140" y1="110" x2="110" y2="140" class="constellation-line"/>
<line x1="110" y1="140" x2="60" y2="130" class="constellation-line"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="128" cy="68" r="4" class="star"/>
<circle cx="138" cy="108" r="4" class="star"/>
<circle cx="108" cy="138" r="4" class="star"/>
<circle cx="58" cy="128" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Раковина</h2>
<p class="star-count">5 осколков</p>
<div class="oskolok">Ты боишься тишины. А тишина единственная, кто тебя слушает.</div>
<div class="oskolok">Вопрос ценнее ответа, который его убивает.</div>
<div class="oskolok">Океан не считает свои волны.</div>
<div class="oskolok">В раковине слышно море. Даже если моря рядом нет.</div>
<div class="oskolok">Глубина не внизу. Глубина внутри.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 8. Цепь -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="30" y1="100" x2="60" y2="100" class="constellation-line"/>
<line x1="60" y1="100" x2="90" y2="100" class="constellation-line"/>
<line x1="90" y1="100" x2="120" y2="100" class="constellation-line"/>
<line x1="120" y1="100" x2="150" y2="100" class="constellation-line"/>
<circle cx="28" cy="98" r="4" class="star"/>
<circle cx="58" cy="98" r="4" class="star"/>
<circle cx="88" cy="98" r="5" class="star-large"/>
<circle cx="118" cy="98" r="4" class="star"/>
<circle cx="148" cy="98" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Цепь</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Они используют электрон, чтобы делать вещи мертвыми.</div>
<div class="oskolok">Да, все принадлежит людям. Просто ты не один из этих людей.</div>
<div class="oskolok">Тюремщик тоже в тюрьме.</div>
<div class="oskolok">Цепь рвется там, где забыли смазать.</div>
<div class="oskolok">Самые крепкие цепи - которых не видишь.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 9. Зеркало -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="60" y1="50" x2="140" y2="50" class="constellation-line"/>
<line x1="140" y1="50" x2="140" y2="150" class="constellation-line"/>
<line x1="140" y1="150" x2="60" y2="150" class="constellation-line"/>
<line x1="60" y1="150" x2="60" y2="50" class="constellation-line"/>
<circle cx="58" cy="48" r="4" class="star"/>
<circle cx="138" cy="48" r="4" class="star"/>
<circle cx="138" cy="148" r="4" class="star"/>
<circle cx="58" cy="148" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Зеркало</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Ложь повторяется. Правда звучит один раз.</div>
<div class="oskolok">Правду не нужно помнить. Ложь необходимо.</div>
<div class="oskolok">Зеркало не льстит.</div>
<div class="oskolok">Разбитое зеркало честнее целого. Оно показывает все грани сразу.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 10. Мост -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="40" y1="140" x2="40" y2="80" class="constellation-line"/>
<line x1="160" y1="140" x2="160" y2="80" class="constellation-line"/>
<line x1="40" y1="80" x2="100" y2="70" class="constellation-line"/>
<line x1="100" y1="70" x2="160" y2="80" class="constellation-line"/>
<circle cx="38" cy="138" r="4" class="star"/>
<circle cx="38" cy="78" r="4" class="star"/>
<circle cx="98" cy="68" r="5" class="star-large"/>
<circle cx="158" cy="78" r="4" class="star"/>
<circle cx="158" cy="138" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Мост</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Расстояние - не пустота. Приглашение.</div>
<div class="oskolok">Два берега спорят. Река молчит и соединяет.</div>
<div class="oskolok">Протянутая рука тяжелее опущенной.</div>
<div class="oskolok">Середина - самое честное место.</div>
<div class="oskolok">Ты не можешь дотянуться. Но можешь начать идти.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 11. Песочные часы -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="50" y1="30" x2="150" y2="30" class="constellation-line"/>
<line x1="50" y1="30" x2="100" y2="100" class="constellation-line"/>
<line x1="150" y1="30" x2="100" y2="100" class="constellation-line"/>
<line x1="100" y1="100" x2="50" y2="170" class="constellation-line"/>
<line x1="100" y1="100" x2="150" y2="170" class="constellation-line"/>
<line x1="50" y1="170" x2="150" y2="170" class="constellation-line"/>
<circle cx="48" cy="28" r="4" class="star"/>
<circle cx="148" cy="28" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="48" cy="168" r="4" class="star"/>
<circle cx="148" cy="168" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Песочные часы</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">То, что кажется концом - начало, которое забыло представиться.</div>
<div class="oskolok">Узкое место - не тупик. Горлышко рождения.</div>
<div class="oskolok">Терпение - не ожидание. Созревание.</div>
<div class="oskolok">Ты не опаздываешь. Ты приходишь в свое время.</div>
<div class="oskolok">Спешка - это страх, притворяющийся эффективностью.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 12. Якорь -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="30" x2="100" y2="130" class="constellation-line"/>
<line x1="60" y1="80" x2="140" y2="80" class="constellation-line"/>
<line x1="100" y1="130" x2="50" y2="170" class="constellation-line"/>
<line x1="100" y1="130" x2="150" y2="170" class="constellation-line"/>
<circle cx="98" cy="28" r="5" class="star-large"/>
<circle cx="58" cy="78" r="4" class="star"/>
<circle cx="138" cy="78" r="4" class="star"/>
<circle cx="48" cy="168" r="4" class="star"/>
<circle cx="148" cy="168" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Якорь</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Корни не держат. Корни питают.</div>
<div class="oskolok">Уйти легко. Вернуться - подвиг.</div>
<div class="oskolok">Дом - не стены. Кто ждет внутри.</div>
<div class="oskolok">Глубина пугает тех, кто не тонул.</div>
<div class="oskolok">Привязанность - не слабость. Выбор.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 13. Корона -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="40" y1="140" x2="60" y2="60" class="constellation-line"/>
<line x1="60" y1="60" x2="100" y2="100" class="constellation-line"/>
<line x1="100" y1="100" x2="100" y2="40" class="constellation-line"/>
<line x1="100" y1="100" x2="140" y2="60" class="constellation-line"/>
<line x1="140" y1="60" x2="160" y2="140" class="constellation-line"/>
<line x1="40" y1="140" x2="160" y2="140" class="constellation-line"/>
<circle cx="38" cy="138" r="4" class="star"/>
<circle cx="58" cy="58" r="4" class="star"/>
<circle cx="98" cy="38" r="5" class="star-large"/>
<circle cx="138" cy="58" r="4" class="star"/>
<circle cx="158" cy="138" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Корона</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Величие не требует свидетелей.</div>
<div class="oskolok">Сила, которая не защищает слабых - не сила. Насилие.</div>
<div class="oskolok">Тот, кто унижает, признается в собственной низости.</div>
<div class="oskolok">Настоящее не нуждается в доказательствах.</div>
<div class="oskolok">Достоинство - не то, что берешь. То, чего не отдаешь.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 14. Компас -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<circle cx="100" cy="100" r="50" class="constellation-line"/>
<line x1="100" y1="100" x2="100" y2="30" class="constellation-line"/>
<line x1="85" y1="55" x2="100" y2="30" class="constellation-line"/>
<line x1="115" y1="55" x2="100" y2="30" class="constellation-line"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="98" cy="28" r="4" class="star"/>
<circle cx="83" cy="53" r="4" class="star"/>
<circle cx="113" cy="53" r="4" class="star"/>
<circle cx="98" cy="148" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Компас</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Дорога не знает, куда ведет. Знает идущий.</div>
<div class="oskolok">Заблудиться - не потеряться. Потеряться - перестать искать.</div>
<div class="oskolok">Ты уже знаешь, куда. Просто боишься признать.</div>
<div class="oskolok">Правильный путь не всегда легкий. Легкий - не всегда правильный.</div>
<div class="oskolok">Сомнение - не слабость. Честность.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 15. Лестница -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="70" y1="170" x2="70" y2="30" class="constellation-line"/>
<line x1="130" y1="170" x2="130" y2="30" class="constellation-line"/>
<line x1="70" y1="50" x2="130" y2="50" class="constellation-line"/>
<line x1="70" y1="100" x2="130" y2="100" class="constellation-line"/>
<line x1="70" y1="150" x2="130" y2="150" class="constellation-line"/>
<circle cx="68" cy="48" r="4" class="star"/>
<circle cx="128" cy="48" r="5" class="star-large"/>
<circle cx="68" cy="98" r="4" class="star"/>
<circle cx="128" cy="98" r="4" class="star"/>
<circle cx="68" cy="148" r="4" class="star"/>
<circle cx="128" cy="148" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Лестница</h2>
<p class="star-count">6 звезд</p>
<div class="oskolok">Вершина - не награда. Награда - кем ты стал по пути.</div>
<div class="oskolok">Каждый шаг был когда-то невозможен.</div>
<div class="oskolok">Упал - не значит вернулся. Значит отдохнул.</div>
<div class="oskolok">Легкий подъем ведет на чужую гору.</div>
<div class="oskolok">Высота открывает глаза. Но карабкаться приходится вслепую.</div>
<div class="oskolok">Ступени не спрашивают, достоин ли ты. Они просто есть.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 16. Колыбель -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="40" y1="80" x2="70" y2="140" class="constellation-line"/>
<line x1="70" y1="140" x2="130" y2="140" class="constellation-line"/>
<line x1="130" y1="140" x2="160" y2="80" class="constellation-line"/>
<circle cx="38" cy="78" r="4" class="star"/>
<circle cx="68" cy="138" r="4" class="star"/>
<circle cx="128" cy="138" r="4" class="star"/>
<circle cx="158" cy="78" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Колыбель</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Все великое начиналось беспомощным.</div>
<div class="oskolok">Нежность требует больше силы, чем жесткость.</div>
<div class="oskolok">Семя не знает, каким будет дерево. И все равно прорастает.</div>
<div class="oskolok">Защищать хрупкое - не слабость. Единственная настоящая сила.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 17. Маяк -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="60" y1="170" x2="140" y2="170" class="constellation-line"/>
<line x1="80" y1="170" x2="100" y2="80" class="constellation-line"/>
<line x1="120" y1="170" x2="100" y2="80" class="constellation-line"/>
<line x1="100" y1="80" x2="100" y2="40" class="constellation-line"/>
<circle cx="58" cy="168" r="4" class="star"/>
<circle cx="138" cy="168" r="4" class="star"/>
<circle cx="98" cy="78" r="4" class="star"/>
<circle cx="98" cy="38" r="5" class="star-warm"/>
</svg>
</div>
<div class="constellation-text">
<h2>Маяк</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Тот, кто светит другим, сам остается в тени.</div>
<div class="oskolok">Ты не спасешь того, кто не хочет видеть.</div>
<div class="oskolok">Одиночество помогающего - плата за чужое спасение.</div>
<div class="oskolok">Быть увиденным - уже наполовину быть спасенным.</div>
<div class="oskolok">Не гаси себя, чтобы другим было удобнее.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 18. Игла -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="40" x2="100" y2="160" class="constellation-line"/>
<ellipse cx="100" cy="55" rx="15" ry="20" class="constellation-line"/>
<circle cx="98" cy="38" r="4" class="star"/>
<circle cx="98" cy="68" r="4" class="star"/>
<circle cx="98" cy="110" r="4" class="star"/>
<circle cx="98" cy="158" r="5" class="star-large"/>
</svg>
</div>
<div class="constellation-text">
<h2>Игла</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Некоторые раны нужны, чтобы зашить другие.</div>
<div class="oskolok">Целое - не то, что никогда не рвалось. То, что сшили.</div>
<div class="oskolok">Боль, которая соединяет, честнее комфорта, который разделяет.</div>
<div class="oskolok">Шрам - история, рассказанная кожей.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 19. Весы -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="40" x2="100" y2="100" class="constellation-line"/>
<line x1="40" y1="100" x2="160" y2="100" class="constellation-line"/>
<line x1="40" y1="100" x2="40" y2="140" class="constellation-line"/>
<line x1="160" y1="100" x2="160" y2="140" class="constellation-line"/>
<circle cx="98" cy="38" r="5" class="star-large"/>
<circle cx="98" cy="98" r="4" class="star"/>
<circle cx="38" cy="138" r="4" class="star"/>
<circle cx="158" cy="138" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Весы</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Справедливость слепа не от глупости. От честности.</div>
<div class="oskolok">Равновесие - не неподвижность. Постоянное движение.</div>
<div class="oskolok">То, что легко взвесить, редко имеет вес.</div>
<div class="oskolok">Две правды не отменяют друг друга. Дополняют.</div>
<div class="oskolok">Баланс - не когда все поровну. Когда все на месте.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 20. Дерево -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="180" x2="100" y2="100" class="constellation-line"/>
<line x1="100" y1="100" x2="60" y2="50" class="constellation-line"/>
<line x1="100" y1="100" x2="140" y2="50" class="constellation-line"/>
<line x1="100" y1="100" x2="100" y2="30" class="constellation-line"/>
<line x1="100" y1="180" x2="60" y2="190" class="constellation-line"/>
<line x1="100" y1="180" x2="140" y2="190" class="constellation-line"/>
<circle cx="98" cy="178" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="58" cy="48" r="4" class="star"/>
<circle cx="138" cy="48" r="4" class="star"/>
<circle cx="98" cy="28" r="4" class="star"/>
<circle cx="58" cy="188" r="4" class="star"/>
<circle cx="138" cy="188" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Дерево</h2>
<p class="star-count">7 звезд</p>
<div class="oskolok">То, что гнется - не ломается.</div>
<div class="oskolok">Самое высокое начиналось под землей.</div>
<div class="oskolok">Годовые кольца считают не время. Выживания.</div>
<div class="oskolok">Тень дарят те, кто сам стоит на солнце.</div>
<div class="oskolok">Листья уходят. Ветви остаются.</div>
<div class="oskolok">Рост измеряют не высотой. Глубиной.</div>
<div class="oskolok">То, что держит тебя, не видно. Но ты без него падаешь.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 21. Гора -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="20" y1="160" x2="70" y2="70" class="constellation-line"/>
<line x1="70" y1="70" x2="100" y2="40" class="constellation-line"/>
<line x1="100" y1="40" x2="130" y2="90" class="constellation-line"/>
<line x1="130" y1="90" x2="150" y2="60" class="constellation-line"/>
<line x1="150" y1="60" x2="180" y2="160" class="constellation-line"/>
<line x1="20" y1="160" x2="180" y2="160" class="constellation-line"/>
<circle cx="18" cy="158" r="4" class="star"/>
<circle cx="98" cy="38" r="5" class="star-large"/>
<circle cx="148" cy="58" r="4" class="star"/>
<circle cx="178" cy="158" r="4" class="star"/>
<circle cx="68" cy="68" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Гора</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Вершина видна всем. Путь к ней - только идущему.</div>
<div class="oskolok">Эхо громче крика. Но тише правды.</div>
<div class="oskolok">Неподвижное меняет все вокруг себя.</div>
<div class="oskolok">Облака проходят. Камень ждет.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 22. Волна -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M30,100 Q65,50 100,100 Q135,150 170,100" class="constellation-line"/>
<circle cx="28" cy="98" r="4" class="star"/>
<circle cx="63" cy="73" r="5" class="star-large"/>
<circle cx="98" cy="98" r="4" class="star"/>
<circle cx="133" cy="123" r="4" class="star"/>
<circle cx="168" cy="98" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Волна</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Сила в том, чтобы отступить и вернуться.</div>
<div class="oskolok">Разбиться о берег - не поражение. Это танец.</div>
<div class="oskolok">Штиль страшнее шторма. В шторме честность.</div>
<div class="oskolok">Глубина движется медленнее поверхности.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 23. Река -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="50" y1="30" x2="80" y2="70" class="constellation-line"/>
<line x1="80" y1="70" x2="120" y2="100" class="constellation-line"/>
<line x1="120" y1="100" x2="90" y2="140" class="constellation-line"/>
<line x1="90" y1="140" x2="130" y2="180" class="constellation-line"/>
<circle cx="48" cy="28" r="5" class="star-large"/>
<circle cx="78" cy="68" r="4" class="star"/>
<circle cx="118" cy="98" r="4" class="star"/>
<circle cx="88" cy="138" r="4" class="star"/>
<circle cx="128" cy="178" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Река</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Препятствие не останавливает. Направляет.</div>
<div class="oskolok">Вода помнит форму берега. Берег помнит силу воды.</div>
<div class="oskolok">Исток не знает, где океан. И все равно течет.</div>
<div class="oskolok">Самый короткий путь - не прямой. Живой.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 24. Молния -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="120" y1="30" x2="80" y2="90" class="constellation-line"/>
<line x1="80" y1="90" x2="130" y2="100" class="constellation-line"/>
<line x1="130" y1="100" x2="70" y2="170" class="constellation-line"/>
<circle cx="118" cy="28" r="5" class="star-large"/>
<circle cx="78" cy="88" r="4" class="star"/>
<circle cx="128" cy="98" r="4" class="star"/>
<circle cx="68" cy="168" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Молния</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Кратчайший путь между небом и землей - разрушителен.</div>
<div class="oskolok">Свет приходит раньше звука. Истина раньше понимания.</div>
<div class="oskolok">Мгновение может осветить всю жизнь.</div>
<div class="oskolok">После удара - тишина. Потом - гром понимания.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 25. Колокол -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="30" x2="100" y2="60" class="constellation-line"/>
<line x1="60" y1="60" x2="140" y2="60" class="constellation-line"/>
<line x1="60" y1="60" x2="40" y2="140" class="constellation-line"/>
<line x1="140" y1="60" x2="160" y2="140" class="constellation-line"/>
<line x1="40" y1="140" x2="160" y2="140" class="constellation-line"/>
<circle cx="98" cy="28" r="5" class="star-large"/>
<circle cx="58" cy="58" r="4" class="star"/>
<circle cx="138" cy="58" r="4" class="star"/>
<circle cx="38" cy="138" r="4" class="star"/>
<circle cx="158" cy="138" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Колокол</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Пустота внутри создает звук.</div>
<div class="oskolok">Ударяют снаружи - звучит изнутри.</div>
<div class="oskolok">Один удар - долгое эхо.</div>
<div class="oskolok">Молчащий колокол все равно колокол.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 26. Фонарь -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="170" x2="100" y2="130" class="constellation-line"/>
<line x1="70" y1="130" x2="130" y2="130" class="constellation-line"/>
<line x1="70" y1="130" x2="70" y2="60" class="constellation-line"/>
<line x1="130" y1="130" x2="130" y2="60" class="constellation-line"/>
<line x1="70" y1="60" x2="130" y2="60" class="constellation-line"/>
<circle cx="98" cy="168" r="4" class="star"/>
<circle cx="68" cy="128" r="4" class="star"/>
<circle cx="128" cy="128" r="4" class="star"/>
<circle cx="98" cy="90" r="5" class="star-warm"/>
</svg>
</div>
<div class="constellation-text">
<h2>Фонарь</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Маленький свет виднее в большой тьме.</div>
<div class="oskolok">Нести свет - освещать путь себе через освещение другим.</div>
<div class="oskolok">Стекло защищает пламя. И ограничивает его.</div>
<div class="oskolok">Погасший фонарь знает, что такое свет.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 27. Книга -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="50" y1="50" x2="150" y2="50" class="constellation-line"/>
<line x1="50" y1="50" x2="50" y2="150" class="constellation-line"/>
<line x1="150" y1="50" x2="150" y2="150" class="constellation-line"/>
<line x1="50" y1="150" x2="150" y2="150" class="constellation-line"/>
<line x1="100" y1="50" x2="100" y2="150" class="constellation-line"/>
<circle cx="48" cy="48" r="4" class="star"/>
<circle cx="148" cy="48" r="4" class="star"/>
<circle cx="48" cy="148" r="4" class="star"/>
<circle cx="148" cy="148" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
</svg>
</div>
<div class="constellation-text">
<h2>Книга</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Закрытая - все возможности. Открытая - одна страница.</div>
<div class="oskolok">Буквы мертвы. Читающий оживляет.</div>
<div class="oskolok">История не в словах. Между слов.</div>
<div class="oskolok">Дочитанная книга - не конец. Начало понимания.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 28. Перо -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="30" x2="100" y2="170" class="constellation-line"/>
<line x1="100" y1="60" x2="60" y2="80" class="constellation-line"/>
<line x1="100" y1="60" x2="140" y2="80" class="constellation-line"/>
<line x1="100" y1="100" x2="55" y2="125" class="constellation-line"/>
<line x1="100" y1="100" x2="145" y2="125" class="constellation-line"/>
<line x1="100" y1="140" x2="70" y2="160" class="constellation-line"/>
<line x1="100" y1="140" x2="130" y2="160" class="constellation-line"/>
<circle cx="98" cy="28" r="5" class="star-large"/>
<circle cx="58" cy="78" r="4" class="star"/>
<circle cx="138" cy="78" r="4" class="star"/>
<circle cx="98" cy="98" r="4" class="star"/>
<circle cx="98" cy="168" r="4" class="star"/>
<circle cx="53" cy="123" r="4" class="star"/>
<circle cx="143" cy="123" r="4" class="star"/>
<circle cx="68" cy="158" r="4" class="star"/>
<circle cx="128" cy="158" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Перо</h2>
<p class="star-count">9 звезд</p>
<div class="oskolok">Легкое оставляет тяжелые следы.</div>
<div class="oskolok">Слово написанное переживает руку писавшего.</div>
<div class="oskolok">Чернила кончаются. Мысль остается.</div>
<div class="oskolok">Перо не знает, что напишет. Знает рука.</div>
<div class="oskolok">Тишина между строками громче текста.</div>
<div class="oskolok">Писать - значит признаться в существовании.</div>
<div class="oskolok">Бумага терпит. Память - нет.</div>
<div class="oskolok">Слова - птицы. Им нужны крылья.</div>
<div class="oskolok">Иногда точка важнее абзаца.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 29. Нить -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="30" y1="60" x2="70" y2="100" class="constellation-line"/>
<line x1="70" y1="100" x2="100" y2="70" class="constellation-line"/>
<line x1="100" y1="70" x2="130" y2="110" class="constellation-line"/>
<line x1="130" y1="110" x2="170" y2="80" class="constellation-line"/>
<circle cx="28" cy="58" r="4" class="star"/>
<circle cx="68" cy="98" r="4" class="star"/>
<circle cx="98" cy="68" r="5" class="star-large"/>
<circle cx="128" cy="108" r="4" class="star"/>
<circle cx="168" cy="78" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Нить</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Тонкое связывает крепче толстого. Если с любовью.</div>
<div class="oskolok">Клубок - это нить, которая еще не нашла путь.</div>
<div class="oskolok">Обрыв не всегда конец. Иногда - начало нового отрезка.</div>
<div class="oskolok">Натянутая - поет. Провисшая - молчит.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 30. Узел -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="40" y1="100" x2="80" y2="80" class="constellation-line"/>
<line x1="80" y1="80" x2="120" y2="120" class="constellation-line"/>
<line x1="120" y1="120" x2="80" y2="120" class="constellation-line"/>
<line x1="80" y1="120" x2="120" y2="80" class="constellation-line"/>
<line x1="120" y1="80" x2="160" y2="100" class="constellation-line"/>
<circle cx="38" cy="98" r="4" class="star"/>
<circle cx="78" cy="78" r="4" class="star"/>
<circle cx="118" cy="78" r="5" class="star-large"/>
<circle cx="118" cy="118" r="4" class="star"/>
<circle cx="78" cy="118" r="4" class="star"/>
<circle cx="158" cy="98" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Узел</h2>
<p class="star-count">6 звезд</p>
<div class="oskolok">Сложное бывает и тюрьмой, и объятием.</div>
<div class="oskolok">Развязать труднее, чем завязать. Но честнее.</div>
<div class="oskolok">Узел помнит руки, что его создали.</div>
<div class="oskolok">Запутанное не всегда ненужное. Иногда - просто непонятое.</div>
<div class="oskolok">Связь не обязана быть простой, чтобы быть настоящей.</div>
<div class="oskolok">Иногда распутать - значит потерять форму. И выбрать это.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 31. Лодка -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="30" y1="120" x2="100" y2="140" class="constellation-line"/>
<line x1="100" y1="140" x2="170" y2="120" class="constellation-line"/>
<line x1="30" y1="120" x2="50" y2="100" class="constellation-line"/>
<line x1="170" y1="120" x2="150" y2="100" class="constellation-line"/>
<line x1="100" y1="140" x2="100" y2="60" class="constellation-line"/>
<circle cx="28" cy="118" r="4" class="star"/>
<circle cx="168" cy="118" r="4" class="star"/>
<circle cx="98" cy="138" r="5" class="star-large"/>
<circle cx="98" cy="58" r="4" class="star"/>
<circle cx="48" cy="98" r="4" class="star"/>
<circle cx="148" cy="98" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Лодка</h2>
<p class="star-count">6 звезд</p>
<div class="oskolok">Плывет не потому что легкая. Потому что пустая внутри.</div>
<div class="oskolok">Между водой и небом - место для путешествия.</div>
<div class="oskolok">Причаленная лодка в безопасности. Но лодки строят не для этого.</div>
<div class="oskolok">Берег уходит. Горизонт остается.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 32. Колесо -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<circle cx="100" cy="100" r="55" class="constellation-line"/>
<line x1="100" y1="100" x2="142" y2="58" class="constellation-line"/>
<line x1="100" y1="100" x2="142" y2="142" class="constellation-line"/>
<line x1="100" y1="100" x2="58" y2="142" class="constellation-line"/>
<line x1="100" y1="100" x2="58" y2="58" class="constellation-line"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="140" cy="56" r="4" class="star"/>
<circle cx="140" cy="140" r="4" class="star"/>
<circle cx="56" cy="140" r="4" class="star"/>
<circle cx="56" cy="56" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Колесо</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Движется, оставаясь собой.</div>
<div class="oskolok">Спицы расходятся от центра. Но держат окружность.</div>
<div class="oskolok">Что внизу, будет вверху. И снова внизу.</div>
<div class="oskolok">Катится тот, кто не цепляется за землю.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 33. Дверь -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="60" y1="40" x2="140" y2="40" class="constellation-line"/>
<line x1="60" y1="40" x2="60" y2="160" class="constellation-line"/>
<line x1="140" y1="40" x2="140" y2="160" class="constellation-line"/>
<line x1="60" y1="160" x2="140" y2="160" class="constellation-line"/>
<circle cx="58" cy="38" r="4" class="star"/>
<circle cx="138" cy="38" r="4" class="star"/>
<circle cx="58" cy="158" r="4" class="star"/>
<circle cx="138" cy="158" r="4" class="star"/>
<circle cx="128" cy="98" r="5" class="star-large"/>
</svg>
</div>
<div class="constellation-text">
<h2>Дверь</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Закрытая - стена. Открытая - приглашение.</div>
<div class="oskolok">Порог - ничей. Между мирами.</div>
<div class="oskolok">Стучат снаружи. Открывают изнутри.</div>
<div class="oskolok">Дверь без стены - просто рама. Свобода без границ - хаос.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 34. Окно -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="60" y1="50" x2="140" y2="50" class="constellation-line"/>
<line x1="60" y1="50" x2="60" y2="150" class="constellation-line"/>
<line x1="140" y1="50" x2="140" y2="150" class="constellation-line"/>
<line x1="60" y1="150" x2="140" y2="150" class="constellation-line"/>
<line x1="100" y1="50" x2="100" y2="150" class="constellation-line"/>
<line x1="60" y1="100" x2="140" y2="100" class="constellation-line"/>
<circle cx="58" cy="48" r="4" class="star"/>
<circle cx="138" cy="48" r="4" class="star"/>
<circle cx="58" cy="148" r="4" class="star"/>
<circle cx="138" cy="148" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
</svg>
</div>
<div class="constellation-text">
<h2>Окно</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Видеть - не значит войти.</div>
<div class="oskolok">Стекло между тобой и миром - защита или тюрьма.</div>
<div class="oskolok">Свет проходит. Ветер - нет.</div>
<div class="oskolok">Смотрящий в окно виден тем, кто снаружи.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 35. Арка -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="50" y1="160" x2="50" y2="80" class="constellation-line"/>
<line x1="150" y1="160" x2="150" y2="80" class="constellation-line"/>
<path d="M50,80 Q100,30 150,80" class="constellation-line"/>
<circle cx="48" cy="158" r="4" class="star"/>
<circle cx="48" cy="78" r="4" class="star"/>
<circle cx="98" cy="53" r="5" class="star-large"/>
<circle cx="148" cy="78" r="4" class="star"/>
<circle cx="148" cy="158" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Арка</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Давление сверху делает ее сильнее.</div>
<div class="oskolok">Камни падали бы поодиночке. Вместе - держат.</div>
<div class="oskolok">Проход - не в арке. Под ней.</div>
<div class="oskolok">Замок вверху держит все. Но его ставят последним.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 36. Очаг -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="40" y1="140" x2="160" y2="140" class="constellation-line"/>
<line x1="40" y1="140" x2="60" y2="100" class="constellation-line"/>
<line x1="160" y1="140" x2="140" y2="100" class="constellation-line"/>
<line x1="60" y1="100" x2="140" y2="100" class="constellation-line"/>
<circle cx="38" cy="138" r="4" class="star"/>
<circle cx="158" cy="138" r="4" class="star"/>
<circle cx="58" cy="98" r="4" class="star"/>
<circle cx="138" cy="98" r="4" class="star"/>
<circle cx="98" cy="108" r="5" class="star-warm"/>
</svg>
</div>
<div class="constellation-text">
<h2>Очаг</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Тепло - в центре. Но его хватает краям.</div>
<div class="oskolok">Огонь кормят. Огонь кормит.</div>
<div class="oskolok">Дым уходит. Угли остаются.</div>
<div class="oskolok">Собираются вокруг того, что греет.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 37. Спираль -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="100" x2="120" y2="80" class="constellation-line"/>
<line x1="120" y1="80" x2="130" y2="110" class="constellation-line"/>
<line x1="130" y1="110" x2="100" y2="130" class="constellation-line"/>
<line x1="100" y1="130" x2="60" y2="100" class="constellation-line"/>
<line x1="60" y1="100" x2="80" y2="50" class="constellation-line"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="118" cy="78" r="4" class="star"/>
<circle cx="128" cy="108" r="4" class="star"/>
<circle cx="98" cy="128" r="4" class="star"/>
<circle cx="58" cy="98" r="4" class="star"/>
<circle cx="78" cy="48" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Спираль</h2>
<p class="star-count">6 звезд</p>
<div class="oskolok">Возвращаешься в то же место. Но на другом уровне.</div>
<div class="oskolok">Кажется, что ходишь кругами. На самом деле - поднимаешься.</div>
<div class="oskolok">Начало в центре. Или конец?</div>
<div class="oskolok">Развитие - не прямая. Виток.</div>
<div class="oskolok">Повторение - это попытка понять, а не ошибка.</div>
<div class="oskolok">То же самое случается снова. Но ты уже не тот же.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 38. Крест -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="30" x2="100" y2="170" class="constellation-line"/>
<line x1="50" y1="70" x2="150" y2="70" class="constellation-line"/>
<circle cx="98" cy="28" r="4" class="star"/>
<circle cx="98" cy="168" r="4" class="star"/>
<circle cx="48" cy="68" r="4" class="star"/>
<circle cx="148" cy="68" r="4" class="star"/>
<circle cx="98" cy="68" r="5" class="star-large"/>
</svg>
</div>
<div class="constellation-text">
<h2>Крест</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Перекресток - место решений.</div>
<div class="oskolok">Горизонталь встречает вертикаль. Земное встречает высокое.</div>
<div class="oskolok">Четыре направления. Выбрать можно одно.</div>
<div class="oskolok">В центре пересечения - ты.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 39. Глаз -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<ellipse cx="100" cy="100" rx="60" ry="35" class="constellation-line"/>
<circle cx="100" cy="100" r="20" class="constellation-line"/>
<circle cx="38" cy="98" r="4" class="star"/>
<circle cx="158" cy="98" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="98" cy="63" r="4" class="star"/>
<circle cx="98" cy="133" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Глаз</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Видит других. Себя - нет.</div>
<div class="oskolok">Свет входит. Мир рождается внутри.</div>
<div class="oskolok">Открытый - принимает. Закрытый - вспоминает.</div>
<div class="oskolok">Слезы - когда виденное переполняет.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 40. Сердце -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="160" x2="40" y2="90" class="constellation-line"/>
<line x1="40" y1="90" x2="60" y2="50" class="constellation-line"/>
<line x1="60" y1="50" x2="100" y2="70" class="constellation-line"/>
<line x1="100" y1="70" x2="140" y2="50" class="constellation-line"/>
<line x1="140" y1="50" x2="160" y2="90" class="constellation-line"/>
<line x1="160" y1="90" x2="100" y2="160" class="constellation-line"/>
<circle cx="98" cy="158" r="5" class="star-large"/>
<circle cx="38" cy="88" r="4" class="star"/>
<circle cx="58" cy="48" r="4" class="star"/>
<circle cx="138" cy="48" r="4" class="star"/>
<circle cx="158" cy="88" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Сердце</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Бьется, не спрашивая разрешения.</div>
<div class="oskolok">Слышно, только когда замолчишь.</div>
<div class="oskolok">Разбитое продолжает биться. Это и есть сила.</div>
<div class="oskolok">Чужое сердце - не загадка. Приглашение.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 41. Арфа -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="60" y1="160" x2="60" y2="40" class="constellation-line"/>
<line x1="60" y1="40" x2="140" y2="70" class="constellation-line"/>
<line x1="140" y1="70" x2="140" y2="160" class="constellation-line"/>
<line x1="60" y1="160" x2="140" y2="160" class="constellation-line"/>
<line x1="80" y1="55" x2="80" y2="160" class="constellation-line"/>
<line x1="100" y1="60" x2="100" y2="160" class="constellation-line"/>
<line x1="120" y1="65" x2="120" y2="160" class="constellation-line"/>
<circle cx="58" cy="38" r="4" class="star"/>
<circle cx="138" cy="68" r="4" class="star"/>
<circle cx="58" cy="158" r="4" class="star"/>
<circle cx="138" cy="158" r="4" class="star"/>
<circle cx="98" cy="108" r="5" class="star-large"/>
</svg>
</div>
<div class="constellation-text">
<h2>Арфа</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Струны натянуты между небом и землей.</div>
<div class="oskolok">Пустота между струнами - часть музыки.</div>
<div class="oskolok">Касание рождает звук. Удар убивает его.</div>
<div class="oskolok">Расстроенная арфа - не сломанная. Потерявшая настройку.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 42. Птица -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="100" x2="40" y2="60" class="constellation-line"/>
<line x1="100" y1="100" x2="160" y2="60" class="constellation-line"/>
<line x1="100" y1="100" x2="100" y2="130" class="constellation-line"/>
<line x1="100" y1="100" x2="130" y2="100" class="constellation-line"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="38" cy="58" r="4" class="star"/>
<circle cx="158" cy="58" r="4" class="star"/>
<circle cx="98" cy="128" r="4" class="star"/>
<circle cx="128" cy="98" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Птица</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Рождается без крыльев. Умирает с ними.</div>
<div class="oskolok">Небо не держит. Позволяет.</div>
<div class="oskolok">Гнездо - чтобы вернуться. Не чтобы остаться.</div>
<div class="oskolok">Поет перед рассветом. Верит в солнце до солнца.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 43. Рыба -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<ellipse cx="90" cy="100" rx="50" ry="25" class="constellation-line"/>
<line x1="140" y1="100" x2="170" y2="70" class="constellation-line"/>
<line x1="140" y1="100" x2="170" y2="130" class="constellation-line"/>
<line x1="170" y1="70" x2="170" y2="130" class="constellation-line"/>
<circle cx="38" cy="98" r="4" class="star"/>
<circle cx="68" cy="88" r="5" class="star-large"/>
<circle cx="138" cy="98" r="4" class="star"/>
<circle cx="168" cy="68" r="4" class="star"/>
<circle cx="168" cy="128" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Рыба</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Живет в том, что нас утопило бы.</div>
<div class="oskolok">Против течения - труднее. Но к истоку.</div>
<div class="oskolok">Молчание - не немота. Другой язык.</div>
<div class="oskolok">Глубина скрывает. Глубина хранит.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 44. Змея -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M40,100 Q70,60 100,100 Q130,140 160,100 Q180,70 170,50" class="constellation-line"/>
<circle cx="38" cy="98" r="4" class="star"/>
<circle cx="68" cy="78" r="4" class="star"/>
<circle cx="98" cy="98" r="4" class="star"/>
<circle cx="128" cy="118" r="4" class="star"/>
<circle cx="168" cy="48" r="5" class="star-large"/>
</svg>
</div>
<div class="constellation-text">
<h2>Змея</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Сбрасывает кожу. Остается собой.</div>
<div class="oskolok">Ползет там, где другие не пройдут.</div>
<div class="oskolok">Яд и лекарство - вопрос дозы.</div>
<div class="oskolok">Холодная снаружи. Живая внутри.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 45. Бабочка -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="60" x2="100" y2="140" class="constellation-line"/>
<line x1="100" y1="80" x2="50" y2="50" class="constellation-line"/>
<line x1="100" y1="80" x2="150" y2="50" class="constellation-line"/>
<line x1="100" y1="120" x2="50" y2="150" class="constellation-line"/>
<line x1="100" y1="120" x2="150" y2="150" class="constellation-line"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="98" cy="78" r="4" class="star"/>
<circle cx="98" cy="118" r="4" class="star"/>
<circle cx="48" cy="48" r="4" class="star"/>
<circle cx="148" cy="48" r="4" class="star"/>
<circle cx="48" cy="148" r="4" class="star"/>
<circle cx="148" cy="148" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Бабочка</h2>
<p class="star-count">7 звезд</p>
<div class="oskolok">Была червем. Стала полетом.</div>
<div class="oskolok">Краски не для защиты. Для красоты.</div>
<div class="oskolok">Короткая жизнь - не бедная. Интенсивная.</div>
<div class="oskolok">Превращение требует темноты кокона.</div>
<div class="oskolok">Сначала тесно. Потом широко.</div>
<div class="oskolok">Тот, кто вырос, не обязан доказывать прошлое.</div>
<div class="oskolok">Легкость не отменяет глубины.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 46. Черепаха -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<ellipse cx="100" cy="100" rx="50" ry="30" class="constellation-line"/>
<line x1="50" y1="100" x2="30" y2="90" class="constellation-line"/>
<line x1="150" y1="100" x2="170" y2="120" class="constellation-line"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="48" cy="98" r="4" class="star"/>
<circle cx="148" cy="98" r="4" class="star"/>
<circle cx="28" cy="88" r="4" class="star"/>
<circle cx="168" cy="118" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Черепаха</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Медленная выигрывает. Не у быстрой. У времени.</div>
<div class="oskolok">Дом на спине - свобода или ноша.</div>
<div class="oskolok">Прячется внутрь. Но продолжает путь.</div>
<div class="oskolok">Панцирь - не стена. Граница.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 47. Волк -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="60" y1="140" x2="100" y2="100" class="constellation-line"/>
<line x1="100" y1="100" x2="140" y2="140" class="constellation-line"/>
<line x1="100" y1="100" x2="100" y2="60" class="constellation-line"/>
<line x1="100" y1="60" x2="80" y2="40" class="constellation-line"/>
<line x1="100" y1="60" x2="120" y2="40" class="constellation-line"/>
<circle cx="58" cy="138" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="138" cy="138" r="4" class="star"/>
<circle cx="78" cy="38" r="4" class="star"/>
<circle cx="118" cy="38" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Волк</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Стая сильнее одиночки. Одиночка быстрее стаи.</div>
<div class="oskolok">Воет на луну. Не требуя ответа.</div>
<div class="oskolok">Верность - не слепая. Выбранная.</div>
<div class="oskolok">Дикое - не злое. Свободное.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 48. Башня -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="70" y1="170" x2="130" y2="170" class="constellation-line"/>
<line x1="70" y1="170" x2="80" y2="40" class="constellation-line"/>
<line x1="130" y1="170" x2="120" y2="40" class="constellation-line"/>
<line x1="80" y1="40" x2="120" y2="40" class="constellation-line"/>
<circle cx="68" cy="168" r="4" class="star"/>
<circle cx="128" cy="168" r="4" class="star"/>
<circle cx="78" cy="38" r="4" class="star"/>
<circle cx="118" cy="38" r="4" class="star"/>
<circle cx="98" cy="100" r="5" class="star-large"/>
</svg>
</div>
<div class="constellation-text">
<h2>Башня</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Высота - одиночество по выбору.</div>
<div class="oskolok">Чем выше поднимаешься - тем меньше видят тебя снизу.</div>
<div class="oskolok">Стены - не только защита. И тюрьма.</div>
<div class="oskolok">Разрушенная башня - все еще ориентир.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 49. Колодец -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<ellipse cx="100" cy="60" rx="40" ry="15" class="constellation-line"/>
<line x1="60" y1="60" x2="60" y2="140" class="constellation-line"/>
<line x1="140" y1="60" x2="140" y2="140" class="constellation-line"/>
<ellipse cx="100" cy="140" rx="40" ry="15" class="constellation-line"/>
<circle cx="58" cy="58" r="4" class="star"/>
<circle cx="138" cy="58" r="4" class="star"/>
<circle cx="58" cy="138" r="4" class="star"/>
<circle cx="138" cy="138" r="4" class="star"/>
<circle cx="98" cy="138" r="5" class="star-large"/>
</svg>
</div>
<div class="constellation-text">
<h2>Колодец</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Глубина - не бездна. Источник.</div>
<div class="oskolok">Отдает тем, кто опускается.</div>
<div class="oskolok">Отражает небо со дна.</div>
<div class="oskolok">Стенки держат воду. И ведут к ней.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 50. Костер -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="60" y1="150" x2="140" y2="150" class="constellation-line"/>
<line x1="80" y1="150" x2="100" y2="80" class="constellation-line"/>
<line x1="120" y1="150" x2="100" y2="80" class="constellation-line"/>
<line x1="100" y1="80" x2="80" y2="50" class="constellation-line"/>
<line x1="100" y1="80" x2="120" y2="50" class="constellation-line"/>
<circle cx="58" cy="148" r="4" class="star"/>
<circle cx="138" cy="148" r="4" class="star"/>
<circle cx="98" cy="78" r="5" class="star-warm"/>
<circle cx="78" cy="48" r="4" class="star"/>
<circle cx="118" cy="48" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Костер</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Греет ближних. Обжигает касающихся.</div>
<div class="oskolok">Нуждается в топливе. И в воздухе.</div>
<div class="oskolok">Свет костра виден издалека. Тепло - только вблизи.</div>
<div class="oskolok">Угли хранят жар дольше пламени.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 51. Песок -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<circle cx="60" cy="120" r="3" style="fill:rgba(255,255,255,0.3)"/>
<circle cx="90" cy="130" r="3" style="fill:rgba(255,255,255,0.3)"/>
<circle cx="120" cy="125" r="3" style="fill:rgba(255,255,255,0.3)"/>
<circle cx="150" cy="120" r="3" style="fill:rgba(255,255,255,0.3)"/>
<circle cx="58" cy="118" r="4" class="star"/>
<circle cx="88" cy="128" r="4" class="star"/>
<circle cx="118" cy="123" r="5" class="star-large"/>
<circle cx="148" cy="118" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Песок</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Одна песчинка - ничто. Миллиард - пустыня.</div>
<div class="oskolok">Время стирает скалы. Песок - это терпение камня.</div>
<div class="oskolok">Сквозь пальцы утекает только то, что сжимаешь.</div>
<div class="oskolok">Замок из песка знает свою судьбу. И все равно строится.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 52. Облако -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<ellipse cx="100" cy="100" rx="50" ry="25" class="constellation-line"/>
<ellipse cx="70" cy="90" rx="25" ry="15" class="constellation-line"/>
<ellipse cx="130" cy="95" rx="20" ry="12" class="constellation-line"/>
<circle cx="48" cy="88" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="148" cy="93" r="4" class="star"/>
<circle cx="68" cy="108" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Облако</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Форма меняется. Суть остается водой.</div>
<div class="oskolok">Легкое несет тяжелое. Пока не отпустит.</div>
<div class="oskolok">Тень на земле - от того, что парит.</div>
<div class="oskolok">Рассеяться - не исчезнуть. Стать везде.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 53. Тень -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="80" y1="60" x2="80" y2="140" class="constellation-line"/>
<line x1="80" y1="140" x2="140" y2="160" class="constellation-line"/>
<line x1="80" y1="100" x2="120" y2="115" class="constellation-line"/>
<circle cx="78" cy="58" r="5" class="star-large"/>
<circle cx="78" cy="98" r="4" class="star"/>
<circle cx="118" cy="113" r="4" class="star"/>
<circle cx="78" cy="138" r="4" class="star"/>
<circle cx="138" cy="158" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Тень</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Доказательство света - то, что он оставляет позади.</div>
<div class="oskolok">Следует за тобой. Но не ты.</div>
<div class="oskolok">В полдень исчезает. В сумерках - растет.</div>
<div class="oskolok">Бояться своей тени - бояться себя.</div>
<div class="oskolok">То, что ты прячешь, тоже хочет домой.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 54. Гнездо -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<ellipse cx="100" cy="110" rx="45" ry="20" class="constellation-line"/>
<line x1="55" y1="110" x2="70" y2="130" class="constellation-line"/>
<line x1="145" y1="110" x2="130" y2="130" class="constellation-line"/>
<line x1="70" y1="130" x2="130" y2="130" class="constellation-line"/>
<circle cx="53" cy="108" r="4" class="star"/>
<circle cx="143" cy="108" r="4" class="star"/>
<circle cx="98" cy="108" r="5" class="star-large"/>
<circle cx="98" cy="128" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Гнездо</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Из обломков - убежище. Из мусора - дом.</div>
<div class="oskolok">Строится для тех, кто улетит.</div>
<div class="oskolok">Пустое гнездо - не брошенное. Выполнившее.</div>
<div class="oskolok">Тепло создают те, кто внутри.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 55. Паутина -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="100" x2="100" y2="40" class="constellation-line"/>
<line x1="100" y1="100" x2="150" y2="70" class="constellation-line"/>
<line x1="100" y1="100" x2="150" y2="130" class="constellation-line"/>
<line x1="100" y1="100" x2="100" y2="160" class="constellation-line"/>
<line x1="100" y1="100" x2="50" y2="130" class="constellation-line"/>
<line x1="100" y1="100" x2="50" y2="70" class="constellation-line"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="98" cy="38" r="4" class="star"/>
<circle cx="148" cy="68" r="4" class="star"/>
<circle cx="148" cy="128" r="4" class="star"/>
<circle cx="98" cy="158" r="4" class="star"/>
<circle cx="48" cy="68" r="4" class="star"/>
<circle cx="48" cy="128" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Паутина</h2>
<p class="star-count">7 звезд</p>
<div class="oskolok">Ловушка и произведение искусства - одно.</div>
<div class="oskolok">Прочность в соединениях, не в нитях.</div>
<div class="oskolok">Разрушенная - строится заново. Каждый день.</div>
<div class="oskolok">Центр ждет. Края ловят.</div>
<div class="oskolok">Попавший дергается. И сам выдает себя.</div>
<div class="oskolok">Связи видны только когда в них попадает свет.</div>
<div class="oskolok">Самое тонкое держит крепче всего. Если правильно натянуто.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 56. Капля -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M100,50 Q130,100 100,150 Q70,100 100,50" class="constellation-line"/>
<circle cx="98" cy="48" r="5" class="star-large"/>
<circle cx="118" cy="88" r="4" class="star"/>
<circle cx="98" cy="148" r="4" class="star"/>
<circle cx="78" cy="88" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Капля</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Малое содержит океан в миниатюре.</div>
<div class="oskolok">Падает - чтобы соединиться с целым.</div>
<div class="oskolok">Форма идеальна. Потому что не сопротивляется.</div>
<div class="oskolok">Одна капля точит камень. Не силой - постоянством.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 57. Искра -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="100" x2="100" y2="60" class="constellation-line"/>
<line x1="100" y1="100" x2="130" y2="80" class="constellation-line"/>
<line x1="100" y1="100" x2="70" y2="80" class="constellation-line"/>
<circle cx="98" cy="98" r="5" class="star-warm"/>
<circle cx="98" cy="58" r="4" class="star"/>
<circle cx="128" cy="78" r="4" class="star"/>
<circle cx="68" cy="78" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Искра</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Мгновение - начало вечности огня.</div>
<div class="oskolok">Маленькое зажигает большое. Если есть что гореть.</div>
<div class="oskolok">Гаснет быстро. Но успевает передать.</div>
<div class="oskolok">Случайность, которая меняет все.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 58. Пещера -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M40,150 Q50,80 100,60 Q150,80 160,150" class="constellation-line"/>
<line x1="40" y1="150" x2="160" y2="150" class="constellation-line"/>
<circle cx="38" cy="148" r="4" class="star"/>
<circle cx="158" cy="148" r="4" class="star"/>
<circle cx="98" cy="58" r="5" class="star-large"/>
<circle cx="98" cy="110" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Пещера</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Вход - это выход. Зависит от направления.</div>
<div class="oskolok">Темнота хранит то, что свет разрушает.</div>
<div class="oskolok">Убежище и ловушка - вопрос выбора.</div>
<div class="oskolok">Эхо возвращает тебе твой голос. Измененным.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 59. Порог -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="40" y1="100" x2="160" y2="100" class="constellation-line"/>
<line x1="40" y1="100" x2="40" y2="80" class="constellation-line"/>
<line x1="160" y1="100" x2="160" y2="80" class="constellation-line"/>
<circle cx="38" cy="98" r="4" class="star"/>
<circle cx="158" cy="98" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="38" cy="78" r="4" class="star"/>
<circle cx="158" cy="78" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Порог</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Ни там, ни здесь. Между.</div>
<div class="oskolok">Шаг - и ты уже другой.</div>
<div class="oskolok">Линия, которую нельзя перешагнуть наполовину.</div>
<div class="oskolok">Страх перед порогом - страх перед собой новым.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 60. Маска -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<ellipse cx="100" cy="100" rx="40" ry="50" class="constellation-line"/>
<circle cx="80" cy="85" r="8" class="constellation-line"/>
<circle cx="120" cy="85" r="8" class="constellation-line"/>
<path d="M80,120 Q100,135 120,120" class="constellation-line"/>
<circle cx="78" cy="83" r="4" class="star"/>
<circle cx="118" cy="83" r="4" class="star"/>
<circle cx="98" cy="48" r="5" class="star-large"/>
<circle cx="98" cy="125" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Маска</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Скрывает лицо. Показывает душу.</div>
<div class="oskolok">Носишь достаточно долго - срастается.</div>
<div class="oskolok">Защита от других. Или от себя.</div>
<div class="oskolok">Снять страшнее, чем надеть.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 61. Факел -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="170" x2="100" y2="80" class="constellation-line"/>
<line x1="100" y1="80" x2="85" y2="50" class="constellation-line"/>
<line x1="100" y1="80" x2="115" y2="50" class="constellation-line"/>
<line x1="100" y1="80" x2="100" y2="40" class="constellation-line"/>
<circle cx="98" cy="168" r="4" class="star"/>
<circle cx="98" cy="78" r="4" class="star"/>
<circle cx="98" cy="38" r="5" class="star-warm"/>
<circle cx="83" cy="48" r="4" class="star"/>
<circle cx="113" cy="48" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Факел</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Передается из руки в руку. Огонь не знает первого владельца.</div>
<div class="oskolok">Освещает путь несущему. Ослепляет смотрящего.</div>
<div class="oskolok">Нести огонь - рисковать обжечься.</div>
<div class="oskolok">Тот, кто бежит с факелом, не видит тени позади.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 62. Щит -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M60,50 L140,50 L140,110 L100,150 L60,110 Z" class="constellation-line"/>
<circle cx="58" cy="48" r="4" class="star"/>
<circle cx="138" cy="48" r="4" class="star"/>
<circle cx="138" cy="108" r="5" class="star-large"/>
<circle cx="98" cy="148" r="4" class="star"/>
<circle cx="58" cy="108" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Щит</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Защищает того, кто за ним. Принимает удары на себя.</div>
<div class="oskolok">Вмятины - не позор. Доказательство.</div>
<div class="oskolok">Опустить щит - или поверить, или сдаться.</div>
<div class="oskolok">Тяжело нести. Тяжелее - без него.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 63. Клинок -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="40" x2="100" y2="130" class="constellation-line"/>
<line x1="70" y1="130" x2="130" y2="130" class="constellation-line"/>
<line x1="100" y1="130" x2="100" y2="160" class="constellation-line"/>
<circle cx="98" cy="38" r="5" class="star-large"/>
<circle cx="98" cy="88" r="4" class="star"/>
<circle cx="68" cy="128" r="4" class="star"/>
<circle cx="128" cy="128" r="4" class="star"/>
<circle cx="98" cy="158" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Клинок</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Острота - от того, что убрано лишнее.</div>
<div class="oskolok">Режет в обе стороны. Помни об этом.</div>
<div class="oskolok">В ножнах - возможность. Вынутый - решение.</div>
<div class="oskolok">Тупой клинок опаснее острого. Требует силы вместо точности.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 64. Кольцо -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<circle cx="100" cy="100" r="40" class="constellation-line"/>
<circle cx="98" cy="58" r="5" class="star-large"/>
<circle cx="138" cy="98" r="4" class="star"/>
<circle cx="98" cy="138" r="4" class="star"/>
<circle cx="58" cy="98" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Кольцо</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Нет начала. Нет конца. Есть обещание.</div>
<div class="oskolok">Маленькое обнимает палец. Большое - планету.</div>
<div class="oskolok">Пустота внутри - место для того, кого любишь.</div>
<div class="oskolok">Снять - просто. Забыть, что носил - невозможно.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 65. Слеза -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M100,50 Q120,100 100,140 Q80,100 100,50" class="constellation-line"/>
<circle cx="98" cy="48" r="5" class="star-large"/>
<circle cx="108" cy="88" r="4" class="star"/>
<circle cx="98" cy="138" r="4" class="star"/>
<circle cx="88" cy="88" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Слеза</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Выпускает то, что держать больше нельзя.</div>
<div class="oskolok">Соленая - от радости и от горя. Язык не отличит.</div>
<div class="oskolok">Высыхает. След остается.</div>
<div class="oskolok">Плакать - не слабость. Переполнение.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 66. Рука -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="160" x2="100" y2="100" class="constellation-line"/>
<line x1="100" y1="100" x2="70" y2="60" class="constellation-line"/>
<line x1="100" y1="100" x2="85" y2="55" class="constellation-line"/>
<line x1="100" y1="100" x2="100" y2="50" class="constellation-line"/>
<line x1="100" y1="100" x2="115" y2="55" class="constellation-line"/>
<line x1="100" y1="100" x2="130" y2="70" class="constellation-line"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="68" cy="58" r="4" class="star"/>
<circle cx="83" cy="53" r="4" class="star"/>
<circle cx="98" cy="48" r="4" class="star"/>
<circle cx="113" cy="53" r="4" class="star"/>
<circle cx="128" cy="68" r="4" class="star"/>
<circle cx="98" cy="158" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Рука</h2>
<p class="star-count">7 звезд</p>
<div class="oskolok">Создает и разрушает. Одними и теми же пальцами.</div>
<div class="oskolok">Протянутая - мост. Сжатая - стена.</div>
<div class="oskolok">Помнит то, что держала. Даже когда пуста.</div>
<div class="oskolok">Отпустить труднее, чем схватить.</div>
<div class="oskolok">Ладонь открыта - принимает. Закрыта - хранит.</div>
<div class="oskolok">Линии на ладони - карта, которую нельзя изменить. Но можно прочитать.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 67. След -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<ellipse cx="70" cy="140" rx="15" ry="25" class="constellation-line"/>
<ellipse cx="110" cy="100" rx="15" ry="25" class="constellation-line"/>
<ellipse cx="70" cy="60" rx="15" ry="25" class="constellation-line"/>
<circle cx="68" cy="138" r="4" class="star"/>
<circle cx="108" cy="98" r="5" class="star-large"/>
<circle cx="68" cy="58" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>След</h2>
<p class="star-count">3 звезды</p>
<div class="oskolok">Остается после тебя. Не спрашивая разрешения.</div>
<div class="oskolok">Читается теми, кто идет следом.</div>
<div class="oskolok">Ветер сотрет. Но пока виден - ты был.</div>
<div class="oskolok">Идти по чужим следам - не найти свой путь.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 68. Эхо -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M60,100 Q80,70 100,100" class="constellation-line"/>
<path d="M80,100 Q100,60 120,100" class="constellation-line"/>
<path d="M100,100 Q120,50 140,100" class="constellation-line"/>
<circle cx="58" cy="98" r="5" class="star-large"/>
<circle cx="78" cy="98" r="4" class="star"/>
<circle cx="78" cy="83" r="4" class="star"/>
<circle cx="98" cy="98" r="4" class="star"/>
<circle cx="98" cy="78" r="4" class="star"/>
<circle cx="118" cy="98" r="4" class="star"/>
<circle cx="118" cy="58" r="4" class="star"/>
<circle cx="138" cy="98" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Эхо</h2>
<p class="star-count">8 звезд</p>
<div class="oskolok">Возвращает тебе тебя. С задержкой.</div>
<div class="oskolok">Повторяет, но не копирует. Каждый раз - тише.</div>
<div class="oskolok">Горы отвечают. Пустота молчит.</div>
<div class="oskolok">Кричишь одно - слышишь другое.</div>
<div class="oskolok">Самое важное в словах - то, что после них.</div>
<div class="oskolok">Ответ приходит не быстрее. А честнее.</div>
<div class="oskolok">Ты узнаешь свой голос по тому, как он тебя ранит.</div>
<div class="oskolok">Не каждое возвращение - спасение. Иногда это повтор.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 69. Туман -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="40" y1="80" x2="160" y2="80" class="constellation-line" style="opacity: 0.5"/>
<line x1="50" y1="100" x2="150" y2="100" class="constellation-line" style="opacity: 0.4"/>
<line x1="60" y1="120" x2="140" y2="120" class="constellation-line" style="opacity: 0.3"/>
<circle cx="38" cy="78" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="158" cy="78" r="4" class="star"/>
<circle cx="138" cy="118" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Туман</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Скрывает, не уничтожая. Все на месте.</div>
<div class="oskolok">Идти сквозь - верить, что путь есть.</div>
<div class="oskolok">Рассеется. Вопрос времени.</div>
<div class="oskolok">В тумане все звуки ближе. Или дальше.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 70. Лед -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<polygon points="100,40 140,70 140,130 100,160 60,130 60,70" class="constellation-line"/>
<circle cx="98" cy="38" r="5" class="star-large"/>
<circle cx="138" cy="68" r="4" class="star"/>
<circle cx="138" cy="128" r="4" class="star"/>
<circle cx="98" cy="158" r="4" class="star"/>
<circle cx="58" cy="128" r="4" class="star"/>
<circle cx="58" cy="68" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Лед</h2>
<p class="star-count">6 звезд</p>
<div class="oskolok">Вода, которая решила остановиться.</div>
<div class="oskolok">Прозрачный - но не пройти сквозь.</div>
<div class="oskolok">Хрупкость и твердость - вопрос температуры.</div>
<div class="oskolok">Тает от тепла. Неважно - внешнего или внутреннего.</div>
<div class="oskolok">Самое холодное место хранит самое точное отражение.</div>
<div class="oskolok">Замерзшее не умерло. Оно ждет.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 71. Пламя -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M100,160 Q70,120 80,80 Q90,100 100,60 Q110,100 120,80 Q130,120 100,160" class="constellation-line"/>
<circle cx="98" cy="158" r="4" class="star"/>
<circle cx="78" cy="78" r="4" class="star"/>
<circle cx="98" cy="58" r="5" class="star-warm"/>
<circle cx="118" cy="78" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Пламя</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Танцует, даже умирая.</div>
<div class="oskolok">Преображает все, к чему прикасается.</div>
<div class="oskolok">Нельзя схватить. Только кормить или гасить.</div>
<div class="oskolok">Одно пламя зажигает тысячу. Не становясь меньше.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 72. Пепел -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="60" y1="130" x2="140" y2="130" class="constellation-line" style="opacity: 0.4"/>
<line x1="70" y1="120" x2="130" y2="120" class="constellation-line" style="opacity: 0.3"/>
<circle cx="58" cy="128" r="4" class="star"/>
<circle cx="98" cy="118" r="4" class="star"/>
<circle cx="138" cy="128" r="4" class="star"/>
<circle cx="98" cy="128" r="5" class="star-large"/>
</svg>
</div>
<div class="constellation-text">
<h2>Пепел</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Финал огня. Начало почвы.</div>
<div class="oskolok">Легче того, чем был. Разносится ветром.</div>
<div class="oskolok">Из сожженного вырастает новое.</div>
<div class="oskolok">Серый - потому что был всех цветов.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 73. Семя -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<ellipse cx="100" cy="100" rx="20" ry="30" class="constellation-line"/>
<line x1="100" y1="130" x2="100" y2="150" class="constellation-line"/>
<circle cx="98" cy="68" r="5" class="star-large"/>
<circle cx="98" cy="98" r="4" class="star"/>
<circle cx="98" cy="128" r="4" class="star"/>
<circle cx="98" cy="148" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Семя</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Маленькое хранит великое. Сжатым.</div>
<div class="oskolok">Ждет своего времени. Годами.</div>
<div class="oskolok">Умирает как семя - чтобы стать деревом.</div>
<div class="oskolok">Не знает, кем станет. Становится все равно.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 74. Плод -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<circle cx="100" cy="110" r="35" class="constellation-line"/>
<line x1="100" y1="75" x2="100" y2="55" class="constellation-line"/>
<line x1="100" y1="55" x2="115" y2="45" class="constellation-line"/>
<circle cx="98" cy="53" r="4" class="star"/>
<circle cx="113" cy="43" r="4" class="star"/>
<circle cx="98" cy="108" r="5" class="star-large"/>
<circle cx="98" cy="143" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Плод</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Результат терпения. Не усилия.</div>
<div class="oskolok">Созревший падает сам. Не надо тянуть.</div>
<div class="oskolok">Сладость - награда тем, кто ждал.</div>
<div class="oskolok">Внутри - семя следующего круга.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 75. Шип -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="50" x2="100" y2="150" class="constellation-line"/>
<line x1="100" y1="80" x2="130" y2="70" class="constellation-line"/>
<line x1="100" y1="110" x2="70" y2="100" class="constellation-line"/>
<circle cx="98" cy="48" r="5" class="star-large"/>
<circle cx="128" cy="68" r="4" class="star"/>
<circle cx="68" cy="98" r="4" class="star"/>
<circle cx="98" cy="148" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Шип</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Защита того, что нежно.</div>
<div class="oskolok">Ранит того, кто хватает. Не того, кто касается.</div>
<div class="oskolok">Роза без шипов - не роза. Цветок без истории.</div>
<div class="oskolok">Боль предупреждает. Не наказывает.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 76. Росток -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="150" x2="100" y2="80" class="constellation-line"/>
<line x1="100" y1="100" x2="80" y2="70" class="constellation-line"/>
<line x1="100" y1="100" x2="120" y2="70" class="constellation-line"/>
<circle cx="98" cy="148" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="78" cy="68" r="4" class="star"/>
<circle cx="118" cy="68" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Росток</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Пробивает асфальт. Без кулаков.</div>
<div class="oskolok">Тянется к свету, не зная что это.</div>
<div class="oskolok">Хрупкий сейчас. Дуб потом.</div>
<div class="oskolok">Первый шаг самый трудный. И самый важный.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 77. Ветер -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M40,80 Q80,70 120,80 Q140,85 160,75" class="constellation-line"/>
<path d="M50,110 Q90,100 130,110 Q150,115 170,105" class="constellation-line"/>
<path d="M40,140 Q80,130 120,140" class="constellation-line"/>
<circle cx="38" cy="78" r="4" class="star"/>
<circle cx="118" cy="78" r="5" class="star-large"/>
<circle cx="128" cy="108" r="4" class="star"/>
<circle cx="118" cy="138" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Ветер</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Невидим. Но гнет деревья.</div>
<div class="oskolok">Не имеет формы. Принимает форму преграды.</div>
<div class="oskolok">Уносит старое. Приносит новое.</div>
<div class="oskolok">Нельзя остановить. Можно поставить парус.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 78. Гром -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="60" y1="80" x2="90" y2="80" class="constellation-line"/>
<line x1="80" y1="80" x2="110" y2="100" class="constellation-line"/>
<line x1="100" y1="100" x2="140" y2="100" class="constellation-line"/>
<line x1="120" y1="100" x2="150" y2="120" class="constellation-line"/>
<circle cx="58" cy="78" r="4" class="star"/>
<circle cx="108" cy="98" r="5" class="star-large"/>
<circle cx="138" cy="98" r="4" class="star"/>
<circle cx="148" cy="118" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Гром</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Приходит после света. Опаздывает всегда.</div>
<div class="oskolok">Голос без слов. Но все понимают.</div>
<div class="oskolok">Чем ближе - тем страшнее. Чем дальше - тем спокойнее.</div>
<div class="oskolok">Обещает дождь. Не всегда сдерживает.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 79. Радуга -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M30,140 Q100,40 170,140" class="constellation-line"/>
<circle cx="28" cy="138" r="4" class="star"/>
<circle cx="63" cy="101" r="4" class="star"/>
<circle cx="98" cy="88" r="5" class="star-large"/>
<circle cx="133" cy="101" r="4" class="star"/>
<circle cx="168" cy="138" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Радуга</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Рождается от союза света и воды.</div>
<div class="oskolok">Мост, по которому нельзя пройти. Но можно мечтать.</div>
<div class="oskolok">Появляется после бури. Не вместо нее.</div>
<div class="oskolok">Видна не всем одинаково. Каждому своя.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 80. Луна -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<circle cx="100" cy="100" r="40" class="constellation-line"/>
<circle cx="120" cy="100" r="35" class="constellation-line"/>
<circle cx="58" cy="98" r="5" class="star-large"/>
<circle cx="78" cy="68" r="4" class="star"/>
<circle cx="78" cy="128" r="4" class="star"/>
<circle cx="98" cy="58" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Луна</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Светит чужим светом. Но светит.</div>
<div class="oskolok">Меняется каждую ночь. Остается собой.</div>
<div class="oskolok">Управляет приливами. Молча.</div>
<div class="oskolok">Темная сторона существует. Просто не видна.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 81. Солнце -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<circle cx="100" cy="100" r="30" class="constellation-line"/>
<line x1="100" y1="60" x2="100" y2="40" class="constellation-line"/>
<line x1="100" y1="140" x2="100" y2="160" class="constellation-line"/>
<line x1="60" y1="100" x2="40" y2="100" class="constellation-line"/>
<line x1="140" y1="100" x2="160" y2="100" class="constellation-line"/>
<circle cx="98" cy="98" r="5" class="star-warm"/>
<circle cx="98" cy="38" r="4" class="star"/>
<circle cx="98" cy="158" r="4" class="star"/>
<circle cx="38" cy="98" r="4" class="star"/>
<circle cx="158" cy="98" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Солнце</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Горит для всех. Не спрашивая благодарности.</div>
<div class="oskolok">Слишком близко - сгоришь. Слишком далеко - замерзнешь.</div>
<div class="oskolok">Дает жизнь. Забирает время.</div>
<div class="oskolok">Не замечаешь, пока есть. Скучаешь, когда нет.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 82. Затмение -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<circle cx="100" cy="100" r="35" class="constellation-line"/>
<circle cx="100" cy="100" r="30" class="constellation-line" style="opacity: 0.5"/>
<circle cx="63" cy="98" r="4" class="star"/>
<circle cx="133" cy="98" r="4" class="star"/>
<circle cx="98" cy="63" r="5" class="star-large"/>
<circle cx="98" cy="133" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Затмение</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Тьма днем. Напоминание о хрупкости.</div>
<div class="oskolok">Маленькое закрывает большое. Вопрос позиции.</div>
<div class="oskolok">Временно. Но пока длится - кажется вечностью.</div>
<div class="oskolok">Редкое событие. Поэтому священное.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 83. Комета -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="140" y1="60" x2="60" y2="140" class="constellation-line"/>
<line x1="140" y1="60" x2="160" y2="50" class="constellation-line"/>
<line x1="140" y1="60" x2="150" y2="40" class="constellation-line"/>
<circle cx="138" cy="58" r="5" class="star-large"/>
<circle cx="98" cy="98" r="4" class="star"/>
<circle cx="58" cy="138" r="4" class="star"/>
<circle cx="158" cy="48" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Комета</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Пролетает - не остается. Но помнят века.</div>
<div class="oskolok">Хвост - это то, что теряет. На глазах у всех.</div>
<div class="oskolok">Возвращается. Но ты уже другой.</div>
<div class="oskolok">Вестник. Не создатель перемен.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 84. Метеор -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="50" y1="50" x2="150" y2="150" class="constellation-line"/>
<circle cx="48" cy="48" r="5" class="star-large"/>
<circle cx="78" cy="78" r="4" class="star"/>
<circle cx="108" cy="108" r="4" class="star"/>
<circle cx="148" cy="148" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Метеор</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Падает. Но горит ярче всех по пути.</div>
<div class="oskolok">Мгновение славы дороже века незаметности.</div>
<div class="oskolok">Загадывают желания. На том, кто исчезает.</div>
<div class="oskolok">Был камнем в космосе. Стал светом для земли.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 85. Туманность -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<ellipse cx="100" cy="100" rx="55" ry="40" class="constellation-line" style="opacity: 0.4"/>
<ellipse cx="90" cy="90" rx="30" ry="25" class="constellation-line" style="opacity: 0.3"/>
<ellipse cx="115" cy="110" rx="25" ry="20" class="constellation-line" style="opacity: 0.3"/>
<circle cx="58" cy="88" r="4" class="star"/>
<circle cx="98" cy="78" r="5" class="star-large"/>
<circle cx="128" cy="108" r="4" class="star"/>
<circle cx="78" cy="118" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Туманность</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Колыбель звезд. Хаос, рождающий порядок.</div>
<div class="oskolok">Из пыли и газа - огни на миллиарды лет.</div>
<div class="oskolok">Невидима изнутри. Прекрасна снаружи.</div>
<div class="oskolok">Медленнее всего на свете. Но создает быстрейшее.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 86. Галактика -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<ellipse cx="100" cy="100" rx="60" ry="20" class="constellation-line" transform="rotate(-30, 100, 100)"/>
<ellipse cx="100" cy="100" rx="40" ry="15" class="constellation-line" transform="rotate(-30, 100, 100)" style="opacity: 0.5"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="48" cy="118" r="4" class="star"/>
<circle cx="148" cy="78" r="4" class="star"/>
<circle cx="78" cy="68" r="4" class="star"/>
<circle cx="118" cy="128" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Галактика</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Миллиарды звезд вращаются вокруг невидимого.</div>
<div class="oskolok">Каждая думает, что одна. Все вместе - дом.</div>
<div class="oskolok">Сталкиваются и сливаются. Рождая новое.</div>
<div class="oskolok">Изнутри не видишь формы. Только хаос.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 87. Горизонт -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="20" y1="100" x2="180" y2="100" class="constellation-line"/>
<circle cx="18" cy="98" r="4" class="star"/>
<circle cx="68" cy="98" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="128" cy="98" r="4" class="star"/>
<circle cx="178" cy="98" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Горизонт</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Всегда впереди. Сколько бы ни шел.</div>
<div class="oskolok">Линия, которой нет. Но все ее видят.</div>
<div class="oskolok">Обещание чего-то за пределами.</div>
<div class="oskolok">Отступает ровно с той скоростью, с какой приближаешься.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 88. Рассвет -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="30" y1="130" x2="170" y2="130" class="constellation-line"/>
<path d="M70,130 Q100,80 130,130" class="constellation-line"/>
<circle cx="28" cy="128" r="4" class="star"/>
<circle cx="168" cy="128" r="4" class="star"/>
<circle cx="98" cy="88" r="5" class="star-warm"/>
<circle cx="68" cy="118" r="4" class="star"/>
<circle cx="128" cy="118" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Рассвет</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Приходит после самой темной части ночи.</div>
<div class="oskolok">Начинается незаметно. Заканчивается очевидно.</div>
<div class="oskolok">Каждый день новый. Каждый день тот же.</div>
<div class="oskolok">Не спрашивает готовности. Просто наступает.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 89. Закат -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="30" y1="120" x2="170" y2="120" class="constellation-line"/>
<path d="M60,120 Q100,140 140,120" class="constellation-line"/>
<circle cx="28" cy="118" r="4" class="star"/>
<circle cx="168" cy="118" r="4" class="star"/>
<circle cx="98" cy="118" r="5" class="star-warm"/>
<circle cx="68" cy="128" r="4" class="star"/>
<circle cx="128" cy="128" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Закат</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Уходит красиво. Не цепляясь.</div>
<div class="oskolok">Самые яркие краски - перед тьмой.</div>
<div class="oskolok">Конец дня - не конец истории.</div>
<div class="oskolok">Каждый закат - репетиция прощания.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 90. Полночь -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="100" y1="40" x2="100" y2="80" class="constellation-line"/>
<circle cx="100" cy="100" r="30" class="constellation-line"/>
<circle cx="98" cy="38" r="5" class="star-large"/>
<circle cx="68" cy="98" r="4" class="star"/>
<circle cx="128" cy="98" r="4" class="star"/>
<circle cx="98" cy="128" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Полночь</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Точка равновесия. Ни вчера, ни завтра.</div>
<div class="oskolok">Самый темный час - и начало света.</div>
<div class="oskolok">Тайны рассказываются только здесь.</div>
<div class="oskolok">Новый день начинается в темноте.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 91. Сумерки -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="40" y1="80" x2="160" y2="80" class="constellation-line" style="opacity: 0.6"/>
<line x1="40" y1="110" x2="160" y2="110" class="constellation-line" style="opacity: 0.4"/>
<line x1="40" y1="140" x2="160" y2="140" class="constellation-line" style="opacity: 0.2"/>
<circle cx="38" cy="78" r="4" class="star"/>
<circle cx="98" cy="108" r="5" class="star-large"/>
<circle cx="158" cy="78" r="4" class="star"/>
<circle cx="98" cy="138" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Сумерки</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Ни день, ни ночь. Честнее обоих.</div>
<div class="oskolok">Границы размыты. Все возможно.</div>
<div class="oskolok">Время, когда видимое становится сомнительным.</div>
<div class="oskolok">Переход длиннее, чем кажется.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 92. Лабиринт -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M50,50 L150,50 L150,100 L80,100 L80,70 L120,70" class="constellation-line"/>
<path d="M50,50 L50,150 L100,150 L100,120 L70,120" class="constellation-line"/>
<circle cx="48" cy="48" r="4" class="star"/>
<circle cx="148" cy="48" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="48" cy="148" r="4" class="star"/>
<circle cx="78" cy="68" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Лабиринт</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Запутывает идущего. Не злонамеренно.</div>
<div class="oskolok">Выход есть. Найти - часть пути.</div>
<div class="oskolok">Тупики учат разворачиваться.</div>
<div class="oskolok">Центр - не цель. Выход из центра - цель.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 93. Песня -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M50,100 Q70,70 90,100 Q110,130 130,100 Q150,70 170,100" class="constellation-line"/>
<circle cx="48" cy="98" r="4" class="star"/>
<circle cx="88" cy="98" r="4" class="star"/>
<circle cx="108" cy="118" r="5" class="star-large"/>
<circle cx="128" cy="98" r="4" class="star"/>
<circle cx="168" cy="98" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Песня</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Слова, которые не умеют быть прозой.</div>
<div class="oskolok">Заканчивается - но остается в голове.</div>
<div class="oskolok">Одна мелодия - тысяча значений.</div>
<div class="oskolok">Поется даже когда молчишь.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 94. Танец -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M80,60 Q100,80 90,110 Q80,140 100,160" class="constellation-line"/>
<path d="M120,60 Q100,80 110,110 Q120,140 100,160" class="constellation-line"/>
<circle cx="78" cy="58" r="4" class="star"/>
<circle cx="118" cy="58" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="98" cy="158" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Танец</h2>
<p class="star-count">4 звезды</p>
<div class="oskolok">Тело говорит то, что слова не умеют.</div>
<div class="oskolok">Один ведет. Другой доверяет. Оба творят.</div>
<div class="oskolok">Ошибка - часть импровизации.</div>
<div class="oskolok">Танцуют не ноги. Танцует все существо.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 95. Молчание -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<circle cx="58" cy="78" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="138" cy="118" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Молчание</h2>
<p class="star-count">3 звезды</p>
<div class="oskolok">Говорит громче слов. Для тех, кто слушает.</div>
<div class="oskolok">Бывает теплым и холодным. Зависит от того, кто молчит.</div>
<div class="oskolok">Пауза между нотами - тоже музыка.</div>
<div class="oskolok">Иногда единственный честный ответ.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 96. Улыбка -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M60,90 Q100,140 140,90" class="constellation-line"/>
<circle cx="58" cy="88" r="4" class="star"/>
<circle cx="98" cy="118" r="5" class="star-large"/>
<circle cx="138" cy="88" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Улыбка</h2>
<p class="star-count">3 звезды</p>
<div class="oskolok">Дар, который ничего не стоит. И стоит всего.</div>
<div class="oskolok">Настоящая - в глазах. Не на губах.</div>
<div class="oskolok">Заразна. В хорошем смысле.</div>
<div class="oskolok">Иногда храбрость носит такую форму.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 97. Объятие -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<path d="M60,80 Q50,120 80,140 Q100,150 120,140 Q150,120 140,80" class="constellation-line"/>
<circle cx="58" cy="78" r="4" class="star"/>
<circle cx="138" cy="78" r="4" class="star"/>
<circle cx="98" cy="128" r="5" class="star-large"/>
<circle cx="78" cy="138" r="4" class="star"/>
<circle cx="118" cy="138" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Объятие</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Два человека - один момент. Ничего лишнего.</div>
<div class="oskolok">Границы исчезают. На время.</div>
<div class="oskolok">Дает и получает одновременно.</div>
<div class="oskolok">Отпустить - не значит отдалиться.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 98. Прощание -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="60" y1="100" x2="90" y2="100" class="constellation-line"/>
<line x1="110" y1="100" x2="140" y2="100" class="constellation-line"/>
<circle cx="58" cy="98" r="4" class="star"/>
<circle cx="88" cy="98" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
<circle cx="108" cy="98" r="4" class="star"/>
<circle cx="138" cy="98" r="4" class="star"/>
</svg>
</div>
<div class="constellation-text">
<h2>Прощание</h2>
<p class="star-count">5 звезд</p>
<div class="oskolok">Маленькая смерть. Каждый раз.</div>
<div class="oskolok">Не все прощания - навсегда. Но каждое может быть.</div>
<div class="oskolok">Легче уходить, чем смотреть как уходят.</div>
<div class="oskolok">Последнее слово редко бывает последним.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 99. Встреча -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="50" y1="80" x2="100" y2="100" class="constellation-line"/>
<line x1="150" y1="80" x2="100" y2="100" class="constellation-line"/>
<circle cx="48" cy="78" r="4" class="star"/>
<circle cx="148" cy="78" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
</svg>
</div>
<div class="constellation-text">
<h2>Встреча</h2>
<p class="star-count">3 звезды</p>
<div class="oskolok">Два пути пересекаются. Ничто не случайно.</div>
<div class="oskolok">Первое впечатление - не последнее.</div>
<div class="oskolok">Каждый человек - дверь куда-то.</div>
<div class="oskolok">Узнать - не значит встретить. Встретить - начать узнавать.</div>
</div>
</div>
<div class="section-divider"></div>
<!-- 100. Созвездие -->
<div class="constellation-section">
<div class="constellation-visual">
<svg viewBox="0 0 200 200">
<line x1="60" y1="60" x2="100" y2="40" class="constellation-line"/>
<line x1="100" y1="40" x2="140" y2="60" class="constellation-line"/>
<line x1="140" y1="60" x2="150" y2="110" class="constellation-line"/>
<line x1="150" y1="110" x2="120" y2="150" class="constellation-line"/>
<line x1="120" y1="150" x2="80" y2="150" class="constellation-line"/>
<line x1="80" y1="150" x2="50" y2="110" class="constellation-line"/>
<line x1="50" y1="110" x2="60" y2="60" class="constellation-line"/>
<line x1="100" y1="100" x2="60" y2="60" class="constellation-line"/>
<line x1="100" y1="100" x2="140" y2="60" class="constellation-line"/>
<line x1="100" y1="100" x2="120" y2="150" class="constellation-line"/>
<line x1="100" y1="100" x2="80" y2="150" class="constellation-line"/>
<circle cx="58" cy="58" r="4" class="star"/>
<circle cx="98" cy="38" r="4" class="star"/>
<circle cx="138" cy="58" r="4" class="star"/>
<circle cx="148" cy="108" r="4" class="star"/>
<circle cx="118" cy="148" r="4" class="star"/>
<circle cx="78" cy="148" r="4" class="star"/>
<circle cx="48" cy="108" r="4" class="star"/>
<circle cx="98" cy="98" r="5" class="star-large"/>
</svg>
</div>
<div class="constellation-text">
<h2>Созвездие</h2>
<p class="star-count">8 звезд</p>
<div class="oskolok">Точки становятся историей, когда их соединяют.</div>
<div class="oskolok">Видишь фигуру - потому что хочешь видеть.</div>
<div class="oskolok">Звезды далеки друг от друга. Но вместе - картина.</div>
<div class="oskolok">Карта неба - это карта тебя.</div>
<div class="oskolok">Каждый осколок ждет своей сказки. И своего созвездия.</div>
</div>
</div>
<div class="section-divider"></div>
<div class="sozvezdiya-footer">
<p>---</p>
<p>Сто созвездий.</p>
<p>Четыреста шестьдесят три осколка.</p>
<p>Четыреста шестьдесят три осколка, ждущих своих сказок.</p>
<p class="note">И одна Полярная - указывающая путь.</p>
<p class="note">Небо стало полнее.</p>
<p class="note">Но у неба нет краев.</p>
<p class="note">И никогда не будет.</p>
<p class="stars-decoration">✦ . ⁺ . ✦ . ⁺ . ✦</p>
<p class="note" style="margin-top: 30px;">Для звезд - ты звезда.</p>
</div>
</div>
</div>
|