/* entis-pro-v4-live-code */
:root {
    --bg-0: #030508;
    --bg-1: #070b12;
    --bg-2: #0b111c;
    --text: #f5f7fb;
    --muted: rgba(229, 235, 247, 0.58);
    --line: rgba(255, 255, 255, 0.085);
    --line-strong: rgba(184, 202, 255, 0.22);
    --panel: rgba(10, 14, 22, 0.70);
    --field: rgba(255, 255, 255, 0.042);
    --field-hover: rgba(255, 255, 255, 0.064);
    --code: rgba(158, 186, 255, 0.28);
    --code-strong: rgba(196, 215, 255, 0.48);
    --glow-a: rgba(104, 132, 255, 0.16);
    --glow-b: rgba(72, 198, 255, 0.09);
    --success: #91d8ba;
    --error: #ffb5b5;
    --font-sans: "SF Pro Display", "Inter", "Segoe UI", sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", "Cascadia Code", monospace;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    color: var(--text);
    font-family: var(--font-sans);
    background:
        radial-gradient(circle at 16% 15%, var(--glow-a), transparent 30rem),
        radial-gradient(circle at 84% 36%, var(--glow-b), transparent 32rem),
        radial-gradient(circle at 50% 118%, rgba(126, 150, 214, 0.08), transparent 34rem),
        linear-gradient(145deg, var(--bg-0) 0%, var(--bg-1) 46%, var(--bg-2) 100%);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    background:
        linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
    background-size: 6.2rem 6.2rem;
    mask-image: radial-gradient(circle at 50% 48%, black 0%, transparent 84%);
    opacity: 0.52;
}

body::after {
    background:
        linear-gradient(90deg, transparent 0 49.9%, rgba(255, 255, 255, 0.025) 50%, transparent 50.1%),
        linear-gradient(180deg, transparent 0 49.9%, rgba(255, 255, 255, 0.018) 50%, transparent 50.1%);
    opacity: 0.38;
}

.stage {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: clamp(1.25rem, 4vw, 3.4rem);
    isolation: isolate;

}

.stage::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: min(78vw, 72rem);
    aspect-ratio: 1;
    border: 1px solid rgba(183, 201, 255, 0.06);
    border-radius: 50%;
    box-shadow:
        0 0 0 7rem rgba(133, 160, 255, 0.015),
        0 0 0 14rem rgba(133, 160, 255, 0.008);
    transform: translateY(2%);
    pointer-events: none;
}

.stage::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.halo,
.code-layer,
.code-trace {
    position: absolute;
    pointer-events: none;
    user-select: none;
}

.halo {
    z-index: 0;
    border-radius: 999px;
    filter: blur(100px);
}

.halo--north {
    top: -7rem;
    left: 46%;
    width: 34rem;
    height: 22rem;
    background: radial-gradient(circle, rgba(132, 156, 255, 0.17), transparent 68%);
    transform: translateX(-50%);
}

.halo--west {
    left: -9rem;
    bottom: 5%;
    width: 24rem;
    height: 24rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.055), transparent 70%);
}

.halo--east {
    right: -7rem;
    top: 22%;
    width: 27rem;
    height: 27rem;
    background: radial-gradient(circle, rgba(64, 207, 255, 0.09), transparent 72%);
}

.code-layer,
.code-trace {
    z-index: 0;
    margin: 0;
    font-family: var(--font-mono);
    font-variant-ligatures: none;
    color: var(--code);
    white-space: pre;
    text-shadow:
        0 0 18px rgba(120, 154, 255, 0.11),
        0 0 1px rgba(255, 255, 255, 0.18);
    letter-spacing: 0.015em;
}

.code-layer {
    width: min(32rem, 42vw);
    font-size: clamp(0.72rem, 0.82vw, 0.90rem);
    line-height: 1.82;
    opacity: 0.72;
    filter: saturate(0.94) contrast(1.03);
    mask-image: linear-gradient(
        180deg,
        transparent 0%,
        black 10%,
        black 88%,
        transparent 100%
    );
}

