:root {
    color-scheme: dark;
    --bg: #050708;
    --bg-2: #0a1012;
    --panel: rgba(9, 18, 20, 0.78);
    --panel-strong: rgba(12, 28, 31, 0.9);
    --line: rgba(149, 241, 228, 0.22);
    --line-strong: rgba(149, 241, 228, 0.48);
    --text: #e7fbf7;
    --muted: #8fa9a6;
    --dim: #55706d;
    --cyan: #78f6e7;
    --green: #a8ffbf;
    --amber: #ffd98a;
    --dangerless-red: #ff8d9a;
    --shadow: 0 0 34px rgba(120, 246, 231, 0.12);
    --max: 1180px;
}

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
    background: var(--bg);
}

body {
    min-width: 320px;
    margin: 0;
    overflow-x: hidden;
    color: var(--text);
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    line-height: 1.65;
    background:
        linear-gradient(rgba(120, 246, 231, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 246, 231, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 30% 12%, rgba(120, 246, 231, 0.12), transparent 28rem),
        radial-gradient(circle at 70% 0%, rgba(168, 255, 191, 0.09), transparent 24rem),
        var(--bg);
    background-size: 36px 36px, 36px 36px, auto, auto, auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

.site-shell {
    position: relative;
    min-height: 100vh;
}

.site-shell::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
    background: linear-gradient(180deg, rgba(5, 7, 8, 0.1), rgba(5, 7, 8, 0.72));
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 22px;
    align-items: center;
    width: min(var(--max), calc(100% - 32px));
    margin: 0 auto;
    padding: 18px 0;
    backdrop-filter: blur(16px);
}

.brand-mark {
    display: inline-flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.brand-glyph {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 0 18px rgba(120, 246, 231, 0.1), var(--shadow);
}

.brand-glyph::before,
.brand-glyph::after {
    position: absolute;
    inset: 7px;
    content: "";
    border: 1px solid rgba(168, 255, 191, 0.55);
    transform: rotate(45deg);
}

.brand-glyph::after {
    inset: 12px;
    border-color: rgba(255, 217, 138, 0.5);
}

.brand-mark strong,
.site-footer strong {
    display: block;
    font-size: 0.92rem;
    letter-spacing: 0.16em;
}

.brand-mark small {
    display: block;
    max-width: 46vw;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-nav,
.language-switch,
.footer-meta,
.safety-strip {
    display: flex;
    gap: 8px;
    align-items: center;
}

.site-nav a,
.language-switch a {
    border: 1px solid transparent;
    color: var(--muted);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    padding: 8px 10px;
    text-transform: uppercase;
}

.site-nav a:hover,
.language-switch a:hover,
.language-switch .is-active {
    border-color: var(--line);
    color: var(--text);
    background: rgba(120, 246, 231, 0.06);
}

.home-hero,
.guide-hero,
.guide-grid,
.guide-route,
.lab-hero,
.lab-index,
.lab-workbench,
.slime-guide-section,
.lab-lower-grid,
.observation-log-wrap,
.ad-panel {
    width: min(var(--max), calc(100% - 32px));
    margin-inline: auto;
}

.home-hero {
    position: relative;
    display: grid;
    min-height: calc(100vh - 86px);
    align-items: center;
    overflow: hidden;
    padding: 48px 0 112px;
}

.home-ambient {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.72;
    pointer-events: none;
}

.hero-field {
    position: absolute;
    inset: 5% 0 14%;
    overflow: hidden;
    border: 1px solid rgba(120, 246, 231, 0.12);
    background:
        linear-gradient(90deg, transparent 49.8%, rgba(120, 246, 231, 0.18) 50%, transparent 50.2%),
        linear-gradient(0deg, transparent 49.8%, rgba(168, 255, 191, 0.12) 50%, transparent 50.2%),
        radial-gradient(circle at center, rgba(120, 246, 231, 0.12), transparent 38%);
    box-shadow: inset 0 0 80px rgba(120, 246, 231, 0.05);
}

.hero-field::before,
.hero-field::after {
    position: absolute;
    inset: 10%;
    pointer-events: none;
    content: "";
    border: 1px solid rgba(120, 246, 231, 0.1);
}

.hero-field::after {
    inset: auto 8% 12% auto;
    width: min(34vw, 360px);
    height: min(34vw, 360px);
    border-color: rgba(255, 217, 138, 0.16);
    transform: rotate(45deg);
}

.hero-field span {
    position: absolute;
    width: 42vmin;
    aspect-ratio: 1;
    border: 1px solid rgba(120, 246, 231, 0.35);
    transform: translate(-50%, -50%) rotate(45deg);
    animation: orbit 16s linear infinite;
}

.hero-field span:nth-child(1) {
    top: 48%;
    left: 52%;
}

.hero-field span:nth-child(2) {
    top: 48%;
    left: 52%;
    width: 28vmin;
    border-color: rgba(168, 255, 191, 0.28);
    animation-duration: 22s;
    animation-direction: reverse;
}

.hero-field span:nth-child(3) {
    top: 48%;
    left: 52%;
    width: 14vmin;
    border-color: rgba(255, 217, 138, 0.3);
    animation-duration: 12s;
}

.home-hero__content,
.lab-hero__copy {
    position: relative;
    max-width: 780px;
}

.eyebrow {
    margin: 0 0 14px;
    color: var(--green);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    overflow-wrap: anywhere;
}

h1 {
    margin: 0;
    font-size: clamp(3.2rem, 11vw, 8.6rem);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: 0;
    overflow-wrap: normal;
    text-shadow: 0 0 28px rgba(120, 246, 231, 0.28);
    word-break: keep-all;
}

.hero-tagline {
    margin: 18px 0 0;
    color: var(--cyan);
    font-size: clamp(1.05rem, 2.4vw, 1.7rem);
}

.hero-verbs {
    display: grid;
    gap: 2px;
    margin: 28px 0 0;
    color: var(--text);
    font-size: clamp(1.25rem, 2.8vw, 2.1rem);
}

.hero-verbs span {
    display: block;
    width: fit-content;
    min-width: min(100%, 13rem);
    border-left: 1px solid rgba(120, 246, 231, 0.44);
    background: linear-gradient(90deg, rgba(120, 246, 231, 0.09), transparent 72%);
    padding: 2px 0 2px 12px;
}

.hero-description {
    max-width: 680px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 1rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.hero-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid var(--line-strong);
    background: rgba(120, 246, 231, 0.08);
    color: var(--text);
    padding: 9px 14px;
}

.current-observation {
    position: absolute;
    right: 22px;
    bottom: 112px;
    width: min(330px, 36vw);
    border: 1px solid rgba(120, 246, 231, 0.2);
    background: rgba(4, 10, 11, 0.72);
    box-shadow: var(--shadow);
    padding: 16px;
}

.current-observation p,
.guide-status p,
.guide-card p,
.facility-panel p {
    margin: 0 0 8px;
    color: var(--green);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.current-observation strong,
.guide-status strong,
.guide-card strong,
.facility-panel strong {
    display: block;
    font-weight: 500;
}

.current-observation span,
.guide-status span,
.guide-card span,
.facility-panel span {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 0.88rem;
}

.safety-strip {
    position: absolute;
    right: 0;
    bottom: 34px;
    left: 0;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

.safety-strip li {
    min-height: 38px;
    border: 1px solid var(--line);
    background: rgba(5, 11, 12, 0.76);
    color: var(--muted);
    font-size: 0.82rem;
    padding: 8px 12px;
}

.section-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: end;
    margin-bottom: 20px;
}

.section-heading h2,
.panel-line h2,
.comment-log h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.12em;
}

.facility-overview {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: min(var(--max), calc(100% - 32px));
    margin: -44px auto 0;
    position: relative;
}

.facility-panel {
    min-height: 154px;
    border: 1px solid rgba(120, 246, 231, 0.18);
    background:
        linear-gradient(180deg, rgba(12, 28, 31, 0.72), rgba(5, 8, 9, 0.9)),
        var(--panel);
    box-shadow: var(--shadow);
    padding: 16px;
}

.system-map {
    width: min(var(--max), calc(100% - 32px));
    margin: 34px auto 0;
    padding: 18px 0 6px;
}

.guide-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    gap: 24px;
    align-items: end;
    min-height: calc(82vh - 86px);
    overflow: hidden;
    padding: 74px 0 68px;
}

.guide-hero__signal {
    position: absolute;
    inset: 38px 0 38px auto;
    width: min(58vw, 660px);
    border: 1px solid rgba(120, 246, 231, 0.14);
    opacity: 0.9;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 49.8%, rgba(120, 246, 231, 0.2) 50%, transparent 50.2%),
        linear-gradient(0deg, transparent 49.8%, rgba(168, 255, 191, 0.14) 50%, transparent 50.2%),
        radial-gradient(circle at 52% 48%, rgba(120, 246, 231, 0.2), transparent 32%),
        radial-gradient(circle at 50% 50%, transparent 28%, rgba(255, 217, 138, 0.12) 29%, transparent 31%),
        rgba(7, 15, 16, 0.3);
    box-shadow: inset 0 0 90px rgba(120, 246, 231, 0.06), var(--shadow);
    transform: skewX(-8deg);
}

.guide-hero__signal::before,
.guide-hero__signal::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(120, 246, 231, 0.25);
}

