/* =====================================================================
   JianxiaoAgent Console Styles
   ===================================================================== */

/* Animations */
@keyframes pulseDot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* Generic Tooltip (via data-tooltip attribute) */
[data-tooltip] {
    position: relative;
}
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    background: #1e293b;
    color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 100;
}
[data-tooltip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 8px);
}
.dark [data-tooltip]::after {
    background: #334155;
    color: #f1f5f9;
}
[data-tooltip]:hover::after {
    opacity: 1;
}
[data-tooltip=""]:hover::after {
    display: none;
}

/* Sidebar */
.sidebar-item.active {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
}
.sidebar-item.active .item-icon { color: #4ABE6E; }

/* Session Panel */
.session-panel {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fafafa;
    border-right: 1px solid #e5e7eb;
    height: 100vh;
    overflow: hidden;
    transition: width 0.2s ease;
}
.dark .session-panel {
    background: #111111;
    border-right-color: rgba(255, 255, 255, 0.08);
}
.session-panel.hidden { display: none; }

.active-life-summary {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    display: flex;
    width: min(420px, 34vw);
    min-width: 0;
    height: 38px;
    padding: 0 14px;
    align-items: center;
    gap: 10px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.82);
    color: #e2e8f0;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.active-life-summary-signal {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #22d3ee;
}
.active-life-summary-copy {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 9px;
}
.active-life-summary-label {
    flex: 0 0 auto;
    color: #94a3b8;
    font-size: 10px;
}
#active-life-name {
    min-width: 0;
    overflow: hidden;
    color: #f8fafc;
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.session-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.dark .session-panel-header { border-bottom-color: rgba(255, 255, 255, 0.08); }
.session-panel-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}
.dark .session-panel-title { color: #d1d5db; }
.session-panel-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    background: none;
    color: #9ca3af;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-size: 12px;
}
.session-panel-close:hover {
    background: #f3f4f6;
    color: #374151;
}
.dark .session-panel-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e5e5e5;
}
.session-panel-new {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 12px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px dashed #d1d5db;
    background: none;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}
.session-panel-new:hover {
    border-color: #9ca3af;
    color: #374151;
    background: #f9fafb;
}
.dark .session-panel-new {
    border-color: rgba(255, 255, 255, 0.12);
    color: #9ca3af;
}
.dark .session-panel-new:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: #e5e5e5;
    background: rgba(255, 255, 255, 0.04);
}

/* Session List */
.session-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px;
    scrollbar-width: none;
}
.session-list:hover { scrollbar-width: thin; }
.session-list::-webkit-scrollbar { width: 4px; background: transparent; }
.session-list::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
.session-list:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); }
.dark .session-list:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
.session-group-label {
    padding: 10px 8px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
}
.dark .session-group-label { color: #525252; }
.session-empty {
    padding: 20px 12px;
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
}
.session-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin: 1px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    color: #6b7280;
    font-size: 13px;
    position: relative;
}
.dark .session-item { color: #a3a3a3; }
.session-item:hover {
    background: #f3f4f6;
    color: #111827;
}
.dark .session-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e5e5e5;
}
.session-item.active {
    background: #e5e7eb;
    color: #111827;
}
.dark .session-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.session-icon {
    flex-shrink: 0;
    font-size: 11px;
    color: #9ca3af;
    width: 16px;
    text-align: center;
}
.dark .session-icon { color: #525252; }
.session-item.active .session-icon { color: #4ABE6E; }
.session-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.session-delete {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 10px;
    color: #9ca3af;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}
.session-item:hover .session-delete { opacity: 1; }
.session-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
.dark .session-delete:hover { background: rgba(239, 68, 68, 0.15); }

/* Context Divider */
.context-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: #9ca3af;
}
.context-divider::before, .context-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #d1d5db, transparent);
}
.dark .context-divider::before, .dark .context-divider::after {
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.12), transparent);
}
.context-divider span {
    font-size: 12px;
    white-space: nowrap;
    color: #9ca3af;
}

/* Confirm Modal */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.confirm-overlay.visible { opacity: 1; }
.confirm-modal {
    background: #fff;
    border-radius: 14px;
    width: 380px;
    max-width: 90vw;
    padding: 28px 24px 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
    transform: scale(0.92);
    transition: transform 0.2s ease;
}
.confirm-overlay.visible .confirm-modal { transform: scale(1); }
.dark .confirm-modal {
    background: #1e1e1e;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.confirm-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}
.dark .confirm-title { color: #e5e7eb; }
.confirm-message {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 24px;
}
.dark .confirm-message { color: #9ca3af; }
.confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.confirm-btn {
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}
.confirm-btn-cancel {
    background: #f3f4f6;
    color: #374151;
}
.confirm-btn-cancel:hover { background: #e5e7eb; }
.dark .confirm-btn-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: #d1d5db;
}
.dark .confirm-btn-cancel:hover { background: rgba(255, 255, 255, 0.14); }
.confirm-btn-ok {
    background: #ef4444;
    color: #fff;
}
.confirm-btn-ok:hover { background: #dc2626; }

/* Session panel overlay (mobile only, click to close) */
.session-panel-overlay {
    display: none;
}
@media (max-width: 768px) {
    .active-life-summary {
        width: min(150px, 34vw);
        height: 32px;
        padding: 0 8px;
        gap: 6px;
    }
    .active-life-summary-label {
        display: none;
    }
    #active-life-name {
        font-size: 11px;
    }
    .session-panel-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 44;
        background: rgba(0, 0, 0, 0.3);
    }
    .session-panel-overlay.hidden {
        display: none;
    }
}

/* Mobile: session panel as overlay */
@media (max-width: 768px) {
    .session-panel {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 45;
        width: 220px;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }
    .dark .session-panel {
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    }
}

/* Menu Groups */
.menu-group-items { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; }
.menu-group.open .menu-group-items { max-height: 2000px; transition: max-height 0.35s ease-in; }
.menu-group .chevron { transition: transform 0.25s ease; }
.menu-group.open .chevron { transform: rotate(90deg); }

/* View Switching */
.view { display: none; height: 100%; }
.view.active { display: flex; flex-direction: column; }

/* Markdown Content */
.msg-content p { margin: 0.5em 0; line-height: 1.7; }
.msg-content p:first-child { margin-top: 0; }
.msg-content p:last-child { margin-bottom: 0; }
.msg-content h1, .msg-content h2, .msg-content h3,
.msg-content h4, .msg-content h5, .msg-content h6 {
    margin-top: 1.2em; margin-bottom: 0.6em; font-weight: 600; line-height: 1.3;
}
.msg-content h1 { font-size: 1.4em; }
.msg-content h2 { font-size: 1.25em; }
.msg-content h3 { font-size: 1.1em; }
.msg-content ul { margin: 0.5em 0; padding-left: 1.8em; list-style: disc; }
.msg-content ol { margin: 0.5em 0; padding-left: 1.8em; list-style: decimal; }
.msg-content li { margin: 0.25em 0; }
.msg-content pre {
    border-radius: 8px; overflow-x: auto; margin: 0.8em 0;
    background: #f1f5f9; padding: 1em;
}
.dark .msg-content pre { background: #111111; }
.msg-content code {
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.875em;
}
.msg-content :not(pre) > code {
    background: rgba(74, 190, 110, 0.1); color: #1C6B3B;
    padding: 2px 6px; border-radius: 4px;
}
.dark .msg-content :not(pre) > code {
    background: rgba(74, 190, 110, 0.15); color: #74E9A4;
}
.msg-content pre code { background: transparent; padding: 0; color: inherit; }
.msg-content blockquote {
    border-left: 3px solid #4ABE6E; padding: 0.5em 1em;
    margin: 0.8em 0; background: rgba(74, 190, 110, 0.05); border-radius: 0 6px 6px 0;
}
.dark .msg-content blockquote { background: rgba(74, 190, 110, 0.08); }
.msg-content table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
.msg-content th, .msg-content td {
    border: 1px solid #e2e8f0; padding: 8px 12px; text-align: left;
}
.dark .msg-content th, .dark .msg-content td { border-color: rgba(255,255,255,0.1); }
.msg-content th { background: #f1f5f9; font-weight: 600; }
.dark .msg-content th { background: #111111; }
.msg-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 0.5em 0; }
.msg-content a { color: #35A85B; text-decoration: underline; }
.msg-content a:hover { color: #228547; }

.image-reference-gallery {
    margin: 12px 0 4px;
    width: min(100%, 760px);
}
.image-reference-heading {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    font-weight: 600;
}
.image-reference-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.image-reference-grid[data-count="1"] {
    grid-template-columns: minmax(0, 520px);
}
.image-reference-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-color, #dbe4ee);
    border-radius: 8px;
    background: var(--bg-secondary, rgba(248, 250, 252, 0.96));
}
.image-reference-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(100, 116, 139, 0.12);
}
.image-reference-media img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    cursor: zoom-in;
}
.image-reference-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    color: var(--text-secondary, #64748b);
    font-size: 12px;
}
.image-load-failed .image-reference-media img {
    display: none;
}
.image-load-failed .image-reference-fallback {
    display: flex;
}
.image-reference-body {
    display: flex;
    min-width: 0;
    padding: 9px 10px 10px;
    flex-direction: column;
    gap: 4px;
}
.image-reference-title,
.image-reference-description {
    display: block;
    overflow-wrap: anywhere;
}
.image-reference-title {
    color: var(--text-primary, #1e293b);
    font-size: 13px;
    line-height: 1.35;
}
.image-reference-description {
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    line-height: 1.4;
}
.image-reference-source {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: var(--primary-color, #35a85b);
    font-size: 12px;
    text-decoration: none;
}
.image-reference-source:hover {
    text-decoration: underline;
}
.dark .image-reference-card {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.78);
}
.dark .image-reference-title {
    color: #e2e8f0;
}

@media (max-width: 360px) {
    .image-reference-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.meme-sticker-row {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 2px;
}
.meme-sticker {
    display: block;
    width: auto;
    max-width: 160px;
    max-height: 160px;
    height: auto;
    margin: 0;
    border: 0;
    border-radius: 6px;
    object-fit: contain;
    cursor: zoom-in;
    background: transparent;
}
@media (max-width: 640px) {
    .meme-sticker {
        max-width: 136px;
        max-height: 136px;
    }
}

/* Overrides for user bubble (white text on green bg) */
.user-bubble.msg-content a { color: #ffffff !important; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.6); }
.user-bubble.msg-content a:hover { color: #e0f5e8 !important; text-decoration-color: #e0f5e8; }
.user-bubble.msg-content :not(pre) > code { background: rgba(255,255,255,0.2); color: #ffffff; }
.msg-content hr { border: none; height: 1px; background: #e2e8f0; margin: 1.2em 0; }
.dark .msg-content hr { background: rgba(255,255,255,0.1); }

/* SSE Streaming cursor */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.sse-streaming::after {
    content: '▋';
    display: inline-block;
    margin-left: 2px;
    color: #4ABE6E;
    animation: blink 0.9s step-end infinite;
    font-size: 0.85em;
    vertical-align: middle;
}

/* Agent steps (thinking summaries + tool indicators) */
.agent-steps:empty { display: none; }
.agent-steps:not(:empty) {
    margin-bottom: 0.625rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}
.dark .agent-steps:not(:empty) { border-bottom-color: rgba(255, 255, 255, 0.08); }

.agent-step {
    font-size: 0.75rem;
    line-height: 1.4;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}
.agent-step:last-child { margin-bottom: 0; }

/* Thinking step - collapsible */
.agent-thinking-step .thinking-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    user-select: none;
}
.agent-thinking-step .thinking-header:hover { color: #64748b; }
.dark .agent-thinking-step .thinking-header:hover { color: #cbd5e1; }
.agent-thinking-step .thinking-header i:first-child { font-size: 0.625rem; margin-top: 1px; }
.agent-thinking-step .thinking-chevron {
    font-size: 0.5rem;
    margin-left: auto;
    transition: transform 0.2s ease;
    opacity: 0.5;
}
.agent-thinking-step.expanded .thinking-chevron { transform: rotate(90deg); }
.agent-thinking-step .thinking-full {
    display: none;
    margin-top: 0.375rem;
    margin-left: 1rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    font-size: 0.75rem;
    line-height: 1.5;
    color: #94a3b8;
    max-height: 300px;
    overflow-y: auto;
}
.dark .agent-thinking-step .thinking-full {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.04);
}
.agent-thinking-step.expanded .thinking-full { display: block; }
.agent-thinking-step .thinking-full p { margin: 0.25em 0; }
.agent-thinking-step .thinking-full p:first-child { margin-top: 0; }
.agent-thinking-step .thinking-full p:last-child { margin-bottom: 0; }
.agent-thinking-step .thinking-duration {
    font-size: 0.625rem;
    color: #b0b8c4;
    margin-bottom: 0.375rem;
}
/* Streaming reasoning: render as plain pre to avoid expensive markdown
   re-parsing on every chunk. Wrap long lines so the bubble width is
   respected and use the same font size/color as the rendered version. */
.agent-thinking-step .thinking-stream-pre {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    color: inherit;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* Content step - real text output frozen before tool calls */
.agent-content-step {
    font-size: 0.875rem;
    line-height: 1.6;
    color: inherit;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.dark .agent-content-step { border-bottom-color: rgba(255, 255, 255, 0.06); }
.agent-content-step .agent-content-body p { margin: 0.25em 0; }
.agent-content-step .agent-content-body p:first-child { margin-top: 0; }
.agent-content-step .agent-content-body p:last-child { margin-bottom: 0; }

/* Tool step - collapsible */
.agent-tool-step .tool-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    user-select: none;
    padding: 1px 0;
    border-radius: 4px;
}
.agent-tool-step .tool-header:hover { color: #64748b; }
.dark .agent-tool-step .tool-header:hover { color: #cbd5e1; }
.agent-tool-step .tool-icon { font-size: 0.625rem; }
.agent-tool-step .tool-chevron {
    font-size: 0.5rem;
    margin-left: auto;
    transition: transform 0.2s ease;
    opacity: 0.5;
}
.agent-tool-step.expanded .tool-chevron { transform: rotate(90deg); }
.agent-tool-step .tool-time {
    font-size: 0.65rem;
    opacity: 0.6;
    margin-left: 0.25rem;
}

/* Tool detail panel */
.agent-tool-step .tool-detail {
    display: none;
    margin-top: 0.375rem;
    margin-left: 1rem;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.dark .agent-tool-step .tool-detail {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.04);
}
.agent-tool-step.expanded .tool-detail { display: block; }
.tool-detail-section { margin-bottom: 0.375rem; }
.tool-detail-section:last-child { margin-bottom: 0; }
.tool-detail-label {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-bottom: 0.125rem;
}
.tool-detail-content {
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.7rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
    margin: 0;
    padding: 0.25rem 0;
    background: transparent;
    color: inherit;
}
.tool-error-text { color: #f87171; }

/* Log level highlighting */
.log-line { display: block; }
.log-line-debug    { color: #94a3b8; }
.log-line-info     { background-color: rgba(59, 130, 246, 0.08); }
.log-line-warning  { background-color: rgba(234, 179, 8, 0.15); color: #fde68a; }
.log-line-error    { background-color: rgba(239, 68, 68, 0.15); color: #fca5a5; }
.log-line-critical { background-color: rgba(239, 68, 68, 0.35); color: #ff4444; font-weight: bold;  }

/* Tool failed state */
.agent-tool-step.tool-failed .tool-name { color: #f87171; }

/* Config form controls */
#view-config input[type="text"],
#view-config input[type="number"],
#view-config input[type="password"] {
    height: 40px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#view-config input:focus {
    border-color: #4ABE6E;
    box-shadow: 0 0 0 3px rgba(74, 190, 110, 0.12);
}
#view-config input[type="text"]:hover,
#view-config input[type="number"]:hover,
#view-config input[type="password"]:hover {
    border-color: #94a3b8;
}
.dark #view-config input[type="text"]:hover,
.dark #view-config input[type="number"]:hover,
.dark #view-config input[type="password"]:hover {
    border-color: #64748b;
}

/* Custom dropdown */
.cfg-dropdown {
    position: relative;
    outline: none;
}
.cfg-dropdown-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.875rem;
    color: #1e293b;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
}
.dark .cfg-dropdown-selected {
    border-color: #475569;
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}
.cfg-dropdown-selected:hover { border-color: #94a3b8; }
.dark .cfg-dropdown-selected:hover { border-color: #64748b; }
.cfg-dropdown.open .cfg-dropdown-selected,
.cfg-dropdown:focus .cfg-dropdown-selected {
    border-color: #4ABE6E;
    box-shadow: 0 0 0 3px rgba(74, 190, 110, 0.12);
}
.cfg-dropdown-arrow {
    font-size: 0.625rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 0.5rem;
}
.cfg-dropdown.open .cfg-dropdown-arrow { transform: rotate(180deg); }
.cfg-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 10px -5px rgba(0, 0, 0, 0.04);
    padding: 4px;
}
.dark .cfg-dropdown-menu {
    border-color: #334155;
    background: #1e1e1e;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4);
}
.cfg-dropdown.open .cfg-dropdown-menu { display: block; }
.cfg-dropdown-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #334155;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dark .cfg-dropdown-item { color: #cbd5e1; }
.cfg-dropdown-item:hover { background: #f1f5f9; }
.dark .cfg-dropdown-item:hover { background: rgba(255, 255, 255, 0.08); }
.cfg-dropdown-item.active {
    background: rgba(74, 190, 110, 0.1);
    color: #228547;
    font-weight: 500;
}
.dark .cfg-dropdown-item.active {
    background: rgba(74, 190, 110, 0.15);
    color: #74E9A4;
}
/* When an item carries a hint (e.g. brand alias next to a technical model
   id), label/hint are split into two spans so the hint sits on the right in
   a dim, smaller weight. Without a hint the row stays a plain text node and
   uses the default ellipsis behaviour, so no layout regressions for old call
   sites. */
.cfg-dropdown-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cfg-dropdown-hint {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 12px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 400;
}
.dark .cfg-dropdown-hint {
    color: #64748b;
}
.cfg-dropdown-item.active .cfg-dropdown-hint {
    /* Tint the hint toward the brand colour on the active row so it doesn't
       fight with the highlighted label tone. */
    color: rgba(34, 133, 71, 0.65);
}
.dark .cfg-dropdown-item.active .cfg-dropdown-hint {
    color: rgba(116, 233, 164, 0.6);
}
/* The active row gets a trailing brand-green checkmark via a Font Awesome
   pseudo-element so every dropdown (chat / vision / image / asr / tts / etc.)
   surfaces "this is what's currently selected" without per-call JS plumbing.
   When a hint is present, the ✓ sits to its right with a small gap; without
   a hint, margin-left:auto pushes the ✓ flush against the right edge. */
.cfg-dropdown-item.active::after {
    content: '\f00c';                  /* FontAwesome check glyph */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', 'FontAwesome';
    font-weight: 900;
    margin-left: auto;
    padding-left: 12px;
    color: #4abe6e;
    font-size: 11px;
    flex-shrink: 0;
}
.cfg-dropdown-item.active:has(.cfg-dropdown-hint)::after {
    /* When hint occupies the auto-margin slot, the ✓ no longer benefits
       from `margin-left: auto`; replace it with a small fixed gap so the
       ✓ trails the hint cleanly. */
    margin-left: 0;
    padding-left: 10px;
}

/* API Key masking via CSS (avoids browser password prompts) */
.cfg-key-masked {
    -webkit-text-security: disc;
    text-security: disc;
}

/* Provider logo image — vendors flagged as `provider-logo-invert-dark`
   ship a black wordmark that disappears on the dark canvas; we invert their
   luminance only in dark mode so the brand stays recognizable without
   touching multi-color marks like Google/MiniMax. */
.provider-logo-img {
    object-fit: contain;
    object-position: center;
}
.dark .provider-logo-invert-dark {
    filter: invert(1) brightness(1.15);
}

/* Models page — provider dropdown rows.
   Configured rows look like ordinary picker entries; the .active row's
   trailing brand-green ✓ already announces "this is what's selected"
   (handled globally by .cfg-dropdown-item.active::after above).
   Unconfigured rows are visually subdued and carry a trailing gear icon
   as a "click to set up" affordance. */
.cap-provider-label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cap-provider-gear {
    margin-left: auto;
    padding-left: 12px;
    color: #94a3b8;
    font-size: 11px;
    flex-shrink: 0;
}
.cap-provider-item.cap-provider-unconfigured {
    color: #94a3b8;
}
.dark .cap-provider-item.cap-provider-unconfigured {
    color: #64748b;
}
.cap-provider-item.cap-provider-unconfigured:hover {
    color: #475569;
}
.dark .cap-provider-item.cap-provider-unconfigured:hover {
    color: #cbd5e1;
}
.cap-provider-item.cap-provider-unconfigured:hover .cap-provider-gear {
    color: #475569;
}
.dark .cap-provider-item.cap-provider-unconfigured:hover .cap-provider-gear {
    color: #cbd5e1;
}
/* If the active row ever lands on an unconfigured vendor (defensive — the
   click handler normally diverts to the modal), suppress the global ✓ so
   the gear remains the sole trailing icon and the row keeps reading as
   "needs setup" rather than "already selected". */
.cap-provider-item.cap-provider-unconfigured.active::after {
    content: none;
}

/* "Add vendor" modal picker — each configured row carries a static
   brand-green ✓ via decorateVendorModalPicker so users can see what's set
   up at a glance. The active row's global ✓ is suppressed here to avoid
   showing two checks side by side on configured + selected rows. */
.vendor-picker-item.active::after {
    content: none;
}
.vendor-picker-configured-mark {
    margin-left: auto;
    padding-left: 12px;
    color: #4abe6e;
    font-size: 11px;
    flex-shrink: 0;
}

/* Chat Input */
#chat-input {
    resize: none; height: 38px; max-height: 180px;
    overflow-y: hidden;
    transition: border-color 0.2s ease;
}

.chat-input-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.chat-skill-chip-list {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.chat-skill-chip-list.hidden {
    display: none;
}
.chat-skill-chip {
    display: inline-flex;
    max-width: min(100%, 430px);
    height: 30px;
    align-items: center;
    gap: 7px;
    padding: 0 5px 0 9px;
    color: #0f766e;
    border: 1px solid rgba(13, 148, 136, 0.28);
    border-radius: 7px;
    background: rgba(20, 184, 166, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    font-size: 12px;
    line-height: 1;
}
.chat-skill-chip > i {
    flex: 0 0 auto;
    color: #0d9488;
    font-size: 11px;
}
.chat-skill-chip-name {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chat-skill-chip-source {
    flex: 0 0 auto;
    color: #64748b;
    font-size: 10px;
    white-space: nowrap;
}
.chat-skill-chip-remove {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #64748b;
    border: 0;
    border-radius: 5px;
    background: transparent;
    cursor: pointer;
}
.chat-skill-chip-remove:hover,
.chat-skill-chip-remove:focus-visible {
    color: #0f172a;
    background: rgba(15, 118, 110, 0.12);
    outline: none;
}
.chat-command-chip {
    border-color: rgba(8, 145, 178, 0.32);
    background: rgba(14, 165, 233, 0.08);
}
.chat-command-chip > i {
    color: #0284c7;
}
.dark .chat-skill-chip {
    color: #67e8f9;
    border-color: rgba(34, 211, 238, 0.3);
    background:
        linear-gradient(90deg, rgba(6, 182, 212, 0.13), rgba(15, 23, 42, 0.76));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 16px rgba(34, 211, 238, 0.05);
}
.dark .chat-skill-chip > i {
    color: #67e8f9;
}
.dark .chat-skill-chip-name {
    color: #e6fbff;
}
.dark .chat-skill-chip-source {
    color: #71839a;
}
.dark .chat-skill-chip-remove {
    color: #71839a;
}
.dark .chat-skill-chip-remove:hover,
.dark .chat-skill-chip-remove:focus-visible {
    color: #e6fbff;
    background: rgba(34, 211, 238, 0.12);
}
.dark .chat-command-chip {
    border-color: rgba(250, 54, 216, 0.34);
    background:
        linear-gradient(90deg, rgba(250, 54, 216, 0.12), rgba(15, 23, 42, 0.76));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 0 16px rgba(250, 54, 216, 0.05);
}
.dark .chat-command-chip > i {
    color: #f58be4;
}

/* Attachment Preview Bar */
.attachment-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
}
.attachment-preview.hidden { display: none; }

.attach-menu {
    position: absolute;
    left: 72px;
    bottom: calc(100% + 6px);
    min-width: 148px;
    padding: 6px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.1), 0 2px 8px -2px rgba(0, 0, 0, 0.04);
    z-index: 55;
    animation: slashMenuIn 0.15s ease-out;
}
.attach-menu.hidden { display: none; }
.attach-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #334155;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    text-align: left;
}
.attach-menu-item:hover {
    background: #EDFDF3;
    color: #228547;
}
.attach-menu-item i {
    width: 14px;
    text-align: center;
    color: #64748b;
}
.attach-menu-item:hover i { color: inherit; }

.att-thumb {
    position: relative;
    width: 64px; height: 64px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    flex-shrink: 0;
}
.dark .att-thumb { border-color: rgba(255,255,255,0.1); }
.att-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}

.att-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 28px 6px 10px;
    border-radius: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 12px;
    color: #475569;
    max-width: 180px;
}
.dark .att-chip { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #94a3b8; }
.att-uploading { opacity: 0.6; pointer-events: none; }
.att-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.att-remove {
    position: absolute;
    top: -4px; right: -4px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    border: none;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.att-thumb:hover .att-remove,
.att-chip:hover .att-remove { opacity: 1; }

/* Drag-over highlight */
.drag-over {
    background: rgba(74, 190, 110, 0.08) !important;
    border-color: #4ABE6E !important;
}

/* User message attachments */
.user-msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.user-msg-image {
    max-width: 200px;
    max-height: 160px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
}
.user-msg-image:hover { opacity: 0.9; }
.user-msg-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.15);
    font-size: 12px;
}

/* Placeholder Cards */
.placeholder-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.placeholder-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Slash Command Menu */
.slash-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    display: flex;
    max-height: min(430px, 54vh);
    flex-direction: column;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    box-shadow: 0 22px 55px -22px rgba(15, 23, 42, 0.36), 0 8px 18px -10px rgba(15, 23, 42, 0.18);
    z-index: 60;
    animation: slashMenuIn 0.14s ease-out;
    backdrop-filter: blur(18px);
}
.slash-menu.hidden { display: none; }

@keyframes slashMenuIn {
    from { opacity: 0; transform: translateY(5px) scale(0.995); }
    to   { opacity: 1; transform: translateY(0); }
}

.slash-menu-header {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 12px;
    color: #64748b;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.slash-menu-heading {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}
.slash-menu-heading small {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 500;
}
.slash-menu-mark {
    display: inline-flex;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    color: #0f766e;
    border: 1px solid rgba(13, 148, 136, 0.3);
    border-radius: 6px;
    background: rgba(20, 184, 166, 0.09);
    font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.slash-menu-shortcuts {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #94a3b8;
    font-size: 10px;
    white-space: nowrap;
}
.slash-menu-shortcuts kbd {
    min-width: 21px;
    padding: 2px 5px;
    color: #64748b;
    border: 1px solid #cbd5e1;
    border-bottom-color: #94a3b8;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
    font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: center;
}
.slash-menu-results {
    min-height: 0;
    padding: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.slash-menu-item {
    width: 100%;
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.slash-menu-item:hover,
.slash-menu-item.active {
    border-color: rgba(13, 148, 136, 0.22);
    background: rgba(20, 184, 166, 0.08);
}
.slash-menu-icon {
    display: inline-flex;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: center;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fafc;
    font-size: 13px;
}
.slash-menu-item.active .slash-menu-icon {
    color: #0f766e;
    border-color: rgba(13, 148, 136, 0.28);
    background: rgba(20, 184, 166, 0.1);
}
.slash-menu-item.warning .slash-menu-icon {
    color: #b45309;
}
.slash-menu-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 3px;
}
.slash-menu-command-line {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 10px;
}
.slash-menu-item .cmd {
    flex: 0 1 auto;
    overflow: hidden;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-size: 12px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slash-menu-item.active .cmd {
    color: #0f766e;
}
.slash-menu-title {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slash-menu-item .desc {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slash-menu-meta {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
}
.slash-menu-category {
    padding: 3px 7px;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #f8fafc;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}
.slash-skill-item {
    min-height: 60px;
}
.slash-skill-mark {
    font-size: 11px;
}
.slash-skill-icon {
    color: #475569;
    font-size: 14px;
}
.slash-skill-name {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slash-skill-key {
    min-width: 0;
    overflow: hidden;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slash-skill-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #64748b;
    font-size: 10px;
    line-height: 1;
    white-space: nowrap;
}
.slash-skill-status i {
    font-size: 5px;
}
.slash-skill-status.is-enabled i {
    color: #10b981;
}
.slash-skill-status.is-disabled i {
    color: #94a3b8;
}
.slash-menu-item.active .slash-skill-name {
    color: #0f766e;
}
.slash-menu-loading .slash-menu-empty-icon {
    color: #0f766e;
}
.slash-menu-error .slash-menu-empty-icon {
    color: #b45309;
}
.slash-menu-enter {
    width: 18px;
    color: #94a3b8;
    font-size: 14px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.slash-menu-item.active .slash-menu-enter {
    opacity: 1;
}
.slash-menu-empty {
    display: flex;
    min-height: 112px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    color: #64748b;
    text-align: left;
}
.slash-menu-empty-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #f8fafc;
}
.slash-menu-empty strong,
.slash-menu-empty small {
    display: block;
}
.slash-menu-empty strong {
    color: #334155;
    font-size: 13px;
    font-weight: 650;
}
.slash-menu-empty small {
    margin-top: 4px;
    color: #94a3b8;
    font-size: 11px;
}
.slash-menu-footer {
    display: flex;
    min-height: 30px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 12px;
    color: #94a3b8;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
    font-size: 10px;
}
.slash-menu-footer span:last-child {
    max-width: 42%;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dark mode */
.dark .slash-menu {
    background: rgba(5, 12, 22, 0.97);
    border-color: rgba(34, 211, 238, 0.24);
    box-shadow:
        0 24px 64px -24px rgba(0, 0, 0, 0.9),
        0 0 24px rgba(6, 182, 212, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.dark .slash-menu-header {
    color: #64748b;
    border-bottom-color: rgba(34, 211, 238, 0.12);
    background: rgba(8, 18, 31, 0.95);
}
.dark .slash-menu-heading {
    color: #dbeafe;
}
.dark .slash-menu-mark {
    color: #67e8f9;
    border-color: rgba(34, 211, 238, 0.34);
    background: rgba(6, 182, 212, 0.12);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.09);
}
.dark .slash-menu-shortcuts kbd {
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.28);
    border-bottom-color: rgba(148, 163, 184, 0.48);
    background: rgba(15, 23, 42, 0.86);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
}
.dark .slash-menu-results {
    scrollbar-color: rgba(34, 211, 238, 0.26) transparent;
}
.dark .slash-menu-item:hover,
.dark .slash-menu-item.active {
    border-color: rgba(34, 211, 238, 0.24);
    background:
        linear-gradient(90deg, rgba(6, 182, 212, 0.13), rgba(217, 70, 239, 0.045) 72%, transparent);
}
.dark .slash-menu-icon {
    color: #7f8ea3;
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.72);
}
.dark .slash-menu-item.active .slash-menu-icon {
    color: #67e8f9;
    border-color: rgba(34, 211, 238, 0.32);
    background: rgba(6, 182, 212, 0.13);
    box-shadow: 0 0 14px rgba(34, 211, 238, 0.08);
}
.dark .slash-menu-item.warning .slash-menu-icon {
    color: #fbbf24;
}
.dark .slash-menu-item .cmd {
    color: #e2e8f0;
}
.dark .slash-menu-item.active .cmd {
    color: #67e8f9;
}
.dark .slash-menu-item .desc {
    color: #6f839c;
}
.dark .slash-menu-title {
    color: #94a3b8;
}
.dark .slash-menu-category {
    color: #7f91a9;
    border-color: rgba(148, 163, 184, 0.16);
    background: rgba(15, 23, 42, 0.62);
}
.dark .slash-skill-icon {
    color: #9fb2c9;
}
.dark .slash-skill-item.source-system .slash-skill-icon {
    color: #b9c4d2;
}
.dark .slash-skill-item.source-personal .slash-skill-icon {
    color: #67e8f9;
}
.dark .slash-skill-item.source-summary .slash-skill-icon {
    color: #fbbf24;
}
.dark .slash-skill-item.source-life .slash-skill-icon {
    color: #a7f3d0;
}
.dark .slash-skill-name {
    color: #dbeafe;
}
.dark .slash-skill-key {
    color: #5f7188;
}
.dark .slash-skill-status {
    color: #71839a;
}
.dark .slash-skill-status.is-enabled i {
    color: #34d399;
    filter: drop-shadow(0 0 3px rgba(52, 211, 153, 0.45));
}
.dark .slash-skill-status.is-disabled i {
    color: #64748b;
}
.dark .slash-menu-item.active .slash-skill-name {
    color: #e6fbff;
}
.dark .slash-menu-loading .slash-menu-empty-icon {
    color: #67e8f9;
}
.dark .slash-menu-error .slash-menu-empty-icon {
    color: #fbbf24;
}
.dark .slash-menu-enter {
    color: #67e8f9;
}
.dark .slash-menu-empty {
    color: #718096;
}
.dark .slash-menu-empty-icon {
    color: #64748b;
    border-color: rgba(148, 163, 184, 0.14);
    background: rgba(15, 23, 42, 0.64);
}
.dark .slash-menu-empty strong {
    color: #cbd5e1;
}
.dark .slash-menu-footer {
    color: #52657d;
    border-top-color: rgba(34, 211, 238, 0.1);
    background: rgba(8, 18, 31, 0.92);
}

@media (max-width: 640px) {
    .chat-skill-chip {
        max-width: 100%;
    }
    .chat-skill-chip-source {
        display: none;
    }
    .slash-menu {
        left: 0;
        right: 0;
        max-height: min(430px, 58dvh);
    }
    .slash-menu-header {
        padding-inline: 10px;
    }
    .slash-menu-shortcuts {
        display: none;
    }
    .slash-menu-item {
        min-height: 62px;
        padding-inline: 8px;
    }
    .slash-menu-command-line {
        display: block;
    }
    .slash-menu-title {
        display: block;
        margin-top: 2px;
    }
    .slash-menu-item .desc {
        max-width: 100%;
    }
    .slash-menu-meta {
        align-self: flex-start;
        margin-top: 5px;
    }
    .slash-skill-item {
        min-height: 66px;
    }
    .slash-skill-meta {
        align-self: center;
        margin-top: 0;
    }
    .slash-menu-category {
        display: none;
    }
    .slash-menu-footer span:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.dark .attach-menu {
    background: #1A1A1A;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 30px -6px rgba(0, 0, 0, 0.35), 0 2px 8px -2px rgba(0, 0, 0, 0.15);
}
.dark .attach-menu-item {
    color: #e2e8f0;
}
.dark .attach-menu-item i {
    color: #94a3b8;
}
.dark .attach-menu-item:hover {
    background: rgba(74, 190, 110, 0.1);
    color: #4ABE6E;
}

/* ============================================================
   Knowledge View
   ============================================================ */

/* Tab toggle */
.knowledge-tab, .memory-tab {
    color: #64748b;
}
.knowledge-tab.active, .memory-tab.active {
    background: #fff;
    color: #334155;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.dark .knowledge-tab.active, .dark .memory-tab.active {
    background: rgba(255,255,255,0.1);
    color: #e2e8f0;
}

/* File tree */
.knowledge-tree-group {
    margin-bottom: 2px;
}
.knowledge-tree-group-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border: none;
    background: none;
    transition: background 0.15s, color 0.15s;
    text-transform: capitalize;
}
.knowledge-tree-group-btn:hover {
    background: rgba(0,0,0,0.04);
    color: #334155;
}
.dark .knowledge-tree-group-btn:hover {
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
}
.knowledge-tree-group-btn i.chevron {
    font-size: 8px;
    transition: transform 0.15s;
}
.knowledge-tree-group.open > .knowledge-tree-group-btn .chevron {
    transform: rotate(90deg);
}
.knowledge-tree-group-items {
    display: none;
}
.knowledge-tree-group.open > .knowledge-tree-group-items {
    display: block;
}

.knowledge-tree-file {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 24px;
    border-radius: 6px;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.knowledge-tree-file:hover {
    background: rgba(0,0,0,0.04);
    color: #334155;
}
.knowledge-tree-file.active {
    background: #EDFDF3;
    color: #228547;
}
.dark .knowledge-tree-file:hover {
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
}
.dark .knowledge-tree-file.active {
    background: rgba(74, 190, 110, 0.1);
    color: #4ABE6E;
}

/* Graph legend */
.knowledge-graph-legend {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: #64748b;
    z-index: 10;
}
.knowledge-graph-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.knowledge-graph-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Graph tooltip */
.knowledge-graph-tooltip {
    position: absolute;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    color: #334155;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 20;
}
.dark .knowledge-graph-tooltip {
    background: #1A1A1A;
    border-color: rgba(255,255,255,0.1);
    color: #e2e8f0;
}

/* Config field tooltip */
.cfg-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: #94a3b8;
    cursor: help;
    font-size: 12px;
}
.cfg-tip:hover { color: #64748b; }
.dark .cfg-tip:hover { color: #cbd5e1; }
/* Floating tooltip portal — appended to <body> by JS so it isn't clipped
   by overflow:hidden ancestors. */
.cfg-tip-floating {
    position: fixed;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    background: #1e293b;
    color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 9999;
}
.dark .cfg-tip-floating {
    background: #334155;
    color: #f1f5f9;
}
.cfg-tip-floating.show {
    opacity: 1;
}

/* Example cards: equal height via flex stretch + fixed 2-line description area */
.example-card {
    display: flex;
    flex-direction: column;
}
.example-card > p {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;  /* ~2 lines at text-sm leading-relaxed */
}

/* --------------------------------------------------------------------
 * Voice pill — compact custom audio player used by mic uploads and TTS
 * replies. Replaces the bulky native <audio controls> with a play/pause
 * icon + thin progress bar + duration counter so it blends into chat
 * bubbles without the chrome-grey browser default look.
 * ------------------------------------------------------------------ */
.voice-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.05);
    color: rgb(71, 85, 105);
    font-size: 12px;
    line-height: 1;
    max-width: 240px;
    user-select: none;
    cursor: default;
}
.dark .voice-pill {
    background: rgba(255, 255, 255, 0.08);
    color: rgb(203, 213, 225);
}
.voice-pill[data-loading="1"] {
    opacity: 0.65;
}
.voice-pill-btn {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-500, #2563eb);
    color: #fff;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.voice-pill-btn:hover { transform: scale(1.05); }
.voice-pill-btn i { font-size: 9px; margin-left: 1px; }
.voice-pill-btn[data-state="play"] i { margin-left: 2px; }
.voice-pill-btn[data-state="pause"] i { margin-left: 0; }
.voice-pill-track {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.25);
    overflow: hidden;
    min-width: 70px;
}
.dark .voice-pill-track {
    background: rgba(148, 163, 184, 0.25);
}
.voice-pill-fill {
    height: 100%;
    width: 0%;
    background: var(--color-primary-500, #2563eb);
    border-radius: inherit;
    transition: width 0.1s linear;
}
.voice-pill-time {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    color: inherit;
    opacity: 0.75;
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
}
.voice-pill audio { display: none; }

/* Fantasy Life Workbench */
#view-memory.fantasy-memory-view {
    background: transparent;
}
#view-memory.fantasy-memory-view > .flex-1 {
    height: 100%;
    padding: 0 !important;
    overflow: hidden !important;
}
#view-memory.fantasy-memory-view > .flex-1 > .max-w-4xl {
    width: 100%;
    max-width: none !important;
    height: 100%;
    margin: 0 !important;
}
#view-memory.fantasy-memory-view #memory-panel-list {
    height: 100%;
}
#view-memory.fantasy-memory-view #memory-panel-list > .flex.items-center.justify-between.mb-6 {
    display: none !important;
}
.fantasy-memory-view > .flex-1 {
    padding: 0 !important;
    overflow: hidden !important;
}
.fantasy-memory-shell {
    width: 100%;
    max-width: none !important;
    height: 100%;
}
#fantasy-workbench {
    height: 100%;
    min-height: calc(100vh - 56px);
}
.fantasy-workbench {
    display: grid;
    grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
    height: 100%;
    min-height: calc(100vh - 56px);
    overflow: hidden;
    border: 0;
    background: transparent;
    color: #f4ead7;
}
.fantasy-console {
    min-width: 0;
    overflow-y: auto;
    border-right: 1px solid rgba(204, 154, 86, 0.18);
    background: rgba(7, 5, 3, 0.48);
    box-shadow: 18px 0 46px rgba(0, 0, 0, 0.18);
    padding: 18px;
    position: relative;
    z-index: 5;
    backdrop-filter: blur(14px);
}
.fantasy-mobile-controls-toggle {
    display: none;
}
.fantasy-mobile-controls {
    min-width: 0;
}
.fantasy-console-head,
.fantasy-stage-top,
.fantasy-section-row,
.fantasy-age-input-row,
.fantasy-record-title,
.fantasy-record-actions {
    display: flex;
    align-items: center;
}
.fantasy-console-head,
.fantasy-stage-top,
.fantasy-section-row {
    justify-content: space-between;
    gap: 12px;
}
.fantasy-kicker {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #d9b66e;
    margin-bottom: 6px;
}
.fantasy-console h3,
.fantasy-stage h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;
    color: #fff7e6;
}
.fantasy-control-section {
    padding-top: 18px;
    margin-top: 18px;
    border-top: 1px solid rgba(204, 154, 86, 0.16);
}
.fantasy-section-title {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #b9a88d;
}
.fantasy-mode-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.fantasy-mode-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    border: 1px solid rgba(204, 154, 86, 0.18);
    border-radius: 8px;
    background: rgba(12, 9, 5, 0.56);
    color: #c9bda8;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.fantasy-mode-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(251, 191, 36, 0.42);
}
.fantasy-mode-btn.active {
    border-color: #f59e0b;
    background: rgba(130, 83, 24, 0.68);
    color: #fde68a;
}
.fantasy-world-title {
    margin-top: 2px;
}
.fantasy-custom-title,
.fantasy-realistic-title {
    margin-top: 14px;
}
.fantasy-template-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}
.fantasy-template-tile {
    display: flex;
    min-height: 54px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid rgba(204, 154, 86, 0.16);
    border-radius: 8px;
    background: rgba(12, 9, 5, 0.58);
    color: #d8cab3;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.fantasy-template-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(251, 191, 36, 0.45);
}
.fantasy-template-tile.active {
    border-color: #f59e0b;
    background: rgba(130, 83, 24, 0.68);
    color: #fde68a;
}
.fantasy-template-tile i {
    font-size: 14px;
}
.fantasy-template-tile span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    line-height: 1.15;
}
.fantasy-textarea,
.fantasy-age-input {
    width: 100%;
    border: 1px solid rgba(204, 154, 86, 0.17);
    border-radius: 8px;
    background: rgba(5, 4, 3, 0.54);
    color: #f4ead7;
    outline: none;
}
.fantasy-textarea {
    margin-top: 10px;
    min-height: 92px;
    resize: vertical;
    padding: 10px;
    font-size: 12px;
    line-height: 1.55;
}
.fantasy-age-input {
    width: 84px;
    flex: 0 0 84px;
    padding: 9px 10px;
    text-align: center;
    font-size: 13px;
}
.fantasy-textarea:focus,
.fantasy-age-input:focus {
    border-color: rgba(245, 158, 11, 0.72);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}
.fantasy-slider {
    width: 100%;
    accent-color: #f59e0b;
}
.fantasy-slider-labels {
    display: flex;
    justify-content: space-between;
    color: #8d7d66;
    font-size: 11px;
}
.fantasy-age-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    border: 1px solid rgba(204, 154, 86, 0.16);
    border-radius: 8px;
    background: rgba(12, 9, 5, 0.58);
    padding: 10px 12px;
    color: #d8cab3;
    font-size: 12px;
}
.fantasy-age-card + .fantasy-age-card {
    margin-top: 8px;
}
.fantasy-age-card strong {
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff7e6;
    font-size: 13px;
}
.fantasy-muted {
    display: block;
    color: #8d7d66;
    font-size: 11px;
}
.fantasy-age-input-row {
    margin-top: 10px;
    gap: 8px;
}
.fantasy-action-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 8px;
}
.fantasy-action-btn,
.fantasy-icon-btn {
    border: 1px solid rgba(204, 154, 86, 0.17);
    border-radius: 8px;
    background: rgba(12, 9, 5, 0.66);
    color: #f4ead7;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}
.fantasy-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 12px;
    font-size: 12px;
    font-weight: 700;
}
.fantasy-action-btn:hover,
.fantasy-icon-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(245, 158, 11, 0.48);
    background: rgba(35, 24, 10, 0.88);
}
.fantasy-action-btn.secondary {
    background: rgba(130, 83, 24, 0.42);
    border-color: rgba(245, 158, 11, 0.34);
    color: #fde68a;
}
.fantasy-action-btn.active {
    background: rgba(146, 93, 18, 0.62);
    border-color: rgba(245, 158, 11, 0.76);
    color: #fff7d6;
    box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.18) inset, 0 8px 22px rgba(245, 158, 11, 0.10);
}
.fantasy-run-grid {
    margin-top: 10px;
}
.fantasy-action-btn:disabled,
.fantasy-icon-btn:disabled {
    cursor: default;
    opacity: .55;
    transform: none;
}
.fantasy-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    font-size: 12px;
}
.fantasy-icon-btn.primary {
    background: #92400e;
    border-color: #f59e0b;
    color: #fff7ed;
}
.fantasy-icon-btn.active {
    color: #fbbf24;
}
.fantasy-icon-btn.danger {
    color: #fca5a5;
}
.fantasy-stream-panel {
    margin-top: 18px;
    padding: 12px;
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: 8px;
    background: rgba(42, 26, 8, 0.34);
}
.fantasy-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}
.fantasy-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #f59e0b, #facc15, #67e8f9);
    transition: width .2s ease;
}
.fantasy-stream-phase {
    margin-top: 8px;
    color: #fde68a;
    font-size: 12px;
}
.fantasy-stream-text {
    max-height: 230px;
    margin-top: 8px;
    overflow-y: auto;
    color: #f4ead7;
    font-size: 12px;
    line-height: 1.6;
}
.fantasy-record-section {
    margin-top: 14px;
    padding-bottom: 8px;
}
.fantasy-record-count {
    color: #b9a88d;
    font-size: 12px;
    font-weight: 700;
}
.fantasy-record-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fantasy-record,
.fantasy-empty-record {
    border: 1px solid rgba(204, 154, 86, 0.15);
    border-radius: 8px;
    background: rgba(12, 9, 5, 0.58);
}
.fantasy-record {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 10px;
    cursor: pointer;
}
.fantasy-record:hover,
.fantasy-record.selected {
    border-color: rgba(251, 191, 36, 0.44);
    background: rgba(42, 28, 10, 0.76);
}
.fantasy-record-dot {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    border-radius: 50%;
    background: var(--planet-color);
    box-shadow: 0 0 14px var(--planet-color);
}
.fantasy-record-main {
    min-width: 0;
    flex: 1;
}
.fantasy-record-title {
    gap: 6px;
    min-width: 0;
    color: #fff7e6;
    font-size: 13px;
    font-weight: 700;
}
.fantasy-record-title span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}
.fantasy-record-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.16);
    color: #fcd34d;
    padding: 2px 6px;
    font-size: 10px;
}
.fantasy-record-badge.generating {
    background: rgba(34, 211, 238, 0.16);
    color: #67e8f9;
}
.fantasy-record-meta {
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #b9a88d;
    font-size: 11px;
}
.fantasy-record-actions {
    gap: 5px;
    flex: 0 0 100px;
    display: grid;
    grid-template-columns: repeat(3, 30px);
    justify-content: flex-end;
}
.fantasy-empty-record {
    padding: 14px;
    color: #b9a88d;
    font-size: 12px;
}
.fantasy-stage {
    position: relative;
    min-width: 0;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    overflow: hidden;
}
.fantasy-stage-top {
    position: relative;
    z-index: 4;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(204, 154, 86, 0.12);
    background: transparent;
    backdrop-filter: none;
}
.fantasy-stage-top > div:first-child {
    min-width: 0;
}
.fantasy-stage-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}
.fantasy-stage-actions .fantasy-action-btn {
    white-space: nowrap;
}
.fantasy-mobile-zoom-controls {
    display: none;
    align-items: center;
    gap: 6px;
}
.fantasy-space {
    position: relative;
    flex: 1;
    min-height: 520px;
    overflow: hidden;
    touch-action: pan-y;
    background: transparent;
}
.fantasy-spark-field {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    opacity: .72;
    mix-blend-mode: screen;
    background:
        radial-gradient(circle at 8% 18%, rgba(255, 236, 184, .72) 0 1px, transparent 1.7px),
        radial-gradient(circle at 22% 66%, rgba(255, 255, 255, .48) 0 1px, transparent 1.5px),
        radial-gradient(circle at 41% 28%, rgba(255, 210, 132, .46) 0 1px, transparent 1.5px),
        radial-gradient(circle at 63% 72%, rgba(181, 238, 255, .44) 0 1px, transparent 1.5px),
        radial-gradient(circle at 82% 38%, rgba(255, 255, 255, .54) 0 1px, transparent 1.6px);
    background-size: 360px 240px, 520px 330px, 440px 310px, 610px 360px, 700px 420px;
    animation: fantasySparkDrift 18s linear infinite;
}
.fantasy-space:not(.no-webgl) .fantasy-spark-field,
.fantasy-space:not(.no-webgl) .fantasy-twinkle,
.fantasy-space:not(.no-webgl) .fantasy-meteor,
.fantasy-space:not(.no-webgl) .fantasy-nebula-layer,
.fantasy-space:not(.no-webgl) .fantasy-star-layer {
    display: none !important;
}
.fantasy-twinkle,
.fantasy-meteor {
    position: absolute;
    display: block;
    pointer-events: none;
}
.fantasy-twinkle {
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 239, 191, .95);
    box-shadow: 0 0 8px rgba(255, 201, 93, .9), 0 0 22px rgba(255, 255, 255, .35);
    animation: fantasyTwinklePop 3.4s ease-in-out infinite;
}
.fantasy-twinkle-a { left: 18%; top: 24%; animation-delay: -.8s; }
.fantasy-twinkle-b { left: 58%; top: 19%; width: 3px; height: 3px; animation-delay: -1.7s; }
.fantasy-twinkle-c { left: 76%; top: 64%; width: 5px; height: 5px; animation-delay: -2.6s; }
.fantasy-meteor {
    width: 170px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 244, 210, .95), rgba(255, 178, 70, .56), transparent);
    filter: drop-shadow(0 0 8px rgba(255, 199, 106, .58));
    opacity: 0;
    transform: rotate(-24deg);
    animation: fantasyMeteorTrail 8.5s linear infinite;
}
.fantasy-meteor-a { left: 86%; top: 13%; animation-delay: -1.2s; }
.fantasy-meteor-b { left: 70%; top: 38%; width: 130px; animation-duration: 11s; animation-delay: -5.6s; }
.fantasy-meteor-c { left: 94%; top: 66%; width: 190px; animation-duration: 13s; animation-delay: -8.4s; }
.fantasy-nebula-layer,
.fantasy-star-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.fantasy-nebula-layer {
    z-index: 0;
    background:
        radial-gradient(ellipse at 26% 36%, rgba(34, 211, 238, .16), transparent 36%),
        radial-gradient(ellipse at 78% 58%, rgba(251, 146, 60, .08), transparent 34%),
        radial-gradient(ellipse at 58% 78%, rgba(168, 85, 247, .08), transparent 32%);
    filter: blur(10px);
    animation: fantasyNebulaDrift 18s ease-in-out infinite alternate;
}
.fantasy-nebula-layer,
.fantasy-star-layer {
    display: none;
}
.fantasy-star-layer {
    z-index: 1;
    background-repeat: repeat;
    animation: fantasyStarTwinkle 4s ease-in-out infinite alternate;
}
.fantasy-star-layer-a {
    background-image: radial-gradient(circle, rgba(219, 234, 254, .78) 1px, transparent 1.5px);
    background-size: 87px 87px;
    opacity: .42;
}
.fantasy-star-layer-b {
    background-image: radial-gradient(circle, rgba(148, 163, 184, .58) 1px, transparent 1.4px);
    background-size: 143px 143px;
    background-position: 31px 17px;
    opacity: .36;
    animation-duration: 5.5s;
}
.fantasy-star-layer-c {
    background-image: radial-gradient(circle, rgba(250, 204, 21, .50) 1px, transparent 1.6px);
    background-size: 223px 223px;
    background-position: 63px 91px;
    opacity: .24;
    animation-duration: 7s;
}
.fantasy-three-canvas,
.fantasy-three-canvas canvas,
.fantasy-fallback-planets,
.fantasy-planet-labels {
    position: absolute;
    inset: 0;
}
.fantasy-three-canvas {
    z-index: 2;
    pointer-events: auto;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
.fantasy-three-canvas canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    cursor: grab;
    pointer-events: auto;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}
