/* Themes — switch with `theme NAME`. win-palette is neox's current Omarchy theme and the default. */
:root,
[data-theme="win-palette"] {
    --bg: #0a0a0a; --fg: #f8f8f8; --dim: #545454; --black: #101010;
    --red: #b48380; --green: #c2dab7; --yellow: #9f8d6b; --blue: #cdd4dd;
    --magenta: #4b8ef4; --cyan: #a1dfdd; --sel: #2a4f8a; --accent: #4b8ef4;
}
[data-theme="tokyo-night"] {
    --bg: #1a1b26; --fg: #c0caf5; --dim: #565f89; --black: #15161e;
    --red: #f7768e; --green: #9ece6a; --yellow: #e0af68; --blue: #7aa2f7;
    --magenta: #bb9af7; --cyan: #7dcfff; --sel: #33467c; --accent: #7aa2f7;
}
[data-theme="catppuccin"] {
    --bg: #1e1e2e; --fg: #cdd6f4; --dim: #6c7086; --black: #181825;
    --red: #f38ba8; --green: #a6e3a1; --yellow: #f9e2af; --blue: #89b4fa;
    --magenta: #cba6f7; --cyan: #89dceb; --sel: #45475a; --accent: #89b4fa;
}
[data-theme="gruvbox"] {
    --bg: #282828; --fg: #ebdbb2; --dim: #928374; --black: #1d2021;
    --red: #fb4934; --green: #b8bb26; --yellow: #fabd2f; --blue: #83a598;
    --magenta: #d3869b; --cyan: #8ec07c; --sel: #504945; --accent: #83a598;
}
[data-theme="nord"] {
    --bg: #2e3440; --fg: #d8dee9; --dim: #616e88; --black: #242933;
    --red: #bf616a; --green: #a3be8c; --yellow: #ebcb8b; --blue: #81a1c1;
    --magenta: #b48ead; --cyan: #88c0d0; --sel: #434c5e; --accent: #88c0d0;
}
[data-theme="everforest"] {
    --bg: #2d353b; --fg: #d3c6aa; --dim: #859289; --black: #232a2e;
    --red: #e67e80; --green: #a7c080; --yellow: #dbbc7f; --blue: #7fbbb3;
    --magenta: #d699b6; --cyan: #83c092; --sel: #475258; --accent: #a7c080;
}
[data-theme="rose-pine"] {
    --bg: #191724; --fg: #e0def4; --dim: #6e6a86; --black: #12101a;
    --red: #eb6f92; --green: #9ccfd8; --yellow: #f6c177; --blue: #c4a7e7;
    --magenta: #ebbcba; --cyan: #9ccfd8; --sel: #403d52; --accent: #c4a7e7;
}
[data-theme="matrix"] {
    --bg: #000000; --fg: #00ff41; --dim: #008f11; --black: #000000;
    --red: #ff3b3b; --green: #00ff41; --yellow: #b4ff6b; --blue: #00d75f;
    --magenta: #5fff87; --cyan: #87ffaf; --sel: #003b00; --accent: #00ff41;
}

:root {
    /* The skull shows through terminals at --wallpaper-opacity; lower it if text gets hard to read. */
    --wallpaper-opacity: 40%;
    --terminal-bg:
        linear-gradient(color-mix(in srgb, var(--bg) calc(100% - var(--wallpaper-opacity)), transparent),
                        color-mix(in srgb, var(--bg) calc(100% - var(--wallpaper-opacity)), transparent)),
        url('assets/wallpaper.jpg') center / cover no-repeat,
        var(--bg);
    --inactive-border: rgba(89, 89, 89, 0.67);
    --font: 'JetBrainsMono Nerd Font', 'JetBrains Mono', 'Fira Code', 'DejaVu Sans Mono', monospace;
}

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    color: var(--fg);
    font: 14px/1.45 var(--font);
    font-variant-ligatures: none;
}

body {
    display: flex;
    flex-direction: column;
    background: #000 var(--desktop-wall, url('assets/wallpapers/win-palette.webp')) center / cover no-repeat;
}

::selection {
    background: var(--sel);
}

button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

/* ---------- boot tty ---------- */

#tty {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: #000;
}

/* ---------- top bar (transparent, like neox's Omarchy bar) ---------- */

#bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 26px;
    padding: 0 12px;
    font-size: 12.5px;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

#bar > div {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    overflow: hidden;
}

.bar-center { justify-content: center; }
.bar-right { justify-content: flex-end; }

#bar button:hover { color: var(--accent); }

.icon {
    width: 15px;
    height: 15px;
    vertical-align: -3px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.logo-svg {
    display: block;
    width: 15px;
    height: 15px;
}

.workspaces {
    display: flex;
    gap: 2px;
}

.ws {
    min-width: 2.2ch;
    color: var(--dim);
}

.ws.used { color: var(--fg); }
.ws.active { color: var(--accent); font-weight: 700; }

.bar-wclock, .bar-kb { color: color-mix(in srgb, var(--fg) 75%, transparent); }
.bar-cava { color: var(--accent); letter-spacing: -1px; }
.bar-audio.muted { color: var(--dim); }

/* ---------- tiled windows ---------- */

#desktop {
    position: relative;
    flex: 1;
    min-height: 0;
}

.win {
    position: absolute;
    box-sizing: border-box;
    overflow: hidden;
    border: 2px solid var(--inactive-border);
    background: var(--terminal-bg);
    opacity: 0.96;
    transition: left 0.22s cubic-bezier(0.23, 1, 0.32, 1), top 0.22s cubic-bezier(0.23, 1, 0.32, 1),
        width 0.22s cubic-bezier(0.23, 1, 0.32, 1), height 0.22s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.18s, transform 0.18s, border-color 0.15s;
}

.win.focused {
    border-color: var(--accent);
    opacity: 0.985;
}

.win.opening,
.win.closing {
    opacity: 0;
    transform: scale(0.94);
}

/* New windows pop in where they'll live instead of sliding there from the corner. */
.win.opening {
    transition: opacity 0.18s, transform 0.18s;
}