.guide-hero__signal::before {
    inset: 14%;
    transform: rotate(45deg);
}

.guide-hero__signal::after {
    inset: 28%;
    border-color: rgba(168, 255, 191, 0.22);
    transform: rotate(-18deg);
}

.guide-hero__copy,
.guide-status {
    position: relative;
}

.guide-hero h1 {
    max-width: 780px;
    margin: 0;
    font-size: clamp(2.7rem, 7vw, 6.4rem);
    font-weight: 500;
    line-height: 0.95;
}

.guide-hero__copy > p:not(.eyebrow) {
    max-width: 640px;
    margin: 22px 0 0;
    color: var(--muted);
    font-size: 1rem;
}

.guide-status {
    border: 1px solid rgba(120, 246, 231, 0.22);
    background: rgba(4, 10, 11, 0.74);
    box-shadow: var(--shadow);
    padding: 18px;
}

.guide-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 34px 0 10px;
}

.guide-grid > .section-heading {
    grid-column: 1 / -1;
    margin-bottom: 4px;
}

.guide-grid--compact {
    padding-bottom: 54px;
}

.guide-card {
    min-height: 210px;
    border: 1px solid rgba(120, 246, 231, 0.16);
    background: linear-gradient(180deg, rgba(13, 29, 31, 0.68), rgba(5, 10, 11, 0.72));
    padding: 18px;
}

.guide-card strong {
    color: var(--text);
    font-size: 1.05rem;
}

.guide-route {
    padding: 34px 0 20px;
}

.guide-route__map {
    margin-top: 18px;
}

.system-map__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: 18px;
    align-items: stretch;
}

.system-route {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    border: 1px solid rgba(120, 246, 231, 0.18);
    background:
        linear-gradient(rgba(120, 246, 231, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 246, 231, 0.032) 1px, transparent 1px),
        rgba(5, 11, 12, 0.76);
    background-size: 28px 28px, 28px 28px, auto;
    box-shadow: var(--shadow);
    padding: 18px;
}

.system-route::before {
    position: absolute;
    top: 50%;
    right: 38px;
    left: 38px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(120, 246, 231, 0.46), transparent);
}

.route-node {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 142px;
    align-content: center;
    gap: 8px;
    border: 1px solid rgba(120, 246, 231, 0.24);
    background: rgba(3, 8, 9, 0.86);
    padding: 15px;
}

.route-node::after {
    position: absolute;
    top: 50%;
    right: -20px;
    width: 26px;
    height: 1px;
    content: "";
    background: rgba(168, 255, 191, 0.52);
}

.route-node:last-child::after {
    display: none;
}

.route-node span,
.route-panel p,
.route-panel span {
    color: var(--green);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.route-node strong {
    color: var(--cyan);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.route-node em {
    color: var(--muted);
    font-size: 0.86rem;
    font-style: normal;
}

.route-panel {
    display: grid;
    align-content: start;
    gap: 12px;
    border: 1px solid rgba(120, 246, 231, 0.18);
    background: var(--panel);
    box-shadow: var(--shadow);
    padding: 18px;
}

.route-panel p {
    margin: 0;
}

.route-panel ol {
    display: grid;
    gap: 9px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.route-panel li {
    border-left: 1px solid rgba(120, 246, 231, 0.34);
    color: var(--muted);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    padding-left: 10px;
}

.route-panel span {
    color: var(--amber);
}

.lab-index {
    padding: 48px 0 76px;
}

.active-systems {
    padding-top: 56px;
}

.lab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 18px;
}

.lab-card {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(13, 30, 32, 0.78), rgba(5, 8, 9, 0.92));
    box-shadow: var(--shadow);
    padding: 18px;
}

.lab-card::after {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    content: "";
    background: var(--green);
    box-shadow: 0 0 16px rgba(168, 255, 191, 0.8);
}

.lab-card__visual {
    height: 170px;
    margin-bottom: 18px;
    border: 1px solid rgba(120, 246, 231, 0.18);
    background:
        repeating-radial-gradient(circle at 58% 48%, transparent 0 10px, rgba(120, 246, 231, 0.16) 11px 12px),
        linear-gradient(135deg, rgba(120, 246, 231, 0.08), rgba(168, 255, 191, 0.04));
}

.lab-card p {
    margin: 0 0 10px;
    color: var(--green);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
}

.lab-card h3 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 500;
}

.lab-card--active {
    border-color: rgba(120, 246, 231, 0.32);
    box-shadow: 0 0 24px rgba(120, 246, 231, 0.055);
}

.lab-card span {
    display: block;
    min-height: 64px;
    margin: 12px 0 22px;
    color: var(--muted);
}

.lab-card a,
.lab-card em,
.comment-form button,
.button-row button,
.segmented-control button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 1px solid var(--line-strong);
    background: rgba(120, 246, 231, 0.08);
    color: var(--text);
    padding: 9px 14px;
    cursor: pointer;
}

.lab-card em {
    border-color: rgba(255, 217, 138, 0.24);
    background: rgba(255, 217, 138, 0.04);
    color: var(--amber);
    cursor: default;
    font-style: normal;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lab-card--preparing {
    background: linear-gradient(180deg, rgba(13, 22, 24, 0.58), rgba(5, 8, 9, 0.88));
    box-shadow: none;
    opacity: 0.72;
}

.lab-card--preparing::after {
    background: var(--amber);
    box-shadow: 0 0 14px rgba(255, 217, 138, 0.48);
}

.lab-card--preparing .lab-card__visual {
    filter: saturate(0.55);
    opacity: 0.72;
}

.candidate-systems {
    padding: 0 0 70px;
}

.candidate-systems__note {
    max-width: 720px;
    margin: -4px 0 20px;
    color: var(--muted);
}

.candidate-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.candidate-card {
    min-height: 230px;
    border: 1px solid rgba(255, 217, 138, 0.18);
    background:
        linear-gradient(rgba(255, 217, 138, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 246, 231, 0.024) 1px, transparent 1px),
        rgba(6, 12, 13, 0.7);
    background-size: 24px 24px, 24px 24px, auto;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
    padding: 18px;
}

.candidate-card p {
    margin: 0 0 12px;
    color: var(--amber);
    font-size: 0.7rem;
    letter-spacing: 0.13em;
}

.candidate-card h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.18rem;
    font-weight: 500;
}

.candidate-card span,
.candidate-card em {
    display: block;
    color: var(--muted);
}

.candidate-card span {
    margin: 12px 0;
    font-size: 0.82rem;
}

.candidate-card em {
    font-style: normal;
}

.candidate-systems--deep {
    margin-top: -40px;
    padding-bottom: 78px;
}

.candidate-systems--deep .section-heading h2 {
    color: var(--muted);
}

.deep-candidate-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 8px;
}

.deep-candidate-item {
    display: flex;
    gap: 8px;
    align-items: center;
    min-height: 46px;
    border: 1px solid rgba(120, 246, 231, 0.11);
    background: rgba(5, 9, 10, 0.58);
    color: var(--muted);
    padding: 9px 11px;
}

.deep-candidate-item span {
    flex: 0 0 auto;
    color: rgba(255, 217, 138, 0.74);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.deep-candidate-item strong {
    color: rgba(230, 252, 248, 0.78);
    font-size: 0.9rem;
    font-weight: 500;
}

.lab-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
    gap: 24px;
    align-items: end;
    padding: 60px 0 28px;
}