.fantasy-three-canvas canvas:active,
.fantasy-space.is-dragging,
.fantasy-space.is-dragging .fantasy-three-canvas canvas {
    cursor: grabbing;
}
.fantasy-fallback-planets {
    z-index: 2;
    display: none;
}
.fantasy-space.no-webgl .fantasy-three-canvas {
    display: none;
}
.fantasy-space.no-webgl .fantasy-fallback-planets {
    display: block;
}
.fantasy-planet-labels {
    z-index: 3;
    pointer-events: none;
    transition: opacity .16s ease;
}
.fantasy-planet-focus-target {
    position: absolute;
    z-index: 4;
    margin: 0;
    padding: 0;
    font: inherit;
    text-align: inherit;
    cursor: default;
    appearance: none;
    pointer-events: none;
}
.fantasy-planet-focus-target:focus-visible {
    outline: 2px solid rgba(103, 232, 249, .92);
    outline-offset: 3px;
    box-shadow: 0 0 16px rgba(34, 211, 238, .72);
}
.fantasy-planet-overview {
    --planet-overview-cyan: var(--forge-cyan, #00e7ff);
    --planet-overview-magenta: var(--forge-magenta, #fa36d8);
    --planet-overview-text: var(--forge-text, #d9f7fb);
    --planet-overview-muted: var(--forge-muted, #78a0aa);
    position: fixed;
    z-index: 60;
    width: min(440px, calc(100vw - 24px));
    max-height: min(600px, calc(100vh - 24px));
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    clip-path: polygon(
        0 10px,
        10px 0,
        calc(100% - 28px) 0,
        100% 28px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        24px 100%,
        0 calc(100% - 24px)
    );
    background:
        linear-gradient(rgba(0, 231, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 231, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 8% 8%, rgba(0, 231, 255, 0.12), transparent 38%),
        radial-gradient(circle at 92% 88%, rgba(250, 54, 216, 0.09), transparent 42%),
        rgba(2, 10, 19, 0.965);
    background-size: 18px 18px, 18px 18px, auto, auto, auto;
    box-shadow:
        inset 0 0 30px rgba(0, 231, 255, 0.035),
        inset 0 1px 0 rgba(221, 252, 255, 0.08);
    color: var(--planet-overview-text);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, -4px, 0);
    filter:
        blur(2.5px)
        drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 12px rgba(0, 231, 255, 0.08));
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
    transition:
        opacity 130ms cubic-bezier(0.4, 0, 1, 1),
        transform 150ms cubic-bezier(0.4, 0, 1, 1),
        filter 130ms cubic-bezier(0.4, 0, 1, 1),
        visibility 0s linear 150ms;
}
.fantasy-planet-overview.visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    filter:
        blur(0)
        drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5))
        drop-shadow(0 0 16px rgba(0, 231, 255, 0.12));
    transition:
        opacity 220ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 240ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 220ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}
.fantasy-planet-overview-frame {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(0, 231, 255, 0.52),
        inset -1px 0 0 rgba(250, 54, 216, 0.22),
        inset 0 0 24px rgba(0, 231, 255, 0.035);
    background:
        linear-gradient(
            90deg,
            var(--planet-overview-cyan),
            rgba(0, 231, 255, 0.24)
        ) top left 12px / 118px 2px no-repeat,
        linear-gradient(
            90deg,
            rgba(250, 54, 216, 0.22),
            var(--planet-overview-magenta)
        ) top right 28px / 62px 2px no-repeat,
        linear-gradient(
            180deg,
            var(--planet-overview-magenta),
            rgba(250, 54, 216, 0.12)
        ) right top 28px / 2px 86px no-repeat,
        linear-gradient(
            90deg,
            rgba(0, 231, 255, 0.18),
            var(--planet-overview-cyan)
        ) bottom left 24px / 92px 2px no-repeat;
}
.fantasy-planet-overview-frame::before,
.fantasy-planet-overview-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.fantasy-planet-overview-frame::before {
    top: 8px;
    right: 18px;
    width: 74px;
    height: 5px;
    border-top: 1px solid rgba(250, 54, 216, 0.58);
    background:
        repeating-linear-gradient(
            90deg,
            rgba(250, 54, 216, 0.72) 0 5px,
            transparent 5px 10px
        );
    opacity: 0.74;
}
.fantasy-planet-overview-frame::after {
    left: 8px;
    bottom: 12px;
    width: 4px;
    height: 54px;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(0, 231, 255, 0.76) 0 6px,
            transparent 6px 11px
        );
    box-shadow: 0 0 9px rgba(0, 231, 255, 0.3);
}
.fantasy-planet-overview-content {
    position: relative;
    z-index: 3;
    max-height: inherit;
    padding: 14px 16px 15px;
    overflow: hidden auto;
    overscroll-behavior: contain;
    scrollbar-color:
        rgba(0, 231, 255, 0.42)
        rgba(0, 231, 255, 0.04);
    scrollbar-width: thin;
}
.fantasy-planet-overview-kicker {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 8px;
    border-bottom: 1px solid rgba(0, 231, 255, 0.2);
    color: var(--planet-overview-cyan);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.25;
}
.fantasy-planet-overview-trace,
.fantasy-planet-overview-status {
    min-width: 0;
}
.fantasy-planet-overview-trace {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    letter-spacing: 1.35px;
    white-space: nowrap;
}
.fantasy-planet-overview-trace i {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border: 1px solid rgba(223, 254, 255, 0.86);
    background: var(--planet-overview-cyan);
    box-shadow:
        0 0 0 2px rgba(0, 231, 255, 0.08),
        0 0 9px rgba(0, 231, 255, 0.58);
}
.fantasy-planet-overview-status {
    overflow: hidden;
    color: #ff9eec;
    letter-spacing: 0;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fantasy-planet-overview strong {
    display: -webkit-box;
    margin-top: 10px;
    overflow: hidden;
    color: #effdff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.42;
    overflow-wrap: anywhere;
    text-shadow: 0 0 14px rgba(0, 231, 255, 0.16);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: unset;
}

.fantasy-tree-v5-artboard .fantasy-tree-v5-editor-life-heading {
    flex-wrap: wrap;
    row-gap: 3px;
}

.fantasy-tree-v5-artboard .fantasy-tree-v5-editor-life-title {
    flex-basis: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
}

.fantasy-tree-v4-root .fantasy-tree-v4-timeline .fantasy-tree-v4-timeline-group summary strong,
.fantasy-tree-v4-root .fantasy-tree-v4-timeline .fantasy-tree-v4-timeline-node span {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.5;
}
.fantasy-planet-overview-meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 10px 0 0;
    border-top: 1px solid rgba(0, 231, 255, 0.16);
    border-bottom: 1px solid rgba(0, 231, 255, 0.16);
    background: rgba(0, 231, 255, 0.025);
}
.fantasy-planet-overview-meta > div {
    min-width: 0;
    padding: 7px 8px 8px;
    border-right: 1px solid rgba(0, 231, 255, 0.12);
}
.fantasy-planet-overview-meta > div:last-child {
    border-right: 0;
}
.fantasy-planet-overview-meta dt {
    color: rgba(120, 160, 170, 0.86);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
}
.fantasy-planet-overview-meta dd {
    margin: 3px 0 0;
    overflow: hidden;
    color: #dffbff;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fantasy-planet-overview-summary {
    margin-top: 10px;
    padding: 9px 10px 10px;
    border-left: 2px solid rgba(0, 231, 255, 0.76);
    background:
        linear-gradient(90deg, rgba(0, 231, 255, 0.055), transparent 72%),
        rgba(1, 8, 16, 0.54);
}
.fantasy-planet-overview.is-unavailable
.fantasy-planet-overview-summary {
    border-left-color: rgba(250, 54, 216, 0.72);
    background:
        linear-gradient(90deg, rgba(250, 54, 216, 0.055), transparent 72%),
        rgba(1, 8, 16, 0.54);
}
.fantasy-planet-overview-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: rgba(0, 231, 255, 0.78);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.85px;
    line-height: 1.2;
}
.fantasy-planet-overview-section-label span:last-child {
    color: rgba(250, 54, 216, 0.76);
    letter-spacing: 0.45px;
}
.fantasy-planet-overview p {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    color: #cfe6ec;
    font-size: 12px;
    line-height: 1.64;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}
