/* // ChatGPT: BEGIN CG-CSS-01 added code (after original line 0). */
/* // ChatGPT: Keep your Ghostty font and Mocha palette with a solid page background. */
:root {
    color-scheme: dark;
    --background: #1e1e2e;
    --foreground: #cdd6f4;
    --muted: #a6adc8;
    --cursor: #f5e0dc;
    --selection: #585b70;
    --shell-font: 'JetBrainsMono Nerd Font', 'JetBrainsMono Nerd Font Mono', 'JetBrains Mono', monospace;
}

html {
    /* // ChatGPT: Let the shell scroll logic handle new output without browser scroll anchoring. */
    overflow-anchor: none;
    min-height: 100%;
    background-color: var(--background);
}
/* // ChatGPT: END CG-CSS-01. */

body {
/* // ChatGPT: BEGIN CG-CSS-02 modified code (original lines 3-6). */
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--shell-font);
    font-size: 16px;
    line-height: 1.65;
    padding: 56px 48px;
    margin: 0 auto;
    max-width: 1180px;
    min-height: 100vh;
    box-sizing: border-box;
/* // ChatGPT: END CG-CSS-02. */
}
#name {
/* // ChatGPT: BEGIN CG-CSS-03 modified code (original lines 9-12). */
    text-align: left;
    margin-top: 0;
    font-family: inherit;
    font-size: 28px;
    line-height: 1.3;
    letter-spacing: -0.04em;
/* // ChatGPT: END CG-CSS-03. */
    font-weight: bold;
/* // ChatGPT: BEGIN CG-CSS-04 modified code (original lines 14-15). */
    color: var(--foreground);
    margin-bottom: 12px;
/* // ChatGPT: END CG-CSS-04. */
}
.website-text{
/* // ChatGPT: BEGIN CG-CSS-05 modified code (original lines 18-22). */
    text-align: left;
    margin-top: 0;
    margin-bottom: 0;
    font-family: inherit;
    font-size: 1em;
    font-weight: normal;
    color: var(--muted);
/* // ChatGPT: END CG-CSS-05. */
}
#helper-text{
/* // ChatGPT: BEGIN CG-CSS-06 modified code (original lines 25-25). */
    font-size: 14px;
    margin-top: 8px;
    color: #9399b2;
/* // ChatGPT: END CG-CSS-06. */
}
/* // ChatGPT: BEGIN CG-CSS-07 modified code (original lines 27-34). */
#shell {
    width: 100%;
    margin: 32px 0 0;
    background-color: var(--background);
    border-top: 1px solid #313244;
    padding: 24px 0 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 60vh;
/* // ChatGPT: END CG-CSS-07. */
}
#output {
/* // ChatGPT: BEGIN CG-CSS-08 modified code (original lines 37-37). */
    font-size: inherit;
/* // ChatGPT: END CG-CSS-08. */
    overflow-y: auto;
/* // ChatGPT: BEGIN CG-CSS-09 added code (after original line 38). */
    overflow-wrap: anywhere;
/* // ChatGPT: END CG-CSS-09. */
}
#input-line {
/* // ChatGPT: BEGIN CG-CSS-10 modified code (original lines 41-41). */
    font-size: inherit;
/* // ChatGPT: END CG-CSS-10. */
    display: flex;
/* // ChatGPT: BEGIN CG-CSS-11 added code (after original line 42). */
    align-items: baseline;
/* // ChatGPT: END CG-CSS-11. */
    overflow-x: hidden;
}
#mainspan {
/* // ChatGPT: BEGIN CG-CSS-12 added code (after original line 45). */
    color: #b4befe;
/* // ChatGPT: END CG-CSS-12. */
    white-space: nowrap;
}
#input {
    background: none;
    border: none;
/* // ChatGPT: BEGIN CG-CSS-13 modified code (original lines 51-53). */
    color: var(--foreground);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
/* // ChatGPT: END CG-CSS-13. */
    outline: none;
    flex-grow: 1;
/* // ChatGPT: BEGIN CG-CSS-14 modified code (original lines 56-57). */
    margin-left: 1ch;
    min-width: 0;
    padding: 0;
    caret-color: var(--cursor);
}

/* // ChatGPT: Use Ghostty's selection colors while preserving the browser's native text input. */
::selection {
    background: var(--selection);
    color: var(--foreground);
}
a {
    color: #89b4fa;
}

/* // ChatGPT: Space the existing header and command output using CSS rather than adding markup. */
body > br {
    display: none;
}
.command-line {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: #b4befe;
    margin-top: 0;
}
.shell-error {
    color: #f38ba8;
}
#input-line {
    padding: 0;
}


/* // ChatGPT: Contact icons share the Mocha accent and stay beside your existing heading. */
.profile-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 12px;
}
.profile-header #name {
    margin-bottom: 0;
}
.contact-links {
    display: flex;
    align-items: center;
    gap: 8px;
}
.contact-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #b4befe;
    border-radius: 6px;
}
.contact-links a:hover,
.contact-links a:focus-visible {
    color: #cba6f7;
    background: #313244;
}
.contact-links a:focus-visible {
    outline: 2px solid #b4befe;
    outline-offset: 3px;
}
.contact-links svg {
    width: 22px;
    height: 22px;
}