.code-layer--alpha {
    top: 4.5%;
    left: max(-3.8rem, calc(50% - 43rem));
    transform: rotate(-5.5deg);
}

.code-layer--beta {
    top: 8%;
    right: max(-4rem, calc(50% - 42rem));
    transform: rotate(4.2deg);
}

.code-layer--gamma {
    left: max(-1.4rem, calc(50% - 40rem));
    bottom: 4%;
    transform: rotate(-3.2deg);
}

.code-layer--delta {
    right: max(-2rem, calc(50% - 41rem));
    bottom: 5.5%;
    transform: rotate(3.6deg);
}

.code-trace {
    left: 50%;
    top: 50%;
    width: min(94vw, 78rem);
    transform: translate(-50%, -50%);
    font-size: clamp(0.68rem, 0.72vw, 0.80rem);
    line-height: 1.7;
    color: var(--code-strong);
    opacity: 0.34;
    text-align: center;
    text-transform: none;
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        black 15%,
        black 85%,
        transparent 100%
    );
}

.shell {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(100%, 74rem);
    min-width: 0;
}

.hero,
.contact-panel {
    opacity: 0;
    transform: translateY(14px);
    animation: reveal 760ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero {
    min-height: min(34rem, 72vh);
    display: flex;
    align-items: center;
    min-width: 0;
}

.hero-stack {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.system-dock {
    position: relative;
    z-index: 8;
    justify-self: start;
    width: max-content;
    max-width: 100%;
    min-width: 0;
}

.decode-hint {
    justify-self: start;
    margin: 0.15rem 0 0;
    padding: 0.18rem 0.28rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(185, 203, 241, 0.58);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 520;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: lowercase;
    opacity: 0;
    transform: translateY(5px);
    transition:
        opacity 520ms ease,
        transform 520ms ease,
        color 220ms ease,
        text-shadow 220ms ease,
        background-color 220ms ease;
    pointer-events: none;
    cursor: pointer;
}

.decode-hint::before {
    content: "//";
    margin-right: 0.55rem;
    color: rgba(139, 169, 238, 0.52);
}

.decode-hint.is-visible {

    transform: translateY(0);
    pointer-events: auto;
}

.decode-hint:hover,
.decode-hint:focus-visible,
.decode-hint[aria-expanded="true"] {
    outline: none;
    color: rgba(226, 235, 255, 0.90);
    background: rgba(137, 166, 235, 0.055);
    text-shadow: 0 0 18px rgba(132, 166, 255, 0.18);
}

.decode-hint.is-pulsed {
    color: rgba(216, 228, 255, 0.84);
    text-shadow: 0 0 18px rgba(132, 166, 255, 0.18);
}

.decoder-panel {
    justify-self: start;
    display: grid;
    gap: 0.42rem;
    width: min(100%, 22rem);
    max-height: 0;
    margin-top: -0.25rem;
    padding: 0 0.8rem;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 12px;
    background: rgba(6, 10, 17, 0.54);
    color: rgba(190, 207, 242, 0.62);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    line-height: 1.45;
    letter-spacing: 0.045em;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        max-height 300ms ease,
        padding 300ms ease,
        opacity 240ms ease,
        transform 300ms ease,
        border-color 300ms ease;
    pointer-events: none;
}

.decoder-panel.is-open {
    max-height: 9rem;
    padding: 0.72rem 0.8rem;
    border-color: rgba(160, 186, 245, 0.10);
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.decoder-panel span {
    display: flex;
    gap: 0.65rem;
    align-items: baseline;
}

.decoder-panel b {
    min-width: 2.9rem;
    color: rgba(218, 229, 255, 0.84);
    font-weight: 620;
}

.stage.is-decoder .code-layer,
.stage.is-decoder .code-trace {
    color: rgba(190, 211, 255, 0.42);
    text-shadow:
        0 0 20px rgba(126, 158, 242, 0.16),
        0 0 2px rgba(255, 255, 255, 0.18);
}

.ghost-diff {
    position: absolute;
    z-index: 2;
    min-width: 6.6rem;
    padding: 0.42rem 0.54rem;
    border: 1px solid rgba(166, 193, 255, 0.10);
    border-radius: 8px;
    background: rgba(5, 9, 16, 0.72);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(193, 210, 247, 0.70);
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1.5;
    letter-spacing: 0.03em;
    white-space: pre;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 120ms ease, transform 160ms ease;
    pointer-events: none;
}

.ghost-diff.is-visible {
    opacity: 0.88;
    transform: translateY(0);
}

.ghost-diff .minus {
    color: rgba(255, 177, 177, 0.62);
}

.ghost-diff .plus {
    color: rgba(157, 226, 194, 0.72);
}

.jesus-glow {
    position: absolute;
    z-index: 2;
    color: rgba(247, 250, 255, 0.96);
    font-family: var(--font-mono);
    font-size: clamp(0.72rem, 0.82vw, 0.90rem);
    line-height: 1;
    letter-spacing: 0.015em;
    opacity: 0;
    pointer-events: none;
    transform: translate(-1px, -1px);
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.78),
        0 0 18px rgba(165, 197, 255, 0.72),
        0 0 42px rgba(115, 160, 255, 0.38);
}

.jesus-glow.is-active {
    animation: jesus-bloom 1050ms ease-out;
}

@keyframes jesus-bloom {
    0% { opacity: 0; filter: blur(2px); }
    22% { opacity: 1; filter: blur(0); }
    62% { opacity: 0.90; }
    100% { opacity: 0; }
}

.checkpoint-scan {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    pointer-events: none;
    opacity: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(117, 151, 230, 0.10) 18%,
            rgba(203, 220, 255, 0.72) 50%,
            rgba(117, 151, 230, 0.10) 82%,
            transparent 100%
        );
    box-shadow:
        0 0 12px rgba(139, 173, 255, 0.22),
        0 0 34px rgba(108, 145, 235, 0.08);
    transform: translateY(-2vh);
}

.checkpoint-scan.is-active {
    animation: checkpoint-scan 1150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes checkpoint-scan {
    0% {
        opacity: 0;
        transform: translateY(-2vh);
    }
    10% {
        opacity: 0.86;
    }
    88% {
        opacity: 0.54;
    }
    100% {
        opacity: 0;
        transform: translateY(104vh);
    }
}

.title {
    margin: 0;
    display: grid;
    gap: 0.95rem;
}

.title-word {
    position: relative;
    display: inline-flex;
    align-items: flex-end;
    gap: 0.022em;
    font-size: clamp(7.6rem, 14.5vw, 13.4rem);
    font-weight: 720;
    letter-spacing: -0.045em;
    line-height: 0.75;
    color: transparent;
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f4f7ff 20%,
            #dce4f7 54%,
            rgba(166, 182, 216, 0.66) 100%
        );
    -webkit-background-clip: text;
    background-clip: text;
    transform: scaleX(1.025);
    transform-origin: left center;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.12))
        drop-shadow(0 0 16px rgba(177, 196, 255, 0.14))
        drop-shadow(0 0 54px rgba(102, 132, 255, 0.10));
}