.fantasy-planet-overview-summary-loading {
    display: grid;
    gap: 8px;
    min-height: 58px;
    padding-top: 7px;
}
.fantasy-planet-overview-summary-loading-copy {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #a7d9e3;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}
.fantasy-planet-overview-summary-loading-copy i {
    color: var(--planet-overview-cyan);
}
.fantasy-planet-overview-summary-skeleton {
    display: grid;
    gap: 5px;
}
.fantasy-planet-overview-summary-skeleton i {
    display: block;
    width: 100%;
    height: 6px;
    background:
        linear-gradient(
            100deg,
            rgba(0, 231, 255, 0.055) 22%,
            rgba(197, 250, 255, 0.15) 48%,
            rgba(250, 54, 216, 0.065) 76%
        );
    background-size: 220% 100%;
    animation:
        fantasyFxPlanetOverviewSummaryLoading
        1.6s linear infinite;
}
.fantasy-planet-overview-summary-skeleton i:nth-child(2) {
    width: 92%;
}
.fantasy-planet-overview-summary-skeleton i:nth-child(3) {
    width: 68%;
}
@keyframes fantasyFxPlanetOverviewSummaryLoading {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
.fantasy-planet-overview-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 11px 0 0;
    overflow: hidden;
    border: 1px solid rgba(0, 231, 255, 0.28);
    border-radius: 0;
    clip-path: polygon(
        0 7px,
        7px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 7px),
        calc(100% - 7px) 100%,
        0 100%
    );
    background:
        linear-gradient(rgba(0, 231, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 231, 255, 0.04) 1px, transparent 1px),
        rgba(1, 8, 18, 0.94);
    background-size: 18px 18px, 18px 18px, auto;
    box-shadow:
        inset 0 0 0 1px rgba(0, 231, 255, 0.055),
        inset 0 0 26px rgba(0, 0, 0, 0.34);
}
.fantasy-planet-overview-image::before,
.fantasy-planet-overview-image::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.fantasy-planet-overview-image::before {
    z-index: 2;
    inset: 7px;
    background:
        linear-gradient(var(--planet-overview-cyan), var(--planet-overview-cyan)) left top / 22px 1px no-repeat,
        linear-gradient(var(--planet-overview-cyan), var(--planet-overview-cyan)) left top / 1px 22px no-repeat,
        linear-gradient(var(--planet-overview-magenta), var(--planet-overview-magenta)) right top / 22px 1px no-repeat,
        linear-gradient(var(--planet-overview-magenta), var(--planet-overview-magenta)) right top / 1px 22px no-repeat,
        linear-gradient(rgba(0, 231, 255, 0.74), rgba(0, 231, 255, 0.74)) left bottom / 22px 1px no-repeat,
        linear-gradient(rgba(0, 231, 255, 0.74), rgba(0, 231, 255, 0.74)) left bottom / 1px 22px no-repeat,
        linear-gradient(rgba(250, 54, 216, 0.74), rgba(250, 54, 216, 0.74)) right bottom / 22px 1px no-repeat,
        linear-gradient(rgba(250, 54, 216, 0.74), rgba(250, 54, 216, 0.74)) right bottom / 1px 22px no-repeat;
    opacity: 0.72;
}
.fantasy-planet-overview-image::after {
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
    height: 34%;
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(0, 231, 255, 0.035) 36%,
            rgba(0, 231, 255, 0.38) 50%,
            rgba(250, 54, 216, 0.12) 58%,
            transparent
        );
    opacity: 0;
    transform: translate3d(0, -130%, 0);
}
.fantasy-planet-overview-image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    filter: blur(2px) saturate(0.88);
    transform: translate3d(0, 2px, 0);
    transition:
        opacity 180ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.fantasy-planet-overview-image.is-loaded img {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translate3d(0, 0, 0);
}
.fantasy-planet-overview-image.is-loaded::after {
    animation:
        fantasyFxPlanetOverviewImageScan
        420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fantasyFxPlanetOverviewImageScan {
    0% {
        opacity: 0;
        transform: translate3d(0, -130%, 0);
    }
    18% {
        opacity: 0.88;
    }
    100% {
        opacity: 0;
        transform: translate3d(0, 310%, 0);
    }
}
.fantasy-planet-overview-image figcaption {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    min-height: 36px;
    padding: 14px 9px 7px;
    background:
        linear-gradient(180deg, transparent, rgba(1, 7, 14, 0.9));
    color: rgba(213, 250, 255, 0.78);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.65px;
    line-height: 1.2;
}
.fantasy-planet-overview-image figcaption span:last-child {
    color: rgba(255, 157, 236, 0.78);
    letter-spacing: 0.3px;
    text-align: right;
}
.fantasy-planet-overview-image-fallback {
    position: absolute;
    z-index: 4;
    inset: 0;
    display: none;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 32px;
    background:
        radial-gradient(circle, rgba(0, 231, 255, 0.08), transparent 44%),
        rgba(1, 8, 18, 0.94);
    color: rgba(166, 221, 231, 0.78);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
}
.fantasy-planet-overview-image-fallback i {
    color: var(--planet-overview-magenta);
    font-size: 18px;
    filter: drop-shadow(0 0 8px rgba(250, 54, 216, 0.28));
}
.fantasy-planet-overview-image.load-failed img {
    display: none;
}
.fantasy-planet-overview-image.load-failed
.fantasy-planet-overview-image-fallback {
    display: grid;
}
.fantasy-planet-overview-image.load-failed::after {
    display: none;
}
.fantasy-planet-overview-image-skeleton {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(
            105deg,
            transparent 35%,
            rgba(0, 231, 255, 0.14) 48%,
            rgba(250, 54, 216, 0.09) 52%,
            transparent 65%
        ),
        radial-gradient(circle at center, rgba(0, 231, 255, 0.07), transparent 46%),
        rgba(3, 16, 28, 0.86);
    background-size: 220% 100%;
    animation: fantasyPlanetImageLoading 1.6s linear infinite;
}
@keyframes fantasyPlanetImageLoading {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .fantasy-planet-overview {
        transition: none !important;
        filter:
            drop-shadow(0 18px 34px rgba(0, 0, 0, 0.5))
            drop-shadow(0 0 12px rgba(0, 231, 255, 0.08));
    }
    .fantasy-planet-overview-image img {
        transition: none !important;
    }
    .fantasy-planet-overview-actions button {
        transition: none !important;
    }
    .fantasy-planet-overview-actions button:active {
        transform: none;
    }
    .fantasy-planet-overview-image.is-loaded::after {
        animation: none !important;
        display: none;
    }
    .fantasy-planet-overview-summary-skeleton i,
    .fantasy-planet-overview-image-skeleton {
        animation: none !important;
        background-position: 50% 0;
    }
}
.fantasy-labels-hidden .fantasy-planet-labels,
.fantasy-labels-hidden .fantasy-planet-label {
    opacity: 0 !important;
    visibility: hidden;
}
.fantasy-stage-label.collision-hidden {
    opacity: 0 !important;
    pointer-events: none;
}
.fantasy-stage-label {
    position: absolute;
    max-width: 176px;
    padding: 4px 9px;
    border: 1px solid rgba(204, 154, 86, .32);
    border-radius: 999px;
    background: rgba(9, 6, 3, .68);
    color: #f4ead7;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 225, 170, .10);
    font-size: 12px;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 1px 8px #000;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .16s ease, filter .16s ease, border-color .16s ease, background .16s ease;
    will-change: transform, opacity;
}
.fantasy-stage-label.visible {
    opacity: .86;
}
.fantasy-stage-label.hovered,
.fantasy-stage-label.selected,
.fantasy-stage-label.generating {
    border-color: rgba(245, 158, 11, .72);
    background: rgba(36, 22, 7, .78);
    color: #fff4d6;
    filter: drop-shadow(0 0 12px rgba(245, 158, 11, .32));
}
.fantasy-planet {
    position: absolute;
    z-index: 1;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transform: translate(-50%, -50%);
}
.fantasy-planet-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .18) 16%, transparent 28%),
        radial-gradient(circle at 72% 78%, rgba(0, 0, 0, .34), transparent 48%),
        linear-gradient(145deg, color-mix(in srgb, var(--planet-color), white 34%), var(--planet-color) 52%, color-mix(in srgb, var(--planet-color), black 34%));
    box-shadow:
        inset -14px -18px 24px rgba(0, 0, 0, .28),
        inset 8px 10px 18px rgba(255, 255, 255, .16),
        0 0 20px color-mix(in srgb, var(--planet-color), transparent 24%),
        0 0 44px rgba(245, 158, 11, .10);
    transition: transform .15s ease, box-shadow .15s ease;
}
.fantasy-planet-ring {
    position: absolute;
    left: -55%;
    right: -55%;
    top: 36%;
    height: 28%;
    border: 2px solid color-mix(in srgb, var(--planet-color), white 18%);
    border-radius: 50%;
    transform: rotate(-8deg);
    opacity: .42;
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--planet-color), transparent 46%));
}
.fantasy-planet:hover .fantasy-planet-core,
.fantasy-planet.selected .fantasy-planet-core {
    transform: scale(1.18);
    box-shadow: 0 0 22px var(--planet-color), 0 0 50px color-mix(in srgb, var(--planet-color), transparent 45%);
}
.fantasy-planet.generating .fantasy-planet-core {
    animation: fantasyPlanetPulse 1.2s ease-in-out infinite;
}
.fantasy-planet-label {
    position: absolute;
    left: 50%;
    top: calc(100% + 9px);
    min-width: 92px;
    max-width: 150px;
    transform: translateX(-50%);
    color: #f4ead7;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 1px 8px #000;
    opacity: .86;
    transition: opacity .15s ease;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(9, 6, 3, .68);
    border: 1px solid rgba(204, 154, 86, .26);
}
.fantasy-planet:hover .fantasy-planet-label,
.fantasy-planet.selected .fantasy-planet-label,
.fantasy-planet.generating .fantasy-planet-label {
    opacity: 1;
}
.fantasy-empty-space {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #b9a88d;
    font-size: 13px;
    z-index: 3;
}
.fantasy-story-drawer {
    position: absolute;
    z-index: 6;
    top: 0;
    right: 0;
    width: min(460px, 44vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(204, 154, 86, .18);
    background: linear-gradient(180deg, rgba(14, 10, 5, .96), rgba(5, 3, 2, .98));
    box-shadow: -24px 0 70px rgba(0, 0, 0, .38);
    transform: translateX(102%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, visibility 0s linear .22s;
    backdrop-filter: blur(18px);
}
.fantasy-story-drawer.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
.fantasy-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid rgba(204, 154, 86, .14);
}
.fantasy-drawer-head h3 {
    margin: 0 0 5px;
    color: #fff7e6;
    font-size: 18px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}
.fantasy-drawer-head > div {
    min-width: 0;
}
.fantasy-drawer-head span {
    color: #b9a88d;
    font-size: 12px;
}
.fantasy-drawer-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    color: #f4ead7;
    font-size: 13px;
    line-height: 1.7;
}
.fantasy-story-block {
    padding: 14px 0 16px;
    border-bottom: 1px solid rgba(204, 154, 86, .12);
}
.fantasy-story-block:first-child {
    padding-top: 0;
}
.fantasy-story-title {
    display: inline-flex;
    align-items: center;
    margin-bottom: 10px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(130, 83, 24, .34);
    color: #fde68a;
    font-size: 12px;
    font-weight: 700;
}
.fantasy-story-body {
    color: #f4ead7;
}
.fantasy-skill-summary {
    display: inline-flex;
    align-items: center;
    margin-bottom: 14px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(245, 181, 78, .24);
    background: rgba(130, 83, 24, .28);
    color: #fde68a;
    font-size: 12px;
    font-weight: 700;
}
.fantasy-skill-card {
    margin-bottom: 12px;
    border: 1px solid rgba(204, 154, 86, .16);
    border-radius: 8px;
    background: rgba(18, 12, 6, .72);
    overflow: hidden;
}
.fantasy-skill-card summary {
    display: grid;
    gap: 5px;
    padding: 12px 13px;
    cursor: pointer;
    list-style: none;
}
.fantasy-skill-card summary::-webkit-details-marker {
    display: none;
}
.fantasy-skill-card summary:hover {
    background: rgba(245, 158, 11, .08);
}
.fantasy-skill-name {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff7e6;
    font-size: 13px;
    font-weight: 800;
}
.fantasy-skill-name i {
    color: #f5b54e;
}
.fantasy-skill-desc,
.fantasy-skill-time {
    color: #b9a88d;
    font-size: 12px;
    line-height: 1.45;
}
.fantasy-skill-body {
    padding: 0 13px 14px;
    color: #f4ead7;
    font-size: 13px;
    line-height: 1.7;
}
.fantasy-drawer-loading,
.fantasy-drawer-empty {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #b9a88d;
    font-size: 13px;
}
@keyframes fantasyPlanetPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: .76; }
}
@keyframes fantasySparkDrift {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to { background-position: -120px 36px, 96px -44px, -80px -60px, 130px 78px, -160px 92px; }
}
@keyframes fantasyTwinklePop {
    0%, 100% { transform: scale(.72); opacity: .28; }
    44% { transform: scale(1.45); opacity: .95; }
    60% { transform: scale(.96); opacity: .42; }
}
@keyframes fantasyMeteorTrail {
    0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-24deg); }
    6% { opacity: .86; }
    18% { opacity: 0; transform: translate3d(-46vw, 32vh, 0) rotate(-24deg); }
    100% { opacity: 0; transform: translate3d(-46vw, 32vh, 0) rotate(-24deg); }
}
@keyframes fantasyStarTwinkle {
    from { opacity: .20; transform: translate3d(0, 0, 0); }
    to { opacity: .54; transform: translate3d(-10px, 7px, 0); }
}
@keyframes fantasyNebulaDrift {
    from { transform: scale(1) translate3d(0, 0, 0); opacity: .82; }
    to { transform: scale(1.06) translate3d(-16px, 10px, 0); opacity: 1; }
}

@media (max-width: 1100px) {
    .fantasy-workbench {
        grid-template-columns: 320px minmax(0, 1fr);
    }
    .fantasy-template-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (max-width: 860px) {
    .fantasy-memory-view > .flex-1 {
        overflow-y: auto !important;
        touch-action: pan-y;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: auto;
    }
    #fantasy-workbench,
    .fantasy-memory-shell {
        height: auto;
        min-height: calc(100dvh - 56px);
    }
    .fantasy-workbench {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100dvh - 56px);
        overflow: visible;
    }
    .fantasy-console {
        border-right: 0;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
        max-height: none;
        overflow: visible;
        padding: 0;
    }
    .fantasy-mobile-controls-toggle {
        display: flex;
        width: 100%;
        min-height: 50px;
        padding: 0 16px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: 0;
        background: rgba(4, 18, 31, 0.94);
        color: #dffaff;
        font-size: 13px;
        font-weight: 700;
        text-align: left;
    }
    .fantasy-mobile-controls-toggle > span {
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }
    .fantasy-mobile-controls-chevron {
        transition: transform .18s ease;
    }
    .fantasy-mobile-controls-chevron.expanded {
        transform: rotate(180deg);
    }
    .fantasy-mobile-controls {
        padding: 16px;
    }
    .fantasy-controls-collapsed .fantasy-mobile-controls {
        display: none;
    }
    .fantasy-stage-top {
        gap: 10px;
    }
    .fantasy-stage-top h3 {
        max-width: 32vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .fantasy-stage-actions {
        gap: 6px;
    }
    .fantasy-mobile-zoom-controls {
        display: flex;
    }
    .fantasy-stage-actions .fantasy-action-btn {
        width: 34px;
        min-width: 34px;
        height: 34px;
        padding: 0;
        justify-content: center;
    }
    .fantasy-stage-actions .fantasy-action-btn span {
        display: none;
    }
    .fantasy-space {
        width: 100%;
        min-height: max(360px, calc(100dvh - 190px));
    }
    .fantasy-stage-label {
        max-width: min(132px, 38vw);
        padding: 4px 7px;
        font-size: 10px;
    }
    .fantasy-story-drawer {
        width: 100%;
    }
}


/* ===== 生成新人生按钮点击反馈 ===== */
.fantasy-btn-loading {
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

/* ===== Life Forge: cybernetic operations console ===== */
#fantasy-workbench {
    --forge-bg: #02070d;
    --forge-panel: rgba(4, 13, 23, 0.92);
    --forge-panel-strong: rgba(3, 10, 18, 0.97);
    --forge-cyan: #00e7ff;
    --forge-cyan-soft: rgba(0, 231, 255, 0.18);
    --forge-magenta: #fa36d8;
    --forge-magenta-soft: rgba(250, 54, 216, 0.16);
    --forge-yellow: #ffe15a;
    --forge-text: #d9f7fb;
    --forge-muted: #78a0aa;
    --forge-grid: rgba(0, 180, 210, 0.09);
    color: var(--forge-text);
    background:
        linear-gradient(rgba(0, 231, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 231, 255, 0.025) 1px, transparent 1px),
        radial-gradient(ellipse at 70% 58%, rgba(0, 104, 153, 0.16), transparent 54%),
        var(--forge-bg);
    background-size: 28px 28px, 28px 28px, auto, auto;
    font-family: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
}

.fantasy-workbench {
    position: relative;
    gap: 12px;
    padding: 12px;
    background: transparent;
}

.fantasy-console,
.fantasy-stage,
.fantasy-story-drawer {
    clip-path: polygon(0 14px, 14px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
}

.fantasy-console {
    padding: 20px 18px 28px;
    border: 1px solid rgba(0, 231, 255, 0.42);
    border-right: 1px solid rgba(250, 54, 216, 0.42);
    background:
        linear-gradient(90deg, rgba(0, 231, 255, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(0, 231, 255, 0.04) 1px, transparent 1px),
        var(--forge-panel);
    background-size: 18px 18px, 18px 18px, auto;
    box-shadow:
        inset 0 0 0 1px rgba(0, 231, 255, 0.07),
        inset 0 18px 40px rgba(0, 231, 255, 0.025),
        0 0 32px rgba(0, 231, 255, 0.07);
    backdrop-filter: none;
}

.fantasy-console::before,
.fantasy-console::after,
.fantasy-stage::before {
    content: "";
    position: absolute;
    pointer-events: none;
}

.fantasy-console::before {
    top: 8px;
    right: 24px;
    width: 46px;
    height: 4px;
    border-top: 2px solid var(--forge-magenta);
    border-bottom: 1px solid rgba(250, 54, 216, 0.44);
    box-shadow: 0 0 10px rgba(250, 54, 216, 0.5);
}

.fantasy-console::after {
    right: 0;
    bottom: 72px;
    width: 3px;
    height: 74px;
    background: repeating-linear-gradient(to bottom, var(--forge-cyan) 0 5px, transparent 5px 10px);
    box-shadow: 0 0 10px rgba(0, 231, 255, 0.55);
}

.fantasy-console-head,
.fantasy-stage-top {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0, 231, 255, 0.26);
}

.fantasy-kicker {
    color: var(--forge-cyan);
    letter-spacing: 1.4px;
    text-shadow: 0 0 9px rgba(0, 231, 255, 0.48);
}

.fantasy-console h3,
.fantasy-stage h3 {
    color: var(--forge-cyan);
    font-weight: 800;
    letter-spacing: 0;
    text-shadow: 0 0 16px rgba(0, 231, 255, 0.32);
}

.fantasy-console h3 {
    font-size: 20px;
}

.fantasy-control-section {
    padding-top: 15px;
    margin-top: 15px;
    border-top-color: rgba(0, 231, 255, 0.17);
}

.fantasy-section-title,
.fantasy-muted,
.fantasy-record-meta,
.fantasy-slider-labels,
.fantasy-drawer-head span,
.fantasy-skill-desc,
.fantasy-skill-time,
.fantasy-empty-record,
.fantasy-empty-space,
.fantasy-drawer-loading,
.fantasy-drawer-empty {
    color: var(--forge-muted);
}

.fantasy-section-title {
    letter-spacing: 0.45px;
    font-weight: 800;
}

.fantasy-mode-btn,
.fantasy-template-tile,
.fantasy-age-card,
.fantasy-action-btn,
.fantasy-icon-btn,
.fantasy-record,
.fantasy-empty-record,
.fantasy-textarea,
.fantasy-age-input,
.fantasy-stream-panel,
.fantasy-skill-card {
    border-radius: 0;
    border-color: rgba(0, 190, 222, 0.3);
    background: rgba(2, 11, 20, 0.84);
    color: var(--forge-text);
}

.fantasy-mode-btn,
.fantasy-action-btn,
.fantasy-icon-btn {
    position: relative;
    clip-path: polygon(0 7px, 7px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px));
}

.fantasy-mode-btn::before,
.fantasy-action-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    width: 22px;
    border-top: 1px solid rgba(0, 231, 255, 0.72);
}

.fantasy-mode-btn:hover,
.fantasy-template-tile:hover,
.fantasy-action-btn:hover,
.fantasy-icon-btn:hover,
.fantasy-record:hover {
    transform: translateY(-1px);
    border-color: rgba(0, 231, 255, 0.82);
    background: rgba(0, 231, 255, 0.08);
    box-shadow: inset 0 0 18px rgba(0, 231, 255, 0.08), 0 0 16px rgba(0, 231, 255, 0.12);
}

.fantasy-mode-btn.active,
.fantasy-template-tile.active,
.fantasy-action-btn.active,
.fantasy-record.selected {
    border-color: var(--forge-magenta);
    background: rgba(250, 54, 216, 0.12);
    color: #fff0fd;
    box-shadow: inset 0 0 18px rgba(250, 54, 216, 0.1), 0 0 14px rgba(250, 54, 216, 0.15);
}

.fantasy-action-btn.secondary,
.fantasy-icon-btn.primary {
    border-color: rgba(255, 225, 90, 0.72);
    background: rgba(255, 225, 90, 0.09);
    color: var(--forge-yellow);
    box-shadow: inset 0 0 15px rgba(255, 225, 90, 0.07);
}

.fantasy-action-btn.secondary:hover,
.fantasy-icon-btn.primary:hover {
    border-color: var(--forge-yellow);
    background: rgba(255, 225, 90, 0.15);
    box-shadow: 0 0 17px rgba(255, 225, 90, 0.17);
}

.fantasy-textarea,
.fantasy-age-input {
    caret-color: var(--forge-cyan);
    background:
        linear-gradient(rgba(0, 231, 255, 0.035) 1px, transparent 1px),
        rgba(0, 6, 12, 0.92);
    background-size: 100% 24px, auto;
}

.fantasy-textarea::placeholder {
    color: rgba(120, 160, 170, 0.78);
}

.fantasy-textarea:focus,
.fantasy-age-input:focus {
    border-color: var(--forge-cyan);
    box-shadow: 0 0 0 1px rgba(0, 231, 255, 0.24), 0 0 16px rgba(0, 231, 255, 0.12);
}

.fantasy-current-setting {
    display: grid;
    gap: 10px;
}

#fantasy-current-setting-content {
    display: grid;
    gap: 10px;
}

.fantasy-setting-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.fantasy-setting-meta span,
.fantasy-record-skill-status {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border: 1px solid rgba(0, 231, 255, 0.26);
    background: rgba(0, 231, 255, 0.07);
    color: #a7edf5;
    font-size: 10px;
}

.fantasy-setting-block {
    padding: 10px;
    border-left: 2px solid rgba(250, 54, 216, 0.64);
    background: rgba(250, 54, 216, 0.045);
}

.fantasy-setting-block strong {
    display: block;
    margin-bottom: 6px;
    color: #ffb4f4;
    font-size: 11px;
}

.fantasy-setting-block p {
    margin: 0;
    color: var(--forge-text);
    font-size: 12px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.fantasy-setting-supplements {
    display: grid;
    gap: 8px;
    max-height: 210px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.fantasy-setting-item {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
}

.fantasy-setting-item > span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(0, 231, 255, 0.38);
    color: var(--forge-cyan);
    font-size: 10px;
}

.fantasy-setting-item time,
.fantasy-setting-hint,
.fantasy-setting-empty {
    color: var(--forge-muted);
    font-size: 10px;
    line-height: 1.5;
}

.fantasy-setting-item time {
    display: block;
    margin-top: 3px;
}

.fantasy-record-skill-status {
    margin-left: 4px;
    border-color: rgba(250, 54, 216, 0.34);
    background: rgba(250, 54, 216, 0.08);
    color: #ffb4f4;
}

.fantasy-icon-btn.busy {
    border-color: rgba(250, 54, 216, 0.62);
    color: #ffb4f4;
}

.fantasy-slider {
    accent-color: var(--forge-magenta);
}

.fantasy-age-card strong,
.fantasy-record-title,
.fantasy-drawer-head h3,
.fantasy-skill-name,
.fantasy-story-body,
.fantasy-skill-body {
    color: var(--forge-text);
}

.fantasy-age-card {
    min-height: 58px;
    box-shadow: inset 2px 0 0 rgba(0, 231, 255, 0.56);
}

.fantasy-stream-panel {
    border-color: rgba(250, 54, 216, 0.5);
    background: rgba(250, 54, 216, 0.07);
    box-shadow: inset 0 0 18px rgba(250, 54, 216, 0.06);
}

.fantasy-progress {
    border-radius: 0;
    background: rgba(0, 231, 255, 0.09);
}

.fantasy-progress span {
    border-radius: 0;
    background: linear-gradient(90deg, var(--forge-magenta), var(--forge-cyan));
    box-shadow: 0 0 10px rgba(0, 231, 255, 0.46);
}

.fantasy-stream-phase {
    color: #ffb4f4;
}

.fantasy-record-dot {
    box-shadow: 0 0 12px var(--planet-color), 0 0 24px color-mix(in srgb, var(--planet-color), transparent 54%);
}

.fantasy-record-badge,
.fantasy-story-title,
.fantasy-skill-summary {
    border-radius: 0;
    border: 1px solid rgba(255, 225, 90, 0.4);
    background: rgba(255, 225, 90, 0.08);
    color: var(--forge-yellow);
}

.fantasy-record-badge.generating {
    border-color: rgba(0, 231, 255, 0.52);
    background: rgba(0, 231, 255, 0.12);
    color: var(--forge-cyan);
}

.fantasy-stage {
    margin: 0;
    border: 1px solid rgba(0, 231, 255, 0.42);
    background: var(--forge-panel-strong);
    box-shadow: inset 0 0 0 1px rgba(0, 231, 255, 0.06), 0 0 34px rgba(0, 231, 255, 0.06);
}

.fantasy-stage::before {
    z-index: 5;
    top: 12px;
    left: 16px;
    width: 118px;
    height: 9px;
    border-top: 1px solid rgba(0, 231, 255, 0.58);
    border-left: 1px solid rgba(0, 231, 255, 0.58);
    background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(0, 231, 255, 0.7) 12px 15px);
    opacity: 0.8;
}

.fantasy-stage-top {
    z-index: 6;
    min-height: 78px;
    padding: 22px 24px 16px;
    background:
        linear-gradient(90deg, rgba(0, 231, 255, 0.08), transparent 36%),
        rgba(2, 10, 18, 0.9);
}

.fantasy-space {
    background:
        linear-gradient(180deg, rgba(0, 4, 10, 0.12), rgba(0, 4, 10, 0.34)),
        radial-gradient(ellipse at 51% 50%, transparent 24%, rgba(0, 3, 9, 0.2) 68%, rgba(0, 2, 7, 0.62) 100%),
        url("../assets/deep-space-starfield.png?v=fantasy-starfield-r1") center center / cover no-repeat,
        #01050b;
}

.fantasy-space::before,
.fantasy-space::after {
    content: "";
    position: absolute;
    z-index: 4;
    pointer-events: none;
}

.fantasy-space::before {
    inset: 12px;
    border: 1px solid rgba(0, 231, 255, 0.13);
    clip-path: polygon(0 24px, 24px 0, calc(100% - 34px) 0, 100% 34px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%);
}

.fantasy-space::after {
    right: 30px;
    bottom: 26px;
    width: 44px;
    height: 66px;
    border-right: 2px solid rgba(0, 231, 255, 0.82);
    border-bottom: 2px solid rgba(0, 231, 255, 0.82);
    box-shadow: 0 0 12px rgba(0, 231, 255, 0.26);
}

.fantasy-spark-field {
    opacity: 0.5;
}

.fantasy-stage-label,
.fantasy-planet-label {
    border-radius: 0;
    border-color: rgba(26, 211, 243, 0.5);
    background: rgba(1, 10, 19, 0.9);
    color: #d8e8f2;
    box-shadow:
        inset 0 0 13px rgba(23, 178, 210, 0.035),
        0 0 14px rgba(0, 180, 220, 0.08);
}

.fantasy-stage-label {
    max-width: 220px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%);
}

.fantasy-stage-label.hovered,
.fantasy-stage-label.selected,
.fantasy-stage-label.generating {
    border-color: var(--forge-magenta);
    background: rgba(35, 4, 32, 0.88);
    color: #fff0fd;
    filter: drop-shadow(0 0 11px rgba(250, 54, 216, 0.36));
}

.fantasy-planet-core {
    box-shadow:
        inset -14px -18px 24px rgba(0, 0, 0, 0.28),
        inset 8px 10px 18px rgba(255, 255, 255, 0.16),
        0 0 20px color-mix(in srgb, var(--planet-color), transparent 22%),
        0 0 44px rgba(0, 231, 255, 0.12);
}

.fantasy-story-drawer {
    border-left-color: rgba(0, 231, 255, 0.58);
    background:
        linear-gradient(rgba(0, 231, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 231, 255, 0.035) 1px, transparent 1px),
        rgba(2, 10, 18, 0.98);
    background-size: 20px 20px, 20px 20px, auto;
}

.fantasy-drawer-head {
    border-bottom-color: rgba(0, 231, 255, 0.22);
}

.fantasy-story-block {
    border-bottom-color: rgba(0, 231, 255, 0.14);
}

.fantasy-skill-card summary:hover {
    background: rgba(0, 231, 255, 0.07);
}

.fantasy-icon-btn.danger {
    border-color: rgba(250, 54, 216, 0.36);
    color: #ff91ec;
}

@media (max-width: 860px) {
    .fantasy-workbench {
        grid-template-rows: auto auto;
        align-content: start;
        gap: 8px;
        padding: 8px;
    }

    .fantasy-console {
        padding: 0;
        border-right: 1px solid rgba(0, 231, 255, 0.42);
        border-bottom: 1px solid rgba(250, 54, 216, 0.42);
    }

    .fantasy-stage-top {
        padding: 18px 16px 14px;
    }

    .fantasy-space {
        min-height: 460px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fantasy-spark-field {
        animation: none !important;
    }
}

/* ===== V4 star / fate tree dual view ===== */
/*
 * V4 shares the same workbench frame as the star map and V3 tree.
 * Keep the body marker for lifecycle styling, but do not turn V4 into a
 * separate full-screen surface that hides the creator console and stage bar.
 */
@media (min-width: 861px) {
    body.fantasy-tree-v4-active
        #fantasy-workbench
        .fantasy-tree-v4-root
        .fantasy-tree-v4-version {
        display: none;
    }
}

.fantasy-view-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 190px;
    border: 1px solid rgba(0, 231, 255, 0.32);
    background: rgba(0, 7, 14, 0.72);
}

.fantasy-view-toggle button {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    background: transparent;
    color: var(--forge-muted);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.fantasy-view-toggle button + button {
    border-left: 1px solid rgba(0, 231, 255, 0.2);
}

.fantasy-view-toggle button.active {
    background: rgba(0, 231, 255, 0.12);
    color: var(--forge-cyan);
    box-shadow: inset 0 -2px 0 var(--forge-cyan);
}

.fantasy-tree-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fantasy-tree-visual-version {
    display: inline-grid;
    grid-template-columns: repeat(4, 38px);
    min-height: 36px;
    border: 1px solid rgba(0, 231, 255, 0.28);
    background: rgba(0, 7, 14, 0.78);
}

.fantasy-tree-visual-version button {
    min-width: 38px;
    min-height: 34px;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--forge-muted);
    cursor: pointer;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.fantasy-tree-visual-version button + button {
    border-left: 1px solid rgba(0, 231, 255, 0.16);
}

.fantasy-tree-visual-version button:hover,
.fantasy-tree-visual-version button:focus-visible {
    color: var(--forge-text);
}

.fantasy-tree-visual-version button:focus-visible {
    outline: 2px solid var(--forge-cyan);
    outline-offset: 2px;
}

.fantasy-tree-visual-version button.active {
    background: rgba(0, 231, 255, 0.12);
    box-shadow: inset 0 -2px 0 var(--forge-cyan);
    color: var(--forge-cyan);
}

.fantasy-tree-v4-bootstrap-state {
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--forge-muted);
    font-size: 13px;
    text-align: center;
}

.fantasy-tree-v4-bootstrap-state.is-error {
    color: #ff9bee;
}

.fantasy-tree-v4-bootstrap-state button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid rgba(0, 231, 255, 0.34);
    border-radius: 3px;
    background: rgba(2, 10, 18, 0.92);
    color: var(--forge-cyan);
    cursor: pointer;
}

.fantasy-tree-stage {
    --life-tree-shadow: #271b0f;
    --life-tree-muted: #7d592d;
    --life-tree-main: #c99746;
    --life-tree-bright: #e6c36f;
    --life-tree-core: #ffe8a3;
    --life-tree-particle: #f8d77a;
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(1, 5, 9, 0.18), rgba(0, 3, 7, 0.72)),
        #01050a;
    isolation: isolate;
}

.fantasy-tree-stage::before,
.fantasy-tree-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.fantasy-tree-stage::before {
    background:
        radial-gradient(circle, rgba(255, 220, 132, 0.72) 0 0.65px, transparent 0.95px)
            17px 23px / 137px 149px,
        radial-gradient(circle, rgba(204, 148, 51, 0.56) 0 0.7px, transparent 1.05px)
            61px 79px / 193px 181px,
        radial-gradient(circle, rgba(255, 241, 190, 0.34) 0 0.55px, transparent 0.9px)
            11px 47px / 251px 223px;
    opacity: 0.22;
    animation: fantasyTreeSpaceDrift 34s linear infinite;
}

.fantasy-tree-stage::after {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.42), transparent 15%, transparent 85%, rgba(0, 0, 0, 0.42)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent 24%, transparent 72%, rgba(0, 0, 0, 0.26));
}

@keyframes fantasyTreeSpaceDrift {
    to {
        background-position:
            73px -41px,
            -57px 52px,
            31px -67px;
    }
}

.fantasy-tree-jobs {
    position: relative;
    z-index: 4;
    display: grid;
    flex: 0 0 auto;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(0, 231, 255, 0.18);
    background: rgba(1, 7, 13, 0.96);
}

.fantasy-tree-job {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-left: 3px solid var(--forge-cyan);
    background: rgba(0, 231, 255, 0.06);
}

.fantasy-tree-job.failed {
    border-left-color: var(--forge-magenta);
    background: rgba(250, 54, 216, 0.07);
}

.fantasy-tree-job > div {
    min-width: 0;
}

.fantasy-tree-job strong,
.fantasy-tree-job span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fantasy-tree-job strong {
    color: var(--forge-text);
    font-size: 12px;
}

.fantasy-tree-job span {
    margin-top: 3px;
    color: var(--forge-muted);
    font-size: 10px;
}

.fantasy-tree-job > i {
    flex: 0 0 auto;
    color: var(--forge-cyan);
}

.fantasy-tree-viewport {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    overflow: hidden;
    outline: none;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.fantasy-tree-viewport::before,
.fantasy-tree-viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.fantasy-tree-viewport::before {
    background:
        linear-gradient(rgba(91, 126, 132, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(91, 126, 132, 0.022) 1px, transparent 1px);
    background-size: 48px 48px;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 82%, transparent);
    mask-image: linear-gradient(180deg, transparent, #000 16%, #000 82%, transparent);
}

.fantasy-tree-viewport::after {
    display: none;
}

.fantasy-tree-atmosphere {
    position: absolute;
    z-index: 0;
    inset: -2%;
    overflow: hidden;
    background:
        url("../assets/fantasy-tree-environment-r17.png?v=fantasy-tree-environment-r17")
        center center / cover no-repeat;
    filter: brightness(0.78) saturate(0.72) contrast(1.1);
    pointer-events: none;
    transform: translateZ(0);
}

.fantasy-tree-atmosphere::before,
.fantasy-tree-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fantasy-tree-atmosphere::before {
    background:
        linear-gradient(
            90deg,
            rgba(0, 2, 5, 0.72),
            rgba(0, 3, 7, 0.18) 22%,
            rgba(0, 5, 9, 0.03) 50%,
            rgba(0, 3, 7, 0.18) 78%,
            rgba(0, 2, 5, 0.72)
        ),
        linear-gradient(
            180deg,
            rgba(0, 2, 5, 0.44),
            transparent 22%,
            transparent 72%,
            rgba(0, 2, 5, 0.62)
        );
}

.fantasy-tree-atmosphere::after {
    background:
        radial-gradient(
            ellipse at 50% 54%,
            rgba(18, 55, 68, 0.3),
            rgba(5, 19, 27, 0.12) 42%,
            rgba(0, 2, 5, 0.54) 84%
        ),
        radial-gradient(
            ellipse at 50% 41%,
            rgba(184, 128, 40, 0.075),
            transparent 42%
        );
    opacity: 0.98;
}

.fantasy-tree-viewport:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(0, 231, 255, 0.72);
}

.fantasy-tree-viewport.is-panning {
    cursor: grabbing;
}

.fantasy-tree-world {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    transform-origin: 0 0;
    will-change: transform;
}

.fantasy-tree-environment-world {
    position: absolute;
    z-index: 0;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
}

.fantasy-tree-environment-world::before,
.fantasy-tree-environment-world::after {
    content: "";
    position: absolute;
    pointer-events: none;
    mix-blend-mode: screen;
}

.fantasy-tree-environment-world::before {
    left: 50%;
    top: 3%;
    width: min(260px, 24%);
    height: calc(var(--scene-socket-y) - 2px);
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 224, 147, 0.035) 18%,
        rgba(255, 204, 96, 0.12) 58%,
        rgba(255, 193, 64, 0.26) 100%
    );
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
    filter: blur(15px);
    opacity: 0.9;
}

