:root {
    --bg: #0a0a0a;
    --fg: #ededed;
    --tag: #666666;
    --dim: #4f4f4f;
    --leaf: #8db36a;
    --wood: #c9b391;
    --pot: #8a7355;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 2.5rem 1.25rem 5rem;
    background: var(--bg);
    color: var(--fg);
    font-family: "SFMono-Regular", "JetBrains Mono", "Fira Code", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 15px;
    line-height: 1.7;
}

.code {
    max-width: 880px;
    margin: 0;
}

/* ---- HTML-tag scaffolding ------------------------------------------ */

/* Any element with data-t is wrapped in visible <tag>…</tag> markup. */
.t {
    display: block;
}

.t::before {
    content: "<" attr(data-t) ">";
    color: var(--tag);
}

.t::after {
    content: "</" attr(data-t) ">";
    color: var(--tag);
}

.t[data-attr]::before {
    content: "<" attr(data-t) " " attr(data-attr) ">";
}

/* self-closing / void tags: opening tag only */
.t.void::after {
    content: "";
}

/* nested tags indent one step */
.t .t {
    margin-left: 2ch;
}

/* ---- content takes on real typographic hierarchy ------------------- */

.t[data-t="h1"] {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.3rem 0 1.2rem;
}

.t[data-t="h2"] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 1.4rem 0 0.5rem;
}

.t[data-t="h3"] {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0.4rem 0 0.15rem;
}

/* keep the tag markup around headings small and subtle */
.t[data-t="h1"]::before, .t[data-t="h1"]::after,
.t[data-t="h2"]::before, .t[data-t="h2"]::after,
.t[data-t="h3"]::before, .t[data-t="h3"]::after {
    font-size: 0.8rem;
    font-weight: 400;
    vertical-align: 0.15em;
}

/* the head's <title> is kept in markup for the browser tab but not shown on the page */
.t[data-t="title"] {
    display: none;
}

.t[data-t="em"] {
    font-style: italic;
    color: #bdbdbd;
}

.t[data-t="em"]::before, .t[data-t="em"]::after {
    font-style: normal;
}

/* dim the date content but keep the <time> markup the same size as other tags */
.t[data-t="time"] {
    color: #9a9a9a;
    font-size: 0.85rem;
}

.t[data-t="time"]::before, .t[data-t="time"]::after {
    font-size: 15px;
    color: var(--tag);
}

.t[data-t="p"] {
    margin: 0.6rem 0;
    max-width: 68ch;
}

/* give each article some breathing room */
.entry {
    margin-top: 1.4rem;
}

/* section header: a code comment paired with a small readable title */
.sec-head {
    margin-top: 2rem;
    margin-bottom: 0.3rem;
}

.sec-head:first-child {
    margin-top: 0;
}

/* comments */
.cmt {
    display: block;
    color: var(--dim);
    font-style: italic;
    margin-top: 1.4rem;
}

.sec-head .cmt {
    margin-top: 0;
}

.cmt::before {
    content: "<!-- ";
}

.cmt::after {
    content: " -->";
}

/* a raw dim line, e.g. a doctype */
.raw {
    display: block;
    color: var(--tag);
}

/* ---- links --------------------------------------------------------- */

/* tag-styled links: whole <a …>text</a> is clickable */
a.t {
    color: var(--fg);
    text-decoration: none;
    width: fit-content;
    border-radius: 3px;
}

a.t:hover {
    background: rgba(255, 255, 255, 0.07);
}

/* inline prose links */
a:not(.t) {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--tag);
    text-underline-offset: 2px;
}

a:not(.t):hover {
    text-decoration-color: var(--fg);
}

/* ---- spacing tweaks ------------------------------------------------ */

.back {
    margin-top: 2.5rem;
}

sub {
    color: inherit;
}

/* ---- bonsai easter egg (type "bonsai") ----------------------------- */

body.terminal-open {
    padding-right: calc(40vw + 1.25rem);
}

#bonsai-term {
    position: fixed;
    top: 0;
    right: 0;
    width: 40vw;
    height: 100vh;
    background: #060606;
    border-left: 1px solid #2a2a2a;
    box-shadow: -24px 0 50px rgba(0, 0, 0, 0.55);
    display: none;
    flex-direction: column;
    z-index: 9999;
    font-size: 13px;
    line-height: 1.15;
    color: var(--fg);
}

#bonsai-term.on {
    display: flex;
}

#bonsai-term .bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid #1f1f1f;
    color: #7a7a7a;
    font-size: 12px;
    user-select: none;
}

#bonsai-term .bar .dots {
    color: #444;
    letter-spacing: 2px;
}

#bonsai-term .bar .x {
    cursor: pointer;
    margin-left: 0.5rem;
    color: #7a7a7a;
}

#bonsai-term .bar .x:hover {
    color: var(--fg);
}

