/* Versona Hub, Cosmos edition (2026-09-27).
   The language of Atlas's traveler select (atlas-migrate/www/atlas/index.html, #traveler-select), where a
   Versona can be chosen as your traveler: ink ground, bone text, brass for what is active or primary, rust
   for what is current or stamped, dust hairlines, square corners. Big Shoulders Stencil for names and
   titles, IBM Plex Mono for the machine (tabs, buttons, labels), Sora for anything read.
   Visual only: no id, class or behaviour depends on this file. The page's own colour literals were
   remapped to this palette in place; this layer carries type, shape and the traveler stage.
   Sizes the page changes at its breakpoints are restated in the matching media queries at the end. */

/* Fonts, self-hosted (SIL OFL 1.1, see assets/fonts/LICENSE.txt): no third-party stylesheet blocks the first
   paint, and ?v= caching covers them. Latin and latin-ext subsets; a file loads only when a glyph needs it. */
@font-face { font-family: 'Big Shoulders Stencil Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/big-shoulders-stencil-display-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Big Shoulders Stencil Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/big-shoulders-stencil-display-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/ibm-plex-mono-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/ibm-plex-mono-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/ibm-plex-mono-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('assets/fonts/sora-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('assets/fonts/sora-var-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    --ink: #120d0a;
    --ink-2: #1a130e;
    --ink-3: #241a12;
    --bone: #efe6d2;
    --sand: #b9a88f;
    --dust: #8c7a66;
    --brass: #d9a441;
    --brass-hi: #e8c77e;
    --rust: #b4462a;
    --ember: #d0613f;
    --cyan: #5fa8c9;
    --line: rgba(140, 122, 102, 0.35);
    --line-strong: rgba(140, 122, 102, 0.55);
    --line-brass: rgba(217, 164, 65, 0.32);
    --f-display: 'Big Shoulders Stencil Display', 'Arial Narrow', Impact, sans-serif;
    --f-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    --f-body: Sora, 'Segoe UI', system-ui, sans-serif;

    /* The page's own tokens, read by hundreds of rules. */
    --background: var(--ink);
    --panel: rgba(22, 16, 12, 0.97);
    --accent-primary: var(--brass);
    --accent-secondary: var(--rust);
    --text-primary: var(--bone);
    --text-secondary: var(--sand);
    --border-radius: 0;
    --glow: 0 0 0 1px rgba(217, 164, 65, 0.45);
}

/* ── Ground: plain ink ── */
body {
    font-family: var(--f-body);
    background-color: var(--ink);
    background-image: none;
    color: var(--bone);
}
.stars { display: none; }
button, input, select, textarea { font-family: inherit; }
::selection { background: rgba(217, 164, 65, 0.35); color: var(--bone); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(217, 164, 65, 0.3); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: rgba(217, 164, 65, 0.55); }
* { scrollbar-color: rgba(217, 164, 65, 0.4) transparent; }

/* ── Rail ── */
.suite-sidebar {
    background: rgba(14, 10, 8, 0.96);
    border-right: 1px solid var(--line-brass);
    box-shadow: none;
}
.sidebar-nav-item {
    position: relative;
    border-radius: 0;
    border-color: transparent;
    color: var(--sand);
}
.sidebar-nav-item:hover { background: rgba(217, 164, 65, 0.07); border-color: transparent; color: var(--bone); }
.sidebar-nav-item.active { background: rgba(217, 164, 65, 0.08); border-color: transparent; box-shadow: none; color: var(--brass); }
.sidebar-nav-item.active::before {
    content: '';
    position: absolute;
    left: -10px; top: 10px; bottom: 10px;
    width: 3px;
    background: var(--brass);
}
.sidebar-nav-label { font-family: var(--f-mono); font-weight: 600; letter-spacing: 0.1em; }
/* Not built yet: quiet, but still legible (dust on ink is 4.7:1; the old 45 % opacity failed contrast). */
.sidebar-nav-item[aria-disabled="true"], .sidebar-nav-item[aria-disabled="true"]:hover { color: var(--dust); background: transparent; cursor: default; }

/* ── Top bar: the wordmark and its stamp, as on the traveler screen ── */
.suite-topbar {
    background: rgba(18, 13, 10, 0.94);
    border-bottom: 1px solid var(--line-brass);
    box-shadow: none;
    padding-right: 76px; /* clear of the site's home button */
}
.suite-brand { gap: 16px; }
.suite-brand-icon { display: none; }
.suite-brand-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brass);
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.suite-brand-version {
    display: inline-block;
    margin-left: 0;
    padding: 3px 9px 2px;
    font: 600 11px/1.3 var(--f-mono);
    letter-spacing: 0.04em;
    color: var(--ember);
    border: 2px solid var(--rust);
    border-radius: 3px;
    opacity: 0.92;
    transform: rotate(-2.5deg);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='40'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.4 1.9'/></filter><rect width='120' height='40' filter='url(%23r)'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='40'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.4 1.9'/></filter><rect width='120' height='40' filter='url(%23r)'/></svg>");
}
.suite-live-badge {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font: 500 11px var(--f-mono);
    letter-spacing: 0.16em;
    color: var(--sand);
}
.suite-live-badge .live-dot { background: var(--brass); box-shadow: none; }

