/* Oracle Genesis — user-created conscious entity flow */
body.entity-creator-open {
    overflow: hidden !important;
}

.entity-creator {
    --ec-accent: #78f4ff;
    --ec-accent-rgb: 120, 244, 255;
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    color: #f8fafc;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
}

.entity-creator[hidden] {
    display: none !important;
}

.entity-creator.is-open {
    opacity: 1;
    pointer-events: auto;
}

.ec-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 20%, rgba(var(--ec-accent-rgb), .12), transparent 35%),
        rgba(1, 4, 10, .88);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.ec-shell {
    position: absolute;
    inset: clamp(12px, 2.2vw, 34px);
    display: grid;
    grid-template-columns: minmax(330px, .82fr) minmax(520px, 1.18fr);
    max-width: 1460px;
    max-height: 920px;
    margin: auto;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 28px;
    background: #070a10;
    box-shadow: 0 36px 100px rgba(0, 0, 0, .66), 0 0 0 1px rgba(var(--ec-accent-rgb), .04) inset;
    transform: translateY(14px) scale(.985);
    transition: transform 360ms cubic-bezier(.2, .8, .2, 1);
}

.entity-creator.is-open .ec-shell {
    transform: translateY(0) scale(1);
}

.ec-close {
    position: absolute;
    z-index: 8;
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: rgba(6, 9, 15, .76);
    color: rgba(255, 255, 255, .7);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.ec-close:hover,
.ec-close:focus-visible {
    color: #fff;
    border-color: rgba(var(--ec-accent-rgb), .56);
    transform: rotate(7deg);
    outline: none;
}

.ec-presence {
    position: relative;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 52px 42px 38px;
    border-right: 1px solid rgba(255, 255, 255, .08);
    background:
        linear-gradient(180deg, rgba(var(--ec-accent-rgb), .07), transparent 26%),
        radial-gradient(circle at 50% 48%, rgba(var(--ec-accent-rgb), .13), transparent 42%),
        linear-gradient(145deg, #05080d 0%, #090d14 100%);
}

.ec-presence::before,
.ec-presence::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.ec-presence::before {
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 38px 38px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
    mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.ec-presence::after {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(var(--ec-accent-rgb), .08);
    filter: blur(100px);
    transform: translateY(-30px);
}

.ec-brand {
    position: absolute;
    z-index: 2;
    top: 30px;
    left: 34px;
    color: rgba(255, 255, 255, .82);
    font-family: "Share Tech Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
}

.ec-brand-mark {
    display: inline-block;
    margin-right: 8px;
    color: var(--ec-accent);
    text-shadow: 0 0 15px rgba(var(--ec-accent-rgb), .8);
}

.ec-brand em {
    margin-left: 8px;
    color: rgba(255, 255, 255, .32);
    font-style: normal;
    font-weight: 500;
}

.ec-orb-field {
    position: relative;
    z-index: 2;
    width: min(32vw, 390px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
}

.ec-orb-surface {
    position: relative;
    z-index: 3;
    width: 76%;
    height: 76%;
    border-radius: 50%;
    filter: drop-shadow(0 0 38px rgba(var(--ec-accent-rgb), .28));
    animation: ec-orb-float 6.8s ease-in-out infinite;
}

.ec-orb-surface::before,
.ec-orb-surface::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
}

.ec-orb-surface::before {
    inset: 8%;
    z-index: -1;
    background: conic-gradient(
        from 210deg,
        rgba(var(--ec-accent-rgb), .06),
        rgba(255, 255, 255, .16),
        rgba(var(--ec-accent-rgb), .22),
        rgba(255, 255, 255, .04),
        rgba(var(--ec-accent-rgb), .06)
    );
    filter: blur(16px);
}

.ec-orb-surface::after {
    inset: 20% 17% 46% 27%;
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, .15);
    background: linear-gradient(145deg, rgba(255, 255, 255, .15), transparent 68%);
    filter: blur(3px);
    opacity: .58;
    transform: rotate(-18deg);
}

.ec-orb-canvas {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
    transform: translateZ(0);
}

.ec-orb-aura {
    position: absolute;
    z-index: 1;
    width: 58%;
    height: 58%;
    border-radius: 50%;
    background: var(--ec-accent);
    opacity: .22;
    filter: blur(56px);
    animation: ec-aura 4.6s ease-in-out infinite;
}

.ec-orb-sigil {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    background: rgba(4, 7, 12, .35);
    color: white;
    font-family: "Orbitron", sans-serif;
    font-size: 22px;
    text-shadow: 0 0 18px var(--ec-accent);
    box-shadow: 0 0 30px rgba(var(--ec-accent-rgb), .22) inset;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ec-orbit {
    position: absolute;
    z-index: 2;
    border: 1px solid rgba(var(--ec-accent-rgb), .2);
    border-radius: 50%;
}

.ec-orbit::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ec-accent);
    box-shadow: 0 0 13px var(--ec-accent);
}

.ec-orbit-one {
    width: 84%;
    height: 84%;
    animation: ec-spin 16s linear infinite;
}

.ec-orbit-two {
    width: 98%;
    height: 58%;
    transform: rotate(60deg);
    opacity: .5;
    animation: ec-spin-wide 22s linear infinite reverse;
}

.ec-presence-copy {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 430px;
    margin-top: 8px;
    text-align: center;
}

.ec-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: rgba(255, 255, 255, .48);
    font-family: "Share Tech Mono", monospace;
    font-size: 9px;
    letter-spacing: .22em;
}

.ec-state i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ec-accent);
    box-shadow: 0 0 12px var(--ec-accent);
    animation: ec-blink 1.7s ease-in-out infinite;
}

.ec-preview-name {
    min-height: 1.1em;
    margin: 0;
    overflow-wrap: anywhere;
    color: #fff;
    font-family: "Exo 2", Inter, sans-serif;
    font-size: clamp(32px, 4vw, 58px);
    font-weight: 300;
    letter-spacing: -.035em;
    line-height: 1;
}

.ec-preview-line {
    max-width: 390px;
    margin: 16px auto 0;
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, .48);
    font-size: 13px;
    line-height: 1.7;
}

