*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --bg:            #0d1117;
    --surface:       #161b24;
    --surface-2:     #1c2333;
    --surface-3:     #121c2e;   /* panel dropdown */
    --border:        #2a3548;
    --border-2:      #374861;
    --text:          #dce6f0;
    --text-dim:      #7a93aa;
    --accent:        #f5a624;
    --accent-dim:     rgba(245, 166, 36, 0.12);
    --accent-dim-2:   rgba(245, 166, 36, 0.18);
    --accent-outline: rgba(245, 166, 36, 0.40);
    --accent-glow:   rgba(245, 166, 36, 0.35);
    --accent-glow-strong: rgba(245, 166, 36, 0.70);
    --accent-bright: #fde68a;
    --accent-hover:  #fbbf24;
    --on-accent:     #070b10;   /* text/icon on accent background */
    --cyan:          #56d0f8;
    --red:           #f87171;
    --red-dim:       rgba(248, 113, 113, 0.15);
    --red-glow:      rgba(248, 113, 113, 0.45);
    --danger:              #d9534f;
    --danger-dark:         #c0504d;
    --danger-border:       #7a2f2e;
    --danger-border-hover: #a03333;
    --danger-dim:          rgba(217, 83, 79, 0.15);
    --link:          #c8e0ff;
    --link-dim:      #a0c8f0;
    --link-border:   rgba(160, 200, 240, 0.35);
    --link-bg:       rgba(160, 200, 240, 0.10);
    --lr:            #f06428;
    --lr-dim:        rgba(240, 100, 40, 0.25);
    --lr-glow:       rgba(240, 100, 40, 0.45);
    --overlay:       rgba(7, 11, 16, 0.82);
    --overlay-drop:  rgba(7, 11, 16, 0.88);
    --overlay-splash: rgba(7, 11, 16, 0.72);
    --splash-bg:      rgba(13, 18, 26, 0.94);
    --splash-border:  rgba(212, 160, 23, 0.28);
    --swatch-blue:   #4a90d9;
    --swatch-gray:   #888;
    --canvas-bg:     #000;
    --mono:          'JetBrains Mono', 'Courier New', monospace;
    --display:       'Barlow Condensed', sans-serif;

    /* Font scale — change these to resize the entire UI */
    --fs-xs:   13px;
    --fs-sm:   14px;
    --fs-md:   15px;
    --fs-lg:   17px;
    --fs-xl:   22px;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: var(--fs-md);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: auto;
}

/* ── HEADER ───────────────────────────────── */
header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 20px;
    height: 44px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky;
    top: 0;
    z-index: 100;
    overflow: visible;
}
.app-logo {
    font-family: var(--display);
    font-weight: 700;
    font-size: 21px;
    letter-spacing: 0.14em;
    color: var(--accent);
}
#app-title { cursor: pointer; text-decoration: underline dotted var(--accent-outline); }
.app-divider {
    width: 1px;
    height: 20px;
    background: var(--border-2);
}
.header-spacer { flex: 1; }
.header-links { display: flex; align-items: center; gap: 10px; }
.header-links-label { font-family: var(--display); font-size: var(--fs-xs); letter-spacing: 0.05em; color: var(--text-dim); text-transform: uppercase; }
.header-links a { font-family: var(--display); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.07em; color: var(--link); text-decoration: none; text-transform: uppercase; padding: 2px 7px; border: 1px solid var(--link-border); border-radius: 3px; }
.header-links a:hover { color: #fff; border-color: var(--link-dim); background: var(--link-bg); }
.status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--text-dim);
    transition: background 0.3s, box-shadow 0.3s;
    vertical-align: middle;
    margin-left: 4px;
}
.status-dot.training {
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
    animation: pulse-dot 1.2s ease-in-out infinite;
}
.status-dot.stopped { background: var(--red); }
select[data-dirty] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim); }
input[type="range"][data-dirty] { background: var(--accent-dim); }
input[type="range"][data-dirty]::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--accent), 0 0 6px var(--accent-glow); }
@keyframes pulse-dot {
    0%, 100% { opacity: 1;   transform: scale(1);   }
    50%      { opacity: 0.4; transform: scale(0.6); }
}