.win.off {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

.win.busy-flash { border-color: var(--red); }

.empty-hint {
    position: absolute;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    display: none;
    justify-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: rgba(0, 0, 0, 0.55);
    color: var(--fg);
    white-space: pre;
    text-shadow: 0 1px 4px #000;
    opacity: 0.85;
}

.empty-hint .logo-svg {
    width: 28px;
    height: 28px;
    color: var(--accent);
}

#desktop.empty .empty-hint { display: grid; }

/* Super+F / Alt+F: the window covers the whole screen, bar and gaps included. */
body.fs-mode #bar { display: none; }
.win.fs { border-width: 0; opacity: 1; }

/* ---------- terminal ---------- */

.term {
    height: 100%;
    padding: 14px;
    overflow-y: auto;
    box-sizing: border-box;
    cursor: text;
}

#tty .term { padding: 10px 14px; }

.line {
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 1.45em;
}

.input-line {
    display: flex;
    white-space: pre;
}

.user-input {
    flex: 1;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    color: var(--fg);
    font: inherit;
    caret-color: var(--fg);
    caret-shape: block;
}

/* Prompt and file-type colours */
.u { color: var(--green); font-weight: 700; }
.r { color: var(--red); font-weight: 700; }
.p { color: var(--blue); font-weight: 700; }
.b { font-weight: 700; }
.dir { color: var(--blue); font-weight: 700; }
.lnk { color: var(--cyan); }
.exe { color: var(--green); font-weight: 700; }
.err { color: var(--red); }
.ok { color: var(--green); }
.dim { color: var(--dim); }
.y { color: var(--yellow); }
.hl { color: var(--magenta); font-weight: 700; }
.match { color: var(--red); font-weight: 700; }
.banner { color: var(--accent); }
.inverse { background: var(--fg); color: var(--bg); }

a {
    color: var(--cyan);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

a:hover { text-decoration-style: solid; }

.ls-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24ch, max-content));
    column-gap: 2ch;
}

.neofetch {
    display: flex;
    flex-wrap: wrap;
    gap: 0 3ch;
}

.neofetch pre {
    margin: 0;
    font: inherit;
}

.neofetch .logo {
    color: var(--accent);
    font-weight: 700;
}

/* ---------- full-screen apps (inside a window) ---------- */

.screen {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--terminal-bg);
}

.cursor { background: var(--fg); }

.pager {
    position: relative;
    flex: 1;
    overflow-y: auto;
    padding: 4px 14px;
}

.status,
.ed-status,
.nano-msg {
    min-height: 1.45em;
    padding: 0 14px;
    white-space: pre;
    overflow: hidden;
}

.status { cursor: pointer; }

.htop {
    flex: 1;
    margin: 0;
    padding: 4px 10px;
    overflow: hidden;
    font: inherit;
}

.hdr { background: var(--green); color: var(--black); }
.sel { background: var(--accent); color: var(--black); }
.fkey { background: var(--cyan); color: var(--black); }

.ed-area {
    flex: 1;
    margin: 0;
    padding: 4px 14px;
    border: 0;
    outline: none;
    resize: none;
    overflow: auto;
    background: transparent;
    color: var(--fg);
    font: inherit;
    white-space: pre;
    caret-color: var(--fg);
    tab-size: 4;
}

.app-vim .ed-area::selection {
    background: var(--fg);
    color: var(--bg);
}

.ed-status {
    display: flex;
    justify-content: space-between;
}

.verr { background: var(--red); color: var(--black); }

.vim-intro {
    position: absolute;
    top: 30%;
    left: 0;
    right: 0;
    text-align: center;
    white-space: pre;
    color: var(--dim);
    pointer-events: none;
}

.nano-head {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    padding: 0 14px;
    background: var(--fg);
    color: var(--bg);
    white-space: pre;
}

.nano-mod { text-align: right; }
.nano-msg { text-align: center; }

.nano-prompt {
    display: flex;
    background: var(--fg);
    color: var(--bg);
    text-align: left;
}

.nano-prompt input {
    flex: 1;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    font: inherit;
}

.nano-keys {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0 14px 2px;
    white-space: pre;
}