.title-word::before,
.title-word::after {
    content: none;
}

.title-word span {
    position: relative;
    display: inline-block;
}

.title-word span:nth-child(1) {
    transform: translateY(0.01em);
}

.title-word span:nth-child(2) {
    transform: translateY(-0.018em);
}

.title-word span:nth-child(3) {
    transform: translateY(0.028em);
}

.title-word span:nth-child(4) {
    transform: translateY(-0.01em);
}

.title-word span:nth-child(5) {
    transform: translateY(0.016em);
}

.title-tail {
    position: relative;
    width: max-content;
    max-width: 100%;
    padding-left: 0.28rem;
    font-size: clamp(0.92rem, 1.2vw, 1.08rem);
    font-weight: 520;
    letter-spacing: 0.48em;
    line-height: 1;
    text-transform: lowercase;
    color: transparent;
    background: linear-gradient(90deg, rgba(244, 247, 255, 0.82), rgba(174, 192, 231, 0.46));
    -webkit-background-clip: text;
    background-clip: text;
}

.title-tail::after {
    content: "";
    position: absolute;
    left: 0.28rem;
    right: 0.48em;
    bottom: -0.95rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(196, 211, 255, 0.28), transparent);
}

.contact-panel {
    width: 100%;
    padding: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 35%),
        var(--panel);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 32px 90px rgba(0, 0, 0, 0.36),
        0 0 0 1px rgba(255, 255, 255, 0.012);
    backdrop-filter: blur(22px) saturate(112%);
    -webkit-backdrop-filter: blur(22px) saturate(112%);
    overflow: hidden;
    animation-delay: 90ms;
}