/* ── LAYOUT ───────────────────────────────── */
#app {
    display: flex;
    height: calc(100vh - 44px);
}

/* ── HEADER PANELS ────────────────────────── */
#sidebar {
    display: flex;
    flex-direction: row;
    overflow: visible;
    align-self: stretch;
    gap: 0;
}
.help-modal::-webkit-scrollbar-thumb { background: var(--border-2); }

.ctrl-section {
    position: relative;
    border-right: 1px solid var(--border-2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.section-label {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-xs);
    letter-spacing: 0.15em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0 14px;
    width: auto;
    white-space: nowrap;
}
.ctrl-section:not(.collapsed) .section-label {
    background: var(--accent-dim);
    border-bottom-color: var(--accent);
}
.section-label::after {
    content: '▾';
    margin-left: 4px;
    font-size: var(--fs-xs);
    transition: transform 0.15s;
}
.ctrl-section.collapsed .section-label::after { transform: rotate(-90deg); }
.ctrl-section.collapsed > :not(.section-label) { display: none; }
/* Dropdown panels */
.ctrl-section > .section-body,
.ctrl-section > #model-controls {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    min-width: 230px;
    padding: 14px 16px;
    border: 1px solid var(--border-2);
    border-top: 2px solid var(--accent);
    box-shadow: 0 8px 28px rgba(0,0,0,0.55);
}
.ctrl-section > .section-body,
.ctrl-section > #model-controls { background: var(--surface-3); }
#model-controls[inert] { opacity: 0.6; transition: opacity 0.2s; }
#model-controls { transition: opacity 0.2s; }
.section-label::before {
    content: '';
    display: block;
    width: 4px;
    height: 14px;
    background: var(--accent);
    opacity: 1;
    border-radius: 2px;
}

.ctrl-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}
.ctrl-row:last-child, .slider-row:last-child { margin-bottom: 0; }
.flex-row  { display: flex; flex-direction: row; gap: 6px; }
.flex-fill { flex: 1; min-width: 0; }
.ctrl-label {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.hint-tiny { font-size: 0.75em; opacity: 0.6; }
.ctrl-label a { color: var(--link-dim); text-decoration: underline; }
.ctrl-label a:hover { color: var(--link); }

select {
    width: 100%;
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border-2);
    padding: 5px 28px 5px 8px;
    font-family: var(--mono);
    font-size: var(--fs-sm);
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%237a93aa'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    border-radius: 2px;
    transition: border-color 0.15s;
}
select:focus    { border-color: var(--accent); }
select:disabled { opacity: 0.75; cursor: default; }
#activation   { display: none; }

.activation-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}
.activ-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 5px 4px 4px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 3px;
    color: var(--text-dim);
    cursor: pointer;
    font-size: var(--fs-xs);
    font-family: var(--mono);
    letter-spacing: 0.04em;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.activ-btn:hover { border-color: var(--border-2); color: var(--text); }
.activ-btn.selected { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.activ-btn[data-val="none"] { color: var(--danger-dark); border-color: var(--danger-border); }
.activ-btn[data-val="none"]:hover { color: var(--danger); border-color: var(--danger-border-hover); }
.activ-btn[data-val="none"].selected { border-color: var(--danger); color: var(--danger); background: var(--danger-dim); }
.activ-btn svg { width: 40px; height: 20px; display: block; }
.activ-btn svg .axis { stroke: currentColor; stroke-width: 0.5; opacity: 0.25; }
.activ-btn svg path, .activ-btn svg polyline { stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.ctrl-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.ctrl-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border: 1px solid var(--border-2);
    background: var(--surface-2);
    cursor: pointer;
    position: relative;
    border-radius: 2px;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.ctrl-check input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.ctrl-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3px; top: 1px;
    width: 5px; height: 8px;
    border: 1.5px solid var(--on-accent);
    border-top: none;
    border-left: none;
    transform: rotate(40deg);
}

.slider-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 13px;
}
.slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.slider-val {
    font-size: var(--fs-md);
    font-weight: 500;
    color: var(--accent);
}
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 2px;
    background: var(--border-2);
    outline: none;
    cursor: pointer;
    border-radius: 1px;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    box-shadow: 0 0 6px var(--accent-glow);
    transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