/* ── Header: the mode strip ── */
.app-header { background: transparent; border-bottom: 1px solid var(--line); }
.tab-container {
    display: inline-flex;
    gap: 0;
    padding: 0;
    border: 1px solid var(--brass);
    background: rgba(18, 13, 10, 0.6);
}
.tab-btn {
    margin: 0;
    padding: 11px 18px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--bone);
    font: 600 11px/1 var(--f-mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: background-color 0.15s, color 0.15s;
}
.tab-btn + .tab-btn { border-left: 1px solid var(--line-brass); }
.tab-btn::after { display: none; }
.tab-btn:hover { background: rgba(217, 164, 65, 0.1); color: var(--bone); }
.tab-btn.active { background: var(--brass); color: var(--ink); }
.animation-toggle { background: transparent; border: 1px solid var(--line); border-radius: 0; }
.animation-toggle:hover { background: rgba(217, 164, 65, 0.06); border-color: var(--brass); }
.animation-label { font: 500 11px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sand); }
.animation-checkbox { border-radius: 0; border-color: var(--line-strong); background-color: var(--ink); }
.animation-checkbox:checked { background-color: var(--brass); border-color: var(--brass); }

/* ── Search and the favorites filter ── */
.search-input {
    border-radius: 0;
    background: rgba(18, 13, 10, 0.7);
    border: 1px solid var(--line-strong);
    font-family: var(--f-body);
}
.search-input:focus { border-color: var(--brass); box-shadow: none; }
.search-input::placeholder { color: var(--dust); }
.search-icon { color: var(--dust); }
.vfav-filter-btn {
    border-radius: 0;
    border: 1px solid var(--line);
    font: 600 10.5px var(--f-mono);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sand);
}
.vfav-filter-btn:hover, .vfav-filter-btn.active { border-color: var(--brass); background: rgba(217, 164, 65, 0.08); color: var(--brass-hi); }
.vfav-badge { border-radius: 0; background: rgba(217, 164, 65, 0.2); color: var(--brass-hi); }
.vgrid-section-label { font: 500 10.5px var(--f-mono); letter-spacing: 0.25em; text-transform: uppercase; color: var(--dust); }
.vgrid-section-label.fav { color: var(--brass); }