.lab-hero > *,
.lab-hero__copy {
    min-width: 0;
}

.lab-hero h1 {
    font-size: clamp(2.45rem, 6vw, 5.35rem);
    line-height: 1.02;
    overflow-wrap: anywhere;
}

.page-cellular-automata .lab-hero h1 {
    font-size: clamp(2.35rem, 4.8vw, 3.85rem);
    overflow-wrap: normal;
    word-break: keep-all;
}

.page-cellular-automata .lab-title-phrase {
    display: inline-block;
}

.lab-hero p {
    color: var(--muted);
}

.lab-route {
    width: min(100%, 680px);
    margin: 14px 0 20px;
    padding: 12px 14px;
    border: 1px solid rgba(120, 246, 231, 0.16);
    background: linear-gradient(135deg, rgba(120, 246, 231, 0.055), rgba(5, 8, 11, 0.42));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.lab-route__title,
.lab-route__current {
    display: block;
    margin: 0;
    color: var(--green);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.lab-route__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin: 10px 0 9px;
    padding: 0;
    list-style: none;
}

.lab-route__steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 0.76rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.lab-route__steps li:not(:last-child)::after {
    content: "→";
    color: rgba(120, 246, 231, 0.34);
}

.lab-route__steps a,
.lab-route__steps span {
    color: inherit;
    text-decoration: none;
}

.lab-route__steps a:hover {
    color: var(--text);
}

.lab-route__steps .is-current {
    color: var(--text);
}

.lab-route__steps .is-current span {
    text-shadow: 0 0 14px rgba(120, 246, 231, 0.34);
}

.lab-route__current {
    color: var(--muted);
    font-size: 0.7rem;
}

.lab-status-panel,
.panel-line,
.comment-log,
.comment-form {
    border: 1px solid var(--line);
    background: var(--panel);
    box-shadow: var(--shadow);
}

.lab-status-panel {
    padding: 18px;
}

.lab-status-panel span,
.stage-readout,
.ad-panel p,
.ad-panel strong,
.comment-entry span,
.control-stack span,
.comment-form span {
    display: block;
    color: var(--green);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lab-status-panel strong {
    display: block;
    margin-top: 8px;
    font-weight: 500;
}

.lab-workbench {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}

.observation-stage {
    position: relative;
    overflow: hidden;
    min-height: 340px;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line-strong);
    background: #020405;
    box-shadow: inset 0 0 80px rgba(120, 246, 231, 0.08), var(--shadow);
    touch-action: none;
}

.observation-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.stage-readout {
    position: absolute;
    right: 14px;
    bottom: 12px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    color: var(--muted);
}

.stage-readout span {
    min-height: 24px;
    border: 1px solid rgba(120, 246, 231, 0.16);
    background: rgba(2, 6, 7, 0.68);
    padding: 4px 7px;
}

.lab-side {
    display: grid;
    gap: 18px;
}

.panel-line {
    padding: 18px;
}

.operation-panel ul {
    padding-left: 18px;
    margin: 16px 0;
    color: var(--muted);
}

.chamber-status {
    margin: 14px 0 16px;
    padding: 12px;
    border: 1px solid rgba(120, 246, 231, 0.15);
    background: linear-gradient(135deg, rgba(120, 246, 231, 0.055), rgba(168, 255, 191, 0.028));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.chamber-status p {
    margin: 0 0 9px;
    color: var(--green);
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.chamber-status dl {
    display: grid;
    gap: 7px;
    margin: 0;
}

.chamber-status div {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.chamber-status dt,
.chamber-status dd {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chamber-status dt {
    color: rgba(120, 246, 231, 0.62);
}

.chamber-status dd {
    color: var(--text);
}

.control-stack {
    display: grid;
    gap: 14px;
}

.control-stack label,
.comment-form label {
    display: grid;
    gap: 7px;
}

input[type="range"] {
    width: 100%;
    min-height: 32px;
    appearance: none;
    accent-color: var(--cyan);
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    border: 1px solid rgba(120, 246, 231, 0.2);
    background: rgba(120, 246, 231, 0.12);
}

input[type="range"]::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -10px;
    border: 1px solid rgba(168, 255, 191, 0.72);
    border-radius: 50%;
    appearance: none;
    background: #081315;
    box-shadow: 0 0 14px rgba(120, 246, 231, 0.22);
}

input[type="range"]::-moz-range-track {
    height: 4px;
    border: 1px solid rgba(120, 246, 231, 0.2);
    background: rgba(120, 246, 231, 0.12);
}

input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(168, 255, 191, 0.72);
    border-radius: 50%;
    background: #081315;
    box-shadow: 0 0 14px rgba(120, 246, 231, 0.22);
}

.control-stack select {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(120, 246, 231, 0.22);
    border-radius: 0;
    background: rgba(2, 6, 7, 0.9);
    color: var(--text);
    padding: 8px 10px;
}

.segmented-control,
.button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.segmented-control button,
.button-row button {
    width: 100%;
    color: var(--muted);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.segmented-control button.is-active,
.segmented-control button:hover,
.button-row button:hover {
    border-color: rgba(168, 255, 191, 0.55);
    background: rgba(120, 246, 231, 0.12);
    color: var(--text);
}

.julia-params {
    display: grid;
    gap: 12px;
    border-top: 1px solid rgba(120, 246, 231, 0.14);
    padding-top: 14px;
}

.vector-controls .segmented-control,
.harmonic-controls .segmented-control {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.slime-stage {
    min-height: 390px;
    background:
        radial-gradient(circle at 32% 28%, rgba(168, 255, 191, 0.09), transparent 28%),
        radial-gradient(circle at 72% 62%, rgba(120, 246, 231, 0.08), transparent 32%),
        #020405;
}

.slime-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(120, 246, 231, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(120, 246, 231, 0.035) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.38;
    mix-blend-mode: screen;
}

.slime-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.slime-main .operation-panel {
    min-width: 0;
}

.slime-main .operation-panel ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px 14px;
    padding: 0;
    list-style: none;
}

.slime-controls .segmented-control {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.slime-tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    border-top: 1px solid rgba(120, 246, 231, 0.14);
    padding-top: 14px;
}

.slime-tool-grid button,
.slime-button-row button,
.slime-preset-grid button {
    min-height: 38px;
    border-color: rgba(120, 246, 231, 0.24);
    background: rgba(2, 15, 16, 0.68);
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 1;
}

.slime-tool-grid button.is-active,
.slime-tool-grid button:hover,
.slime-button-row button.is-active,
.slime-preset-grid button:hover {
    border-color: rgba(168, 255, 191, 0.55);
    background: rgba(120, 246, 231, 0.11);
    color: var(--text);
}

.slime-button-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.slime-observation-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.slime-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border-top: 1px solid rgba(120, 246, 231, 0.12);
    padding-top: 14px;
}

@media (min-width: 821px) {
    .slime-main .slime-controls {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 12px;
        align-items: start;
    }

    .slime-main .slime-controls .segmented-control {
        grid-column: span 3;
    }

    .slime-main .slime-tool-grid {
        grid-column: span 5;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        border-top: 0;
        padding-top: 0;
    }

    .slime-main .slime-controls label {
        grid-column: span 2;
    }

    .slime-main .slime-button-row:not(.slime-observation-actions),
    .slime-main .slime-observation-actions,
    .slime-main .slime-preset-grid {
        grid-column: span 4;
    }

    .slime-main .slime-preset-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.slime-guide-section {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr) minmax(0, 0.9fr);
    gap: 18px;
    padding: 18px 0 0;
}

.slime-guide-section .panel-line {
    min-width: 0;
}

.slime-info-panel h2 {
    margin-bottom: 12px;
}

.slime-note-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.slime-note-list li {
    position: relative;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.55;
    padding-left: 16px;
}

.slime-note-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(168, 255, 191, 0.62);
    background: rgba(120, 246, 231, 0.1);
    box-shadow: 0 0 10px rgba(120, 246, 231, 0.18);
}

.slime-guide-list {
    display: grid;
    gap: 9px;
    margin: 0;
}

.slime-guide-list div {
    display: grid;
    grid-template-columns: minmax(82px, 0.34fr) minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    border-bottom: 1px solid rgba(120, 246, 231, 0.085);
    padding-bottom: 8px;
}

.slime-guide-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.slime-guide-list dt,
.slime-guide-list dd {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.45;
}

.slime-guide-list dt {
    color: var(--green);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.slime-guide-list dd {
    color: var(--muted);
}

.ecosystem-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.ecosystem-stage {
    min-height: 430px;
    background:
        radial-gradient(circle at 28% 32%, rgba(168, 255, 191, 0.08), transparent 28%),
        radial-gradient(circle at 74% 48%, rgba(255, 107, 130, 0.055), transparent 30%),
        #020605;
}

.ecosystem-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(120, 246, 231, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(120, 246, 231, 0.03) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.34;
    mix-blend-mode: screen;
}

.ecosystem-stage canvas,
.ecosystem-graph-panel canvas {
    position: relative;
    z-index: 1;
}

.ecosystem-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: baseline;
    margin-bottom: 12px;
}

.ecosystem-panel-head h2 {
    margin: 0;
}

.ecosystem-panel-head span {
    color: var(--green);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.ecosystem-graph-panel canvas {
    width: 100%;
    height: 160px;
    border: 1px solid rgba(120, 246, 231, 0.14);
    background: rgba(1, 8, 6, 0.78);
}

.ecosystem-metrics dl {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.ecosystem-metrics div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 10px;
}

.ecosystem-metrics dt,
.ecosystem-metrics dd {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

.ecosystem-metrics dt {
    color: rgba(120, 246, 231, 0.68);
}

.ecosystem-metrics dd {
    color: var(--text);
}

.ecosystem-selected p,
.ecosystem-metrics p,
.ecosystem-log textarea {
    color: var(--muted);
}

.ecosystem-log ol {
    display: grid;
    gap: 8px;
    max-height: 190px;
    overflow: auto;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.ecosystem-log li {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 9px;
    border-bottom: 1px solid rgba(120, 246, 231, 0.09);
    padding-bottom: 8px;
}

.ecosystem-log strong {
    color: var(--green);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.ecosystem-log span {
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.ecosystem-log textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid rgba(120, 246, 231, 0.16);
    background: rgba(2, 6, 7, 0.7);
    padding: 10px;
}

.ecosystem-controls .segmented-control,
.ecosystem-button-row,
.ecosystem-option-grid {
    display: grid;
    gap: 8px;
}

.ecosystem-controls .segmented-control,
.ecosystem-button-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ecosystem-option-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ecosystem-option-grid button,
.ecosystem-button-row button,
.ecosystem-controls > button,
.ecosystem-speed button {
    min-height: 38px;
    border-color: rgba(120, 246, 231, 0.24);
    background: rgba(2, 15, 16, 0.68);
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ecosystem-option-grid button.is-active,
.ecosystem-option-grid button:hover,
.ecosystem-button-row button:hover,
.ecosystem-controls > button:hover,
.ecosystem-speed button.is-active {
    border-color: rgba(168, 255, 191, 0.55);
    background: rgba(120, 246, 231, 0.11);
    color: var(--text);
}

.ecosystem-toggle-row {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    align-items: center;
    min-height: 40px;
}

.ecosystem-toggle-row input {
    width: 18px;
    height: 18px;
}

.orbit-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.orbit-stage {
    min-height: 430px;
    background:
        radial-gradient(circle at 48% 52%, rgba(255, 211, 110, 0.08), transparent 22%),
        radial-gradient(circle at 64% 42%, rgba(120, 246, 231, 0.07), transparent 28%),
        #020405;
}

.orbit-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(120, 246, 231, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(120, 246, 231, 0.03) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.3;
    mix-blend-mode: screen;
}

.orbit-stage canvas {
    position: relative;
    z-index: 1;
}

.orbit-trace-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.orbit-trace-panel div {
    border: 1px solid rgba(120, 246, 231, 0.14);
    background: rgba(2, 12, 13, 0.48);
    padding: 12px;
}

.orbit-trace-panel span,
.orbit-metrics dt {
    display: block;
    color: rgba(120, 246, 231, 0.62);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.orbit-trace-panel strong,
.orbit-metrics dd {
    display: block;
    margin: 5px 0 0;
    color: var(--text);
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.orbit-metrics h2,
.orbit-log h2 {
    margin-bottom: 12px;
}

.orbit-metrics dl {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.orbit-metrics div {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.orbit-log ol {
    display: grid;
    gap: 8px;
    max-height: 190px;
    overflow: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.orbit-log li {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 9px;
    border-bottom: 1px solid rgba(120, 246, 231, 0.09);
    padding-bottom: 8px;
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.orbit-log strong {
    color: var(--green);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.orbit-button-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.orbit-controls .control-hint {
    color: var(--dim);
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: 0.04em;
    text-transform: none;
}

.orbit-toggle-row {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    align-items: center;
    min-height: 40px;
}

.orbit-toggle-row input {
    width: 18px;
    height: 18px;
}

.dimensional-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.dimensional-stage {
    min-height: 430px;
    background:
        radial-gradient(circle at 52% 40%, rgba(84, 247, 255, 0.08), transparent 24%),
        radial-gradient(circle at 42% 58%, rgba(157, 255, 139, 0.055), transparent 26%),
        #020706;
}

.dimensional-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(120, 246, 231, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 246, 231, 0.035) 1px, transparent 1px);
    background-size: 34px 34px;
    mix-blend-mode: screen;
    opacity: 0.48;
}

.dimensional-stage canvas {
    position: relative;
    z-index: 1;
}

.dimensional-trace-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.dimensional-trace-panel div {
    border: 1px solid rgba(120, 246, 231, 0.14);
    background: rgba(2, 12, 13, 0.48);
    padding: 12px;
}

.dimensional-trace-panel span,
.dimensional-metrics dt {
    display: block;
    color: rgba(120, 246, 231, 0.62);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dimensional-trace-panel strong,
.dimensional-metrics dd {
    display: block;
    margin: 5px 0 0;
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.78rem;
}

.dimensional-metrics h2,
.dimensional-log h2 {
    margin-bottom: 12px;
}

.dimensional-metrics dl {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.dimensional-metrics div {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
}

.dimensional-metrics p,
.dimensional-log span {
    color: var(--muted);
}

.dimensional-log ol {
    display: grid;
    gap: 8px;
    max-height: 190px;
    margin: 0;
    padding: 0;
    overflow: auto;
    list-style: none;
}

.dimensional-log li {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 9px;
    border-bottom: 1px solid rgba(120, 246, 231, 0.1);
    padding-bottom: 8px;
}

.dimensional-log strong {
    color: var(--green);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.dimensional-button-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.automata-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.automata-stage {
    min-height: 430px;
    background:
        radial-gradient(circle at 34% 46%, rgba(84, 247, 255, 0.08), transparent 28%),
        radial-gradient(circle at 70% 34%, rgba(157, 255, 139, 0.07), transparent 24%),
        #020706;
}

.automata-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(120, 246, 231, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 246, 231, 0.035) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.36;
}

.automata-stage canvas {
    position: relative;
    z-index: 1;
    touch-action: none;
}

.automata-trace-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.automata-trace-panel div {
    border: 1px solid rgba(120, 246, 231, 0.14);
    background: rgba(2, 12, 13, 0.48);
    padding: 12px;
}

.automata-trace-panel span,
.automata-metrics dt {
    display: block;
    color: rgba(120, 246, 231, 0.62);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.automata-trace-panel strong,
.automata-metrics dd {
    display: block;
    margin: 5px 0 0;
    color: var(--text);
    font-size: 0.82rem;
}

.automata-metrics h2 {
    margin-bottom: 12px;
}

.automata-metrics dl {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.automata-metrics div {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
}

.automata-metrics p {
    color: var(--muted);
}

.automata-button-row,
.automata-seed-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.automata-controls button,
.automata-seed-grid button {
    min-height: 38px;
    border-color: rgba(120, 246, 231, 0.24);
    background: rgba(2, 15, 16, 0.68);
}

.automata-controls button:hover,
.automata-controls button[aria-pressed="true"],
.automata-seed-grid button:hover {
    border-color: rgba(168, 255, 191, 0.55);
    background: rgba(120, 246, 231, 0.11);
    color: var(--text);
}

.differential-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.differential-stage {
    min-height: 430px;
    background:
        radial-gradient(circle at 42% 42%, rgba(120, 246, 231, 0.1), transparent 28%),
        radial-gradient(circle at 68% 62%, rgba(118, 161, 255, 0.08), transparent 30%),
        #020706;
}

.differential-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(120, 246, 231, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 246, 231, 0.035) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.34;
}

.differential-stage canvas {
    position: relative;
    z-index: 1;
    touch-action: none;
    cursor: crosshair;
}

.differential-field-head {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    right: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    pointer-events: none;
}

.differential-field-head div,
.differential-trace-panel div {
    border: 1px solid rgba(120, 246, 231, 0.14);
    background: rgba(2, 12, 13, 0.56);
    padding: 10px 12px;
}

.differential-field-head span,
.differential-trace-panel span,
.differential-metrics dt {
    display: block;
    color: rgba(120, 246, 231, 0.62);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.differential-field-head strong,
.differential-trace-panel strong,
.differential-metrics dd {
    display: block;
    margin: 5px 0 0;
    color: var(--text);
    font-size: 0.82rem;
}

.differential-trace-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.differential-metrics h2 {
    margin-bottom: 12px;
}

.differential-metrics dl {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.differential-metrics div {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
}

.differential-metrics p {
    color: var(--muted);
}

.differential-button-row {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.differential-controls button {
    min-height: 38px;
    border-color: rgba(120, 246, 231, 0.24);
    background: rgba(2, 15, 16, 0.68);
}

.differential-controls button:hover,
.differential-controls button[aria-pressed="true"] {
    border-color: rgba(168, 255, 191, 0.55);
    background: rgba(120, 246, 231, 0.11);
    color: var(--text);
}

.page-decision-tree .lab-hero h1 {
    font-size: clamp(2.35rem, 4.8vw, 3.9rem);
    overflow-wrap: normal;
    word-break: keep-all;
}

.decision-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.decision-stage {
    min-height: 430px;
    background:
        radial-gradient(circle at 38% 42%, rgba(120, 246, 231, 0.09), transparent 28%),
        radial-gradient(circle at 70% 54%, rgba(117, 168, 255, 0.08), transparent 30%),
        radial-gradient(circle at 54% 60%, rgba(255, 111, 127, 0.05), transparent 22%),
        #020607;
}

.decision-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(120, 246, 231, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 246, 231, 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.58;
}

.decision-stage canvas {
    position: relative;
    z-index: 1;
    touch-action: none;
    cursor: crosshair;
}

.decision-field-head {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    right: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    pointer-events: none;
}

.decision-field-head div,
.decision-trace-panel div {
    border: 1px solid rgba(120, 246, 231, 0.14);
    background: rgba(2, 12, 13, 0.56);
    padding: 10px 12px;
}

.decision-field-head span,
.decision-trace-panel span,
.decision-metrics dt {
    display: block;
    color: rgba(120, 246, 231, 0.62);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.decision-field-head strong,
.decision-trace-panel strong,
.decision-metrics dd {
    display: block;
    margin: 5px 0 0;
    color: var(--text);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
}

.decision-trace-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.decision-metrics h2,
.decision-log h2 {
    margin-bottom: 12px;
}

.decision-metrics dl {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.decision-metrics div {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.decision-log ol {
    display: grid;
    gap: 8px;
    max-height: 190px;
    overflow: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.decision-log li {
    border-bottom: 1px solid rgba(120, 246, 231, 0.09);
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.45;
    padding-bottom: 8px;
}

.decision-button-row {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.decision-controls button {
    min-height: 38px;
    border-color: rgba(120, 246, 231, 0.24);
    background: rgba(2, 15, 16, 0.68);
}

.decision-controls button:hover,
.decision-controls button[aria-pressed="true"] {
    border-color: rgba(168, 255, 191, 0.55);
    background: rgba(120, 246, 231, 0.11);
    color: var(--text);
}

.page-complex-mapping .lab-hero h1 {
    font-size: clamp(2.25rem, 4.6vw, 3.75rem);
    overflow-wrap: normal;
    word-break: keep-all;
}

.complex-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.complex-stage {
    min-height: 430px;
    background:
        radial-gradient(circle at 34% 42%, rgba(120, 246, 231, 0.1), transparent 28%),
        radial-gradient(circle at 68% 48%, rgba(117, 168, 255, 0.08), transparent 30%),
        radial-gradient(circle at 52% 62%, rgba(183, 240, 146, 0.05), transparent 24%),
        #020607;
}

.complex-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(120, 246, 231, 0.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 246, 231, 0.032) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.54;
}

.complex-stage canvas {
    position: relative;
    z-index: 1;
    touch-action: none;
    cursor: crosshair;
}

.complex-field-head {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    right: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    pointer-events: none;
}

.complex-field-head div,
.complex-trace-panel div {
    border: 1px solid rgba(120, 246, 231, 0.14);
    background: rgba(2, 12, 13, 0.56);
    padding: 10px 12px;
}

.complex-field-head span,
.complex-trace-panel span,
.complex-metrics dt {
    display: block;
    color: rgba(120, 246, 231, 0.62);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.complex-field-head strong,
.complex-trace-panel strong,
.complex-metrics dd {
    display: block;
    margin: 5px 0 0;
    color: var(--text);
    font-size: 0.82rem;
    letter-spacing: 0.08em;
}

.complex-trace-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.complex-metrics h2,
.complex-log h2 {
    margin-bottom: 12px;
}

.complex-metrics dl {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.complex-metrics div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.complex-log ol {
    display: grid;
    gap: 8px;
    max-height: 190px;
    overflow: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.complex-log li {
    border-bottom: 1px solid rgba(120, 246, 231, 0.09);
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.45;
    padding-bottom: 8px;
}

.complex-button-row {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.complex-controls button {
    min-height: 38px;
    border-color: rgba(120, 246, 231, 0.24);
    background: rgba(2, 15, 16, 0.68);
}

.complex-controls button:hover,
.complex-controls button[aria-pressed="true"] {
    border-color: rgba(168, 255, 191, 0.55);
    background: rgba(120, 246, 231, 0.11);
    color: var(--text);
}

.page-stereographic-projection .lab-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.75rem);
    overflow-wrap: normal;
    word-break: keep-all;
}

.stereographic-main {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.stereographic-stage {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    background:
        radial-gradient(circle at 28% 44%, rgba(120, 246, 231, 0.11), transparent 27%),
        radial-gradient(circle at 74% 46%, rgba(110, 147, 255, 0.1), transparent 30%),
        linear-gradient(135deg, rgba(120, 246, 231, 0.06), transparent 38%),
        var(--panel);
}

.stereographic-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(120, 246, 231, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 246, 231, 0.045) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(circle at center, #000 34%, transparent 82%);
}

.stereographic-stage canvas {
    position: relative;
    z-index: 1;
    width: 100%;
    min-height: 430px;
    display: block;
    touch-action: none;
}

.stereo-stage-head {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    right: 12px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    pointer-events: none;
}

.stereo-stage-head div,
.stereographic-trace-panel div {
    border: 1px solid rgba(120, 246, 231, 0.14);
    background: rgba(2, 12, 13, 0.58);
    padding: 10px 12px;
}

.stereo-stage-head span,
.stereographic-trace-panel span,
.stereographic-metrics dt,
.stereographic-note span {
    display: block;
    color: rgba(120, 246, 231, 0.62);
    font-size: 0.68rem;
}

.stereo-stage-head strong,
.stereographic-trace-panel strong,
.stereographic-metrics dd,
.stereographic-note strong {
    display: block;
    margin: 5px 0 0;
    color: var(--text);
}

.stereo-first-hint {
    position: absolute;
    z-index: 3;
    left: 16px;
    bottom: 16px;
    max-width: min(430px, calc(100% - 32px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid rgba(120, 246, 231, 0.17);
    background: rgba(2, 12, 13, 0.78);
    color: var(--muted);
    padding: 12px 14px;
}

.stereo-first-hint button {
    justify-self: end;
    width: 34px;
    min-width: 34px;
    min-height: 32px;
    padding: 0;
    border-color: rgba(120, 246, 231, 0.24);
    background: rgba(2, 15, 16, 0.72);
    color: var(--text);
}

.stereographic-trace-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.stereographic-metrics h2,
.stereographic-report h2 {
    margin-bottom: 12px;
}

.stereographic-metrics dl {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.stereographic-metrics div {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 10px;
}

.stereographic-note {
    display: grid;
    gap: 8px;
    color: var(--muted);
}

.stereographic-report p {
    color: var(--muted);
}

.stereographic-button-row {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stereographic-controls button {
    min-height: 38px;
    border-color: rgba(120, 246, 231, 0.24);
    background: rgba(2, 15, 16, 0.68);
}

.stereographic-controls button:hover,
.stereographic-controls button.is-active,
.stereographic-controls button[aria-pressed="true"] {
    border-color: rgba(168, 255, 191, 0.55);
    background: rgba(120, 246, 231, 0.11);
    color: var(--text);
}

.stereographic-controls .segmented-control {
    margin-top: 8px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stereographic-controls .stereographic-lens-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-hyperbolic-tessellation .lab-hero h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.75rem);
    max-width: 13.5em;
    overflow-wrap: normal;
    word-break: keep-all;
}

.hyperbolic-workbench {
    align-items: start;
}

.hyperbolic-main {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.hyperbolic-stage {
    position: relative;
    aspect-ratio: auto;
    min-height: 520px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 52%, rgba(115, 237, 240, 0.075), transparent 34%),
        radial-gradient(circle at 50% 52%, rgba(255, 111, 159, 0.12), transparent 74%),
        #010303;
}

.hyperbolic-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(115, 237, 240, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(115, 237, 240, 0.04) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: radial-gradient(circle at 50% 52%, transparent 0 32%, rgba(0, 0, 0, 0.75) 80%);
}

.hyperbolic-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 520px;
    touch-action: none;
}

.hyperbolic-stage-head,
.hyperbolic-trace-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.hyperbolic-stage-head {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    right: 14px;
    pointer-events: none;
}

.hyperbolic-stage-head div,
.hyperbolic-trace-panel div {
    border: 1px solid rgba(238, 249, 248, 0.14);
    background: rgba(0, 0, 0, 0.38);
    padding: 9px 10px;
}

.hyperbolic-stage-head span,
.hyperbolic-trace-panel span,
.hyperbolic-metrics dt {
    display: block;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.hyperbolic-stage-head strong,
.hyperbolic-trace-panel strong,
.hyperbolic-metrics dd {
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hyperbolic-first-hint {
    position: absolute;
    z-index: 3;
    left: 16px;
    bottom: 16px;
    width: min(390px, calc(100% - 32px));
    border: 1px solid rgba(115, 237, 240, 0.24);
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.46);
    color: var(--muted);
    padding: 12px 40px 12px 12px;
    font-size: 0.8rem;
    line-height: 1.55;
}

.hyperbolic-first-hint strong {
    display: block;
    color: var(--text);
    margin-bottom: 4px;
}

.hyperbolic-first-hint button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    min-height: 26px;
    padding: 0;
    border-radius: 999px;
}

.hyperbolic-first-hint.is-hidden {
    display: none;
}

.hyperbolic-metrics h2,
.hyperbolic-report h2 {
    margin-bottom: 12px;
}

.hyperbolic-metrics dl {
    display: grid;
    gap: 8px;
}

.hyperbolic-metrics div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid rgba(238, 249, 248, 0.09);
    padding-bottom: 7px;
}

.hyperbolic-note p,
.hyperbolic-report textarea {
    color: var(--muted);
    line-height: 1.65;
}

.hyperbolic-report textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid rgba(238, 249, 248, 0.14);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.26);
    padding: 10px;
}

.hyperbolic-button-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.hyperbolic-controls .segmented-control {
    grid-template-columns: repeat(3, 1fr);
}

.hyperbolic-controls button:hover,
.hyperbolic-controls button.is-active,
.hyperbolic-controls button[aria-pressed="true"] {
    border-color: rgba(115, 237, 240, 0.62);
    background: rgba(115, 237, 240, 0.16);
}

.hyperbolic-guide-section {
    margin-top: 18px;
}

.field-hint {
    position: absolute;
    z-index: 2;
    left: 14px;
    bottom: 12px;
    color: rgba(233, 255, 248, 0.54);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    pointer-events: none;
}

.slime-metrics h2 {
    margin-bottom: 12px;
}

.slime-metrics dl {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
}

.slime-metrics div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.slime-metrics dt,
.slime-metrics dd {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.09em;
}

.slime-metrics dt {
    color: rgba(120, 246, 231, 0.62);
}

.slime-metrics dd {
    color: var(--green);
}

.slime-observation-log h2 {
    margin-bottom: 12px;
}

.slime-observation-log ol {
    display: grid;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.slime-observation-log li {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(120, 246, 231, 0.09);
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.45;
}

.slime-observation-log strong {
    color: rgba(120, 246, 231, 0.72);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
}

.slime-observation-log textarea {
    width: 100%;
    min-height: 132px;
    resize: vertical;
    border: 1px solid rgba(120, 246, 231, 0.18);
    background: rgba(2, 8, 9, 0.62);
    color: var(--muted);
    font: 0.75rem/1.55 var(--font-mono);
    letter-spacing: 0;
    padding: 10px;
}

.formula-note summary {
    cursor: pointer;
    color: var(--cyan);
    letter-spacing: 0.08em;
}

.formula-note p,
.panel-line p,
.comment-entry p,
.comment-form p {
    color: var(--muted);
}

.related-lab-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.related-lab-link {
    display: grid;
    gap: 3px;
    border: 1px solid rgba(120, 246, 231, 0.16);
    background: rgba(2, 6, 7, 0.42);
    padding: 11px 12px;
}

.related-lab-link span {
    color: var(--green);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.related-lab-link strong {
    color: var(--text);
    font-size: 0.92rem;
    font-weight: 500;
}

.related-lab-link em {
    color: var(--muted);
    font-size: 0.78rem;
    font-style: normal;
}

.related-lab-link:hover {
    border-color: rgba(168, 255, 191, 0.45);
    background: rgba(120, 246, 231, 0.07);
}

.related-lab-link.is-current {
    border-color: rgba(255, 217, 138, 0.26);
    background: rgba(255, 217, 138, 0.035);
}

.related-lab-link.is-current span {
    color: var(--amber);
}

.lab-lower-grid {
    display: grid;
    grid-template-columns: 1fr minmax(260px, 340px) 1fr;
    gap: 18px;
    padding: 18px 0 0;
}

.ad-panel {
    position: relative;
    display: grid;
    min-height: 250px;
    align-content: center;
    gap: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 217, 138, 0.24);
    background:
        linear-gradient(180deg, rgba(255, 217, 138, 0.06), rgba(8, 12, 12, 0.9)),
        var(--panel-strong);
    color: var(--muted);
    padding: 22px;
}

.ad-panel__scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, transparent 0 13px, rgba(255, 217, 138, 0.04) 14px);
}

.ad-panel strong {
    color: var(--amber);
    font-size: 1rem;
}

.ad-panel span {
    position: relative;
    display: block;
    max-width: 26rem;
}

.observation-log-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 18px 0 80px;
}

.comment-log,
.comment-form {
    padding: 18px;
}

.comment-entry {
    margin-top: 16px;
    border-left: 1px solid var(--line-strong);
    padding-left: 14px;
}

.comment-form {
    display: grid;
    gap: 14px;
}

.comment-form input,
.comment-form textarea {
    width: 100%;
    border: 1px solid rgba(120, 246, 231, 0.18);
    background: rgba(0, 0, 0, 0.28);
    color: var(--text);
    padding: 10px;
}

.comment-form button:disabled,
.comment-form input:disabled,
.comment-form textarea:disabled {
    opacity: 0.62;
}

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    width: min(var(--max), calc(100% - 32px));
    margin: 0 auto;
    border-top: 1px solid var(--line);
    color: var(--muted);
    padding: 28px 0 42px;
}

.site-footer p {
    margin: 6px 0 0;
}

.guide-origin {
    color: var(--dim);
    font-size: 0.9rem;
}

.footer-meta {
    flex-wrap: wrap;
    justify-content: flex-end;
    color: var(--dim);
    font-size: 0.8rem;
}

.footer-meta a {
    color: inherit;
    text-decoration: none;
}

.footer-meta a:hover,
.footer-meta a:focus-visible {
    color: var(--text);
}

@keyframes orbit {
    to {
        transform: translate(-50%, -50%) rotate(405deg);
    }
}

@media (max-width: 820px) {
    .site-header {
        grid-template-columns: 1fr auto;
        gap: 12px;
    }

    .site-nav {
        display: none;
    }

    .brand-mark small {
        max-width: 58vw;
    }

    .home-hero {
        min-height: 720px;
        padding-bottom: 150px;
    }

    .guide-hero {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 46px 0 40px;
    }

    .guide-hero__signal {
        inset: 42px 0 auto 0;
        width: 100%;
        height: 330px;
        opacity: 0.42;
    }

    .guide-grid {
        grid-template-columns: 1fr;
    }

    .guide-grid > .section-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .current-observation {
        position: relative;
        right: auto;
        bottom: auto;
        width: min(100%, 360px);
        margin-top: 28px;
        padding: 18px;
        line-height: 1.52;
    }

    .current-observation strong {
        line-height: 1.35;
    }

    .current-observation span {
        margin-top: 8px;
    }

    .facility-overview {
        grid-template-columns: 1fr;
        margin-top: 18px;
    }

    .system-map__grid,
    .candidate-grid,
    .guide-route__map,
    .system-route {
        grid-template-columns: 1fr;
    }

    .system-route::before,
    .route-node::after {
        display: none;
    }

    .safety-strip {
        bottom: 22px;
    }

    .lab-hero,
    .lab-workbench,
    .lab-lower-grid,
    .observation-log-wrap,
    .site-footer {
        grid-template-columns: 1fr;
    }

    .lab-route__steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px 10px;
    }

    .lab-route__steps li {
        display: block;
        min-width: 0;
        line-height: 1.35;
    }

    .lab-route__steps li:not(:last-child)::after {
        content: none;
    }

    .lab-route__steps a,
    .lab-route__steps span {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .lab-status-panel {
        max-width: none;
    }

    .observation-stage {
        min-height: 300px;
    }

    .site-footer {
        display: grid;
    }

    .footer-meta {
        justify-content: flex-start;
    }
}

@media (max-width: 520px) {
    .home-hero,
    .guide-hero,
    .guide-grid,
    .guide-route,
    .lab-hero,
    .lab-index,
    .system-map,
    .lab-workbench,
    .slime-guide-section,
    .lab-lower-grid,
    .observation-log-wrap,
    .ad-panel,
    .site-header,
    .site-footer {
        width: min(100% - 22px, var(--max));
    }

    .language-switch a {
        padding: 7px 8px;
    }

    .hero-field {
        inset: 8% 0 18%;
    }

    .home-ambient {
        opacity: 0.48;
    }

    .hero-description {
        font-size: 0.95rem;
    }

    .hero-actions a {
        width: 100%;
    }

    .home-hero {
        min-height: 820px;
        padding-bottom: 224px;
    }

    .observation-stage {
        width: 100%;
        max-width: 100%;
        min-height: 236px;
        height: min(62vh, 340px);
        aspect-ratio: auto;
    }

    .stage-readout {
        right: 10px;
        left: 10px;
        width: auto;
    }

    .safety-strip li {
        width: 100%;
    }

    .stage-readout {
        right: 10px;
        left: 10px;
        bottom: 10px;
        gap: 8px;
    }

    .vector-controls .segmented-control,
    .harmonic-controls .segmented-control {
        grid-template-columns: 1fr;
    }

    .slime-stage {
        min-height: 320px;
    }

    .ecosystem-stage {
        min-height: 340px;
    }

    .orbit-stage {
        min-height: 340px;
    }

    .dimensional-stage {
        min-height: 340px;
    }

    .automata-stage {
        min-height: 340px;
    }

    .differential-stage {
        min-height: 340px;
    }

    .decision-stage {
        min-height: 340px;
    }

    .complex-stage {
        min-height: 340px;
    }

    .stereographic-stage,
    .stereographic-stage canvas {
        min-height: 340px;
    }

    .hyperbolic-stage,
    .hyperbolic-stage canvas {
        min-height: 340px;
    }

    .page-cellular-automata .lab-hero h1 {
        font-size: clamp(2.18rem, 8vw, 2.65rem);
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .page-complex-mapping .lab-hero h1 {
        font-size: clamp(2.05rem, 7.4vw, 2.5rem);
        overflow-wrap: normal;
        word-break: keep-all;
    }

    .page-stereographic-projection .lab-hero h1 {
        font-size: clamp(2.02rem, 7.2vw, 2.48rem);
        overflow-wrap: normal;
        word-break: keep-all;
    }

    .page-hyperbolic-tessellation .lab-hero h1 {
        font-size: clamp(2rem, 7.2vw, 2.45rem);
        overflow-wrap: normal;
        word-break: keep-all;
    }

    .ecosystem-panel-head {
        display: grid;
        gap: 5px;
    }

    .ecosystem-controls .segmented-control,
    .ecosystem-button-row,
    .ecosystem-option-grid,
    .orbit-button-row,
    .orbit-trace-panel,
    .dimensional-button-row,
    .dimensional-trace-panel,
    .automata-button-row,
    .automata-seed-grid,
    .automata-trace-panel,
    .differential-button-row,
    .differential-trace-panel,
    .differential-field-head,
    .decision-button-row,
    .decision-trace-panel,
    .decision-field-head,
    .complex-button-row,
    .complex-trace-panel,
    .complex-field-head,
    .stereographic-button-row,
    .stereographic-trace-panel,
    .stereo-stage-head,
    .hyperbolic-button-row,
    .hyperbolic-trace-panel,
    .hyperbolic-stage-head {
        grid-template-columns: 1fr 1fr;
    }

    .ecosystem-button-row button:last-child,
    .orbit-button-row button:last-child,
    .orbit-trace-panel div:last-child,
    .dimensional-button-row button:last-child,
    .dimensional-trace-panel div:last-child,
    .automata-button-row button:nth-last-child(-n+2),
    .automata-trace-panel div:last-child,
    .differential-trace-panel div:nth-last-child(-n+2),
    .differential-field-head div:last-child,
    .decision-button-row button:nth-last-child(-n+2),
    .decision-trace-panel div:nth-last-child(-n+2),
    .decision-field-head div:last-child,
    .complex-button-row button:last-child,
    .complex-trace-panel div:nth-last-child(-n+2),
    .complex-field-head div:last-child,
    .stereographic-trace-panel div:nth-last-child(-n+2),
    .stereo-stage-head div:last-child,
    .hyperbolic-trace-panel div:last-child,
    .hyperbolic-stage-head div:last-child {
        grid-column: 1 / -1;
    }

    .stereographic-controls .segmented-control,
    .stereographic-controls .stereographic-lens-row,
    .hyperbolic-controls .segmented-control {
        grid-template-columns: 1fr 1fr;
    }

    .stereo-first-hint {
        left: 12px;
        right: 12px;
        bottom: 12px;
        max-width: none;
    }

    .hyperbolic-first-hint {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
    }

    .slime-guide-section {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-top: 14px;
    }

    .slime-main .operation-panel ul {
        grid-template-columns: 1fr;
    }

    .slime-tool-grid,
    .slime-button-row,
    .slime-preset-grid {
        grid-template-columns: 1fr 1fr;
    }

    .slime-button-row:not(.slime-observation-actions) button:last-child {
        grid-column: 1 / -1;
    }

    .slime-metrics div {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .slime-guide-list div {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .control-stack {
        gap: 16px;
    }

    .control-stack label,
    .comment-form label {
        gap: 9px;
    }

    .panel-line,
    .comment-log,
    .comment-form {
        padding: 16px;
    }
}

.page-genetic-echo .lab-hero h1 {
    max-width: 13.5em;
    font-size: clamp(2.25rem, 4.6vw, 3.8rem);
    overflow-wrap: normal;
    word-break: keep-all;
}

.genetic-main {
    display: grid;
    gap: 18px;
}

.genetic-stage {
    position: relative;
    min-height: 430px;
    overflow: hidden;
    background:
        radial-gradient(circle at 28% 18%, rgba(117, 255, 230, 0.12), transparent 32%),
        radial-gradient(circle at 76% 68%, rgba(255, 111, 129, 0.1), transparent 36%),
        linear-gradient(145deg, rgba(8, 15, 18, 0.96), rgba(4, 7, 10, 0.98));
}

.genetic-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(117, 255, 230, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(117, 255, 230, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at center, #000 58%, transparent 100%);
}

.genetic-stage canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    min-height: 430px;
    touch-action: none;
}

.genetic-field-head,
.genetic-trace-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.genetic-field-head {
    position: absolute;
    z-index: 2;
    top: 14px;
    left: 14px;
    right: 14px;
    pointer-events: none;
}

.genetic-field-head div,
.genetic-trace-panel div {
    border: 1px solid rgba(117, 255, 230, 0.18);
    background: rgba(3, 8, 10, 0.68);
    padding: 8px 9px;
    min-width: 0;
}

.genetic-field-head span,
.genetic-trace-panel span,
.genetic-metrics dt {
    display: block;
    color: var(--muted);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.genetic-field-head strong,
.genetic-trace-panel strong,
.genetic-metrics dd {
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 600;
}

.genetic-metrics h2,
.genetic-log h2 {
    margin-bottom: 12px;
}

.genetic-metrics dl {
    display: grid;
    gap: 8px;
    margin: 0;
}

.genetic-metrics dl div {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px;
    border-bottom: 1px solid rgba(117, 255, 230, 0.12);
    padding-bottom: 8px;
}

.genetic-metrics dd {
    margin: 0;
    text-align: right;
}

.genetic-log ul {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.genetic-log li {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.55;
    border-bottom: 1px solid rgba(117, 255, 230, 0.1);
    padding-bottom: 8px;
}

.genetic-button-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.genetic-controls button {
    min-height: 38px;
}

@media (max-width: 760px) {
    .genetic-field-head,
    .genetic-trace-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .genetic-stage,
    .genetic-stage canvas {
        min-height: 380px;
    }
}

@media (max-width: 520px) {
    .page-genetic-echo .lab-hero h1 {
        font-size: clamp(2rem, 12vw, 2.7rem);
        max-width: 8.5em;
    }

    .genetic-field-head {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        padding: 10px;
    }

    .genetic-stage canvas {
        min-height: 340px;
    }

    .genetic-trace-panel {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* Swarm Emergence Observatory */
.page-swarm-emergence .lab-hero h1 {
    max-width: 15ch;
}

.swarm-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.swarm-stage {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: clamp(420px, 44vw, 560px);
    aspect-ratio: auto;
    background:
        radial-gradient(circle at 18% 22%, rgba(118, 255, 226, 0.10), transparent 26%),
        radial-gradient(circle at 82% 68%, rgba(255, 145, 168, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(2, 8, 14, 0.96), rgba(1, 3, 8, 0.98));
}

.swarm-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(142, 255, 235, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(142, 255, 235, 0.045) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(circle at center, black 44%, transparent 86%);
}

.swarm-stage canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.swarm-field-head,
.swarm-trace-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.swarm-field-head {
    position: relative;
    z-index: 2;
    padding: 12px;
    pointer-events: none;
}

.swarm-field-head div,
.swarm-trace-panel div {
    border: 1px solid rgba(139, 244, 222, 0.18);
    background: rgba(1, 8, 13, 0.72);
    padding: 8px;
}

.swarm-field-head span,
.swarm-trace-panel span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.swarm-field-head strong,
.swarm-trace-panel strong {
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.78rem;
}

.swarm-hud {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(139, 244, 222, 0.18);
    background: rgba(1, 8, 13, 0.68);
    color: rgba(210, 255, 246, 0.88);
    font-family: var(--mono);
    font-size: 0.67rem;
    padding: 7px 9px;
    pointer-events: none;
}

.swarm-hud--left {
    left: 12px;
    bottom: 12px;
}

.swarm-hud--right {
    right: 12px;
    top: 72px;
}

.swarm-hud--bottom {
    right: 12px;
    bottom: 12px;
}

.swarm-note-panel h2,
.swarm-report-panel h2 {
    margin: 0 0 10px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.swarm-note-panel p {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.swarm-report-panel textarea {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    border: 1px solid rgba(139, 244, 222, 0.2);
    background: rgba(1, 5, 9, 0.72);
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.5;
    padding: 10px;
}

.swarm-button-row,
.swarm-preset-row,
.swarm-lens-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.swarm-controls button.is-active,
.swarm-controls .segmented-control button.is-active {
    border-color: rgba(139, 244, 222, 0.52);
    color: var(--text);
    box-shadow: 0 0 14px rgba(60, 214, 190, 0.16);
}

.swarm-guide-section {
    margin-top: 22px;
}

@media (max-width: 760px) {
    .page-swarm-emergence .lab-hero h1 {
        max-width: 11ch;
    }

    .swarm-stage {
        height: clamp(390px, 112vw, 460px);
    }

    .swarm-field-head,
    .swarm-trace-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .swarm-hud {
        font-size: 0.58rem;
        padding: 6px 7px;
    }

    .swarm-hud--right {
        top: auto;
        right: 8px;
        bottom: 46px;
    }

    .swarm-hud--left {
        left: 8px;
        bottom: 8px;
    }

    .swarm-hud--bottom {
        display: none;
    }

    .swarm-button-row,
    .swarm-preset-row,
    .swarm-lens-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Ink Diffusion Chamber */
.page-ink-diffusion .lab-hero h1 {
    max-width: 16ch;
}

.ink-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.ink-stage {
    position: relative;
    min-height: 0;
    height: clamp(430px, 45vw, 580px);
    aspect-ratio: auto;
    background:
        linear-gradient(180deg, rgba(5, 22, 32, 0.94), rgba(1, 6, 10, 0.98)),
        repeating-linear-gradient(90deg, rgba(139, 244, 222, 0.045) 0 1px, transparent 1px 42px);
}

.ink-stage::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 1;
    border: 1px solid rgba(139, 244, 222, 0.16);
    box-shadow: inset 0 0 38px rgba(91, 221, 214, 0.08);
    pointer-events: none;
}

.ink-stage canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.ink-stage.is-art-mode {
    background: #f2f6f3;
    box-shadow: 0 0 0 1px rgba(155, 217, 211, 0.24), 0 20px 80px rgba(187, 218, 213, 0.12);
}

.ink-stage.is-art-mode::before {
    border-color: rgba(20, 84, 88, 0.22);
    background:
        linear-gradient(90deg, rgba(18, 88, 92, 0.08) 1px, transparent 1px),
        linear-gradient(rgba(18, 88, 92, 0.08) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0.54;
}

.ink-field-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.ink-field-head div {
    border: 1px solid rgba(139, 244, 222, 0.18);
    background: rgba(1, 8, 13, 0.72);
    padding: 10px 11px;
}

.ink-field-head span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
}

.ink-field-head strong {
    color: var(--text);
    font-family: var(--mono);
    font-size: 0.82rem;
}

.ink-hud {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(139, 244, 222, 0.2);
    background: rgba(1, 8, 13, 0.68);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.62rem;
    letter-spacing: 0.08em;
    padding: 7px 9px;
    pointer-events: none;
}

.ink-hud--left {
    left: 14px;
    bottom: 14px;
}

.ink-hud--right {
    right: 14px;
    bottom: 14px;
}

.ink-report-panel h2 {
    margin: 0 0 10px;
    font-size: 0.78rem;
}

.ink-report-panel textarea {
    width: 100%;
    min-height: 168px;
    resize: vertical;
    border: 1px solid rgba(139, 244, 222, 0.2);
    background: rgba(1, 8, 13, 0.74);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.6;
    padding: 11px;
}

.ink-button-row,
.ink-mode-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ink-controls button.is-active,
.ink-controls .segmented-control button.is-active {
    border-color: rgba(139, 244, 222, 0.52);
    color: var(--text);
    box-shadow: 0 0 18px rgba(91, 221, 214, 0.14);
}

.ink-guide-section {
    margin-top: 22px;
}

@media (max-width: 760px) {
    .page-ink-diffusion .lab-hero h1 {
        max-width: 10ch;
    }

    .ink-stage {
        height: clamp(390px, 112vw, 470px);
    }

    .ink-field-head {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 10px;
    }

    .ink-hud {
        font-size: 0.56rem;
        padding: 6px 7px;
    }

    .ink-hud--right {
        display: none;
    }
}