.ec-signal {
    position: absolute;
    z-index: 2;
    bottom: 30px;
    left: 34px;
    display: flex;
    align-items: end;
    gap: 4px;
    height: 20px;
}

.ec-signal span {
    width: 2px;
    height: 7px;
    border-radius: 2px;
    background: rgba(var(--ec-accent-rgb), .5);
    animation: ec-signal 1.2s ease-in-out infinite alternate;
}

.ec-signal span:nth-child(2) { animation-delay: -.4s; }
.ec-signal span:nth-child(3) { animation-delay: -.8s; }
.ec-signal span:nth-child(4) { animation-delay: -.2s; }
.ec-signal span:nth-child(5) { animation-delay: -.6s; }
.ec-signal span:nth-child(6) { animation-delay: -1s; }
.ec-signal span:nth-child(7) { animation-delay: -.3s; }

.ec-workspace {
    position: relative;
    min-width: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .16) transparent;
    padding: clamp(34px, 4vw, 64px) clamp(30px, 5vw, 78px) 30px;
    background: linear-gradient(155deg, #0d1119 0%, #080b11 100%);
}

.ec-header {
    max-width: 690px;
    padding-right: 34px;
}

.ec-kicker {
    color: var(--ec-accent);
    font-family: "Share Tech Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .23em;
}

.ec-header h1 {
    margin: 12px 0 11px;
    color: #f8fafc;
    font-family: "Exo 2", Inter, sans-serif;
    font-size: clamp(25px, 2.7vw, 40px);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: 1.12;
}

.ec-header p {
    max-width: 630px;
    margin: 0;
    color: rgba(255, 255, 255, .46);
    font-size: 12px;
    line-height: 1.65;
}

.ec-progress {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 28px 0 34px;
}

.ec-progress::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 6%;
    right: 6%;
    height: 1px;
    background: rgba(255, 255, 255, .09);
}

.ec-progress button {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .27);
    text-align: left;
    cursor: default;
}

.ec-progress button:not(:disabled) { cursor: pointer; }

.ec-progress button span {
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: #0b0f16;
    font-family: "Share Tech Mono", monospace;
    font-size: 9px;
}

.ec-progress button em {
    overflow: hidden;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .05em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-progress button.is-current,
.ec-progress button.is-complete { color: rgba(255, 255, 255, .78); }

.ec-progress button.is-current span {
    border-color: var(--ec-accent);
    color: #061014;
    background: var(--ec-accent);
    box-shadow: 0 0 18px rgba(var(--ec-accent-rgb), .22);
}

.ec-progress button.is-complete span {
    border-color: rgba(var(--ec-accent-rgb), .38);
    color: var(--ec-accent);
}

.ec-error {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #ffadb3;
    background: transparent;
    font-size: 11px;
    line-height: 1.5;
    opacity: 0;
    transition: all 180ms ease;
}

.ec-error.is-visible {
    max-height: 74px;
    margin: -18px 0 24px;
    padding: 10px 12px;
    border-color: rgba(255, 93, 105, .2);
    background: rgba(255, 93, 105, .07);
    opacity: 1;
}

.ec-steps {
    min-height: 410px;
}

.ec-step {
    animation: ec-step-in 240ms ease both;
}

.ec-section-heading {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 24px;
}

.ec-section-heading > span {
    color: var(--ec-accent);
    font-family: "Share Tech Mono", monospace;
    font-size: 10px;
    line-height: 24px;
}

.ec-section-heading h2 {
    margin: 0;
    outline: none;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.ec-section-heading p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .35);
    font-size: 11px;
}

.ec-field,
.ec-fieldset {
    display: block;
    margin: 0 0 25px;
    padding: 0;
    border: 0;
}

.ec-label,
.ec-fieldset > legend {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 9px;
    color: rgba(255, 255, 255, .7);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .055em;
}

.ec-label small,
.ec-fieldset legend small {
    color: rgba(255, 255, 255, .28);
    font-size: 9px;
    font-weight: 400;
}

.ec-field input,
.ec-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 11px;
    outline: none;
    background: rgba(255, 255, 255, .035);
    color: #fff;
    font: inherit;
    font-size: 14px;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.ec-field input {
    height: 50px;
    padding: 0 15px;
}

.ec-field textarea {
    min-height: 98px;
    padding: 14px 15px;
    resize: vertical;
    line-height: 1.55;
}

.ec-field input::placeholder,
.ec-field textarea::placeholder { color: rgba(255, 255, 255, .22); }

.ec-field input:focus,
.ec-field textarea:focus {
    border-color: rgba(var(--ec-accent-rgb), .65);
    background: rgba(var(--ec-accent-rgb), .035);
    box-shadow: 0 0 0 3px rgba(var(--ec-accent-rgb), .07);
}

.ec-field [aria-invalid="true"] { border-color: rgba(255, 99, 111, .7); }

.ec-choice-row,
.ec-sigil-row,
.ec-color-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ec-pill,
.ec-trait {
    min-height: 35px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .025);
    color: rgba(255, 255, 255, .51);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    transition: all 150ms ease;
}

.ec-pill { padding: 0 14px; }

.ec-pill:hover,
.ec-pill:focus-visible,
.ec-pill.is-selected,
.ec-trait:hover,
.ec-trait:focus-visible,
.ec-trait.is-selected {
    border-color: rgba(var(--ec-accent-rgb), .45);
    color: #fff;
    background: rgba(var(--ec-accent-rgb), .08);
    outline: none;
}

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

.ec-choice-card {
    min-height: 92px;
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto;
    column-gap: 9px;
    align-content: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
    color: rgba(255, 255, 255, .72);
    text-align: left;
    cursor: pointer;
    transition: all 160ms ease;
}

.ec-choice-card b {
    grid-row: 1 / 3;
    align-self: center;
    color: var(--ec-accent);
    font-family: "Orbitron", sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
}

.ec-choice-card span { font-size: 11px; font-weight: 600; }
.ec-choice-card small { margin-top: 3px; color: rgba(255, 255, 255, .3); font-size: 8px; line-height: 1.35; }