/* ── Versona cards: a traveler on a stage, the record under it ── */
.versona-grid { gap: 16px; }
.versona-tile {
    border-radius: 0;
    background: rgba(18, 13, 10, 0.74);
    border: 1px solid var(--line);
    box-shadow: none;
    transition: border-color 0.15s;
}
.versona-tile:hover { transform: none; box-shadow: none; border-color: rgba(217, 164, 65, 0.75); }
.versona-tile.favorited { border-color: rgba(217, 164, 65, 0.55); box-shadow: inset 3px 0 0 var(--brass); }
.versona-info { padding: 12px 14px; border-top: 1px solid var(--line); }
.versona-name {
    margin-bottom: 6px;
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone);
}
.versona-desc { font-family: var(--f-body); font-weight: 300; font-size: 12.5px; line-height: 1.55; color: var(--sand); }
.vtile-action-btn, .vtile-share-btn, .vtile-details-btn {
    border-radius: 0;
    border-color: var(--line);
    background: transparent;
    color: var(--sand);
}
.vtile-action-btn:hover, .vtile-share-btn:hover, .vtile-details-btn:hover { border-color: var(--brass); background: rgba(217, 164, 65, 0.1); color: var(--bone); }
.vtile-fav-btn.favorited { color: var(--brass-hi); border-color: rgba(217, 164, 65, 0.6); background: rgba(217, 164, 65, 0.1); }
/* Visit: the card's way into the Versona's room, the one brass action in the row */
.vtile-visit-btn { width: auto; padding: 0 11px; color: var(--brass); border-color: var(--line-brass); font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-decoration: none; }
.vtile-visit-btn:hover { color: var(--brass-hi); border-color: var(--brass); background: rgba(217, 164, 65, 0.12); }

/* The traveler stage: floor grid and brass ring behind every 3D viewer (the canvases are transparent). */
.versona-tile .model-container,
.modal-model-container,
.preset-model-showcase,
.preview-viewer,
.chat-3d-viewport {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background:
        radial-gradient(ellipse 32% 7% at 50% calc(var(--ring-y, 80%) + 3%), rgba(217, 164, 65, 0.3), transparent 72%),
        radial-gradient(ellipse 70% 60% at 50% 36%, rgba(180, 70, 42, 0.11), transparent 70%),
        linear-gradient(180deg, #19120d 0%, var(--ink) 72%);
}
.versona-tile .model-container::before,
.modal-model-container::before,
.preset-model-showcase::before,
.preview-viewer::before,
.chat-3d-viewport::before {
    content: '';
    position: absolute;
    left: -60%; right: -60%; bottom: 0;
    height: 46%;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(140, 122, 102, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140, 122, 102, 0.3) 1px, transparent 1px);
    background-size: 26px 26px;
    background-position: center bottom;
    transform: perspective(220px) rotateX(58deg);
    transform-origin: 50% 100%;
    -webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 92%);
    mask-image: linear-gradient(0deg, #000 0%, transparent 92%);
}
/* The ring sits where each viewer's framing puts the feet: fitCameraToModel aims at the model's centre from
   distanceScale × its height, so the feet land at 50% + 1 / (4 · scale · tan(fov / 2)) of the stage height.
   Tiles, details and presets: 50°, 1.9× → 78%. Chat: 45°, 3× → 70%. Upload preview: 75°, 3× → 61%.
   The ring is sized from the stage height (as the figure is): about 0.8 of the figure's height across. */
.versona-tile .model-container, .modal-model-container, .preset-model-showcase { --ring-y: 79%; --ring-h: 11%; }
.chat-3d-viewport { --ring-y: 71%; --ring-h: 8%; }
.preview-viewer { --ring-y: 62%; --ring-h: 5%; }
.versona-tile .model-container::after,
.modal-model-container::after,
.preset-model-showcase::after,
.preview-viewer::after,
.chat-3d-viewport::after {
    content: '';
    position: absolute;
    left: 50%; top: var(--ring-y);
    height: var(--ring-h);
    width: auto;
    aspect-ratio: 4 / 1;
    z-index: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(217, 164, 65, 0.7);
    border-radius: 50%;
    box-shadow: 0 0 0 7px rgba(217, 164, 65, 0.05), 0 0 22px rgba(217, 164, 65, 0.22), inset 0 0 14px rgba(217, 164, 65, 0.16);
}
.versona-tile .model-container > canvas,
.modal-model-container > canvas,
.preset-model-showcase canvas,
.preview-viewer > canvas,
.chat-3d-viewport > canvas { position: relative; z-index: 1; }