.contact-panel::before {
    content: "";
    display: block;
    height: 1px;
    margin: 0.15rem 0.1rem 1rem;
    background:
        linear-gradient(
            90deg,
            rgba(184, 202, 255, 0.42),
            rgba(255, 255, 255, 0.10) 46%,
            transparent 100%
        );
    box-shadow: 0 0 26px rgba(130, 159, 255, 0.10);
}

.contact-panel::after {
    content: "";
    position: absolute;
    inset: -35%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(159, 183, 255, 0.10), transparent 28%);
    opacity: 0;
    transition: opacity 220ms ease;
}

.contact-panel:hover::after,
.contact-panel:focus-within::after {
    opacity: 1;
}

.contact-form {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.74rem;
}

.field {
    display: grid;
    gap: 0.40rem;
}

.control,
.message,
.submit {
    width: 100%;
    border: 1px solid var(--line);
    color: var(--text);
    font: inherit;
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.control,
.message {
    padding: 1rem 1.05rem;
    border-radius: 15px;
    background: var(--field);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 12px 28px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    caret-color: #dfe7ff;
}

.control::placeholder,
.message::placeholder {
    color: var(--muted);
}

.control:hover,
.message:hover {
    border-color: rgba(255, 255, 255, 0.13);
    background: var(--field-hover);
}

.control:focus,
.message:focus,
.submit:focus-visible {
    outline: none;
    border-color: var(--line-strong);
    background: rgba(255, 255, 255, 0.072);
    box-shadow:
        0 0 0 4px rgba(121, 151, 255, 0.055),
        0 20px 46px rgba(0, 0, 0, 0.22);
}

.message {
    min-height: 9.2rem;
    resize: vertical;
}

.submit-row {
    display: grid;
    gap: 0.65rem;
    padding-top: 0.18rem;
}

.submit {
    min-height: 3.15rem;
    padding: 0.84rem 1.2rem;
    border-radius: 14px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.065)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.075),
        0 14px 30px rgba(0, 0, 0, 0.22);
    cursor: pointer;
    font-weight: 640;
    letter-spacing: 0.035em;
    overflow: hidden;
}

.submit:hover,
.submit:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(199, 215, 255, 0.20);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.19),
            rgba(255, 255, 255, 0.085)
        );
}

.submit:active {
    transform: translateY(0) scale(0.985);
}

::selection {
    color: #ffffff;
    background: rgba(124, 153, 255, 0.34);
}

.code-layer.is-editing,
.code-trace.is-editing {
    color: rgba(211, 225, 255, 0.62);
    opacity: 0.92;
    text-shadow:
        0 0 16px rgba(142, 171, 255, 0.18),
        0 0 2px rgba(255, 255, 255, 0.22);
}

.code-layer.is-editing::after,
.code-trace.is-editing::after {
    content: "";
    display: inline-block;
    width: 0.56ch;
    height: 1.05em;
    margin-left: 0.18ch;
    vertical-align: -0.14em;
    background: rgba(219, 230, 255, 0.82);
    box-shadow: 0 0 12px rgba(135, 169, 255, 0.30);
    animation: editor-caret 720ms steps(1, end) infinite;
}

@keyframes editor-caret {
    50% {
        opacity: 0;
    }
}