input[type="range"].lr-slider { background: var(--lr-dim); }
input[type="range"].lr-slider::-webkit-slider-thumb {
    background: var(--lr);
    box-shadow: 0 0 6px var(--lr-glow);
}
input[type="range"].lr-slider::-moz-range-thumb {
    background: var(--lr);
    box-shadow: 0 0 6px var(--lr-glow);
}
input[type="range"]::-moz-range-thumb {
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: pointer;
}

.btn {
    padding: 10px 14px;
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-md);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border: none;
    border-radius: 2px;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
@keyframes start-btn-pulse {
    0%   { background: var(--accent);        box-shadow: 0 0 6px var(--accent-glow); }
    50%  { background: var(--accent-bright); box-shadow: 0 0 18px var(--accent-glow-strong); }
    100% { background: var(--accent);        box-shadow: 0 0 6px var(--accent-glow); }
}
#start-btn {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 5px 18px;
    min-width: 8em;
    text-align: center;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 4px;
    animation: start-btn-pulse 2s ease-in-out infinite;
    letter-spacing: 0.04em;
}
#start-btn:hover {
    background: var(--accent-hover);
    box-shadow: 0 0 12px var(--accent-glow);
    animation: none;
}
#start-btn.stopping {
    background: var(--red);
    color: #fff;
    animation: none;
}
#start-btn.stopping:hover {
    background: color-mix(in srgb, var(--red) 60%, white);
    box-shadow: 0 0 14px color-mix(in srgb, var(--red) 30%, transparent);
}
.btn-danger {
    background: transparent;
    color: var(--red);
    border: 1px solid var(--red);
    opacity: 0.7;
}
.btn-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--red) 10%, transparent);
    opacity: 1;
}
.btn-dim {
    padding: 6px 10px;
    font-size: var(--fs-xs);
    background: var(--surface-2);
    color: var(--text-dim);
    border: 1px solid var(--border-2);
}
#file-input, #model-file-input { display: none; }
.btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.btn-accent {
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid var(--accent-outline);
}
.btn-accent:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border-color: var(--accent);
    box-shadow: 0 0 8px var(--accent-glow);
}
.ctrl-row.btn-row { flex-direction: row; gap: 6px; }
.ctrl-row.btn-row .btn { flex: 1; font-size: var(--fs-xs); padding: 4px 8px; }
.header-btns { display: flex; align-items: center; gap: 6px; margin-right: 14px; }
.header-btns .btn { width: auto; font-size: var(--fs-xs); padding: 3px 9px; }
#example-select { width: auto; font-size: var(--fs-xs); padding: 3px 24px 3px 7px; background-color: var(--accent-dim); color: var(--accent); border-color: var(--accent-outline); }

.header-actions { margin-right: 0; }
#start-tooltip { position: fixed; background: var(--accent); color: var(--on-accent); font-size: 0.8rem; font-weight: 700; padding: 8px 16px; border-radius: 6px; white-space: nowrap; pointer-events: none; opacity: 0; z-index: 9999; transform: translateX(-50%); box-shadow: 0 4px 16px rgba(0,0,0,0.4); letter-spacing: 0.03em; }
#start-tooltip::before { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: var(--accent); }
#start-tooltip.visible { animation: tooltip-show 5s ease forwards; }
@keyframes tooltip-show { 0% { opacity: 0; } 15% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
#reset-btn { width: 100%; background: transparent; color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 40%, transparent); opacity: 0.65; }
#reset-btn:hover:not(:disabled) { opacity: 1; background: color-mix(in srgb, var(--red) 8%, transparent); }
.panel-header .btn {
    font-size: var(--fs-xs); padding: 2px 8px;
    background: transparent;
    color: var(--text-dim);
    border: 1px solid var(--border);
    font-weight: 400;
    letter-spacing: 0.05em;
}
.panel-header .btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    border-color: var(--accent-outline);
}