/* ── My Versona: the traveler record ── */
.my-versona-panel {
    background: rgba(18, 13, 10, 0.8);
    border-left: 1px solid var(--line-brass);
    box-shadow: none;
}
.my-versona-avatar {
    width: 64px; height: 76px;
    border-radius: 0;
    background: #2a2118;
    border: 1px solid var(--line);
    box-shadow: none;
}
.my-versona-avatar svg { color: var(--dust); opacity: 1; }
.my-versona-title { font: 500 10px var(--f-mono); letter-spacing: 0.25em; color: var(--dust); }
.my-versona-field-label { font: 500 9px var(--f-mono); letter-spacing: 0.25em; color: var(--dust); }
.my-versona-field-value {
    padding: 4px 0 4px 12px;
    background: transparent;
    border: none;
    border-left: 3px solid var(--brass);
    border-radius: 0;
    color: var(--bone);
}
#panel-versona-name {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.my-versona-field-value.status-connected { border-left-color: var(--line-strong); font: 500 12px var(--f-mono); letter-spacing: 0.04em; color: var(--brass-hi); }
.my-versona-field-value.status-connected::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--rust);
    vertical-align: 1px;
}
.my-versona-stats { border-top: 1px solid var(--line); }
.stat-id { font: 500 11px var(--f-mono); letter-spacing: 0.08em; color: var(--dust); }

/* ── Status bar, floating buttons, help ── */
.suite-statusbar { background: rgba(14, 10, 8, 0.94); border-top: 1px solid var(--line-brass); }
.status-item { font-family: var(--f-mono); font-weight: 500; letter-spacing: 0.14em; color: var(--dust); }
.status-dot { background: var(--brass); box-shadow: none; }
.suite-fab, .suite-fab.suite-fab-share { border-radius: 0; background: rgba(18, 13, 10, 0.92); border-color: var(--line); color: var(--sand); }
.suite-fab:hover, .suite-fab.suite-fab-share:hover { background: rgba(217, 164, 65, 0.1); border-color: var(--brass); color: var(--brass); }
.tutorial-help-btn {
    width: 48px; height: 48px;
    border-radius: 0;
    background: rgba(18, 13, 10, 0.92);
    border: 1px solid var(--brass);
    color: var(--brass);
    box-shadow: none;
}
.tutorial-help-btn:hover { transform: none; background: var(--brass); color: var(--ink); box-shadow: none; }
menu-overlay {
    --menu-button-bg: rgba(18, 13, 10, 0.92);
    --menu-button-bg-hover: #2a1e12;
    --menu-button-fg: var(--brass);
    --menu-button-border: 1px solid var(--brass);
    --menu-button-radius: 0;
    --menu-button-font: 'IBM Plex Mono', ui-monospace, monospace;
    --menu-button-tracking: 0.12em;
}