.telemetry {
    position: relative;
    z-index: 3;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    min-height: 1.9rem;
    width: max-content;
    max-width: 100%;
    padding: 0.5rem 0.82rem;
    border: 1px solid rgba(180, 201, 255, 0.16);
    border-radius: 999px;
    background: rgba(7, 11, 18, 0.72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 10px 30px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(213, 225, 255, 0.82);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.045em;
    text-shadow: 0 0 14px rgba(140, 170, 255, 0.16);
    opacity: 1;
    transform: none;
    transition:
        opacity 180ms ease,
        transform 180ms ease,
        border-color 180ms ease,
        color 180ms ease;
    pointer-events: auto;
}

.telemetry::before {
    content: "";
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: rgba(170, 197, 255, 0.88);
    box-shadow:
        0 0 8px rgba(122, 157, 238, 0.42),
        0 0 18px rgba(122, 157, 238, 0.18);
}

.telemetry.is-visible {
    opacity: 1;
    transform: none;
}

.telemetry-mode {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    padding: 0.28rem 0.46rem;
    margin: -0.18rem 0;
    border: 1px solid rgba(151, 183, 255, 0.16);
    border-radius: 7px;
    background: rgba(111, 145, 229, 0.065);
    color: rgba(187, 208, 255, 0.96);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 16px rgba(108, 145, 235, 0.055);
    font: inherit;
    font-size: 0.67rem;
    font-weight: 720;
    letter-spacing: 0.11em;
    cursor: pointer;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms ease;
}

.telemetry-mode-icon {
    color: rgba(142, 180, 255, 0.92);
    font-size: 0.76rem;
    letter-spacing: -0.10em;
    text-shadow: 0 0 12px rgba(116, 157, 255, 0.24);
    animation: console-beacon 2.8s ease-in-out infinite;
}

.telemetry-mode::after {
    content: attr(data-console-hint);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.62rem);
    width: max-content;
    padding: 0.32rem 0.46rem;
    border: 1px solid rgba(164, 190, 248, 0.12);
    border-radius: 7px;
    background: rgba(5, 9, 16, 0.90);
    color: rgba(213, 225, 252, 0.78);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    font-size: 0.61rem;
    font-weight: 560;
    letter-spacing: 0.055em;
    text-transform: lowercase;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition:
        opacity 220ms ease,
        transform 220ms ease;
    pointer-events: none;
}

