:root {
    --drakima-bg: #070610;
    --drakima-bg-2: #11111d;
    --drakima-panel: rgba(12, 11, 24, 0.9);
    --drakima-panel-soft: rgba(23, 18, 38, 0.72);
    --drakima-line: rgba(255, 0, 255, 0.36);
    --drakima-line-cyan: rgba(0, 255, 204, 0.38);
    --drakima-text: #f7edff;
    --drakima-muted: #c8bdd8;
    --drakima-cyan: #00ffcc;
    --drakima-cyan-soft: #7df9ff;
    --drakima-pink: #ff00ff;
    --drakima-hot-pink: #ff007a;
    --drakima-danger: #ff4d6d;
    --drakima-shadow-pink: 0 0 22px rgba(255, 0, 255, 0.28);
    --drakima-shadow-cyan: 0 0 22px rgba(0, 255, 204, 0.2);
    --drakima-mono-font: "VCR OSD Mono", "Courier New", monospace;
}

/* Recorded private-room stage performances */
.gynoid-private-stage-video-shell {
    position: absolute;
    z-index: 1400;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 2, 12, .72);
}

.gynoid-private-stage-video-shell[hidden] { display: none; }
.gynoid-private-stage-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #03030c;
}
.gynoid-private-stage-video-close {
    position: absolute;
    z-index: 2;
    top: .55rem;
    right: .55rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
    color: var(--gynoid-highlight, #7df9ff);
    border: 1px solid currentColor;
    background: rgba(2, 5, 18, .92);
    box-shadow: 0 0 1rem rgba(0, 0, 0, .6);
    cursor: pointer;
    font: 700 1.15rem/1 var(--drakima-font-mono, monospace);
}
.gynoid-private-stage-video-close:hover,
.gynoid-private-stage-video-close:focus-visible { color: #071018; background: var(--gynoid-highlight, #7df9ff); }
.gynoid-private-stage-video-move {
    position: absolute;
    z-index: 3;
    top: .55rem;
    left: .55rem;
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
    color: var(--gynoid-highlight, #7df9ff);
    border: 1px solid currentColor;
    background: rgba(2, 5, 18, .92);
    box-shadow: 0 0 1rem rgba(0, 0, 0, .6);
    cursor: grab;
    touch-action: none;
    user-select: none;
    font: 700 1.05rem/1 var(--drakima-font-mono, monospace);
}
.gynoid-private-stage-video-move:hover,
.gynoid-private-stage-video-move:focus-visible { color: #071018; background: var(--gynoid-highlight, #7df9ff); }
.gynoid-private-stage-video-shell.is-moving .gynoid-private-stage-video-move { cursor: grabbing; }

@media (max-width: 700px) {
}

/* Creator-owned Public Gallery */
.gallery-page { min-height: 80vh; padding: 4rem 0 6rem; background: radial-gradient(circle at 85% 8%, rgba(255,43,189,.13), transparent 35%), radial-gradient(circle at 12% 42%, rgba(34,240,230,.09), transparent 32%); }
.gallery-hero, .gallery-collection-hero { max-width: 850px; margin: 0 0 2.25rem; }
.gallery-hero h1, .gallery-collection-hero h1 { font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1.05; overflow-wrap: anywhere; }
.gallery-artwork-story h1 { font-size: clamp(1.8rem, 3.3vw, 3.1rem); line-height: 1.12; overflow-wrap: anywhere; }
.gallery-search-disclosure > summary { display: inline-flex; align-items: center; gap: .6rem; list-style: none; cursor: pointer; }
.gallery-search-disclosure > summary::-webkit-details-marker { display: none; }
.gallery-search-disclosure > summary svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.gallery-search-disclosure[open] > summary { margin-bottom: 1rem; }
.gallery-filter-panel { display: grid; grid-template-columns: minmax(220px, 2fr) minmax(150px, 1fr) minmax(150px, 1fr); gap: 1rem; align-items: end; margin-bottom: 3rem; }
.gallery-filter-panel > div { display: grid; gap: .4rem; }
.gallery-filter-panel input[type="search"], .gallery-filter-panel select { width: 100%; min-height: 44px; }
.gallery-featured-filter { align-self: center; }
.gallery-section { margin-top: 3rem; }
.gallery-masonry { columns: 3 280px; column-gap: 1.25rem; }
.gallery-tile { position: relative; display: inline-block; width: 100%; margin: 0 0 1.25rem; break-inside: avoid; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 1.15rem; background: rgba(8,10,28,.78); box-shadow: 0 24px 60px rgba(0,0,0,.25); }
.gallery-tile img { width: 100%; height: auto; display: block; transition: transform .35s ease, filter .35s ease; }
.gallery-tile a:hover img { transform: scale(1.018); filter: saturate(1.08); }
.gallery-tile > div { padding: 1.15rem; }
.gallery-collection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.gallery-collection-card { display: grid; grid-template-columns: minmax(120px, .85fr) 1.15fr; overflow: hidden; border-radius: 1.2rem; border: 1px solid rgba(255,255,255,.13); background: linear-gradient(135deg, rgba(39,17,63,.95), rgba(7,21,95,.82)); }
.gallery-collection-card img { width: 100%; height: 100%; min-height: 230px; object-fit: cover; }
.gallery-collection-card > div { padding: 1.4rem; }
.gallery-breadcrumb { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.5rem; color: rgba(255,255,255,.7); overflow-wrap: anywhere; }
.gallery-artwork-detail { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.gallery-artwork-frame { position: sticky; top: 6rem; padding: .6rem; background: linear-gradient(135deg, rgba(255,43,189,.42), rgba(34,240,230,.26)); border-radius: 1.2rem; }
.gallery-artwork-full { display: block; width: 100%; max-height: 82vh; object-fit: contain; border-radius: .85rem; background: #050612; }
.gallery-artwork-story { min-width: 0; padding-top: 1.5rem; overflow-wrap: anywhere; }
.gallery-related-links { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin: 1.5rem 0; }
.gallery-related-links strong { flex-basis: 100%; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
.gallery-related-links a, .gallery-related-links span { padding: .45rem .8rem; border: 1px solid rgba(34,240,230,.35); border-radius: 999px; }
.gallery-sequence-number { position: absolute; z-index: 2; top: .7rem; left: .7rem; padding: .35rem .55rem; border-radius: .5rem; background: rgba(5,6,18,.82); font-weight: 700; }
.gallery-admin-thumb { height: 190px; margin: -1rem -1rem 1rem; overflow: hidden; }
.gallery-admin-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-authoring-preview { margin: 1rem 0; text-align: center; }
.gallery-authoring-preview img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #080c20; border: 1px solid #3479ac; }
.gallery-authoring-preview figcaption { margin-top: .5rem; font-size: .85rem; }
.gallery-order-list { display: grid; gap: .55rem; }
.gallery-order-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem; border: 1px solid rgba(255,255,255,.12); border-radius: .7rem; }
.gallery-order-row button { min-width: 2.5rem; padding: .3rem .55rem; }
@media (max-width: 900px) { .gallery-filter-panel, .gallery-artwork-detail { grid-template-columns: 1fr; } .gallery-artwork-frame { position: static; } .gallery-collection-card { grid-template-columns: 1fr; } }

/* Gynoid Sprite Pack CMS */
.sprite-pack-admin input:not([type="checkbox"]):not([type="file"]),
.sprite-pack-admin select,
.sprite-pack-admin textarea {
    width: 100%;
    border: 1px solid rgba(25, 242, 221, .55);
    border-radius: .3rem;
    background: rgba(3, 8, 21, .9);
    color: var(--drakima-text, #f8f4ff);
    padding: .72rem .8rem;
}

.sprite-pack-admin input[type="file"] {
    width: 100%;
    border: 1px solid rgba(25, 242, 221, .5);
    border-radius: .3rem;
    background: #07101d;
    color: #f8f4ff;
}

.sprite-pack-admin input[type="file"]::file-selector-button {
    border: 0;
    border-right: 1px solid rgba(25, 242, 221, .55);
    background: #19f2dd;
    color: #031017;
    font: inherit;
    font-weight: 700;
    padding: .72rem 1rem;
    margin-right: .8rem;
    cursor: pointer;
}

.sprite-pack-admin label {
    display: block;
    color: #6efff2;
    margin-bottom: .35rem;
}

.sprite-pack-search,
.sprite-search-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) auto auto auto;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.sprite-search-grid {
    grid-template-columns: minmax(18rem, 1.7fr) repeat(3, minmax(10rem, .75fr)) auto auto;
}

.sprite-pack-check {
    display: flex !important;
    align-items: center;
    gap: .55rem;
    color: var(--drakima-text, #f8f4ff) !important;
    margin: 0;
}

.sprite-pack-check input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #19f2dd;
}

.sprite-pack-check--bottom { align-self: end; padding-bottom: .8rem; }

.sprite-pack-index-grid,
.sprite-library-grid {
    display: grid;
    gap: 1.25rem;
}

.sprite-pack-index-card {
    display: grid;
    grid-template-columns: minmax(11rem, 15rem) 1fr;
    gap: 1.35rem;
    overflow: hidden;
}

.sprite-pack-index-portrait {
    min-height: 15rem;
    border: 1px solid rgba(25, 242, 221, .35);
    background: radial-gradient(circle at 50% 25%, rgba(239, 31, 185, .2), rgba(3, 8, 21, .85) 65%);
    overflow: hidden;
}

.sprite-pack-index-portrait img {
    width: 100%;
    height: 100%;
    max-height: 22rem;
    object-fit: contain;
    object-position: center top;
}

.sprite-pack-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .8rem 0;
}

.sprite-pack-stat-row span,
.sprite-pack-status {
    display: inline-flex;
    border: 1px solid rgba(25, 242, 221, .42);
    border-radius: .2rem;
    padding: .28rem .48rem;
    color: #6efff2;
    font-size: .82rem;
}

.sprite-pack-status--active { border-color: #61ffa8; color: #61ffa8; }
.sprite-pack-status--archived { border-color: #ffc061; color: #ffc061; }

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

.sprite-library-card { overflow: hidden; }

.sprite-library-previews {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.sprite-library-previews figure { margin: 0; }
.sprite-library-previews figcaption { color: #6efff2; font-size: .78rem; padding-top: .35rem; }

.sprite-preview-frame {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border: 1px solid rgba(239, 31, 185, .52);
    background:
        linear-gradient(45deg, rgba(255,255,255,.05) 25%, transparent 25%) 0 0 / 1rem 1rem,
        linear-gradient(-45deg, rgba(255,255,255,.05) 25%, transparent 25%) 0 0 / 1rem 1rem,
        rgba(3, 8, 21, .82);
}

.sprite-preview-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}

.sprite-preview-frame--derived img {
    object-position: center top;
    transform: scale(1.65);
    transform-origin: center top;
}

.sprite-library-card-copy { padding-top: .9rem; }

.sprite-detail-grid,
.sprite-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 1.25rem 0;
}

.sprite-detail-art,
.sprite-editor-current {
    aspect-ratio: 3 / 4;
    max-height: 72vh;
    overflow: hidden;
    border: 1px solid rgba(25, 242, 221, .38);
    background: rgba(3, 8, 21, .82);
}

.sprite-detail-art img,
.sprite-editor-current img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}

.sprite-detail-art--upper { max-height: 58vh; }
.sprite-editor-current { max-height: 30rem; margin-bottom: .75rem; }
.sprite-editor-current--upper { max-height: 22rem; }

.sprite-metadata-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin: 0;
}

.sprite-metadata-list div { border: 1px solid rgba(25, 242, 221, .25); padding: .8rem; }
.sprite-metadata-list dt { color: #ff45c8; font-size: .8rem; text-transform: uppercase; }
.sprite-metadata-list dd { margin: .25rem 0 0; }

.sprite-editor-form { display: grid; gap: 1rem; }
.sprite-editor-two-column,
.sprite-editor-three-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.sprite-editor-three-column { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sprite-upload-grid article { border: 1px solid rgba(239, 31, 185, .35); padding: 1rem; }
.sprite-revision-table { color: var(--drakima-text, #f8f4ff); }
.sprite-revision-table a { color: #6efff2; }

@media (max-width: 1000px) {
    .sprite-pack-search,
    .sprite-search-grid,
    .sprite-library-grid,
    .sprite-detail-grid,
    .sprite-upload-grid,
    .sprite-editor-three-column { grid-template-columns: 1fr; }
    .sprite-pack-index-card { grid-template-columns: minmax(8rem, 12rem) 1fr; }
}

@media (max-width: 640px) {
    .sprite-pack-index-card,
    .sprite-editor-two-column,
    .sprite-metadata-list { grid-template-columns: 1fr; }
    .sprite-pack-index-portrait { min-height: 12rem; }
}

/* H2 private-room refinement: a 16:9 VN stage with overlaid dialogue and media controls. */
.gynoid-private-room-container {
    width: min(100%, 1700px);
}

.gynoid-private-room-shell {
    position: relative;
    isolation: isolate;
    display: block;
    width: min(100%, calc((100dvh - 8rem) * 16 / 9));
    height: auto;
    aspect-ratio: 16 / 9;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gynoid-accent) 74%, transparent);
    background: #030713;
    box-shadow: 0 1.5rem 5rem rgba(0, 0, 0, .48), 0 0 2rem color-mix(in srgb, var(--gynoid-accent) 15%, transparent);
}

.gynoid-private-room-shell:fullscreen {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    aspect-ratio: auto;
    border: 0;
}

.gynoid-private-stage-background,
.gynoid-private-stage-shade,
.gynoid-private-stage-sprite {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.gynoid-private-stage-background {
    z-index: 0;
    object-fit: cover;
    object-position: center;
    filter: none;
}

.gynoid-private-stage-shade {
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(1, 4, 13, .1), transparent 55%, rgba(1, 4, 13, .12)),
        linear-gradient(180deg, rgba(2, 5, 15, .05) 45%, rgba(2, 5, 15, .76) 100%);
    pointer-events: none;
}

.gynoid-private-stage-sprite {
    z-index: 2;
    inset: 2% auto 0 6%;
    width: 54%;
    height: 98%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 1.2rem 1.1rem rgba(0, 0, 0, .62));
}

.gynoid-private-stage-controls {
    position: absolute;
    z-index: 6;
    top: .75rem;
    right: .75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-end;
    gap: .4rem;
    max-width: calc(100% - 1.5rem);
}

.gynoid-private-stage-controls > button,
.gynoid-private-stage-controls > .gynoid-room-menu > summary,
.gynoid-private-stage-controls > .gynoid-chat-credit-pill {
    display: grid;
    min-height: 2.4rem;
    padding: .42rem .62rem;
    place-items: center;
    color: var(--gynoid-highlight);
    border: 1px solid color-mix(in srgb, var(--gynoid-highlight) 52%, transparent);
    background: rgba(2, 7, 18, .82);
    backdrop-filter: blur(10px);
    font-family: var(--drakima-font-mono, monospace);
    font-size: .62rem;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
}

.gynoid-private-stage-controls > button {
    cursor: pointer;
}

.gynoid-private-stage-controls > button[aria-pressed="true"] {
    color: #03121a;
    background: var(--gynoid-highlight);
}

.gynoid-private-stage-controls > button[data-research-mode-toggle][aria-pressed="true"] {
    color: #fff;
    border-color: #ff22c9;
    background: rgb(61 7 61 / 92%);
    box-shadow: 0 0 18px rgb(255 34 201 / 24%);
}

.gynoid-personal-room .research-mode-receipt {
    display: block;
    color: var(--gynoid-highlight);
}

.gynoid-personal-room .research-mode-receipt.is-failure {
    color: #ff9aa8;
}

.gynoid-room-music-volume {
    display: grid;
    grid-template-columns: auto minmax(4.5rem, 7rem) auto;
    min-height: 2.4rem;
    align-items: center;
    gap: .35rem;
    padding: .3rem .5rem;
    color: var(--gynoid-highlight);
    border: 1px solid color-mix(in srgb, var(--gynoid-highlight) 52%, transparent);
    background: rgba(2, 7, 18, .82);
    backdrop-filter: blur(10px);
    font-family: var(--drakima-font-mono, monospace);
    font-size: .55rem;
    text-transform: uppercase;
}

.gynoid-room-music-volume input[type="range"] {
    width: 100%;
    min-width: 0;
    accent-color: var(--gynoid-accent);
}

.gynoid-room-music-volume output {
    min-width: 2rem;
    text-align: right;
}

.gynoid-private-stage-controls > .gynoid-chat-credit-pill {
    min-width: 5.4rem;
    text-decoration: none;
}

.gynoid-private-stage-controls .gynoid-chat-credit-pill small {
    margin-top: .18rem;
    color: inherit;
    font-size: .52rem;
}

.gynoid-private-stage-controls .gynoid-room-menu {
    position: relative;
}

.gynoid-private-stage-controls .gynoid-room-menu > summary {
    min-width: 3.2rem;
    cursor: pointer;
    list-style: none;
}

.gynoid-private-stage-controls .gynoid-room-menu > summary::-webkit-details-marker {
    display: none;
}

.gynoid-private-stage-controls .gynoid-room-menu > div {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    width: min(22rem, calc(100vw - 1.5rem));
    max-height: min(38rem, calc(100dvh - 5rem));
    padding: 1rem;
    overflow-y: auto;
    color: #dce8fa;
    border: 1px solid var(--gynoid-accent);
    background: rgba(2, 6, 18, .98);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .64);
}

.gynoid-private-stage-controls .gynoid-room-menu p {
    margin: 0 0 .75rem;
    font-size: .82rem;
}

.gynoid-private-stage-controls .gynoid-room-menu dl {
    margin: .8rem 0;
}

.gynoid-private-stage-controls .gynoid-room-menu dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--gynoid-highlight) 20%, transparent);
    font-size: .75rem;
}

.gynoid-private-stage-controls .gynoid-room-menu form,
.gynoid-private-stage-controls .gynoid-room-menu .drakima-button {
    width: 100%;
    margin: .4rem 0;
}

.gynoid-private-stage-controls .gynoid-voice-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem;
    margin: .8rem 0;
    padding: .65rem;
    border: 1px solid color-mix(in srgb, var(--gynoid-highlight) 30%, transparent);
}

.gynoid-private-stage-controls .gynoid-voice-mode legend {
    position: static;
    grid-column: 1 / -1;
    width: auto;
    height: auto;
    padding: 0 .25rem;
    overflow: visible;
    clip: auto;
    color: var(--gynoid-highlight);
    font-family: var(--drakima-font-mono, monospace);
    font-size: .65rem;
    text-transform: uppercase;
}

.gynoid-private-stage-controls .gynoid-voice-mode button {
    padding: .48rem;
    color: #d7e6f8;
    border: 1px solid color-mix(in srgb, var(--gynoid-accent) 40%, transparent);
    background: rgba(3, 9, 22, .85);
    font-family: var(--drakima-font-mono, monospace);
    font-size: .62rem;
    text-transform: uppercase;
}

.gynoid-private-stage-controls .gynoid-voice-mode button[aria-pressed="true"] {
    color: #03121a;
    background: var(--gynoid-highlight);
}

.gynoid-vn-dialogue-console {
    position: absolute;
    z-index: 5;
    right: 4%;
    bottom: 3%;
    left: 4%;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    max-height: min(48%, 25rem);
    min-height: 11.5rem;
    overflow: hidden;
    color: #f4f7ff;
    border: 1px solid color-mix(in srgb, var(--gynoid-accent) 82%, transparent);
    background: rgba(2, 5, 17, .89);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .46), 0 0 1.4rem color-mix(in srgb, var(--gynoid-accent) 12%, transparent);
    backdrop-filter: blur(12px);
}

.gynoid-personal-room .gynoid-conversation-transcript {
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: .85rem 1rem .45rem;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    background: transparent;
    scrollbar-color: var(--gynoid-accent) rgba(4, 8, 20, .75);
    scrollbar-width: thin;
}

.gynoid-personal-room .gynoid-conversation-message {
    box-sizing: border-box;
    width: fit-content;
    min-width: 0;
    max-width: min(78%, 48rem);
    margin: 0 0 .65rem;
    padding: .68rem .82rem;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gynoid-highlight) 38%, transparent);
    background: color-mix(in srgb, var(--gynoid-primary) 38%, rgba(3, 8, 24, .94));
    animation: gynoid-message-in .18s ease-out;
}

.gynoid-personal-room .gynoid-conversation-message.is-member {
    margin-left: auto;
    border-color: color-mix(in srgb, var(--gynoid-accent) 52%, transparent);
    background: color-mix(in srgb, var(--gynoid-accent) 25%, rgba(20, 4, 30, .94));
}

.gynoid-personal-room .gynoid-conversation-message.is-welcome {
    max-width: min(82%, 52rem);
}

.gynoid-personal-room .gynoid-conversation-transcript .gynoid-conversation-message[data-room-response] {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.gynoid-personal-room .gynoid-conversation-message.is-pending {
    opacity: .68;
}

.gynoid-personal-room .gynoid-conversation-message.is-unconfirmed {
    border-style: dashed;
    opacity: .7;
}

.gynoid-personal-room .gynoid-conversation-message header {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem .55rem;
    margin-bottom: .35rem;
    color: var(--gynoid-highlight);
    font-family: var(--drakima-font-mono, monospace);
    font-size: .66rem;
}

.gynoid-personal-room .gynoid-conversation-message header time {
    margin-left: auto;
    color: #afbdd2;
    font-size: .58rem;
}

.gynoid-personal-room .gynoid-conversation-message p {
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: normal;
}

.gynoid-message-voice-replay {
    margin-left: .35rem;
    padding: .18rem .35rem;
    color: var(--gynoid-highlight);
    border: 1px solid color-mix(in srgb, var(--gynoid-highlight) 38%, transparent);
    background: transparent;
    font-family: var(--drakima-font-mono, monospace);
    font-size: .56rem;
    text-transform: uppercase;
}

.gynoid-personal-room .gynoid-conversation-composer {
    min-width: 0;
    margin: 0;
    padding: .55rem .75rem .65rem;
    border-top: 1px solid color-mix(in srgb, var(--gynoid-accent) 38%, transparent);
    background: rgba(2, 6, 18, .95);
}

.gynoid-personal-room .gynoid-conversation-composer > label {
    display: block;
    margin-bottom: .3rem;
    color: var(--gynoid-highlight);
    font-size: .72rem;
}

.gynoid-vn-composer-row {
    display: grid;
    align-items: stretch;
    gap: .55rem;
}

.gynoid-personal-room .gynoid-conversation-composer textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 5.75rem;
    max-height: 16rem;
    overflow-y: auto;
    resize: vertical;
    scrollbar-gutter: stable;
}

.gynoid-personal-room .gynoid-conversation-composer small {
    display: block;
    margin-top: .28rem;
    overflow-wrap: anywhere;
    color: #b9c6da;
    font-size: .62rem;
}

.gynoid-personal-room [data-room-request-status].is-error {
    color: #ff8fc5;
}

@media (max-width: 760px) {
    .gynoid-personal-room {
        padding-top: 0;
    }

    .gynoid-personal-room .container {
        width: 100%;
        padding-inline: 0;
    }

    .gynoid-private-room-shell {
        width: 100%;
        height: calc(100dvh - 4.5rem);
        min-height: 38rem;
        aspect-ratio: auto;
        border-inline: 0;
    }

    .gynoid-private-stage-sprite {
        inset: 2.5rem 0 auto;
        width: 100%;
        height: 68%;
    }

    .gynoid-private-stage-controls {
        top: .4rem;
        right: .4rem;
        left: .4rem;
        gap: .25rem;
    }

    .gynoid-private-stage-controls > button,
    .gynoid-private-stage-controls > .gynoid-room-menu > summary,
    .gynoid-private-stage-controls > .gynoid-chat-credit-pill {
        min-height: 2rem;
        padding: .32rem .38rem;
        font-size: .5rem;
    }

    .gynoid-room-music-volume {
        grid-template-columns: minmax(3.5rem, 5rem) auto;
        min-height: 2rem;
        padding: .28rem .35rem;
    }

    .gynoid-room-music-volume > span {
        display: none;
    }

    .gynoid-private-stage-controls > .gynoid-chat-credit-pill {
        min-width: auto;
    }

    .gynoid-private-stage-controls .gynoid-chat-credit-pill small {
        display: none;
    }

    .gynoid-vn-dialogue-console {
        right: .45rem;
        bottom: .45rem;
        left: .45rem;
        max-height: 62%;
        min-height: 18rem;
    }

    .gynoid-personal-room .gynoid-conversation-transcript {
        padding: .6rem .65rem .35rem;
    }

    .gynoid-personal-room .gynoid-conversation-message,
    .gynoid-personal-room .gynoid-conversation-message.is-welcome {
        max-width: 94%;
        padding: .58rem .65rem;
        font-size: .8rem;
    }

    .gynoid-personal-room .gynoid-conversation-message header time {
        width: 100%;
        margin-left: 0;
    }

    .gynoid-personal-room .gynoid-conversation-composer {
        padding: .45rem .55rem .5rem;
    }

    .gynoid-vn-composer-row {
        gap: .35rem;
    }

    .gynoid-personal-room .gynoid-conversation-composer textarea {
        min-height: 5rem;
    }
}

/* Unified discovery */
.unified-discovery-page { min-height: 70vh; }
.unified-discovery-hero { max-width: 62rem; margin-bottom: 1.5rem; }
.unified-discovery-hero h1 { font-size: clamp(2.4rem, 7vw, 5.5rem); }
.unified-discovery-filters { display: grid; grid-template-columns: minmax(16rem, 2fr) repeat(4, minmax(9rem, 1fr)); gap: 0.9rem; align-items: end; }
.unified-discovery-filters label { display: block; margin-bottom: 0.35rem; }
.unified-discovery-filters input,
.unified-discovery-filters select { width: 100%; min-height: 2.9rem; }
.unified-discovery-filters .drakima-panel-actions { grid-column: 1 / -1; }
.unified-discovery-results-heading { margin-top: 2.25rem; }
.unified-discovery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.unified-discovery-grid.is-related { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.unified-discovery-card { overflow: hidden; border: 1px solid rgba(40, 242, 225, 0.2); border-radius: 1rem; background: linear-gradient(155deg, rgba(25, 11, 45, 0.92), rgba(4, 7, 17, 0.96)); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.2); }
.unified-discovery-card-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #050610; }
.unified-discovery-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 180ms ease; }
.unified-discovery-card-media.is-character-portrait { background: radial-gradient(circle at 50% 28%, rgba(232, 53, 214, 0.16), transparent 42%), linear-gradient(145deg, #07111b, #050610); }
.unified-discovery-card-media.is-character-portrait img { object-fit: contain; object-position: center; }
.unified-discovery-card-media.is-definitive-lead-artwork { aspect-ratio: 1 / 1; background: #050610; }
.unified-discovery-card-media.is-definitive-lead-artwork img { object-fit: contain; object-position: center; }
.unified-discovery-card:hover .unified-discovery-card-media img { transform: scale(1.025); }
.unified-discovery-card-body { display: grid; gap: 0.7rem; padding: 1rem; }
.unified-discovery-card-body h3,
.unified-discovery-card-body p { margin: 0; }
.unified-discovery-card-body h3 a { color: #fff; text-decoration: none; }
.unified-discovery-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.unified-discovery-tags a { padding: 0.2rem 0.48rem; border: 1px solid rgba(232, 53, 214, 0.35); border-radius: 999px; color: #f7b4ee; font-size: 0.78rem; text-decoration: none; }
.unified-discovery-open { display: inline-flex; min-height: 2.75rem; align-items: center; color: #62fff0; font-weight: 700; }
.unified-related-content { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(40, 242, 225, 0.2); }
.gynoid-offering-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
.gynoid-offering-grid a { display: grid; gap: 0.2rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--gynoid-accent, #ff2bbd) 42%, transparent); border-radius: 0.8rem; background: rgba(5, 7, 18, 0.72); color: #fff; text-decoration: none; }
.gynoid-offering-grid a span { color: #b9c9d8; font-size: 0.86rem; }
.gynoid-latest-offerings { margin: 1.25rem 0; }
.canonical-association-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.45rem 1rem; margin-bottom: 1rem; }
.unified-discovery-authoring fieldset + fieldset { margin-top: 1.25rem; }
@media (max-width: 1100px) { .unified-discovery-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .unified-discovery-query { grid-column: 1 / -1; } }
@media (max-width: 640px) { .unified-discovery-filters { grid-template-columns: 1fr; } .unified-discovery-query { grid-column: auto; } }

/* Staff Engineering Observatory ------------------------------------------------ */
.engineering-observatory-page { min-height: 100vh; padding-bottom: 5rem; background: radial-gradient(circle at 82% 12%, rgba(0, 255, 204, 0.08), transparent 28%), linear-gradient(180deg, rgba(5, 7, 20, 0.93), rgba(8, 3, 18, 0.98)); }
.engineering-observatory-hero { border-bottom: 1px solid rgba(0, 255, 204, 0.35); background: linear-gradient(105deg, rgba(14, 4, 34, 0.96), rgba(2, 17, 28, 0.93)); }
.engineering-observatory-hero-inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(19rem, 0.8fr); gap: 2rem; align-items: center; padding-top: 3rem; padding-bottom: 3rem; }
.engineering-observatory-hero h1 { margin: 0.25rem 0 0.75rem; font-size: clamp(2.7rem, 6vw, 5rem); }
.engineering-observatory-hero p { max-width: 52rem; }
.engineering-observatory-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.25rem; }
.engineering-observatory-akari { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: end; overflow: hidden; min-height: 15rem; border: 1px solid rgba(255, 0, 204, 0.45); background: linear-gradient(135deg, rgba(255, 0, 204, 0.1), rgba(0, 255, 204, 0.07)); }
.engineering-observatory-akari img { width: 100%; height: 15rem; object-fit: contain; object-position: bottom center; }
.engineering-observatory-akari div { padding: 1.1rem 1rem 1.2rem 0; }
.engineering-observatory-akari strong { display: block; color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 1rem; }
.engineering-observatory-akari span { color: var(--drakima-pink); font-family: var(--drakima-mono-font); font-size: 0.67rem; text-transform: uppercase; }
.engineering-observatory-akari p { margin: 0.7rem 0 0; font-size: 0.78rem; line-height: 1.55; }
.engineering-observatory-workspace { padding-top: 1.5rem; }
.engineering-observatory-metrics { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: 1px solid rgba(0, 255, 204, 0.34); }
.engineering-observatory-metrics article { min-width: 0; padding: 1rem; border-right: 1px solid rgba(0, 255, 204, 0.2); background: rgba(5, 9, 22, 0.86); }
.engineering-observatory-metrics article:last-child { border-right: 0; }
.engineering-observatory-metrics strong { display: block; color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 1.6rem; }
.engineering-observatory-metrics span { color: var(--drakima-muted); font-size: 0.68rem; text-transform: uppercase; }
.engineering-observatory-section { margin-top: 1.25rem; padding: 1.25rem; border: 1px solid rgba(154, 143, 202, 0.3); background: rgba(5, 7, 20, 0.88); }
.engineering-observatory-section > header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; }
.engineering-observatory-section > header h2 { margin: 0.2rem 0 0; }
.engineering-observatory-section > header > p { max-width: 38rem; color: var(--drakima-muted); font-size: 0.78rem; }
.engineering-project-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.engineering-project-group { display: grid; grid-template-columns: minmax(11rem, 0.38fr) minmax(0, 0.62fr); gap: 1rem; padding: 1rem; border: 1px solid rgba(0, 255, 204, 0.22); background: linear-gradient(135deg, rgba(0, 255, 204, 0.035), rgba(255, 0, 204, 0.025)); }
.engineering-project-group > div > span { color: var(--drakima-pink); font-family: var(--drakima-mono-font); font-size: 0.62rem; text-transform: uppercase; }
.engineering-project-group h3 { margin: 0.25rem 0 0.45rem; }
.engineering-project-group p { color: var(--drakima-muted); font-size: 0.75rem; line-height: 1.45; }
.engineering-project-group ul { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; }
.engineering-project-group li { min-width: 0; padding-left: 0.7rem; border-left: 2px solid rgba(0, 255, 204, 0.55); }
.engineering-project-group li strong, .engineering-project-group li span { display: block; }
.engineering-project-group li strong { color: var(--drakima-text); font-size: 0.8rem; }
.engineering-project-group li code { display: block; overflow: hidden; margin: 0.16rem 0; color: var(--drakima-cyan); font-size: 0.63rem; text-overflow: ellipsis; white-space: nowrap; }
.engineering-project-group li span { color: var(--drakima-muted); font-size: 0.68rem; line-height: 1.35; }
.engineering-observatory-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr); gap: 1.25rem; }
.engineering-boundary-list { display: grid; gap: 0.7rem; margin: 0; padding: 0; list-style: none; counter-reset: engineering-boundary; }
.engineering-boundary-list li { position: relative; padding: 0.8rem 0.8rem 0.8rem 3.1rem; border: 1px solid rgba(255, 0, 204, 0.18); counter-increment: engineering-boundary; }
.engineering-boundary-list li::before { position: absolute; left: 0.8rem; top: 0.8rem; color: var(--drakima-pink); font-family: var(--drakima-mono-font); content: "0" counter(engineering-boundary); }
.engineering-boundary-list strong, .engineering-boundary-list span { display: block; }
.engineering-boundary-list strong { color: var(--drakima-cyan); }
.engineering-boundary-list span { margin-top: 0.25rem; color: var(--drakima-muted); font-size: 0.76rem; line-height: 1.5; }
.engineering-projection-health dl { display: grid; gap: 0; margin: 0 0 1rem; }
.engineering-projection-health dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0; border-bottom: 1px solid rgba(0, 255, 204, 0.16); }
.engineering-projection-health dt { color: var(--drakima-muted); }
.engineering-projection-health dd { margin: 0; color: var(--drakima-text); font-family: var(--drakima-mono-font); }
.engineering-projection-health dd.is-ready { color: var(--drakima-cyan); }
.engineering-projection-health > p { color: var(--drakima-muted); font-size: 0.73rem; line-height: 1.5; }

/* Public Developer Learning Lab ------------------------------------------------- */
.engineering-learning-page { min-height: 100vh; padding-bottom: 5rem; }
.engineering-learning-hero { border-bottom: 1px solid rgba(255, 0, 204, 0.4); background: radial-gradient(circle at 75% 30%, rgba(255, 0, 204, 0.12), transparent 32%); }
.engineering-learning-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.52fr); gap: 2rem; align-items: end; padding-top: 3.2rem; padding-bottom: 3.2rem; }
.engineering-learning-hero h1 { margin: 0.25rem 0 0.8rem; font-size: clamp(2.8rem, 6vw, 5.5rem); }
.engineering-learning-hero p { max-width: 54rem; }
.engineering-learning-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.2rem; }
.engineering-learning-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(0, 255, 204, 0.35); }
.engineering-learning-stats article { padding: 1rem; border-right: 1px solid rgba(0, 255, 204, 0.2); text-align: center; }
.engineering-learning-stats article:last-child { border-right: 0; }
.engineering-learning-stats strong, .engineering-learning-stats span { display: block; }
.engineering-learning-stats strong { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 1.8rem; }
.engineering-learning-stats span { color: var(--drakima-muted); font-size: 0.65rem; text-transform: uppercase; }
.engineering-learning-workspace { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.25rem; padding-top: 1.5rem; }
.engineering-learning-method { position: sticky; top: 6rem; align-self: start; padding: 1.1rem; border: 1px solid rgba(0, 255, 204, 0.28); background: rgba(4, 8, 20, 0.92); }
.engineering-learning-method ol { display: grid; gap: 0.8rem; margin: 1rem 0; padding: 0; list-style: none; counter-reset: learning-step; }
.engineering-learning-method li { position: relative; padding-left: 2.1rem; counter-increment: learning-step; }
.engineering-learning-method li::before { position: absolute; left: 0; top: 0; color: var(--drakima-pink); font-family: var(--drakima-mono-font); content: "0" counter(learning-step); }
.engineering-learning-method strong, .engineering-learning-method span { display: block; }
.engineering-learning-method strong { color: var(--drakima-cyan); }
.engineering-learning-method span, .engineering-learning-method > p:last-child { color: var(--drakima-muted); font-size: 0.72rem; line-height: 1.45; }
.engineering-learning-catalog { display: grid; gap: 1.25rem; }
.engineering-learning-card { scroll-margin-top: 6rem; overflow: hidden; border: 1px solid rgba(154, 143, 202, 0.35); background: rgba(7, 8, 23, 0.94); }
.engineering-learning-card > header, .engineering-learning-card > section, .engineering-learning-card > footer { padding: 1rem 1.15rem; }
.engineering-learning-card > header { border-bottom: 1px solid rgba(255, 0, 204, 0.2); background: linear-gradient(110deg, rgba(255, 0, 204, 0.07), rgba(0, 255, 204, 0.03)); }
.engineering-learning-card > header > div { display: flex; gap: 0.5rem; }
.engineering-learning-card > header > div span { padding: 0.28rem 0.5rem; border: 1px solid rgba(0, 255, 204, 0.3); color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.62rem; text-transform: uppercase; }
.engineering-learning-card h2 { margin: 0.65rem 0 0.35rem; }
.engineering-learning-card h3 { margin: 0 0 0.35rem; color: var(--drakima-pink); font-family: var(--drakima-mono-font); font-size: 0.8rem; text-transform: uppercase; }
.engineering-learning-card p { line-height: 1.55; }
.engineering-learning-card pre { overflow-x: auto; margin: 0; padding: 1.15rem; border-block: 1px solid rgba(0, 255, 204, 0.2); background: #02040c; color: #d8fff8; font-size: 0.8rem; line-height: 1.55; tab-size: 4; }
.engineering-learning-challenge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.engineering-learning-challenge section { padding: 1rem 1.15rem; }
.engineering-learning-challenge section + section { border-left: 1px solid rgba(154, 143, 202, 0.25); }
.engineering-learning-challenge ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.engineering-learning-challenge li { margin-bottom: 0.35rem; color: var(--drakima-muted); font-size: 0.78rem; }
.engineering-learning-card > footer { border-top: 1px solid rgba(255, 0, 204, 0.2); }
.engineering-learning-card > footer a { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.72rem; }
@media (max-width: 1040px) {
    .engineering-observatory-hero-inner, .engineering-observatory-grid { grid-template-columns: 1fr; }
    .engineering-observatory-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .engineering-observatory-metrics article:nth-child(3) { border-right: 0; }
    .engineering-project-groups { grid-template-columns: 1fr; }
    .engineering-learning-hero-inner, .engineering-learning-workspace { grid-template-columns: 1fr; }
    .engineering-learning-method { position: static; }
}
@media (max-width: 680px) {
    .engineering-observatory-hero-inner { padding-top: 1.6rem; padding-bottom: 1.6rem; }
    .engineering-observatory-akari { grid-template-columns: 7rem 1fr; min-height: 11rem; }
    .engineering-observatory-akari img { height: 11rem; }
    .engineering-observatory-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .engineering-observatory-metrics article:nth-child(3) { border-right: 1px solid rgba(0, 255, 204, 0.2); }
    .engineering-observatory-metrics article:nth-child(even) { border-right: 0; }
    .engineering-observatory-section > header { align-items: start; flex-direction: column; }
    .engineering-project-group { grid-template-columns: 1fr; }
    .engineering-learning-stats { grid-template-columns: 1fr; }
    .engineering-learning-stats article { border-right: 0; border-bottom: 1px solid rgba(0, 255, 204, 0.2); }
    .engineering-learning-challenge { grid-template-columns: 1fr; }
    .engineering-learning-challenge section + section { border-top: 1px solid rgba(154, 143, 202, 0.25); border-left: 0; }
}

/* Engineering Interview Studio ------------------------------------------------
   This scene borrows the visual grammar of Drakima's VN runtime while keeping
   the interaction an accessible HTML form. It deliberately owns its viewport
   so the regular portfolio cards never compete with interview focus. */
.engineering-interview-studio {
    min-height: calc(100vh - var(--drakima-nav-height, 72px));
    padding: clamp(.7rem, 2vw, 1.75rem);
    background: #030411;
    color: #f5efff;
}

.engineering-interview-stage {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-rows: auto minmax(28rem, 1fr) auto;
    width: min(1720px, 100%);
    min-height: min(900px, calc(100vh - 7rem));
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 226, .64);
    background-color: #070914;
    box-shadow: 0 0 42px rgba(249, 0, 201, .18);
}

.engineering-interview-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .016) 4px);
}

.engineering-interview-toolbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    min-height: 2.75rem;
    padding: .35rem .55rem;
    border-bottom: 1px solid rgba(0, 255, 226, .38);
    background: rgba(2, 4, 15, .88);
    backdrop-filter: blur(12px);
}

.engineering-interview-brand h1 { margin: 0; font-size: clamp(.78rem, 1.5vw, 1rem); line-height: 1; }
.engineering-interview-quick-nav { display: flex; justify-content: flex-end; gap: .35rem; }
.engineering-interview-quick-nav > button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2rem;
    padding: .35rem .55rem;
    border: 1px solid rgba(0, 255, 226, .65);
    background: rgba(4, 8, 25, .9);
    color: var(--drakima-cyan);
    font: .54rem var(--drakima-mono);
    text-transform: uppercase;
}
.engineering-interview-quick-nav > button > span[aria-hidden="true"] { font-size: 1rem; line-height: .75; }
.engineering-interview-quick-nav > button[aria-expanded="true"] { background: var(--drakima-cyan); color: #031018; }
.engineering-interview-quick-nav > button[aria-pressed="true"] { border-color: var(--drakima-hot-pink); color: #fff; box-shadow: 0 0 16px rgb(255 0 216 / 24%); }
.engineering-interview-quick-nav > button:disabled { opacity: .45; cursor: not-allowed; }
.engineering-interview-quick-nav small {
    min-width: 1rem;
    padding: .08rem .25rem;
    border-radius: 999px;
    background: var(--drakima-pink);
    color: #fff;
    text-align: center;
}

.engineering-interview-dialogue .research-mode-receipt {
    display: block;
    flex-basis: 100%;
    color: var(--drakima-cyan-soft);
}

.engineering-interview-dialogue .research-mode-receipt.is-failure {
    color: #ff9aa8;
}

.engineering-interview-scene { position: relative; min-height: 28rem; overflow: hidden; }
.engineering-interview-sprite {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 3rem;
    bottom: auto;
    width: min(39vw, 620px);
    height: calc(125% + 1rem);
    max-height: none;
    object-fit: contain;
    object-position: center bottom;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 16px rgba(0, 255, 226, .3));
    transition: opacity .18s ease, filter .18s ease;
}

.engineering-interview-nav-panel,
.engineering-interview-transcript-panel,
.engineering-interview-suggestions-panel,
.engineering-interview-setup,
.engineering-interview-hint-panel {
    position: absolute;
    z-index: 3;
    top: 1rem;
    width: min(27rem, 38vw);
    max-height: calc(100% - 2rem);
    overflow: auto;
    border: 1px solid rgba(249, 0, 201, .7);
    background: rgba(3, 5, 19, .94);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
    backdrop-filter: blur(12px);
}
.engineering-interview-nav-panel[hidden],
.engineering-interview-transcript-panel[hidden],
.engineering-interview-suggestions-panel[hidden],
.engineering-interview-setup[hidden],
.engineering-interview-hint-panel[hidden] { display: none !important; }
.engineering-interview-nav-panel {
    left: 1rem;
    display: grid;
    gap: .75rem;
    width: min(22rem, 34vw);
    padding: .8rem;
}
.engineering-interview-nav-panel > header,
.engineering-interview-transcript-panel > header,
.engineering-interview-suggestions-panel > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
}
.engineering-interview-nav-panel > header > button,
.engineering-interview-transcript-panel > header > button,
.engineering-interview-suggestions-panel > header > button {
    min-width: 2rem;
    min-height: 2rem;
    border: 1px solid rgba(0, 255, 226, .56);
    background: rgba(4, 8, 25, .94);
    color: var(--drakima-cyan);
}
.engineering-interview-nav-panel > nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.engineering-interview-nav-panel > nav > * {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.4rem;
    padding: .5rem;
    border: 1px solid rgba(0, 255, 226, .5);
    background: #071126;
    color: var(--drakima-cyan);
    font: .63rem var(--drakima-mono);
    text-align: center;
    text-transform: uppercase;
}
.engineering-interview-nav-panel > nav button[aria-pressed="true"] { background: var(--drakima-cyan); color: #031018; }
.engineering-interview-nav-panel > p { margin: 0; color: #aeb9d7; font: .58rem var(--drakima-mono); text-transform: uppercase; }
.engineering-interview-nav-panel > p strong { color: var(--drakima-pink); }
.engineering-interview-transcript-panel {
    right: 1rem;
    display: grid;
    gap: .65rem;
    width: min(38rem, 48vw);
    padding: .8rem;
}
.engineering-interview-transcript-panel > header p { margin: 0 0 .2rem; }
#engineering-interview-history { max-height: calc(100% - 3rem); overflow: auto; }
#engineering-interview-history > p { margin: 0; color: #aeb9d7; font-size: .72rem; }
#engineering-interview-history article { padding: .7rem 0; border-top: 1px solid rgba(0, 255, 226, .2); }
#engineering-interview-history article:first-child { border-top: 0; }
#engineering-interview-history article strong { color: var(--drakima-pink); font: .66rem var(--drakima-mono); }
#engineering-interview-history article p { margin: .3rem 0 0; font-size: .78rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
#engineering-interview-history pre { max-height: 12rem; overflow: auto; padding: .55rem; background: #020817; color: #dce5ff; white-space: pre-wrap; }
.engineering-interview-suggestions-panel {
    right: 1rem;
    display: grid;
    gap: .7rem;
    width: min(27rem, 40vw);
    padding: .8rem;
}
.engineering-interview-suggestions-panel > header p { margin: 0 0 .2rem; }
.engineering-interview-suggestions-panel > p { margin: 0; color: #aeb9d7; font-size: .72rem; line-height: 1.45; }
.engineering-interview-setup { left: 1rem; display: grid; gap: .55rem; padding: 1rem; }
.engineering-interview-setup-intro {
    margin: 0;
    padding: .65rem;
    border-left: 2px solid var(--drakima-cyan);
    background: rgba(2, 8, 23, .72);
    color: #dce5ff;
    font-size: .72rem;
    line-height: 1.45;
}
.engineering-interview-setup > header,
.engineering-interview-hint-panel > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.engineering-interview-setup > header p,
.engineering-interview-hint-panel > header p { margin: 0; }
.engineering-interview-setup > header button,
.engineering-interview-hint-panel > header button {
    min-width: 2rem;
    min-height: 2rem;
    border: 1px solid rgba(0, 255, 226, .56);
    background: rgba(4, 8, 25, .94);
    color: var(--drakima-cyan);
}
.engineering-interview-setup label { font: .7rem var(--drakima-mono); color: var(--drakima-cyan); text-transform: uppercase; }
.engineering-interview-setup select {
    width: 100%;
    padding: .62rem;
    border: 1px solid rgba(0, 255, 226, .55);
    background: #071126;
    color: #fff;
}
.engineering-interview-lesson-card { display: grid; gap: .45rem; padding: .8rem; border-left: 2px solid var(--drakima-pink); background: rgba(19, 16, 49, .82); }
.engineering-interview-lesson-card span,
.engineering-interview-lesson-card small { font: .65rem var(--drakima-mono); color: var(--drakima-cyan); }
.engineering-interview-lesson-card strong { font-size: .9rem; line-height: 1.4; max-height: 7.7rem; overflow: auto; }

.engineering-interview-hint-panel {
    right: 1rem;
    display: grid;
    gap: .8rem;
    padding: 1rem;
}
.engineering-interview-hint-panel > header strong { display: block; margin-top: .25rem; }
.engineering-interview-hint-panel > p {
    margin: 0;
    padding: .75rem;
    border-left: 2px solid var(--drakima-pink);
    background: rgba(19, 16, 49, .82);
    line-height: 1.45;
}
.engineering-interview-hint-panel > div {
    display: grid;
    gap: .45rem;
}
.engineering-interview-hint-panel > div > * {
    padding: .48rem .55rem;
    border: 1px solid rgba(0, 255, 226, .36);
    color: var(--drakima-cyan);
    font: .64rem var(--drakima-mono);
    overflow-wrap: anywhere;
}
.engineering-interview-hint-panel > small {
    color: #aab4d1;
    font: .62rem/1.45 var(--drakima-mono);
}

.engineering-interview-dialogue {
    position: relative;
    z-index: 6;
    margin: 0 1rem 1rem;
    min-height: 14rem;
    border: 1px solid var(--drakima-pink);
    background: rgba(3, 5, 20, .93);
    box-shadow: 0 0 24px rgba(249, 0, 201, .18);
    backdrop-filter: blur(12px);
}
.engineering-interview-dialogue > header { display: flex; gap: .65rem; padding: .55rem .75rem; border-bottom: 1px solid rgba(0, 255, 226, .3); font: .68rem var(--drakima-mono); }
.engineering-interview-dialogue > header span { color: var(--drakima-pink); }
.engineering-interview-dialogue > header small { margin-left: auto; color: var(--drakima-cyan); }
.engineering-interview-answer {
    min-height: 7rem;
    max-height: min(38vh, 22rem);
    padding: .72rem .85rem;
    overflow-y: auto;
    resize: vertical;
    scrollbar-gutter: stable;
}
.engineering-interview-answer strong { color: var(--drakima-cyan); font: .75rem var(--drakima-mono); }
.engineering-interview-answer p { margin: .35rem 0 0; font-size: clamp(.95rem, 1.25vw, 1.25rem); line-height: 1.42; white-space: pre-wrap; }
.engineering-interview-sources { display: grid; gap: .45rem; }
.engineering-interview-sources a,
.engineering-interview-sources span { padding: .55rem .6rem; border: 1px solid rgba(0, 255, 226, .42); background: rgba(2, 8, 23, .72); color: var(--drakima-cyan); font: .64rem/1.4 var(--drakima-mono); }
.engineering-interview-dialogue form { padding: .65rem .85rem .75rem; border-top: 1px solid rgba(249, 0, 201, .32); }
.engineering-interview-dialogue form label { display: block; margin-bottom: .3rem; font: .67rem var(--drakima-mono); text-transform: uppercase; }
.engineering-interview-composer-shell { margin-top: .35rem; }
.engineering-interview-dialogue textarea {
    min-height: 6rem;
    max-height: 20rem;
    padding: .65rem;
    overflow-y: auto;
    resize: vertical;
    border: 1px solid rgba(0, 255, 226, .65);
    background: #020817;
    color: #fff;
    scrollbar-gutter: stable;
}
.engineering-interview-dialogue textarea.is-code-review { min-height: 10rem; font-family: var(--drakima-mono); line-height: 1.45; tab-size: 4; }
.engineering-interview-contract {
    margin: .2rem 0;
    padding: .65rem;
    border: 1px solid rgba(0, 255, 226, .24);
    background: rgba(2, 8, 23, .72);
    color: #dce5ff;
    font-size: .72rem;
    line-height: 1.45;
}
.engineering-interview-session-grid { display: grid; gap: .45rem; }
.engineering-interview-session-grid textarea,
.engineering-interview-session-grid select,
.engineering-interview-artifact-controls select,
.engineering-interview-artifact-controls textarea {
    width: 100%;
    padding: .55rem;
    border: 1px solid rgba(0, 255, 226, .45);
    background: #020817;
    color: #fff;
}
.engineering-interview-artifact-controls {
    display: grid !important;
    grid-template-columns: minmax(9rem, .32fr) 1fr !important;
    gap: .45rem !important;
    margin-top: .55rem;
}
.engineering-interview-artifact-controls textarea { grid-column: 1 / -1; font-family: var(--drakima-mono); }
.engineering-interview-artifact-controls textarea[hidden] { display: none; }
#engineering-interview-evidence-list article {
    display: grid;
    gap: .3rem;
    padding: .6rem;
    border: 1px solid rgba(0, 255, 226, .2);
    background: rgba(2, 8, 23, .7);
}
#engineering-interview-evidence-list article strong { color: var(--drakima-cyan); }
#engineering-interview-evidence-list article p,
#engineering-interview-debrief p { margin: 0; font-size: .76rem; line-height: 1.45; }
#engineering-interview-evidence-list article small { color: #aeb9d7; font: .58rem var(--drakima-mono); }
#engineering-interview-debrief { display: grid; gap: .6rem; padding-top: .75rem; border-top: 1px solid rgba(249, 0, 201, .35); }
#engineering-interview-debrief[hidden] { display: none; }
#engineering-interview-debrief-details { display: grid; gap: .55rem; }
#engineering-interview-debrief-details ul { margin: .25rem 0 0; padding-left: 1.1rem; font-size: .72rem; }
.engineering-interview-dialogue form > p { margin: .35rem 0 0; color: #9fa9c7; font: .6rem var(--drakima-mono); }

.engineering-interview-studio:fullscreen { padding: 0; background: #02030b; }
.engineering-interview-studio:fullscreen .engineering-interview-stage {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    grid-template-rows: auto minmax(0, 1fr) auto;
    border: 0;
}
.engineering-interview-studio:fullscreen .engineering-interview-scene { min-height: 0; }
.engineering-interview-studio:fullscreen .engineering-interview-dialogue { max-height: 42vh; overflow: auto; }
.engineering-interview-studio:fullscreen .engineering-interview-sprite {
    top: 2rem;
    bottom: auto;
    height: calc(128% + 2rem);
    max-height: none;
}

@media (max-width: 900px) {
    .engineering-interview-studio { padding: 0; }
    .engineering-interview-stage { min-height: calc(100svh - 4rem); border-inline: 0; }
    .engineering-interview-toolbar { align-items: center; }
    .engineering-interview-brand h1 { font-size: .85rem; }
    .engineering-interview-quick-nav > button { min-height: 1.9rem; padding: .32rem .42rem; font-size: .5rem; }
    .engineering-interview-scene { min-height: 30rem; }
    .engineering-interview-sprite { top: 2rem; bottom: auto; width: 94vw; height: calc(122% + 1rem); left: 54%; }
    .engineering-interview-nav-panel,
    .engineering-interview-transcript-panel,
    .engineering-interview-suggestions-panel,
    .engineering-interview-setup,
    .engineering-interview-hint-panel {
        top: .65rem;
        left: .65rem;
        right: auto;
        width: calc(100% - 1.3rem);
        max-height: calc(100% - 1.3rem);
    }
    .engineering-interview-dialogue { margin: 0 .45rem .45rem; }
    .engineering-interview-answer { max-height: 8.5rem; overflow: auto; }
    .engineering-interview-dialogue form > div { grid-template-columns: 1fr; }
    .engineering-interview-dialogue form button { justify-self: end; }
}

@media (max-width: 420px) {
    .gynoid-private-stage-controls > button[data-music-next] {
        max-width: 3.2rem;
    }

    .gynoid-private-stage-controls > button[data-fullscreen-toggle] {
        max-width: 3.5rem;
    }
}

/* Private-room command surface and focused mobile conversation mode. */
.gynoid-room-navbar-menu,
.gynoid-room-mobile-subtitles,
.gynoid-mobile-speech-hint {
    display: none;
}

.gynoid-room-navbar-overlay[hidden],
.gynoid-room-mobile-subtitles[hidden] {
    display: none !important;
}

.gynoid-personal-room .gynoid-vn-dialogue-console {
    background: rgba(5, 8, 36, .72);
    box-shadow:
        0 0 0 2px rgba(10, 15, 70, .64),
        0 0 24px color-mix(in srgb, var(--gynoid-accent) 24%, transparent),
        0 1.2rem 3rem rgba(0, 0, 0, .38);
    backdrop-filter: blur(10px) saturate(1.12);
}

.gynoid-personal-room .gynoid-vn-dialogue-console .gynoid-conversation-composer {
    background: rgba(2, 6, 18, .69);
}

.gynoid-personal-room .gynoid-vn-dialogue-console .gynoid-vn-moment-bar,
.gynoid-personal-room .gynoid-vn-dialogue-console .gynoid-authored-moment {
    background-color: rgba(10, 14, 46, .62);
}

.gynoid-room-chat-minimize {
    position: absolute;
    z-index: 9;
    top: .15rem;
    right: .15rem;
    display: grid;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    place-items: center;
    color: var(--gynoid-highlight);
    border: 1px solid color-mix(in srgb, var(--gynoid-highlight) 62%, transparent);
    background: rgba(2, 8, 23, .9);
    cursor: pointer;
}

.gynoid-room-chat-minimize:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.gynoid-room-chat-resize-handle {
    top: auto;
    right: .15rem;
    bottom: .15rem;
    cursor: nwse-resize;
}

.gynoid-personal-room .gynoid-vn-moment-bar small {
    margin-right: 1.8rem;
}

.gynoid-personal-room .gynoid-vn-dialogue-console.is-minimized {
    width: min(24rem, 44vw) !important;
    height: 2.75rem !important;
    min-width: 13rem;
    min-height: 2.75rem;
    overflow: hidden !important;
}

.gynoid-personal-room .gynoid-vn-dialogue-console.is-minimized > :not(.gynoid-vn-moment-bar):not(.gynoid-room-chat-minimize) {
    display: none !important;
}

.gynoid-personal-room .gynoid-vn-dialogue-console.is-minimized .gynoid-vn-moment-bar {
    height: 100%;
    align-items: center;
    border-bottom: 0;
}

body.gynoid-room-overlay-open {
    overflow: hidden;
}

@media (max-width: 760px) {
    .gynoid-room-navbar-menu {
        display: block;
        margin-left: auto;
        margin-right: .45rem;
    }

    .gynoid-room-navbar-toggle {
        display: inline-flex;
        min-width: 4.2rem;
        min-height: 44px;
        align-items: center;
        justify-content: center;
        gap: .35rem;
        padding: .45rem .6rem;
        color: var(--drakima-cyan-soft, #7fffee);
        border: 1px solid var(--drakima-line-cyan, rgba(0, 255, 226, .55));
        border-radius: 4px;
        background: rgba(3, 10, 20, .9);
        box-shadow: 0 0 12px rgba(0, 255, 226, .14);
        font: 700 .62rem/1 var(--drakima-font-mono, monospace);
        letter-spacing: .03em;
        text-transform: uppercase;
    }

    .gynoid-room-navbar-toggle[aria-expanded="true"] {
        color: #050511;
        background: var(--drakima-cyan, #00ffe2);
    }

    .gynoid-room-navbar-overlay {
        position: fixed;
        z-index: 1090;
        inset: var(--drakima-nav-height, 3.7rem) 0 0;
        display: grid;
        align-items: start;
        padding: .7rem;
        overflow: hidden;
        background: rgba(0, 3, 12, .62);
        backdrop-filter: blur(12px) saturate(1.15);
    }

    .gynoid-room-navbar-sheet {
        position: relative;
        width: min(100%, 36rem);
        max-height: calc(100dvh - var(--drakima-nav-height, 3.7rem) - 1.4rem);
        margin-inline: auto;
        padding: 1rem;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid color-mix(in srgb, var(--gynoid-highlight, #00ffe2) 68%, transparent);
        border-radius: .6rem;
        background: rgba(3, 7, 23, .96);
        box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .68);
    }

    .gynoid-room-navbar-sheet > header {
        display: grid;
        gap: .25rem;
        padding: .15rem 3rem .8rem 0;
        border-bottom: 1px solid color-mix(in srgb, var(--gynoid-highlight, #00ffe2) 28%, transparent);
        font-family: var(--drakima-font-mono, monospace);
    }

    .gynoid-room-navbar-sheet > header span {
        color: var(--gynoid-accent, #ff34ce);
        font-size: .62rem;
        text-transform: uppercase;
    }

    .gynoid-room-navbar-sheet > header strong {
        color: #fff;
        font-size: 1rem;
    }

    .gynoid-room-navbar-sheet > header small {
        color: #bdeeea;
        font-size: .68rem;
    }

    .gynoid-room-navbar-close {
        position: absolute;
        z-index: 4;
        top: .75rem;
        right: .75rem;
        display: grid;
        width: 44px;
        height: 44px;
        padding: 0;
        place-items: center;
        color: var(--gynoid-highlight, #00ffe2);
        border: 1px solid currentColor;
        background: rgba(3, 10, 20, .92);
        font-size: 1.2rem;
    }

    .gynoid-room-navbar-controls {
        margin-top: .8rem;
    }

    .gynoid-personal-room [data-room-stage-controls] {
        display: none;
    }

    .gynoid-room-navbar-controls .gynoid-private-stage-controls {
        position: static;
        display: grid;
        width: 100%;
        max-width: none;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: .5rem;
        transform: none;
    }

    .gynoid-room-navbar-controls .gynoid-private-stage-controls > button,
    .gynoid-room-navbar-controls .gynoid-private-stage-controls > .gynoid-room-new-chat > button,
    .gynoid-room-navbar-controls .gynoid-private-stage-controls > .gynoid-room-menu > summary,
    .gynoid-room-navbar-controls .gynoid-private-stage-controls > .gynoid-chat-credit-pill,
    .gynoid-room-navbar-controls .gynoid-private-stage-controls :is(.gynoid-room-music-player, .gynoid-room-voice-player) > summary,
    .gynoid-room-navbar-controls .gynoid-private-stage-controls .gynoid-room-status > summary,
    .gynoid-room-navbar-controls .gynoid-private-stage-controls .gynoid-room-mood > summary {
        width: 100%;
        min-width: 0;
        min-height: 3.15rem;
        justify-content: center;
        padding: .55rem;
        font-size: .62rem;
        text-align: center;
    }

    .gynoid-room-navbar-controls .gynoid-private-stage-controls > .gynoid-room-menu,
    .gynoid-room-navbar-controls .gynoid-private-stage-controls > :is(.gynoid-room-music-player, .gynoid-room-voice-player),
    .gynoid-room-navbar-controls .gynoid-private-stage-controls > .gynoid-room-status,
    .gynoid-room-navbar-controls .gynoid-private-stage-controls > .gynoid-room-mood,
    .gynoid-room-navbar-controls .gynoid-private-stage-controls > .gynoid-room-new-chat {
        width: 100%;
        min-width: 0;
    }

    .gynoid-room-navbar-controls .gynoid-private-stage-controls :is(.gynoid-room-music-player, .gynoid-room-voice-player) > div,
    .gynoid-room-navbar-controls .gynoid-private-stage-controls .gynoid-room-status > div,
    .gynoid-room-navbar-controls .gynoid-private-stage-controls .gynoid-room-mood > div,
    .gynoid-room-navbar-controls .gynoid-private-stage-controls .gynoid-room-menu > div {
        z-index: 6;
    }

    .gynoid-room-chat-minimize {
        top: .2rem;
        right: .2rem;
        width: 44px;
        height: 44px;
        border-width: 2px;
        font-size: 1rem;
        -webkit-tap-highlight-color: transparent;
    }

    .gynoid-room-chat-resize-handle {
        top: auto;
        right: .2rem;
        bottom: .2rem;
        cursor: nwse-resize;
    }

    .gynoid-personal-room .gynoid-vn-moment-bar small {
        margin-right: 3rem;
    }

    .gynoid-mobile-speech-hint {
        display: block;
        margin: 0 0 .45rem;
        color: color-mix(in srgb, var(--gynoid-highlight, #00ffe2) 82%, white);
        font: .65rem/1.35 var(--drakima-font-mono, monospace);
    }

    .gynoid-personal-room .ai-composer-toolbar > .ai-composer-microphone {
        grid-column: 1 / -1;
        min-height: 3.35rem;
        font-size: .7rem;
        border-width: 2px;
        box-shadow: 0 0 16px color-mix(in srgb, var(--gynoid-highlight, #00ffe2) 18%, transparent);
    }

    .gynoid-personal-room .gynoid-vn-dialogue-console.is-minimized,
    .gynoid-personal-room .gynoid-private-room-shell:not(:fullscreen) .gynoid-vn-dialogue-console.is-minimized {
        top: .65rem !important;
        right: .65rem !important;
        left: auto !important;
        width: min(15rem, calc(100% - 1.3rem)) !important;
        height: 3rem !important;
        min-width: 0;
        min-height: 3rem;
        overflow: hidden !important;
    }

    .gynoid-personal-room .gynoid-vn-dialogue-console.is-minimized .gynoid-vn-moment-bar {
        padding-right: 3.25rem;
    }

    .gynoid-personal-room .gynoid-vn-dialogue-console.is-minimized .gynoid-vn-moment-bar span,
    .gynoid-personal-room .gynoid-vn-dialogue-console.is-minimized .gynoid-vn-moment-bar small {
        display: none;
    }

    .gynoid-room-mobile-subtitles {
        position: fixed;
        z-index: 1085;
        right: max(.65rem, env(safe-area-inset-right));
        bottom: max(.75rem, env(safe-area-inset-bottom));
        left: max(.65rem, env(safe-area-inset-left));
        display: grid;
        gap: .25rem;
        min-height: 4.75rem;
        padding: .75rem .9rem;
        color: #f8f7ff;
        border: 1px solid color-mix(in srgb, var(--gynoid-highlight, #00ffe2) 68%, transparent);
        border-radius: .55rem;
        background: rgba(2, 7, 24, .78);
        box-shadow: 0 .9rem 2.5rem rgba(0, 0, 0, .56);
        backdrop-filter: blur(12px) saturate(1.1);
        text-align: left;
        -webkit-tap-highlight-color: transparent;
    }

    .gynoid-room-mobile-subtitles strong {
        color: var(--gynoid-highlight, #00ffe2);
        font: 700 .68rem/1 var(--drakima-font-mono, monospace);
    }

    .gynoid-room-mobile-subtitles span {
        font: .92rem/1.42 var(--drakima-font-mono, monospace);
    }

    .gynoid-room-mobile-subtitles small {
        justify-self: end;
        color: #b8d9e3;
        font: .58rem/1 var(--drakima-font-mono, monospace);
        text-transform: uppercase;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gynoid-private-stage-sprite,
    .gynoid-personal-room .gynoid-conversation-message {
        animation: none;
        transition: none;
    }
}

/* Akari Companion continuity */
.lorekeeper-page[data-active-lane="companion"] .lorekeeper-lane-picker select,
.lorekeeper-page[data-active-lane="companion"] .lorekeeper-menu-lane select,
.site-lorekeeper[data-active-lane="companion"] .site-lorekeeper-lane-picker select {
    border-color: #d790ff;
    box-shadow: 0 0 0.8rem rgba(215, 144, 255, 0.22);
}

.lorekeeper-companion-resolution,
.site-lorekeeper-companion-resolution {
    border: 1px solid rgba(215, 144, 255, 0.45);
    background: linear-gradient(135deg, rgba(22, 12, 43, 0.98), rgba(7, 16, 35, 0.98));
}

.lorekeeper-companion-resolution[hidden],
.site-lorekeeper-companion-resolution[hidden] {
    display: none;
}

.lorekeeper-companion-resolution {
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.7rem 1rem;
}

.site-lorekeeper-companion-resolution {
    max-height: 12rem;
    margin: 0 0.75rem 0.5rem;
    overflow-y: auto;
    padding: 0.6rem;
}

.lorekeeper-companion-resolution > header,
.site-lorekeeper-companion-resolution > header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: #f3b4ff;
    font: 0.68rem/1.25 var(--drakima-mono-font);
    text-transform: uppercase;
}

#lorekeeper-companion-memory-list,
#site-lorekeeper-companion-memory-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

#lorekeeper-companion-memory-list > span,
#site-lorekeeper-companion-memory-list > span {
    padding: 0.32rem 0.5rem;
    border: 1px solid rgba(0, 255, 204, 0.28);
    background: #0b1128;
    color: #dce4ff;
    font: 0.64rem/1.3 var(--drakima-mono-font);
}

.lorekeeper-companion-resolution > p,
.site-lorekeeper-companion-resolution > p {
    margin: 0.5rem 0;
    color: #bec8e6;
    font-size: 0.65rem;
    line-height: 1.4;
}

.lorekeeper-companion-resolution > a,
.site-lorekeeper-companion-resolution > a {
    color: #00ffcc;
    font: 0.68rem/1.2 var(--drakima-mono-font);
}

.companion-memory-page {
    width: min(1180px, calc(100% - 2rem));
    margin: 2rem auto 5rem;
    color: #e8edff;
}

.companion-memory-hero,
.companion-boundary-card,
.companion-memory-card,
.companion-danger-zone {
    border: 1px solid rgba(0, 255, 204, 0.28);
    background: linear-gradient(145deg, rgba(8, 13, 31, 0.98), rgba(18, 9, 34, 0.98));
    box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.28);
}

.companion-memory-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2rem;
    align-items: end;
    padding: clamp(1.25rem, 3vw, 2.4rem);
    border-top: 3px solid #ff57be;
}

.companion-memory-hero h1,
.companion-boundary-card h2,
.companion-memory-card h2,
.companion-danger-zone h2 {
    margin: 0.25rem 0 0.7rem;
    color: #fff;
}

.companion-memory-hero p,
.companion-boundary-card p,
.companion-danger-zone p {
    max-width: 72ch;
    margin-bottom: 0;
    color: #b9c4e2;
}

.companion-memory-status {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.35rem 1rem;
    min-width: 14rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 87, 190, 0.45);
    background: #0a1027;
    font: 0.72rem/1.3 var(--drakima-mono-font);
    text-transform: uppercase;
}

.companion-memory-status strong { color: #00ffcc; text-align: right; }
.companion-memory-status[data-enabled="false"] strong { color: #ffcf6a; }

.drakima-alert {
    margin: 1rem 0;
    padding: 0.85rem 1rem;
    border: 1px solid currentColor;
    background: #0a1027;
    font: 0.78rem/1.45 var(--drakima-mono-font);
}

.drakima-alert-success { color: #67f5cf; }
.drakima-alert-danger { color: #ff8fac; }

.companion-boundary-card,
.companion-memory-card,
.companion-danger-zone {
    margin-top: 1rem;
    padding: 1.25rem;
}

.companion-boundary-card ul {
    display: grid;
    gap: 0.55rem;
    margin: 1rem 0;
    padding-left: 1.25rem;
    color: #cbd4ec;
}

.companion-consent-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    padding-top: 1rem;
    border-top: 1px solid rgba(215, 144, 255, 0.25);
}

.companion-consent-form label { flex: 1 1 34rem; }

.companion-control-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(215, 144, 255, 0.25);
}

.companion-memory-card > header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 255, 204, 0.18);
}

.companion-memory-card > header > span {
    padding-bottom: 0.75rem;
    color: #7be7ff;
    font: 0.72rem/1.2 var(--drakima-mono-font);
}

.companion-memory-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.companion-memory-form label,
.companion-danger-zone label {
    display: grid;
    gap: 0.3rem;
    color: #f3b4ff;
    font: 0.68rem/1.25 var(--drakima-mono-font);
    text-transform: uppercase;
}

.companion-memory-form input,
.companion-memory-form select,
.companion-memory-form textarea,
.companion-danger-zone input {
    width: 100%;
    border: 1px solid rgba(123, 231, 255, 0.35);
    border-radius: 2px;
    background: #080d20;
    color: #f5f7ff;
    padding: 0.62rem 0.7rem;
    font: 0.82rem/1.4 var(--drakima-mono-font);
    text-transform: none;
}

.companion-memory-wide { grid-column: 1 / -1; }
.companion-memory-form-actions { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.companion-memory-form-actions p { margin: 0; color: #9faacc; font-size: 0.7rem; }
.companion-memory-list { display: grid; gap: 0.8rem; }

.companion-memory-item {
    padding: 1rem;
    border: 1px solid rgba(215, 144, 255, 0.28);
    background: rgba(7, 11, 27, 0.82);
}

.companion-forget-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
}

.companion-memory-empty {
    padding: 2rem;
    border: 1px dashed rgba(123, 231, 255, 0.35);
    text-align: center;
}

.companion-memory-empty strong { color: #00ffcc; }
.companion-memory-empty p { margin: 0.35rem 0 0; color: #aab4d2; }

.companion-danger-zone {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
    gap: 1.5rem;
    border-color: rgba(255, 106, 143, 0.42);
}

.companion-danger-zone form { display: grid; gap: 0.65rem; align-content: center; }

@media (max-width: 720px) {
    .companion-memory-hero,
    .companion-danger-zone,
    .companion-memory-form {
        grid-template-columns: 1fr;
    }

    .companion-memory-wide { grid-column: auto; }
    .companion-memory-form-actions { align-items: stretch; flex-direction: column; }
    .companion-memory-status { width: 100%; }
}

/* Akari First-line Support */
.akari-support-page .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.akari-support-page .container > * { min-width: 0; }

.akari-support-intake,
.akari-support-preview,
.akari-support-case-list,
.akari-support-details-grid > article,
.akari-support-transcript {
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border: 1px solid rgba(123, 231, 255, 0.3);
    background: rgba(7, 12, 29, 0.94);
    box-shadow: inset 0 0 0 1px rgba(255, 79, 195, 0.08);
}

.akari-support-intake[hidden],
.akari-support-preview[hidden] {
    display: none;
}

.akari-support-form-grid,
.akari-support-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.akari-support-form-grid label,
.akari-support-details-grid form label {
    display: grid;
    gap: 0.35rem;
}

.akari-support-form-grid .is-wide {
    grid-column: 1 / -1;
}

.akari-support-form-grid input,
.akari-support-form-grid select,
.akari-support-form-grid textarea,
.akari-support-details-grid input,
.akari-support-details-grid select,
.akari-support-details-grid textarea,
.canonical-filter-bar select {
    width: 100%;
    padding: 0.65rem;
    border: 1px solid rgba(123, 231, 255, 0.42);
    color: #f4f6ff;
    background: #090f25;
}

.akari-support-form-grid textarea,
.akari-support-details-grid textarea {
    resize: vertical;
}

.akari-support-form-grid small,
.akari-support-consent,
.akari-support-page dt {
    color: #aeb8d8;
    font: 0.72rem/1.45 var(--drakima-mono-font);
}

.akari-support-consent {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin: 1rem 0;
}

.akari-support-consent input {
    margin-top: 0.16rem;
}

.akari-support-preview dl,
.akari-support-details-grid dl {
    display: grid;
    grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
    gap: 0;
    margin: 1rem 0;
}

.akari-support-preview dt,
.akari-support-preview dd,
.akari-support-details-grid dt,
.akari-support-details-grid dd {
    margin: 0;
    padding: 0.65rem;
    border-bottom: 1px solid rgba(123, 231, 255, 0.14);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.akari-support-table {
    width: 100%;
    color: #edf1ff;
}

.akari-support-queue-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.akari-support-queue-summary article {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem;
    border: 1px solid rgba(123, 231, 255, 0.28);
    background: rgba(7, 12, 29, 0.94);
}

.akari-support-queue-summary strong {
    color: #ff77c8;
    font: 1.4rem/1 var(--drakima-mono-font);
}

.akari-support-queue-summary span {
    color: #bec8e6;
    font-size: 0.72rem;
}

.akari-support-table th {
    color: #7be7ff;
    font: 0.72rem/1.3 var(--drakima-mono-font);
    text-transform: uppercase;
}

.akari-support-table th,
.akari-support-table td {
    padding: 0.7rem;
    border-bottom: 1px solid rgba(123, 231, 255, 0.17);
    vertical-align: top;
}

.akari-support-page pre {
    max-height: 24rem;
    overflow: auto;
    padding: 0.8rem;
    color: #edf1ff;
    white-space: pre-wrap;
    background: #080d20;
}

.support-desk-page .container { max-width: 1240px; }
.support-desk-hero { align-items: end; }
.support-desk-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}
.support-desk-summary article,
.support-desk-empty,
.support-ticket-card,
.support-desk-intake,
.support-ticket-facts,
.support-conversation {
    border: 1px solid rgba(28, 221, 205, .35);
    background: linear-gradient(145deg, rgba(7, 16, 42, .96), rgba(23, 8, 38, .92));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .2);
}
.support-desk-summary article { padding: 1rem 1.2rem; }
.support-desk-summary strong { display: block; color: var(--drakima-magenta, #ff64bd); font-size: 1.65rem; }
.support-desk-summary span { color: rgba(255,255,255,.72); }
.support-desk-intake { margin: 1.25rem 0; padding: 1.25rem; }
.support-desk-list { margin-top: 2rem; }
.support-ticket-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.support-ticket-card { display: block; padding: 1.15rem; color: inherit; text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.support-ticket-card:hover { transform: translateY(-2px); border-color: rgba(255, 70, 178, .75); color: inherit; }
.support-ticket-card h3 { margin: .7rem 0 .35rem; color: #fff; }
.support-ticket-card p, .support-ticket-card small { color: rgba(255,255,255,.68); }
.support-ticket-card__meta { display: flex; justify-content: space-between; gap: 1rem; color: #4af5e0; }
.support-status { border: 1px solid currentColor; padding: .2rem .45rem; font-size: .75rem; text-transform: uppercase; }
.support-status--closed, .support-status--resolved { color: #8ce7bb; }
.support-status--waiting-on-visitor { color: #ffd166; }
.support-ticket-detail-grid { display: grid; grid-template-columns: minmax(280px, .75fr) minmax(0, 1.5fr); gap: 1.25rem; }
.support-ticket-facts, .support-conversation { padding: 1.25rem; }
.support-ticket-facts dl { display: grid; grid-template-columns: minmax(110px, .35fr) 1fr; gap: .55rem 1rem; }
.support-ticket-facts dt { color: #4af5e0; }
.support-ticket-facts dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.support-conversation-thread { display: grid; gap: .85rem; padding: 0; list-style: none; }
.support-message { width: min(88%, 760px); border: 1px solid rgba(255,255,255,.16); padding: .85rem 1rem; background: rgba(255,255,255,.045); }
.support-message.is-requester { justify-self: end; border-color: rgba(255,70,178,.42); }
.support-message.is-staff { justify-self: start; border-color: rgba(74,245,224,.42); }
.support-message > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .82rem; }
.support-message > div strong { color: #ff64bd; }
.support-message > div span { color: rgba(255,255,255,.58); }
.support-message p { margin: .65rem 0 0; white-space: pre-wrap; }
.support-reply-form { margin-top: 1.25rem; }
.support-reply-form label { display: grid; gap: .45rem; }
.support-reply-form textarea { width: 100%; }
.support-ticket-state-form { margin-top: .75rem; }
.support-desk-empty { padding: 2rem; text-align: center; }
.canonical-filter-bar.support-desk-admin-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; }
.canonical-filter-bar.support-desk-admin-filters label { min-width: 0; }
.support-admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.support-admin-form-grid label { display: grid; gap: .35rem; }
.support-admin-form-grid .is-wide { grid-column: 1 / -1; }
.support-admin-audit { margin-top: 1.25rem; padding: 1.25rem; border: 1px solid rgba(28,221,205,.35); background: rgba(4,11,35,.9); }
.support-admin-event-list { display: grid; gap: .75rem; padding: 0; list-style: none; }
.support-admin-event-list > li { padding: .85rem 1rem; border-left: 3px solid #ff46b2; background: rgba(255,255,255,.035); }
.support-admin-event-list header { display: flex; justify-content: space-between; gap: 1rem; color: #4af5e0; }
.support-admin-event-list details { margin-top: .6rem; }
.support-admin-event-list details form { display: flex; align-items: end; gap: .6rem; margin-top: .5rem; }

@media (max-width: 820px) {
    .support-desk-summary, .support-ticket-grid, .support-ticket-detail-grid { grid-template-columns: 1fr; }
    .support-message { width: 100%; }
    .support-ticket-facts dl { grid-template-columns: 1fr; }
    .support-desk-admin-filters, .support-admin-form-grid { grid-template-columns: 1fr; }
    .support-admin-form-grid .is-wide { grid-column: auto; }
}

.canonical-filter-bar {
    display: flex;
    gap: 0.75rem;
    align-items: end;
}

.canonical-filter-bar label {
    display: grid;
    gap: 0.35rem;
    min-width: min(18rem, 70vw);
}

@media (max-width: 760px) {
    .akari-support-form-grid,
    .akari-support-details-grid,
    .akari-support-queue-summary {
        grid-template-columns: 1fr;
    }

    .akari-support-preview dl,
    .akari-support-details-grid dl {
        grid-template-columns: 1fr;
    }
}

.canonical-content-heading,
.canonical-editor-heading,
.canonical-review-section > header,
.canonical-release-panel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.canonical-content-heading .drakima-section-heading {
    margin-bottom: 0;
}

.novel-library-heading {
    max-width: 820px;
    margin-bottom: 2rem;
}

.video-library-heading {
    max-width: 850px;
    margin-bottom: 1.5rem;
}

.video-library-heading h1,
.video-watch-copy h1,
.video-related-section h2 {
    color: var(--drakima-text);
    font-family: var(--drakima-mono-font);
}

.video-library-heading > p:last-child {
    color: var(--drakima-muted);
    font-size: 1.05rem;
    line-height: 1.7;
}

.video-search-panel {
    margin-bottom: 1.25rem;
    padding: 1rem;
    border: 1px dashed rgba(0, 255, 204, 0.55);
    background: rgba(0, 255, 204, 0.045);
}
.video-search-panel > label { display: block; margin-bottom: 0.6rem; color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.75rem; text-transform: uppercase; }
.video-search-panel > div { display: flex; gap: 0.6rem; }
.video-search-panel input { min-width: 0; flex: 1 1 auto; padding: 0.7rem 0.8rem; border: 1px solid rgba(255, 0, 255, 0.55); color: var(--drakima-text); background: #05040b; }
.video-search-panel > p { margin: 0.65rem 0 0; color: var(--drakima-muted); font-size: 0.85rem; }

.video-playlist-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 2rem;
}

.video-playlist-filters a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(255, 0, 255, 0.42);
    color: var(--drakima-cyan-soft);
    background: rgba(8, 7, 18, 0.84);
    font-family: var(--drakima-mono-font);
    font-size: 0.75rem;
    text-decoration: none;
    text-transform: uppercase;
}

.video-playlist-filters a:hover,
.video-playlist-filters a.is-active {
    border-color: var(--drakima-cyan);
    color: #061012;
    background: var(--drakima-cyan);
    box-shadow: var(--drakima-shadow-cyan);
}

.video-playlist-filters span {
    min-width: 1.4rem;
    padding: 0.1rem 0.25rem;
    border: 1px solid currentColor;
    text-align: center;
}

.video-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    gap: 1.25rem;
}

.video-library-card {
    overflow: hidden;
    border: 1px solid rgba(0, 255, 204, 0.22);
    background: rgba(7, 7, 19, 0.9);
    box-shadow: var(--drakima-shadow-cyan);
}

.video-thumbnail {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: linear-gradient(145deg, rgba(255, 0, 255, 0.18), rgba(0, 255, 204, 0.08));
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 220ms ease, filter 220ms ease;
}

.video-thumbnail:hover img {
    transform: scale(1.025);
    filter: brightness(0.72);
}

.video-play-glyph {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    width: 3.4rem;
    height: 3.4rem;
    place-items: center;
    padding-left: 0.2rem;
    transform: translate(-50%, -50%);
    border: 1px solid var(--drakima-cyan);
    border-radius: 50%;
    color: #061012;
    background: rgba(0, 255, 204, 0.9);
    box-shadow: 0 0 22px rgba(0, 255, 204, 0.42);
}

.video-library-card-copy {
    padding: 1rem 1.1rem 1.2rem;
}

.video-library-card-copy h2 {
    margin: 0.2rem 0 0.6rem;
    font-size: 1.3rem;
}

.video-library-card-copy h2 a,
.video-watch-link {
    color: var(--drakima-text);
    text-decoration: none;
}

.video-library-card-copy > p:not(.drakima-card-kicker) {
    display: -webkit-box;
    overflow: hidden;
    color: var(--drakima-muted);
    line-height: 1.6;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.video-watch-link {
    color: var(--drakima-cyan);
    font-family: var(--drakima-mono-font);
    font-size: 0.78rem;
    text-transform: uppercase;
}

.video-empty-state { padding: 2rem; }

.video-watch-page {
    min-height: 100vh;
    padding: 2rem 0 4rem;
}

.video-preview-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(240, 177, 58, 0.5);
    background: rgba(240, 177, 58, 0.1);
}
.video-preview-banner strong { color: #f0b13a; font-family: var(--drakima-mono-font); text-transform: uppercase; }
.video-preview-banner span { color: var(--drakima-muted); }
.video-preview-banner a { margin-left: auto; color: var(--drakima-cyan); }

.video-watch-breadcrumbs {
    display: flex;
    gap: 0.55rem;
    margin-bottom: 0.8rem;
    color: var(--drakima-muted);
    font-family: var(--drakima-mono-font);
    font-size: 0.72rem;
}
.video-watch-breadcrumbs a { color: var(--drakima-cyan); }
.video-watch-container { max-width: 1540px; transition: max-width 180ms ease; }
.video-watch-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.video-watch-topbar .video-watch-breadcrumbs { min-width: 0; margin-bottom: 0; }
.video-view-switch { display: flex; flex: 0 0 auto; align-items: stretch; border: 1px solid rgba(0, 255, 204, 0.4); background: #070711; }
.video-view-switch > span { display: grid; padding: 0 0.65rem; place-items: center; color: var(--drakima-muted); font-family: var(--drakima-mono-font); font-size: 0.66rem; text-transform: uppercase; }
.video-view-switch button { min-width: 5.2rem; padding: 0.48rem 0.65rem; border: 0; border-left: 1px solid rgba(0, 255, 204, 0.25); color: var(--drakima-cyan); background: transparent; font-family: var(--drakima-mono-font); font-size: 0.7rem; text-transform: uppercase; }
.video-view-switch button.is-active { color: #05050a; background: var(--drakima-cyan); }
.video-watch-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 23rem); align-items: start; gap: 1.25rem; }
.video-watch-main { min-width: 0; }

.video-player-shell {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid rgba(0, 255, 204, 0.35);
    background: #000;
    box-shadow: 0 0 38px rgba(0, 255, 204, 0.18);
}

.video-player-shell video {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
}

.video-watch-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
    gap: 2rem;
    margin-top: 1.5rem;
}

.video-watch-copy h1 {
    margin: 0.35rem 0 0.65rem;
    font-size: clamp(2rem, 5vw, 4rem);
}
.video-watch-copy { margin-top: 1.15rem; }

.video-watch-date {
    color: var(--drakima-cyan-soft);
    font-family: var(--drakima-mono-font);
    font-size: 0.76rem;
    text-transform: uppercase;
}

.video-watch-description {
    max-width: 850px;
    color: var(--drakima-muted);
    font-size: 1.02rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.video-watch-context {
    padding: 1rem;
    border-left: 3px solid var(--drakima-pink);
    background: rgba(255, 0, 255, 0.06);
}
.video-watch-context > a,
.video-watch-context > span { display: block; margin-top: 0.55rem; color: var(--drakima-cyan); }
.video-watch-context > p:not(.drakima-card-kicker) { color: var(--drakima-muted); }
.video-watch-context { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1rem; padding: 0; border-left: 0; background: transparent; }
.video-watch-context > span { display: inline; margin-top: 0; color: var(--drakima-muted); font-family: var(--drakima-mono-font); font-size: 0.68rem; text-transform: uppercase; }
.video-watch-context > a, .video-watch-context > em { display: inline; margin-top: 0; padding: 0.28rem 0.48rem; border: 1px solid rgba(255, 0, 255, 0.42); color: var(--drakima-cyan); background: rgba(255, 0, 255, 0.06); font-size: 0.72rem; font-style: normal; text-decoration: none; }
.video-watch-rail { min-width: 0; border-left: 1px solid rgba(0, 255, 204, 0.26); }
.video-watch-rail > header { padding: 0 0 0.8rem 1rem; border-bottom: 1px solid rgba(255, 0, 255, 0.24); }
.video-watch-rail h2 { margin: 0.15rem 0 0; font-size: 1.25rem; }
.video-watch-rail-list { display: grid; }
.video-watch-rail-item { display: grid; grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr); gap: 0.75rem; padding: 0.8rem 0 0.8rem 1rem; border-bottom: 1px solid rgba(154, 143, 202, 0.16); }
.video-watch-rail-item .video-thumbnail { grid-row: 1 / span 2; align-self: start; }
.video-watch-rail-item h3 { min-width: 0; margin: 0; font-size: 0.92rem; line-height: 1.35; }
.video-watch-rail-item h3 a { color: var(--drakima-text); text-decoration: none; }
.video-watch-rail-item h3 a:hover { color: var(--drakima-cyan); }
.video-watch-rail-item > p { display: -webkit-box; overflow: hidden; margin: 0.35rem 0 0; color: var(--drakima-muted); font-size: 0.75rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.video-watch-page.is-theater .video-watch-container { max-width: 1800px; }
.video-watch-page.is-theater .video-watch-stage { grid-template-columns: 1fr; }
.video-watch-page.is-theater .video-watch-rail { border-top: 1px solid rgba(0, 255, 204, 0.26); border-left: 0; }
.video-watch-page.is-theater .video-watch-rail > header { padding: 1rem 0 0.8rem; }
.video-watch-page.is-theater .video-watch-rail-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
.video-watch-page.is-theater .video-watch-rail-item { grid-template-columns: 8rem minmax(0, 1fr); padding-left: 0; }

.video-related-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 255, 204, 0.2);
}
.video-related-section h2 { margin: 0; }
.video-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.video-related-grid article { min-width: 0; }
.video-related-grid h3 { margin-top: 0.6rem; font-size: 1rem; }
.video-related-grid h3 a { color: var(--drakima-text); text-decoration: none; }

.content-engagement {
    margin-top: 3rem;
    padding: clamp(1rem, 3vw, 2rem);
    border: 1px solid rgba(255, 0, 255, 0.45);
    background: rgba(7, 6, 17, 0.9);
    box-shadow: var(--drakima-shadow-pink);
}
.content-engagement-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0, 255, 204, 0.2); }
.content-engagement-heading h2 { margin: 0; color: var(--drakima-text); font-family: var(--drakima-mono-font); }
.content-engagement-counts { display: flex; gap: 1rem; color: var(--drakima-muted); font-size: 0.8rem; text-transform: uppercase; }
.content-engagement-counts strong { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 1.2rem; }
.content-engagement-actions { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; }
.content-engagement-actions form { margin: 0; }
.content-engagement-actions .is-liked { border-color: var(--drakima-hot-pink); color: #fff; background: rgba(255, 0, 122, 0.18); box-shadow: var(--drakima-shadow-pink); }
.content-engagement-feedback { color: var(--drakima-muted); font-size: 0.82rem; }
.content-comment-form { margin-top: 1.25rem; padding: 1rem; border-left: 3px solid var(--drakima-cyan); background: rgba(0, 255, 204, 0.05); }
.content-comment-form label { display: block; margin-bottom: 0.5rem; color: var(--drakima-cyan); font-family: var(--drakima-mono-font); text-transform: uppercase; }
.content-comment-form textarea { width: 100%; resize: vertical; padding: 0.75rem; border: 1px solid rgba(255, 0, 255, 0.45); color: var(--drakima-text); background: #05040b; line-height: 1.55; }
.content-comment-form > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.65rem; }
.content-comment-form small { color: var(--drakima-muted); }
.content-comment-list { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.content-comment { padding: 1rem; border: 1px solid rgba(154, 143, 202, 0.22); background: rgba(0, 0, 0, 0.25); }
.content-comment > header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.content-comment > header strong { color: var(--drakima-cyan-soft); font-family: var(--drakima-mono-font); }
.content-comment time { color: var(--drakima-muted); font-size: 0.72rem; }
.content-comment > p { margin: 0.75rem 0 0; color: var(--drakima-text); line-height: 1.65; white-space: pre-wrap; }
.content-comment form { margin-top: 0.6rem; }
.content-comment form button { padding: 0; border: 0; color: #ff9aad; background: transparent; font-size: 0.75rem; text-decoration: underline; }
.content-comment-empty { color: var(--drakima-muted); }
.content-engagement-counts { flex-wrap: wrap; justify-content: flex-end; }
.content-comment-list { gap: 1rem; }
.content-comment { border-radius: 4px; }
.content-comment > header > .content-comment-author { display: flex; align-items: center; gap: 0.65rem; }
.content-comment-author-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.content-comment-delete-owner { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0 0.15rem !important; }
.content-comment-delete-owner button { color: #ff9aad; font-weight: 700; }
.content-comment-delete-owner small { color: var(--drakima-muted); font-size: 0.64rem; }
.content-comment-avatar {
    display: inline-flex;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 2.35rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 204, 0.55);
    border-radius: 50%;
    color: var(--drakima-cyan);
    background: rgba(0, 255, 204, 0.08);
    font: 0.72rem/1 var(--drakima-mono-font);
}
.content-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.content-comment-author-role { padding: 0.15rem 0.35rem; border: 1px solid rgba(255, 0, 153, 0.55); color: #ff8ed4; font: 0.62rem/1.2 var(--drakima-mono-font); text-transform: uppercase; }
.content-comment-mentions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
.content-comment-author-link { color: var(--drakima-cyan); text-decoration: none; }
.content-comment-author-link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.content-comment-author-link:focus-visible { outline: 2px solid var(--drakima-cyan); outline-offset: 4px; }
.drakima-contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; margin-top: 2rem; }
.drakima-contact-card { min-width: 0; padding: clamp(1.3rem, 3vw, 2.5rem); border: 1px solid rgba(0, 255, 204, 0.25); border-radius: 12px; background: rgba(7, 7, 20, 0.93); }
.drakima-contact-primary { border-color: rgba(255, 0, 255, 0.5); }
.drakima-contact-card h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); margin: 0.7rem 0 1rem; }
.drakima-contact-card p { line-height: 1.65; }
.drakima-contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin: 1.25rem 0; }
.drakima-contact-card small { color: var(--drakima-muted); line-height: 1.6; }
.drakima-contact-email { padding-top: 1.25rem; margin-top: 1.5rem; border-top: 1px solid rgba(0, 255, 204, 0.2); overflow-wrap: anywhere; }
.drakima-contact-admin { margin-top: 1.5rem; }
@media (max-width: 767.98px) { .drakima-contact-grid { grid-template-columns: 1fr; } }
.content-comment-mentions a { padding: 0.22rem 0.4rem; border: 1px solid rgba(0, 255, 204, 0.35); border-radius: 3px; color: var(--drakima-cyan); font: 0.7rem/1.2 var(--drakima-mono-font); }
.content-comment-actions { display: flex; align-items: flex-start; gap: 0.85rem; margin-top: 0.75rem; }
.content-comment-actions > form { margin: 0; }
.content-comment-reply { min-width: min(100%, 31rem); }
.content-comment-reply > summary { width: max-content; color: var(--drakima-cyan); font: 0.75rem/1.3 var(--drakima-mono-font); cursor: pointer; }
.content-comment-reply > form { margin-top: 0.55rem; padding: 0.7rem; border-left: 2px solid rgba(0, 255, 204, 0.55); background: rgba(0, 255, 204, 0.04); }
.content-comment-reply label { display: block; margin-bottom: 0.35rem; color: var(--drakima-cyan-soft); font-size: 0.78rem; }
.content-comment-reply textarea { width: 100%; min-height: 4.75rem; resize: vertical; padding: 0.6rem; border: 1px solid rgba(255, 0, 255, 0.4); background: #05040b; color: var(--drakima-text); line-height: 1.5; }
.content-comment-reply form > div { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.5rem; }
.content-comment-reply form small { color: var(--drakima-muted); font-size: 0.68rem; }
.content-comment-reply form .drakima-button { padding: 0.4rem 0.6rem; border: 1px solid var(--drakima-cyan); color: #02040a; background: var(--drakima-cyan); text-decoration: none; }
.content-comment-replies { margin-top: 0.85rem; padding-left: 1.1rem; border-left: 2px solid rgba(0, 255, 204, 0.24); }
.content-comment-replies > .content-comment { margin: 0; padding: 0.85rem 0 0.85rem 0.9rem; border: 0; border-top: 1px solid rgba(154, 143, 202, 0.18); border-radius: 0; background: transparent; }
.content-comment-replies > .content-comment:first-child { border-top: 0; }
.content-comment.depth-2 { border-left-color: rgba(255, 0, 153, 0.45); }
/* Keep the true reply chain while longer conversations stop consuming horizontal space. */
.content-comment.depth-2 > .content-comment-replies { padding-left: 0; border-left: 0; }
.content-comment.depth-2 > .content-comment-replies > .content-comment { padding-left: 0; }
.content-comment.is-removed { border-color: rgba(154, 143, 202, 0.15); }
.content-comment-tombstone { color: var(--drakima-muted) !important; font-style: italic; }

@media (max-width: 767.98px) {
    .video-search-panel > div { flex-direction: column; }
    .video-watch-layout { grid-template-columns: 1fr; gap: 1rem; }
    .video-watch-context { border-left: 0; }
    .video-watch-topbar { align-items: stretch; flex-direction: column; }
    .video-view-switch { align-self: flex-start; }
    .video-watch-stage { grid-template-columns: 1fr; }
    .video-watch-rail { border-top: 1px solid rgba(0, 255, 204, 0.26); border-left: 0; }
    .video-watch-rail > header { padding: 1rem 0 0.8rem; }
    .video-watch-rail-item { padding-left: 0; }
    .video-preview-banner { align-items: flex-start; flex-direction: column; }
    .video-preview-banner a { margin-left: 0; }
    .content-engagement-heading, .content-comment > header { align-items: flex-start; flex-direction: column; }
    .content-comment-form > div { align-items: stretch; flex-direction: column; }
    .content-engagement-counts { justify-content: flex-start; }
    .content-comment-replies { padding-left: 0.5rem; }
    .content-comment-replies > .content-comment { padding-left: 0.55rem; }
    .content-comment-actions { flex-direction: column; }
    .content-comment-reply { width: 100%; }
    .content-comment-reply form > div { align-items: stretch; flex-direction: column; }
}

@media (max-width: 479.98px) {
    .video-playlist-filters { align-items: stretch; flex-direction: column; }
    .video-playlist-filters a { justify-content: space-between; }
}

.music-library-heading { max-width: 860px; margin-bottom: 2rem; }
.music-library-heading h1,
.music-album-hero h1 { color: var(--drakima-text); font-family: var(--drakima-mono-font); }
.music-library-heading h1 { margin: 0.35rem 0 0.65rem; font-size: clamp(2.25rem, 6vw, 4.8rem); }
.music-library-heading > p:last-child { color: var(--drakima-muted); font-size: 1.05rem; line-height: 1.7; }
.music-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 21rem)); gap: 1.35rem; justify-content: start; }
.music-album-card { overflow: hidden; border: 1px solid rgba(255, 0, 255, 0.4); background: rgba(5, 5, 14, 0.94); box-shadow: var(--drakima-shadow-pink); transition: transform 180ms ease, border-color 180ms ease; }
.music-album-card:hover { transform: translateY(-4px); border-color: var(--drakima-cyan); }
.music-album-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-bottom: 1px solid rgba(0, 255, 204, 0.3); background: #020207; }
.music-album-cover img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease, filter 350ms ease; }
.music-album-card:hover .music-album-cover img { transform: scale(1.025); filter: saturate(1.1) contrast(1.04); }
.music-album-disc { position: absolute; right: -10%; bottom: -10%; z-index: 2; width: 42%; aspect-ratio: 1; border: 1px solid var(--drakima-cyan); border-radius: 50%; background: repeating-radial-gradient(circle, #05050a 0 7px, #13101b 8px 10px); box-shadow: 0 0 18px rgba(0, 255, 204, 0.45); opacity: 0; transform: translate(30%, 30%); transition: opacity 250ms ease, transform 250ms ease; }
.music-album-card:hover .music-album-disc { opacity: 0.88; transform: translate(0, 0); }
.music-album-card-copy { padding: 1.2rem; }
.music-album-card-copy h2 { margin: 0.45rem 0 0.35rem; font-size: 1.35rem; line-height: 1.25; }
.music-album-card-copy h2 a { color: var(--drakima-text); text-decoration: none; }
.music-album-card-copy h2 a:hover { color: var(--drakima-cyan); }
.music-album-artist { margin: 0 0 0.75rem; color: var(--drakima-hot-pink); font-family: var(--drakima-mono-font); font-size: 0.82rem; }
.music-album-description { display: -webkit-box; overflow: hidden; min-height: 3.2em; margin-bottom: 1rem; color: var(--drakima-muted); line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.music-listen-link { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.78rem; text-decoration: none; text-transform: uppercase; }
.music-listen-link span { display: inline-block; transition: transform 150ms ease; }
.music-listen-link:hover span { transform: translateX(0.3rem); }
.music-empty-state { padding: 2rem; }

.music-album-page { min-height: 100vh; padding: 2rem 0 7rem; }
.music-album-breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.25rem; color: var(--drakima-muted); font-family: var(--drakima-mono-font); font-size: 0.75rem; text-transform: uppercase; }
.music-album-breadcrumbs a { color: var(--drakima-cyan); text-decoration: none; }
.music-album-breadcrumbs strong { color: var(--drakima-text); }
.music-album-hero { display: grid; grid-template-columns: minmax(25rem, 39rem) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.25rem); align-items: center; padding: clamp(1rem, 3vw, 2rem); border: 2px solid var(--drakima-pink); background: rgba(7, 6, 16, 0.94); box-shadow: var(--drakima-shadow-pink), inset 0 0 42px rgba(0, 255, 204, 0.04); }
.music-album-artwork-gallery { display: grid; gap: 0.8rem; }
.music-album-artwork-trigger { position: relative; display: block; min-width: 0; padding: 0; overflow: hidden; border: 1px solid var(--drakima-cyan); color: var(--drakima-text); background: #020207; text-align: left; box-shadow: 0 0 20px rgba(0, 255, 204, 0.23); }
.music-album-artwork-trigger > span { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: block; padding: 0.55rem 0.65rem; background: rgba(2, 2, 8, 0.88); font-family: var(--drakima-mono-font); font-size: 0.7rem; text-transform: uppercase; }
.music-album-artwork-trigger > span small { display: block; margin-top: 0.15rem; color: var(--drakima-cyan); font-size: 0.58rem; }
.music-album-artwork-trigger:hover img, .music-album-artwork-trigger:focus-visible img { transform: scale(1.025); filter: saturate(1.08) contrast(1.04); }
.music-album-artwork-trigger:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.music-album-artwork-preview { width: 100%; }
.music-album-artwork-thumbnails { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.music-album-artwork-thumbnail { display: grid; grid-template-columns: 3.4rem auto; align-items: center; gap: 0.55rem; min-width: 7.5rem; padding: 0.3rem; border: 1px solid rgba(0, 255, 204, 0.32); color: var(--drakima-muted); background: rgba(3, 4, 11, 0.94); font: 0.68rem/1 var(--drakima-mono-font); text-transform: uppercase; }
.music-album-artwork-thumbnail img { display: block; width: 3.4rem; aspect-ratio: 1; object-fit: cover; }
.music-album-artwork-thumbnail:hover, .music-album-artwork-thumbnail:focus-visible, .music-album-artwork-thumbnail.is-selected { border-color: var(--drakima-pink); color: #fff; box-shadow: 0 0 1rem rgba(255, 0, 255, 0.25); }
.music-album-artwork-stack { position: relative; margin: 0 1rem 1rem 0; }
.music-album-artwork { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #020207; transition: transform 220ms ease, filter 220ms ease; }
.music-album-artwork.is-front { position: relative; z-index: 2; }
.music-album-artwork.is-back { position: absolute; top: 1rem; left: 1rem; z-index: 1; border-color: var(--drakima-pink); filter: brightness(0.72) saturate(0.85); }
.music-album-artwork-stack:hover .is-front { transform: translate(-0.35rem, -0.35rem); }
.music-album-artwork-stack:hover .is-back { transform: translate(0.35rem, 0.35rem); }
.music-album-artwork { transition: transform 220ms ease; }
.music-album-lightbox { width: min(calc(100% - 2rem), 58rem); max-height: calc(100vh - 2rem); padding: 0.75rem; border: 2px solid var(--drakima-pink); color: var(--drakima-text); background: #03030a; box-shadow: 0 0 42px rgba(255, 0, 255, 0.48); }
.music-album-lightbox::backdrop { background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(5px); }
.music-album-lightbox form { display: flex; justify-content: flex-end; }
.music-album-lightbox form button { display: grid; width: 2.35rem; height: 2.35rem; margin-bottom: 0.5rem; place-items: center; border: 1px solid var(--drakima-cyan); color: var(--drakima-cyan); background: #090914; font-family: var(--drakima-mono-font); }
.music-album-lightbox > img { display: block; width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; }
.music-album-lightbox > p { margin: 0.65rem 0 0; color: var(--drakima-cyan-soft); font-family: var(--drakima-mono-font); text-align: center; }
.music-album-hero h1 { max-width: 900px; margin: 0.35rem 0 0.7rem; font-size: clamp(1.8rem, 3.25vw, 3rem); line-height: 1.08; }
.music-album-meta { color: var(--drakima-cyan-soft); font-family: var(--drakima-mono-font); font-size: 0.85rem; text-transform: uppercase; }
.music-album-meta span { color: var(--drakima-pink); }
.music-album-credits { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin: 0.85rem 0; }
.music-album-credits div { display: grid; grid-template-columns: auto auto; gap: 0.35rem; }
.music-album-credits dt { color: #ff77c8; font: 0.66rem/1.4 var(--drakima-mono-font); text-transform: uppercase; }
.music-album-credits dd { margin: 0; color: #d8fff7; font-size: 0.78rem; }
.music-album-summary { max-width: 820px; color: var(--drakima-muted); font-size: 1.02rem; line-height: 1.75; }
.music-album-release-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; max-width: 620px; margin: 1.35rem 0; padding: 0.9rem 1rem; border-left: 3px solid var(--drakima-cyan); background: rgba(0, 255, 204, 0.06); }
.music-album-release-panel span { color: var(--drakima-muted); font-size: 0.78rem; text-transform: uppercase; }
.music-album-release-panel strong { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); }
.music-album-release-panel small { grid-column: 1 / -1; color: var(--drakima-muted); line-height: 1.5; }
.music-play-album { display: inline-flex; align-items: center; gap: 0.55rem; }

.music-player-console { position: sticky; bottom: 1rem; z-index: 15; display: grid; grid-template-columns: minmax(15rem, 1fr) auto minmax(18rem, 1.35fr) minmax(7rem, 0.45fr); gap: 1rem; align-items: center; margin-top: 1.25rem; padding: 0.8rem; border: 2px solid var(--drakima-pink); background: rgba(3, 3, 10, 0.96); box-shadow: 0 0 24px rgba(255, 0, 255, 0.38), inset 0 0 20px rgba(0, 255, 204, 0.07); backdrop-filter: blur(14px); }
.music-player-console[hidden] { display: none; }
.music-persistent-player { position: fixed; right: max(0.75rem, env(safe-area-inset-right)); bottom: max(0.65rem, env(safe-area-inset-bottom)); left: max(0.75rem, env(safe-area-inset-left)); z-index: 1060; width: min(86rem, calc(100% - 1.5rem)); margin: 0 auto; }
body.has-music-player { padding-bottom: 7.5rem; }
.music-player-now-playing { display: flex; min-width: 0; align-items: center; gap: 0.75rem; }
.music-player-now-playing > a { flex: 0 0 auto; }
.music-player-now-playing img { width: 3.6rem; height: 3.6rem; flex: 0 0 auto; border: 1px solid var(--drakima-cyan); object-fit: cover; }
.music-player-now-playing div { min-width: 0; }
.music-player-now-playing span, .music-player-now-playing small { display: block; color: var(--drakima-muted); font-size: 0.66rem; text-transform: uppercase; }
.music-player-now-playing strong, .music-player-title { display: block; overflow: hidden; color: var(--drakima-cyan-soft); font-family: var(--drakima-mono-font); font-size: 0.83rem; text-overflow: ellipsis; white-space: nowrap; }
.music-player-context { display: flex; gap: 0.65rem; margin-top: 0.2rem; }
.music-player-context a { color: #ff77c8; font: 0.58rem/1.2 var(--drakima-mono-font); text-transform: uppercase; }
.music-player-context a[hidden] { display: none; }
.music-player-controls { display: flex; align-items: center; gap: 0.45rem; }
.music-player-controls button { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border: 1px solid rgba(0, 255, 204, 0.45); color: var(--drakima-cyan); background: rgba(0, 255, 204, 0.04); }
.music-player-controls .music-player-main { width: 2.9rem; height: 2.9rem; border-color: var(--drakima-pink); color: #050207; background: var(--drakima-pink); box-shadow: 0 0 14px rgba(255, 0, 255, 0.45); }
.music-player-controls button:disabled { opacity: 0.35; }
.music-player-timeline { display: grid; grid-template-columns: 3rem minmax(5rem, 1fr) 3rem; gap: 0.55rem; align-items: center; color: var(--drakima-muted); font-family: var(--drakima-mono-font); font-size: 0.68rem; }
.music-player-timeline span:last-child { text-align: right; }
.music-player-console input[type="range"] { width: 100%; accent-color: var(--drakima-pink); }
.music-player-volume { display: flex; align-items: center; gap: 0.45rem; color: var(--drakima-muted); font-family: var(--drakima-mono-font); font-size: 0.65rem; }
.music-player-close { position: absolute; top: -0.65rem; right: auto; left: 50%; display: grid; width: 1.75rem; height: 1.75rem; place-items: center; border: 1px solid #ff77c8; border-radius: 50%; color: #fff; background: #16051a; font-size: 1rem; transform: translateX(-50%); }

@media (max-width: 991.98px) {
    .music-album-hero { grid-template-columns: minmax(20rem, 29rem) minmax(0, 1fr); }
    .music-player-console { grid-template-columns: minmax(0, 1fr) auto; }
    .music-player-timeline { grid-column: 1 / -1; grid-row: 2; }
    .music-player-volume { display: none; }
}

@media (max-width: 767.98px) {
    .music-album-page { padding-top: 1rem; }
    .music-album-hero { grid-template-columns: 1fr; }
    .music-album-artwork-stack, .music-album-artwork-gallery { width: min(100%, 28rem); margin-inline: auto; }
    .music-player-console { bottom: 0.4rem; }
    .music-player-now-playing img { width: 3rem; height: 3rem; }
    .music-persistent-player {
        top: max(0.45rem, env(safe-area-inset-top));
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(10.5rem, calc(100vw - 12rem));
        margin: 0;
        transform: translateX(-50%);
    }
    .music-persistent-player.music-player-console {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.35rem;
        min-height: 3.05rem;
        padding: 0.35rem 0.4rem;
        border-width: 1px;
    }
    body.has-music-player { padding-bottom: 0; }
    .music-persistent-player .music-player-now-playing > a,
    .music-persistent-player .music-player-now-playing span,
    .music-persistent-player .music-player-now-playing small,
    .music-persistent-player .music-player-context,
    .music-persistent-player .music-player-timeline,
    .music-persistent-player .music-player-volume,
    .music-persistent-player .music-player-controls button:not(.music-player-main) {
        display: none;
    }
    .music-persistent-player .music-player-now-playing {
        gap: 0;
    }
    .music-persistent-player .music-player-title {
        font-size: 0.67rem;
    }
    .music-persistent-player .music-player-controls .music-player-main {
        width: 2.1rem;
        height: 2.1rem;
    }
    .music-persistent-player .music-player-close {
        top: -0.4rem;
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.75rem;
    }
}

@media (max-width: 479.98px) {
    .music-album-release-panel { grid-template-columns: 1fr; }
    .music-album-release-panel strong, .music-album-release-panel small { grid-column: 1; }
    .music-player-console { grid-template-columns: 1fr auto; gap: 0.6rem; padding: 0.6rem; }
    body.has-music-player { padding-bottom: 0; }
    .music-player-now-playing img { display: none; }
    .music-player-controls button:not(.music-player-main) { display: none; }
}

.novel-library-heading h1,
.novel-publication-copy h1,
.novel-reader-inline-title h1 {
    color: var(--drakima-text);
    font-family: var(--drakima-mono-font);
}

.novel-library-heading > p:last-child,
.novel-publication-summary {
    color: var(--drakima-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.novel-library-grid {
    display: grid;
    gap: 1.5rem;
}

.novel-library-card {
    display: grid;
    grid-template-columns: minmax(12rem, 17rem) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(0, 255, 204, 0.25);
    background: rgba(7, 7, 19, 0.88);
    box-shadow: var(--drakima-shadow-cyan);
}

.novel-library-cover {
    display: flex;
    min-height: 22rem;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-right: 1px solid rgba(0, 255, 204, 0.2);
    background: rgba(255, 0, 255, 0.08);
}

.novel-library-cover img,
.novel-publication-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.novel-library-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1.25rem, 4vw, 3rem);
}

.novel-library-copy h2 { margin: 0.75rem 0 0.35rem; color: var(--drakima-text); font-size: clamp(1.6rem, 4vw, 2.6rem); }
.novel-library-copy > p:not(.novel-byline) { max-width: 760px; color: var(--drakima-muted); line-height: 1.7; }
.novel-byline { color: var(--drakima-cyan-soft); font-family: var(--drakima-mono-font); }
.novel-badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.novel-badge-row span { padding: 0.3rem 0.55rem; border: 1px solid rgba(0, 255, 204, 0.42); color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.72rem; text-transform: uppercase; }
.novel-badge-row .is-mature { border-color: rgba(255, 77, 109, 0.65); color: #ff9aad; }
.novel-empty-state { padding: 2rem; }

.novel-preview-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(240, 177, 58, 0.5);
    background: rgba(240, 177, 58, 0.1);
    color: var(--drakima-text);
}
.novel-preview-banner strong { color: #f0b13a; font-family: var(--drakima-mono-font); text-transform: uppercase; }
.novel-preview-banner a { margin-left: auto; color: var(--drakima-cyan); }

.novel-publication-hero {
    display: grid;
    grid-template-columns: minmax(15rem, 23rem) minmax(0, 1fr);
    min-height: 31rem;
    overflow: hidden;
    border: 1px solid rgba(255, 0, 255, 0.3);
    background: rgba(7, 7, 19, 0.88);
    box-shadow: var(--drakima-shadow-pink);
}
.novel-publication-cover { min-height: 31rem; background: linear-gradient(145deg, rgba(255, 0, 255, 0.15), rgba(0, 255, 204, 0.08)); }
.novel-publication-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(1.5rem, 5vw, 4rem); }
.novel-publication-copy h1 { margin: 0.45rem 0 0.75rem; font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: 1.05; }
.novel-resume-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-top: 1.25rem; padding: 0.8rem; border-left: 3px solid var(--drakima-cyan); background: rgba(0, 255, 204, 0.07); color: var(--drakima-muted); }

.novel-toc { margin-top: 3rem; }
.novel-toc > header { margin-bottom: 1rem; }
.novel-toc h2 { margin: 0; color: var(--drakima-text); }
.novel-toc header > p:last-child { color: var(--drakima-muted); }
.novel-toc ol { margin: 0; padding: 0; border-block: 1px solid rgba(0, 255, 204, 0.22); list-style: none; }
.novel-toc li { border-bottom: 1px solid rgba(154, 143, 202, 0.16); }
.novel-toc li:last-child { border-bottom: 0; }
.novel-toc li a { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 7rem; align-items: center; gap: 1rem; padding: 0.85rem 0.5rem; color: var(--drakima-text); text-decoration: none; transition: background-color 150ms ease; }
.novel-toc li a:hover { background: rgba(0, 255, 204, 0.07); }
.novel-toc li span, .novel-toc li em { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.74rem; font-style: normal; text-transform: uppercase; }
.novel-toc li em { color: var(--drakima-muted); text-align: right; }
.novel-toc li.is-current { border-left: 3px solid var(--drakima-cyan); background: rgba(0, 255, 204, 0.05); }
.novel-toc li.is-complete em { color: #8df77b; }
.novel-toc-empty { padding: 1rem; border: 1px dashed rgba(154, 143, 202, 0.35); color: var(--drakima-muted); }

.novel-reader-page { min-height: 100vh; padding: 1.25rem 0 0; }
.novel-progress-rail { position: sticky; top: 0; z-index: 20; height: 4px; background: rgba(255, 255, 255, 0.08); }
.novel-progress-rail span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--drakima-pink), var(--drakima-cyan)); box-shadow: 0 0 12px rgba(0, 255, 204, 0.6); }
.novel-reader-stage::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.11), rgba(0, 0, 0, 0.11) 1px, transparent 1px, transparent 4px); opacity: 0.55; }
.novel-chapter-number { margin: 0; color: var(--drakima-pink); font-family: var(--drakima-mono-font); text-transform: uppercase; }
.novel-reader-console {
    position: sticky;
    top: 0.75rem;
    z-index: 18;
    margin-top: 1rem;
    padding: 1rem;
    border: 3px solid #f20bd5;
    border-radius: 8px;
    background: linear-gradient(110deg, rgba(116, 22, 142, .94), rgba(53, 88, 145, .94));
    box-shadow: 0 0 20px rgba(255, 0, 255, .62), 0 0 30px rgba(0, 255, 204, .28), inset 0 0 18px rgba(255, 255, 255, .08);
    backdrop-filter: blur(12px);
}
.novel-reader-console-status { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.65rem; padding: 0.45rem 0.65rem; color: var(--drakima-cyan-soft); background: rgba(3, 3, 10, 0.92); font-family: var(--drakima-mono-font); font-size: 0.72rem; text-transform: uppercase; }
.novel-console-signal { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--drakima-cyan); box-shadow: 0 0 12px var(--drakima-cyan); }
.novel-console-progress { margin-left: auto; color: var(--drakima-cyan); white-space: nowrap; }
.novel-reader-console-actions { display: flex; align-items: stretch; justify-content: space-between; gap: 0.6rem; }
.novel-console-nav-group, .novel-console-reading-group { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; }
.novel-console-reading-group { justify-content: flex-end; }
.novel-reader-console-actions .drakima-button { display: inline-flex; min-height: 2.8rem; align-items: center; justify-content: center; border-width: 2px; border-color: var(--drakima-pink); color: var(--drakima-cyan); background: #121218; box-shadow: 0 0 8px rgba(255, 0, 255, 0.35); }
.novel-reader-console-actions .drakima-button:hover { color: #05050a; background: var(--drakima-cyan); }
.novel-reader-console-actions .drakima-button[data-novel-stream] { color: #fff6ff !important; }
.novel-reader-console-actions .drakima-button[data-novel-stream]:hover { color: #05050a !important; }
.novel-reader-console-actions .drakima-button:disabled { color: var(--drakima-muted); border-color: rgba(154, 143, 202, 0.28); box-shadow: none; opacity: 0.45; }
.novel-reader-console-actions .drakima-button:disabled:hover { color: var(--drakima-muted); background: #121218; }
.novel-stream-speed { display: flex; min-height: 2.8rem; align-items: center; gap: 0.55rem; padding: 0 0.65rem; border: 2px solid var(--drakima-pink); color: var(--drakima-muted); background: #121218; font-family: var(--drakima-mono-font); font-size: 0.68rem; text-transform: uppercase; }
.novel-stream-speed select { border: 0; color: var(--drakima-cyan); background: #090713; font: inherit; }
.novel-chapter-hero { display: block; width: min(calc(100% - 2rem), 720px); max-height: 58vh; margin: 1.35rem auto 0; border: 2px solid var(--drakima-pink); border-radius: 5px; object-fit: contain; background: #020205; box-shadow: 0 0 15px rgba(255, 0, 255, 0.55); filter: contrast(1.04) saturate(1.08); }
.novel-reader-stage,
.home-welcome-transmission { position: relative; width: min(calc(100% - 2rem), 1320px); margin: 1.5rem auto 2rem; padding: clamp(1rem, 2.5vw, 2rem); overflow: hidden; border: 2px solid var(--drakima-pink); border-radius: 8px; background: #0d0d0f; box-shadow: 0 0 18px rgba(255, 0, 255, 0.48); }
.novel-chapter-body,
.home-welcome-copy,
.home-akari-whisper { position: relative; z-index: 1; width: min(100%, 1180px); min-height: 24rem; margin: 0 auto; padding: clamp(0.5rem, 1.5vw, 1rem); color: var(--drakima-cyan-soft); background: transparent; font-family: "Orbitron", sans-serif; font-size: clamp(0.98rem, 1.7vw, 1.12rem); letter-spacing: 0.015em; line-height: 1.72; text-shadow: 0 0 5px rgba(0, 255, 204, 0.32); }
.novel-reader-inline-title,
.home-welcome-transmission :is(h2, h3) { display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.5rem); margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.novel-reader-inline-title::before, .novel-reader-inline-title::after,
.home-welcome-transmission :is(h2, h3)::before,
.home-welcome-transmission :is(h2, h3)::after { flex: 1; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(0, 255, 204, 0.72)); box-shadow: 0 0 6px rgba(0, 255, 204, 0.28); }
.novel-reader-inline-title::after,
.home-welcome-transmission :is(h2, h3)::after { background: linear-gradient(90deg, rgba(0, 255, 204, 0.72), transparent); }
.novel-reader-inline-title h1,
.home-welcome-transmission :is(h2, h3) { max-width: 880px; margin: 0; color: #c68cff; font-size: clamp(1.2rem, 2.5vw, 1.85rem); line-height: 1.2; text-shadow: 1px 0 #26f3e0, -1px 0 #ff45cc, 0 0 12px rgba(143, 75, 255, .9); }
.novel-reader-inline-title + hr { display: none; }
.novel-chapter-body p,
.home-welcome-transmission p,
.page-surface .home-welcome-transmission .page-prose > p { margin: 0 0 1.45em; }
.novel-chapter-body h1, .novel-chapter-body h2, .novel-chapter-body h3,
.home-welcome-transmission :is(h2, h3) { margin: 2em 0 0.75em; color: var(--drakima-text); font-family: var(--drakima-mono-font); line-height: 1.25; }
.novel-chapter-body blockquote,
.home-welcome-copy blockquote,
.home-akari-whisper blockquote { margin: 1.5rem 0; padding: 1rem 1.25rem; border: 0; border-inline: 4px solid var(--drakima-hot-pink); border-radius: 5px; color: var(--drakima-cyan-soft); background: rgba(102, 0, 47, 0.5); transition: border-color 180ms ease, box-shadow 180ms ease; }
.novel-chapter-body blockquote.is-stream-pending { display: none; }
.novel-chapter-body blockquote:hover,
.home-welcome-copy blockquote:hover,
.home-akari-whisper blockquote:hover { border-color: var(--drakima-cyan); box-shadow: 0 0 12px rgba(0, 255, 204, 0.32); }
.novel-chapter-body hr { margin: 3rem auto; width: 8rem; border-color: rgba(0, 255, 204, 0.45); opacity: 1; }
.novel-chapter-body hr.is-stream-pending { display: none; }
.novel-chapter-body.is-streaming::after { content: "_"; display: inline-block; color: var(--drakima-cyan); animation: novel-cursor-blink 720ms steps(1, end) infinite; }
@keyframes novel-cursor-blink { 50% { opacity: 0; } }
@media (max-width: 767.98px) {
    .novel-library-card, .novel-publication-hero { grid-template-columns: 1fr; }
    .novel-library-cover { min-height: 0; aspect-ratio: 3 / 4; border-right: 0; border-bottom: 1px solid rgba(0, 255, 204, 0.2); }
    .novel-publication-cover { min-height: 0; aspect-ratio: 3 / 4; }
    .novel-toc li a { grid-template-columns: 1fr auto; gap: 0.3rem 0.8rem; }
    .novel-toc li strong { grid-column: 1 / -1; grid-row: 2; }
    .novel-reader-page { padding-top: 0.5rem; }
    .novel-reader-console { position: relative; top: auto; padding: 0.65rem; }
    .novel-reader-console-actions { display: block; }
    .novel-console-nav-group { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .novel-console-reading-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.6rem; }
    .novel-reader-console-actions .drakima-button, .novel-stream-speed { width: 100%; }
    .novel-stream-speed { justify-content: space-between; }
    .novel-reader-stage,
    .home-welcome-transmission { width: min(calc(100% - 1rem), 1320px); padding: 0.45rem; }
    .novel-chapter-body,
    .home-welcome-copy,
    .home-akari-whisper { padding: 1rem; }
    .novel-reader-inline-title,
    .home-welcome-transmission :is(h2, h3) { align-items: flex-start; }
    .novel-preview-banner { align-items: flex-start; flex-direction: column; }
    .novel-preview-banner a { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .novel-chapter-body.is-streaming::after { animation: none; }
}

.akari-presence-console {
    min-height: 100vh;
    padding: 2rem 0 4rem;
}

.akari-presence-heading,
.akari-presence-registry > header,
.akari-presence-editor header,
.akari-voice-registry header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.akari-presence-heading {
    margin-bottom: 1rem;
}

.akari-presence-heading h1,
.akari-presence-registry h2,
.akari-presence-editor h2,
.akari-voice-registry h2,
.akari-voice-registry h3 {
    margin: 0;
}

.akari-presence-metrics {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0.45rem;
}

.akari-presence-metrics span {
    display: grid;
    min-width: 6.7rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--drakima-line-cyan);
    background: rgba(4, 8, 20, 0.9);
    color: var(--drakima-muted);
    font: 0.67rem/1.35 var(--drakima-mono-font);
}

.akari-presence-metrics strong {
    color: var(--drakima-cyan);
    font-size: 1.1rem;
}

.akari-presence-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(22rem, 0.75fr);
    align-items: start;
    gap: 1rem;
}

.akari-presence-registry,
.akari-presence-editor,
.akari-voice-registry {
    min-width: 0;
    border: 1px solid var(--drakima-line-cyan);
    background: rgba(5, 7, 17, 0.91);
}

.akari-presence-registry > header,
.akari-presence-editor form,
.akari-voice-registry > div,
.akari-voice-registry > form {
    padding: 1rem;
}

.akari-presence-table-wrap {
    overflow-x: auto;
}

@media (max-width: 760px) {
    .akari-presence-registry > header {
        flex-wrap: wrap;
    }
}

.akari-presence-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
}

.akari-presence-table th,
.akari-presence-table td {
    padding: 0.65rem;
    border-top: 1px solid rgba(0, 255, 204, 0.16);
    vertical-align: top;
    text-align: left;
}

.akari-presence-table th {
    color: var(--drakima-cyan);
    font: 0.68rem/1.3 var(--drakima-mono-font);
    text-transform: uppercase;
}

.akari-presence-table td:first-child strong,
.akari-presence-table td:first-child span,
.akari-presence-table td:nth-child(2) span {
    display: block;
}

.akari-presence-table td:first-child strong {
    color: #fff;
}

.akari-presence-table td span {
    color: var(--drakima-muted);
}

.akari-presence-table .is-enabled { color: var(--drakima-cyan); }
.akari-presence-table .is-disabled { color: #ff8aaf; }

.akari-presence-table td:last-child {
    white-space: nowrap;
}

.akari-presence-table td:last-child form {
    display: inline;
}

.akari-presence-table td:last-child a,
.akari-presence-table td:last-child button {
    margin-right: 0.3rem;
    border: 0;
    background: transparent;
    color: var(--drakima-cyan);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.akari-presence-editor {
    position: sticky;
    top: 5.5rem;
}

.akari-presence-editor form,
.akari-voice-registry form {
    display: grid;
    gap: 0.4rem;
}

.akari-presence-editor label,
.akari-voice-registry label {
    margin-top: 0.35rem;
    color: #d8dcf2;
    font-size: 0.72rem;
}

.akari-presence-editor input,
.akari-presence-editor select,
.akari-presence-editor textarea,
.akari-voice-registry input,
.akari-voice-registry textarea {
    width: 100%;
    min-height: 2.25rem;
    border: 1px solid #6d7698;
    background: #f7f7fb;
    color: #11131d;
}

.akari-presence-editor textarea,
.akari-voice-registry textarea {
    resize: vertical;
}

.akari-presence-editor span[data-valmsg-for],
.akari-voice-registry span[data-valmsg-for] {
    color: #ff8aaf;
    font-size: 0.7rem;
}

.akari-presence-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.65rem;
}

.akari-presence-form-grid > div {
    display: grid;
    gap: 0.3rem;
}

.akari-presence-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.akari-presence-check input {
    width: auto;
    min-height: 0;
}

.akari-voice-registry {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr);
    gap: 1rem;
    margin-top: 1rem;
}

.akari-voice-registry > form {
    border-left: 1px solid rgba(0, 255, 204, 0.2);
}

.akari-voice-registry ul {
    display: grid;
    gap: 0.4rem;
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
}

.akari-voice-registry li {
    display: grid;
    grid-template-columns: minmax(9rem, 0.45fr) minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
}

.akari-voice-registry li span {
    overflow: hidden;
    color: var(--drakima-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1050px) {
    .akari-presence-grid,
    .akari-voice-registry {
        grid-template-columns: 1fr;
    }

    .akari-presence-editor {
        position: static;
    }

    .akari-voice-registry > form {
        border-top: 1px solid rgba(0, 255, 204, 0.2);
        border-left: 0;
    }
}

@media (max-width: 700px) {
    .akari-presence-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .akari-presence-metrics,
    .akari-presence-form-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479.98px) {
    .novel-reader-console-status { align-items: flex-start; flex-wrap: wrap; }
    .novel-console-progress { width: 100%; margin-left: 1.15rem; }
    .novel-console-nav-group { gap: 0.35rem; }
    .novel-console-nav-group .drakima-button { padding-inline: 0.45rem; font-size: 0.68rem; }
}

.canonical-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 1.5rem 0 2.5rem;
    border: 1px solid rgba(0, 255, 204, 0.28);
    background: rgba(4, 8, 18, 0.8);
}

.canonical-summary-grid > div {
    padding: 1rem;
    border-right: 1px solid rgba(0, 255, 204, 0.18);
}

.canonical-summary-grid > div:last-child { border-right: 0; }
.canonical-summary-grid strong,
.canonical-summary-grid span { display: block; }
.canonical-summary-grid strong { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 1.8rem; }
.canonical-summary-grid span { color: var(--drakima-muted); font-size: 0.8rem; text-transform: uppercase; }

.canonical-notice {
    margin: 1rem 0;
    padding: 0.9rem 1rem;
    border-left: 3px solid var(--drakima-cyan);
    background: rgba(0, 255, 204, 0.08);
    color: var(--drakima-text);
}

.canonical-notice.is-error { border-left-color: var(--drakima-danger); background: rgba(255, 77, 109, 0.08); }
.canonical-review-section { margin-top: 2.25rem; }
.canonical-review-section > header { align-items: end; margin-bottom: 0.75rem; }
.canonical-review-section h2 { margin: 0; color: var(--drakima-text); }
.canonical-review-section header p { margin: 0.35rem 0 0; color: var(--drakima-muted); }
.canonical-review-section header > span { color: var(--drakima-cyan-soft); font-family: var(--drakima-mono-font); font-size: 0.78rem; white-space: nowrap; }

.canonical-review-list { border-block: 1px solid rgba(154, 143, 202, 0.24); }
.canonical-review-row {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(154, 143, 202, 0.16);
}
.canonical-review-row:last-child { border-bottom: 0; }
.canonical-status-marker {
    padding: 0.42rem 0.3rem;
    border: 1px solid #f0b13a;
    color: #f0b13a;
    font-family: var(--drakima-mono-font);
    font-size: 0.68rem;
    text-align: center;
    text-transform: uppercase;
}
.canonical-status-marker.is-ready { border-color: var(--drakima-cyan); color: var(--drakima-cyan); }
.canonical-status-marker.is-published { border-color: #8df77b; color: #8df77b; }
.canonical-status-marker.is-blocked { border-color: var(--drakima-danger); color: var(--drakima-danger); }
.canonical-review-copy h3 { margin: 0; color: var(--drakima-text); font-size: 1.08rem; }
.canonical-review-copy p { margin: 0.25rem 0 0; color: var(--drakima-muted); }
.canonical-review-copy details { margin-top: 0.55rem; color: #f0b13a; }
.canonical-row-actions { display: flex; align-items: center; gap: 0.6rem; }
.canonical-row-actions form { margin: 0; }
.canonical-row-actions .drakima-button { min-height: 38px; padding: 0.5rem 0.7rem; font-size: 0.72rem; }
.canonical-empty { padding: 1rem; border: 1px dashed rgba(154, 143, 202, 0.34); color: var(--drakima-muted); }

.canonical-editor-heading { margin-bottom: 1.5rem; }
.canonical-editor-heading h1 { margin-bottom: 0.5rem; }
.canonical-editor-heading p:last-child { max-width: 780px; color: var(--drakima-muted); }
.canonical-release-panel {
    align-items: center;
    margin: 1.25rem 0;
    padding: 1rem;
    border: 1px solid rgba(240, 177, 58, 0.4);
    border-left: 4px solid #f0b13a;
    background: rgba(240, 177, 58, 0.06);
}
.canonical-release-panel.is-ready { border-color: rgba(0, 255, 204, 0.38); border-left-color: var(--drakima-cyan); background: rgba(0, 255, 204, 0.06); }
.canonical-release-panel.is-blocked { border-left-color: var(--drakima-danger); }
.canonical-release-panel h2 { margin: 0; font-size: 1.25rem; }
.canonical-release-panel p { margin: 0.3rem 0 0; color: var(--drakima-muted); }
.canonical-issue-list { margin: 0.6rem 0 0; padding-left: 1.2rem; color: #ff9aad; }
.canonical-release-panel .canonical-issue-list { flex: 1 1 24rem; margin: 0; }
.canonical-release-panel form { flex: 0 0 auto; }

.canonical-editor-form {
    display: grid;
    gap: 1rem;
    padding: 1.2rem;
    border: 1px solid rgba(154, 143, 202, 0.24);
    background: rgba(6, 7, 18, 0.72);
}
.canonical-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.canonical-form-grid > div { min-width: 0; }
.canonical-span-two { grid-column: 1 / -1; }
.canonical-check { display: flex; align-items: center; gap: 0.6rem; color: var(--drakima-cyan-soft); }
.canonical-manuscript { min-height: 34rem; font-family: Consolas, "Courier New", monospace; line-height: 1.55; }
.canonical-provenance { margin: 0; color: var(--drakima-muted); }
.canonical-editor-form small { display: block; margin-top: 0.3rem; color: var(--drakima-muted); }

.canonical-table-wrap { overflow-x: auto; border: 1px solid rgba(0, 255, 204, 0.2); }
.canonical-table { width: 100%; border-collapse: collapse; background: rgba(5, 6, 18, 0.78); }
.canonical-table th, .canonical-table td { padding: 0.72rem 0.85rem; border-bottom: 1px solid rgba(154, 143, 202, 0.16); text-align: left; }
.canonical-table th { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.72rem; text-transform: uppercase; }
.canonical-table tr:last-child td { border-bottom: 0; }
.canonical-table small { display: block; margin-top: 0.2rem; color: var(--drakima-muted); }
.canonical-table a { color: var(--drakima-cyan); }

@media (max-width: 767.98px) {
    .canonical-content-heading, .canonical-editor-heading, .canonical-review-section > header, .canonical-release-panel { align-items: stretch; flex-direction: column; }
    .canonical-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .canonical-summary-grid > div:nth-child(2) { border-right: 0; }
    .canonical-summary-grid > div:nth-child(-n + 2) { border-bottom: 1px solid rgba(0, 255, 204, 0.18); }
    .canonical-review-row { grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; }
    .canonical-row-actions { grid-column: 1 / -1; }
    .canonical-form-grid { grid-template-columns: 1fr; }
    .canonical-span-two { grid-column: auto; }
}

@media (max-width: 479.98px) {
    .canonical-summary-grid { grid-template-columns: 1fr; }
    .canonical-summary-grid > div { border-right: 0; border-bottom: 1px solid rgba(0, 255, 204, 0.18); }
    .canonical-review-row { grid-template-columns: 1fr; }
    .canonical-status-marker { width: 5rem; }
    .canonical-row-actions { grid-column: auto; align-items: stretch; flex-direction: column; }
}

.legacy-migration-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
}

.legacy-migration-heading form {
    flex: 0 0 auto;
}

.legacy-migration-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.legacy-migration-source-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block: 1px solid rgba(0, 255, 204, 0.32);
    background: rgba(7, 8, 21, 0.84);
}

.legacy-migration-source-strip > div {
    min-width: 0;
    padding: 0.9rem 1rem;
    border-right: 1px solid rgba(0, 255, 204, 0.18);
}

.legacy-migration-source-strip > div:last-child {
    border-right: 0;
}

.legacy-migration-source-strip span,
.legacy-migration-source-strip strong {
    display: block;
}

.legacy-migration-source-strip span {
    margin-bottom: 0.3rem;
    color: #ff5ec9;
    font-family: var(--drakima-mono-font);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.legacy-migration-source-strip strong {
    overflow: hidden;
    color: #f4f2ff;
    font-size: 0.9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legacy-migration-notice {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1rem;
    margin: 1rem 0 2rem;
    padding: 0.85rem 1rem;
    border-left: 3px solid #f0b13a;
    background: rgba(240, 177, 58, 0.08);
}

.legacy-migration-notice.is-ready {
    border-left-color: #00ffcc;
    background: rgba(0, 255, 204, 0.07);
}

.legacy-migration-notice.is-blocked {
    border-left-color: #ff5277;
    background: rgba(255, 82, 119, 0.08);
}

.legacy-migration-section {
    margin-top: 2.25rem;
}

.legacy-migration-section-title {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.legacy-migration-section-title h2,
.legacy-migration-phases h3 {
    margin-bottom: 0;
}

.legacy-migration-section-title > span {
    color: #b8b1d8;
    font-family: var(--drakima-mono-font);
    font-size: 0.78rem;
}

.legacy-migration-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(0, 255, 204, 0.2);
}

.legacy-migration-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(5, 6, 18, 0.78);
}

.legacy-migration-table th,
.legacy-migration-table td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid rgba(154, 143, 202, 0.16);
    text-align: left;
}

.legacy-migration-table th {
    color: #00ffcc;
    font-family: var(--drakima-mono-font);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.legacy-migration-table tr:last-child td {
    border-bottom: 0;
}

.legacy-migration-danger {
    color: #ff5277;
    font-weight: 700;
}

.legacy-migration-phases {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid rgba(154, 143, 202, 0.22);
}

.legacy-migration-phases article {
    min-width: 0;
    padding: 1rem;
    border-right: 1px solid rgba(154, 143, 202, 0.22);
}

.legacy-migration-phases article:last-child {
    border-right: 0;
}

.legacy-migration-phases article > span {
    color: #f0b13a;
    font-family: var(--drakima-mono-font);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.legacy-migration-phases p,
.legacy-migration-findings p {
    margin: 0.45rem 0 0;
}

.legacy-migration-findings {
    border-block: 1px solid rgba(154, 143, 202, 0.22);
}

.legacy-migration-findings article {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(154, 143, 202, 0.16);
}

.legacy-migration-findings article:last-child {
    border-bottom: 0;
}

.legacy-migration-findings article > span {
    color: #65d8ff;
    font-family: var(--drakima-mono-font);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.legacy-migration-findings article[data-severity="warning"] > span {
    color: #f0b13a;
}

.legacy-migration-findings article[data-severity="blocker"] > span {
    color: #ff5277;
}

@media (max-width: 991.98px) {
    .legacy-migration-source-strip,
    .legacy-migration-phases {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .legacy-migration-source-strip > div:nth-child(2),
    .legacy-migration-phases article:nth-child(2) {
        border-right: 0;
    }

    .legacy-migration-source-strip > div:nth-child(-n + 2),
    .legacy-migration-phases article:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(154, 143, 202, 0.22);
    }
}

@media (max-width: 575.98px) {
    .legacy-migration-heading,
    .legacy-migration-section-title {
        align-items: stretch;
        flex-direction: column;
    }

    .legacy-migration-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .legacy-migration-source-strip,
    .legacy-migration-phases,
    .legacy-migration-notice,
    .legacy-migration-findings article {
        grid-template-columns: 1fr;
    }

    .legacy-migration-source-strip > div,
    .legacy-migration-source-strip > div:nth-child(2),
    .legacy-migration-phases article,
    .legacy-migration-phases article:nth-child(2) {
        border-right: 0;
        border-bottom: 1px solid rgba(154, 143, 202, 0.22);
    }
}

/* Engineering knowledge hub */
.engineering-hub-page,
.engineering-dossier-page {
    min-height: calc(100vh - 8rem);
}

.engineering-hub-header {
    border-bottom: 1px solid var(--drakima-line-cyan);
}

.engineering-hub-header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem;
    padding-top: 3.25rem;
    padding-bottom: 2.25rem;
}

.engineering-hub-header h1,
.engineering-catalog-toolbar h2,
.engineering-akari-brief h2,
.engineering-dossier-header h1,
.engineering-dossier-section h2 {
    color: var(--drakima-text);
    font-family: var(--drakima-mono-font);
    letter-spacing: 0;
}

.engineering-hub-header h1 {
    margin: 0.25rem 0 0.65rem;
    font-size: clamp(2.3rem, 5vw, 4.25rem);
}

.engineering-hub-header p:last-child {
    max-width: 62rem;
    margin: 0;
    color: var(--drakima-muted);
    line-height: 1.65;
}

.engineering-hub-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(6.5rem, 1fr));
    border: 1px solid rgba(0, 255, 204, 0.35);
    background: rgba(5, 8, 18, 0.92);
}

.engineering-hub-stats div {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem 1rem;
    border-right: 1px solid rgba(0, 255, 204, 0.18);
}

.engineering-hub-stats div:last-child { border-right: 0; }
.engineering-hub-stats strong { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 1.4rem; }
.engineering-hub-stats span { color: var(--drakima-muted); font-size: 0.75rem; text-transform: uppercase; }

.engineering-hub-workspace { padding-top: 1.25rem; padding-bottom: 4rem; }

.engineering-akari-brief {
    display: grid;
    grid-template-columns: 9rem minmax(0, 1fr);
    align-items: center;
    gap: 1.25rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(255, 0, 255, 0.4);
    border-left: 3px solid var(--drakima-cyan);
    background: rgba(10, 8, 24, 0.94);
}

.engineering-akari-portrait {
    height: 10.5rem;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(0, 255, 204, 0.08), rgba(255, 0, 255, 0.12));
}

.engineering-akari-portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
}

.engineering-akari-brief > div:last-child { padding: 1rem 1.25rem 1rem 0; }
.engineering-akari-brief h2 { margin: 0.25rem 0 0.45rem; font-size: 1.35rem; }
.engineering-akari-brief p:not(.drakima-card-kicker) { margin: 0 0 0.6rem; color: var(--drakima-muted); line-height: 1.55; }
.engineering-akari-brief a { display: inline-flex; min-height: 24px; align-items: center; color: var(--drakima-cyan); }
.engineering-akari-actions { display: flex; flex-wrap: wrap; gap: 0.55rem 1rem; }

.engineering-highlights {
    margin-bottom: 1.25rem;
    border: 1px solid rgba(0, 255, 204, 0.3);
    background: rgba(5, 5, 15, 0.96);
}
.engineering-highlights > header { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(18rem, 1.2fr); gap: 1.5rem; align-items: end; padding: 1.15rem; border-bottom: 1px solid rgba(0, 255, 204, 0.22); }
.engineering-highlights > header h2 { margin: 0.2rem 0 0; color: var(--drakima-text); font-family: var(--drakima-mono-font); font-size: 1.4rem; }
.engineering-highlights > header > p { margin: 0; color: var(--drakima-muted); line-height: 1.55; }
.engineering-highlight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.engineering-highlight-card { min-width: 0; padding: 1rem; border-right: 1px solid rgba(154, 143, 202, 0.2); border-bottom: 1px solid rgba(154, 143, 202, 0.2); }
.engineering-highlight-card:nth-child(even) { border-right: 0; }
.engineering-highlight-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.engineering-highlight-meta span { padding: 0.18rem 0.35rem; border: 1px solid rgba(0, 255, 204, 0.28); color: var(--drakima-cyan-soft); font-family: var(--drakima-mono-font); font-size: 0.62rem; text-transform: uppercase; }
.engineering-highlight-card h3 { margin: 0.6rem 0 0.2rem; color: var(--drakima-text); font-family: var(--drakima-mono-font); font-size: 1rem; }
.engineering-highlight-origin { margin: 0 0 0.7rem; color: var(--drakima-muted); font-size: 0.75rem; }
.engineering-highlight-origin a { color: var(--drakima-cyan); }
.engineering-highlight-card pre { max-height: 19rem; margin: 0; padding: 0.85rem; overflow: auto; border: 1px solid rgba(255, 0, 255, 0.24); color: #dce6ff; background: #03040a; font-size: 0.78rem; line-height: 1.5; tab-size: 4; }
.engineering-highlight-card .engineering-code-explanation { padding: 0.7rem 0 0; border-top: 0; font-size: 0.86rem; line-height: 1.55; }

.engineering-catalog {
    border: 1px solid rgba(154, 143, 202, 0.26);
    background: rgba(5, 5, 15, 0.95);
}

.engineering-catalog-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.15rem;
    border-bottom: 1px solid rgba(154, 143, 202, 0.26);
}

.engineering-catalog-toolbar h2 { margin: 0.2rem 0 0; font-size: 1.4rem; }
.engineering-catalog-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.65rem; }
.engineering-catalog-controls label { display: grid; gap: 0.25rem; color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.68rem; text-transform: uppercase; }
.engineering-catalog-controls input,
.engineering-catalog-controls select { min-width: 15rem; padding: 0.55rem 0.65rem; border: 1px solid rgba(0, 255, 204, 0.35); color: var(--drakima-text); background: #070712; }

.engineering-system-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.engineering-system-card { display: grid; grid-template-columns: 11rem minmax(0, 1fr); min-height: 15rem; border-right: 1px solid rgba(154, 143, 202, 0.2); border-bottom: 1px solid rgba(154, 143, 202, 0.2); background: rgba(8, 8, 21, 0.86); }
.engineering-system-card:nth-child(even) { border-right: 0; }
.engineering-system-card.is-featured { box-shadow: inset 3px 0 var(--drakima-cyan); }
.engineering-system-card[hidden] { display: none; }
.engineering-system-visual { display: block; overflow: hidden; border-right: 1px solid rgba(0, 255, 204, 0.2); background: #05050d; }
.engineering-system-visual img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.8) contrast(1.08); transition: filter 180ms ease; }
.engineering-system-visual:hover img { filter: saturate(1.05) contrast(1.08); }
.engineering-system-copy { display: flex; min-width: 0; flex-direction: column; padding: 1rem; }
.engineering-system-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.engineering-system-meta span { padding: 0.18rem 0.35rem; border: 1px solid rgba(0, 255, 204, 0.25); color: var(--drakima-cyan-soft); background: rgba(0, 255, 204, 0.04); font-family: var(--drakima-mono-font); font-size: 0.62rem; text-transform: uppercase; }
.engineering-system-copy h3 { margin: 0.65rem 0 0.45rem; font-family: var(--drakima-mono-font); font-size: 1.12rem; }
.engineering-system-copy h3 a { color: var(--drakima-text); text-decoration: none; }
.engineering-system-copy h3 a:hover { color: var(--drakima-cyan); }
.engineering-system-copy > p { margin: 0; color: var(--drakima-muted); line-height: 1.55; }
.engineering-system-copy footer { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: auto; padding-top: 0.8rem; color: var(--drakima-muted); font-size: 0.72rem; }
.engineering-system-copy h3 a,
.engineering-system-copy footer a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
}
.engineering-system-copy footer a { margin-left: auto; color: var(--drakima-cyan); }
.engineering-empty-state,
.engineering-filter-empty { margin: 0; padding: 2rem; color: var(--drakima-muted); text-align: center; }
.engineering-empty-state strong { display: block; margin-bottom: 0.45rem; color: var(--drakima-text); }

.engineering-dossier-header { position: relative; min-height: 27rem; display: flex; align-items: end; overflow: hidden; border-bottom: 1px solid var(--drakima-line-cyan); background: #080713; }
.engineering-dossier-header > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.75) contrast(1.05); }
.engineering-dossier-header-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 4, 13, 0.98) 0%, rgba(4, 4, 13, 0.84) 48%, rgba(4, 4, 13, 0.35) 100%), linear-gradient(0deg, rgba(4, 4, 13, 0.95), transparent 60%); }
.engineering-dossier-header-content { position: relative; z-index: 1; padding-top: 4rem; padding-bottom: 2.5rem; }
.engineering-dossier-header-content > p:not(.drakima-eyebrow) { max-width: 52rem; color: var(--drakima-muted); font-size: 1.05rem; line-height: 1.65; }
.engineering-dossier-header h1 { max-width: 62rem; margin: 0.4rem 0 0.8rem; font-size: clamp(2rem, 4.6vw, 4rem); }
.engineering-back-link { display: inline-block; margin-bottom: 1.5rem; color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.75rem; text-transform: uppercase; }
.engineering-dossier-workspace { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.25rem; padding-top: 1.25rem; padding-bottom: 4rem; }
.engineering-dossier-rail { position: sticky; top: 5rem; align-self: start; display: grid; border: 1px solid rgba(154, 143, 202, 0.26); background: rgba(7, 7, 18, 0.95); }
.engineering-dossier-rail > strong { padding: 0.8rem; border-bottom: 1px solid rgba(154, 143, 202, 0.26); color: var(--drakima-text); font-family: var(--drakima-mono-font); }
.engineering-dossier-rail > a { padding: 0.6rem 0.8rem; border-bottom: 1px solid rgba(154, 143, 202, 0.13); color: var(--drakima-cyan-soft); text-decoration: none; }
.engineering-dossier-rail > a:hover { color: #05070d; background: var(--drakima-cyan); }
.engineering-repository-path { display: grid; gap: 0.35rem; padding: 0.8rem; color: var(--drakima-muted); font-size: 0.7rem; }
.engineering-repository-path code { overflow-wrap: anywhere; color: var(--drakima-cyan); }
.engineering-dossier-content { display: grid; gap: 1rem; min-width: 0; }
.engineering-acceptance-toolbar { scroll-margin-top: 5.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1rem 1.25rem; border: 1px solid rgba(0, 255, 204, 0.42); border-left: 3px solid var(--drakima-cyan); background: rgba(4, 9, 18, 0.97); }
.engineering-acceptance-progress-copy { flex: 1 1 auto; min-width: 0; }
.engineering-acceptance-progress-copy h2 { margin: 0.25rem 0 0.35rem; color: var(--drakima-text); font-family: var(--drakima-mono-font); font-size: 1.12rem; }
.engineering-acceptance-progress-copy > p:not(.drakima-eyebrow) { margin: 0 0 0.55rem; color: var(--drakima-text); }
.engineering-acceptance-progress-copy progress { display: block; width: min(100%, 42rem); height: 0.7rem; overflow: hidden; border: 1px solid rgba(0, 255, 204, 0.34); border-radius: 0; color: var(--drakima-cyan); background: #03040a; }
.engineering-acceptance-progress-copy progress::-webkit-progress-bar { background: #03040a; }
.engineering-acceptance-progress-copy progress::-webkit-progress-value { background: var(--drakima-cyan); }
.engineering-acceptance-progress-copy progress::-moz-progress-bar { background: var(--drakima-cyan); }
.engineering-acceptance-progress-copy small { display: block; margin-top: 0.45rem; color: var(--drakima-muted); }
.engineering-acceptance-actions { display: flex; flex: 0 0 auto; gap: 0.55rem; }
.engineering-acceptance-actions button { min-height: 2.5rem; padding: 0.55rem 0.75rem; border: 1px solid var(--drakima-cyan); color: var(--drakima-cyan); background: transparent; font-family: var(--drakima-mono-font); font-size: 0.68rem; text-transform: uppercase; }
.engineering-acceptance-actions button:hover,
.engineering-acceptance-actions button:focus-visible { color: #05070d; background: var(--drakima-cyan); }
.engineering-dossier-section { scroll-margin-top: 5.5rem; padding: clamp(1rem, 2.5vw, 2rem); border: 1px solid rgba(154, 143, 202, 0.26); background: rgba(7, 7, 18, 0.96); }
.engineering-dossier-section h2 { margin: 0.3rem 0 1rem; font-size: 1.45rem; }
.engineering-markdown { color: var(--drakima-muted); line-height: 1.72; }
.engineering-markdown h3 { margin-top: 1.35rem; font-size: 1.05rem; }
.engineering-markdown li { margin-bottom: 0.35rem; }
.engineering-markdown a { color: var(--drakima-cyan); }
.engineering-markdown[data-acceptance-checklist="true"] h2 { margin: 2rem -0.3rem 0.8rem; padding: 0.65rem 0.3rem; border-top: 1px solid rgba(255, 0, 255, 0.28); border-bottom: 1px solid rgba(154, 143, 202, 0.18); color: var(--drakima-cyan-soft); font-size: 1.05rem; }
.engineering-markdown[data-acceptance-checklist="true"] h2:first-child { margin-top: 0.5rem; }
.engineering-markdown[data-acceptance-checklist="true"] ul { padding-left: 0; list-style: none; }
.engineering-markdown[data-acceptance-checklist="true"] li:has(> input[type="checkbox"]) { position: relative; margin: 0; padding: 0.5rem 0.5rem 0.5rem 2rem; border-bottom: 1px solid rgba(154, 143, 202, 0.12); transition: color 140ms ease, background-color 140ms ease; }
.engineering-markdown[data-acceptance-checklist="true"] li:has(> input[type="checkbox"]):hover { background: rgba(0, 255, 204, 0.04); }
.engineering-markdown[data-acceptance-checklist="true"] input[type="checkbox"] { position: absolute; top: 0.68rem; left: 0.45rem; width: 1rem; height: 1rem; margin: 0; accent-color: var(--drakima-cyan); cursor: pointer; }
.engineering-markdown[data-acceptance-checklist="true"] li.is-acceptance-complete { color: #789b94; background: rgba(0, 255, 204, 0.025); text-decoration: line-through; text-decoration-thickness: 1px; }

.engineering-schematic { margin: 1rem 0 0; padding: 0; border: 1px solid rgba(0, 255, 204, 0.3); background: #050611; }
.engineering-schematic figcaption { display: grid; gap: 0.2rem; padding: 0.8rem 1rem; border-bottom: 1px solid rgba(0, 255, 204, 0.2); }
.engineering-schematic figcaption strong { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); }
.engineering-schematic figcaption span { color: var(--drakima-muted); font-size: 0.85rem; }
.engineering-schematic ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1.5rem; margin: 0; padding: 1rem; list-style: none; }
.engineering-schematic li { position: relative; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: 0.6rem; min-width: 0; }
.engineering-schematic li:not(:last-child)::after { content: ">"; position: absolute; top: 0.4rem; right: -1rem; color: var(--drakima-hot-pink); font-family: var(--drakima-mono-font); }
.engineering-schematic li > span { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--drakima-cyan); color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.68rem; }
.engineering-schematic li strong { color: var(--drakima-text); font-family: var(--drakima-mono-font); font-size: 0.78rem; }
.engineering-schematic li p { margin: 0.25rem 0 0; color: var(--drakima-muted); font-size: 0.78rem; line-height: 1.45; }

.engineering-code-sample { margin-top: 1rem; border: 1px solid rgba(255, 0, 255, 0.34); background: #03040a; }
.engineering-code-sample > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.8rem; border-bottom: 1px solid rgba(255, 0, 255, 0.2); }
.engineering-code-sample header > div { display: flex; align-items: center; gap: 0.7rem; }
.engineering-code-sample header strong { color: var(--drakima-text); font-family: var(--drakima-mono-font); }
.engineering-code-sample header span { color: var(--drakima-cyan); font-size: 0.7rem; text-transform: uppercase; }
.engineering-code-sample button { padding: 0.35rem 0.6rem; border: 1px solid var(--drakima-cyan); color: var(--drakima-cyan); background: transparent; font-family: var(--drakima-mono-font); font-size: 0.68rem; text-transform: uppercase; }
.engineering-code-sample button:hover { color: #05070d; background: var(--drakima-cyan); }
.engineering-code-sample pre { max-height: 36rem; margin: 0; padding: 1rem; overflow: auto; color: #dce6ff; background: #03040a; font-size: 0.82rem; line-height: 1.55; tab-size: 4; }
.engineering-code-explanation { padding: 0.8rem 1rem; border-top: 1px solid rgba(255, 0, 255, 0.2); color: var(--drakima-muted); }
.engineering-code-explanation > :last-child { margin-bottom: 0; }

.engineering-akari-dossier-brief { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: end; overflow: hidden; border: 1px solid rgba(0, 255, 204, 0.4); background: linear-gradient(135deg, rgba(0, 255, 204, 0.06), rgba(255, 0, 255, 0.08)), #080817; }
.engineering-akari-dossier-sprite { height: 17rem; overflow: hidden; }
.engineering-akari-dossier-sprite img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.engineering-akari-dossier-brief > div:last-child { padding: 1.25rem; }
.engineering-akari-dossier-brief .drakima-markdown { color: var(--drakima-muted); line-height: 1.65; }

@media (max-width: 991.98px) {
    .engineering-hub-header-inner { grid-template-columns: 1fr; align-items: stretch; }
    .engineering-hub-stats { width: 100%; }
    .engineering-system-grid { grid-template-columns: 1fr; }
    .engineering-system-card { border-right: 0; }
    .engineering-highlight-grid { grid-template-columns: 1fr; }
    .engineering-highlight-card { border-right: 0; }
    .engineering-dossier-workspace { grid-template-columns: 1fr; }
    .engineering-dossier-rail { position: static; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
    .engineering-dossier-rail > strong { grid-column: 1 / -1; }
    .engineering-repository-path { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
    .engineering-hub-header-inner { padding-top: 2rem; }
    .engineering-catalog-toolbar { align-items: stretch; flex-direction: column; }
    .engineering-highlights > header { grid-template-columns: 1fr; }
    .engineering-catalog-controls { justify-content: stretch; }
    .engineering-catalog-controls label { flex: 1 1 100%; }
    .engineering-catalog-controls input,
    .engineering-catalog-controls select { width: 100%; min-width: 0; }
    .engineering-system-card { grid-template-columns: 8rem minmax(0, 1fr); }
    .engineering-dossier-header { min-height: 24rem; }
    .engineering-dossier-header-shade { background: linear-gradient(0deg, rgba(4, 4, 13, 0.98) 0%, rgba(4, 4, 13, 0.72) 75%, rgba(4, 4, 13, 0.45) 100%); }
    .engineering-acceptance-toolbar { align-items: stretch; flex-direction: column; }
    .engineering-acceptance-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .engineering-schematic ol { grid-template-columns: 1fr; }
    .engineering-schematic li:not(:last-child)::after { content: "v"; top: auto; right: auto; bottom: -1.2rem; left: 0.75rem; }
}

@media (max-width: 575.98px) {
    .engineering-hub-stats { grid-template-columns: 1fr; }
    .engineering-hub-stats div { border-right: 0; border-bottom: 1px solid rgba(0, 255, 204, 0.18); }
    .engineering-akari-brief { grid-template-columns: 7rem minmax(0, 1fr); align-items: stretch; }
    .engineering-akari-portrait { height: auto; }
    .engineering-system-card { grid-template-columns: 1fr; }
    .engineering-system-visual { aspect-ratio: 16 / 7; border-right: 0; border-bottom: 1px solid rgba(0, 255, 204, 0.2); }
    .engineering-system-copy footer a { flex-basis: 100%; margin-left: 0; }
    .engineering-akari-dossier-brief { grid-template-columns: 7rem minmax(0, 1fr); }
    .engineering-akari-dossier-sprite { height: auto; min-height: 15rem; }
}

@media print {
    .engineering-dossier-page { color: #111; background: #fff; }
    .engineering-dossier-header { min-height: 0; color: #111; background: #fff; }
    .engineering-dossier-header > img,
    .engineering-dossier-header-shade,
    .engineering-dossier-rail,
    .engineering-acceptance-actions,
    .engineering-akari-dossier-brief,
    .drakima-site-header,
    .drakima-site-footer,
    .lorekeeper-companion-shell { display: none !important; }
    .engineering-dossier-header-content { padding: 1rem 0; }
    .engineering-dossier-header h1,
    .engineering-dossier-header-content > p:not(.drakima-eyebrow),
    .engineering-dossier-section h2,
    .engineering-markdown,
    .engineering-acceptance-progress-copy h2,
    .engineering-acceptance-progress-copy > p:not(.drakima-eyebrow) { color: #111; }
    .engineering-dossier-workspace { display: block; max-width: none; padding: 0; }
    .engineering-dossier-content { display: block; }
    .engineering-acceptance-toolbar,
    .engineering-dossier-section { margin: 0 0 1rem; padding: 0.75rem; border: 1px solid #777; background: #fff; break-inside: avoid-page; }
    .engineering-markdown[data-acceptance-checklist="true"] h2 { color: #111; border-color: #999; break-after: avoid-page; }
    .engineering-markdown[data-acceptance-checklist="true"] li:has(> input[type="checkbox"]) { border-color: #ddd; break-inside: avoid; }
}

/* Engineering CMS */
.engineering-cms-page { min-height: calc(100vh - 8rem); }
.akari-knowledge-page { min-height: calc(100vh - 8rem); }
.akari-knowledge-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0.8rem; border: 1px solid rgba(0, 255, 204, 0.32); background: rgba(5, 6, 16, 0.94); }
.akari-knowledge-metrics > div { display: grid; gap: 0.2rem; padding: 0.75rem 0.9rem; border-right: 1px solid rgba(0, 255, 204, 0.18); }
.akari-knowledge-metrics > div:last-child { border-right: 0; }
.akari-knowledge-metrics strong { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); }
.akari-knowledge-metrics span { color: var(--drakima-muted); font-size: 0.7rem; text-transform: uppercase; }
.akari-knowledge-alert { margin-bottom: 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid rgba(255, 193, 77, 0.55); background: rgba(48, 31, 4, 0.42); color: #ffe0a1; }
.akari-knowledge-preview { margin-bottom: 0.9rem; padding: 0.9rem; border: 1px solid rgba(217, 48, 159, 0.4); background: rgba(5, 5, 15, 0.95); }
.akari-knowledge-preview > header h2 { margin: 0 0 0.7rem; color: var(--drakima-text); font-size: 1.15rem; }
.akari-knowledge-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem; }
.akari-knowledge-search input { min-width: 0; padding: 0.65rem; border: 1px solid rgba(0, 255, 204, 0.38); background: #070817; color: var(--drakima-text); }
.akari-knowledge-diagnostic-line { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.7rem; color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.7rem; }
.akari-knowledge-results { display: grid; gap: 0.45rem; margin-top: 0.65rem; }
.akari-knowledge-results article { display: grid; gap: 0.25rem; padding: 0.6rem 0.7rem; border-left: 3px solid var(--drakima-hot-pink); background: rgba(13, 15, 38, 0.88); }
.akari-knowledge-results article > div { display: flex; gap: 0.6rem; align-items: baseline; }
.akari-knowledge-results article span { color: var(--drakima-hot-pink); font-family: var(--drakima-mono-font); font-size: 0.65rem; text-transform: uppercase; }
.akari-knowledge-results article p { margin: 0; color: var(--drakima-text); }
.akari-knowledge-results article small { color: var(--drakima-muted); }
.akari-knowledge-workspace { display: grid; grid-template-columns: 19rem minmax(0, 1fr); min-height: 40rem; border: 1px solid rgba(154, 143, 202, 0.32); background: rgba(5, 5, 15, 0.95); }
.akari-knowledge-library { border-right: 1px solid rgba(154, 143, 202, 0.28); }
.akari-knowledge-library > header { display: flex; justify-content: space-between; padding: 0.75rem; border-bottom: 1px solid rgba(154, 143, 202, 0.25); }
.akari-knowledge-library > header a,
.engineering-cms-library > header a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding-inline: .55rem;
    color: var(--drakima-cyan);
}
.akari-knowledge-library > a { display: grid; gap: 0.2rem; padding: 0.7rem; border-bottom: 1px solid rgba(154, 143, 202, 0.15); color: var(--drakima-text); text-decoration: none; }
.akari-knowledge-library > a:hover, .akari-knowledge-library > a.is-active { background: rgba(0, 255, 204, 0.08); box-shadow: inset 3px 0 var(--drakima-cyan); }
.akari-knowledge-library > a span { color: var(--drakima-hot-pink); font-family: var(--drakima-mono-font); font-size: 0.63rem; text-transform: uppercase; }
.akari-knowledge-library > a small, .akari-knowledge-library > p { color: var(--drakima-muted); }
.akari-knowledge-library > p { padding: 0.75rem; }
.akari-knowledge-editor { padding: 0.9rem; }
.akari-knowledge-editor form > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.akari-knowledge-editor h2 { margin: 0; color: var(--drakima-text); font-size: 1.2rem; }
.akari-knowledge-editor fieldset { margin: 0 0 0.8rem; padding: 0.8rem; border: 1px solid rgba(154, 143, 202, 0.25); }
.akari-knowledge-editor legend { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.75rem; text-transform: uppercase; }
.akari-knowledge-editor label { display: grid; gap: 0.25rem; margin-bottom: 0.55rem; color: var(--drakima-muted); font-size: 0.72rem; text-transform: uppercase; }
.akari-knowledge-editor input, .akari-knowledge-editor select, .akari-knowledge-editor textarea { width: 100%; padding: 0.48rem; border: 1px solid rgba(154, 143, 202, 0.4); background: #090a19; color: var(--drakima-text); text-transform: none; }
.akari-knowledge-fields { display: grid; gap: 0.6rem; }
.akari-knowledge-fields.three-column { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.akari-knowledge-checks { display: flex; flex-wrap: wrap; gap: 1rem; }
.akari-knowledge-checks label { display: flex; align-items: center; gap: 0.35rem; }
.akari-knowledge-checks input { width: auto; }
@media (max-width: 900px) {
    .akari-knowledge-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .akari-knowledge-workspace { grid-template-columns: 1fr; }
    .akari-knowledge-library { border-right: 0; border-bottom: 1px solid rgba(154, 143, 202, 0.28); }
    .akari-knowledge-fields.three-column { grid-template-columns: 1fr; }
}
.engineering-cms-notice { margin-bottom: 0.8rem; padding: 0.7rem 0.9rem; border: 1px solid; background: rgba(7, 7, 18, 0.94); }
.engineering-cms-notice.is-success { border-color: rgba(0, 255, 204, 0.55); color: var(--drakima-cyan); }
.engineering-cms-notice.is-error { border-color: rgba(255, 77, 109, 0.7); color: #ff9aae; }
.engineering-cms-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0.8rem; border: 1px solid rgba(0, 255, 204, 0.32); background: rgba(5, 6, 16, 0.94); }
.engineering-cms-summary > div { display: grid; gap: 0.2rem; padding: 0.7rem 0.9rem; border-right: 1px solid rgba(0, 255, 204, 0.18); }
.engineering-cms-summary > div:last-child { border-right: 0; }
.engineering-cms-summary strong { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); }
.engineering-cms-summary span { color: var(--drakima-muted); font-size: 0.72rem; text-transform: uppercase; }
.engineering-cms-workspace { display: grid; grid-template-columns: 18rem minmax(0, 1fr); min-height: 42rem; border: 1px solid rgba(154, 143, 202, 0.32); background: rgba(5, 5, 15, 0.95); }
.engineering-cms-library { min-width: 0; border-right: 1px solid rgba(154, 143, 202, 0.28); background: rgba(8, 8, 20, 0.9); }
.engineering-cms-library > header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem; border-bottom: 1px solid rgba(154, 143, 202, 0.25); }
.engineering-cms-library > header strong { color: var(--drakima-text); font-family: var(--drakima-mono-font); font-size: 0.85rem; }
.engineering-cms-library-item { display: grid; gap: 0.22rem; padding: 0.75rem; border-bottom: 1px solid rgba(154, 143, 202, 0.15); color: var(--drakima-text); text-decoration: none; }
.engineering-cms-library-item:hover,
.engineering-cms-library-item.is-active { color: var(--drakima-text); background: rgba(0, 255, 204, 0.08); box-shadow: inset 3px 0 var(--drakima-cyan); }
.engineering-cms-library-item > span { color: var(--drakima-hot-pink); font-family: var(--drakima-mono-font); font-size: 0.62rem; text-transform: uppercase; }
.engineering-cms-library-item > strong { overflow: hidden; font-family: var(--drakima-mono-font); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.engineering-cms-library-item > small { color: var(--drakima-muted); font-size: 0.68rem; }
.engineering-cms-library-empty { padding: 1rem; color: var(--drakima-muted); }
.engineering-cms-editor { min-width: 0; }
.engineering-cms-document-form { padding: 1rem; }
.engineering-cms-editor-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.engineering-cms-editor-heading h2,
.engineering-cms-child-section h2 { margin: 0.2rem 0 0; color: var(--drakima-text); font-family: var(--drakima-mono-font); font-size: 1.25rem; }
.engineering-cms-fieldset { margin: 0 0 1rem; padding: 0.85rem; border: 1px solid rgba(154, 143, 202, 0.28); }
.engineering-cms-fieldset legend { width: auto; float: none; margin: 0; padding: 0 0.4rem; color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.74rem; text-transform: uppercase; }
.engineering-cms-fields { display: grid; gap: 0.65rem; }
.engineering-cms-fields.three-column { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.engineering-cms-fieldset label,
.engineering-cms-child-editor label { display: grid; gap: 0.25rem; margin-bottom: 0.65rem; color: var(--drakima-cyan-soft); font-size: 0.78rem; }
.engineering-cms-fieldset input,
.engineering-cms-fieldset select,
.engineering-cms-fieldset textarea,
.engineering-cms-child-editor input,
.engineering-cms-child-editor textarea { width: 100%; min-width: 0; padding: 0.55rem; border: 1px solid rgba(0, 255, 204, 0.3); color: var(--drakima-text); background: #05050e; }
.engineering-cms-fieldset textarea,
.engineering-cms-child-editor textarea { resize: vertical; line-height: 1.5; }
.engineering-cms-markdown-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; }
.engineering-cms-markdown-grid textarea { font-family: "Consolas", "Courier New", monospace; font-size: 0.78rem; }
.engineering-cms-summary-field { margin-top: 0.65rem; }
.engineering-cms-checks { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.engineering-cms-checks label { display: flex; align-items: center; gap: 0.45rem; margin: 0; }
.engineering-cms-checks input { width: auto; }
.engineering-cms-fieldset small { min-height: 1em; color: #ff8aa0; }
.engineering-cms-releasebar { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1rem; border-top: 1px solid rgba(154, 143, 202, 0.25); border-bottom: 1px solid rgba(154, 143, 202, 0.25); background: rgba(0, 255, 204, 0.035); }
.engineering-cms-releasebar > a { display: inline-flex; min-height: 44px; align-items: center; color: var(--drakima-cyan); }
.engineering-cms-releasebar form:last-child { margin-left: auto; }
.engineering-cms-delete { border-color: rgba(255, 77, 109, 0.65); color: #ff8aa0; }
.engineering-cms-child-section { padding: 1rem; border-bottom: 1px solid rgba(154, 143, 202, 0.25); }
.engineering-cms-child-section > header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.engineering-cms-child-section > header > span { max-width: 30rem; color: var(--drakima-muted); font-size: 0.75rem; text-align: right; }
.engineering-cms-child-editor { margin-bottom: 0.55rem; border: 1px solid rgba(154, 143, 202, 0.28); background: rgba(8, 8, 20, 0.72); }
.engineering-cms-child-editor.is-new { border-style: dashed; border-color: rgba(0, 255, 204, 0.4); }
.engineering-cms-child-editor > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.7rem 0.8rem; cursor: pointer; }
.engineering-cms-child-editor > summary strong { color: var(--drakima-text); font-family: var(--drakima-mono-font); font-size: 0.78rem; }
.engineering-cms-child-editor > summary span { color: var(--drakima-muted); font-size: 0.7rem; }
.engineering-cms-child-editor > form { padding: 0.8rem; border-top: 1px solid rgba(154, 143, 202, 0.2); }
.engineering-cms-child-editor > form + form { padding-top: 0; border-top: 0; }
.engineering-cms-code-input { font-family: "Consolas", "Courier New", monospace; font-size: 0.78rem; tab-size: 4; }
.engineering-cms-text-delete { min-height: 44px; padding: .55rem .35rem; border: 0; color: #ff8aa0; background: transparent; font-size: 0.72rem; text-decoration: underline; }
.engineering-cms-child-placeholder { margin: 1rem; padding: 1rem; border: 1px dashed rgba(154, 143, 202, 0.3); color: var(--drakima-muted); text-align: center; }

@media (max-width: 1199.98px) {
    .engineering-cms-markdown-grid { grid-template-columns: 1fr; }
}

@media (max-width: 991.98px) {
    .engineering-cms-workspace { grid-template-columns: 1fr; }
    .engineering-cms-library { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgba(154, 143, 202, 0.28); }
    .engineering-cms-library > header { min-width: 9rem; align-items: flex-start; flex-direction: column; }
    .engineering-cms-library-item { min-width: 15rem; border-right: 1px solid rgba(154, 143, 202, 0.15); border-bottom: 0; }
}

@media (max-width: 767.98px) {
    .engineering-cms-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .engineering-cms-summary > div { border-bottom: 1px solid rgba(0, 255, 204, 0.18); }
    .engineering-cms-fields.three-column { grid-template-columns: 1fr; }
    .engineering-cms-editor-heading,
    .engineering-cms-child-section > header { align-items: stretch; flex-direction: column; }
    .engineering-cms-child-section > header > span { text-align: left; }
    .engineering-cms-releasebar { align-items: stretch; flex-direction: column; }
    .engineering-cms-releasebar form:last-child { margin-left: 0; }
}

/* Adult access and legal foundation */
.adult-access-gate {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    align-items: end;
    padding: 1rem;
    background: rgba(1, 1, 6, 0.78);
    backdrop-filter: blur(8px);
}

.adult-access-gate-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    width: min(100%, 1180px);
    margin-inline: auto;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--drakima-pink);
    border-left: 4px solid #ff4d6d;
    border-radius: 6px;
    color: var(--drakima-text);
    background: rgba(3, 4, 11, 0.98);
    box-shadow: 0 0 28px rgba(255, 0, 255, 0.38);
}

.adult-access-gate-panel h2 {
    margin: 0.15rem 0 0.45rem;
    color: var(--drakima-text);
    font-family: var(--drakima-mono-font);
    font-size: clamp(1.35rem, 3vw, 2rem);
}

.adult-access-gate-panel p { margin: 0.25rem 0; }
.adult-access-gate-links { color: var(--drakima-muted); }
.adult-access-gate a,
.drakima-legal-document a,
.adult-access-card a { color: var(--drakima-cyan); }
.adult-access-gate form { min-width: 12rem; }

.adult-access-page { min-height: calc(100vh - 9rem); }
.adult-access-card {
    width: min(100%, 760px);
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 204, 0.48);
    border-radius: 6px;
    color: var(--drakima-text);
    background: rgba(5, 6, 16, 0.94);
    box-shadow: var(--drakima-shadow-cyan);
}

.adult-access-card > header {
    padding: clamp(1.25rem, 4vw, 2.25rem);
    border-bottom: 1px solid rgba(255, 0, 255, 0.34);
    background: linear-gradient(110deg, rgba(255, 0, 255, 0.11), rgba(0, 255, 204, 0.05));
}

.adult-access-card h1,
.drakima-legal-heading h1 {
    margin: 0.35rem 0 0.6rem;
    color: var(--drakima-text);
    font-family: var(--drakima-mono-font);
}

.adult-access-card header > p:last-child,
.drakima-legal-heading > p:last-child { margin-bottom: 0; color: var(--drakima-muted); line-height: 1.7; }
.adult-access-form { display: grid; gap: 0.55rem; padding: clamp(1.25rem, 4vw, 2.25rem); }
.adult-access-form label { margin-top: 0.45rem; color: var(--drakima-cyan-soft); font-weight: 600; }
.adult-access-form small { color: var(--drakima-muted); }
.adult-access-form .drakima-button { margin-top: 0.8rem; }
.adult-access-check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; line-height: 1.55; }
.adult-access-check input { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--drakima-cyan); }
.adult-access-account-link { margin: 0.5rem 0 0; text-align: center; }
.identity-date-picker {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.6rem;
}

.identity-date-picker input[type="text"] {
    min-width: 0;
}

.identity-native-date-picker {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
    color-scheme: dark;
}

.identity-date-picker-button {
    min-width: 8rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--drakima-cyan);
    border-radius: 4px;
    color: var(--drakima-cyan);
    background: rgba(0, 255, 204, 0.07);
    font-family: var(--drakima-mono-font);
}

.identity-date-picker-button:hover,
.identity-date-picker-button:focus-visible {
    color: #02050a;
    background: var(--drakima-cyan);
}

.identity-registration-mode { color: var(--drakima-cyan-soft) !important; }

.identity-login-form { padding-bottom: 1.5rem; }
.identity-remember-check { margin: 0.65rem 0 0.15rem; }
.identity-account-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 1.25rem;
    margin-top: 0.45rem;
    font-size: 0.92rem;
}

.identity-external-logins {
    padding: 0 2.25rem 2.25rem;
    text-align: center;
}

.identity-external-logins h2 {
    margin-bottom: 1rem;
    color: var(--drakima-cyan-soft);
    font-family: var(--drakima-mono-font);
    font-size: 1rem;
}

.identity-external-logins form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
}

/* Member identity and account hub */
.member-profile-body main > div > .row { margin-inline: 0; }
.identity-manage-shell {
    display: grid;
    grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr);
    gap: 1rem;
    width: min(100%, 100rem);
    margin-inline: auto;
    padding: 1rem;
}
.identity-manage-navigation {
    position: sticky;
    top: 5.25rem;
    padding: 1rem;
    border: 1px solid rgba(0, 255, 204, 0.35);
    border-radius: 5px;
    color: var(--drakima-text);
    background: rgba(5, 6, 16, 0.95);
}
.identity-manage-navigation h2 { margin: 0.35rem 0 0.55rem; color: var(--drakima-cyan-soft); font-family: var(--drakima-mono-font); font-size: 1.1rem; }
.identity-manage-navigation > p:last-of-type { margin: 0 0 1rem; color: var(--drakima-muted); font-size: 0.82rem; line-height: 1.45; }
.identity-manage-navigation .nav { gap: 0.35rem; }
.identity-manage-navigation .nav-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    border: 1px solid rgba(0, 255, 204, 0.18);
    border-radius: 3px;
    color: var(--drakima-cyan-soft);
    font-family: var(--drakima-mono-font);
    font-size: 0.78rem;
}
.identity-manage-navigation .nav-link:hover,
.identity-manage-navigation .nav-link:focus-visible { border-color: var(--drakima-cyan); background: rgba(0, 255, 204, 0.08); }
.identity-manage-navigation .nav-link.active { border-color: #ff4fb6; color: #fff; background: rgba(255, 0, 255, 0.2); }
.identity-manage-content { min-width: 0; }
.member-profile-page { min-height: calc(100vh - 9rem); }
.member-profile-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.25rem;
}
.member-profile-heading h1 { margin: 0.3rem 0 0.5rem; color: var(--drakima-text); font-family: var(--drakima-mono-font); }
.member-profile-heading p:last-child { max-width: 50rem; margin: 0; color: var(--drakima-muted); line-height: 1.65; }
.member-profile-status {
    margin-bottom: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(0, 255, 204, 0.55);
    border-left: 4px solid var(--drakima-cyan);
    color: var(--drakima-cyan-soft);
    background: rgba(0, 255, 204, 0.08);
}
.member-profile-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(19rem, 0.85fr); gap: 1rem; align-items: start; }
.member-profile-sidebar { display: grid; gap: 1rem; }
.member-profile-card {
    overflow: hidden;
    border: 1px solid rgba(0, 255, 204, 0.35);
    border-radius: 5px;
    color: var(--drakima-text);
    background: rgba(5, 6, 16, 0.95);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}
.member-profile-card > header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 0, 255, 0.32);
    background: linear-gradient(105deg, rgba(255, 0, 255, 0.11), rgba(0, 255, 204, 0.05));
}
.member-profile-card > header > div:not(.member-avatar) { display: grid; gap: 0.18rem; min-width: 0; }
.member-profile-card > header span { color: #ff8ed4; font: 0.65rem/1.2 var(--drakima-mono-font); text-transform: uppercase; }
.member-profile-card > header strong { overflow-wrap: anywhere; color: var(--drakima-cyan-soft); font-family: var(--drakima-mono-font); }
.member-profile-card > header small { overflow-wrap: anywhere; color: var(--drakima-muted); }
.member-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid var(--drakima-cyan);
    border-radius: 50%;
    color: var(--drakima-cyan);
    background: rgba(0, 255, 204, 0.08);
    font-family: var(--drakima-mono-font);
}
.member-avatar-large { width: 4.25rem; height: 4.25rem; flex: 0 0 4.25rem; }
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.member-profile-form { display: grid; gap: 0.5rem; padding: 1rem; }
.member-profile-form > label:not(.member-profile-check) { margin-top: 0.5rem; color: var(--drakima-cyan-soft); font-weight: 600; }
.member-profile-form > small { color: var(--drakima-muted); line-height: 1.45; }
.member-profile-form .drakima-button { width: max-content; margin-top: 0.75rem; }
.member-profile-check { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.45rem; color: var(--drakima-text); }
.member-profile-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--drakima-cyan); }
.member-offering-list { display: grid; }
.member-offering-list a {
    display: grid;
    gap: 0.2rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(154, 143, 202, 0.16);
    color: var(--drakima-text);
    text-decoration: none;
}
.member-offering-list a:last-child { border-bottom: 0; }
.member-offering-list a:hover,
.member-offering-list a:focus-visible { background: rgba(0, 255, 204, 0.08); }
.member-offering-list strong { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.84rem; }
.member-offering-list small { color: var(--drakima-muted); line-height: 1.45; }
.member-account-links { display: grid; gap: 0.45rem; padding: 1rem; }
.member-account-links a { display: flex; min-height: 44px; align-items: center; padding-inline: .55rem; color: var(--drakima-cyan); }
.member-data-page { min-height: calc(100vh - 9rem); }
.member-data-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.member-data-grid article {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem;
    border: 1px solid rgba(0, 255, 204, 0.3);
    border-radius: 4px;
    background: rgba(5, 6, 16, 0.94);
}
.member-data-grid strong { color: var(--drakima-cyan); font: 1.35rem/1.1 var(--drakima-mono-font); }
.member-data-grid span { color: var(--drakima-muted); font-size: 0.78rem; }
.member-data-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.member-data-actions > article,
.member-delete-card { padding: clamp(1rem, 2.5vw, 1.5rem); }
.member-data-actions h2,
.member-delete-card h2 { color: var(--drakima-cyan-soft); font-family: var(--drakima-mono-font); }
.member-data-actions p,
.member-data-actions li,
.member-delete-card p { color: var(--drakima-muted); line-height: 1.6; }
.member-data-actions ul { display: grid; gap: 0.5rem; padding-left: 1.25rem; }
.member-data-actions form { margin-top: 1rem; }
.member-data-notice {
    margin-top: 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 195, 92, 0.65);
    border-left-width: 4px;
    color: #ffd98c;
    background: rgba(255, 195, 92, 0.08);
    line-height: 1.5;
}
.member-data-delete-link,
.member-data-delete-button {
    border-color: #ff6a8f;
    color: #fff;
    background: rgba(146, 16, 57, 0.34);
}
.member-data-delete-link { display: inline-flex; margin-top: 0.4rem; }
.member-delete-container { max-width: 58rem; }
.member-delete-card { border-color: rgba(255, 106, 143, 0.55); }
.member-delete-form { display: grid; gap: 0.55rem; margin-top: 1.25rem; }
.member-delete-form label { margin-top: 0.35rem; color: var(--drakima-cyan-soft); }
.member-delete-form .drakima-button { width: max-content; margin-top: 0.75rem; }

@media (max-width: 899.98px) {
    .identity-manage-shell { grid-template-columns: 1fr; }
    .identity-manage-navigation { position: static; }
    .identity-manage-navigation .nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .member-profile-layout { grid-template-columns: 1fr; }
    .member-data-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .member-data-actions { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
    .identity-manage-shell { padding-inline: 0; }
    .identity-manage-navigation { margin-inline: 0.75rem; }
    .identity-manage-navigation .nav { grid-template-columns: 1fr; }
    .member-profile-heading { align-items: stretch; flex-direction: column; gap: 1rem; }
    .member-profile-heading .drakima-button { width: 100%; }
    .member-data-grid { grid-template-columns: 1fr; }
    .member-delete-form .drakima-button { width: 100%; }
}
.adult-access-status { padding: 2rem; }
.adult-access-status strong { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); }
.adult-access-status p { color: var(--drakima-muted); }

.lorekeeper-page {
    min-height: calc(100vh - 5rem);
    padding: 1rem;
}

.lorekeeper-workspace {
    position: relative;
    height: max(36rem, calc(100svh - 7rem));
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 204, 0.45);
    background: #070914;
}

.lorekeeper-sources {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: min(23rem, calc(100% - 3rem));
    min-width: 0;
    border-right: 1px solid rgba(0, 255, 204, 0.26);
    background: rgba(9, 11, 23, 0.985);
    box-shadow: 1.5rem 0 3rem rgba(0, 0, 0, 0.58);
    visibility: hidden;
    transform: translateX(calc(-100% - 1rem));
    transition: transform 180ms ease, visibility 180ms ease;
}

.lorekeeper-workspace.is-evidence-open .lorekeeper-sources {
    visibility: visible;
    transform: translateX(0);
}

.lorekeeper-evidence-tab {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 24;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 2.6rem;
    padding: 0.75rem 0.45rem;
    border: 1px solid rgba(0, 255, 204, 0.72);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    background: rgba(4, 8, 19, 0.96);
    color: #d8fff7;
    font: 0.65rem/1 var(--drakima-mono-font);
    text-transform: uppercase;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.46);
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.lorekeeper-evidence-trigger-mobile {
    display: none;
}

.lorekeeper-evidence-tab > span:nth-child(2) {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.lorekeeper-evidence-trigger:hover,
.lorekeeper-evidence-trigger:focus-visible,
.lorekeeper-evidence-trigger.has-new-sources {
    border-color: #ff4fc3;
    color: #fff;
    box-shadow: 0 0 1.2rem rgba(255, 79, 195, 0.42), 0 0.75rem 2rem rgba(0, 0, 0, 0.46);
}

.lorekeeper-evidence-trigger.has-new-sources {
    animation: lorekeeper-source-pulse 1.6s ease-in-out infinite;
}

.lorekeeper-workspace.is-evidence-open .lorekeeper-evidence-trigger {
    opacity: 0;
    pointer-events: none;
}

.lorekeeper-evidence-badge {
    display: grid;
    min-width: 1.25rem;
    min-height: 1.25rem;
    place-items: center;
    border-radius: 999px;
    background: #ff4fc3;
    color: #070914;
    font-weight: 800;
}

.lorekeeper-evidence-badge[hidden] {
    display: none;
}

@keyframes lorekeeper-source-pulse {
    50% {
        box-shadow: 0 0 1.8rem rgba(255, 79, 195, 0.72), 0 0.75rem 2rem rgba(0, 0, 0, 0.46);
    }
}

.lorekeeper-sources > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem;
    border-bottom: 1px solid rgba(0, 255, 204, 0.22);
}

.lorekeeper-sources h2,
.lorekeeper-toolbar h1 {
    margin: 0;
}

.lorekeeper-sources > header > div > p:last-child {
    margin: 0.7rem 0 0;
    color: #aeb6d9;
    font-size: 0.82rem;
    line-height: 1.55;
}

.lorekeeper-drawer-close,
.lorekeeper-tools-panel > header > button {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(0, 255, 204, 0.45);
    border-radius: 3px;
    background: #090d1d;
    color: #d8fff7;
    font-size: 1.25rem;
    cursor: pointer;
}

.lorekeeper-drawer-close:hover,
.lorekeeper-drawer-close:focus-visible,
.lorekeeper-tools-panel > header > button:hover,
.lorekeeper-tools-panel > header > button:focus-visible {
    border-color: #ff4fc3;
    color: #fff;
}

#lorekeeper-source-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.65rem;
}

.lorekeeper-source-item {
    padding: 0.8rem 0.55rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.lorekeeper-source-item span {
    display: block;
    margin-bottom: 0.3rem;
    font-family: var(--drakima-mono-font);
    font-size: 0.7rem;
    color: #ff77c8;
}

.lorekeeper-source-item a {
    color: #00ffcc;
    font-weight: 700;
}

.lorekeeper-source-item p {
    margin: 0.4rem 0 0;
    color: #bec5e7;
    font-size: 0.82rem;
    line-height: 1.5;
}

.lorekeeper-source-actions {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid rgba(0, 255, 204, 0.22);
}

.lorekeeper-scene {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    isolation: isolate;
    background-color: #070914;
}

.akari-office-backdrop {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.lorekeeper-scene::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background:
        linear-gradient(90deg, rgba(3, 5, 12, 0.72) 0%, rgba(3, 5, 12, 0.28) 54%, rgba(3, 5, 12, 0.06) 100%),
        linear-gradient(180deg, rgba(3, 5, 12, 0.54), transparent 26%, transparent 72%, rgba(3, 5, 12, 0.74));
    pointer-events: none;
}

.lorekeeper-scene-body {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-areas: "consultation character";
    grid-template-columns: minmax(31rem, 1fr) minmax(18rem, 34%);
    gap: 1rem;
    min-width: 0;
    min-height: 0;
    padding: 1rem;
}

.lorekeeper-character-stage {
    position: relative;
    grid-area: character;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 204, 0.2);
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 20, 147, 0.09), transparent 46%),
        linear-gradient(180deg, rgba(4, 7, 18, 0.08), rgba(4, 7, 18, 0.58));
}

.lorekeeper-character-stage::after {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    height: 18%;
    content: "";
    background: linear-gradient(transparent, rgba(3, 5, 12, 0.68));
    pointer-events: none;
}

.lorekeeper-scene-sprite {
    position: absolute;
    inset: .5rem auto auto .5rem;
    z-index: 1;
    width: calc(100% - 1rem);
    height: calc(100% - 3rem);
    object-fit: contain;
    object-position: var(--portrait-position, center);
    transform: scale(var(--portrait-scale, 1));
    transform-origin: var(--portrait-position, center);
    filter: drop-shadow(0 0 1rem rgba(0, 255, 204, 0.28)) drop-shadow(0 1rem 2rem rgba(0, 0, 0, 0.5));
    transition: opacity 160ms ease, filter 160ms ease, transform 160ms ease;
}

.lorekeeper-toolbar {
    position: relative;
    z-index: 8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    min-height: 4rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid rgba(0, 255, 204, 0.24);
    background: rgba(3, 5, 12, 0.78);
    backdrop-filter: blur(8px);
}

.lorekeeper-heading {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 0.75rem;
    white-space: nowrap;
}

.lorekeeper-heading .drakima-eyebrow {
    margin: 0;
    font-size: 0.64rem;
}

.lorekeeper-toolbar h1 {
    flex: 0 0 auto;
    font-size: 1.55rem;
}

.lorekeeper-toolbar-actions {
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--drakima-mono-font);
    color: #00ffcc;
}

.lorekeeper-menu {
    position: relative;
}

.lorekeeper-tools {
    position: relative;
}

.lorekeeper-menu-toggle,
.lorekeeper-tools-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #00ffcc;
    border-radius: 3px;
    background: rgba(3, 5, 12, 0.88);
    color: #d8fff7;
    font: 0.7rem/1 var(--drakima-mono-font);
    text-transform: uppercase;
    cursor: pointer;
}

.lorekeeper-menu-toggle > span:first-child,
.lorekeeper-tools-toggle > span:first-child {
    font-size: 1.15rem;
}

.lorekeeper-menu-toggle:hover,
.lorekeeper-menu-toggle:focus-visible,
.lorekeeper-menu-toggle[aria-expanded="true"],
.lorekeeper-tools-toggle:hover,
.lorekeeper-tools-toggle:focus-visible,
.lorekeeper-tools-toggle[aria-expanded="true"],
.lorekeeper-tools-toggle.has-update {
    border-color: #ff4fc3;
    color: #fff;
    box-shadow: 0 0 1rem rgba(255, 79, 195, 0.22);
}

.lorekeeper-tools-toggle.has-update {
    box-shadow: 0 0 1rem rgba(255, 79, 195, 0.38);
}

.lorekeeper-tools-badge {
    display: grid;
    min-width: 1.25rem;
    min-height: 1.25rem;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 79, 195, 0.2);
    color: #ff9ad9;
    font-size: 0.62rem;
}

.lorekeeper-tools-badge[hidden] {
    display: none;
}

.lorekeeper-tools-panel {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: min(32vw, 26rem);
    z-index: 18;
    display: flex;
    flex-direction: column;
    width: min(34rem, calc(100vw - 2rem));
    max-height: min(38rem, calc(100svh - 8rem));
    overflow: hidden;
    border: 1px solid rgba(255, 79, 195, 0.72);
    background: rgba(4, 6, 16, 0.985);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.62);
    color: #d8fff7;
}

.lorekeeper-tools-panel[hidden] {
    display: none;
}

.lorekeeper-tools-panel > header {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    border-bottom: 1px solid rgba(0, 255, 204, 0.22);
}

.lorekeeper-tools-panel > header p,
.lorekeeper-tools-panel > header strong {
    margin: 0;
}

.lorekeeper-tools-panel > header strong {
    display: block;
    margin-top: 0.2rem;
    color: #e7eaff;
    font: 0.72rem/1.35 var(--drakima-mono-font);
}

.lorekeeper-tools-panel .lorekeeper-secondary-tools {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.lorekeeper-menu-panel > p {
    margin: 0 0 0.2rem;
    color: #ff77c8;
    font: 0.65rem/1.2 var(--drakima-mono-font);
    text-transform: uppercase;
}

.lorekeeper-menu-panel > .lorekeeper-menu-lane {
    display: none;
}

.lorekeeper-menu-lane select {
    min-height: 2rem;
    border: 1px solid rgba(0, 255, 204, 0.55);
    border-radius: 3px;
    background: #080c1c;
    color: #d8fff7;
    font: 0.72rem/1.2 var(--drakima-mono-font);
}

.lorekeeper-lane-picker,
.site-lorekeeper-lane-picker {
    display: grid;
    gap: 0.15rem;
    color: #ff77c8;
    font: 0.62rem/1.15 var(--drakima-mono-font);
    text-transform: uppercase;
}

.lorekeeper-lane-picker select,
.site-lorekeeper-lane-picker select {
    min-height: 2rem;
    border: 1px solid rgba(0, 255, 204, 0.55);
    border-radius: 3px;
    background: #080c1c;
    color: #d8fff7;
    font: 0.72rem/1.2 var(--drakima-mono-font);
}

.lorekeeper-page[data-active-lane="concierge"] .lorekeeper-lane-picker select,
.lorekeeper-page[data-active-lane="concierge"] .lorekeeper-menu-lane select,
.site-lorekeeper[data-active-lane="concierge"] .site-lorekeeper-lane-picker select {
    border-color: #ff4fc3;
    box-shadow: 0 0 0.75rem rgba(255, 79, 195, 0.2);
}

.lorekeeper-consultation {
    position: relative;
    z-index: 3;
    display: grid;
    grid-area: consultation;
    grid-template-rows: minmax(13rem, 1fr) auto;
    width: calc(100% - 2.75rem);
    margin-left: 2.75rem;
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(255, 0, 255, 0.48);
    background: rgba(5, 7, 17, 0.84);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

.lorekeeper-commercial-facts,
.site-lorekeeper-commercial-facts {
    border-top: 1px solid rgba(255, 79, 195, 0.34);
    border-bottom: 1px solid rgba(0, 255, 204, 0.22);
    background: rgba(7, 10, 24, 0.96);
}

.lorekeeper-commercial-facts[hidden],
.site-lorekeeper-commercial-facts[hidden] {
    display: none;
}

.lorekeeper-commercial-facts {
    max-height: 13rem;
    overflow-y: auto;
    padding: 0.7rem 1rem;
}

.lorekeeper-commercial-facts > header,
.site-lorekeeper-commercial-facts > header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: #ff77c8;
    font: 0.68rem/1.25 var(--drakima-mono-font);
    text-transform: uppercase;
}

.lorekeeper-commercial-facts > header span,
.site-lorekeeper-commercial-facts > header span {
    color: #7be7ff;
    text-align: right;
}

#lorekeeper-commercial-fact-list,
#site-lorekeeper-commercial-fact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

#lorekeeper-commercial-fact-list article,
#site-lorekeeper-commercial-fact-list article {
    min-width: 0;
    padding: 0.48rem 0.55rem;
    border: 1px solid rgba(0, 255, 204, 0.25);
    background: #0b1128;
}

#lorekeeper-commercial-fact-list a,
#lorekeeper-commercial-fact-list strong,
#lorekeeper-commercial-fact-list span,
#site-lorekeeper-commercial-fact-list a,
#site-lorekeeper-commercial-fact-list strong,
#site-lorekeeper-commercial-fact-list span {
    display: block;
}

#lorekeeper-commercial-fact-list a,
#lorekeeper-commercial-fact-list strong,
#site-lorekeeper-commercial-fact-list a,
#site-lorekeeper-commercial-fact-list strong {
    overflow: hidden;
    color: #00ffcc;
    font-size: 0.76rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#lorekeeper-commercial-fact-list span,
#site-lorekeeper-commercial-fact-list span {
    margin-top: 0.25rem;
    color: #e8e9ff;
    font: 0.64rem/1.35 var(--drakima-mono-font);
}

@media (max-width: 720px) {
    #lorekeeper-commercial-fact-list,
    #site-lorekeeper-commercial-fact-list {
        grid-template-columns: 1fr;
    }

    .lorekeeper-lane-picker span,
    .site-lorekeeper-lane-picker span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }
}

.lorekeeper-commercial-facts p,
.site-lorekeeper-commercial-facts p {
    margin: 0.35rem 0 0;
    color: #aeb6d9;
    font-size: 0.65rem;
    line-height: 1.35;
}

.lorekeeper-dialogue {
    min-height: 0;
    overflow-y: auto;
    padding: 1rem;
    scroll-padding-block: 1rem;
}

.lorekeeper-message {
    width: min(90%, 48rem);
    margin-bottom: 0.8rem;
    padding: 0.8rem 0.9rem;
    border-left: 3px solid #00ffcc;
    background: rgba(16, 20, 41, 0.92);
}

.lorekeeper-message span {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--drakima-mono-font);
    font-size: 0.78rem;
    color: #00ffcc;
}

.lorekeeper-message p {
    margin: 0;
    color: #f1f2ff;
    font-size: 0.96rem;
    line-height: 1.6;
}

.lorekeeper-message-revealing p::after {
    content: "_";
    color: #00ffcc;
    animation: lorekeeper-cursor 600ms steps(1, end) infinite;
}

.lorekeeper-message-pending {
    border-left-color: #ff4fc3;
    background: rgba(17, 13, 34, 0.94);
}

.lorekeeper-message-pending p::after {
    content: "";
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-left: 0.55rem;
    border-radius: 50%;
    background: #ff4fc3;
    box-shadow: 0 0 0.75rem rgba(255, 79, 195, 0.75);
    animation: lorekeeper-thinking-pulse 900ms ease-in-out infinite alternate;
}

@keyframes lorekeeper-thinking-pulse {
    to { opacity: 0.25; transform: scale(0.72); }
}

@keyframes lorekeeper-cursor {
    50% {
        opacity: 0;
    }
}

.lorekeeper-message-visitor {
    margin-left: auto;
    border-left: 0;
    border-right: 3px solid #ff1493;
    background: #181022;
}

.lorekeeper-message-visitor span {
    color: #ff77c8;
}

.lorekeeper-secondary-tools {
    min-width: 0;
    border-top: 1px solid rgba(0, 255, 204, 0.22);
    background: rgba(5, 8, 20, 0.92);
}

.lorekeeper-disclosure {
    border-bottom: 1px solid rgba(0, 255, 204, 0.16);
}

.lorekeeper-disclosure[hidden] {
    display: none;
}

.lorekeeper-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.45rem;
    padding: 0.55rem 0.85rem;
    color: #d8fff7;
    font: 0.7rem/1.25 var(--drakima-mono-font);
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.lorekeeper-disclosure > summary::-webkit-details-marker {
    display: none;
}

.lorekeeper-disclosure > summary::before {
    flex: 0 0 auto;
    content: "+";
    color: #00ffcc;
    font-size: 1rem;
}

.lorekeeper-disclosure[open] > summary::before {
    content: "−";
    color: #ff77c8;
}

.lorekeeper-disclosure > summary small {
    margin-left: auto;
    color: #8e9ac6;
    font: 0.62rem/1.25 var(--drakima-mono-font);
    text-transform: none;
}

.lorekeeper-disclosure > summary:hover,
.lorekeeper-disclosure > summary:focus-visible {
    background: rgba(0, 255, 204, 0.08);
    color: #fff;
}

.lorekeeper-disclosure[open] > summary {
    border-bottom: 1px solid rgba(255, 79, 195, 0.28);
}

.lorekeeper-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    max-height: 10rem;
    overflow-y: auto;
    padding: 0.7rem 0.85rem;
}

.lorekeeper-suggestions button {
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(0, 255, 204, 0.45);
    background: rgba(3, 5, 12, 0.72);
    color: #c9fff4;
    font: 0.78rem/1.35 var(--drakima-mono-font);
    cursor: pointer;
}

.lorekeeper-suggestions button:hover,
.lorekeeper-suggestions button:focus-visible {
    background: #00ffcc;
    color: #02040a;
}

.lorekeeper-guided-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    max-height: 12rem;
    overflow-y: auto;
    padding: 0.7rem 0.85rem;
    background: rgba(5, 8, 20, 0.72);
}

.lorekeeper-guided-actions[hidden] {
    display: none;
}

.lorekeeper-guided-actions > a,
.lorekeeper-guided-actions > button {
    min-width: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(0, 255, 204, 0.4);
    border-radius: 3px;
    background: rgba(3, 5, 12, 0.78);
    color: #d8fff7;
    text-align: left;
    cursor: pointer;
}

.lorekeeper-guided-actions > a:hover,
.lorekeeper-guided-actions > a:focus-visible,
.lorekeeper-guided-actions > button:hover,
.lorekeeper-guided-actions > button:focus-visible {
    border-color: #00ffcc;
    background: #00ffcc;
    color: #02040a;
}

.lorekeeper-guided-actions strong,
.lorekeeper-guided-actions span {
    display: block;
}

.lorekeeper-context-panels {
    max-height: 15rem;
    overflow-y: auto;
}

.lorekeeper-context-panels > :first-child {
    border-top: 0;
}

.lorekeeper-system-navigator {
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(123, 231, 255, 0.32);
    background: linear-gradient(135deg, rgba(7, 14, 31, 0.98), rgba(20, 11, 38, 0.98));
}

.lorekeeper-system-navigator[hidden] {
    display: none;
}

.lorekeeper-system-navigator > header,
.lorekeeper-system-navigator article > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.lorekeeper-system-navigator > header span,
.lorekeeper-system-navigator article > span {
    color: #7be7ff;
    font: 0.62rem/1.3 var(--drakima-mono-font);
}

#lorekeeper-system-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin: 0.55rem 0;
}

.lorekeeper-system-navigator button {
    border: 1px solid rgba(123, 231, 255, 0.38);
    border-radius: 999px;
    padding: 0.28rem 0.55rem;
    color: #dffbff;
    background: rgba(9, 22, 44, 0.94);
    font: 0.64rem/1.2 var(--drakima-mono-font);
    cursor: pointer;
}

.lorekeeper-system-navigator button:hover,
.lorekeeper-system-navigator button:focus-visible {
    border-color: #00ffcc;
    color: #00ffcc;
}

#lorekeeper-system-list article {
    padding: 0.58rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#lorekeeper-system-list article > strong,
#lorekeeper-system-list article > span {
    display: block;
}

#lorekeeper-system-list article p,
.lorekeeper-system-navigator > p {
    margin: 0.28rem 0 0.5rem;
    color: #b9c5e7;
    font-size: 0.67rem;
    line-height: 1.45;
}

.lorekeeper-system-navigator article > div {
    justify-content: flex-start;
}

.lorekeeper-guided-actions strong {
    font: 0.75rem/1.35 var(--drakima-mono-font);
}

.lorekeeper-guided-actions span {
    margin-top: 0.2rem;
    font-size: 0.7rem;
    line-height: 1.35;
}

.lorekeeper-carried-topic {
    margin: 0.3rem 0 0;
    color: #bfc6e8;
    font-size: 0.76rem;
}

.lorekeeper-carried-topic a {
    color: #00ffcc;
}

.lorekeeper-composer {
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(255, 0, 153, 0.3);
    background: rgba(9, 11, 24, 0.9);
}

.lorekeeper-composer-shell {
    margin-top: 0.4rem;
}

.lorekeeper-composer textarea {
    width: 100%;
    min-height: 6rem;
    max-height: 20rem;
    overflow-y: auto;
    resize: vertical;
    scrollbar-gutter: stable;
}

.lorekeeper-composer p {
    min-height: 1.25rem;
    margin: 0.45rem 0 0;
    color: #aeb6d9;
}

.lorekeeper-core-status {
    position: absolute;
    right: 1rem;
    bottom: 0.8rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid rgba(0, 255, 204, 0.28);
    background: rgba(3, 5, 11, 0.86);
    font-family: var(--drakima-mono-font);
    font-size: 0.72rem;
    color: #d8dcff;
}

.lorekeeper-status-light {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #00ffcc;
    box-shadow: 0 0 0.75rem rgba(0, 255, 204, 0.8);
}

@media (max-width: 1100px) {
    .lorekeeper-scene-body {
        grid-template-columns: minmax(27rem, 1fr) minmax(15rem, 30%);
    }

}

@media (max-width: 820px) {
    .lorekeeper-page {
        padding: 0;
    }

    .lorekeeper-workspace {
        display: block;
        height: auto;
        min-height: 100vh;
        border-right: 0;
        border-left: 0;
    }

    .lorekeeper-scene {
        height: auto;
        min-height: 100svh;
        overflow: visible;
    }

    .lorekeeper-sources {
        width: min(22rem, calc(100% - 0.75rem));
    }

    .lorekeeper-evidence-trigger-desktop,
    .lorekeeper-lane-picker {
        display: none;
    }

    .lorekeeper-evidence-trigger-mobile {
        position: relative;
        display: grid;
        width: 2.25rem;
        height: 2.25rem;
        flex: 0 0 2.25rem;
        place-items: center;
        border: 1px solid rgba(0, 255, 204, 0.72);
        border-radius: 3px;
        background: #080c1c;
        color: #d8fff7;
        font: 0.7rem/1 var(--drakima-mono-font);
    }

    .lorekeeper-evidence-trigger-mobile .lorekeeper-evidence-badge {
        position: absolute;
        top: -0.4rem;
        right: -0.35rem;
        min-width: 1rem;
        min-height: 1rem;
        font-size: 0.55rem;
    }

    .lorekeeper-menu-panel > .lorekeeper-menu-lane {
        display: grid;
        align-items: stretch;
        gap: 0.35rem;
        cursor: default;
    }

    .lorekeeper-menu-lane select {
        width: 100%;
    }

    #lorekeeper-source-list {
        max-height: none;
    }

    .lorekeeper-toolbar {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        min-height: 3.5rem;
        padding: 0.45rem 0.55rem;
    }

    .lorekeeper-toolbar h1 {
        font-size: 1.3rem;
    }

    .lorekeeper-heading {
        flex: 1 1 auto;
        min-width: 0;
    }

    .lorekeeper-heading .drakima-eyebrow {
        display: none;
    }

    .lorekeeper-toolbar-actions {
        display: flex;
        flex: 0 1 auto;
        align-items: center;
        gap: 0.35rem;
    }

    .lorekeeper-menu-toggle,
    .lorekeeper-tools-toggle {
        min-height: 2.25rem;
        padding: 0.4rem 0.6rem;
    }

    .lorekeeper-menu-panel {
        position: fixed;
        top: max(4.5rem, env(safe-area-inset-top));
        right: 0.75rem;
    }

    .lorekeeper-tools-panel {
        position: fixed;
        top: max(4.5rem, env(safe-area-inset-top));
        right: 0.75rem;
        width: min(34rem, calc(100vw - 1.5rem));
        max-height: calc(100svh - 5.25rem);
    }

    .lorekeeper-scene-body {
        grid-template-areas:
            "character"
            "consultation";
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: clamp(13rem, 30svh, 17rem) auto;
        gap: 0.65rem;
        padding: 0.65rem;
    }

    .lorekeeper-character-stage {
        min-height: 13rem;
        background:
            linear-gradient(180deg, rgba(4, 7, 18, 0.06), rgba(4, 7, 18, 0.35)),
            radial-gradient(circle at 50% 25%, rgba(255, 79, 195, 0.15), transparent 55%);
    }

    .lorekeeper-scene-sprite {
        object-position: var(--portrait-mobile-position, center);
        transform: scale(var(--portrait-mobile-scale, 1));
        transform-origin: var(--portrait-mobile-position, center);
    }

    .lorekeeper-consultation {
        grid-template-rows: minmax(18rem, 44svh) auto;
        width: 100%;
        margin-left: 0;
        min-width: 0;
        min-height: 0;
    }

    .lorekeeper-message {
        width: 100%;
        padding: 0.7rem 0.75rem;
    }

    .lorekeeper-message p {
        font-size: 0.9rem;
        line-height: 1.55;
    }

    .lorekeeper-guided-actions {
        grid-template-columns: 1fr;
    }

    .lorekeeper-disclosure > summary {
        min-height: 2.65rem;
        padding-inline: 0.7rem;
    }

    .lorekeeper-core-status {
        right: 0.5rem;
        bottom: 0.45rem;
        max-width: calc(100% - 1rem);
        padding: 0.35rem 0.5rem;
        font-size: 0.62rem;
    }
}

@media (max-width: 480px) {
    .lorekeeper-toolbar h1 {
        font-size: 1.12rem;
    }

    .lorekeeper-lane-picker select {
        width: 4.25rem;
        min-height: 2rem;
    }

    .lorekeeper-menu-toggle > span:last-child,
    .lorekeeper-tools-toggle > span:nth-child(2) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .lorekeeper-menu-toggle,
    .lorekeeper-tools-toggle {
        min-width: 2.5rem;
        justify-content: center;
        padding-inline: 0.4rem;
    }

    .lorekeeper-tools-panel,
    .lorekeeper-menu-panel {
        top: max(3.9rem, env(safe-area-inset-top));
        right: 0.4rem;
    }

    .lorekeeper-tools-panel {
        width: calc(100vw - 0.8rem);
        max-height: calc(100svh - 4.35rem);
    }

    .lorekeeper-scene-body {
        grid-template-rows: clamp(12rem, 28svh, 15rem) auto;
        padding: 0.45rem;
    }

    .lorekeeper-consultation {
        grid-template-rows: minmax(17rem, 45svh) auto;
    }

    .lorekeeper-dialogue,
    .lorekeeper-composer {
        padding: 0.7rem;
    }

    .lorekeeper-suggestions,
    .lorekeeper-guided-actions {
        padding: 0.6rem 0.7rem;
    }

    .akari-answer-feedback {
        align-items: stretch;
    }

    .akari-answer-feedback > span,
    .akari-answer-feedback > label,
    .akari-answer-feedback > button {
        width: 100%;
    }

    .akari-answer-feedback select {
        width: 100%;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lorekeeper-message-revealing p::after,
    .lorekeeper-message-pending p::after,
    .lorekeeper-evidence-trigger.has-new-sources {
        animation: none;
    }

    .lorekeeper-sources {
        transition: none;
    }
}

.site-lorekeeper {
    position: fixed;
    right: var(--lk-standby-desktop-x, 1rem);
    bottom: var(--lk-standby-desktop-y, 1rem);
    z-index: 1080;
    font-family: var(--drakima-body-font);
}

.site-lorekeeper-standby {
    position: relative;
    width: 6rem;
    height: 6rem;
    overflow: hidden;
    padding: 0;
    border: 1px solid #00ffcc;
    border-radius: 8px;
    background: rgba(4, 7, 18, 0.96);
    box-shadow: 0 0 1.4rem rgba(0, 255, 204, 0.24), 0 0.85rem 2rem rgba(0, 0, 0, 0.54);
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.site-lorekeeper-standby:hover,
.site-lorekeeper-standby:focus-visible {
    border-color: #ff4fc3;
    box-shadow: 0 0 1.5rem rgba(255, 20, 147, 0.36), 0 0.85rem 2rem rgba(0, 0, 0, 0.54);
    transform: translateY(-2px);
}

.site-lorekeeper-standby img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.site-lorekeeper-presence-light {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    width: 0.65rem;
    height: 0.65rem;
    border: 2px solid #070914;
    border-radius: 50%;
    background: #00ffcc;
    box-shadow: 0 0 0.75rem rgba(0, 255, 204, 0.95);
}

.site-lorekeeper-greeting {
    position: absolute;
    right: calc(100% + 0.75rem);
    bottom: 0;
    width: min(19rem, calc(100vw - 8.75rem));
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(0, 255, 204, 0.72);
    border-radius: 6px;
    background: rgba(5, 8, 20, 0.96);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.52);
}

.site-lorekeeper-greeting.is-arriving {
    animation: site-lorekeeper-cue-arrive 220ms ease-out both;
}

.site-lorekeeper-greeting > div:first-child,
.site-lorekeeper-presence-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.site-lorekeeper-greeting small {
    color: #ff77c8;
    font: 0.58rem/1.2 var(--drakima-mono-font);
    letter-spacing: 0.08em;
}

.site-lorekeeper-presence-actions {
    justify-content: flex-end;
    margin-top: 0.55rem;
}

.site-lorekeeper-presence-actions > a,
.site-lorekeeper-presence-actions > button {
    min-height: 2rem;
    padding: 0.32rem 0.55rem;
    border: 1px solid rgba(0, 255, 204, 0.55);
    border-radius: 3px;
    background: #0a1023;
    color: #d9fff8;
    font: 0.66rem/1.2 var(--drakima-mono-font);
    text-decoration: none;
    cursor: pointer;
}

.site-lorekeeper-presence-actions > a:hover,
.site-lorekeeper-presence-actions > a:focus-visible,
.site-lorekeeper-presence-actions > button:hover,
.site-lorekeeper-presence-actions > button:focus-visible {
    border-color: #00ffcc;
    background: #00ffcc;
    color: #02040a;
}

@keyframes site-lorekeeper-cue-arrive {
    from { opacity: 0; transform: translateX(0.65rem); }
    to { opacity: 1; transform: translateX(0); }
}

.site-lorekeeper-greeting::after {
    position: absolute;
    right: -0.5rem;
    bottom: 1.2rem;
    width: 0.85rem;
    height: 0.85rem;
    border-top: 1px solid rgba(0, 255, 204, 0.72);
    border-right: 1px solid rgba(0, 255, 204, 0.72);
    content: "";
    background: #050814;
    transform: rotate(45deg);
}

.site-lorekeeper-greeting strong,
.site-lorekeeper-greeting p {
    position: relative;
    z-index: 1;
}

.site-lorekeeper-greeting strong {
    color: #00ffcc;
    font: 0.72rem/1.2 var(--drakima-mono-font);
}

.site-lorekeeper-greeting p {
    margin: 0.35rem 0 0;
    color: #f3f4ff;
    font-size: 0.86rem;
    line-height: 1.5;
}

.site-lorekeeper.is-open .site-lorekeeper-standby {
    visibility: hidden;
    pointer-events: none;
}

.site-lorekeeper-panel {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: grid;
    grid-template-rows: auto minmax(14rem, 15rem) minmax(0, auto) auto auto auto auto;
    width: min(34rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: hidden auto;
    border: 1px solid #ff1493;
    border-radius: 8px;
    background: rgba(4, 6, 16, 0.98);
    box-shadow: 0 0 2.2rem rgba(255, 20, 147, 0.22), 0 1.25rem 3.5rem rgba(0, 0, 0, 0.72);
}

.site-lorekeeper-panel-header,
.site-lorekeeper-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: #070a19;
}

.site-lorekeeper-panel-header {
    position: sticky;
    top: 0;
    z-index: 6;
    display: grid;
    grid-template-areas: "identity actions minimize";
    grid-template-columns: minmax(min-content, 1fr) minmax(min-content, max-content) auto;
    gap: 0.45rem;
    padding: 0.3rem 0.3rem 0.35rem 0.65rem;
    border-bottom: 1px solid rgba(0, 255, 204, 0.3);
}

.site-lorekeeper-identity {
    grid-area: identity;
    display: flex;
    justify-content: flex-start;
    align-self: start;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
}

.site-lorekeeper-panel-header strong {
    color: #f4f2ff;
    font-size: 1rem;
}

.site-lorekeeper-clearance {
    padding: 0.18rem 0.38rem;
    border: 1px solid rgba(0, 255, 204, 0.28);
    border-radius: 999px;
    color: #98eadc;
    font: 0.58rem/1.1 var(--drakima-mono-font);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.site-lorekeeper-panel-footer > div {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.site-lorekeeper-lane-picker {
    grid-area: mode;
    min-width: 0;
    margin: 0;
}

.site-lorekeeper-lane-picker select {
    width: 100%;
    min-height: 2rem;
    padding: 0.3rem 0.35rem;
}

.site-lorekeeper-toolbar-actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-self: start;
    align-items: center;
    gap: 0.3rem;
}

#site-lorekeeper-minimize {
    grid-area: minimize;
    align-self: start;
}

.site-lorekeeper-panel-header .site-lorekeeper-icon-button {
    position: relative;
    display: grid;
    width: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    place-items: center;
    padding: 0;
}

.site-lorekeeper-icon-button svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.site-lorekeeper-icon-button:disabled {
    cursor: default;
    opacity: 0.42;
}

.site-lorekeeper-icon-button:disabled:hover {
    background: rgba(6, 9, 22, 0.9);
    color: #d9fff7;
}

.site-lorekeeper-icon-badge {
    position: absolute;
    top: -0.32rem;
    right: -0.3rem;
    display: grid;
    min-width: 1rem;
    height: 1rem;
    place-items: center;
    padding: 0 0.18rem;
    border: 1px solid #070a19;
    border-radius: 999px;
    background: #ff4fc3;
    color: #070a19;
    font: 700 0.55rem/1 var(--drakima-mono-font);
}

.site-lorekeeper-icon-badge[hidden] {
    display: none;
}

.site-lorekeeper-icon-button.has-alert {
    border-color: #ff4fc3;
    box-shadow: 0 0 0.8rem rgba(255, 79, 195, 0.35);
    animation: site-lorekeeper-icon-alert 1.8s ease-in-out infinite;
}

@keyframes site-lorekeeper-icon-alert {
    50% { box-shadow: 0 0 1.05rem rgba(255, 79, 195, 0.68); }
}

@media (prefers-reduced-motion: reduce) {
    .site-lorekeeper-icon-button.has-alert {
        animation: none;
    }
}

.site-lorekeeper-panel button,
.site-lorekeeper-panel a {
    border: 1px solid rgba(0, 255, 204, 0.5);
    border-radius: 4px;
    background: rgba(6, 9, 22, 0.9);
    color: #d9fff7;
    font: 0.67rem/1.25 var(--drakima-mono-font);
    text-decoration: none;
}

.site-lorekeeper-panel button:hover,
.site-lorekeeper-panel button:focus-visible,
.site-lorekeeper-panel a:hover,
.site-lorekeeper-panel a:focus-visible {
    background: #00ffcc;
    color: #02040a;
}

.site-lorekeeper-panel-footer button,
.site-lorekeeper-panel-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.48rem;
}

.site-lorekeeper-stage {
    position: relative;
    min-height: 14rem;
    overflow: hidden;
    isolation: isolate;
    background: #080b18 var(--site-lorekeeper-background) center / cover no-repeat;
}

.site-lorekeeper-stage::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: "";
    background: linear-gradient(90deg, rgba(3, 5, 13, 0.72), rgba(3, 5, 13, 0.16) 68%);
}

.site-lorekeeper-sprite {
    position: absolute;
    right: 0.6rem;
    bottom: -0.2rem;
    height: 96%;
    width: auto;
    filter: drop-shadow(0 0 0.75rem rgba(0, 255, 204, 0.3));
}

.site-lorekeeper-introduction {
    position: absolute;
    left: 0.7rem;
    bottom: 0.7rem;
    z-index: 2;
    width: min(59%, 18rem);
    padding: 0.7rem 0.75rem;
    border-left: 3px solid #00ffcc;
    background: rgba(6, 9, 24, 0.91);
    backdrop-filter: blur(5px);
}

.site-lorekeeper-introduction span,
.site-lorekeeper-message span {
    display: block;
    margin-bottom: 0.25rem;
    color: #00ffcc;
    font: 0.69rem/1.2 var(--drakima-mono-font);
}

.site-lorekeeper-introduction p,
.site-lorekeeper-message p {
    margin: 0;
    color: #f4f3ff;
    font-size: 0.86rem;
    line-height: 1.48;
}

.site-lorekeeper-dialogue {
    display: grid;
    gap: 0.45rem;
    min-height: 7rem;
    max-height: 13rem;
    overflow-y: auto;
    resize: vertical;
    scrollbar-gutter: stable;
    padding: 0.65rem 0.75rem 0;
}

.site-lorekeeper-dialogue:empty {
    display: none;
}

.site-lorekeeper-conversation-start[hidden] {
    display: none;
}

.site-lorekeeper-message {
    width: 88%;
    padding: 0.55rem 0.65rem;
    border-left: 2px solid #00ffcc;
    background: #11162e;
}

.site-lorekeeper-message.is-visitor {
    justify-self: end;
    border-left: 0;
    border-right: 2px solid #ff4fc3;
    background: #1b1025;
}

.site-lorekeeper-message.is-visitor span {
    color: #ff77c8;
}

.site-lorekeeper-message.is-pending {
    opacity: .72;
}

.site-lorekeeper-message.is-pending p {
    color: #b9b5d5;
    font-style: italic;
}

.site-lorekeeper-inline-citation {
    display: inline;
    min-height: 0;
    margin: 0 0.12rem;
    padding: 0.05rem 0.22rem;
    border-color: rgba(0, 255, 204, 0.72);
    background: rgba(0, 255, 204, 0.1);
    color: #7ffff0;
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: baseline;
}

.site-lorekeeper-message.is-revealing p::after {
    content: "_";
    color: #00ffcc;
    animation: lorekeeper-cursor 600ms steps(1, end) infinite;
}

.site-lorekeeper-resume-offer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(255, 79, 195, 0.32);
    border-radius: 3px;
    background: rgba(27, 16, 37, 0.78);
    color: #cbd0ea;
    font-size: 0.68rem;
}

.site-lorekeeper-toolbar-drawer {
    margin: 0.5rem 0.75rem 0.6rem;
    padding: 0.6rem;
    border: 1px solid rgba(0, 255, 204, 0.46);
    border-left: 3px solid #00ffcc;
    border-radius: 4px;
    background: #090d20;
}

.site-lorekeeper-toolbar-drawer[hidden] {
    display: none;
}

.site-lorekeeper-toolbar-drawer > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.site-lorekeeper-toolbar-drawer > header strong {
    color: #7ffff0;
    font: 0.67rem/1.2 var(--drakima-mono-font);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.site-lorekeeper-toolbar-drawer > header button {
    width: 1.7rem;
    min-height: 1.7rem;
    padding: 0;
}

.site-lorekeeper-notification-drawer {
    border-color: rgba(255, 79, 195, 0.42);
    border-left-color: #ff4fc3;
}

.site-lorekeeper-resume-offer[hidden] {
    display: none;
}

.site-lorekeeper-resume-offer button {
    flex: 0 0 auto;
    padding: 0.4rem 0.55rem;
}

.site-lorekeeper-commercial-facts {
    max-height: 12rem;
    margin: 0 0.75rem 0.5rem;
    overflow-y: auto;
    padding: 0.6rem;
    border: 1px solid rgba(255, 79, 195, 0.34);
}

.lorekeeper-support-resolution,
.site-lorekeeper-support-resolution {
    border: 1px solid rgba(123, 231, 255, 0.38);
    background: rgba(7, 14, 31, 0.97);
}

.lorekeeper-support-resolution[hidden],
.site-lorekeeper-support-resolution[hidden] {
    display: none;
}

.lorekeeper-support-resolution {
    max-height: 14rem;
    overflow-y: auto;
    padding: 0.7rem 1rem;
}

.site-lorekeeper-support-resolution {
    max-height: 12rem;
    margin: 0 0.75rem 0.5rem;
    overflow-y: auto;
    padding: 0.6rem;
}

.lorekeeper-support-resolution > header,
.site-lorekeeper-support-resolution > header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: #7be7ff;
    font: 0.68rem/1.25 var(--drakima-mono-font);
    text-transform: uppercase;
}

#lorekeeper-support-diagnostics,
#site-lorekeeper-support-diagnostics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

#lorekeeper-support-diagnostics article,
#site-lorekeeper-support-diagnostics article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.65rem;
    padding: 0.5rem 0.55rem;
    border: 1px solid rgba(123, 231, 255, 0.25);
    background: #0b1128;
}

#lorekeeper-support-diagnostics article[data-status="ready"],
#site-lorekeeper-support-diagnostics article[data-status="ready"] {
    border-left: 3px solid #00ffcc;
}

#lorekeeper-support-diagnostics article[data-status="attention"],
#site-lorekeeper-support-diagnostics article[data-status="attention"] {
    border-left: 3px solid #ffcf4a;
}

#lorekeeper-support-diagnostics strong,
#site-lorekeeper-support-diagnostics strong {
    color: #f2f5ff;
    font-size: 0.76rem;
}

#lorekeeper-support-diagnostics span,
#site-lorekeeper-support-diagnostics span {
    grid-column: 1 / -1;
    color: #bec8e6;
    font: 0.64rem/1.35 var(--drakima-mono-font);
}

#lorekeeper-support-diagnostics a,
#site-lorekeeper-support-diagnostics a {
    color: #00ffcc;
    font: 0.66rem/1.2 var(--drakima-mono-font);
}

.lorekeeper-support-resolution > p,
.site-lorekeeper-support-resolution > p {
    margin: 0.45rem 0 0;
    color: #aeb6d9;
    font-size: 0.65rem;
}

@media (max-width: 720px) {
    #lorekeeper-support-diagnostics,
    #site-lorekeeper-support-diagnostics {
        grid-template-columns: 1fr;
    }
}

.site-lorekeeper-source-preview {
    display: grid;
    gap: 0.3rem;
}

.site-lorekeeper-guided-actions {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0.65rem;
    border: 1px solid rgba(0, 255, 220, 0.42);
    background: rgba(2, 12, 25, 0.94);
}

.site-lorekeeper-resume-offer:not([hidden]) + .site-lorekeeper-guided-actions:not([hidden]) {
    margin-top: 0.5rem;
}

.site-lorekeeper-guided-actions[hidden] {
    display: none;
}

.site-lorekeeper-guided-actions > strong {
    color: var(--drakima-cyan, #27f2df);
    font-family: var(--drakima-font-mono, monospace);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#site-lorekeeper-guided-action-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

#site-lorekeeper-guided-action-list button {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(244, 40, 213, 0.58);
    color: #f8f4ff;
    background: rgba(24, 12, 46, 0.92);
    text-align: left;
}

#site-lorekeeper-guided-action-list button:hover,
#site-lorekeeper-guided-action-list button:focus-visible {
    border-color: var(--drakima-cyan, #27f2df);
    background: rgba(15, 45, 62, 0.96);
}

#site-lorekeeper-guided-action-list button:disabled {
    cursor: wait;
    opacity: 0.68;
}

#site-lorekeeper-guided-action-list strong {
    color: var(--drakima-cyan, #27f2df);
    font-size: 0.76rem;
}

#site-lorekeeper-guided-action-list span {
    color: rgba(244, 240, 255, 0.78);
    font-size: 0.68rem;
    line-height: 1.35;
}

@media (max-width: 520px) {
    #site-lorekeeper-guided-action-list {
        grid-template-columns: 1fr;
    }
}

.site-lorekeeper-source-preview[hidden] {
    display: none;
}

.site-lorekeeper-source-preview > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.site-lorekeeper-source-preview > header span,
.site-lorekeeper-source-preview > small {
    color: #7be7ff;
    font: 0.61rem/1.25 var(--drakima-mono-font);
    text-transform: uppercase;
}

.site-lorekeeper-source-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
}

.site-lorekeeper-source-list button {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
    padding: 0.45rem 0.5rem;
    text-align: left;
}

.site-lorekeeper-source-list button.is-active {
    border-color: #00ffcc;
    background: rgba(0, 255, 204, 0.12);
}

.site-lorekeeper-source-list span,
.site-lorekeeper-source-detail > span,
.site-lorekeeper-source-list small,
.site-lorekeeper-source-detail > small {
    color: #7be7ff;
    font: 0.58rem/1.25 var(--drakima-mono-font);
    text-transform: uppercase;
}

.site-lorekeeper-source-list strong {
    overflow: hidden;
    color: #f3f5ff;
    font-size: 0.69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-lorekeeper-source-detail {
    display: grid;
    gap: 0.3rem;
    padding: 0.55rem;
    border: 1px solid rgba(123, 231, 255, 0.24);
    background: rgba(4, 7, 18, 0.72);
}

.site-lorekeeper-source-detail[hidden] {
    display: none;
}

.site-lorekeeper-source-detail > strong {
    color: #f3f5ff;
    font-size: 0.86rem;
}

.site-lorekeeper-source-detail > p {
    margin: 0;
    color: #c6cbea;
    font-size: 0.74rem;
    line-height: 1.42;
}

.site-lorekeeper-source-detail > a {
    justify-self: start;
    margin-top: 0.2rem;
    padding: 0.38rem 0.5rem;
}

.site-lorekeeper-source-preview > header button {
    width: 1.7rem;
    min-height: 1.7rem;
    padding: 0;
}

.site-lorekeeper-source-preview > strong {
    color: #f3f5ff;
    font-size: 0.86rem;
}

.site-lorekeeper-source-preview > p {
    margin: 0;
    color: #c6cbea;
    font-size: 0.74rem;
    line-height: 1.42;
}

.site-lorekeeper-source-preview > a {
    justify-self: start;
    margin-top: 0.2rem;
    padding: 0.38rem 0.5rem;
}

.site-lorekeeper-composer {
    padding: 0.65rem 0.75rem;
    border-top: 1px solid rgba(255, 20, 147, 0.28);
    background: #090b1a;
}

.site-lorekeeper-composer label {
    color: #eef0ff;
    font-size: 0.76rem;
}

.site-lorekeeper-composer-shell {
    margin-top: 0.35rem;
}

.site-lorekeeper-composer textarea {
    width: 100%;
    min-height: 5.75rem;
    max-height: 16rem;
    overflow-y: auto;
    resize: vertical;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #f7f7fb;
    font-size: 0.86rem;
    scrollbar-gutter: stable;
}

.site-lorekeeper-composer .ai-composer-toolbar > button:last-child {
    min-width: 3.4rem;
    padding: 0.45rem;
    background: #00d8c1;
    color: #02040a;
}

.site-lorekeeper-input,
.site-lorekeeper-response {
    position: relative;
}

.site-lorekeeper-input.is-resizable textarea,
.site-lorekeeper-response.is-resizable .site-lorekeeper-dialogue {
    padding-right: 1.8rem;
    resize: none;
}

.site-lorekeeper-input.is-resizable textarea {
    display: block;
}

.site-lorekeeper-input .site-lorekeeper-input-resize,
.site-lorekeeper-response .site-lorekeeper-input-resize {
    position: absolute;
    top: 0;
    right: 0;
    display: grid;
    width: 1.75rem;
    min-width: 24px;
    height: 1.75rem;
    min-height: 24px;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: ns-resize;
    touch-action: none;
}

.site-lorekeeper-input-resize[hidden],
.site-lorekeeper-dialogue:empty + .site-lorekeeper-input-resize {
    display: none;
}

.site-lorekeeper-input-resize svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.site-lorekeeper-dialogue-surface > .site-lorekeeper-companion-resolution {
    position: absolute;
    z-index: 6;
    left: 0.75rem;
    right: 0.75rem;
    margin: 0;
    max-height: min(16rem, 55vh);
    box-shadow: 0 0.5rem 1.5rem #02040a;
}

#site-lorekeeper-companion-notification[hidden] {
    display: none;
}

.site-lorekeeper-composer > p {
    min-height: 1rem;
    margin: 0.35rem 0 0;
    color: #aeb6d9;
    font-size: 0.68rem;
}

.site-lorekeeper-login-gate {
    display: grid;
    gap: .4rem;
    margin: .7rem .75rem;
    padding: .8rem;
    border: 1px solid rgba(0, 255, 204, .52);
    border-left: 3px solid #ff23ca;
    border-radius: 4px;
    background: linear-gradient(110deg, rgba(12, 24, 44, .96), rgba(26, 8, 35, .96));
}

.site-lorekeeper-login-gate > span {
    color: #ff74d5;
    font: .6rem/1.2 var(--drakima-mono-font);
    letter-spacing: .08em;
}

.site-lorekeeper-login-gate > strong {
    color: #f7f2ff;
    font-size: .9rem;
}

.site-lorekeeper-login-gate > p {
    margin: 0;
    color: #bcc6de;
    font-size: .72rem;
    line-height: 1.45;
}

.site-lorekeeper-login-gate > a {
    justify-self: start;
    margin-top: .2rem;
    padding: .5rem .7rem;
    border: 1px solid #00efd5;
    color: #031011;
    background: #00d8c1;
    font: .66rem/1 var(--drakima-mono-font);
    text-decoration: none;
    text-transform: uppercase;
}

.site-lorekeeper-login-gate > a:hover,
.site-lorekeeper-login-gate > a:focus-visible {
    border-color: #ff23ca;
    background: #ff69cf;
}

.site-lorekeeper-settings-panel {
    position: absolute;
    top: 7rem;
    right: 0.75rem;
    bottom: 4.2rem;
    left: 0.75rem;
    z-index: 9;
    overflow: hidden auto;
    padding: 0.7rem;
    border: 1px solid rgba(0, 255, 204, 0.5);
    border-radius: 5px;
    background: rgba(7, 10, 25, 0.99);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.58);
}

.site-lorekeeper-settings-panel[hidden] {
    display: none;
}

.site-lorekeeper-settings-panel > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(0, 255, 204, 0.2);
}

.site-lorekeeper-settings-panel > header div,
.site-lorekeeper-setting-row > div {
    display: grid;
    gap: 0.12rem;
}

.site-lorekeeper-settings-panel > header span,
.site-lorekeeper-settings-panel legend {
    color: #ff77c8;
    font: 0.62rem/1.2 var(--drakima-mono-font);
    text-transform: uppercase;
}

.site-lorekeeper-settings-panel > header strong {
    color: #f2f4ff;
    font-size: 0.95rem;
}

.site-lorekeeper-settings-panel > header button {
    width: 1.9rem;
    min-height: 1.9rem;
    padding: 0;
}

.site-lorekeeper-settings-panel fieldset {
    margin: 0 0 0.65rem;
    padding: 0.6rem;
    border: 1px solid rgba(0, 255, 204, 0.24);
    background: #090d20;
}

.site-lorekeeper-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.site-lorekeeper-setting-row strong {
    color: #eef0ff;
    font-size: 0.75rem;
}

.site-lorekeeper-setting-row small {
    color: #aeb6d9;
    font-size: 0.65rem;
}

.site-lorekeeper-presence-settings > div {
    display: grid;
    grid-template-columns: minmax(8rem, auto) minmax(0, 1fr);
    align-items: center;
    gap: 0.45rem 0.75rem;
    padding: 0.15rem 0 0;
}

.site-lorekeeper-presence-settings label {
    color: #d7dcf4;
    font-size: 0.72rem;
}

.site-lorekeeper-presence-settings select,
.site-lorekeeper-presence-settings input[type="range"] {
    width: 100%;
    min-height: 2rem;
}

.site-lorekeeper-presence-settings select {
    border: 1px solid #737c9f;
    border-radius: 3px;
    background: #f7f7fb;
    color: #11131d;
    font-size: 0.74rem;
}

.site-lorekeeper-presence-settings .site-lorekeeper-check {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.site-lorekeeper-presence-settings p {
    grid-column: 1 / -1;
    margin: 0.15rem 0 0;
    color: #aeb6d9;
    font-size: 0.68rem;
    line-height: 1.4;
}

.site-lorekeeper-panel-footer {
    position: sticky;
    bottom: 0;
    z-index: 6;
    border-top: 1px solid rgba(0, 255, 204, 0.24);
}

.site-lorekeeper-panel-footer > span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #c5cae7;
    font: 0.63rem/1.25 var(--drakima-mono-font);
}

.site-lorekeeper-panel-footer i {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: #00ffcc;
    box-shadow: 0 0 0.65rem rgba(0, 255, 204, 0.85);
}

@media (max-width: 600px) {
    .site-lorekeeper {
        right: max(0.65rem, env(safe-area-inset-right));
        bottom: max(0.65rem, env(safe-area-inset-bottom));
    }

    .site-lorekeeper-standby {
        width: 4.8rem;
        height: 4.8rem;
    }

    .site-lorekeeper-greeting {
        width: min(17rem, calc(100vw - 6.75rem));
    }

    .site-lorekeeper-panel {
        right: 0;
        bottom: 0;
        width: 100vw;
        max-height: calc(88svh - env(safe-area-inset-top));
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
    }

    .site-lorekeeper-lane-picker select {
        max-width: 9rem;
    }

    .site-lorekeeper-source-list {
        grid-template-columns: 1fr;
    }

    .site-lorekeeper-stage {
        min-height: 12.5rem;
    }

    .site-lorekeeper-introduction {
        left: 0.5rem;
        bottom: 0.5rem;
        width: 65%;
    }

    .site-lorekeeper-panel-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .site-lorekeeper-presence-settings > div {
        grid-template-columns: 1fr;
    }

    .site-lorekeeper-presence-settings .site-lorekeeper-check,
    .site-lorekeeper-presence-settings p {
        grid-column: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-lorekeeper-standby {
        transition: none;
    }

    .site-lorekeeper-greeting.is-arriving {
        animation: none;
    }

    .site-lorekeeper-message.is-revealing p::after {
        animation: none;
    }
}

/* Site-wide companion overlay: the dedicated Ask Akari page retains the office scene. */
.site-lorekeeper-standby {
    width: var(--lk-standby-desktop-size, 9rem);
    height: var(--lk-standby-desktop-size, 9rem);
}

.site-lorekeeper-greeting {
    right: calc(100% + 0.9rem);
    width: min(21rem, calc(100vw - 11.5rem));
}

.site-lorekeeper-panel {
    right: 0.75rem;
    bottom: 0.5rem;
    display: block;
    width: min(68rem, calc(100vw - 1.5rem));
    height: min(46rem, calc(100vh - 1rem));
    max-height: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: none;
}

.site-lorekeeper-companion-portrait {
    display: contents;
}

.site-lorekeeper-sprite {
    right: var(--lk-companion-desktop-x, 0%);
    bottom: var(--lk-companion-desktop-y, 0%);
    z-index: 2;
    width: auto;
    max-width: 35%;
    height: min(68vh, 43rem);
    object-fit: contain;
    object-position: right bottom;
    filter:
        drop-shadow(0 0 0.7rem rgba(0, 255, 204, 0.28))
        drop-shadow(0 1.2rem 1.5rem rgba(0, 0, 0, 0.62));
    transform: scale(var(--lk-companion-desktop-scale, 1));
    transform-origin: right bottom;
    pointer-events: none;
}

.site-lorekeeper[data-companion-desktop-anchor="left"] .site-lorekeeper-sprite {
    right: auto;
    left: var(--lk-companion-desktop-x, 0%);
    transform-origin: left bottom;
}

.site-lorekeeper[data-companion-desktop-anchor="center"] .site-lorekeeper-sprite {
    right: auto;
    left: calc(50% + var(--lk-companion-desktop-x, 0%));
    transform: translateX(-50%) scale(var(--lk-companion-desktop-scale, 1));
    transform-origin: center bottom;
}

.site-lorekeeper-dialogue-surface {
    position: absolute;
    left: 0;
    bottom: 1rem;
    z-index: 3;
    width: min(42rem, calc(100% - 20rem));
    min-width: 31rem;
    max-height: min(78vh, 44rem);
    min-height: 24rem;
    max-width: min(88vw, 68rem);
    overflow: auto;
    resize: both;
    border: 1px solid #00ffcc;
    border-radius: 8px;
    background: rgba(5, 8, 20, 0.95);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.62), 0 0 1.3rem rgba(0, 255, 204, 0.18);
    backdrop-filter: blur(8px);
    pointer-events: auto;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.hermes-research-activity {
    max-height: 9rem;
    margin: .45rem 0 0;
    padding: .55rem .7rem .55rem 1.7rem;
    overflow-y: auto;
    border-left: 2px solid #00ffe2;
    background: rgba(0, 255, 226, .06);
    color: #c9fff8;
    font: .68rem/1.45 var(--drakima-mono-font);
    scrollbar-gutter: stable;
}

.hermes-research-activity li + li { margin-top: .3rem; }

.site-lorekeeper-panel::after {
    position: absolute;
    left: min(42rem, calc(100% - 20rem));
    bottom: 7.5rem;
    z-index: 4;
    width: 1.8rem;
    height: 1.8rem;
    border-top: 1px solid #00ffcc;
    border-right: 1px solid #00ffcc;
    content: "";
    background: rgba(5, 8, 20, 0.97);
    transform: rotate(45deg);
    transition: border-color 160ms ease;
}

.site-lorekeeper-dialogue-surface[data-bubble-kind="answer"] {
    border-color: #00ffcc;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.62), 0 0 1.5rem rgba(0, 255, 204, 0.24);
}

.site-lorekeeper-dialogue-surface[data-bubble-kind="thinking"] {
    border-color: #7be7ff;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.62), 0 0 1.5rem rgba(123, 231, 255, 0.26);
}

.site-lorekeeper-dialogue-surface[data-bubble-kind="warning"] {
    border-color: #ffb84d;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.62), 0 0 1.5rem rgba(255, 184, 77, 0.28);
}

.site-lorekeeper-panel[data-bubble-kind="thinking"]::after {
    border-color: #7be7ff;
}

/* Explicit, user-controlled Hermes provenance shared by Akari surfaces. */
.ai-composer-shell {
    display: grid;
    gap: .45rem;
    min-width: 0;
    padding: .5rem;
    border: 1px solid rgba(0, 255, 226, .58);
    border-radius: 4px;
    background: rgba(2, 8, 23, .86);
}

.ai-composer-shell > textarea,
.site-lorekeeper-input > textarea {
    box-sizing: border-box;
    min-width: 0;
    outline-offset: 2px;
}

.ai-composer-toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
}

.gynoid-composer-conversation-tools {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: .4rem;
    margin-right: auto;
}

.ai-composer-research,
.ai-composer-think,
.ai-composer-poke,
.private-videos-trigger,
.ai-composer-interact-toggle {
    min-width: 0 !important;
    min-height: 2.2rem;
    padding: .4rem .65rem;
    border: 1px solid rgba(0, 255, 226, .55);
    color: var(--drakima-cyan-soft);
    background: rgba(0, 255, 226, .05);
    font: .64rem/1.2 var(--drakima-mono-font);
    text-transform: uppercase;
}

.ai-composer-interact {
    position: relative;
}

.ai-composer-interact-toggle::after {
    margin-left: .42rem;
    content: "▾";
}

.ai-composer-interact-toggle[aria-expanded="true"],
.ai-composer-interact-toggle[data-active="true"] {
    border-color: var(--drakima-hot-pink);
    color: #fff;
    background: rgba(255, 0, 216, .14);
    box-shadow: 0 0 16px rgba(255, 0, 216, .22);
}

.ai-composer-interact-toggle[aria-expanded="true"]::after {
    content: "▴";
}

.ai-composer-interact-panel {
    position: absolute;
    bottom: calc(100% + .5rem);
    left: 0;
    z-index: 12;
    display: grid;
    width: min(18rem, calc(100vw - 2rem));
    gap: .5rem;
    padding: .75rem;
    border: 1px solid rgba(0, 255, 226, .65);
    border-radius: 4px;
    background: rgba(2, 8, 23, .98);
    box-shadow: 0 .8rem 2rem rgba(0, 0, 0, .52), 0 0 18px rgba(0, 255, 226, .12);
}

.ai-composer-interact-panel[hidden] {
    display: none;
}

.ai-composer-interact-panel > strong {
    color: #fff;
    font: .7rem/1.2 var(--drakima-mono-font);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ai-composer-interact-panel > small {
    color: rgba(225, 242, 255, .75);
    font: .68rem/1.35 var(--drakima-body-font);
}

.ai-composer-interact-panel .ai-composer-poke,
.ai-composer-interact-panel .ai-composer-poke-angle,
.ai-composer-interact-panel .ai-composer-performance,
.ai-composer-interact-panel .ai-composer-performance-toggle {
    width: 100%;
}

.ai-composer-interact-panel .ai-composer-poke-angle {
    justify-content: space-between;
}

.ai-composer-performance {
    display: grid;
    gap: .45rem;
}

.ai-composer-performance-toggle {
    min-height: 2.2rem;
    padding: .4rem .65rem;
    border: 1px solid rgba(255, 0, 216, .48);
    color: #fff;
    background: rgba(255, 0, 216, .08);
    font: .64rem/1.2 var(--drakima-mono-font);
    text-align: left;
    text-transform: uppercase;
}

.ai-composer-performance-toggle::after {
    float: right;
    content: "＋";
}

.ai-composer-performance-toggle[aria-expanded="true"]::after {
    content: "−";
}

.ai-composer-performance-toggle:disabled {
    cursor: progress;
    opacity: .55;
}

.ai-composer-performance-panel {
    display: grid;
    gap: .45rem;
    padding: .55rem;
    border: 1px solid rgba(255, 0, 216, .32);
    background: rgba(255, 0, 216, .035);
}

.ai-composer-performance-panel[hidden] {
    display: none;
}

.ai-composer-performance-panel > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: var(--drakima-cyan-soft);
    font: .6rem/1.2 var(--drakima-mono-font);
    text-transform: uppercase;
}

.ai-composer-performance-panel select {
    min-height: 1.7rem;
    border: 1px solid rgba(0, 255, 226, .45);
    color: #fff;
    background: #081023;
    font: inherit;
    text-transform: uppercase;
}

.ai-composer-performance-panel > strong {
    color: #fff;
    font: .72rem/1.2 var(--drakima-mono-font);
}

.ai-composer-performance-panel > small {
    color: rgba(225, 242, 255, .72);
    font: .66rem/1.3 var(--drakima-body-font);
}

.ai-composer-performance-panel nav {
    display: grid;
    grid-template-columns: 2.2rem minmax(4.5rem, 1fr) 2.2rem auto;
    align-items: center;
    gap: .35rem;
}

.ai-composer-performance-panel nav button {
    min-height: 2rem;
    border: 1px solid rgba(0, 255, 226, .5);
    color: #fff;
    background: rgba(0, 255, 226, .06);
    font: .62rem/1.2 var(--drakima-mono-font);
    text-transform: uppercase;
}

.ai-composer-performance-panel nav span {
    color: var(--drakima-cyan-soft);
    font: .6rem/1.2 var(--drakima-mono-font);
    white-space: nowrap;
}

.ai-composer-poke-angle {
    display: inline-flex;
    min-height: 2.2rem;
    align-items: center;
    gap: .38rem;
    padding: .3rem .45rem;
    border: 1px solid rgba(0, 255, 226, .38);
    color: var(--drakima-cyan-soft);
    background: rgba(0, 255, 226, .035);
    font: .6rem/1.2 var(--drakima-mono-font);
    text-transform: uppercase;
}

.ai-composer-poke-angle select {
    min-width: 4.6rem;
    min-height: 1.55rem;
    border: 1px solid rgba(255, 0, 216, .48);
    color: #fff;
    background: #081023;
    font: inherit;
    text-transform: uppercase;
}

.ai-composer-poke-angle select:focus-visible {
    outline: 2px solid var(--drakima-hot-pink);
    outline-offset: 2px;
}

.ai-composer-poke-angle:has(select:disabled) {
    opacity: .52;
}

.ai-composer-research[aria-pressed="true"],
.ai-composer-think[aria-pressed="true"],
.ai-composer-poke[aria-pressed="true"] {
    border-color: var(--drakima-hot-pink);
    color: #fff;
    background: rgba(255, 0, 216, .14);
    box-shadow: 0 0 16px rgba(255, 0, 216, .22);
}

.ai-interaction-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
    margin-top: .45rem;
}

.ai-interaction-actions button {
    min-height: 2.1rem;
    padding: .38rem .7rem;
    border: 1px solid rgba(0, 255, 226, .58);
    border-radius: 3px;
    color: var(--drakima-cyan-soft);
    background: rgba(0, 255, 226, .06);
    font: .66rem/1.2 var(--drakima-mono-font);
    text-transform: uppercase;
}

.ai-interaction-actions [data-ai-interaction-stop] {
    border-color: rgba(255, 80, 151, .72);
    color: #ff9bc8;
    background: rgba(255, 20, 110, .08);
}

.ai-interaction-actions button:hover,
.ai-interaction-actions button:focus-visible {
    border-color: currentColor;
    background: rgba(255, 255, 255, .12);
}

[data-ai-interaction-surface][aria-busy="true"] .ai-composer-shell {
    border-color: rgba(123, 231, 255, .72);
    box-shadow: 0 0 0 1px rgba(123, 231, 255, .16);
}

[data-ai-interaction-state="failed"] {
    color: #ff9bc8;
}

[data-ai-interaction-state="cancelled"] {
    color: var(--drakima-muted);
}

.site-lorekeeper-composer-shell {
    border-color: rgba(0, 255, 204, .62);
    background: #050a19;
}

.site-lorekeeper-research-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.site-lorekeeper-research-toggle svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.lorekeeper-research-toggle,
.site-lorekeeper-research-toggle {
    border-color: rgba(0, 255, 226, .5);
}

.lorekeeper-research-toggle[aria-pressed="true"],
.site-lorekeeper-research-toggle[aria-pressed="true"] {
    color: #050817;
    background: #00ffe2;
    border-color: #00ffe2;
    box-shadow: 0 0 18px rgba(0, 255, 226, .32);
}

.lorekeeper-research-receipt,
.site-lorekeeper-research-receipt {
    margin: .45rem 0 0;
    padding: .55rem .7rem;
    border-left: 3px solid #00ffe2;
    background: rgba(0, 255, 226, .08);
    color: #bffef7;
    font: .68rem/1.45 var(--drakima-mono);
}

.lorekeeper-research-receipt[data-status="unavailable"],
.lorekeeper-research-receipt[data-status="timedout"],
.lorekeeper-research-receipt[data-status="rejected"],
.site-lorekeeper-research-receipt[data-status="unavailable"],
.site-lorekeeper-research-receipt[data-status="timedout"],
.site-lorekeeper-research-receipt[data-status="rejected"] {
    border-left-color: #ff4fa3;
    background: rgba(255, 79, 163, .1);
    color: #ffd3e8;
}

.site-lorekeeper-panel[data-bubble-kind="warning"]::after {
    border-color: #ffb84d;
}

.site-lorekeeper-dialogue-surface .site-lorekeeper-conversation-chrome {
    position: sticky;
    top: 0;
    z-index: 7;
    background: rgba(6, 9, 23, 0.98);
}

.site-lorekeeper-dialogue-surface .site-lorekeeper-panel-header {
    position: static;
}

.site-lorekeeper-dialogue-surface .site-lorekeeper-introduction {
    position: relative;
    left: auto;
    bottom: auto;
    width: auto;
    margin: 0.75rem 0.75rem 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(0, 255, 204, 0.28);
    border-left: 3px solid #00ffcc;
    border-radius: 4px;
    background: rgba(14, 19, 42, 0.94);
    backdrop-filter: none;
}

.site-lorekeeper-introduction.is-revealing p::after {
    content: "_";
    color: #00ffcc;
    animation: lorekeeper-cursor 600ms steps(1, end) infinite;
}

.site-lorekeeper-dialogue-surface .site-lorekeeper-dialogue {
    max-height: 21rem;
}

.site-lorekeeper-dialogue-surface .site-lorekeeper-panel-footer {
    position: sticky;
    bottom: 0;
    z-index: 7;
    background: rgba(6, 9, 23, 0.98);
}

@media (max-width: 960px) and (min-width: 601px) {
    .site-lorekeeper-panel {
        width: calc(100vw - 1rem);
    }

    .site-lorekeeper-sprite {
        max-width: 36%;
        height: min(60vh, 36rem);
    }

    .site-lorekeeper-dialogue-surface {
        width: calc(100% - 17rem);
        min-width: 28rem;
    }

    .site-lorekeeper-panel::after {
        left: calc(100% - 17rem);
    }
}

@media (max-width: 600px) {
    .site-lorekeeper {
        right: max(var(--lk-standby-mobile-x, 0.65rem), env(safe-area-inset-right));
        bottom: max(var(--lk-standby-mobile-y, 0.65rem), env(safe-area-inset-bottom));
    }

    .site-lorekeeper-standby {
        width: min(var(--lk-standby-mobile-size, 3.75rem), 3.75rem);
        height: min(var(--lk-standby-mobile-size, 3.75rem), 3.75rem);
    }

    .site-lorekeeper-greeting {
        width: min(17rem, calc(100vw - 8.4rem));
    }

    .site-lorekeeper-panel {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: min(40rem, calc(76svh - env(safe-area-inset-top)));
        max-height: none;
        border: 0;
    }

    .site-lorekeeper-companion-portrait {
        display: none;
    }

    .site-lorekeeper[data-companion-mobile-anchor] .site-lorekeeper-sprite {
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        width: auto;
        max-width: none;
        height: 35rem;
        object-position: center top;
        transform: translateX(-50%);
        transform-origin: center top;
    }

    .site-lorekeeper[data-companion-mobile-anchor="left"] .site-lorekeeper-companion-portrait {
        right: auto;
        left: var(--lk-companion-mobile-x, 0%);
        transform: scale(var(--lk-companion-mobile-scale, 1));
        transform-origin: left bottom;
    }

    .site-lorekeeper[data-companion-mobile-anchor="right"] .site-lorekeeper-companion-portrait {
        right: var(--lk-companion-mobile-x, 0%);
        left: auto;
        transform: scale(var(--lk-companion-mobile-scale, 1));
        transform-origin: right bottom;
    }

    .site-lorekeeper[data-companion-mobile-framing="bust"] .site-lorekeeper-companion-portrait {
        width: min(17rem, 68vw);
        height: min(12rem, 24svh);
    }

    .site-lorekeeper[data-companion-mobile-framing="bust"] .site-lorekeeper-sprite {
        height: 38rem;
    }

    .site-lorekeeper[data-companion-mobile-framing="fullbody"] .site-lorekeeper-companion-portrait {
        width: min(18rem, 70vw);
        height: min(27rem, 48svh);
    }

    .site-lorekeeper[data-companion-mobile-framing="fullbody"] .site-lorekeeper-sprite {
        top: auto;
        bottom: 0;
        height: 100%;
        object-fit: contain;
        object-position: center bottom;
    }

    .site-lorekeeper-dialogue-surface {
        left: 0;
        bottom: 0;
        width: 100%;
        min-width: 0;
        max-height: 100%;
        border-top: 1px solid #00ffcc;
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 0;
        background: rgba(5, 8, 20, 0.97);
        min-height: 0;
        resize: vertical;
    }

    .site-lorekeeper-panel::after {
        display: none;
    }

    .site-lorekeeper-dialogue-surface .site-lorekeeper-introduction {
        margin: 0.55rem 0.55rem 0;
    }

    .lorekeeper-guided-actions {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-lorekeeper-dialogue-surface {
        transition: none;
    }

    .site-lorekeeper-introduction.is-revealing p::after {
        animation: none;
    }
}

.lorekeeper-presentation-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.lorekeeper-gynoid-picker {
    display: grid;
    grid-template-columns: auto minmax(16rem, 28rem) auto;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--drakima-line-cyan);
    background: rgba(5, 7, 17, 0.88);
}

.lorekeeper-gynoid-picker label,
.lorekeeper-profile-state {
    font-family: var(--drakima-mono-font);
    color: var(--drakima-cyan-soft);
}

.lorekeeper-profile-state {
    justify-self: end;
    font-size: 0.75rem;
}

.lorekeeper-presentation-editor {
    display: grid;
    grid-template-columns: minmax(34rem, 1.35fr) minmax(29rem, 0.85fr);
    align-items: start;
    border: 1px solid rgba(0, 255, 204, 0.34);
    background: rgba(5, 7, 17, 0.88);
}

.lorekeeper-presentation-preview-pane {
    position: sticky;
    top: 5.5rem;
    min-width: 0;
    padding: 1rem;
    border-right: 1px solid rgba(0, 255, 204, 0.26);
}

.lorekeeper-preview-toolbar,
.lorekeeper-preview-actions,
.lorekeeper-presentation-savebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.lorekeeper-preview-modes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(36rem, 78%);
}

.lorekeeper-preview-toolbar {
    margin-bottom: 0.75rem;
}

.lorekeeper-preview-modes button {
    min-width: 0;
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(0, 255, 204, 0.46);
    background: #080b16;
    color: #c9fff4;
    font-family: var(--drakima-mono-font);
    cursor: pointer;
}

.lorekeeper-preview-modes button[aria-pressed="true"] {
    background: #00ffcc;
    color: #03050b;
}

.lorekeeper-admin-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(255, 0, 255, 0.54);
    background-color: #03050b;
    background-position: center;
    background-size: cover;
    transition: width 180ms ease;
}

.lorekeeper-admin-preview.is-mobile-preview {
    width: min(100%, 24rem);
    aspect-ratio: 9 / 16;
    margin-inline: auto;
}

.lorekeeper-admin-preview::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    background: linear-gradient(180deg, transparent 50%, rgba(3, 5, 11, 0.68));
    pointer-events: none;
}

.lorekeeper-admin-preview-sprite-frame {
    display: contents;
}

.lorekeeper-admin-preview-sprite-frame > img {
    position: absolute;
    right: 5%;
    bottom: 0;
    z-index: 1;
    width: auto;
    height: 82%;
    filter: drop-shadow(0 0 0.65rem rgba(0, 255, 204, 0.3));
}

.lorekeeper-admin-preview.is-mobile-preview:not(.is-companion-mobile-preview) .lorekeeper-admin-preview-sprite-frame > img {
    height: 48%;
}

.lorekeeper-admin-preview.is-companion-preview,
.lorekeeper-admin-preview.is-standby-preview {
    background-color: #090c1b;
    background-image: none;
}

.lorekeeper-admin-preview.is-companion-preview::before,
.lorekeeper-admin-preview.is-standby-preview::before {
    position: absolute;
    inset: 8% 7%;
    z-index: 0;
    border: 1px solid rgba(0, 255, 204, 0.18);
    content: "PUBLIC PAGE PREVIEW";
    color: rgba(0, 255, 204, 0.28);
    font: 0.7rem/1 var(--drakima-mono-font);
    padding: 0.75rem;
}

.lorekeeper-admin-preview.is-companion-preview:not(.is-companion-mobile-preview) .lorekeeper-admin-preview-sprite-frame > img {
    height: 92%;
    max-width: 40%;
}

.lorekeeper-admin-preview.is-companion-preview:not(.is-companion-mobile-preview) .lorekeeper-admin-preview-dialogue {
    right: auto;
    width: 64%;
}

.lorekeeper-admin-preview.is-companion-mobile-preview .lorekeeper-admin-preview-sprite-frame {
    position: absolute;
    z-index: 1;
    display: block;
    width: 72%;
    height: 28%;
    overflow: hidden;
    pointer-events: none;
}

.lorekeeper-admin-preview.is-companion-mobile-preview .lorekeeper-admin-preview-sprite-frame > img {
    top: 0;
    right: auto;
    bottom: auto;
    left: 50%;
    width: auto;
    max-width: none;
    height: 220%;
    transform: translateX(-50%);
    transform-origin: center top;
}

.lorekeeper-admin-preview.is-companion-mobile-preview[data-mobile-framing="bust"] .lorekeeper-admin-preview-sprite-frame {
    width: 68%;
    height: 22%;
}

.lorekeeper-admin-preview.is-companion-mobile-preview[data-mobile-framing="bust"] .lorekeeper-admin-preview-sprite-frame > img {
    height: 280%;
}

.lorekeeper-admin-preview.is-companion-mobile-preview[data-mobile-framing="fullbody"] .lorekeeper-admin-preview-sprite-frame {
    width: 70%;
    height: 48%;
}

.lorekeeper-admin-preview.is-companion-mobile-preview[data-mobile-framing="fullbody"] .lorekeeper-admin-preview-sprite-frame > img {
    top: auto;
    bottom: 0;
    height: 100%;
    object-fit: contain;
}

.lorekeeper-admin-preview.is-companion-mobile-preview .lorekeeper-admin-preview-dialogue {
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 38%;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    background: rgba(3, 5, 14, 0.96);
}

.lorekeeper-admin-preview-standby {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    padding: 0;
    border: 1px solid #00ffcc;
    border-radius: 8px;
    background: #050814;
    box-shadow: 0 0 1.4rem rgba(0, 255, 204, 0.24);
}

.lorekeeper-admin-preview-standby img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

.lorekeeper-admin-preview-standby i {
    position: absolute;
    right: 0.35rem;
    bottom: 0.35rem;
    width: 0.6rem;
    height: 0.6rem;
    border: 2px solid #070914;
    border-radius: 50%;
    background: #00ffcc;
    box-shadow: 0 0 0.65rem rgba(0, 255, 204, 0.95);
}

.lorekeeper-admin-preview-dialogue {
    position: absolute;
    right: 2%;
    bottom: 3%;
    left: 2%;
    z-index: 2;
    min-height: 6.5rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(0, 255, 204, 0.52);
    background: rgba(3, 5, 14, 0.86);
}

.lorekeeper-admin-preview-dialogue span {
    display: block;
    margin-bottom: 0.4rem;
    color: #00ffcc;
    font-family: var(--drakima-mono-font);
    font-size: 0.72rem;
}

.lorekeeper-admin-preview-dialogue p {
    margin: 0;
    color: #f4efff;
    line-height: 1.55;
}

.lorekeeper-preview-actions {
    justify-content: flex-start;
    margin-top: 0.75rem;
}

.lorekeeper-preview-actions .form-control {
    width: min(16rem, 42%);
}

.lorekeeper-presentation-controls {
    min-width: 0;
}

.lorekeeper-settings-band {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.lorekeeper-settings-band header {
    margin-bottom: 0.85rem;
}

.lorekeeper-settings-band h2 {
    margin: 0;
    font-size: 1.2rem;
}

.lorekeeper-settings-note {
    margin: -0.35rem 0 0.9rem;
    color: #adb5da;
    font-size: 0.82rem;
    line-height: 1.45;
}

.lorekeeper-settings-band > label,
.lorekeeper-expression-assignments label,
.lorekeeper-placement-grid label,
.lorekeeper-audio-grid label {
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.lorekeeper-expression-assignments {
    display: grid;
    gap: 0.55rem;
}

.lorekeeper-expression-assignments label {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: center;
    margin: 0;
}

.lorekeeper-expression-assignments label > span:first-child {
    color: #ff77c8;
    font-family: var(--drakima-mono-font);
    font-size: 0.75rem;
}

.lorekeeper-placement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.lorekeeper-responsive-settings {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.lorekeeper-responsive-settings fieldset {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid rgba(0, 255, 204, 0.22);
}

.lorekeeper-responsive-settings legend {
    width: auto;
    margin: 0;
    padding-inline: 0.35rem;
    color: #00ffcc;
    font: 0.72rem/1 var(--drakima-mono-font);
}

.lorekeeper-audio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.lorekeeper-audio-grid input[type="range"] {
    width: 100%;
}

.lorekeeper-presentation-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(255, 0, 255, 0.42);
    background: rgba(5, 7, 17, 0.96);
    font-family: var(--drakima-mono-font);
    font-size: 0.75rem;
}

@media (max-width: 1200px) {
    .lorekeeper-presentation-editor {
        grid-template-columns: 1fr;
    }

    .lorekeeper-presentation-preview-pane {
        position: relative;
        top: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(0, 255, 204, 0.26);
    }
}

@media (max-width: 720px) {
    .lorekeeper-presentation-heading,
    .lorekeeper-preview-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .lorekeeper-gynoid-picker {
        grid-template-columns: 1fr;
    }

    .lorekeeper-profile-state {
        justify-self: start;
    }

    .lorekeeper-preview-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .lorekeeper-preview-modes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .lorekeeper-expression-assignments label,
    .lorekeeper-placement-grid,
    .lorekeeper-audio-grid,
    .lorekeeper-responsive-settings {
        grid-template-columns: 1fr;
    }

    .lorekeeper-preview-actions .form-control {
        width: 100%;
    }
}

html {
    min-height: 100%;
}

/* The shared layout owns the website backdrop; page wrappers stay transparent.
   Authored scene artwork and readable content panels belong inside those wrappers. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(rgba(7, 6, 16, 0.76), rgba(7, 6, 16, 0.92)),
        var(--drakima-site-background, url("/images/cyberpunk-city.jpg")) center top / cover fixed,
        radial-gradient(circle at 12% 0%, rgba(255, 0, 255, 0.24), transparent 32%),
        radial-gradient(circle at 88% 14%, rgba(0, 255, 204, 0.16), transparent 34%),
        linear-gradient(135deg, var(--drakima-bg), var(--drakima-bg-2));
    color: var(--drakima-text);
    font-family: "Orbitron", system-ui, sans-serif;
}

.drakima-skip-link {
    position: fixed;
    top: 0.65rem;
    left: 0.65rem;
    z-index: 1200;
    padding: 0.7rem 0.9rem;
    border: 2px solid #ffffff;
    border-radius: 3px;
    color: #05080b;
    background: var(--drakima-cyan);
    font: 0.78rem/1.2 var(--drakima-mono-font);
    text-decoration: none;
    transform: translateY(calc(-100% - 1rem));
    transition: transform 120ms ease;
}

.drakima-skip-link:focus-visible {
    color: #05080b;
    outline: 3px solid var(--drakima-hot-pink);
    outline-offset: 2px;
    transform: translateY(0);
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .drakima-skip-link {
        transition: none;
    }
}

a {
    color: var(--drakima-cyan-soft);
}

a:hover {
    color: var(--drakima-cyan);
}

.drakima-site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
}

.drakima-navbar {
    background: rgba(5, 5, 12, 0.94);
    border-bottom: 1px solid var(--drakima-line);
    box-shadow: var(--drakima-shadow-pink);
    backdrop-filter: blur(10px);
}

.drakima-nav-container {
    max-width: 1440px;
    min-height: 4rem;
}

.drakima-brand {
    color: var(--drakima-hot-pink) !important;
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 1.55rem;
    letter-spacing: 0;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.72);
    text-transform: uppercase;
}

.drakima-navbar-toggler {
    border-color: var(--drakima-line-cyan);
    box-shadow: var(--drakima-shadow-cyan);
}

.drakima-navbar .navbar-toggler-icon {
    filter: invert(1) hue-rotate(130deg) saturate(2);
}

.drakima-navbar .navbar-collapse {
    align-items: center;
}

.drakima-nav-links {
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.8rem;
}

.drakima-nav-action {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0.52rem 0.72rem !important;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--drakima-cyan-soft) !important;
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.82rem;
    line-height: 1.1;
    text-decoration: none;
    text-shadow: 0 0 6px rgba(0, 255, 204, 0.34);
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.drakima-nav-action:hover,
.drakima-nav-action:focus-visible,
.drakima-nav-action.active,
.drakima-nav-action.show,
.drakima-nav-dropdown.show > .drakima-nav-action {
    border-color: var(--drakima-cyan);
    color: #04080a !important;
    background: var(--drakima-cyan);
    text-shadow: none;
    box-shadow: 0 0 14px rgba(0, 255, 204, 0.32);
    transform: translateY(-1px);
}

.drakima-nav-featured {
    border-color: var(--drakima-pink);
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.18);
}

.drakima-nav-featured:hover,
.drakima-nav-featured:focus-visible,
.drakima-nav-featured.active {
    border-color: var(--drakima-pink);
    color: #05050c !important;
    background: var(--drakima-pink);
    box-shadow: 0 0 18px rgba(255, 0, 255, 0.46);
}

.drakima-nav-admin {
    color: #ff7d96 !important;
}

.drakima-nav-admin:hover,
.drakima-nav-admin:focus-visible,
.drakima-nav-admin.active,
.drakima-nav-admin.show,
.drakima-nav-dropdown.show > .drakima-nav-admin {
    border-color: #ff5f7d;
    color: #090308 !important;
    background: #ff5f7d;
    box-shadow: 0 0 16px rgba(255, 95, 125, 0.4);
}

.drakima-navbar .dropdown-menu {
    min-width: 16.5rem;
    margin-top: 0.45rem;
    padding: 0.35rem;
    border: 1px solid var(--drakima-pink);
    border-radius: 4px;
    background: rgba(7, 8, 16, 0.99);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.72), var(--drakima-shadow-pink);
}

.drakima-navbar .dropdown-item {
    display: flex;
    min-height: 3.35rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.18rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 2px;
    color: var(--drakima-cyan-soft);
    font-family: "Orbitron", sans-serif;
    white-space: normal;
}

.drakima-navbar .dropdown-item span {
    font-size: 0.86rem;
}

.drakima-navbar .dropdown-item small {
    color: var(--drakima-muted);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.65rem;
    line-height: 1.25;
}

.drakima-navbar .dropdown-item:hover,
.drakima-navbar .dropdown-item:focus {
    border-color: rgba(0, 255, 204, 0.55);
    color: #04080a;
    background: var(--drakima-cyan);
}

.drakima-navbar .dropdown-item:hover small,
.drakima-navbar .dropdown-item:focus small {
    color: #10252a;
}

.drakima-account-nav {
    gap: 0.75rem;
    margin-left: 0.65rem;
}

.drakima-cart-trigger {
    position: relative;
    display: inline-flex;
    width: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    margin-right: 0;
    padding: .45rem !important;
    border: 1px solid rgba(0, 255, 217, .55);
    color: #38ffe6 !important;
}

.drakima-cart-trigger:hover,
.drakima-cart-trigger:focus-visible {
    color: #05070e !important;
    background: #19e0c5;
}

.drakima-cart-trigger svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.drakima-cart-label { display: none; }
.drakima-cart-count {
    position: absolute;
    top: -.45rem;
    right: -.45rem;
    display: inline-flex;
    min-width: 1.25rem;
    height: 1.25rem;
    align-items: center;
    justify-content: center;
    padding: 0 .2rem;
    border: 1px solid #05070e;
    border-radius: 999px;
    color: #fff;
    background: #ff168d;
    font: .58rem/1 var(--drakima-mono-font);
}

.drakima-notification-nav { position: relative; }
.drakima-notification-trigger {
    position: relative;
    display: inline-flex;
    width: 2.55rem;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    padding: .4rem !important;
    border: 1px solid rgba(0, 255, 204, .62);
    border-radius: 50%;
    color: var(--drakima-cyan) !important;
    background: rgba(6, 11, 18, .94);
}
.drakima-notification-trigger::after { display: none; }
.drakima-notification-trigger svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drakima-notification-trigger.is-warning { border-color: #ffbd45; color: #ffbd45 !important; box-shadow: 0 0 14px rgba(255, 189, 69, .32); }
.drakima-notification-trigger.is-critical { border-color: #ff3d72; color: #ff5f88 !important; box-shadow: 0 0 16px rgba(255, 61, 114, .42); }
.drakima-notification-trigger:hover,
.drakima-notification-trigger:focus-visible,
.drakima-notification-trigger.show { background: var(--drakima-cyan); color: #05080b !important; }
.drakima-notification-trigger.is-warning:hover,
.drakima-notification-trigger.is-warning:focus-visible,
.drakima-notification-trigger.is-warning.show { background: #ffbd45; }
.drakima-notification-trigger.is-critical:hover,
.drakima-notification-trigger.is-critical:focus-visible,
.drakima-notification-trigger.is-critical.show { background: #ff3d72; }
.drakima-notification-badge { position: absolute; top: -.4rem; right: -.45rem; min-width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 .2rem; border: 1px solid #05070e; border-radius: 999px; color: #fff; background: #ff168d; font: .58rem/1 var(--drakima-mono-font); }
.drakima-notification-label { display: none; font: .75rem/1 var(--drakima-mono-font); }
.drakima-navbar .drakima-notification-menu { width: min(25rem, calc(100vw - 1.5rem)); padding: 0; overflow: hidden; }
.drakima-notification-menu > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-bottom: 1px solid rgba(0, 255, 204, .3); background: rgba(0, 255, 204, .06); }
.drakima-notification-menu > header div { display: grid; }
.drakima-notification-menu > header small { color: var(--drakima-cyan); font: .58rem/1.2 var(--drakima-mono-font); }
.drakima-notification-menu > header strong { color: #f8fbff; font-size: 1rem; line-height: 1.35; text-shadow: 0 0 12px rgba(255, 255, 255, .12); }
.drakima-notification-menu > header > span { color: #d5e1ff; font-size: .76rem; }
.drakima-notification-preview-list { max-height: 28rem; overflow: auto; }
.drakima-notification-preview { display: grid; gap: .35rem; padding: .85rem 1rem; border-bottom: 1px solid rgba(127, 153, 213, .2); border-left: 3px solid transparent; background: rgba(5, 10, 27, .94); }
.drakima-notification-preview.is-unread { background: rgba(25, 45, 89, .92); }
.drakima-notification-preview.severity-warning { border-left-color: #ffbd45; }
.drakima-notification-preview.severity-critical { border-left-color: #ff3d72; }
.drakima-notification-preview.severity-success { border-left-color: var(--drakima-cyan); }
.drakima-notification-preview > div:first-child { display: flex; justify-content: space-between; gap: .75rem; color: #c6d6ff; font: .62rem/1.35 var(--drakima-mono-font); text-transform: uppercase; }
.drakima-notification-preview strong { color: #ffffff; font-size: .9rem; line-height: 1.4; }
.drakima-notification-preview p { margin: 0; color: #e0e8ff; font-size: .78rem; line-height: 1.55; }
.drakima-notification-preview-actions { display: flex; gap: .7rem; align-items: center; }
.drakima-notification-preview-actions form { margin: 0; }
.drakima-notification-preview-actions a,
.drakima-notification-preview-actions button { display: inline-flex; min-height: 2.25rem; align-items: center; padding: .35rem .2rem; border: 0; color: var(--drakima-cyan); background: none; font: .65rem/1.2 var(--drakima-mono-font); text-decoration: underline; }
.drakima-notification-empty { margin: 0; padding: 1.25rem 1rem; color: var(--drakima-muted); }
.drakima-notification-menu > footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: rgba(3, 7, 18, .98); }
.drakima-notification-menu > footer form { margin: 0; }
.drakima-notification-menu > footer a,
.drakima-notification-menu > footer button { display: inline-flex; min-height: 2.25rem; align-items: center; padding: .35rem .2rem; border: 0; color: var(--drakima-cyan); background: transparent; font: .7rem/1.2 var(--drakima-mono-font); text-decoration: underline; }

.drakima-notification-preview-actions :is(a, button):focus-visible,
.drakima-notification-menu > footer :is(a, button):focus-visible { outline: 2px solid var(--drakima-pink); outline-offset: 2px; }

.research-mode-retry { margin-left: .65rem; padding: .35rem .55rem; border: 1px solid currentColor; color: var(--drakima-cyan); background: rgba(0, 255, 204, .08); font: .66rem/1.2 var(--drakima-mono-font); text-transform: uppercase; }
.research-mode-retry:hover,
.research-mode-retry:focus-visible { background: var(--drakima-cyan); color: #020711; }

.account-notifications-page { padding-block: clamp(2rem, 5vw, 4rem); }
.account-notifications-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.account-notifications-heading h1 { margin: .2rem 0 .65rem; }
.account-notifications-summary { display: grid; gap: .2rem; min-width: 180px; padding: 1rem; border: 1px solid rgba(0, 255, 204, .4); background: rgba(5, 16, 38, .76); }
.account-notifications-summary strong { color: var(--drakima-cyan); }
.account-notifications-toolbar { margin-bottom: 1rem; }
.account-notification-composer { margin: 1rem 0 2rem; padding: 1rem; border: 1px solid rgba(255, 22, 141, .45); background: rgba(14, 12, 38, .82); }
.account-notification-composer > summary { display: flex; min-height: 44px; align-items: center; cursor: pointer; color: #ff82c6; font-family: var(--drakima-mono-font); }
.account-notification-composer .drakima-form { margin-top: 1rem; }
.account-notification-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.account-notification-list { display: grid; gap: .8rem; }
.account-notification-card { display: grid; gap: .65rem; padding: 1rem; border: 1px solid rgba(127, 153, 213, .35); border-left: 4px solid rgba(127, 153, 213, .5); background: rgba(8, 15, 39, .82); }
.account-notification-card.is-unread { background: rgba(19, 36, 77, .9); }
.account-notification-card.severity-warning { border-left-color: #ffbd45; }
.account-notification-card.severity-critical { border-left-color: #ff3d72; }
.account-notification-card.severity-success { border-left-color: var(--drakima-cyan); }
.account-notification-card > header { display: flex; justify-content: space-between; gap: 1rem; }
.account-notification-card > header div { display: grid; gap: .2rem; }
.account-notification-card > header span, .account-notification-card time { color: var(--drakima-muted); font: .65rem/1.3 var(--drakima-mono-font); text-transform: uppercase; }
.account-notification-card > p { margin: 0; }
.account-notification-card > footer { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; }
.account-notification-card > footer form { margin: 0; }

.drakima-account-trigger {
    display: inline-flex;
    width: 2.55rem;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.14rem !important;
    border: 1px solid var(--drakima-cyan);
    border-radius: 50%;
    color: var(--drakima-cyan) !important;
    background: rgba(6, 11, 18, 0.94);
    box-shadow: 0 0 12px rgba(0, 255, 204, 0.2);
    transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.drakima-account-trigger::after {
    display: none;
}

.drakima-account-avatar { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.drakima-account-initials { font: 0.68rem/1 var(--drakima-mono-font); letter-spacing: 0.04em; }

.drakima-account-trigger:hover,
.drakima-account-trigger:focus-visible,
.drakima-account-trigger.show,
.drakima-account-nav .show > .drakima-account-trigger {
    color: #05080b !important;
    background: var(--drakima-cyan);
    box-shadow: 0 0 18px rgba(0, 255, 204, 0.48);
}

.drakima-account-label {
    display: none;
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.78rem;
}

.drakima-navbar .drakima-account-menu {
    width: min(19rem, calc(100vw - 1.5rem));
}

.drakima-account-identity {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: -0.35rem -0.35rem 0.35rem;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid rgba(0, 255, 204, 0.3);
    background: rgba(0, 255, 204, 0.06);
}

.drakima-account-identity small {
    color: var(--drakima-cyan);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.64rem;
    text-transform: uppercase;
}

.drakima-account-identity strong {
    overflow-wrap: anywhere;
    color: var(--drakima-text);
    font-size: 0.82rem;
    font-weight: 500;
}
.drakima-account-identity > span { overflow-wrap: anywhere; color: var(--drakima-muted); font-size: 0.68rem; }

.drakima-auth-link {
    display: inline-flex;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.8rem !important;
    border: 1px solid rgba(0, 255, 204, 0.62);
    border-radius: 3px;
    color: var(--drakima-cyan) !important;
    font: 0.72rem/1 var(--drakima-mono-font);
    text-transform: uppercase;
}
.drakima-auth-link:hover,
.drakima-auth-link:focus-visible { color: #05080b !important; background: var(--drakima-cyan); }
.drakima-auth-register { border-color: rgba(255, 0, 255, 0.76); color: #ff8ed4 !important; }
.drakima-auth-register:hover,
.drakima-auth-register:focus-visible { background: var(--drakima-pink); }
.drakima-account-menu-divider {
    height: 1px;
    margin: 0.35rem 0;
    background: rgba(255, 0, 255, 0.3);
}

.drakima-account-logout {
    margin: 0;
}

@media (max-width: 1199.98px) {
    .drakima-nav-container {
        min-height: 3.7rem;
    }

    .drakima-navbar .navbar-collapse {
        margin-top: 0.35rem;
        padding: 0.7rem 0 0.85rem;
        border-top: 1px solid rgba(0, 255, 204, 0.2);
    }

    .drakima-nav-links {
        align-items: stretch;
        gap: 0.35rem;
        margin: 0;
    }

    .drakima-nav-action {
        width: 100%;
        justify-content: space-between;
        padding: 0.7rem 0.8rem !important;
        border-color: rgba(0, 255, 204, 0.24);
        background: rgba(7, 9, 18, 0.8);
    }

    .drakima-nav-featured {
        border-color: var(--drakima-pink);
    }

    .drakima-navbar .drakima-nav-menu {
        position: static !important;
        width: 100%;
        min-width: 0;
        margin: 0.25rem 0 0;
        transform: none !important;
        box-shadow: none;
    }

    .drakima-account-nav {
        display: grid;
        gap: 0.35rem;
        margin: 0.35rem 0 0;
    }

    .drakima-notification-trigger { width: 100%; min-height: 2.65rem; justify-content: flex-start; gap: .65rem; padding: 0 .8rem !important; border-radius: 4px; }
    .drakima-notification-label { display: inline; }
    .drakima-cart-trigger { width: 100%; min-height: 2.65rem; justify-content: flex-start; gap: .65rem; padding: 0 .8rem !important; }
    .drakima-cart-label { display: inline; font: .75rem/1 var(--drakima-mono-font); }
    .drakima-navbar .drakima-notification-menu { position: static !important; width: 100%; margin-top: .25rem; transform: none !important; }
    .account-notifications-heading { align-items: stretch; flex-direction: column; }
    .account-notifications-summary { min-width: 0; }
    .account-notification-form-grid { grid-template-columns: 1fr; }

    .drakima-account-trigger {
        width: 100%;
        min-height: 2.65rem;
        justify-content: flex-start;
        padding: 0 0.8rem !important;
        border-radius: 4px;
    }

    .drakima-account-label {
        display: inline;
    }

    .drakima-account-avatar,
    .drakima-account-initials { width: 2rem; height: 2rem; flex: 0 0 2rem; }

    .drakima-account-initials { display: inline-flex; align-items: center; justify-content: center; }

    .drakima-auth-link { width: 100%; justify-content: flex-start; }

    .drakima-navbar .drakima-account-menu {
        position: static !important;
        width: 100%;
        margin-top: 0.25rem;
        transform: none !important;
        box-shadow: none;
    }
}

.drakima-main-wrap {
    flex: 1 0 auto;
}

.drakima-footer {
    flex-shrink: 0;
    padding: 2rem 0 0;
    background: rgba(5, 5, 12, 0.94);
    border-top: 1px solid var(--drakima-line);
    color: var(--drakima-muted);
    font-size: 0.92rem;
}

.drakima-footer-grid {
    display: grid;
    grid-template-columns: minmax(15rem, 1.45fr) repeat(3, minmax(9rem, 1fr));
    gap: clamp(1.25rem, 3vw, 2.75rem);
    padding-bottom: 1.75rem;
}

.drakima-footer a {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    color: var(--drakima-cyan-soft);
    text-decoration: none;
}

.drakima-footer a:hover,
.drakima-footer a:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.drakima-footer-intro,
.drakima-footer-group {
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.drakima-footer-intro p {
    max-width: 34rem;
    margin: 0;
    line-height: 1.55;
}

.drakima-footer-brand,
.drakima-footer-group > strong {
    color: var(--drakima-text);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.drakima-footer-brand {
    color: var(--drakima-pink-soft) !important;
    font-size: 1.15rem;
}

.drakima-footer-group > strong {
    margin-bottom: 0.15rem;
    font-size: 0.78rem;
}

.drakima-footer-legal {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
    border-top: 1px solid rgba(0, 255, 204, 0.16);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.75rem;
}

.drakima-footer-legal > div {
    display: flex;
    gap: 0.65rem;
}

@media (max-width: 991.98px) {
    .drakima-footer-grid {
        grid-template-columns: minmax(14rem, 1.4fr) repeat(2, minmax(9rem, 1fr));
    }

    .drakima-footer-group:last-child {
        grid-column: 2 / -1;
    }
}

@media (max-width: 575.98px) {
    .drakima-footer-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .drakima-footer-group:last-child {
        grid-column: auto;
    }

    .drakima-footer-legal {
        align-items: flex-start;
        flex-direction: column;
    }
}

.drakima-page-shell {
    padding: 4rem 0;
}

.drakima-hero {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--drakima-line-cyan);
    background:
        radial-gradient(circle at 18% 24%, rgba(255, 0, 255, 0.18), transparent 30%),
        linear-gradient(120deg, rgba(5, 4, 14, 0.52), rgba(6, 12, 18, 0.72));
}

.drakima-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
    gap: 2rem;
    align-items: center;
}

.drakima-hero-copy {
    max-width: 780px;
}

.drakima-eyebrow,
.drakima-card-kicker {
    margin-bottom: 0.75rem;
    color: var(--drakima-cyan);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 255, 204, 0.45);
}

.drakima-hero h1 {
    margin: 0 0 1rem;
    color: var(--drakima-hot-pink);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: clamp(3.4rem, 9vw, 7rem);
    line-height: 0.95;
    text-shadow: 0 0 10px rgba(255, 0, 122, 0.9), 0 0 34px rgba(255, 0, 255, 0.52);
    text-transform: uppercase;
}

.drakima-hero-subtitle {
    max-width: 780px;
    color: var(--drakima-text);
    font-size: 1.18rem;
    line-height: 1.75;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.85);
}

.drakima-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.65rem;
}

.drakima-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.72rem 1rem;
    border: 1px solid var(--drakima-pink);
    border-radius: 6px;
    background: rgba(12, 11, 24, 0.88);
    color: var(--drakima-cyan) !important;
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.9rem;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: var(--drakima-shadow-pink);
    transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.drakima-button:hover {
    transform: translateY(-1px);
    background: rgba(255, 0, 255, 0.16);
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.44);
}

.drakima-button-primary {
    border-color: var(--drakima-cyan);
    color: #061012 !important;
    background: linear-gradient(90deg, var(--drakima-cyan), var(--drakima-cyan-soft));
    box-shadow: var(--drakima-shadow-cyan);
}

.drakima-button-primary:hover {
    background: linear-gradient(90deg, #ffffff, var(--drakima-cyan));
    color: #05050c !important;
}

.drakima-hero-visual {
    min-height: 420px;
    display: flex;
    align-items: end;
    justify-content: center;
    padding: 1rem;
}

.drakima-terminal-panel {
    width: min(100%, 460px);
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--drakima-line-cyan);
    border-left: 4px solid var(--drakima-cyan);
    background: rgba(0, 0, 0, 0.62);
    box-shadow: var(--drakima-shadow-cyan);
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.92rem;
}

.drakima-terminal-label {
    color: var(--drakima-hot-pink);
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.7);
}

.drakima-section-heading {
    max-width: 760px;
    margin-bottom: 1.5rem;
}

.drakima-section-heading h2 {
    color: var(--drakima-text);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: clamp(1.65rem, 4vw, 2.6rem);
}

.drakima-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.drakima-card,
.drakima-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--drakima-line);
    border-radius: 8px;
    background: var(--drakima-panel);
    box-shadow: var(--drakima-shadow-pink);
}

.drakima-card {
    min-height: 250px;
    padding: 1.15rem;
}

.drakima-card::before,
.drakima-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), transparent 45%, rgba(0, 255, 204, 0.08));
}

.drakima-card :is(h2, h3) {
    position: relative;
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 1.25rem;
    margin-bottom: 0.7rem;
}

.drakima-card p,
.drakima-panel p {
    position: relative;
    color: var(--drakima-muted);
    line-height: 1.65;
}

.drakima-card a {
    position: relative;
    display: inline-block;
    margin-top: 0.35rem;
    color: var(--drakima-cyan);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    text-decoration: none;
    text-transform: uppercase;
}

.drakima-card a:hover {
    color: #ffffff;
    text-shadow: 0 0 8px var(--drakima-cyan);
}

.drakima-panel-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.drakima-workflow-panel {
    position: relative;
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid var(--drakima-line-cyan);
    background: rgba(5, 14, 28, 0.78);
    box-shadow: inset 0 0 18px rgba(17, 224, 255, 0.08);
}

.drakima-workflow-panel h2 {
    margin: 0;
    color: var(--drakima-text);
}

.drakima-workflow-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}

.drakima-workflow-status span {
    padding: 0.32rem 0.5rem;
    border: 1px solid var(--drakima-line);
    color: var(--drakima-cyan-soft);
    background: rgba(255, 255, 255, 0.04);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.78rem;
}

.drakima-meta {
    color: var(--drakima-cyan-soft) !important;
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.9rem;
}

.drakima-form label,
.drakima-check-row {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
}

.drakima-form .form-control {
    border: 1px solid var(--drakima-line-cyan);
    background: rgba(0, 0, 0, 0.42);
    color: #f7f4ff;
    caret-color: var(--drakima-cyan);
    -webkit-text-fill-color: #f7f4ff;
}

.drakima-form .form-control:focus {
    border-color: var(--drakima-cyan);
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    -webkit-text-fill-color: #fff;
    box-shadow: var(--drakima-shadow-cyan);
}

.identity-access-card .form-control::placeholder {
    color: rgba(224, 219, 248, 0.62);
    opacity: 1;
    -webkit-text-fill-color: rgba(224, 219, 248, 0.62);
}

.identity-access-card .form-control:-webkit-autofill,
.identity-access-card .form-control:-webkit-autofill:hover,
.identity-access-card .form-control:-webkit-autofill:focus {
    caret-color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #070914 inset;
    box-shadow: 0 0 0 1000px #070914 inset;
}

.drakima-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.drakima-markdown {
    position: relative;
    margin-top: 2rem;
    color: var(--drakima-text);
    line-height: 1.75;
}

.drakima-markdown h1,
.drakima-markdown h2,
.drakima-markdown h3 {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
}

.drakima-markdown blockquote {
    padding: 1rem;
    border-left: 3px solid var(--drakima-hot-pink);
    background: rgba(255, 0, 122, 0.12);
}

.drakima-markdown code {
    color: var(--drakima-cyan);
}

.drakima-storage-section {
    margin-top: 2rem;
}

.drakima-storage-section h2 {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    margin-bottom: 1rem;
}

.drakima-media-preview {
    position: relative;
    margin-top: 1.5rem;
}

.drakima-media-preview img {
    max-width: min(100%, 720px);
    max-height: 520px;
    object-fit: contain;
    border: 1px solid var(--drakima-line-cyan);
    box-shadow: var(--drakima-shadow-cyan);
}

.drakima-media-thumb {
    position: relative;
    margin: 0.75rem 0;
}

.drakima-media-thumb img {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    border: 1px solid var(--drakima-line-cyan);
}

.drakima-journal-card-with-cover {
    display: flex;
    flex-direction: column;
}

.drakima-journal-publication-card {
    border-color: color-mix(in srgb, var(--journal-accent, var(--drakima-cyan)) 72%, transparent);
    box-shadow: 0 0 24px color-mix(in srgb, var(--journal-primary, var(--drakima-magenta)) 46%, transparent);
}

.drakima-journal-publication-card::before {
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--journal-primary, var(--drakima-magenta)), var(--journal-accent, var(--drakima-cyan)));
    box-shadow: 0 0 16px color-mix(in srgb, var(--journal-accent, var(--drakima-cyan)) 50%, transparent);
}

.drakima-journal-publication-card :is(h2, a),
.drakima-journal-publication-hero .drakima-eyebrow {
    color: var(--journal-accent, var(--drakima-cyan));
}

.drakima-journal-publication-hero {
    border-color: color-mix(in srgb, var(--journal-accent, var(--drakima-cyan)) 72%, transparent);
    box-shadow: 0 0 28px color-mix(in srgb, var(--journal-primary, var(--drakima-magenta)) 38%, transparent);
}

.journal-color-style-editor {
    padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--journal-accent, var(--drakima-cyan)) 62%, transparent);
    border-radius: 8px;
    background: rgba(5, 8, 20, 0.72);
}

.journal-color-style-preview {
    display: grid;
    grid-template-columns: 34px 34px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding: 0.85rem;
    border-left: 5px solid var(--journal-accent, var(--drakima-cyan));
    background: linear-gradient(90deg, color-mix(in srgb, var(--journal-primary, #27113f) 58%, #070812), rgba(7, 8, 18, 0.92));
    box-shadow: 0 0 16px color-mix(in srgb, var(--journal-primary, var(--drakima-magenta)) 34%, transparent);
}

.journal-color-style-preview p {
    margin: 0.2rem 0 0;
}

.journal-color-swatch {
    width: 32px;
    height: 32px;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 50%;
}

.journal-color-swatch-primary { background: var(--journal-primary, #27113f); }
.journal-color-swatch-accent { background: var(--journal-accent, #ff2bbd); }

.drakima-journal-cover {
    position: relative;
    margin: 1.5rem 0 2rem;
}

.drakima-journal-cover img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    border: 1px solid var(--drakima-line-cyan);
    box-shadow: var(--drakima-shadow-cyan);
}

.drakima-journal-cover-thumb {
    position: relative;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 1rem;
}

.drakima-journal-cover-thumb img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: contain;
    display: block;
    border: 1px solid var(--drakima-line-cyan);
    box-shadow: var(--drakima-shadow-cyan);
}

.drakima-media-select-note {
    margin-top: 0.45rem;
    font-size: 0.9rem;
}

.gynoid-grid {
    align-items: stretch;
}

.gynoid-card {
    display: flex;
    flex-direction: column;
}

.gynoid-portrait {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 1.25rem;
}

.gynoid-portrait img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 460px;
    object-fit: contain;
    border: 1px solid var(--drakima-line-cyan);
    box-shadow: var(--drakima-shadow-cyan);
}

.gynoid-portrait-small img {
    max-height: 260px;
}

.gynoid-banner {
    position: relative;
    margin-bottom: 1.5rem;
}

.gynoid-banner img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: cover;
    border: 1px solid var(--drakima-line-cyan);
    box-shadow: var(--drakima-shadow-cyan);
}

.gynoid-profile-layout {
    position: relative;
    display: grid;
    grid-template-columns: minmax(180px, 320px) 1fr;
    gap: 1.5rem;
    align-items: start;
}

.gynoid-conversation-invite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin: 2rem 0;
    padding: 1.4rem;
    border: 1px solid rgba(0, 255, 220, 0.5);
    background: linear-gradient(135deg, rgba(0, 255, 220, 0.08), rgba(255, 36, 185, 0.08));
}

.gynoid-conversation-invite h2,
.gynoid-conversation-invite p {
    margin-bottom: 0.5rem;
}

.gynoid-conversation-invite-actions {
    display: grid;
    flex: 0 0 auto;
    gap: 0.7rem;
    justify-items: center;
}

.gynoid-conversation-page {
    min-height: calc(100vh - 6rem);
}

.gynoid-conversation-header,
.gynoid-conversation-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
    gap: 1rem;
}

.gynoid-conversation-header {
    align-items: center;
    margin-bottom: 1rem;
}

.gynoid-conversation-identity {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.gynoid-conversation-identity img {
    width: 7rem;
    height: 7rem;
    border: 1px solid var(--drakima-cyan);
    border-radius: 50%;
    object-fit: cover;
    object-position: top center;
}

.gynoid-conversation-identity h1 {
    margin: 0.15rem 0;
}

.gynoid-conversation-economy {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border-left: 3px solid var(--drakima-pink);
    background: rgba(4, 14, 34, 0.72);
}

.gynoid-conversation-notice {
    margin: 0 0 1rem;
    padding: 0.8rem 1rem;
    border: 1px solid var(--drakima-cyan);
    background: rgba(0, 255, 220, 0.08);
}

.gynoid-conversation-error {
    border-color: var(--drakima-pink);
    background: rgba(255, 36, 185, 0.1);
}

.gynoid-conversation-console {
    min-height: 42rem;
}

.gynoid-conversation-transcript {
    display: grid;
    align-content: start;
    gap: 0.9rem;
    min-height: 28rem;
    max-height: 58vh;
    padding: 1rem;
    overflow-y: auto;
    background: rgba(2, 6, 19, 0.62);
}

.gynoid-conversation-empty {
    align-self: center;
    max-width: 40rem;
    margin: auto;
    text-align: center;
}

.gynoid-conversation-message {
    max-width: 82%;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(0, 255, 220, 0.45);
    background: rgba(10, 32, 66, 0.85);
}

.gynoid-conversation-message.is-member {
    justify-self: end;
    border-color: rgba(255, 36, 185, 0.55);
    background: rgba(62, 10, 66, 0.72);
}

.gynoid-conversation-message header {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
    color: var(--drakima-cyan);
    font-size: 0.78rem;
}

.gynoid-conversation-message.is-member header {
    color: var(--drakima-pink);
}

.gynoid-conversation-message time {
    margin-left: auto;
    opacity: 0.7;
}

.gynoid-conversation-message p {
    margin: 0;
    white-space: pre-wrap;
}

.gynoid-conversation-composer {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.gynoid-conversation-composer textarea,
.gynoid-conversation-delete input {
    width: 100%;
    border: 1px solid rgba(0, 255, 220, 0.65);
    background: rgba(2, 7, 20, 0.92);
    color: #f6f1ff;
}

.gynoid-conversation-composer textarea {
    min-height: 7rem;
    padding: 0.8rem;
    resize: vertical;
}

.gynoid-conversation-composer > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.gynoid-conversation-controls {
    align-self: start;
    display: grid;
    gap: 1rem;
}

.gynoid-conversation-controls h2,
.gynoid-conversation-controls p,
.gynoid-conversation-controls dl {
    margin: 0;
}

.gynoid-conversation-controls dl > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0, 255, 220, 0.2);
}

.gynoid-conversation-controls form,
.gynoid-conversation-controls .drakima-button {
    width: 100%;
}

.gynoid-conversation-delete {
    border-top: 1px solid rgba(255, 36, 185, 0.35);
    padding-top: 0.8rem;
}

.gynoid-conversation-delete form {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.8rem;
}

@media (max-width: 900px) {
    .gynoid-conversation-invite,
    .gynoid-conversation-composer > div {
        align-items: stretch;
        flex-direction: column;
    }

    .gynoid-conversation-header,
    .gynoid-conversation-layout {
        grid-template-columns: 1fr;
    }

    .gynoid-conversation-message {
        max-width: 94%;
    }
}

.gynoid-theme-section {
    position: relative;
    margin-top: 2rem;
}

.gynoid-gallery-section {
    position: relative;
    margin-top: 2rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(0, 255, 204, 0.24);
}

.gynoid-section-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 1rem;
}

.gynoid-theme-section h2 {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
}

.gynoid-gallery-section h2 {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    margin-bottom: 0;
}

.gynoid-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.gynoid-gallery-card {
    position: relative;
    display: grid;
    overflow: hidden;
    border: 1px solid var(--drakima-line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(14, 3, 26, 0.82), rgba(3, 12, 18, 0.9));
    box-shadow: var(--drakima-shadow-cyan);
}

.gynoid-gallery-link,
.gynoid-theme-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.gynoid-gallery-link {
    display: grid;
    grid-template-rows: 9rem minmax(0, 1fr);
    height: 100%;
}

.gynoid-gallery-link:hover h3,
.gynoid-theme-card-link:hover h3 {
    color: var(--drakima-hot-pink);
}

.gynoid-gallery-card-locked {
    border-color: rgba(255, 0, 216, 0.42);
}

.gynoid-gallery-card-locked .gynoid-gallery-image {
    filter: grayscale(0.7) brightness(0.55);
}

.gynoid-gallery-image {
    position: relative;
    min-height: 0;
    background: rgba(5, 2, 10, 0.88);
}

.gynoid-gallery-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-bottom: 1px solid rgba(0, 255, 204, 0.28);
    background: linear-gradient(180deg, transparent 55%, rgba(5, 2, 10, 0.78));
    pointer-events: none;
}

.gynoid-gallery-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gynoid-gallery-image-empty {
    background:
        linear-gradient(135deg, rgba(255, 0, 122, 0.18), transparent 48%),
        linear-gradient(45deg, rgba(0, 255, 204, 0.12), transparent 50%),
        rgba(5, 2, 10, 0.88);
}

.gynoid-gallery-body {
    display: grid;
    align-content: start;
    gap: 0.55rem;
    padding: 0.85rem;
}

.gynoid-gallery-body h3 {
    margin: 0;
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 1rem;
}

.gynoid-gallery-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.gynoid-theme-grid {
    margin-top: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.gynoid-theme-spotlight {
    position: relative;
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(280px, 1.05fr);
    gap: 1rem;
    align-items: stretch;
    margin: 1.25rem 0 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 204, 0.38);
    border-radius: 8px;
    background:
        linear-gradient(115deg, rgba(5, 2, 10, 0.9), rgba(18, 3, 31, 0.76) 52%, rgba(0, 255, 204, 0.08)),
        rgba(5, 2, 10, 0.88);
    box-shadow: 0 0 30px rgba(0, 255, 204, 0.16), 0 0 42px rgba(255, 0, 122, 0.12);
}

.gynoid-theme-spotlight-image {
    position: relative;
    min-height: 18rem;
    background: rgba(5, 2, 10, 0.9);
}

.gynoid-theme-spotlight-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 50%, rgba(5, 2, 10, 0.72));
    pointer-events: none;
}

.gynoid-theme-spotlight-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gynoid-theme-spotlight-body {
    display: grid;
    align-content: center;
    gap: 0.85rem;
    min-width: 0;
    padding: clamp(1rem, 2.5vw, 1.5rem);
}

.gynoid-theme-spotlight-body h3 {
    margin: 0;
    color: var(--drakima-text);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.1;
}

.gynoid-theme-spotlight-body p {
    margin: 0;
    max-width: 62ch;
}

.gynoid-theme-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.gynoid-theme-stat-row span {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid rgba(0, 255, 204, 0.38);
    border-radius: 6px;
    background: rgba(0, 255, 204, 0.08);
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1.1;
}

.gynoid-theme-card {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
}

.gynoid-theme-card-unlocked {
    border-color: rgba(255, 211, 92, 0.6);
}

.gynoid-theme-card-blocked {
    border-color: rgba(255, 0, 122, 0.58);
}

.theme-card-topline,
.theme-wallet-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: space-between;
    align-items: center;
}

.theme-wallet-strip {
    justify-content: flex-start;
    margin: 0.75rem 0 1rem;
}

.gynoid-theme-square-image {
    position: absolute;
    inset: 0;
    background: rgba(5, 2, 10, 0.86);
}

.gynoid-theme-square-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 2, 10, 0.16) 15%, rgba(5, 2, 10, 0.52) 52%, rgba(5, 2, 10, 0.96) 100%);
    pointer-events: none;
}

.gynoid-theme-square-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gynoid-theme-square-body {
    position: absolute;
    inset: auto 0 0;
    display: grid;
    gap: 0.45rem;
    z-index: 2;
    padding: 1rem;
}

.gynoid-theme-square-body h2,
.gynoid-theme-square-body h3,
.public-theme-hero-body h1 {
    overflow-wrap: anywhere;
}

.gynoid-theme-square-body h2,
.gynoid-theme-square-body h3 {
    margin: 0;
    color: #fff;
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 1rem;
    line-height: 1.15;
}

.experience-catalog-heading > p:last-child {
    max-width: 72ch;
}

.experience-catalog-card {
    height: 100%;
}

.gynoid-theme-square-body p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.78rem;
}

.theme-card-price {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.72rem;
}

.theme-card-premise {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
}

.theme-card-action {
    justify-self: start;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(0, 255, 204, 0.66);
    border-radius: 4px;
    background: rgba(0, 10, 18, 0.78);
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.72rem;
}

.gynoid-theme-card-link:hover .gynoid-theme-square-image img {
    filter: brightness(0.82);
    transform: scale(1.02);
}

.gynoid-theme-square-image img {
    transition: filter 160ms ease, transform 160ms ease;
}

.gynoid-theme-background {
    position: relative;
    width: fit-content;
    max-width: 100%;
}

.gynoid-theme-background img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    border: 1px solid var(--drakima-line-cyan);
    box-shadow: var(--drakima-shadow-cyan);
}

.gynoid-theme-background-large img {
    max-height: 420px;
}

.theme-cost-badge {
    position: relative;
    display: inline-block;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--drakima-line-cyan);
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.85rem;
    background: rgba(0, 255, 204, 0.08);
}

.theme-state-badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid rgba(0, 255, 204, 0.34);
    border-radius: 6px;
    color: var(--drakima-cyan-soft);
    background: rgba(0, 255, 204, 0.08);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.72rem;
    line-height: 1.1;
}

.theme-economy-panel {
    display: grid;
    gap: 0.45rem;
    padding: 0.75rem;
    border: 1px solid rgba(0, 255, 204, 0.28);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
}

.theme-economy-panel > div {
    display: flex;
    gap: 0.6rem;
    justify-content: space-between;
    align-items: baseline;
}

.theme-economy-panel span,
.theme-economy-panel strong {
    font-family: "VCR OSD Mono", "Courier New", monospace;
    letter-spacing: 0;
}

.theme-economy-panel span {
    color: var(--drakima-muted);
    font-size: 0.72rem;
}

.theme-economy-panel strong {
    color: var(--drakima-cyan-soft);
    font-size: 0.95rem;
}

.theme-economy-panel p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.86rem;
    line-height: 1.45;
}

.theme-economy-ready {
    border-color: rgba(0, 255, 204, 0.44);
}

.theme-economy-unlocked {
    border-color: rgba(255, 211, 92, 0.54);
    background: rgba(255, 211, 92, 0.07);
}

.theme-economy-unlocked strong {
    color: #ffe089;
}

.theme-economy-blocked {
    border-color: rgba(255, 0, 122, 0.54);
    background: rgba(255, 0, 122, 0.08);
}

.theme-economy-blocked strong {
    color: var(--drakima-hot-pink);
}

.theme-locked-note {
    position: relative;
    color: var(--drakima-muted);
    font-size: 0.95rem;
}

.wallet-balance-card {
    border-color: var(--drakima-line-cyan);
}

.credit-badge,
.unlock-status {
    position: relative;
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--drakima-line-cyan);
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    background: rgba(0, 255, 204, 0.08);
}

.theme-unlock-actions {
    position: relative;
    margin-top: auto;
}

.public-theme-profile {
    display: grid;
    gap: 1.25rem;
}

.public-theme-hero {
    display: grid;
    grid-template-columns: minmax(260px, 0.95fr) minmax(280px, 1.05fr);
    gap: 1rem;
    align-items: stretch;
}

.public-theme-hero-image {
    position: relative;
    min-height: 20rem;
    overflow: hidden;
    border: 1px solid var(--drakima-line-cyan);
    border-radius: 8px;
    background: rgba(5, 2, 10, 0.9);
    box-shadow: var(--drakima-shadow-cyan);
}

.public-theme-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-theme-hero-body,
.public-theme-action-panel {
    display: grid;
    align-content: center;
    gap: 0.85rem;
}

.public-theme-hero-body h1 {
    margin: 0;
    color: var(--drakima-text);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 1.05;
}

.public-theme-action-panel {
    border: 1px solid rgba(0, 255, 204, 0.28);
    border-radius: 8px;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.22);
}

.public-theme-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
}

.public-theme-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.public-theme-mode-section {
    display: grid;
    gap: 0.85rem;
    padding-top: 0.25rem;
}

.public-theme-mode-section h2 {
    margin: 0;
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
}

.public-theme-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.public-theme-mode {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(0, 255, 204, 0.34);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.26);
}

.public-theme-mode-disabled {
    border-color: rgba(255, 255, 255, 0.16);
    opacity: 0.72;
}

.public-theme-mode-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
}

.public-theme-mode-head span,
.public-theme-mode-head em {
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.72rem;
    font-style: normal;
}

.public-theme-mode-head span {
    color: var(--drakima-hot-pink);
    text-transform: uppercase;
}

.public-theme-mode-head em {
    padding: 0.2rem 0.45rem;
    border: 1px solid rgba(0, 255, 204, 0.32);
    border-radius: 6px;
    color: var(--drakima-cyan-soft);
    background: rgba(0, 255, 204, 0.07);
}

.public-theme-mode h3 {
    margin: 0;
    color: var(--drakima-text);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 1.05rem;
}

.public-theme-mode p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
}

.public-theme-mode ul {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding-left: 1.15rem;
    color: var(--drakima-muted);
    font-size: 0.86rem;
}

.public-theme-mode .drakima-button,
.public-theme-mode .unlock-status {
    justify-self: start;
    margin-top: auto;
}

.public-theme-dossier {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-block: 1px solid rgba(0, 255, 204, 0.25);
}

.public-theme-dossier > div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.9rem;
    border-right: 1px solid rgba(0, 255, 204, 0.18);
}

.public-theme-dossier > div:last-child {
    border-right: 0;
}

.public-theme-dossier span,
.public-theme-dossier strong,
.public-theme-dossier small {
    overflow-wrap: anywhere;
}

.public-theme-dossier span {
    color: var(--drakima-hot-pink);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.68rem;
    text-transform: uppercase;
}

.public-theme-dossier strong {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.86rem;
}

.public-theme-dossier small {
    color: var(--drakima-muted);
}

.public-theme-memory-section {
    display: grid;
    gap: 1rem;
}

.public-theme-memory-section .gynoid-gallery-card {
    max-width: none;
}

.public-theme-memory-card {
    grid-template-columns: minmax(240px, 0.8fr) minmax(280px, 1.2fr);
}

.public-theme-memory-card .gynoid-gallery-image {
    min-height: 18rem;
}

.transaction-list {
    display: grid;
    gap: 1rem;
}

.credit-wallet-page,
.credit-admin-page { min-height: 100vh; }
.credit-wallet-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(0, 255, 204, 0.32); }
.credit-wallet-header h1 { margin: 0.35rem 0 0.55rem; color: var(--drakima-text); font-family: var(--drakima-mono-font); font-size: clamp(2.25rem, 6vw, 4.7rem); }
.credit-wallet-header > div:first-child > p:last-child { max-width: 760px; margin-bottom: 0; color: var(--drakima-muted); line-height: 1.65; }
.credit-wallet-balance { display: grid; grid-template-columns: auto auto; flex: 0 0 auto; min-width: 15rem; padding: 0.9rem 1rem; border-left: 3px solid var(--drakima-cyan); background: rgba(0, 255, 204, 0.07); }
.credit-wallet-balance span { grid-column: 1 / -1; color: var(--drakima-muted); font-size: 0.68rem; text-transform: uppercase; }
.credit-wallet-balance strong { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 2.4rem; line-height: 1; }
.credit-wallet-balance em { align-self: end; padding: 0 0 0.25rem 0.4rem; color: var(--drakima-cyan-soft); font-style: normal; }
.credit-wallet-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1rem; padding: 0.8rem 1rem; border: 1px solid rgba(240, 177, 58, 0.42); background: rgba(240, 177, 58, 0.07); }
.credit-wallet-notice strong { color: #f0b13a; font-family: var(--drakima-mono-font); text-transform: uppercase; }
.credit-wallet-notice span { flex: 1 1 28rem; color: var(--drakima-muted); }
.credit-wallet-notice a { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 0.72rem; text-transform: uppercase; }
.credit-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; padding-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 0, 255, 0.28); }
.credit-section-heading h2 { margin: 0.2rem 0 0; color: var(--drakima-text); font-family: var(--drakima-mono-font); }
.credit-section-heading > span { color: var(--drakima-muted); font-family: var(--drakima-mono-font); font-size: 0.68rem; text-transform: uppercase; }
.credit-pack-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.credit-pack-card { position: relative; display: grid; align-content: start; gap: 0.75rem; min-width: 0; padding: 1rem; border: 1px solid rgba(0, 255, 204, 0.34); border-radius: 6px; background: rgba(5, 5, 14, 0.88); }
.credit-pack-card.is-featured { border-color: #f0b13a; box-shadow: 0 0 20px rgba(240, 177, 58, 0.15); }
.credit-pack-card.is-inactive { opacity: 0.62; }
.credit-pack-card h3 { margin: 0; color: var(--drakima-text); font-family: var(--drakima-mono-font); font-size: 1.15rem; }
.credit-pack-card > p:not(.drakima-card-kicker) { min-height: 3.2em; margin: 0; color: var(--drakima-muted); line-height: 1.55; }
.credit-pack-card .drakima-button { justify-self: start; margin-top: auto; }
.credit-pack-card .drakima-button:disabled { cursor: not-allowed; opacity: 0.45; }
.credit-pack-featured { position: absolute; top: 0.7rem; right: 0.7rem; padding: 0.2rem 0.4rem; border: 1px solid rgba(240, 177, 58, 0.62); color: #f0b13a; background: #09070c; font-family: var(--drakima-mono-font); font-size: 0.6rem; text-transform: uppercase; }
.credit-pack-status { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--drakima-muted); font-family: var(--drakima-mono-font); font-size: 0.62rem; text-transform: uppercase; }
.credit-pack-status strong { color: #f0b13a; }
.credit-pack-value { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.35rem; padding-top: 0.7rem; border-top: 1px solid rgba(154, 143, 202, 0.18); }
.credit-pack-value strong { color: var(--drakima-cyan); font-family: var(--drakima-mono-font); font-size: 2rem; line-height: 1; }
.credit-pack-value span { color: var(--drakima-cyan-soft); }
.credit-pack-value em { color: var(--drakima-text); font-family: var(--drakima-mono-font); font-size: 0.8rem; font-style: normal; }
.credit-unlock-list { border-block: 1px solid rgba(0, 255, 204, 0.22); }
.credit-unlock-list article { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0.4rem; border-bottom: 1px solid rgba(154, 143, 202, 0.16); }
.credit-unlock-list article:last-child { border-bottom: 0; }
.credit-unlock-list strong, .credit-unlock-list span { display: block; }
.credit-unlock-list strong { color: var(--drakima-text); }
.credit-unlock-list span, .credit-unlock-list time { color: var(--drakima-muted); font-size: 0.75rem; }
.credit-ledger-table td { vertical-align: top; }
.credit-ledger-table td strong, .credit-ledger-table td small { display: block; }
.credit-ledger-table td small { max-width: 25rem; margin-top: 0.2rem; overflow-wrap: anywhere; color: var(--drakima-muted); }
.credit-ledger-amount { display: inline-block; min-width: 3.5rem; font-family: var(--drakima-mono-font); font-weight: 700; }
.credit-ledger-amount.is-credit { color: #8df77b; }
.credit-ledger-amount.is-debit { color: #ff9aad; }
.credit-ledger-state { display: inline-block; padding: 0.2rem 0.4rem; border: 1px solid currentColor; font-family: var(--drakima-mono-font); font-size: 0.62rem; text-transform: uppercase; }
.credit-ledger-state.is-reconciled { color: #8df77b; }
.credit-ledger-state.is-drifted { color: #ff9aad; }
.credit-admin-actions { margin-bottom: 2rem; }

.community-participation-page { min-height: 100vh; }
.community-participation-filters { margin-bottom: 1.25rem; }
.community-participation-filters .is-active { background: var(--drakima-cyan); color: #020609; }
.community-participation-message { margin-bottom: 1rem; padding: 0.8rem 1rem; }
.community-participation-message.drakima-status-error { border-color: #ff4a87; color: #ffc0d5; background: rgba(75, 5, 36, 0.55); }
.community-participation-list { display: grid; gap: 1rem; }
.community-participation-item { display: grid; gap: 1rem; }
.community-participation-item-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.community-participation-item-header h2 { margin: 0.2rem 0; font-size: 1.35rem; }
.community-participation-context { display: grid; grid-template-columns: minmax(12rem, 0.7fr) minmax(18rem, 1.3fr); gap: 1rem; }
.community-participation-context > div,
.community-participation-context blockquote { margin: 0; padding: 0.85rem; border-left: 2px solid var(--drakima-cyan); background: rgba(3, 8, 22, 0.72); }
.community-participation-context span { display: block; color: var(--drakima-cyan); font-size: 0.78rem; text-transform: uppercase; }
.community-participation-context strong,
.community-participation-context p { display: block; margin: 0.35rem 0; }
.community-participation-review-form,
.community-participation-dismiss-form { display: grid; gap: 0.75rem; }
.community-participation-review-form label,
.community-participation-dismiss-form label { display: grid; gap: 0.35rem; }
.community-participation-review-form textarea,
.community-participation-review-form input,
.community-participation-dismiss-form input { width: 100%; }
.community-participation-generate-form { margin: 0; }
.community-participation-failure { margin: 0; padding: 0.7rem; border-left: 2px solid #ff4a87; color: #ffc0d5; background: rgba(75, 5, 36, 0.35); }
.community-participation-closed { margin: 0; color: var(--drakima-cyan); }

@media (max-width: 720px) {
    .community-participation-item-header,
    .community-participation-context { display: grid; grid-template-columns: 1fr; }
}
.credit-pack-editor-shell { max-width: 900px; }
.credit-pack-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.credit-pack-form-grid .is-wide { grid-column: 1 / -1; }
.credit-pack-form-grid label { display: block; margin-bottom: 0.35rem; color: var(--drakima-cyan-soft); }
.credit-pack-form-grid input, .credit-pack-form-grid textarea { width: 100%; padding: 0.7rem; border: 1px solid rgba(0, 255, 204, 0.42); color: var(--drakima-text); background: #05050d; }
.credit-pack-checks { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.credit-pack-checks label { display: flex; align-items: center; gap: 0.45rem; color: var(--drakima-muted); }

@media (max-width: 767.98px) {
    .credit-wallet-header { align-items: stretch; flex-direction: column; }
    .credit-wallet-balance { min-width: 0; }
    .credit-section-heading { align-items: flex-start; flex-direction: column; }
    .credit-pack-form-grid { grid-template-columns: 1fr; }
    .credit-pack-form-grid .is-wide { grid-column: 1; }
    .credit-unlock-list article { align-items: flex-start; flex-direction: column; }
}

.vn-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--drakima-line-cyan);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.78);
    box-shadow: var(--drakima-shadow-cyan);
    padding: 1rem;
}

.vn-hud {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.vn-hud h1 {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    margin-bottom: 0.35rem;
}

.vn-runtime-controls {
    position: relative;
    z-index: 260;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 1rem;
}

.vn-runtime-controls label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.78rem;
}

.vn-runtime-controls select {
    min-height: 2.35rem;
    border: 1px solid var(--drakima-line-cyan);
    border-radius: 4px;
    background: rgba(5, 2, 10, 0.92);
    color: var(--drakima-text);
    padding: 0.35rem 0.55rem;
    font: inherit;
}

.vn-meter-panel {
    position: relative;
    z-index: 260;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: -0.35rem 0 1rem;
}

.vn-meter-panel span {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    min-height: 1.9rem;
    padding: 0.3rem 0.55rem;
    border: 1px solid rgba(0, 255, 204, 0.38);
    border-radius: 6px;
    background: rgba(0, 255, 204, 0.08);
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.75rem;
    line-height: 1.1;
}

.vn-meter-panel strong {
    color: var(--drakima-text);
    font-weight: 700;
}

.vn-shell:fullscreen,
.ai-vn-shell:fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    border-radius: 0;
    overflow: auto;
    background: #030108;
}

.vn-shell:fullscreen .vn-stage,
.ai-vn-shell:fullscreen .ai-vn-stage {
    min-height: calc(100vh - 13rem);
}

.vn-stage {
    position: relative;
    min-height: clamp(420px, 68vh, 720px);
    overflow: hidden;
    border: 1px solid var(--drakima-line);
    background: #05020a;
}

.vn-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vn-background-placeholder {
    background:
        linear-gradient(135deg, rgba(255, 0, 122, 0.22), transparent 44%),
        linear-gradient(45deg, rgba(0, 255, 204, 0.14), transparent 52%),
        #08040f;
}

/*
 * Published Visual Novels render immutable scene-layout snapshots through the
 * shared stage partial. Keep these runtime rules in the public stylesheet: the
 * admin stylesheet also styles its authoring canvas, but is intentionally not
 * shipped to ordinary players.
 */
.vn-stage .drakima-layout-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    min-height: inherit;
}

.vn-stage .drakima-layout-stage-item {
    position: absolute;
    display: grid;
    place-items: center;
    min-width: 28px;
    min-height: 28px;
    transform-origin: top left;
    will-change: transform, left, top;
}

.vn-stage .drakima-layout-stage-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.vn-stage .drakima-layout-role-background {
    overflow: hidden;
}

.vn-stage .drakima-layout-role-background img {
    object-fit: cover;
}

.vn-stage .drakima-layout-role-charactersprite {
    overflow: visible;
    filter: drop-shadow(0 0 18px rgba(0, 255, 204, 0.35));
}

.vn-stage .drakima-layout-role-charactersprite img {
    object-fit: contain;
    transform-origin: center bottom;
    transition: filter 220ms ease;
}

.vn-stage .drakima-layout-role-charactersprite[data-vn-character-adjustable] {
    cursor: grab;
    touch-action: none;
    outline: none;
}

.vn-stage .drakima-layout-role-charactersprite[data-vn-character-adjustable]:focus-visible {
    filter: drop-shadow(0 0 20px rgba(0, 255, 204, 0.72));
}

.vn-stage .drakima-layout-role-charactersprite[data-vn-character-adjustable].is-dragging {
    cursor: grabbing;
}

.vn-stage .drakima-layout-stage-vn-shell .drakima-layout-stage-marker-item {
    display: none;
}

.drakima-grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.vn-asset-preview-audio {
    display: grid;
    place-items: center;
    min-height: 12rem;
    padding: 1rem;
    background:
        linear-gradient(135deg, rgba(0, 255, 204, 0.1), transparent 42%),
        rgba(5, 2, 10, 0.86);
}

.vn-asset-preview-audio audio {
    width: 100%;
}

.vn-character {
    position: absolute;
    right: clamp(0.5rem, 5vw, 4rem);
    bottom: 0;
    max-width: min(48%, 440px);
    max-height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(0, 255, 204, 0.42));
    transition: opacity 140ms ease;
}

.vn-dialogue-box {
    position: absolute;
    left: clamp(0.75rem, 3vw, 2rem);
    right: clamp(0.75rem, 3vw, 2rem);
    bottom: clamp(0.75rem, 3vw, 2rem);
    min-height: 15rem;
    padding: 1rem 1.2rem;
    border: 1px solid var(--drakima-line-cyan);
    background: rgba(5, 2, 10, var(--vn-dialogue-opacity, 0.82));
    box-shadow: var(--drakima-shadow-pink);
    z-index: 240;
    transition: opacity 240ms ease;
}

.vn-dialogue-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
}

.vn-speaker {
    color: var(--drakima-hot-pink) !important;
    font-family: "VCR OSD Mono", "Courier New", monospace;
    margin-bottom: 0.5rem;
}

.vn-line-counter,
.vn-expression-debug {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.78rem;
    letter-spacing: 0;
}

.vn-expression-debug {
    margin: 0.75rem 0 0;
    color: var(--drakima-muted);
}

.vn-text {
    color: var(--drakima-text) !important;
    font-size: 1.575rem;
    line-height: 1.45;
    transition: opacity 140ms ease;
}

.vn-choice-stack {
    position: absolute;
    right: clamp(1rem, 4vw, 3rem);
    bottom: calc(clamp(0.75rem, 3vw, 2rem) + 252px);
    display: grid;
    gap: 0.55rem;
    width: min(32rem, calc(100% - 2rem));
    max-height: calc(100% - 252px - clamp(1.5rem, 6vw, 4rem));
    padding: 0.15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(73, 232, 255, 0.72) rgba(4, 7, 25, 0.55);
    z-index: 245;
    transition: opacity 240ms ease;
}

.vn-hybrid-invitation {
    position: absolute;
    left: clamp(.75rem, 3vw, 2rem);
    top: 4rem;
    width: min(27rem, 38%);
    max-height: calc(100% - 20rem);
    overflow-y: auto;
    padding: .8rem;
    border: 1px solid var(--drakima-line-cyan);
    border-radius: 6px;
    background: rgba(5, 8, 36, .96);
    box-shadow: var(--drakima-shadow-pink);
    color: var(--drakima-text);
    z-index: 250;
}
.vn-hybrid-invitation[hidden] { display: none; }
.vn-hybrid-invitation .drakima-button { margin: .2rem 0; }

.vn-hybrid-dock {
    position: absolute;
    right: clamp(0.75rem, 3vw, 2.5rem);
    bottom: clamp(0.75rem, 3vw, 2rem);
    left: clamp(0.75rem, 3vw, 2.5rem);
    z-index: 250;
    display: grid;
    gap: 0.55rem;
    max-height: calc(100% - 1.5rem);
    padding: 0.8rem;
    overflow: auto;
    border: 2px solid #ff69c9;
    border-radius: 6px;
    background: rgba(5, 8, 36, 0.96);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(10, 15, 70, 0.9), 0 0 24px rgba(255, 65, 190, 0.35);
}

.vn-hybrid-dock[hidden] {
    display: none;
}

.vn-hybrid-active .vn-dialogue-box,
.vn-hybrid-active .vn-choice-stack {
    visibility: hidden;
}

.vn-hybrid-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 0.78rem;
}

.vn-hybrid-head > span:first-child {
    color: #ff8dd7;
    font-weight: 700;
    text-transform: uppercase;
}

.vn-hybrid-head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.vn-hybrid-head-actions button {
    min-width: 2rem;
    min-height: 1.8rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid rgba(73, 232, 255, 0.55);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.34);
    color: var(--drakima-cyan-soft);
    font: inherit;
    cursor: pointer;
}

.vn-hybrid-head-actions button:hover,
.vn-hybrid-head-actions button:focus-visible {
    border-color: #ff8dd7;
    color: #fff;
}

.vn-hybrid-dialogue {
    min-height: 5rem;
    padding: 0.65rem;
    border-left: 3px solid #49e8ff;
    background: rgba(255, 255, 255, 0.07);
}

.vn-hybrid-dialogue strong {
    color: #66efff;
}

.vn-hybrid-dialogue p {
    margin: 0.3rem 0 0;
    white-space: pre-wrap;
}

.vn-hybrid-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
    align-items: stretch;
}

.vn-hybrid-input-row textarea {
    min-width: 0;
    resize: vertical;
}

.vn-hybrid-status {
    margin: 0;
    font-size: 0.8rem;
}

.vn-hybrid-voice-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: #bdd5e3;
    font-size: 0.8rem;
}

.vn-hybrid-voice-controls .drakima-button,
#vn-hybrid-stop {
    min-height: 44px;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
}

.vn-experience-page {
    min-height: 100vh;
    padding: 1rem;
}

.vn-experience-shell {
    width: min(100%, 1920px);
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: #000;
    box-shadow: none;
}

.vn-experience-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.vn-experience-heading h1,
.vn-experience-heading p {
    margin: 0;
}

.vn-stage {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 0;
    overflow: hidden;
    border: 0;
    background: #000;
}

.vn-stage-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid rgba(255, 0, 216, 0.42);
    background: #000;
}

.vn-stage:fullscreen {
    width: 100vw;
    height: 100vh;
    padding: 0;
    border: 0;
    background: #000;
}

.vn-stage:fullscreen .vn-stage-frame {
    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));
    aspect-ratio: 16 / 9;
    border: 0;
}

.vn-game-menu-button,
.vn-icon-button {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgba(0, 255, 204, 0.68);
    border-radius: 4px;
    background: rgba(2, 5, 15, 0.82);
    color: var(--drakima-cyan-soft);
    font: inherit;
    cursor: pointer;
}

.vn-game-menu-button {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 320;
    grid-template-rows: 1.35rem auto;
    width: 3.15rem;
    height: 3.35rem;
    gap: 0.05rem;
    font-size: 1.25rem;
    line-height: 1;
}

.vn-game-menu-button small {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.vn-game-menu {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 330;
    display: grid;
    gap: 0.65rem;
    width: min(22rem, calc(100% - 1.5rem));
    max-height: calc(100% - 1.5rem);
    padding: 0.8rem;
    overflow: auto;
    border: 1px solid rgba(0, 255, 204, 0.7);
    border-radius: 6px;
    background: rgba(3, 4, 14, 0.96);
    box-shadow: 0 0 24px rgba(0, 255, 204, 0.2);
}

.vn-game-menu[hidden] {
    display: none;
}

.vn-game-menu-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    color: var(--drakima-text);
}

.vn-game-menu .vn-runtime-controls,
.vn-game-menu .vn-navigation {
    margin: 0;
}

.vn-player-name-gate,
.vn-ending-panel {
    position: absolute;
    inset: 0;
    z-index: 350;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.82);
}

.vn-player-name-gate[hidden],
.vn-ending-panel[hidden] {
    display: none;
}

.vn-player-name-gate form {
    display: grid;
    gap: 0.85rem;
    width: min(30rem, 100%);
    padding: 1.25rem;
    border: 1px solid rgba(255, 0, 216, 0.68);
    border-radius: 6px;
    background: rgba(5, 2, 15, 0.96);
    text-align: center;
}

.vn-player-name-gate h2,
.vn-player-name-gate p {
    margin: 0;
}

.vn-player-name-gate input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--drakima-line-cyan);
    border-radius: 4px;
    background: #05020a;
    color: #fff;
    font: inherit;
    text-align: center;
}

.vn-name-error {
    color: #ff8dad;
}

.vn-hybrid-dock {
    top: clamp(4.75rem, 8vh, 6rem);
    right: auto;
    bottom: auto;
    left: clamp(1rem, 2.25vw, 2.5rem);
    width: min(42rem, calc(48% - 2rem));
    max-height: calc(100% - clamp(5.75rem, 10vh, 7.5rem));
    padding: clamp(0.75rem, 1.25vw, 1rem);
    overflow: hidden;
    transform: none;
    grid-template-rows: auto minmax(0, auto) auto auto auto;
    border-color: rgba(255, 105, 201, 0.78);
    border-radius: 12px;
    background:
        linear-gradient(145deg, rgba(7, 11, 40, 0.95), rgba(20, 7, 38, 0.92));
    box-shadow:
        0 0 0 1px rgba(73, 232, 255, 0.26) inset,
        0 1.25rem 3.5rem rgba(0, 0, 0, 0.48),
        0 0 2rem rgba(255, 65, 190, 0.2);
    backdrop-filter: blur(14px);
}

.vn-hybrid-dock:not([hidden]) {
    animation: vn-engagement-fade-in 320ms ease both;
}

.vn-hybrid-dock[data-dock-side="right"] {
    right: clamp(1rem, 2.25vw, 2.5rem);
    left: auto;
}

.vn-hybrid-dock.is-minimized {
    width: min(28rem, calc(48% - 2rem));
    max-height: none;
}

.vn-hybrid-dock.is-minimized > :not(.vn-hybrid-head) {
    display: none;
}

.vn-hybrid-dock.is-minimized .vn-hybrid-head {
    padding-bottom: 0;
    border-bottom: 0;
}

.vn-engagement-leaving .vn-dialogue-box {
    opacity: 0;
}

.vn-hybrid-dock.vn-hybrid-exiting {
    opacity: 0;
    transition: opacity 240ms ease;
}

.vn-engagement-returning .vn-dialogue-box {
    animation: vn-dialogue-return 360ms ease both;
}

.vn-hybrid-dialogue {
    min-height: 4.5rem;
    max-height: min(34vh, 19rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(73, 232, 255, 0.72) rgba(4, 7, 25, 0.55);
}

.vn-hybrid-dialogue p {
    font-family: "VCR OSD Mono", "Trebuchet MS", sans-serif;
    font-size: clamp(1rem, 1.25vw, 1.3rem);
    line-height: 1.42;
}

.vn-hybrid-input-label {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: baseline;
    color: var(--drakima-cyan-soft);
}

.vn-hybrid-input-label small {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.68rem;
    text-align: right;
}

.drakima-cockpit-nav-clear.drakima-cockpit-nav-edit-warning strong,
.drakima-cockpit-nav-clear.drakima-cockpit-nav-edit-warning small {
    overflow: visible;
    white-space: normal;
}

.drakima-cockpit-nav-edit-warning {
    border-color: #8a6d00;
    background: #fff3bd;
}

.vn-hybrid-text-revealing::after {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 1em;
    margin-left: 0.2em;
    border-right: 2px solid var(--drakima-cyan-soft);
    vertical-align: -0.12em;
    animation: vn-caret-blink 720ms steps(1, end) infinite;
}

.vn-hybrid-input-row textarea {
    min-height: 3rem;
    max-height: 6rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(73, 232, 255, 0.72);
    border-radius: 6px;
    background: rgba(1, 4, 18, 0.84);
    color: #fff;
    font: inherit;
}

.vn-hybrid-input-row textarea:focus {
    outline: 2px solid rgba(255, 105, 201, 0.58);
    outline-offset: 1px;
}

@media (max-width: 900px), (max-height: 620px) {
    .vn-dialogue-box {
        bottom: 0.75rem;
        min-height: 10.75rem;
        padding: 0.7rem 0.85rem;
    }

    .vn-text {
        font-size: clamp(0.95rem, 2.4vw, 1.15rem);
        line-height: 1.35;
    }

    .vn-choice-stack {
        right: 0.75rem;
        bottom: 12.25rem;
        width: min(30rem, calc(100% - 1.5rem));
        max-height: calc(100% - 13rem);
        gap: 0.35rem;
    }

    .vn-choice-prompt {
        font-size: 0.76rem;
    }

    .vn-choice-button {
        min-height: 2.5rem;
        padding: 0.45rem 0.65rem;
        font-size: clamp(0.82rem, 2.2vw, 1rem);
        line-height: 1.25;
    }

    .vn-choice-button small {
        font-size: 0.78rem;
    }

    .vn-hybrid-dock {
        top: auto;
        right: 0.75rem;
        bottom: 0.75rem;
        left: 0.75rem;
        width: auto;
        max-height: min(62%, calc(100% - 1.5rem));
    }

    .vn-hybrid-dock[data-dock-side="right"] {
        right: 0.75rem;
        left: 0.75rem;
    }

    .vn-hybrid-dock.is-minimized {
        width: auto;
        max-height: none;
    }

    #vn-hybrid-dock-side {
        display: none;
    }

    .vn-hybrid-dialogue {
        max-height: 22vh;
    }

    .vn-hybrid-input-label small {
        display: none;
    }
}

.vn-ending-panel {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
    gap: 1.25rem;
    background: rgba(0, 0, 0, 0.9);
}

.vn-ending-panel img {
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border: 1px solid rgba(255, 0, 216, 0.5);
}

.vn-ending-body {
    display: grid;
    align-content: center;
    gap: 0.85rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 255, 204, 0.52);
    border-radius: 6px;
    background: rgba(5, 2, 15, 0.94);
}

.vn-ending-body h2,
.vn-ending-body p {
    margin: 0;
}

.vn-ending-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.vn-choice-prompt {
    margin: 0;
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 1rem;
    line-height: 1.25;
    text-align: right;
}

.vn-choice-stack[hidden] {
    display: none;
}

.vn-choice-button {
    display: grid;
    gap: 0.2rem;
    justify-content: flex-start;
    text-align: left;
    background: rgba(5, 2, 10, 0.86);
    border-color: var(--drakima-line-cyan);
    color: var(--drakima-text);
    font-size: 1.35rem;
    line-height: 1.35;
}

.vn-choice-button:not(.vn-choice-button-selected):hover,
.vn-choice-button:not(.vn-choice-button-selected):focus-visible {
    border-color: var(--drakima-cyan-soft);
    background: var(--drakima-cyan-soft);
    color: #020308 !important;
    box-shadow: 0 0 0 1px #020308 inset, 0 0 18px rgba(0, 255, 204, 0.4);
}

.vn-choice-button small {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 1.05rem;
    line-height: 1.2;
}

.vn-choice-button:not(.vn-choice-button-selected):hover small,
.vn-choice-button:not(.vn-choice-button-selected):focus-visible small {
    color: #071015;
}

.vn-choice-button-selected {
    color: #020308;
    background: var(--drakima-cyan-soft);
}

.vn-choice-button-selected small {
    color: #071015;
}

.vn-notice {
    position: relative;
    margin: 1rem 0 0;
    color: var(--drakima-muted);
}

.vn-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.vn-runtime-drawers {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
}

.vn-runtime-drawer {
    border: 1px solid var(--drakima-line-cyan);
    background: rgba(5, 2, 10, 0.78);
    box-shadow: var(--drakima-shadow-cyan);
    padding: 0.75rem;
}

.vn-runtime-drawer summary {
    cursor: pointer;
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-weight: 700;
}

.vn-backlog-list,
.vn-save-slot-list {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.75rem;
    max-height: 18rem;
    overflow: auto;
}

.vn-backlog-entry,
.vn-save-slot {
    border: 1px solid rgba(0, 255, 204, 0.34);
    background: rgba(0, 0, 0, 0.44);
    padding: 0.65rem;
}

.vn-backlog-entry strong,
.vn-save-slot strong {
    display: block;
    color: var(--drakima-hot-pink);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    margin-bottom: 0.25rem;
}

.vn-backlog-entry span,
.vn-save-slot span {
    display: block;
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
}

.vn-backlog-entry p,
.vn-save-slot p {
    margin: 0;
    color: var(--drakima-text);
}

.vn-backlog-choice-entry {
    border-color: rgba(255, 0, 216, 0.56);
    background: rgba(255, 0, 122, 0.12);
}

.vn-backlog-choice-entry strong {
    color: var(--drakima-cyan-soft);
}

.vn-save-slot-empty {
    opacity: 0.78;
}

.vn-save-slot-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.65rem;
}

.vn-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.vn-settings-grid label {
    display: grid;
    gap: 0.35rem;
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.78rem;
}

.vn-settings-grid input[type="range"] {
    width: 100%;
    accent-color: var(--drakima-cyan-soft);
}

.vn-settings-grid output {
    color: var(--drakima-text);
}

.vn-character-layout-settings {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 255, 204, 0.2);
}

.vn-character-layout-settings p {
    margin: 0;
}

.vn-settings-toggle {
    align-content: center;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.vn-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.vn-actions .drakima-button:disabled {
    cursor: not-allowed;
    opacity: 0.68;
}

.vn-button-disabled {
    filter: grayscale(0.35);
    pointer-events: none;
}

.vn-updating .vn-character,
.vn-updating .vn-text {
    opacity: 0.78;
}

.vn-stage-visuals {
    position: absolute;
    inset: 0;
    opacity: 1;
    transform: translateX(0);
    filter: none;
    transition:
        opacity var(--vn-transition-duration, 320ms) var(--vn-transition-curve, ease),
        transform var(--vn-transition-duration, 320ms) var(--vn-transition-curve, ease),
        filter var(--vn-transition-duration, 320ms) var(--vn-transition-curve, ease);
}

.vn-scene-fading-out .vn-stage-visuals,
.vn-scene-fading-out .vn-dialogue-box,
.vn-scene-fading-out .vn-choice-stack {
    opacity: 0;
}

.vn-transition-wipeleft.vn-scene-fading-out .vn-stage-visuals {
    transform: translateX(-9%);
}

.vn-transition-wiperight.vn-scene-fading-out .vn-stage-visuals {
    transform: translateX(9%);
}

.vn-transition-dissolve.vn-scene-fading-out .vn-stage-visuals {
    filter: blur(12px) saturate(0.7);
}

.vn-transition-crossfade .vn-stage-visuals {
    filter: saturate(0.9);
}

.vn-transition-cut .vn-stage-visuals,
.vn-transition-cut .vn-dialogue-box,
.vn-transition-cut .vn-choice-stack {
    transition: none;
}

.vn-scene-transitioning .vn-stage-visuals {
    animation: vn-scene-soft-fade 480ms ease both;
}

.vn-scene-transitioning .vn-dialogue-box,
.vn-scene-transitioning .vn-choice-stack {
    animation: vn-dialogue-return 480ms ease both;
}

@keyframes vn-scene-soft-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes vn-engagement-fade-in {
    0% { opacity: 0; transform: translateY(0.5rem); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes vn-dialogue-return {
    0% { opacity: 0; transform: translateY(0.35rem); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes vn-caret-blink {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}

.ai-scene-shell {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--drakima-line-cyan);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.78);
    box-shadow: var(--drakima-shadow-cyan);
    padding: 1rem;
}

.ai-vn-shell {
    display: grid;
    gap: 1rem;
}

.ai-scene-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.6fr);
    gap: 1rem;
    align-items: stretch;
}

.ai-scene-stage {
    position: relative;
    min-height: clamp(360px, 58vh, 620px);
    overflow: hidden;
    border: 1px solid var(--drakima-line);
    background: #05020a;
}

.ai-vn-stage {
    position: relative;
    min-height: clamp(560px, 72vh, 790px);
    overflow: hidden;
    border: 1px solid var(--drakima-line);
    background: #05020a;
}

.ai-scene-background,
.ai-scene-background-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ai-scene-background-placeholder {
    background:
        linear-gradient(135deg, rgba(255, 0, 122, 0.22), transparent 44%),
        linear-gradient(45deg, rgba(0, 255, 204, 0.14), transparent 52%),
        #08040f;
}

.ai-scene-character {
    position: absolute;
    right: clamp(0.5rem, 5vw, 4rem);
    bottom: 0;
    max-width: min(52%, 430px);
    max-height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(0, 255, 204, 0.42));
}

.ai-scene-status {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    z-index: 220;
}

.ai-scene-status span,
.ai-placeholder-badge {
    padding: 0.48rem 0.75rem;
    border: 1px solid var(--drakima-line-cyan);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.52);
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.78rem;
    letter-spacing: 0;
}

.ai-vn-page-status {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(0, 255, 204, 0.35);
    border-radius: 8px;
    background: rgba(5, 2, 10, 0.72);
    box-shadow: 0 0 26px rgba(255, 0, 122, 0.18);
    backdrop-filter: blur(10px);
}

.ai-vn-scene-title {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    min-width: 0;
}

.ai-vn-scene-title span {
    color: var(--drakima-hot-pink);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.75rem;
}

.ai-vn-scene-title strong {
    color: var(--drakima-text);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: clamp(0.95rem, 1.35vw, 1.2rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.ai-vn-result-badge {
    display: inline-flex;
    gap: 0.45rem;
    align-items: center;
    justify-content: center;
    padding: 0.48rem 0.75rem;
    border: 1px solid var(--drakima-line-cyan);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.58);
    color: var(--drakima-cyan-soft);
    box-shadow: 0 0 18px rgba(0, 255, 204, 0.14);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.78rem;
    letter-spacing: 0;
    white-space: nowrap;
}

.ai-vn-result-badge span {
    color: var(--drakima-text);
}

.ai-vn-result-passed {
    border-color: rgba(255, 211, 92, 0.9);
    color: #ffe089;
    box-shadow: 0 0 18px rgba(255, 211, 92, 0.16);
}

.ai-vn-result-failed {
    border-color: rgba(255, 0, 122, 0.8);
    color: var(--drakima-hot-pink);
    box-shadow: 0 0 18px rgba(255, 0, 122, 0.16);
}

.ai-vn-exit-link {
    margin-left: auto;
    justify-self: end;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--drakima-line);
    border-radius: 6px;
    color: var(--drakima-cyan-soft);
    background: rgba(0, 0, 0, 0.52);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.8rem;
    text-decoration: none;
}

.ai-vn-exit-link:hover {
    color: var(--drakima-hot-pink);
}

.ai-vn-dialogue-box {
    bottom: clamp(1rem, 3.5vh, 2rem);
    min-height: 0;
}

.ai-vn-dialogue-text {
    max-height: min(16vh, 160px);
    overflow-y: auto;
    padding-right: 0.35rem;
    white-space: pre-wrap;
}

.ai-vn-dialogue-dock {
    display: grid;
    gap: 0.7rem;
    left: 50%;
    right: auto;
    width: min(62rem, 68vw);
    margin-inline: auto;
    padding: 1rem 1.2rem 1.1rem;
    border-radius: 14px;
    background: rgba(5, 2, 10, var(--vn-dialogue-opacity, 0.82));
    transform: translateX(-50%);
    backdrop-filter: blur(8px);
}

.ai-vn-dialogue-panel,
.ai-vn-composer {
    min-width: 0;
}

.ai-vn-dialogue-dock[data-ai-vn-mode="dialogue"] .ai-vn-composer,
.ai-vn-dialogue-dock[data-ai-vn-mode="chat"] .ai-vn-dialogue-panel {
    display: none;
}

.ai-vn-mode-toggle {
    position: absolute;
    right: 0.9rem;
    bottom: calc(100% + 0.65rem);
    z-index: 2;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--drakima-line-cyan);
    border-radius: 8px;
    color: var(--drakima-cyan-soft);
    background: rgba(5, 2, 10, 0.82);
    box-shadow: 0 0 18px rgba(0, 255, 204, 0.18);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    cursor: pointer;
}

.ai-vn-mode-toggle::before {
    content: "\1F5E8";
    margin-right: 0.4rem;
    color: var(--drakima-hot-pink);
}

.ai-vn-mode-toggle:hover {
    color: var(--drakima-hot-pink);
}

.ai-vn-next-button {
    justify-self: end;
    min-width: 7rem;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--drakima-line);
    border-radius: 8px;
    color: var(--drakima-cyan-soft);
    background: rgba(0, 0, 0, 0.45);
    box-shadow: 0 0 14px rgba(255, 0, 122, 0.18);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    cursor: pointer;
}

.ai-vn-next-button:hover {
    color: var(--drakima-hot-pink);
}

.ai-vn-composer {
    padding-top: 0;
    border-top: 0;
}

.ai-vn-composer label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.ai-vn-composer textarea {
    min-height: 96px;
    resize: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    caret-color: var(--drakima-cyan);
}

.ai-vn-composer textarea::placeholder {
    color: rgba(255, 255, 255, 0.58);
}

.ai-vn-composer-actions {
    align-items: center;
}

.ai-vn-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(8rem, auto);
    gap: 0.75rem;
    align-items: stretch;
}

.ai-vn-input-row .drakima-button {
    align-self: stretch;
    justify-content: center;
    min-width: 8rem;
}

.ai-vn-utility-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
}

.ai-vn-session-meta {
    margin-top: 0;
}

.ai-vn-support-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
}

.ai-vn-completion-panel {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
    gap: 1rem;
    align-items: start;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(0, 255, 204, 0.55);
    border-radius: 8px;
    background: rgba(5, 2, 10, 0.9);
    box-shadow: 0 0 28px rgba(0, 255, 204, 0.16);
}

.ai-vn-completion-panel[hidden] {
    display: none;
}

.ai-vn-completion-panel h2 {
    margin: 0 0 0.45rem;
    color: var(--drakima-text);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    letter-spacing: 0;
}

.ai-vn-completion-panel p {
    margin: 0;
}

.ai-vn-completion-panel .drakima-eyebrow {
    margin-bottom: 0.35rem;
}

.ai-vn-completion-stats {
    display: grid;
    gap: 0.45rem;
}

.ai-vn-completion-stats span,
.ai-vn-completion-summary {
    border: 1px solid rgba(0, 255, 204, 0.22);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.36);
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    padding: 0.5rem 0.6rem;
}

.ai-vn-completion-summary {
    grid-column: 1 / -1;
    color: rgba(255, 255, 255, 0.86);
}

.ai-vn-completion-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    grid-column: 1 / -1;
}

.ai-vn-completion-passed {
    border-color: rgba(255, 211, 92, 0.75);
    box-shadow: 0 0 28px rgba(255, 211, 92, 0.15);
}

.ai-vn-completion-passed .drakima-eyebrow,
.ai-vn-completion-passed .ai-vn-completion-stats span {
    color: #ffe089;
}

.ai-vn-completion-failed {
    border-color: rgba(255, 0, 122, 0.55);
}

.ai-vn-completion-failed .drakima-eyebrow,
.ai-vn-completion-failed .ai-vn-completion-stats span {
    color: var(--drakima-hot-pink);
}

.ai-vn-support-actions .ai-vn-details-drawer[open] {
    flex: 1 1 100%;
    order: 2;
}

.ai-vn-try-again-form {
    display: inline-flex;
}

.ai-vn-try-again-form[hidden] {
    display: none;
}

.ai-vn-details-drawer,
.ai-vn-history-panel {
    width: 100%;
    border: 1px solid var(--drakima-line);
    border-radius: 8px;
    background: rgba(5, 2, 10, 0.84);
    padding: 0.85rem 1rem;
    box-shadow: 0 0 18px rgba(0, 255, 204, 0.18);
    backdrop-filter: blur(10px);
}

.ai-vn-details-drawer:not([open]) {
    width: max-content;
    padding: 0;
    border-color: var(--drakima-line-cyan);
}

.ai-vn-details-drawer:not([open]) summary {
    padding: 0.7rem 1rem;
}

.ai-vn-details-drawer[open] {
    max-height: 36rem;
    overflow-y: auto;
}

.ai-vn-dialogue-box .vn-expression-debug {
    display: none;
}

.ai-vn-details-drawer summary,
.ai-vn-history-panel summary {
    color: var(--drakima-cyan-soft);
    cursor: pointer;
    font-family: "VCR OSD Mono", "Courier New", monospace;
}

.ai-vn-transcript {
    max-height: min(38vh, 420px);
}

.ai-vn-notices {
    margin-top: 0;
}

.ai-scene-briefing,
.ai-conversation-panel {
    border: 1px solid var(--drakima-line);
    background: rgba(5, 2, 10, 0.82);
    padding: 1rem;
}

.ai-scene-briefing h2,
.ai-conversation-heading h2 {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
}

.ai-scene-briefing-grid,
.ai-scene-notices {
    display: grid;
    gap: 0.75rem;
}

.ai-scene-briefing-grid div,
.ai-scene-notices span {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem;
    border: 1px solid var(--drakima-line);
    background: rgba(0, 255, 204, 0.04);
}

.ai-scene-briefing-grid strong {
    color: var(--drakima-hot-pink);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.82rem;
}

.ai-scene-briefing-grid span,
.ai-scene-notices span {
    color: var(--drakima-muted);
    line-height: 1.55;
}

.ai-scene-notices {
    margin-top: 1rem;
}

.ai-conversation-panel {
    margin-top: 1rem;
}

.ai-conversation-heading,
.ai-composer-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.ai-opening-prompt {
    color: var(--drakima-muted);
}

.ai-transcript {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
    max-height: min(52vh, 540px);
    overflow-y: auto;
    padding-right: 0.35rem;
    scroll-behavior: smooth;
}

.ai-transcript-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}

.ai-transcript-meta span {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--drakima-line);
    color: var(--drakima-muted);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.82rem;
}

.ai-message {
    max-width: min(760px, 92%);
    padding: 0.85rem 1rem;
    border: 1px solid var(--drakima-line);
    background: rgba(0, 0, 0, 0.45);
}

.ai-message-user {
    justify-self: end;
    border-color: rgba(255, 0, 122, 0.42);
}

.ai-message-gynoid {
    justify-self: start;
    border-color: var(--drakima-line-cyan);
}

.ai-message strong {
    color: var(--drakima-hot-pink);
    font-family: "VCR OSD Mono", "Courier New", monospace;
}

.ai-message p {
    margin: 0.45rem 0;
    color: var(--drakima-text) !important;
    line-height: 1.65;
}

.ai-message span {
    color: var(--drakima-muted);
    font-size: 0.82rem;
}

.ai-composer {
    display: grid;
    gap: 0.75rem;
}

.ai-composer textarea {
    min-height: 120px;
}

.ai-composer-busy {
    opacity: 0.82;
}

.ai-composer-busy button {
    cursor: wait;
}

.ai-thinking-status,
.ai-inline-error {
    margin: 0.75rem 0;
}

.ai-thinking-status {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
}

.ai-composer-actions p {
    max-width: 680px;
    margin: 0;
    color: var(--drakima-muted);
}

.ai-settings-panel {
    margin-bottom: 1.25rem;
}

.ai-settings-panel h2 {
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
}

.ai-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.ai-settings-security-note {
    margin-top: 1rem;
}

.ai-settings-test-result {
    margin-top: 1rem;
}

.scene-layout-toolbar,
.scene-layout-items {
    margin-bottom: 1.25rem;
}

.scene-editor-launchpad {
    margin: 1.5rem 0;
}

.scene-editor-launchpad-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.scene-editor-launchpad-heading h2 {
    margin: 0.2rem 0;
    color: var(--drakima-cyan);
    font-size: clamp(1.35rem, 2vw, 2rem);
}

.scene-editor-launchpad-heading p {
    max-width: 56rem;
}

.scene-editor-open-project-form {
    display: grid;
    grid-template-columns: minmax(12rem, 1fr) auto;
    gap: 0.4rem 0.65rem;
    align-items: end;
    min-width: min(100%, 30rem);
    padding: 0.8rem;
    border: 1px solid rgba(0, 245, 255, 0.55);
    background: rgba(2, 11, 24, 0.76);
}

.scene-editor-open-project-form label,
.scene-editor-open-project-form small {
    grid-column: 1 / -1;
}

.scene-editor-open-project-form label {
    color: var(--drakima-cyan);
    font-weight: 700;
}

.scene-editor-open-project-form small {
    color: var(--drakima-muted);
}

.scene-editor-training-launchpad {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem 1.25rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid rgba(0, 245, 255, 0.58);
    border-left: 0.3rem solid var(--drakima-cyan);
    background: rgba(2, 11, 24, 0.78);
}

.scene-editor-training-copy h3,
.scene-editor-training-copy p {
    margin: 0;
}

.scene-editor-training-copy h3 {
    margin: 0.18rem 0 0.35rem;
    color: var(--drakima-cyan);
    font-size: 1.05rem;
}

.scene-editor-training-copy p:last-child {
    max-width: 54rem;
}

.scene-editor-training-actions {
    display: grid;
    gap: 0.35rem;
    justify-items: stretch;
    text-align: center;
}

.scene-editor-training-actions span {
    color: var(--drakima-muted);
    font-size: 0.72rem;
}

.scene-editor-training-drafts {
    display: grid;
    grid-column: 1 / -1;
    gap: 0.35rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(0, 245, 255, 0.24);
}

.scene-editor-training-drafts > div {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
}

.scene-editor-training-drafts span {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.scene-editor-training-drafts small {
    color: var(--drakima-muted);
}

.scene-editor-launchpad-grid {
    display: grid;
    grid-template-columns: minmax(20rem, 1.15fr) minmax(18rem, 0.85fr);
    gap: 1rem;
    align-items: start;
}

.scene-editor-launchpad-form {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid rgba(255, 0, 224, 0.45);
    background: rgba(3, 8, 18, 0.58);
}

.scene-editor-launchpad-form h3 {
    margin: 0;
    color: var(--drakima-cyan);
    font-size: 1.05rem;
}

.scene-editor-launchpad-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.scene-editor-launchpad-fields label {
    display: grid;
    gap: 0.35rem;
    color: var(--drakima-text);
    font-size: 0.8rem;
}

.scene-editor-launchpad-fields input,
.scene-editor-launchpad-fields select,
.scene-editor-launchpad-fields textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(0, 245, 255, 0.45);
    background: rgba(2, 5, 12, 0.84);
    color: var(--drakima-text);
}

.scene-editor-launchpad-wide {
    grid-column: 1 / -1;
}

.scene-editor-launchpad-check {
    display: flex !important;
    flex-direction: row;
    gap: 0.45rem !important;
    align-items: center;
}

.scene-editor-launchpad-check input[type="checkbox"] {
    width: auto;
}

.scene-layout-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.drakima-scene-editor-body {
    overflow: hidden;
    min-width: 1024px;
    background:
        radial-gradient(circle at 12% 8%, rgba(255, 0, 180, 0.18), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(0, 255, 204, 0.1), transparent 30%),
        #05020a;
}

.drakima-scene-editor-main,
.drakima-scene-editor-viewport {
    width: 100vw;
    height: 100vh;
    min-height: 0;
}

.drakima-scene-editor-viewport {
    padding: 0.35rem;
}

.drakima-scene-editor-viewport:fullscreen {
    padding: 0;
    background: #bfbfbf;
}

.vn-scene-layout-readiness {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--drakima-line);
}

.drakima-scene-editor-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(270px, 0.55fr);
    gap: 1rem;
    align-items: start;
}

.drakima-scene-stage-panel {
    grid-row: span 2;
}

.drakima-scene-stage-panel,
.drakima-scene-editor-panel {
    border: 1px solid var(--drakima-line);
    background: rgba(5, 2, 10, 0.82);
    padding: 1rem;
}

.drakima-scene-panel-heading {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: start;
    margin-bottom: 0.75rem;
}

.drakima-scene-panel-heading h2 {
    margin: 0;
    color: var(--drakima-cyan-soft);
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 1rem;
}

.drakima-scene-panel-heading span {
    color: var(--drakima-muted);
    font-size: 0.82rem;
    text-align: right;
}

.drakima-scene-stage {
    position: relative;
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--drakima-line-cyan);
    background:
        linear-gradient(90deg, rgba(0, 255, 204, 0.06) 1px, transparent 1px),
        linear-gradient(0deg, rgba(0, 255, 204, 0.06) 1px, transparent 1px),
        #05020a;
    background-size: 48px 48px;
    box-shadow: var(--drakima-shadow-cyan);
    user-select: none;
    touch-action: none;
}

.drakima-scene-stage-item {
    position: absolute;
    display: grid;
    place-items: center;
    min-width: 34px;
    min-height: 34px;
    border: 1px solid rgba(0, 255, 204, 0.55);
    color: var(--drakima-cyan-soft);
    background: rgba(0, 0, 0, 0.32);
    text-decoration: none;
    transform-origin: top left;
    cursor: pointer;
    pointer-events: auto;
}

.drakima-scene-stage-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.drakima-scene-stage-item span {
    padding: 0.35rem;
    font-family: "VCR OSD Mono", "Courier New", monospace;
    font-size: 0.72rem;
    text-align: center;
}

.drakima-scene-stage-item em {
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    bottom: 0.25rem;
    padding: 0.2rem 0.25rem;
    border: 1px solid rgba(255, 0, 122, 0.45);
    color: #ffd5de;
    background: rgba(0, 0, 0, 0.74);
    font-style: normal;
    font-size: 0.62rem;
    text-align: center;
}

.drakima-scene-stage-item-selected {
    border-color: var(--drakima-hot-pink);
    box-shadow: 0 0 0 2px rgba(255, 0, 122, 0.25), var(--drakima-shadow-pink);
    cursor: grab;
}

.drakima-scene-stage-item-dragging {
    cursor: grabbing;
}

.drakima-scene-stage-item-hidden {
    filter: grayscale(0.8);
    opacity: 0.26 !important;
}

.drakima-scene-stage-item-locked::after {
    content: "LOCKED";
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    padding: 0.1rem 0.25rem;
    border: 1px solid var(--drakima-line);
    color: var(--drakima-muted);
    background: rgba(0, 0, 0, 0.72);
    font-size: 0.62rem;
}

.drakima-scene-item-list {
    display: grid;
    gap: 0.5rem;
    max-height: 460px;
    overflow-y: auto;
}

.drakima-scene-item-row {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem;
    border: 1px solid var(--drakima-line);
    color: var(--drakima-text);
    text-decoration: none;
    background: rgba(0, 255, 204, 0.04);
}

.drakima-scene-item-row-selected {
    border-color: var(--drakima-hot-pink);
    box-shadow: var(--drakima-shadow-pink);
}

.scene-layout-warning {
    color: #ffd5de !important;
}

.drakima-creator-cockpit {
    --cockpit-rail-width: 250px;
    --cockpit-side-width: 420px;
    --cockpit-layers-height: 34%;
    --cockpit-bottom-height: 30vh;
    --cockpit-splitter-size: 0.35rem;
    --script-field-columns: 2;
    display: grid;
    grid-template-rows: auto auto auto auto minmax(0, 1fr) var(--cockpit-splitter-size) minmax(5.5rem, var(--cockpit-bottom-height)) auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border: 2px solid #555;
    color: #111;
    background: #bfbfbf;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.42);
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.drakima-creator-cockpit:fullscreen {
    border: 0;
}

.drakima-cockpit-scene-loading {
    cursor: progress;
}

.drakima-cockpit-scene-loading .drakima-cockpit-stage-panel,
.drakima-cockpit-scene-loading .drakima-cockpit-bottom {
    opacity: 0.72;
}

/* Published lyric transcripts */
.music-lyrics-page {
    min-height: 100vh;
    padding: 2rem 0 6rem;
    background:
        linear-gradient(rgba(0, 255, 204, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 0, 255, 0.025) 1px, transparent 1px),
        radial-gradient(circle at 14% 10%, rgba(255, 0, 255, 0.12), transparent 34rem);
    background-size: 42px 42px, 42px 42px, auto;
}

.music-lyrics-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding: clamp(1.1rem, 3vw, 2rem);
    border: 1px solid var(--drakima-cyan);
    border-left: 4px solid var(--drakima-pink);
    background: linear-gradient(105deg, rgba(255, 0, 255, 0.12), rgba(0, 255, 204, 0.035) 62%, transparent);
    box-shadow: 0 0 24px rgba(0, 255, 204, 0.14);
}

.music-lyrics-hero h1 {
    margin: 0.35rem 0;
    color: var(--drakima-text);
    font-family: var(--drakima-mono-font);
    font-size: clamp(2rem, 6vw, 4.6rem);
    line-height: 1;
}

.music-lyrics-hero p:last-child {
    margin: 0;
    color: var(--drakima-cyan-soft);
    font-family: var(--drakima-mono-font);
}

.music-lyrics-hero p span {
    color: var(--drakima-pink);
}

.music-lyrics-layout {
    display: grid;
    grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.music-lyrics-signal-card {
    position: sticky;
    top: 1rem;
    padding: 0.8rem;
    border: 1px solid rgba(255, 0, 255, 0.62);
    background: rgba(5, 5, 14, 0.96);
    box-shadow: 0 0 24px rgba(255, 0, 255, 0.18);
}

.music-lyrics-signal-card img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid rgba(0, 255, 204, 0.5);
    object-fit: cover;
}

.music-lyrics-signal-card p,
.music-lyrics-signal-card strong,
.music-lyrics-signal-card span {
    display: block;
    font-family: var(--drakima-mono-font);
}

.music-lyrics-signal-card p {
    margin: 1rem 0 0.25rem;
    color: var(--drakima-pink);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
}

.music-lyrics-signal-card strong {
    color: var(--drakima-cyan);
    font-size: 0.82rem;
}

.music-lyrics-signal-card span {
    margin-top: 0.75rem;
    color: var(--drakima-muted);
    font-size: 0.72rem;
    line-height: 1.6;
}

.music-lyrics-terminal {
    overflow: hidden;
    border: 1px solid rgba(0, 255, 204, 0.55);
    background: rgba(2, 3, 8, 0.97);
    box-shadow: 0 0 28px rgba(0, 255, 204, 0.11);
}

.music-lyrics-terminal > header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(255, 0, 255, 0.46);
    color: var(--drakima-cyan);
    background: linear-gradient(90deg, rgba(0, 255, 204, 0.09), rgba(255, 0, 255, 0.08));
    font-family: var(--drakima-mono-font);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.music-lyrics-section {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
    gap: clamp(1rem, 4vw, 3rem);
    padding: clamp(1.1rem, 3vw, 1.8rem);
    border-bottom: 1px solid rgba(154, 143, 202, 0.15);
}

.music-lyrics-section:last-child {
    border-bottom: 0;
}

.music-lyrics-section h2 {
    margin: 0;
    color: var(--drakima-pink);
    font-family: var(--drakima-mono-font);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.music-lyrics-section h2::before {
    content: "[";
    color: var(--drakima-cyan);
}

.music-lyrics-section h2::after {
    content: "]";
    color: var(--drakima-cyan);
}

.music-lyrics-section p {
    margin: 0;
    color: #e9e6ff;
    font-size: clamp(1rem, 1.6vw, 1.14rem);
    line-height: 1.85;
    white-space: pre-line;
}

.music-lyrics-track-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.music-lyrics-track-nav a {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border: 1px solid rgba(0, 255, 204, 0.42);
    color: var(--drakima-text);
    background: rgba(0, 255, 204, 0.035);
    font-family: var(--drakima-mono-font);
    text-decoration: none;
}

.music-lyrics-track-nav a.is-next {
    border-color: rgba(255, 0, 255, 0.5);
    text-align: right;
}

.music-lyrics-track-nav a:hover,
.music-lyrics-track-nav a:focus-visible {
    border-color: #fff;
    box-shadow: 0 0 18px rgba(0, 255, 204, 0.2);
}

.music-lyrics-track-nav small {
    color: var(--drakima-muted);
    text-transform: uppercase;
}

.music-lyrics-track-nav span {
    color: var(--drakima-cyan);
}

@media (max-width: 780px) {
    .music-lyrics-page {
        padding-top: 1rem;
    }

    .music-lyrics-hero {
        align-items: stretch;
        flex-direction: column;
    }

    .music-lyrics-layout {
        grid-template-columns: 1fr;
    }

    .music-lyrics-signal-card {
        position: static;
        display: grid;
        grid-template-columns: 7rem minmax(0, 1fr);
        gap: 0 1rem;
        align-items: center;
    }

    .music-lyrics-signal-card img {
        grid-row: 1 / 4;
    }

    .music-lyrics-signal-card p {
        margin-top: 0;
    }

    .music-lyrics-section {
        grid-template-columns: 1fr;
        gap: 0.65rem;
    }

    .music-lyrics-track-nav {
        grid-template-columns: 1fr;
    }
}

/* H2: character-owned Meet the Gynoids sanctuary and Admin-authored identity cards. */
.admin-gynoid-editor-section {
    margin-block: 1.5rem;
    padding: clamp(1rem, 2vw, 1.5rem);
    border: 1px solid rgba(34, 240, 230, .38);
    background: linear-gradient(145deg, rgba(8, 15, 36, .96), rgba(35, 13, 55, .88));
    box-shadow: inset 0 0 30px rgba(255, 43, 189, .05);
}

.admin-gynoid-editor-heading,
.admin-gynoid-field-grid,
.admin-gynoid-art-grid {
    display: grid;
    gap: 1rem;
}

.admin-gynoid-editor-heading {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    margin-bottom: 1rem;
}

.admin-gynoid-editor-heading h2,
.admin-gynoid-editor-heading p {
    margin-block: 0;
}

.admin-gynoid-field-grid,
.admin-gynoid-art-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.admin-gynoid-art-preview {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 16rem;
    margin-top: .75rem;
    overflow: hidden;
    color: rgba(234, 244, 255, .65);
    border: 1px dashed rgba(34, 240, 230, .4);
    background:
        linear-gradient(135deg, rgba(255, 43, 189, .08), transparent 52%),
        #050919;
}

.admin-gynoid-art-preview.is-banner {
    aspect-ratio: 16 / 9;
    min-height: auto;
}

.admin-gynoid-art-preview.is-portrait {
    aspect-ratio: 2 / 3;
}

.admin-gynoid-art-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.gynoid-sanctuary-index {
    min-height: 72vh;
    background:
        radial-gradient(circle at 12% 16%, rgba(34, 240, 230, .1), transparent 34rem),
        radial-gradient(circle at 82% 24%, rgba(255, 43, 189, .13), transparent 38rem);
}

.gynoid-sanctuary-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.gynoid-sanctuary-heading h1 {
    max-width: 15ch;
    margin: .25rem 0 .65rem;
    font-size: clamp(2.25rem, 5vw, 4.75rem);
    line-height: .95;
}

.gynoid-sanctuary-heading > div:first-child > p:last-child {
    max-width: 55rem;
    margin: 0;
}

.gynoid-sanctuary-count {
    display: grid;
    min-width: 9rem;
    padding: 1rem;
    text-align: right;
    border-right: 3px solid var(--drakima-cyan, #22f0e6);
    background: rgba(5, 9, 25, .82);
}

.gynoid-sanctuary-count strong {
    color: var(--drakima-cyan, #22f0e6);
    font-size: 2.4rem;
    line-height: 1;
}

.gynoid-sanctuary-count span,
.gynoid-sanctuary-card-topline,
.gynoid-sanctuary-unit,
.gynoid-profile-badges,
.gynoid-experience-mode {
    font-family: var(--drakima-font-mono, monospace);
    letter-spacing: .07em;
    text-transform: uppercase;
}

.gynoid-sanctuary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.gynoid-sanctuary-card {
    display: grid;
    grid-template-columns: minmax(15rem, 42%) minmax(0, 1fr);
    min-height: 31rem;
    overflow: hidden;
    color: #f8f4ff;
    border: 1px solid color-mix(in srgb, var(--gynoid-accent, #ff2bbd) 72%, transparent);
    /* Keep an opaque reading surface even if the themed gradient cannot be resolved. */
    background-color: #050919;
    background-image: linear-gradient(145deg, color-mix(in srgb, var(--gynoid-primary, #27113f) 72%, #040817), #050919 65%);
    box-shadow: 0 1.3rem 4rem rgba(0, 0, 0, .34), inset 0 0 4rem color-mix(in srgb, var(--gynoid-primary, #27113f) 22%, transparent);
}

.gynoid-sanctuary-card-media,
.gynoid-profile-hero-media,
.gynoid-experience-card-media,
.public-theme-hero-image,
.gynoid-theme-square-image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.gynoid-sanctuary-card-background,
.gynoid-profile-hero-background,
.gynoid-experience-card-background {
    position: absolute;
    inset: 0;
    z-index: -3;
}

.gynoid-sanctuary-card-composition,
.gynoid-profile-hero-composition,
.gynoid-experience-card-composition {
    position: absolute;
    inset: 0;
    z-index: -3;
}

.gynoid-sanctuary-card-composition > img:first-of-type,
.gynoid-profile-hero-composition > img:first-of-type,
.gynoid-experience-card-composition > img:first-of-type {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gynoid-sanctuary-card-composition > .gynoid-sanctuary-card-portrait-image,
.gynoid-profile-hero-composition > .gynoid-profile-hero-portrait-image,
.gynoid-experience-card-composition > .gynoid-experience-card-portrait-image {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 1.4rem 1.2rem rgba(0, 0, 0, .55));
}

.gynoid-sanctuary-card-composition > .gynoid-sanctuary-card-portrait-image {
    object-fit: contain;
    object-position: center bottom;
}

.gynoid-sanctuary-card-composition > .gynoid-sanctuary-card-portrait-image,
.gynoid-profile-hero-composition > .gynoid-profile-hero-portrait-image {
    inset: 0;
}

.gynoid-experience-card-composition > .gynoid-experience-card-portrait-image {
    inset: 6% 5% 0 42%;
    width: 53%;
    height: 94%;
}

.gynoid-sanctuary-card-background > img,
.gynoid-profile-hero-background > img,
.gynoid-experience-card-background > img,
.gynoid-sanctuary-card-background.is-generated-fallback,
.gynoid-profile-hero-background.is-generated-fallback,
.gynoid-experience-card-background.is-generated-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.is-generated-fallback {
    background:
        linear-gradient(120deg, transparent 40%, color-mix(in srgb, var(--gynoid-highlight) 20%, transparent)),
        repeating-linear-gradient(90deg, transparent 0 3rem, color-mix(in srgb, var(--gynoid-accent) 16%, transparent) 3.05rem 3.1rem),
        color-mix(in srgb, var(--gynoid-primary) 74%, #040817);
}

.gynoid-sanctuary-card-media::after,
.gynoid-profile-hero-media::after,
.gynoid-experience-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 35%, rgba(3, 7, 18, .9));
}

.gynoid-sanctuary-card-portrait,
.gynoid-profile-hero-portrait,
.gynoid-experience-card-portrait {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.gynoid-sanctuary-card-portrait > img,
.gynoid-profile-hero-portrait > img,
.gynoid-experience-card-portrait > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 1.4rem 1.2rem rgba(0, 0, 0, .55));
}

.gynoid-sanctuary-card-scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .22;
    background: repeating-linear-gradient(180deg, transparent 0 4px, rgba(255, 255, 255, .12) 5px);
    mix-blend-mode: overlay;
}

.gynoid-sanctuary-unit {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    color: var(--gynoid-highlight);
    font-size: .7rem;
    text-shadow: 0 0 10px color-mix(in srgb, var(--gynoid-highlight) 65%, transparent);
}

.gynoid-sanctuary-monogram {
    position: absolute;
    inset: 10%;
    display: grid;
    place-items: center;
    color: color-mix(in srgb, var(--gynoid-highlight) 80%, white);
    font-size: clamp(6rem, 18vw, 12rem);
    opacity: .5;
}

.gynoid-sanctuary-card-body {
    display: flex;
    min-width: 0;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    flex-direction: column;
}

.gynoid-sanctuary-card-topline {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: auto;
    color: var(--gynoid-highlight);
    font-size: .68rem;
}

.gynoid-sanctuary-card-body h2 {
    margin: .25rem 0;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.6rem);
    line-height: 1;
    text-shadow: 0 0 24px color-mix(in srgb, var(--gynoid-accent) 42%, transparent);
}

.gynoid-sanctuary-role,
.gynoid-profile-role {
    color: var(--gynoid-highlight);
}

.gynoid-sanctuary-card-action {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.25rem;
}

.gynoid-sanctuary-card-action small {
    max-width: 12rem;
    color: rgba(239, 246, 255, .62);
    text-align: right;
}

.gynoid-sanctuary-empty {
    padding: 2rem;
    text-align: center;
}

.gynoid-sanctuary-profile-shell {
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--gynoid-highlight) 11%, transparent), transparent 33rem),
        radial-gradient(circle at 86% 30%, color-mix(in srgb, var(--gynoid-accent) 13%, transparent), transparent 37rem);
}

.gynoid-sanctuary-profile {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gynoid-accent) 68%, transparent);
    background: rgba(4, 8, 23, .94);
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, .4);
}

.gynoid-profile-hero {
    display: grid;
    grid-template-columns: minmax(18rem, 46%) minmax(0, 1fr);
    min-height: min(67vh, 46rem);
    border-bottom: 1px solid color-mix(in srgb, var(--gynoid-highlight) 44%, transparent);
}

.gynoid-profile-hero-media {
    aspect-ratio: 4 / 5;
    min-height: 34rem;
}

.gynoid-profile-hero-copy {
    display: flex;
    justify-content: center;
    padding: clamp(2rem, 5vw, 5rem);
    flex-direction: column;
    background:
        linear-gradient(125deg, color-mix(in srgb, var(--gynoid-primary) 58%, transparent), rgba(4, 8, 23, .98)),
        repeating-linear-gradient(90deg, transparent 0 5rem, color-mix(in srgb, var(--gynoid-highlight) 7%, transparent) 5.05rem 5.1rem);
}

.gynoid-profile-hero-copy h1 {
    margin: .25rem 0 0;
    color: #fff;
    max-width: 100%;
    font-size: clamp(2.75rem, 5vw, 5rem);
    line-height: .94;
    overflow-wrap: anywhere;
    text-wrap: balance;
    text-shadow: 0 0 35px color-mix(in srgb, var(--gynoid-accent) 45%, transparent);
}

.gynoid-profile-codename {
    margin: .55rem 0 1.25rem;
    color: var(--gynoid-accent);
    font-family: var(--drakima-font-mono, monospace);
    font-size: 1rem;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.gynoid-profile-intro {
    max-width: 44rem;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.7;
}

.gynoid-profile-badges,
.gynoid-profile-hero-actions,
.gynoid-profile-aliases,
.gynoid-conversation-invite-actions {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
}

.gynoid-profile-badges span,
.gynoid-profile-aliases span {
    padding: .35rem .55rem;
    color: var(--gynoid-highlight);
    border: 1px solid color-mix(in srgb, var(--gynoid-highlight) 48%, transparent);
    background: rgba(4, 8, 23, .72);
}

.gynoid-profile-hero-actions {
    margin-top: 1rem;
}

.gynoid-profile-dossier {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-bottom: 1px solid rgba(34, 240, 230, .28);
}

.gynoid-profile-dossier > div {
    min-width: 0;
    padding: 1.15rem clamp(.85rem, 2vw, 1.6rem);
    border-right: 1px solid rgba(34, 240, 230, .2);
}

.gynoid-profile-dossier > div:last-child {
    border-right: 0;
}

.gynoid-profile-dossier dt {
    color: var(--gynoid-highlight);
    font-family: var(--drakima-font-mono, monospace);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gynoid-profile-dossier dd {
    margin: .35rem 0 0;
    overflow-wrap: anywhere;
}

.gynoid-profile-local-nav {
    position: sticky;
    top: var(--drakima-nav-height, 0);
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: .25rem;
    padding: .65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--gynoid-accent) 42%, transparent);
    background: rgba(4, 8, 23, .94);
    backdrop-filter: blur(12px);
}

.gynoid-profile-local-nav a {
    padding: .55rem .8rem;
    color: #f8f4ff;
}

.gynoid-profile-local-nav a:hover,
.gynoid-profile-local-nav a:focus-visible {
    color: var(--gynoid-highlight);
    background: color-mix(in srgb, var(--gynoid-primary) 50%, transparent);
}

.gynoid-profile-content,
.gynoid-conversation-invite {
    scroll-margin-top: 7rem;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    border-bottom: 1px solid rgba(34, 240, 230, .2);
}

.gynoid-profile-content:nth-of-type(even) {
    background: linear-gradient(110deg, color-mix(in srgb, var(--gynoid-primary) 24%, transparent), transparent 55%);
}

.gynoid-profile-section-heading {
    max-width: 48rem;
    margin-bottom: 1.5rem;
}

.gynoid-profile-section-heading h2 {
    margin: .3rem 0 .55rem;
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 3.15rem);
}

.gynoid-profile-origin {
    max-width: 62rem;
    color: var(--gynoid-highlight);
    font-size: 1.1rem;
    line-height: 1.7;
}

.gynoid-profile-biography {
    max-width: 72rem;
}

.gynoid-profile-aliases {
    align-items: center;
    margin-top: 1.25rem;
}

.gynoid-relationship-grid,
.gynoid-experience-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.gynoid-relationship-grid > article {
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid color-mix(in srgb, var(--gynoid-highlight) 34%, transparent);
    background: rgba(7, 13, 31, .86);
}

.gynoid-relationship-grid > article > span {
    color: var(--gynoid-accent);
    font-family: var(--drakima-font-mono, monospace);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gynoid-relationship-grid > article > :last-child {
    margin-bottom: 0;
}

.gynoid-conversation-invite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2rem;
    border-inline: .28rem solid var(--gynoid-accent);
    background:
        linear-gradient(115deg, color-mix(in srgb, var(--gynoid-primary) 55%, transparent), rgba(4, 8, 23, .94));
}

.gynoid-conversation-invite h2 {
    margin: .25rem 0 .55rem;
}

.gynoid-conversation-data-contract {
    display: grid;
    gap: .35rem;
    margin: .8rem 0 0;
    padding-left: 1.2rem;
    color: #dce8fa;
    font-size: .86rem;
}

.gynoid-conversation-invite-actions {
    align-items: center;
    justify-content: flex-end;
    max-width: 25rem;
}

.gynoid-experience-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--gynoid-accent) 52%, transparent);
    background: #070d1f;
}

.gynoid-experience-card-media {
    aspect-ratio: 16 / 9;
    min-height: 0;
}

.gynoid-experience-card-media.is-definitive-lead-card .gynoid-experience-card-composition > img:first-of-type,
.gynoid-theme-square-image.is-definitive-lead-card .gynoid-theme-square-sensitive-image > img:first-of-type {
    object-position: center top;
}

.gynoid-experience-card-portrait {
    inset: 6% 5% 0 42%;
}

.gynoid-experience-mode {
    position: absolute;
    right: .8rem;
    bottom: .8rem;
    padding: .35rem .5rem;
    color: var(--gynoid-highlight);
    font-size: .66rem;
    border: 1px solid color-mix(in srgb, var(--gynoid-highlight) 50%, transparent);
    background: rgba(3, 7, 18, .88);
}

.gynoid-experience-card-body {
    padding: 1.25rem;
}

.gynoid-experience-card-body h3 {
    margin: .8rem 0 .5rem;
    color: #fff;
    font-size: 1.45rem;
}

.gynoid-profile-footer-actions {
    padding: 1rem clamp(1.5rem, 4vw, 3.5rem) 2rem;
}

.public-theme-hero-character,
.experience-catalog-character {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.public-theme-hero-image > .public-theme-hero-character {
    right: -4%;
    bottom: 0;
    width: 64%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    filter: drop-shadow(0 1.2rem 1rem rgba(0, 0, 0, .52));
}

.public-theme-memory-image {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.public-theme-memory-image > img:first-child {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.public-theme-memory-image > .public-theme-memory-character {
    position: absolute;
    z-index: 1;
    right: -4%;
    bottom: 0;
    width: 64%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    filter: drop-shadow(0 1rem .85rem rgba(0, 0, 0, .55));
}

.experience-catalog-character {
    inset: 8% 4% 0 43%;
}

.experience-catalog-character > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
    filter: drop-shadow(0 1rem .85rem rgba(0, 0, 0, .55));
}

.gynoid-theme-square-sensitive-image > .experience-catalog-character-image {
    position: absolute;
    inset: 8% 4% 0 43%;
    z-index: 1;
    width: 53%;
    height: 92%;
    object-fit: contain;
    object-position: right bottom;
    filter: drop-shadow(0 1rem .85rem rgba(0, 0, 0, .55));
}

@media (max-width: 1100px) {
    .gynoid-sanctuary-card,
    .gynoid-profile-hero {
        grid-template-columns: minmax(14rem, 42%) minmax(0, 1fr);
    }

    .gynoid-profile-dossier {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gynoid-profile-dossier > div:nth-child(2) {
        border-right: 0;
    }

    .gynoid-profile-dossier > div:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(34, 240, 230, .2);
    }
}

@media (max-width: 760px) {
    .admin-gynoid-editor-heading,
    .admin-gynoid-field-grid,
    .admin-gynoid-art-grid,
    .gynoid-sanctuary-heading,
    .gynoid-sanctuary-card,
    .gynoid-profile-hero,
    .gynoid-relationship-grid,
    .gynoid-experience-grid,
    .gynoid-conversation-invite {
        grid-template-columns: 1fr;
    }

    .admin-gynoid-editor-heading .drakima-button {
        justify-self: start;
    }

    .gynoid-sanctuary-count {
        justify-self: start;
        text-align: left;
        border-right: 0;
        border-left: 3px solid var(--drakima-cyan, #22f0e6);
    }

    .gynoid-sanctuary-card {
        min-height: 0;
    }

    .gynoid-sanctuary-card-media {
        min-height: 29rem;
    }

    .gynoid-sanctuary-card-body {
        min-height: 25rem;
    }

    .gynoid-profile-hero-media {
        aspect-ratio: 4 / 5;
        min-height: 0;
    }

    .gynoid-profile-hero-copy {
        padding: 1.5rem;
    }

    .gynoid-profile-local-nav {
        justify-content: flex-start;
        overflow-x: auto;
    }

    .gynoid-profile-local-nav a {
        flex: 0 0 auto;
    }

    .gynoid-conversation-invite-actions {
        justify-content: flex-start;
    }

    .gynoid-experience-card-media {
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .gynoid-sanctuary-grid {
        display: block;
    }

    .gynoid-sanctuary-card + .gynoid-sanctuary-card {
        margin-top: 1rem;
    }

    .gynoid-sanctuary-card-media {
        min-height: 24rem;
    }

    .gynoid-sanctuary-card-body {
        min-height: 23rem;
        padding: 1.15rem;
    }

    .gynoid-sanctuary-card-action {
        align-items: stretch;
        flex-direction: column;
    }

    .gynoid-sanctuary-card-action small {
        max-width: none;
        text-align: left;
    }

    .gynoid-profile-hero-media {
        min-height: 0;
    }

    .gynoid-profile-hero-copy h1 {
        font-size: 3.35rem;
    }

    .gynoid-profile-dossier {
        grid-template-columns: 1fr;
    }

    .gynoid-profile-dossier > div {
        border-right: 0;
        border-bottom: 1px solid rgba(34, 240, 230, .2);
    }

    .gynoid-profile-dossier > div:last-child {
        border-bottom: 0;
    }

    .gynoid-profile-content,
    .gynoid-conversation-invite {
        padding: 1.25rem;
    }

    .gynoid-profile-badges {
        font-size: .7rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gynoid-sanctuary-card-scanline {
        display: none;
    }
}

/* H2: carry the public card and member identity into the private room. */
.gynoid-personal-room {
    min-height: calc(100vh - 5rem);
    background:
        radial-gradient(circle at 15% 22%, color-mix(in srgb, var(--gynoid-highlight) 10%, transparent), transparent 34rem),
        radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--gynoid-accent) 13%, transparent), transparent 36rem);
}

.gynoid-personal-room .gynoid-conversation-header {
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr) minmax(17rem, 21rem);
    padding: 0;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--gynoid-accent) 62%, transparent);
    background: linear-gradient(120deg, color-mix(in srgb, var(--gynoid-primary) 56%, #050919), #050919 68%);
}

.gynoid-conversation-presence {
    position: relative;
    isolation: isolate;
    min-height: 15rem;
    overflow: hidden;
    border-right: 1px solid color-mix(in srgb, var(--gynoid-highlight) 36%, transparent);
    background: color-mix(in srgb, var(--gynoid-primary) 72%, #040817);
}

.gynoid-conversation-presence::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 34%, rgba(3, 7, 18, .9));
}

.gynoid-conversation-room-background,
.gynoid-conversation-room-portrait {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
}

.gynoid-conversation-room-background {
    object-fit: cover;
}

.gynoid-conversation-room-portrait {
    z-index: -2;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 1rem .9rem rgba(0, 0, 0, .55));
}

.gynoid-conversation-room-monogram {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--gynoid-highlight);
    font-size: 7rem;
    opacity: .55;
}

.gynoid-conversation-room-status {
    position: absolute;
    right: .75rem;
    bottom: .75rem;
    left: .75rem;
    color: var(--gynoid-highlight);
    font-family: var(--drakima-font-mono, monospace);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gynoid-personal-room .gynoid-conversation-identity {
    padding: clamp(1rem, 2.5vw, 2rem) 0;
}

.gynoid-personal-room .gynoid-conversation-identity h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1;
    text-shadow: 0 0 24px color-mix(in srgb, var(--gynoid-accent) 42%, transparent);
}

.gynoid-conversation-member {
    margin: .85rem 0;
    color: var(--gynoid-highlight);
}

.gynoid-conversation-identity-badge {
    display: inline-flex;
    padding: .35rem .55rem;
    color: var(--gynoid-highlight);
    border: 1px solid color-mix(in srgb, var(--gynoid-highlight) 42%, transparent);
    font-family: var(--drakima-font-mono, monospace);
    font-size: .68rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gynoid-personal-room .gynoid-conversation-economy {
    align-self: center;
    margin-right: 1rem;
    border-left-color: var(--gynoid-accent);
    background: color-mix(in srgb, var(--gynoid-primary) 38%, rgba(4, 14, 34, .82));
}

.gynoid-personal-room .gynoid-conversation-console,
.gynoid-personal-room .gynoid-conversation-controls {
    border-color: color-mix(in srgb, var(--gynoid-accent) 45%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--gynoid-primary) 31%, rgba(4, 8, 23, .96)), rgba(4, 8, 23, .96));
}

.gynoid-personal-room .gynoid-conversation-transcript {
    border: 1px solid color-mix(in srgb, var(--gynoid-highlight) 22%, transparent);
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--gynoid-primary) 20%, transparent), rgba(2, 6, 19, .76)),
        repeating-linear-gradient(90deg, transparent 0 5rem, color-mix(in srgb, var(--gynoid-highlight) 5%, transparent) 5.05rem 5.1rem);
}

.gynoid-personal-room .gynoid-conversation-empty {
    padding: 2rem;
    border-inline: 2px solid var(--gynoid-accent);
    background: rgba(3, 7, 18, .55);
}

.gynoid-personal-room .gynoid-conversation-empty h2 {
    margin: .25rem 0 .6rem;
    color: #fff;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.gynoid-personal-room .gynoid-conversation-message.is-gynoid {
    position: relative;
    min-height: 4.7rem;
    padding-left: 4.6rem;
    border-color: color-mix(in srgb, var(--gynoid-highlight) 52%, transparent);
    background: color-mix(in srgb, var(--gynoid-primary) 44%, rgba(10, 32, 66, .88));
}

.gynoid-conversation-message-avatar {
    position: absolute;
    top: .75rem;
    left: .75rem;
    width: 3rem;
    height: 3rem;
    object-fit: contain;
    object-position: center top;
    border: 1px solid color-mix(in srgb, var(--gynoid-highlight) 55%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--gynoid-primary) 72%, #040817);
}

.gynoid-personal-room .gynoid-conversation-composer textarea {
    border-color: color-mix(in srgb, var(--gynoid-highlight) 70%, transparent);
    box-shadow: inset 0 0 2rem color-mix(in srgb, var(--gynoid-primary) 18%, transparent);
}

.gynoid-personal-room .gynoid-conversation-controls dl > div {
    border-bottom-color: color-mix(in srgb, var(--gynoid-highlight) 25%, transparent);
}

@media (max-width: 1100px) {
    .gynoid-personal-room .gynoid-conversation-header {
        grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
    }

    .gynoid-personal-room .gynoid-conversation-economy {
        grid-column: 1 / -1;
        margin: 0 1rem 1rem;
    }
}

@media (max-width: 700px) {
    .gynoid-personal-room .gynoid-conversation-header {
        grid-template-columns: 1fr;
    }

    .gynoid-conversation-presence {
        min-height: min(115vw, 29rem);
        border-right: 0;
        border-bottom: 1px solid color-mix(in srgb, var(--gynoid-highlight) 36%, transparent);
    }

    .gynoid-personal-room .gynoid-conversation-identity {
        padding: 1.25rem;
    }

    .gynoid-personal-room .gynoid-conversation-economy {
        grid-column: auto;
    }

    .gynoid-personal-room .gynoid-conversation-message.is-gynoid {
        padding-left: 1rem;
    }

    .gynoid-conversation-message-avatar {
        position: static;
        float: left;
        margin: 0 .65rem .35rem 0;
    }
}

/* Akari Workroom keeps agent proposals visually separate from application authority. */
.akari-workroom-page .drakima-panel {
    margin-block: 1.5rem;
}

.akari-workroom-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.akari-workroom-page .drakima-card {
    margin-block: 1rem;
}

.akari-workroom-page form {
    display: grid;
    gap: 0.7rem;
    margin-top: 1rem;
}

.akari-workroom-page label {
    display: grid;
    gap: 0.35rem;
}

.akari-workroom-page textarea,
.akari-workroom-page input,
.akari-workroom-page select {
    width: 100%;
}
.akari-workroom-payload {
    max-height: 18rem;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.character-card-studio .drakima-panel {
    margin-top: 1.25rem;
}

.character-card-studio-heading,
.character-card-decision-panel,
.character-card-history-list article,
.character-card-provenance {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.character-card-studio-heading h2,
.character-card-studio-heading p {
    margin-bottom: .25rem;
}

.character-card-import-controls,
.character-card-field-pair,
.character-card-review-grid,
.character-card-provenance {
    display: grid;
    gap: 1rem;
}

.character-card-import-controls,
.character-card-field-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.character-card-review-grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    align-items: start;
}

.character-card-source-editor,
.character-card-compiled-preview {
    font-family: var(--bs-font-monospace);
    line-height: 1.55;
    white-space: pre-wrap;
}

.character-card-history-list {
    display: grid;
    gap: .7rem;
}

.character-card-history-list article,
.character-card-finding,
.character-card-akari-review {
    padding: .9rem 1rem;
    border: 1px solid rgba(193, 153, 255, .22);
    border-radius: .75rem;
    background: rgba(18, 13, 35, .52);
}

.character-card-history-list article > div,
.character-card-provenance > div {
    display: grid;
    gap: .2rem;
}

.character-card-provenance {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.character-card-provenance code {
    overflow-wrap: anywhere;
}

.character-card-findings,
.character-card-mapping-form,
.character-card-closed-mapping {
    display: grid;
    gap: .8rem;
}

.character-card-finding p,
.character-card-akari-review p {
    margin: .35rem 0 0;
    white-space: pre-wrap;
}

.character-card-finding-blocking {
    border-color: rgba(255, 104, 139, .55);
}

.character-card-finding-warning {
    border-color: rgba(255, 194, 92, .45);
}

.character-card-mapping-form details {
    padding: .8rem;
    border: 1px solid rgba(193, 153, 255, .2);
    border-radius: .65rem;
}

.character-card-mapping-form details[open] {
    display: grid;
    gap: .8rem;
}

.character-card-closed-mapping dd {
    margin: 0 0 .7rem;
    white-space: pre-wrap;
}

@media (max-width: 900px) {
    .character-card-review-grid,
    .character-card-provenance,
    .character-card-import-controls,
    .character-card-field-pair {
        grid-template-columns: 1fr;
    }

    .character-card-decision-panel,
    .character-card-studio-heading {
        flex-direction: column;
    }
}
.journal-embed-editor {
  margin: 2rem 0;
  padding: 1.25rem;
  border: 1px solid rgba(40, 242, 225, 0.32);
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(15, 8, 31, 0.96), rgba(4, 20, 28, 0.9));
}

.journal-embed-editor-heading,
.journal-embed-picker,
.journal-embed-edit-row,
.journal-embed-edit-copy,
.journal-embed-order-actions,
.journal-structured-embeds > header,
.journal-structured-embed figcaption,
.journal-embed-audio-card,
.journal-embed-album-card {
  display: flex;
}

.journal-embed-editor-heading,
.journal-structured-embeds > header,
.journal-structured-embed figcaption {
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.journal-embed-editor-heading h2,
.journal-structured-embeds h2 {
  margin: 0.2rem 0 0.35rem;
}

.journal-embed-editor-heading > span {
  flex: 0 0 auto;
  color: var(--drakima-cyan);
  font-size: 0.82rem;
}

.journal-embed-picker {
  display: grid;
  grid-template-columns: minmax(12rem, 0.8fr) minmax(16rem, 1.2fr) auto;
  gap: 0.8rem;
  align-items: end;
  margin-top: 1rem;
}

.journal-embed-edit-list,
.journal-structured-embed-list {
  display: grid;
  gap: 0.85rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.journal-embed-edit-row {
  gap: 1rem;
  align-items: stretch;
  padding: 1rem;
  border-left: 4px solid var(--drakima-pink);
  background: rgba(7, 5, 17, 0.82);
}

.journal-embed-edit-row.is-unavailable {
  border-left-color: #ffb347;
}

.journal-embed-edit-copy {
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 0.35rem;
}

.journal-embed-type {
  color: var(--drakima-cyan);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.journal-embed-order-actions {
  flex: 0 0 auto;
  gap: 0.4rem;
  align-items: flex-start;
}

.journal-embed-empty {
  margin: 1rem 0 0;
  color: rgba(235, 241, 255, 0.68);
}

.journal-structured-embeds {
  margin: 2.25rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(40, 242, 225, 0.25);
}

.journal-structured-embed {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(232, 53, 214, 0.32);
  border-radius: 0.8rem;
  background: rgba(4, 5, 14, 0.86);
}

.journal-embed-player video,
.journal-embed-image-link img {
  display: block;
  width: 100%;
  max-height: 42rem;
  object-fit: contain;
  background: #03040a;
}

.journal-embed-audio-card,
.journal-embed-album-card {
  gap: 1rem;
  padding: 1rem;
  align-items: flex-start;
}

.journal-embed-audio-card > img,
.journal-embed-album-card > img {
  width: clamp(6rem, 20vw, 12rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.5rem;
}

.journal-embed-audio-card > div,
.journal-embed-album-card > div {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.55rem;
}

.journal-embed-audio-card audio,
.journal-embed-album-track audio {
  width: 100%;
}

.journal-embed-album-track {
  display: grid;
  gap: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(40, 242, 225, 0.15);
}

.journal-structured-embed figcaption {
  padding: 0.9rem 1rem;
  border-top: 1px solid rgba(40, 242, 225, 0.16);
}

.journal-structured-embed figcaption p {
  margin: 0.25rem 0 0;
}

.journal-embed-unavailable {
  display: grid;
  gap: 0.3rem;
  padding: 1rem;
  color: #ffcf83;
}

@media (max-width: 760px) {
  .journal-embed-picker { grid-template-columns: 1fr; }
  .journal-embed-edit-row,
  .journal-embed-audio-card,
  .journal-embed-album-card { flex-direction: column; }
  .journal-embed-order-actions { flex-wrap: wrap; }
}

/* Sanctuary roster search --------------------------------------------------- */
.gynoid-sanctuary-heading-controls {
    display: flex;
    align-items: stretch;
    justify-self: end;
    gap: .55rem;
}

.gynoid-sanctuary-search-toggle {
    display: grid;
    width: 4rem;
    min-height: 100%;
    padding: 0;
    place-items: center;
    color: var(--drakima-cyan, #22f0e6);
    border: 1px solid rgba(34, 240, 230, .58);
    background: rgba(5, 9, 25, .82);
    box-shadow: inset 0 0 1.5rem rgba(34, 240, 230, .06);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.gynoid-sanctuary-search-toggle[hidden] {
    display: none;
}

.gynoid-sanctuary-search-toggle svg {
    width: 1.55rem;
    height: 1.55rem;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.7;
}

.gynoid-sanctuary-search-toggle:hover,
.gynoid-sanctuary-search-toggle:focus-visible,
.gynoid-sanctuary-search-toggle[aria-expanded="true"] {
    color: #fff;
    border-color: var(--drakima-magenta, #ff2bbd);
    outline: none;
    background: rgba(255, 43, 189, .18);
    box-shadow: 0 0 1.3rem rgba(255, 43, 189, .28), inset 0 0 1.5rem rgba(255, 43, 189, .12);
}

.gynoid-sanctuary-search {
    display: grid;
    grid-template-columns: minmax(13rem, .7fr) minmax(18rem, 1.35fr) auto;
    align-items: end;
    gap: .75rem 1rem;
    margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
    padding: 1rem;
    border: 1px solid rgba(34, 240, 230, .28);
    border-left: 3px solid var(--drakima-cyan, #22f0e6);
    background:
        linear-gradient(110deg, rgba(3, 15, 32, .94), rgba(12, 5, 29, .92)),
        repeating-linear-gradient(90deg, transparent 0 4rem, rgba(34, 240, 230, .04) 4.05rem 4.1rem);
    box-shadow: 0 .8rem 2.4rem rgba(0, 0, 0, .25);
}

.gynoid-sanctuary-search[hidden],
.gynoid-sanctuary-card[hidden],
.gynoid-sanctuary-search-empty[hidden],
.gynoid-sanctuary-grid[hidden] {
    display: none;
}

.gynoid-sanctuary-search > label {
    display: grid;
    gap: .25rem;
    margin: 0;
    color: #f7f2ff;
    font-family: var(--drakima-font-mono, monospace);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.gynoid-sanctuary-search > label small {
    color: rgba(230, 242, 255, .62);
    font-family: var(--drakima-font-body, sans-serif);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
    text-transform: none;
}

.gynoid-sanctuary-search-control {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    min-width: 0;
    min-height: 3rem;
    align-items: center;
    border: 1px solid rgba(34, 240, 230, .55);
    background: rgba(1, 7, 19, .92);
    box-shadow: inset 0 0 1.5rem rgba(34, 240, 230, .05);
}

.gynoid-sanctuary-search-control:focus-within {
    border-color: var(--drakima-magenta, #ff2bbd);
    box-shadow: 0 0 0 2px rgba(255, 43, 189, .18), inset 0 0 1.5rem rgba(34, 240, 230, .08);
}

.gynoid-sanctuary-search-control > span {
    padding-inline: .85rem .2rem;
    color: var(--drakima-cyan, #22f0e6);
    font-size: 1.5rem;
    line-height: 1;
}

.gynoid-sanctuary-search-control input {
    width: 100%;
    min-width: 0;
    min-height: 2.85rem;
    padding: .65rem .75rem;
    color: #fff;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--drakima-font-mono, monospace);
}

.gynoid-sanctuary-search-control input::placeholder {
    color: rgba(225, 240, 250, .5);
}

.gynoid-sanctuary-search-control button {
    min-height: 2.25rem;
    margin-right: .4rem;
    padding: .45rem .7rem;
    color: var(--drakima-cyan, #22f0e6);
    border: 1px solid rgba(34, 240, 230, .42);
    background: rgba(34, 240, 230, .08);
    cursor: pointer;
    font: .6rem/1 var(--drakima-font-mono, monospace);
    text-transform: uppercase;
}

.gynoid-sanctuary-search-status {
    min-width: 10rem;
    margin: 0 0 .72rem;
    color: var(--drakima-cyan, #22f0e6);
    font: .66rem/1.25 var(--drakima-font-mono, monospace);
    text-align: right;
    text-transform: uppercase;
}

.gynoid-sanctuary-search-empty {
    display: grid;
    justify-items: center;
    gap: .45rem;
    margin-top: 1rem;
}

.gynoid-sanctuary-search-empty h2,
.gynoid-sanctuary-search-empty p {
    margin: 0;
}

/* Phone layouts retain the established desktop compositions while giving
   controls a predictable hierarchy and keeping every panel in the viewport. */
@media (max-width: 760px) {
    .gynoid-sanctuary-heading {
        align-items: start;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }

    .gynoid-sanctuary-heading h1 {
        font-size: clamp(2.65rem, 13vw, 4rem);
    }

    .gynoid-sanctuary-count {
        display: flex;
        min-width: 0;
        align-items: baseline;
        gap: .7rem;
        padding: .65rem .8rem;
    }

    .gynoid-sanctuary-heading-controls {
        justify-self: start;
        gap: .45rem;
    }

    .gynoid-sanctuary-search-toggle {
        width: 3.4rem;
        min-height: 3.4rem;
    }

    .gynoid-sanctuary-count strong {
        font-size: 1.75rem;
    }

    .gynoid-sanctuary-search {
        grid-template-columns: 1fr;
        gap: .7rem;
        padding: .85rem;
    }

    .gynoid-sanctuary-search-status {
        min-width: 0;
        margin: 0;
        text-align: left;
    }

    .gynoid-sanctuary-card-media {
        min-height: clamp(21rem, 102vw, 25rem);
    }

    .gynoid-sanctuary-card-body {
        min-height: 0;
        padding: 1.15rem;
    }

    .gynoid-sanctuary-card-topline {
        margin-bottom: .85rem;
    }

    .gynoid-sanctuary-card-body h2 {
        font-size: clamp(2.55rem, 13vw, 3.35rem);
    }

    .gynoid-sanctuary-card-body > p:last-of-type {
        margin-bottom: 0;
        line-height: 1.55;
    }

    .gynoid-sanctuary-card-action {
        align-items: stretch;
        margin-top: 1rem;
        padding-top: 0;
        flex-direction: column;
    }

    .gynoid-sanctuary-card-action .drakima-button {
        width: 100%;
        min-height: 2.75rem;
        justify-content: center;
    }

    .gynoid-sanctuary-card-action small {
        max-width: none;
        text-align: left;
    }

    .gynoid-sanctuary-page .site-lorekeeper,
    .gynoid-private-room-page .site-lorekeeper {
        display: none !important;
    }


}

@media (max-width: 600px) {
    .gynoid-profile-hero-media {
        aspect-ratio: 1 / 1;
    }

    .gynoid-profile-hero-copy {
        justify-content: flex-start;
        padding: 1.2rem;
    }

    .gynoid-profile-hero-copy h1 {
        font-size: clamp(2.8rem, 16vw, 4.25rem);
    }

    .gynoid-profile-codename {
        margin: .4rem 0 .8rem;
    }

    .gynoid-profile-intro {
        font-size: 1rem;
        line-height: 1.55;
    }

    .gynoid-profile-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .gynoid-profile-hero-actions > .drakima-button,
    .gynoid-profile-hero-actions > form,
    .gynoid-profile-hero-actions > form .drakima-button {
        width: 100%;
    }

    .gynoid-profile-hero-actions .drakima-button {
        min-height: 2.75rem;
        justify-content: center;
    }

    .gynoid-profile-local-nav {
        padding-inline: .35rem;
        scrollbar-width: thin;
    }

    .gynoid-profile-content,
    .gynoid-conversation-invite {
        padding: 1.2rem;
    }
}

@media (max-width: 420px) {
    .gynoid-sanctuary-search-control > span {
        padding-inline: .65rem .1rem;
    }

    .gynoid-sanctuary-card-media {
        min-height: 21rem;
    }

    .gynoid-affect-matrix > div {
        grid-template-columns: 5.4rem minmax(0, 1fr) 1.75rem;
        gap: .35rem;
    }
}