.fantasy-tree-environment-world::after {
    left: 50%;
    top: 28%;
    width: min(760px, 86%);
    height: min(520px, 58%);
    transform: translateX(-50%);
    background: radial-gradient(
        ellipse at 50% 70%,
        rgba(255, 211, 119, 0.16),
        rgba(205, 144, 45, 0.07) 34%,
        transparent 72%
    );
    filter: blur(18px);
    opacity: 0.78;
}

.fantasy-tree-environment-crown-aura {
    position: absolute;
    left: var(--scene-crown-left);
    top: var(--scene-crown-top);
    width: var(--scene-crown-width);
    height: var(--scene-crown-height);
    background:
        radial-gradient(
            ellipse at 50% 68%,
            rgba(255, 196, 73, 0.24),
            rgba(224, 161, 51, 0.14) 24%,
            rgba(24, 79, 93, 0.18) 54%,
            transparent 82%
        ),
        radial-gradient(
            ellipse at 50% 35%,
            rgba(255, 221, 132, 0.13),
            rgba(193, 134, 42, 0.07) 38%,
            transparent 68%
        ),
        radial-gradient(
            ellipse at 50% 100%,
            rgba(255, 190, 60, 0.16),
            transparent 58%
        );
    mix-blend-mode: screen;
    opacity: 0.92;
}

.fantasy-tree-environment-horizon {
    position: absolute;
    left: 50%;
    top: calc(var(--scene-socket-y) - 42px);
    width: min(1320px, 88%);
    height: 112px;
    transform: translateX(-50%);
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(189, 132, 40, 0.04) 22%,
            rgba(224, 170, 68, 0.13) 50%,
            rgba(189, 132, 40, 0.04) 78%,
            transparent
        ),
        linear-gradient(
            90deg,
            transparent 8%,
            rgba(237, 190, 91, 0.16) 50%,
            transparent 92%
        );
    filter: blur(7px) drop-shadow(0 0 12px rgba(246, 188, 77, 0.18));
    mix-blend-mode: screen;
    opacity: 0.9;
}

.fantasy-tree-environment-floor {
    position: absolute;
    left: 0;
    top: var(--scene-floor-top);
    width: 100%;
    height: var(--scene-floor-height);
    clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
    background:
        repeating-conic-gradient(
            from 78deg at var(--scene-socket-x) 0,
            transparent 0 4.6deg,
            rgba(205, 151, 54, 0.12) 4.75deg 4.92deg,
            transparent 5.06deg 9.6deg
        ),
        repeating-linear-gradient(
            180deg,
            rgba(202, 151, 58, 0.13) 0 1px,
            transparent 1px 24px
        ),
        linear-gradient(
            180deg,
            rgba(175, 123, 38, 0.11),
            rgba(53, 37, 17, 0.055) 45%,
            transparent
        );
    -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.82) 62%, transparent);
    mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.82) 62%, transparent);
    opacity: 0.94;
}

.fantasy-tree-environment-root-shadow {
    position: absolute;
    left: var(--scene-socket-x);
    top: var(--scene-socket-y);
    width: min(1040px, 78%);
    height: 180px;
    transform: translate(-50%, -8%);
    background:
        radial-gradient(
            ellipse at 50% 0,
            rgba(255, 210, 106, 0.34),
            rgba(235, 183, 79, 0.16) 34%,
            rgba(104, 70, 24, 0.08) 48%,
            transparent 76%
        );
    filter: blur(7px) drop-shadow(0 0 14px rgba(255, 185, 48, 0.16));
    opacity: 0.92;
}

.fantasy-tree-environment-socket {
    position: absolute;
    z-index: 1;
    left: var(--scene-socket-x);
    top: var(--scene-socket-y);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff4c7;
    box-shadow:
        0 0 0 8px rgba(91, 61, 20, 0.38),
        0 0 0 16px rgba(175, 123, 37, 0.16),
        0 0 16px 3px rgba(255, 216, 105, 0.68),
        0 0 34px 10px rgba(238, 160, 38, 0.3);
    transform: translate(-50%, -50%);
    animation: fantasyTreeSocketPulse 4.6s ease-in-out infinite;
}

.fantasy-tree-environment-socket::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(330px, 32vw);
    height: 190px;
    transform: translate(-50%, 1px);
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(255, 214, 116, 0.045) 32%,
        rgba(255, 189, 59, 0.18) 100%
    );
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 34%, #000 66%, transparent);
    filter: blur(12px);
    opacity: 0.82;
    pointer-events: none;
}

.fantasy-tree-environment-socket::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 226, 145, 0.36);
    box-shadow: 0 0 18px rgba(255, 191, 65, 0.3);
    opacity: 0.72;
    pointer-events: none;
}

@keyframes fantasyTreeSocketPulse {
    0%, 100% {
        filter: brightness(0.92);
        box-shadow:
            0 0 0 8px rgba(91, 61, 20, 0.38),
            0 0 0 16px rgba(175, 123, 37, 0.16),
            0 0 16px 3px rgba(255, 216, 105, 0.58),
            0 0 30px 8px rgba(238, 160, 38, 0.24);
    }
    50% {
        filter: brightness(1.16);
        box-shadow:
            0 0 0 8px rgba(109, 73, 20, 0.34),
            0 0 0 18px rgba(203, 149, 44, 0.2),
            0 0 22px 5px rgba(255, 226, 133, 0.82),
            0 0 42px 12px rgba(238, 160, 38, 0.36);
    }
}

.fantasy-tree-root-ground {
    position: absolute;
    z-index: 1;
    width: min(980px, 76%);
    min-width: 560px;
    height: 182px;
    pointer-events: none;
    transform: translate(-50%, -7%);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(211, 159, 58, 0.16), transparent 62%),
        linear-gradient(90deg, transparent 0 18%, rgba(197, 147, 49, 0.16) 18.1% 18.22%, transparent 18.35% 50%, rgba(225, 177, 77, 0.25) 50.1% 50.22%, transparent 50.35% 81.65%, rgba(197, 147, 49, 0.16) 81.78% 81.9%, transparent 82%);
    opacity: 0.82;
    filter: drop-shadow(0 0 6px rgba(205, 151, 48, 0.16));
}

.fantasy-tree-root-ground::before,
.fantasy-tree-root-ground::after {
    content: "";
    position: absolute;
    top: 13px;
    width: 47%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(202, 151, 52, 0.38), transparent);
    opacity: 0.7;
}

.fantasy-tree-root-ground::before {
    left: 0;
    transform: rotate(-15deg);
}

.fantasy-tree-root-ground::after {
    right: 0;
    transform: rotate(15deg);
}

.fantasy-tree-edges {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: visible;
    pointer-events: none;
}

.fantasy-tree-edges path,
.fantasy-tree-edges use {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fantasy-tree-decoration {
    pointer-events: none;
    mix-blend-mode: screen;
}

.fantasy-tree-decorative-root-shell,
.fantasy-tree-decorative-root-main,
.fantasy-tree-decorative-root-core,
.fantasy-tree-decorative-twig,
.fantasy-tree-decorative-twig-core {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.fantasy-tree-decorative-root-shell {
    stroke: rgba(31, 23, 13, calc(var(--decorative-opacity, 0.45) * 1.35));
    stroke-width: calc(var(--decorative-width, 1px) * 4.6 + 3px);
}

.fantasy-tree-decorative-root-main {
    stroke: rgba(136, 94, 35, var(--decorative-opacity, 0.45));
    stroke-width: calc(var(--decorative-width, 1px) * 2.05 + 0.55px);
}

.fantasy-tree-decorative-root-core {
    stroke: rgba(255, 218, 124, calc(var(--decorative-opacity, 0.45) * 0.92));
    stroke-width: max(0.42px, calc(var(--decorative-width, 1px) * 0.38));
    filter: drop-shadow(0 0 2px rgba(255, 196, 76, 0.46));
}

.fantasy-tree-decorative-twig {
    stroke: rgba(139, 99, 38, var(--decorative-opacity, 0.4));
    stroke-width: calc(var(--decorative-width, 0.7px) * 1.34 + 0.18px);
}

.fantasy-tree-decorative-twig-core {
    stroke: #ffe3a2;
    stroke-width: max(0.34px, calc(var(--decorative-width, 0.7px) * 0.34));
    opacity: 0.78;
    filter: drop-shadow(0 0 2px rgba(255, 198, 82, 0.54));
}

.fantasy-tree-ambient-particle {
    fill: #fff3c4;
    opacity: max(var(--ambient-opacity, 0.3), 0.34);
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.28);
    filter: drop-shadow(0 0 3px rgba(255, 220, 119, 0.88)) drop-shadow(0 0 7px rgba(255, 169, 39, 0.42));
    animation: fantasyTreeAmbientFlicker 8.8s ease-in-out var(--ambient-delay, 0s) infinite;
}

.fantasy-tree-trunk-shell,
.fantasy-tree-trunk-core {
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

.fantasy-tree-trunk {
    filter: drop-shadow(0 0 8px rgba(226, 164, 57, 0.3));
}

.fantasy-tree-trunk-shell {
    fill: rgba(3, 8, 10, 0.76);
    stroke: rgba(127, 91, 34, 0.42);
    stroke-width: 1.35px;
}

.fantasy-tree-trunk-core {
    fill: rgba(7, 12, 13, 0.3);
    stroke: rgba(203, 153, 57, 0.28);
    stroke-width: 0.85px;
}

.fantasy-tree-trunk-lane-group {
    opacity: 0.82;
    mix-blend-mode: screen;
    transition: opacity 150ms ease;
}

.fantasy-tree-trunk-lane-halo,
.fantasy-tree-trunk-lane,
.fantasy-tree-trunk-lane-filament,
.fantasy-tree-trunk-lane-flow {
    fill: none;
    vector-effect: non-scaling-stroke;
    transition: stroke 150ms ease, opacity 150ms ease, filter 150ms ease;
}

.fantasy-tree-trunk-lane-halo {
    stroke: rgba(100, 68, 22, 0.84);
    stroke-width: calc(var(--trunk-lane-width, 1.35px) * 2.55 + 1.5px);
    opacity: 0.7;
    filter: drop-shadow(0 0 5px rgba(245, 180, 50, 0.42));
}

.fantasy-tree-trunk-lane {
    stroke: rgba(211, 159, 54, 0.92);
    stroke-width: var(--trunk-lane-width, 1.35px);
    opacity: 0.96;
}

.fantasy-tree-trunk-lane-filament {
    stroke: #fff4cf;
    stroke-width: max(0.52px, calc(var(--trunk-lane-width, 1.35px) * 0.34));
    opacity: 0.9;
    filter: drop-shadow(0 0 3px rgba(255, 213, 112, 0.68));
}

.fantasy-tree-trunk-lane-flow {
    stroke: #fff8dd;
    stroke-width: max(0.7px, calc(var(--trunk-lane-width, 1.35px) * 0.38));
    stroke-dasharray: 1.5 17;
    stroke-dashoffset: 0;
    opacity: 0;
}

.fantasy-tree-trunk-junction {
    fill: #080a0c;
    stroke: rgba(185, 136, 45, 0.9);
    stroke-width: 0.9px;
    vector-effect: non-scaling-stroke;
    transition: fill 150ms ease, stroke 150ms ease, filter 150ms ease;
}

.fantasy-tree-trunk-lane-group.current {
    opacity: 0.96;
}

.fantasy-tree-trunk-lane-group.current .fantasy-tree-trunk-lane-halo {
    stroke: rgba(71, 52, 25, 0.92);
    opacity: 0.66;
}

.fantasy-tree-trunk-lane-group.current .fantasy-tree-trunk-lane {
    stroke: rgba(151, 112, 42, 0.98);
}

.fantasy-tree-trunk-lane-group.current .fantasy-tree-trunk-lane-filament {
    stroke: rgba(194, 153, 67, 0.92);
}

.fantasy-tree-trunk-lane-group.current .fantasy-tree-trunk-junction {
    stroke: rgba(181, 138, 55, 0.96);
}

.fantasy-tree-trunk-lane-group.selected {
    opacity: 1;
}

.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-lane-halo {
    stroke: rgba(132, 101, 48, 0.9);
    opacity: 0.82;
}

.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-lane {
    stroke: #f4d78f;
    filter: drop-shadow(0 0 2px rgba(255, 222, 137, 0.5));
}

.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-lane-filament {
    stroke: #fff4cd;
    opacity: 1;
}

.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-lane-flow {
    opacity: 0.96;
    animation: fantasyTreeEnergyFlow 3.4s linear infinite;
}

.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-junction {
    fill: #d5a84c;
    stroke: #fff3ca;
    filter: drop-shadow(0 0 3px rgba(255, 222, 139, 0.54));
}

.fantasy-tree-trunk-lane-group.current.selected .fantasy-tree-trunk-lane {
    stroke: #f8dfa0;
}

.fantasy-tree-trunk.dormant {
    filter: none;
}

.fantasy-tree-trunk.dormant .fantasy-tree-trunk-shell {
    fill: rgba(8, 10, 11, 0.92);
    stroke: rgba(88, 65, 30, 0.68);
}

.fantasy-tree-trunk.dormant .fantasy-tree-trunk-core {
    fill: rgba(16, 16, 13, 0.92);
    stroke: rgba(120, 88, 35, 0.52);
}

.fantasy-tree-edges .fantasy-tree-edge-halo {
    stroke: rgba(89, 59, 21, var(--edge-halo-opacity, 0.58));
    stroke-width: calc(var(--edge-halo-width, 5px) + 1px);
    filter: drop-shadow(0 0 4px rgba(238, 169, 51, 0.28));
}

.fantasy-tree-edges .fantasy-tree-edge-core {
    stroke: #d39b35;
    stroke-width: var(--edge-core-width, 1.5px);
    opacity: max(var(--edge-core-opacity, 0.38), 0.46);
}

.fantasy-tree-edges .fantasy-tree-edge-filament {
    stroke: #ffd670;
    stroke-width: max(var(--edge-filament-width, 0.45px), 0.52px);
    opacity: max(calc(var(--edge-core-opacity, 0.38) * 0.88), 0.46);
    filter: drop-shadow(0 0 2px rgba(255, 205, 102, 0.5));
}

.fantasy-tree-edges .fantasy-tree-edge-flow {
    stroke: #fff8de;
    stroke-width: calc(var(--edge-active-core-width, 2.4px) * 0.42);
    stroke-dasharray: 1.5 16;
    stroke-dashoffset: 0;
    opacity: 0;
}

.fantasy-tree-edges .fantasy-tree-edge-halo.current {
    stroke: rgba(52, 41, 24, 0.92);
    stroke-width: var(--edge-active-halo-width, 6px);
}

.fantasy-tree-edges .fantasy-tree-edge-core.current {
    stroke: rgba(151, 112, 42, 0.98);
    stroke-width: var(--edge-active-core-width, 2.5px);
    opacity: 1;
}

.fantasy-tree-edges .fantasy-tree-edge-filament.current {
    stroke: rgba(190, 151, 67, 0.88);
    opacity: 0.84;
}

.fantasy-tree-edges .fantasy-tree-edge-halo.selected {
    stroke: rgba(128, 100, 49, 0.84);
    stroke-width: var(--edge-active-halo-width, 6px);
}

.fantasy-tree-edges .fantasy-tree-edge-core.selected {
    stroke: #ffedb6;
    stroke-width: var(--edge-active-core-width, 2.4px);
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(255, 228, 158, 0.5));
}

.fantasy-tree-edges .fantasy-tree-edge-filament.selected {
    stroke: #fff9df;
    opacity: 1;
}

.fantasy-tree-edges .fantasy-tree-edge-flow.selected {
    stroke: #fffef3;
    opacity: 0.98;
    animation: fantasyTreeEnergyFlow 3.8s linear infinite;
}

.fantasy-tree-edges path.current.selected,
.fantasy-tree-edges .current.selected {
    filter: drop-shadow(0 0 3px rgba(255, 230, 153, 0.4));
}

.fantasy-tree-edges .fantasy-tree-edge-halo.current.selected {
    stroke: rgba(110, 85, 40, 0.98);
    stroke-width: var(--edge-active-halo-width, 6px);
}

.fantasy-tree-edges .fantasy-tree-edge-core.current.selected {
    stroke: #ffe5a0;
    stroke-width: var(--edge-active-core-width, 2.4px);
}

.fantasy-tree-edges .fantasy-tree-edge-filament.current.selected {
    stroke: #fffbe8;
}

.fantasy-tree-edges .fantasy-tree-edge-flow.current.selected {
    stroke: #fffef4;
}

@keyframes fantasyTreeEnergyFlow {
    to { stroke-dashoffset: -56; }
}

.fantasy-tree-age-guides {
    display: none;
}

.fantasy-tree-age-guide {
    display: none;
}

.fantasy-tree-age-guide span {
    display: none;
}

.fantasy-tree-node {
    position: absolute;
    z-index: 4;
    width: var(--node-hit-size, 36px);
    height: var(--node-hit-size, 36px);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--forge-text);
    cursor: pointer;
    transform: translate(-50%, -50%);
    text-align: center;
    overflow: visible;
}

.fantasy-tree-node:hover,
.fantasy-tree-node:focus-visible,
.fantasy-tree-node.selected {
    outline: none;
}

.fantasy-tree-node:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 235, 176, 0.78);
    border-radius: 50%;
}

.fantasy-tree-node-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--node-radius, 10px) * 2);
    height: calc(var(--node-radius, 10px) * 2);
    border: 1px solid rgba(224, 176, 72, 0.94);
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #11161a 0 43%, transparent 44%),
        repeating-conic-gradient(
            from 11deg,
            rgba(184, 134, 43, 0.4) 0 5deg,
            #080b0e 5deg 26deg
        );
    box-shadow:
        inset 0 0 0 2px rgba(4, 6, 8, 0.82),
        inset 0 0 0 3px rgba(197, 146, 47, 0.08),
        0 0 5px rgba(231, 177, 70, 0.38),
        0 0 12px rgba(255, 184, 48, 0.14);
    transform:
        translate(-50%, -50%)
        scale(var(--tree-node-compensation, 1));
    transform-origin: center;
    transition:
        border-color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease;
}

.fantasy-tree-node-dot::before,
.fantasy-tree-node-dot::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.fantasy-tree-node-dot::before {
    left: 50%;
    top: 50%;
    width: clamp(2.5px, calc(var(--node-radius, 10px) * 0.32), 4.5px);
    height: clamp(2.5px, calc(var(--node-radius, 10px) * 0.32), 4.5px);
    border: 0.5px solid rgba(255, 236, 177, 0.76);
    background: #fff9df;
    box-shadow:
        0 0 4px 1px rgba(255, 233, 159, 0.92),
        0 0 9px 3px rgba(255, 190, 55, 0.58),
        0 0 16px 5px rgba(255, 153, 24, 0.24);
    transform: translate(-50%, -50%);
    animation: fantasyTreeCoreDrift 7.2s ease-in-out infinite, fantasyTreeCorePulse 4.8s ease-in-out infinite;
}

.fantasy-tree-node-dot::after {
    inset: 2px;
    background: repeating-conic-gradient(
        from 7deg,
        rgba(192, 141, 45, 0.68) 0 3deg,
        transparent 3deg 24deg
    );
    -webkit-mask: radial-gradient(circle, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
    mask: radial-gradient(circle, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
    opacity: 0.58;
}

.fantasy-tree-node-circuit-ring {
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(182, 132, 40, 0.52) 0 4deg,
        transparent 4deg 33deg
    );
    -webkit-mask: radial-gradient(circle, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
    mask: radial-gradient(circle, transparent calc(100% - 1.5px), #000 calc(100% - 1px));
    opacity: 0.5;
    filter: drop-shadow(0 0 3px rgba(255, 193, 69, 0.48));
    pointer-events: none;
}

.fantasy-tree-node.minor .fantasy-tree-node-dot {
    border: 1px solid rgba(190, 143, 53, 0.82);
    background:
        radial-gradient(circle at center, #11161a 0 38%, transparent 40%),
        repeating-conic-gradient(
            from 10deg,
            rgba(205, 156, 63, 0.56) 0 5deg,
            #080b0e 5deg 34deg
        );
    box-shadow:
        inset 0 0 0 1px rgba(4, 6, 8, 0.9),
        0 0 0 1px rgba(72, 50, 20, 0.62),
        0 0 5px rgba(218, 165, 64, 0.32);
}

.fantasy-tree-node.minor .fantasy-tree-node-dot::before {
    width: clamp(3px, calc(var(--node-radius, 7px) * 0.52), 5px);
    height: clamp(3px, calc(var(--node-radius, 7px) * 0.52), 5px);
    border: 0.5px solid rgba(255, 239, 187, 0.78);
    background: #e4b85c;
    box-shadow: 0 0 4px rgba(234, 188, 89, 0.62);
}

.fantasy-tree-node.minor .fantasy-tree-node-dot::after {
    display: block;
    inset: 2px;
    opacity: 0.7;
}

.fantasy-tree-node.minor .fantasy-tree-node-circuit-ring {
    display: block;
    inset: -3px;
    opacity: 0.36;
    filter: drop-shadow(0 0 2px rgba(220, 169, 69, 0.34));
}

.fantasy-tree-node.key .fantasy-tree-node-dot {
    border-color: rgba(184, 137, 48, 0.78);
    background:
        radial-gradient(circle at center, #11161a 0 41%, transparent 42%),
        repeating-conic-gradient(
            from 9deg,
            rgba(184, 134, 43, 0.38) 0 4deg,
            #080b0e 4deg 32deg
        );
    box-shadow:
        inset 0 0 0 2px rgba(4, 6, 8, 0.82),
        0 0 3px rgba(206, 153, 51, 0.16);
}

.fantasy-tree-node.key .fantasy-tree-node-circuit-ring {
    inset: -3px;
    opacity: 0.32;
}

.fantasy-tree-node:hover .fantasy-tree-node-dot,
.fantasy-tree-node:focus-visible .fantasy-tree-node-dot,
.fantasy-tree-node.selected .fantasy-tree-node-dot {
    border-color: #ead08d;
    box-shadow:
        inset 0 0 0 2px rgba(4, 6, 8, 0.8),
        inset 0 0 0 3px rgba(232, 190, 96, 0.14),
        0 0 5px rgba(232, 188, 89, 0.34);
}

.fantasy-tree-node.root:not(.origin) {
    display: none;
    pointer-events: none;
}

.fantasy-tree-node.origin,
.fantasy-tree-origin {
    z-index: 5;
}

.fantasy-tree-node.origin .fantasy-tree-node-dot,
.fantasy-tree-origin .fantasy-tree-node-dot {
    border: 2px solid rgba(205, 153, 54, 0.96);
    background:
        radial-gradient(circle, #d6a74a 0 4%, #171a1c 5% 22%, transparent 23%),
        repeating-conic-gradient(
            from 0deg,
            rgba(208, 158, 59, 0.72) 0 4deg,
            #080b0d 4deg 17deg
        );
    box-shadow:
        inset 0 0 0 4px rgba(3, 5, 7, 0.86),
        inset 0 0 0 6px rgba(197, 143, 43, 0.14),
        0 0 0 3px rgba(88, 61, 22, 0.74),
        0 0 8px rgba(215, 160, 54, 0.3);
}

.fantasy-tree-node.origin .fantasy-tree-node-dot::before,
.fantasy-tree-origin .fantasy-tree-node-dot::before {
    width: 7px;
    height: 7px;
    border: 1px solid rgba(255, 235, 168, 0.82);
    background: #e1b85e;
    box-shadow: 0 0 5px rgba(227, 177, 70, 0.68);
}

.fantasy-tree-node.origin .fantasy-tree-node-dot::after,
.fantasy-tree-origin .fantasy-tree-node-dot::after {
    inset: 7px;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(222, 177, 78, 0.82) 0 5deg,
        transparent 5deg 20deg
    );
    opacity: 0.82;
}

.fantasy-tree-node.origin .fantasy-tree-node-circuit-ring,
.fantasy-tree-origin .fantasy-tree-node-circuit-ring {
    inset: -11px;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(198, 145, 47, 0.8) 0 3deg,
        transparent 3deg 15deg
    );
    -webkit-mask: radial-gradient(circle, transparent calc(100% - 2px), #000 calc(100% - 1px));
    mask: radial-gradient(circle, transparent calc(100% - 2px), #000 calc(100% - 1px));
    opacity: 0.78;
    animation: fantasyTreeRootOrbit 28s linear infinite;
}

.fantasy-tree-node.origin .fantasy-tree-node-dot {
    outline: 1px solid rgba(107, 76, 27, 0.72);
    outline-offset: 3px;
}

.fantasy-tree-node.origin.current-path .fantasy-tree-node-circuit-ring {
    opacity: 0.9;
}

.fantasy-tree-node.origin.selected-path .fantasy-tree-node-circuit-ring,
.fantasy-tree-node.origin.selected .fantasy-tree-node-circuit-ring {
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 232, 165, 0.94) 0 4deg,
        transparent 4deg 15deg
    );
    opacity: 1;
}

.fantasy-tree-node.origin.selected .fantasy-tree-node-dot {
    outline-color: rgba(245, 214, 135, 0.78);
    box-shadow:
        inset 0 0 0 4px rgba(3, 5, 7, 0.82),
        inset 0 0 0 6px rgba(242, 204, 111, 0.2),
        0 0 0 3px rgba(119, 86, 29, 0.78),
        0 0 8px rgba(250, 218, 139, 0.46);
}

.fantasy-tree-node.junction:not(.root) .fantasy-tree-node-circuit-ring {
    inset: -8px;
    opacity: 0.78;
}

.fantasy-tree-node.leaf .fantasy-tree-node-circuit-ring {
    opacity: 0.42;
}

.fantasy-tree-stage-image-preview {
    position: absolute;
    z-index: 7;
    left: 12px;
    top: 12px;
    width: min(408px, calc(100% - 24px));
    max-height: calc(100% - 24px);
    padding: 10px 11px 11px;
    overflow: hidden auto;
    overscroll-behavior: contain;
    border: 1px solid rgba(103, 232, 249, 0.42);
    border-radius: 5px;
    background:
        linear-gradient(
            180deg,
            rgba(7, 24, 39, 0.98),
            rgba(3, 13, 27, 0.98) 32%
        );
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.46),
        0 0 0 1px rgba(4, 28, 45, 0.72),
        inset 0 1px 0 rgba(255, 246, 217, 0.12);
    color: #e6f9ff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-4px);
    transition:
        opacity 0.14s ease,
        transform 0.14s ease,
        visibility 0.14s ease;
}

.fantasy-tree-stage-image-preview.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fantasy-tree-stage-image-preview.pinned {
    border-color: rgba(255, 224, 148, 0.66);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.52),
        0 0 22px rgba(224, 173, 67, 0.18),
        inset 0 1px 0 rgba(255, 246, 217, 0.16);
}

.fantasy-tree-stage-preview-actions,
.fantasy-planet-overview-actions {
    display: none;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(103, 232, 249, 0.18);
}

.fantasy-tree-stage-preview-actions button,
.fantasy-planet-overview-actions button {
    display: inline-flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(103, 232, 249, 0.28);
    border-radius: 3px;
    background: rgba(5, 20, 33, 0.94);
    color: #b9dbe5;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    touch-action: manipulation;
}

.fantasy-tree-stage-preview-actions button:focus-visible,
.fantasy-planet-overview-actions button:focus-visible {
    outline: 2px solid rgba(103, 232, 249, 0.72);
    outline-offset: 2px;
}

.fantasy-tree-stage-preview-open,
.fantasy-planet-overview-open {
    border-color: rgba(255, 220, 132, 0.58) !important;
    background:
        linear-gradient(
            180deg,
            rgba(109, 75, 23, 0.74),
            rgba(49, 33, 13, 0.92)
        ) !important;
    color: #fff2c9 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 246, 217, 0.14),
        0 0 14px rgba(224, 173, 67, 0.1);
}

.fantasy-planet-overview-actions {
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 8px;
    margin-top: 12px;
    padding-top: 11px;
    border-top-color: rgba(0, 231, 255, 0.2);
}

.fantasy-planet-overview-actions button {
    position: relative;
    min-height: 44px;
    overflow: hidden;
    border-radius: 0;
    clip-path: polygon(
        0 7px,
        7px 0,
        calc(100% - 9px) 0,
        100% 9px,
        100% calc(100% - 7px),
        calc(100% - 7px) 100%,
        7px 100%,
        0 calc(100% - 7px)
    );
    border-color: rgba(0, 231, 255, 0.32);
    background:
        linear-gradient(90deg, rgba(0, 231, 255, 0.055), transparent 58%),
        rgba(2, 13, 23, 0.94);
    color: #add8e1;
    transition:
        transform 120ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fantasy-planet-overview-actions button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 8px;
    width: 28px;
    border-top: 1px solid rgba(0, 231, 255, 0.76);
    pointer-events: none;
}

.fantasy-planet-overview-actions button:active {
    transform: scale(0.98);
}

.fantasy-planet-overview-actions
.fantasy-planet-overview-open {
    border-color: rgba(250, 54, 216, 0.58) !important;
    background:
        linear-gradient(
            90deg,
            rgba(250, 54, 216, 0.14),
            rgba(0, 231, 255, 0.1)
        ),
        rgba(9, 12, 27, 0.96) !important;
    color: #f5fdff !important;
    box-shadow:
        inset 0 0 18px rgba(0, 231, 255, 0.055),
        0 0 14px rgba(250, 54, 216, 0.1);
}

.fantasy-planet-overview-actions
.fantasy-planet-overview-open::before {
    border-top-color: rgba(250, 54, 216, 0.82);
}

.fantasy-planet-overview-actions button:focus-visible {
    outline-color: rgba(0, 231, 255, 0.86);
}

/* Planet life archive crystal */
.fantasy-planet-overview {
    --planet-overview-cyan: #42d8ee;
    --planet-overview-magenta: #a57bd8;
    --planet-overview-crystal-overhang: 32px;
    --planet-overview-anchor-y: 28%;
    --planet-overview-stage-max-width: 620px;
    --planet-overview-stage-max-height: calc(100dvh - 24px);
    box-sizing: border-box;
    width: min(
        620px,
        calc(100vw - 32px),
        var(--planet-overview-stage-max-width)
    );
    max-height: min(
        calc(100dvh - 24px),
        var(--planet-overview-stage-max-height)
    );
    padding:
        var(--planet-overview-crystal-overhang)
        var(--planet-overview-crystal-overhang)
        calc(var(--planet-overview-crystal-overhang) + 6px);
    overflow: visible;
    clip-path: none;
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 8px, 0);
    filter:
        blur(4px)
        drop-shadow(0 24px 42px rgba(0, 0, 0, 0.58))
        drop-shadow(0 0 17px rgba(0, 231, 255, 0.1));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition:
        opacity 150ms cubic-bezier(0.4, 0, 1, 1),
        transform 170ms cubic-bezier(0.4, 0, 1, 1),
        filter 150ms cubic-bezier(0.4, 0, 1, 1),
        visibility 0s linear 170ms;
}

.fantasy-planet-overview::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: var(--planet-overview-anchor-y);
    width: 38px;
    height: 28px;
    pointer-events: none;
    background:
        linear-gradient(
            135deg,
            rgba(247, 255, 255, 0.86),
            rgba(79, 222, 238, 0.72) 24%,
            rgba(67, 103, 179, 0.48) 54%,
            rgba(154, 110, 204, 0.62) 79%,
            rgba(17, 26, 55, 0.12)
        );
    filter:
        drop-shadow(0 0 4px rgba(66, 222, 238, 0.58))
        drop-shadow(0 0 9px rgba(131, 101, 194, 0.24));
    opacity: 0.88;
}

.fantasy-planet-overview.is-anchor-right::before {
    left: 5px;
    clip-path: polygon(0 50%, 100% 0, 76% 50%, 100% 100%);
    transform: translate3d(-100%, -50%, 0);
}

.fantasy-planet-overview.is-anchor-left::before {
    right: 5px;
    clip-path: polygon(0 0, 100% 50%, 0 100%, 24% 50%);
    transform: translate3d(100%, -50%, 0);
}

.fantasy-planet-overview.visible {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    filter:
        blur(0)
        drop-shadow(0 24px 42px rgba(0, 0, 0, 0.58))
        drop-shadow(0 0 21px rgba(0, 231, 255, 0.16));
    transition:
        opacity 230ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 250ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 230ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}

