:root {
    --page: #0b0d12;
    --glow: #1f2937;
    --window: #0e1116;
    --bar: #161b22;
    --border: #30363d;
    --text: #c9d1d9;
    --dim: #8b949e;
    --bright: #f0f6fc;
    --green: #7ee787;
    --red: #ff5f57;
    --yellow: #febc2e;
    --dot-green: #28c840;
    --linkedin: #0a66c2;
    --instagram: #e4405f;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--page); }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: radial-gradient(circle at 30% 20%, var(--glow), var(--page) 70%) fixed;
    color: var(--text);
    font: 15px/1.75 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    -webkit-font-smoothing: antialiased;
}

.window {
    width: 100%;
    max-width: 560px;
    background: var(--window);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.titlebar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: var(--bar);
    border-bottom: 1px solid var(--border);
}

.dot { width: 11px; height: 11px; border-radius: 50%; }
.dot.red { background: var(--red); }
.dot.yellow { background: var(--yellow); }
.dot.green { background: var(--dot-green); }

/* Right margin equals the dots' width so the title sits at the true center. */
.title { flex: 1; margin-right: 54px; text-align: center; font-size: 12px; color: var(--dim); }

.screen { padding: 22px 24px; overflow-wrap: anywhere; }

.block { margin: 0 0 14px; }

.cmd { margin: 0; }
.prompt { color: var(--dim); }
.cwd { color: var(--green); }

.out p { margin: 0; }
.dim { color: var(--dim); }

h1 { margin: 2px 0 0; font-size: 1.6rem; font-weight: 400; line-height: 1.4; color: var(--bright); }

.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.links a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.links a:hover, .links a:focus-visible { text-decoration: underline; }
.links a:focus-visible { outline: 1px dashed var(--dim); outline-offset: 3px; }
.links svg { width: 15px; height: 15px; flex: none; }
.icon-linkedin { fill: var(--linkedin); }
.icon-instagram { fill: none; stroke: var(--instagram); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-mail { fill: none; stroke: var(--yellow); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cursor, .typing::after {
    display: inline-block;
    width: 0.6em;
    height: 1.15em;
    vertical-align: -0.2em;
    background: var(--text);
}
.typing::after { content: ""; }
.cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Animation mode: set by script.js on <html>. Visibility, not display, so the window keeps its final size. */
.anim .block:not(.shown),
.anim .out:not(.done),
.anim .idle { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .cursor { animation: none; }
}

@media (max-width: 600px) {
    body { padding: 12px; font-size: 13px; }
    .titlebar { padding: 8px 10px; gap: 5px; }
    .dot { width: 9px; height: 9px; }
    .title { display: none; }
    .screen { padding: 16px; }
    h1 { font-size: 1.35rem; }
    .links { flex-direction: column; }
}