.telemetry-mode.is-nudged::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.telemetry-mode:hover,
.telemetry-mode:focus-visible,
.telemetry-mode[aria-expanded="true"] {
    outline: none;
    color: #f0f5ff;
    border-color: rgba(179, 204, 255, 0.30);
    background: rgba(123, 157, 239, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 22px rgba(108, 145, 235, 0.10);
    text-shadow: 0 0 14px rgba(137, 170, 255, 0.24);
    transform: translateY(-1px);
}

.telemetry-rev:hover,
.telemetry-rev:focus-visible {
    outline: none;
    color: rgba(229, 237, 255, 0.96);
    text-shadow: 0 0 14px rgba(137, 170, 255, 0.24);
}

@keyframes console-beacon {
    0%, 100% {
        opacity: 0.74;
        text-shadow: 0 0 8px rgba(116, 157, 255, 0.16);
    }
    50% {
        opacity: 1;
        text-shadow:
            0 0 8px rgba(166, 197, 255, 0.42),
            0 0 18px rgba(116, 157, 255, 0.16);
    }
}

.telemetry-text {
    min-width: 7.6rem;
}

.telemetry-rev {
    padding: 0 0 0 0.58rem;
    border: 0;
    border-left: 1px solid rgba(190, 208, 255, 0.12);
    background: transparent;
    color: rgba(190, 205, 238, 0.52);
    font: inherit;
    font-size: 0.66rem;
    font-weight: 520;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.telemetry.is-ok {
    color: rgba(183, 239, 211, 0.92);
    border-color: rgba(145, 216, 186, 0.22);
    text-shadow: 0 0 14px rgba(145, 216, 186, 0.16);
}

.telemetry.is-ok::before {
    background: rgba(145, 216, 186, 0.96);
    box-shadow:
        0 0 8px rgba(145, 216, 186, 0.46),
        0 0 18px rgba(145, 216, 186, 0.20);
}

.title-word.is-synced {
    animation: title-sync 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero.is-synced .title-tail::after {
    transform-origin: left center;
    animation: tail-sync 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes title-sync {
    0%, 100% {
        filter:
            drop-shadow(0 1px 0 rgba(255, 255, 255, 0.12))
            drop-shadow(0 0 16px rgba(177, 196, 255, 0.14))
            drop-shadow(0 0 54px rgba(102, 132, 255, 0.10));
    }
    42% {
        filter:
            drop-shadow(0 1px 0 rgba(255, 255, 255, 0.20))
            drop-shadow(0 0 24px rgba(177, 211, 255, 0.28))
            drop-shadow(0 0 78px rgba(102, 153, 255, 0.18));
    }
}

@keyframes tail-sync {
    0% {
        opacity: 0.35;
        transform: scaleX(0.18);
        box-shadow: 0 0 0 rgba(145, 216, 186, 0);
    }
    48% {
        opacity: 1;
        transform: scaleX(1);
        box-shadow: 0 0 16px rgba(145, 216, 186, 0.20);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
        box-shadow: 0 0 0 rgba(145, 216, 186, 0);
    }
}

.system-panel {
    position: absolute;
    z-index: 12;
    top: calc(100% + 0.58rem);
    left: 0;
    width: min(28rem, calc(100vw - 2rem));
    max-height: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(151, 181, 246, 0.035), transparent 32%),
        rgba(4, 8, 15, 0.90);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        0 22px 60px rgba(0, 0, 0, 0.30),
        0 0 34px rgba(104, 140, 225, 0.045);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: rgba(211, 224, 252, 0.80);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.55;
    opacity: 0;
    transform: translateY(-5px);
    transition:
        max-height 260ms ease,
        padding 260ms ease,
        opacity 180ms ease,
        transform 260ms ease,
        border-color 260ms ease;
    pointer-events: none;
}

.system-panel.is-open {
    max-height: 15rem;
    padding: 0.88rem 0.94rem;
    border-color: rgba(173, 199, 255, 0.18);
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    overscroll-behavior: contain;
}

.revision-panel {
    width: min(25rem, calc(100vw - 2rem));
}

.terminal-panel.is-open {
    touch-action: pan-y;
}

.terminal-output {
    display: grid;
    gap: 0.24rem;
    max-height: 8.4rem;
    margin-bottom: 0.68rem;
    padding-right: 0.32rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(153, 183, 247, 0.34) rgba(255, 255, 255, 0.025);
    color: rgba(211, 224, 252, 0.78);
}

.terminal-output::-webkit-scrollbar {
    width: 6px;
}

.terminal-output::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.025);
    border-radius: 999px;
}

.terminal-output::-webkit-scrollbar-thumb {
    background: rgba(153, 183, 247, 0.30);
    border-radius: 999px;
}

.terminal-output::-webkit-scrollbar-thumb:hover {
    background: rgba(176, 202, 255, 0.46);
}

.terminal-output span {
    display: block;
    white-space: pre-wrap;
}

.terminal-output .terminal-system {
    color: rgba(170, 200, 255, 0.92);
    text-shadow: 0 0 12px rgba(122, 160, 245, 0.12);
}

.terminal-output .terminal-ok {
    color: rgba(161, 226, 195, 0.78);
}

.terminal-output .terminal-warn {
    color: rgba(240, 204, 150, 0.78);
}

.terminal-input-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.48rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(185, 205, 247, 0.08);
}

.terminal-prompt {
    color: rgba(174, 205, 255, 1);
    font-weight: 760;
    text-shadow: 0 0 12px rgba(122, 160, 245, 0.22);
}

