/* CLI Mode: the fake terminal overlay. Self-contained, every class starts with "clim". */
.clim, .clim * { box-sizing: border-box; }
.clim {
    --bg: #07080a; --bar: #15181c; --fg: #d9d4c7; --dim: #7d8590; --accent: #c9a012; --glow: none; --line: #262b32; --sel: rgba(201, 160, 18, .35);
    --c0: #1c1f24; --c1: #ff5d73; --c2: #62dc8f; --c3: #e3b341; --c4: #5aa9ff; --c5: #d27bff; --c6: #5ee0d0; --c7: #d9d4c7;
    --c8: #7d8590; --c9: #ff8196; --c10: #8dffb4; --c11: #ffd866; --c12: #8cc4ff; --c13: #e6a3ff; --c14: #8ff5e8; --c15: #ffffff;
    position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 4vh 4vw;
    background: rgba(2, 3, 4, .72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    font: 15px/1.45 ui-monospace, "IBM Plex Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
    animation: clim-in .18s ease-out;
}
.clim[hidden] { display: none; }
.clim[data-theme="green"] { --bg: #000; --bar: #0a140c; --fg: #33ff66; --dim: #1c9a3d; --accent: #8dff9f; --line: #0f3a1a; --glow: 0 0 6px rgba(51, 255, 102, .55); --sel: rgba(51, 255, 102, .3); --c7: #33ff66; --c15: #b6ffc6; }
.clim[data-theme="amber"] { --bg: #120a00; --bar: #1d1200; --fg: #ffb000; --dim: #a06a00; --accent: #ffd35c; --line: #3a2600; --glow: 0 0 6px rgba(255, 176, 0, .5); --sel: rgba(255, 176, 0, .3); --c7: #ffb000; --c15: #ffe3a0; }
.clim[data-theme="matrix"] { --bg: #000; --bar: #021005; --fg: #00ff41; --dim: #007a1f; --accent: #b6ffcb; --line: #04380f; --glow: 0 0 8px rgba(0, 255, 65, .7); --sel: rgba(0, 255, 65, .3); --c7: #00ff41; --c15: #d4ffdf; }
.clim[data-theme="paper"] { --bg: #f4f0e6; --bar: #e4dfd1; --fg: #25221c; --dim: #7a7467; --accent: #9a6b00; --line: #cfc8b6; --sel: rgba(154, 107, 0, .25); --c0: #25221c; --c1: #b3202f; --c2: #1a7a3c; --c3: #8a6200; --c4: #1f5fb5; --c5: #7a35a8; --c6: #0f7a74; --c7: #25221c; --c8: #7a7467; --c9: #d3394a; --c10: #1f9a4b; --c11: #a37700; --c12: #3a7bd0; --c13: #9650c8; --c14: #1f9a92; --c15: #000; }
.clim-window {
    display: flex; flex-direction: column; width: min(1000px, 100%); height: min(760px, 100%);
    background: var(--bg); color: var(--fg); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .02);
    border-radius: 10px; overflow: hidden; text-shadow: var(--glow);
}
.clim-bar { display: flex; align-items: center; gap: 12px; padding: 8px 12px; background: var(--bar); border-bottom: 1px solid var(--line); color: var(--dim); font-size: 13px; user-select: none; }
.clim-dots { display: inline-flex; gap: 6px; }
.clim-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--c8); opacity: .55; }
.clim-dots i:nth-child(1) { background: #ff5f57; opacity: 1; } .clim-dots i:nth-child(2) { background: #febc2e; opacity: 1; } .clim-dots i:nth-child(3) { background: #28c840; opacity: 1; }
.clim-title { flex: 1; text-align: center; }
.clim-close { appearance: none; background: none; border: 0; color: var(--dim); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.clim-close:hover { color: var(--fg); }
.clim-screen { flex: 1; overflow-y: auto; padding: 14px 16px 18px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; cursor: text; }
.clim-block { margin: 0; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; min-height: 1.45em; }
.clim-block a { color: var(--c4); text-decoration: underline; }
.clim-echo { color: var(--fg); }
.clim-u { color: var(--c2); font-weight: 700; } .clim-p { color: var(--c4); font-weight: 700; }
.clim-line { display: flex; align-items: baseline; }
.clim-prompt { white-space: pre; flex: none; }
.clim-input { flex: 1; min-width: 0; appearance: none; border: 0; outline: 0; background: transparent; color: var(--fg); font: inherit; text-shadow: inherit; padding: 0; margin: 0; caret-color: var(--accent); caret-shape: block; }
.clim-input:disabled { opacity: .5; }
.clim ::selection { background: var(--sel); }
.clim .a30 { color: var(--c0); } .clim .a31 { color: var(--c1); } .clim .a32 { color: var(--c2); } .clim .a33 { color: var(--c3); }
.clim .a34 { color: var(--c4); } .clim .a35 { color: var(--c5); } .clim .a36 { color: var(--c6); } .clim .a37 { color: var(--c7); }
.clim .a90 { color: var(--c8); } .clim .a91 { color: var(--c9); } .clim .a92 { color: var(--c10); } .clim .a93 { color: var(--c11); }
.clim .a94 { color: var(--c12); } .clim .a95 { color: var(--c13); } .clim .a96 { color: var(--c14); } .clim .a97 { color: var(--c15); }
.clim .b40 { background: var(--c0); } .clim .b41 { background: var(--c1); color: #fff; } .clim .b42 { background: var(--c2); color: #000; } .clim .b43 { background: var(--c3); color: #000; }
.clim .b44 { background: var(--c4); } .clim .b45 { background: var(--c5); } .clim .b46 { background: var(--c6); color: #000; } .clim .b47 { background: var(--c7); color: #000; }
.clim .ab { font-weight: 700; } .clim .au { text-decoration: underline; } .clim .ar { filter: invert(1); }
.clim-keys { display: none; gap: 6px; padding: 8px; background: var(--bar); border-top: 1px solid var(--line); }
.clim-keys button { flex: 1; appearance: none; background: transparent; border: 1px solid var(--line); color: var(--fg); font: inherit; padding: 8px 0; border-radius: 6px; }
.clim-launcher {
    position: fixed; left: 16px; bottom: 16px; z-index: 99998; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    appearance: none; background: #07080a; color: #c9a012; border: 1px solid #3b3a2c; border-radius: 8px; cursor: pointer; opacity: .55;
    font: 700 16px ui-monospace, Menlo, Consolas, monospace; letter-spacing: -1px; transition: opacity .2s, transform .2s, box-shadow .2s;
}
.clim-launcher:hover, .clim-launcher:focus-visible { opacity: 1; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 0 1px #c9a012; }
.clim-launcher[hidden] { display: none; }
html.clim-active { overflow: hidden; }
@keyframes clim-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) {
    .clim { padding: 0; font-size: 14px; }
    .clim-window { height: 100%; border-radius: 0; border: 0; }
    .clim-dots { display: none; }
}
@media (pointer: coarse) { .clim-keys { display: flex; } }
@media (prefers-reduced-motion: reduce) { .clim { animation: none; } .clim-launcher { transition: none; } }

/* Mandatory mode: the website is gone, the terminal is the page. The class is set in <head> so nothing flashes. */
html.clim-forced body > *:not(.clim) { display: none !important; }
html.clim-forced, html.clim-forced body { background: #000 !important; overflow: hidden; }
.clim-forced { padding: 0; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; }
.clim-forced .clim-window { width: 100%; height: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; }
.clim-forced .clim-screen { padding: 18px max(16px, calc((100% - 1000px) / 2)); }
.clim-forced .clim-bar { justify-content: center; }

/* Inline terminal (the "Terminal" block): sits in the page instead of over it. Height: --clim-height on the mount. */
.clim.clim-inline { position: relative; inset: auto; z-index: auto; display: block; padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; animation: none; font-size: 14px; }
.clim-inline .clim-window { width: 100%; height: var(--clim-height, 360px); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.clim-inline .clim-screen { padding: 12px 14px 14px; }
.clim-dimmed { color: var(--dim); }
@media (max-width: 700px) {
    .clim.clim-inline { font-size: 13px; }
    .clim-inline .clim-window { height: var(--clim-height, 360px); border: 1px solid var(--line); border-radius: 10px; }
    .clim-inline .clim-dots { display: inline-flex; }
}
.clim-mount { min-height: var(--clim-height, 360px); }