.fantasy-planet-overview-crystal {
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    filter:
        drop-shadow(0 0 7px rgba(61, 217, 235, 0.42))
        drop-shadow(0 0 16px rgba(114, 88, 184, 0.2))
        drop-shadow(0 0 28px rgba(34, 112, 255, 0.14));
}

.fantasy-planet-overview-crystal-outline {
    opacity: 0.88;
}

.fantasy-planet-overview-crystal-inner {
    opacity: 0.66;
}

.fantasy-planet-overview-crystal-facets polygon {
    stroke-width: 0.88;
    opacity: 0.82;
}

.fantasy-planet-overview-crystal-rim polygon {
    stroke-width: 0.84;
    opacity: 0.8;
    filter:
        drop-shadow(0 0 2px rgba(241, 255, 255, 0.68))
        drop-shadow(0 0 6px rgba(66, 216, 234, 0.28));
}

.fantasy-planet-overview-crystal-rim polygon:nth-child(3n) {
    filter:
        drop-shadow(0 0 2px rgba(244, 240, 255, 0.68))
        drop-shadow(0 0 7px rgba(143, 103, 198, 0.24));
}

.fantasy-planet-overview-crystal-rim-cuts {
    opacity: 0.76;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 3px rgba(214, 249, 255, 0.42));
}

.fantasy-planet-overview-crystal-shards polygon {
    stroke-width: 0.86;
    opacity: 0.78;
    filter:
        drop-shadow(0 0 2px rgba(238, 255, 255, 0.58))
        drop-shadow(0 0 7px rgba(56, 209, 228, 0.24));
}

.fantasy-planet-overview-crystal-shards polygon:nth-child(2n) {
    filter:
        drop-shadow(0 0 2px rgba(243, 238, 255, 0.54))
        drop-shadow(0 0 7px rgba(137, 99, 190, 0.2));
}

.fantasy-planet-overview-crystal-planes {
    mix-blend-mode: screen;
}

.fantasy-planet-overview-crystal-rays {
    opacity: 0.76;
}

.fantasy-planet-overview-crystal-powerline {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
}

.fantasy-planet-overview.visible
.fantasy-planet-overview-crystal-powerline {
    animation:
        fantasyFxPlanetOverviewCrystalEnergize
        520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.fantasy-planet-overview-crystal-highlight {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.24;
}

@keyframes fantasyFxPlanetOverviewCrystalEnergize {
    0% {
        stroke-dashoffset: 1;
        opacity: 0;
    }
    16% {
        opacity: 0.92;
    }
    72% {
        opacity: 0.66;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

.fantasy-planet-overview-shell {
    position: relative;
    z-index: 2;
    display: grid;
    width: 100%;
    max-height: calc(var(--planet-overview-stage-max-height) - 50px);
    min-height: 0;
    overflow: hidden;
    clip-path: polygon(
        0 15px,
        15px 0,
        calc(100% - 38px) 0,
        100% 38px,
        100% calc(100% - 17px),
        calc(100% - 17px) 100%,
        31px 100%,
        0 calc(100% - 31px)
    );
    background:
        linear-gradient(rgba(0, 231, 255, 0.034) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 231, 255, 0.034) 1px, transparent 1px),
        radial-gradient(circle at 7% 8%, rgba(0, 231, 255, 0.15), transparent 34%),
        radial-gradient(circle at 94% 86%, rgba(250, 54, 216, 0.13), transparent 38%),
        linear-gradient(
            135deg,
            rgba(6, 28, 48, 0.97),
            rgba(2, 11, 22, 0.975) 48%,
            rgba(11, 8, 27, 0.97)
        );
    background-size: 20px 20px, 20px 20px, auto, auto, auto;
    box-shadow:
        inset 0 0 0 1px rgba(127, 244, 255, 0.58),
        inset -1px 0 0 rgba(250, 54, 216, 0.42),
        inset 0 0 42px rgba(0, 231, 255, 0.055),
        inset 0 -24px 48px rgba(40, 10, 77, 0.11),
        0 0 0 1px rgba(1, 8, 18, 0.84);
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

.fantasy-planet-overview-frame {
    z-index: 1;
    inset: 0;
    box-shadow:
        inset 0 0 0 1px rgba(0, 231, 255, 0.32),
        inset -1px 0 0 rgba(250, 54, 216, 0.24),
        inset 0 0 28px rgba(0, 231, 255, 0.035);
    background:
        linear-gradient(
            90deg,
            #eaffff,
            var(--planet-overview-cyan),
            transparent
        ) top left 14px / 150px 2px no-repeat,
        linear-gradient(
            90deg,
            transparent,
            var(--planet-overview-magenta),
            #fff4ff
        ) top right 38px / 96px 2px no-repeat,
        linear-gradient(
            180deg,
            var(--planet-overview-magenta),
            rgba(250, 54, 216, 0.08)
        ) right top 38px / 2px 118px no-repeat,
        linear-gradient(
            90deg,
            rgba(0, 231, 255, 0.08),
            var(--planet-overview-cyan),
            rgba(250, 54, 216, 0.34)
        ) bottom left 31px / 170px 2px no-repeat;
}

.fantasy-planet-overview-frame::before {
    top: 9px;
    right: 30px;
    width: 104px;
    height: 6px;
    border-top-color: rgba(250, 54, 216, 0.7);
    opacity: 0.82;
}

.fantasy-planet-overview-frame::after {
    left: 9px;
    bottom: 25px;
    height: 78px;
    background:
        repeating-linear-gradient(
            180deg,
            rgba(0, 231, 255, 0.86) 0 7px,
            transparent 7px 13px
        );
    box-shadow:
        0 0 9px rgba(0, 231, 255, 0.34),
        0 42px 0 rgba(250, 54, 216, 0.38);
}

.fantasy-planet-overview-content {
    z-index: 3;
    box-sizing: border-box;
    max-height: calc(var(--planet-overview-stage-max-height) - 50px);
    min-height: 0;
    padding: 18px 20px 20px;
    overflow: hidden auto;
    scrollbar-gutter: stable;
}

.fantasy-planet-overview-kicker {
    padding: 0 2px 10px;
    border-bottom-color: rgba(0, 231, 255, 0.28);
    font-size: 10px;
}

.fantasy-planet-overview-trace {
    gap: 8px;
    letter-spacing: 1.6px;
}

.fantasy-planet-overview-trace i {
    width: 7px;
    height: 7px;
    background:
        linear-gradient(135deg, #ffffff, var(--planet-overview-cyan) 45%, #1681ff);
    box-shadow:
        0 0 0 2px rgba(0, 231, 255, 0.09),
        0 0 12px rgba(0, 231, 255, 0.66);
}

.fantasy-planet-overview-status {
    color: #ff9ff0;
    text-shadow: 0 0 10px rgba(250, 54, 216, 0.26);
}

.fantasy-planet-overview strong {
    margin-top: 12px;
    color: #f4feff;
    font-size: 18px;
    line-height: 1.4;
    text-shadow:
        0 0 16px rgba(0, 231, 255, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.08);
}

.fantasy-planet-overview-meta {
    margin-top: 12px;
    border-top-color: rgba(0, 231, 255, 0.25);
    border-bottom-color: rgba(0, 231, 255, 0.25);
    background:
        linear-gradient(
            90deg,
            rgba(0, 231, 255, 0.06),
            rgba(22, 66, 110, 0.025) 52%,
            rgba(250, 54, 216, 0.045)
        );
    box-shadow: inset 0 0 18px rgba(0, 231, 255, 0.025);
}

.fantasy-planet-overview-meta > div {
    padding: 8px 10px 9px;
    border-right-color: rgba(0, 231, 255, 0.18);
}

.fantasy-planet-overview-meta dt {
    color: rgba(91, 223, 240, 0.78);
    font-size: 9px;
}

.fantasy-planet-overview-meta dd {
    margin-top: 4px;
    color: #e8fcff;
    font-size: 12px;
}

.fantasy-planet-overview-summary {
    margin-top: 12px;
    padding: 11px 12px 12px;
    border-top: 1px solid rgba(0, 231, 255, 0.08);
    border-right: 1px solid rgba(250, 54, 216, 0.08);
    border-bottom: 1px solid rgba(0, 231, 255, 0.1);
    border-left-width: 2px;
    background:
        linear-gradient(90deg, rgba(0, 231, 255, 0.075), transparent 76%),
        rgba(1, 8, 16, 0.58);
    box-shadow: inset 0 0 20px rgba(0, 231, 255, 0.025);
}

.fantasy-planet-overview-section-label {
    font-size: 9px;
    letter-spacing: 1.05px;
}

.fantasy-planet-overview p {
    margin-top: 7px;
    color: #d7edf2;
    font-size: 13px;
    line-height: 1.68;
    -webkit-line-clamp: 5;
}

.fantasy-planet-overview-summary-loading {
    min-height: 72px;
    padding-top: 9px;
}

.fantasy-planet-overview-summary-loading-copy {
    font-size: 11px;
}

.fantasy-planet-overview-image {
    margin-top: 13px;
    overflow: visible;
    border-color: rgba(67, 218, 235, 0.32);
    clip-path: none;
    background:
        linear-gradient(rgba(0, 231, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 231, 255, 0.055) 1px, transparent 1px),
        radial-gradient(circle at 50% 46%, rgba(0, 231, 255, 0.09), transparent 47%),
        rgba(1, 8, 18, 0.96);
    background-size: 20px 20px, 20px 20px, auto, auto;
    box-shadow:
        inset 0 0 0 1px rgba(225, 254, 255, 0.08),
        inset 0 0 34px rgba(0, 0, 0, 0.42),
        0 0 14px rgba(0, 194, 218, 0.04),
        -8px 0 20px -15px rgba(51, 194, 214, 0.42),
        8px 0 20px -15px rgba(133, 100, 190, 0.32);
}

.fantasy-planet-overview-image img,
.fantasy-planet-overview-image-skeleton,
.fantasy-planet-overview-image-fallback {
    clip-path: polygon(
        0 10px,
        10px 0,
        calc(100% - 20px) 0,
        100% 20px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%
    );
}

.fantasy-planet-overview-image::before {
    inset: 8px;
    background:
        linear-gradient(#efffff, var(--planet-overview-cyan)) left top / 24px 1px no-repeat,
        linear-gradient(#efffff, var(--planet-overview-cyan)) left top / 1px 24px no-repeat,
        linear-gradient(var(--planet-overview-magenta), #f3efff) right top / 24px 1px no-repeat,
        linear-gradient(var(--planet-overview-magenta), #f3efff) right top / 1px 24px no-repeat,
        linear-gradient(var(--planet-overview-cyan), #efffff) left bottom / 24px 1px no-repeat,
        linear-gradient(var(--planet-overview-cyan), #efffff) left bottom / 1px 24px no-repeat,
        linear-gradient(#f3efff, var(--planet-overview-magenta)) right bottom / 24px 1px no-repeat,
        linear-gradient(#f3efff, var(--planet-overview-magenta)) right bottom / 1px 24px no-repeat;
    opacity: 0.32;
}

.fantasy-planet-overview-image-crystal {
    position: absolute;
    z-index: 5;
    inset: -5px;
    overflow: visible;
    pointer-events: none;
    filter:
        drop-shadow(0 0 3px rgba(53, 195, 214, 0.16))
        drop-shadow(0 0 7px rgba(119, 91, 172, 0.09));
}

.fantasy-planet-overview-image-crystal-svg {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.fantasy-planet-overview-image-crystal-rim polygon {
    fill-opacity: 0.2;
    stroke-width: 0.62;
    stroke-opacity: 0.58;
    stroke-dasharray: 13 6 2 9;
    opacity: 0.74;
    filter:
        drop-shadow(0 0 1px rgba(241, 255, 255, 0.42))
        drop-shadow(0 0 4px rgba(62, 191, 209, 0.14));
}

.fantasy-planet-overview-image-crystal-rim polygon:nth-child(3n) {
    fill-opacity: 0.26;
    stroke-opacity: 0.68;
    filter:
        drop-shadow(0 0 1px rgba(245, 240, 255, 0.4))
        drop-shadow(0 0 4px rgba(130, 96, 176, 0.14));
}

.fantasy-planet-overview-image-crystal-cuts {
    opacity: 0.26;
    mix-blend-mode: screen;
    stroke-dasharray: 4 7 15 9;
    filter: drop-shadow(0 0 2px rgba(221, 247, 255, 0.24));
}

.fantasy-planet-overview-image-crystal-line {
    position: absolute;
    display: block;
    pointer-events: none;
}

.fantasy-planet-overview-image-crystal-line {
    right: 34px;
    left: 34px;
    height: 1px;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(76, 197, 214, 0.42) 0 18px,
            transparent 18px 28px,
            rgba(231, 249, 252, 0.38) 28px 31px,
            transparent 31px 46px,
            rgba(132, 102, 181, 0.34) 46px 60px,
            transparent 60px 72px
        );
    opacity: 0.4;
    filter: drop-shadow(0 0 2px rgba(65, 190, 207, 0.18));
}

.fantasy-planet-overview-image-crystal-line.is-top {
    top: 5px;
}

.fantasy-planet-overview-image-crystal-line.is-bottom {
    bottom: 5px;
    transform: scaleX(-1);
}

.fantasy-planet-overview-image-fallback {
    display: none;
    overflow: hidden;
    background:
        linear-gradient(
            180deg,
            transparent 0 46%,
            rgba(0, 231, 255, 0.08) 46% 47%,
            transparent 47% 100%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(0, 231, 255, 0.032) 0 1px,
            transparent 1px 6px
        ),
        radial-gradient(circle, rgba(0, 231, 255, 0.1), transparent 46%),
        rgba(1, 8, 18, 0.78);
}

.fantasy-planet-overview-image-fallback::before {
    content: "";
    width: min(280px, 72%);
    height: 54px;
    grid-column: 1;
    grid-row: 1;
    background:
        linear-gradient(
            90deg,
            transparent 0 2%,
            rgba(0, 231, 255, 0.72) 2% 4%,
            transparent 4% 10%,
            rgba(250, 54, 216, 0.62) 10% 12%,
            transparent 12% 18%
        );
    background-size: 64px 100%;
    clip-path: polygon(
        0 52%,
        8% 52%,
        12% 30%,
        16% 72%,
        22% 18%,
        28% 82%,
        34% 42%,
        40% 58%,
        48% 24%,
        56% 76%,
        63% 46%,
        72% 54%,
        80% 34%,
        87% 68%,
        92% 52%,
        100% 52%,
        100% 56%,
        92% 56%,
        87% 72%,
        80% 38%,
        72% 58%,
        63% 50%,
        56% 80%,
        48% 28%,
        40% 62%,
        34% 46%,
        28% 86%,
        22% 22%,
        16% 76%,
        12% 34%,
        8% 56%,
        0 56%
    );
    filter:
        drop-shadow(0 0 5px rgba(0, 231, 255, 0.42))
        drop-shadow(0 0 8px rgba(250, 54, 216, 0.2));
    opacity: 0.72;
}

.fantasy-planet-overview-image-fallback i,
.fantasy-planet-overview-image-fallback > span {
    position: relative;
    z-index: 2;
    grid-column: 1;
}

.fantasy-planet-overview-image-fallback i {
    grid-row: 2;
    margin-top: -7px;
}

.fantasy-planet-overview-image-fallback > span {
    grid-row: 3;
}

.fantasy-planet-overview-image.is-acquiring
.fantasy-planet-overview-image-fallback,
.fantasy-planet-overview-image.is-missing
.fantasy-planet-overview-image-fallback,
.fantasy-planet-overview-image.load-failed
.fantasy-planet-overview-image-fallback {
    display: grid;
}

.fantasy-planet-overview-image.is-acquiring
.fantasy-planet-overview-image-fallback {
    background-color: rgba(1, 8, 18, 0.46);
}

.fantasy-planet-overview-image.is-acquiring
.fantasy-planet-overview-image-fallback::before {
    animation:
        fantasyFxPlanetOverviewCrystalSignal
        1.8s linear infinite;
}

.fantasy-planet-overview-image-skeleton {
    background:
        linear-gradient(
            105deg,
            transparent 34%,
            rgba(0, 231, 255, 0.17) 48%,
            rgba(250, 54, 216, 0.12) 52%,
            transparent 66%
        ),
        radial-gradient(circle at center, rgba(0, 231, 255, 0.09), transparent 48%),
        rgba(3, 16, 28, 0.9);
    background-size: 220% 100%;
    animation:
        fantasyFxPlanetOverviewCrystalArchiveLoading
        1.6s linear infinite;
}

@keyframes fantasyFxPlanetOverviewCrystalArchiveLoading {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

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

.fantasy-planet-overview-image figcaption {
    min-height: 40px;
    padding: 17px 11px 8px;
    color: rgba(224, 252, 255, 0.88);
    font-size: 9px;
    letter-spacing: 0.8px;
}

.fantasy-planet-overview-actions {
    margin-top: 14px;
    padding-top: 13px;
}

.fantasy-planet-overview-actions button {
    min-height: 46px;
}

.fantasy-planet-overview:not(.visible)
.fantasy-planet-overview-crystal-powerline,
.fantasy-planet-overview:not(.visible)
.fantasy-planet-overview-crystal-highlight,
#fantasy-workbench.fantasy-fx-page-hidden
.fantasy-planet-overview-crystal-powerline,
#fantasy-workbench.fantasy-fx-page-hidden
.fantasy-planet-overview-crystal-highlight,
#fantasy-workbench.fantasy-fx-page-hidden
.fantasy-planet-overview-summary-skeleton i,
#fantasy-workbench.fantasy-fx-page-hidden
.fantasy-planet-overview-image-skeleton,
#fantasy-workbench.fantasy-fx-page-hidden
.fantasy-planet-overview-image-fallback::before {
    animation-play-state: paused !important;
}

.fantasy-planet-overview:not(.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
),
#fantasy-workbench.fantasy-fx-page-hidden
.fantasy-planet-overview
.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-play-state: paused !important;
    will-change: auto;
}

.fantasy-planet-overview.is-awaiting-overview-ready {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}

.fantasy-planet-overview.is-prewarmed
.fantasy-planet-overview-summary-loading,
.fantasy-planet-overview.is-cache-preview
.fantasy-planet-overview-summary-loading,
.fantasy-planet-overview.is-prewarmed
.fantasy-planet-overview-summary-skeleton,
.fantasy-planet-overview.is-cache-preview
.fantasy-planet-overview-summary-skeleton,
.fantasy-planet-overview.is-prewarmed
.fantasy-planet-overview-image-skeleton,
.fantasy-planet-overview.is-cache-preview
.fantasy-planet-overview-image-skeleton {
    display: none !important;
    animation: none !important;
}

.fantasy-planet-overview.is-prewarmed
.fantasy-planet-overview-image.is-static-preview,
.fantasy-planet-overview.is-cache-preview
.fantasy-planet-overview-image.is-static-preview {
    background:
        linear-gradient(rgba(0, 231, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 231, 255, 0.035) 1px, transparent 1px),
        radial-gradient(
            circle at 50% 46%,
            rgba(0, 231, 255, 0.065),
            transparent 48%
        ),
        rgba(1, 8, 18, 0.94);
    background-size: 20px 20px, 20px 20px, auto, auto;
}

.fantasy-planet-overview.is-prewarmed
.fantasy-planet-overview-image.is-static-preview
.fantasy-planet-overview-image-fallback,
.fantasy-planet-overview.is-cache-preview
.fantasy-planet-overview-image.is-static-preview
.fantasy-planet-overview-image-fallback {
    display: grid;
    background:
        radial-gradient(
            circle,
            rgba(0, 231, 255, 0.055),
            transparent 46%
        ),
        rgba(1, 8, 18, 0.72);
}

.fantasy-planet-overview.is-prewarmed
.fantasy-planet-overview-image.is-static-preview
.fantasy-planet-overview-image-fallback::before,
.fantasy-planet-overview.is-cache-preview
.fantasy-planet-overview-image.is-static-preview
.fantasy-planet-overview-image-fallback::before {
    animation: none !important;
    background-position: 50% 0;
    opacity: 0.34;
}

.fantasy-planet-overview.is-prewarmed
.fantasy-planet-overview-image.is-loaded::after,
.fantasy-planet-overview.is-cache-preview
.fantasy-planet-overview-image.is-loaded::after {
    display: none;
    animation: none !important;
}

.fantasy-planet-overview.is-prewarmed
.fantasy-planet-overview-image img,
.fantasy-planet-overview.is-cache-preview
.fantasy-planet-overview-image img {
    transition: none !important;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    .fantasy-planet-overview.is-prewarmed
    .fantasy-planet-overview-image.is-static-preview
    .fantasy-planet-overview-image-fallback,
    .fantasy-planet-overview.is-cache-preview
    .fantasy-planet-overview-image.is-static-preview
    .fantasy-planet-overview-image-fallback {
        background:
            radial-gradient(
                circle,
                rgba(0, 231, 255, 0.045),
                transparent 46%
            ),
            rgba(1, 8, 18, 0.78);
    }

    .fantasy-planet-overview.is-prewarmed
    .fantasy-planet-overview-image.is-static-preview
    .fantasy-planet-overview-image-fallback::before,
    .fantasy-planet-overview.is-cache-preview
    .fantasy-planet-overview-image.is-static-preview
    .fantasy-planet-overview-image-fallback::before {
        opacity: 0.2;
        filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fantasy-planet-overview,
    .fantasy-planet-overview.visible {
        transform: none;
        transition: none !important;
    }

    .fantasy-planet-overview-crystal-powerline,
    .fantasy-planet-overview-crystal-highlight,
    .fantasy-planet-overview-summary-skeleton i,
    .fantasy-planet-overview-image-skeleton,
    .fantasy-planet-overview-image-fallback::before {
        animation: none !important;
    }

    .fantasy-planet-overview-crystal-highlight {
        stroke-dashoffset: 0;
        opacity: 0.28;
    }

    .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: none !important;
        opacity: 0;
        filter: none;
        will-change: auto;
    }

    .fantasy-planet-overview.is-prewarmed
    .fantasy-planet-overview-image-fallback::before,
    .fantasy-planet-overview.is-cache-preview
    .fantasy-planet-overview-image-fallback::before {
        animation: none !important;
    }
}

.fantasy-tree-stage-preview-head {
    min-width: 0;
}

.fantasy-tree-stage-preview-kicker {
    display: block;
    margin-bottom: 4px;
    color: #68e8f6;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.fantasy-tree-stage-preview-head strong {
    display: -webkit-box;
    overflow: hidden;
    color: #fff6d9;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: unset;
}

.fantasy-tree-stage-preview-stage-title {
    display: block;
    margin-top: 4px;
    color: #a6c4d4;
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

@media (min-width: 861px) {
    .fantasy-tree-stage-preview-head strong {
        font-size: 22.4px;
    }
}

.fantasy-tree-stage-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 0;
    margin-top: 4px;
    color: #a6c4d4;
    font-size: 11px;
    line-height: 1.4;
}

.fantasy-tree-stage-preview-meta > span {
    white-space: nowrap;
}

.fantasy-tree-stage-preview-meta > span:not(:last-child)::after {
    content: " · ";
    color: rgba(166, 196, 212, 0.58);
    white-space: pre;
}

.fantasy-tree-stage-summary {
    display: -webkit-box;
    margin: 9px 0 0;
    overflow: hidden;
    color: #d7eaf0;
    font-size: 12px;
    line-height: 1.64;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
}

.fantasy-tree-stage-summary-skeleton {
    display: grid;
    gap: 6px;
    margin-top: 11px;
    padding: 2px 0;
}

.fantasy-tree-stage-summary-skeleton i {
    display: block;
    width: 100%;
    height: 8px;
    background:
        linear-gradient(
            100deg,
            rgba(103, 232, 249, 0.08) 24%,
            rgba(255, 246, 217, 0.16) 48%,
            rgba(103, 232, 249, 0.08) 72%
        );
    background-size: 220% 100%;
    animation: fantasyTreeStagePreviewLoading 1.8s ease-in-out infinite;
}

.fantasy-tree-stage-summary-skeleton i:nth-child(2) {
    width: 94%;
}

.fantasy-tree-stage-summary-skeleton i:nth-child(3) {
    width: 68%;
}

.fantasy-tree-stage-image {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 10px 0 0;
    overflow: hidden;
    border: 1px solid rgba(103, 232, 249, 0.22);
    border-radius: 3px;
    background: rgba(1, 8, 18, 0.92);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 246, 217, 0.08);
}

.fantasy-tree-stage-image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.16s ease;
}

.fantasy-tree-stage-image.is-loaded img {
    opacity: 1;
}

.fantasy-tree-stage-image-fallback {
    position: absolute;
    inset: 0;
    display: none;
    place-items: center;
    color: rgba(166, 196, 212, 0.68);
    font-size: 11px;
    letter-spacing: 0;
}

.fantasy-tree-stage-image.load-failed img {
    display: none;
}

.fantasy-tree-stage-image.load-failed .fantasy-tree-stage-image-fallback {
    display: grid;
}

.fantasy-tree-stage-image-skeleton {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            105deg,
            transparent 35%,
            rgba(103, 232, 249, 0.12) 48%,
            rgba(255, 246, 217, 0.1) 52%,
            transparent 65%
        ),
        rgba(7, 22, 36, 0.78);
    background-size: 220% 100%;
    animation: fantasyTreeStageImageLoading 1.8s ease-in-out infinite;
}

.fantasy-tree-stage-image:not(.is-loading)
.fantasy-tree-stage-image-skeleton {
    display: none;
}

@keyframes fantasyTreeStagePreviewLoading {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@keyframes fantasyTreeStageImageLoading {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (hover: none), (pointer: coarse) {
    .fantasy-planet-overview {
        --planet-overview-crystal-overhang: 14px;
        --planet-overview-stage-max-height:
            min(82dvh, calc(100dvh - 72px));
        z-index: 85;
        left: 50% !important;
        right: auto;
        top: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom));
        width: calc(100vw - 24px);
        max-width: 620px;
        max-height: var(--planet-overview-stage-max-height);
        padding:
            var(--planet-overview-crystal-overhang)
            var(--planet-overview-crystal-overhang)
            calc(var(--planet-overview-crystal-overhang) + 6px);
        pointer-events: none;
        transform: translate3d(-50%, 10px, 0);
        transform-origin: center bottom !important;
    }

    .fantasy-planet-overview::before {
        display: none;
    }

    .fantasy-planet-overview.visible.pinned {
        pointer-events: auto;
        transform: translate3d(-50%, 0, 0);
    }

    .fantasy-planet-overview-shell,
    .fantasy-planet-overview-content {
        max-height:
            calc(var(--planet-overview-stage-max-height) - 34px);
    }

    .fantasy-planet-overview-crystal-facets polygon {
        opacity: 0.62;
    }

    .fantasy-planet-overview.pinned
    .fantasy-planet-overview-actions {
        display: grid;
    }

    .fantasy-planet-overview-content {
        padding: 15px 16px 16px;
    }

    .fantasy-planet-overview-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fantasy-planet-overview-meta > div {
        border-bottom: 1px solid rgba(0, 231, 255, 0.12);
    }

    .fantasy-planet-overview-meta > div:nth-child(2n) {
        border-right: 0;
    }

    .fantasy-planet-overview-meta > div:nth-last-child(-n + 2) {
        border-bottom: 0;
    }

    .fantasy-planet-overview p {
        font-size: 12px;
        -webkit-line-clamp: 4;
    }

    .fantasy-planet-overview-image {
        margin-top: 10px;
    }

    .fantasy-tree-stage-image-preview {
        position: fixed;
        z-index: 85;
        left: 50% !important;
        right: auto;
        top: auto !important;
        bottom: max(12px, env(safe-area-inset-bottom));
        width: min(360px, calc(100vw - 24px));
        max-height: min(72dvh, calc(100dvh - 96px));
        padding: 11px;
        pointer-events: none;
        transform: translate(-50%, 12px);
    }

    .fantasy-tree-stage-image-preview.visible.pinned {
        pointer-events: auto;
        transform: translate(-50%, 0);
    }

    .fantasy-tree-stage-image-preview .fantasy-tree-stage-summary {
        -webkit-line-clamp: 3;
    }

    .fantasy-tree-stage-image-preview .fantasy-tree-stage-image {
        margin-top: 8px;
    }

    .fantasy-tree-stage-image-preview.pinned
    .fantasy-tree-stage-preview-actions {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fantasy-tree-stage-image-preview {
        transition: none !important;
    }

    .fantasy-tree-stage-image-skeleton {
        animation: none;
        background-position: 50% 0;
    }

    .fantasy-tree-stage-summary-skeleton i {
        animation: none;
        background-position: 50% 0;
    }
}

.fantasy-tree-node.current .fantasy-tree-node-dot {
    border-color: rgba(176, 135, 53, 0.96);
    box-shadow:
        inset 0 0 0 2px rgba(4, 6, 8, 0.82),
        inset 0 0 0 3px rgba(181, 139, 55, 0.12),
        0 0 4px rgba(175, 132, 46, 0.24);
}

.fantasy-tree-node.current-path .fantasy-tree-node-dot {
    border-color: rgba(159, 120, 44, 0.96);
    box-shadow:
        inset 0 0 0 2px rgba(4, 6, 8, 0.82),
        inset 0 0 0 3px rgba(180, 136, 49, 0.12),
        0 0 4px rgba(154, 113, 37, 0.22);
}

.fantasy-tree-node.selected-path .fantasy-tree-node-dot {
    border-color: #f5dc9a;
    box-shadow:
        inset 0 0 0 2px rgba(4, 6, 8, 0.78),
        inset 0 0 0 3px rgba(250, 222, 151, 0.18),
        0 0 6px rgba(244, 212, 133, 0.4);
}

.fantasy-tree-node.current-path.selected-path .fantasy-tree-node-dot {
    border-color: #f8e2a4;
    box-shadow:
        inset 0 0 0 2px rgba(4, 6, 8, 0.78),
        inset 0 0 0 3px rgba(248, 218, 139, 0.18),
        0 0 0 2px rgba(137, 101, 34, 0.72),
        0 0 6px rgba(239, 204, 119, 0.42);
}

.fantasy-tree-node.selected .fantasy-tree-node-dot {
    border-color: #fff1bf;
    box-shadow:
        inset 0 0 0 2px rgba(4, 6, 8, 0.72),
        inset 0 0 0 3px rgba(255, 232, 169, 0.24),
        0 0 0 2px rgba(238, 201, 112, 0.28),
        0 0 7px rgba(255, 225, 151, 0.52);
}

.fantasy-tree-node.selected .fantasy-tree-node-dot::after,
.fantasy-tree-node.selected-path .fantasy-tree-node-dot::after {
    background: repeating-conic-gradient(
        from 7deg,
        rgba(255, 244, 209, 0.96) 0 5deg,
        transparent 5deg 20deg
    );
}

.fantasy-tree-node.current-path .fantasy-tree-node-dot::after {
    background: repeating-conic-gradient(
        from 7deg,
        rgba(198, 154, 65, 0.76) 0 4deg,
        transparent 4deg 22deg
    );
}

.fantasy-tree-node.current-path.selected-path .fantasy-tree-node-dot::after {
    background: repeating-conic-gradient(
        from 7deg,
        rgba(255, 244, 209, 0.98) 0 5deg,
        transparent 5deg 20deg
    );
}

.fantasy-tree-node.selected .fantasy-tree-node-dot::before,
.fantasy-tree-node.selected-path .fantasy-tree-node-dot::before {
    background: #f8dda0;
    box-shadow: 0 0 5px rgba(255, 225, 154, 0.76);
}

@keyframes fantasyTreeRootOrbit {
    to { transform: rotate(360deg); }
}

@keyframes fantasyTreeCoreDrift {
    0%, 100% { transform: translate(-50%, -50%); }
    34% { transform: translate(calc(-50% + 1.2px), calc(-50% - 0.8px)); }
    68% { transform: translate(calc(-50% - 0.9px), calc(-50% + 1.1px)); }
}

.fantasy-tree-node-particles {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.fantasy-tree-node-particles i {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5px;
    height: 1.5px;
    border-radius: 50%;
    background: #d8a846;
    box-shadow: 0 0 2px rgba(224, 173, 67, 0.58);
    transform: rotate(var(--particle-angle)) translateX(var(--particle-distance));
    transform-origin: 0 0;
    opacity: 0.18;
    animation: fantasyTreeParticleSignal 7.6s ease-in-out var(--particle-delay) infinite;
}

@keyframes fantasyTreeCorePulse {
    0%, 100% { opacity: 0.72; }
    50% { opacity: 1; }
}

@keyframes fantasyTreeParticleSignal {
    0%, 78%, 100% { opacity: 0.12; }
    84% { opacity: 0.72; }
    89% { opacity: 0.24; }
}

@keyframes fantasyTreeAmbientFlicker {
    0%, 76%, 100% { opacity: calc(var(--ambient-opacity, 0.3) * 0.45); }
    82% { opacity: var(--ambient-opacity, 0.3); }
    88% { opacity: calc(var(--ambient-opacity, 0.3) * 0.62); }
}

.fantasy-tree-node.status-generating .fantasy-tree-node-dot,
.fantasy-tree-node.status-skill_failed .fantasy-tree-node-dot {
    border-color: var(--forge-magenta);
}

.fantasy-tree-node-age {
    position: absolute;
    left: 50%;
    top: calc(50% + var(--node-radius, 10px) + 7px);
    display: block;
    min-width: 72px;
    transform: translateX(-50%);
    color: var(--forge-cyan);
    font-size: 9px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
    text-shadow: 0 1px 4px #01070d, 0 0 5px #01070d;
    opacity: 0;
    visibility: hidden;
    transition: opacity 120ms ease, visibility 120ms ease;
}

.fantasy-tree-node:hover .fantasy-tree-node-age,
.fantasy-tree-node:focus-visible .fantasy-tree-node-age,
.fantasy-tree-node.current .fantasy-tree-node-age,
.fantasy-tree-node.selected .fantasy-tree-node-age {
    opacity: 1;
    visibility: visible;
}

.fantasy-tree-node.origin .fantasy-tree-node-age,
.fantasy-tree-origin .fantasy-tree-node-age {
    top: calc(50% + var(--node-radius, 36px) + 10px);
    min-width: 110px;
    color: #d9b35d;
    font-size: 10px;
}

.fantasy-tree-node-current {
    position: absolute;
    left: 50%;
    bottom: calc(50% + var(--node-radius, 10px) + 6px);
    padding: 1px 4px;
    transform: translateX(-50%);
    background: rgba(255, 225, 90, 0.16);
    color: var(--forge-yellow);
    font-size: 8px;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.fantasy-tree-node.origin .fantasy-tree-node-current,
.fantasy-tree-origin .fantasy-tree-node-current {
    bottom: calc(50% + var(--node-radius, 36px) + 7px);
}

.fantasy-tree-empty-crown {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 68px;
    width: min(420px, calc(100% - 48px));
    display: grid;
    justify-items: center;
    gap: 9px;
    transform: translateX(-50%);
    color: rgba(188, 181, 160, 0.78);
    text-align: center;
    pointer-events: auto;
}

.fantasy-tree-empty-crown::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 14px);
    width: 1px;
    height: 54px;
    background: linear-gradient(
        180deg,
        rgba(209, 157, 58, 0.52),
        rgba(112, 80, 29, 0.12)
    );
    transform: translateX(-50%);
}

.fantasy-tree-empty-crown::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 66px);
    width: 5px;
    height: 5px;
    border: 1px solid rgba(203, 151, 52, 0.74);
    border-radius: 50%;
    background: #0a0d0f;
    box-shadow: 0 0 4px rgba(210, 156, 52, 0.26);
    transform: translate(-50%, -50%);
}

.fantasy-tree-empty-crown > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(167, 120, 39, 0.58);
    border-radius: 50%;
    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(183, 134, 43, 0.26) 0 5deg,
            transparent 5deg 30deg
        ),
        #080b0d;
    color: #c79845;
    box-shadow: inset 0 0 0 4px #06090b, 0 0 5px rgba(188, 134, 41, 0.2);
    animation: fantasyTreeDormantPulse 6.8s ease-in-out infinite;
}

.fantasy-tree-empty-crown strong {
    color: rgba(226, 207, 160, 0.92);
    font-size: 14px;
    letter-spacing: 0;
}

.fantasy-tree-empty-crown span {
    max-width: 360px;
    color: rgba(151, 167, 166, 0.72);
    font-size: 11px;
    line-height: 1.65;
}

.fantasy-tree-empty-crown .fantasy-action-btn {
    min-height: 32px;
    margin-top: 3px;
    border-color: rgba(181, 130, 40, 0.56);
    background: rgba(118, 80, 24, 0.12);
    color: #d1aa58;
    box-shadow: inset 0 -1px 0 rgba(207, 157, 57, 0.2);
}

.fantasy-tree-empty-crown .fantasy-action-btn:hover,
.fantasy-tree-empty-crown .fantasy-action-btn:focus-visible {
    border-color: rgba(222, 172, 74, 0.82);
    background: rgba(145, 99, 31, 0.18);
    color: #ecd28f;
}

@keyframes fantasyTreeDormantPulse {
    0%, 100% { opacity: 0.64; }
    50% { opacity: 0.96; }
}

.fantasy-tree-state {
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--forge-muted);
    font-size: 13px;
}

.fantasy-tree-state.error {
    color: #ff9bee;
}

.fantasy-tree-timeline-panel {
    position: absolute;
    z-index: 9;
    top: 12px;
    right: 12px;
    bottom: 12px;
    width: min(340px, calc(100% - 24px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    border: 1px solid rgba(0, 231, 255, 0.42);
    background: rgba(2, 10, 18, 0.98);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.56);
}

.fantasy-tree-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0, 231, 255, 0.18);
}

.fantasy-tree-timeline-head strong,
.fantasy-tree-timeline-head span {
    display: block;
}

.fantasy-tree-timeline-head strong {
    color: var(--forge-text);
    font-size: 13px;
}

.fantasy-tree-timeline-head span {
    margin-top: 3px;
    color: var(--forge-muted);
    font-size: 10px;
}

.fantasy-tree-timeline-groups {
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
}

.fantasy-tree-timeline-group {
    border-bottom: 1px solid rgba(0, 231, 255, 0.1);
}

.fantasy-tree-timeline-group summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 8px;
    color: var(--forge-text);
    cursor: pointer;
    font-size: 11px;
}

.fantasy-tree-timeline-group summary span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fantasy-tree-timeline-group summary em {
    flex: 0 0 auto;
    color: var(--forge-muted);
    font-size: 9px;
    font-style: normal;
}

.fantasy-tree-timeline-path {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 8px 10px;
}

.fantasy-tree-timeline-path button {
    min-height: 28px;
    padding: 4px 7px;
    border: 1px solid rgba(0, 231, 255, 0.22);
    background: rgba(0, 231, 255, 0.05);
    color: #a7edf5;
    font-size: 9px;
    cursor: pointer;
}

.fantasy-tree-timeline-path button:hover,
.fantasy-tree-timeline-path button:focus-visible {
    border-color: var(--forge-magenta);
    outline: none;
}

.fantasy-tree-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 12px;
}

.fantasy-tree-detail-meta span {
    padding: 3px 7px;
    border: 1px solid rgba(0, 231, 255, 0.26);
    background: rgba(0, 231, 255, 0.07);
    color: #a7edf5;
    font-size: 10px;
}

.fantasy-setting-block.warning {
    border-left-color: #ffe15a;
    background: rgba(255, 225, 90, 0.06);
}

.fantasy-tree-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0;
}

.fantasy-action-btn.danger {
    border-color: rgba(248, 113, 113, 0.52);
    color: #fca5a5;
}

.fantasy-tree-dialog-overlay {
    --forge-bg: #02070d;
    --forge-panel: rgba(4, 13, 23, 0.92);
    --forge-panel-strong: rgba(3, 10, 18, 0.97);
    --forge-cyan: #00e7ff;
    --forge-cyan-soft: rgba(0, 231, 255, 0.18);
    --forge-magenta: #fa36d8;
    --forge-magenta-soft: rgba(250, 54, 216, 0.16);
    --forge-yellow: #ffe15a;
    --forge-text: #d9f7fb;
    --forge-muted: #78a0aa;
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    overscroll-behavior: contain;
    padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
    background: rgba(0, 3, 8, 0.76);
    color: var(--forge-text);
    backdrop-filter: blur(5px);
    font-family: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
    pointer-events: auto;
}

.fantasy-tree-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(560px, 100%);
    max-height: min(760px, calc(100dvh - 36px));
    overflow: hidden;
    border: 1px solid rgba(0, 231, 255, 0.56);
    background: rgba(2, 10, 18, 0.99);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62), 0 0 28px rgba(0, 231, 255, 0.1);
    clip-path: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
}

