<!--
ИНСТРУКЦИЯ ДЛЯ CONFLUENCE DATA CENTER 10:
1. Убедитесь, что HTML-макрос включен:
Confluence Admin → Configure Code Macro → Enable HTML Macro
2. Создайте новую страницу
3. Добавьте макрос HTML: {html}
4. Вставьте содержимое между <CONTENT_START> и <CONTENT_END>
5. Сохраните страницу
-->
<!-- CONTENT_START -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');
/* Поднимаем тулбар Confluence выше canvas */
#header,
.aui-header,
#navigation,
.confluence-header,
#breadcrumbs,
.aui-toolbar,
.aui-toolbar2,
#header-precursor,
.pagecontent-header,
[role="banner"] {
position: relative !important;
z-index: 100 !important;
}
html, body {
margin: 0;
background: #000000;
}
.sozvezdiya-page {
font-family: 'Cormorant Garamond', Georgia, serif;
color: #e5e5e5;
padding: 40px 20px;
min-height: 100vh;
min-height: 100svh;
position: relative;
}
.sozvezdiya-page * {
box-sizing: border-box;
}
.stars-bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
z-index: 0;
}
#starsCanvas {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: block;
background: transparent;
z-index: 0;
pointer-events: none;
}
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 0.8; }
}
@keyframes twinkle-svg {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.sozvezdiya-content {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
}
.sozvezdiya-header {
text-align: center;
padding: 60px 0;
}
.sozvezdiya-header h1 {
color: white;
font-size: 3em;
font-weight: 600;
margin: 0 0 15px 0;
letter-spacing: 1px;
}
.sozvezdiya-header .subtitle {
color: #9ca3af;
font-style: italic;
font-size: 1.4em;
margin: 0;
}
.stars-decoration {
color: #6b7280;
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;
position: relative;
}
.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, .star-large, .star-warm {
transform: translate(2px, 2px);
}
.polar-star {
transform: none;
}
.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: white;
font-size: 1.8em;
font-weight: 600;
margin: 0 0 8px 0;
}
.star-count {
color: #6b7280;
font-size: 0.95em;
margin: 0 0 20px 0;
}
.oskolok {
border-left: 2px solid rgba(255, 255, 255, 0.3);
padding: 6px 0 6px 20px;
margin: 12px 0;
font-size: 1.2em;
line-height: 1.5;
transition: all 0.3s ease;
}
.oskolok:hover {
border-left-color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.05);
}
.section-divider {
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
height: 1px;
margin: 50px 0;
width: 100%;
}
.sozvezdiya-footer {
text-align: center;
padding: 60px 20px;
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 40px;
}
.sozvezdiya-footer p {
color: #9ca3af;
margin: 12px 0;
font-size: 1.2em;
font-style: italic;
}
.sozvezdiya-footer .note {
color: #6b7280;
font-size: 0.95em;
font-style: normal;
}
</style>
<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>
<script>
(function() {
// ------------------------------------------------------------
// l00m stellar color system
// ------------------------------------------------------------
function randPick(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
var SPECTRAL_BASE = {
O: { fill: "#9BBEFF" },
B: { fill: "#BFD7FF" },
A: { fill: "#F5F7FF" },
F: { fill: "#FFF7EC" },
G: { fill: "#FFEDC9" },
K: { fill: "#FFC18A" },
M: { fill: "#FF9977" }
};
function getSpectralGlow(sp) {
var map = {
O: "rgba(155,190,255,0.85)",
B: "rgba(190,220,255,0.75)",
A: "rgba(235,240,255,0.60)",
F: "rgba(255,236,210,0.65)",
G: "rgba(255,220,140,0.70)",
K: "rgba(255,190,120,0.72)",
M: "rgba(255,130,100,0.80)"
};
return map[sp] || map.A;
}
var BASE_BLUR = { O: 10, B: 9, A: 7, F: 7, G: 7, K: 8, M: 9 };
function parseRGBA(rgba) {
var m = String(rgba).match(/rgba\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*([0-9.]+)\s*\)/i);
if (!m) return { r: 255, g: 255, b: 255, a: 1 };
return { r: parseInt(m[1], 10), g: parseInt(m[2], 10), b: parseInt(m[3], 10), a: parseFloat(m[4]) };
}
function blendRGBA(rgba1, rgba2, w1, w2) {
var c1 = parseRGBA(rgba1);
var c2 = parseRGBA(rgba2);
var r = Math.round(c1.r * w1 + c2.r * w2);
var g = Math.round(c1.g * w1 + c2.g * w2);
var b = Math.round(c1.b * w1 + c2.b * w2);
var a = (c1.a * w1 + c2.a * w2).toFixed(2);
return "rgba(" + r + "," + g + "," + b + "," + a + ")";
}
var THEME_AURAS = {
water: { glowTint: "rgba(100,200,240,0.45)", blurMult: 1.4, lineColor: "rgba(140,210,255,0.3)" },
ice: { glowTint: "rgba(200,230,255,0.55)", blurMult: 1.2, lineColor: "rgba(210,240,255,0.35)" },
fire: { glowTint: "rgba(255,140,70,0.60)", blurMult: 1.7, lineColor: "rgba(255,160,90,0.35)" },
earth: { glowTint: "rgba(190,205,240,0.35)", blurMult: 1.0, lineColor: "rgba(180,200,240,0.22)" },
nature: { glowTint: "rgba(130,215,235,0.35)", blurMult: 1.3, lineColor: "rgba(140,210,235,0.24)" },
dusk: { glowTint: "rgba(180,150,220,0.50)", blurMult: 1.8, lineColor: "rgba(160,140,200,0.26)" },
mystic: { glowTint: "rgba(210,170,255,0.55)", blurMult: 2.0, lineColor: "rgba(190,160,240,0.30)" },
electric: { glowTint: "rgba(140,200,255,0.70)", blurMult: 1.6, lineColor: "rgba(120,190,250,0.35)" },
metal: { glowTint: "rgba(175,205,255,0.40)", blurMult: 1.15, lineColor: "rgba(185,205,255,0.28)" },
heart: { glowTint: "rgba(210,170,255,0.45)", blurMult: 1.5, lineColor: "rgba(220,180,255,0.25)" },
regal: { glowTint: "rgba(230,210,255,0.45)", blurMult: 1.4, lineColor: "rgba(220,200,255,0.28)" },
neutral: { glowTint: "rgba(210,220,255,0.35)", blurMult: 1.1, lineColor: "rgba(210,220,255,0.20)" }
};
function setStarStyle(el, fill, glowRgba, blurPx, opacity) {
if (!el) return;
el.style.fill = fill;
el.style.filter = "drop-shadow(0 0 " + blurPx + "px " + glowRgba + ")";
if (typeof opacity === "number") el.style.opacity = String(opacity);
}
function applySpectralStyle(el, sp, aura, isMain) {
var base = SPECTRAL_BASE[sp] || SPECTRAL_BASE.A;
var baseGlow = getSpectralGlow(sp);
var finalGlow = blendRGBA(baseGlow, aura.glowTint, 0.75, 0.25);
var blur = (BASE_BLUR[sp] || 7) * (aura.blurMult || 1.0);
if (isMain) blur += 2.0;
var warm = (sp === 'G' || sp === 'K' || sp === 'M');
var cold = (sp === 'O' || sp === 'B' || sp === 'A');
if (warm) blur *= 0.85;
if (cold) blur *= 1.08;
blur = Math.max(3, Math.round(blur));
var opacity = isMain ? (0.90 + Math.random() * 0.10) : (0.68 + Math.random() * 0.20);
if (warm) opacity -= 0.06;
if (cold) opacity += 0.03;
opacity = Math.max(0.35, Math.min(1.0, opacity));
setStarStyle(el, base.fill, finalGlow, blur, opacity);
}
function suggestSpectralClass(themeKey, isMain) {
var map = {
fire: { main: ["K","M"], bg: ["F","G"] },
regal: { main: ["F","G"], bg: ["A","F"] },
water: { main: ["B","A"], bg: ["A","F"] },
ice: { main: ["B","A"], bg: ["A","F"] },
dusk: { main: ["O","B"], bg: ["A","B"] },
mystic: { main: ["O","B"], bg: ["A","F"] },
electric: { main: ["B","O"], bg: ["A","B"] },
earth: { main: ["F","A"], bg: ["A","F","B"] },
nature: { main: ["F","A"], bg: ["A","F","B"] },
heart: { main: ["A","F"], bg: ["A","B","F"] },
neutral: { main: ["A","B"], bg: ["A","B","F"] }
};
var classes = map[themeKey] || map.neutral;
var pool = isMain ? classes.main : classes.bg;
return randPick(pool);
}
var THEMES_BY_NAME = {
'Полярная звезда': 'neutral', 'Треугольник': 'mystic', 'Крест': 'mystic',
'Колесо': 'mystic', 'Спираль': 'mystic', 'Лабиринт': 'mystic', 'Созвездие': 'mystic',
'Ключ': 'metal', 'Цепь': 'metal', 'Щит': 'metal', 'Клинок': 'metal',
'Башня': 'metal', 'Колокол': 'metal', 'Игла': 'metal', 'Весы': 'metal',
'Дверь': 'dusk', 'Окно': 'ice', 'Порог': 'dusk', 'Зеркало': 'ice', 'Маска': 'dusk',
'Компас': 'metal', 'Лестница': 'earth', 'Мост': 'neutral', 'След': 'earth', 'Эхо': 'dusk',
'Чаша': 'earth', 'Якорь': 'earth', 'Гнездо': 'nature', 'Колодец': 'earth',
'Крыло': 'water', 'Птица': 'water', 'Ветер': 'water', 'Волна': 'water',
'Река': 'water', 'Раковина': 'water', 'Рыба': 'water', 'Капля': 'water', 'Облако': 'water',
'Гора': 'earth', 'Песочные часы': 'earth', 'Песок': 'earth',
'Дерево': 'nature', 'Семя': 'nature', 'Росток': 'nature', 'Плод': 'nature', 'Шип': 'nature',
'Свеча': 'fire', 'Очаг': 'fire', 'Костер': 'fire', 'Фонарь': 'fire', 'Факел': 'fire',
'Искра': 'fire', 'Пламя': 'fire', 'Солнце': 'fire', 'Рассвет': 'fire', 'Закат': 'fire', 'Маяк': 'fire',
'Туман': 'dusk', 'Сумерки': 'dusk', 'Полночь': 'dusk', 'Тень': 'dusk',
'Пещера': 'dusk', 'Молчание': 'dusk', 'Прощание': 'dusk', 'Затмение': 'dusk',
'Лед': 'ice', 'Луна': 'ice', 'Молния': 'electric', 'Гром': 'electric',
'Туманность': 'mystic', 'Галактика': 'mystic', 'Комета': 'mystic', 'Метеор': 'mystic', 'Горизонт': 'mystic',
'Волк': 'dusk', 'Змея': 'dusk', 'Сердце': 'heart', 'Слеза': 'heart',
'Объятие': 'heart', 'Улыбка': 'heart', 'Рука': 'heart',
'Арфа': 'mystic', 'Песня': 'mystic', 'Танец': 'mystic', 'Книга': 'mystic', 'Перо': 'mystic',
'Лодка': 'water', 'Корона': 'regal'
};
function guessThemeByName(name) {
var n = (name || "").toLowerCase();
if (!n) return "neutral";
if (n.indexOf("ог") !== -1 || n.indexOf("солн") !== -1 || n.indexOf("плам") !== -1 || n.indexOf("свеч") !== -1 || n.indexOf("фак") !== -1 || n.indexOf("кост") !== -1 || n.indexOf("очаг") !== -1 || n.indexOf("искр") !== -1 || n.indexOf("фонар") !== -1 || n.indexOf("маяк") !== -1 || n.indexOf("рассвет") !== -1 || n.indexOf("закат") !== -1) return "fire";
if (n.indexOf("лед") !== -1 || n.indexOf("лун") !== -1 || n.indexOf("зерк") !== -1) return "ice";
if (n.indexOf("вол") !== -1 || n.indexOf("рек") !== -1 || n.indexOf("рыб") !== -1 || n.indexOf("кап") !== -1 || n.indexOf("облак") !== -1 || n.indexOf("раков") !== -1 || n.indexOf("лод") !== -1) return "water";
if (n.indexOf("молн") !== -1 || n.indexOf("гром") !== -1) return "electric";
if (n.indexOf("туман") !== -1 || n.indexOf("тень") !== -1 || n.indexOf("сумерк") !== -1 || n.indexOf("полноч") !== -1 || n.indexOf("пещер") !== -1 || n.indexOf("молч") !== -1) return "dusk";
if (n.indexOf("дерев") !== -1 || n.indexOf("сем") !== -1 || n.indexOf("рост") !== -1 || n.indexOf("плод") !== -1 || n.indexOf("гнезд") !== -1 || n.indexOf("шип") !== -1) return "nature";
if (n.indexOf("пес") !== -1 || n.indexOf("гор") !== -1 || n.indexOf("якор") !== -1 || n.indexOf("колод") !== -1 || n.indexOf("лест") !== -1) return "earth";
if (n.indexOf("корон") !== -1) return "regal";
if (n.indexOf("арф") !== -1 || n.indexOf("песн") !== -1 || n.indexOf("галак") !== -1 || n.indexOf("туманн") !== -1 || n.indexOf("комет") !== -1 || n.indexOf("созв") !== -1) return "mystic";
if (n.indexOf("щит") !== -1 || n.indexOf("клин") !== -1 || n.indexOf("цеп") !== -1 || n.indexOf("ключ") !== -1 || n.indexOf("колокол") !== -1 || n.indexOf("игл") !== -1 || n.indexOf("вес") !== -1) return "metal";
if (n.indexOf("серд") !== -1 || n.indexOf("слез") !== -1 || n.indexOf("объят") !== -1 || n.indexOf("улыб") !== -1 || n.indexOf("рук") !== -1) return "heart";
return "neutral";
}
function pickBackgroundSpectral() {
var weighted = [
{ sp: "A", w: 0.40 }, { sp: "B", w: 0.16 }, { sp: "F", w: 0.18 },
{ sp: "O", w: 0.04 }, { sp: "G", w: 0.10 }, { sp: "K", w: 0.08 }, { sp: "M", w: 0.04 }
];
var x = Math.random(), acc = 0;
for (var i = 0; i < weighted.length; i++) {
acc += weighted[i].w;
if (x <= acc) return weighted[i].sp;
}
return "A";
}
// Canvas background
(function drawCanvasBackground() {
var canvas = document.getElementById('starsCanvas');
if (!canvas) return;
var ctx = canvas.getContext('2d');
var baseCanvas = document.createElement('canvas');
var baseCtx = baseCanvas.getContext('2d');
var count = 2000;
function hexToRgb(hex) {
var h = String(hex).replace('#', '');
return {
r: parseInt(h.substring(0,2), 16),
g: parseInt(h.substring(2,4), 16),
b: parseInt(h.substring(4,6), 16)
};
}
var W = 0, H = 0, docH = 0;
var stars = [], twinkleStars = [], ghostConstellations = [];
function getDocHeight() {
return Math.max(
document.body.scrollHeight || 0,
document.body.offsetHeight || 0,
document.documentElement.clientHeight || 0,
document.documentElement.scrollHeight || 0,
document.documentElement.offsetHeight || 0
);
}
// Генерация призрачных созвездий:
function generateGhostConstellations() {
ghostConstellations = [];
if (!W || !H) return;
var currentDocH = getDocHeight();
if (currentDocH < H) currentDocH = H;
// Сколько "экранов" в документе
var screens = currentDocH / H;
var totalCount = Math.round(screens * (3 + Math.random() * 15));
totalCount = Math.max(4, totalCount); // минимум 4
for (var i = 0; i < totalCount; i++) {
var nodes = 3 + Math.floor(Math.random() * 4); // 3-6 точек
var pts = [];
for (var n = 0; n < nodes; n++) {
pts.push({
x: Math.random() * W,
y: Math.random() * currentDocH
});
}
ghostConstellations.push(pts);
}
}
function rebuildStars() {
W = window.innerWidth;
H = window.innerHeight;
canvas.width = W;
canvas.height = H;
baseCanvas.width = W;
baseCanvas.height = H;
if (!W || !H) return;
stars = [];
twinkleStars = [];
for (var i = 0; i < count; i++) {
var sp = pickBackgroundSpectral();
var fill = (SPECTRAL_BASE[sp] || SPECTRAL_BASE.A).fill;
var jitter = 0.98 + Math.random() * 0.04;
var c = hexToRgb(fill);
var rr2 = Math.max(0, Math.min(255, Math.round(c.r * jitter)));
var gg2 = Math.max(0, Math.min(255, Math.round(c.g * jitter)));
var bb2 = Math.max(0, Math.min(255, Math.round(c.b * jitter)));
var alpha = 0.15 + Math.random() * 0.65;
var sizeRand = Math.random();
var radius = (sizeRand > 0.95) ? 1.8 : (sizeRand > 0.80 ? 1.2 : 0.7);
var st = {
x: Math.random() * W,
y: Math.random() * H,
r: radius,
rr: rr2, gg: gg2, bb: bb2,
a0: alpha,
color: 'rgba(' + rr2 + ',' + gg2 + ',' + bb2 + ',' + alpha.toFixed(2) + ')'
};
stars.push(st);
var isTw = (radius >= 1.0) || (alpha > 0.4 && Math.random() < 0.5) || (Math.random() < 0.15);
if (isTw) {
twinkleStars.push({
x: st.x, y: st.y, r: st.r,
rr: st.rr, gg: st.gg, bb: st.bb,
a0: st.a0,
tw: 0.55 + Math.random() * 1.7,
ph: Math.random() * Math.PI * 2
});
}
}
renderBase();
}
function renderBase() {
if (!W || !H) return;
baseCtx.clearRect(0, 0, W, H);
baseCtx.save();
baseCtx.fillStyle = '#000';
baseCtx.fillRect(0, 0, W, H);
baseCtx.globalCompositeOperation = 'lighter';
for (var i = 0; i < stars.length; i++) {
var st = stars[i];
baseCtx.beginPath();
baseCtx.fillStyle = st.color;
baseCtx.arc(st.x, st.y, st.r, 0, Math.PI * 2);
baseCtx.fill();
}
baseCtx.restore();
}
function drawGhosts(targetCtx) {
var scrollY = window.pageYOffset || document.documentElement.scrollTop || 0;
targetCtx.strokeStyle = 'rgba(200,220,255,0.12)';
targetCtx.lineWidth = 0.6;
targetCtx.fillStyle = 'rgba(200,220,255,0.10)';
for (var g = 0; g < ghostConstellations.length; g++) {
var pts = ghostConstellations[g];
if (!pts || !pts.length) continue;
// Проверяем видимость
var visible = false;
for (var v = 0; v < pts.length; v++) {
var screenY = pts[v].y - scrollY;
if (screenY > -100 && screenY < H + 100) {
visible = true;
break;
}
}
if (!visible) continue;
// Рисуем линии
targetCtx.beginPath();
targetCtx.moveTo(pts[0].x, pts[0].y - scrollY);
for (var k = 1; k < pts.length; k++) {
targetCtx.lineTo(pts[k].x, pts[k].y - scrollY);
}
targetCtx.stroke();
// Рисуем точки
for (var j = 0; j < pts.length; j++) {
targetCtx.beginPath();
targetCtx.arc(pts[j].x, pts[j].y - scrollY, 0.6, 0, Math.PI * 2);
targetCtx.fill();
}
}
}
function renderFrame(t) {
if (!W || !H) return;
ctx.globalCompositeOperation = 'source-over';
ctx.drawImage(baseCanvas, 0, 0);
for (var i = 0; i < twinkleStars.length; i++) {
var st = twinkleStars[i];
var twk = 0.55 + 0.45 * Math.sin(t * st.tw + st.ph);
var a = st.a0 * twk;
ctx.globalCompositeOperation = 'source-over';
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(st.x, st.y, st.r + 1.0, 0, Math.PI * 2);
ctx.fill();
ctx.globalCompositeOperation = 'lighter';
ctx.beginPath();
ctx.fillStyle = 'rgba(' + st.rr + ',' + st.gg + ',' + st.bb + ',' + a.toFixed(3) + ')';
ctx.arc(st.x, st.y, st.r, 0, Math.PI * 2);
ctx.fill();
}
ctx.globalCompositeOperation = 'lighter';
drawGhosts(ctx);
ctx.globalCompositeOperation = 'source-over';
}
function animate(ts) {
if (!W || !H) {
requestAnimationFrame(animate);
return;
}
renderFrame(ts / 1000);
requestAnimationFrame(animate);
}
// Инициализация
rebuildStars();
generateGhostConstellations();
requestAnimationFrame(animate);
window.addEventListener('resize', function() {
rebuildStars();
generateGhostConstellations();
});
// После полной загрузки — пересчитать созвездия с правильной высотой
window.addEventListener('load', function() {
setTimeout(function() {
generateGhostConstellations();
}, 100);
});
// Дополнительно: при изменении DOM (Confluence может подгружать контент)
if (typeof MutationObserver !== 'undefined') {
var debounceTimer = null;
var observer = new MutationObserver(function() {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(function() {
generateGhostConstellations();
}, 300);
});
observer.observe(document.body, { childList: true, subtree: true });
}
})();
function initConstellationStars() {
var svgStars = document.querySelectorAll('.constellation-visual circle.star, .constellation-visual circle.star-large, .constellation-visual circle.star-warm, .constellation-visual circle.polar-star');
if (!svgStars || svgStars.length === 0) return;
for (var i = 0; i < svgStars.length; i++) {
svgStars[i].style.animationDelay = (Math.random() * 3) + 's';
svgStars[i].style.animationDuration = (2.4 + Math.random() * 1.8) + 's';
}
}
function applyFlowerColors(section) {
var stars = section.querySelectorAll('.constellation-visual circle.star, .constellation-visual circle.star-large, .constellation-visual circle.star-warm');
if (!stars || stars.length === 0) return;
var points = [];
for (var i = 0; i < stars.length; i++) {
var el = stars[i];
if (el.classList.contains('polar-star')) continue;
points.push({ el: el, cx: parseFloat(el.getAttribute('cx') || '0'), cy: parseFloat(el.getAttribute('cy') || '0'), r: parseFloat(el.getAttribute('r') || '0') });
}
if (points.length === 0) return;
var bestIdx = 0, bestScore = -9999;
for (var j = 0; j < points.length; j++) {
var dx = points[j].cx - 100, dy = points[j].cy - 100;
var score = points[j].r * 10 - Math.sqrt(dx*dx + dy*dy);
if (score > bestScore) { bestScore = score; bestIdx = j; }
}
setStarStyle(points[bestIdx].el, '#ffd1e3', 'rgba(255,180,200,0.70)', 10, 0.95);
for (var k = 0; k < points.length; k++) {
if (k === bestIdx) continue;
var p = points[k];
if (p.cy < 90) setStarStyle(p.el, '#BFD7FF', 'rgba(140,200,255,0.60)', 9, 0.85);
else if (p.cy > 110) setStarStyle(p.el, '#FFC07A', 'rgba(255,170,90,0.70)', 10, 0.85);
else if (p.cx > 110) setStarStyle(p.el, '#FFE3A3', 'rgba(160,255,190,0.55)', 9, 0.85);
else setStarStyle(p.el, '#d6c3ff', 'rgba(210,170,255,0.65)', 10, 0.85);
}
}
function applyRainbowColors(section) {
var stars = section.querySelectorAll('.constellation-visual circle.star, .constellation-visual circle.star-large, .constellation-visual circle.star-warm');
if (!stars || stars.length === 0) return;
var points = [];
for (var i = 0; i < stars.length; i++) {
var el = stars[i];
if (el.classList.contains('polar-star')) continue;
points.push({ el: el, cx: parseFloat(el.getAttribute('cx') || '0') });
}
points.sort(function(a, b) { return a.cx - b.cx; });
var colors = [
{ fill: '#ffc3d6', glow: 'rgba(255,180,200,0.55)', blur: 10 },
{ fill: '#FFC07A', glow: 'rgba(255,170,90,0.60)', blur: 11 },
{ fill: '#FFE3A3', glow: 'rgba(255,215,100,0.55)', blur: 10 },
{ fill: '#c7ffd2', glow: 'rgba(140,220,160,0.50)', blur: 10 },
{ fill: '#BFD7FF', glow: 'rgba(140,200,255,0.60)', blur: 11 }
];
for (var j = 0; j < points.length; j++) {
var c = colors[Math.min(j, colors.length - 1)];
setStarStyle(points[j].el, c.fill, c.glow, c.blur, 0.90);
}
}
function applyConstellationPalettes() {
var sections = document.querySelectorAll('.constellation-section');
if (!sections || sections.length === 0) return;
for (var s = 0; s < sections.length; s++) {
var section = sections[s];
var titleEl = section.querySelector('.constellation-text h2');
var name = titleEl ? (titleEl.textContent || '').trim() : '';
var themeKey = THEMES_BY_NAME[name] || guessThemeByName(name);
var aura = THEME_AURAS[themeKey] || THEME_AURAS.neutral;
var lines = section.querySelectorAll('.constellation-line');
for (var li = 0; li < lines.length; li++) lines[li].style.stroke = aura.lineColor;
if (name === 'Цветок') {
for (var li2 = 0; li2 < lines.length; li2++) lines[li2].style.stroke = THEME_AURAS.nature.lineColor;
applyFlowerColors(section);
continue;
}
if (name === 'Радуга') {
for (var li3 = 0; li3 < lines.length; li3++) lines[li3].style.stroke = THEME_AURAS.mystic.lineColor;
applyRainbowColors(section);
continue;
}
var stars = section.querySelectorAll('.constellation-visual circle.star, .constellation-visual circle.star-large, .constellation-visual circle.star-warm, .constellation-visual circle.polar-star');
for (var i = 0; i < stars.length; i++) {
var el = stars[i];
if (!el || el.classList.contains('polar-star')) continue;
var rr = parseFloat(el.getAttribute('r') || '0');
var isMain = rr >= 5 || el.classList.contains('star-warm') || el.classList.contains('star-large');
var sp = el.getAttribute('data-sp');
if (!sp) {
sp = suggestSpectralClass(themeKey, isMain);
el.setAttribute('data-sp', sp);
}
applySpectralStyle(el, sp, aura, isMain);
}
}
}
initConstellationStars();
applyConstellationPalettes();
setTimeout(function() {
initConstellationStars();
applyConstellationPalettes();
}, 500);
})();
</script>
<!-- CONTENT_END --> |