/* ── Forms ── */
.form-section, .preset-versonas-section {
    border-radius: 0;
    background: rgba(18, 13, 10, 0.66);
    border: 1px solid var(--line-brass);
    box-shadow: none;
}
.section-title, .platform-selection-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bone);
}
.section-title svg, .platform-selection-title svg { color: var(--brass); }
.form-label {
    font: 500 10.5px var(--f-mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dust);
}
.form-input, .form-textarea, .ai-input, .ai-select, .vtasks-input, .vtasks-select, .vtasks-textarea, .vshare-select, .vshare-textarea, .voice-name-input, .chat-versona-select {
    border-radius: 0;
    background-color: rgba(18, 13, 10, 0.62);
    border: 1px solid var(--line-strong);
    color: var(--bone);
    font-family: var(--f-body);
}
.form-input:focus, .form-textarea:focus, .ai-input:focus, .ai-select:focus, .vtasks-input:focus, .vtasks-select:focus, .vtasks-textarea:focus, .vshare-select:focus, .vshare-textarea:focus, .voice-name-input:focus, .chat-versona-select:focus {
    border-color: var(--brass);
    box-shadow: none;
    outline: none;
}
.form-input::placeholder, .form-textarea::placeholder, .chat-input::placeholder { color: var(--dust); opacity: 1; }
select option { background: var(--ink-2); color: var(--bone); }
.file-drop-area, .voice-upload-area {
    border: 1px dashed var(--line-strong);
    border-radius: 0;
    background: transparent;
}
.file-drop-area:hover, .file-drop-area.dragover, .voice-upload-area:hover { border-color: var(--brass); background: rgba(217, 164, 65, 0.05); }
.file-message { font-family: var(--f-body); color: var(--sand); }
.model-source-toggle { border-radius: 0; background: transparent; border: 1px solid var(--line-brass); }
.model-source-btn { border-radius: 0; font: 600 11px var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.model-source-btn.active { background: var(--brass); color: var(--ink); box-shadow: none; }
.traits-container .trait, .modal-trait, .preset-trait, .tool-item {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--sand);
    font: 500 10.5px var(--f-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.alert { border-radius: 0; }
#versona-plan-banner { border-radius: 0 !important; border-left: 3px solid var(--brass) !important; font-family: var(--f-body); }
.image-to-3d-info, .image-to-3d-warning, .image-to-3d-status, .animation-warning, .animation-info { border-radius: 0; }

/* ── Buttons: one brass fill for the primary action, outlines for the rest ── */
.btn, .preset-select-btn, .tutorial-btn, .voice-submit-button, .sample-ref-apply-btn, .ref-edit-save-btn, .vtasks-submit-btn, .ai-generate-btn, .export-btn {
    border: none;
    border-radius: 0;
    background: var(--brass);
    color: var(--ink);
    box-shadow: none;
    font-family: var(--f-mono);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    transition: background-color 0.15s, color 0.15s;
}
.btn, .preset-select-btn, .tutorial-btn { font-size: 12px; }
.btn:hover, .preset-select-btn:hover, .tutorial-btn:hover, .voice-submit-button:hover:not(:disabled), .sample-ref-apply-btn:hover, .ref-edit-save-btn:hover, .vtasks-submit-btn:hover, .ai-generate-btn:hover, .export-btn:hover {
    background: var(--bone);
    color: var(--ink);
    transform: none;
    box-shadow: none;
    filter: none;
}
.preset-carousel-card.selected .preset-select-btn { background: var(--bone); box-shadow: none; }
.tutorial-btn-secondary, .preset-preview-btn, .preview-btn, .modal-btn, .add-voice-button, .sample-ref-btn, .sample-ref-cancel-btn, .ref-edit-cancel-btn, .tutorial-nav-btn, .chat-toolbar-btn, .vshare-util-btn, .vshare-snap-btn, .vtasks-cal-btn, .voice-record-button, .vdocs-viewer-footer-btn, .play-voice-btn {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--bone);
    box-shadow: none;
    font-family: var(--f-mono);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.tutorial-btn-secondary, .preset-preview-btn { border-color: var(--brass); color: var(--brass); }
.tutorial-btn-secondary:hover, .preset-preview-btn:hover, .preview-btn:hover, .modal-btn:hover, .add-voice-button:hover, .sample-ref-btn:hover, .sample-ref-cancel-btn:hover, .ref-edit-cancel-btn:hover, .tutorial-nav-btn:hover:not(:disabled), .chat-toolbar-btn:hover, .vshare-util-btn:hover, .vshare-snap-btn:hover, .vtasks-cal-btn:hover, .voice-record-button:hover, .vdocs-viewer-footer-btn:hover, .play-voice-btn:hover {
    background: rgba(217, 164, 65, 0.1);
    border-color: var(--brass);
    color: var(--brass-hi);
    transform: none;
}
.chat-toolbar-btn.active { background: rgba(217, 164, 65, 0.14); border-color: var(--brass); color: var(--brass); }
.modal-btn.delete-btn { border-color: rgba(180, 70, 42, 0.7); color: var(--ember); }
.modal-btn.delete-btn:hover { background: rgba(180, 70, 42, 0.14); border-color: var(--ember); color: #e8866a; }

/* ── Preset carousel ── */
.preset-trigger-btn {
    border-radius: 0;
    background: transparent;
    border: 1px dashed var(--line-strong);
    font-family: var(--f-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sand);
}
.preset-trigger-btn:hover { background: rgba(217, 164, 65, 0.06); border-color: var(--brass); color: var(--bone); box-shadow: none; }
.preset-carousel-card {
    border-radius: 0;
    background: rgba(18, 13, 10, 0.7);
    border: 1px solid var(--line-brass);
    box-shadow: none;
}
.preset-carousel-card:hover { transform: none; border-color: rgba(217, 164, 65, 0.7); box-shadow: none; }
.preset-carousel-card.selected { border-color: var(--brass); background: rgba(217, 164, 65, 0.06); box-shadow: inset 3px 0 0 var(--brass); }
.preset-model-showcase { border: 1px solid var(--line); }
.preset-icon {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--brass);
    color: var(--brass);
    font-family: var(--f-display);
    font-weight: 700;
}
.preset-name, .preset-info h3 {
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone);
}
.preset-description { font-family: var(--f-body); font-weight: 300; color: var(--sand); }
.carousel-nav-btn { border-radius: 0; background: rgba(18, 13, 10, 0.9); border: 1px solid var(--line-strong); color: var(--bone); box-shadow: none; }
.carousel-nav-btn:hover:not(:disabled) { border-color: var(--brass); color: var(--brass); background: rgba(18, 13, 10, 0.95); transform: none; }
.carousel-indicator { border-radius: 0; height: 3px; background: var(--line); }
.carousel-indicator.active { background: var(--brass); }

/* ── Modals and sheets ── */
.modal-container, .preview-container, .preset-modal-content, .voice-upload-content, .sample-ref-container, .ref-edit-container,
.vdocs-modal, .vdocs-viewer-modal, .vtasks-modal, .vtasks-day-modal, .vshare-modal, .tutorial-modal-content {
    border-radius: 0;
    background: rgba(22, 16, 12, 0.98);
    border: 1px solid var(--line-brass);
    border-top: 2px solid var(--brass);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
}
.modal-title, .preview-title, .preset-modal-title, .voice-upload-title, .sample-ref-title, .ref-edit-title,
.vdocs-title, .vdocs-viewer-title, .vtasks-title, .vshare-title, .vtasks-day-title, .tutorial-modal-title {
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bone);
    background: none;
    -webkit-text-fill-color: currentColor;
    text-shadow: none;
}
.modal-title { border-bottom-color: var(--line); }
.modal-close, .preview-close, .preset-modal-close, .voice-upload-close, .sample-ref-close, .ref-edit-close,
.vdocs-close, .vdocs-viewer-close, .vtasks-close, .vshare-close, .vtasks-day-close {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--sand);
}
.modal-close:hover, .preview-close:hover, .preset-modal-close:hover, .voice-upload-close:hover, .sample-ref-close:hover, .ref-edit-close:hover,
.vdocs-close:hover, .vdocs-viewer-close:hover, .vtasks-close:hover, .vshare-close:hover, .vtasks-day-close:hover { border-color: var(--brass); color: var(--brass); background: rgba(217, 164, 65, 0.08); }
.section-label, .vtasks-label, .vshare-field-label, .ai-label {
    font: 500 10.5px var(--f-mono);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--dust);
}
.modal-desc { font-family: var(--f-body); color: var(--bone); }