/* ── WORKSPACE ────────────────────────────── */
#workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 8px 12px;
    gap: 6px;
    min-width: 0;
}

.canvas-row {
    display: flex;
    gap: 6px;
    flex: 1;
    min-height: 0;
    align-items: center;
}
.canvas-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    background: var(--surface);
    min-width: 0;
}
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 8px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
}
.panel-header--sep { border-top: 1px solid var(--border); }
#source-panel .panel-header, #output-panel .panel-header,
#source-panel .layers-legend, #output-panel .layers-legend { height: 26px; box-sizing: border-box; }
.legend-btn { font-size: var(--fs-xs); padding: 1px 7px; font-weight: 400; letter-spacing: 0.05em; background: transparent; border: 1px solid var(--border); color: var(--text-dim); }
.legend-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-color: var(--accent-outline); }
.legend-btn:disabled { opacity: 0.35; cursor: default; }
#zoom-overlay {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(0,0,0,0.55);
    border-radius: 4px;
    z-index: 2;
    pointer-events: auto;
    opacity: 0.35;
    transition: opacity 0.15s;
    cursor: default;
    font-size: var(--fs-xs);
    color: var(--text-dim);
    font-family: var(--mono);
}
#zoom-overlay:hover { opacity: 1; }
#output-panel .canvas-wrap.zoomed #canvas { max-width: none; max-height: none; }
.layers-viz-label { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.layers-legend { display: flex; align-items: center; gap: 10px; padding: 3px 10px; border-top: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; }
.layers-legend-item { display: flex; align-items: center; gap: 4px; font-family: var(--display); font-size: var(--fs-xs); color: var(--text-dim); letter-spacing: 0.05em; }
.layers-legend-val { color: var(--accent); font-family: var(--mono); margin-left: auto; }
.viz-interval-sel { width: auto; padding: 1px 18px 1px 4px; font-size: var(--fs-xs); background-size: 7px; background-position: right 4px center; }
#output-zoom { width: 52px; }
#output-zoom-val { display: inline-block; width: 4ch; text-align: right; }
.panel-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-md);
    letter-spacing: 0.1em;
    color: var(--accent);
    text-transform: uppercase;
}
.panel-hint {
    font-size: var(--fs-xs);
    color: var(--text-dim);
    letter-spacing: 0.03em;
    font-family: var(--mono);
}
.canvas-wrap {
    position: relative;
    background: var(--canvas-bg);
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#canvas, #source-canvas {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

#emb-overlay { position: absolute; inset: 0; }
#sweep-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#source-sweep-canvas {
    position: absolute;
    width: auto; height: auto;
    max-width: 100%; max-height: 100%;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none; z-index: 1;
}
#emb-overlay > div:hover { outline: 2px solid rgba(255,60,60,0.9); outline-offset: -2px; }

#drop-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--overlay-drop);
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s, outline 0.2s;
}
#drop-overlay.hidden { display: none; }
#drop-overlay.dragover {
    background: var(--accent-dim);
    outline: 1px dashed var(--accent);
    outline-offset: -3px;
}
.drop-icon {
    font-size: 30px;
    color: var(--text-dim);
    line-height: 1;
}
.drop-text {
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-align: center;
    text-transform: uppercase;
    line-height: 1.7;
}
#source-panel, #output-panel { flex: 0 1 auto; overflow: hidden; }
#source-panel .canvas-wrap, #output-panel .canvas-wrap { flex: 0 0 auto; }
#source-panel { cursor: pointer; }
#source-panel.has-image { cursor: crosshair; }

/* ── STATS BAR ────────────────────────────── */
.stat-label {
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: 0.1em;
    color: var(--text-dim);
    text-transform: uppercase;
}
.stat-value {
    font-family: var(--mono);
    font-size: var(--fs-sm);
    font-weight: 500;
    color: var(--accent);
}
.stat-inline { gap: 5px; }