.fantasy-tree-dialog > .fantasy-drawer-head {
    flex: 0 0 auto;
}

.fantasy-tree-dialog-body {
    display: grid;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    gap: 15px;
    padding: 18px;
}

body.fantasy-tree-dialog-open {
    overflow: hidden;
}

body.fantasy-tree-dialog-open #view-memory.fantasy-memory-view > .flex-1 {
    overflow: hidden !important;
}

.fantasy-tree-field {
    display: grid;
    gap: 8px;
    color: var(--forge-muted);
    font-size: 11px;
    font-weight: 800;
}

.fantasy-tree-field select {
    min-height: 40px;
    border: 1px solid rgba(0, 231, 255, 0.3);
    border-radius: 0;
    background: rgba(0, 6, 12, 0.96);
    color: var(--forge-text);
    padding: 7px 10px;
    outline: none;
}

.fantasy-tree-field .fantasy-age-input {
    width: 100%;
    flex: 1 1 auto;
    min-height: 40px;
    text-align: left;
}

.fantasy-tree-identity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.fantasy-tree-identity-grid .fantasy-tree-field {
    min-width: 0;
}

.fantasy-personality-toggle,
.fantasy-personality-status {
    min-height: 54px;
    border: 1px solid rgba(0, 231, 255, 0.28);
    background: rgba(0, 231, 255, 0.055);
    color: var(--forge-text);
}

.fantasy-personality-toggle {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    cursor: pointer;
}

.fantasy-personality-toggle > span:first-child {
    display: grid;
    gap: 4px;
}

.fantasy-personality-toggle strong {
    font-size: 12px;
}

.fantasy-personality-toggle small {
    color: var(--forge-muted);
    font-size: 10px;
    line-height: 1.5;
}

.fantasy-personality-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.fantasy-personality-switch {
    position: relative;
    width: 42px;
    height: 22px;
    border: 1px solid rgba(148, 163, 184, 0.48);
    border-radius: 11px;
    background: rgba(15, 23, 42, 0.92);
    transition: border-color 160ms ease, background 160ms ease;
}

.fantasy-personality-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #94a3b8;
    transition: transform 160ms ease, background 160ms ease;
}

.fantasy-personality-toggle input:checked + .fantasy-personality-switch {
    border-color: rgba(0, 231, 255, 0.82);
    background: rgba(0, 231, 255, 0.18);
}

.fantasy-personality-toggle input:checked + .fantasy-personality-switch::after {
    transform: translateX(20px);
    background: #baf7ff;
}

.fantasy-personality-toggle:focus-within {
    border-color: var(--forge-cyan);
    box-shadow: 0 0 0 2px rgba(0, 231, 255, 0.12);
}

.fantasy-personality-status {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    color: #a8b3c5;
    font-size: 11px;
    font-weight: 800;
}

.fantasy-personality-status > span {
    display: grid;
    gap: 3px;
}

.fantasy-personality-status strong {
    font-size: 11px;
}

.fantasy-personality-status small {
    color: var(--forge-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.45;
}

.fantasy-personality-status.enabled {
    border-color: rgba(0, 231, 255, 0.46);
    color: #baf7ff;
}

.fantasy-tree-inherited-mode,
.fantasy-tree-inherited-setting {
    border: 1px solid rgba(0, 231, 255, 0.24);
    background: rgba(0, 231, 255, 0.045);
    color: var(--forge-text);
}

.fantasy-tree-inherited-mode {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 3px 9px;
    min-height: 54px;
    padding: 10px 12px;
}

.fantasy-tree-inherited-mode i {
    grid-row: 1 / span 2;
    color: var(--forge-cyan);
    font-size: 14px;
}

.fantasy-tree-inherited-mode strong {
    font-size: 12px;
}

.fantasy-tree-inherited-mode small {
    color: var(--forge-muted);
    font-size: 10px;
    font-weight: 600;
}

.fantasy-tree-inherited-setting {
    max-height: 132px;
    overflow-y: auto;
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.65;
    white-space: pre-wrap;
}

.fantasy-tree-field select:focus {
    border-color: var(--forge-cyan);
}

.fantasy-tree-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
}

@media (max-width: 560px) {
    .fantasy-tree-identity-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .fantasy-stage-top {
        flex-wrap: wrap;
    }

    .fantasy-view-toggle {
        order: 3;
        width: 100%;
    }

    .fantasy-tree-toolbar .fantasy-action-btn span {
        display: none;
    }
}

@media (min-width: 981px) and (max-width: 1500px) {
    .fantasy-stage.fantasy-tree-mode .fantasy-stage-top {
        justify-content: flex-end;
        gap: 8px;
        padding-inline: 14px;
    }

    .fantasy-stage.fantasy-tree-mode .fantasy-stage-top > div:first-child {
        display: none;
    }

    .fantasy-stage.fantasy-tree-mode .fantasy-tree-toolbar .fantasy-action-btn {
        width: 36px;
        min-width: 36px;
        padding-inline: 0;
    }

    .fantasy-stage.fantasy-tree-mode .fantasy-tree-toolbar .fantasy-action-btn span {
        display: none;
    }
}

@media (max-width: 860px) {
    .fantasy-tree-stage {
        flex: 0 0 62dvh;
        min-height: 440px;
    }

    .fantasy-tree-stage::before {
        opacity: 0.28;
    }

    .fantasy-tree-viewport {
        min-height: 0;
        touch-action: pan-y;
    }

    .fantasy-tree-atmosphere {
        inset: 0;
        background-position: center top;
        background-size: auto 100%;
        filter: brightness(0.68) saturate(0.68) contrast(1.12);
    }

    .fantasy-tree-atmosphere::before {
        background:
            linear-gradient(
                90deg,
                rgba(0, 2, 5, 0.48),
                transparent 24%,
                transparent 76%,
                rgba(0, 2, 5, 0.48)
            ),
            linear-gradient(
                180deg,
                rgba(0, 2, 5, 0.18),
                transparent 48%,
                rgba(0, 2, 5, 0.64)
            );
    }

    .fantasy-tree-environment-floor {
        opacity: 0.72;
    }

    .fantasy-tree-environment-root-shadow {
        width: 620px;
        max-width: 94%;
    }

    .fantasy-tree-root-ground {
        width: 620px;
        min-width: 420px;
        height: 138px;
    }

    .fantasy-tree-node.origin .fantasy-tree-node-circuit-ring,
    .fantasy-tree-origin .fantasy-tree-node-circuit-ring {
        inset: -8px;
    }

    .fantasy-tree-toolbar {
        width: 100%;
        justify-content: flex-end;
    }

    .fantasy-tree-toolbar .fantasy-action-btn {
        width: 34px;
        min-width: 34px;
    }

    .fantasy-tree-timeline-panel {
        position: fixed;
        z-index: 85;
        top: 70px;
        right: 8px;
        bottom: 8px;
        width: min(360px, calc(100% - 16px));
    }

    .fantasy-tree-dialog-overlay {
        padding:
            max(8px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
    }

    .fantasy-tree-dialog {
        max-height: calc(
            100dvh
            - 16px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        );
    }

    .fantasy-tree-dialog-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .fantasy-tree-stage::before,
    .fantasy-tree-atmosphere,
    .fantasy-tree-world,
    .fantasy-tree-node,
    .fantasy-tree-node-dot,
    .fantasy-tree-node-dot::before,
    .fantasy-tree-node-dot::after,
    .fantasy-tree-node-circuit-ring,
    .fantasy-tree-node-particles i,
    .fantasy-tree-ambient-particle,
    .fantasy-tree-edge-flow,
    .fantasy-tree-trunk-lane-flow,
    .fantasy-tree-empty-crown > i {
        transition: none !important;
        animation: none !important;
    }
}

/* codex-destiny-tree-v2
 * The atmosphere is viewport-fixed. Tree-relative light only lives in the
 * transformed world, preventing the old rectangular dark layer and drift.
 */
.fantasy-tree-viewport {
    isolation: isolate;
    background: #01050a;
}

.fantasy-tree-atmosphere {
    inset: 0;
    background: url("../assets/fantasy-tree-environment-r17.png?v=fantasy-tree-environment-r17") center 42% / cover no-repeat;
    filter: brightness(0.56) saturate(0.68) contrast(1.06);
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
}

.fantasy-tree-atmosphere::before {
    background:
        linear-gradient(90deg, rgba(0, 4, 9, 0.76), rgba(0, 4, 9, 0.2) 19%, transparent 44%, rgba(0, 4, 9, 0.12) 76%, rgba(0, 4, 9, 0.62)),
        linear-gradient(180deg, rgba(0, 3, 7, 0.38), transparent 24%, transparent 69%, rgba(0, 3, 7, 0.62) 100%);
}

.fantasy-tree-atmosphere::after {
    background:
        radial-gradient(ellipse 64% 70% at 50% 44%, rgba(9, 56, 65, 0.2), transparent 67%),
        radial-gradient(ellipse 42% 29% at 50% 81%, rgba(181, 118, 34, 0.1), transparent 78%),
        radial-gradient(ellipse 96% 94% at 50% 50%, transparent 50%, rgba(0, 2, 5, 0.44) 100%);
    opacity: 1;
}

.fantasy-tree-environment-world {
    background: transparent;
    overflow: visible;
    isolation: isolate;
}

.fantasy-tree-environment-world::before,
.fantasy-tree-environment-world::after {
    mix-blend-mode: normal;
}

.fantasy-tree-environment-world::before {
    left: var(--scene-trunk-top-x);
    top: calc(var(--scene-trunk-top-y) - 42px);
    width: min(420px, 34%);
    height: min(660px, 56%);
    transform: translate(-50%, 0);
    background:
        linear-gradient(180deg, transparent, rgba(255, 211, 128, 0.025) 18%, rgba(226, 156, 48, 0.1) 68%, rgba(255, 193, 73, 0.16) 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
    filter: blur(20px);
    opacity: 0.72;
}

.fantasy-tree-environment-world::after {
    left: var(--scene-canopy-center-x);
    top: var(--scene-canopy-center-y);
    width: min(1120px, 90%);
    height: min(700px, 64%);
    transform: translate(-50%, -50%);
    background:
        radial-gradient(ellipse 34% 42% at 50% 60%, rgba(239, 171, 64, 0.1), transparent 74%),
        radial-gradient(ellipse 78% 72% at 50% 48%, rgba(8, 59, 69, 0.16), transparent 77%);
    filter: blur(28px);
    opacity: 0.75;
}

.fantasy-tree-environment-crown-aura {
    left: var(--scene-trunk-top-x);
    top: calc(var(--scene-trunk-top-y) - 118px);
    width: min(1040px, 84%);
    height: min(660px, 58%);
    transform: translate(-50%, -50%);
    background:
        radial-gradient(ellipse 25% 31% at 50% 66%, rgba(255, 232, 169, 0.18), rgba(243, 181, 70, 0.09) 42%, transparent 74%),
        radial-gradient(ellipse 54% 60% at 50% 52%, rgba(195, 128, 36, 0.08), transparent 78%),
        radial-gradient(ellipse 86% 76% at 50% 44%, rgba(9, 57, 68, 0.13), transparent 76%);
    mix-blend-mode: normal;
    filter: blur(18px);
    opacity: 0.9;
}

.fantasy-tree-environment-horizon {
    top: calc(var(--scene-socket-y) + 4px);
    width: min(760px, 56%);
    height: 54px;
    background: radial-gradient(ellipse at 50% 0%, rgba(242, 184, 77, 0.09), rgba(190, 121, 31, 0.026) 42%, transparent 76%);
    mix-blend-mode: normal;
    filter: blur(13px);
    opacity: 0.44;
}

.fantasy-tree-environment-floor {
    clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
    background:
        radial-gradient(ellipse 39% 41% at var(--scene-socket-x) 0%, rgba(255, 209, 107, 0.17), rgba(202, 136, 39, 0.055) 42%, transparent 76%),
        repeating-conic-gradient(from 90deg at var(--scene-socket-x) 0%, transparent 0 7.6deg, rgba(215, 158, 56, 0.065) 7.74deg 7.84deg, transparent 8deg 15.2deg),
        repeating-linear-gradient(180deg, rgba(211, 158, 64, 0.055) 0 1px, transparent 1px 38px);
    -webkit-mask-image: radial-gradient(ellipse 54% 70% at var(--scene-socket-x) 0%, #000 0%, rgba(0, 0, 0, 0.64) 43%, transparent 84%);
    mask-image: radial-gradient(ellipse 54% 70% at var(--scene-socket-x) 0%, #000 0%, rgba(0, 0, 0, 0.64) 43%, transparent 84%);
    opacity: 0.58;
}

.fantasy-tree-environment-root-shadow {
    width: min(720px, 58%);
    height: 166px;
    transform: translate(-50%, -10%);
    background:
        radial-gradient(ellipse 44% 48% at 50% 0%, rgba(255, 221, 138, 0.26), rgba(227, 160, 52, 0.09) 42%, transparent 76%);
    filter: blur(10px);
    opacity: 0.76;
}

.fantasy-tree-environment-socket {
    width: 5px;
    height: 5px;
    background: #fff7d9;
    box-shadow:
        0 0 0 7px rgba(113, 73, 19, 0.24),
        0 0 0 16px rgba(191, 127, 30, 0.09),
        0 0 13px 3px rgba(255, 223, 140, 0.72),
        0 0 28px 8px rgba(232, 145, 32, 0.28);
    animation: fantasyTreeV2SocketPulse 6.4s ease-in-out infinite;
}

.fantasy-tree-environment-socket::before {
    width: min(300px, 30vw);
    height: 160px;
    background: radial-gradient(ellipse 34% 80% at 50% 100%, rgba(255, 211, 111, 0.15), rgba(242, 171, 50, 0.04) 48%, transparent 78%);
    filter: blur(15px);
    opacity: 0.74;
}

.fantasy-tree-environment-socket::after {
    width: 58px;
    height: 58px;
    border-color: rgba(255, 230, 157, 0.24);
    box-shadow: 0 0 14px rgba(255, 190, 61, 0.18);
    animation: fantasyTreeV2SocketRing 6.4s ease-in-out infinite;
}

.fantasy-tree-root-ground {
    display: none;
}

.fantasy-tree-edges,
.fantasy-tree-decoration,
.fantasy-tree-trunk-lane-group {
    mix-blend-mode: normal;
}

.fantasy-tree-edges .fantasy-tree-edge-bark {
    stroke: rgba(28, 22, 13, 0.84);
    stroke-width: calc(var(--edge-halo-width, 5px) + 1.1px);
    opacity: 0.72;
}

.fantasy-tree-edges .fantasy-tree-edge-halo {
    stroke: rgba(185, 123, 33, 0.18);
    stroke-width: calc(var(--edge-halo-width, 5px) + 0.55px);
    opacity: max(calc(var(--edge-halo-opacity, 0.12) * 0.84), 0.1);
    filter: drop-shadow(0 0 3px rgba(236, 164, 45, 0.14));
}

.fantasy-tree-edges .fantasy-tree-edge-core {
    stroke: #c79745;
    stroke-width: var(--edge-core-width, 1.5px);
    opacity: max(calc(var(--edge-core-opacity, 0.38) * 0.78), 0.28);
    filter: drop-shadow(0 0 1px rgba(248, 183, 65, 0.18));
}

.fantasy-tree-edges .fantasy-tree-edge-filament {
    stroke: #f9dfaa;
    stroke-width: max(var(--edge-filament-width, 0.45px), 0.4px);
    opacity: max(calc(var(--edge-core-opacity, 0.38) * 0.52), 0.26);
    filter: none;
}

.fantasy-tree-edges .fantasy-tree-edge-flow {
    stroke: #fffdf2;
    stroke-width: max(0.56px, calc(var(--edge-active-core-width, 2.4px) * 0.3));
    stroke-dasharray: 1.5 19;
    opacity: 0;
    filter: none;
}

.fantasy-tree-edges .fantasy-tree-edge-bark.current,
.fantasy-tree-edges .fantasy-tree-edge-bark.selected {
    stroke: rgba(61, 42, 15, 0.9);
    opacity: 0.94;
}

.fantasy-tree-edges .fantasy-tree-edge-halo.current,
.fantasy-tree-edges .fantasy-tree-edge-halo.selected {
    stroke: rgba(230, 161, 45, 0.36);
    opacity: 0.74;
    filter: drop-shadow(0 0 6px rgba(239, 169, 47, 0.42));
}

.fantasy-tree-edges .fantasy-tree-edge-core.current,
.fantasy-tree-edges .fantasy-tree-edge-core.selected {
    stroke: #f3c76d;
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(255, 202, 104, 0.66));
}

.fantasy-tree-edges .fantasy-tree-edge-filament.current,
.fantasy-tree-edges .fantasy-tree-edge-filament.selected,
.fantasy-tree-edges .fantasy-tree-edge-filament.current.selected {
    stroke: #fffdf2;
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(255, 252, 235, 0.9)) drop-shadow(0 0 6px rgba(255, 190, 65, 0.54));
}

.fantasy-tree-edges .fantasy-tree-edge-flow.current,
.fantasy-tree-edges .fantasy-tree-edge-flow.selected {
    opacity: 0.94;
    filter: drop-shadow(0 0 4px rgba(255, 215, 135, 0.64));
}

.fantasy-tree-decoration {
    opacity: 0.9;
}

.fantasy-tree-decorative-root-main {
    stroke: rgba(119, 83, 32, 0.52);
}

.fantasy-tree-decorative-root-core {
    stroke: rgba(239, 192, 104, 0.56);
    filter: drop-shadow(0 0 2px rgba(240, 175, 61, 0.22));
}

.fantasy-tree-decorative-twig {
    stroke: rgba(125, 88, 38, 0.54);
    stroke-width: calc(var(--decorative-width, 0.7px) * 1.22 + 0.12px);
    filter: none;
}

.fantasy-tree-decorative-twig.structural {
    stroke: rgba(157, 112, 45, 0.7);
}

.fantasy-tree-decorative-twig-core {
    stroke: rgba(247, 218, 159, 0.82);
    stroke-width: max(0.32px, calc(var(--decorative-width, 0.7px) * 0.3));
    opacity: calc(var(--decorative-opacity, 0.42) * 0.55);
    filter: none;
}

.fantasy-tree-decorative-twig-core.structural {
    opacity: calc(var(--decorative-opacity, 0.42) * 0.8);
    filter: drop-shadow(0 0 2px rgba(235, 168, 51, 0.18));
}

.fantasy-tree-ambient-particle {
    fill: #fff2ca;
    opacity: max(calc(var(--ambient-opacity, 0.3) * 0.72), 0.2);
    transform: scale(1.1);
    filter: drop-shadow(0 0 2px rgba(255, 226, 156, 0.64)) drop-shadow(0 0 5px rgba(237, 159, 41, 0.26));
    animation: fantasyTreeV2AmbientFlicker 8.8s ease-in-out var(--ambient-delay, 0s) infinite;
}

.fantasy-tree-trunk {
    filter: drop-shadow(0 0 7px rgba(221, 153, 44, 0.24));
}

.fantasy-tree-trunk-lane-group {
    opacity: 0.68;
}

.fantasy-tree-trunk-lane-halo {
    stroke: rgba(62, 42, 17, 0.82);
    stroke-width: calc(var(--trunk-lane-width, 1.35px) * 2.6 + 1.55px);
    filter: drop-shadow(0 0 4px rgba(241, 171, 46, 0.24));
}

.fantasy-tree-trunk-lane {
    stroke: rgba(205, 151, 58, 0.9);
    filter: none;
}

.fantasy-tree-trunk-lane-filament {
    stroke: #fae5b7;
    stroke-width: max(0.48px, calc(var(--trunk-lane-width, 1.35px) * 0.32));
    opacity: 0.7;
    filter: drop-shadow(0 0 2px rgba(255, 215, 120, 0.42));
}

.fantasy-tree-trunk-lane-flow {
    stroke: #fffdf0;
    stroke-width: max(0.62px, calc(var(--trunk-lane-width, 1.35px) * 0.36));
    stroke-dasharray: 1.5 19;
    opacity: 0;
}

.fantasy-tree-trunk-lane-group.current,
.fantasy-tree-trunk-lane-group.selected {
    opacity: 1;
}

.fantasy-tree-trunk-lane-group.current .fantasy-tree-trunk-lane,
.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-lane {
    stroke: #efc369;
    filter: drop-shadow(0 0 3px rgba(248, 185, 69, 0.52));
}

.fantasy-tree-trunk-lane-group.current .fantasy-tree-trunk-lane-filament,
.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-lane-filament {
    stroke: #fffdf1;
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(255, 252, 234, 0.88)) drop-shadow(0 0 6px rgba(252, 185, 60, 0.48));
}

.fantasy-tree-trunk-lane-group.current .fantasy-tree-trunk-lane-flow,
.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-lane-flow {
    opacity: 0.9;
    animation: fantasyTreeEnergyFlow 4.4s linear infinite;
}

.fantasy-tree-trunk {
    filter:
        drop-shadow(0 0 7px rgba(211, 147, 45, 0.22))
        drop-shadow(0 0 22px rgba(194, 119, 25, 0.11));
}

.fantasy-tree-trunk-shell {
    fill: rgba(3, 8, 10, 0.54);
    stroke: rgba(126, 88, 30, 0.34);
    stroke-width: 1.15px;
}

.fantasy-tree-trunk-core {
    fill: rgba(27, 18, 7, 0.12);
    stroke: rgba(223, 168, 62, 0.18);
    stroke-width: 0.7px;
}

.fantasy-tree-trunk-lane-group {
    opacity: 0.74;
}

.fantasy-tree-trunk-lane-halo {
    stroke: rgba(58, 39, 14, 0.78);
    filter: drop-shadow(0 0 4px rgba(236, 166, 45, 0.26));
}

.fantasy-tree-trunk-lane {
    stroke: rgba(214, 161, 66, 0.9);
}

.fantasy-tree-trunk-lane-filament {
    stroke: rgba(255, 235, 185, 0.82);
    opacity: 0.72;
}

.fantasy-tree-trunk-junction {
    fill: rgba(8, 11, 11, 0.8);
    stroke: rgba(214, 158, 54, 0.5);
    opacity: 0.3;
}

.fantasy-tree-trunk-lane-group.current .fantasy-tree-trunk-junction,
.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-junction {
    fill: #f0c96e;
    stroke: #fff5d4;
    opacity: 0.9;
    filter: drop-shadow(0 0 4px rgba(249, 186, 63, 0.54));
}

.fantasy-tree-decorative-root {
    opacity: 0.9;
}

.fantasy-tree-decorative-root-shell {
    stroke: rgba(24, 19, 12, calc(var(--decorative-opacity, 0.45) * 1.16));
    stroke-width: calc(var(--decorative-width, 1px) * 3.8 + 2.2px);
}

.fantasy-tree-decorative-root-main {
    stroke: rgba(206, 154, 61, calc(var(--decorative-opacity, 0.45) * 1.08));
    stroke-width: calc(var(--decorative-width, 1px) * 2.08 + 0.5px);
    filter: drop-shadow(0 0 2px rgba(236, 166, 45, 0.24));
}

.fantasy-tree-decorative-root-core {
    stroke: rgba(249, 219, 153, calc(var(--decorative-opacity, 0.45) * 0.94));
    stroke-width: max(0.42px, calc(var(--decorative-width, 1px) * 0.42));
    filter: drop-shadow(0 0 2px rgba(255, 192, 66, 0.38));
}

.fantasy-tree-decorative-root-filament {
    stroke: rgba(255, 251, 233, calc(var(--decorative-opacity, 0.45) * 0.82));
    stroke-width: max(0.32px, calc(var(--decorative-width, 1px) * 0.2));
    filter: drop-shadow(0 0 1px rgba(255, 245, 210, 0.6));
}

.fantasy-tree-decorative-root.near .fantasy-tree-decorative-root-main {
    stroke: rgba(225, 172, 70, calc(var(--decorative-opacity, 0.45) * 1.12));
}

.fantasy-tree-decorative-root.near .fantasy-tree-decorative-root-core {
    stroke: rgba(255, 230, 158, calc(var(--decorative-opacity, 0.45) * 1.02));
    filter:
        drop-shadow(0 0 2px rgba(255, 223, 144, 0.7))
        drop-shadow(0 0 6px rgba(237, 163, 43, 0.3));
}

.fantasy-tree-decorative-root.near .fantasy-tree-decorative-root-filament {
    stroke: rgba(255, 253, 239, calc(var(--decorative-opacity, 0.45) * 1.02));
    filter:
        drop-shadow(0 0 2px rgba(255, 248, 221, 0.76))
        drop-shadow(0 0 5px rgba(246, 181, 59, 0.28));
}

.fantasy-tree-decorative-root.far {
    opacity: 0.58;
}

.fantasy-tree-trunk-shell {
    fill: rgba(3, 8, 10, 0.38);
    stroke: rgba(131, 93, 34, 0.14);
}

.fantasy-tree-trunk-core {
    fill: rgba(25, 18, 8, 0.08);
    stroke: rgba(231, 177, 70, 0.1);
}

.fantasy-tree-decorative-twig {
    stroke: rgba(144, 101, 39, calc(var(--decorative-opacity, 0.42) * 1.18));
}

.fantasy-tree-decorative-twig-core {
    stroke: rgba(255, 227, 168, 0.9);
    opacity: calc(var(--decorative-opacity, 0.42) * 0.82);
    filter: drop-shadow(0 0 2px rgba(244, 179, 61, 0.26));
}

.fantasy-tree-decorative-twig.structural {
    stroke: rgba(181, 129, 49, 0.78);
}

.fantasy-tree-decorative-twig-core.structural {
    opacity: calc(var(--decorative-opacity, 0.42) * 1.08);
    filter:
        drop-shadow(0 0 2px rgba(255, 215, 129, 0.48))
        drop-shadow(0 0 5px rgba(230, 157, 42, 0.2));
}

.fantasy-tree-ambient-particle {
    opacity: max(calc(var(--ambient-opacity, 0.3) * 0.9), 0.26);
    transform: scale(1.18);
}

.fantasy-tree-node.minor .fantasy-tree-node-dot {
    border-color: rgba(183, 137, 62, 0.64);
    box-shadow: inset 0 0 0 2px rgba(1, 3, 5, 0.9), 0 0 4px rgba(213, 161, 63, 0.16);
}

.fantasy-tree-node.minor .fantasy-tree-node-dot::before {
    width: clamp(2px, calc(var(--node-radius, 10px) * 0.22), 3.4px);
    height: clamp(2px, calc(var(--node-radius, 10px) * 0.22), 3.4px);
    background: #edca78;
    box-shadow: 0 0 3px rgba(247, 207, 123, 0.5);
}

.fantasy-tree-node.minor .fantasy-tree-node-circuit-ring {
    opacity: 0.22;
    filter: none;
}

.fantasy-tree-node.origin .fantasy-tree-node-dot::before,
.fantasy-tree-node.current .fantasy-tree-node-dot::before,
.fantasy-tree-node.selected .fantasy-tree-node-dot::before,
.fantasy-tree-origin .fantasy-tree-node-dot::before {
    background: #fffdf3;
    box-shadow: 0 0 4px 1px rgba(255, 252, 235, 0.96), 0 0 12px 3px rgba(255, 204, 101, 0.72), 0 0 24px 6px rgba(239, 149, 34, 0.28);
    animation: fantasyTreeV2CorePulse 5.2s ease-in-out infinite;
}

.fantasy-tree-node.origin .fantasy-tree-node-circuit-ring,
.fantasy-tree-node.current .fantasy-tree-node-circuit-ring,
.fantasy-tree-node.selected .fantasy-tree-node-circuit-ring,
.fantasy-tree-origin .fantasy-tree-node-circuit-ring {
    opacity: 0.66;
    filter: drop-shadow(0 0 3px rgba(255, 218, 126, 0.52));
}

.fantasy-tree-node.leaf .fantasy-tree-node-foliage {
    opacity: 0.5;
}

.fantasy-tree-node-foliage i {
    border-color: rgba(176, 191, 112, 0.38);
    background: linear-gradient(135deg, rgba(190, 203, 117, 0.5), rgba(70, 100, 58, 0.3));
    box-shadow: none;
}

@keyframes fantasyTreeV2CorePulse {
    0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.9); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes fantasyTreeV2AmbientFlicker {
    0%, 70%, 100% { opacity: calc(var(--ambient-opacity, 0.3) * 0.48); transform: scale(1); }
    78% { opacity: calc(var(--ambient-opacity, 0.3) * 0.8); transform: scale(1.18); }
    86% { opacity: calc(var(--ambient-opacity, 0.3) * 0.58); transform: scale(1.07); }
}

@keyframes fantasyTreeV2SocketPulse {
    0%, 100% { filter: brightness(0.94); }
    50% { filter: brightness(1.1); }
}

@keyframes fantasyTreeV2SocketRing {
    0%, 100% { transform: translate(-50%, -50%) scale(0.94); opacity: 0.38; }
    50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.68; }
}