/* // ChatGPT: A desktop neofetch layout preserves ASCII art next to the site details. */
.neofetch {
    display: flex;
    align-items: center;
    gap: 36px;
    padding: 8px 0 12px;
    overflow-x: auto;
}
.neofetch-art {
    color: #cba6f7;
    font: inherit;
    /* // ChatGPT: Render the Unicode art at the same text size as the shell. */
    font-size: 1em;
    line-height: 1;
    letter-spacing: 0;
    white-space: pre;
    margin: 0;
    flex-shrink: 0;
}
.neofetch-info {
    white-space: nowrap;
}
.neofetch-info strong {
    display: block;
    color: #b4befe;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #45475a;
}
.neofetch-label {
    color: #94e2d5;
}
.neofetch-palette {
    display: flex;
    margin-top: 16px;
}
.neofetch-palette span {
    width: 26px;
    height: 18px;
}

/* // ChatGPT: Preserve line breaks in the guestbook guide and plain-text note previews. */
.guestbook-guide, .guestbook-message {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.guestbook-guide {
    color: var(--muted);
}

/* // ChatGPT: Output and input use the same line height and left edge, as in a shell. */
#shell {
    line-height: 1.45;
}
.file-output, .shell-list {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin: 0;
    padding: 0;
}

/* // ChatGPT: Match shell listings with Mocha blue directories and plain-text files. */
.directory-entry {
    color: #89b4fa;
}
.file-entry {
    color: var(--foreground);
}

/* // ChatGPT: Give cat output a readable measure and Mocha syntax colors without changing the prompt grid. */
.file-output {
    max-width: 88ch;
    line-height: 1.65;
    margin-block: 0.4em 0.8em;
    tab-size: 4;
}
.file-output.source-output {
    max-width: 100%;
    white-space: pre;
    overflow-x: auto;
    overflow-wrap: normal;
    line-height: 1.55;
}
.syntax-comment { color: #9399b2; }
.syntax-keyword { color: #cba6f7; }
.syntax-string { color: #a6e3a1; }
.syntax-number, .syntax-literal { color: #fab387; }
.syntax-property { color: #89dceb; }
.syntax-function, .syntax-link { color: #89b4fa; }
.syntax-heading { color: #b4befe; font-weight: 700; }
.syntax-strong { color: #f9e2af; font-weight: 700; }
.syntax-marker { color: #cba6f7; }

/* // ChatGPT: Dedicated desktop file-reader layout for open, using the site's Mocha palette. */
body.file-reader {
    display: block;
    height: auto;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background: #1e1e2e;
    color: #cdd6f4;
}
.reader-page { max-width: 88ch; margin: 0 auto; padding: 48px 40px 80px; }
.reader-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 32px;
    padding-bottom: 20px;
    margin-bottom: 36px;
    border-bottom: 1px solid #45475a;
    color: #b4befe;
    font-size: 14px;
}
.reader-content { font-size: 16px; line-height: 1.8; overflow-wrap: anywhere; }
.reader-content h1, .reader-content h2, .reader-content h3,
.reader-content h4, .reader-content h5, .reader-content h6 {
    color: #b4befe;
    line-height: 1.35;
    margin: 1.6em 0 0.6em;
}
.reader-content > :first-child { margin-top: 0; }
.reader-content h1 { font-size: 2em; }
.reader-content h2 { font-size: 1.4em; }
.reader-content h3 { font-size: 1.15em; }
.reader-content p, .reader-content ul, .reader-content ol { margin: 0 0 1.2em; }
.reader-content li { margin: 0.35em 0; }
.reader-page a { color: #89b4fa; text-underline-offset: 4px; }
.reader-page a:hover { color: #b4befe; }
.reader-page a:focus-visible { outline: 2px solid #cba6f7; outline-offset: 4px; }
.reader-content strong { color: #f9e2af; }
.reader-content em { color: #f5c2e7; }
.reader-content code { font-family: inherit; color: #a6e3a1; background: #181825; padding: 0.12em 0.35em; border-radius: 4px; }
.reader-content pre { background: #181825; border: 1px solid #313244; border-radius: 8px; padding: 20px; overflow-x: auto; line-height: 1.55; tab-size: 4; }
.reader-content pre code { padding: 0; background: none; color: #cdd6f4; }
.reader-content blockquote { border-left: 3px solid #cba6f7; margin-left: 0; padding-left: 20px; color: #a6adc8; }
.reader-content table { border-collapse: collapse; width: 100%; }
.reader-content th, .reader-content td { border: 1px solid #45475a; padding: 10px 14px; text-align: left; }
.reader-content th { background: #313244; color: #b4befe; }
.reader-content hr { border: 0; border-top: 1px solid #45475a; margin: 2em 0; }
.reader-content img { max-width: 100%; }
.reader-text { white-space: pre-wrap; tab-size: 4; }
.reader-source { white-space: pre; overflow-x: auto; overflow-wrap: normal; line-height: 1.55; }

/* // ChatGPT: Catppuccin Mocha accents separate prompt syntax and help argument types. */
.prompt-user { color: #a6e3a1; }
.prompt-separator { color: #cdd6f4; }
.prompt-path, .help-directory { color: #89b4fa; }
.prompt-symbol { color: #cba6f7; }
.help-file { color: #f9e2af; }
/* // ChatGPT: Prevent programming-font ligatures from joining the yellow > to the following colon. */
.help-command {
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
}
/* // ChatGPT: END CG-CSS-14. */