/* ── LOSS OVERLAY ─────────────────────────── */
.loss-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40%;
    height: 42px;
    pointer-events: none;
}
#loss-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── HELP MODAL ──────────────────────────────*/
.help-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.help-overlay.hidden { display: none; }
.help-modal {
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 4px;
    max-width: 680px;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    padding: 28px 32px 24px;
    position: relative;
    box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}
.help-modal::-webkit-scrollbar { width: 4px; }
#help-close {
    position: absolute;
    top: 14px; right: 16px;
    background: none; border: none;
    color: var(--text-dim); font-size: var(--fs-xl); line-height: 1;
    cursor: pointer; padding: 2px 6px;
    font-family: var(--mono);
}
#help-close:hover { color: var(--text); }
.help-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-xl);
    letter-spacing: 0.12em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.help-tagline {
    font-size: var(--fs-sm);
    color: var(--text-dim);
    margin-bottom: 22px;
    line-height: 1.6;
}
.help-section {
    margin-bottom: 20px;
}
.help-h {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-sm);
    letter-spacing: 0.15em;
    color: var(--text-dim);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.help-h::before {
    content: '';
    display: block;
    width: 2px; height: 10px;
    background: var(--accent);
    opacity: 0.6;
}
.help-p {
    font-size: var(--fs-sm);
    color: var(--text);
    line-height: 1.65;
    margin-bottom: 8px;
}
.help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}
.help-table tr { border-bottom: 1px solid var(--border); }
.help-table tr:last-child { border-bottom: none; }
.help-table td {
    padding: 5px 8px;
    vertical-align: top;
    line-height: 1.5;
}
.help-table td:first-child {
    font-family: var(--mono);
    color: var(--accent);
    white-space: nowrap;
    padding-right: 16px;
    width: 1%;
}
.help-table td:last-child { color: var(--text); }
.help-table--dim td:last-child { color: var(--text-dim); }
.help-table a { color: var(--cyan); text-decoration: none; }
.help-example {
    margin-top: 8px;
    font-size: var(--fs-xs);
    color: var(--text-dim);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 2px;
    padding: 6px 10px;
    font-family: var(--mono);
    word-break: break-all;
}
.help-example code { color: var(--cyan); }
#help-btn {
    background: var(--red-dim);
    border: 1.5px solid var(--red);
    color: var(--red);
    font-family: var(--mono);
    font-weight: 700;
    font-size: var(--fs-lg);
    width: 30px; height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
#help-btn:hover {
    background: color-mix(in srgb, var(--red) 28%, transparent);
    box-shadow: 0 0 10px var(--red-glow);
}

/* ── TOOLTIPS ─────────────────────────────── */
.tooltip-box {
    display: none;
    position: absolute;
    z-index: 9999;
    background: var(--surface-2);
    border: 1px solid var(--border-2);
    color: var(--text);
    font-family: var(--mono);
    font-size: var(--fs-xs);
    line-height: 1.55;
    padding: 6px 9px;
    border-radius: 12px;
    pointer-events: none;
    max-width: 240px;
    white-space: pre-wrap;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

/* ── THEME TOGGLE BUTTON ─────────────────────*/
#theme-btn {
    background: none;
    border: 1px solid var(--border-2);
    color: var(--text-dim);
    font-size: 15px;
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    padding: 0;
    line-height: 1;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#theme-btn:hover {
    color: var(--accent);
    border-color: var(--accent-outline);
    background: var(--accent-dim);
}