/* ── Export ── */
/* Each card's plate (assets/export/*.webp, painted in this palette) is set inline with image-set(); the subject
   sits in the upper middle and the ink shade keeps the title and description readable. */
.export-option {
    justify-content: flex-end;
    min-height: 212px;
    padding: 112px 16px 18px; /* the painting keeps the top band; the words sit on the ink below it */
    border-radius: 0;
    border: 1px solid var(--line);
    background-color: var(--ink);
    background-size: cover;
    background-position: center 30%;
    background-repeat: no-repeat;
    box-shadow: inset 0 -118px 56px -24px rgba(18, 13, 10, 0.95);
}
.export-option:hover, .export-option.selected {
    transform: none;
    border-color: var(--brass);
    box-shadow: inset 0 -118px 56px -24px rgba(18, 13, 10, 0.95), inset 0 -3px 0 var(--brass);
}
/* The painting names the export now; the old glyph only covered it. Kept in the markup, hidden from view. */
.export-option .export-icon { display: none; }
.export-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone);
}
.export-desc { font-family: var(--f-body); color: var(--sand); }
.platform-option { border-radius: 0; border: 1px solid var(--line); background-color: rgba(18, 13, 10, 0.7); }
.platform-option:hover { border-color: var(--brass); background-color: rgba(217, 164, 65, 0.06); }
.platform-option.selected { border-color: var(--brass); background-color: rgba(217, 164, 65, 0.1); box-shadow: inset 3px 0 0 var(--brass); }
.platform-name { font: 600 12px var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; }