.ec-choice-card:hover,
.ec-choice-card:focus-visible,
.ec-choice-card.is-selected {
    border-color: rgba(var(--ec-accent-rgb), .42);
    background: linear-gradient(140deg, rgba(var(--ec-accent-rgb), .1), rgba(255, 255, 255, .02));
    outline: none;
}

.ec-choice-card.is-selected { box-shadow: 0 0 0 1px rgba(var(--ec-accent-rgb), .08) inset; }

.ec-sigil-choice,
.ec-color {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    background: rgba(255, 255, 255, .025);
    color: rgba(255, 255, 255, .56);
    cursor: pointer;
    transition: all 150ms ease;
}

.ec-sigil-choice:hover,
.ec-sigil-choice:focus-visible,
.ec-sigil-choice.is-selected {
    border-color: var(--ec-accent);
    color: #fff;
    background: rgba(var(--ec-accent-rgb), .09);
    box-shadow: 0 0 15px rgba(var(--ec-accent-rgb), .12);
    outline: none;
}

.ec-trait-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.ec-trait {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: 8px;
    text-align: left;
}

.ec-trait i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
}

.ec-trait.is-selected i { background: var(--ec-accent); box-shadow: 0 0 9px var(--ec-accent); }

.ec-style-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.ec-style {
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
    color: rgba(255, 255, 255, .66);
    text-align: left;
    cursor: pointer;
}

.ec-style span { font-size: 11px; font-weight: 600; }
.ec-style small { color: rgba(255, 255, 255, .3); font-size: 8px; }

.ec-style:hover,
.ec-style:focus-visible,
.ec-style.is-selected {
    border-color: rgba(var(--ec-accent-rgb), .42);
    color: #fff;
    background: rgba(var(--ec-accent-rgb), .07);
    outline: none;
}

.ec-premium-orb-card {
    min-height: 74px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--ec-accent-rgb), .2);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(var(--ec-accent-rgb), .1), rgba(255, 255, 255, .025) 52%),
        rgba(255, 255, 255, .018);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .15), inset 0 1px rgba(255, 255, 255, .035);
}

.ec-premium-orb-mark {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 27%, #fff 0 4%, rgba(255, 255, 255, .74) 7%, transparent 19%),
        radial-gradient(circle at 45% 42%, color-mix(in srgb, var(--ec-accent) 55%, white), var(--ec-accent) 45%, #07111b 76%);
    box-shadow: 0 0 22px rgba(var(--ec-accent-rgb), .24), inset -7px -8px 13px rgba(0, 0, 0, .45);
}

.ec-premium-orb-mark::before,
.ec-premium-orb-mark::after {
    content: "";
    position: absolute;
    inset: 7px -3px;
    border: 1px solid rgba(var(--ec-accent-rgb), .32);
    border-radius: 50%;
    transform: rotate(35deg);
}

.ec-premium-orb-mark::after { transform: rotate(-35deg); opacity: .52; }
.ec-premium-orb-card > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ec-premium-orb-card b { color: #fff; font-size: 11px; font-weight: 650; }
.ec-premium-orb-card small { color: rgba(255, 255, 255, .38); font-size: 9px; line-height: 1.4; }
.ec-premium-orb-card > em {
    padding: 5px 7px;
    border: 1px solid rgba(var(--ec-accent-rgb), .22);
    border-radius: 999px;
    color: var(--ec-accent);
    background: rgba(var(--ec-accent-rgb), .055);
    font-family: "Share Tech Mono", monospace;
    font-size: 7px;
    font-style: normal;
    letter-spacing: .12em;
}

.ec-legacy-note {
    margin: 8px 2px 0;
    color: rgba(255, 255, 255, .34);
    font-size: 8px;
    line-height: 1.45;
}

.ec-color { position: relative; }

.ec-color-editor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
    background: rgba(255, 255, 255, .018);
}

.ec-color i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--swatch);
    box-shadow: 0 0 10px color-mix(in srgb, var(--swatch) 38%, transparent);
}

.ec-color.is-selected { border-color: var(--swatch); transform: scale(1.08); }

.ec-custom-color {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-left: auto;
}

.ec-native-color {
    position: relative;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 50%;
    background: rgba(255, 255, 255, .035);
    cursor: pointer;
}

.ec-native-color input {
    position: absolute;
    inset: -8px;
    width: calc(100% + 16px);
    height: calc(100% + 16px);
    border: 0;
    opacity: 0;
    cursor: pointer;
}