/* ── LIGHT MODE ────────────────────────────── */
[data-theme="light"] {
    --bg:            #f0f4f8;
    --surface:       #ffffff;
    --surface-2:     #e8edf4;
    --surface-3:     #dde8f6;
    --border:        #c5d0de;
    --border-2:      #a8bfd0;
    --text:          #1a2535;
    --text-dim:      #5a7090;
    --accent:        #c07800;
    --accent-dim:    rgba(192, 120, 0, 0.12);
    --accent-dim-2:  rgba(192, 120, 0, 0.18);
    --accent-outline: rgba(192, 120, 0, 0.40);
    --accent-glow:   rgba(192, 120, 0, 0.35);
    --accent-glow-strong: rgba(192, 120, 0, 0.65);
    --accent-bright: #d49020;
    --accent-hover:  #a86800;
    --on-accent:     #ffffff;
    --cyan:          #0a7fa8;
    --red:           #d44040;
    --red-dim:       rgba(212, 64, 64, 0.12);
    --red-glow:      rgba(212, 64, 64, 0.40);
    --danger:        #b52020;
    --danger-dark:   #8a1818;
    --danger-border: #b04040;
    --danger-border-hover: #882020;
    --danger-dim:    rgba(180, 32, 32, 0.10);
    --link:          #1a6bbf;
    --link-dim:      #2a82d4;
    --link-border:   rgba(26, 107, 191, 0.40);
    --link-bg:       rgba(26, 107, 191, 0.08);
    --lr:            #c84010;
    --lr-dim:        rgba(200, 64, 16, 0.18);
    --lr-glow:       rgba(200, 64, 16, 0.35);
    --overlay:       rgba(230, 236, 244, 0.88);
    --overlay-drop:  rgba(230, 236, 244, 0.92);
    --overlay-splash: rgba(230, 236, 244, 0.82);
    --splash-bg:     rgba(248, 250, 255, 0.97);
    --splash-border: rgba(192, 120, 0, 0.30);
    --swatch-blue:   #2a70c0;
    --swatch-gray:   #666;
    --canvas-bg:     #dcdcdc;
}
[data-theme="light"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath d='M0 0l4.5 5L9 0z' fill='%235a7090'/%3E%3C/svg%3E");
}
[data-theme="light"] #splash {
    --overlay-splash: rgba(7, 11, 16, 0.72);
    --splash-bg:      rgba(13, 18, 26, 0.94);
    --splash-border:  rgba(212, 160, 23, 0.28);
}

/* ── MOBILE (≤ 768px) ─────────────────────── */
.mobile-notice { display: none; }

@media (max-width: 768px) {
    body { overflow-x: hidden; }

    header {
        height: auto;
        flex-wrap: wrap;
        padding: 8px 12px;
        gap: 8px;
    }
    .app-logo { font-size: 14px; letter-spacing: 0.08em; }
    .app-divider { display: none; }
    .header-links { display: none; }
    .header-spacer { display: none; }
    .header-btns { margin-right: 0; }
    .header-btns .btn { font-size: var(--fs-xs); padding: 3px 7px; }

    #app {
        height: auto;
        min-height: 0;
    }

    #sidebar { display: none !important; }

    .mobile-notice {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 14px;
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
        font-family: var(--display);
        font-size: var(--fs-xs);
        color: var(--text-dim);
        letter-spacing: 0.07em;
        text-transform: uppercase;
        flex-shrink: 0;
    }
    .mobile-notice::before { content: '⚠'; color: var(--accent); }

    #workspace {
        padding: 8px 0;
        gap: 8px;
        overflow: visible;
    }

    .canvas-row {
        flex-direction: column;
        flex: none;
        height: auto;
        width: 100%;
    }

    .canvas-panel {
        max-width: 100% !important; /* Ensure it never overflows horizontally */
        min-height: 0;
        height: auto;
    }

    .canvas-wrap {
        width: 100%;
        height: auto;
        flex: none;
    }

    /* hide embeddings+layers panel */
    .canvas-row .canvas-panel:nth-child(2) { display: none; }

    .loss-overlay { display: none; }

    /* hide zoom control and snapshot/recall — not useful on small screens */
    #zoom-overlay, #snapshot-btn, #recall-btn { display: none; }

    /* strip footer/header hint text; keep only size info */
    .layers-legend .panel-hint { display: none; }

    .help-modal { padding: 20px 14px 16px; }
}