.app-matrix,
.app-matrix canvas { background: #000; }

.app-sl { justify-content: center; }

.app-sl pre {
    margin: 0;
    padding: 0 14px;
    font: inherit;
}

/* ---------- graphical apps (gui.js) ---------- */

.win.gui {
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    --panel: color-mix(in srgb, var(--bg) 88%, var(--fg));
    --line: color-mix(in srgb, var(--bg) 78%, var(--fg));
    outline: none;
}

.gicon, .ficon, .sad {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gui button:disabled { opacity: 0.35; cursor: default; }

.btn {
    padding: 4px 12px;
    border: 1px solid var(--line);
    background: var(--panel);
}

.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn .gicon { width: 13px; height: 13px; vertical-align: -2px; }

.badge {
    margin-left: 1ch;
    padding: 0 6px;
    border: 1px solid var(--yellow);
    color: var(--yellow);
    font-size: 12px;
}

/* Chromium */
.tabs {
    display: flex;
    align-items: end;
    gap: 6px;
    padding: 6px 8px 0;
    background: color-mix(in srgb, var(--bg) 94%, #000);
}

.tab-strip { display: flex; align-items: end; gap: 2px; min-width: 0; overflow: hidden; }

.tab {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 220px;
    min-width: 60px;
    padding: 5px 6px 5px 14px;
    border-radius: 6px 6px 0 0;
    color: var(--dim);
    cursor: default;
    user-select: none;
}

.tab:hover { background: color-mix(in srgb, var(--panel) 55%, transparent); }
.tab.active { background: var(--panel); color: var(--fg); }
.tab-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-close { flex-shrink: 0; width: 18px; height: 18px; padding: 0; border-radius: 50%; color: var(--dim); font-size: 14px; line-height: 1; }
.tab-close:hover { background: var(--line); color: var(--fg); }

.tab-new { flex-shrink: 0; padding: 4px; color: var(--dim); }

.views { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.views > .view[hidden] { display: none; }

.toolbar, .files-head, .ed-head, .music-head, .imv-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.toolbar > button, .files-head > button, .imv-bar > button:not(.btn) { padding: 3px; }
.toolbar > button:hover:not(:disabled), .files-head > button:hover { color: var(--accent); }

.addr {
    flex: 1;
    min-width: 0;
    padding: 5px 12px;
    border: 1px solid transparent;
    border-radius: 14px;
    outline: none;
    background: var(--bg);
    color: var(--fg);
    font: inherit;
}

.addr:focus { border-color: var(--accent); }

.view {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.view iframe, .music iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

.music iframe { flex: 1; background: #000; }

.start {
    display: grid;
    justify-items: center;
    gap: 22px;
    padding: 9vh 16px 24px;
}

.start-logo .logo-svg { width: 64px; height: 64px; color: var(--accent); }
.start-search { width: min(560px, 100%); }
.start-search input { box-sizing: border-box; width: 100%; padding: 10px 18px; border: 1px solid var(--line); border-radius: 22px; outline: none; background: var(--panel); color: var(--fg); font: inherit; }
.start-search input:focus { border-color: var(--accent); }

.dial {
    display: grid;
    grid-template-columns: repeat(auto-fill, 104px);
    justify-content: center;
    gap: 10px;
    width: min(620px, 100%);
}

.dial-item {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 10px 4px;
    font-size: 12px;
    text-align: center;
}

.dial-item:hover { background: var(--panel); }

.dial-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--panel);
    color: var(--accent);
    font-size: 17px;
    font-weight: 700;
}

.refused, .empty-state {
    display: grid;
    justify-items: start;
    align-content: center;
    gap: 6px;
    max-width: 460px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

.refused h2 { margin: 6px 0 0; font-size: 18px; }
.refused p, .empty-state p { margin: 0; }
.refused .btn { margin-top: 12px; }
.sad { width: 56px; height: 56px; color: var(--dim); stroke-width: 1.5; }
.empty-state { justify-items: center; text-align: center; color: var(--dim); }
.empty-state .ficon { width: 48px; height: 48px; }

/* Files */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: 6px; }
.crumbs button { padding: 2px 6px; }
.crumbs button:hover { background: var(--bg); }

.files-body { display: flex; flex: 1; min-height: 0; }

.places {
    display: flex;
    flex-direction: column;
    width: 150px;
    padding: 6px;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 94%, var(--fg));
}

.places button { padding: 6px 10px; text-align: left; }
.places button:hover { background: var(--panel); }
.places button.active { background: var(--accent); color: var(--black); }

.fgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    align-content: start;
    gap: 6px;
    flex: 1;
    padding: 12px;
    overflow: auto;
    outline: none;
}

.fitem {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 8px 4px;
    font-size: 12px;
    word-break: break-all;
}

.fitem:hover { background: var(--panel); }
.fitem.sel { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.fitem .ficon { width: 44px; height: 44px; stroke-width: 1.5; }
.ficon.folder { color: var(--accent); }
.ficon.lnk { color: var(--cyan); }
.ficon.exe { color: var(--green); }
.ficon.locked { color: var(--red); }
.fthumb { width: 88px; height: 55px; object-fit: cover; }
.files-foot { padding: 3px 10px; border-top: 1px solid var(--line); font-size: 12px; }

/* Text Editor */
.ed-head { justify-content: space-between; }

.ed-text {
    flex: 1;
    padding: 12px 16px;
    border: 0;
    outline: none;
    resize: none;
    background: transparent;
    color: var(--fg);
    font: inherit;
    tab-size: 4;
}

.ed-foot { padding: 3px 10px; border-top: 1px solid var(--line); font-size: 12px; }

/* Image Viewer */
.imv { background: #000 !important; }

.imv-stage {
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 0;
    padding: 8px;
}

.imv-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.imv-bar { border: 0; border-top: 1px solid var(--line); }
.imv-label { flex: 1; text-align: center; font-size: 12px; }

/* Neox Music */
.music-head { justify-content: space-between; flex-wrap: wrap; }
.music-links { display: flex; gap: 6px; }

/* ---------- VS Code ---------- */

.code {
    --vs-side: color-mix(in srgb, var(--bg) 92%, var(--fg));
    --vs-act: color-mix(in srgb, var(--bg) 86%, var(--fg));
}

.vs-wrap { display: flex; flex: 1; min-height: 0; }

.vsicon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vsicon.sm { width: 13px; height: 13px; vertical-align: -2px; }
.vsx { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.vschev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform 0.1s; flex: none; }

.vs-act {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 46px;
    padding-top: 6px;
    background: var(--vs-act);
}

.vs-act button { padding: 10px 0; color: var(--dim); border-left: 2px solid transparent; }
.vs-act button:hover, .vs-act button.on { color: var(--fg); }
.vs-act button.on { border-left-color: var(--accent); }
.vs-act .vs-act-term { margin-top: auto; margin-bottom: 6px; }

.vs-side {
    width: 230px;
    flex: none;
    overflow: auto;
    background: var(--vs-side);
    font-size: 13px;
}

.vs-side-title { padding: 10px 14px 6px; font-size: 11px; color: var(--dim); letter-spacing: 0.06em; }
.vs-folder { display: flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.vs-folder .vschev { transform: rotate(90deg); }
.vs-sub { padding: 10px 14px 4px; font-size: 11px; font-weight: 700; color: var(--dim); }
.vs-note { padding: 4px 14px; color: var(--dim); font-size: 12px; }

.vs-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 2px 8px 2px calc(var(--d) * 12px);
    text-align: left;
    white-space: nowrap;
}

.vs-row:hover { background: var(--panel); }
.vs-row.active { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.vs-row.dir.open .vschev { transform: rotate(90deg); }
.vs-m { margin-left: auto; color: var(--yellow); }

.vs-dot { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--dim); }
.l-js { background: #e5c07b; }
.l-css { background: #61afef; }
.l-html { background: #e06c75; }
.l-md { background: var(--cyan); }
.l-sh { background: var(--green); }

.vs-search { box-sizing: border-box; width: calc(100% - 20px); margin: 4px 10px 8px; padding: 4px 8px; border: 1px solid var(--line); outline: none; background: var(--bg); color: var(--fg); font: inherit; }
.vs-search:focus { border-color: var(--accent); }
.vs-hit-file { display: flex; justify-content: space-between; padding: 4px 10px; font-weight: 700; }
.vs-count { padding: 0 6px; border-radius: 8px; background: var(--panel); font-weight: 400; }
.vs-hit { display: block; width: 100%; padding: 1px 10px 1px 22px; overflow: hidden; text-align: left; white-space: nowrap; text-overflow: ellipsis; color: var(--dim); }
.vs-hit:hover { background: var(--panel); color: var(--fg); }
.vs-hit mark, .ob-hit mark { background: color-mix(in srgb, var(--yellow) 45%, transparent); color: var(--fg); }

.vs-commit { display: grid; padding: 4px 14px; border-bottom: 1px solid var(--line); }
.vs-commit span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-commit .dim { font-size: 11px; }
.vs-extn { display: grid; gap: 1px; padding: 6px 14px; border-bottom: 1px solid var(--line); }
.vs-extn .dim { font-size: 12px; }
.vs-pub { font-size: 11px; color: var(--accent); }

.vs-main { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; }

.vs-tabs { display: flex; overflow-x: auto; background: var(--vs-side); scrollbar-width: none; }

.vs-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px 12px;
    border-top: 2px solid transparent;
    border-right: 1px solid var(--line);
    color: var(--dim);
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.vs-tab.on { border-top-color: var(--accent); background: var(--bg); color: var(--fg); }
.vs-lock { font-size: 10px; }
.vs-tab-x { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; }
.vs-tab-x:hover { background: var(--panel); }

.vs-crumbs { padding: 3px 16px; min-height: 1.3em; color: var(--dim); font-size: 12px; }

.vs-body { position: relative; flex: 1; min-height: 0; }

.vs-scroll {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    overflow: auto;
    font-size: 13px;
    line-height: 20px;
}

.vs-gutter {
    position: sticky;
    left: 0;
    z-index: 1;
    min-height: 100%;
    margin: 0;
    padding: 0 14px 0 10px;
    background: var(--bg);
    color: var(--dim);
    font: inherit;
    text-align: right;
    user-select: none;
}

.vs-code { position: relative; flex: 1; min-height: 100%; }

.vs-hl, .vs-input {
    box-sizing: border-box;
    margin: 0;
    padding: 0 24px 40vh 4px;
    border: 0;
    font: inherit;
    line-height: inherit;
    white-space: pre;
    tab-size: 4;
}

.vs-hl { min-width: max-content; color: var(--fg); pointer-events: none; }

.vs-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: none;
    resize: none;
    background: transparent;
    color: transparent;
    caret-color: var(--fg);
}

.vs-input::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

.t-kw { color: var(--magenta); }
.t-st { color: var(--green); }
.t-cm { color: var(--dim); font-style: italic; }
.t-nu { color: var(--yellow); }
.t-fn { color: var(--cyan); }

.vs-welcome { padding: 8% 10%; overflow: auto; height: 100%; box-sizing: border-box; }
.vs-welcome h1 { margin: 0; font-size: 30px; font-weight: 400; }
.vs-welcome > p { margin: 4px 0 26px; }
.vs-wl { display: grid; justify-items: start; gap: 4px; margin-bottom: 20px; }
.vs-wl b { margin-bottom: 4px; }
.vs-wl button { color: var(--accent); }
.vs-wl button:hover { text-decoration: underline; }

.vs-panel { display: flex; flex-direction: column; height: 38%; min-height: 120px; border-top: 1px solid var(--line); }
.vs-panel-head { display: flex; align-items: center; gap: 14px; padding: 4px 14px; font-size: 11px; }
.vs-panel-head .on { border-bottom: 1px solid var(--accent); }
.vs-panel-x { margin-left: auto; }
.vs-panel-body { position: relative; flex: 1; min-height: 0; }
.vs-panel-body .term { padding: 4px 14px; font-size: 13px; }

.vs-status {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 1px 10px;
    background: var(--accent);
    color: var(--black);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
}

.vs-sb-l, .vs-sb-r { display: flex; gap: 14px; }

.vs-toast, .vs-quick {
    position: absolute;
    z-index: 3;
    border: 1px solid var(--line);
    background: var(--vs-side);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.vs-toast { right: 14px; bottom: 30px; padding: 10px 14px; font-size: 13px; }

.vs-quick { top: 8px; left: 50%; width: min(520px, 90%); transform: translateX(-50%); }
.vs-quick input { box-sizing: border-box; width: 100%; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--accent); outline: none; background: var(--bg); color: var(--fg); font: inherit; }
.vs-quick-list button { display: block; width: 100%; padding: 3px 10px; text-align: left; }
.vs-quick-list button.on, .vs-quick-list button:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------- Obsidian ---------- */

.obsidian {
    display: grid !important;
    grid-template: 1fr auto / 44px 220px minmax(0, 1fr) 230px;
    --ob-side: color-mix(in srgb, var(--bg) 92%, var(--fg));
    font-size: 14px;
}

.ob-ribbon { grid-column: 1; }
.ob-left { grid-column: 2; }
.ob-center { grid-column: 3; }
.ob-right { grid-column: 4; }

.obicon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ob-ribbon { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; background: var(--ob-side); border-right: 1px solid var(--line); }
.ob-ribbon button { padding: 7px 0; color: var(--dim); }
.ob-ribbon button:hover, .ob-ribbon button.on { color: var(--accent); }

.ob-left, .ob-right { overflow: auto; background: var(--ob-side); font-size: 13px; }
.ob-left { border-right: 1px solid var(--line); }
.ob-right { border-left: 1px solid var(--line); padding-bottom: 12px; }

.ob-vault { padding: 12px 12px 6px; font-weight: 700; }

.ob-row {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 3px 10px 3px calc(12px + var(--d, 0) * 14px);
    text-align: left;
    color: color-mix(in srgb, var(--fg) 85%, transparent);
    white-space: nowrap;
}

.ob-row:hover { background: var(--panel); color: var(--fg); }
.ob-row.on { background: color-mix(in srgb, var(--accent) 28%, transparent); color: var(--fg); }
.ob-row.unresolved { color: var(--dim); }
.ob-folder.open .vschev { transform: rotate(90deg); }

.ob-search { box-sizing: border-box; width: calc(100% - 20px); margin: 10px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; outline: none; background: var(--bg); color: var(--fg); font: inherit; }
.ob-search:focus { border-color: var(--accent); }
.ob-hit { display: grid; gap: 2px; width: 100%; padding: 6px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.ob-hit span { color: var(--dim); font-size: 12px; }
.ob-hit:hover { background: var(--panel); }
.ob-empty { padding: 6px 12px; color: var(--dim); font-size: 12px; }

.ob-pane-title { display: flex; justify-content: space-between; padding: 12px 12px 4px; font-size: 12px; font-weight: 700; color: var(--dim); }
.ob-count { font-weight: 400; }
.ob-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px; }

.ob-center { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ob-head { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ob-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-mode { color: var(--dim); }
.ob-mode:hover { color: var(--accent); }

.ob-view { position: relative; flex: 1; min-height: 0; overflow: auto; }

.ob-note {
    max-width: 700px;
    margin: 0 auto;
    padding: 24px 32px 80px;
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.65;
}

.ob-note h1 { margin: 0.2em 0 0.6em; font-size: 2em; line-height: 1.2; }
.ob-note h2 { margin: 1.4em 0 0.4em; font-size: 1.4em; }
.ob-note h3 { margin: 1.2em 0 0.3em; font-size: 1.15em; }
.ob-note p { margin: 0.6em 0; }
.ob-note ul, .ob-note ol { padding-left: 1.4em; }
.ob-note li { margin: 0.15em 0; }
.ob-note li.ob-task { list-style: none; margin-left: -1.3em; }
.ob-note code { padding: 1px 5px; border-radius: 4px; background: var(--panel); font: 0.88em var(--font); }
.ob-note mark { background: color-mix(in srgb, var(--yellow) 45%, transparent); color: inherit; }
.ob-note hr { border: 0; border-top: 1px solid var(--line); }
.ob-note table { border-collapse: collapse; margin: 0.8em 0; }
.ob-note th, .ob-note td { padding: 4px 14px; border: 1px solid var(--line); text-align: left; }
.ob-note blockquote { margin: 0.8em 0; padding: 0 14px; border-left: 3px solid var(--accent); color: color-mix(in srgb, var(--fg) 80%, transparent); }

.ob-code { padding: 12px 14px; overflow-x: auto; border-radius: 6px; background: var(--panel); font: 13px/1.5 var(--font); }
.ob-code code { padding: 0; background: none; }

.ob-link { color: var(--accent); text-decoration: none; cursor: pointer; }
.ob-link:hover { text-decoration: underline; }
.ob-link.unresolved { color: var(--dim); }
.ob-tag, .ob-pill { padding: 1px 8px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 0.85em; text-decoration: none; cursor: pointer; }

.ob-callout { margin: 1em 0; padding: 10px 14px; border-left: 3px solid var(--cyan); border-radius: 4px; background: color-mix(in srgb, var(--cyan) 10%, transparent); }
.ob-callout p { margin: 0.3em 0 0; }
.ob-callout-title { font-weight: 700; color: var(--cyan); text-transform: capitalize; }
.c-tip { --cc: var(--green); border-color: var(--cc); background: color-mix(in srgb, var(--cc) 10%, transparent); }
.c-tip .ob-callout-title { color: var(--cc); }
.c-warning { --cc: var(--yellow); border-color: var(--cc); background: color-mix(in srgb, var(--cc) 10%, transparent); }
.c-warning .ob-callout-title { color: var(--cc); }

.ob-props { margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.ob-props-title { margin-bottom: 4px; color: var(--dim); font-weight: 700; }
.ob-prop { display: grid; grid-template-columns: 110px 1fr; padding: 2px 0; }
.ob-prop span:first-child { color: var(--dim); }

.ob-source { box-sizing: border-box; width: 100%; height: 100%; padding: 24px 32px; border: 0; outline: none; resize: none; background: transparent; color: var(--fg); font: 14px/1.6 var(--font); }

.ob-graph { display: block; width: 100%; height: 100%; }

.ob-status { grid-column: 1 / -1; padding: 2px 12px; border-top: 1px solid var(--line); background: var(--ob-side); color: var(--dim); font-size: 12px; text-align: right; white-space: pre; }

.obsidian.ob-narrow { grid-template-columns: 44px 190px minmax(0, 1fr) 0; }
.ob-narrow .ob-right { display: none; }
.obsidian.ob-tiny { grid-template-columns: 44px 0 minmax(0, 1fr) 0; }
.ob-tiny .ob-left { display: none; }
.ob-tiny .ob-note { padding: 16px 18px 60px; }

/* ---------- Neox Arcade ---------- */

.win.gui.arcade { background: #000; opacity: 1; }

.arcade-stage {
    display: grid;
    place-items: center;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.arcade-stage canvas {
    image-rendering: pixelated;
    touch-action: none;
    box-shadow: 0 0 0 1px #1a2130, 0 0 40px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---------- InfraEye demo (infraeye.js), in the real app's dark palette ---------- */

.win.gui.infraeye {
    --ie-bg: #151515; --ie-card: #212427; --ie-elev: #292e34; --ie-input: #3c3f42; --ie-border: #3c3f42;
    --ie-text: #e0e0e0; --ie-muted: #8a8d90; --ie-brand: #2b9af3; --ie-brand-dark: #0066cc;
    --ie-ok: #5ba352; --ie-warn: #f0ab00; --ie-danger: #e62325;
    background: var(--ie-bg);
    color: var(--ie-text);
    opacity: 1;
    font: 13px/1.45 Inter, 'Red Hat Text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.ie-logo { width: 22px; height: 22px; flex: none; }
.ie-top { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ie-card); border-bottom: 1px solid var(--ie-border); }
.ie-top b { font-size: 15px; }
.ie-demo { padding: 1px 8px; border: 1px solid var(--ie-warn); border-radius: 10px; color: var(--ie-warn); font-size: 11px; font-weight: 600; }
.ie-gap { flex: 1; }
.ie-body { display: flex; flex: 1; min-height: 0; }

.ie-side { width: 190px; flex: none; overflow-y: auto; padding: 6px 0 12px; background: var(--ie-card); border-right: 1px solid var(--ie-border); }
.ie-nav-group { padding: 12px 16px 4px; color: var(--ie-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.ie-nav { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 5px 16px; border-left: 3px solid transparent; color: var(--ie-text); text-align: left; }
.ie-nav:hover { background: var(--ie-elev); }
.ie-nav.on { border-left-color: var(--ie-brand); background: rgba(43, 154, 243, 0.12); color: #fff; font-weight: 600; }
.ie-lock { color: var(--ie-muted); font-size: 10px; }

.ie-main { flex: 1; min-width: 0; overflow-y: auto; padding: 14px; }
.ie-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.ie-stat { padding: 10px 12px; border: 1px solid var(--ie-border); border-radius: 6px; background: var(--ie-card); }
.ie-stat span { display: block; color: var(--ie-muted); font-size: 12px; }
.ie-stat b { font-size: 22px; }
.ie-stat small { color: var(--ie-muted); font-size: 13px; font-weight: 400; }
.ie-stat.warn { border-color: rgba(240, 171, 0, 0.5); }
.ie-stat.warn b { color: var(--ie-warn); }

.ie-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ie-grid .wide { grid-column: 1 / -1; }
.ie-card { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--ie-border); border-radius: 6px; background: var(--ie-card); overflow-x: auto; }
.ie-grid .ie-card { margin-bottom: 0; }
.ie-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font-size: 14px; }
.ie-card h3 small, .ie-muted { color: var(--ie-muted); font-weight: 400; }
.ie-card h3 .ie-btn { margin-left: auto; }
.ie-card h4 { margin: 0 0 6px; font-size: 12px; color: var(--ie-muted); }

.ie-chart { display: block; width: 100%; height: 130px; }
.ie-legend { display: flex; gap: 14px; margin-top: 4px; color: var(--ie-muted); font-size: 12px; }
.ie-legend i { display: inline-block; width: 10px; height: 3px; margin-right: 4px; vertical-align: middle; background: var(--c); }

.ie-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.ie-row > span:first-child { width: 96px; flex: none; }
.ie-meter { display: inline-block; flex: 1; min-width: 50px; height: 6px; border-radius: 3px; background: var(--ie-input); vertical-align: middle; overflow: hidden; }
td .ie-meter { width: 60px; flex: none; }
.ie-meter span { display: block; height: 100%; transition: width 0.6s; }
.ie-meter .ie-ok { background: var(--ie-ok); }
.ie-meter .ie-warning { background: var(--ie-warn); }
.ie-meter .ie-danger { background: var(--ie-danger); }
.ie-num { width: 36px; margin-left: 6px; color: var(--ie-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.ie-table { width: 100%; border-collapse: collapse; }
.ie-table th { padding: 6px 8px; border-bottom: 1px solid var(--ie-border); color: var(--ie-muted); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; }
.ie-table td { padding: 7px 8px; border-bottom: 1px solid #2c3034; white-space: nowrap; }
.ie-table tbody tr[data-server] { cursor: pointer; }
.ie-table tbody tr:hover, .ie-table tr.sel { background: var(--ie-elev); }
.ie-mono, .win.gui.infraeye code, .ie-xml { font-family: var(--font); font-size: 12px; }
.win.gui.infraeye code { padding: 1px 5px; border-radius: 3px; background: var(--ie-elev); color: #9fd0ff; }

.ie-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: var(--ie-ok); }
.ie-dot.warning { background: var(--ie-warn); }
.ie-dot.danger { background: var(--ie-danger); }
.ie-dot.off { background: var(--ie-muted); }
.ie-tag { margin-right: 4px; padding: 1px 7px; border-radius: 9px; background: rgba(43, 154, 243, 0.15); color: #73bcf7; font-size: 11px; }
.ie-pill { display: inline-block; padding: 1px 8px; border-radius: 9px; font-size: 11px; font-weight: 600; }
.ie-pill.ok { background: rgba(91, 163, 82, 0.2); color: #8bd27f; }
.ie-pill.danger { background: rgba(230, 35, 37, 0.2); color: #ff8a8a; }
.ie-pill.warning { background: rgba(240, 171, 0, 0.2); color: var(--ie-warn); }
.ie-pill.info { background: rgba(43, 154, 243, 0.2); color: #73bcf7; }

.ie-btn { padding: 5px 12px; border: 1px solid var(--ie-brand); border-radius: 4px; background: var(--ie-brand-dark); color: #fff; font-weight: 600; }
.ie-btn:hover:not(:disabled) { background: var(--ie-brand); }
.ie-btn.ghost { background: transparent; color: var(--ie-brand); }
.ie-btn.small { padding: 2px 10px; font-size: 12px; }
.ie-btn:disabled { opacity: 0.5; cursor: default; }

.ie-act, .ie-event { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid #2c3034; }
.ie-act > span:first-child { width: 58px; flex: none; }
.ie-act.warn { color: var(--ie-warn); }
.ie-act.ok { color: #8bd27f; }
.ie-event { flex-wrap: wrap; }
.ie-xml { margin: 0; padding: 10px; overflow-x: auto; border-radius: 4px; background: #0e0f10; color: #c9d1d9; }
.ie-hint { color: var(--ie-muted); font-size: 12px; }
.ie-detail { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }

.ie-chat { display: flex; flex-direction: column; gap: 10px; max-height: calc(100% - 140px); min-height: 160px; overflow-y: auto; padding-bottom: 6px; }
.win.gui.infraeye .ie-main:has(.ie-chat) { display: flex; flex-direction: column; }
.ie-msg { display: flex; gap: 8px; align-items: flex-start; }
.ie-msg.you { justify-content: flex-end; }
.ie-msg .ie-logo { margin-top: 4px; }
.ie-bubble { max-width: 82%; padding: 8px 12px; border-radius: 8px; background: var(--ie-card); border: 1px solid var(--ie-border); }
.ie-msg.you .ie-bubble { background: var(--ie-brand-dark); border-color: var(--ie-brand); }
.ie-bubble p { margin: 2px 0; }
.ie-bubble li { margin: 1px 0 1px 16px; }
.ie-bubble pre { margin: 6px 0; padding: 8px; overflow-x: auto; border-radius: 4px; background: #0e0f10; color: #9fd0ff; font: 12px/1.4 var(--font); }
.ie-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.ie-chip { padding: 4px 10px; border: 1px solid var(--ie-border); border-radius: 14px; background: var(--ie-card); color: var(--ie-text); }
.ie-chip:hover:not(:disabled) { border-color: var(--ie-brand); color: #fff; }
.ie-ask { display: flex; gap: 8px; }
.ie-ask input { flex: 1; padding: 7px 10px; border: 1px solid var(--ie-border); border-radius: 4px; outline: none; background: var(--ie-input); color: var(--ie-text); font: inherit; }
.ie-ask input:focus { border-color: var(--ie-brand); }

.ie-full { display: grid; justify-items: center; gap: 8px; padding: 30px 10px; text-align: center; }
.ie-full .ie-logo { width: 56px; height: 56px; }
.ie-full p { margin: 0; }

/* Narrow tiles: icon-free compact sidebar and stacked cards. */
.ie-narrow .ie-side { width: 132px; }
.ie-narrow .ie-nav { padding: 4px 10px; font-size: 12px; }
.ie-narrow .ie-lock, .ie-narrow .ie-demo + .ie-gap + .ie-btn { display: none; }
.ie-narrow .ie-grid, .ie-narrow .ie-detail { grid-template-columns: minmax(0, 1fr); }
.ie-narrow .ie-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 700px) {
    .ie-side { display: none; }
    .ie-top .ie-btn.ghost { display: none; }
}

/* ---------- background switcher ---------- */

#picker {
    position: fixed;
    inset: 0;
    z-index: 42;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.45);
}

.picker-box {
    display: flex;
    flex-direction: column;
    width: min(1100px, 94vw);
    max-height: 82vh;
    border: 2px solid var(--accent);
    background: color-mix(in srgb, var(--bg) 95%, transparent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
}

.picker-head { padding: 10px 14px; border-bottom: 1px solid var(--inactive-border); }

.picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    padding: 12px;
    overflow-y: auto;
}

.picker-item {
    display: grid;
    gap: 4px;
    padding: 4px;
    border: 2px solid transparent;
    font-size: 12px;
    text-align: left;
}

.picker-item img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; background: #111; }
.picker-item.current span::after { content: '  ●'; color: var(--accent); }
.picker-item.sel, .picker-item:hover { border-color: var(--accent); }

/* ---------- résumé (resume.js) ---------- */

.bar-hire {
    padding: 1px 10px !important;
    border: 1px solid var(--accent) !important;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 22%, transparent) !important;
    color: var(--fg) !important;
    font-weight: 700 !important;
}

.bar-hire:hover { background: var(--accent) !important; color: var(--black) !important; }

.bar-ctf span { margin-left: 3px; font-size: 11px; font-variant-numeric: tabular-nums; }

.win.gui.resume { background: #e9ebef; opacity: 1; }

.cv-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--inactive-border);
}

.cv-bar-gap { flex: 1; }
.cv-primary { border-color: var(--accent) !important; background: var(--accent) !important; color: var(--black) !important; }

.cv-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 18px;
}

.cv {
    box-sizing: border-box;
    max-width: 780px;
    margin: 0 auto;
    padding: 34px 42px;
    background: #fff;
    color: #1d2330;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
    font: 13.5px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.cv a { color: #1f5fc9; text-decoration: none; }
.cv a:hover { text-decoration: underline; }
.cv h1 { margin: 0; font-size: 26px; letter-spacing: -0.01em; }
.cv-alias { color: #6a7385; font-weight: 400; }
.cv-title { margin: 2px 0 6px; color: #1f5fc9; font-weight: 600; }
.cv-contact { margin: 0; color: #4a5263; font-size: 12.5px; }
.cv-head { padding-bottom: 12px; border-bottom: 2px solid #1d2330; }
.cv h2 { margin: 16px 0 6px; color: #1d2330; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.cv p { margin: 0 0 6px; }
.cv ul { margin: 2px 0 8px; padding-left: 18px; }
.cv li { margin: 1px 0; }
.cv-job { margin-bottom: 8px; }
.cv-row { display: flex; justify-content: space-between; gap: 12px; }
.cv-row span { color: #6a7385; font-size: 12.5px; white-space: nowrap; }
.cv-url { font-size: 12px; }
.cv-skills { display: grid; grid-template-columns: 110px 1fr; gap: 2px 12px; margin: 0; }
.cv-skills dt { font-weight: 600; }
.cv-skills dd { margin: 0; }
.cv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }

@media (max-width: 700px) {
    .cv { padding: 20px 18px; }
    .cv-scroll { padding: 0; }
    .cv-row { flex-direction: column; gap: 0; }
    .cv-two, .cv-skills { grid-template-columns: 1fr; }
    .cv-skills dt { margin-top: 4px; }
}

/* The plain summary in index.html: visible without JavaScript, for screen readers otherwise. */
#about-static {
    max-width: 720px;
    margin: 40px auto;
    padding: 0 20px;
    color: var(--fg);
    font: 15px/1.6 ui-sans-serif, system-ui, sans-serif;
}

#about-static a { color: var(--cyan); }

.js #about-static {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

#print-root { display: none; }

/* Without JavaScript only the plain summary shows. */
html:not(.js) #tty { display: none; }
html:not(.js) body { display: block; overflow: auto; background: #0a0a0a; }

@media print {
    @page { size: A4; margin: 9mm 11mm; }
    html, body { height: auto; overflow: visible; background: #fff !important; }
    body > *:not(#print-root) { display: none !important; }
    #print-root { display: block; }
    #print-root .cv { max-width: none; padding: 0; box-shadow: none; font-size: 9pt; line-height: 1.3; }
    #print-root .cv h1 { font-size: 19pt; }
    #print-root .cv h2 { margin: 7px 0 2px; font-size: 8pt; break-after: avoid; }
    #print-root .cv-head { padding-bottom: 7px; }
    #print-root .cv ul { margin: 1px 0 4px; }
    #print-root .cv p { margin: 0 0 3px; }
    #print-root .cv-job { margin-bottom: 4px; }
    #print-root .cv a { color: #1d2330; }
    .cv-job, .cv-proj { break-inside: avoid; }
}

/* ---------- launcher (Walker-style) ---------- */

#launcher {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: grid;
    place-items: start center;
    padding-top: 16vh;
}

.launcher-box {
    width: min(560px, 92vw);
    border: 2px solid var(--accent);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
}

.launcher-input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--inactive-border);
    outline: none;
    background: transparent;
    color: var(--fg);
    font: inherit;
    font-size: 15px;
}

.launcher-list {
    max-height: 48vh;
    overflow-y: auto;
    padding: 6px 0;
}

.launcher-item {
    display: flex;
    justify-content: space-between;
    gap: 2ch;
    padding: 5px 16px;
    cursor: pointer;
}

.launcher-item.sel { background: var(--accent); color: var(--black); }
.launcher-item.sel .dim { color: var(--black); opacity: 0.7; }

/* ---------- notifications (mako-style) ---------- */

#notifications {
    position: fixed;
    top: 36px;
    right: 12px;
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(340px, calc(100vw - 24px));
}

.toast {
    padding: 10px 14px;
    border: 2px solid var(--accent);
    background: color-mix(in srgb, var(--bg) 95%, transparent);
    cursor: pointer;
    animation: toast-in 0.2s ease-out;
    transition: opacity 0.2s, transform 0.2s;
}

.toast.leaving {
    opacity: 0;
    transform: translateX(20px);
}

.toast-title { font-weight: 700; }
.toast-body { margin-top: 2px; color: color-mix(in srgb, var(--fg) 80%, transparent); }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
}

/* ---------- screensaver ---------- */

#screensaver {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: #000;
    cursor: none;
}

#screensaver pre {
    margin: 0;
    font: 700 clamp(5px, 1.05vw, 15px) / 1.15 var(--font);
    background: linear-gradient(90deg, var(--dim), var(--accent), var(--fg), var(--accent), var(--dim));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: sweep 6s linear infinite;
}

@keyframes sweep {
    to { background-position: 300% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .win, .toast { transition: none; animation: none; }
    #screensaver pre { animation: none; }
}

@media (max-width: 700px) {
    html, body { font-size: 13px; }
    .user-input { font-size: 16px; } /* stops iOS zooming on focus */
    .win { border-width: 0; }
    #bar { gap: 10px; }
    .bar-wclock, .bar-kb, .bar-cava, .bar-weather, .ws:not(.active):not(.used),
    #bar [data-cmd="theme next"], #bar [data-cmd^="systemctl"], #bar [data-cmd="ip a"], .bar-bg, .bar-audio, .bar-clock { display: none; }
    .bar-right { flex-shrink: 0; }
    .neofetch .logo { display: none; }
    .nano-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .places { display: none; }
    .vs-side, .vs-act { display: none; }
}

/* ---------- pages served from the box (ctf.js): localhost, view-source:, ctf.neox ---------- */

.page-text { margin: 0; padding: 12px 16px; min-height: 100%; box-sizing: border-box; background: #fff; color: #111; font: 13px/1.5 var(--font); white-space: pre-wrap; }
.view-source { background: #fff; color: #1a1aa6; }
.view-source .ln { display: inline-block; width: 3em; margin-right: 1em; color: #999; text-align: right; user-select: none; }
.local-page { min-height: 100%; }

.ctfw { max-width: 980px; margin: 0 auto; padding: 22px 24px 30px; }
.ctfw a { color: var(--accent); cursor: pointer; }
.ctfw .exe { padding: 0 4px; border-radius: 4px; background: var(--panel); color: var(--green); }
.ctfw-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: flex-end; }
.ctfw-head h1 { margin: 0 0 4px; font-size: 26px; color: var(--accent); }
.ctfw-head p { margin: 0; color: var(--dim); max-width: 520px; }
.ctfw-score { min-width: 220px; text-align: right; }
.ctfw-score b { font-size: 24px; }
.ctfw-score span { display: block; color: var(--yellow); }
.ctfw-bar { height: 6px; margin-top: 6px; border-radius: 3px; background: var(--panel); overflow: hidden; }
.ctfw-bar i { display: block; height: 100%; background: var(--green); }
.ctfw-submit { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 10px; }
.ctfw-submit input { flex: 1; min-width: 220px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 8px; outline: none; background: var(--panel); color: var(--fg); font: inherit; }
.ctfw-submit input:focus { border-color: var(--accent); }
.ctfw button { padding: 8px 14px; border: 1px solid var(--accent); border-radius: 8px; background: transparent; color: var(--fg); font: inherit; cursor: pointer; }
.ctfw button:hover { background: var(--accent); color: var(--black); }
.ctfw-msg { width: 100%; min-height: 1.4em; }
.ctfw-msg.bad { color: var(--red); }
.ctfw-msg.dim, .ctfw-how, .ctfw-foot { color: var(--dim); }
.ctfw-how { margin: 0 0 16px; }
.ctfw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 12px; }
.ctfw-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-top: 3px solid var(--cat, var(--dim)); border-radius: 8px; background: color-mix(in srgb, var(--panel) 70%, transparent); }
.ctfw-card h3 { margin: 0; font-size: 15px; }
.ctfw-card p, .ctfw-card ol { margin: 0; font-size: 13px; line-height: 1.5; }
.ctfw-card ol { padding-left: 18px; color: var(--fg); }
.ctfw-card .ctfw-hint { align-self: flex-start; margin-top: auto; padding: 4px 10px; font-size: 12px; }
.ctfw-card-head { display: flex; justify-content: space-between; font-size: 12px; }
.ctfw-cat { color: var(--cat); text-transform: uppercase; letter-spacing: 0.06em; }
.ctfw-card.done { border-color: color-mix(in srgb, var(--green) 50%, transparent); border-top-color: var(--cat); }
.ctfw-card.done .ctfw-pts, .ctfw-ok { color: var(--green); }
.ctfw-card.locked { border-style: dashed; color: var(--dim); }
.ctfw-sub { margin: 24px 0 10px; font-size: 15px; color: var(--dim); }
.ctfw-cert { margin: 0 0 16px; padding: 14px 18px; border: 2px double var(--yellow); border-radius: 8px; text-align: center; }
.ctfw-cert h2 { margin: 0 0 4px; color: var(--yellow); letter-spacing: 0.1em; text-transform: uppercase; }
.ctfw-cert p { margin: 2px 0; }
.ctfw-foot { margin-top: 22px; font-size: 12px; }
.ctfw-foot button { padding: 2px 8px; font-size: 12px; }
.view:focus { outline: none; }

.refused { max-width: 620px; }
.refused-opened { display: flex; gap: 6px; align-items: center; color: var(--green); }
.refused-opened.bad { color: var(--yellow); }
.refused-opened .gicon { width: 14px; height: 14px; }
.refused-term { box-sizing: border-box; width: 100%; margin: 6px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font: 12px/1.6 var(--font); white-space: pre-wrap; overflow-wrap: anywhere; }
.refused-term mark { padding: 0 3px; border-radius: 3px; background: color-mix(in srgb, var(--red) 30%, transparent); color: var(--fg); }

/* claude.js: Claude Code */
.cc-orange { color: #d97757; }
.term .b { font-weight: 700; }
.cc-dot { color: var(--fg); }
.cc-msg { padding-left: 2ch; text-indent: -2ch; }
.cc-msg b { color: var(--fg); }
.cc-msg .cc-pre { text-indent: 0; }
.cc-msg i { font-style: italic; }
.cc-tool { font-weight: 700; }
.cc-mascot-slot { position: relative; }
.cc-mascot { position: absolute; top: 0.4em; left: 0.5ch; height: 3.6em; fill: #d97757; }
.cc-code { color: #b1b9f9; }
.cc-pre { margin: 4px 0 4px 2ch; padding-left: 1ch; border-left: 2px solid var(--line); color: var(--fg); }
.cc-out { opacity: 0.9; }
/* A blank line between blocks (replies and tool calls), as in Claude Code. */
:is(.cc-msg, .cc-call, .cc-out) + :is(.cc-msg, .cc-call) { margin-top: 1.45em; }
.cc-out .ls-grid { margin: 2px 0 0 5ch; }
.term.cc-session { display: flex; flex-direction: column; }
.term.cc-session > .output { flex: 1 0 auto; }

/* The input band and its status line (a child of it) stay pinned to the bottom of the window while the
   chat scrolls. One sticky block, so nothing scrolls through a gap between them. */
.input-line.cc-input {
    position: sticky;
    bottom: -14px;
    z-index: 2;
    flex-wrap: wrap;
    margin: 8px -14px -14px;
    padding: 4px 14px 0;
    border-top: 1px solid #5a5a5a;
    background: var(--bg);
}
.input-line.cc-input .prompt { color: var(--dim); }
.input-line.cc-input .user-input::placeholder { color: var(--dim); }
.cc-foot {
    flex: 0 0 calc(100% + 28px);
    box-sizing: border-box;
    margin: 4px -14px 0;
    padding: 6px 14px 14px;
    border-top: 1px solid #5a5a5a;
    color: var(--dim);
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cc-mode-auto { color: #e5c07b; }
.cc-mode-plan { color: #48b0a0; }
.cc-mode-edits { color: #b18cf5; }