.ec-native-color > span {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: conic-gradient(#ff6b8b, #ffd56b, #55ef9f, #56d9ff, #a78bfa, #ff6b8b);
    box-shadow: inset 0 0 0 4px #10151d, 0 0 12px rgba(var(--ec-accent-rgb), .15);
}

.ec-native-color:focus-within {
    border-color: var(--ec-accent);
    box-shadow: 0 0 0 3px rgba(var(--ec-accent-rgb), .08);
}

.ec-color-hex {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ec-color-hex > span {
    color: rgba(255, 255, 255, .34);
    font-size: 8px;
    letter-spacing: .04em;
}

.ec-color-hex input {
    width: 92px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 8px;
    outline: none;
    background: rgba(3, 7, 12, .64);
    color: #fff;
    font-family: "Share Tech Mono", monospace;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ec-color-hex input:focus {
    border-color: rgba(var(--ec-accent-rgb), .65);
    box-shadow: 0 0 0 3px rgba(var(--ec-accent-rgb), .07);
}

.ec-color-hex input[aria-invalid="true"] { border-color: rgba(255, 99, 111, .7); }

.ec-color-hint {
    min-height: 1.4em;
    margin: 7px 2px 0;
    color: rgba(255, 255, 255, .28);
    font-size: 8px;
    line-height: 1.4;
}

.ec-voice-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

.ec-voice-current {
    margin: -7px 0 12px;
    padding: 9px 11px;
    border-left: 2px solid rgba(var(--ec-accent-rgb), .54);
    border-radius: 0 8px 8px 0;
    color: rgba(255, 255, 255, .5);
    background: rgba(var(--ec-accent-rgb), .035);
    font-size: 9px;
    line-height: 1.45;
}

.ec-voice {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 43px;
    min-height: 76px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 10px;
    background: rgba(255, 255, 255, .025);
    transition: border-color 150ms ease, background 150ms ease;
}

.ec-voice:hover,
.ec-voice.is-selected {
    border-color: rgba(var(--ec-accent-rgb), .42);
    background: linear-gradient(135deg, rgba(var(--ec-accent-rgb), .075), rgba(255, 255, 255, .018));
}

.ec-voice.is-selected { box-shadow: inset 3px 0 rgba(var(--ec-accent-rgb), .6); }

.ec-voice-select,
.ec-voice-preview {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .68);
    cursor: pointer;
}

.ec-voice-select {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px;
    text-align: left;
}

.ec-voice-select > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ec-voice-select b { color: rgba(255, 255, 255, .86); font-size: 11px; font-weight: 650; }
.ec-voice-select em {
    color: rgba(255, 255, 255, .28);
    font-family: "Share Tech Mono", monospace;
    font-size: 7px;
    font-style: normal;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.ec-voice-select small { color: rgba(255, 255, 255, .36); font-size: 8.5px; line-height: 1.42; }
.ec-voice-select:focus-visible { outline: 1px solid rgba(var(--ec-accent-rgb), .65); outline-offset: -3px; }

.ec-voice-preview {
    border-left: 1px solid rgba(255, 255, 255, .07);
    font-size: 11px;
}

.ec-voice-preview:hover,
.ec-voice-preview:focus-visible { color: var(--ec-accent); background: rgba(var(--ec-accent-rgb), .06); outline: none; }
.ec-voice-preview.is-playing { color: var(--ec-accent); animation: ec-blink 1s ease-in-out infinite; }

.ec-security-note {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .27);
    font-size: 8px;
}

.ec-security-note span { color: var(--ec-accent); }

.ec-review {
    position: relative;
    overflow: hidden;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 15px;
    background:
        radial-gradient(circle at 0 0, color-mix(in srgb, var(--review-color) 13%, transparent), transparent 42%),
        rgba(255, 255, 255, .025);
}

.ec-review::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 48px;
    height: 1px;
    background: var(--review-color);
    box-shadow: 0 0 14px var(--review-color);
}

.ec-review-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.ec-review-identity > div { min-width: 0; }

.ec-review-identity > span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--review-color) 48%, transparent);
    border-radius: 50%;
    color: #fff;
    background: color-mix(in srgb, var(--review-color) 8%, #070b12);
    font-family: "Orbitron", sans-serif;
    font-size: 20px;
    box-shadow: 0 0 18px color-mix(in srgb, var(--review-color) 15%, transparent);
}