@media (max-width: 860px) {
    .fantasy-tree-atmosphere {
        background-position: center center;
        background-size: auto 100%;
    }

    .fantasy-tree-atmosphere::before {
        background:
            linear-gradient(90deg, rgba(0, 3, 7, 0.52), transparent 25%, transparent 75%, rgba(0, 3, 7, 0.52)),
            linear-gradient(180deg, rgba(0, 3, 7, 0.2), transparent 54%, rgba(0, 3, 7, 0.58));
    }

    .fantasy-tree-environment-floor {
        opacity: 0.44;
    }

    .fantasy-tree-environment-world::before {
        width: 310px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fantasy-tree-environment-socket,
    .fantasy-tree-environment-socket::after,
    .fantasy-tree-ambient-particle,
    .fantasy-tree-node-dot::before,
    .fantasy-tree-trunk-lane-flow,
    .fantasy-tree-edge-flow {
        animation: none;
    }
}

/* codex-circuit-tree-r1 */
.fantasy-tree-viewport {
    --tree-substrate: rgba(21, 16, 8, 0.92);
    --tree-conductor: rgba(190, 136, 47, 0.82);
    --tree-core: rgba(239, 192, 97, 0.9);
    --tree-filament: #fff6d9;
    --tree-halo: rgba(236, 169, 54, 0.22);
}

.fantasy-tree-edges,
.fantasy-tree-decoration,
.fantasy-tree-trunk-lane-group {
    mix-blend-mode: normal;
}

.fantasy-tree-edges path,
.fantasy-tree-edges use,
.fantasy-tree-decoration path,
.fantasy-tree-decoration use,
.fantasy-tree-decoration circle,
.fantasy-tree-trunk path,
.fantasy-tree-trunk use {
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-miterlimit: 2.4;
}

.fantasy-tree-edges .fantasy-tree-edge-bark {
    stroke: var(--tree-substrate);
    stroke-width: calc(var(--edge-halo-width, 5px) + 0.8px);
    opacity: 0.84;
}

.fantasy-tree-edges .fantasy-tree-edge-halo {
    stroke: rgba(168, 116, 35, 0.24);
    opacity: max(calc(var(--edge-halo-opacity, 0.12) * 0.62), 0.08);
    filter: drop-shadow(0 0 2px rgba(236, 169, 54, 0.18));
}

.fantasy-tree-edges .fantasy-tree-edge-core {
    stroke: var(--tree-conductor);
    opacity: max(calc(var(--edge-core-opacity, 0.38) * 0.92), 0.3);
    filter: none;
}

.fantasy-tree-edges .fantasy-tree-edge-filament {
    stroke: var(--tree-core);
    opacity: max(calc(var(--edge-core-opacity, 0.38) * 0.62), 0.2);
    filter: none;
}

.fantasy-tree-edges .fantasy-tree-edge-core.selected,
.fantasy-tree-edges .fantasy-tree-edge-core.current.selected {
    stroke: #f5cf77;
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(255, 215, 126, 0.48));
}

.fantasy-tree-edges .fantasy-tree-edge-filament.selected,
.fantasy-tree-edges .fantasy-tree-edge-filament.current.selected {
    stroke: var(--tree-filament);
    opacity: 1;
    filter: drop-shadow(0 0 2px rgba(255, 244, 211, 0.64));
}

.fantasy-tree-edges .fantasy-tree-edge-flow,
.fantasy-tree-trunk-lane-flow {
    stroke: #fffdf2;
    stroke-dasharray: 3 48;
    stroke-dashoffset: 52;
    opacity: 0;
    animation: none;
    filter: drop-shadow(0 0 3px rgba(255, 221, 148, 0.5));
}

.fantasy-tree-edges .fantasy-tree-edge-flow.current:not(.selected) {
    opacity: 0;
    animation: none;
}

.fantasy-tree-edges .fantasy-tree-edge-flow.generating {
    opacity: 0.82;
    animation: fantasyTreeEnergyFlow 3.6s linear infinite;
}

.fantasy-tree-trunk-lane-group.current:not(.selected) .fantasy-tree-trunk-lane-flow {
    opacity: 0;
    animation: none;
}

.fantasy-tree-trunk {
    filter: drop-shadow(0 0 6px rgba(208, 143, 40, 0.18));
}

.fantasy-tree-trunk-shell {
    fill: rgba(3, 7, 9, 0.6);
    stroke: rgba(122, 83, 28, 0.36);
    stroke-linejoin: miter;
}

.fantasy-tree-trunk-core {
    fill: rgba(25, 17, 7, 0.08);
    stroke: rgba(221, 160, 58, 0.12);
}

.fantasy-tree-trunk-lane-halo {
    stroke: rgba(48, 33, 12, 0.9);
    filter: drop-shadow(0 0 3px rgba(236, 166, 45, 0.18));
}

.fantasy-tree-trunk-lane {
    stroke: rgba(204, 151, 56, 0.88);
    filter: none;
}

.fantasy-tree-trunk-lane-filament {
    stroke: rgba(255, 235, 184, 0.86);
    opacity: 0.64;
    filter: none;
}

.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-lane {
    stroke: #f2c971;
    filter: drop-shadow(0 0 2px rgba(255, 204, 105, 0.5));
}

.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-lane-filament {
    stroke: var(--tree-filament);
    opacity: 1;
}

.fantasy-tree-decoration {
    opacity: 0.92;
}

.fantasy-tree-decorative-root-shell {
    stroke: var(--tree-substrate);
    stroke-width: calc(var(--decorative-width, 1px) * 3.65 + 2px);
}

.fantasy-tree-decorative-root-main {
    stroke: rgba(191, 137, 46, calc(var(--decorative-opacity, 0.45) * 1.02));
    stroke-width: calc(var(--decorative-width, 1px) * 2 + 0.45px);
    filter: none;
}

.fantasy-tree-decorative-root-core {
    stroke: rgba(244, 207, 126, calc(var(--decorative-opacity, 0.45) * 0.85));
    stroke-width: max(0.38px, calc(var(--decorative-width, 1px) * 0.34));
    filter: none;
}

.fantasy-tree-decorative-root-filament {
    stroke: rgba(255, 247, 219, calc(var(--decorative-opacity, 0.45) * 0.68));
    stroke-width: max(0.28px, calc(var(--decorative-width, 1px) * 0.16));
    filter: none;
}

.fantasy-tree-decorative-root.near .fantasy-tree-decorative-root-main {
    stroke: rgba(220, 167, 67, calc(var(--decorative-opacity, 0.45) * 1.08));
}

.fantasy-tree-decorative-root.near .fantasy-tree-decorative-root-filament {
    stroke: rgba(255, 248, 222, calc(var(--decorative-opacity, 0.45) * 0.86));
}

.fantasy-tree-decorative-twig {
    stroke: rgba(156, 108, 37, calc(var(--decorative-opacity, 0.42) * 1.08));
    stroke-width: calc(var(--decorative-width, 0.7px) * 1.18 + 0.12px);
    filter: none;
}

.fantasy-tree-decorative-twig.structural {
    stroke: rgba(201, 145, 49, calc(var(--decorative-opacity, 0.42) * 1.16));
}

.fantasy-tree-decorative-twig-core {
    stroke: rgba(247, 218, 157, 0.78);
    opacity: calc(var(--decorative-opacity, 0.42) * 0.74);
    filter: none;
}

.fantasy-tree-decorative-twig-core.structural {
    opacity: calc(var(--decorative-opacity, 0.42) * 0.9);
    filter: drop-shadow(0 0 2px rgba(243, 178, 57, 0.22));
}

.fantasy-tree-circuit-pad {
    fill: #171106;
    stroke: rgba(240, 191, 83, 0.8);
    stroke-width: 0.7px;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 2px rgba(247, 185, 57, 0.38));
}

.fantasy-tree-circuit-pad.root-pad {
    fill: #f2c870;
    stroke: #fff0b9;
}

.fantasy-tree-circuit-pad.twig-pad {
    opacity: 0.74;
}

.fantasy-tree-node-foliage,
.fantasy-tree-node-particles {
    display: none;
}

.fantasy-tree-node:focus-visible {
    box-shadow: none;
}

.fantasy-tree-node:focus-visible .fantasy-tree-node-dot {
    outline: 2px solid rgba(255, 235, 176, 0.86);
    outline-offset: 3px;
}