/* ── SPLASH SCREEN ────────────────────────── */
#splash {
    position: fixed; inset: 44px 0 0 0;
    background: var(--overlay-splash);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; z-index: 9999;
    transition: opacity 0.65s cubic-bezier(.4,0,.2,1);
}
#splash.splash-visible { opacity: 1; }
#splash.dismissing { opacity: 0; transition: opacity 1s ease-out; pointer-events: none; }
.splash-box {
    display: flex; flex-direction: column;
    align-items: center;
    gap: 10px; padding: 24px 32px 18px;
    max-width: 1140px; width: calc(100% - 48px);
    max-height: calc(100vh - 40px);
    background: var(--splash-bg);
    border: 1px solid var(--splash-border);
    border-radius: 6px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.03);
    overflow: hidden;
}
#splash h1 { font-family: 'Caveat','Bradley Hand',cursive; font-size: clamp(30px,3.8vw,54px); font-weight: 700; color: #e8e4d4; letter-spacing: 0.5px; line-height: 1; }
.splash-rule { width: clamp(180px,26vw,360px); height: 1.5px; background: linear-gradient(90deg,transparent 0%,#d4a017 30%,#d4a017 70%,transparent 100%); opacity: 0.55; flex-shrink: 0; }
.splash-diagram { width: 100%; max-width: 1100px; flex-shrink: 1; min-height: 0; }
.splash-diagram img { width: 100%; height: auto; display: block; max-height: 44vh; }
.splash-explanation { max-width: 920px; width: 100%; flex-shrink: 0; }
.splash-intro { text-align: center; font-family: 'Nunito','Segoe UI',sans-serif; font-size: clamp(13px,1.35vw,16px); color: #ccc8b8; margin-bottom: 9px; font-style: italic; }
.splash-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px 20px; }
.splash-card { padding: 10px 14px 11px; border-radius: 5px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.07); font-family: 'Nunito','Segoe UI',sans-serif; font-size: clamp(11.5px,1.15vw,14px); color: #a8a498; line-height: 1.55; border-left-width: 3px; }
.splash-card.c-gold { border-left-color: #d4a017; }
.splash-card.c-blue { border-left-color: #5ea8c8; }
.splash-card-label { display: block; font-family: 'Caveat',cursive; font-size: 1.3em; font-weight: 700; margin-bottom: 3px; }
.splash-card.c-gold .splash-card-label { color: #d4a017; }
.splash-card.c-blue .splash-card-label { color: #5ea8c8; }
#splash em { color: #d8d4c4; font-style: italic; }
.splash-steps { list-style: none; padding: 0; margin: 2px 0 4px; }
.splash-steps li { padding: 1px 0; }
.splash-steps li::before { content: '→ '; color: #d4a017; font-family: 'Caveat',cursive; font-weight: 700; }
.splash-conclusion { margin-top: 5px; font-style: italic; color: #d8d4c4; }
.splash-conclusion::before { content: '⟹ '; color: #d4a017; font-family: 'Caveat',cursive; font-weight: 700; }
.splash-dismiss { font-family: 'Courier New',monospace; font-size: clamp(9px,.9vw,11px); color: rgba(184,180,164,.28); letter-spacing: 2.5px; text-transform: uppercase; margin-top: 4px; }
.splash-short { display: none; }
.splash-tips { max-width: 920px; width: 100%; margin-top: 10px; padding: 9px 16px 10px; border-radius: 5px; background: rgba(255,255,255,.02); border: 1px solid rgba(212,160,23,.18); border-left: 3px solid rgba(212,160,23,.5); }
.splash-tips-title { display: block; font-family: 'Caveat',cursive; font-size: clamp(14px,1.4vw,17px); font-weight: 700; color: #d4a017; margin-bottom: 4px; }
.splash-tips-list { list-style: none; padding: 0; margin: 0; font-family: 'Nunito','Segoe UI',sans-serif; font-size: clamp(11px,1.1vw,13px); color: #a8a498; line-height: 1.6; }
.splash-tips-list li::before { content: '✦ '; color: rgba(212,160,23,.6); font-size: 0.75em; }
@media (max-width: 640px) {
  #splash h1 { font-size: 26px; }
  .splash-box { padding: 16px 14px 12px; gap: 8px; }
  .splash-rule { display: none; }
  .splash-intro { display: none; }
  .splash-cards { grid-template-columns: 1fr; gap: 7px; }
  .splash-card { padding: 8px 12px 9px; font-size: 13px; }
  .splash-long { display: none; }
  .splash-short { display: block; }
}