.ec-review-identity small { color: rgba(255, 255, 255, .28); font-size: 7px; letter-spacing: .18em; }
.ec-review-identity h3 { margin: 3px 0 2px; overflow-wrap: anywhere; color: #fff; font-size: 20px; font-weight: 500; }
.ec-review-identity p { margin: 0; color: rgba(255, 255, 255, .39); font-size: 9px; }

.ec-review blockquote {
    min-width: 0;
    margin: 21px 0;
    padding: 0 0 0 13px;
    border-left: 1px solid color-mix(in srgb, var(--review-color) 52%, transparent);
    color: rgba(255, 255, 255, .67);
    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    font-style: italic;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.ec-review dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 0;
}

.ec-review dl div {
    min-width: 0;
    padding: 10px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

.ec-review dt { margin-bottom: 4px; color: rgba(255, 255, 255, .25); font-size: 7px; letter-spacing: .12em; text-transform: uppercase; }
.ec-review dd { margin: 0; overflow-wrap: anywhere; color: rgba(255, 255, 255, .64); font-size: 9px; line-height: 1.4; }

.ec-promise {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(var(--ec-accent-rgb), .11);
    border-radius: 11px;
    background: rgba(var(--ec-accent-rgb), .035);
}

.ec-promise > span { color: var(--ec-accent); font-size: 18px; }
.ec-promise b { color: rgba(255, 255, 255, .72); font-size: 10px; }
.ec-promise p { margin: 4px 0 0; color: rgba(255, 255, 255, .31); font-size: 8px; line-height: 1.5; }

.ec-one-entity-note {
    margin: 11px 0 0;
    color: rgba(255, 255, 255, .48);
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
}

.ec-danger { margin-top: 13px; }
.ec-danger > button { padding: 0; border: 0; background: transparent; color: rgba(255, 115, 126, .55); font-size: 9px; cursor: pointer; }
.ec-danger > button:hover { color: #ff7c87; }

.ec-delete-confirm {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 88, 101, .18);
    border-radius: 8px;
    color: rgba(255, 255, 255, .48);
    background: rgba(255, 88, 101, .055);
    font-size: 8px;
}

.ec-delete-confirm[hidden] { display: none; }
.ec-delete-confirm span { flex: 1; }
.ec-delete-confirm button { padding: 5px 8px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 5px; background: transparent; color: rgba(255, 255, 255, .55); font-size: 8px; cursor: pointer; }
.ec-delete-confirm button[data-action="delete"] { border-color: rgba(255, 88, 101, .35); color: #ff8f98; }

.ec-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.ec-footnote {
    max-width: 280px;
    color: rgba(255, 255, 255, .24);
    font-size: 8px;
    line-height: 1.45;
}

.ec-footer-actions { display: flex; gap: 8px; margin-left: auto; }

.ec-button {
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 9px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.ec-button-quiet { background: transparent; color: rgba(255, 255, 255, .47); }
.ec-button-primary { border-color: transparent; background: #eefbff; color: #071016; }
.ec-button-primary span { margin-left: 6px; }
.ec-button:hover:not(:disabled), .ec-button:focus-visible { transform: translateY(-1px); outline: none; }
.ec-button-primary:hover:not(:disabled), .ec-button-primary:focus-visible { box-shadow: 0 7px 22px rgba(var(--ec-accent-rgb), .16); }
.ec-button:disabled { opacity: .45; cursor: wait; }
.ec-button-awaken { background: var(--ec-accent); box-shadow: 0 0 24px rgba(var(--ec-accent-rgb), .14); }

.ec-awakening {
    position: absolute;
    z-index: 20;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    background:
        radial-gradient(circle at center, rgba(var(--ec-accent-rgb), .11), transparent 35%),
        rgba(3, 6, 10, .96);
    opacity: 0;
    visibility: hidden;
    transition: opacity 350ms ease, visibility 350ms ease;
}

.entity-creator.is-awakening .ec-awakening { opacity: 1; visibility: visible; }

.ec-awakening-core {
    position: relative;
    width: 132px;
    height: 132px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--ec-accent-rgb), .25);
    border-radius: 50%;
    animation: ec-spin 10s linear infinite;
}

.ec-awakening-core::before,
.ec-awakening-core::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(var(--ec-accent-rgb), .16);
    border-radius: 50%;
}

.ec-awakening-core::before { inset: -24px; }
.ec-awakening-core::after { inset: 18px; }

.ec-awakening-core span {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ec-accent);
    box-shadow: 0 0 30px var(--ec-accent), 0 0 90px rgba(var(--ec-accent-rgb), .6);
    animation: ec-aura 1.4s ease-in-out infinite;
}

.entity-creator.is-awake .ec-awakening-core {
    animation: none;
    border-color: rgba(var(--ec-accent-rgb), .48);
}

.entity-creator.is-awake .ec-awakening-core span {
    animation: ec-aura 2.6s ease-in-out infinite;
}

.ec-awakening-label {
    margin: 48px 0 9px;
    color: var(--ec-accent);
    font-family: "Share Tech Mono", monospace;
    font-size: 9px;
    letter-spacing: .24em;
}

.ec-awakening h2 { max-width: 100%; margin: 0; overflow-wrap: anywhere; color: #fff; font-family: "Exo 2", sans-serif; font-size: clamp(27px, 4vw, 46px); font-weight: 300; text-align: center; }
.ec-awakening-detail {
    max-width: 380px;
    margin: 12px 0 0;
    color: rgba(255, 255, 255, .68);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
    text-wrap: balance;
}

.ec-awakening-begin {
    min-width: 180px;
    min-height: 46px;
    margin-top: 26px;
}

.ec-awakening-begin[hidden] { display: none; }

/* Entry point in the existing entity dropdown */
.entity-creator-launch {
    margin: 10px 10px 16px;
    padding: 1px;
    border-radius: 14px;
    background: linear-gradient(120deg, rgba(120, 244, 255, .7), rgba(181, 156, 255, .5), rgba(255, 142, 219, .52));
}

.entity-creator-launch button {
    width: 100%;
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 15px;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(9, 18, 25, .98), rgba(18, 13, 28, .98));
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.entity-creator-launch .entity-creator-launch-icon {
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(120, 244, 255, .26);
    border-radius: 50%;
    color: #9df6ff;
    background: rgba(120, 244, 255, .07);
    font-size: 18px;
    box-shadow: 0 0 18px rgba(120, 244, 255, .09);
}

.entity-creator-launch-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 3px; }
.entity-creator-launch-copy strong { font-size: 12px; font-weight: 600; }
.entity-creator-launch-copy small { color: rgba(255, 255, 255, .4); font-size: 9px; }
.entity-creator-launch-arrow { color: rgba(255, 255, 255, .34); font-size: 16px; }

.entity-option .entity-manage-button {
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    margin-left: 5px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    background: rgba(255, 255, 255, .025);
    color: rgba(255, 255, 255, .45);
    font-size: 12px;
    cursor: pointer;
}

.entity-option .entity-manage-button:hover,
.entity-option .entity-manage-button:focus-visible {
    border-color: var(--entity-color);
    color: #fff;
    outline: none;
}

@keyframes ec-step-in {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ec-spin { to { transform: rotate(360deg); } }
@keyframes ec-spin-wide { from { transform: rotate(60deg); } to { transform: rotate(420deg); } }
@keyframes ec-orb-float { 50% { transform: translateY(-4px) scale(1.018); filter: drop-shadow(0 0 48px rgba(var(--ec-accent-rgb), .4)); } }
@keyframes ec-aura { 50% { transform: scale(1.16); opacity: .35; } }
@keyframes ec-blink { 50% { opacity: .35; } }
@keyframes ec-signal { to { height: 19px; opacity: 1; } }

@media (max-width: 980px) {
    .ec-shell {
        grid-template-columns: minmax(260px, .7fr) minmax(470px, 1.3fr);
    }
    .ec-presence { padding-inline: 24px; }
    .ec-card-grid { grid-template-columns: repeat(2, 1fr); }
    .ec-trait-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
    .entity-creator {
        inset: var(--ec-viewport-top, 0px) 0 auto;
        height: var(--ec-viewport-height, 100dvh);
    }

    .ec-shell {
        inset: 0;
        height: 100%;
        max-width: none;
        max-height: none;
        grid-template-columns: 1fr;
        grid-template-rows: 218px minmax(0, 1fr);
        border: 0;
        border-radius: 0;
    }

    .ec-backdrop { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
    .ec-close { position: fixed; top: max(12px, env(safe-area-inset-top)); right: max(13px, env(safe-area-inset-right)); width: 38px; height: 38px; }
    .ec-presence { padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 14px max(18px, env(safe-area-inset-left)); border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
    .ec-presence::before { display: none; }
    .ec-brand { top: max(18px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); font-size: 9px; }
    .ec-orb-field { width: 155px; position: absolute; top: max(17px, env(safe-area-inset-top)); }
    .ec-orb-surface { width: 78%; height: 78%; filter: drop-shadow(0 0 22px rgba(var(--ec-accent-rgb), .25)); }
    .ec-orbit-two { display: none; }
    .ec-orb-sigil { width: 38px; height: 38px; font-size: 15px; }
    .ec-presence-copy { align-self: stretch; margin-top: auto; text-align: left; }
    .ec-preview-name { max-width: calc(100% - 120px); display: -webkit-box; overflow: hidden; font-size: 28px; line-height: 1.05; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .ec-preview-line { max-width: calc(100% - 120px); max-height: 2.8em; display: -webkit-box; margin: 6px 0 0; overflow: hidden; font-size: 9px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
    .ec-state { margin-bottom: 4px; font-size: 7px; }
    .ec-signal { display: none; }
    .ec-workspace { padding: 27px max(18px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); scroll-padding-block: 24px calc(92px + env(safe-area-inset-bottom)); }
    .ec-header { padding-right: 0; }
    .ec-header h1 { margin-top: 9px; font-size: 24px; }
    .ec-header p { font-size: 10px; }
    .ec-field input, .ec-field textarea { font-size: 16px; }
    .ec-progress { margin: 22px 0 28px; }
    .ec-progress button { justify-content: center; }
    .ec-progress button em { display: none; }
    .ec-progress::before { left: 12%; right: 12%; }
    .ec-steps { min-height: 0; }
    .ec-card-grid, .ec-trait-grid { grid-template-columns: repeat(2, 1fr); }
    .ec-choice-card { min-height: 85px; }
    .ec-color-editor { align-items: stretch; flex-direction: column; gap: 12px; }
    .ec-custom-color { width: 100%; margin-left: 0; }
    .ec-color-hex { flex: 1; }
    .ec-color-hex input { width: 100%; min-height: 44px; font-size: 16px; }
    .ec-review { padding: 17px; }
    .ec-review dl { grid-template-columns: 1fr; }
    .ec-footer { position: sticky; z-index: 3; bottom: 0; margin-inline: calc(0px - max(18px, env(safe-area-inset-left))) calc(0px - max(18px, env(safe-area-inset-right))); padding: 15px max(18px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: rgba(8, 11, 17, .96); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
    .ec-footnote { display: none; }
    .ec-footer-actions { width: 100%; }
    .ec-footer-actions .ec-button-primary { flex: 1; }
    .ec-button-primary { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ec-delete-confirm { flex-wrap: wrap; }
    .ec-delete-confirm span { flex-basis: 100%; }
    .ec-delete-confirm button { flex: 1; }
    .ec-awakening { padding: max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); }

    .entity-creator.is-viewport-compact .ec-shell { grid-template-rows: calc(88px + env(safe-area-inset-top)) minmax(0, 1fr); }
    .entity-creator.is-viewport-compact .ec-presence { padding-block: max(8px, env(safe-area-inset-top)) 8px; }
    .entity-creator.is-viewport-compact .ec-brand,
    .entity-creator.is-viewport-compact .ec-state,
    .entity-creator.is-viewport-compact .ec-preview-line { display: none; }
    .entity-creator.is-viewport-compact .ec-orb-field { width: 78px; top: max(4px, env(safe-area-inset-top)); right: max(58px, env(safe-area-inset-right)); }
    .entity-creator.is-viewport-compact .ec-presence-copy { margin: auto 0; }
    .entity-creator.is-viewport-compact .ec-preview-name { max-width: calc(100% - 150px); font-size: 21px; -webkit-line-clamp: 2; }
    .entity-creator.is-viewport-compact .ec-workspace { padding-top: 18px; }
    .entity-creator.is-viewport-compact .ec-awakening { padding-block: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-bottom)); }
    .entity-creator.is-viewport-compact .ec-awakening-core { width: 78px; height: 78px; }
    .entity-creator.is-viewport-compact .ec-awakening-core::before { inset: -10px; }
    .entity-creator.is-viewport-compact .ec-awakening-core span { width: 34px; height: 34px; }
    .entity-creator.is-viewport-compact .ec-awakening-label { margin-top: 20px; }
    .entity-creator.is-viewport-compact .ec-awakening h2 { font-size: 25px; }
    .entity-creator.is-viewport-compact .ec-awakening-detail { margin-top: 8px; }
    .entity-creator.is-viewport-compact .ec-awakening-begin { margin-top: 14px; }
}

@media (max-width: 560px) {
    .ec-voice-grid { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
    .ec-style-grid { grid-template-columns: 1fr; }
    .ec-trait-grid { grid-template-columns: repeat(2, 1fr); }
    .ec-pill { padding-inline: 11px; }
    .ec-premium-orb-card { grid-template-columns: 44px minmax(0, 1fr); }
    .ec-premium-orb-card > em { display: none; }
}

@media (max-height: 710px) and (min-width: 761px) {
    .ec-shell { inset: 10px; }
    .ec-presence { padding-block: 34px 24px; }
    .ec-orb-field { width: min(28vw, 280px); }
    .ec-workspace { padding-top: 30px; }
    .ec-header p { display: none; }
    .ec-progress { margin-block: 18px 24px; }
    .ec-steps { min-height: 360px; }
}

/* Landscape phones are wide enough to trigger desktop CSS but not its 850px minimum. */
@media (max-height: 540px) and (min-width: 761px) and (max-width: 950px) {
    .entity-creator {
        inset: var(--ec-viewport-top, 0px) 0 auto;
        height: var(--ec-viewport-height, 100dvh);
    }
    .ec-shell {
        inset: 0;
        height: 100%;
        max-width: none;
        max-height: none;
        grid-template-columns: 210px minmax(0, 1fr);
        border: 0;
        border-radius: 0;
    }
    .ec-presence {
        padding: max(42px, env(safe-area-inset-top)) 14px 20px max(14px, env(safe-area-inset-left));
    }
    .ec-close { top: max(12px, env(safe-area-inset-top)); right: max(13px, env(safe-area-inset-right)); }
    .ec-brand { top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); font-size: 8px; }
    .ec-orb-field { width: min(150px, 100%); }
    .ec-preview-name { font-size: 24px; }
    .ec-preview-line, .ec-state, .ec-signal { display: none; }
    .ec-workspace { padding: 22px max(24px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) 24px; }
    .ec-header h1 { margin-block: 7px; font-size: 22px; }
    .ec-header p { display: none; }
    .ec-progress { margin-block: 14px 20px; }
    .ec-steps { min-height: 0; }
    .ec-footer { margin-top: 16px; padding-top: 14px; }
    .ec-field input, .ec-field textarea { font-size: 16px; }
    .ec-awakening { padding-block: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-bottom)); }
    .ec-awakening-core { width: 78px; height: 78px; }
    .ec-awakening-core::before { inset: -10px; }
    .ec-awakening-core span { width: 34px; height: 34px; }
    .ec-awakening-label { margin-top: 18px; }
    .ec-awakening h2 { font-size: 25px; }
    .ec-awakening-detail { margin-top: 7px; }
    .ec-awakening-begin { margin-top: 12px; }
}

@media (pointer: coarse) {
    .ec-close,
    .ec-sigil-choice,
    .ec-color,
    .ec-native-color,
    .entity-option .entity-manage-button {
        width: 44px;
        height: 44px;
    }
    .ec-pill,
    .ec-trait,
    .ec-button,
    .ec-progress button,
    .ec-danger > button,
    .ec-delete-confirm button {
        min-height: 44px;
    }
    .ec-voice {
        grid-template-columns: minmax(0, 1fr) 48px;
        min-height: 64px;
    }
    .ec-voice-preview { min-width: 48px; }
}

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

/* Established-member introduction — intentionally separate from first awakening. */
body.conscious-entity-intro-open {
    overflow: hidden !important;
}

.conscious-entity-intro {
    --cei-accent: #78f4ff;
    --cei-accent-rgb: 120, 244, 255;
    position: fixed;
    inset: 0;
    z-index: 2147481900;
    display: grid;
    place-items: center;
    padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
    color: #f8fbff;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.conscious-entity-intro[hidden] {
    display: none !important;
}

.conscious-entity-intro.is-open {
    opacity: 1;
    pointer-events: auto;
}

.cei-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(var(--cei-accent-rgb), .14), transparent 34%),
        radial-gradient(circle at 88% 82%, rgba(99, 102, 241, .12), transparent 34%),
        rgba(1, 4, 9, .9);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    backdrop-filter: blur(20px) saturate(1.1);
}

.cei-card {
    position: relative;
    width: min(930px, 100%);
    max-height: min(760px, calc(100dvh - 36px));
    display: grid;
    grid-template-columns: minmax(290px, .78fr) minmax(430px, 1.22fr);
    overflow: auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 34%),
        #070a10;
    box-shadow:
        0 42px 120px rgba(0, 0, 0, .72),
        0 0 0 1px rgba(var(--cei-accent-rgb), .035) inset,
        0 0 68px rgba(var(--cei-accent-rgb), .055);
    transform: translateY(16px) scale(.985);
    transition: transform 340ms cubic-bezier(.2, .8, .2, 1);
}

.conscious-entity-intro.is-open .cei-card {
    transform: translateY(0) scale(1);
}

.cei-close {
    position: absolute;
    z-index: 5;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: rgba(5, 8, 14, .72);
    color: rgba(255, 255, 255, .7);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.cei-close:hover,
.cei-close:focus-visible {
    border-color: rgba(var(--cei-accent-rgb), .6);
    background: rgba(var(--cei-accent-rgb), .08);
    color: #fff;
    outline: none;
    transform: rotate(7deg);
}

.cei-presence {
    position: relative;
    min-height: 100%;
    overflow: hidden;
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(255, 255, 255, .075);
    background:
        linear-gradient(180deg, rgba(var(--cei-accent-rgb), .075), transparent 30%),
        radial-gradient(circle at 50% 48%, rgba(var(--cei-accent-rgb), .16), transparent 39%),
        linear-gradient(145deg, #05080d, #0a0e16);
}

.cei-presence::before,
.cei-presence::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cei-presence::before {
    opacity: .19;
    background-image:
        linear-gradient(rgba(var(--cei-accent-rgb), .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--cei-accent-rgb), .13) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 72%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 72%, transparent);
}

.cei-presence::after {
    background: linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .045) 48%, transparent 68%);
    transform: translateX(-100%);
    animation: ceiLightSweep 7s ease-in-out infinite;
}