/* ── Instructions (a real sequence, so the steps keep their numbers) ── */
.instruction-card { border-radius: 0; background: rgba(18, 13, 10, 0.66); border-left: 3px solid var(--brass); }
.instruction-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bone);
}
.instruction-title svg { color: var(--brass); }
.instruction-text { font-family: var(--f-body); color: var(--sand); }
.step-number {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--brass);
    color: var(--brass);
    font: 600 12px var(--f-mono);
}
.step-content { font-family: var(--f-body); line-height: 1.6; color: var(--sand); }
.step-content strong, .step-content b, .step-content h4 { display: block; margin-bottom: 2px; font-family: var(--f-mono); font-weight: 600; letter-spacing: 0.06em; color: var(--bone); }

/* ── Chat ── */
.chat-3d-panel { background: rgba(18, 13, 10, 0.72); border-right-color: var(--line-brass); }
.chat-main-panel { background: rgba(18, 13, 10, 0.78); } /* the conversation reads on ink, not on the painting */
.chat-toolbar { border-bottom-color: var(--line); }
.chat-toolbar-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone);
}
.chat-empty-state h3 { font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: 0.05em; text-transform: uppercase; }
.chat-empty-state p { font-family: var(--f-body); color: var(--sand); }
.chat-msg-avatar { border-radius: 0; font-family: var(--f-mono); font-weight: 600; }
.chat-msg.assistant .chat-msg-avatar { background: var(--brass); color: var(--ink); }
.chat-msg.user .chat-msg-avatar { background: transparent; border: 1px solid var(--line-strong); color: var(--sand); }
.chat-msg-bubble { border-radius: 0; font-family: var(--f-body); }
.chat-msg.assistant .chat-msg-bubble { background: rgba(26, 19, 14, 0.9); border: 1px solid var(--line); border-left: 3px solid var(--brass); }
.chat-msg.user .chat-msg-bubble { background: rgba(217, 164, 65, 0.1); border: 1px solid var(--line-brass); }
.chat-msg-time { font-family: var(--f-mono); color: var(--dust); opacity: 1; }
.chat-input-area { border-top-color: var(--line); }
.chat-input { border-radius: 0; background: rgba(18, 13, 10, 0.62); border: 1px solid var(--line-strong); font-family: var(--f-body); }
.chat-input:focus { border-color: var(--brass); }
.chat-send-btn { border-radius: 0; background: var(--brass); color: var(--ink); }
.chat-send-btn:hover:not(:disabled) { background: var(--bone); transform: none; box-shadow: none; }
.chat-history-item { border-radius: 0; font-family: var(--f-body); }
.chat-versona-select { font-family: var(--f-mono); }