#bonsai-term .body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0.6rem 0.8rem 0.8rem;
    display: flex;
    flex-direction: column;
}

#bonsai-term .cmdline {
    color: #8a8a8a;
    margin-bottom: 0.35rem;
    white-space: nowrap;
}

#bonsai-term .cmdline b {
    color: var(--leaf);
    font-weight: 400;
}

/* block cursor, matching the shell's (see .sh-cursor / term-cursor) */
#bonsai-term .cur {
    background: var(--leaf);
    color: #060606;
    animation: term-cursor 1.05s steps(1) infinite;
}

#bonsai-term pre {
    margin: 0;
    flex: 1;
    min-height: 0;
    white-space: pre;
    overflow: hidden;
    font: inherit;
    color: var(--wood);
}

#bonsai-term pre .leaf {
    color: var(--leaf);
}

#bonsai-term pre .pot {
    color: var(--pot);
}

/* persistent corner hint — shown over both the bonsai and the shell */
#bonsai-term .hint {
    position: absolute;
    left: 0.8rem;
    bottom: 0.5rem;
    color: #3a3a3a;
    font-size: 11px;
    pointer-events: none;
    z-index: 2;
}

/* "cmd to open" hint — shown in the corner while the terminal is closed */
#term-reopen {
    position: fixed;
    right: 0.8rem;
    bottom: 0.5rem;
    color: #3a3a3a;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
    z-index: 9998;
    display: none;
}

#term-reopen.show {
    display: block;
}

#term-reopen:hover {
    color: var(--fg);
}

/* ---- interactive shell (the "imin" exploit) ------------------------ */

#bonsai-term.hacked .title {
    color: #e06c6c;
}

/* shell content flows from the top; the whole body scrolls */
#bonsai-term.hacked .body {
    overflow-y: auto;
}

#bonsai-term .sh-out {
    white-space: pre-wrap;
    word-break: break-word;
}

#bonsai-term .sh-out .ps { color: var(--leaf); }
#bonsai-term .sh-out .err { color: #e06c6c; }
#bonsai-term .sh-out .ok { color: var(--leaf); }
#bonsai-term .sh-out .sys { color: #8a8a8a; }
#bonsai-term .sh-out .ls { display: block; }
#bonsai-term .sh-out .ls .dir { color: #7dcfff; }
#bonsai-term .sh-out .ls .exe { color: var(--leaf); }

#bonsai-term .sh-line {
    position: relative;
    display: flex;
    align-items: baseline;
    margin-top: 0.15rem;
}

#bonsai-term .sh-ps {
    color: var(--leaf);
    white-space: nowrap;
    margin-right: 0.5ch;
}

#bonsai-term .sh-render {
    white-space: pre-wrap;
    word-break: break-word;
}

/* block cursor (terminal-style) drawn over the char at the caret */
#bonsai-term .sh-cursor {
    background: var(--leaf);
    color: #060606;
    animation: term-cursor 1.05s steps(1) infinite;
}

@keyframes term-cursor {
    50% { background: transparent; color: inherit; }
}

/* the real input only captures keystrokes/clicks — it's invisible */
#bonsai-term .sh-in {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    font: inherit;
}

/* ---- glitch (the breakout moment) ---------------------------------- */

#bonsai-term pre.glitch {
    color: var(--wood);
    text-shadow: 2px 0 rgba(255, 0, 120, 0.75), -2px 0 rgba(0, 220, 255, 0.75);
    animation: term-shake 0.16s steps(2) infinite;
}

#bonsai-term.glitching {
    animation: term-flick 0.12s steps(2) infinite;
}

@keyframes term-shake {
    0% { transform: translate(0, 0); }
    20% { transform: translate(-2px, 1px); }
    40% { transform: translate(2px, -1px); }
    60% { transform: translate(-1px, -2px); }
    80% { transform: translate(1px, 2px); }
    100% { transform: translate(0, 0); }
}

@keyframes term-flick {
    50% { filter: brightness(1.4) contrast(1.3); }
}

@media (max-width: 999px) {
    /* no side overlay on mobile: the terminal flows at the end of the page */
    body.terminal-open {
        padding-right: 1.25rem;
    }

    #bonsai-term {
        position: relative;
        width: 100%;
        height: 70vh;
        margin-top: 2.5rem;
        border-left: 0;
        border-top: 1px solid #2a2a2a;
        box-shadow: none;
    }

    /* the corner hint anchors to the panel (now position: relative) */
    #term-reopen {
        bottom: 0.75rem;
    }
}

/* ---- os.html: fullscreen js-dos (DOOM) ----------------------------- */
/* scoped to .os so it doesn't affect the portfolio pages */

html.os,
body.os {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
}

/* js-dos wraps the canvas in .dosbox-container; both fill the screen */
body.os #jsdos,
body.os .dosbox-container,
body.os .dosbox-container canvas {
    width: 100%;
    height: 100%;
    display: block;
}

body.os canvas {
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}