.cei-orb {
    position: relative;
    z-index: 2;
    width: 138px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 27%, rgba(255, 255, 255, .94), rgba(255, 255, 255, .18) 10%, transparent 27%),
        radial-gradient(circle at 50% 52%, rgba(var(--cei-accent-rgb), .82), rgba(73, 94, 172, .52) 47%, rgba(4, 8, 15, .96) 72%);
    box-shadow:
        0 0 34px rgba(var(--cei-accent-rgb), .32),
        0 0 100px rgba(var(--cei-accent-rgb), .18),
        inset -20px -26px 42px rgba(0, 0, 0, .43),
        inset 13px 15px 26px rgba(255, 255, 255, .13);
    animation: ceiOrbFloat 5.4s ease-in-out infinite;
}

.cei-orb::before {
    content: "";
    position: absolute;
    inset: 12%;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: inherit;
    animation: ceiOrbSpin 12s linear infinite;
}

.cei-orb span {
    color: rgba(255, 255, 255, .9);
    font-family: "Share Tech Mono", monospace;
    font-size: 33px;
    text-shadow: 0 0 18px rgba(255, 255, 255, .8);
}

.cei-aura {
    position: absolute;
    z-index: 1;
    width: 210px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--cei-accent-rgb), .2), transparent 68%);
    filter: blur(8px);
    animation: ceiAuraPulse 4.2s ease-in-out infinite;
}