/* ── Tutorial ── */
.tutorial-modal-title { font-size: 44px; line-height: 1; color: var(--brass); }
.tutorial-modal-subtitle { font: 500 12px var(--f-mono); letter-spacing: 0.14em; color: var(--ember); }
.tutorial-modal-text { font-family: var(--f-body); color: var(--bone); }
.tutorial-bubble { border-radius: 0; background: rgba(22, 16, 12, 0.98); border: 1px solid var(--brass); }
.tutorial-bubble-icon { border-radius: 0; background: var(--brass); color: var(--ink); }
.tutorial-bubble-title { font-family: var(--f-display); font-size: 22px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--bone); }
.tutorial-bubble-text { font-family: var(--f-body); }
.tutorial-progress { font-family: var(--f-mono); letter-spacing: 0.1em; color: var(--dust); white-space: nowrap; }
.tutorial-bubble-actions { gap: 8px; flex-wrap: wrap; }
.tutorial-nav-btn { padding: 8px 10px; font-size: 10.5px; letter-spacing: 0.12em; }
.tutorial-nav-btn#tutorial-exit-btn { margin-left: 0 !important; }

/* ── Share sheet (it had its own purple accents) ── */
.vshare-img-placeholder, .vshare-img-placeholder b { font-family: var(--f-mono); color: var(--dust); }
.vshare-char-count { font-family: var(--f-mono); color: var(--dust); }
.vshare-note { border-radius: 0; font-family: var(--f-body); color: var(--sand); }
.vshare-versona-label { font: 500 10.5px var(--f-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--dust); }
.vshare-versona-name { font-family: var(--f-display); font-weight: 700; font-size: 26px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bone); }
.vshare-title { font-size: 20px; }
.vshare-platform-btn { border-radius: 0; font-family: var(--f-mono); }

/* ── Breakpoints: the page's own sizes, restated in this type ── */
@media (max-width: 1024px) {
    .tab-container {
        display: flex;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tab-container::-webkit-scrollbar { display: none; }
    .tab-btn { white-space: nowrap; flex-shrink: 0; }
    .suite-brand-title { font-size: 28px; }
    /* The tabs' wrapper spans the header. Left to size itself in the column header, it grew to the tabs'
       full width and was clipped, so Instructions and Chat could not be reached. */
    .app-header-main { width: 100%; min-width: 0; }
    /* Without the right-hand panel the chat reaches the bottom right corner, so the tour button moves into the
       top bar beside the home button (home.html sets the home button 6 px from the top: both are centred). */
    .suite-topbar { height: 56px; padding-right: 118px; }
    .tutorial-help-btn {
        width: 44px; height: 44px;
        top: calc(6px + env(safe-area-inset-top, 0px)); bottom: auto;
        right: calc(66px + env(safe-area-inset-right, 0px));
    }
}
@media (max-width: 768px) {
    .suite-brand-title { font-size: 24px; }
    .tab-btn { padding: 10px 14px; font-size: 10.5px; letter-spacing: 0.16em; }
    .versona-name { font-size: 22px; }
    .sidebar-nav-item.active::before { display: none; }
}
@media (max-width: 600px) {
    .tab-btn { padding: 10px 12px; font-size: 10px; letter-spacing: 0.14em; }
    .tutorial-modal-title { font-size: 34px; }
}
/* Too narrow for one row (the strip needs about 610 px beside the 60 px sidebar): all six tabs in two rows of three
   (Connections made the sixth, 2026-10-07), ruled like the strip (the hairlines are the grid gap) */
@media (max-width: 700px) {
    .tab-container {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: 1px;
        overflow: visible;
        background: var(--line-brass);
    }
    .tab-btn {
        grid-column: span 2;
        white-space: normal;
        text-align: center;
        line-height: 1.35;
        padding: 10px 6px;
        background: var(--ink);
    }
    .tab-btn + .tab-btn { border-left: none; }
    .tab-btn:hover { background: #261c10; } /* the strip's 10 % brass hover, made opaque over --ink */
    .tab-btn.active { background: var(--brass); }
}
@media (max-width: 480px) {
    .suite-brand-title { font-size: 22px; }
    .versona-name { font-size: 19px; }
    .versona-desc { font-size: 11.5px; }
    .section-title, .platform-selection-title { font-size: 19px; }
    .export-title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .suite-brand-version { transform: none; }
}