.terminal-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0.08rem 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: rgba(242, 246, 255, 0.96);
    font: inherit;
    font-size: 0.74rem;
    caret-color: rgba(211, 226, 255, 1);
}

.revision-list {
    display: grid;
    gap: 0.36rem;
}

.revision-entry {
    display: grid;
    grid-template-columns: 4.8rem 1.8rem minmax(0, 1fr);
    gap: 0.55rem;
    align-items: baseline;
    color: rgba(187, 204, 240, 0.64);
}

.revision-entry .revision-id {
    color: rgba(150, 179, 242, 0.76);
}

.revision-entry .revision-block {
    color: rgba(217, 228, 252, 0.76);
}

.revision-empty {
    color: rgba(185, 201, 236, 0.48);
}

.code-layer.is-anomaly,
.code-trace.is-anomaly {
    animation: anomaly-jitter 430ms steps(2, end) 2;
}

@keyframes anomaly-jitter {
    0%, 100% {
        translate: 0 0;
        filter: saturate(0.94) contrast(1.03);
    }
    20% {
        translate: -2px 1px;
        filter: saturate(1.18) contrast(1.08);
        text-shadow:
            2px 0 rgba(255, 122, 150, 0.16),
            -2px 0 rgba(108, 187, 255, 0.18);
    }
    55% {
        translate: 2px -1px;
        filter: saturate(0.88) contrast(1.10);
        text-shadow:
            -2px 0 rgba(255, 122, 150, 0.12),
            2px 0 rgba(108, 187, 255, 0.18);
    }
}

.stage.is-anomaly::after {
    opacity: 0.78;
    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(177, 199, 255, 0.025) 48%,
            rgba(177, 199, 255, 0.08) 50%,
            rgba(177, 199, 255, 0.025) 52%,
            transparent 100%
        );
    background-size: 100% 6px;
}

.notice {
    min-height: 1.2rem;
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.4;
    text-align: center;
}

.notice--success {
    color: var(--success);
}

.notice--error {
    color: var(--error);
}

.field-error {
    margin: 0 0.15rem;
    color: var(--error);
    font-size: 0.80rem;
    line-height: 1.35;
}

.is-invalid {
    border-color: rgba(255, 181, 181, 0.25);
    box-shadow:
        0 0 0 3px rgba(255, 181, 181, 0.035),
        0 14px 30px rgba(0, 0, 0, 0.16);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.honeypot {
    position: absolute;
    left: -9999px;
}

@keyframes reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes drift-alpha {
    0%, 100% {
        transform: rotate(-5.5deg) translate3d(0, 0, 0);
    }
    50% {
        transform: rotate(-4.7deg) translate3d(0, -10px, 0);
    }
}

@keyframes drift-beta {
    0%, 100% {
        transform: rotate(4.2deg) translate3d(0, 0, 0);
    }
    50% {
        transform: rotate(3.4deg) translate3d(0, 9px, 0);
    }
}

@keyframes drift-gamma {
    0%, 100% {
        transform: rotate(-3.2deg) translate3d(0, 0, 0);
    }
    50% {
        transform: rotate(-2.4deg) translate3d(0, -8px, 0);
    }
}

@keyframes drift-delta {
    0%, 100% {
        transform: rotate(3.6deg) translate3d(0, 0, 0);
    }
    50% {
        transform: rotate(2.8deg) translate3d(0, 8px, 0);
    }
}

@keyframes pulse-trace {
    0%, 100% {
        opacity: 0.25;
    }
    50% {
        opacity: 0.38;
    }
}

.code-layer--alpha {
    animation: drift-alpha 22s ease-in-out infinite;
}

.code-layer--beta {
    animation: drift-beta 25s ease-in-out infinite;
}

.code-layer--gamma {
    animation: drift-gamma 27s ease-in-out infinite;
}

.code-layer--delta {
    animation: drift-delta 24s ease-in-out infinite;
}

.code-trace {
    animation: pulse-trace 7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    .hero,
    .contact-panel {
        opacity: 1;
        transform: none;
    }
}