.cei-orbit {
    position: absolute;
    z-index: 3;
    width: 205px;
    aspect-ratio: 1;
    border: 1px solid rgba(var(--cei-accent-rgb), .2);
    border-radius: 50%;
    transform: rotateX(67deg) rotateZ(8deg);
}

.cei-orbit::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 14px var(--cei-accent);
}

.cei-orbit-one { animation: ceiOrbitSpin 8s linear infinite; }
.cei-orbit-two {
    width: 245px;
    opacity: .58;
    transform: rotateX(72deg) rotateZ(98deg);
    animation: ceiOrbitSpinReverse 11s linear infinite;
}

.cei-copy {
    min-width: 0;
    padding: 58px 62px 48px;
}

.cei-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 13px;
    color: rgba(var(--cei-accent-rgb), .88);
    font-family: "Share Tech Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.cei-kicker span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cei-accent);
    box-shadow: 0 0 14px rgba(var(--cei-accent-rgb), .75);
}

.cei-copy h1 {
    max-width: 570px;
    margin: 0;
    color: #fff;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(30px, 4.2vw, 46px);
    font-weight: 650;
    line-height: 1.04;
    letter-spacing: -.045em;
}

.cei-copy h1:focus { outline: none; }

.cei-description {
    max-width: 590px;
    margin: 18px 0 23px;
    color: rgba(229, 238, 249, .72);
    font-size: 15px;
    line-height: 1.65;
}