.fantasy-tree-node-dot {
    border-color: rgba(196, 145, 54, 0.86);
    background:
        radial-gradient(circle at center, #0a0d0e 0 39%, transparent 41%),
        conic-gradient(
            from 45deg,
            rgba(225, 171, 66, 0.52) 0 5deg,
            transparent 5deg 85deg,
            rgba(225, 171, 66, 0.52) 85deg 95deg,
            transparent 95deg 175deg,
            rgba(225, 171, 66, 0.52) 175deg 185deg,
            transparent 185deg 265deg,
            rgba(225, 171, 66, 0.52) 265deg 275deg,
            transparent 275deg 360deg
        );
    box-shadow:
        inset 0 0 0 2px rgba(1, 3, 4, 0.9),
        0 0 0 1px rgba(81, 56, 20, 0.6);
    transition:
        border-color 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
        filter 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fantasy-tree-node-dot::before {
    width: clamp(2px, calc(var(--node-radius, 10px) * 0.22), 3.6px);
    height: clamp(2px, calc(var(--node-radius, 10px) * 0.22), 3.6px);
    border-color: rgba(251, 221, 144, 0.62);
    background: #d8a94f;
    box-shadow: 0 0 2px rgba(245, 191, 79, 0.48);
    animation: none;
}

.fantasy-tree-node-dot::after {
    display: none;
}

.fantasy-tree-node-circuit-ring {
    inset: -3px;
    border-radius: 0;
    background:
        linear-gradient(rgba(234, 181, 74, 0.78), rgba(234, 181, 74, 0.78)) center top / 1px 3px no-repeat,
        linear-gradient(rgba(234, 181, 74, 0.78), rgba(234, 181, 74, 0.78)) center bottom / 1px 3px no-repeat,
        linear-gradient(90deg, rgba(234, 181, 74, 0.78), rgba(234, 181, 74, 0.78)) left center / 3px 1px no-repeat,
        linear-gradient(90deg, rgba(234, 181, 74, 0.78), rgba(234, 181, 74, 0.78)) right center / 3px 1px no-repeat;
    -webkit-mask: none;
    mask: none;
    opacity: 0.36;
    filter: none;
    animation: none;
}

.fantasy-tree-node.minor .fantasy-tree-node-dot {
    border-width: 1px;
    box-shadow:
        inset 0 0 0 1px rgba(1, 3, 4, 0.92),
        0 0 0 1px rgba(72, 50, 20, 0.46);
}

.fantasy-tree-node.minor .fantasy-tree-node-circuit-ring {
    inset: -2px;
    opacity: 0.24;
}

.fantasy-tree-node.key .fantasy-tree-node-dot,
.fantasy-tree-node.milestone .fantasy-tree-node-dot {
    border-radius: 0;
    clip-path: polygon(22% 0, 78% 0, 100% 22%, 100% 78%, 78% 100%, 22% 100%, 0 78%, 0 22%);
}

.fantasy-tree-node.key .fantasy-tree-node-circuit-ring,
.fantasy-tree-node.milestone .fantasy-tree-node-circuit-ring {
    inset: -5px;
    opacity: 0.5;
}

.fantasy-tree-node.origin .fantasy-tree-node-dot,
.fantasy-tree-origin .fantasy-tree-node-dot {
    border-width: 1px;
    border-radius: 0;
    clip-path: polygon(18% 0, 82% 0, 100% 18%, 100% 82%, 82% 100%, 18% 100%, 0 82%, 0 18%);
    background:
        radial-gradient(circle at center, #0b0d0d 0 30%, transparent 32%),
        conic-gradient(
            from 45deg,
            rgba(239, 192, 91, 0.72) 0 8deg,
            transparent 8deg 82deg,
            rgba(239, 192, 91, 0.72) 82deg 98deg,
            transparent 98deg 172deg,
            rgba(239, 192, 91, 0.72) 172deg 188deg,
            transparent 188deg 262deg,
            rgba(239, 192, 91, 0.72) 262deg 278deg,
            transparent 278deg 360deg
        );
    box-shadow:
        inset 0 0 0 3px rgba(2, 4, 5, 0.84),
        0 0 0 1px rgba(131, 88, 24, 0.76);
}

.fantasy-tree-node.origin .fantasy-tree-node-circuit-ring,
.fantasy-tree-origin .fantasy-tree-node-circuit-ring {
    inset: -7px;
    opacity: 0.52;
    animation: none;
}

.fantasy-tree-node.origin .fantasy-tree-node-dot::before,
.fantasy-tree-node.current .fantasy-tree-node-dot::before,
.fantasy-tree-node.selected .fantasy-tree-node-dot::before,
.fantasy-tree-origin .fantasy-tree-node-dot::before {
    background: #fff8df;
    box-shadow:
        0 0 3px rgba(255, 244, 210, 0.8),
        0 0 8px rgba(244, 184, 64, 0.38);
    animation: none;
}

.fantasy-tree-node.current .fantasy-tree-node-dot,
.fantasy-tree-node.selected-path .fantasy-tree-node-dot,
.fantasy-tree-node.selected .fantasy-tree-node-dot {
    border-color: #ffe08e;
    box-shadow:
        inset 0 0 0 2px rgba(2, 4, 5, 0.8),
        0 0 5px rgba(255, 211, 117, 0.36),
        0 0 13px rgba(231, 159, 46, 0.14);
}

.fantasy-tree-node.current .fantasy-tree-node-circuit-ring,
.fantasy-tree-node.selected-path .fantasy-tree-node-circuit-ring,
.fantasy-tree-node.selected .fantasy-tree-node-circuit-ring {
    opacity: 0.78;
    filter: drop-shadow(0 0 2px rgba(255, 211, 117, 0.44));
}

.fantasy-tree-ambient-particle {
    fill: #ffe7a6;
    opacity: calc(var(--ambient-opacity, 0.3) * 0.72);
    transform: none;
    filter: drop-shadow(0 0 2px rgba(245, 182, 59, 0.38));
    animation: none;
}

.fantasy-tree-ambient-particles .fantasy-tree-ambient-particle:nth-child(n + 19) {
    display: none;
}

.fantasy-tree-ambient-particles .fantasy-tree-ambient-particle:nth-child(-n + 18) {
    animation: fantasyTreeCircuitFlicker 8.8s linear var(--ambient-delay, 0s) infinite;
}

@keyframes fantasyTreeCircuitFlicker {
    0%, 74%, 100% {
        opacity: calc(var(--ambient-opacity, 0.3) * 0.5);
    }
    81% {
        opacity: calc(var(--ambient-opacity, 0.3) * 1.08);
    }
    88% {
        opacity: calc(var(--ambient-opacity, 0.3) * 0.62);
    }
}

.fantasy-tree-environment-floor {
    background:
        radial-gradient(ellipse 34% 38% at var(--scene-socket-x) 0%, rgba(255, 210, 111, 0.14), rgba(201, 133, 37, 0.04) 44%, transparent 76%),
        repeating-linear-gradient(90deg, transparent 0 31px, rgba(209, 154, 56, 0.055) 31px 32px),
        repeating-linear-gradient(180deg, transparent 0 31px, rgba(209, 154, 56, 0.038) 31px 32px),
        repeating-conic-gradient(from 90deg at var(--scene-socket-x) 0%, transparent 0 7.8deg, rgba(215, 158, 56, 0.052) 7.92deg 8.02deg, transparent 8.14deg 15.6deg);
    opacity: 0.5;
}

.fantasy-tree-atmosphere::before,
.fantasy-tree-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.fantasy-tree-atmosphere::before {
    background:
        radial-gradient(circle at 16% 23%, rgba(255, 218, 131, 0.38) 0 1px, transparent 1.7px),
        radial-gradient(circle at 28% 38%, rgba(223, 173, 70, 0.24) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 68% 19%, rgba(255, 225, 146, 0.28) 0 1px, transparent 1.7px),
        radial-gradient(circle at 82% 44%, rgba(225, 174, 70, 0.22) 0 0.8px, transparent 1.5px),
        radial-gradient(circle at 58% 67%, rgba(255, 215, 125, 0.22) 0 0.8px, transparent 1.5px);
    background-size: 173px 149px, 211px 197px, 229px 173px, 191px 223px, 257px 211px;
    opacity: 0.58;
}

.fantasy-tree-atmosphere::after {
    background:
        repeating-linear-gradient(90deg, transparent 0 63px, rgba(191, 137, 48, 0.04) 63px 64px),
        repeating-linear-gradient(180deg, transparent 0 63px, rgba(191, 137, 48, 0.028) 63px 64px);
    mask-image: linear-gradient(90deg, transparent 0, #000 18%, #000 82%, transparent 100%);
    opacity: 0.42;
}

.fantasy-tree-ambient-particles .fantasy-tree-ambient-particle:nth-child(n + 19):nth-child(-n + 58) {
    display: block;
    opacity: calc(var(--ambient-opacity, 0.3) * 0.48);
    filter: none;
    animation: none;
}

.fantasy-tree-ambient-particles .fantasy-tree-ambient-particle:nth-child(n + 59) {
    display: none;
}

.fantasy-tree-decorative-twig,
.fantasy-tree-decorative-twig-core,
.fantasy-tree-decorative-twig-batch-main,
.fantasy-tree-decorative-twig-batch-core {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-miterlimit: 3;
    pointer-events: none;
}

.fantasy-tree-decorative-twig-batches {
    pointer-events: none;
}

.fantasy-tree-decorative-twig-batch-main {
    stroke: rgba(129, 91, 33, 0.18);
    stroke-width: 0.46px;
    filter: none;
}

.fantasy-tree-decorative-twig-batch-core {
    stroke: rgba(229, 181, 91, 0.24);
    stroke-width: 0.2px;
    opacity: 0.72;
    filter: none;
}

.fantasy-tree-decorative-twig-batch.shoulder
.fantasy-tree-decorative-twig-batch-main {
    stroke: rgba(160, 112, 39, 0.3);
    stroke-width: 0.58px;
}

.fantasy-tree-decorative-twig-batch.shoulder
.fantasy-tree-decorative-twig-batch-core {
    stroke: rgba(246, 208, 127, 0.42);
    stroke-width: 0.24px;
    opacity: 0.86;
}

@media (prefers-reduced-motion: reduce) {
    .fantasy-tree-edges .fantasy-tree-edge-flow,
    .fantasy-tree-trunk-lane-flow,
    .fantasy-tree-ambient-particle,
    .fantasy-tree-ambient-particles .fantasy-tree-ambient-particle:nth-child(-n + 18) {
        animation: none !important;
    }
}
/* /codex-destiny-tree-v2 */

/* destiny-tree-canopy-roots-20260817-r4 */
.fantasy-tree-root-ground-effects,
.fantasy-tree-leaf-terminal-batches,
.fantasy-tree-leaf-glints {
    pointer-events: none;
}

.fantasy-tree-root-contact-glow {
    fill: rgba(234, 172, 63, 0.14);
    filter: url(#fantasy-tree-root-contact-blur);
    opacity: 0.72;
    mix-blend-mode: screen;
}

.fantasy-tree-root-shadow-batch,
.fantasy-tree-root-reflection-batch {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: square;
    stroke-linejoin: miter;
    pointer-events: none;
}

.fantasy-tree-root-shadow-batch {
    stroke: rgba(15, 11, 6, 0.78);
    stroke-width: 7px;
    opacity: 0.34;
}

.fantasy-tree-root-reflection-batch {
    stroke: rgba(210, 151, 53, 0.22);
    stroke-width: 1.2px;
    opacity: 0.42;
}

.fantasy-tree-decorative-root-shell {
    opacity: 0.64;
}

.fantasy-tree-decorative-root-main.root-collar,
.fantasy-tree-decorative-root-core.root-collar,
.fantasy-tree-decorative-root-filament.root-collar,
.fantasy-tree-decorative-root-main.root-surface,
.fantasy-tree-decorative-root-core.root-surface,
.fantasy-tree-decorative-root-main.root-tail,
.fantasy-tree-decorative-root-core.root-tail,
.fantasy-tree-decorative-root-main.root-rootlet,
.fantasy-tree-decorative-root-core.root-rootlet {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-miterlimit: 3;
}

.fantasy-tree-decorative-root-main.root-collar {
    stroke: rgba(217, 161, 59, 0.94);
    stroke-width: calc(var(--decorative-width, 1px) * 2.08 + 0.5px);
    opacity: var(--root-collar-opacity, 0.9);
}

.fantasy-tree-decorative-root-core.root-collar {
    stroke: rgba(255, 222, 146, 0.94);
    stroke-width: max(0.46px, calc(var(--decorative-width, 1px) * 0.38));
    opacity: var(--root-collar-opacity, 0.9);
}

.fantasy-tree-decorative-root-filament.root-collar {
    stroke: rgba(255, 250, 229, 0.88);
    stroke-width: max(0.3px, calc(var(--decorative-width, 1px) * 0.15));
    opacity: calc(var(--root-collar-opacity, 0.9) * 0.76);
}

.fantasy-tree-decorative-root-main.root-surface {
    stroke: rgba(191, 137, 48, 0.84);
    stroke-width: calc(var(--decorative-width, 1px) * 1.72 + 0.34px);
    opacity: var(--root-surface-opacity, 0.62);
}

.fantasy-tree-decorative-root-core.root-surface {
    stroke: rgba(244, 201, 115, 0.78);
    stroke-width: max(0.36px, calc(var(--decorative-width, 1px) * 0.27));
    opacity: calc(var(--root-surface-opacity, 0.62) * 0.84);
}

.fantasy-tree-decorative-root-main.root-tail,
.fantasy-tree-decorative-root-main.root-rootlet {
    stroke: rgba(153, 106, 36, 0.68);
    stroke-width: calc(var(--decorative-width, 1px) * 1.18 + 0.22px);
    opacity: var(--root-tail-opacity, 0.28);
}

.fantasy-tree-decorative-root-core.root-tail,
.fantasy-tree-decorative-root-core.root-rootlet {
    stroke: rgba(224, 177, 88, 0.56);
    stroke-width: max(0.26px, calc(var(--decorative-width, 1px) * 0.2));
    opacity: calc(var(--root-tail-opacity, 0.28) * 0.76);
}

.fantasy-tree-decorative-root.far {
    opacity: 0.72;
}

.fantasy-tree-decorative-root.mid {
    opacity: 0.86;
}

.fantasy-tree-circuit-pad.root-pad {
    fill: rgba(20, 14, 6, 0.7);
    stroke: rgba(207, 156, 66, 0.48);
    stroke-width: 0.54px;
    opacity: 0.42;
    filter: none;
}

.fantasy-tree-decorative-twig-batch.canopy-lower
.fantasy-tree-decorative-twig-batch-main {
    stroke: rgba(119, 83, 30, 0.16);
}

.fantasy-tree-decorative-twig-batch.canopy-mid
.fantasy-tree-decorative-twig-batch-main {
    stroke: rgba(143, 99, 34, 0.23);
}

.fantasy-tree-decorative-twig-batch.canopy-mid
.fantasy-tree-decorative-twig-batch-core {
    stroke: rgba(235, 188, 96, 0.3);
}

.fantasy-tree-decorative-twig-batch.canopy-upper
.fantasy-tree-decorative-twig-batch-main {
    stroke: rgba(164, 113, 38, 0.29);
    stroke-width: 0.5px;
}

.fantasy-tree-decorative-twig-batch.canopy-upper
.fantasy-tree-decorative-twig-batch-core {
    stroke: rgba(247, 205, 119, 0.4);
    stroke-width: 0.22px;
    opacity: 0.82;
}

.fantasy-tree-decorative-twig.canopy-upper {
    stroke: rgba(181, 126, 42, calc(var(--decorative-opacity, 0.42) * 1.16));
}

.fantasy-tree-decorative-twig-core.canopy-upper {
    opacity: calc(var(--decorative-opacity, 0.42) * 0.92);
}

.fantasy-tree-leaf-batch,
.fantasy-tree-leaf-glint {
    vector-effect: non-scaling-stroke;
    stroke-linecap: square;
    stroke-linejoin: miter;
    pointer-events: none;
}

.fantasy-tree-leaf-batch {
    fill: rgba(213, 157, 57, 0.56);
    stroke: rgba(238, 194, 103, 0.68);
    stroke-width: 0.44px;
    opacity: var(--leaf-batch-opacity, 0.48);
}

.fantasy-tree-leaf-batch.luminance-dim {
    fill: rgba(150, 104, 35, 0.42);
    stroke: rgba(202, 151, 67, 0.48);
    opacity: calc(var(--leaf-batch-opacity, 0.4) * 0.68);
}

.fantasy-tree-leaf-batch.luminance-mid {
    fill: rgba(218, 164, 65, 0.62);
    stroke: rgba(244, 205, 119, 0.72);
}

.fantasy-tree-leaf-batch.luminance-bright {
    fill: rgba(255, 220, 137, 0.86);
    stroke: rgba(255, 241, 197, 0.92);
    stroke-width: 0.52px;
    filter: drop-shadow(0 0 2px rgba(239, 173, 52, 0.46));
}

.fantasy-tree-leaf-batch.canopy-upper {
    opacity: min(0.92, calc(var(--leaf-batch-opacity, 0.54) * 1.16));
}

.fantasy-tree-leaf-batch.shoulder,
.fantasy-tree-leaf-batch.canopy-lower {
    opacity: calc(var(--leaf-batch-opacity, 0.44) * 0.74);
}

.fantasy-tree-leaf-glint {
    fill: rgba(255, 239, 185, 0.94);
    stroke: rgba(255, 250, 226, 0.98);
    stroke-width: 0.58px;
    opacity: var(--leaf-opacity, 0.76);
    filter:
        drop-shadow(0 0 2px rgba(255, 240, 193, 0.72))
        drop-shadow(0 0 5px rgba(235, 164, 43, 0.46));
    animation: fantasyTreeLeafGlint 8.6s linear var(--leaf-delay, 0s) infinite;
}

@keyframes fantasyTreeLeafGlint {
    0%, 72%, 100% {
        opacity: calc(var(--leaf-opacity, 0.76) * 0.54);
    }
    80% {
        opacity: var(--leaf-opacity, 0.76);
    }
    87% {
        opacity: calc(var(--leaf-opacity, 0.76) * 0.68);
    }
}

.fantasy-tree-environment-root-shadow {
    opacity: 0.48;
    filter: blur(13px);
}

.fantasy-tree-environment-socket {
    width: 3px;
    height: 3px;
    box-shadow:
        0 0 0 5px rgba(113, 73, 19, 0.18),
        0 0 0 12px rgba(191, 127, 30, 0.055),
        0 0 10px 2px rgba(255, 223, 140, 0.54),
        0 0 22px 6px rgba(232, 145, 32, 0.16);
    opacity: 0.72;
}

.fantasy-tree-environment-socket::before {
    width: min(250px, 26vw);
    height: 130px;
    opacity: 0.42;
}

.fantasy-tree-environment-socket::after {
    width: 42px;
    height: 42px;
    opacity: 0.3;
}

@media (max-width: 640px) {
    .fantasy-tree-leaf-batch.luminance-dim,
    .fantasy-tree-decorative-twig-batch.canopy-lower {
        display: none;
    }

    .fantasy-tree-root-shadow-batch {
        stroke-width: 5px;
        opacity: 0.24;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fantasy-tree-leaf-glint {
        animation: none !important;
        opacity: var(--leaf-opacity, 0.76);
    }
}
/* /destiny-tree-canopy-roots-20260817-r4 */

/* destiny-tree-perspective-roots-20260817-r6 */
.fantasy-tree-root-contact-glow {
    fill: rgba(226, 165, 58, 0.105);
    opacity: 0.58;
    filter: url(#fantasy-tree-root-contact-blur);
    mix-blend-mode: screen;
}

.fantasy-tree-root-contact-rim {
    fill: rgba(255, 223, 145, 0.075);
    stroke: rgba(236, 181, 82, 0.18);
    stroke-width: 0.7px;
    opacity: 0.68;
    filter: drop-shadow(0 0 4px rgba(225, 155, 45, 0.14));
}

.fantasy-tree-root-shadow-batch {
    stroke: rgba(4, 7, 8, 0.88);
    stroke-linecap: square;
    stroke-linejoin: miter;
    mix-blend-mode: multiply;
}

.fantasy-tree-root-shadow-batch.root-shadow-far {
    stroke-width: 3.2px;
    opacity: 0.16;
}

.fantasy-tree-root-shadow-batch.root-shadow-mid {
    stroke-width: 5.4px;
    opacity: 0.24;
}

.fantasy-tree-root-shadow-batch.root-shadow-near {
    stroke-width: 8.6px;
    opacity: 0.32;
}

.fantasy-tree-root-reflection-batch {
    stroke: rgba(213, 157, 57, 0.2);
    stroke-linecap: square;
    stroke-linejoin: miter;
    mix-blend-mode: screen;
}

.fantasy-tree-root-reflection-batch.root-reflection-far {
    stroke-width: 0.7px;
    opacity: 0.16;
}

.fantasy-tree-root-reflection-batch.root-reflection-near {
    stroke-width: 1.15px;
    opacity: 0.24;
}

.fantasy-tree-decorative-root-shell.root-collar,
.fantasy-tree-decorative-root-shell.root-surface-far,
.fantasy-tree-decorative-root-shell.root-surface-near,
.fantasy-tree-decorative-root-shell.root-tail,
.fantasy-tree-decorative-root-shell.root-rootlet,
.fantasy-tree-decorative-root-main.root-collar,
.fantasy-tree-decorative-root-main.root-surface-far,
.fantasy-tree-decorative-root-main.root-surface-near,
.fantasy-tree-decorative-root-main.root-tail,
.fantasy-tree-decorative-root-main.root-rootlet,
.fantasy-tree-decorative-root-core.root-collar,
.fantasy-tree-decorative-root-core.root-surface-far,
.fantasy-tree-decorative-root-core.root-surface-near,
.fantasy-tree-decorative-root-core.root-tail,
.fantasy-tree-decorative-root-core.root-rootlet,
.fantasy-tree-decorative-root-filament.root-collar,
.fantasy-tree-decorative-root-filament.root-surface-near {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-miterlimit: 3;
}

.fantasy-tree-decorative-root-shell.root-collar {
    stroke: rgba(24, 18, 10, 0.82);
    stroke-width: calc(var(--root-collar-width, 1px) * 2.15 + 0.8px);
    opacity: 0.78;
}

.fantasy-tree-decorative-root-shell.root-surface-far {
    stroke: rgba(16, 15, 11, 0.78);
    stroke-width: calc(var(--root-surface-far-width, 1px) * 2.05 + 0.65px);
    opacity: 0.68;
}

.fantasy-tree-decorative-root-shell.root-surface-near {
    stroke: rgba(13, 15, 13, 0.84);
    stroke-width: calc(var(--root-surface-near-width, 1px) * 2.1 + 0.7px);
    opacity: 0.76;
}

.fantasy-tree-decorative-root-shell.root-tail {
    stroke: rgba(9, 13, 13, 0.86);
    stroke-width: calc(var(--root-foreground-width, 1px) * 2.05 + 0.55px);
    opacity: 0.78;
}

.fantasy-tree-decorative-root-shell.root-rootlet {
    stroke: rgba(10, 13, 12, 0.78);
    stroke-width: calc(var(--rootlet-width, 1px) * 1.8 + 0.4px);
    opacity: 0.66;
}

.fantasy-tree-decorative-root-main.root-collar {
    stroke: rgba(219, 165, 69, 0.9);
    stroke-width: calc(var(--root-collar-width, 1px) * 1.25 + 0.2px);
    opacity: var(--root-collar-opacity, 0.9);
    filter: drop-shadow(0 0 2px rgba(223, 157, 45, 0.22));
}

.fantasy-tree-decorative-root-main.root-surface-far {
    stroke: rgba(145, 104, 40, 0.76);
    stroke-width: calc(var(--root-surface-far-width, 1px) * 1.16 + 0.16px);
    opacity: var(--root-surface-far-opacity, 0.56);
}

.fantasy-tree-decorative-root-main.root-surface-near {
    stroke: rgba(190, 139, 51, 0.82);
    stroke-width: calc(var(--root-surface-near-width, 1px) * 1.12 + 0.16px);
    opacity: var(--root-surface-near-opacity, 0.68);
    filter: drop-shadow(0 1px 2px rgba(3, 7, 8, 0.72));
}

.fantasy-tree-decorative-root-main.root-tail {
    stroke: rgba(170, 121, 42, 0.74);
    stroke-width: calc(var(--root-foreground-width, 1px) * 1.02 + 0.12px);
    opacity: var(--root-tail-opacity, 0.46);
    filter: drop-shadow(0 2px 2px rgba(2, 6, 8, 0.78));
}

.fantasy-tree-decorative-root-main.root-rootlet {
    stroke: rgba(151, 107, 38, 0.68);
    stroke-width: calc(var(--rootlet-width, 1px) * 0.96 + 0.1px);
    opacity: var(--rootlet-opacity, 0.4);
}

.fantasy-tree-decorative-root-core.root-collar {
    stroke: rgba(255, 225, 157, 0.9);
    stroke-width: max(0.42px, calc(var(--root-collar-width, 1px) * 0.28));
    opacity: calc(var(--root-collar-opacity, 0.9) * 0.86);
}

.fantasy-tree-decorative-root-core.root-surface-far {
    stroke: rgba(221, 177, 92, 0.62);
    stroke-width: max(0.34px, calc(var(--root-surface-far-width, 1px) * 0.22));
    opacity: calc(var(--root-surface-far-opacity, 0.56) * 0.72);
}

.fantasy-tree-decorative-root-core.root-surface-near {
    stroke: rgba(242, 197, 108, 0.72);
    stroke-width: max(0.38px, calc(var(--root-surface-near-width, 1px) * 0.24));
    opacity: calc(var(--root-surface-near-opacity, 0.68) * 0.78);
}

.fantasy-tree-decorative-root-core.root-tail {
    stroke: rgba(221, 173, 83, 0.58);
    stroke-width: max(0.38px, calc(var(--root-foreground-width, 1px) * 0.2));
    opacity: calc(var(--root-tail-opacity, 0.46) * 0.72);
}

.fantasy-tree-decorative-root-core.root-rootlet {
    stroke: rgba(207, 157, 71, 0.52);
    stroke-width: max(0.3px, calc(var(--rootlet-width, 1px) * 0.18));
    opacity: calc(var(--rootlet-opacity, 0.4) * 0.7);
}

.fantasy-tree-decorative-root-filament.root-collar {
    stroke: rgba(255, 250, 229, 0.82);
    stroke-width: max(0.28px, calc(var(--root-collar-width, 1px) * 0.11));
    opacity: calc(var(--root-collar-opacity, 0.9) * 0.58);
}

.fantasy-tree-decorative-root-filament.root-surface-near {
    stroke: rgba(255, 235, 183, 0.62);
    stroke-width: max(0.26px, calc(var(--root-surface-near-width, 1px) * 0.09));
    opacity: calc(var(--root-surface-near-opacity, 0.68) * 0.34);
}

.fantasy-tree-decorative-root.far {
    opacity: 0.66;
}

.fantasy-tree-decorative-root.mid {
    opacity: 0.84;
}

.fantasy-tree-decorative-root.near {
    opacity: 0.98;
}

.fantasy-tree-circuit-pad.root-pad {
    fill: rgba(8, 12, 12, 0.74);
    stroke: rgba(181, 132, 52, 0.38);
    stroke-width: 0.42px;
    opacity: 0.26;
    filter: none;
}

@media (max-width: 640px) {
    .fantasy-tree-root-shadow-batch.root-shadow-far,
    .fantasy-tree-root-reflection-batch.root-reflection-far {
        display: none;
    }

    .fantasy-tree-root-shadow-batch.root-shadow-near {
        stroke-width: 6.4px;
        opacity: 0.24;
    }
}
/* /destiny-tree-perspective-roots-20260817-r6 */

/* destiny-tree-crown-transition-20260818-r7 */
.fantasy-tree-trunk {
    filter:
        drop-shadow(0 0 5px rgba(206, 141, 40, 0.14))
        drop-shadow(0 0 16px rgba(177, 111, 25, 0.07));
}

.fantasy-tree-trunk-shell {
    fill: url(#fantasy-tree-trunk-body-fill);
    stroke: none;
}

.fantasy-tree-trunk-core {
    fill: rgba(36, 25, 10, 0.045);
    stroke: none;
}

.fantasy-tree-trunk-contour {
    fill: none;
    stroke: rgba(151, 108, 42, 0.28);
    stroke-width: 0.82px;
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-miterlimit: 3;
    vector-effect: non-scaling-stroke;
    opacity: 0.74;
    filter: drop-shadow(0 0 2px rgba(215, 151, 45, 0.12));
}

.fantasy-tree-trunk-bough-shadow {
    fill: none;
    stroke: rgba(7, 8, 7, 0.9);
    stroke-width: calc(var(--trunk-lane-width, 1.35px) * 3.05 + 2px);
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-miterlimit: 3;
    vector-effect: non-scaling-stroke;
    opacity: 0.76;
}

.fantasy-tree-trunk-lane-halo,
.fantasy-tree-trunk-lane,
.fantasy-tree-trunk-lane-filament,
.fantasy-tree-trunk-lane-flow {
    stroke-linecap: square;
    stroke-linejoin: miter;
    stroke-miterlimit: 3;
}

.fantasy-tree-trunk-junction {
    opacity: 0.18;
    stroke-width: 0.65px;
}

.fantasy-tree-trunk-lane-group.current .fantasy-tree-trunk-junction {
    opacity: 0.46;
}

.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-junction {
    opacity: 0.82;
}

.fantasy-tree-decorative-twig-batch.shoulder,
.fantasy-tree-decorative-twig.shoulder {
    opacity: 0.82;
}

@media (max-width: 640px) {
    .fantasy-tree-trunk-contour {
        stroke-width: 0.68px;
        opacity: 0.58;
    }

    .fantasy-tree-trunk-bough-shadow {
        stroke-width: calc(var(--trunk-lane-width, 1.35px) * 2.7 + 1.6px);
    }
}
/* /destiny-tree-crown-transition-20260818-r7 */

/* destiny-tree-selection-flow-visibility-20260818-r9 */
.fantasy-tree-edges .fantasy-tree-edge-flow-halo,
.fantasy-tree-trunk-lane-flow-halo {
    fill: none;
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    opacity: 0;
    animation: none;
}

.fantasy-tree-edges .fantasy-tree-edge-flow,
.fantasy-tree-trunk-lane-flow {
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.fantasy-tree-edges .fantasy-tree-edge-core.selected:not(.current) {
    stroke: #f1bd58;
    opacity: 0.98;
    filter: drop-shadow(0 0 2px rgba(234, 165, 54, 0.34));
}

.fantasy-tree-edges .fantasy-tree-edge-filament.selected:not(.current) {
    stroke: #ffe7a8;
    opacity: 0.72;
    filter: drop-shadow(0 0 2px rgba(255, 219, 140, 0.34));
}

.fantasy-tree-trunk-lane-group.selected:not(.current)
.fantasy-tree-trunk-lane {
    stroke: #f1bd58;
    opacity: 0.98;
    filter: drop-shadow(0 0 2px rgba(234, 165, 54, 0.34));
}

.fantasy-tree-trunk-lane-group.selected:not(.current)
.fantasy-tree-trunk-lane-filament {
    stroke: #ffe7a8;
    opacity: 0.72;
    filter: drop-shadow(0 0 2px rgba(255, 219, 140, 0.34));
}

.fantasy-tree-edges .fantasy-tree-edge-flow-halo.selected {
    stroke: rgba(241, 174, 55, 0.78);
    stroke-width: max(
        3.2px,
        calc(var(--edge-active-core-width, 2.4px) * 1.55)
    );
    stroke-dasharray: 16 32;
    stroke-dashoffset: var(--tree-flow-start, 0px);
    opacity: 0.42;
    filter:
        drop-shadow(0 0 6px rgba(241, 174, 55, 0.52))
        drop-shadow(0 0 10px rgba(224, 137, 30, 0.28));
    animation: fantasyTreeSelectedFlow 3.6s linear infinite;
}

.fantasy-tree-edges .fantasy-tree-edge-flow.selected {
    stroke: #fffdf0;
    stroke-width: max(
        1.25px,
        calc(var(--edge-active-core-width, 2.4px) * 0.58)
    );
    stroke-dasharray: 16 32;
    stroke-dashoffset: var(--tree-flow-start, 0px);
    opacity: 0.96;
    filter: drop-shadow(0 0 2px rgba(255, 253, 240, 0.92));
    animation: fantasyTreeSelectedFlow 3.6s linear infinite;
}

.fantasy-tree-trunk-lane-group.selected
.fantasy-tree-trunk-lane-flow-halo {
    stroke: rgba(241, 174, 55, 0.78);
    stroke-width: max(
        2.8px,
        calc(var(--trunk-lane-width, 1.35px) * 1.7)
    );
    stroke-dasharray: 16 32;
    stroke-dashoffset: var(--tree-flow-start, 0px);
    opacity: 0.42;
    filter:
        drop-shadow(0 0 6px rgba(241, 174, 55, 0.52))
        drop-shadow(0 0 10px rgba(224, 137, 30, 0.28));
    animation: fantasyTreeSelectedFlow 3.6s linear infinite;
}

.fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-lane-flow {
    stroke: #fffdf0;
    stroke-width: max(
        1.1px,
        calc(var(--trunk-lane-width, 1.35px) * 0.82)
    );
    stroke-dasharray: 16 32;
    stroke-dashoffset: var(--tree-flow-start, 0px);
    opacity: 0.96;
    filter: drop-shadow(0 0 2px rgba(255, 253, 240, 0.92));
    animation: fantasyTreeSelectedFlow 3.6s linear infinite;
}

@keyframes fantasyTreeSelectedFlow {
    from {
        stroke-dashoffset: var(--tree-flow-start, 0px);
    }
    to {
        stroke-dashoffset: var(--tree-flow-end, -96px);
    }
}

.fantasy-tree-edges .fantasy-tree-edge-bark.future:not(.current) {
    stroke: rgba(39, 29, 15, 0.82);
    opacity: calc(0.58 + var(--tree-future-strength, 0.34) * 0.35);
}

.fantasy-tree-edges .fantasy-tree-edge-halo.future:not(.current) {
    stroke: rgba(183, 126, 41, 0.28);
    opacity: calc(var(--tree-future-strength, 0.34) * 0.54);
    filter: drop-shadow(0 0 3px rgba(218, 151, 47, 0.16));
}

.fantasy-tree-edges .fantasy-tree-edge-core.future:not(.current) {
    stroke: #c99b4b;
    opacity: var(--tree-future-strength, 0.34);
    filter: drop-shadow(0 0 2px rgba(224, 163, 64, 0.16));
}

.fantasy-tree-edges .fantasy-tree-edge-filament.future:not(.current) {
    stroke: #ead09a;
    opacity: calc(var(--tree-future-strength, 0.34) * 0.7);
    filter: none;
}

.fantasy-tree-edges .fantasy-tree-edge-flow-halo.future:not(.selected),
.fantasy-tree-edges .fantasy-tree-edge-flow.future:not(.selected) {
    opacity: 0;
    animation: none;
    filter: none;
}

.fantasy-tree-node.future-path:not(.current-path):not(.current):not(.selected)
.fantasy-tree-node-dot {
    border-color: rgba(201, 155, 71, 0.78);
    box-shadow:
        inset 0 0 0 2px rgba(3, 6, 7, 0.82),
        inset 0 0 0 3px rgba(205, 158, 68, 0.08),
        0 0 4px rgba(213, 157, 57, calc(
            var(--tree-future-strength, 0.34) * 0.42
        ));
    opacity: calc(0.72 + var(--tree-future-strength, 0.34) * 0.3);
}

.fantasy-tree-node.future-path:not(.current-path):not(.current):not(.selected)
.fantasy-tree-node-dot::before {
    background: #c89e54;
    box-shadow: 0 0 4px rgba(220, 166, 70, calc(
        var(--tree-future-strength, 0.34) * 0.48
    ));
}

.fantasy-tree-node.future-path:not(.current-path):not(.current):not(.selected)
.fantasy-tree-node-circuit-ring {
    opacity: calc(var(--tree-future-strength, 0.34) * 0.78);
    filter: drop-shadow(0 0 2px rgba(210, 153, 53, 0.18));
    animation: none;
}

@media (max-width: 640px) {
    .fantasy-tree-edges .fantasy-tree-edge-flow-halo.selected {
        stroke-width: max(
            2.72px,
            calc(var(--edge-active-core-width, 2.4px) * 1.3175)
        );
    }

    .fantasy-tree-trunk-lane-group.selected
    .fantasy-tree-trunk-lane-flow-halo {
        stroke-width: max(
            2.38px,
            calc(var(--trunk-lane-width, 1.35px) * 1.445)
        );
    }

    .fantasy-tree-edges .fantasy-tree-edge-flow.selected {
        stroke-width: max(
            1px,
            calc(var(--edge-active-core-width, 2.4px) * 0.58)
        );
    }

    .fantasy-tree-trunk-lane-group.selected
    .fantasy-tree-trunk-lane-flow {
        stroke-width: max(
            1px,
            calc(var(--trunk-lane-width, 1.35px) * 0.82)
        );
    }
}

@media (prefers-reduced-motion: reduce) {
    .fantasy-tree-edges .fantasy-tree-edge-flow-halo.selected,
    .fantasy-tree-edges .fantasy-tree-edge-flow.selected,
    .fantasy-tree-trunk-lane-group.selected
    .fantasy-tree-trunk-lane-flow-halo,
    .fantasy-tree-trunk-lane-group.selected .fantasy-tree-trunk-lane-flow {
        opacity: 0 !important;
        animation: none !important;
    }
}
/* /destiny-tree-selection-flow-visibility-20260818-r9 */

/* destiny-tree-future-path-visibility-20260818-r10 */
.fantasy-tree-edges .fantasy-tree-edge-bark.future:not(.current) {
    stroke: rgba(31, 23, 11, 0.92);
    stroke-width: calc(var(--edge-halo-width, 5px) + 1.2px);
    opacity: calc(0.78 + var(--tree-future-strength, 0.48) * 0.22);
}

.fantasy-tree-edges .fantasy-tree-edge-halo.future:not(.current) {
    stroke: rgba(224, 157, 54, 0.48);
    stroke-width: calc(var(--edge-halo-width, 5px) + 0.9px);
    opacity: calc(0.14 + var(--tree-future-strength, 0.48) * 0.56);
    filter:
        drop-shadow(0 0 3px rgba(231, 166, 61, 0.24))
        drop-shadow(0 0 6px rgba(207, 125, 27, 0.12));
}

.fantasy-tree-edges .fantasy-tree-edge-core.future:not(.current) {
    stroke: #dfad58;
    stroke-width: max(
        1.35px,
        calc(var(--edge-core-width, 1.5px) * 1.16)
    );
    opacity: calc(0.18 + var(--tree-future-strength, 0.48) * 0.82);
    filter: drop-shadow(0 0 2px rgba(235, 173, 70, 0.32));
}

.fantasy-tree-edges .fantasy-tree-edge-filament.future:not(.current) {
    stroke: #ffe2a1;
    stroke-width: max(
        0.52px,
        calc(var(--edge-filament-width, 0.45px) * 1.12)
    );
    opacity: calc(0.15 + var(--tree-future-strength, 0.48) * 0.74);
    filter: drop-shadow(0 0 1.5px rgba(255, 220, 145, 0.28));
}

.fantasy-tree-node.future-path:not(.current-path):not(.current):not(.selected)
.fantasy-tree-node-dot {
    border-color: rgba(216, 172, 92, 0.92);
    box-shadow:
        inset 0 0 0 2px rgba(3, 6, 7, 0.86),
        inset 0 0 0 3px rgba(220, 171, 79, 0.12),
        0 0 5px rgba(224, 169, 67, calc(
            0.18 + var(--tree-future-strength, 0.48) * 0.48
        ));
    opacity: calc(0.82 + var(--tree-future-strength, 0.48) * 0.22);
}

.fantasy-tree-node.future-path:not(.current-path):not(.current):not(.selected)
.fantasy-tree-node-dot::before {
    background: #ddb15e;
    box-shadow:
        0 0 3px rgba(255, 222, 153, 0.42),
        0 0 6px rgba(218, 156, 53, calc(
            0.16 + var(--tree-future-strength, 0.48) * 0.38
        ));
}

.fantasy-tree-node.future-path:not(.current-path):not(.current):not(.selected)
.fantasy-tree-node-circuit-ring {
    opacity: calc(0.2 + var(--tree-future-strength, 0.48) * 0.68);
    filter: drop-shadow(0 0 2px rgba(220, 163, 61, 0.26));
    animation: none;
}
/* /destiny-tree-future-path-visibility-20260818-r10 */

/* destiny-tree-root-create-zone-20260818-r14 */
.fantasy-tree-root-create-zone {
    position: absolute;
    z-index: 3;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transform-origin: center;
    outline: none;
    clip-path: ellipse(50% 50% at 50% 50%);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
/* /destiny-tree-root-create-zone-20260818-r14 */

/* destiny-tree-mobile-stability-20260819-r1 */
@media (max-width: 860px) and (hover: none), (max-width: 860px) and (pointer: coarse) {
    [data-tree-render-mode="reduced"] .fantasy-tree-decoration path,
    [data-tree-render-mode="reduced"] .fantasy-tree-decoration use,
    [data-tree-render-mode="reduced"] .fantasy-tree-decoration circle,
    [data-tree-render-mode="reduced"] .fantasy-tree-edges path,
    [data-tree-render-mode="reduced"] .fantasy-tree-edges use,
    [data-tree-render-mode="reduced"] .fantasy-tree-trunk path,
    [data-tree-render-mode="reduced"] .fantasy-tree-trunk use,
    [data-tree-render-mode="reduced"] .fantasy-tree-node-dot,
    [data-tree-render-mode="reduced"] .fantasy-tree-node-dot::before,
    [data-tree-render-mode="reduced"] .fantasy-tree-node-circuit-ring,
    [data-tree-render-mode="reduced"] .fantasy-tree-environment-world > * {
        filter: none !important;
        mix-blend-mode: normal !important;
    }

    [data-tree-render-mode="reduced"] .fantasy-tree-leaf-glint,
    [data-tree-render-mode="reduced"] .fantasy-tree-ambient-particle,
    [data-tree-render-mode="reduced"] .fantasy-tree-node-particles i,
    [data-tree-render-mode="reduced"] .fantasy-tree-node-circuit-ring,
    [data-tree-render-mode="reduced"] .fantasy-tree-environment-socket,
    [data-tree-render-mode="reduced"] .fantasy-tree-environment-socket::before,
    [data-tree-render-mode="reduced"] .fantasy-tree-environment-socket::after {
        animation: none !important;
    }

    [data-tree-render-mode="reduced"] .fantasy-tree-root-ground-effects.reduced {
        opacity: 0.72;
    }

    [data-tree-render-mode="reduced"] .fantasy-tree-environment-root-shadow {
        filter: none;
        opacity: 0.28;
    }
}
/* /destiny-tree-mobile-stability-20260819-r1 */

/* codex: life-forge-aurora-capsule-v3 */
/* Rounded interaction surfaces keep the large HUD containers angular. */
#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;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-mode-btn, .fantasy-action-btn, .fantasy-icon-btn) {
    overflow: hidden;
    border-color: rgba(105, 211, 238, 0.34) !important;
    background:
        linear-gradient(135deg, rgba(14, 34, 50, 0.96), rgba(8, 15, 31, 0.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(239, 255, 255, 0.08),
        0 0 10px rgba(56, 211, 255, 0.06);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-mode-btn:hover, .fantasy-action-btn:hover, .fantasy-icon-btn:hover) {
    border-color: rgba(113, 234, 255, 0.78) !important;
    box-shadow:
        inset 0 1px 0 rgba(245, 255, 255, 0.12),
        0 0 14px rgba(56, 211, 255, 0.18),
        0 0 24px rgba(255, 71, 193, 0.08);
}

#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]
    ) {
    border-color: rgba(181, 139, 255, 0.88) !important;
    background:
        linear-gradient(135deg, rgba(48, 32, 89, 0.96), rgba(16, 20, 52, 0.98)) !important;
    box-shadow:
        inset 0 1px 0 rgba(248, 241, 255, 0.14),
        0 0 16px rgba(166, 116, 255, 0.22),
        0 0 28px rgba(255, 71, 193, 0.1);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-textarea, .fantasy-age-input) {
    clip-path: none !important;
    border-radius: 20px !important;
    border-color: rgba(105, 211, 238, 0.34) !important;
    background:
        linear-gradient(rgba(79, 211, 255, 0.025) 1px, transparent 1px),
        linear-gradient(135deg, rgba(4, 18, 31, 0.98), rgba(3, 9, 20, 0.98)) !important;
    background-size: 100% 24px, auto !important;
    box-shadow:
        inset 0 1px 0 rgba(239, 255, 255, 0.07),
        inset 0 0 18px rgba(54, 160, 214, 0.07),
        0 0 10px rgba(56, 211, 255, 0.05);
}

#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:focus, .fantasy-age-input:focus) {
    border-color: rgba(113, 234, 255, 0.84) !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.18),
        0 0 24px rgba(166, 116, 255, 0.08) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-telemetry {
    clip-path: none !important;
    border-radius: 999px !important;
    border-color: rgba(105, 211, 238, 0.36) !important;
    background:
        linear-gradient(100deg, rgba(11, 35, 50, 0.92), rgba(19, 17, 48, 0.9) 54%, rgba(40, 15, 47, 0.88)) !important;
    box-shadow:
        inset 0 1px 0 rgba(239, 255, 255, 0.08),
        inset 0 0 22px rgba(55, 176, 220, 0.07),
        0 0 14px rgba(56, 211, 255, 0.09);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-console-telemetry.is-active {
    border-color: rgba(255, 91, 204, 0.72) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 242, 253, 0.12),
        inset 0 0 22px rgba(255, 71, 193, 0.1),
        0 0 16px rgba(255, 71, 193, 0.16);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-space-status-strip {
    clip-path: none !important;
    border-radius: 999px !important;
    border: 1px solid rgba(105, 211, 238, 0.38) !important;
    background:
        linear-gradient(100deg, rgba(9, 32, 47, 0.94), rgba(17, 19, 45, 0.94) 54%, rgba(36, 15, 45, 0.9)) !important;
    box-shadow:
        inset 0 1px 0 rgba(239, 255, 255, 0.08),
        0 0 12px rgba(56, 211, 255, 0.08);
}

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

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle {
    gap: 2px;
    padding: 2px;
    overflow: hidden;
    border-color: rgba(105, 211, 238, 0.38) !important;
    background: rgba(4, 14, 27, 0.9) !important;
    box-shadow:
        inset 0 1px 0 rgba(239, 255, 255, 0.08),
        0 0 12px rgba(56, 211, 255, 0.06);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle button {
    min-height: 32px;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle button.active,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-view-toggle button[aria-selected=true] {
    background:
        linear-gradient(135deg, rgba(39, 67, 88, 0.9), rgba(48, 25, 75, 0.92)) !important;
    color: #ecfbff;
    box-shadow:
        inset 0 0 12px rgba(56, 211, 255, 0.1),
        0 0 10px rgba(166, 116, 255, 0.12);
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-record {
    position: relative;
    overflow: hidden;
    border-radius: 16px !important;
    border-color: rgba(105, 166, 201, 0.28) !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-record:hover, .fantasy-record.selected, .fantasy-record.generating) {
    border-color: rgba(113, 234, 255, 0.72) !important;
    box-shadow:
        inset 0 1px 0 rgba(245, 255, 255, 0.1),
        0 0 14px rgba(56, 211, 255, 0.14),
        0 0 24px rgba(255, 71, 193, 0.08);
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(.fantasy-mode-btn, .fantasy-action-btn, .fantasy-icon-btn) {
        box-shadow: inset 0 1px 0 rgba(239, 255, 255, 0.06) !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-console-telemetry {
        border-radius: 22px !important;
    }

    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        .fantasy-space-status-strip {
        right: 14px;
        left: 14px;
    }
}

/* codex: life-forge-unified-aurora-v4-console */
/* Final control-surface cascade; layout and behavior remain unchanged. */

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

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-textarea,
        .fantasy-age-input,
        .fantasy-console-telemetry,
        .fantasy-space-status-strip
    ) {
    clip-path: none !important;
    border-color: rgba(100, 221, 246, 0.32) !important;
    background:
        linear-gradient(145deg, rgba(7, 28, 44, 0.95), rgba(2, 11, 23, 0.98)) !important;
    color: #e6f9ff !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-textarea {
    border-radius: 18px !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-age-input,
        .fantasy-console-telemetry,
        .fantasy-space-status-strip
    ) {
    border-radius: 999px !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-mode-btn::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-action-btn::before,
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-mode-btn:not(.fantasy-btn-loading),
        .fantasy-action-btn:not(.fantasy-btn-loading)
    )::after {
    content: none !important;
    display: none !important;
    animation: none !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-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: rgba(153, 239, 255, 0.86) !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):focus {
    border-color: rgba(153, 239, 255, 0.86) !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
    :is(.fantasy-action-btn:active, .fantasy-mode-btn:active, .fantasy-view-toggle button:active) {
    transform: translateY(0) scale(0.985);
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory.fantasy-memory-view
        #fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-mode-btn,
            .fantasy-action-btn,
            .fantasy-icon-btn,
            .fantasy-view-toggle
        ) {
        box-shadow: inset 0 1px 0 rgba(239, 255, 255, 0.06) !important;
    }
}
/* codex: life-forge-saturated-aurora-v5-control-fallback */
/* Dark glass controls with a saturated cyan / violet / magenta contour. */
#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready {
    --forge-cyan: #00eaff !important;
    --forge-magenta: #ff2fa6 !important;
    --forge-magenta-soft: rgba(255, 47, 166, 0.18) !important;
    --forge-yellow: #ff72d4 !important;
    --forge-text: #f4f6ff !important;
    --forge-muted: #91a3c9 !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 rgba(126, 80, 255, 0.62) !important;
    background:
        linear-gradient(135deg, rgba(8, 9, 28, 0.98), rgba(22, 4, 35, 0.96)) !important;
    color: #f3f5ff !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-textarea,
        .fantasy-age-input,
        .fantasy-console-telemetry,
        .fantasy-space-status-strip
    ) {
    clip-path: none !important;
    border-radius: 999px !important;
    border-color: rgba(0, 234, 255, 0.48) !important;
    background:
        linear-gradient(145deg, rgba(3, 7, 22, 0.99), rgba(15, 4, 29, 0.98)) !important;
    color: #f3f5ff !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    .fantasy-textarea {
    border-radius: 18px !important;
}

#view-memory.fantasy-memory-view
    #fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-mode-btn, .fantasy-action-btn, .fantasy-icon-btn) {
    box-shadow:
        inset 0 1px 0 rgba(235, 245, 255, 0.08),
        0 0 14px rgba(126, 80, 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: rgba(0, 234, 255, 0.96) !important;
    box-shadow:
        inset 0 1px 0 rgba(241, 255, 255, 0.12),
        0 0 16px rgba(0, 234, 255, 0.22),
        0 0 22px rgba(255, 47, 166, 0.16) !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;
    color: #f5feff !important;
}

/* codex: life-forge-mode-unselected-v1 */
/* Keep the two creation-mode choices in the violet / magenta family at rest. */
#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-generation-section
    .fantasy-mode-toggle
    > .fantasy-mode-btn:not(.active):not([aria-pressed="true"]) {
    border-color: transparent !important;
    background:
        linear-gradient(135deg, rgba(8, 5, 26, 0.99), rgba(31, 4, 43, 0.98)) padding-box,
        linear-gradient(
            112deg,
            rgba(143, 61, 255, 0.82),
            rgba(255, 47, 166, 0.94) 62%,
            rgba(181, 108, 255, 0.78)
        ) border-box !important;
    color: #f2eaff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 221, 248, 0.08),
        0 0 12px rgba(143, 61, 255, 0.14),
        0 0 18px rgba(255, 47, 166, 0.08) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-generation-section
    .fantasy-mode-toggle
    > .fantasy-mode-btn:not(.active):not([aria-pressed="true"]) > i {
    color: #d2b2ff !important;
    text-shadow: 0 0 8px rgba(143, 61, 255, 0.34);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-generation-section
    .fantasy-mode-toggle
    > .fantasy-mode-btn:not(.active):not([aria-pressed="true"]):hover {
    border-color: transparent !important;
    background:
        linear-gradient(135deg, rgba(18, 7, 45, 0.99), rgba(52, 5, 55, 0.99)) padding-box,
        linear-gradient(
            112deg,
            #9b4dff,
            #ff2fa6 62%,
            #d9b8ff
        ) border-box !important;
    color: #fff5fd !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 240, 252, 0.12),
        0 0 15px rgba(143, 61, 255, 0.24),
        0 0 23px rgba(255, 47, 166, 0.18) !important;
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-generation-section
    .fantasy-mode-toggle
    > .fantasy-mode-btn:not(.active):not([aria-pressed="true"]):hover > i {
    color: #ff9ddd !important;
    text-shadow: 0 0 9px rgba(255, 47, 166, 0.46);
}

#view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    .fantasy-generation-section
    .fantasy-mode-toggle
    > .fantasy-mode-btn:not(.active):not([aria-pressed="true"]):focus-visible {
    outline: 2px solid rgba(255, 134, 210, 0.84) !important;
    outline-offset: 2px;
}

@media (max-width: 860px), (hover: none), (pointer: coarse) {
    #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        .fantasy-generation-section
        .fantasy-mode-toggle
        > .fantasy-mode-btn:not(.active):not([aria-pressed="true"]) {
        box-shadow:
            inset 0 1px 0 rgba(255, 221, 248, 0.06),
            0 0 9px 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-generation-section
        .fantasy-mode-toggle
        > .fantasy-mode-btn:not(.active):not([aria-pressed="true"]) {
        transition-duration: 0.01ms !important;
    }
}