/* JianXiaoAgent Cyber HUD theme.
   console.css owns layout and behavior. This file owns visual language. */

:root {
    --hud-void: #02040b;
    --hud-ink: #07111d;
    --hud-panel: rgba(6, 18, 31, 0.9);
    --hud-panel-solid: #07121f;
    --hud-panel-strong: #0a1a2a;
    --hud-cyan: #32f6ff;
    --hud-cyan-soft: #8ffbff;
    --hud-magenta: #ff3ac8;
    --hud-violet: #9d65ff;
    --hud-yellow: #ffd34d;
    --hud-danger: #ff4d70;
    --hud-text: #e8f7ff;
    --hud-muted: #78a1b8;
    --hud-faint: #386075;
    --hud-line: rgba(74, 219, 255, 0.3);
    --hud-line-strong: rgba(86, 246, 255, 0.72);
    --hud-glow-cyan: 0 0 7px rgba(50, 246, 255, 0.85), 0 0 22px rgba(24, 173, 255, 0.3);
    --hud-glow-magenta: 0 0 7px rgba(255, 58, 200, 0.84), 0 0 24px rgba(255, 58, 200, 0.28);
    --hud-shadow: 0 20px 50px rgba(0, 0, 0, 0.44);
    --hud-radius: 4px;
    --hud-topbar-height: 64px;
}

* { scrollbar-width: thin; scrollbar-color: rgba(50, 246, 255, 0.65) transparent; }
*::selection { background: rgba(50, 246, 255, 0.22); color: #fff; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.18); }
::-webkit-scrollbar-thumb {
    border: 1px solid rgba(50, 246, 255, 0.38);
    background: linear-gradient(#32f6ff, #6e66ff);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(#8ffbff, #ff3ac8); }

html, body {
    background: var(--hud-void) !important;
    color: var(--hud-text) !important;
}

body {
    font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
    background-image:
        linear-gradient(rgba(50, 246, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 246, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 72% 0%, rgba(87, 55, 172, 0.16), transparent 32%);
    background-size: 38px 38px, 38px 38px, auto;
}

button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button, a { outline-offset: 3px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 1px solid var(--hud-cyan);
    box-shadow: var(--hud-glow-cyan);
}

#app {
    isolation: isolate;
    background:
        linear-gradient(135deg, rgba(4, 15, 28, 0.96), rgba(3, 8, 17, 0.98)),
        var(--hud-void);
}

html,
body,
#app,
#main-content {
    height: var(--jianxiao-app-height, 100dvh) !important;
    max-height: var(--jianxiao-app-height, 100dvh);
    min-height: 0;
}

#sidebar,
.session-panel {
    height: var(--jianxiao-app-height, 100dvh);
    max-height: var(--jianxiao-app-height, 100dvh);
}

/* The shared HUD frame is intentionally rectangular: decoration never clips controls. */
.hud-frame,
.hud-message-frame,
.cfg-dropdown-selected,
.cfg-dropdown-menu,
.confirm-modal,
#confirm-dialog-overlay > div,
#password-modal-overlay > div,
#vendor-modal-overlay > div {
    border: 1px solid transparent;
    border-radius: var(--hud-radius) !important;
    background:
        linear-gradient(var(--hud-panel-solid), var(--hud-panel-solid)) padding-box,
        linear-gradient(135deg, rgba(50, 246, 255, 0.88), rgba(157, 101, 255, 0.46) 53%, rgba(255, 58, 200, 0.7)) border-box;
    box-shadow: inset 0 0 0 1px rgba(120, 247, 255, 0.04), var(--hud-shadow);
}

.hud-frame::before,
.hud-frame::after,
.hud-message-frame::before,
.hud-message-frame::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    pointer-events: none;
    opacity: 0.95;
}

/* Sidebar */
#sidebar {
    width: 180px !important;
    color: var(--hud-muted) !important;
    background:
        linear-gradient(180deg, rgba(6, 23, 38, 0.98), rgba(2, 8, 16, 0.99)) !important;
    border-right: 1px solid rgba(50, 246, 255, 0.43) !important;
    box-shadow: inset -1px 0 rgba(255, 58, 200, 0.14), 15px 0 42px rgba(0, 0, 0, 0.3);
}

#sidebar > div:first-child {
    position: relative;
    height: 76px !important;
    padding: 0 16px !important;
    border-bottom-color: rgba(50, 246, 255, 0.32) !important;
    background: linear-gradient(90deg, rgba(50, 246, 255, 0.07), transparent 70%);
}

#sidebar > div:first-child img {
    border-radius: 2px !important;
    box-shadow: 0 0 0 1px rgba(50, 246, 255, 0.65), var(--hud-glow-cyan);
}

#sidebar > div:first-child .text-white {
    color: var(--hud-text) !important;
    letter-spacing: 0;
}

#sidebar nav { padding: 15px 10px 20px !important; }

.menu-group { margin-top: 7px; }
.menu-group > button {
    position: relative;
    min-height: 34px;
    color: rgba(143, 251, 255, 0.52) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0 !important;
}
.menu-group > button::after {
    content: "";
    height: 1px;
    flex: 1;
    margin-left: 8px;
    background: linear-gradient(90deg, rgba(50, 246, 255, 0.3), rgba(255, 58, 200, 0.16), transparent);
}
.menu-group > button:hover { color: var(--hud-cyan-soft) !important; }
.menu-group > button .chevron { color: var(--hud-magenta); }
.menu-group-items {
    position: relative;
    margin: 2px 0 11px !important;
    padding: 2px 0 !important;
    border: 1px solid transparent !important;
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(11, 20, 44, 0.88), rgba(5, 14, 29, 0.84)) padding-box,
        linear-gradient(135deg, rgba(255, 58, 200, 0.76), rgba(98, 84, 203, 0.22) 42%, rgba(50, 246, 255, 0.64)) border-box !important;
    box-shadow:
        inset 0 0 22px rgba(157, 101, 255, 0.045),
        0 0 10px rgba(255, 58, 200, 0.055);
}
.menu-group-items::before,
.menu-group-items::after {
    content: "";
    position: absolute;
    z-index: 2;
    width: 17px;
    height: 9px;
    pointer-events: none;
}
.menu-group-items::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--hud-magenta);
    border-left: 2px solid var(--hud-magenta);
    box-shadow: -2px -2px 10px rgba(255, 58, 200, 0.35);
}
.menu-group-items::after {
    right: -1px;
    bottom: -1px;
    border-right: 2px solid var(--hud-violet);
    border-bottom: 2px solid var(--hud-violet);
    box-shadow: 2px 2px 10px rgba(157, 101, 255, 0.28);
}
.menu-group:not(.open) .menu-group-items {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-width: 0 !important;
    opacity: 0;
}

.sidebar-item {
    position: relative;
    min-height: 39px;
    margin: 3px 0;
    border: 1px solid transparent;
    border-radius: 2px !important;
    color: rgba(211, 239, 249, 0.7) !important;
}
.sidebar-item::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: transparent;
}
.sidebar-item .item-icon { color: rgba(124, 213, 242, 0.72) !important; }
.sidebar-item:hover {
    color: var(--hud-cyan-soft) !important;
    background: linear-gradient(90deg, rgba(50, 246, 255, 0.11), rgba(157, 101, 255, 0.04)) !important;
    border-color: rgba(50, 246, 255, 0.25);
}
.sidebar-item.active {
    color: #fff !important;
    border-color: rgba(50, 246, 255, 0.86) !important;
    background:
        linear-gradient(90deg, rgba(50, 246, 255, 0.2), rgba(157, 101, 255, 0.09) 63%, rgba(255, 58, 200, 0.14)) !important;
    box-shadow: inset 0 0 18px rgba(50, 246, 255, 0.09), var(--hud-glow-cyan);
}
.sidebar-item.active::before {
    background: var(--hud-cyan);
    box-shadow: 0 0 10px var(--hud-cyan), 0 0 20px var(--hud-magenta);
}
.sidebar-item.active .item-icon { color: var(--hud-cyan) !important; text-shadow: 0 0 10px var(--hud-cyan); }
#sidebar > nav > .sidebar-item {
    min-height: 46px;
    margin: 2px 3px 12px !important;
}
.menu-group-items .sidebar-item {
    min-height: 42px;
    margin: 0 !important;
    padding: 0 14px !important;
    gap: 12px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(111, 125, 202, 0.16) !important;
    border-radius: 0 !important;
    background: rgba(4, 10, 25, 0.36) !important;
}
.menu-group-items .sidebar-item:last-child { border-bottom: 0 !important; }
.menu-group-items .sidebar-item:hover {
    border-color: rgba(111, 125, 202, 0.16) !important;
    background: linear-gradient(90deg, rgba(50, 246, 255, 0.12), rgba(157, 101, 255, 0.08), transparent) !important;
    box-shadow: inset 2px 0 0 var(--hud-cyan);
}
.menu-group-items .sidebar-item.active {
    border-color: rgba(111, 125, 202, 0.16) !important;
    background: linear-gradient(90deg, rgba(255, 58, 200, 0.16), rgba(50, 246, 255, 0.08), transparent) !important;
    box-shadow: inset 2px 0 0 var(--hud-magenta), inset 0 0 18px rgba(255, 58, 200, 0.06) !important;
}
#sidebar > div:last-child {
    position: relative;
    padding: 15px 17px !important;
    border-top-color: rgba(50, 246, 255, 0.24) !important;
    background: rgba(2, 10, 18, 0.8);
}
#sidebar > div:last-child::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 7px;
    background: var(--hud-cyan);
    box-shadow: 0 0 10px var(--hud-cyan);
}

/* Session drawer */
.session-panel {
    width: 286px !important;
    background:
        linear-gradient(180deg, rgba(8, 25, 41, 0.98), rgba(3, 9, 17, 0.99)) !important;
    border-right-color: rgba(50, 246, 255, 0.34) !important;
    box-shadow: inset -1px 0 rgba(255, 58, 200, 0.12), 14px 0 35px rgba(0, 0, 0, 0.3);
}
.session-panel-header {
    min-height: 76px;
    padding: 0 16px !important;
    border-bottom-color: rgba(50, 246, 255, 0.3) !important;
}
.session-panel-title {
    color: var(--hud-text) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px !important;
    letter-spacing: 0;
}
.session-panel-title::before { content: "// "; color: var(--hud-magenta); }
.session-panel-close,
.session-panel-new {
    border-radius: 2px !important;
    border-color: rgba(50, 246, 255, 0.48) !important;
    background: rgba(50, 246, 255, 0.06) !important;
    color: var(--hud-cyan-soft) !important;
}
.session-panel-close:hover,
.session-panel-new:hover {
    border-color: var(--hud-cyan) !important;
    background: rgba(50, 246, 255, 0.14) !important;
    box-shadow: var(--hud-glow-cyan);
}
.session-panel-new {
    padding: 11px 14px !important;
    border-style: solid !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0;
}
.session-group-label {
    color: rgba(50, 246, 255, 0.65) !important;
    letter-spacing: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.session-group-label::before { content: "// "; color: var(--hud-cyan); }
.session-item {
    min-height: 40px;
    margin: 3px 0 !important;
    border: 1px solid rgba(111, 125, 202, 0.2) !important;
    border-radius: 2px !important;
    color: rgba(215, 240, 249, 0.72) !important;
    background: rgba(5, 12, 27, 0.62) !important;
}
.session-item:hover {
    border-color: rgba(50, 246, 255, 0.48) !important;
    background: rgba(50, 246, 255, 0.09) !important;
    color: #fff !important;
}
.session-item.active {
    background: linear-gradient(90deg, rgba(255, 58, 200, 0.2), rgba(157, 101, 255, 0.13), rgba(50, 246, 255, 0.05)) !important;
    border-color: rgba(255, 58, 200, 0.66) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--hud-magenta), 0 0 13px rgba(255, 58, 200, 0.16);
}
.session-item.active .session-icon { color: #ff8adf !important; text-shadow: 0 0 10px var(--hud-magenta); }
.session-delete:hover { color: var(--hud-danger) !important; background: rgba(255, 77, 112, 0.13) !important; }

/* Header and shell */
#main-content { background: transparent; }
#main-content > header {
    position: relative;
    min-height: 64px !important;
    height: 64px !important;
    border-bottom-color: rgba(50, 246, 255, 0.38) !important;
    background:
        linear-gradient(90deg, rgba(4, 21, 36, 0.98), rgba(8, 20, 37, 0.94) 62%, rgba(30, 10, 50, 0.87)) !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.22);
}
#sidebar > div:first-child,
.session-panel-header,
#main-content > header {
    height: var(--hud-topbar-height) !important;
    min-height: var(--hud-topbar-height) !important;
}
#main-content > header::after {
    content: "";
    position: absolute;
    right: 13px;
    bottom: -1px;
    width: 18%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hud-magenta), var(--hud-cyan));
    box-shadow: 0 0 12px var(--hud-magenta);
}
#main-content > header button {
    border: 1px solid transparent;
    border-radius: 2px !important;
    color: var(--hud-muted) !important;
}
#main-content > header button:hover {
    color: var(--hud-cyan-soft) !important;
    border-color: rgba(50, 246, 255, 0.4);
    background: rgba(50, 246, 255, 0.09) !important;
}
#breadcrumb-group { color: var(--hud-muted) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#breadcrumb-page, #account-username { color: var(--hud-text) !important; }
#account-role { color: var(--hud-magenta) !important; }
.active-life-summary {
    isolation: isolate;
    border-color: transparent;
    clip-path: var(--hud-cut-control);
    background:
        linear-gradient(135deg, rgba(6, 24, 42, 0.98), rgba(7, 11, 31, 0.98)) padding-box,
        linear-gradient(105deg, rgba(50, 246, 255, 0.9), rgba(157, 101, 255, 0.48) 54%, rgba(255, 58, 200, 0.82)) border-box;
    box-shadow:
        inset 0 0 18px rgba(50, 246, 255, 0.06),
        0 0 16px rgba(50, 246, 255, 0.1),
        0 0 18px rgba(255, 58, 200, 0.07);
}
.active-life-summary::before,
.active-life-summary::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.active-life-summary::before {
    top: 0;
    left: 18px;
    width: 42px;
    border-top: 1px solid var(--hud-cyan);
    box-shadow: 0 0 8px rgba(50, 246, 255, 0.7);
}
.active-life-summary::after {
    right: 12px;
    bottom: 3px;
    width: 22px;
    border-bottom: 2px solid var(--hud-magenta);
    box-shadow: 0 0 8px rgba(255, 58, 200, 0.72);
}
.active-life-summary-signal {
    border-radius: 0;
    background: var(--hud-cyan);
    box-shadow: 0 0 9px rgba(50, 246, 255, 0.9);
    animation: hud-node-pulse 2.4s ease-in-out infinite;
}
.active-life-summary.is-empty .active-life-summary-signal {
    background: var(--hud-danger);
    box-shadow: 0 0 9px rgba(255, 77, 112, 0.72);
}
.active-life-summary-label {
    color: rgba(143, 251, 255, 0.58);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
}
#active-life-name {
    color: var(--hud-text);
    text-shadow: 0 0 9px rgba(50, 246, 255, 0.18);
}

#content-area {
    background:
        linear-gradient(rgba(50, 246, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(50, 246, 255, 0.022) 1px, transparent 1px),
        radial-gradient(circle at 75% 12%, rgba(157, 101, 255, 0.11), transparent 34%),
        #030914;
    background-size: 38px 38px, 38px 38px, auto, auto;
}

/* Chat stage */
#view-chat {
    isolation: isolate;
    min-height: 0;
    background: #020713;
}
#view-chat::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: url("../assets/cyber-city-desktop.png") center center / cover no-repeat;
    opacity: 0.74;
}
#view-chat::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(2, 8, 18, 0.78) 0%, rgba(2, 8, 18, 0.46) 52%, rgba(2, 8, 18, 0.64) 100%),
        linear-gradient(180deg, rgba(2, 8, 18, 0.08) 0%, rgba(2, 8, 18, 0.68) 90%);
}
.chat-messages-viewport {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    margin: 12px 14px 0;
}
.chat-messages-viewport::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 9px;
    pointer-events: none;
    clip-path: var(--hud-cut-wide);
    border: 1px solid rgba(52, 222, 255, 0.12);
    background:
        linear-gradient(90deg, var(--hud-magenta), transparent) top left / 150px 2px no-repeat,
        linear-gradient(90deg, transparent, var(--hud-cyan)) bottom right / 190px 2px no-repeat;
    filter: drop-shadow(0 0 7px rgba(50, 246, 255, 0.22));
}
#chat-messages {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 42px 0 22px;
    overflow-y: auto;
    border: 1px solid transparent;
    border-radius: 3px;
    background:
        linear-gradient(rgba(2, 8, 21, 0.28), rgba(3, 9, 23, 0.42)) padding-box,
        linear-gradient(135deg, rgba(255, 58, 200, 0.76), rgba(50, 246, 255, 0.8) 38%, rgba(89, 95, 255, 0.42) 72%, rgba(255, 58, 200, 0.72)) border-box;
    box-shadow:
        inset 0 0 40px rgba(5, 5, 24, 0.26),
        0 0 17px rgba(50, 246, 255, 0.14),
        0 0 24px rgba(255, 58, 200, 0.09);
}
#chat-messages::before {
    content: none;
    position: absolute;
    top: 0;
    right: 18px;
    z-index: 3;
    width: auto;
    padding: 6px 13px;
    color: rgba(255, 191, 239, 0.86);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 9px;
    letter-spacing: 0;
    border-right: 1px solid rgba(255, 58, 200, 0.6);
    border-bottom: 1px solid rgba(255, 58, 200, 0.44);
    background: linear-gradient(90deg, transparent, rgba(255, 58, 200, 0.12));
}

#chat-messages:has(#welcome-screen) {
    display: grid;
    place-items: center;
    padding: 48px 24px 28px;
}
#welcome-screen {
    position: relative;
    z-index: 1;
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    width: min(820px, 100%);
    height: auto !important;
    min-height: 0;
    margin: 0 !important;
    padding: 26px 28px !important;
    align-items: center;
    justify-content: stretch !important;
    border: 1px solid transparent;
    border-radius: 3px;
    background:
        linear-gradient(145deg, rgba(5, 17, 37, 0.92), rgba(6, 9, 27, 0.9)) padding-box,
        linear-gradient(135deg, rgba(50, 246, 255, 0.82), rgba(157, 101, 255, 0.32) 55%, rgba(255, 58, 200, 0.72)) border-box;
    box-shadow: inset 0 0 34px rgba(50, 246, 255, 0.04), 0 18px 50px rgba(0, 0, 0, 0.34);
}
.welcome-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 68px !important;
    height: 68px !important;
    max-width: 68px !important;
    margin: 0 !important;
    object-fit: cover !important;
    border-radius: 2px !important;
    box-shadow: 0 0 0 2px rgba(50, 246, 255, 0.8), var(--hud-glow-cyan), 0 0 38px rgba(255, 58, 200, 0.22);
}
#welcome-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0 0 5px !important;
    color: #fff !important;
    text-shadow: 0 0 20px rgba(50, 246, 255, 0.4);
    letter-spacing: 0;
}
#welcome-subtitle {
    grid-column: 2;
    grid-row: 2;
    max-width: none !important;
    margin: 0 !important;
    color: #b8d9e7 !important;
    text-align: left !important;
}
#welcome-screen > .grid {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    max-width: none !important;
    margin-top: 24px;
}
.example-card {
    position: relative;
    isolation: isolate;
    overflow: hidden !important;
    padding: 20px 22px !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    clip-path: var(--hud-cut-wide);
    background:
        repeating-linear-gradient(90deg, transparent 0 27px, rgba(50, 246, 255, 0.025) 27px 28px),
        linear-gradient(140deg, rgba(5, 31, 49, 0.97), rgba(5, 10, 29, 0.98)) padding-box,
        var(--hud-border-spectrum) border-box !important;
    box-shadow:
        var(--hud-inset-line),
        inset 0 0 28px rgba(50, 246, 255, 0.055),
        0 0 13px rgba(50, 246, 255, 0.12),
        0 14px 30px rgba(0, 0, 0, 0.28);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.example-card::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 13px;
    width: 52%;
    top: -1px;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--hud-cyan), #4b7bff 58%, transparent);
    box-shadow: 0 0 12px rgba(50, 246, 255, 0.82);
}
.example-card::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 10px;
    bottom: 9px;
    width: 38px;
    height: 11px;
    pointer-events: none;
    border-right: 2px solid var(--hud-cyan);
    border-bottom: 2px solid var(--hud-magenta);
    filter:
        drop-shadow(0 0 5px rgba(50, 246, 255, 0.72))
        drop-shadow(0 0 7px rgba(255, 58, 200, 0.42));
}
.example-card:nth-child(2) {
    background:
        repeating-linear-gradient(90deg, transparent 0 27px, rgba(255, 58, 200, 0.025) 27px 28px),
        linear-gradient(140deg, rgba(24, 12, 54, 0.97), rgba(5, 14, 34, 0.98)) padding-box,
        linear-gradient(108deg, var(--hud-magenta), var(--hud-violet) 45%, var(--hud-cyan)) border-box !important;
}
.example-card:nth-child(2)::before {
    right: 13px;
    left: auto;
    background: linear-gradient(90deg, transparent, var(--hud-violet) 42%, var(--hud-cyan));
    box-shadow: 0 0 12px rgba(157, 101, 255, 0.72);
}
.example-card:hover {
    transform: translateY(-2px);
    filter:
        drop-shadow(0 0 8px rgba(50, 246, 255, 0.26))
        drop-shadow(0 0 12px rgba(255, 58, 200, 0.16));
    box-shadow:
        var(--hud-inset-line),
        inset 0 0 30px rgba(50, 246, 255, 0.08),
        0 0 17px rgba(50, 246, 255, 0.18),
        0 16px 34px rgba(0, 0, 0, 0.32);
}
.example-card .rounded-2xl {
    border: 1px solid rgba(50, 246, 255, 0.42);
    border-radius: 0 !important;
    clip-path: var(--hud-cut-control);
    background: linear-gradient(135deg, rgba(50, 246, 255, 0.2), rgba(43, 83, 191, 0.18)) !important;
    box-shadow: inset 0 0 13px rgba(50, 246, 255, 0.09), 0 0 9px rgba(50, 246, 255, 0.11);
}
.example-card:nth-child(2) .rounded-2xl {
    border-color: rgba(255, 58, 200, 0.42);
    background: linear-gradient(135deg, rgba(255, 58, 200, 0.18), rgba(83, 73, 220, 0.2)) !important;
}
.example-card .text-slate-800, .example-card .dark\:text-slate-100 { color: var(--hud-text) !important; }
.example-card .text-slate-500, .example-card .dark\:text-slate-400 { color: var(--hud-muted) !important; }

/* Chat messages */
.hud-message {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
    padding-right: clamp(14px, 1.25vw, 24px) !important;
    padding-left: clamp(14px, 1.25vw, 24px) !important;
    box-sizing: border-box;
    align-items: flex-start;
}
.hud-message-assistant {
    justify-content: flex-start;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.hud-message-user {
    justify-content: flex-end;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}
.hud-message-shell { position: relative; min-width: 0; }
.hud-assistant-message-shell { width: min(78%, 890px); flex: 0 1 auto !important; }
.hud-user-message-shell { width: min(52%, 640px); flex: 0 1 auto; }
.hud-message-frame {
    position: relative;
    overflow: visible !important;
    padding: 18px 21px !important;
    border-radius: 3px !important;
    color: var(--hud-text) !important;
}
.hud-assistant-frame {
    background:
        linear-gradient(130deg, rgba(8, 36, 53, 0.95), rgba(6, 15, 31, 0.96)) padding-box,
        linear-gradient(135deg, var(--hud-cyan), rgba(100, 214, 255, 0.25) 66%, var(--hud-violet)) border-box !important;
}
.hud-assistant-frame::before {
    left: -8px;
    top: 13px;
    border-top: 1px solid var(--hud-cyan);
    border-left: 1px solid var(--hud-cyan);
    box-shadow: -3px -3px 10px rgba(50, 246, 255, 0.35);
}
.hud-assistant-frame::after {
    right: 10px;
    top: -1px;
    width: 38px;
    height: 2px;
    background: linear-gradient(90deg, var(--hud-cyan), transparent);
    box-shadow: 0 0 12px var(--hud-cyan);
}
.hud-user-frame {
    background:
        linear-gradient(130deg, rgba(37, 15, 71, 0.94), rgba(13, 22, 49, 0.98)) padding-box,
        linear-gradient(135deg, var(--hud-violet), var(--hud-magenta) 62%, var(--hud-cyan)) border-box !important;
}
.hud-user-frame::before {
    right: -8px;
    bottom: 13px;
    border-right: 1px solid var(--hud-magenta);
    border-bottom: 1px solid var(--hud-magenta);
    box-shadow: 3px 3px 10px rgba(255, 58, 200, 0.35);
}
.hud-user-frame::after {
    left: 10px;
    bottom: -1px;
    width: 36px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hud-magenta));
    box-shadow: 0 0 12px var(--hud-magenta);
}
.hud-avatar-node, .hud-user-node {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 39px;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid var(--hud-cyan);
    border-radius: 2px;
    background: #071925;
    box-shadow: var(--hud-glow-cyan);
}
.hud-avatar-node::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 38px;
    width: 18px;
    height: 1px;
    background: linear-gradient(90deg, var(--hud-cyan), transparent);
    box-shadow: 0 0 8px var(--hud-cyan);
}
.hud-avatar-node img { width: 31px; height: 31px; border-radius: 1px !important; object-fit: cover; }
.hud-user-node {
    margin-left: 14px;
    border-color: var(--hud-magenta);
    color: var(--hud-magenta);
    box-shadow: var(--hud-glow-magenta);
}
.hud-user-node::before {
    content: "";
    position: absolute;
    top: 19px;
    right: 38px;
    width: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hud-magenta));
    box-shadow: 0 0 8px var(--hud-magenta);
}
.hud-user-node i { font-size: 12px; }
.hud-message-meta {
    color: rgba(155, 205, 224, 0.7) !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px !important;
    letter-spacing: 0;
}
.msg-content { color: var(--hud-text) !important; overflow-wrap: anywhere; word-break: normal; }
.msg-content p { line-height: 1.78 !important; }
.msg-content h1, .msg-content h2, .msg-content h3 { color: #fff !important; }
.msg-content a { color: var(--hud-cyan-soft) !important; text-decoration-color: rgba(50, 246, 255, 0.5) !important; }
.user-bubble.msg-content a { color: #f4d6ff !important; text-decoration-color: rgba(255, 58, 200, 0.56) !important; }
.msg-content :not(pre) > code {
    border: 1px solid rgba(50, 246, 255, 0.28);
    border-radius: 2px !important;
    background: rgba(50, 246, 255, 0.09) !important;
    color: var(--hud-cyan-soft) !important;
}
.user-bubble.msg-content :not(pre) > code {
    border-color: rgba(255, 58, 200, 0.34);
    background: rgba(255, 58, 200, 0.12) !important;
    color: #ffe4fa !important;
}
.msg-content pre {
    border: 1px solid rgba(50, 246, 255, 0.27);
    border-radius: 2px !important;
    background: rgba(0, 8, 18, 0.82) !important;
    box-shadow: inset 3px 0 var(--hud-cyan);
}
.msg-content blockquote {
    border-left-color: var(--hud-magenta) !important;
    border-radius: 0 !important;
    background: rgba(255, 58, 200, 0.06) !important;
}
.msg-content th, .msg-content td { border-color: rgba(50, 246, 255, 0.28) !important; }
.msg-content th { background: rgba(50, 246, 255, 0.1) !important; }
.msg-content img { border: 1px solid rgba(50, 246, 255, 0.42); border-radius: 2px !important; }
.image-reference-heading {
    color: var(--hud-cyan) !important;
    text-shadow: 0 0 10px rgba(50, 246, 255, 0.32);
}
.image-reference-card {
    border-color: rgba(50, 246, 255, 0.34) !important;
    border-radius: 2px !important;
    background: rgba(1, 13, 28, 0.86) !important;
    box-shadow:
        inset 0 0 18px rgba(50, 246, 255, 0.04),
        0 0 14px rgba(50, 246, 255, 0.08);
}
.msg-content .image-reference-media img {
    border: 0 !important;
    border-radius: 0 !important;
}
.image-reference-title {
    color: #e9fbff !important;
}
.image-reference-description,
.image-reference-fallback {
    color: #87aebe !important;
}
.image-reference-source {
    color: var(--hud-magenta) !important;
    text-shadow: 0 0 8px rgba(255, 58, 200, 0.2);
}
.agent-steps:not(:empty) { border-bottom-color: rgba(50, 246, 255, 0.28) !important; }
.agent-step { color: #9dc2d2 !important; }
.agent-content-step { color: var(--hud-text) !important; }
.assistant-message-surface .agent-content-body {
    color: var(--hud-text) !important;
}
.assistant-message-surface :is(.answer-content, .agent-content-body) :is(p, li) {
    color: var(--hud-text) !important;
}
.assistant-message-surface :is(.answer-content, .agent-content-body) strong {
    color: #ffffff !important;
}
.assistant-message-surface :is(.answer-content, .agent-content-body) :is(h1, h2, h3, h4, h5, h6) {
    color: #ffffff !important;
}
.agent-thinking-step .thinking-full, .agent-tool-step .tool-detail {
    border-color: rgba(50, 246, 255, 0.19) !important;
    border-radius: 2px !important;
    background: rgba(2, 12, 23, 0.68) !important;
}
.agent-thinking-step .thinking-header:hover, .agent-tool-step .tool-header:hover { color: var(--hud-cyan-soft) !important; }
.agent-tool-step .tool-detail-label { color: var(--hud-magenta); }
.sse-streaming::after { color: var(--hud-cyan) !important; text-shadow: 0 0 9px var(--hud-cyan); }
.assistant-loading-surface { min-width: 108px; }
.hud-message-loading .hud-avatar-node { animation: hud-node-pulse 1.6s ease-in-out infinite; }
.voice-pill {
    border: 1px solid rgba(50, 246, 255, 0.32);
    border-radius: 2px !important;
    background: rgba(0, 14, 27, 0.72) !important;
}
.voice-pill-btn { border-radius: 2px !important; background: rgba(50, 246, 255, 0.13) !important; color: var(--hud-cyan) !important; }
.voice-pill-fill { background: linear-gradient(90deg, var(--hud-cyan), var(--hud-magenta)) !important; }
.context-divider { color: var(--hud-muted) !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.context-divider::before, .context-divider::after { background: linear-gradient(90deg, transparent, var(--hud-cyan), transparent) !important; }

/* Composer */
#view-chat > .flex-shrink-0 {
    position: relative;
    z-index: 20;
    margin: 10px 14px 12px;
    padding: 8px 10px max(8px, env(safe-area-inset-bottom)) !important;
    border: 1px solid transparent !important;
    border-radius: 3px;
    background:
        linear-gradient(180deg, rgba(3, 13, 26, 0.96), rgba(2, 8, 18, 0.98)) padding-box,
        linear-gradient(135deg, rgba(255, 58, 200, 0.7), rgba(50, 246, 255, 0.74) 48%, rgba(255, 58, 200, 0.62)) border-box !important;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.2), 0 0 14px rgba(255, 58, 200, 0.1);
}
#view-chat > .flex-shrink-0 > .max-w-3xl { max-width: 1120px !important; }
#chat-input-shell {
    position: relative;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end !important;
    gap: 8px !important;
    padding: 5px;
    border: 1px solid rgba(157, 101, 255, 0.7);
    border-radius: 3px !important;
    background:
        linear-gradient(110deg, rgba(6, 34, 50, 0.91), rgba(10, 14, 34, 0.94) 65%, rgba(33, 9, 50, 0.85));
    box-shadow: inset 0 0 18px rgba(50, 246, 255, 0.06), 0 0 0 1px rgba(255, 58, 200, 0.12), 0 11px 31px rgba(0, 0, 0, 0.3);
    overflow: visible !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#chat-input-shell::before,
#chat-input-shell::after {
    content: "";
    position: absolute;
    width: 62px;
    height: 2px;
    pointer-events: none;
}
#chat-input-shell::before {
    left: 12px;
    top: -1px;
    background: linear-gradient(90deg, var(--hud-magenta), transparent);
    box-shadow: 0 0 10px var(--hud-magenta);
}
#chat-input-shell::after {
    right: 12px;
    bottom: -1px;
    background: linear-gradient(90deg, transparent, var(--hud-cyan));
    box-shadow: 0 0 10px var(--hud-cyan);
}
#chat-input-shell:focus-within {
    border-color: var(--hud-cyan);
    box-shadow: inset 0 0 23px rgba(50, 246, 255, 0.12), var(--hud-glow-cyan), 0 0 0 1px rgba(255, 58, 200, 0.46);
}
#chat-input-actions { gap: 5px; }
#chat-input-actions button, #mic-btn, #send-btn {
    border: 1px solid rgba(255, 58, 200, 0.5) !important;
    border-radius: 2px !important;
    color: #ff8cdf !important;
    background: rgba(24, 6, 35, 0.62) !important;
    box-shadow: inset 0 0 12px rgba(255, 58, 200, 0.05);
}
#chat-input-actions button:hover, #mic-btn:hover {
    color: var(--hud-cyan) !important;
    border-color: rgba(50, 246, 255, 0.38);
    background: rgba(50, 246, 255, 0.12) !important;
    box-shadow: inset 0 0 12px rgba(50, 246, 255, 0.1);
}
#chat-input-shell > .flex-1 {
    align-self: stretch;
    border: 1px solid rgba(139, 205, 229, 0.2);
    border-radius: 2px;
    background: rgba(1, 9, 18, 0.62);
}
#new-chat-btn {
    border-color: rgba(50, 246, 255, 0.58) !important;
    color: var(--hud-cyan) !important;
    background: rgba(5, 34, 45, 0.58) !important;
}
#chat-input {
    min-height: 44px !important;
    max-height: 160px !important;
    padding: 10px 47px 10px 14px !important;
    border: 0 !important;
    border-radius: 2px !important;
    background: transparent !important;
    color: var(--hud-text) !important;
    box-shadow: none !important;
}
#chat-input::placeholder { color: rgba(142, 185, 205, 0.58) !important; }
#chat-input:focus { border: 0 !important; }
#mic-btn { right: 6px !important; color: #ff8cdf !important; }
#send-btn {
    width: 48px !important;
    height: 44px !important;
    border-color: var(--hud-cyan) !important;
    color: var(--hud-cyan) !important;
    background: linear-gradient(135deg, rgba(3, 42, 58, 0.96), rgba(20, 21, 68, 0.96)) !important;
    box-shadow: var(--hud-glow-cyan);
}
#send-btn:hover:not(:disabled) {
    color: #001419 !important;
    background: linear-gradient(135deg, #c0ffff, var(--hud-cyan)) !important;
    transform: translateY(-1px);
}
#send-btn:disabled {
    border-color: rgba(50, 246, 255, 0.36) !important;
    color: rgba(50, 246, 255, 0.46) !important;
    background: rgba(4, 24, 40, 0.76) !important;
    box-shadow: inset 0 0 12px rgba(50, 246, 255, 0.04);
}
#attachment-preview {
    position: relative;
    margin: 0 0 8px !important;
    border: 1px solid rgba(50, 246, 255, 0.3);
    border-radius: 2px !important;
    background: rgba(5, 20, 33, 0.92) !important;
}
#attach-menu, .slash-menu {
    z-index: 80 !important;
    border: 1px solid rgba(50, 246, 255, 0.55) !important;
    border-radius: 2px !important;
    background: rgba(4, 16, 28, 0.98) !important;
    box-shadow: var(--hud-shadow), var(--hud-glow-cyan);
}
.attach-menu-item { color: var(--hud-text) !important; border-radius: 0 !important; }
.attach-menu-item:hover { color: var(--hud-cyan-soft) !important; background: rgba(50, 246, 255, 0.12) !important; }
#scroll-to-bottom-btn {
    position: absolute !important;
    right: 24px !important;
    bottom: 105px !important;
    border: 1px solid var(--hud-cyan) !important;
    border-radius: 2px !important;
    color: var(--hud-cyan) !important;
    background: rgba(3, 18, 30, 0.88) !important;
    box-shadow: var(--hud-glow-cyan);
}

/* All business views share a restrained HUD grid, rather than the chat city art. */
#view-config > div, #view-skills > div, #view-memory > div, #view-knowledge > div,
#view-models > div, #view-channels > div, #view-tasks > div, #view-admin > div, #view-logs > div {
    background: transparent !important;
}
#content-area .max-w-4xl > .flex.items-center.justify-between.mb-6,
#content-area .max-w-5xl > .flex.items-center.justify-between.mb-6,
#content-area .max-w-6xl > .mb-6 {
    position: relative;
    padding: 0 0 14px;
    border-bottom: 1px solid rgba(50, 246, 255, 0.25);
}
#content-area .max-w-4xl > .flex.items-center.justify-between.mb-6::after,
#content-area .max-w-5xl > .flex.items-center.justify-between.mb-6::after,
#content-area .max-w-6xl > .mb-6::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 84px;
    height: 2px;
    background: linear-gradient(90deg, var(--hud-cyan), var(--hud-magenta));
    box-shadow: 0 0 12px var(--hud-cyan);
}
#content-area h2, #content-area h3 { color: var(--hud-text) !important; }
#content-area h2 { letter-spacing: 0; }
#content-area p, #content-area .text-slate-500, #content-area .dark\:text-slate-400 { color: var(--hud-muted) !important; }

/* Cards, forms, tables, tabs, and dynamically generated dashboard content. */
#content-area .bg-white,
#content-area .dark\:bg-\[\#1A1A1A\],
#content-area .dark\:bg-white\/5,
#content-area .dark\:bg-slate-900,
#content-area .placeholder-card,
#content-area .skill-card,
#content-area .knowledge-card,
#content-area .channel-card,
#content-area .task-card,
#content-area .model-card {
    border: 1px solid rgba(50, 246, 255, 0.28) !important;
    border-radius: 3px !important;
    background: linear-gradient(135deg, rgba(7, 28, 45, 0.82), rgba(5, 13, 27, 0.92)) !important;
    box-shadow: inset 0 0 24px rgba(50, 246, 255, 0.025), 0 13px 32px rgba(0, 0, 0, 0.2);
}
#content-area .border-slate-200, #content-area .dark\:border-white\/10, #content-area .border-white\/10 {
    border-color: rgba(50, 246, 255, 0.25) !important;
}
#login-overlay input:not([type="file"]) {
    border: 1px solid rgba(117, 204, 233, 0.32) !important;
    border-radius: 2px !important;
    background: rgba(2, 13, 25, 0.82) !important;
    color: var(--hud-text) !important;
    box-shadow: inset 0 0 13px rgba(50, 246, 255, 0.025);
}
#login-overlay input:focus {
    border-color: var(--hud-cyan) !important;
    box-shadow: 0 0 0 2px rgba(50, 246, 255, 0.12), var(--hud-glow-cyan) !important;
}
#login-overlay input:-webkit-autofill,
#login-overlay input:-webkit-autofill:hover,
#login-overlay input:-webkit-autofill:focus,
#login-overlay input:autofill {
    border-color: rgba(50, 246, 255, 0.72) !important;
    background: #061525 !important;
    color: var(--hud-text) !important;
    caret-color: var(--hud-cyan);
    -webkit-text-fill-color: var(--hud-text) !important;
    -webkit-box-shadow:
        0 0 0 1000px #061525 inset,
        inset 0 0 18px rgba(50, 246, 255, 0.1),
        0 0 10px rgba(50, 246, 255, 0.12) !important;
    box-shadow:
        0 0 0 1000px #061525 inset,
        inset 0 0 18px rgba(50, 246, 255, 0.1),
        0 0 10px rgba(50, 246, 255, 0.12) !important;
    transition: background-color 9999s ease-out 0s;
}

/* Unified hard-surface controls for every console view except chat.
   Native toggles/ranges and the fantasy workbench keep their own controls. */
#content-area .view:not(#view-chat) :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.fantasy-age-input), textarea:not(.fantasy-textarea), select) {
    min-height: 46px;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    outline: none;
    clip-path: var(--hud-cut-control);
    color: var(--hud-text) !important;
    background:
        linear-gradient(108deg, rgba(4, 24, 39, 0.98), rgba(5, 12, 31, 0.98) 72%, rgba(25, 8, 42, 0.96)) padding-box,
        var(--hud-border-spectrum) border-box !important;
    box-shadow:
        inset 0 0 0 1px rgba(94, 226, 255, 0.08),
        inset 0 0 18px rgba(43, 189, 255, 0.035) !important;
    filter:
        drop-shadow(0 0 6px rgba(50, 246, 255, 0.12))
        drop-shadow(0 0 8px rgba(255, 58, 200, 0.07));
    transition:
        color 0.18s ease,
        background 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease !important;
}

#content-area .view:not(#view-chat) :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.fantasy-age-input), textarea:not(.fantasy-textarea), select):hover {
    background:
        linear-gradient(108deg, rgba(8, 35, 53, 0.99), rgba(8, 14, 39, 0.99) 68%, rgba(39, 10, 56, 0.97)) padding-box,
        linear-gradient(105deg, var(--hud-hot-pink), var(--hud-cyan) 52%, var(--hud-violet)) border-box !important;
    filter:
        drop-shadow(0 0 8px rgba(50, 246, 255, 0.22))
        drop-shadow(0 0 10px rgba(255, 58, 200, 0.13));
}

#content-area .view:not(#view-chat) :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.fantasy-age-input), textarea:not(.fantasy-textarea), select):focus {
    border-color: transparent !important;
    background:
        linear-gradient(108deg, rgba(8, 39, 57, 0.99), rgba(7, 13, 39, 0.99) 66%, rgba(46, 10, 61, 0.98)) padding-box,
        linear-gradient(105deg, var(--hud-cyan), #718cff 48%, var(--hud-hot-pink)) border-box !important;
    box-shadow:
        inset 0 0 0 1px rgba(133, 248, 255, 0.14),
        inset 0 0 22px rgba(50, 246, 255, 0.07) !important;
    filter:
        drop-shadow(0 0 8px rgba(50, 246, 255, 0.48))
        drop-shadow(0 0 13px rgba(255, 58, 200, 0.22));
}

#content-area .view:not(#view-chat) :is(input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.fantasy-age-input), textarea:not(.fantasy-textarea))::placeholder {
    color: rgba(120, 161, 184, 0.62) !important;
}

#content-area .view:not(#view-chat) label.font-medium {
    position: relative;
    padding-left: 10px;
    color: rgba(143, 214, 235, 0.82) !important;
}

#content-area .view:not(#view-chat) label.font-medium::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.24em;
    width: 2px;
    height: 0.8em;
    background: linear-gradient(var(--hud-cyan), var(--hud-magenta));
    box-shadow: 0 0 7px rgba(50, 246, 255, 0.52);
}

#content-area button:not(.fantasy-planet), #login-overlay button {
    border-radius: 2px !important;
}
#content-area .bg-primary-500, #content-area .bg-primary-400, #login-btn,
#content-area button[class*="bg-primary"] {
    border: 1px solid var(--hud-cyan) !important;
    color: #001418 !important;
    background: linear-gradient(135deg, var(--hud-cyan), #6fb9ff) !important;
    box-shadow: 0 0 14px rgba(50, 246, 255, 0.45);
}
#content-area .bg-primary-500:hover, #content-area .bg-primary-400:hover, #login-btn:hover,
#content-area button[class*="bg-primary"]:hover {
    background: linear-gradient(135deg, #c6ffff, var(--hud-cyan)) !important;
}
.cfg-dropdown { z-index: 10; }
.cfg-dropdown-selected {
    min-height: 42px;
    color: var(--hud-text) !important;
    background:
        linear-gradient(rgba(3, 16, 28, 0.94), rgba(3, 16, 28, 0.94)) padding-box,
        linear-gradient(135deg, rgba(50, 246, 255, 0.68), rgba(157, 101, 255, 0.34)) border-box !important;
}
.cfg-dropdown.open .cfg-dropdown-selected, .cfg-dropdown:focus .cfg-dropdown-selected {
    border-color: var(--hud-cyan) !important;
    box-shadow: var(--hud-glow-cyan);
}
.cfg-dropdown-menu {
    z-index: 90 !important;
    overflow-y: auto !important;
    background:
        linear-gradient(rgba(3, 16, 28, 0.98), rgba(3, 16, 28, 0.98)) padding-box,
        linear-gradient(135deg, var(--hud-cyan), var(--hud-magenta)) border-box !important;
}
.cfg-dropdown-item { color: var(--hud-text) !important; border-radius: 1px !important; }
.cfg-dropdown-item:hover, .cfg-dropdown-item.active { background: rgba(50, 246, 255, 0.12) !important; color: var(--hud-cyan-soft) !important; }

/* Business-view dropdowns use the same hard-surface language as vendor
   credentials. Raising the open card lets menus cross later card siblings. */
#view-models #models-content {
    position: relative;
    overflow: visible;
    isolation: isolate;
}

#view-models #models-content > div {
    position: relative;
    z-index: 1;
    overflow: visible;
}

#content-area .view:not(#view-chat) :is(.bg-white, .channel-card, .model-card):has(.cfg-dropdown.open) {
    position: relative;
    z-index: 140;
    overflow: visible;
}

#view-models [data-cap-body] {
    position: relative;
    overflow: visible;
}

#content-area .view:not(#view-chat) .cfg-dropdown {
    z-index: 10;
}

#content-area .view:not(#view-chat) .cfg-dropdown.open {
    z-index: 180;
}

#content-area .view:not(#view-chat) .cfg-dropdown-selected {
    position: relative;
    min-height: 46px;
    height: 46px;
    overflow: hidden;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    clip-path: var(--hud-cut-control);
    color: var(--hud-text) !important;
    background:
        linear-gradient(108deg, rgba(4, 24, 39, 0.98), rgba(5, 12, 31, 0.98) 72%, rgba(25, 8, 42, 0.96)) padding-box,
        var(--hud-border-spectrum) border-box !important;
    box-shadow:
        inset 0 0 0 1px rgba(94, 226, 255, 0.08),
        inset 0 0 18px rgba(43, 189, 255, 0.035) !important;
    filter:
        drop-shadow(0 0 6px rgba(50, 246, 255, 0.14))
        drop-shadow(0 0 8px rgba(255, 58, 200, 0.08));
}

#content-area .view:not(#view-chat) .cfg-dropdown-selected::before {
    content: "";
    position: absolute;
    top: 0;
    left: 13px;
    width: 62px;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--hud-magenta), var(--hud-cyan));
    box-shadow: 0 0 8px rgba(50, 246, 255, 0.54);
}

#content-area .view:not(#view-chat) .cfg-dropdown-text {
    min-width: 0;
    overflow: hidden;
    color: #e7f7ff;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#content-area .view:not(#view-chat) .cfg-dropdown-arrow {
    color: rgba(143, 251, 255, 0.7);
    text-shadow: 0 0 8px rgba(50, 246, 255, 0.42);
}

#content-area .view:not(#view-chat) .cfg-dropdown-selected:hover {
    color: #fff !important;
    background:
        linear-gradient(108deg, rgba(8, 35, 53, 0.99), rgba(8, 14, 39, 0.99) 68%, rgba(39, 10, 56, 0.97)) padding-box,
        linear-gradient(105deg, var(--hud-hot-pink), var(--hud-cyan) 52%, var(--hud-violet)) border-box !important;
    filter:
        drop-shadow(0 0 8px rgba(50, 246, 255, 0.25))
        drop-shadow(0 0 11px rgba(255, 58, 200, 0.16));
}

#content-area .view:not(#view-chat) .cfg-dropdown.open .cfg-dropdown-selected,
#content-area .view:not(#view-chat) .cfg-dropdown:focus .cfg-dropdown-selected {
    border-color: transparent !important;
    background:
        linear-gradient(108deg, rgba(8, 39, 57, 0.99), rgba(7, 13, 39, 0.99) 66%, rgba(46, 10, 61, 0.98)) padding-box,
        linear-gradient(105deg, var(--hud-cyan), #718cff 48%, var(--hud-hot-pink)) border-box !important;
    box-shadow:
        inset 0 0 0 1px rgba(133, 248, 255, 0.14),
        inset 0 0 22px rgba(50, 246, 255, 0.07) !important;
    filter:
        drop-shadow(0 0 8px rgba(50, 246, 255, 0.52))
        drop-shadow(0 0 13px rgba(255, 58, 200, 0.24));
}

#content-area .view:not(#view-chat) .cfg-dropdown-menu {
    top: calc(100% + 6px);
    z-index: 190 !important;
    max-height: min(320px, 42vh);
    padding: 7px;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    clip-path: var(--hud-cut-wide);
    background:
        linear-gradient(145deg, rgba(3, 20, 34, 0.995), rgba(4, 8, 24, 0.995) 66%, rgba(25, 7, 38, 0.99)) padding-box,
        var(--hud-border-spectrum) border-box !important;
    box-shadow:
        inset 0 0 0 1px rgba(105, 231, 255, 0.09),
        inset 0 0 28px rgba(76, 55, 166, 0.055),
        0 18px 38px rgba(0, 0, 0, 0.48) !important;
    filter:
        drop-shadow(0 0 9px rgba(50, 246, 255, 0.22))
        drop-shadow(0 0 13px rgba(255, 58, 200, 0.15));
}

#content-area .view:not(#view-chat) .cfg-dropdown-item {
    min-height: 40px;
    margin: 1px 0;
    padding: 9px 12px;
    border-left: 2px solid transparent;
    background: linear-gradient(90deg, rgba(20, 42, 62, 0), rgba(20, 42, 62, 0));
}

#content-area .view:not(#view-chat) .cfg-dropdown-item:hover,
#content-area .view:not(#view-chat) .cfg-dropdown-item.active {
    border-left-color: var(--hud-cyan);
    background:
        linear-gradient(90deg, rgba(50, 246, 255, 0.17), rgba(38, 73, 118, 0.13) 58%, rgba(255, 58, 200, 0.08)) !important;
    box-shadow: inset 0 0 17px rgba(50, 246, 255, 0.035);
}

#content-area .view:not(#view-chat) .cfg-dropdown-item.active::after {
    color: var(--hud-cyan);
    text-shadow: 0 0 8px rgba(50, 246, 255, 0.72);
}

.memory-tab, .knowledge-tab, .admin-tab {
    border-radius: 0 !important;
    color: var(--hud-muted) !important;
    border-bottom-color: transparent !important;
}
.memory-tab.active, .knowledge-tab.active, .admin-tab.active {
    color: var(--hud-cyan) !important;
    border-bottom-color: var(--hud-cyan) !important;
    box-shadow: inset 0 -2px 0 var(--hud-cyan), 0 8px 14px rgba(50, 246, 255, 0.08);
}
table { color: var(--hud-text) !important; }
th { color: var(--hud-cyan-soft) !important; background: rgba(50, 246, 255, 0.08) !important; }
th, td { border-color: rgba(50, 246, 255, 0.2) !important; }
tr:hover td { background: rgba(50, 246, 255, 0.045); }

/* Login and dialogs */
#login-overlay {
    background:
        linear-gradient(90deg, rgba(1, 4, 14, 0.9) 0%, rgba(1, 5, 15, 0.58) 49%, rgba(4, 2, 13, 0.62) 100%),
        linear-gradient(180deg, rgba(1, 4, 12, 0.4), rgba(1, 3, 10, 0.72)),
        url("../assets/cyber-city-desktop.png") center right / cover no-repeat,
        #020611 !important;
}
#login-overlay > div {
    position: relative;
    isolation: isolate;
    overflow: visible;
    padding: 32px 28px 28px;
    border: 1px solid transparent;
    border-radius: 0;
    clip-path: var(--hud-cut-wide);
    background:
        linear-gradient(145deg, rgba(5, 20, 37, 0.97), rgba(3, 8, 22, 0.985)) padding-box,
        var(--hud-border-spectrum) border-box;
    box-shadow:
        inset 0 0 0 1px rgba(50, 246, 255, 0.08),
        inset 0 0 38px rgba(77, 47, 157, 0.06),
        0 0 18px rgba(50, 246, 255, 0.24),
        0 0 34px rgba(255, 58, 200, 0.18),
        0 28px 65px rgba(0, 0, 0, 0.62);
}
#login-overlay > div::before {
    content: "AUTHORIZATION";
    position: absolute;
    top: 10px;
    left: 14px;
    color: rgba(143, 251, 255, 0.58);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 8px;
    letter-spacing: 0;
}
#login-overlay > div::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 9px;
    pointer-events: none;
    clip-path: var(--hud-cut-wide);
    border: 1px solid rgba(50, 246, 255, 0.14);
    background:
        linear-gradient(90deg, var(--hud-magenta), transparent 34%) top left / 92px 2px no-repeat,
        linear-gradient(90deg, transparent, var(--hud-cyan)) bottom right / 118px 2px no-repeat;
}
#login-overlay img { border-radius: 2px !important; box-shadow: var(--hud-glow-cyan); }
#login-overlay h1 { color: #fff !important; }
#login-overlay .bg-slate-200, #login-overlay .dark\:bg-white\/5 { background: rgba(50, 246, 255, 0.08) !important; border-radius: 2px !important; }
#login-overlay .auth-mode-btn { color: var(--hud-muted) !important; border-radius: 2px !important; }
#login-overlay .auth-mode-btn.bg-white, #login-overlay .auth-mode-btn.dark\:bg-\[\#262626\] {
    color: var(--hud-cyan-soft) !important;
    background: rgba(50, 246, 255, 0.14) !important;
    box-shadow: inset 0 0 0 1px rgba(50, 246, 255, 0.35);
}
#confirm-dialog-overlay, #password-modal-overlay, #vendor-modal-overlay { background: rgba(0, 4, 11, 0.75) !important; backdrop-filter: blur(7px); }
#confirm-dialog-overlay > div, #password-modal-overlay > div, #vendor-modal-overlay > div {
    overflow: visible !important;
    background:
        linear-gradient(rgba(7, 25, 42, 0.98), rgba(3, 11, 23, 0.99)) padding-box,
        linear-gradient(135deg, var(--hud-cyan), var(--hud-magenta)) border-box !important;
}
#confirm-dialog-overlay .border-t, #password-modal-overlay .border-t, #vendor-modal-overlay .border-t { border-color: rgba(50, 246, 255, 0.23) !important; }

/* Logs and life simulator use the same colors without reducing data density. */
#log-output {
    border-top: 1px solid rgba(50, 246, 255, 0.2);
    background: rgba(1, 8, 16, 0.88) !important;
    color: #b8e9f4 !important;
}
.log-line-info { background-color: rgba(50, 246, 255, 0.08) !important; }
.log-line-warning { background-color: rgba(255, 211, 77, 0.12) !important; color: #ffe497 !important; }
.log-line-error, .log-line-critical { background-color: rgba(255, 77, 112, 0.14) !important; color: #ffb5c5 !important; }

#view-memory.fantasy-memory-view, .fantasy-workbench, .fantasy-stage, .fantasy-space {
    background: #030914 !important;
}

#view-memory.fantasy-memory-view .fantasy-space {
    background:
        linear-gradient(180deg, rgba(0, 4, 10, 0.08), rgba(0, 4, 10, 0.28)),
        radial-gradient(ellipse at 50% 48%, transparent 26%, rgba(0, 3, 9, 0.16) 68%, rgba(0, 2, 7, 0.56) 100%),
        url("../assets/deep-space-starfield.png") center center / cover no-repeat,
        #01050b !important;
}
.fantasy-console, .fantasy-story-drawer {
    border-color: rgba(50, 246, 255, 0.3) !important;
    background: linear-gradient(180deg, rgba(7, 26, 43, 0.97), rgba(2, 9, 18, 0.99)) !important;
}
.fantasy-console-head, .fantasy-stage-top, .fantasy-drawer-head { border-color: rgba(50, 246, 255, 0.25) !important; }
.fantasy-title, .fantasy-drawer-head h3, .fantasy-record-title, .fantasy-age-card strong { color: var(--hud-text) !important; }
.fantasy-kicker, .fantasy-muted, .fantasy-record-meta, .fantasy-drawer-head span { color: var(--hud-muted) !important; }
.fantasy-mode-btn, .fantasy-action-btn, .fantasy-icon-btn, .fantasy-record, .fantasy-empty-record, .fantasy-age-card, .fantasy-stream-panel, .fantasy-skill-card {
    border-color: rgba(50, 246, 255, 0.26) !important;
    border-radius: 2px !important;
    background: rgba(4, 20, 35, 0.78) !important;
    color: var(--hud-text) !important;
}
.fantasy-mode-btn.active, .fantasy-action-btn.active, .fantasy-action-btn.secondary, .fantasy-icon-btn.primary {
    border-color: var(--hud-cyan) !important;
    background: linear-gradient(135deg, rgba(50, 246, 255, 0.24), rgba(157, 101, 255, 0.24)) !important;
    color: var(--hud-cyan-soft) !important;
    box-shadow: var(--hud-glow-cyan);
}
.fantasy-action-btn:hover, .fantasy-icon-btn:hover, .fantasy-record:hover, .fantasy-record.selected {
    border-color: var(--hud-magenta) !important;
    background: rgba(255, 58, 200, 0.08) !important;
}
.fantasy-record-badge { border-radius: 2px !important; background: rgba(50, 246, 255, 0.12) !important; color: var(--hud-cyan-soft) !important; }
.fantasy-stage-label, .fantasy-planet-label {
    border-color: rgba(50, 246, 255, 0.48) !important;
    border-radius: 2px !important;
    background: rgba(3, 16, 29, 0.78) !important;
    color: var(--hud-text) !important;
}
.fantasy-stage-label.hovered, .fantasy-stage-label.selected, .fantasy-stage-label.generating {
    border-color: var(--hud-cyan) !important;
    background: rgba(6, 36, 54, 0.9) !important;
    color: var(--hud-cyan-soft) !important;
    filter: drop-shadow(0 0 10px rgba(50, 246, 255, 0.46)) !important;
}

/* Hard-surface HUD refinements: light is concentrated on edges, nodes, and controls. */
:root {
    --hud-electric-blue: #2bbdff;
    --hud-hot-pink: #ff4fd8;
    --hud-panel-black: rgba(3, 9, 24, 0.94);
    --hud-cut-control: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
    --hud-cut-wide: polygon(15px 0, calc(100% - 22px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 15px) 100%, 11px 100%, 0 calc(100% - 11px), 0 15px);
    --hud-border-spectrum: linear-gradient(106deg, #ff3ccf 0%, #762fa9 14%, #263c8e 34%, #2cf4ff 51%, #336cff 68%, #ff45cf 100%);
    --hud-inset-line: inset 0 0 0 1px rgba(114, 236, 255, 0.1);
}

/* Compact technical trim for container edges. */
#main-content > header,
.session-panel,
#chat-messages,
#view-chat > .flex-shrink-0,
#welcome-screen,
#content-area .bg-white,
#content-area .dark\:bg-\[\#1A1A1A\],
#content-area .dark\:bg-white\/5,
#content-area .dark\:bg-slate-900,
#content-area .placeholder-card,
#content-area .skill-card,
#content-area .knowledge-card,
#content-area .channel-card,
#content-area .task-card,
#content-area .model-card {
    border-color: transparent !important;
    background:
        linear-gradient(180deg, rgba(9, 24, 45, 0.94), var(--hud-panel-black)) padding-box,
        var(--hud-border-spectrum) border-box !important;
    box-shadow:
        var(--hud-inset-line),
        inset 0 0 26px rgba(56, 80, 172, 0.045),
        0 0 18px rgba(50, 246, 255, 0.07),
        0 0 26px rgba(255, 58, 200, 0.055) !important;
}

#main-content > header {
    background:
        linear-gradient(90deg, rgba(4, 18, 36, 0.99), rgba(7, 14, 34, 0.96) 64%, rgba(31, 9, 50, 0.9)) padding-box,
        linear-gradient(90deg, rgba(255, 65, 207, 0.84), rgba(44, 244, 255, 0.72) 34%, rgba(255, 65, 207, 0.78)) border-box !important;
    box-shadow: var(--hud-inset-line), 0 6px 28px rgba(5, 0, 24, 0.32) !important;
}

.session-panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(6, 20, 40, 0.99), rgba(2, 8, 19, 0.99)) padding-box,
        linear-gradient(180deg, rgba(255, 68, 211, 0.72), rgba(46, 238, 255, 0.7) 43%, rgba(255, 68, 211, 0.54)) border-box !important;
}

.session-panel-header,
#sidebar > div:first-child {
    background-image:
        linear-gradient(90deg, rgba(44, 244, 255, 0.12), transparent 44%),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(79, 222, 255, 0.14) 22px 24px, transparent 24px 45px) !important;
}

.session-panel-new,
#chat-input-actions button,
#mic-btn,
#send-btn,
#scroll-to-bottom-btn,
#content-area .bg-primary-500,
#content-area .bg-primary-400,
#content-area button[class*="bg-primary"],
#login-btn {
    isolation: isolate;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    clip-path: var(--hud-cut-control);
    background:
        linear-gradient(135deg, rgba(9, 34, 57, 0.96), rgba(7, 12, 34, 0.98)) padding-box,
        linear-gradient(112deg, rgba(255, 65, 207, 0.88), rgba(43, 244, 255, 0.78) 48%, rgba(111, 88, 255, 0.84)) border-box !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 7px rgba(50, 246, 255, 0.15)) drop-shadow(0 0 9px rgba(255, 58, 200, 0.1));
    transition: color 0.18s ease, transform 0.18s ease, filter 0.18s ease, background 0.18s ease !important;
}

.session-panel-new,
#chat-input-actions button,
#send-btn,
#scroll-to-bottom-btn,
#content-area .bg-primary-500,
#content-area .bg-primary-400,
#content-area button[class*="bg-primary"],
#login-btn {
    position: relative;
    overflow: hidden;
}

.session-panel-new::before,
#chat-input-actions button::before,
#send-btn::before,
#scroll-to-bottom-btn::before,
#content-area .bg-primary-500::before,
#content-area .bg-primary-400::before,
#content-area button[class*="bg-primary"]::before,
#login-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 34%;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(223, 255, 255, 0.72), transparent);
    transform: skewX(-22deg);
    transition: left 0.32s ease, opacity 0.2s ease;
}

.session-panel-new:hover,
#chat-input-actions button:hover,
#mic-btn:hover,
#scroll-to-bottom-btn:hover,
#content-area .bg-primary-500:hover,
#content-area .bg-primary-400:hover,
#content-area button[class*="bg-primary"]:hover,
#login-btn:hover {
    color: #eaffff !important;
    background:
        linear-gradient(135deg, rgba(28, 14, 64, 0.98), rgba(6, 49, 69, 0.98)) padding-box,
        linear-gradient(112deg, var(--hud-hot-pink), var(--hud-cyan) 48%, var(--hud-violet)) border-box !important;
    filter: drop-shadow(0 0 8px rgba(50, 246, 255, 0.34)) drop-shadow(0 0 13px rgba(255, 58, 200, 0.25));
    transform: translateY(-1px);
}

.session-panel-new:hover::before,
#chat-input-actions button:hover::before,
#send-btn:hover::before,
#scroll-to-bottom-btn:hover::before,
#content-area .bg-primary-500:hover::before,
#content-area .bg-primary-400:hover::before,
#content-area button[class*="bg-primary"]:hover::before,
#login-btn:hover::before {
    left: 110%;
    opacity: 0.72;
}

#send-btn,
#content-area .bg-primary-500,
#content-area .bg-primary-400,
#content-area button[class*="bg-primary"],
#login-btn {
    color: #eaffff !important;
    background:
        linear-gradient(117deg, rgba(12, 67, 86, 0.98), rgba(50, 21, 94, 0.98)) padding-box,
        linear-gradient(112deg, var(--hud-cyan), #7b9cff 42%, var(--hud-hot-pink)) border-box !important;
    filter: drop-shadow(0 0 8px rgba(50, 246, 255, 0.4)) drop-shadow(0 0 13px rgba(255, 58, 200, 0.24));
}

#send-btn::after,
#content-area .bg-primary-500::after,
#content-area .bg-primary-400::after,
#content-area button[class*="bg-primary"]::after,
#login-btn::after {
    content: "";
    position: absolute;
    right: 9px;
    bottom: 3px;
    width: 15px;
    height: 2px;
    background: var(--hud-cyan);
    box-shadow: 0 0 8px var(--hud-cyan);
}

#mic-btn {
    color: #ff98e4 !important;
    background:
        linear-gradient(135deg, rgba(40, 8, 58, 0.96), rgba(8, 25, 48, 0.97)) padding-box,
        linear-gradient(112deg, rgba(255, 65, 207, 0.88), rgba(43, 244, 255, 0.74)) border-box !important;
}

#chat-input-shell {
    border-color: transparent !important;
    background:
        linear-gradient(110deg, rgba(4, 23, 43, 0.97), rgba(9, 11, 35, 0.98) 66%, rgba(36, 8, 56, 0.93)) padding-box,
        var(--hud-border-spectrum) border-box !important;
    box-shadow:
        var(--hud-inset-line),
        inset 0 0 22px rgba(54, 221, 255, 0.06),
        0 0 17px rgba(255, 58, 200, 0.12),
        0 15px 33px rgba(0, 0, 0, 0.33) !important;
}

#chat-input-shell::before {
    width: 95px;
    background: linear-gradient(90deg, var(--hud-hot-pink), rgba(255, 79, 216, 0.1), transparent);
}

#chat-input-shell::after {
    width: 95px;
    background: linear-gradient(90deg, transparent, rgba(43, 189, 255, 0.1), var(--hud-cyan));
}

#chat-messages {
    border: 1px solid rgba(50, 246, 255, 0.72) !important;
    border-image: var(--hud-border-spectrum) 1 !important;
    clip-path: var(--hud-cut-wide);
    background: rgba(1, 6, 17, 0.34) !important;
    box-shadow:
        var(--hud-inset-line),
        inset 0 0 0 7px rgba(1, 6, 19, 0.23),
        inset 0 0 46px rgba(52, 56, 142, 0.08),
        0 0 19px rgba(50, 246, 255, 0.12),
        0 0 28px rgba(255, 58, 200, 0.12) !important;
}

#view-chat::before {
    opacity: 0.92;
    background-position: center right;
}

#view-chat::after {
    background:
        linear-gradient(90deg, rgba(1, 5, 15, 0.58) 0%, rgba(1, 5, 15, 0.24) 52%, rgba(2, 4, 14, 0.3) 100%),
        linear-gradient(180deg, rgba(1, 5, 15, 0.06) 0%, rgba(1, 5, 15, 0.5) 100%);
}

#chat-messages::before {
    clip-path: var(--hud-cut-control);
    color: #ffc4f1;
    background:
        linear-gradient(90deg, rgba(255, 58, 200, 0.25), rgba(18, 11, 47, 0.88) 48%, rgba(43, 189, 255, 0.18)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 91, 215, 0.24), 0 0 12px rgba(255, 58, 200, 0.18);
}

.hud-message-frame {
    border-radius: 0 !important;
    clip-path: var(--hud-cut-wide);
    box-shadow: var(--hud-inset-line), inset 0 0 21px rgba(74, 107, 206, 0.06) !important;
}

.hud-assistant-frame {
    background:
        linear-gradient(130deg, rgba(7, 31, 53, 0.98), rgba(4, 10, 28, 0.98)) padding-box,
        linear-gradient(112deg, var(--hud-cyan), rgba(53, 148, 255, 0.35) 48%, var(--hud-violet)) border-box !important;
}

.hud-user-frame {
    background:
        linear-gradient(130deg, rgba(39, 13, 74, 0.98), rgba(9, 16, 38, 0.98)) padding-box,
        linear-gradient(112deg, var(--hud-hot-pink), var(--hud-violet) 52%, var(--hud-cyan)) border-box !important;
}

.sidebar-item.active,
#sidebar .menu-group-items .sidebar-item.active,
.session-item.active {
    border-color: transparent !important;
    clip-path: var(--hud-cut-control);
    background:
        linear-gradient(95deg, rgba(32, 12, 65, 0.96), rgba(4, 42, 57, 0.94)) padding-box,
        linear-gradient(102deg, var(--hud-hot-pink), var(--hud-cyan) 51%, var(--hud-violet)) border-box !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 6px rgba(50, 246, 255, 0.28)) drop-shadow(0 0 11px rgba(255, 58, 200, 0.18));
}

#sidebar .menu-group-items {
    margin: 1px 0 10px !important;
    padding: 1px 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#sidebar .menu-group-items::before,
#sidebar .menu-group-items::after {
    display: none;
}

#sidebar .menu-group-items .sidebar-item {
    min-height: 42px;
    margin: 4px 2px !important;
    padding: 0 12px !important;
    gap: 10px !important;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    clip-path: var(--hud-cut-control);
    color: rgba(211, 239, 249, 0.7) !important;
    background:
        linear-gradient(96deg, rgba(5, 22, 40, 0.9), rgba(8, 11, 31, 0.92)) padding-box,
        linear-gradient(105deg, rgba(255, 79, 216, 0.34), rgba(50, 246, 255, 0.26) 56%, rgba(141, 107, 255, 0.3)) border-box !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 5px rgba(50, 246, 255, 0.08));
}

#sidebar .menu-group-items .sidebar-item:hover {
    color: var(--hud-cyan-soft) !important;
    background:
        linear-gradient(96deg, rgba(23, 12, 57, 0.94), rgba(4, 38, 54, 0.93)) padding-box,
        linear-gradient(102deg, var(--hud-hot-pink), var(--hud-cyan) 51%, var(--hud-violet)) border-box !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 6px rgba(50, 246, 255, 0.2)) drop-shadow(0 0 9px rgba(255, 58, 200, 0.12));
}

#sidebar .menu-group-items .sidebar-item.active {
    color: #fff !important;
    background:
        linear-gradient(95deg, rgba(32, 12, 65, 0.96), rgba(4, 42, 57, 0.94)) padding-box,
        linear-gradient(102deg, var(--hud-hot-pink), var(--hud-cyan) 51%, var(--hud-violet)) border-box !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 6px rgba(50, 246, 255, 0.28)) drop-shadow(0 0 11px rgba(255, 58, 200, 0.18));
}

.session-item {
    border-color: rgba(72, 140, 210, 0.28) !important;
    background:
        linear-gradient(180deg, rgba(11, 25, 49, 0.82), rgba(5, 11, 28, 0.88)) padding-box,
        linear-gradient(100deg, rgba(255, 65, 207, 0.35), rgba(43, 244, 255, 0.28)) border-box !important;
}

@keyframes hud-energy-sweep {
    0%, 58%, 100% { opacity: 0.25; transform: translateX(0); }
    72% { opacity: 0.92; transform: translateX(16px); }
}

.sidebar-item.active::after {
    content: "";
    position: absolute;
    right: 11px;
    top: 7px;
    width: 26px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hud-cyan));
    box-shadow: 0 0 9px var(--hud-cyan);
    animation: hud-energy-sweep 3.2s ease-in-out infinite;
}

/* Full-width command console inspired by the reference HUD control bar. */
#view-chat > .flex-shrink-0 {
    margin: 10px 14px 14px;
    padding: 7px 13px max(9px, env(safe-area-inset-bottom)) !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, rgba(9, 7, 29, 0.98), rgba(3, 6, 18, 0.99)) padding-box,
        linear-gradient(90deg, #ff52dd 0%, #913de1 9%, #30257e 23%, #27dfff 49%, #4158d8 69%, #ff51da 100%) border-box !important;
    box-shadow:
        inset 0 0 0 1px rgba(255, 112, 225, 0.16),
        inset 0 -15px 24px rgba(92, 21, 135, 0.12),
        0 0 12px rgba(255, 62, 207, 0.28),
        0 0 26px rgba(45, 221, 255, 0.14),
        0 16px 32px rgba(0, 0, 0, 0.44) !important;
}

#view-chat > .flex-shrink-0 > .max-w-3xl {
    max-width: 1320px !important;
}

#chat-input-shell {
    min-height: 62px;
    gap: 13px !important;
    padding: 7px 14px !important;
    border: 1px solid rgba(0, 240, 255, 0.22) !important;
    border-radius: 9999px !important;
    background: rgba(11, 13, 24, 0.92) !important;
    backdrop-filter: blur(18px) saturate(1.2) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.16),
        inset 0 0 16px rgba(0, 240, 255, 0.04),
        0 10px 30px rgba(0, 0, 0, 0.55) !important;
    isolation: isolate;
    transition: border-color 0.28s ease, box-shadow 0.28s ease !important;
}

#chat-input-shell::before {
    content: ;
    position: absolute;
    inset: -3px;
    border-radius: 9999px;
    background: conic-gradient(
        from 180deg at 50% 50%,
        #00f0ff 0deg,
        #ff2e93 120deg,
        #7928ca 240deg,
        #00f0ff 360deg
    );
    filter: blur(22px);
    opacity: 0.2;
    z-index: -1;
    pointer-events: none;
    transition: opacity 0.28s ease, filter 0.28s ease;
    animation: auroraGlowRotate 8s linear infinite;
}

#chat-input-shell::after {
    content: ;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(
        from 180deg at 50% 50%,
        #00f0ff 0deg,
        #ff2e93 120deg,
        #7928ca 240deg,
        #00f0ff 360deg
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: auroraGlowRotate 8s linear infinite;
}

#chat-input-shell:focus-within {
    border-color: transparent !important;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.28),
        inset 0 0 24px rgba(0, 240, 255, 0.12),
        0 0 24px rgba(0, 240, 255, 0.3),
        0 0 40px rgba(255, 46, 147, 0.2) !important;
}

#chat-input-shell:focus-within::before {
    opacity: 0.65 !important;
    filter: blur(28px) !important;
}

#chat-input-actions {
    gap: 11px !important;
    padding-left: 2px;
}

#chat-input-actions button,
#mic-btn,
#send-btn {
    width: 48px !important;
    height: 48px !important;
    min-height: 48px;
    border: 1px solid rgba(0, 240, 255, 0.35) !important;
    border-radius: 50% !important;
    clip-path: none !important;
    background:
        linear-gradient(135deg, rgba(29, 6, 44, 0.98), rgba(8, 7, 29, 0.98)) padding-box,
        linear-gradient(135deg, #ff64df, #822eae 48%, #ff62d9) border-box !important;
    color: #ff9ae7 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 6px rgba(255, 76, 217, 0.27));
}

#chat-input-actions button::before,
#mic-btn::before,
#send-btn::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    inset: 5px;
    border: 1px solid rgba(255, 126, 228, 0.2);
    clip-path: inherit;
}

#chat-input-actions button i,
#mic-btn i,
#send-btn i {
    position: relative;
    z-index: 1;
    font-size: 19px !important;
    text-shadow: 0 0 10px currentColor;
}

#chat-input-actions button:hover,
#mic-btn:hover {
    color: #fff1fb !important;
    background:
        linear-gradient(135deg, rgba(71, 12, 92, 0.99), rgba(14, 20, 57, 0.99)) padding-box,
        linear-gradient(135deg, #ff70e5, #2deeff 54%, #f954d2) border-box !important;
    filter: drop-shadow(0 0 8px rgba(255, 77, 217, 0.46)) drop-shadow(0 0 12px rgba(45, 238, 255, 0.22));
}

#meme-reply-toggle[aria-pressed="true"] {
    color: #eaffff !important;
    background:
        linear-gradient(135deg, rgba(13, 68, 82, 0.98), rgba(49, 13, 77, 0.98)) padding-box,
        linear-gradient(135deg, #2deeff, #8f65ff 48%, #ff58d6) border-box !important;
    box-shadow:
        inset 0 0 18px rgba(45, 238, 255, 0.22),
        0 0 0 1px rgba(45, 238, 255, 0.45) !important;
    outline: 1px solid rgba(255, 88, 214, 0.42);
    outline-offset: 2px;
    filter:
        drop-shadow(0 0 9px rgba(45, 238, 255, 0.5))
        drop-shadow(0 0 13px rgba(255, 88, 214, 0.3));
}

#meme-reply-toggle[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 5px;
    top: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hud-cyan);
    box-shadow: 0 0 10px var(--hud-cyan);
}

#new-chat-btn {
    color: #ff9ae7 !important;
    background:
        linear-gradient(135deg, rgba(36, 7, 55, 0.98), rgba(9, 7, 30, 0.98)) padding-box,
        linear-gradient(135deg, #ff66e1, #9733c7 48%, #ff66e1) border-box !important;
}

#chat-input-shell > .flex-1 {
    min-height: 48px;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background:
        linear-gradient(90deg, rgba(5, 7, 21, 0.98), rgba(9, 7, 27, 0.98)) padding-box,
        linear-gradient(90deg, rgba(255, 72, 214, 0.7), rgba(95, 45, 148, 0.32) 18%, rgba(39, 221, 255, 0.38) 80%, rgba(255, 72, 214, 0.58)) border-box !important;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.44), inset 0 0 0 1px rgba(116, 56, 190, 0.16);
}

#chat-input {
    min-height: 48px !important;
    padding: 12px 61px 12px 19px !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #e9f7ff !important;
}

#chat-input::placeholder {
    color: rgba(208, 207, 237, 0.68) !important;
}

#mic-btn {
    position: absolute !important;
    top: 50% !important;
    right: 7px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 4;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px;
    color: #ff9ae7 !important;
    background:
        linear-gradient(135deg, rgba(42, 7, 61, 0.98), rgba(8, 12, 36, 0.98)) padding-box,
        linear-gradient(135deg, #ff66df, #9031b7 52%, #ff66df) border-box !important;
}

#mic-btn i {
    font-size: 17px !important;
}

.hud-toast-container {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 99999;
    display: flex;
    width: min(520px, calc(100vw - 36px));
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    font-family: "Rajdhani", "Microsoft YaHei", system-ui, sans-serif;
}

.hud-toast {
    --toast-accent: #2deeff;
    position: relative;
    display: grid;
    grid-template-columns: 6px 22px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 14px 20px 14px 15px;
    overflow: hidden;
    border: 1px solid transparent;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    color: #eafcff;
    background:
        linear-gradient(104deg, rgba(6, 20, 39, 0.97), rgba(13, 8, 37, 0.96)) padding-box,
        linear-gradient(100deg, var(--toast-accent), rgba(255, 68, 213, 0.88)) border-box;
    box-shadow:
        inset 0 0 24px rgba(45, 238, 255, 0.08),
        0 0 0 1px rgba(5, 8, 24, 0.9),
        0 0 20px color-mix(in srgb, var(--toast-accent) 35%, transparent),
        0 14px 34px rgba(0, 0, 0, 0.52);
    opacity: 0;
    transform: translateX(calc(100% + 30px));
    transition: opacity 220ms ease, transform 300ms cubic-bezier(0.2, 0.82, 0.2, 1);
    backdrop-filter: blur(16px);
}

.hud-toast::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, transparent 0 4px, rgba(255, 255, 255, 0.025) 4px 5px),
        linear-gradient(90deg, color-mix(in srgb, var(--toast-accent) 12%, transparent), transparent 46%);
}

.hud-toast::after {
    content: "SYSTEM // EVENT";
    position: absolute;
    top: 5px;
    right: 14px;
    color: color-mix(in srgb, var(--toast-accent) 72%, white);
    font-family: "Share Tech Mono", monospace;
    font-size: 8px;
    letter-spacing: 0;
    opacity: 0.56;
}

.hud-toast.visible {
    opacity: 1;
    transform: translateX(0);
}

.hud-toast-success { --toast-accent: #38f6b3; }
.hud-toast-error { --toast-accent: #ff4f8f; }
.hud-toast-warning { --toast-accent: #ffd45f; }
.hud-toast-info { --toast-accent: #35eaff; }

.hud-toast-signal {
    align-self: stretch;
    background: var(--toast-accent);
    box-shadow: 0 0 14px var(--toast-accent);
}

.hud-toast > i {
    position: relative;
    z-index: 1;
    color: var(--toast-accent);
    font-size: 18px;
    text-shadow: 0 0 12px var(--toast-accent);
}

.hud-toast-message {
    position: relative;
    z-index: 1;
    padding-top: 5px;
    color: #edfaff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    word-break: break-word;
}

#send-btn {
    width: 54px !important;
    height: 54px !important;
    min-height: 54px;
    color: #baffff !important;
    background:
        linear-gradient(135deg, rgba(4, 42, 66, 0.99), rgba(10, 15, 60, 0.99)) padding-box,
        linear-gradient(135deg, #37f5ff, #49b8ff 48%, #36efff) border-box !important;
    filter: drop-shadow(0 0 8px rgba(45, 238, 255, 0.5)) drop-shadow(0 0 14px rgba(73, 125, 255, 0.24));
}

#send-btn::after {
    right: 8px;
    bottom: 5px;
    width: 17px;
    background: #b9ffff;
    box-shadow: 0 0 10px #45efff;
}

#send-btn:hover:not(:disabled) {
    color: #fff !important;
    background:
        linear-gradient(135deg, rgba(16, 80, 98, 0.99), rgba(26, 33, 102, 0.99)) padding-box,
        linear-gradient(135deg, #9cffff, #35eaff 48%, #85a2ff) border-box !important;
    transform: translateY(-1px);
}

#send-btn:disabled {
    color: rgba(133, 235, 247, 0.46) !important;
    background:
        linear-gradient(135deg, rgba(6, 23, 42, 0.98), rgba(8, 12, 37, 0.98)) padding-box,
        linear-gradient(135deg, rgba(47, 155, 188, 0.54), rgba(86, 89, 175, 0.5)) border-box !important;
    filter: none;
}

@keyframes hud-node-pulse {
    0%, 100% { box-shadow: var(--hud-glow-cyan); opacity: 1; }
    50% { box-shadow: 0 0 4px rgba(50, 246, 255, 0.42), 0 0 32px rgba(255, 58, 200, 0.64); opacity: 0.72; }
}

@media (max-width: 768px) {
    :root {
        --hud-topbar-height: 56px;
    }
    html,
    body {
        width: 100%;
        height: 100svh;
        min-height: 100svh;
        height: 100dvh;
        min-height: 100dvh;
        height: var(--jianxiao-app-height, 100dvh);
        min-height: var(--jianxiao-app-height, 100dvh);
        overflow: hidden;
    }
    #app,
    #main-content {
        height: 100svh !important;
        height: 100dvh !important;
        height: var(--jianxiao-app-height, 100dvh) !important;
        max-height: var(--jianxiao-app-height, 100dvh);
        min-height: 0;
    }
    #content-area,
    .view.active {
        height: 100%;
        min-height: 0;
    }
    #chat-messages,
    .view.active:not(#view-chat) > .flex-1,
    #login-overlay,
    #sidebar nav,
    .session-list,
    .overflow-y-auto {
        min-height: 0;
        overflow-y: auto !important;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
    }
    .view.active:not(#view-chat) {
        overflow: hidden;
    }
    #view-chat {
        min-height: 0;
        overflow: hidden;
    }
    .view.active:not(#view-chat) > .flex-1 {
        min-height: 0;
        overflow-y: auto !important;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
    }
    #login-overlay {
        height: 100svh;
        height: 100dvh;
        padding-top: max(14px, env(safe-area-inset-top));
        padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
    #sidebar,
    .session-panel {
        width: min(180px, 82vw) !important;
        height: 100svh;
        height: 100dvh;
        height: var(--jianxiao-app-height, 100dvh);
        max-height: var(--jianxiao-app-height, 100dvh);
        min-height: 0;
    }
    #sidebar nav {
        min-height: 0;
        overscroll-behavior-y: contain;
    }
    #app,
    #login-overlay,
    #sidebar,
    #content-area {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
    }
    :is(.msg-content, pre, code, input, textarea, [contenteditable]) {
        -webkit-touch-callout: default;
        -webkit-user-select: text;
        user-select: text;
    }
    #confirm-dialog-overlay,
    #password-modal-overlay,
    #vendor-modal-overlay {
        min-height: 0;
        max-height: 100svh;
        max-height: 100dvh;
        padding-top: max(12px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        align-items: flex-start;
        overflow-y: auto !important;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
    }
    #confirm-dialog-overlay > div,
    #password-modal-overlay > div,
    #vendor-modal-overlay > div {
        max-height: calc(100svh - 24px);
        max-height: calc(100dvh - 24px);
        margin-top: auto;
        margin-bottom: auto;
        overflow-y: auto !important;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
    }
    .session-panel { width: min(286px, 86vw) !important; }
    #main-content > header { min-height: 56px !important; height: 56px !important; }
    #view-chat::before { background-image: url("../assets/cyber-city-mobile.png"); opacity: 0.52; background-position: center center; }
    .chat-messages-viewport {
        min-height: 0;
        margin: 8px 8px 0;
    }
    #chat-messages {
        width: 100%;
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: 36px 0 14px;
    }
    #chat-messages::before { right: 10px; padding: 5px 9px; }
    #chat-messages:has(#welcome-screen) { padding: 42px 12px 18px; }
    #welcome-screen {
        display: flex !important;
        width: 100%;
        padding: 22px 18px !important;
        flex-direction: column;
        align-items: center;
    }
    .welcome-avatar { margin-bottom: 14px !important; }
    #welcome-title { margin-bottom: 8px !important; text-align: center; }
    #welcome-subtitle { text-align: center !important; }
    #welcome-screen > .grid { margin-top: 20px; }
    .example-card { padding: 16px 18px !important; }
    .hud-message { width: 100%; padding-right: 14px !important; padding-left: 14px !important; gap: 9px !important; }
    .hud-avatar-node, .hud-user-node { flex-basis: 32px; width: 32px; height: 32px; }
    .hud-avatar-node img { width: 25px; height: 25px; }
    .hud-avatar-node::after { top: 15px; left: 31px; width: 9px; }
    .hud-user-node { margin-left: 7px; }
    .hud-user-node::before { top: 15px; right: 31px; width: 8px; }
    .hud-assistant-message-shell, .hud-user-message-shell { width: min(92%, 640px); }
    .hud-message-frame { padding: 16px 18px !important; }
    #view-chat > .flex-shrink-0 {
        margin: 8px 8px max(8px, env(safe-area-inset-bottom));
        padding: 7px !important;
    }
    #chat-input-shell {
        grid-template-areas:
            "input input"
            "actions send";
        grid-template-columns: 1fr auto;
        gap: 7px;
    }
    #chat-input-actions { grid-area: actions; }
    #chat-input-shell > .flex-1 { grid-area: input; }
    #send-btn { grid-area: send; }
    #chat-input-actions button {
        width: 35px !important;
        height: 34px !important;
        min-height: 34px !important;
    }
    #send-btn {
        width: 47px !important;
        height: 34px !important;
        min-height: 34px !important;
    }
    #mic-btn {
        width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        right: 5px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    .hud-toast-container {
        top: 10px;
        right: 10px;
        width: calc(100vw - 20px);
    }
    .hud-toast {
        min-height: 62px;
        padding: 12px 15px 12px 12px;
    }
    #scroll-to-bottom-btn { right: 16px !important; bottom: 125px !important; }
    #content-area .flex-1.overflow-y-auto.p-6 { padding: 18px 14px !important; }
    #content-area .max-w-4xl > .flex.items-center.justify-between.mb-6,
    #content-area .max-w-5xl > .flex.items-center.justify-between.mb-6 { align-items: flex-start !important; gap: 13px; }
    #content-area table { min-width: 620px; }
    #login-overlay > div { margin: 14px !important; padding: 31px 20px 23px; }
}

@media (max-width: 390px) {
    #main-content > header { padding-right: 9px !important; padding-left: 9px !important; }
    #lang-toggle { padding-right: 7px !important; padding-left: 7px !important; }
    #chat-input-actions button { width: 31px !important; }
    .hud-message-frame { padding-right: 16px !important; padding-left: 16px !important; }
}

@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;
    }
}

/* codex: chat-workspace-magenta-v1 */
/* Pink/violet cyberpunk treatment for the highlighted chat workspace. */
body:has(#view-chat.view.active) {
    --chat-shell-pink: #ff2fa6;
    --chat-shell-pink-soft: #ff86d2;
    --chat-shell-violet: #9b4dff;
    --chat-shell-indigo: #6257ff;
    --chat-shell-lilac: #d9b8ff;
}

body:has(#view-chat.view.active) .session-panel {
    border-right-color: transparent !important;
    background:
        linear-gradient(180deg, rgba(16, 5, 35, .99), rgba(5, 3, 18, .995) 72%, rgba(12, 4, 28, .99)) padding-box,
        linear-gradient(180deg, rgba(255, 47, 166, .86), rgba(155, 77, 255, .72) 54%, rgba(98, 87, 255, .58)) border-box !important;
    box-shadow: inset -1px 0 rgba(255, 47, 166, .18), 6px 0 24px rgba(155, 77, 255, .14), 18px 0 42px rgba(0, 0, 0, .42) !important;
}

body:has(#view-chat.view.active) .session-panel-header {
    border-bottom-color: rgba(255, 47, 166, .46) !important;
    background:
        linear-gradient(96deg, rgba(255, 47, 166, .15), rgba(155, 77, 255, .12) 58%, rgba(98, 87, 255, .06)),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(155, 77, 255, .13) 22px 24px, transparent 24px 45px) !important;
}

body:has(#view-chat.view.active) :is(.session-panel-title, #active-life-name, #welcome-title) {
    color: #fff2fb !important;
}

body:has(#view-chat.view.active) .session-panel-title,
body:has(#view-chat.view.active) #welcome-title {
    text-shadow: 0 0 10px rgba(255, 47, 166, .26);
}

body:has(#view-chat.view.active) .session-panel-close,
body:has(#view-chat.view.active) .session-panel-new {
    color: var(--chat-shell-pink-soft) !important;
    border-color: rgba(155, 77, 255, .48) !important;
    background:
        linear-gradient(100deg, rgba(40, 8, 62, .96), rgba(13, 7, 40, .97)) padding-box,
        linear-gradient(104deg, rgba(255, 47, 166, .82), rgba(155, 77, 255, .74), rgba(98, 87, 255, .62)) border-box !important;
}

body:has(#view-chat.view.active) :is(.session-panel-close:hover, .session-panel-new:hover) {
    color: #fff !important;
    border-color: rgba(255, 47, 166, .86) !important;
    background:
        linear-gradient(100deg, rgba(69, 10, 80, .98), rgba(26, 9, 66, .98)) padding-box,
        linear-gradient(104deg, var(--chat-shell-pink), var(--chat-shell-violet) 54%, var(--chat-shell-indigo)) border-box !important;
    box-shadow: 0 0 12px rgba(255, 47, 166, .24) !important;
}

body:has(#view-chat.view.active) .session-group-label {
    color: rgba(217, 184, 255, .72) !important;
}

body:has(#view-chat.view.active) .session-group-label::before {
    color: var(--chat-shell-pink) !important;
    text-shadow: 0 0 8px rgba(255, 47, 166, .54);
}

body:has(#view-chat.view.active) .session-list {
    scrollbar-color: rgba(255, 47, 166, .72) rgba(54, 20, 91, .16) !important;
}

body:has(#view-chat.view.active) .session-list:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--chat-shell-pink), var(--chat-shell-violet) 58%, var(--chat-shell-indigo)) !important;
    box-shadow: 0 0 8px rgba(255, 47, 166, .38);
}

body:has(#view-chat.view.active) .session-item {
    border-color: rgba(155, 77, 255, .3) !important;
    color: rgba(224, 211, 245, .76) !important;
    background:
        linear-gradient(96deg, rgba(18, 8, 39, .9), rgba(7, 6, 24, .94)) padding-box,
        linear-gradient(108deg, rgba(255, 47, 166, .22), rgba(155, 77, 255, .34), rgba(98, 87, 255, .22)) border-box !important;
    filter: drop-shadow(0 0 5px rgba(155, 77, 255, .1)) !important;
}

body:has(#view-chat.view.active) .session-item .session-icon {
    color: rgba(192, 151, 255, .76) !important;
}

body:has(#view-chat.view.active) .session-item:hover,
body:has(#view-chat.view.active) .session-item.active {
    color: #fff !important;
    border-color: rgba(255, 47, 166, .86) !important;
    background:
        linear-gradient(96deg, rgba(66, 9, 81, .98), rgba(25, 9, 64, .97)) padding-box,
        linear-gradient(104deg, var(--chat-shell-pink), var(--chat-shell-violet) 54%, var(--chat-shell-indigo)) border-box !important;
    box-shadow: inset 3px 0 var(--chat-shell-pink), 0 0 13px rgba(255, 47, 166, .18) !important;
    filter: drop-shadow(0 0 8px rgba(255, 47, 166, .24)) drop-shadow(0 0 12px rgba(155, 77, 255, .16)) !important;
}

body:has(#view-chat.view.active) .session-item.active .session-icon {
    color: #ffc0ea !important;
    text-shadow: 0 0 10px rgba(255, 47, 166, .74) !important;
}

@keyframes chatHeaderNeonSweepV1 {
    from { transform: translateX(-12%); opacity: .5; }
    50% { opacity: .95; }
    to { transform: translateX(430%); opacity: .5; }
}

@keyframes chatHeaderNeonBreathV1 {
    0%, 100% { opacity: .5; filter: blur(4px) drop-shadow(0 0 5px rgba(155, 77, 255, .24)); }
    50% { opacity: .86; filter: blur(5px) drop-shadow(0 0 8px rgba(255, 47, 166, .38)) drop-shadow(0 0 13px rgba(155, 77, 255, .24)); }
}

body:has(#view-chat.view.active) #main-content > header {
    border-bottom-color: transparent !important;
    background:
        linear-gradient(96deg, rgba(14, 5, 35, .99), rgba(6, 5, 25, .98) 58%, rgba(28, 6, 45, .96)) padding-box,
        linear-gradient(96deg, rgba(255, 47, 166, .82), rgba(155, 77, 255, .76) 52%, rgba(98, 87, 255, .62), rgba(255, 47, 166, .78)) border-box !important;
    box-shadow: inset 0 -1px rgba(255, 47, 166, .2), inset 0 0 24px rgba(155, 77, 255, .065), 0 6px 26px rgba(10, 1, 30, .34) !important;
}

body:has(#view-chat.view.active) #main-content > header::before,
body:has(#view-chat.view.active) #main-content > header::after {
    content: "" !important;
    position: absolute !important;
    border: 0 !important;
    pointer-events: none !important;
}

body:has(#view-chat.view.active) #main-content > header::before {
    right: 0 !important;
    bottom: -2px !important;
    left: 0 !important;
    width: auto !important;
    height: 4px !important;
    background: linear-gradient(90deg, rgba(255, 47, 166, .42), rgba(155, 77, 255, .62) 42%, rgba(98, 87, 255, .48) 72%, rgba(255, 47, 166, .42)) !important;
    opacity: .66 !important;
    animation: chatHeaderNeonBreathV1 7.8s cubic-bezier(.37, 0, .63, 1) infinite !important;
}

body:has(#view-chat.view.active) #main-content > header::after {
    right: auto !important;
    bottom: -2px !important;
    left: -30% !important;
    width: 30% !important;
    height: 2px !important;
    border-radius: 999px !important;
    clip-path: none !important;
    background: linear-gradient(90deg, transparent, rgba(255, 47, 166, .28) 18%, rgba(255, 134, 210, .96) 45%, rgba(155, 77, 255, .94) 68%, rgba(98, 87, 255, .48) 84%, transparent) !important;
    box-shadow: 0 0 7px rgba(255, 47, 166, .54), 0 0 14px rgba(155, 77, 255, .34) !important;
    filter: none !important;
    animation: chatHeaderNeonSweepV1 9.8s linear infinite !important;
}

body:has(#view-chat.view.active) #main-content > header button {
    color: rgba(201, 171, 246, .76) !important;
    border-color: rgba(155, 77, 255, .18) !important;
}

body:has(#view-chat.view.active) #main-content > header button:hover {
    color: #ffd4ef !important;
    border-color: rgba(255, 47, 166, .62) !important;
    background: rgba(255, 47, 166, .1) !important;
}

body:has(#view-chat.view.active) :is(#breadcrumb-group, .active-life-summary-label) {
    color: rgba(217, 184, 255, .68) !important;
}

body:has(#view-chat.view.active) #breadcrumb-separator {
    color: rgba(155, 77, 255, .6) !important;
}

body:has(#view-chat.view.active) :is(#breadcrumb-page, #account-username) {
    color: #fff2fb !important;
}

body:has(#view-chat.view.active) #account-role {
    color: var(--chat-shell-pink) !important;
    text-shadow: 0 0 8px rgba(255, 47, 166, .4);
}

body:has(#view-chat.view.active) .active-life-summary {
    border-color: transparent !important;
    background:
        linear-gradient(102deg, rgba(29, 7, 49, .97), rgba(9, 7, 32, .98)) padding-box,
        linear-gradient(104deg, var(--chat-shell-pink), var(--chat-shell-violet) 55%, var(--chat-shell-indigo)) border-box !important;
    box-shadow: inset 0 0 16px rgba(155, 77, 255, .1), 0 0 12px rgba(255, 47, 166, .2), 0 0 20px rgba(155, 77, 255, .12) !important;
}

body:has(#view-chat.view.active) .active-life-summary::before {
    border-top-color: var(--chat-shell-pink) !important;
    box-shadow: 0 0 8px rgba(255, 47, 166, .72) !important;
}

body:has(#view-chat.view.active) .active-life-summary::after {
    border-bottom-color: var(--chat-shell-violet) !important;
    box-shadow: 0 0 8px rgba(155, 77, 255, .7) !important;
}

body:has(#view-chat.view.active) .active-life-summary-signal {
    background: var(--chat-shell-pink) !important;
    box-shadow: 0 0 10px rgba(255, 47, 166, .84) !important;
}

body:has(#view-chat.view.active) #active-life-name {
    text-shadow: 0 0 9px rgba(255, 47, 166, .2) !important;
}

body:has(#view-chat.view.active) #welcome-screen {
    border-color: transparent !important;
    background:
        linear-gradient(145deg, rgba(18, 6, 39, .95), rgba(7, 5, 25, .96) 62%, rgba(27, 6, 42, .93)) padding-box,
        linear-gradient(112deg, rgba(255, 47, 166, .9), rgba(155, 77, 255, .82) 52%, rgba(98, 87, 255, .68)) border-box !important;
    box-shadow: inset 0 0 32px rgba(155, 77, 255, .08), 0 0 18px rgba(255, 47, 166, .12), 0 20px 50px rgba(0, 0, 0, .38) !important;
}

body:has(#view-chat.view.active) .welcome-avatar {
    box-shadow: 0 0 0 2px rgba(255, 134, 210, .86), 0 0 13px rgba(255, 47, 166, .42), 0 0 28px rgba(155, 77, 255, .28) !important;
}

body:has(#view-chat.view.active) #welcome-subtitle {
    color: rgba(222, 204, 241, .78) !important;
}

body:has(#view-chat.view.active) .example-card {
    background:
        repeating-linear-gradient(90deg, transparent 0 27px, rgba(255, 47, 166, .024) 27px 28px),
        linear-gradient(140deg, rgba(31, 8, 53, .97), rgba(8, 7, 28, .98)) padding-box,
        linear-gradient(108deg, var(--chat-shell-pink), var(--chat-shell-violet) 54%, var(--chat-shell-indigo)) border-box !important;
    box-shadow: inset 0 0 26px rgba(155, 77, 255, .07), 0 0 12px rgba(255, 47, 166, .13), 0 14px 30px rgba(0, 0, 0, .3) !important;
}

body:has(#view-chat.view.active) .example-card::before {
    background: linear-gradient(90deg, var(--chat-shell-pink), var(--chat-shell-violet) 64%, transparent) !important;
    box-shadow: 0 0 12px rgba(255, 47, 166, .72) !important;
}

body:has(#view-chat.view.active) .example-card::after {
    border-right-color: var(--chat-shell-violet) !important;
    border-bottom-color: var(--chat-shell-pink) !important;
    filter: drop-shadow(0 0 5px rgba(155, 77, 255, .68)) drop-shadow(0 0 7px rgba(255, 47, 166, .42)) !important;
}

body:has(#view-chat.view.active) .example-card:nth-child(2) {
    background:
        repeating-linear-gradient(90deg, transparent 0 27px, rgba(155, 77, 255, .026) 27px 28px),
        linear-gradient(140deg, rgba(25, 10, 56, .97), rgba(12, 6, 34, .98)) padding-box,
        linear-gradient(108deg, var(--chat-shell-violet), var(--chat-shell-indigo) 46%, var(--chat-shell-pink)) border-box !important;
}

body:has(#view-chat.view.active) .example-card:nth-child(2)::before {
    background: linear-gradient(90deg, transparent, var(--chat-shell-indigo) 38%, var(--chat-shell-pink)) !important;
    box-shadow: 0 0 12px rgba(155, 77, 255, .7) !important;
}

body:has(#view-chat.view.active) .example-card:hover {
    filter: drop-shadow(0 0 9px rgba(255, 47, 166, .28)) drop-shadow(0 0 14px rgba(155, 77, 255, .18)) !important;
}

body:has(#view-chat.view.active) .example-card .rounded-2xl {
    border-color: rgba(255, 47, 166, .56) !important;
    color: #ffb5e5 !important;
    background: linear-gradient(135deg, rgba(255, 47, 166, .2), rgba(155, 77, 255, .2)) !important;
}

body:has(#view-chat.view.active) .example-card:nth-child(2) .rounded-2xl {
    border-color: rgba(155, 77, 255, .58) !important;
    color: #cbb0ff !important;
    background: linear-gradient(135deg, rgba(155, 77, 255, .22), rgba(98, 87, 255, .18)) !important;
}

body:has(#view-chat.view.active) .example-card .text-slate-800,
body:has(#view-chat.view.active) .example-card .dark\:text-slate-100 {
    color: #fff3fc !important;
}

body:has(#view-chat.view.active) .example-card .text-slate-500,
body:has(#view-chat.view.active) .example-card .dark\:text-slate-400 {
    color: rgba(214, 193, 235, .72) !important;
}

body:has(#view-chat.view.active) #view-chat > .flex-shrink-0 {
    border-color: transparent !important;
    background:
        linear-gradient(180deg, rgba(20, 5, 37, .98), rgba(6, 4, 20, .99)) padding-box,
        linear-gradient(100deg, var(--chat-shell-pink), var(--chat-shell-violet) 50%, var(--chat-shell-indigo), var(--chat-shell-pink)) border-box !important;
    box-shadow: inset 0 0 0 1px rgba(255, 134, 210, .1), inset 0 -15px 24px rgba(113, 30, 168, .1), 0 0 13px rgba(255, 47, 166, .24), 0 0 24px rgba(155, 77, 255, .14), 0 16px 32px rgba(0, 0, 0, .44) !important;
}

body:has(#view-chat.view.active) #chat-input {
    border-color: transparent !important;
    background:
        linear-gradient(105deg, rgba(23, 6, 42, .98), rgba(8, 6, 26, .99) 68%, rgba(29, 6, 44, .97)) padding-box,
        linear-gradient(105deg, rgba(255, 47, 166, .88), rgba(155, 77, 255, .74) 56%, rgba(98, 87, 255, .72)) border-box !important;
    color: #fff4fc !important;
    box-shadow: inset 0 0 16px rgba(155, 77, 255, .1), 0 0 11px rgba(255, 47, 166, .14) !important;
}

body:has(#view-chat.view.active) #chat-input::placeholder {
    color: rgba(211, 187, 231, .64) !important;
}

body:has(#view-chat.view.active) #chat-input:focus {
    border-color: transparent !important;
    box-shadow: inset 0 0 18px rgba(155, 77, 255, .14), 0 0 14px rgba(255, 47, 166, .28), 0 0 22px rgba(155, 77, 255, .14) !important;
}

body:has(#view-chat.view.active) #chat-input-actions button,
body:has(#view-chat.view.active) #mic-btn,
body:has(#view-chat.view.active) #send-btn {
    border-color: transparent !important;
    color: #ffabe1 !important;
    background:
        linear-gradient(135deg, rgba(43, 7, 61, .98), rgba(10, 7, 31, .98)) padding-box,
        linear-gradient(135deg, var(--chat-shell-pink), var(--chat-shell-violet) 54%, var(--chat-shell-indigo)) border-box !important;
    box-shadow: inset 0 0 12px rgba(155, 77, 255, .08), 0 0 8px rgba(255, 47, 166, .16) !important;
    filter: drop-shadow(0 0 6px rgba(155, 77, 255, .16)) !important;
}

body:has(#view-chat.view.active) #chat-input-actions button:hover,
body:has(#view-chat.view.active) #mic-btn:hover,
body:has(#view-chat.view.active) #send-btn:hover:not(:disabled) {
    color: #fff !important;
    background:
        linear-gradient(135deg, rgba(75, 11, 88, .99), rgba(23, 9, 61, .99)) padding-box,
        linear-gradient(135deg, var(--chat-shell-pink-soft), var(--chat-shell-pink) 42%, var(--chat-shell-violet) 72%, var(--chat-shell-indigo)) border-box !important;
    box-shadow: inset 0 0 15px rgba(155, 77, 255, .13), 0 0 10px rgba(255, 47, 166, .28), 0 0 16px rgba(155, 77, 255, .17) !important;
}

body:has(#view-chat.view.active) #send-btn:disabled {
    color: rgba(192, 151, 255, .38) !important;
    background:
        linear-gradient(135deg, rgba(27, 10, 42, .82), rgba(10, 8, 27, .84)) padding-box,
        linear-gradient(135deg, rgba(155, 77, 255, .28), rgba(98, 87, 255, .24)) border-box !important;
    box-shadow: none !important;
    filter: none !important;
}

body:has(#view-chat.view.active) #meme-reply-toggle[aria-pressed="true"] {
    color: #fff !important;
    background:
        linear-gradient(135deg, rgba(69, 9, 81, .98), rgba(26, 9, 66, .98)) padding-box,
        linear-gradient(135deg, var(--chat-shell-pink), var(--chat-shell-violet) 52%, var(--chat-shell-indigo)) border-box !important;
    filter: drop-shadow(0 0 9px rgba(255, 47, 166, .38)) drop-shadow(0 0 13px rgba(155, 77, 255, .24)) !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-chat.view.active) .session-panel,
    body:has(#view-chat.view.active) #main-content > header,
    body:has(#view-chat.view.active) #welcome-screen,
    body:has(#view-chat.view.active) #view-chat > .flex-shrink-0 {
        box-shadow: inset 0 0 16px rgba(155, 77, 255, .06), 0 0 12px rgba(255, 47, 166, .08) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-chat.view.active) #main-content > header::before,
    body:has(#view-chat.view.active) #main-content > header::after {
        animation: none !important;
        animation-play-state: paused !important;
    }
}

/* Keep legacy directional HUD strips inert if an older cached fragment
   survives a partial render. The current frame uses only the SVG beam. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-hud-beam,
        .fantasy-hud-rail,
        .fantasy-hud-scale,
        .fantasy-hud-corner,
        .fantasy-panel-corner,
        .fantasy-console-signal
    ) {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench
    > :is(.fantasy-console, .fantasy-stage)::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench
    > :is(.fantasy-console, .fantasy-stage)::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* ===== Life Forge Aurora Local Surfaces V1 =====
   Local surfaces use one masked conic border plus one soft ambient layer.
   This is the Border Beam + Glow Effect pairing used by the highlighted
   control surfaces, while the star-map scene itself remains untouched. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface {
    --fantasy-aurora-duration: 8.6s;
    position: relative;
    isolation: isolate;
    overflow: visible;
    border: 1px solid transparent !important;
    border-radius: 10px;
    background:
        linear-gradient(
            145deg,
            rgba(8, 20, 34, 0.94),
            rgba(5, 10, 22, 0.94)
        ) padding-box,
        linear-gradient(
            140deg,
            rgba(177, 208, 231, 0.24),
            rgba(89, 119, 166, 0.16) 52%,
            rgba(174, 126, 203, 0.2)
        ) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(235, 252, 255, 0.06),
        inset 0 0 22px rgba(53, 126, 190, 0.045),
        0 0 14px rgba(0, 181, 255, 0.06);
}

@property --fantasy-aurora-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::after {
    content: "" !important;
    position: absolute;
    display: block !important;
    pointer-events: none;
    border-radius: inherit;
    box-sizing: border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::before {
    z-index: 0;
    inset: -3px;
    padding: 3px;
    background:
        conic-gradient(
            from 216deg,
            rgba(0, 240, 255, 0.72),
            rgba(121, 40, 202, 0.34) 34%,
            rgba(255, 46, 147, 0.58) 58%,
            rgba(0, 240, 255, 0.72)
        );
    opacity: 0.11;
    filter: blur(7px);
    animation: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::after {
    --fantasy-aurora-angle: 0deg;
    z-index: 3;
    inset: -1px;
    padding: 1px;
    background:
        conic-gradient(
            from var(--fantasy-aurora-angle),
            transparent 0 37%,
            rgba(121, 40, 202, 0.08) 39%,
            rgba(255, 46, 147, 0.46) 42%,
            rgba(255, 255, 255, 0.96) 44%,
            rgba(0, 240, 255, 0.62) 46%,
            transparent 50% 87%,
            rgba(0, 240, 255, 0.08) 89%,
            rgba(121, 40, 202, 0.48) 92%,
            rgba(255, 255, 255, 0.96) 94%,
            rgba(255, 46, 147, 0.56) 96%,
            transparent 100%
        );
    opacity: 0.72;
    filter:
        drop-shadow(0 0 2px rgba(0, 240, 255, 0.3))
        drop-shadow(0 0 5px rgba(121, 40, 202, 0.14));
    animation:
        fantasyAuroraBorderOrbit var(--fantasy-aurora-duration)
        linear infinite !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-telemetry {
    --fantasy-aurora-duration: 7.8s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-mode-panel {
    --fantasy-aurora-duration: 9.4s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-creativity {
    --fantasy-aurora-duration: 10.2s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-current {
    --fantasy-aurora-duration: 10.8s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-age-panel {
    --fantasy-aurora-duration: 9.8s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-stage-top {
    --fantasy-aurora-duration: 8.2s;
    border-radius: 12px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-status-strip {
    --fantasy-aurora-duration: 7.4s;
    overflow: visible;
}

@keyframes fantasyAuroraBorderOrbit {
    from {
        --fantasy-aurora-angle: 0deg;
    }
    to {
        --fantasy-aurora-angle: 360deg;
    }
}

#main-content > header {
    position: relative;
    isolation: isolate;
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::before,
body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    pointer-events: none;
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::before {
    height: 7px;
    background:
        linear-gradient(
            90deg,
            transparent 0 12%,
            rgba(0, 240, 255, 0.46) 28%,
            rgba(121, 40, 202, 0.34) 52%,
            rgba(255, 46, 147, 0.46) 76%,
            transparent 92%
        );
    filter: blur(7px);
    opacity: 0.46;
    animation: fantasyHeaderAuroraFlow 9s linear infinite;
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::after {
    width: 18%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(245, 253, 255, 0.98) 42%,
        rgba(0, 240, 255, 0.82) 68%,
        transparent
    );
    filter:
        drop-shadow(0 0 4px rgba(0, 240, 255, 0.62))
        drop-shadow(0 0 8px rgba(255, 46, 147, 0.28));
    animation: fantasyHeaderBeamTrace 8s linear infinite;
}

@keyframes fantasyHeaderAuroraFlow {
    from {
        background-position: -32% 0;
    }
    to {
        background-position: 132% 0;
    }
}

@keyframes fantasyHeaderBeamTrace {
    from {
        transform: translateX(-115%);
    }
    to {
        transform: translateX(560%);
    }
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header
    .active-life-summary {
    overflow: visible;
    border: 1px solid transparent !important;
    border-radius: 999px;
    clip-path: none;
    background:
        linear-gradient(
            135deg,
            rgba(6, 24, 42, 0.96),
            rgba(7, 11, 31, 0.96)
        ) padding-box,
        linear-gradient(
            105deg,
            rgba(0, 240, 255, 0.72),
            rgba(121, 40, 202, 0.56) 54%,
            rgba(255, 46, 147, 0.72)
        ) border-box;
    box-shadow:
        inset 0 0 18px rgba(0, 240, 255, 0.06),
        0 0 16px rgba(0, 240, 255, 0.12),
        0 0 20px rgba(255, 46, 147, 0.08);
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header
    .active-life-summary::before,
body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header
    .active-life-summary::after {
    border-radius: inherit;
    box-sizing: border-box;
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header
    .active-life-summary::before {
    inset: -5px;
    padding: 6px;
    background:
        conic-gradient(
            from 212deg,
            rgba(0, 240, 255, 0.9),
            rgba(121, 40, 202, 0.4) 38%,
            rgba(255, 46, 147, 0.82) 58%,
            rgba(0, 240, 255, 0.9)
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: blur(10px);
    opacity: 0.34;
    animation: none !important;
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header
    .active-life-summary::after {
    --fantasy-aurora-angle: 0deg;
    inset: -1px;
    padding: 1px;
    background:
        conic-gradient(
            from var(--fantasy-aurora-angle),
            transparent 0 56%,
            rgba(121, 40, 202, 0.76) 66%,
            rgba(0, 240, 255, 0.98) 73%,
            rgba(255, 255, 255, 1) 78%,
            rgba(255, 46, 147, 0.88) 84%,
            transparent 94% 100%
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter:
        drop-shadow(0 0 3px rgba(0, 240, 255, 0.52))
        drop-shadow(0 0 8px rgba(255, 46, 147, 0.22));
    opacity: 0.88;
    animation: fantasyAuroraBorderOrbit 8.4s linear infinite !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-aurora-surface::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-aurora-surface::after {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::before {
        opacity: 0.05;
        filter: blur(5px);
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::after {
        opacity: 0.5;
        filter: drop-shadow(0 0 2px rgba(0, 240, 255, 0.18));
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::before,
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after,
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header .active-life-summary::before,
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header .active-life-summary::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::after {
        animation: none !important;
    }

    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::before,
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header .active-life-summary::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::before {
        opacity: 0 !important;
        filter: none !important;
    }

    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after,
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header .active-life-summary::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::after {
        opacity: 0.52;
        filter: none;
    }
}

/* Keep the main application frame clipped to the viewport. */
#app {
    overflow: hidden;
}

#login-overlay {
    isolation: isolate;
}

#login-overlay::before,
#login-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#login-overlay::before {
    z-index: 0;
    background:
        repeating-linear-gradient(180deg, transparent 0 3px, rgba(81, 226, 255, 0.025) 3px 4px),
        linear-gradient(90deg, rgba(50, 246, 255, 0.06) 1px, transparent 1px),
        linear-gradient(rgba(50, 246, 255, 0.04) 1px, transparent 1px);
    background-size: auto, 64px 64px, 64px 64px;
    opacity: 0.42;
    mask-image: linear-gradient(90deg, #000 0%, transparent 47%, rgba(0, 0, 0, 0.78) 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 47%, rgba(0, 0, 0, 0.78) 100%);
}

#login-overlay::after {
    z-index: 0;
    border: 1px solid rgba(50, 246, 255, 0.08);
    background:
        linear-gradient(90deg, var(--hud-magenta), transparent) 24px 22px / 150px 2px no-repeat,
        linear-gradient(180deg, var(--hud-cyan), transparent) calc(100% - 22px) 22px / 2px 130px no-repeat,
        linear-gradient(90deg, transparent, var(--hud-cyan)) calc(100% - 24px) calc(100% - 22px) / 180px 2px no-repeat,
        linear-gradient(180deg, transparent, var(--hud-magenta)) 22px calc(100% - 22px) / 2px 110px no-repeat;
    opacity: 0.7;
}

#login-overlay > div {
    z-index: 1;
    width: min(430px, calc(100vw - 28px));
    max-width: none !important;
}

#login-overlay > div::before {
    font-size: 9px;
}

#login-overlay img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover;
}

@media (max-width: 768px) {
    #login-overlay {
        background:
            linear-gradient(180deg, rgba(1, 4, 14, 0.54), rgba(1, 4, 14, 0.82)),
            url("../assets/cyber-city-mobile.png") center center / cover no-repeat,
            #020611 !important;
    }

    #login-overlay > div {
        width: min(430px, calc(100vw - 24px));
    }

    #login-overlay img {
        width: 64px !important;
        height: 64px !important;
    }

}

/* Life Forge neon pass: stronger violet/magenta structure without obscuring
   the star map or reducing the density of the generator controls. */
#view-memory.fantasy-memory-view {
    --fantasy-neon-violet: #a767ff;
    --fantasy-neon-pink: #ff45d6;
    --fantasy-neon-cyan: #32f6ff;
    --fantasy-neon-blue: #566dff;
}

#view-memory.fantasy-memory-view .fantasy-workbench {
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(255, 69, 214, 0.055), transparent 24%, transparent 72%, rgba(167, 103, 255, 0.065)),
        repeating-linear-gradient(90deg, transparent 0 39px, rgba(111, 83, 215, 0.025) 39px 40px),
        repeating-linear-gradient(0deg, transparent 0 39px, rgba(50, 246, 255, 0.022) 39px 40px),
        #020712 !important;
}

#view-memory.fantasy-memory-view .fantasy-workbench::before {
    content: "";
    position: absolute;
    z-index: 20;
    inset: 5px;
    pointer-events: none;
    clip-path: var(--hud-cut-wide);
    border: 1px solid rgba(167, 103, 255, 0.22);
    background:
        linear-gradient(90deg, var(--fantasy-neon-pink), transparent) top left / 150px 2px no-repeat,
        linear-gradient(180deg, var(--fantasy-neon-cyan), transparent) top right / 2px 116px no-repeat,
        linear-gradient(90deg, transparent, var(--fantasy-neon-violet)) bottom right / 190px 2px no-repeat,
        linear-gradient(180deg, transparent, var(--fantasy-neon-pink)) bottom left / 2px 94px no-repeat;
    filter:
        drop-shadow(0 0 8px rgba(255, 69, 214, 0.24))
        drop-shadow(0 0 9px rgba(50, 246, 255, 0.18));
}

#view-memory.fantasy-memory-view .fantasy-console,
#view-memory.fantasy-memory-view .fantasy-stage {
    border: 1px solid transparent !important;
    background:
        linear-gradient(150deg, rgba(6, 20, 39, 0.97), rgba(5, 9, 27, 0.985) 58%, rgba(27, 6, 43, 0.96)) padding-box,
        linear-gradient(135deg, rgba(255, 69, 214, 0.86), rgba(50, 246, 255, 0.68) 46%, rgba(167, 103, 255, 0.88)) border-box !important;
    box-shadow:
        inset 0 0 0 1px rgba(121, 224, 255, 0.06),
        inset 0 0 42px rgba(96, 52, 174, 0.075),
        0 0 18px rgba(255, 69, 214, 0.12),
        0 0 26px rgba(50, 246, 255, 0.08) !important;
}

#view-memory.fantasy-memory-view .fantasy-console {
    background:
        linear-gradient(90deg, rgba(50, 246, 255, 0.04) 1px, transparent 1px),
        linear-gradient(rgba(167, 103, 255, 0.035) 1px, transparent 1px),
        linear-gradient(150deg, rgba(6, 20, 39, 0.98), rgba(5, 9, 27, 0.99) 58%, rgba(27, 6, 43, 0.97)) padding-box,
        linear-gradient(150deg, rgba(50, 246, 255, 0.76), rgba(167, 103, 255, 0.76) 54%, rgba(255, 69, 214, 0.92)) border-box !important;
    background-size: 22px 22px, 22px 22px, auto, auto !important;
}

#view-memory.fantasy-memory-view .fantasy-console::before {
    width: 72px;
    border-color: var(--fantasy-neon-pink);
    box-shadow:
        0 0 8px rgba(255, 69, 214, 0.84),
        0 0 20px rgba(167, 103, 255, 0.46);
}

#view-memory.fantasy-memory-view .fantasy-console::after {
    background: repeating-linear-gradient(
        to bottom,
        var(--fantasy-neon-cyan) 0 5px,
        transparent 5px 9px,
        var(--fantasy-neon-pink) 9px 11px,
        transparent 11px 16px
    );
    box-shadow:
        0 0 9px rgba(50, 246, 255, 0.72),
        0 0 16px rgba(255, 69, 214, 0.42);
}

#view-memory.fantasy-memory-view .fantasy-stage::before {
    width: 168px;
    border-color: rgba(255, 69, 214, 0.72);
    background: repeating-linear-gradient(
        90deg,
        transparent 0 12px,
        rgba(50, 246, 255, 0.9) 12px 15px,
        transparent 15px 23px,
        rgba(255, 69, 214, 0.86) 23px 25px
    );
    box-shadow: 0 0 12px rgba(255, 69, 214, 0.28);
}

#view-memory.fantasy-memory-view .fantasy-stage::after {
    content: "";
    position: absolute;
    z-index: 7;
    top: 0;
    left: 20%;
    width: 36%;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        var(--fantasy-neon-pink) 24%,
        var(--fantasy-neon-violet) 54%,
        var(--fantasy-neon-cyan) 76%,
        transparent
    );
    background-size: 180% 100%;
    box-shadow:
        0 0 8px rgba(255, 69, 214, 0.76),
        0 0 16px rgba(167, 103, 255, 0.42);
    animation: fantasyFxStageEdgeFlow 10s linear infinite;
}

#view-memory.fantasy-memory-view .fantasy-stage-top {
    border-bottom-color: transparent !important;
    background:
        linear-gradient(90deg, rgba(50, 246, 255, 0.085), transparent 38%, rgba(255, 69, 214, 0.07)),
        linear-gradient(90deg, rgba(50, 246, 255, 0.48), rgba(167, 103, 255, 0.5) 55%, rgba(255, 69, 214, 0.62)) bottom / 100% 1px no-repeat,
        rgba(3, 10, 24, 0.94) !important;
    box-shadow:
        inset 0 -8px 24px rgba(103, 55, 191, 0.08),
        0 8px 24px rgba(5, 0, 24, 0.24);
}

#view-memory.fantasy-memory-view .fantasy-kicker {
    color: #94faff !important;
    text-shadow:
        0 0 8px rgba(50, 246, 255, 0.72),
        0 0 17px rgba(167, 103, 255, 0.34);
}

#view-memory.fantasy-memory-view :is(.fantasy-console h3, .fantasy-stage h3) {
    color: #f4f4ff !important;
    text-shadow:
        0 0 8px rgba(50, 246, 255, 0.42),
        0 0 18px rgba(167, 103, 255, 0.52),
        0 0 26px rgba(255, 69, 214, 0.22);
}

#view-memory.fantasy-memory-view .fantasy-control-section {
    border-top: 1px solid transparent !important;
    background:
        linear-gradient(90deg, rgba(50, 246, 255, 0.34), rgba(167, 103, 255, 0.24) 48%, rgba(255, 69, 214, 0.36), transparent 92%) top / 100% 1px no-repeat;
}

#view-memory.fantasy-memory-view .fantasy-section-title {
    color: #99cbd7 !important;
    text-shadow: 0 0 9px rgba(167, 103, 255, 0.28);
}

#view-memory.fantasy-memory-view :is(.fantasy-textarea, .fantasy-age-input) {
    border: 1px solid transparent !important;
    background:
        linear-gradient(rgba(50, 246, 255, 0.028) 1px, transparent 1px),
        linear-gradient(rgba(1, 8, 19, 0.96), rgba(9, 5, 26, 0.97)) padding-box,
        linear-gradient(120deg, rgba(50, 246, 255, 0.52), rgba(167, 103, 255, 0.4) 55%, rgba(255, 69, 214, 0.62)) border-box !important;
    background-size: 100% 24px, auto, auto !important;
    box-shadow:
        inset 0 0 18px rgba(73, 67, 170, 0.07),
        0 0 10px rgba(167, 103, 255, 0.07);
}

#view-memory.fantasy-memory-view :is(.fantasy-textarea, .fantasy-age-input):focus {
    border-color: transparent !important;
    background:
        linear-gradient(rgba(50, 246, 255, 0.035) 1px, transparent 1px),
        linear-gradient(rgba(2, 14, 26, 0.98), rgba(22, 6, 39, 0.98)) padding-box,
        linear-gradient(120deg, var(--fantasy-neon-cyan), var(--fantasy-neon-violet) 52%, var(--fantasy-neon-pink)) border-box !important;
    background-size: 100% 24px, auto, auto !important;
    box-shadow:
        inset 0 0 20px rgba(167, 103, 255, 0.1),
        0 0 10px rgba(50, 246, 255, 0.24),
        0 0 16px rgba(255, 69, 214, 0.18) !important;
}

#view-memory.fantasy-memory-view .fantasy-stream-panel {
    border: 1px solid transparent !important;
    background:
        linear-gradient(135deg, rgba(35, 6, 52, 0.86), rgba(4, 24, 40, 0.9)) padding-box,
        linear-gradient(120deg, var(--fantasy-neon-pink), var(--fantasy-neon-violet) 52%, var(--fantasy-neon-cyan)) border-box !important;
    box-shadow:
        inset 0 0 24px rgba(167, 103, 255, 0.12),
        0 0 12px rgba(255, 69, 214, 0.18),
        0 0 20px rgba(50, 246, 255, 0.08) !important;
}

#view-memory.fantasy-memory-view .fantasy-progress {
    height: 6px;
    border: 1px solid rgba(167, 103, 255, 0.34);
    background: rgba(10, 4, 26, 0.92) !important;
    box-shadow: inset 0 0 8px rgba(167, 103, 255, 0.18);
}

#view-memory.fantasy-memory-view .fantasy-progress span {
    background: linear-gradient(
        90deg,
        var(--fantasy-neon-pink),
        var(--fantasy-neon-violet) 46%,
        var(--fantasy-neon-cyan)
    ) !important;
    box-shadow:
        0 0 8px rgba(255, 69, 214, 0.68),
        0 0 14px rgba(50, 246, 255, 0.46) !important;
}

#view-memory.fantasy-memory-view :is(.fantasy-age-card, .fantasy-record, .fantasy-empty-record, .fantasy-skill-card) {
    border: 1px solid transparent !important;
    background:
        linear-gradient(135deg, rgba(3, 15, 29, 0.94), rgba(12, 6, 30, 0.94)) padding-box,
        linear-gradient(118deg, rgba(50, 246, 255, 0.38), rgba(167, 103, 255, 0.28) 58%, rgba(255, 69, 214, 0.42)) border-box !important;
    box-shadow:
        inset 2px 0 0 rgba(50, 246, 255, 0.38),
        inset -1px 0 0 rgba(255, 69, 214, 0.2);
}

#view-memory.fantasy-memory-view :is(.fantasy-record:hover, .fantasy-record.selected) {
    background:
        linear-gradient(135deg, rgba(8, 31, 46, 0.96), rgba(37, 7, 49, 0.96)) padding-box,
        linear-gradient(118deg, var(--fantasy-neon-cyan), var(--fantasy-neon-violet) 48%, var(--fantasy-neon-pink)) border-box !important;
    box-shadow:
        inset 0 0 22px rgba(167, 103, 255, 0.11),
        0 0 11px rgba(50, 246, 255, 0.2),
        0 0 17px rgba(255, 69, 214, 0.2) !important;
}

#view-memory.fantasy-memory-view .fantasy-space {
    box-shadow:
        inset 0 0 58px rgba(45, 18, 91, 0.2),
        inset 0 0 110px rgba(1, 4, 13, 0.38);
}

#view-memory.fantasy-memory-view .fantasy-space::before {
    border-color: rgba(167, 103, 255, 0.34);
    background:
        linear-gradient(90deg, var(--fantasy-neon-pink), transparent) top left / 130px 2px no-repeat,
        linear-gradient(180deg, var(--fantasy-neon-cyan), transparent) top right / 2px 112px no-repeat,
        linear-gradient(90deg, transparent, var(--fantasy-neon-violet)) bottom right / 170px 2px no-repeat,
        linear-gradient(180deg, transparent, var(--fantasy-neon-pink)) bottom left / 2px 86px no-repeat;
    filter:
        drop-shadow(0 0 7px rgba(255, 69, 214, 0.3))
        drop-shadow(0 0 9px rgba(50, 246, 255, 0.18));
}

#view-memory.fantasy-memory-view .fantasy-space::after {
    content: none;
    display: none;
}

#view-memory.fantasy-memory-view :is(.fantasy-stage-label, .fantasy-planet-label) {
    border: 1px solid transparent !important;
    background:
        linear-gradient(rgba(2, 13, 27, 0.92), rgba(8, 5, 24, 0.94)) padding-box,
        linear-gradient(115deg, rgba(50, 246, 255, 0.68), rgba(167, 103, 255, 0.58) 58%, rgba(255, 69, 214, 0.7)) border-box !important;
    box-shadow:
        inset 0 0 13px rgba(84, 72, 177, 0.08),
        0 0 8px rgba(50, 246, 255, 0.13),
        0 0 10px rgba(255, 69, 214, 0.11) !important;
}

#view-memory.fantasy-memory-view :is(
    .fantasy-stage-label.hovered,
    .fantasy-stage-label.selected,
    .fantasy-stage-label.generating,
    .fantasy-planet:hover .fantasy-planet-label,
    .fantasy-planet.selected .fantasy-planet-label,
    .fantasy-planet.generating .fantasy-planet-label
) {
    color: #fff3fd !important;
    background:
        linear-gradient(135deg, rgba(41, 5, 58, 0.96), rgba(4, 31, 48, 0.96)) padding-box,
        linear-gradient(112deg, var(--fantasy-neon-pink), var(--fantasy-neon-violet) 48%, var(--fantasy-neon-cyan)) border-box !important;
    filter:
        drop-shadow(0 0 13px rgba(255, 69, 214, 0.46))
        drop-shadow(0 0 10px rgba(50, 246, 255, 0.26)) !important;
}

#memory-panel-viewer.life-journey-viewer #memory-viewer-back {
    display: none !important;
}

.skill-detail-overlay {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        linear-gradient(180deg, rgba(2, 7, 22, 0.66), rgba(3, 2, 18, 0.9)),
        rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.skill-detail-modal {
    position: relative;
    width: min(920px, 100%);
    max-height: min(86dvh, 820px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #eafcff;
    border: 1px solid transparent;
    border-radius: 6px;
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
    background:
        linear-gradient(145deg, rgba(5, 24, 43, 0.97), rgba(15, 8, 43, 0.96)) padding-box,
        linear-gradient(120deg, #27e9ff, #7567ff 52%, #ff4fd8) border-box;
    box-shadow:
        inset 0 0 32px rgba(39, 233, 255, 0.08),
        0 0 28px rgba(39, 233, 255, 0.2),
        0 0 46px rgba(255, 79, 216, 0.14),
        0 28px 80px rgba(0, 0, 0, 0.58);
}

.skill-detail-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 24px 18px;
    border-bottom: 1px solid rgba(39, 233, 255, 0.18);
    background:
        repeating-linear-gradient(90deg, transparent 0 46px, rgba(39, 233, 255, 0.025) 46px 47px),
        linear-gradient(115deg, rgba(39, 233, 255, 0.09), rgba(117, 103, 255, 0.08), rgba(255, 79, 216, 0.06));
}

.skill-detail-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: #90a4b7;
    border: 1px solid rgba(117, 103, 255, 0.34);
    background: rgba(15, 13, 42, 0.88);
    box-shadow: inset 0 0 18px rgba(117, 103, 255, 0.16);
}

.skill-detail-icon.is-enabled {
    color: #4dffb8;
    border-color: rgba(77, 255, 184, 0.42);
    box-shadow: inset 0 0 18px rgba(77, 255, 184, 0.16), 0 0 16px rgba(77, 255, 184, 0.12);
}

.skill-detail-title-wrap {
    min-width: 0;
    flex: 1;
}

.skill-detail-title {
    margin: 0;
    overflow: hidden;
    color: #f4fbff;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-detail-subtitle {
    margin: 7px 0 0;
    color: rgba(188, 218, 235, 0.78);
    font-size: 13px;
    line-height: 1.55;
}

.skill-detail-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: rgba(207, 232, 245, 0.8);
    border: 1px solid rgba(39, 233, 255, 0.22);
    background: rgba(5, 16, 34, 0.72);
    cursor: pointer;
}

.skill-detail-close:hover,
.skill-detail-close:focus-visible {
    color: #fff;
    border-color: rgba(255, 79, 216, 0.62);
    outline: none;
    box-shadow: 0 0 16px rgba(255, 79, 216, 0.2);
}

.skill-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 15px 24px 0;
}

.skill-detail-chip {
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    color: rgba(210, 234, 246, 0.84);
    border: 1px solid rgba(39, 233, 255, 0.18);
    background: rgba(39, 233, 255, 0.055);
    font-size: 12px;
    line-height: 1.2;
}

.skill-detail-chip-life,
.skill-detail-chip-on {
    color: #8effca;
    border-color: rgba(77, 255, 184, 0.28);
    background: rgba(77, 255, 184, 0.08);
}

.skill-detail-chip-off {
    color: rgba(178, 197, 209, 0.72);
    border-color: rgba(178, 197, 209, 0.18);
    background: rgba(178, 197, 209, 0.05);
}

.skill-detail-chip-source {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skill-detail-scroll {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 24px 26px;
    touch-action: pan-y;
}

.skill-detail-content {
    min-height: 120px;
    padding: 18px 20px;
    color: #dcecf4;
    border: 1px solid rgba(117, 103, 255, 0.22);
    background:
        linear-gradient(180deg, rgba(39, 233, 255, 0.035), transparent 40%),
        rgba(3, 11, 28, 0.76);
    font-size: 14px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.skill-detail-content > :first-child {
    margin-top: 0;
}

.skill-detail-content > :last-child {
    margin-bottom: 0;
}

.skill-detail-content :is(h1, h2, h3, h4) {
    color: #f4fbff;
}

.skill-detail-content a {
    color: #5ef2ff;
}

.skill-detail-content blockquote {
    border-left-color: #ff4fd8;
    background: rgba(255, 79, 216, 0.06);
}

@media (max-width: 640px) {
    .skill-detail-overlay {
        align-items: stretch;
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    }

    .skill-detail-modal {
        max-height: 100%;
    }

    .skill-detail-hero {
        gap: 11px;
        padding: 17px 16px 15px;
    }

    .skill-detail-icon {
        width: 39px;
        height: 39px;
    }

    .skill-detail-title {
        font-size: 16px;
        white-space: normal;
    }

    .skill-detail-meta {
        padding: 13px 16px 0;
    }

    .skill-detail-scroll {
        padding: 15px 16px 18px;
    }

    .skill-detail-content {
        padding: 15px 16px;
    }
}

@media (max-width: 860px) {
    #view-memory.fantasy-memory-view .fantasy-workbench {
        padding: 7px;
    }

    #view-memory.fantasy-memory-view .fantasy-console,
    #view-memory.fantasy-memory-view .fantasy-stage {
        box-shadow:
            inset 0 0 0 1px rgba(121, 224, 255, 0.05),
            0 0 14px rgba(255, 69, 214, 0.1) !important;
    }

    #view-memory.fantasy-memory-view .fantasy-workbench::before {
        inset: 3px;
        opacity: 0.7;
    }
}

/* ===== Life Forge Motion FX V2 =====
   console.css owns layout and base states; this is the single motion layer. */
#view-memory.fantasy-memory-view #fantasy-workbench {
    --fantasy-fx-x: 50%;
    --fantasy-fx-y: 50%;
    --fantasy-fx-fast: 180ms;
    --fantasy-fx-sweep: 420ms;
    --fantasy-fx-ripple-duration: 380ms;
    --fantasy-fx-frame-duration: 15.6s;
    --fantasy-fx-panel-duration: 13.6s;
    --fantasy-fx-circuit-duration: 8.8s;
    --fantasy-fx-breath-duration: 5.8s;
    --fantasy-fx-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --fantasy-fx-sweep-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench {
    background-position: 0 0, 0 0, 0 0, 0 0 !important;
    animation: fantasyFxGridDrift 32s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench::before {
    background:
        linear-gradient(
            90deg,
            transparent 0 12%,
            var(--fantasy-neon-pink) 42%,
            var(--fantasy-neon-cyan) 58%,
            transparent 88%
        ) top left / 260px 2px no-repeat,
        linear-gradient(
            180deg,
            transparent 0 12%,
            var(--fantasy-neon-cyan) 42%,
            var(--fantasy-neon-violet) 58%,
            transparent 88%
        ) top right / 2px 220px no-repeat,
        linear-gradient(
            90deg,
            transparent 0 12%,
            var(--fantasy-neon-violet) 42%,
            var(--fantasy-neon-pink) 58%,
            transparent 88%
        ) bottom right / 300px 2px no-repeat,
        linear-gradient(
            180deg,
            transparent 0 12%,
            var(--fantasy-neon-pink) 42%,
            var(--fantasy-neon-cyan) 58%,
            transparent 88%
        ) bottom left / 2px 190px no-repeat;
    background-position:
        -280px 0,
        100% -230px,
        calc(100% + 320px) 100%,
        0 calc(100% + 210px);
    opacity: 0.72;
    filter:
        drop-shadow(0 0 7px rgba(255, 69, 214, 0.28))
        drop-shadow(0 0 9px rgba(50, 246, 255, 0.2));
    animation:
        fantasyFxPerimeterFlow var(--fantasy-fx-frame-duration) linear infinite,
        fantasyFxAmbientBreath var(--fantasy-fx-breath-duration)
            cubic-bezier(0.45, 0, 0.55, 1) -1.7s infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console {
    background-size:
        22px 22px,
        22px 22px,
        auto,
        320% 320% !important;
    background-position:
        0 0,
        0 0,
        0 0,
        0% 50% !important;
    animation:
        fantasyFxConsoleBorderFlow var(--fantasy-fx-panel-duration)
            linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-stage {
    background-size: auto, 320% 320% !important;
    background-position: 0 0, 100% 50% !important;
    animation:
        fantasyFxStageBorderFlow calc(var(--fantasy-fx-panel-duration) + 2.4s)
            linear -6.8s infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console::before {
    width: 88px;
    height: 3px;
    border: 0;
    background: linear-gradient(
        90deg,
        transparent 0,
        var(--fantasy-neon-pink) 34%,
        var(--fantasy-neon-cyan) 52%,
        transparent 72%
    );
    background-size: 220% 100%;
    box-shadow:
        0 0 9px rgba(255, 69, 214, 0.62),
        0 0 16px rgba(50, 246, 255, 0.26);
    animation:
        fantasyFxConsoleTrim 6.4s linear infinite,
        fantasyFxTrimBreath var(--fantasy-fx-breath-duration)
            cubic-bezier(0.45, 0, 0.55, 1) -2.3s infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console::after {
    background-size: 100% 32px;
    animation:
        fantasyFxDataRail 6.4s linear -3.2s infinite,
        fantasyFxTrimBreath var(--fantasy-fx-breath-duration)
            cubic-bezier(0.45, 0, 0.55, 1) -4.1s infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-stage::after {
    left: 14%;
    width: 48%;
    background-size: 240% 100%;
    animation: fantasyFxStageEdgeFlow 10s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-stage-top {
    position: relative;
    isolation: isolate;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-stage-top::after {
    content: "";
    position: absolute;
    z-index: 7;
    right: 18px;
    bottom: 0;
    left: 18px;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0 12%,
        var(--fantasy-neon-cyan) 38%,
        var(--fantasy-neon-violet) 52%,
        var(--fantasy-neon-pink) 66%,
        transparent 88%
    );
    background-size: 260% 100%;
    opacity: 0.68;
    filter:
        drop-shadow(0 0 5px rgba(50, 246, 255, 0.46))
        drop-shadow(0 0 8px rgba(255, 69, 214, 0.3));
    animation: fantasyFxHeaderTrace 8.4s linear -2.6s infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section {
    position: relative;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: -1px;
    right: 0;
    left: 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0 8%,
        var(--fantasy-neon-cyan) 34%,
        var(--fantasy-neon-violet) 52%,
        var(--fantasy-neon-pink) 68%,
        transparent 92%
    );
    background-size: 260% 100%;
    opacity: 0.48;
    filter: drop-shadow(0 0 5px rgba(50, 246, 255, 0.24));
    animation: fantasyFxSectionTrace 9.2s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:nth-of-type(2n)::before {
    animation-delay: -3.1s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:nth-of-type(3n)::before {
    animation-delay: -6.2s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-current-setting,
        .fantasy-age-card,
        .fantasy-stream-panel,
        .fantasy-view-toggle
    ) {
    position: relative;
    isolation: isolate;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-current-setting,
        .fantasy-age-card,
        .fantasy-stream-panel,
        .fantasy-view-toggle
    )::after {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 0 14%,
            var(--fantasy-neon-cyan) 42%,
            var(--fantasy-neon-pink) 58%,
            transparent 86%
        ) top left / 240% 1px no-repeat,
        linear-gradient(
            180deg,
            transparent 0 14%,
            var(--fantasy-neon-pink) 42%,
            var(--fantasy-neon-violet) 58%,
            transparent 86%
        ) top right / 1px 240% no-repeat,
        linear-gradient(
            90deg,
            transparent 0 14%,
            var(--fantasy-neon-violet) 42%,
            var(--fantasy-neon-cyan) 58%,
            transparent 86%
        ) bottom right / 240% 1px no-repeat,
        linear-gradient(
            180deg,
            transparent 0 14%,
            var(--fantasy-neon-cyan) 42%,
            var(--fantasy-neon-pink) 58%,
            transparent 86%
        ) bottom left / 1px 240% no-repeat;
    background-position: 145% 0, 100% -145%, -145% 100%, 0 145%;
    opacity: 0.54;
    filter:
        drop-shadow(0 0 4px rgba(50, 246, 255, 0.32))
        drop-shadow(0 0 6px rgba(255, 69, 214, 0.2));
    animation:
        fantasyFxPanelCircuit var(--fantasy-fx-circuit-duration)
            linear -2.2s infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-age-card, .fantasy-view-toggle)::after {
    animation-delay: -5.4s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-record {
    position: relative;
    overflow: hidden;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-record::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5px;
    bottom: 5px;
    left: 0;
    width: 2px;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent,
        var(--fantasy-neon-cyan) 28%,
        var(--fantasy-neon-pink) 58%,
        transparent
    );
    background-size: 100% 220%;
    opacity: 0.72;
    animation: fantasyFxRecordRail 6.4s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button
    )::before {
    content: "";
    position: absolute;
    z-index: 3;
    inset: 0;
    width: auto;
    height: auto;
    pointer-events: none;
    border: 0;
    background:
        linear-gradient(
            90deg,
            transparent 0 16%,
            var(--fantasy-neon-cyan) 42%,
            var(--fantasy-neon-pink) 58%,
            transparent 84%
        ) top left / 240% 1px no-repeat,
        linear-gradient(
            90deg,
            transparent 0 16%,
            var(--fantasy-neon-violet) 42%,
            var(--fantasy-neon-cyan) 58%,
            transparent 84%
        ) bottom right / 240% 1px no-repeat;
    background-position: 145% 0, -145% 100%;
    opacity: 0.48;
    filter: drop-shadow(0 0 4px rgba(50, 246, 255, 0.28));
    transition:
        opacity var(--fantasy-fx-fast) var(--fantasy-fx-ease),
        filter var(--fantasy-fx-fast) var(--fantasy-fx-ease);
    animation:
        fantasyFxButtonCircuit var(--fantasy-fx-circuit-duration)
            linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn:nth-child(2),
        .fantasy-action-grid .fantasy-action-btn:nth-child(2),
        .fantasy-view-toggle button:nth-child(2),
        .fantasy-tree-visual-version button:nth-child(2)
    )::before {
    animation-delay: -4.4s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-icon-btn,
        .fantasy-mobile-controls-toggle,
        .fantasy-record[data-story],
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button,
        .fantasy-tree-toolbar button,
        .fantasy-tree-timeline-path button,
        .fantasy-tree-stage-preview-actions button,
        .fantasy-story-drawer button
    ) {
    --fantasy-fx-hotspot: rgba(50, 246, 255, 0.16);
    --fantasy-fx-panel-a: rgba(7, 22, 43, 0.98);
    --fantasy-fx-panel-b: rgba(10, 8, 31, 0.98);
    --fantasy-fx-border-a: rgba(255, 69, 214, 0.76);
    --fantasy-fx-border-b: rgba(50, 246, 255, 0.66);
    --fantasy-fx-border-c: rgba(167, 103, 255, 0.8);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid transparent !important;
    background:
        radial-gradient(
            circle 72px at var(--fantasy-fx-x) var(--fantasy-fx-y),
            var(--fantasy-fx-hotspot),
            transparent 68%
        ) padding-box,
        linear-gradient(
            108deg,
            transparent 24%,
            rgba(226, 255, 255, 0.2) 46%,
            rgba(255, 90, 220, 0.14) 53%,
            transparent 72%
        ) padding-box,
        linear-gradient(
            142deg,
            var(--fantasy-fx-panel-a),
            var(--fantasy-fx-panel-b)
        ) padding-box,
        linear-gradient(
            112deg,
            var(--fantasy-fx-border-a),
            var(--fantasy-fx-border-b) 48%,
            var(--fantasy-fx-border-c)
        ) border-box !important;
    background-repeat: no-repeat !important;
    background-size:
        100% 100%,
        220% 100%,
        100% 100%,
        100% 100% !important;
    background-position:
        0 0,
        135% 0,
        0 0,
        0 0 !important;
    transition:
        color var(--fantasy-fx-fast) var(--fantasy-fx-ease),
        border-color var(--fantasy-fx-fast) var(--fantasy-fx-ease),
        transform var(--fantasy-fx-fast) var(--fantasy-fx-ease),
        filter var(--fantasy-fx-fast) var(--fantasy-fx-ease),
        background-position var(--fantasy-fx-sweep)
            var(--fantasy-fx-sweep-ease) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn.active,
        .fantasy-action-btn.active,
        .fantasy-record.selected,
        .fantasy-view-toggle button.active,
        .fantasy-tree-visual-version button.active,
        .fantasy-mode-btn[aria-pressed="true"],
        .fantasy-action-btn[aria-pressed="true"],
        .fantasy-view-toggle button[aria-selected="true"],
        .fantasy-tree-visual-version button[aria-selected="true"]
    ):not(:disabled) {
    --fantasy-fx-panel-a: rgba(19, 12, 54, 0.98);
    --fantasy-fx-panel-b: rgba(4, 35, 52, 0.98);
    --fantasy-fx-border-a: var(--fantasy-neon-cyan);
    --fantasy-fx-border-b: var(--fantasy-neon-violet);
    --fantasy-fx-border-c: var(--fantasy-neon-pink);
    color: #f5feff !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn.active,
        .fantasy-action-btn.active,
        .fantasy-view-toggle button.active,
        .fantasy-tree-visual-version button.active,
        .fantasy-mode-btn[aria-pressed="true"],
        .fantasy-action-btn[aria-pressed="true"],
        .fantasy-view-toggle button[aria-selected="true"],
        .fantasy-tree-visual-version button[aria-selected="true"]
    ):not(:disabled)::before {
    opacity: 0.86;
    filter:
        drop-shadow(0 0 5px rgba(50, 246, 255, 0.52))
        drop-shadow(0 0 7px rgba(255, 69, 214, 0.3));
    animation-duration: 6.4s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn.active,
        .fantasy-action-btn.active,
        .fantasy-record.selected,
        .fantasy-view-toggle button.active,
        .fantasy-tree-visual-version button.active,
        .fantasy-mode-btn[aria-pressed="true"],
        .fantasy-action-btn[aria-pressed="true"],
        .fantasy-view-toggle button[aria-selected="true"],
        .fantasy-tree-visual-version button[aria-selected="true"]
    ):not(:disabled)::after {
    content: "";
    position: absolute;
    z-index: 3;
    right: 7px;
    bottom: 2px;
    left: 7px;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        var(--fantasy-neon-cyan) 34%,
        var(--fantasy-neon-violet) 52%,
        var(--fantasy-neon-pink) 68%,
        transparent
    );
    background-size: 220% 100%;
    box-shadow:
        0 0 8px rgba(50, 246, 255, 0.58),
        0 0 10px rgba(255, 69, 214, 0.34);
    animation: fantasyFxActiveTrace 4.8s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-btn-loading, .fantasy-record.generating)::after {
    content: "";
    position: absolute;
    z-index: 4;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        104deg,
        transparent 24%,
        rgba(255, 69, 214, 0.04) 36%,
        rgba(50, 246, 255, 0.28) 49%,
        rgba(167, 103, 255, 0.12) 57%,
        transparent 72%
    );
    background-size: 230% 100%;
    opacity: 0.82;
    animation: fantasyFxGeneratingFlow 1.6s linear infinite !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-icon-btn,
        .fantasy-mobile-controls-toggle,
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button,
        .fantasy-tree-toolbar button,
        .fantasy-tree-timeline-path button,
        .fantasy-tree-stage-preview-actions button,
        .fantasy-story-drawer button
    )
    > i {
    transition: transform var(--fantasy-fx-fast) var(--fantasy-fx-ease);
}

@media (hover: hover) and (pointer: fine) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn,
            .fantasy-action-btn,
            .fantasy-icon-btn,
            .fantasy-mobile-controls-toggle,
            .fantasy-record[data-story],
            .fantasy-view-toggle button,
            .fantasy-tree-visual-version button,
            .fantasy-tree-toolbar button,
            .fantasy-tree-timeline-path button,
            .fantasy-tree-stage-preview-actions button,
            .fantasy-story-drawer button
        ):hover:not(:disabled) {
        --fantasy-fx-hotspot: rgba(50, 246, 255, 0.24);
        --fantasy-fx-border-a: var(--fantasy-neon-pink);
        --fantasy-fx-border-b: var(--fantasy-neon-cyan);
        --fantasy-fx-border-c: var(--fantasy-neon-violet);
        color: #f2feff !important;
        background-position:
            0 0,
            -125% 0,
            0 0,
            0 0 !important;
        filter:
            drop-shadow(0 0 7px rgba(50, 246, 255, 0.26))
            drop-shadow(0 0 10px rgba(255, 69, 214, 0.18));
        transform: translate3d(0, -1px, 0);
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn,
            .fantasy-action-btn,
            .fantasy-view-toggle button,
            .fantasy-tree-visual-version button
        ):hover:not(:disabled)::before {
        opacity: 1;
        filter:
            drop-shadow(0 0 6px rgba(50, 246, 255, 0.58))
            drop-shadow(0 0 9px rgba(255, 69, 214, 0.34));
        animation-duration: 4.8s;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn,
            .fantasy-action-btn,
            .fantasy-icon-btn,
            .fantasy-mobile-controls-toggle,
            .fantasy-view-toggle button,
            .fantasy-tree-visual-version button,
            .fantasy-tree-toolbar button,
            .fantasy-tree-timeline-path button,
            .fantasy-tree-stage-preview-actions button,
            .fantasy-story-drawer button
        ):hover:not(:disabled)
        > i {
        transform: translate3d(0, -2px, 0);
    }
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-icon-btn,
        .fantasy-mobile-controls-toggle,
        .fantasy-record[data-story],
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button,
        .fantasy-tree-toolbar button,
        .fantasy-tree-timeline-path button,
        .fantasy-tree-stage-preview-actions button,
        .fantasy-story-drawer button
    ):active:not(:disabled) {
    transform: scale(0.97);
    transition-duration: 100ms !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-icon-btn,
        .fantasy-mobile-controls-toggle,
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button,
        .fantasy-tree-toolbar button,
        .fantasy-tree-timeline-path button,
        .fantasy-tree-stage-preview-actions button,
        .fantasy-story-drawer button
    ):focus-visible {
    outline: 2px solid rgba(143, 248, 255, 0.96) !important;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(167, 103, 255, 0.24) !important;
    filter: none !important;
    transform: none !important;
    background-position:
        0 0,
        135% 0,
        0 0,
        0 0 !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button
    ):focus-visible::before {
    animation: none !important;
    background-position: 50% 0, 50% 100%;
    opacity: 0.86;
    filter: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-icon-btn,
        .fantasy-mobile-controls-toggle,
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button,
        .fantasy-tree-toolbar button,
        .fantasy-tree-timeline-path button,
        .fantasy-tree-stage-preview-actions button,
        .fantasy-story-drawer button
    ):is(:disabled, [aria-disabled="true"]) {
    --fantasy-fx-hotspot: transparent;
    animation: none !important;
    transition: none !important;
    filter: none !important;
    transform: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button
    ):is(:disabled, [aria-disabled="true"])::before {
    animation: none !important;
    background-position: 50% 0, 50% 100%;
    opacity: 0.18;
    filter: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-icon-btn,
        .fantasy-mobile-controls-toggle,
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button,
        .fantasy-tree-toolbar button,
        .fantasy-tree-timeline-path button,
        .fantasy-tree-stage-preview-actions button,
        .fantasy-story-drawer button
    ):is(:disabled, [aria-disabled="true"], :focus-visible)::after {
    animation: none !important;
}

.fantasy-fx-ripple {
    position: absolute;
    z-index: 8;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(137, 249, 255, 0.82);
    border-radius: 50%;
    pointer-events: none;
    box-shadow:
        0 0 9px rgba(50, 246, 255, 0.72),
        0 0 15px rgba(255, 69, 214, 0.46);
    opacity: 0;
    transform:
        translate3d(var(--fantasy-fx-x), var(--fantasy-fx-y), 0)
        translate(-50%, -50%)
        scale(0.24);
    animation: fantasyFxRipple var(--fantasy-fx-ripple-duration, 380ms)
        cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    > .fantasy-workbench,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    > .fantasy-workbench::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-console,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-stage,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-console::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-console::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-stage::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-record::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-stage-top::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-control-section::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    :is(
        .fantasy-current-setting,
        .fantasy-age-card,
        .fantasy-stream-panel,
        .fantasy-view-toggle
    )::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button
    )::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    :is(.fantasy-btn-loading, .fantasy-record.generating)::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    :is(
        .fantasy-mode-btn.active,
        .fantasy-action-btn.active,
        .fantasy-record.selected,
        .fantasy-view-toggle button.active,
        .fantasy-tree-visual-version button.active,
        .fantasy-mode-btn[aria-pressed="true"],
        .fantasy-action-btn[aria-pressed="true"],
        .fantasy-view-toggle button[aria-selected="true"],
        .fantasy-tree-visual-version button[aria-selected="true"]
    )::after {
    animation-play-state: paused !important;
}

@keyframes fantasyFxGridDrift {
    to {
        background-position: 0 0, 40px 0, 0 40px, 0 0;
    }
}

@keyframes fantasyFxPerimeterFlow {
    from {
        background-position:
            -280px 0,
            100% -230px,
            calc(100% + 320px) 100%,
            0 calc(100% + 210px);
    }
    to {
        background-position:
            calc(100% + 280px) 0,
            100% calc(100% + 230px),
            -320px 100%,
            0 -210px;
    }
}

@keyframes fantasyFxAmbientBreath {
    0%,
    100% {
        opacity: 0.58;
        filter:
            drop-shadow(0 0 6px rgba(255, 69, 214, 0.2))
            drop-shadow(0 0 7px rgba(50, 246, 255, 0.14));
    }
    50% {
        opacity: 0.9;
        filter:
            drop-shadow(0 0 9px rgba(255, 69, 214, 0.38))
            drop-shadow(0 0 12px rgba(50, 246, 255, 0.28));
    }
}

@keyframes fantasyFxConsoleBorderFlow {
    from {
        background-position: 0 0, 0 0, 0 0, 0% 50%;
    }
    to {
        background-position: 0 0, 0 0, 0 0, 200% 50%;
    }
}

@keyframes fantasyFxStageBorderFlow {
    from {
        background-position: 0 0, 200% 50%;
    }
    to {
        background-position: 0 0, 0% 50%;
    }
}

@keyframes fantasyFxTrimBreath {
    0%,
    100% {
        opacity: 0.54;
        filter: brightness(0.9);
    }
    50% {
        opacity: 1;
        filter: brightness(1.18);
    }
}

@keyframes fantasyFxConsoleTrim {
    from {
        background-position: 145% 0;
    }
    to {
        background-position: -135% 0;
    }
}

@keyframes fantasyFxDataRail {
    to {
        background-position: 0 64px;
    }
}

@keyframes fantasyFxStageEdgeFlow {
    from {
        background-position: 145% 0;
        opacity: 0.58;
    }
    50% {
        opacity: 1;
    }
    to {
        background-position: -135% 0;
        opacity: 0.58;
    }
}

@keyframes fantasyFxHeaderTrace {
    from {
        background-position: 145% 0;
        opacity: 0.46;
        filter:
            drop-shadow(0 0 4px rgba(50, 246, 255, 0.32))
            drop-shadow(0 0 6px rgba(255, 69, 214, 0.2));
    }
    50% {
        opacity: 0.92;
        filter:
            drop-shadow(0 0 7px rgba(50, 246, 255, 0.58))
            drop-shadow(0 0 10px rgba(255, 69, 214, 0.36));
    }
    to {
        background-position: -145% 0;
        opacity: 0.46;
        filter:
            drop-shadow(0 0 4px rgba(50, 246, 255, 0.32))
            drop-shadow(0 0 6px rgba(255, 69, 214, 0.2));
    }
}

@keyframes fantasyFxSectionTrace {
    from {
        background-position: 145% 0;
        opacity: 0.34;
    }
    50% {
        opacity: 0.74;
    }
    to {
        background-position: -145% 0;
        opacity: 0.34;
    }
}

@keyframes fantasyFxPanelCircuit {
    from {
        background-position: 145% 0, 100% -145%, -145% 100%, 0 145%;
        opacity: 0.38;
    }
    50% {
        opacity: 0.72;
    }
    to {
        background-position: -145% 0, 100% 145%, 145% 100%, 0 -145%;
        opacity: 0.38;
    }
}

@keyframes fantasyFxButtonCircuit {
    from {
        background-position: 145% 0, -145% 100%;
    }
    to {
        background-position: -145% 0, 145% 100%;
    }
}

@keyframes fantasyFxRecordRail {
    to {
        background-position: 0 64px;
    }
}

@keyframes fantasyFxActiveTrace {
    from {
        background-position: 145% 0;
    }
    to {
        background-position: -135% 0;
    }
}

@keyframes fantasyFxGeneratingFlow {
    from {
        background-position: 145% 0;
    }
    to {
        background-position: -135% 0;
    }
}

@keyframes fantasyFxRipple {
    0% {
        opacity: 0.76;
        transform:
            translate3d(var(--fantasy-fx-x), var(--fantasy-fx-y), 0)
            translate(-50%, -50%)
            scale(0.24);
    }
    100% {
        opacity: 0;
        transform:
            translate3d(var(--fantasy-fx-x), var(--fantasy-fx-y), 0)
            translate(-50%, -50%)
            scale(7.2);
    }
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench::before {
        opacity: 0.54;
        animation-duration: 20s, 7.2s;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-console, .fantasy-stage) {
        animation-duration: 20s;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-control-section::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-current-setting,
            .fantasy-age-card,
            .fantasy-stream-panel,
            .fantasy-view-toggle
        )::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn,
            .fantasy-action-btn,
            .fantasy-view-toggle button,
            .fantasy-tree-visual-version button
        )::before {
        animation: none !important;
        opacity: 0.36;
        filter: none;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn,
            .fantasy-action-btn,
            .fantasy-icon-btn,
            .fantasy-mobile-controls-toggle,
            .fantasy-record[data-story],
            .fantasy-view-toggle button,
            .fantasy-tree-visual-version button,
            .fantasy-tree-toolbar button,
            .fantasy-tree-timeline-path button,
            .fantasy-tree-stage-preview-actions button,
            .fantasy-story-drawer button
        ) {
        --fantasy-fx-hotspot: transparent;
        filter: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn,
            .fantasy-action-btn,
            .fantasy-icon-btn,
            .fantasy-mobile-controls-toggle,
            .fantasy-record[data-story],
            .fantasy-view-toggle button,
            .fantasy-tree-visual-version button,
            .fantasy-tree-toolbar button,
            .fantasy-tree-timeline-path button,
            .fantasy-tree-stage-preview-actions button,
            .fantasy-story-drawer button
        ):hover:not(:disabled) {
        transform: none !important;
        background-position:
            0 0,
            135% 0,
            0 0,
            0 0 !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn,
            .fantasy-action-btn,
            .fantasy-icon-btn,
            .fantasy-mobile-controls-toggle,
            .fantasy-record[data-story],
            .fantasy-view-toggle button,
            .fantasy-tree-visual-version button,
            .fantasy-tree-toolbar button,
            .fantasy-tree-timeline-path button,
            .fantasy-tree-stage-preview-actions button,
            .fantasy-story-drawer button
        ):active:not(:disabled) {
        transform: scale(0.97) !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-record::before {
        opacity: 0.48;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-stage,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-stage::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-record::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-stage-top::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-control-section::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-current-setting,
            .fantasy-age-card,
            .fantasy-stream-panel,
            .fantasy-view-toggle
        )::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn,
            .fantasy-action-btn,
            .fantasy-view-toggle button,
            .fantasy-tree-visual-version button
        )::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-btn-loading, .fantasy-record.generating)::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn.active,
            .fantasy-action-btn.active,
            .fantasy-record.selected,
            .fantasy-view-toggle button.active,
            .fantasy-tree-visual-version button.active,
            .fantasy-mode-btn[aria-pressed="true"],
            .fantasy-action-btn[aria-pressed="true"],
            .fantasy-view-toggle button[aria-selected="true"],
            .fantasy-tree-visual-version button[aria-selected="true"]
        )::after {
        animation: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn,
            .fantasy-action-btn,
            .fantasy-icon-btn,
            .fantasy-mobile-controls-toggle,
            .fantasy-record[data-story],
            .fantasy-view-toggle button,
            .fantasy-tree-visual-version button,
            .fantasy-tree-toolbar button,
            .fantasy-tree-timeline-path button,
            .fantasy-tree-stage-preview-actions button,
            .fantasy-story-drawer button
        ) {
        --fantasy-fx-hotspot: transparent;
        transition: none !important;
        filter: none !important;
        transform: none !important;
        background-position:
            0 0,
            135% 0,
            0 0,
            0 0 !important;
    }

    .fantasy-fx-ripple {
        display: none !important;
        animation: none !important;
    }
}

/* ===== Life Forge Tactical HUD V3 =====
   Structural chrome makes the workbench legible at a glance. Motion is kept
   on short edge traces and status rails; the planet canvas remains untouched. */
#view-memory.fantasy-memory-view #fantasy-workbench {
    --fantasy-hud-line: rgba(50, 246, 255, 0.68);
    --fantasy-hud-line-soft: rgba(50, 246, 255, 0.24);
    --fantasy-hud-pink: rgba(255, 69, 214, 0.76);
    --fantasy-hud-violet: rgba(167, 103, 255, 0.72);
    --fantasy-hud-ink: rgba(1, 7, 18, 0.88);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready {
    position: relative;
    isolation: isolate;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench {
    position: relative;
    isolation: isolate;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud {
    position: absolute;
    z-index: 30;
    inset: 4px;
    pointer-events: none;
    overflow: hidden;
    clip-path: polygon(
        0 18px,
        18px 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        18px 100%,
        0 calc(100% - 18px)
    );
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    :is(
        .fantasy-hud-corner,
        .fantasy-hud-rail,
        .fantasy-hud-scale,
        .fantasy-hud-beam
    ) {
    position: absolute;
    display: block;
    pointer-events: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-corner {
    width: 28px;
    height: 28px;
    border-color: var(--fantasy-hud-line);
    border-style: solid;
    filter:
        drop-shadow(0 0 5px rgba(50, 246, 255, 0.46))
        drop-shadow(0 0 7px rgba(255, 69, 214, 0.2));
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-corner::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    background: var(--fantasy-hud-pink);
    box-shadow:
        0 0 6px rgba(255, 69, 214, 0.84),
        0 0 10px rgba(50, 246, 255, 0.36);
    animation: fantasyFxCornerPulse 4.4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-corner.is-top-left {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-corner.is-top-left::after {
    top: -3px;
    left: -3px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-corner.is-top-right {
    top: 0;
    right: 0;
    border-width: 2px 2px 0 0;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-corner.is-top-right::after {
    top: -3px;
    right: -3px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-corner.is-bottom-left {
    bottom: 0;
    left: 0;
    border-width: 0 0 2px 2px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-corner.is-bottom-left::after {
    right: -3px;
    bottom: -3px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-corner.is-bottom-right {
    right: 0;
    bottom: 0;
    border-width: 0 2px 2px 0;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-corner.is-bottom-right::after {
    right: -3px;
    bottom: -3px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-rail {
    height: 2px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 14px,
            rgba(50, 246, 255, 0.72) 14px 18px,
            transparent 18px 31px,
            rgba(255, 69, 214, 0.72) 31px 34px,
            transparent 34px 52px
        );
    background-size: 180px 100%;
    filter:
        drop-shadow(0 0 4px rgba(50, 246, 255, 0.48))
        drop-shadow(0 0 7px rgba(255, 69, 214, 0.24));
    animation: fantasyFxHudRailFlow 8.6s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-rail::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    width: 18%;
    min-width: 72px;
    height: 6px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.9) 42%,
        var(--fantasy-hud-pink) 62%,
        transparent
    );
    filter:
        drop-shadow(0 0 6px rgba(50, 246, 255, 0.82))
        drop-shadow(0 0 9px rgba(255, 69, 214, 0.38));
    animation: fantasyFxHudRailPacket 5.2s linear -1.4s infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-rail.is-top {
    top: 9px;
    right: 76px;
    left: 76px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-rail.is-bottom {
    right: 76px;
    bottom: 9px;
    left: 76px;
    animation-delay: -4.2s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-rail.is-bottom::after {
    animation-direction: reverse;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-scale {
    top: 64px;
    bottom: 64px;
    width: 9px;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(50, 246, 255, 0.66) 0 1px,
            transparent 1px 12px,
            rgba(255, 69, 214, 0.56) 12px 14px,
            transparent 14px 25px
        );
    background-size: 100% 84px;
    filter: drop-shadow(0 0 4px rgba(50, 246, 255, 0.36));
    animation: fantasyFxHudRailFlow 10.4s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-scale.is-left {
    left: 8px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-scale.is-right {
    right: 8px;
    animation-delay: -5.2s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam {
    --fantasy-beam-duration: 7.2s;
    --fantasy-beam-delay: -1.8s;
    --fantasy-beam-direction: normal;
    z-index: 2;
    overflow: visible;
    opacity: 0.72;
    background: linear-gradient(
        90deg,
        transparent 0,
        rgba(50, 246, 255, 0.12) 8%,
        rgba(50, 246, 255, 0.96) 24%,
        rgba(235, 255, 255, 0.98) 32%,
        rgba(255, 69, 214, 0.92) 48%,
        rgba(167, 103, 255, 0.7) 72%,
        transparent 100%
    );
    box-shadow:
        0 0 4px rgba(50, 246, 255, 0.92),
        0 0 10px rgba(50, 246, 255, 0.52),
        0 0 16px rgba(255, 69, 214, 0.3);
    filter: brightness(1.08);
    animation-duration: var(--fantasy-beam-duration);
    animation-timing-function: linear;
    animation-delay: var(--fantasy-beam-delay);
    animation-iteration-count: infinite;
    animation-direction: var(--fantasy-beam-direction);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam::after {
    content: "";
    position: absolute;
    display: block;
    background: rgba(224, 255, 255, 0.96);
    box-shadow:
        0 0 5px rgba(50, 246, 255, 0.9),
        0 0 9px rgba(255, 69, 214, 0.54);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-horizontal {
    left: 50%;
    width: clamp(210px, 34vw, 620px);
    height: 2px;
    animation-name: fantasyFxHudBeamHorizontal;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-horizontal::before {
    top: -2px;
    left: 18%;
    width: 9px;
    height: 6px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-horizontal::after {
    top: -1px;
    right: 12%;
    width: 22%;
    height: 1px;
    opacity: 0.72;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-horizontal.is-top.is-primary {
    top: 5px;
    --fantasy-beam-duration: 6.2s;
    --fantasy-beam-delay: -2.7s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-horizontal.is-top.is-secondary {
    top: 11px;
    width: clamp(150px, 24vw, 440px);
    height: 1px;
    opacity: 0.58;
    --fantasy-beam-duration: 8.8s;
    --fantasy-beam-delay: -6.4s;
    --fantasy-beam-direction: reverse;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-horizontal.is-top.is-tertiary {
    top: 16px;
    width: clamp(96px, 15vw, 280px);
    height: 3px;
    opacity: 0.46;
    --fantasy-beam-duration: 11.6s;
    --fantasy-beam-delay: -3.1s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-horizontal.is-bottom {
    bottom: 6px;
    width: clamp(140px, 25vw, 460px);
    opacity: 0.52;
    --fantasy-beam-duration: 9.4s;
    --fantasy-beam-delay: -7.2s;
    --fantasy-beam-direction: reverse;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-vertical {
    top: 50%;
    width: 2px;
    height: clamp(170px, 32vh, 430px);
    background: linear-gradient(
        180deg,
        transparent 0,
        rgba(255, 69, 214, 0.16) 10%,
        rgba(255, 69, 214, 0.9) 25%,
        rgba(240, 255, 255, 0.98) 34%,
        rgba(50, 246, 255, 0.96) 52%,
        rgba(167, 103, 255, 0.7) 76%,
        transparent 100%
    );
    animation-name: fantasyFxHudBeamVertical;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-vertical::before {
    top: 17%;
    left: -2px;
    width: 6px;
    height: 10px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-vertical::after {
    right: 0;
    bottom: 12%;
    width: 1px;
    height: 24%;
    opacity: 0.68;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-vertical.is-left.is-primary {
    left: 5px;
    --fantasy-beam-duration: 7.6s;
    --fantasy-beam-delay: -5.3s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-vertical.is-left.is-secondary {
    left: 12px;
    width: 1px;
    height: clamp(110px, 23vh, 310px);
    opacity: 0.5;
    --fantasy-beam-duration: 10.8s;
    --fantasy-beam-delay: -1.9s;
    --fantasy-beam-direction: reverse;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-vertical.is-right.is-primary {
    right: 5px;
    --fantasy-beam-duration: 8.4s;
    --fantasy-beam-delay: -6.8s;
    --fantasy-beam-direction: reverse;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    .fantasy-hud-beam.is-vertical.is-right.is-secondary {
    right: 12px;
    width: 1px;
    height: clamp(120px, 25vh, 330px);
    opacity: 0.48;
    --fantasy-beam-duration: 12.2s;
    --fantasy-beam-delay: -4.4s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench
    > :is(.fantasy-console, .fantasy-stage) {
    position: relative;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-panel-hud {
    position: absolute;
    z-index: 8;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    clip-path: inherit;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-panel-hud
    :is(.fantasy-panel-corner) {
    position: absolute;
    display: block;
    width: 22px;
    height: 22px;
    border-color: var(--fantasy-hud-line);
    border-style: solid;
    filter:
        drop-shadow(0 0 5px rgba(50, 246, 255, 0.4))
        drop-shadow(0 0 5px rgba(255, 69, 214, 0.22));
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-panel-hud
    .fantasy-panel-corner::after {
    content: "";
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 8px rgba(50, 246, 255, 0.9);
    animation: fantasyFxCornerPulse 3.6s cubic-bezier(0.45, 0, 0.55, 1) -0.8s infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-panel-hud
    .fantasy-panel-corner.is-top-left {
    top: 10px;
    left: 10px;
    border-width: 2px 0 0 2px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-panel-hud
    .fantasy-panel-corner.is-top-left::after {
    top: -2px;
    left: -2px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-panel-hud
    .fantasy-panel-corner.is-top-right {
    top: 10px;
    right: 10px;
    border-width: 2px 2px 0 0;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-panel-hud
    .fantasy-panel-corner.is-top-right::after {
    top: -2px;
    right: -2px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-panel-hud
    .fantasy-panel-corner.is-bottom-left {
    bottom: 10px;
    left: 10px;
    border-width: 0 0 2px 2px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-panel-hud
    .fantasy-panel-corner.is-bottom-left::after {
    bottom: -2px;
    left: -2px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-panel-hud
    .fantasy-panel-corner.is-bottom-right {
    right: 10px;
    bottom: 10px;
    border-width: 0 2px 2px 0;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-panel-hud
    .fantasy-panel-corner.is-bottom-right::after {
    right: -2px;
    bottom: -2px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal {
    --fantasy-console-signal-duration: 8.2s;
    --fantasy-console-signal-delay: -2.6s;
    --fantasy-console-signal-direction: normal;
    position: absolute;
    z-index: 2;
    display: block;
    pointer-events: none;
    opacity: 0.68;
    background: linear-gradient(
        90deg,
        transparent 0,
        rgba(50, 246, 255, 0.18) 9%,
        rgba(50, 246, 255, 0.94) 28%,
        rgba(237, 255, 255, 0.98) 38%,
        rgba(255, 69, 214, 0.9) 56%,
        rgba(167, 103, 255, 0.62) 78%,
        transparent 100%
    );
    box-shadow:
        0 0 4px rgba(50, 246, 255, 0.82),
        0 0 9px rgba(50, 246, 255, 0.36),
        0 0 13px rgba(255, 69, 214, 0.24);
    filter: brightness(1.04);
    animation-duration: var(--fantasy-console-signal-duration);
    animation-timing-function: linear;
    animation-delay: var(--fantasy-console-signal-delay);
    animation-iteration-count: infinite;
    animation-direction: var(--fantasy-console-signal-direction);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal::after {
    content: "";
    position: absolute;
    display: block;
    background: rgba(236, 255, 255, 0.96);
    box-shadow:
        0 0 5px rgba(50, 246, 255, 0.9),
        0 0 8px rgba(255, 69, 214, 0.48);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal.is-horizontal {
    left: 0;
    width: 44%;
    min-width: 112px;
    max-width: 210px;
    height: 2px;
    animation-name: fantasyFxConsoleSignalHorizontal;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal.is-horizontal::before {
    top: -2px;
    left: 24%;
    width: 7px;
    height: 6px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal.is-horizontal::after {
    top: -1px;
    right: 11%;
    width: 20%;
    height: 1px;
    opacity: 0.66;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal.is-horizontal.is-top.is-primary {
    top: 7px;
    --fantasy-console-signal-duration: 6.8s;
    --fantasy-console-signal-delay: -4.9s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal.is-horizontal.is-top.is-secondary {
    top: 14px;
    width: 27%;
    min-width: 76px;
    height: 1px;
    opacity: 0.48;
    --fantasy-console-signal-duration: 10.6s;
    --fantasy-console-signal-delay: -2.2s;
    --fantasy-console-signal-direction: reverse;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal.is-vertical {
    top: 0;
    width: 2px;
    height: clamp(140px, 24vh, 280px);
    background: linear-gradient(
        180deg,
        transparent 0,
        rgba(255, 69, 214, 0.14) 10%,
        rgba(255, 69, 214, 0.88) 26%,
        rgba(239, 255, 255, 0.98) 36%,
        rgba(50, 246, 255, 0.94) 56%,
        rgba(167, 103, 255, 0.58) 78%,
        transparent 100%
    );
    animation-name: fantasyFxConsoleSignalVertical;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal.is-vertical::before {
    top: 22%;
    left: -2px;
    width: 6px;
    height: 8px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal.is-vertical::after {
    right: 0;
    bottom: 13%;
    width: 1px;
    height: 22%;
    opacity: 0.62;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal.is-vertical.is-left.is-primary {
    left: 5px;
    --fantasy-console-signal-duration: 8.6s;
    --fantasy-console-signal-delay: -6.1s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal.is-vertical.is-left.is-secondary {
    left: 12px;
    width: 1px;
    height: clamp(86px, 15vh, 174px);
    opacity: 0.42;
    --fantasy-console-signal-duration: 12.4s;
    --fantasy-console-signal-delay: -3.7s;
    --fantasy-console-signal-direction: reverse;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal.is-vertical.is-right.is-primary {
    right: 5px;
    --fantasy-console-signal-duration: 9.4s;
    --fantasy-console-signal-delay: -7.8s;
    --fantasy-console-signal-direction: reverse;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-hud
    .fantasy-console-signal.is-vertical.is-right.is-secondary {
    right: 12px;
    width: 1px;
    height: clamp(92px, 16vh, 188px);
    opacity: 0.4;
    --fantasy-console-signal-duration: 13.2s;
    --fantasy-console-signal-delay: -1.6s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-console, .fantasy-stage)
    > :is(.fantasy-panel-hud, .fantasy-console-telemetry) {
    pointer-events: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-telemetry {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 0.7fr 1.7fr 0.8fr;
    gap: 6px;
    margin: 12px 0 2px;
    padding: 8px 8px 7px;
    border: 1px solid rgba(50, 246, 255, 0.22);
    clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
    background:
        linear-gradient(90deg, rgba(50, 246, 255, 0.05), transparent 46%, rgba(255, 69, 214, 0.06)),
        rgba(1, 7, 18, 0.66);
    box-shadow:
        inset 0 0 18px rgba(50, 246, 255, 0.05),
        0 0 10px rgba(50, 246, 255, 0.08);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-telemetry.is-active {
    border-color: rgba(255, 69, 214, 0.58);
    box-shadow:
        inset 0 0 20px rgba(255, 69, 214, 0.08),
        0 0 12px rgba(255, 69, 214, 0.16);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-telemetry-item {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 4px;
    padding: 2px 6px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-telemetry-item::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--fantasy-hud-pink), var(--fantasy-hud-line), transparent);
    background-size: 220% 100%;
    opacity: 0.58;
    animation: fantasyFxTelemetryTrace 6.8s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-telemetry-item:nth-child(2)::after {
    animation-delay: -2.2s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-telemetry-item:nth-child(3)::after {
    animation-delay: -4.4s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-telemetry-item small {
    color: rgba(148, 250, 255, 0.7);
    font-size: 8px;
    letter-spacing: 0.8px;
    line-height: 1;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-telemetry-item strong {
    min-width: 0;
    overflow: hidden;
    color: #effeff;
    font-size: 11px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-hud {
    position: absolute;
    z-index: 5;
    inset: 15px;
    pointer-events: none;
    overflow: hidden;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-hud
    :is(.fantasy-space-corner, .fantasy-space-scale, .fantasy-space-index, .fantasy-space-status-strip) {
    position: absolute;
    pointer-events: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-corner {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(50, 246, 255, 0.46);
    filter: drop-shadow(0 0 5px rgba(50, 246, 255, 0.28));
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-corner::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 1px;
    background: var(--fantasy-hud-pink);
    box-shadow: 0 0 6px rgba(255, 69, 214, 0.64);
    animation: fantasyFxTelemetryTrace 5.8s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-corner.is-top-left {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-corner.is-top-left::after {
    top: -2px;
    left: 18px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-corner.is-top-right {
    top: 0;
    right: 0;
    border-width: 2px 2px 0 0;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-corner.is-top-right::after {
    top: -2px;
    right: 18px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-corner.is-bottom-left {
    bottom: 0;
    left: 0;
    border-width: 0 0 2px 2px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-corner.is-bottom-left::after {
    bottom: -2px;
    left: 18px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-corner.is-bottom-right {
    right: 0;
    bottom: 0;
    border-width: 0 2px 2px 0;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-corner.is-bottom-right::after {
    right: 18px;
    bottom: -2px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-scale {
    top: 42px;
    bottom: 42px;
    width: 7px;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(50, 246, 255, 0.62) 0 1px,
            transparent 1px 11px,
            rgba(167, 103, 255, 0.52) 11px 13px,
            transparent 13px 24px
        );
    background-size: 100% 78px;
    opacity: 0.72;
    animation: fantasyFxHudRailFlow 11.8s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-scale.is-left {
    left: 5px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-scale.is-right {
    right: 5px;
    animation-delay: -5.9s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-index {
    padding: 3px 7px;
    color: rgba(148, 250, 255, 0.72);
    border-left: 2px solid var(--fantasy-hud-pink);
    background: linear-gradient(90deg, rgba(255, 69, 214, 0.12), transparent);
    font-size: 8px;
    letter-spacing: 0.7px;
    line-height: 1.2;
    text-shadow: 0 0 7px rgba(50, 246, 255, 0.42);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-index.is-top {
    top: 10px;
    left: 48px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-index.is-right {
    top: 52px;
    right: 8px;
    transform: rotate(90deg) translateX(100%);
    transform-origin: top right;
    opacity: 0.54;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-status-strip {
    right: 44px;
    bottom: 12px;
    left: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 24px;
    padding: 5px 10px;
    color: rgba(206, 250, 255, 0.8);
    border-top: 1px solid rgba(50, 246, 255, 0.34);
    border-bottom: 1px solid rgba(255, 69, 214, 0.28);
    background:
        linear-gradient(90deg, rgba(50, 246, 255, 0.09), transparent 42%, rgba(255, 69, 214, 0.09)),
        rgba(1, 7, 18, 0.74);
    font-size: 8px;
    letter-spacing: 0.6px;
    line-height: 1;
    text-shadow: 0 0 8px rgba(50, 246, 255, 0.32);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-status-strip .is-object {
    color: rgba(255, 180, 244, 0.84);
}

@keyframes fantasyFxHudRailFlow {
    from {
        background-position: 0 0;
        opacity: 0.48;
    }
    50% {
        opacity: 0.92;
    }
    to {
        background-position: 180px 84px;
        opacity: 0.48;
    }
}

@keyframes fantasyFxCornerPulse {
    0%,
    100% {
        opacity: 0.42;
        filter: brightness(0.84);
    }
    50% {
        opacity: 1;
        filter: brightness(1.2);
    }
}

@keyframes fantasyFxHudRailPacket {
    from {
        opacity: 0.16;
        transform: translate3d(-110%, 0, 0);
    }
    12%,
    82% {
        opacity: 0.96;
    }
    to {
        opacity: 0.16;
        transform: translate3d(570%, 0, 0);
    }
}

@keyframes fantasyFxHudBeamHorizontal {
    0% {
        opacity: 0;
        transform: translate3d(calc(-50% - 66vw), 0, 0);
        filter: brightness(0.72);
    }
    8%,
    76% {
        opacity: 0.82;
        filter: brightness(1.16);
    }
    88%,
    100% {
        opacity: 0;
        transform: translate3d(calc(-50% + 66vw), 0, 0);
        filter: brightness(0.78);
    }
}

@keyframes fantasyFxHudBeamVertical {
    0% {
        opacity: 0;
        transform: translate3d(0, calc(-50% - 64vh), 0);
        filter: brightness(0.72);
    }
    10%,
    74% {
        opacity: 0.78;
        filter: brightness(1.14);
    }
    88%,
    100% {
        opacity: 0;
        transform: translate3d(0, calc(-50% + 64vh), 0);
        filter: brightness(0.78);
    }
}

@keyframes fantasyFxConsoleSignalHorizontal {
    0% {
        opacity: 0;
        transform: translate3d(-120%, 0, 0);
        filter: brightness(0.72);
    }
    10%,
    72% {
        opacity: 0.78;
        filter: brightness(1.14);
    }
    88%,
    100% {
        opacity: 0;
        transform: translate3d(620%, 0, 0);
        filter: brightness(0.76);
    }
}

@keyframes fantasyFxConsoleSignalVertical {
    0% {
        opacity: 0;
        transform: translate3d(0, -120%, 0);
        filter: brightness(0.72);
    }
    9%,
    74% {
        opacity: 0.74;
        filter: brightness(1.12);
    }
    89%,
    100% {
        opacity: 0;
        transform: translate3d(0, 820%, 0);
        filter: brightness(0.76);
    }
}

@keyframes fantasyFxTelemetryTrace {
    from {
        background-position: 150% 0;
        opacity: 0.28;
    }
    50% {
        opacity: 0.76;
    }
    to {
        background-position: -150% 0;
        opacity: 0.28;
    }
}

@media (min-width: 861px) {
    body.fantasy-tree-v4-active
        #fantasy-workbench
        > .fantasy-workbench-hud,
    body.fantasy-tree-v4-active
        #fantasy-workbench
        > .fantasy-workbench
        > .fantasy-stage
        > .fantasy-panel-hud {
        display: none;
    }
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench-hud {
        inset: 3px;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench-hud
        :is(
            .fantasy-hud-scale,
            .fantasy-hud-rail.is-bottom,
            .fantasy-hud-beam.is-secondary,
            .fantasy-hud-beam.is-tertiary,
            .fantasy-hud-beam.is-bottom
        ) {
        display: none;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console-hud
        .fantasy-console-signal.is-secondary {
        display: none;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console-hud
        .fantasy-console-signal.is-horizontal.is-primary {
        width: 38%;
        min-width: 104px;
        --fantasy-console-signal-duration: 9.6s;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console-hud
        .fantasy-console-signal.is-vertical.is-primary {
        height: clamp(92px, 18vh, 150px);
        --fantasy-console-signal-duration: 11.4s;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench-hud
        .fantasy-hud-rail.is-top {
        right: 52px;
        left: 52px;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench-hud
        .fantasy-hud-beam.is-horizontal.is-top.is-primary {
        top: 6px;
        width: clamp(120px, 42vw, 220px);
        --fantasy-beam-duration: 8.6s;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench-hud
        .fantasy-hud-beam.is-vertical.is-primary {
        height: clamp(96px, 22vh, 170px);
        --fantasy-beam-duration: 10.4s;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console-telemetry {
        grid-template-columns: 0.8fr 1.35fr 0.8fr;
        margin: 10px 0 0;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-space-hud {
        inset: 10px;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-space-index.is-right {
        display: none;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-space-status-strip {
        right: 20px;
        bottom: 8px;
        left: 20px;
        gap: 6px;
        padding-right: 7px;
        padding-left: 7px;
        font-size: 7px;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console-telemetry
        .fantasy-telemetry-item::after {
        animation: none !important;
        opacity: 0.38;
        filter: none;
    }
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    :is(.fantasy-hud-rail, .fantasy-hud-scale, .fantasy-hud-beam),
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-console-signal,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-hud-rail::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-hud-corner::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-panel-corner::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-telemetry-item::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-space-corner::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-space-scale {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-hud-rail, .fantasy-hud-scale, .fantasy-hud-beam),
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console-signal,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-hud-rail::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-hud-corner::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-panel-corner::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-telemetry-item::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-space-corner::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-space-scale {
        animation: none !important;
        opacity: 0.62;
        filter: none;
    }
}

/* Life Forge SVG Border Beam & Aurora Glow System */
.fantasy-hud-border-beam,
.fantasy-panel-border-beam {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
    will-change: transform;
}

.fantasy-beam-base {
    fill: none;
    stroke: rgba(0, 231, 255, 0.12);
    stroke-width: 1px;
}

.fantasy-beam-trail.is-cyan {
    fill: none;
    stroke: url(#fantasyWorkbenchBeamCyan);
    stroke-width: 2.2px;
    stroke-dasharray: 24 76;
    animation: fantasyBorderBeamLoop 3s linear infinite;
    filter: drop-shadow(0 0 4px rgba(0, 240, 255, 0.4));
}

.fantasy-beam-head.is-cyan {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.6px;
    stroke-dasharray: 2 98;
    filter: drop-shadow(0 0 6px #00f0ff) drop-shadow(0 0 10px rgba(0, 240, 255, 0.8));
    animation: fantasyBorderBeamLoop 3s linear infinite;
}

.fantasy-beam-trail.is-gold {
    fill: none;
    stroke: url(#fantasyWorkbenchBeamGold);
    stroke-width: 2px;
    stroke-dasharray: 20 80;
    animation: fantasyBorderBeamLoop 3s linear infinite;
    animation-delay: -1.5s;
    filter: drop-shadow(0 0 4px rgba(255, 224, 102, 0.4));
}

.fantasy-beam-head.is-gold {
    fill: none;
    stroke: #fff7d6;
    stroke-width: 2.4px;
    stroke-dasharray: 2 98;
    filter: drop-shadow(0 0 6px #ffe066) drop-shadow(0 0 10px rgba(255, 153, 0, 0.7));
    animation: fantasyBorderBeamLoop 3s linear infinite;
    animation-delay: -1.5s;
}

@keyframes fantasyBorderBeamLoop {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -100;
    }
}

@keyframes auroraGlowRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ===== Life Forge Workbench Frame V1 =====
   The workbench keeps one deliberate beam per frame. The star-map surface and
   its internal HUD remain outside this layer and keep their existing visuals. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready {
    --fantasy-frame-bg: rgba(5, 10, 20, 0.94);
    --fantasy-panel-bg: rgba(7, 14, 25, 0.92);
    --fantasy-panel-bg-strong: rgba(4, 10, 19, 0.96);
    --fantasy-frame-edge: rgba(145, 176, 219, 0.22);
    --fantasy-frame-edge-soft: rgba(90, 129, 184, 0.13);
    --fantasy-frame-text: #e6f4fb;
    --fantasy-frame-muted: #8ca8b7;
    --fantasy-frame-cyan: #5bd9ff;
    --fantasy-frame-violet: #887cff;
    --fantasy-frame-pink: #e978dc;
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(
            ellipse at 76% 12%,
            rgba(92, 85, 206, 0.09),
            transparent 34%
        ),
        linear-gradient(145deg, rgba(12, 26, 45, 0.26), transparent 42%),
        #020712;
    color: var(--fantasy-frame-text);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench {
    position: relative;
    isolation: isolate;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--fantasy-frame-edge);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(80, 190, 229, 0.035),
            transparent 32%,
            rgba(122, 102, 225, 0.045)
        ),
        var(--fantasy-frame-bg) !important;
    box-shadow:
        inset 0 1px 0 rgba(229, 250, 255, 0.07),
        inset 0 0 42px rgba(54, 96, 157, 0.06),
        0 16px 44px rgba(0, 0, 0, 0.3) !important;
    overflow: hidden;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench {
    animation: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud {
    position: absolute;
    z-index: 30;
    inset: 4px;
    overflow: visible;
    border-radius: 16px;
    clip-path: none;
    pointer-events: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-console, .fantasy-stage) {
    position: relative;
    clip-path: none !important;
    border-radius: 14px;
    border: 1px solid var(--fantasy-frame-edge-soft) !important;
    background: var(--fantasy-panel-bg) !important;
    box-shadow:
        inset 0 1px 0 rgba(228, 250, 255, 0.045),
        inset 0 0 26px rgba(60, 108, 169, 0.045) !important;
    animation: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console {
    overflow-x: hidden;
    overflow-y: auto;
    border-right-color: rgba(120, 143, 210, 0.2);
    background:
        linear-gradient(
            90deg,
            rgba(57, 214, 255, 0.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(57, 214, 255, 0.022) 1px,
            transparent 1px
        ),
        var(--fantasy-panel-bg) !important;
    background-size: 22px 22px, 22px 22px, auto !important;
    backdrop-filter: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-stage {
    overflow: hidden;
    border-color: rgba(106, 173, 219, 0.2);
    background:
        linear-gradient(
            135deg,
            rgba(83, 191, 222, 0.045),
            transparent 33%,
            rgba(111, 90, 206, 0.04)
        ),
        var(--fantasy-panel-bg-strong) !important;
}

/* Old tactical decoration is intentionally disabled only on the outer
   workbench chrome. The .fantasy-space subtree keeps its own HUD unchanged. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench
    > :is(.fantasy-console, .fantasy-stage)::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench
    > :is(.fantasy-console, .fantasy-stage)::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-stage-top::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-record::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-current-setting,
        .fantasy-age-card,
        .fantasy-stream-panel,
        .fantasy-view-toggle
    )::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button
    )::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button
    ):not(.fantasy-btn-loading)::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-record::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-record:not(.generating)::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.fantasy-border-beam-frame {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    fill: none;
}

.fantasy-border-beam-base,
.fantasy-border-beam-trail,
.fantasy-border-beam-core,
.fantasy-border-beam-head {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fantasy-border-beam-base {
    stroke-width: 0.82;
    opacity: 0.24;
}

.fantasy-border-beam-trail {
    stroke-width: 2.6;
    stroke-dasharray: 12 88;
    opacity: 0.28;
    filter: blur(1.8px);
    animation: fantasyBorderBeamTrace 5.2s linear infinite;
}

.fantasy-border-beam-core {
    stroke-width: 1.45;
    stroke-dasharray: 6.5 93.5;
    opacity: 0.9;
    filter:
        drop-shadow(0 0 2px rgba(123, 115, 255, 0.62))
        drop-shadow(0 0 5px rgba(80, 220, 255, 0.28));
    animation: fantasyBorderBeamTrace 5.2s linear infinite;
}

.fantasy-border-beam-head {
    stroke-width: 2;
    stroke-dasharray: 1.1 98.9;
    opacity: 0.94;
    filter:
        drop-shadow(0 0 2px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 5px rgba(80, 220, 255, 0.42));
    animation: fantasyBorderBeamTrace 5.2s linear infinite;
}

.fantasy-planet-overview-frame > .fantasy-border-beam-frame {
    z-index: 0;
    inset: 0;
    overflow: visible;
}

.fantasy-planet-overview-frame > .fantasy-border-beam-frame
    :is(
        .fantasy-border-beam-trail,
        .fantasy-border-beam-core,
        .fantasy-border-beam-head
    ) {
    animation-duration: 4.8s;
    animation-delay: -0.9s;
}

.fantasy-planet-overview-frame::before,
.fantasy-planet-overview-frame::after {
    z-index: 1;
}

.fantasy-border-beam-frame.is-workbench {
    inset: 0;
}

.fantasy-panel-hud {
    position: absolute;
    z-index: 8;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    clip-path: none !important;
    pointer-events: none;
}

.fantasy-panel-hud .fantasy-border-beam-frame {
    inset: 0;
}

.fantasy-console-hud
    :is(
        .fantasy-border-beam-trail,
        .fantasy-border-beam-core,
        .fantasy-border-beam-head
    ) {
    animation-duration: 5.8s;
    animation-delay: -1.35s;
}

.fantasy-stage-hud
    :is(
        .fantasy-border-beam-trail,
        .fantasy-border-beam-core,
        .fantasy-border-beam-head
    ) {
    animation-duration: 6.4s;
    animation-delay: -3.15s;
}

@keyframes fantasyBorderBeamTrace {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-head,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-stage-top {
    border-bottom-color: rgba(112, 170, 209, 0.2) !important;
    background:
        linear-gradient(
            90deg,
            rgba(75, 211, 255, 0.045),
            transparent 42%,
            rgba(124, 99, 223, 0.04)
        ),
        rgba(4, 11, 21, 0.62) !important;
    box-shadow: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-stage-top {
    min-height: 74px;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-kicker {
    color: var(--fantasy-frame-cyan) !important;
    font-family: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
    letter-spacing: 1.2px;
    text-shadow: 0 0 9px rgba(91, 217, 255, 0.3);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-console h3, .fantasy-stage h3) {
    color: var(--fantasy-frame-text) !important;
    font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
    letter-spacing: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-telemetry,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-stage-telemetry {
    border-radius: 8px;
    clip-path: none;
    background:
        linear-gradient(
            90deg,
            rgba(68, 217, 255, 0.05),
            transparent 48%,
            rgba(130, 109, 224, 0.045)
        ),
        rgba(2, 9, 18, 0.72);
    box-shadow: inset 0 1px 0 rgba(224, 249, 255, 0.04);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-telemetry-item::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-stage-telemetry-item::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(91, 217, 255, 0.32),
        transparent
    );
    background-size: 100% 100%;
    opacity: 0.42;
    animation: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-mode-btn, .fantasy-action-btn, .fantasy-view-toggle button) {
    border: 1px solid rgba(112, 166, 208, 0.24) !important;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(16, 29, 47, 0.94), rgba(7, 14, 27, 0.96)) !important;
    color: #c7dce5;
    box-shadow: inset 0 1px 0 rgba(236, 252, 255, 0.045);
    transform: none !important;
    transition:
        border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        background 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-icon-btn,
        .fantasy-mobile-controls-toggle,
        .fantasy-record[data-story],
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button,
        .fantasy-tree-toolbar button,
        .fantasy-tree-timeline-path button,
        .fantasy-tree-stage-preview-actions button,
        .fantasy-story-drawer button
    )
    > i {
    transform: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn:hover,
        .fantasy-action-btn:hover,
        .fantasy-view-toggle button:hover
    ) {
    border-color: rgba(91, 217, 255, 0.58) !important;
    background:
        linear-gradient(145deg, rgba(18, 43, 62, 0.96), rgba(10, 18, 35, 0.98)) !important;
    color: #e9fbff;
    box-shadow:
        inset 0 1px 0 rgba(239, 255, 255, 0.08),
        0 0 12px rgba(77, 208, 255, 0.12);
    filter: none !important;
    transform: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn.active,
        .fantasy-action-btn.active,
        .fantasy-view-toggle button.active,
        .fantasy-mode-btn[aria-pressed="true"],
        .fantasy-action-btn[aria-pressed="true"],
        .fantasy-view-toggle button[aria-selected="true"]
    ) {
    border-color: rgba(136, 124, 255, 0.76) !important;
    background:
        linear-gradient(145deg, rgba(37, 31, 74, 0.94), rgba(12, 18, 39, 0.98)) !important;
    color: #f3efff;
    box-shadow:
        inset 0 1px 0 rgba(243, 238, 255, 0.1),
        0 0 14px rgba(136, 124, 255, 0.16);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn.fantasy-mode-btn,
        .fantasy-action-btn.fantasy-action-btn,
        .fantasy-view-toggle.fantasy-view-toggle button
    ):active:not(:disabled) {
    transform: none !important;
    transition-duration: 180ms !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-textarea, .fantasy-age-input) {
    border: 1px solid rgba(112, 166, 208, 0.28) !important;
    border-radius: 8px;
    background:
        linear-gradient(
            rgba(79, 211, 255, 0.018) 1px,
            transparent 1px
        ),
        rgba(3, 10, 20, 0.94) !important;
    background-size: 100% 24px, auto !important;
    box-shadow:
        inset 0 1px 0 rgba(229, 250, 255, 0.04),
        inset 0 0 16px rgba(65, 125, 185, 0.05);
    transition:
        border-color 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-textarea, .fantasy-age-input):focus {
    border-color: rgba(91, 217, 255, 0.72) !important;
    box-shadow:
        inset 0 1px 0 rgba(240, 255, 255, 0.08),
        inset 0 0 18px rgba(67, 188, 255, 0.09),
        0 0 14px rgba(67, 188, 255, 0.14) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-age-card,
        .fantasy-record,
        .fantasy-empty-record,
        .fantasy-skill-card
    ) {
    border: 1px solid rgba(100, 150, 192, 0.2) !important;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(12, 26, 41, 0.9), rgba(5, 12, 23, 0.94)) !important;
    box-shadow: inset 0 1px 0 rgba(229, 250, 255, 0.035);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-record:hover, .fantasy-record.selected) {
    border-color: rgba(91, 217, 255, 0.58) !important;
    background:
        linear-gradient(145deg, rgba(17, 45, 59, 0.94), rgba(18, 20, 45, 0.96)) !important;
    box-shadow:
        inset 0 1px 0 rgba(238, 255, 255, 0.08),
        0 0 14px rgba(77, 208, 255, 0.1);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section {
    border-top-color: rgba(105, 155, 193, 0.18) !important;
    background: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-section-title {
    color: #a9c6d2 !important;
    text-shadow: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-stream-panel {
    border: 1px solid rgba(204, 108, 216, 0.32) !important;
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(45, 17, 56, 0.72), rgba(8, 18, 32, 0.9)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 223, 253, 0.06);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-progress {
    border-radius: 999px;
    background: rgba(81, 112, 151, 0.16) !important;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.36);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-progress span {
    background: linear-gradient(
        90deg,
        rgba(208, 102, 220, 0.9),
        rgba(136, 124, 255, 0.96) 52%,
        rgba(91, 217, 255, 0.92)
    ) !important;
    box-shadow: 0 0 9px rgba(91, 217, 255, 0.28) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-console, .fantasy-stage)
    > :is(.fantasy-panel-hud, .fantasy-console-telemetry, .fantasy-stage-telemetry) {
    pointer-events: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    :is(
        .fantasy-border-beam-trail,
        .fantasy-border-beam-core,
        .fantasy-border-beam-head
    ) {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench {
        gap: 8px;
        padding: 8px;
        border-radius: 14px;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-console, .fantasy-stage) {
        border-radius: 12px;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-border-beam-trail {
        display: none;
        animation: none !important;
        filter: none;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-border-beam-core {
        stroke-width: 1.7;
        opacity: 0.84;
        filter: drop-shadow(0 0 4px rgba(91, 217, 255, 0.38));
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-border-beam-head {
        stroke-width: 2.3;
        opacity: 0.86;
        filter: drop-shadow(0 0 5px rgba(91, 217, 255, 0.44));
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench-hud {
        inset: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-border-beam-trail,
            .fantasy-border-beam-core,
            .fantasy-border-beam-head
        ) {
        animation: none !important;
        opacity: 0 !important;
        filter: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-border-beam-base {
        opacity: 0.8;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn,
            .fantasy-action-btn,
            .fantasy-icon-btn,
            .fantasy-mobile-controls-toggle,
            .fantasy-record[data-story],
            .fantasy-view-toggle button,
            .fantasy-tree-visual-version button,
            .fantasy-tree-toolbar button,
            .fantasy-tree-timeline-path button,
            .fantasy-tree-stage-preview-actions button,
            .fantasy-story-drawer button
        ) {
        transition: none !important;
        transform: none !important;
    }
}

/* Final cascade for surfaces whose legacy HUD pseudo-elements were disabled. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface.fantasy-aurora-surface {
    border: 1px solid transparent !important;
    background:
        linear-gradient(
            145deg,
            rgba(8, 20, 34, 0.94),
            rgba(5, 10, 22, 0.94)
        ) padding-box,
        linear-gradient(
            140deg,
            rgba(177, 208, 231, 0.24),
            rgba(89, 119, 166, 0.16) 52%,
            rgba(174, 126, 203, 0.2)
        ) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(235, 252, 255, 0.06),
        inset 0 0 22px rgba(53, 126, 190, 0.045),
        0 0 14px rgba(0, 181, 255, 0.06) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::after {
    content: "" !important;
    display: block !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::after {
    animation:
        fantasyAuroraBorderOrbit var(--fantasy-aurora-duration)
        linear infinite !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-aurora-surface::after {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::before {
        animation: none !important;
        opacity: 0 !important;
        filter: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::after {
        animation: none !important;
        opacity: 0.52;
        filter: none;
    }
}

/* codex: life-forge-aurora-capsule-v3 */
/* Continuous contour + one restrained moving highlight. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-border-beam-base, .fantasy-border-beam-core) {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-base {
    stroke-width: 0.92;
    opacity: 0.34;
    filter: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-core {
    stroke-width: 1.18;
    opacity: 0.78;
    filter:
        drop-shadow(0 0 2px rgba(112, 224, 255, 0.42))
        drop-shadow(0 0 5px rgba(167, 103, 255, 0.18));
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-trail {
    display: block !important;
    stroke-width: 3.2;
    stroke-dasharray: 20 80 !important;
    stroke-dashoffset: 0;
    opacity: 0.28;
    filter:
        blur(3.2px)
        drop-shadow(0 0 5px rgba(50, 246, 255, 0.34))
        drop-shadow(0 0 8px rgba(255, 69, 214, 0.18));
    animation: fantasyBorderBeamTrace 11.6s linear infinite !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-head {
    stroke-width: 1.65;
    stroke-dasharray: 1.2 98.8 !important;
    stroke-dashoffset: 0;
    opacity: 0.7;
    filter:
        drop-shadow(0 0 2px rgba(248, 254, 255, 0.82))
        drop-shadow(0 0 5px rgba(80, 220, 255, 0.34))
        drop-shadow(0 0 7px rgba(255, 69, 214, 0.14));
    animation: fantasyBorderBeamTrace 11.6s linear infinite !important;
}

/* A stable full ring, a soft ambient halo, and one slow aurora sweep. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface.fantasy-aurora-surface {
    border-color: transparent !important;
    background:
        linear-gradient(145deg, rgba(7, 18, 32, 0.95), rgba(4, 10, 22, 0.96)) padding-box,
        linear-gradient(
            115deg,
            rgba(81, 230, 255, 0.42),
            rgba(132, 108, 255, 0.28) 42%,
            rgba(255, 72, 190, 0.34) 72%,
            rgba(104, 231, 255, 0.4)
        ) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(236, 252, 255, 0.07),
        inset 0 0 24px rgba(53, 126, 190, 0.055),
        0 0 15px rgba(0, 181, 255, 0.08) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::before {
    inset: -4px !important;
    padding: 4px !important;
    z-index: 0;
    background:
        conic-gradient(
            from 205deg,
            rgba(60, 235, 255, 0.66),
            rgba(131, 102, 255, 0.38) 36%,
            rgba(255, 71, 193, 0.58) 67%,
            rgba(255, 255, 255, 0.28) 78%,
            rgba(60, 235, 255, 0.66)
        ) !important;
    opacity: 0.16 !important;
    filter: blur(8px) !important;
    animation: fantasyAuroraAmbientPulse 8.8s ease-in-out infinite !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::after {
    inset: -1px !important;
    padding: 1.4px !important;
    z-index: 3;
    background:
        conic-gradient(
            from var(--fantasy-aurora-angle),
            transparent 0 68%,
            rgba(60, 235, 255, 0.12) 70%,
            rgba(60, 235, 255, 0.78) 73%,
            rgba(255, 255, 255, 0.98) 76%,
            rgba(255, 71, 193, 0.78) 80%,
            rgba(131, 102, 255, 0.64) 84%,
            transparent 89% 100%
        ) !important;
    opacity: 0.82 !important;
    filter:
        drop-shadow(0 0 2px rgba(60, 235, 255, 0.42))
        drop-shadow(0 0 6px rgba(131, 102, 255, 0.2)) !important;
    animation: fantasyAuroraBorderOrbit var(--fantasy-aurora-duration, 10.4s) linear infinite !important;
}

@keyframes fantasyAuroraAmbientPulse {
    0%, 100% {
        opacity: 0.12;
        filter: blur(8px);
    }
    50% {
        opacity: 0.2;
        filter: blur(9px);
    }
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface.fantasy-aurora-stage-top {
    border-radius: 18px !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    :is(
        .fantasy-border-beam-trail,
        .fantasy-border-beam-head,
        .fantasy-aurora-surface::before,
        .fantasy-aurora-surface::after
    ) {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-border-beam-base {
        opacity: 0.38;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-border-beam-trail {
        display: block !important;
        stroke-width: 2.5;
        opacity: 0.18;
        filter: blur(2.4px) !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-border-beam-head {
        stroke-width: 1.45;
        opacity: 0.62;
        filter: drop-shadow(0 0 3px rgba(80, 220, 255, 0.28)) !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::before {
        opacity: 0.1 !important;
        filter: blur(5px) !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::after {
        opacity: 0.58 !important;
        filter: drop-shadow(0 0 3px rgba(60, 235, 255, 0.28)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-border-beam-base, .fantasy-border-beam-core) {
        animation: none !important;
        stroke-dasharray: none !important;
        opacity: 0.78 !important;
        filter: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-border-beam-trail, .fantasy-border-beam-head) {
        animation: none !important;
        opacity: 0 !important;
        filter: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::before {
        animation: none !important;
        opacity: 0.12 !important;
        filter: blur(5px) !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::after {
        animation: none !important;
        opacity: 0.44 !important;
        filter: none !important;
    }
}

/* codex: life-forge-aurora-hidden-pause-v1 */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-aurora-surface::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-aurora-surface::after {
    animation-play-state: paused !important;
}

/* codex: life-forge-unified-aurora-v4 */
/* One deep-blue/cyan visual language for the memory simulator HUD. */

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready {
    --life-forge-ink-0: #020914;
    --life-forge-ink-1: #061423;
    --life-forge-ink-2: #0b2033;
    --life-forge-cyan: #55ddff;
    --life-forge-cyan-strong: #a5f3ff;
    --life-forge-cyan-soft: rgba(85, 221, 255, 0.2);
    --life-forge-line: rgba(100, 221, 246, 0.34);
    --life-forge-line-strong: rgba(153, 239, 255, 0.82);
    --life-forge-muted: #7fa9ba;
    --life-forge-text: #e6f9ff;
    --life-forge-glow: rgba(53, 204, 255, 0.18);
    --life-forge-glow-soft: rgba(53, 204, 255, 0.08);
    --fantasy-neon-violet: var(--life-forge-cyan) !important;
    --fantasy-neon-pink: var(--life-forge-cyan) !important;
    --fantasy-frame-violet: var(--life-forge-line) !important;
    --fantasy-frame-pink: var(--life-forge-line) !important;
    --fantasy-hud-pink: var(--life-forge-cyan) !important;
    --forge-magenta: var(--life-forge-cyan-strong) !important;
    --forge-yellow: var(--life-forge-cyan-strong) !important;
    color: var(--life-forge-text);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench {
    background:
        linear-gradient(135deg, rgba(40, 177, 220, 0.035), transparent 34%),
        linear-gradient(315deg, rgba(29, 99, 145, 0.04), transparent 42%),
        var(--life-forge-ink-0) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-console, .fantasy-stage) {
    border-color: rgba(100, 221, 246, 0.2) !important;
    background:
        linear-gradient(135deg, rgba(33, 126, 163, 0.055), transparent 36%),
        linear-gradient(315deg, rgba(11, 55, 83, 0.08), transparent 46%),
        rgba(4, 14, 26, 0.96) !important;
    box-shadow:
        inset 0 1px 0 rgba(225, 251, 255, 0.06),
        inset 0 0 30px rgba(30, 145, 190, 0.055),
        0 0 22px rgba(18, 137, 182, 0.06) !important;
}

/* The old tactical chrome is the source of the isolated white marks. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-hud
    :is(.fantasy-hud-rail, .fantasy-hud-scale, .fantasy-hud-beam) {
    display: none !important;
    animation: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-signal,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-scale {
    display: none !important;
    animation: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-hud-corner,
        .fantasy-panel-corner,
        .fantasy-space-corner
    )::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

/* Keep the large cut-corner language, but remove its detached light heads. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-hud-corner, .fantasy-panel-corner, .fantasy-space-corner) {
    filter:
        drop-shadow(0 0 4px rgba(55, 214, 255, 0.2)) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-head {
    display: none !important;
    animation: none !important;
    opacity: 0 !important;
}

/* SVG frames: one continuous contour plus one long, slow cyan sweep. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-border-beam-base, .fantasy-border-beam-core) {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-base {
    stroke: rgba(87, 220, 249, 0.34) !important;
    stroke-width: 0.9 !important;
    opacity: 0.75 !important;
    filter: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-core {
    stroke: rgba(150, 239, 255, 0.72) !important;
    stroke-width: 1.12 !important;
    opacity: 0.86 !important;
    filter:
        drop-shadow(0 0 2px rgba(85, 221, 255, 0.38))
        drop-shadow(0 0 6px rgba(36, 173, 216, 0.16)) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-trail {
    display: block !important;
    stroke: rgba(99, 229, 255, 0.78) !important;
    stroke-width: 3 !important;
    stroke-dasharray: 24 76 !important;
    stroke-dashoffset: 0 !important;
    opacity: 0.34 !important;
    filter:
        blur(2.8px)
        drop-shadow(0 0 5px rgba(62, 214, 255, 0.35)) !important;
    animation: fantasyBorderBeamTrace 11.2s linear infinite !important;
}

/* Aurora surfaces keep content above the ring and never paint over text. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface {
    --fantasy-aurora-duration: 10.4s !important;
    position: relative;
    isolation: isolate;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background:
        linear-gradient(145deg, rgba(8, 27, 43, 0.95), rgba(2, 11, 23, 0.97)) padding-box,
        linear-gradient(
            110deg,
            rgba(102, 224, 250, 0.44),
            rgba(44, 150, 190, 0.25) 52%,
            rgba(147, 238, 255, 0.42)
        ) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(228, 253, 255, 0.08),
        inset 0 0 22px rgba(48, 163, 205, 0.06),
        0 0 16px rgba(42, 184, 228, 0.1) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::after {
    border-radius: inherit !important;
    pointer-events: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::before {
    inset: -4px !important;
    padding: 4px !important;
    z-index: 0 !important;
    background:
        conic-gradient(
            from 205deg,
            rgba(69, 220, 255, 0.5),
            rgba(31, 139, 189, 0.22) 36%,
            rgba(125, 235, 255, 0.42) 68%,
            rgba(230, 253, 255, 0.2) 78%,
            rgba(69, 220, 255, 0.5)
        ) !important;
    opacity: 0.16 !important;
    filter: blur(7px) !important;
    animation: fantasyAuroraAmbientPulse 9.8s ease-in-out infinite !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::after {
    inset: -1px !important;
    padding: 1.4px !important;
    z-index: 0 !important;
    background:
        conic-gradient(
            from var(--fantasy-aurora-angle),
            transparent 0 72%,
            rgba(55, 210, 255, 0.1) 74%,
            rgba(72, 226, 255, 0.74) 77%,
            rgba(236, 254, 255, 0.92) 79%,
            rgba(116, 236, 255, 0.72) 82%,
            transparent 87% 100%
        ) !important;
    opacity: 0.7 !important;
    filter:
        drop-shadow(0 0 2px rgba(54, 215, 255, 0.38))
        drop-shadow(0 0 7px rgba(45, 175, 222, 0.15)) !important;
    animation:
        fantasyAuroraBorderOrbit var(--fantasy-aurora-duration) linear infinite !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface > * {
    position: relative;
    z-index: 1;
}

/* Reuse the same glass treatment for the main control sections. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-stream-panel,
        .fantasy-age-card,
        .fantasy-record,
        .fantasy-empty-record,
        .fantasy-space-status-strip
    ) {
    border-color: var(--life-forge-line) !important;
    background:
        linear-gradient(145deg, rgba(9, 30, 46, 0.92), rgba(2, 12, 24, 0.96)) !important;
    color: var(--life-forge-text) !important;
    box-shadow:
        inset 0 1px 0 rgba(229, 253, 255, 0.055),
        inset 0 0 20px rgba(39, 162, 204, 0.05),
        0 0 12px rgba(38, 176, 222, 0.06) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section
    ) {
    border: 1px solid rgba(91, 210, 239, 0.2) !important;
    border-radius: 18px !important;
    padding: 12px !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-section-title, .fantasy-muted, .fantasy-record-meta, .fantasy-slider-labels) {
    color: var(--life-forge-muted) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-console h3, .fantasy-stage h3, .fantasy-age-card strong, .fantasy-record-title) {
    color: var(--life-forge-text) !important;
}

/* The slider is a cyan signal, not an orange/pink control. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-slider {
    height: 5px !important;
    accent-color: var(--life-forge-cyan) !important;
    border-radius: 999px !important;
    background: linear-gradient(
        90deg,
        rgba(71, 218, 255, 0.78),
        rgba(43, 141, 190, 0.42) 58%,
        rgba(64, 102, 128, 0.28)
    ) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-slider::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    appearance: none;
    border: 2px solid rgba(207, 251, 255, 0.92);
    border-radius: 50%;
    background: var(--life-forge-cyan);
    box-shadow:
        0 0 0 3px rgba(69, 218, 255, 0.12),
        0 0 12px rgba(69, 218, 255, 0.5);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-slider::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(207, 251, 255, 0.92);
    border-radius: 50%;
    background: var(--life-forge-cyan);
    box-shadow:
        0 0 0 3px rgba(69, 218, 255, 0.12),
        0 0 12px rgba(69, 218, 255, 0.5);
}

/* Records stay quiet until the user focuses one. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-record {
    border-radius: 14px !important;
    transition:
        border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-record:hover, .fantasy-record.selected, .fantasy-record.generating) {
    border-color: var(--life-forge-line-strong) !important;
    box-shadow:
        inset 0 1px 0 rgba(238, 254, 255, 0.11),
        inset 0 0 22px rgba(58, 200, 240, 0.08),
        0 0 16px rgba(46, 200, 242, 0.18) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-record:hover, .fantasy-record.selected) {
    transform: translateY(-1px);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-record-dot {
    background: var(--life-forge-cyan) !important;
    box-shadow: 0 0 12px rgba(84, 221, 255, 0.48) !important;
}

/* Stop the previous purple, pink, orange, and yellow static states. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-icon-btn,
        .fantasy-view-toggle,
        .fantasy-view-toggle button,
        .fantasy-textarea,
        .fantasy-age-input,
        .fantasy-console-telemetry,
        .fantasy-space-status-strip
    ) {
    border-color: rgba(100, 221, 246, 0.32) !important;
    color: var(--life-forge-text) !important;
    background:
        linear-gradient(135deg, rgba(12, 37, 54, 0.94), rgba(3, 14, 27, 0.98)) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-icon-btn,
        .fantasy-view-toggle,
        .fantasy-view-toggle button
    ) {
    clip-path: none !important;
    border-radius: 999px !important;
    transition:
        border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 180ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn:hover,
        .fantasy-action-btn:hover,
        .fantasy-icon-btn:hover,
        .fantasy-view-toggle button:hover
    ) {
    border-color: rgba(155, 241, 255, 0.82) !important;
    box-shadow:
        inset 0 1px 0 rgba(240, 254, 255, 0.11),
        0 0 14px rgba(54, 210, 250, 0.18) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn:active,
        .fantasy-action-btn:active,
        .fantasy-icon-btn:active,
        .fantasy-view-toggle button:active
    ) {
    transform: translateY(0) scale(0.985);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn.active,
        .fantasy-action-btn.active,
        .fantasy-mode-btn[aria-pressed="true"],
        .fantasy-action-btn[aria-pressed="true"],
        .fantasy-view-toggle button.active,
        .fantasy-view-toggle button[aria-selected="true"]
    ) {
    border-color: var(--life-forge-line-strong) !important;
    background:
        linear-gradient(135deg, rgba(31, 91, 113, 0.96), rgba(6, 29, 44, 0.98)) !important;
    box-shadow:
        inset 0 0 16px rgba(78, 220, 252, 0.13),
        0 0 16px rgba(63, 212, 248, 0.2) !important;
    color: #f0fdff !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-textarea, .fantasy-age-input) {
    clip-path: none !important;
    border-color: rgba(100, 221, 246, 0.32) !important;
    background:
        linear-gradient(rgba(79, 211, 255, 0.022) 1px, transparent 1px),
        linear-gradient(145deg, rgba(5, 24, 39, 0.98), rgba(2, 10, 21, 0.99)) !important;
    background-size: 100% 24px, auto !important;
    color: var(--life-forge-text) !important;
    box-shadow:
        inset 0 1px 0 rgba(239, 255, 255, 0.06),
        inset 0 0 18px rgba(54, 160, 214, 0.07),
        0 0 10px rgba(56, 211, 255, 0.05) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-textarea, .fantasy-age-input):focus {
    border-color: var(--life-forge-line-strong) !important;
    box-shadow:
        inset 0 1px 0 rgba(248, 255, 255, 0.12),
        inset 0 0 20px rgba(54, 191, 255, 0.1),
        0 0 15px rgba(54, 211, 255, 0.2) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-telemetry {
    border-radius: 999px !important;
    background:
        linear-gradient(100deg, rgba(7, 31, 47, 0.96), rgba(4, 17, 31, 0.94)) !important;
    box-shadow:
        inset 0 1px 0 rgba(238, 254, 255, 0.08),
        inset 0 0 23px rgba(48, 183, 224, 0.09),
        0 0 15px rgba(55, 211, 255, 0.12) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-telemetry.is-active {
    border-color: var(--life-forge-line-strong) !important;
    box-shadow:
        inset 0 1px 0 rgba(245, 255, 255, 0.12),
        inset 0 0 24px rgba(64, 216, 250, 0.13),
        0 0 20px rgba(58, 211, 255, 0.22) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-status-strip {
    border-radius: 999px !important;
    background:
        linear-gradient(100deg, rgba(7, 31, 47, 0.96), rgba(4, 17, 31, 0.94)) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    :is(
        .fantasy-border-beam-trail,
        .fantasy-aurora-surface::before,
        .fantasy-aurora-surface::after
    ) {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-border-beam-base, .fantasy-border-beam-core) {
        filter: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-border-beam-trail {
        stroke-width: 2.4 !important;
        opacity: 0.24 !important;
        filter: blur(2px) !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::before {
        opacity: 0.1 !important;
        filter: blur(5px) !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::after {
        opacity: 0.52 !important;
        filter: drop-shadow(0 0 3px rgba(60, 214, 255, 0.24)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-border-beam-base, .fantasy-border-beam-core) {
        animation: none !important;
        stroke-dasharray: none !important;
        opacity: 0.72 !important;
        filter: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-border-beam-trail {
        animation: none !important;
        opacity: 0 !important;
        filter: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-aurora-surface::before,
            .fantasy-aurora-surface::after
        ) {
        animation: none !important;
        filter: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::before {
        opacity: 0.1 !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-aurora-surface::after {
        opacity: 0.36 !important;
    }
}

/* codex: life-forge-unified-aurora-v4-live-controls */
/* Apply the canonical ring to the actual control markup generated by console.js. */

@property --life-forge-ring-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

@keyframes lifeForgeRingOrbit {
    from {
        --life-forge-ring-angle: 0deg;
    }
    to {
        --life-forge-ring-angle: 360deg;
    }
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    ) {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    )::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    )::after {
    content: "" !important;
    position: absolute;
    display: block !important;
    box-sizing: border-box;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    )::before {
    inset: -4px;
    padding: 4px;
    z-index: 0;
    background:
        conic-gradient(
            from 196deg,
            rgba(70, 221, 255, 0.42),
            rgba(32, 139, 188, 0.18) 38%,
            rgba(133, 239, 255, 0.36) 69%,
            rgba(225, 253, 255, 0.18) 80%,
            rgba(70, 221, 255, 0.42)
        );
    opacity: 0.14;
    filter: blur(6px);
    animation: fantasyAuroraAmbientPulse 9.6s ease-in-out infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    )::after {
    --life-forge-ring-angle: 0deg;
    inset: -1px;
    padding: 1.2px;
    z-index: 0;
    background:
        conic-gradient(
            from var(--life-forge-ring-angle),
            transparent 0 74%,
            rgba(61, 220, 255, 0.1) 76%,
            rgba(81, 231, 255, 0.68) 78%,
            rgba(239, 255, 255, 0.88) 80%,
            rgba(114, 235, 255, 0.64) 82%,
            transparent 87% 100%
        );
    opacity: 0.58;
    filter:
        drop-shadow(0 0 2px rgba(57, 216, 255, 0.32))
        drop-shadow(0 0 6px rgba(47, 177, 221, 0.14));
    animation: lifeForgeRingOrbit 11.2s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    ) > * {
    position: relative;
    z-index: 1;
}

/* Buttons only reveal the moving edge when the user is interacting with them. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-view-toggle button
    ) {
    position: relative;
    isolation: isolate;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-view-toggle button
    )::after {
    content: "" !important;
    position: absolute;
    inset: -1px;
    display: block !important;
    z-index: 0;
    box-sizing: border-box;
    border-radius: inherit;
    padding: 1.2px;
    pointer-events: none;
    background:
        conic-gradient(
            from var(--life-forge-ring-angle),
            transparent 0 76%,
            rgba(64, 221, 255, 0.08) 78%,
            rgba(88, 232, 255, 0.68) 80%,
            rgba(239, 255, 255, 0.88) 82%,
            rgba(88, 232, 255, 0.6) 84%,
            transparent 89% 100%
        );
    opacity: 0;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 5px rgba(63, 218, 255, 0.28));
    animation: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn:hover,
        .fantasy-action-btn:hover,
        .fantasy-mode-btn.active,
        .fantasy-action-btn.active,
        .fantasy-mode-btn[aria-pressed="true"],
        .fantasy-action-btn[aria-pressed="true"],
        .fantasy-view-toggle button:hover,
        .fantasy-view-toggle button.active,
        .fantasy-view-toggle button[aria-selected="true"],
        .fantasy-btn-loading
    )::after {
    opacity: 0.72;
    animation: lifeForgeRingOrbit 8.8s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-view-toggle button
    ) > * {
    position: relative;
    z-index: 1;
}

/* Record cards get the same sweep only on a meaningful state. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-record:hover, .fantasy-record.selected, .fantasy-record.generating)::after {
    content: "" !important;
    position: absolute;
    inset: -1px;
    display: block !important;
    z-index: 0;
    box-sizing: border-box;
    border-radius: inherit;
    padding: 1.2px;
    pointer-events: none;
    background:
        conic-gradient(
            from var(--life-forge-ring-angle),
            transparent 0 76%,
            rgba(64, 221, 255, 0.08) 78%,
            rgba(88, 232, 255, 0.68) 80%,
            rgba(239, 255, 255, 0.88) 82%,
            rgba(88, 232, 255, 0.6) 84%,
            transparent 89% 100%
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 5px rgba(63, 218, 255, 0.28));
    animation: lifeForgeRingOrbit 9.4s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-record > * {
    position: relative;
    z-index: 1;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    :is(
        .fantasy-console-telemetry::before,
        .fantasy-console-telemetry::after,
        .fantasy-generation-section::before,
        .fantasy-generation-section::after,
        #fantasy-creativity-section::before,
        #fantasy-creativity-section::after,
        .fantasy-current-setting::before,
        .fantasy-current-setting::after,
        .fantasy-record-section::before,
        .fantasy-record-section::after,
        .fantasy-age-card::before,
        .fantasy-age-card::after,
        .fantasy-space-status-strip::before,
        .fantasy-space-status-strip::after,
        .fantasy-record::after,
        .fantasy-mode-btn::after,
        .fantasy-action-btn::after,
        .fantasy-view-toggle button::after
    ) {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-console-telemetry,
            .fantasy-generation-section,
            #fantasy-creativity-section,
            .fantasy-current-setting,
            .fantasy-record-section,
            .fantasy-age-card,
            .fantasy-space-status-strip
        )::before {
        opacity: 0.08;
        filter: blur(4px);
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-console-telemetry,
            .fantasy-generation-section,
            #fantasy-creativity-section,
            .fantasy-current-setting,
            .fantasy-record-section,
            .fantasy-age-card,
            .fantasy-space-status-strip
        )::after {
        opacity: 0.42;
        filter: drop-shadow(0 0 3px rgba(57, 216, 255, 0.2));
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-console-telemetry::before,
            .fantasy-console-telemetry::after,
            .fantasy-generation-section::before,
            .fantasy-generation-section::after,
            #fantasy-creativity-section::before,
            #fantasy-creativity-section::after,
            .fantasy-current-setting::before,
            .fantasy-current-setting::after,
            .fantasy-record-section::before,
            .fantasy-record-section::after,
            .fantasy-age-card::before,
            .fantasy-age-card::after,
            .fantasy-space-status-strip::before,
            .fantasy-space-status-strip::after,
            .fantasy-record::after,
            .fantasy-mode-btn::after,
            .fantasy-action-btn::after,
            .fantasy-view-toggle button::after
        ) {
        animation: none !important;
        filter: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-console-telemetry::before,
            .fantasy-generation-section::before,
            #fantasy-creativity-section::before,
            .fantasy-current-setting::before,
            .fantasy-record-section::before,
            .fantasy-age-card::before,
            .fantasy-space-status-strip::before
        ) {
        opacity: 0.08;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-console-telemetry::after,
            .fantasy-generation-section::after,
            #fantasy-creativity-section::after,
            .fantasy-current-setting::after,
            .fantasy-record-section::after,
            .fantasy-age-card::after,
            .fantasy-space-status-strip::after
        ) {
        opacity: 0.34;
    }
}

/* codex: life-forge-unified-aurora-v4-fix */
/* Match the previous duplicated selector specificity and reopen active capsule rings. */

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface.fantasy-aurora-surface {
    border-color: transparent !important;
    background:
        linear-gradient(145deg, rgba(8, 27, 43, 0.95), rgba(2, 11, 23, 0.97)) padding-box,
        linear-gradient(
            110deg,
            rgba(102, 224, 250, 0.44),
            rgba(44, 150, 190, 0.25) 52%,
            rgba(147, 238, 255, 0.42)
        ) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(228, 253, 255, 0.08),
        inset 0 0 22px rgba(48, 163, 205, 0.06),
        0 0 16px rgba(42, 184, 228, 0.1) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-age-card.fantasy-age-card {
    border-radius: 16px !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-mode-btn.fantasy-mode-btn::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-action-btn.fantasy-action-btn::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle.fantasy-view-toggle button::after {
    content: "" !important;
    display: block !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn.fantasy-mode-btn.active,
        .fantasy-action-btn.fantasy-action-btn.active,
        .fantasy-mode-btn.fantasy-mode-btn[aria-pressed="true"],
        .fantasy-action-btn.fantasy-action-btn[aria-pressed="true"],
        .fantasy-view-toggle.fantasy-view-toggle button.active,
        .fantasy-view-toggle.fantasy-view-toggle button[aria-selected="true"]
    )::after {
    content: "" !important;
    display: block !important;
    opacity: 0.72 !important;
    animation: lifeForgeRingOrbit 8.8s linear infinite !important;
}

/* codex: life-forge-unified-aurora-v4-pause-fix */
/* Explicit pseudo-element selectors keep lifecycle and reduced-motion behavior reliable. */

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-console-telemetry::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-console-telemetry::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-generation-section::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-generation-section::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    #fantasy-creativity-section::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    #fantasy-creativity-section::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-current-setting::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-current-setting::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-record-section::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-record-section::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-age-card::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-age-card::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-space-status-strip::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-space-status-strip::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-record::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-mode-btn::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-action-btn::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-view-toggle button::after {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console-telemetry.fantasy-console-telemetry::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console-telemetry.fantasy-console-telemetry::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-generation-section.fantasy-generation-section::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-generation-section.fantasy-generation-section::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        #fantasy-creativity-section#fantasy-creativity-section::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        #fantasy-creativity-section#fantasy-creativity-section::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-current-setting.fantasy-current-setting::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-current-setting.fantasy-current-setting::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-record-section.fantasy-record-section::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-record-section.fantasy-record-section::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-age-card.fantasy-age-card::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-age-card.fantasy-age-card::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-space-status-strip.fantasy-space-status-strip::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-space-status-strip.fantasy-space-status-strip::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-mode-btn.fantasy-mode-btn::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-action-btn.fantasy-action-btn::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-view-toggle.fantasy-view-toggle button::after {
        animation: none !important;
        animation-play-state: paused !important;
        filter: none !important;
    }
}

/* codex: life-forge-unified-aurora-v4-state-fix */

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-mode-btn.fantasy-mode-btn.active::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-action-btn.fantasy-action-btn.active::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-mode-btn.fantasy-mode-btn[aria-pressed="true"]::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-action-btn.fantasy-action-btn[aria-pressed="true"]::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-view-toggle.fantasy-view-toggle button.active::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-view-toggle.fantasy-view-toggle button[aria-selected="true"]::after {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-mode-btn.fantasy-mode-btn.active::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-action-btn.fantasy-action-btn.active::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-mode-btn.fantasy-mode-btn[aria-pressed="true"]::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-action-btn.fantasy-action-btn[aria-pressed="true"]::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-view-toggle.fantasy-view-toggle button.active::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-view-toggle.fantasy-view-toggle button[aria-selected="true"]::after {
        animation: none !important;
        animation-play-state: paused !important;
        opacity: 0.34 !important;
        filter: none !important;
    }
}

/* codex: life-forge-unified-aurora-v4-animation-stop */

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-mode-btn.fantasy-mode-btn::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-action-btn.fantasy-action-btn::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-view-toggle.fantasy-view-toggle button::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-record::after {
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-mode-btn.fantasy-mode-btn::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-action-btn.fantasy-action-btn::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-view-toggle.fantasy-view-toggle button::after,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-record::after {
        animation-name: none !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        animation-play-state: paused !important;
    }
}

/* codex: life-forge-unified-aurora-v4-button-static */
/* High-frequency buttons keep a static cyan focus ring; larger surfaces carry motion. */

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-mode-btn.fantasy-mode-btn::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-action-btn.fantasy-action-btn::after,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle.fantasy-view-toggle button::after {
    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    animation-play-state: paused !important;
}

/* codex: life-forge-unified-aurora-v4-button-final */

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-mode-btn::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-action-btn::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle button::after {
    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    animation-play-state: paused !important;
}

/* codex: life-forge-unified-aurora-v4-unselected */

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-mode-btn:not(.active):not([aria-pressed="true"]),
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-action-btn:not(.active):not([aria-pressed="true"]),
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle.fantasy-view-toggle button:not(.active):not([aria-selected="true"]) {
    border-color: rgba(100, 221, 246, 0.32) !important;
    background:
        linear-gradient(135deg, rgba(12, 37, 54, 0.94), rgba(3, 14, 27, 0.98)) !important;
    color: #e6f9ff !important;
    box-shadow:
        inset 0 1px 0 rgba(239, 255, 255, 0.06),
        0 0 8px rgba(54, 211, 255, 0.04) !important;
}
/* codex: life-forge-saturated-aurora-v5 */
/* Saturated image-2 palette: black-blue glass, violet/magenta structure,
   and a single cyan-led edge sweep. */
#view-memory.fantasy-memory-view {
    --fantasy-neon-violet: #8f3dff !important;
    --fantasy-neon-pink: #ff2fa6 !important;
    --fantasy-neon-cyan: #00eaff !important;
    --fantasy-neon-blue: #5f73ff !important;
    --fantasy-frame-violet: #8f3dff !important;
    --fantasy-frame-pink: #ff2fa6 !important;
    --fantasy-hud-pink: #ff2fa6 !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready {
    --life-forge-ink-0: #01030d !important;
    --life-forge-ink-1: #050817 !important;
    --life-forge-ink-2: #0b1028 !important;
    --life-forge-cyan: #00eaff !important;
    --life-forge-cyan-strong: #d8ffff !important;
    --life-forge-cyan-soft: rgba(0, 234, 255, 0.22) !important;
    --life-forge-magenta: #ff2fa6 !important;
    --life-forge-violet: #8f3dff !important;
    --life-forge-violet-bright: #b56cff !important;
    --life-forge-line: rgba(143, 61, 255, 0.62) !important;
    --life-forge-line-strong: rgba(0, 234, 255, 0.96) !important;
    --life-forge-muted: #94a7d1 !important;
    --life-forge-text: #f4f6ff !important;
    --life-forge-glow: rgba(255, 47, 166, 0.24) !important;
    --life-forge-glow-soft: rgba(0, 234, 255, 0.1) !important;
    --fantasy-neon-violet: #8f3dff !important;
    --fantasy-neon-pink: #ff2fa6 !important;
    --fantasy-neon-cyan: #00eaff !important;
    --fantasy-neon-blue: #5f73ff !important;
    --fantasy-frame-violet: rgba(143, 61, 255, 0.82) !important;
    --fantasy-frame-pink: rgba(255, 47, 166, 0.9) !important;
    --fantasy-hud-pink: #ff2fa6 !important;
    --forge-cyan: #00eaff !important;
    --forge-magenta: #ff2fa6 !important;
    --forge-magenta-soft: rgba(255, 47, 166, 0.2) !important;
    --forge-yellow: #ff72d4 !important;
    --forge-text: #f4f6ff !important;
    --forge-muted: #94a7d1 !important;
    color: var(--life-forge-text);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench {
    background:
        linear-gradient(135deg, rgba(0, 234, 255, 0.035), transparent 30%),
        linear-gradient(315deg, rgba(143, 61, 255, 0.07), transparent 46%),
        linear-gradient(90deg, rgba(255, 47, 166, 0.035), transparent 26%, transparent 72%, rgba(0, 234, 255, 0.025)),
        #01030d !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-console, .fantasy-stage) {
    border: 1px solid transparent !important;
    background:
        linear-gradient(145deg, rgba(3, 7, 22, 0.995), rgba(2, 4, 15, 0.995) 58%, rgba(19, 3, 30, 0.99)) padding-box,
        linear-gradient(135deg, rgba(0, 234, 255, 0.72), rgba(143, 61, 255, 0.88) 48%, rgba(255, 47, 166, 0.92)) border-box !important;
    box-shadow:
        inset 0 0 42px rgba(68, 35, 160, 0.12),
        inset 0 1px 0 rgba(216, 255, 255, 0.07),
        0 0 18px rgba(255, 47, 166, 0.14),
        0 0 30px rgba(0, 234, 255, 0.1) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-console-head, .fantasy-stage-top) {
    background:
        linear-gradient(90deg, rgba(0, 234, 255, 0.1), transparent 36%, rgba(255, 47, 166, 0.12)),
        linear-gradient(90deg, rgba(0, 234, 255, 0.66), rgba(143, 61, 255, 0.72) 52%, rgba(255, 47, 166, 0.78)) bottom / 100% 1px no-repeat,
        rgba(2, 5, 18, 0.94) !important;
    border-bottom-color: transparent !important;
    box-shadow:
        inset 0 -12px 24px rgba(68, 35, 160, 0.1),
        0 8px 24px rgba(0, 0, 0, 0.28) !important;
}

/* Continuous saturated SVG contour plus one broad, slow beam. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-border-beam-base, .fantasy-border-beam-core) {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-base {
    stroke: rgba(143, 61, 255, 0.58) !important;
    stroke-width: 1.05 !important;
    opacity: 0.82 !important;
    filter:
        drop-shadow(0 0 3px rgba(143, 61, 255, 0.38))
        drop-shadow(0 0 7px rgba(255, 47, 166, 0.14)) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-core {
    stroke: rgba(0, 234, 255, 0.92) !important;
    stroke-width: 1.34 !important;
    opacity: 0.92 !important;
    filter:
        drop-shadow(0 0 3px rgba(0, 234, 255, 0.58))
        drop-shadow(0 0 9px rgba(143, 61, 255, 0.25)) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-trail {
    display: block !important;
    stroke: rgba(0, 234, 255, 0.92) !important;
    stroke-width: 3.8 !important;
    stroke-dasharray: 32 68 !important;
    stroke-dashoffset: 0 !important;
    opacity: 0.72 !important;
    filter:
        blur(2.6px)
        drop-shadow(0 0 7px rgba(0, 234, 255, 0.48))
        drop-shadow(0 0 12px rgba(255, 47, 166, 0.22)) !important;
    animation: fantasyBorderBeamTrace 10.8s linear infinite !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-head {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
}

/* Shared dark glass surfaces. The pseudo-elements are masked to the edge. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-stream-panel,
        .fantasy-age-card,
        .fantasy-record,
        .fantasy-empty-record,
        .fantasy-space-status-strip
    ) {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border: 1px solid transparent !important;
    border-radius: 16px !important;
    background:
        linear-gradient(145deg, rgba(3, 7, 22, 0.985), rgba(5, 4, 20, 0.985) 56%, rgba(23, 3, 34, 0.98)) padding-box,
        linear-gradient(118deg, rgba(0, 234, 255, 0.72), rgba(143, 61, 255, 0.72) 50%, rgba(255, 47, 166, 0.86)) border-box !important;
    color: var(--life-forge-text) !important;
    box-shadow:
        inset 0 1px 0 rgba(216, 255, 255, 0.08),
        inset 0 0 26px rgba(71, 32, 158, 0.1),
        0 0 13px rgba(143, 61, 255, 0.1) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-space-status-strip
    ) {
    border-radius: 999px !important;
    background:
        linear-gradient(100deg, rgba(2, 8, 24, 0.99), rgba(16, 3, 29, 0.98)) padding-box,
        linear-gradient(100deg, rgba(0, 234, 255, 0.82), rgba(143, 61, 255, 0.76) 52%, rgba(255, 47, 166, 0.86)) border-box !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    )::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    )::after {
    content: "" !important;
    position: absolute;
    display: block !important;
    box-sizing: border-box;
    border-radius: inherit;
    pointer-events: none;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    )::before {
    inset: -5px;
    padding: 5px;
    z-index: 0;
    background:
        conic-gradient(
            from 196deg,
            rgba(255, 47, 166, 0.62),
            rgba(143, 61, 255, 0.22) 36%,
            rgba(0, 234, 255, 0.5) 68%,
            rgba(255, 47, 166, 0.42) 84%,
            rgba(255, 47, 166, 0.62)
        );
    opacity: 0.26;
    filter: blur(7px);
    animation: fantasyAuroraAmbientPulse 10.8s ease-in-out infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    )::after {
    --life-forge-ring-angle: 0deg;
    inset: -1px;
    padding: 1.8px;
    z-index: 0;
    background:
        conic-gradient(
            from var(--life-forge-ring-angle),
            transparent 0 64%,
            rgba(255, 47, 166, 0.18) 67%,
            rgba(143, 61, 255, 0.78) 71%,
            rgba(0, 234, 255, 0.98) 76%,
            rgba(215, 255, 255, 0.82) 79%,
            rgba(255, 47, 166, 0.74) 84%,
            transparent 90% 100%
        );
    opacity: 0.86;
    filter:
        drop-shadow(0 0 4px rgba(0, 234, 255, 0.48))
        drop-shadow(0 0 10px rgba(255, 47, 166, 0.24));
    animation: lifeForgeRingOrbit 9.8s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    ) > * {
    position: relative;
    z-index: 1;
}

/* Inputs, slider and small controls use the same saturated edge language. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-textarea, .fantasy-age-input) {
    clip-path: none !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    background:
        linear-gradient(rgba(0, 234, 255, 0.035) 1px, transparent 1px),
        linear-gradient(145deg, rgba(2, 6, 20, 0.995), rgba(16, 3, 30, 0.99)) padding-box,
        linear-gradient(120deg, rgba(0, 234, 255, 0.72), rgba(143, 61, 255, 0.72) 52%, rgba(255, 47, 166, 0.82)) border-box !important;
    background-size: 100% 24px, auto, auto !important;
    color: var(--life-forge-text) !important;
    box-shadow:
        inset 0 0 22px rgba(71, 32, 158, 0.12),
        0 0 12px rgba(143, 61, 255, 0.14) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-age-input {
    border-radius: 999px !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-textarea, .fantasy-age-input):focus {
    border-color: transparent !important;
    background:
        linear-gradient(rgba(0, 234, 255, 0.045) 1px, transparent 1px),
        linear-gradient(145deg, rgba(4, 12, 29, 0.995), rgba(27, 4, 40, 0.99)) padding-box,
        linear-gradient(120deg, #00eaff, #8f3dff 48%, #ff2fa6) border-box !important;
    background-size: 100% 24px, auto, auto !important;
    box-shadow:
        inset 0 0 24px rgba(143, 61, 255, 0.18),
        0 0 16px rgba(0, 234, 255, 0.28),
        0 0 22px rgba(255, 47, 166, 0.2) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-space-status-strip
    ) {
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background:
        linear-gradient(100deg, rgba(2, 8, 24, 0.99), rgba(16, 3, 29, 0.98)) padding-box,
        linear-gradient(100deg, rgba(0, 234, 255, 0.82), rgba(143, 61, 255, 0.76) 52%, rgba(255, 47, 166, 0.86)) border-box !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn,
        .fantasy-action-btn,
        .fantasy-icon-btn,
        .fantasy-view-toggle,
        .fantasy-view-toggle button
    ) {
    clip-path: none !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    background:
        linear-gradient(135deg, rgba(3, 6, 20, 0.99), rgba(20, 3, 37, 0.98)) padding-box,
        linear-gradient(112deg, rgba(0, 234, 255, 0.7), rgba(143, 61, 255, 0.78) 52%, rgba(255, 47, 166, 0.88)) border-box !important;
    color: #f4f6ff !important;
    box-shadow:
        inset 0 1px 0 rgba(216, 255, 255, 0.08),
        0 0 13px rgba(143, 61, 255, 0.12) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn:hover,
        .fantasy-action-btn:hover,
        .fantasy-icon-btn:hover,
        .fantasy-view-toggle button:hover
    ) {
    border-color: transparent !important;
    background:
        linear-gradient(135deg, rgba(3, 13, 31, 0.995), rgba(39, 4, 48, 0.99)) padding-box,
        linear-gradient(112deg, #00eaff, #8f3dff 48%, #ff2fa6) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(241, 255, 255, 0.12),
        0 0 16px rgba(0, 234, 255, 0.26),
        0 0 24px rgba(255, 47, 166, 0.18) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn.active,
        .fantasy-action-btn.active,
        .fantasy-mode-btn[aria-pressed="true"],
        .fantasy-action-btn[aria-pressed="true"],
        .fantasy-view-toggle button.active,
        .fantasy-view-toggle button[aria-selected="true"]
    ) {
    border-color: transparent !important;
    background:
        linear-gradient(135deg, rgba(45, 5, 70, 0.995), rgba(5, 19, 54, 0.995)) padding-box,
        linear-gradient(112deg, #ff2fa6, #8f3dff 46%, #00eaff) border-box !important;
    box-shadow:
        inset 0 0 18px rgba(143, 61, 255, 0.2),
        0 0 18px rgba(255, 47, 166, 0.28),
        0 0 26px rgba(0, 234, 255, 0.12) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-action-btn.secondary, .fantasy-icon-btn.primary) {
    border-color: transparent !important;
    background:
        linear-gradient(135deg, rgba(3, 10, 29, 0.995), rgba(29, 4, 45, 0.99)) padding-box,
        linear-gradient(112deg, rgba(0, 234, 255, 0.82), rgba(143, 61, 255, 0.82) 54%, rgba(255, 47, 166, 0.88)) border-box !important;
    color: #e7faff !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-textarea,
        .fantasy-age-input
    ) {
    clip-path: none !important;
    border: 1px solid transparent !important;
    background:
        linear-gradient(rgba(0, 234, 255, 0.035) 1px, transparent 1px),
        linear-gradient(145deg, rgba(2, 6, 20, 0.995), rgba(16, 3, 30, 0.99)) padding-box,
        linear-gradient(120deg, rgba(0, 234, 255, 0.72), rgba(143, 61, 255, 0.72) 52%, rgba(255, 47, 166, 0.82)) border-box !important;
    background-size: 100% 24px, auto, auto !important;
    color: #f4f6ff !important;
    box-shadow:
        inset 0 0 22px rgba(71, 32, 158, 0.12),
        0 0 12px rgba(143, 61, 255, 0.14) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-age-input {
    border-radius: 999px !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn:hover,
        .fantasy-action-btn:hover,
        .fantasy-mode-btn.active,
        .fantasy-action-btn.active,
        .fantasy-mode-btn[aria-pressed="true"],
        .fantasy-action-btn[aria-pressed="true"],
        .fantasy-view-toggle button:hover,
        .fantasy-view-toggle button.active,
        .fantasy-view-toggle button[aria-selected="true"],
        .fantasy-btn-loading
    )::after {
    content: "" !important;
    position: absolute;
    inset: -1px;
    display: block !important;
    z-index: 4;
    box-sizing: border-box;
    border-radius: inherit;
    padding: 1.4px;
    pointer-events: none;
    background:
        conic-gradient(
            from var(--life-forge-ring-angle),
            transparent 0 62%,
            rgba(255, 47, 166, 0.2) 66%,
            rgba(143, 61, 255, 0.82) 72%,
            rgba(0, 234, 255, 0.98) 78%,
            rgba(214, 255, 255, 0.82) 81%,
            rgba(255, 47, 166, 0.72) 86%,
            transparent 91% 100%
        );
    opacity: 0.9;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter:
        drop-shadow(0 0 5px rgba(0, 234, 255, 0.5))
        drop-shadow(0 0 9px rgba(255, 47, 166, 0.28));
    animation: fantasyFxActiveTrace 4.8s linear infinite !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-btn-loading)::after {
    animation: fantasyFxGeneratingFlow 1.6s linear infinite !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-record:hover, .fantasy-record.selected, .fantasy-record.generating)::after {
    content: "" !important;
    position: absolute;
    inset: -1px;
    display: block !important;
    z-index: 0;
    box-sizing: border-box;
    border-radius: inherit;
    padding: 1.4px;
    pointer-events: none;
    background:
        conic-gradient(
            from var(--life-forge-ring-angle),
            transparent 0 62%,
            rgba(255, 47, 166, 0.2) 66%,
            rgba(143, 61, 255, 0.82) 72%,
            rgba(0, 234, 255, 0.98) 78%,
            rgba(214, 255, 255, 0.82) 81%,
            rgba(255, 47, 166, 0.72) 86%,
            transparent 91% 100%
        );
    opacity: 0.9;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    filter:
        drop-shadow(0 0 5px rgba(0, 234, 255, 0.46))
        drop-shadow(0 0 9px rgba(255, 47, 166, 0.24));
    animation: fantasyFxActiveTrace 4.8s linear infinite !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-record.generating::after {
    animation: fantasyFxGeneratingFlow 1.6s linear infinite !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-record:hover, .fantasy-record.selected) {
    background:
        linear-gradient(135deg, rgba(5, 15, 35, 0.99), rgba(36, 4, 48, 0.98)) padding-box,
        linear-gradient(118deg, #00eaff, #8f3dff 48%, #ff2fa6) border-box !important;
    box-shadow:
        inset 0 0 24px rgba(143, 61, 255, 0.16),
        0 0 16px rgba(0, 234, 255, 0.24),
        0 0 23px rgba(255, 47, 166, 0.2) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    :is(
        .fantasy-border-beam-trail,
        .fantasy-aurora-surface::before,
        .fantasy-aurora-surface::after,
        .fantasy-console-telemetry::before,
        .fantasy-console-telemetry::after,
        .fantasy-generation-section::before,
        .fantasy-generation-section::after,
        #fantasy-creativity-section::before,
        #fantasy-creativity-section::after,
        .fantasy-current-setting::before,
        .fantasy-current-setting::after,
        .fantasy-record-section::before,
        .fantasy-record-section::after,
        .fantasy-age-card::before,
        .fantasy-age-card::after,
        .fantasy-space-status-strip::before,
        .fantasy-space-status-strip::after,
        .fantasy-mode-btn::after,
        .fantasy-action-btn::after,
        .fantasy-view-toggle button::after,
        .fantasy-record::after
    ) {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-border-beam-trail {
        stroke-width: 3 !important;
        opacity: 0.5 !important;
        filter:
            blur(2px)
            drop-shadow(0 0 5px rgba(0, 234, 255, 0.34)) !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-console-telemetry,
            .fantasy-generation-section,
            #fantasy-creativity-section,
            .fantasy-current-setting,
            .fantasy-record-section,
            .fantasy-age-card,
            .fantasy-space-status-strip
        )::before {
        opacity: 0.16 !important;
        filter: blur(5px) !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-console-telemetry,
            .fantasy-generation-section,
            #fantasy-creativity-section,
            .fantasy-current-setting,
            .fantasy-record-section,
            .fantasy-age-card,
            .fantasy-space-status-strip
        )::after {
        opacity: 0.72 !important;
        filter:
            drop-shadow(0 0 3px rgba(0, 234, 255, 0.34))
            drop-shadow(0 0 7px rgba(255, 47, 166, 0.16)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-border-beam-base, .fantasy-border-beam-core) {
        animation: none !important;
        stroke-dasharray: none !important;
        opacity: 0.9 !important;
        filter: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-border-beam-trail, .fantasy-border-beam-head) {
        animation: none !important;
        opacity: 0 !important;
        filter: none !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-console-telemetry::before,
            .fantasy-generation-section::before,
            #fantasy-creativity-section::before,
            .fantasy-current-setting::before,
            .fantasy-record-section::before,
            .fantasy-age-card::before,
            .fantasy-space-status-strip::before
        ) {
        animation: none !important;
        opacity: 0.16 !important;
        filter: blur(5px) !important;
    }
}

/* Saturated magenta creativity slider. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-slider {
    height: 6px !important;
    accent-color: #ff2fa6 !important;
    border-radius: 999px !important;
    background: transparent !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-slider::-webkit-slider-runnable-track {
    height: 6px;
    border: 1px solid rgba(143, 61, 255, 0.7);
    border-radius: 999px;
    background:
        linear-gradient(90deg, #ff2fa6 0 70%, rgba(99, 113, 155, 0.36) 70% 100%);
    box-shadow:
        0 0 8px rgba(255, 47, 166, 0.42),
        inset 0 0 5px rgba(0, 234, 255, 0.18);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-slider::-moz-range-track {
    height: 6px;
    border: 1px solid rgba(143, 61, 255, 0.7);
    border-radius: 999px;
    background:
        linear-gradient(90deg, #ff2fa6 0 70%, rgba(99, 113, 155, 0.36) 70% 100%);
    box-shadow:
        0 0 8px rgba(255, 47, 166, 0.42),
        inset 0 0 5px rgba(0, 234, 255, 0.18);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-slider::-webkit-slider-thumb {
    width: 17px;
    height: 17px;
    margin-top: -6px;
    appearance: none;
    border: 2px solid #ffc4ef;
    border-radius: 50%;
    background: #ff2fa6;
    box-shadow:
        0 0 0 3px rgba(255, 47, 166, 0.18),
        0 0 15px rgba(255, 47, 166, 0.8),
        0 0 22px rgba(143, 61, 255, 0.42);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid #ffc4ef;
    border-radius: 50%;
    background: #ff2fa6;
    box-shadow:
        0 0 0 3px rgba(255, 47, 166, 0.18),
        0 0 15px rgba(255, 47, 166, 0.8),
        0 0 22px rgba(143, 61, 255, 0.42);
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-console-telemetry::after,
            .fantasy-generation-section::after,
            #fantasy-creativity-section::after,
            .fantasy-current-setting::after,
            .fantasy-record-section::after,
            .fantasy-age-card::after,
            .fantasy-space-status-strip::after,
            .fantasy-mode-btn::after,
            .fantasy-action-btn::after,
            .fantasy-view-toggle button::after,
            .fantasy-record::after
        ) {
        animation: none !important;
        opacity: 0.34 !important;
        filter: none !important;
    }
}
/* codex: life-forge-saturated-aurora-v5-hard-cascade */
/* Final duplicate-ID layer keeps legacy !important rules from washing out
   the controls that are directly compared against the reference image. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-textarea,
        .fantasy-age-input
    ) {
    clip-path: none !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    background:
        linear-gradient(rgba(0, 234, 255, 0.035) 1px, transparent 1px),
        linear-gradient(145deg, rgba(2, 6, 20, 0.995), rgba(16, 3, 30, 0.99)) padding-box,
        linear-gradient(120deg, #00eaff, #8f3dff 52%, #ff2fa6) border-box !important;
    background-size: 100% 24px, auto, auto !important;
    color: #f4f6ff !important;
    box-shadow:
        inset 0 0 22px rgba(71, 32, 158, 0.12),
        0 0 12px rgba(143, 61, 255, 0.14) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-age-input {
    border-radius: 999px !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-space-status-strip,
        #fantasy-current-setting
    ) {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background:
        linear-gradient(100deg, rgba(2, 8, 24, 0.99), rgba(16, 3, 29, 0.98)) padding-box,
        linear-gradient(100deg, #00eaff, #8f3dff 52%, #ff2fa6) border-box !important;
    color: #f4f6ff !important;
    box-shadow:
        inset 0 1px 0 rgba(216, 255, 255, 0.08),
        inset 0 0 22px rgba(71, 32, 158, 0.12),
        0 0 15px rgba(255, 47, 166, 0.16) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-generation-section,
        #fantasy-creativity-section,
        #fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-record
    ) {
    border-color: transparent !important;
    background:
        linear-gradient(145deg, rgba(3, 7, 22, 0.995), rgba(5, 4, 20, 0.99) 56%, rgba(23, 3, 34, 0.985)) padding-box,
        linear-gradient(118deg, #00eaff, #8f3dff 50%, #ff2fa6) border-box !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-slider {
    height: 6px !important;
    accent-color: #ff2fa6 !important;
    border-radius: 999px !important;
    background:
        linear-gradient(90deg, #ff2fa6 0 70%, rgba(99, 113, 155, 0.36) 70% 100%) !important;
    box-shadow:
        0 0 8px rgba(255, 47, 166, 0.42),
        inset 0 0 5px rgba(0, 234, 255, 0.18) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-slider::-webkit-slider-runnable-track {
    height: 6px !important;
    border: 1px solid rgba(143, 61, 255, 0.7) !important;
    border-radius: 999px !important;
    background:
        linear-gradient(90deg, #ff2fa6 0 70%, rgba(99, 113, 155, 0.36) 70% 100%) !important;
    box-shadow:
        0 0 8px rgba(255, 47, 166, 0.42),
        inset 0 0 5px rgba(0, 234, 255, 0.18) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-slider::-moz-range-track {
    height: 6px !important;
    border: 1px solid rgba(143, 61, 255, 0.7) !important;
    border-radius: 999px !important;
    background:
        linear-gradient(90deg, #ff2fa6 0 70%, rgba(99, 113, 155, 0.36) 70% 100%) !important;
    box-shadow:
        0 0 8px rgba(255, 47, 166, 0.42),
        inset 0 0 5px rgba(0, 234, 255, 0.18) !important;
}

/* codex: life-forge-saturated-aurora-v5-lifecycle-final */
/* Lifecycle rules stay after the saturated interaction cascade. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    :is(
        .fantasy-border-beam-trail,
        .fantasy-aurora-surface::before,
        .fantasy-aurora-surface::after,
        .fantasy-console-telemetry::before,
        .fantasy-console-telemetry::after,
        .fantasy-generation-section::before,
        .fantasy-generation-section::after,
        #fantasy-creativity-section::before,
        #fantasy-creativity-section::after,
        .fantasy-current-setting::before,
        .fantasy-current-setting::after,
        .fantasy-record-section::before,
        .fantasy-record-section::after,
        .fantasy-age-card::before,
        .fantasy-age-card::after,
        .fantasy-space-status-strip::before,
        .fantasy-space-status-strip::after,
        .fantasy-mode-btn::after,
        .fantasy-action-btn::after,
        .fantasy-view-toggle button::after,
        .fantasy-record::after
    ) {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-border-beam-base, .fantasy-border-beam-core) {
        animation: none !important;
        animation-name: none !important;
        opacity: 0.9 !important;
        filter: none !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-border-beam-trail,
            .fantasy-border-beam-head,
            .fantasy-aurora-surface::before,
            .fantasy-aurora-surface::after,
            .fantasy-console-telemetry::before,
            .fantasy-console-telemetry::after,
            .fantasy-generation-section::before,
            .fantasy-generation-section::after,
            #fantasy-creativity-section::before,
            #fantasy-creativity-section::after,
            .fantasy-current-setting::before,
            .fantasy-current-setting::after,
            .fantasy-record-section::before,
            .fantasy-record-section::after,
            .fantasy-age-card::before,
            .fantasy-age-card::after,
            .fantasy-space-status-strip::before,
            .fantasy-space-status-strip::after,
            .fantasy-mode-btn::after,
            .fantasy-action-btn::after,
            .fantasy-view-toggle button::after,
            .fantasy-record::after
        ) {
        animation: none !important;
        animation-name: none !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        animation-play-state: paused !important;
        filter: none !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-border-beam-trail, .fantasy-border-beam-head) {
        opacity: 0 !important;
    }
}

/* codex: life-forge-saturated-aurora-v5-lifecycle-explicit */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-mode-btn::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-action-btn::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-view-toggle button::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-record::after {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-mode-btn::after,
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-action-btn::after,
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-view-toggle button::after,
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-record::after {
        animation: none !important;
        animation-name: none !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        animation-play-state: paused !important;
        filter: none !important;
    }
}

/* codex: life-forge-saturated-aurora-v5-state-priority */
/* Active / generating selectors need a stronger final override for lifecycle state. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    :is(
        .fantasy-mode-btn.fantasy-mode-btn.active::after,
        .fantasy-mode-btn.fantasy-mode-btn[aria-pressed="true"]::after,
        .fantasy-action-btn.fantasy-action-btn.active::after,
        .fantasy-action-btn.fantasy-action-btn[aria-pressed="true"]::after,
        .fantasy-action-btn.fantasy-action-btn.fantasy-btn-loading::after,
        .fantasy-view-toggle.fantasy-view-toggle button.active::after,
        .fantasy-view-toggle.fantasy-view-toggle button[aria-selected="true"]::after,
        .fantasy-record.fantasy-record.selected::after,
        .fantasy-record.fantasy-record.generating::after
    ) {
    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn.fantasy-mode-btn.active::after,
            .fantasy-mode-btn.fantasy-mode-btn[aria-pressed="true"]::after,
            .fantasy-action-btn.fantasy-action-btn.active::after,
            .fantasy-action-btn.fantasy-action-btn[aria-pressed="true"]::after,
            .fantasy-action-btn.fantasy-action-btn.fantasy-btn-loading::after,
            .fantasy-view-toggle.fantasy-view-toggle button.active::after,
            .fantasy-view-toggle.fantasy-view-toggle button[aria-selected="true"]::after,
            .fantasy-record.fantasy-record.selected::after,
            .fantasy-record.fantasy-record.generating::after
        ) {
        animation: none !important;
        animation-name: none !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        animation-play-state: paused !important;
        filter: none !important;
    }
}

/* codex: life-forge-saturated-aurora-v5-state-priority-explicit */
/* Explicit state selectors outrank active / generating interaction rules. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-mode-btn.fantasy-mode-btn.active::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-mode-btn.fantasy-mode-btn[aria-pressed="true"]::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-action-btn.fantasy-action-btn.active::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-action-btn.fantasy-action-btn[aria-pressed="true"]::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-action-btn.fantasy-action-btn.fantasy-btn-loading::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-view-toggle.fantasy-view-toggle button.active::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-view-toggle.fantasy-view-toggle button[aria-selected="true"]::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-record.fantasy-record.selected::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-record.fantasy-record.generating::after {
    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-mode-btn.fantasy-mode-btn.active::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-mode-btn.fantasy-mode-btn[aria-pressed="true"]::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-action-btn.fantasy-action-btn.active::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-action-btn.fantasy-action-btn[aria-pressed="true"]::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-action-btn.fantasy-action-btn.fantasy-btn-loading::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle.fantasy-view-toggle button.active::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle.fantasy-view-toggle button[aria-selected="true"]::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-record.fantasy-record.selected::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-record.fantasy-record.generating::after {
    animation: none !important;
    animation-name: none !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    animation-play-state: paused !important;
    filter: none !important;
}
}

/* codex: life-forge-saturated-aurora-v5-speed-up */
/* Halve the visible border sweep cycle for the Life Forge surfaces. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready {
    --fantasy-aurora-duration: 5.2s !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface {
    --fantasy-aurora-duration: 5.2s !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-trail {
    animation-duration: 5.4s !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::before {
    animation-duration: 5.4s !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::after {
    animation-duration: 5.2s !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-console-telemetry::before,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-console-telemetry::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-generation-section::before,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-generation-section::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    #fantasy-creativity-section::before,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    #fantasy-creativity-section::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-current-setting::before,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-current-setting::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-record-section::before,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-record-section::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-age-card::before,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-age-card::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-space-status-strip::before,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-space-status-strip::after {
    animation-duration: 4.9s !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-mode-btn.active::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-action-btn.active::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-action-btn[aria-pressed="true"]::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle button.active::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle button[aria-selected="true"]::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-record.selected::after {
    animation-duration: 2.4s !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-btn-loading::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-record.generating::after {
    animation-duration: 0.8s !important;
}

/* codex: life-forge-header-water-pulse-r11 */
/* A thin full-width channel carries a thicker, softer water swell as it passes. */
@keyframes fantasyHeaderLineBreathR11 {
    0%, 100% {
        opacity: 0.48;
        filter:
            blur(4px)
            drop-shadow(0 0 5px rgba(0, 240, 255, 0.28));
    }
    50% {
        opacity: 0.86;
        filter:
            blur(8px)
            drop-shadow(0 0 10px rgba(0, 240, 255, 0.58))
            drop-shadow(0 0 18px rgba(255, 46, 147, 0.2));
    }
}

@keyframes fantasyHeaderWaterPulseR11 {
    0% {
        transform: translate3d(0, 0, 0) scaleX(0.82) scaleY(0.82);
        opacity: 0.42;
        filter:
            blur(0.3px)
            drop-shadow(0 0 4px rgba(0, 240, 255, 0.26))
            drop-shadow(0 0 8px rgba(255, 46, 147, 0.1));
    }
    18% {
        transform: translate3d(45%, 0, 0) scaleX(0.98) scaleY(1.04);
        opacity: 0.68;
        filter:
            blur(0.2px)
            drop-shadow(0 0 6px rgba(0, 240, 255, 0.42))
            drop-shadow(0 0 11px rgba(255, 46, 147, 0.16));
    }
    40% {
        transform: translate3d(200%, 0, 0) scaleX(1.18) scaleY(1.16);
        opacity: 0.92;
        filter:
            blur(0.15px)
            drop-shadow(0 0 8px rgba(0, 240, 255, 0.62))
            drop-shadow(0 0 15px rgba(255, 46, 147, 0.22));
    }
    52% {
        transform: translate3d(245%, 0, 0) scaleX(1.3) scaleY(1.3);
        opacity: 1;
        filter:
            blur(0.05px)
            drop-shadow(0 0 10px rgba(0, 240, 255, 0.82))
            drop-shadow(0 0 19px rgba(255, 46, 147, 0.3));
    }
    65% {
        transform: translate3d(300%, 0, 0) scaleX(1.12) scaleY(1.12);
        opacity: 0.82;
        filter:
            blur(0.15px)
            drop-shadow(0 0 7px rgba(0, 240, 255, 0.54))
            drop-shadow(0 0 13px rgba(255, 46, 147, 0.2));
    }
    82% {
        transform: translate3d(390%, 0, 0) scaleX(0.96) scaleY(0.96);
        opacity: 0.58;
        filter:
            blur(0.25px)
            drop-shadow(0 0 5px rgba(0, 240, 255, 0.38))
            drop-shadow(0 0 9px rgba(255, 46, 147, 0.14));
    }
    100% {
        transform: translate3d(450%, 0, 0) scaleX(0.82) scaleY(0.82);
        opacity: 0.42;
        filter:
            blur(0.3px)
            drop-shadow(0 0 4px rgba(0, 240, 255, 0.26))
            drop-shadow(0 0 8px rgba(255, 46, 147, 0.1));
    }
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header {
    border-bottom-color: rgba(0, 240, 255, 0.52) !important;
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::before {
    right: 0;
    bottom: -2px;
    left: 0;
    width: auto;
    height: 3px;
    background:
        linear-gradient(
            90deg,
            rgba(0, 240, 255, 0.22) 0%,
            rgba(0, 240, 255, 0.54) 24%,
            rgba(121, 40, 202, 0.44) 52%,
            rgba(255, 46, 147, 0.5) 76%,
            rgba(0, 240, 255, 0.22) 100%
        );
    filter: blur(4px);
    opacity: 0.64;
    animation:
        fantasyHeaderLineBreathR11 5.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::after {
    right: auto;
    bottom: -3px;
    left: -30%;
    width: 30%;
    height: 4px;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(0, 240, 255, 0.12) 12%,
            rgba(0, 240, 255, 0.74) 31%,
            rgba(150, 255, 255, 0.98) 50%,
            rgba(0, 240, 255, 0.9) 67%,
            rgba(255, 46, 147, 0.42) 82%,
            transparent 100%
        );
    box-shadow:
        0 0 7px rgba(0, 240, 255, 0.56),
        0 0 15px rgba(255, 46, 147, 0.2);
    opacity: 0.84;
    transform-origin: 50% 50%;
    animation:
        fantasyHeaderWaterPulseR11 10.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::before {
        height: 2px;
        filter: blur(3px);
        opacity: 0.54;
    }

    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        bottom: -2px;
        left: -30%;
        width: 30%;
        height: 3px;
        box-shadow:
            0 0 5px rgba(0, 240, 255, 0.42),
            0 0 10px rgba(255, 46, 147, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::before,
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        animation: none !important;
        animation-play-state: paused !important;
    }

    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::before {
        height: 2px;
        opacity: 0.58 !important;
        filter: blur(3px) !important;
    }

    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        right: 34%;
        bottom: -2px;
        left: auto;
        width: 32%;
        height: 3px;
        transform: none !important;
        opacity: 0.78 !important;
        filter:
            drop-shadow(0 0 5px rgba(0, 240, 255, 0.46))
            drop-shadow(0 0 9px rgba(255, 46, 147, 0.16)) !important;
    }
}

/* Shape the moving beam itself: narrow tails, a swollen center. */
body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::after {
    clip-path: polygon(
        0% 43%,
        10% 39%,
        24% 18%,
        50% 0%,
        76% 18%,
        90% 39%,
        100% 43%,
        100% 57%,
        90% 61%,
        76% 82%,
        50% 100%,
        24% 82%,
        10% 61%,
        0% 57%
    );
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        clip-path: polygon(
            0% 42%,
            12% 39%,
            26% 20%,
            50% 0%,
            74% 20%,
            88% 39%,
            100% 42%,
            100% 58%,
            88% 61%,
            74% 80%,
            50% 100%,
            26% 80%,
            12% 61%,
            0% 58%
        );
    }
}

/* codex: life-forge-v4-toolbar-neon-r1 */
/* Bring the V4 top controls into the same saturated glass-neon language. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    :is(.fantasy-tree-v4-toolbar, .fantasy-tree-v4-version) {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            145deg,
            rgba(4, 16, 35, 0.96),
            rgba(20, 5, 38, 0.94)
        ) padding-box,
        linear-gradient(
            112deg,
            rgba(0, 234, 255, 0.74),
            rgba(143, 61, 255, 0.7) 52%,
            rgba(255, 47, 166, 0.74)
        ) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(216, 255, 255, 0.08),
        0 0 12px rgba(0, 234, 255, 0.12),
        0 0 18px rgba(255, 47, 166, 0.08) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button) {
    --v4-neon-a: var(--fantasy-neon-cyan);
    --v4-neon-b: var(--fantasy-neon-violet);
    --v4-neon-c: var(--fantasy-neon-pink);
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            145deg,
            rgba(6, 22, 43, 0.98),
            rgba(16, 7, 35, 0.98)
        ) padding-box,
        linear-gradient(
            112deg,
            var(--v4-neon-a),
            var(--v4-neon-b) 52%,
            var(--v4-neon-c)
        ) border-box !important;
    color: #d9fbff !important;
    box-shadow:
        inset 0 1px 0 rgba(230, 255, 255, 0.08),
        0 0 8px rgba(0, 234, 255, 0.1),
        0 0 12px rgba(143, 61, 255, 0.08) !important;
    text-shadow: 0 0 8px rgba(0, 234, 255, 0.24);
    transition:
        color 180ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 180ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 120ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    .fantasy-tree-v4-toolbar button:nth-child(2),
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    .fantasy-tree-v4-version button:last-child {
    --v4-neon-a: var(--fantasy-neon-violet);
    --v4-neon-b: var(--fantasy-neon-pink);
    --v4-neon-c: var(--fantasy-neon-cyan);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    .fantasy-tree-v4-toolbar button:nth-child(3) {
    --v4-neon-a: var(--fantasy-neon-pink);
    --v4-neon-b: var(--fantasy-neon-violet);
    --v4-neon-c: var(--fantasy-neon-cyan);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    .fantasy-tree-v4-toolbar button:nth-child(4) {
    --v4-neon-a: var(--fantasy-neon-cyan);
    --v4-neon-b: var(--fantasy-neon-pink);
    --v4-neon-c: var(--fantasy-neon-violet);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button)::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 10%,
            var(--v4-neon-a) 42%,
            var(--v4-neon-c) 58%,
            transparent 90%
        ) top left / 220% 1px no-repeat,
        linear-gradient(
            90deg,
            transparent 10%,
            var(--v4-neon-b) 42%,
            var(--v4-neon-a) 58%,
            transparent 90%
        ) bottom right / 220% 1px no-repeat;
    background-position: 145% 0, -145% 100%;
    opacity: 0.7;
    filter: drop-shadow(0 0 4px rgba(0, 234, 255, 0.3));
    animation: fantasyFxButtonCircuit 8s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button)::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 7px;
    bottom: 2px;
    left: 7px;
    height: 1px;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--v4-neon-a) 34%,
            var(--v4-neon-b) 54%,
            var(--v4-neon-c) 70%,
            transparent
        );
    background-size: 220% 100%;
    opacity: 0.58;
    filter: drop-shadow(0 0 5px rgba(0, 234, 255, 0.34));
    animation: fantasyFxActiveTrace 6s linear infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button)
    > i {
    position: relative;
    z-index: 1;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button)
    :is(.is-active, .is-primary, [aria-selected="true"], [aria-pressed="true"]) {
    background:
        linear-gradient(
            145deg,
            rgba(18, 10, 54, 0.99),
            rgba(4, 37, 54, 0.98)
        ) padding-box,
        linear-gradient(
            112deg,
            var(--fantasy-neon-cyan),
            var(--fantasy-neon-violet) 48%,
            var(--fantasy-neon-pink)
        ) border-box !important;
    color: #f5feff !important;
    box-shadow:
        inset 0 1px 0 rgba(230, 255, 255, 0.14),
        0 0 12px rgba(0, 234, 255, 0.26),
        0 0 18px rgba(143, 61, 255, 0.18),
        0 0 24px rgba(255, 47, 166, 0.12) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button):hover:not(:disabled) {
    color: #ffffff !important;
    filter:
        drop-shadow(0 0 6px rgba(0, 234, 255, 0.34))
        drop-shadow(0 0 10px rgba(255, 47, 166, 0.2));
    transform: translate3d(0, -1px, 0);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button):hover:not(:disabled)::before {
    opacity: 1;
    filter:
        drop-shadow(0 0 5px rgba(0, 234, 255, 0.6))
        drop-shadow(0 0 8px rgba(255, 47, 166, 0.28));
    animation-duration: 5.2s;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-v4-root
    :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button):active:not(:disabled) {
    transform: scale(0.97);
}

body:has(#fantasy-workbench.fantasy-fx-page-hidden)
    .fantasy-tree-v4-root
    :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button)::before,
body:has(#fantasy-workbench.fantasy-fx-page-hidden)
    .fantasy-tree-v4-root
    :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button)::after {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-tree-v4-root
        :is(.fantasy-tree-v4-toolbar, .fantasy-tree-v4-version) {
        box-shadow:
            inset 0 1px 0 rgba(216, 255, 255, 0.06),
            0 0 8px rgba(0, 234, 255, 0.1) !important;
        backdrop-filter: blur(10px);
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-tree-v4-root
        :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button) {
        box-shadow:
            inset 0 1px 0 rgba(230, 255, 255, 0.06),
            0 0 6px rgba(0, 234, 255, 0.08) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-tree-v4-root
        :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button)::before,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-tree-v4-root
        :is(.fantasy-tree-v4-toolbar button, .fantasy-tree-v4-version button)::after {
        animation: none !important;
        animation-play-state: paused !important;
    }
}

/* Keep active controls on the same faster cadence as their surfaces. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-mode-btn.fantasy-mode-btn.active::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-mode-btn.fantasy-mode-btn[aria-pressed="true"]::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-action-btn.fantasy-action-btn.active::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-action-btn.fantasy-action-btn[aria-pressed="true"]::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle.fantasy-view-toggle button.active::after,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle.fantasy-view-toggle button[aria-selected="true"]::after {
    animation-duration: 2.4s !important;
}

/* codex: chat-composer-format-r1
   Keep the input controls above the outer aurora ring with a dedicated
   buffer well, so decorative beams never cross the icons. */
#chat-input-shell {
    position: relative !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: end !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 8px 12px !important;
    overflow: visible !important;
    isolation: isolate !important;
}

#chat-input-shell::before {
    content: "" !important;
    inset: -6px !important;
    z-index: -1 !important;
    opacity: 0.2 !important;
    filter: blur(16px) !important;
    animation-duration: 10s !important;
}

#chat-input-shell::after {
    content: "" !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    animation-duration: 10s !important;
}

#chat-input-actions {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: max-content !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px 6px !important;
    border: 1px solid rgba(70, 220, 255, 0.22) !important;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, rgba(4, 20, 39, 0.96), rgba(23, 8, 42, 0.9)) !important;
    box-shadow:
        inset 0 0 14px rgba(39, 221, 255, 0.08),
        0 0 0 4px rgba(6, 10, 25, 0.48) !important;
    isolation: isolate !important;
}

#chat-input-actions::before,
#chat-input-actions::after {
    content: none !important;
    display: none !important;
}

#chat-input-actions button,
#send-btn {
    position: relative !important;
    z-index: 4 !important;
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    border-radius: 9999px !important;
    clip-path: none !important;
    overflow: hidden !important;
}

#chat-input-actions button::before,
#send-btn::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}

#chat-input-actions button i,
#send-btn i {
    position: relative !important;
    z-index: 1 !important;
    font-size: 16px !important;
}

#chat-input-shell > .chat-input-stack,
#chat-input-shell > .flex-1 {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
    align-self: stretch !important;
    border-radius: 22px !important;
    overflow: visible !important;
}

#chat-input-shell > .chat-input-stack > .relative,
#chat-input-shell > .flex-1 > .relative {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
}

#chat-input {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding-right: 58px !important;
    border-radius: 20px !important;
}

#mic-btn {
    z-index: 5 !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    border-radius: 9999px !important;
    clip-path: none !important;
    overflow: hidden !important;
}

#mic-btn::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}

#mic-btn i {
    position: relative !important;
    z-index: 1 !important;
    font-size: 15px !important;
}

#send-btn::after {
    content: none !important;
    display: none !important;
}

#attach-menu,
#slash-menu,
.slash-menu {
    z-index: 20 !important;
}

@media (max-width: 860px) {
    #chat-input-shell {
        column-gap: 8px !important;
        padding: 7px 9px !important;
    }

    #chat-input-actions {
        gap: 6px !important;
        padding: 3px 5px !important;
    }

    #chat-input-actions button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    #send-btn {
        width: 42px !important;
        height: 36px !important;
        min-width: 42px !important;
        min-height: 36px !important;
    }

    #mic-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        right: 6px !important;
    }
}

@media (max-width: 640px) {
    #chat-input-shell {
        grid-template-areas:
            "input input"
            "actions send";
        grid-template-columns: minmax(0, 1fr) auto !important;
        row-gap: 7px !important;
        min-height: 0 !important;
        border-radius: 26px !important;
    }

    #chat-input-actions {
        grid-area: actions;
        gap: 5px !important;
    }

    #chat-input-shell > .chat-input-stack,
    #chat-input-shell > .flex-1 {
        grid-area: input;
    }

    #send-btn {
        grid-area: send;
    }
}

@media (max-width: 390px) {
    #chat-input-shell {
        padding-right: 7px !important;
        padding-left: 7px !important;
    }

    #chat-input-actions {
        gap: 4px !important;
        padding-right: 4px !important;
        padding-left: 4px !important;
    }

    #chat-input-actions button {
        width: 32px !important;
        height: 34px !important;
        min-width: 32px !important;
        min-height: 34px !important;
    }

    #send-btn {
        width: 40px !important;
        min-width: 40px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #chat-input-shell::before,
    #chat-input-shell::after {
        animation: none !important;
    }
}

/* codex: chat-composer-format-r1-final
   The legacy rotating 95px pseudo-beams crossed the action well. The
   composer already has a complete outer border, so keep the ring clean. */
#chat-input-shell::before,
#chat-input-shell::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    transform: none !important;
}

/* codex: life-forge-age-control-surface-v2 */
/* Match the age-control block to the neighboring dark-glass life-forge surfaces. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row) {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    isolation: isolate;
    overflow: visible;
    margin-top: 14px !important;
    padding: 14px 12px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 18px !important;
    background:
        linear-gradient(145deg, rgba(3, 7, 22, 0.985), rgba(5, 4, 20, 0.985) 56%, rgba(23, 3, 34, 0.98)) padding-box,
        linear-gradient(118deg, rgba(0, 234, 255, 0.72), rgba(143, 61, 255, 0.72) 50%, rgba(255, 47, 166, 0.86)) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(216, 255, 255, 0.08),
        inset 0 0 26px rgba(71, 32, 158, 0.1),
        0 0 13px rgba(143, 61, 255, 0.1) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)::before {
    content: none !important;
    display: none !important;
    animation: none !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)::after {
    --life-forge-ring-angle: 0deg;
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    box-sizing: border-box;
    border-radius: inherit;
    padding: 1.8px;
    pointer-events: none;
    background:
        conic-gradient(
            from var(--life-forge-ring-angle),
            transparent 0 64%,
            rgba(255, 47, 166, 0.18) 67%,
            rgba(143, 61, 255, 0.78) 71%,
            rgba(0, 234, 255, 0.98) 76%,
            rgba(215, 255, 255, 0.82) 79%,
            rgba(255, 47, 166, 0.74) 84%,
            transparent 90% 100%
        );
    opacity: 0.86;
    filter:
        drop-shadow(0 0 4px rgba(0, 234, 255, 0.48))
        drop-shadow(0 0 10px rgba(255, 47, 166, 0.24));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: lifeForgeRingOrbit 12.8s linear infinite;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row) > * {
    position: relative;
    z-index: 1;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row) > .fantasy-section-row {
    margin-bottom: 10px;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row) > .fantasy-section-row .fantasy-section-title {
    margin-bottom: 0;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row) > .fantasy-age-card {
    border-radius: 14px !important;
    border-color: rgba(0, 234, 255, 0.44) !important;
    background:
        linear-gradient(135deg, rgba(8, 27, 43, 0.96), rgba(4, 12, 28, 0.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(216, 255, 255, 0.08),
        inset 0 0 20px rgba(71, 32, 158, 0.1),
        0 0 10px rgba(0, 234, 255, 0.08) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    :is(.fantasy-age-input, .fantasy-action-btn) {
    border-color: rgba(0, 234, 255, 0.54) !important;
    background:
        linear-gradient(135deg, rgba(5, 19, 36, 0.98), rgba(12, 4, 31, 0.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(230, 255, 255, 0.07),
        0 0 10px rgba(0, 234, 255, 0.08) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    :is(.fantasy-action-btn:hover, .fantasy-age-input:focus) {
    border-color: rgba(0, 234, 255, 0.94) !important;
    box-shadow:
        inset 0 1px 0 rgba(241, 255, 255, 0.12),
        0 0 14px rgba(0, 234, 255, 0.2),
        0 0 20px rgba(255, 47, 166, 0.12) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    :is(.fantasy-action-btn.active, .fantasy-action-btn[aria-pressed="true"]) {
    border-color: transparent !important;
    background:
        linear-gradient(135deg, rgba(32, 7, 58, 0.99), rgba(5, 24, 52, 0.99)) padding-box,
        linear-gradient(112deg, #ff2fa6, #8f3dff 46%, #00eaff) border-box !important;
    box-shadow:
        inset 0 0 18px rgba(143, 61, 255, 0.18),
        0 0 16px rgba(255, 47, 166, 0.22),
        0 0 22px rgba(0, 234, 255, 0.12) !important;
    color: #f4f6ff !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-control-section:has(> .fantasy-age-input-row) {
        padding: 12px 10px 10px !important;
        border-radius: 16px !important;
        box-shadow:
            inset 0 1px 0 rgba(216, 255, 255, 0.06),
            inset 0 0 18px rgba(71, 32, 158, 0.08),
            0 0 10px rgba(0, 234, 255, 0.06) !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-control-section:has(> .fantasy-age-input-row)::after {
        opacity: 0.76;
        filter: drop-shadow(0 0 3px rgba(0, 234, 255, 0.36));
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-control-section:has(> .fantasy-age-input-row)::after {
        background:
            linear-gradient(118deg, rgba(0, 234, 255, 0.72), rgba(143, 61, 255, 0.72) 50%, rgba(255, 47, 166, 0.86)) border-box;
        opacity: 0.62;
        filter: none;
        animation: none !important;
        animation-duration: 0s !important;
        animation-play-state: paused !important;
    }
}

/* codex: life-forge-speed-state-v6 */
/* Waiting gathers slowly; a live generation request visibly accelerates the stream. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready {
    --life-forge-wait-ambient-speed: 15.6s;
    --life-forge-wait-orbit-speed: 12.8s;
    --life-forge-wait-beam-speed: 13.6s;
    --life-forge-wait-surface-speed: 12.2s;
    --life-forge-flow-ambient-speed: 5.6s;
    --life-forge-flow-orbit-speed: 3.6s;
    --life-forge-flow-beam-speed: 5.2s;
    --life-forge-flow-surface-speed: 4.2s;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    )::before {
    animation-duration: var(--life-forge-wait-ambient-speed) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip
    )::after {
    animation-duration: var(--life-forge-wait-orbit-speed) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::before {
    animation-duration: var(--life-forge-wait-ambient-speed) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-aurora-surface::after {
    animation-duration: var(--life-forge-wait-surface-speed) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-trail {
    animation-duration: var(--life-forge-wait-beam-speed) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)::after {
    animation-duration: var(--life-forge-wait-orbit-speed) !important;
}

@supports selector(#fantasy-workbench:has(.fantasy-console-telemetry.is-active)) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready:has(.fantasy-console-telemetry.is-active) {
        --life-forge-wait-ambient-speed: var(--life-forge-flow-ambient-speed);
        --life-forge-wait-orbit-speed: var(--life-forge-flow-orbit-speed);
        --life-forge-wait-beam-speed: var(--life-forge-flow-beam-speed);
        --life-forge-wait-surface-speed: var(--life-forge-flow-surface-speed);
    }
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-control-section:has(> .fantasy-age-input-row)::after {
    animation: none !important;
    animation-duration: 0s !important;
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-control-section:has(> .fantasy-age-input-row)::after {
        animation-name: none !important;
        animation-duration: 0s !important;
        animation-iteration-count: 1 !important;
        animation-play-state: paused !important;
    }
}

/* codex: life-forge-pump-thickness-r14 */
/* Keep the contour thin at rest; the moving segment swells like a water pump. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-border-beam-trail {
    stroke-width: 7.2 !important;
    stroke-dasharray: 24 76 !important;
    opacity: 0.86 !important;
    filter:
        blur(1.35px)
        drop-shadow(0 0 7px rgba(0, 234, 255, 0.7))
        drop-shadow(0 0 15px rgba(143, 61, 255, 0.42))
        drop-shadow(0 0 22px rgba(255, 47, 166, 0.22)) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-aurora-surface,
        .fantasy-console-telemetry,
        .fantasy-generation-section,
        #fantasy-creativity-section,
        .fantasy-current-setting,
        .fantasy-record-section,
        .fantasy-age-card,
        .fantasy-space-status-strip,
        .fantasy-control-section:has(> .fantasy-age-input-row)
    )::after {
    inset: -2px !important;
    padding: 3.4px !important;
    opacity: 0.94 !important;
    filter:
        drop-shadow(0 0 5px rgba(0, 234, 255, 0.62))
        drop-shadow(0 0 11px rgba(143, 61, 255, 0.48))
        drop-shadow(0 0 19px rgba(255, 47, 166, 0.32)) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn.active,
        .fantasy-mode-btn[aria-pressed="true"],
        .fantasy-action-btn.active,
        .fantasy-action-btn[aria-pressed="true"],
        .fantasy-action-btn.fantasy-btn-loading,
        .fantasy-view-toggle button.active,
        .fantasy-view-toggle button[aria-selected="true"],
        .fantasy-record:hover,
        .fantasy-record.selected,
        .fantasy-record.generating
    )::after {
    inset: -2px !important;
    padding: 3.1px !important;
    opacity: 0.96 !important;
    filter:
        drop-shadow(0 0 6px rgba(0, 234, 255, 0.72))
        drop-shadow(0 0 13px rgba(143, 61, 255, 0.5))
        drop-shadow(0 0 21px rgba(255, 47, 166, 0.34)) !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-border-beam-trail {
        stroke-width: 2.8 !important;
        opacity: 0.72 !important;
        filter:
            blur(1px)
            drop-shadow(0 0 5px rgba(0, 234, 255, 0.5))
            drop-shadow(0 0 10px rgba(143, 61, 255, 0.3)) !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-aurora-surface,
            .fantasy-console-telemetry,
            .fantasy-generation-section,
            #fantasy-creativity-section,
            .fantasy-current-setting,
            .fantasy-record-section,
            .fantasy-age-card,
            .fantasy-space-status-strip,
            .fantasy-control-section:has(> .fantasy-age-input-row),
            .fantasy-mode-btn.active,
            .fantasy-mode-btn[aria-pressed="true"],
            .fantasy-action-btn.active,
            .fantasy-action-btn[aria-pressed="true"],
            .fantasy-action-btn.fantasy-btn-loading,
            .fantasy-view-toggle button.active,
            .fantasy-view-toggle button[aria-selected="true"],
            .fantasy-record:hover,
            .fantasy-record.selected,
            .fantasy-record.generating
        )::after {
        inset: -1px !important;
        padding: 2.5px !important;
        opacity: 0.78 !important;
        filter:
            drop-shadow(0 0 3px rgba(0, 234, 255, 0.44))
            drop-shadow(0 0 8px rgba(143, 61, 255, 0.28)) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-border-beam-trail {
        animation: none !important;
        opacity: 0 !important;
        filter: none !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-aurora-surface,
            .fantasy-console-telemetry,
            .fantasy-generation-section,
            #fantasy-creativity-section,
            .fantasy-current-setting,
            .fantasy-record-section,
            .fantasy-age-card,
            .fantasy-space-status-strip,
            .fantasy-control-section:has(> .fantasy-age-input-row),
            .fantasy-mode-btn,
            .fantasy-action-btn,
            .fantasy-view-toggle button,
            .fantasy-record
        )::after {
        animation: none !important;
        opacity: 0.34 !important;
        filter: none !important;
    }
}
/* codex: life-forge-tree-toolbar-color-r2 */
/* Give both V3 and V4 tree controls the same visible neon glass treatment. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-visual-version,
        .fantasy-tree-v4-version,
        .fantasy-tree-toolbar,
        .fantasy-tree-v4-toolbar
    ) {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            145deg,
            rgba(4, 18, 38, 0.97),
            rgba(25, 5, 43, 0.95)
        ) padding-box,
        linear-gradient(
            112deg,
            rgba(0, 234, 255, 0.86),
            rgba(143, 61, 255, 0.82) 52%,
            rgba(255, 47, 166, 0.86)
        ) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(216, 255, 255, 0.1),
        0 0 14px rgba(0, 234, 255, 0.16),
        0 0 22px rgba(255, 47, 166, 0.1) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-visual-version button,
        .fantasy-tree-v4-version button,
        .fantasy-tree-toolbar .fantasy-action-btn,
        .fantasy-tree-v4-toolbar button
    ) {
    --tree-neon-a: var(--fantasy-neon-cyan);
    --tree-neon-b: var(--fantasy-neon-violet);
    --tree-neon-c: var(--fantasy-neon-pink);
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            145deg,
            rgba(8, 28, 52, 0.98),
            rgba(28, 7, 47, 0.98)
        ) padding-box,
        linear-gradient(
            112deg,
            var(--tree-neon-a),
            var(--tree-neon-b) 52%,
            var(--tree-neon-c)
        ) border-box !important;
    color: #e8fcff !important;
    box-shadow:
        inset 0 1px 0 rgba(230, 255, 255, 0.1),
        0 0 9px rgba(0, 234, 255, 0.14),
        0 0 14px rgba(143, 61, 255, 0.1) !important;
    text-shadow: 0 0 8px rgba(0, 234, 255, 0.3);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-visual-version button:nth-child(2),
        .fantasy-tree-v4-version button:nth-child(2),
        .fantasy-tree-toolbar button:nth-child(3),
        .fantasy-tree-v4-toolbar button:nth-child(2)
    ) {
    --tree-neon-a: var(--fantasy-neon-violet);
    --tree-neon-b: var(--fantasy-neon-pink);
    --tree-neon-c: var(--fantasy-neon-cyan);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-toolbar button:nth-child(4),
        .fantasy-tree-v4-toolbar button:nth-child(3)
    ) {
    --tree-neon-a: var(--fantasy-neon-pink);
    --tree-neon-b: var(--fantasy-neon-violet);
    --tree-neon-c: var(--fantasy-neon-cyan);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-toolbar button:nth-child(5),
        .fantasy-tree-v4-toolbar button:nth-child(4)
    ) {
    --tree-neon-a: var(--fantasy-neon-cyan);
    --tree-neon-b: var(--fantasy-neon-pink);
    --tree-neon-c: var(--fantasy-neon-violet);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-toolbar button:nth-child(6),
        .fantasy-tree-v4-toolbar button:nth-child(5)
    ) {
    --tree-neon-a: var(--fantasy-neon-pink);
    --tree-neon-b: var(--fantasy-neon-cyan);
    --tree-neon-c: var(--fantasy-neon-violet);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-toolbar button:nth-child(7),
        .fantasy-tree-v4-toolbar button:nth-child(5)
    ) {
    --tree-neon-a: var(--fantasy-neon-cyan);
    --tree-neon-b: var(--fantasy-neon-violet);
    --tree-neon-c: var(--fantasy-neon-pink);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-visual-version button,
        .fantasy-tree-v4-version button,
        .fantasy-tree-toolbar .fantasy-action-btn,
        .fantasy-tree-v4-toolbar button
    )::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 8%,
            var(--tree-neon-a) 40%,
            var(--tree-neon-c) 60%,
            transparent 92%
        ) top left / 220% 1px no-repeat,
        linear-gradient(
            90deg,
            transparent 8%,
            var(--tree-neon-b) 40%,
            var(--tree-neon-a) 60%,
            transparent 92%
        ) bottom right / 220% 1px no-repeat;
    background-position: 145% 0, -145% 100%;
    opacity: 0.92 !important;
    filter:
        drop-shadow(0 0 5px rgba(0, 234, 255, 0.42))
        drop-shadow(0 0 8px rgba(255, 47, 166, 0.2));
    animation: fantasyFxButtonCircuit 7.2s linear infinite !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-visual-version button,
        .fantasy-tree-v4-version button,
        .fantasy-tree-toolbar .fantasy-action-btn,
        .fantasy-tree-v4-toolbar button
    )::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 7px;
    bottom: 2px;
    left: 7px;
    height: 2px;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent,
            var(--tree-neon-a) 32%,
            var(--tree-neon-b) 52%,
            var(--tree-neon-c) 70%,
            transparent
        );
    background-size: 220% 100%;
    opacity: 0.72 !important;
    filter:
        drop-shadow(0 0 5px rgba(0, 234, 255, 0.48))
        drop-shadow(0 0 9px rgba(255, 47, 166, 0.22));
    animation: fantasyFxActiveTrace 5.8s linear infinite !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-visual-version button,
        .fantasy-tree-v4-version button,
        .fantasy-tree-toolbar .fantasy-action-btn,
        .fantasy-tree-v4-toolbar button
    ) > * {
    position: relative;
    z-index: 1;
}

/* Same-element state selector: the active button must receive the brighter fill. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-visual-version button,
        .fantasy-tree-v4-version button,
        .fantasy-tree-toolbar .fantasy-action-btn,
        .fantasy-tree-v4-toolbar button
    ):is(
        .active,
        .is-active,
        .is-primary,
        [aria-selected="true"],
        [aria-pressed="true"]
    ):not(:disabled) {
    background:
        linear-gradient(
            145deg,
            rgba(33, 7, 68, 0.99),
            rgba(4, 40, 58, 0.99)
        ) padding-box,
        linear-gradient(
            112deg,
            var(--tree-neon-a),
            var(--tree-neon-b) 48%,
            var(--tree-neon-c)
        ) border-box !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 0 18px rgba(143, 61, 255, 0.24),
        0 0 14px rgba(0, 234, 255, 0.3),
        0 0 22px rgba(143, 61, 255, 0.2),
        0 0 28px rgba(255, 47, 166, 0.14) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-visual-version button,
        .fantasy-tree-v4-version button,
        .fantasy-tree-toolbar .fantasy-action-btn,
        .fantasy-tree-v4-toolbar button
    ):is(
        .active,
        .is-active,
        .is-primary,
        [aria-selected="true"],
        [aria-pressed="true"]
    ):not(:disabled)::before {
    opacity: 1 !important;
    filter:
        drop-shadow(0 0 7px rgba(0, 234, 255, 0.72))
        drop-shadow(0 0 11px rgba(255, 47, 166, 0.36));
    animation-duration: 4.6s !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-tree-visual-version button,
        .fantasy-tree-v4-version button,
        .fantasy-tree-toolbar .fantasy-action-btn,
        .fantasy-tree-v4-toolbar button
    ):hover:not(:disabled) {
    color: #ffffff !important;
    filter:
        drop-shadow(0 0 7px rgba(0, 234, 255, 0.4))
        drop-shadow(0 0 11px rgba(255, 47, 166, 0.24));
    transform: translate3d(0, -1px, 0);
}

body:has(#fantasy-workbench.fantasy-fx-page-hidden)
    :is(
        .fantasy-tree-visual-version button,
        .fantasy-tree-v4-version button,
        .fantasy-tree-toolbar .fantasy-action-btn,
        .fantasy-tree-v4-toolbar button
    )::before,
body:has(#fantasy-workbench.fantasy-fx-page-hidden)
    :is(
        .fantasy-tree-visual-version button,
        .fantasy-tree-v4-version button,
        .fantasy-tree-toolbar .fantasy-action-btn,
        .fantasy-tree-v4-toolbar button
    )::after {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-tree-visual-version,
            .fantasy-tree-v4-version,
            .fantasy-tree-toolbar,
            .fantasy-tree-v4-toolbar
        ) {
        box-shadow:
            inset 0 1px 0 rgba(216, 255, 255, 0.06),
            0 0 9px rgba(0, 234, 255, 0.1) !important;
        backdrop-filter: blur(10px);
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-tree-visual-version button,
            .fantasy-tree-v4-version button,
            .fantasy-tree-toolbar .fantasy-action-btn,
            .fantasy-tree-v4-toolbar button
        ) {
        box-shadow:
            inset 0 1px 0 rgba(230, 255, 255, 0.06),
            0 0 7px rgba(0, 234, 255, 0.1) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-tree-visual-version button,
            .fantasy-tree-v4-version button,
            .fantasy-tree-toolbar .fantasy-action-btn,
            .fantasy-tree-v4-toolbar button
        )::before,
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-tree-visual-version button,
            .fantasy-tree-v4-version button,
            .fantasy-tree-toolbar .fantasy-action-btn,
            .fantasy-tree-v4-toolbar button
        )::after {
        animation: none !important;
        animation-play-state: paused !important;
    }
}
/* codex: life-forge-action-panel-v1 */
/* The yellow-box target is the two sibling action grids inside age control. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid {
    position: relative;
    z-index: 2;
    isolation: isolate;
    overflow: visible;
    box-sizing: border-box;
    border: 1px solid transparent !important;
    background:
        linear-gradient(145deg, rgba(3, 7, 22, 0.985), rgba(5, 4, 20, 0.985) 56%, rgba(23, 3, 34, 0.98)) padding-box,
        linear-gradient(112deg, rgba(0, 234, 255, 0.78), rgba(143, 61, 255, 0.82) 50%, rgba(255, 47, 166, 0.88)) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(216, 255, 255, 0.08),
        inset 0 0 26px rgba(71, 32, 158, 0.1),
        0 0 15px rgba(0, 234, 255, 0.1),
        0 0 22px rgba(255, 47, 166, 0.08) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid:not(.fantasy-run-grid) {
    margin-top: 14px !important;
    padding: 10px 10px 9px !important;
    border-radius: 16px 16px 0 0 !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid.fantasy-run-grid {
    margin-top: -1px !important;
    padding: 9px 10px 10px !important;
    border-top-color: transparent !important;
    border-radius: 0 0 16px 16px !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -5px;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            110deg,
            rgba(0, 234, 255, 0.18),
            rgba(143, 61, 255, 0.16) 52%,
            rgba(255, 47, 166, 0.2)
        );
    opacity: 0.46;
    filter: blur(12px);
    animation: fantasyAuroraAmbientPulse 10.8s ease-in-out infinite;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid::after {
    --life-forge-ring-angle: 0deg;
    content: "";
    position: absolute;
    z-index: 3;
    inset: -1px;
    box-sizing: border-box;
    border-radius: inherit;
    padding: 1.8px;
    pointer-events: none;
    background:
        conic-gradient(
            from var(--life-forge-ring-angle),
            transparent 0 63%,
            rgba(0, 234, 255, 0.2) 66%,
            rgba(0, 234, 255, 0.94) 72%,
            rgba(216, 255, 255, 0.92) 75%,
            rgba(143, 61, 255, 0.9) 80%,
            rgba(255, 47, 166, 0.74) 84%,
            transparent 90% 100%
        );
    opacity: 0.9;
    filter:
        drop-shadow(0 0 4px rgba(0, 234, 255, 0.54))
        drop-shadow(0 0 10px rgba(143, 61, 255, 0.34))
        drop-shadow(0 0 14px rgba(255, 47, 166, 0.2));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: lifeForgeRingOrbit var(--life-forge-action-speed, var(--life-forge-wait-orbit-speed, 12.8s)) linear infinite;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid > * {
    position: relative;
    z-index: 1;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid
    > .fantasy-action-btn {
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background:
        linear-gradient(135deg, rgba(8, 28, 52, 0.98), rgba(28, 7, 47, 0.98)) padding-box,
        linear-gradient(112deg, rgba(0, 234, 255, 0.5), rgba(143, 61, 255, 0.68) 52%, rgba(255, 47, 166, 0.74)) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(230, 255, 255, 0.08),
        0 0 9px rgba(0, 234, 255, 0.1),
        0 0 13px rgba(143, 61, 255, 0.08) !important;
    color: #f4f6ff !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid
    > .fantasy-action-btn:hover:not(:disabled) {
    border-color: transparent !important;
    background:
        linear-gradient(135deg, rgba(11, 45, 67, 0.99), rgba(40, 7, 57, 0.99)) padding-box,
        linear-gradient(112deg, rgba(0, 234, 255, 0.96), rgba(143, 61, 255, 0.86) 52%, rgba(255, 47, 166, 0.92)) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(241, 255, 255, 0.12),
        0 0 15px rgba(0, 234, 255, 0.24),
        0 0 22px rgba(255, 47, 166, 0.18) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid
    > :is(
        .fantasy-action-btn.active,
        .fantasy-action-btn[aria-pressed="true"],
        .fantasy-action-btn.fantasy-btn-loading
    ) {
    border-color: transparent !important;
    background:
        linear-gradient(135deg, rgba(31, 7, 62, 0.99), rgba(5, 25, 54, 0.99)) padding-box,
        linear-gradient(112deg, #ff2fa6, #8f3dff 46%, #00eaff) border-box !important;
    box-shadow:
        inset 0 0 18px rgba(143, 61, 255, 0.2),
        0 0 16px rgba(255, 47, 166, 0.24),
        0 0 23px rgba(0, 234, 255, 0.16) !important;
    color: #ffffff !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid:has(.fantasy-btn-loading) {
    --life-forge-action-speed: var(--life-forge-flow-orbit-speed, 3.6s);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid
    > .fantasy-action-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.985);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid::before,
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-control-section:has(> .fantasy-age-input-row)
    > .fantasy-action-grid::after {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-control-section:has(> .fantasy-age-input-row)
        > .fantasy-action-grid {
        box-shadow:
            inset 0 1px 0 rgba(216, 255, 255, 0.06),
            inset 0 0 18px rgba(71, 32, 158, 0.08),
            0 0 10px rgba(0, 234, 255, 0.08) !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-control-section:has(> .fantasy-age-input-row)
        > .fantasy-action-grid::before {
        opacity: 0.34;
        filter: blur(8px);
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-control-section:has(> .fantasy-age-input-row)
        > .fantasy-action-grid::after {
        opacity: 0.78;
        padding: 1.5px;
        filter: drop-shadow(0 0 3px rgba(0, 234, 255, 0.4));
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-control-section:has(> .fantasy-age-input-row)
        > .fantasy-action-grid::before,
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-control-section:has(> .fantasy-age-input-row)
        > .fantasy-action-grid::after {
        animation: none !important;
        animation-play-state: paused !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-control-section:has(> .fantasy-age-input-row)
        > .fantasy-action-grid::after {
        opacity: 0.5;
        filter: none;
    }
}


/* codex: life-simulator-magenta-shell-v1 */
/* Yellow-box shell treatment: magenta / violet lead, cyan remains in the tree canvas. */
body:has(#view-memory.fantasy-memory-view.active) {
    --life-shell-pink: #ff2fa6;
    --life-shell-pink-soft: #ff86d2;
    --life-shell-violet: #9b4dff;
    --life-shell-indigo: #6257ff;
    --life-shell-lilac: #d9b8ff;
    --life-shell-ink: #050313;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar {
    border-right-color: rgba(155, 77, 255, 0.72) !important;
    background:
        linear-gradient(180deg, rgba(17, 5, 36, 0.99), rgba(5, 3, 18, 0.995) 68%, rgba(13, 3, 25, 0.99)) !important;
    box-shadow:
        inset -1px 0 rgba(255, 47, 166, 0.24),
        5px 0 24px rgba(155, 77, 255, 0.16),
        18px 0 46px rgba(0, 0, 0, 0.46) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:first-child {
    border-color: transparent !important;
    border-bottom-color: rgba(255, 47, 166, 0.58) !important;
    background:
        linear-gradient(105deg, rgba(255, 47, 166, 0.16), rgba(155, 77, 255, 0.15) 52%, rgba(98, 87, 255, 0.08)) padding-box,
        linear-gradient(105deg, rgba(255, 47, 166, 0.78), rgba(155, 77, 255, 0.7), rgba(98, 87, 255, 0.42)) border-box !important;
    box-shadow:
        inset 0 0 24px rgba(155, 77, 255, 0.1),
        0 0 18px rgba(255, 47, 166, 0.12) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:first-child img {
    box-shadow:
        0 0 0 1px rgba(255, 134, 210, 0.92),
        0 0 11px rgba(255, 47, 166, 0.48),
        0 0 19px rgba(155, 77, 255, 0.34) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:first-child .text-white {
    color: #fff4fc !important;
    text-shadow: 0 0 10px rgba(255, 47, 166, 0.24);
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:first-child .text-neutral-500 {
    color: rgba(217, 184, 255, 0.62) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar nav {
    scrollbar-color: rgba(255, 47, 166, 0.78) rgba(54, 20, 91, 0.18) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar nav::-webkit-scrollbar {
    width: 6px;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar nav::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(59, 25, 95, 0.12), rgba(255, 47, 166, 0.08));
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar nav::-webkit-scrollbar-thumb {
    border: 1px solid rgba(255, 134, 210, 0.34);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--life-shell-pink), var(--life-shell-violet) 56%, var(--life-shell-indigo));
    box-shadow: 0 0 9px rgba(255, 47, 166, 0.48), 0 0 14px rgba(155, 77, 255, 0.3);
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar nav::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff86d2, #b56cff 54%, #756cff);
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar .menu-group > button {
    color: rgba(217, 184, 255, 0.72) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar .menu-group > button::after {
    background: linear-gradient(90deg, rgba(255, 47, 166, 0.58), rgba(155, 77, 255, 0.42) 58%, transparent 92%) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar .menu-group > button:hover {
    color: #ffd6f1 !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar .menu-group > button .chevron {
    color: var(--life-shell-pink) !important;
    filter: drop-shadow(0 0 5px rgba(255, 47, 166, 0.68));
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar .menu-group-items .sidebar-item,
body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item {
    color: rgba(224, 211, 245, 0.78) !important;
    background:
        linear-gradient(96deg, rgba(18, 8, 39, 0.93), rgba(8, 7, 27, 0.94)) padding-box,
        linear-gradient(108deg, rgba(255, 47, 166, 0.24), rgba(155, 77, 255, 0.34) 58%, rgba(98, 87, 255, 0.24)) border-box !important;
    filter: drop-shadow(0 0 5px rgba(155, 77, 255, 0.08));
    transition:
        color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        background 220ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item .item-icon,
body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item .text-cyan-300,
body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item .text-emerald-400 {
    color: rgba(192, 151, 255, 0.86) !important;
    text-shadow: 0 0 8px rgba(155, 77, 255, 0.28);
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar .menu-group-items .sidebar-item:hover,
body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item:hover {
    color: #fff2fb !important;
    background:
        linear-gradient(96deg, rgba(56, 10, 73, 0.96), rgba(23, 10, 61, 0.95)) padding-box,
        linear-gradient(104deg, rgba(255, 47, 166, 0.92), rgba(155, 77, 255, 0.88) 56%, rgba(98, 87, 255, 0.74)) border-box !important;
    filter: drop-shadow(0 0 7px rgba(255, 47, 166, 0.24)) drop-shadow(0 0 12px rgba(155, 77, 255, 0.16));
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item:hover .item-icon,
body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item:hover .text-cyan-300,
body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item:hover .text-emerald-400 {
    color: #ff9ddd !important;
    text-shadow: 0 0 10px rgba(255, 47, 166, 0.52);
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar .menu-group-items .sidebar-item.active,
body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item.active {
    color: #fff !important;
    background:
        linear-gradient(96deg, rgba(73, 9, 83, 0.98), rgba(29, 10, 70, 0.97)) padding-box,
        linear-gradient(104deg, var(--life-shell-pink), var(--life-shell-violet) 54%, var(--life-shell-indigo)) border-box !important;
    filter: drop-shadow(0 0 8px rgba(255, 47, 166, 0.3)) drop-shadow(0 0 14px rgba(155, 77, 255, 0.22));
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item.active::before {
    background: var(--life-shell-pink) !important;
    box-shadow: 0 0 10px rgba(255, 47, 166, 0.88), 0 0 18px rgba(155, 77, 255, 0.52) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item.active::after {
    background: linear-gradient(90deg, transparent, var(--life-shell-pink), var(--life-shell-violet)) !important;
    box-shadow: 0 0 10px rgba(255, 47, 166, 0.68) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item.active .item-icon,
body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item.active .text-cyan-300,
body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item.active .text-emerald-400 {
    color: #ffc0ea !important;
    text-shadow: 0 0 11px rgba(255, 47, 166, 0.76) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:last-child {
    border-top-color: rgba(155, 77, 255, 0.38) !important;
    background: linear-gradient(180deg, rgba(12, 4, 28, 0.78), rgba(26, 5, 38, 0.9)) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:last-child::before,
body:has(#view-memory.fantasy-memory-view.active) #sidebar .fa-circle {
    color: var(--life-shell-pink) !important;
    background: var(--life-shell-pink) !important;
    box-shadow: 0 0 10px rgba(255, 47, 166, 0.72) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar-version:hover {
    color: #e1c5ff !important;
}

body:has(#view-memory.fantasy-memory-view.active)
    #view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-stage-top {
    border-bottom-color: rgba(255, 47, 166, 0.74) !important;
    background:
        linear-gradient(100deg, rgba(255, 47, 166, 0.13), rgba(155, 77, 255, 0.16) 48%, rgba(98, 87, 255, 0.08) 72%, transparent),
        linear-gradient(180deg, rgba(10, 5, 28, 0.98), rgba(4, 4, 18, 0.97)) !important;
    box-shadow:
        inset 0 -1px rgba(255, 47, 166, 0.24),
        inset 0 0 28px rgba(155, 77, 255, 0.08),
        0 8px 24px rgba(16, 2, 35, 0.24) !important;
}

body:has(#view-memory.fantasy-memory-view.active)
    #view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-stage::before {
    border-color: rgba(155, 77, 255, 0.72) !important;
    background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 47, 166, 0.82) 12px 15px) !important;
    filter: drop-shadow(0 0 7px rgba(255, 47, 166, 0.42));
}

body:has(#view-memory.fantasy-memory-view.active)
    #view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-stage-top .fantasy-kicker {
    color: #cf9cff !important;
    text-shadow: 0 0 10px rgba(155, 77, 255, 0.58) !important;
}

body:has(#view-memory.fantasy-memory-view.active)
    #view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-stage-top h3 {
    color: #fff2fc !important;
    text-shadow: 0 0 14px rgba(255, 47, 166, 0.24), 0 0 20px rgba(155, 77, 255, 0.18) !important;
}

body:has(#view-memory.fantasy-memory-view.active)
    #view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-stage-top.fantasy-aurora-surface::before {
    background:
        conic-gradient(
            from 205deg,
            rgba(255, 47, 166, 0.58),
            rgba(155, 77, 255, 0.28) 36%,
            rgba(98, 87, 255, 0.46) 68%,
            rgba(255, 134, 210, 0.32) 82%,
            rgba(255, 47, 166, 0.58)
        ) !important;
    filter: blur(7px) !important;
}

body:has(#view-memory.fantasy-memory-view.active)
    #view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-stage-top.fantasy-aurora-surface::after {
    background:
        conic-gradient(
            from var(--fantasy-aurora-angle),
            transparent 0 64%,
            rgba(98, 87, 255, 0.24) 68%,
            rgba(155, 77, 255, 0.88) 73%,
            rgba(255, 134, 210, 0.98) 78%,
            rgba(255, 47, 166, 0.86) 84%,
            transparent 91% 100%
        ) !important;
    filter:
        drop-shadow(0 0 4px rgba(255, 47, 166, 0.46))
        drop-shadow(0 0 9px rgba(155, 77, 255, 0.28)) !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-memory.fantasy-memory-view.active) #sidebar,
    body:has(#view-memory.fantasy-memory-view.active)
        #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-stage-top {
        box-shadow: inset 0 0 18px rgba(155, 77, 255, 0.07) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-memory.fantasy-memory-view.active) #sidebar .sidebar-item {
        transition-duration: 0.01ms !important;
    }
}

/* codex: chat-composer-flat-r2-final
   Remove the two decorative wrapper capsules. Keep only the functional
   control surfaces: four action buttons, the message field, mic, and send. */
#chat-input-shell {
    align-items: center !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    min-height: 58px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#chat-input-shell:focus-within {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#chat-input-actions {
    align-self: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    isolation: auto !important;
}

#chat-input-shell > .chat-input-stack,
#chat-input-shell > .flex-1 {
    align-self: center !important;
    min-width: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#chat-input-actions button,
#send-btn {
    align-self: center !important;
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    clip-path: none !important;
}

#chat-input {
    display: block !important;
    width: 100% !important;
    min-height: 46px !important;
    border: 1px solid rgba(39, 221, 255, 0.56) !important;
    border-radius: 4px !important;
    background:
        linear-gradient(105deg, rgba(4, 18, 36, 0.98), rgba(8, 10, 31, 0.98) 72%, rgba(22, 5, 39, 0.96)) padding-box,
        linear-gradient(105deg, rgba(255, 72, 214, 0.72), rgba(39, 221, 255, 0.62) 54%, rgba(255, 72, 214, 0.72)) border-box !important;
    box-shadow:
        inset 0 0 16px rgba(39, 221, 255, 0.08),
        0 0 10px rgba(39, 221, 255, 0.08) !important;
}

#chat-input:focus {
    border-color: rgba(39, 238, 255, 0.92) !important;
    box-shadow:
        inset 0 0 18px rgba(39, 221, 255, 0.12),
        0 0 14px rgba(39, 221, 255, 0.18) !important;
}

#mic-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    clip-path: none !important;
}

#send-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

@media (max-width: 860px) {
    #chat-input-shell {
        column-gap: 8px !important;
        min-height: 52px !important;
    }

    #chat-input-actions {
        gap: 6px !important;
    }

    #chat-input-actions button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    #send-btn {
        width: 42px !important;
        height: 36px !important;
        min-width: 42px !important;
        min-height: 36px !important;
    }

    #mic-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
    }
}

@media (max-width: 640px) {
    #chat-input-shell {
        align-items: center !important;
        row-gap: 7px !important;
    }

    #chat-input-actions {
        align-self: center !important;
        gap: 5px !important;
    }

    #chat-input-shell > .chat-input-stack,
    #chat-input-shell > .flex-1,
    #send-btn {
        align-self: center !important;
    }
}

@media (max-width: 390px) {
    #chat-input-shell {
        column-gap: 6px !important;
    }

    #chat-input-actions {
        gap: 4px !important;
    }

    #chat-input-actions button {
        width: 32px !important;
        height: 34px !important;
        min-width: 32px !important;
        min-height: 34px !important;
    }

    #send-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 34px !important;
        min-height: 34px !important;
    }
}
/* codex: life-forge-v3-toolbar-color-r3 */
/* High-specificity correction for the V3 toolbar's legacy cyan fallback. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-toolbar
    .fantasy-action-btn.fantasy-action-btn {
    --tree-neon-a: var(--fantasy-neon-cyan);
    --tree-neon-b: var(--fantasy-neon-violet);
    --tree-neon-c: var(--fantasy-neon-pink);
    border-color: transparent !important;
    background:
        linear-gradient(
            145deg,
            rgba(8, 28, 52, 0.98),
            rgba(28, 7, 47, 0.98)
        ) padding-box,
        linear-gradient(
            112deg,
            var(--tree-neon-a),
            var(--tree-neon-b) 52%,
            var(--tree-neon-c)
        ) border-box !important;
    color: #e8fcff !important;
    box-shadow:
        inset 0 1px 0 rgba(230, 255, 255, 0.1),
        0 0 9px rgba(0, 234, 255, 0.14),
        0 0 14px rgba(143, 61, 255, 0.1) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-toolbar
    .fantasy-action-btn.fantasy-action-btn:nth-child(3) {
    --tree-neon-a: var(--fantasy-neon-violet);
    --tree-neon-b: var(--fantasy-neon-pink);
    --tree-neon-c: var(--fantasy-neon-cyan);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-toolbar
    .fantasy-action-btn.fantasy-action-btn:nth-child(4) {
    --tree-neon-a: var(--fantasy-neon-pink);
    --tree-neon-b: var(--fantasy-neon-violet);
    --tree-neon-c: var(--fantasy-neon-cyan);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-toolbar
    .fantasy-action-btn.fantasy-action-btn:nth-child(5) {
    --tree-neon-a: var(--fantasy-neon-cyan);
    --tree-neon-b: var(--fantasy-neon-pink);
    --tree-neon-c: var(--fantasy-neon-violet);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-toolbar
    .fantasy-action-btn.fantasy-action-btn:nth-child(6) {
    --tree-neon-a: var(--fantasy-neon-pink);
    --tree-neon-b: var(--fantasy-neon-cyan);
    --tree-neon-c: var(--fantasy-neon-violet);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-toolbar
    .fantasy-action-btn.fantasy-action-btn:nth-child(7) {
    --tree-neon-a: var(--fantasy-neon-cyan);
    --tree-neon-b: var(--fantasy-neon-violet);
    --tree-neon-c: var(--fantasy-neon-pink);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-tree-toolbar
    .fantasy-action-btn.fantasy-action-btn:is(
        .active,
        .is-active,
        .is-primary,
        [aria-selected="true"],
        [aria-pressed="true"]
    ) {
    background:
        linear-gradient(
            145deg,
            rgba(33, 7, 68, 0.99),
            rgba(4, 40, 58, 0.99)
        ) padding-box,
        linear-gradient(
            112deg,
            var(--tree-neon-a),
            var(--tree-neon-b) 48%,
            var(--tree-neon-c)
        ) border-box !important;
    color: #ffffff !important;
    box-shadow:
        inset 0 0 18px rgba(143, 61, 255, 0.24),
        0 0 14px rgba(0, 234, 255, 0.3),
        0 0 22px rgba(143, 61, 255, 0.2),
        0 0 28px rgba(255, 47, 166, 0.14) !important;
}

/* codex: life-simulator-magenta-shell-global-v2 */
/* Keep the sidebar's current magenta/violet palette across every view. */
#sidebar {
    --life-shell-pink: #ff2fa6;
    --life-shell-pink-soft: #ff86d2;
    --life-shell-violet: #9b4dff;
    --life-shell-indigo: #6257ff;
    --life-shell-lilac: #d9b8ff;
    border-right-color: rgba(155, 77, 255, 0.72) !important;
    background:
        linear-gradient(180deg, rgba(17, 5, 36, 0.99), rgba(5, 3, 18, 0.995) 68%, rgba(13, 3, 25, 0.99)) !important;
    box-shadow:
        inset -1px 0 rgba(255, 47, 166, 0.24),
        5px 0 24px rgba(155, 77, 255, 0.16),
        18px 0 46px rgba(0, 0, 0, 0.46) !important;
}

#sidebar > div:first-child {
    border-color: transparent !important;
    border-bottom-color: rgba(255, 47, 166, 0.58) !important;
    background:
        linear-gradient(105deg, rgba(255, 47, 166, 0.16), rgba(155, 77, 255, 0.15) 52%, rgba(98, 87, 255, 0.08)) padding-box,
        linear-gradient(105deg, rgba(255, 47, 166, 0.78), rgba(155, 77, 255, 0.7), rgba(98, 87, 255, 0.42)) border-box !important;
    box-shadow:
        inset 0 0 24px rgba(155, 77, 255, 0.1),
        0 0 18px rgba(255, 47, 166, 0.12) !important;
}

#sidebar > div:first-child img {
    box-shadow:
        0 0 0 1px rgba(255, 134, 210, 0.92),
        0 0 11px rgba(255, 47, 166, 0.48),
        0 0 19px rgba(155, 77, 255, 0.34) !important;
}

#sidebar > div:first-child .text-white {
    color: #fff4fc !important;
    text-shadow: 0 0 10px rgba(255, 47, 166, 0.24);
}

#sidebar > div:first-child .text-neutral-500 {
    color: rgba(217, 184, 255, 0.62) !important;
}

#sidebar nav {
    scrollbar-color: rgba(255, 47, 166, 0.78) rgba(54, 20, 91, 0.18) !important;
}

#sidebar nav::-webkit-scrollbar {
    width: 6px;
}

#sidebar nav::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(59, 25, 95, 0.12), rgba(255, 47, 166, 0.08));
}

#sidebar nav::-webkit-scrollbar-thumb {
    border: 1px solid rgba(255, 134, 210, 0.34);
    border-radius: 999px;
    background: linear-gradient(180deg, var(--life-shell-pink), var(--life-shell-violet) 56%, var(--life-shell-indigo));
    box-shadow: 0 0 9px rgba(255, 47, 166, 0.48), 0 0 14px rgba(155, 77, 255, 0.3);
}

#sidebar nav::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff86d2, #b56cff 54%, #756cff);
}

#sidebar .menu-group > button {
    color: rgba(217, 184, 255, 0.72) !important;
}

#sidebar .menu-group > button::after {
    background: linear-gradient(90deg, rgba(255, 47, 166, 0.58), rgba(155, 77, 255, 0.42) 58%, transparent 92%) !important;
}

#sidebar .menu-group > button:hover {
    color: #ffd6f1 !important;
}

#sidebar .menu-group > button .chevron {
    color: var(--life-shell-pink) !important;
    filter: drop-shadow(0 0 5px rgba(255, 47, 166, 0.68));
}

#sidebar .menu-group-items .sidebar-item,
#sidebar .sidebar-item {
    color: rgba(224, 211, 245, 0.78) !important;
    background:
        linear-gradient(96deg, rgba(18, 8, 39, 0.93), rgba(8, 7, 27, 0.94)) padding-box,
        linear-gradient(108deg, rgba(255, 47, 166, 0.24), rgba(155, 77, 255, 0.34) 58%, rgba(98, 87, 255, 0.24)) border-box !important;
    filter: drop-shadow(0 0 5px rgba(155, 77, 255, 0.08));
    transition:
        color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
        background 220ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 180ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#sidebar .sidebar-item .item-icon,
#sidebar .sidebar-item .text-cyan-300,
#sidebar .sidebar-item .text-emerald-400,
#sidebar .sidebar-item .text-primary-400 {
    color: rgba(192, 151, 255, 0.86) !important;
    text-shadow: 0 0 8px rgba(155, 77, 255, 0.28);
}

#sidebar .menu-group-items .sidebar-item:hover,
#sidebar .sidebar-item:hover {
    color: #fff2fb !important;
    background:
        linear-gradient(96deg, rgba(56, 10, 73, 0.96), rgba(23, 10, 61, 0.95)) padding-box,
        linear-gradient(104deg, rgba(255, 47, 166, 0.92), rgba(155, 77, 255, 0.88) 56%, rgba(98, 87, 255, 0.74)) border-box !important;
    filter: drop-shadow(0 0 7px rgba(255, 47, 166, 0.24)) drop-shadow(0 0 12px rgba(155, 77, 255, 0.16));
}

#sidebar .sidebar-item:hover .item-icon,
#sidebar .sidebar-item:hover .text-cyan-300,
#sidebar .sidebar-item:hover .text-emerald-400,
#sidebar .sidebar-item:hover .text-primary-400 {
    color: #ff9ddd !important;
    text-shadow: 0 0 10px rgba(255, 47, 166, 0.52);
}

#sidebar .menu-group-items .sidebar-item.active,
#sidebar .sidebar-item.active {
    color: #fff !important;
    background:
        linear-gradient(96deg, rgba(73, 9, 83, 0.98), rgba(29, 10, 70, 0.97)) padding-box,
        linear-gradient(104deg, var(--life-shell-pink), var(--life-shell-violet) 54%, var(--life-shell-indigo)) border-box !important;
    filter: drop-shadow(0 0 8px rgba(255, 47, 166, 0.3)) drop-shadow(0 0 14px rgba(155, 77, 255, 0.22));
}

#sidebar .sidebar-item.active::before {
    background: var(--life-shell-pink) !important;
    box-shadow: 0 0 10px rgba(255, 47, 166, 0.88), 0 0 18px rgba(155, 77, 255, 0.52) !important;
}

#sidebar .sidebar-item.active::after {
    background: linear-gradient(90deg, transparent, var(--life-shell-pink), var(--life-shell-violet)) !important;
    box-shadow: 0 0 10px rgba(255, 47, 166, 0.68) !important;
}

#sidebar .sidebar-item.active .item-icon,
#sidebar .sidebar-item.active .text-cyan-300,
#sidebar .sidebar-item.active .text-emerald-400,
#sidebar .sidebar-item.active .text-primary-400 {
    color: #ffc0ea !important;
    text-shadow: 0 0 11px rgba(255, 47, 166, 0.76) !important;
}

#sidebar > div:last-child {
    border-top-color: rgba(155, 77, 255, 0.38) !important;
    background: linear-gradient(180deg, rgba(12, 4, 28, 0.78), rgba(26, 5, 38, 0.9)) !important;
}

#sidebar > div:last-child::before,
#sidebar .fa-circle {
    color: var(--life-shell-pink) !important;
    background: var(--life-shell-pink) !important;
    box-shadow: 0 0 10px rgba(255, 47, 166, 0.72) !important;
}

#sidebar-version {
    color: rgba(217, 184, 255, 0.62) !important;
}

#sidebar-version:hover {
    color: #e1c5ff !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #sidebar {
        box-shadow: inset -1px 0 rgba(255, 47, 166, 0.16), 6px 0 20px rgba(155, 77, 255, 0.1) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #sidebar .sidebar-item {
        transition-duration: 0.01ms !important;
    }
}

/* [codex] life-simulator-brand-tone-r1 */
body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:first-child {
    border-bottom-color: rgba(255, 47, 166, 0.42) !important;
    background:
        linear-gradient(105deg, rgba(255, 47, 166, 0.10), rgba(155, 77, 255, 0.09) 52%, rgba(98, 87, 255, 0.05)) padding-box,
        linear-gradient(105deg, rgba(255, 47, 166, 0.50), rgba(155, 77, 255, 0.46), rgba(98, 87, 255, 0.28)) border-box !important;
    box-shadow:
        inset 0 0 18px rgba(155, 77, 255, 0.06),
        0 0 12px rgba(255, 47, 166, 0.07) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:first-child img {
    box-shadow:
        0 0 0 1px rgba(255, 134, 210, 0.68),
        0 0 8px rgba(255, 47, 166, 0.28),
        0 0 14px rgba(155, 77, 255, 0.20) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:first-child .text-white {
    color: #f8f2fc !important;
    text-shadow: 0 0 6px rgba(255, 47, 166, 0.12) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:first-child .text-neutral-500 {
    color: rgba(207, 185, 232, 0.54) !important;
}

/* codex: life-forge-header-water-pulse-r15 */
/* Header pseudo-beams pause with the hidden Life Forge workbench. */
body:has(#fantasy-workbench.fantasy-fx-page-hidden)
    #main-content > header::before,
body:has(#fantasy-workbench.fantasy-fx-page-hidden)
    #main-content > header::after {
    animation-play-state: paused !important;
}

/* codex: life-forge-header-breath-r19 */
/* Keep the header edge fixed in place; only its brightness and glow breathe. */
@keyframes fantasyHeaderBreathEdgeR19 {
    0%, 100% {
        opacity: 0.56;
        filter:
            drop-shadow(0 0 3px rgba(0, 234, 255, 0.38))
            drop-shadow(0 0 8px rgba(143, 61, 255, 0.12));
    }

    50% {
        opacity: 0.96;
        filter:
            drop-shadow(0 0 5px rgba(0, 234, 255, 0.76))
            drop-shadow(0 0 12px rgba(143, 61, 255, 0.3))
            drop-shadow(0 0 18px rgba(255, 47, 166, 0.18));
    }
}

@keyframes fantasyHeaderBreathEdgeR19Mobile {
    0%, 100% {
        opacity: 0.52;
        filter:
            drop-shadow(0 0 2px rgba(0, 234, 255, 0.3))
            drop-shadow(0 0 5px rgba(143, 61, 255, 0.1));
    }

    50% {
        opacity: 0.82;
        filter:
            drop-shadow(0 0 4px rgba(0, 234, 255, 0.58))
            drop-shadow(0 0 9px rgba(143, 61, 255, 0.22))
            drop-shadow(0 0 12px rgba(255, 47, 166, 0.12));
    }
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::after {
    right: 0 !important;
    bottom: -2px !important;
    left: 0 !important;
    width: auto !important;
    height: 3px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            90deg,
            rgba(0, 234, 255, 0.86) 0%,
            rgba(0, 206, 255, 0.94) 24%,
            rgba(143, 61, 255, 0.9) 52%,
            rgba(255, 47, 166, 0.92) 76%,
            rgba(0, 234, 255, 0.86) 100%
        ) !important;
    box-shadow:
        0 0 7px rgba(0, 234, 255, 0.42),
        0 0 15px rgba(143, 61, 255, 0.2),
        0 0 22px rgba(255, 47, 166, 0.12) !important;
    opacity: 0.72;
    filter:
        drop-shadow(0 0 3px rgba(0, 234, 255, 0.38))
        drop-shadow(0 0 8px rgba(143, 61, 255, 0.12));
    transform: none !important;
    clip-path: none !important;
    animation:
        fantasyHeaderBreathEdgeR19 7.6s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

body:has(#fantasy-workbench.fantasy-fx-page-hidden)
    #main-content > header::before,
body:has(#fantasy-workbench.fantasy-fx-page-hidden)
    #main-content > header::after {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        bottom: -2px !important;
        height: 2px !important;
        box-shadow:
            0 0 5px rgba(0, 234, 255, 0.3),
            0 0 10px rgba(143, 61, 255, 0.14),
            0 0 14px rgba(255, 47, 166, 0.08) !important;
        opacity: 0.64 !important;
        filter:
            drop-shadow(0 0 2px rgba(0, 234, 255, 0.3))
            drop-shadow(0 0 5px rgba(143, 61, 255, 0.1)) !important;
        animation:
            fantasyHeaderBreathEdgeR19Mobile 8.4s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        right: 0 !important;
        bottom: -2px !important;
        left: 0 !important;
        width: auto !important;
        height: 2px !important;
        opacity: 0.66 !important;
        filter:
            drop-shadow(0 0 3px rgba(0, 234, 255, 0.36))
            drop-shadow(0 0 7px rgba(143, 61, 255, 0.12)) !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        animation-play-state: paused !important;
    }
}

/* codex: life-forge-topbar-magenta-v1-end */
body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::after {
    right: 0 !important;
    bottom: -2px !important;
    left: 0 !important;
    width: auto !important;
    height: 3px !important;
    border-radius: 999px !important;
    clip-path: none !important;
    background:
        linear-gradient(
            90deg,
            rgba(255, 47, 166, 0.84) 0%,
            rgba(255, 134, 210, 0.94) 28%,
            rgba(155, 77, 255, 0.98) 52%,
            rgba(98, 87, 255, 0.82) 74%,
            rgba(255, 47, 166, 0.84) 100%
        ) !important;
    box-shadow:
        0 0 7px rgba(255, 47, 166, 0.5),
        0 0 15px rgba(155, 77, 255, 0.32),
        0 0 22px rgba(98, 87, 255, 0.16) !important;
    opacity: 0.74 !important;
    filter: none !important;
    transform: none !important;
    animation: lifeForgeTopbarMagentaEdgeV1 8.6s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        bottom: -2px !important;
        height: 2px !important;
        animation: lifeForgeTopbarMagentaEdgeV1 8.8s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
        box-shadow:
            0 0 5px rgba(255, 47, 166, 0.34),
            0 0 10px rgba(155, 77, 255, 0.2) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        opacity: 0.72 !important;
        filter: none !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        animation-play-state: paused !important;
    }
}

/* codex: life-forge-topbar-magenta-v1-final */
/* Final cascade: the topbar edge stays pink/violet on the Life Forge view. */
@keyframes lifeForgeTopbarMagentaEdgeV1 {
    0%,
    100% {
        opacity: 0.54;
        filter:
            drop-shadow(0 0 3px rgba(255, 47, 166, 0.36))
            drop-shadow(0 0 8px rgba(155, 77, 255, 0.16));
    }

    50% {
        opacity: 0.98;
        filter:
            drop-shadow(0 0 7px rgba(255, 47, 166, 0.78))
            drop-shadow(0 0 15px rgba(155, 77, 255, 0.42))
            drop-shadow(0 0 21px rgba(98, 87, 255, 0.18));
    }
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::after {
    right: 0 !important;
    bottom: -2px !important;
    left: 0 !important;
    width: auto !important;
    height: 3px !important;
    border-radius: 999px !important;
    clip-path: none !important;
    background:
        linear-gradient(
            90deg,
            rgba(255, 47, 166, 0.84) 0%,
            rgba(255, 134, 210, 0.94) 28%,
            rgba(155, 77, 255, 0.98) 52%,
            rgba(98, 87, 255, 0.82) 74%,
            rgba(255, 47, 166, 0.84) 100%
        ) !important;
    box-shadow:
        0 0 7px rgba(255, 47, 166, 0.5),
        0 0 15px rgba(155, 77, 255, 0.32),
        0 0 22px rgba(98, 87, 255, 0.16) !important;
    opacity: 0.74 !important;
    filter: none !important;
    transform: none !important;
    animation:
        lifeForgeTopbarMagentaEdgeV1 8.6s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        bottom: -2px !important;
        height: 2px !important;
        animation:
            lifeForgeTopbarMagentaEdgeV1 8.8s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
        box-shadow:
            0 0 5px rgba(255, 47, 166, 0.34),
            0 0 10px rgba(155, 77, 255, 0.2) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        opacity: 0.72 !important;
        filter: none !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        animation-play-state: paused !important;
    }
}

/* codex: life-forge-topbar-magenta-v1 */
/* Replace the Life Forge top navigation's cyan lead with the global pink/violet shell. */
@keyframes lifeForgeTopbarMagentaBreathV1 {
    0%,
    100% {
        opacity: 0.54;
        filter:
            blur(4px)
            drop-shadow(0 0 5px rgba(155, 77, 255, 0.24))
            drop-shadow(0 0 8px rgba(255, 47, 166, 0.12));
    }

    50% {
        opacity: 0.9;
        filter:
            blur(5px)
            drop-shadow(0 0 8px rgba(255, 47, 166, 0.42))
            drop-shadow(0 0 14px rgba(155, 77, 255, 0.3));
    }
}

body:has(#view-memory.fantasy-memory-view.active) #main-content > header {
    border-bottom-color: transparent !important;
    background:
        linear-gradient(96deg, rgba(15, 5, 35, 0.99), rgba(7, 5, 26, 0.98) 54%, rgba(31, 6, 49, 0.96)) padding-box,
        linear-gradient(
            96deg,
            rgba(255, 47, 166, 0.84),
            rgba(155, 77, 255, 0.78) 48%,
            rgba(98, 87, 255, 0.64) 74%,
            rgba(255, 47, 166, 0.8)
        ) border-box !important;
    box-shadow:
        inset 0 -1px rgba(255, 47, 166, 0.2),
        inset 0 0 26px rgba(155, 77, 255, 0.08),
        0 7px 27px rgba(10, 1, 30, 0.36) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #main-content > header::before,
body:has(#view-memory.fantasy-memory-view.active) #main-content > header::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    border: 0 !important;
    clip-path: none !important;
}

body:has(#view-memory.fantasy-memory-view.active) #main-content > header::before {
    right: 0 !important;
    bottom: -2px !important;
    left: 0 !important;
    width: auto !important;
    height: 5px !important;
    background:
        linear-gradient(
            90deg,
            rgba(255, 47, 166, 0.42),
            rgba(155, 77, 255, 0.64) 42%,
            rgba(98, 87, 255, 0.48) 72%,
            rgba(255, 47, 166, 0.42)
        ) !important;
    opacity: 0.68 !important;
    animation: lifeForgeTopbarMagentaBreathV1 8.6s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

body:has(#view-memory.fantasy-memory-view.active) #main-content > header::after {
    right: 0 !important;
    bottom: -2px !important;
    left: 0 !important;
    width: auto !important;
    height: 2px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            90deg,
            rgba(255, 47, 166, 0.82),
            rgba(255, 134, 210, 0.96) 34%,
            rgba(155, 77, 255, 0.96) 60%,
            rgba(98, 87, 255, 0.72) 78%,
            rgba(255, 47, 166, 0.82)
        ) !important;
    box-shadow:
        0 0 7px rgba(255, 47, 166, 0.52),
        0 0 15px rgba(155, 77, 255, 0.34) !important;
    opacity: 0.78 !important;
    filter: none !important;
    transform: none !important;
    animation: lifeForgeTopbarMagentaBreathV1 8.6s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

body:has(#view-memory.fantasy-memory-view.active) #main-content > header button {
    color: rgba(209, 180, 248, 0.78) !important;
    border-color: rgba(155, 77, 255, 0.2) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #main-content > header button:hover {
    color: #fff1fb !important;
    border-color: rgba(255, 47, 166, 0.64) !important;
    background: rgba(255, 47, 166, 0.1) !important;
    box-shadow: 0 0 11px rgba(255, 47, 166, 0.18) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #breadcrumb-group {
    color: rgba(217, 184, 255, 0.76) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #breadcrumb-separator {
    color: rgba(255, 134, 210, 0.84) !important;
    text-shadow: 0 0 7px rgba(255, 47, 166, 0.46);
}

body:has(#view-memory.fantasy-memory-view.active) #breadcrumb-page,
body:has(#view-memory.fantasy-memory-view.active) #account-username {
    color: #fff2fb !important;
    text-shadow: 0 0 8px rgba(255, 47, 166, 0.16);
}

body:has(#view-memory.fantasy-memory-view.active) #account-role {
    color: #ff86d2 !important;
    text-shadow: 0 0 8px rgba(255, 47, 166, 0.42);
}

body:has(#view-memory.fantasy-memory-view.active) #lang-toggle {
    color: rgba(217, 184, 255, 0.82) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #lang-toggle:hover {
    color: #fff1fb !important;
    background: rgba(155, 77, 255, 0.14) !important;
}

body:has(#view-memory.fantasy-memory-view.active) .active-life-summary {
    border-color: transparent !important;
    clip-path: none !important;
    background:
        linear-gradient(102deg, rgba(30, 7, 50, 0.98), rgba(9, 7, 31, 0.98)) padding-box,
        linear-gradient(104deg, #ff2fa6, #9b4dff 55%, #6257ff) border-box !important;
    box-shadow:
        inset 0 0 16px rgba(155, 77, 255, 0.1),
        0 0 12px rgba(255, 47, 166, 0.2),
        0 0 20px rgba(155, 77, 255, 0.14) !important;
}

body:has(#view-memory.fantasy-memory-view.active) .active-life-summary::before {
    border-top-color: #ff2fa6 !important;
    background: none !important;
    box-shadow: 0 0 8px rgba(255, 47, 166, 0.76) !important;
}

body:has(#view-memory.fantasy-memory-view.active) .active-life-summary::after {
    border-bottom-color: #9b4dff !important;
    background: none !important;
    box-shadow: 0 0 8px rgba(155, 77, 255, 0.74) !important;
}

body:has(#view-memory.fantasy-memory-view.active) .active-life-summary-signal {
    background: #ff2fa6 !important;
    box-shadow: 0 0 10px rgba(255, 47, 166, 0.9) !important;
}

body:has(#view-memory.fantasy-memory-view.active) .active-life-summary-label {
    color: rgba(217, 184, 255, 0.72) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #active-life-name {
    color: #fff4fc !important;
    text-shadow: 0 0 9px rgba(255, 47, 166, 0.24) !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-memory.fantasy-memory-view.active) #main-content > header::before,
    body:has(#view-memory.fantasy-memory-view.active) #main-content > header::after {
        height: 2px !important;
        box-shadow:
            0 0 5px rgba(255, 47, 166, 0.36),
            0 0 10px rgba(155, 77, 255, 0.2) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-memory.fantasy-memory-view.active) #main-content > header::before,
    body:has(#view-memory.fantasy-memory-view.active) #main-content > header::after {
        animation: none !important;
        animation-play-state: paused !important;
    }
}

/* codex: life-forge-console-shell-thickness-r1 */
/* The left generator shell gets a sturdier neon contour without changing
   the panel's outer dimensions or the controls inside it. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-console {
    box-sizing: border-box !important;
    border: 2px solid transparent !important;
    border-radius: 14px !important;
    background:
        linear-gradient(
            90deg,
            rgba(0, 234, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(143, 61, 255, 0.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            145deg,
            rgba(3, 7, 22, 0.995),
            rgba(5, 4, 20, 0.99) 56%,
            rgba(23, 3, 34, 0.985)
        ) padding-box,
        linear-gradient(
            135deg,
            #00eaff,
            #8f3dff 48%,
            #ff2fa6
        ) border-box !important;
    background-size: 22px 22px, 22px 22px, auto, 320% 320% !important;
    background-position: 0 0, 0 0, 0 0, 0% 50% !important;
    box-shadow:
        inset 0 0 0 1px rgba(216, 255, 255, 0.1),
        inset 0 0 30px rgba(71, 32, 158, 0.13),
        0 0 0 1px rgba(0, 234, 255, 0.2),
        0 0 16px rgba(0, 234, 255, 0.2),
        0 0 28px rgba(143, 61, 255, 0.16),
        0 0 40px rgba(255, 47, 166, 0.1) !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-console {
        border-width: 2px !important;
        box-shadow:
            inset 0 0 0 1px rgba(216, 255, 255, 0.08),
            inset 0 0 20px rgba(71, 32, 158, 0.1),
            0 0 0 1px rgba(0, 234, 255, 0.16),
            0 0 10px rgba(0, 234, 255, 0.15),
            0 0 18px rgba(143, 61, 255, 0.11) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-console {
        animation: none !important;
        box-shadow:
            inset 0 0 0 1px rgba(216, 255, 255, 0.09),
            inset 0 0 22px rgba(71, 32, 158, 0.1),
            0 0 0 1px rgba(0, 234, 255, 0.18),
            0 0 14px rgba(0, 234, 255, 0.14),
            0 0 22px rgba(143, 61, 255, 0.1) !important;
    }
}

/* codex: life-forge-header-breath-r22 */
/* Final cascade for the top line: a centered water swell with soft tails. */
@keyframes fantasyHeaderBreathEdgeR22 {
    0%, 100% {
        opacity: 0.5;
        transform: scaleY(0.78);
        filter:
            drop-shadow(0 0 3px rgba(0, 234, 255, 0.34))
            drop-shadow(0 0 7px rgba(143, 61, 255, 0.1));
    }
    50% {
        opacity: 1;
        transform: scaleY(1.18);
        filter:
            drop-shadow(0 0 7px rgba(0, 234, 255, 0.82))
            drop-shadow(0 0 15px rgba(143, 61, 255, 0.38))
            drop-shadow(0 0 23px rgba(255, 47, 166, 0.24));
    }
}

@keyframes fantasyHeaderBreathEdgeR22Mobile {
    0%, 100% {
        opacity: 0.5;
        transform: scaleY(0.86);
        filter: drop-shadow(0 0 2px rgba(0, 234, 255, 0.3));
    }
    50% {
        opacity: 0.86;
        transform: scaleY(1.12);
        filter:
            drop-shadow(0 0 5px rgba(0, 234, 255, 0.64))
            drop-shadow(0 0 10px rgba(143, 61, 255, 0.24));
    }
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::after {
    right: 0 !important;
    bottom: -3px !important;
    left: 0 !important;
    width: auto !important;
    height: 5px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            90deg,
            rgba(0, 234, 255, 0.78) 0%,
            rgba(0, 214, 255, 0.94) 24%,
            rgba(143, 61, 255, 0.98) 52%,
            rgba(255, 47, 166, 0.96) 76%,
            rgba(0, 234, 255, 0.78) 100%
        ) !important;
    box-shadow:
        0 0 8px rgba(0, 234, 255, 0.46),
        0 0 16px rgba(143, 61, 255, 0.24),
        0 0 24px rgba(255, 47, 166, 0.14) !important;
    clip-path: polygon(
        0% 34%, 10% 32%, 24% 22%, 40% 6%, 47% 0%,
        53% 0%, 60% 6%, 76% 22%, 90% 32%, 100% 34%,
        100% 66%, 90% 68%, 76% 78%, 60% 94%, 53% 100%,
        47% 100%, 40% 94%, 24% 78%, 10% 68%, 0% 66%
    ) !important;
    transform-origin: 50% 50%;
    will-change: transform, opacity, filter;
    animation:
        fantasyHeaderBreathEdgeR22 6.4s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

body:has(#fantasy-workbench.fantasy-fx-page-hidden)
    #main-content > header::after {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        bottom: -2px !important;
        height: 3px !important;
        animation:
            fantasyHeaderBreathEdgeR22Mobile 7.2s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        height: 3px !important;
        opacity: 0.72 !important;
        transform: none !important;
        filter: drop-shadow(0 0 3px rgba(0, 234, 255, 0.38)) !important;
        animation: none !important;
        animation-play-state: paused !important;
    }
}

/* [codex] life-simulator-brand-tone-r2-final */
/* Lower the active Life Simulator brand bar saturation without changing layout. */
body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:first-child {
    border-bottom-color: rgba(112, 172, 218, 0.42) !important;
    background:
        linear-gradient(105deg, rgba(30, 12, 52, 0.98), rgba(18, 12, 42, 0.98) 52%, rgba(13, 16, 40, 0.98)) padding-box,
        linear-gradient(105deg, rgba(108, 78, 148, 0.58), rgba(77, 78, 143, 0.54), rgba(57, 91, 143, 0.48)) border-box !important;
    box-shadow:
        inset 0 0 16px rgba(84, 99, 171, 0.10),
        0 0 10px rgba(72, 83, 158, 0.08) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:first-child img {
    box-shadow:
        0 0 0 1px rgba(171, 185, 220, 0.62),
        0 0 7px rgba(79, 100, 170, 0.18),
        0 0 12px rgba(82, 54, 135, 0.14) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:first-child .text-white {
    color: #f2eef8 !important;
    text-shadow: 0 0 5px rgba(110, 96, 170, 0.10) !important;
}

body:has(#view-memory.fantasy-memory-view.active) #sidebar > div:first-child .text-neutral-500 {
    color: rgba(184, 176, 211, 0.50) !important;
}

/* codex: life-forge-header-breath-r22 */
/* Fixed full-width edge: one slow brightness/glow breath, with no sweep. */
@keyframes fantasyHeaderBreathEdgeR22 {
    0%, 100% {
        opacity: 0.54;
        filter:
            drop-shadow(0 0 3px rgba(0, 234, 255, 0.38))
            drop-shadow(0 0 8px rgba(143, 61, 255, 0.1));
    }

    50% {
        opacity: 0.98;
        filter:
            drop-shadow(0 0 6px rgba(0, 234, 255, 0.82))
            drop-shadow(0 0 14px rgba(143, 61, 255, 0.34))
            drop-shadow(0 0 20px rgba(255, 47, 166, 0.2));
    }
}

@keyframes fantasyHeaderBreathEdgeR22Mobile {
    0%, 100% {
        opacity: 0.5;
        filter:
            drop-shadow(0 0 2px rgba(0, 234, 255, 0.3))
            drop-shadow(0 0 5px rgba(143, 61, 255, 0.08));
    }

    50% {
        opacity: 0.84;
        filter:
            drop-shadow(0 0 4px rgba(0, 234, 255, 0.6))
            drop-shadow(0 0 9px rgba(143, 61, 255, 0.22))
            drop-shadow(0 0 13px rgba(255, 47, 166, 0.12));
    }
}

body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::after {
    right: 0 !important;
    bottom: -2px !important;
    left: 0 !important;
    width: auto !important;
    height: 3px !important;
    border-radius: 999px !important;
    background:
        linear-gradient(
            90deg,
            rgba(0, 234, 255, 0.86) 0%,
            rgba(0, 206, 255, 0.94) 24%,
            rgba(143, 61, 255, 0.92) 52%,
            rgba(255, 47, 166, 0.94) 76%,
            rgba(0, 234, 255, 0.86) 100%
        ) !important;
    box-shadow:
        0 0 7px rgba(0, 234, 255, 0.42),
        0 0 15px rgba(143, 61, 255, 0.2),
        0 0 22px rgba(255, 47, 166, 0.12) !important;
    opacity: 0.72;
    filter:
        drop-shadow(0 0 3px rgba(0, 234, 255, 0.38))
        drop-shadow(0 0 8px rgba(143, 61, 255, 0.1));
    transform: none !important;
    clip-path: none !important;
    animation:
        fantasyHeaderBreathEdgeR22 7.6s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

body:has(#view-memory.fantasy-memory-view.active):has(#fantasy-workbench.fantasy-fx-page-hidden)
    #main-content > header::before,
body:has(#view-memory.fantasy-memory-view.active):has(#fantasy-workbench.fantasy-fx-page-hidden)
    #main-content > header::after {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        bottom: -2px !important;
        height: 2px !important;
        opacity: 0.62;
        filter:
            drop-shadow(0 0 2px rgba(0, 234, 255, 0.3))
            drop-shadow(0 0 5px rgba(143, 61, 255, 0.08));
        animation:
            fantasyHeaderBreathEdgeR22Mobile 8.4s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        opacity: 0.66 !important;
        filter:
            drop-shadow(0 0 3px rgba(0, 234, 255, 0.36))
            drop-shadow(0 0 7px rgba(143, 61, 255, 0.12)) !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        animation-play-state: paused !important;
    }
}

/* codex: life-forge-header-breath-r23 */
/* Final shape override: the center is thickest, tails taper gently. */
body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::after {
    right: 0 !important;
    bottom: -3px !important;
    left: 0 !important;
    width: auto !important;
    height: 5px !important;
    clip-path: polygon(
        0% 34%, 10% 32%, 24% 22%, 40% 6%, 47% 0%,
        53% 0%, 60% 6%, 76% 22%, 90% 32%, 100% 34%,
        100% 66%, 90% 68%, 76% 78%, 60% 94%, 53% 100%,
        47% 100%, 40% 94%, 24% 78%, 10% 68%, 0% 66%
    ) !important;
    transform-origin: 50% 50%;
    animation:
        fantasyHeaderBreathEdgeR22 6.4s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

body:has(#fantasy-workbench.fantasy-fx-page-hidden)
    #main-content > header::after {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        bottom: -2px !important;
        height: 3px !important;
        animation:
            fantasyHeaderBreathEdgeR22Mobile 7.2s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        height: 3px !important;
        opacity: 0.72 !important;
        transform: none !important;
        clip-path: polygon(
            0% 34%, 10% 32%, 24% 22%, 40% 6%, 47% 0%,
            53% 0%, 60% 6%, 76% 22%, 90% 32%, 100% 34%,
            100% 66%, 90% 68%, 76% 78%, 60% 94%, 53% 100%,
            47% 100%, 40% 94%, 24% 78%, 10% 68%, 0% 66%
        ) !important;
        animation: none !important;
        animation-play-state: paused !important;
    }
}

/* codex: life-forge-topbar-magenta-terminal */
body:has(#view-memory.fantasy-memory-view.active)
    #main-content > header::after {
    right: 0 !important;
    bottom: -2px !important;
    left: 0 !important;
    width: auto !important;
    height: 3px !important;
    border-radius: 999px !important;
    clip-path: none !important;
    background:
        linear-gradient(
            90deg,
            rgba(255, 47, 166, 0.84),
            rgba(255, 134, 210, 0.94) 28%,
            rgba(155, 77, 255, 0.98) 52%,
            rgba(98, 87, 255, 0.82) 74%,
            rgba(255, 47, 166, 0.84)
        ) !important;
    box-shadow:
        0 0 7px rgba(255, 47, 166, 0.5),
        0 0 15px rgba(155, 77, 255, 0.32),
        0 0 22px rgba(98, 87, 255, 0.16) !important;
    opacity: 0.74 !important;
    filter: none !important;
    transform: none !important;
    animation: lifeForgeTopbarMagentaEdgeV1 8.6s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        bottom: -2px !important;
        height: 2px !important;
        animation: lifeForgeTopbarMagentaEdgeV1 8.8s cubic-bezier(0.37, 0, 0.63, 1) infinite !important;
        box-shadow:
            0 0 5px rgba(255, 47, 166, 0.34),
            0 0 10px rgba(155, 77, 255, 0.2) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:has(#view-memory.fantasy-memory-view.active)
        #main-content > header::after {
        opacity: 0.72 !important;
        filter: none !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
        animation-play-state: paused !important;
    }
}

/* codex: life-forge-console-shell-tone-r2 */
/* Keep the generator shell in the same saturated blue / violet / magenta
   family as the controls inside it. The tree's semantic warning colors are
   intentionally left untouched. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-console {
    border-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    background:
        linear-gradient(
            90deg,
            rgba(0, 234, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            rgba(143, 61, 255, 0.03) 1px,
            transparent 1px
        ),
        linear-gradient(
            145deg,
            rgba(3, 7, 22, 0.995),
            rgba(5, 4, 20, 0.99) 56%,
            rgba(23, 3, 34, 0.985)
        ) padding-box,
        linear-gradient(
            118deg,
            #00eaff 0%,
            #8f3dff 48%,
            #ff2fa6 100%
        ) border-box !important;
    background-size: 22px 22px, 22px 22px, auto, 280% 280% !important;
    background-position: 0 0, 0 0, 0 0, 0% 50% !important;
    box-shadow:
        inset 0 0 0 1px rgba(216, 255, 255, 0.1),
        inset 0 0 30px rgba(71, 32, 158, 0.13),
        0 0 0 1px rgba(0, 234, 255, 0.2),
        0 0 15px rgba(0, 234, 255, 0.18),
        0 0 26px rgba(143, 61, 255, 0.15),
        0 0 36px rgba(255, 47, 166, 0.09) !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-console {
        box-shadow:
            inset 0 0 0 1px rgba(216, 255, 255, 0.08),
            inset 0 0 20px rgba(71, 32, 158, 0.1),
            0 0 0 1px rgba(0, 234, 255, 0.16),
            0 0 9px rgba(0, 234, 255, 0.14),
            0 0 17px rgba(143, 61, 255, 0.1) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-console {
        box-shadow:
            inset 0 0 0 1px rgba(216, 255, 255, 0.09),
            inset 0 0 22px rgba(71, 32, 158, 0.1),
            0 0 0 1px rgba(0, 234, 255, 0.18),
            0 0 13px rgba(0, 234, 255, 0.13),
        0 0 21px rgba(143, 61, 255, 0.09) !important;
    }
}

/* codex: life-forge-space-hud-layout-r1 */
/* Keep the orbital status strip anchored to the bottom of the star map.
   Shared surface rules also style it as a glass card, so they must not
   change its HUD positioning to normal flow. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-space-status-strip {
    position: absolute !important;
    top: auto !important;
    right: 44px !important;
    bottom: 12px !important;
    left: 44px !important;
    width: auto !important;
    max-width: none !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-space-status-strip {
        right: 14px !important;
        bottom: 8px !important;
        left: 14px !important;
    }
}

/* codex: life-forge-v3-toolbar-mobile-fit-r1 */
/* Keep the mobile header on one compact row: the shared view switcher keeps
   its existing position, while V3 controls shrink just enough to fit. */
@media (max-width: 980px) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-stage.fantasy-tree-mode:has(.fantasy-tree-toolbar)
        .fantasy-stage-actions {
        display: grid !important;
        grid-template-columns: 72px minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        gap: 4px !important;
        overflow: visible !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-stage.fantasy-tree-mode:has(.fantasy-tree-toolbar)
        .fantasy-tree-visual-version {
        grid-column: 1 !important;
        width: auto !important;
        min-width: auto !important;
        grid-template-columns: repeat(4, 34px) !important;
        grid-template-rows: 34px !important;
        grid-auto-flow: column !important;
        min-height: 34px !important;
        padding: 2px !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-stage.fantasy-tree-mode:has(.fantasy-tree-toolbar)
        .fantasy-tree-toolbar {
        grid-column: 2 !important;
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 3px !important;
        overflow: visible !important;
        padding: 2px !important;
        box-sizing: border-box !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-stage.fantasy-tree-mode:has(.fantasy-tree-toolbar)
        .fantasy-tree-toolbar
        .fantasy-action-btn {
        width: auto !important;
        min-width: 0 !important;
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 !important;
        justify-content: center !important;
    }
}


/* codex: chat-session-cyan-balance-r1 */
/* Keep the chat session drawer magenta-led while adding a restrained cyan cool edge. */
body:has(#view-chat.view.active) .session-panel {
    background:
        linear-gradient(180deg, rgba(24, 8, 48, .985), rgba(5, 4, 19, .995) 72%, rgba(8, 12, 31, .99)) padding-box,
        linear-gradient(180deg, rgba(255, 47, 166, .78), rgba(155, 77, 255, .66) 54%, rgba(58, 183, 255, .36)) border-box !important;
    box-shadow:
        inset -1px 0 rgba(0, 214, 255, .14),
        inset 0 0 18px rgba(0, 164, 255, .025),
        6px 0 24px rgba(155, 77, 255, .12),
        18px 0 42px rgba(0, 0, 0, .4) !important;
}

body:has(#view-chat.view.active) .session-panel-header {
    border-bottom-color: rgba(0, 204, 255, .28) !important;
    background:
        linear-gradient(100deg, rgba(255, 47, 166, .12), rgba(155, 77, 255, .10) 54%, rgba(0, 193, 255, .05)),
        repeating-linear-gradient(90deg, transparent 0 22px, rgba(155, 77, 255, .11) 22px 24px, transparent 24px 45px) !important;
}

body:has(#view-chat.view.active) .session-panel-new {
    border-color: rgba(116, 123, 225, .48) !important;
    background:
        linear-gradient(100deg, rgba(40, 8, 62, .96), rgba(8, 14, 42, .97)) padding-box,
        linear-gradient(104deg, rgba(255, 47, 166, .68), rgba(155, 77, 255, .58) 58%, rgba(0, 198, 255, .26)) border-box !important;
}

body:has(#view-chat.view.active) .session-list {
    background: linear-gradient(90deg, rgba(0, 191, 255, .018), transparent 48%, rgba(0, 191, 255, .032));
}

body:has(#view-chat.view.active) .session-item {
    border-color: rgba(85, 144, 215, .27) !important;
    background:
        linear-gradient(96deg, rgba(18, 8, 39, .9), rgba(5, 13, 29, .95)) padding-box,
        linear-gradient(108deg, rgba(255, 47, 166, .18), rgba(155, 77, 255, .28) 52%, rgba(0, 195, 255, .18)) border-box !important;
    filter: drop-shadow(0 0 5px rgba(155, 77, 255, .08)) !important;
}

body:has(#view-chat.view.active) .session-item .session-icon {
    color: rgba(164, 211, 255, .68) !important;
}

body:has(#view-chat.view.active) .session-item:hover,
body:has(#view-chat.view.active) .session-item.active {
    background:
        linear-gradient(96deg, rgba(66, 9, 81, .98), rgba(13, 13, 48, .97)) padding-box,
        linear-gradient(104deg, rgba(255, 47, 166, .84), rgba(155, 77, 255, .68) 54%, rgba(0, 201, 255, .36)) border-box !important;
    box-shadow:
        inset 3px 0 var(--chat-shell-pink),
        0 0 13px rgba(255, 47, 166, .15),
        0 0 10px rgba(0, 201, 255, .07) !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-chat.view.active) .session-panel {
        box-shadow:
            inset -1px 0 rgba(0, 214, 255, .10),
            inset 0 0 14px rgba(0, 164, 255, .02),
            6px 0 18px rgba(155, 77, 255, .1),
            12px 0 28px rgba(0, 0, 0, .34) !important;
    }
}

/* codex: restore-life-visual-conversation-r3 */

/* codex: life-forge-v3-toolbar-layout-v4-r1 */
/* Keep the shared Star / Fate Tree switcher in place. Reorder the V3-only
   controls within their existing footprint, then drop the toolbar onto the
   same right-side row used by V4. */
@media (min-width: 981px) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-stage.fantasy-tree-mode:has(.fantasy-tree-toolbar)
        .fantasy-stage-top {
        overflow: visible !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-stage.fantasy-tree-mode:has(.fantasy-tree-toolbar)
        .fantasy-stage-actions {
        position: relative !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-stage.fantasy-tree-mode:has(.fantasy-tree-toolbar)
        .fantasy-tree-visual-version {
        position: relative !important;
        z-index: 20 !important;
        order: 2 !important;
        display: grid !important;
    }

    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-stage.fantasy-tree-mode:has(.fantasy-tree-toolbar)
        .fantasy-tree-toolbar {
        position: relative !important;
        z-index: 20 !important;
        order: 1 !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: auto !important;
        justify-content: flex-end !important;
        transform: translate3d(86px, calc(100% + 34px), 0) !important;
    }
}

/* codex: life-forge-outer-frame-breath-v1 */
/* Keep the main star/tree shell quiet and glassy while giving its perimeter
   a slow ambient response. The canvas and its internal HUD are untouched. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready {
    --fantasy-outer-frame-duration: 7.4s;
    position: relative;
    isolation: isolate;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench {
    --fantasy-outer-frame-duration: 7.4s;
    border-color: rgba(151, 180, 218, 0.34) !important;
    background:
        linear-gradient(
            135deg,
            rgba(108, 188, 225, 0.045),
            transparent 28%,
            transparent 72%,
            rgba(137, 104, 222, 0.05)
        ),
        var(--fantasy-frame-bg) !important;
    box-shadow:
        inset 0 1px 0 rgba(235, 251, 255, 0.1),
        inset 0 -1px 0 rgba(69, 112, 178, 0.16),
        inset 0 0 36px rgba(69, 112, 178, 0.065),
        0 16px 44px rgba(0, 0, 0, 0.32) !important;
}

/* Use a real sibling layer instead of the host's pseudo-elements. The
   workbench has several legacy pseudo-element rules, so a dedicated layer
   keeps this ambient contour deterministic in both star-map and tree modes. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-outer-frame {
    position: absolute;
    z-index: 31;
    inset: 0;
    display: block;
    border: 1px solid rgba(103, 218, 255, 0.28);
    border-radius: 15px;
    pointer-events: none;
    opacity: 0.42;
    filter:
        brightness(0.92)
        drop-shadow(0 0 8px rgba(71, 201, 255, 0.12))
        drop-shadow(0 0 18px rgba(124, 100, 226, 0.08));
    will-change: opacity, filter;
    animation:
        fantasyWorkbenchOuterFrameBreath
        var(--fantasy-outer-frame-duration)
        cubic-bezier(0.45, 0, 0.55, 1)
        -2.1s
        infinite;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    > .fantasy-workbench-outer-frame::after {
    content: "";
    position: absolute;
    inset: 2px;
    display: block;
    border: 1px solid rgba(210, 231, 255, 0.12);
    border-radius: 13px;
    pointer-events: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.035),
        inset 0 -1px 0 rgba(106, 151, 220, 0.06);
}

@keyframes fantasyWorkbenchOuterFrameBreath {
    0%,
    100% {
        opacity: 0.32;
        filter:
            brightness(0.9)
            drop-shadow(0 0 7px rgba(71, 201, 255, 0.1))
            drop-shadow(0 0 15px rgba(124, 100, 226, 0.055));
    }
    42% {
        opacity: 0.64;
        filter:
            brightness(1.04)
            drop-shadow(0 0 10px rgba(71, 201, 255, 0.18))
            drop-shadow(0 0 24px rgba(124, 100, 226, 0.12));
    }
    58% {
        opacity: 0.52;
        filter:
            brightness(1)
            drop-shadow(0 0 9px rgba(71, 201, 255, 0.15))
            drop-shadow(0 0 20px rgba(124, 100, 226, 0.09));
    }
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    > .fantasy-workbench-outer-frame {
    animation-play-state: paused !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready,
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench {
        --fantasy-outer-frame-duration: 8.4s;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench-outer-frame {
        opacity: 0.34;
        filter:
            brightness(0.94)
            drop-shadow(0 0 6px rgba(71, 201, 255, 0.1))
            drop-shadow(0 0 12px rgba(124, 100, 226, 0.05));
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench-outer-frame::after {
        opacity: 0.78;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench-outer-frame {
        animation: none !important;
        opacity: 0.48;
        filter: none;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        > .fantasy-workbench-outer-frame::after {
        opacity: 0.46;
    }
}

/* codex: life-forge-outer-frame-lifecycle-final */
/* Keep the final saturated visual cascade from re-enabling SVG motion while
   the workbench is hidden or the page is backgrounded. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-page-hidden
    :is(
        .fantasy-border-beam-trail,
        .fantasy-border-beam-core,
        .fantasy-border-beam-head
    ) {
    animation-play-state: paused !important;
}

/* codex: chat-cyan-accent-r23 */
/* Keep the chat welcome surface magenta-led, then add a restrained cyan
   edge so the central workspace reads as cyberpunk glass instead of a flat
   violet block. */
body:has(#view-chat.view.active) {
    --chat-accent-cyan: #49eaff;
    --chat-accent-cyan-soft: #a9f7ff;
}

body:has(#view-chat.view.active) #welcome-screen {
    background:
        linear-gradient(145deg, rgba(18, 6, 39, .95), rgba(7, 5, 25, .96) 62%, rgba(27, 6, 42, .93)) padding-box,
        linear-gradient(
            118deg,
            rgba(73, 234, 255, .86),
            rgba(58, 183, 255, .42) 18%,
            rgba(155, 77, 255, .82) 55%,
            rgba(255, 47, 166, .84)
        ) border-box !important;
    box-shadow:
        inset 0 0 24px rgba(73, 234, 255, .06),
        inset 0 0 32px rgba(155, 77, 255, .08),
        0 0 14px rgba(73, 234, 255, .11),
        0 0 18px rgba(255, 47, 166, .12),
        0 20px 50px rgba(0, 0, 0, .38) !important;
}

body:has(#view-chat.view.active) #welcome-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 1px solid rgba(169, 247, 255, .72);
    border-left: 1px solid rgba(73, 234, 255, .24);
    border-radius: inherit;
    pointer-events: none;
    opacity: .72;
    box-shadow: inset 0 1px 0 rgba(169, 247, 255, .08);
}

body:has(#view-chat.view.active) .welcome-avatar {
    box-shadow:
        0 0 0 2px rgba(73, 234, 255, .9),
        0 0 10px rgba(73, 234, 255, .28),
        0 0 14px rgba(255, 47, 166, .34),
        0 0 28px rgba(155, 77, 255, .24) !important;
}

body:has(#view-chat.view.active) .example-card {
    background:
        repeating-linear-gradient(90deg, transparent 0 27px, rgba(73, 234, 255, .024) 27px 28px),
        linear-gradient(140deg, rgba(31, 8, 53, .97), rgba(8, 7, 28, .98)) padding-box,
        linear-gradient(
            108deg,
            rgba(73, 234, 255, .78),
            rgba(58, 183, 255, .34) 20%,
            var(--chat-shell-violet) 54%,
            var(--chat-shell-pink)
        ) border-box !important;
    box-shadow:
        inset 0 0 20px rgba(73, 234, 255, .045),
        inset 0 0 26px rgba(155, 77, 255, .07),
        0 0 10px rgba(73, 234, 255, .09),
        0 0 12px rgba(255, 47, 166, .12),
        0 14px 30px rgba(0, 0, 0, .3) !important;
}

body:has(#view-chat.view.active) .example-card::before {
    background: linear-gradient(
        90deg,
        var(--chat-accent-cyan),
        rgba(73, 234, 255, .52) 34%,
        var(--chat-shell-violet) 70%,
        transparent
    ) !important;
    box-shadow:
        0 0 9px rgba(73, 234, 255, .48),
        0 0 12px rgba(255, 47, 166, .3) !important;
}

body:has(#view-chat.view.active) .example-card::after {
    border-right-color: var(--chat-accent-cyan) !important;
    border-bottom-color: var(--chat-shell-pink) !important;
    filter:
        drop-shadow(0 0 5px rgba(73, 234, 255, .5))
        drop-shadow(0 0 7px rgba(255, 47, 166, .38)) !important;
}

body:has(#view-chat.view.active) .example-card:nth-child(2) {
    background:
        repeating-linear-gradient(90deg, transparent 0 27px, rgba(73, 234, 255, .018) 27px 28px),
        linear-gradient(140deg, rgba(25, 10, 56, .97), rgba(8, 8, 31, .98)) padding-box,
        linear-gradient(
            108deg,
            var(--chat-shell-violet),
            var(--chat-shell-indigo) 42%,
            rgba(58, 183, 255, .54) 76%,
            var(--chat-shell-pink)
        ) border-box !important;
}

body:has(#view-chat.view.active) .example-card:nth-child(2)::before {
    background: linear-gradient(
        90deg,
        transparent,
        var(--chat-shell-violet) 38%,
        rgba(73, 234, 255, .78) 78%,
        var(--chat-shell-pink)
    ) !important;
    box-shadow:
        0 0 9px rgba(73, 234, 255, .36),
        0 0 12px rgba(155, 77, 255, .48) !important;
}

body:has(#view-chat.view.active) .example-card:hover {
    filter:
        drop-shadow(0 0 8px rgba(73, 234, 255, .2))
        drop-shadow(0 0 11px rgba(255, 47, 166, .22))
        drop-shadow(0 0 14px rgba(155, 77, 255, .16)) !important;
}

body:has(#view-chat.view.active) .example-card .rounded-2xl {
    border-color: rgba(73, 234, 255, .62) !important;
    color: var(--chat-accent-cyan-soft) !important;
    background:
        linear-gradient(135deg, rgba(73, 234, 255, .18), rgba(155, 77, 255, .2)) !important;
    box-shadow:
        inset 0 0 12px rgba(73, 234, 255, .08),
        0 0 8px rgba(73, 234, 255, .12) !important;
}

body:has(#view-chat.view.active) .example-card:nth-child(2) .rounded-2xl {
    border-color: rgba(112, 203, 255, .56) !important;
    color: #ccecff !important;
    background:
        linear-gradient(135deg, rgba(155, 77, 255, .2), rgba(58, 183, 255, .15)) !important;
}

body:has(#view-chat.view.active) #view-chat > .flex-shrink-0 {
    background:
        linear-gradient(180deg, rgba(20, 5, 37, .98), rgba(6, 4, 20, .99)) padding-box,
        linear-gradient(
            102deg,
            var(--chat-shell-pink),
            var(--chat-shell-violet) 42%,
            rgba(73, 234, 255, .68) 76%,
            var(--chat-shell-indigo)
        ) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(169, 247, 255, .12),
        inset 0 0 18px rgba(73, 234, 255, .045),
        inset 0 -15px 24px rgba(113, 30, 168, .1),
        0 0 11px rgba(73, 234, 255, .14),
        0 0 20px rgba(255, 47, 166, .2),
        0 16px 32px rgba(0, 0, 0, .44) !important;
}

body:has(#view-chat.view.active) #chat-input-shell {
    border-color: rgba(73, 234, 255, .48) !important;
    box-shadow:
        inset 0 0 18px rgba(73, 234, 255, .08),
        0 0 0 1px rgba(255, 47, 166, .1),
        0 0 11px rgba(73, 234, 255, .08),
        0 11px 31px rgba(0, 0, 0, .3) !important;
}

body:has(#view-chat.view.active) #chat-input-shell::before {
    background: linear-gradient(
        90deg,
        var(--chat-shell-pink),
        var(--chat-shell-violet) 46%,
        rgba(73, 234, 255, .82)
    ) !important;
    box-shadow: 0 0 9px rgba(73, 234, 255, .46) !important;
}

body:has(#view-chat.view.active) #chat-input {
    background:
        linear-gradient(105deg, rgba(23, 6, 42, .98), rgba(8, 6, 26, .99) 68%, rgba(8, 20, 42, .98)) padding-box,
        linear-gradient(
            105deg,
            var(--chat-shell-pink),
            var(--chat-shell-violet) 52%,
            rgba(73, 234, 255, .72)
        ) border-box !important;
    box-shadow:
        inset 0 0 14px rgba(73, 234, 255, .07),
        inset 0 0 16px rgba(155, 77, 255, .1),
        0 0 10px rgba(73, 234, 255, .1) !important;
}

body:has(#view-chat.view.active) #chat-input:focus {
    box-shadow:
        inset 0 0 18px rgba(73, 234, 255, .12),
        0 0 12px rgba(73, 234, 255, .2),
        0 0 16px rgba(255, 47, 166, .24),
        0 0 22px rgba(155, 77, 255, .12) !important;
}

body:has(#view-chat.view.active) #chat-input-actions button,
body:has(#view-chat.view.active) #mic-btn,
body:has(#view-chat.view.active) #send-btn {
    background:
        linear-gradient(135deg, rgba(43, 7, 61, .98), rgba(8, 17, 39, .98)) padding-box,
        linear-gradient(
            135deg,
            var(--chat-shell-pink),
            var(--chat-shell-violet) 54%,
            rgba(73, 234, 255, .68)
        ) border-box !important;
    color: #b8f5ff !important;
    box-shadow:
        inset 0 0 10px rgba(73, 234, 255, .055),
        inset 0 0 12px rgba(155, 77, 255, .08),
        0 0 8px rgba(73, 234, 255, .1),
        0 0 8px rgba(255, 47, 166, .12) !important;
}

body:has(#view-chat.view.active) #chat-input-actions button:hover,
body:has(#view-chat.view.active) #mic-btn:hover,
body:has(#view-chat.view.active) #send-btn:hover:not(:disabled) {
    background:
        linear-gradient(135deg, rgba(75, 11, 88, .99), rgba(8, 30, 55, .99)) padding-box,
        linear-gradient(
            135deg,
            var(--chat-shell-pink-soft),
            var(--chat-shell-pink) 40%,
            var(--chat-shell-violet) 66%,
            var(--chat-accent-cyan)
        ) border-box !important;
    box-shadow:
        inset 0 0 14px rgba(73, 234, 255, .1),
        inset 0 0 15px rgba(155, 77, 255, .13),
        0 0 10px rgba(73, 234, 255, .2),
        0 0 13px rgba(255, 47, 166, .22) !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    body:has(#view-chat.view.active) #welcome-screen,
    body:has(#view-chat.view.active) #view-chat > .flex-shrink-0 {
        box-shadow:
            inset 0 0 14px rgba(73, 234, 255, .045),
            inset 0 -12px 20px rgba(113, 30, 168, .08),
            0 0 10px rgba(73, 234, 255, .08),
            0 0 10px rgba(255, 47, 166, .08) !important;
    }

    body:has(#view-chat.view.active) #chat-input-shell {
        box-shadow:
            inset 0 0 14px rgba(73, 234, 255, .06),
            0 0 0 1px rgba(255, 47, 166, .08),
            0 0 8px rgba(73, 234, 255, .06),
            0 11px 24px rgba(0, 0, 0, .28) !important;
    }
}

/* codex: life-trace-crystal-outer-beam-v1 */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-planet-overview-crystal-beam {
    pointer-events: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-planet-overview-crystal-beam
    :is(
        .fantasy-planet-overview-crystal-beam-base,
        .fantasy-planet-overview-crystal-beam-trail,
        .fantasy-planet-overview-crystal-beam-core,
        .fantasy-planet-overview-crystal-beam-head
    ) {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-planet-overview-crystal-beam-base {
    stroke: rgba(55, 232, 255, 0.5);
    stroke-width: 0.92;
    opacity: 0.4;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
.fantasy-planet-overview-crystal-beam-trail {
    stroke: url(#fantasyPlanetOverviewCrystalBeamGradient);
    stroke-width: 4.6;
    stroke-dasharray: 46 54;
    opacity: 0.64;
    filter:
        blur(1.8px)
        drop-shadow(0 0 7px rgba(55, 232, 255, 0.7))
        drop-shadow(0 0 12px rgba(167, 103, 255, 0.38));
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
.fantasy-planet-overview-crystal-beam-core {
    stroke: url(#fantasyPlanetOverviewCrystalBeamGradient);
    stroke-width: 1.85;
    stroke-dasharray: 46 54;
    opacity: 0.98;
    filter:
        drop-shadow(0 0 3px rgba(55, 232, 255, 0.9))
        drop-shadow(0 0 7px rgba(255, 69, 214, 0.36));
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-planet-overview-crystal-beam-head {
    stroke: #f8ffff;
    stroke-width: 3;
    stroke-dasharray: 1.25 98.75;
    opacity: 1;
    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.98))
        drop-shadow(0 0 7px rgba(255, 69, 214, 0.74))
        drop-shadow(0 0 11px rgba(55, 232, 255, 0.58));
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-planet-overview-crystal-beam-secondary
    :is(
        .fantasy-planet-overview-crystal-beam-trail-secondary,
        .fantasy-planet-overview-crystal-beam-core-secondary,
        .fantasy-planet-overview-crystal-beam-head-secondary
    ) {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
.fantasy-planet-overview-crystal-beam-trail-secondary {
    stroke: url(#fantasyPlanetOverviewCrystalBeamGradient);
    stroke-width: 4.2;
    stroke-dasharray: 46 54;
    opacity: 0.58;
    filter:
        blur(1.8px)
        drop-shadow(0 0 6px rgba(55, 232, 255, 0.58))
        drop-shadow(0 0 10px rgba(255, 69, 214, 0.3));
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
.fantasy-planet-overview-crystal-beam-core-secondary {
    stroke: url(#fantasyPlanetOverviewCrystalBeamGradient);
    stroke-width: 1.7;
    stroke-dasharray: 46 54;
    opacity: 0.84;
    filter:
        drop-shadow(0 0 3px rgba(55, 232, 255, 0.78))
        drop-shadow(0 0 6px rgba(255, 69, 214, 0.3));
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-planet-overview-crystal-beam-head-secondary {
    stroke: #f8ffff;
    stroke-width: 2.4;
    stroke-dasharray: 1.4 98.6;
    opacity: 0.86;
    filter:
        drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 6px rgba(255, 69, 214, 0.62))
        drop-shadow(0 0 9px rgba(55, 232, 255, 0.5));
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-planet-overview.visible
    .fantasy-planet-overview-crystal-beam-secondary
    :is(
        .fantasy-planet-overview-crystal-beam-trail-secondary,
        .fantasy-planet-overview-crystal-beam-core-secondary,
    .fantasy-planet-overview-crystal-beam-head-secondary
    ) {
    animation: fantasyBorderBeamTrace 4.8s linear -3.3s infinite;
    will-change: stroke-dashoffset;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-planet-overview.visible
    .fantasy-planet-overview-crystal-beam
    :is(
        .fantasy-planet-overview-crystal-beam-trail,
        .fantasy-planet-overview-crystal-beam-core,
        .fantasy-planet-overview-crystal-beam-head
    ) {
    animation: fantasyBorderBeamTrace 4.8s linear -0.9s infinite;
    will-change: stroke-dashoffset;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-planet-overview:not(.visible)
    .fantasy-planet-overview-crystal-beam
    :is(
        .fantasy-planet-overview-crystal-beam-trail,
        .fantasy-planet-overview-crystal-beam-core,
        .fantasy-planet-overview-crystal-beam-head
    ),
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-page-hidden
    .fantasy-planet-overview
    .fantasy-planet-overview-crystal-beam
    :is(
        .fantasy-planet-overview-crystal-beam-trail,
        .fantasy-planet-overview-crystal-beam-core,
        .fantasy-planet-overview-crystal-beam-head
    ) {
    animation-play-state: paused !important;
    will-change: auto;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-planet-overview.visible
        .fantasy-planet-overview-crystal-beam
        :is(
            .fantasy-planet-overview-crystal-beam-trail,
            .fantasy-planet-overview-crystal-beam-core,
            .fantasy-planet-overview-crystal-beam-head
        ) {
        animation-duration: 5.4s;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-planet-overview-crystal-beam-trail {
        stroke-width: 3.7;
        opacity: 0.5;
        filter:
            blur(1.2px)
            drop-shadow(0 0 5px rgba(55, 232, 255, 0.5));
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-planet-overview.visible
        .fantasy-planet-overview-crystal-beam-secondary
        :is(
            .fantasy-planet-overview-crystal-beam-trail-secondary,
            .fantasy-planet-overview-crystal-beam-core-secondary,
            .fantasy-planet-overview-crystal-beam-head-secondary
        ) {
        animation-duration: 5.4s;
        animation-delay: -3.6s;
    }
}

@media (prefers-reduced-motion: reduce) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-planet-overview-crystal-beam
        :is(
            .fantasy-planet-overview-crystal-beam-trail,
            .fantasy-planet-overview-crystal-beam-core,
            .fantasy-planet-overview-crystal-beam-head
        ) {
        animation: none !important;
        opacity: 0;
        filter: none;
        will-change: auto;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-planet-overview-crystal-beam-base {
        opacity: 0.28;
    }
}