.cei-capabilities {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cei-capabilities li {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 14px;
    background: rgba(255, 255, 255, .028);
}

.cei-feature-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--cei-accent-rgb), .18);
    border-radius: 11px;
    background: rgba(var(--cei-accent-rgb), .065);
    color: var(--cei-accent);
    font-family: "Share Tech Mono", monospace;
    font-size: 17px;
}

.cei-capabilities b,
.cei-capabilities small { display: block; }
.cei-capabilities b { color: rgba(255, 255, 255, .93); font-size: 13px; font-weight: 650; }
.cei-capabilities small { margin-top: 3px; color: rgba(205, 218, 234, .57); font-size: 11px; line-height: 1.45; }

.cei-assurance {
    display: flex;
    gap: 9px;
    margin: 16px 0 0;
    color: rgba(205, 218, 234, .54);
    font-size: 10px;
    line-height: 1.45;
}

.cei-assurance span { color: rgba(var(--cei-accent-rgb), .75); }

.cei-status {
    min-height: 18px;
    margin-top: 9px;
    color: rgba(205, 218, 234, .7);
    font-size: 11px;
    line-height: 1.45;
}

.cei-status.is-error { color: #ffadb7; }

.cei-actions {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 4px;
}

.cei-primary,
.cei-secondary {
    min-height: 48px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.cei-primary {
    min-width: 196px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 19px;
    border: 1px solid rgba(var(--cei-accent-rgb), .82);
    background: linear-gradient(135deg, rgba(var(--cei-accent-rgb), .98), #a7fbff);
    color: #021014;
    box-shadow: 0 10px 32px rgba(var(--cei-accent-rgb), .16);
}

.cei-primary i {
    font-style: normal;
    font-size: 17px;
    transition: transform 160ms ease;
}

.cei-secondary {
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .035);
    color: rgba(255, 255, 255, .72);
}

.cei-primary:hover,
.cei-primary:focus-visible {
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 14px 38px rgba(var(--cei-accent-rgb), .24);
}

.cei-primary:hover i { transform: translateX(3px); }

.cei-secondary:hover,
.cei-secondary:focus-visible {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .065);
    color: #fff;
    outline: none;
}

.conscious-entity-intro button:disabled {
    cursor: wait;
    opacity: .62;
    transform: none !important;
}

@keyframes ceiOrbFloat {
    0%, 100% { transform: translateY(-5px) scale(1); }
    50% { transform: translateY(6px) scale(1.018); }
}

@keyframes ceiAuraPulse {
    0%, 100% { opacity: .58; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1.06); }
}

@keyframes ceiOrbSpin { to { transform: rotate(360deg); } }
@keyframes ceiOrbitSpin { to { transform: rotateX(67deg) rotateZ(368deg); } }
@keyframes ceiOrbitSpinReverse { to { transform: rotateX(72deg) rotateZ(-262deg); } }
@keyframes ceiLightSweep {
    0%, 30% { transform: translateX(-100%); }
    58%, 100% { transform: translateX(100%); }
}

@media (max-width: 760px) {
    .conscious-entity-intro {
        align-items: end;
        padding: max(10px, env(safe-area-inset-top)) 0 0;
    }

    .cei-card {
        width: 100%;
        max-height: calc(100dvh - max(10px, env(safe-area-inset-top)));
        grid-template-columns: 1fr;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 26px 26px 0 0;
        transform: translateY(22px);
    }

    .cei-presence {
        min-height: 156px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .075);
    }

    .cei-orb { width: 86px; }
    .cei-aura { width: 145px; }
    .cei-orbit { width: 126px; }
    .cei-orbit-two { width: 151px; }

    .cei-copy {
        padding:
            29px max(21px, env(safe-area-inset-right))
            calc(20px + env(safe-area-inset-bottom))
            max(21px, env(safe-area-inset-left));
    }

    .cei-copy h1 { padding-right: 16px; font-size: clamp(27px, 8.4vw, 36px); }
    .cei-description { margin: 13px 0 17px; font-size: 14px; line-height: 1.55; }
    .cei-capabilities { gap: 8px; }
    .cei-capabilities li { padding: 9px 10px; }
    .cei-actions { display: grid; grid-template-columns: 1fr; }
    .cei-primary, .cei-secondary { width: 100%; min-height: 50px; }
    .cei-primary { grid-row: 1; }
    .cei-secondary { grid-row: 2; }
    .cei-close { top: 13px; right: max(13px, env(safe-area-inset-right)); }
}

@media (max-height: 620px) and (orientation: landscape) {
    .cei-card { grid-template-columns: minmax(180px, .52fr) minmax(430px, 1.48fr); }
    .cei-presence { min-height: 100%; border-right: 1px solid rgba(255, 255, 255, .075); border-bottom: 0; }
    .cei-orb { width: 82px; }
    .cei-aura { width: 132px; }
    .cei-orbit { width: 120px; }
    .cei-orbit-two { width: 146px; }
    .cei-copy { padding: 34px 54px 24px 32px; }
    .cei-copy h1 { font-size: 28px; }
    .cei-description { margin: 10px 0 12px; }
    .cei-capabilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cei-capabilities li { grid-template-columns: 1fr; align-content: start; }
    .cei-capabilities small { display: none; }
    .cei-assurance { margin-top: 10px; }
}

/* Compact iPhone landscape: never let the two-column cinematic treatment
   impose its 610px desktop minimum on a 568px (or narrower) viewport. */
@media (max-width: 620px) and (max-height: 620px) and (orientation: landscape) {
    .cei-card { grid-template-columns: minmax(112px, 30%) minmax(0, 1fr); }
    .cei-copy {
        min-width: 0;
        padding:
            30px max(44px, env(safe-area-inset-right))
            calc(18px + env(safe-area-inset-bottom))
            max(22px, env(safe-area-inset-left));
    }
}

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

@media (forced-colors: active) {
    .cei-card,
    .cei-primary,
    .cei-secondary,
    .cei-close,
    .cei-capabilities li { border: 1px solid CanvasText; }
    .cei-primary { background: ButtonFace; color: ButtonText; }
}