:root {
    --background: #000000;
    --surface: #0D1117;
    --prompt: #10B981;
    --command: #06B6D4;
    --highlight: #FBBF24;
    --text: #E5E7EB;
    --link: #3B82F6;
    --error: #EF4444;
    --outline: #1F2937;

    --font-mono: 'JetBrains Mono', monospace;
    --unit: 4px;
    --gutter: 16px;
    --margin-page: 24px;
    --stack-sm: 8px;
    --stack-md: 24px;
    --stack-lg: 48px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--background);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.4;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
}

::selection {
    background-color: var(--prompt);
    color: var(--background);
}

.window-container {
    width: 100%;
    max-width: 900px;
    height: 95vh;
    border: 1px solid var(--outline);
    background-color: var(--surface);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header Controls */
.window-header {
    background-color: #1c2026; /* from surface-container in design */
    border-bottom: 1px solid var(--outline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px var(--margin-page);
    flex-shrink: 0;
}

.window-controls {
    display: flex;
    gap: 8px;
}

.control-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.control-btn.close { background-color: var(--error); }
.control-btn.minimize { background-color: var(--highlight); }
.control-btn.maximize { background-color: var(--prompt); }

.window-title {
    color: var(--prompt);
    font-size: 16px;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

.window-actions {
    display: flex;
    gap: 16px;
    color: #bbcabf; /* on-surface-variant */
}

.action-icon {
    font-size: 18px;
    cursor: pointer;
}
.action-icon:hover {
    color: var(--prompt);
}

/* Main Area */
.terminal-main {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: var(--margin-page);
    display: block;
}

.ascii-art {
    color: var(--prompt);
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: var(--stack-lg);
    overflow-x: auto;
    overflow-y: hidden;
    user-select: none;
    padding-bottom: 16px;
}

/* Commands */
.cmd-line {
    display: flex;
    gap: 8px;
    margin-top: var(--stack-md);
    margin-bottom: var(--stack-sm);
    align-items: center;
}
.cmd-prompt {
    color: var(--prompt);
}
.cmd-text {
    color: var(--command);
}

/* Outputs */
.output-block {
    padding-left: 8px;
    border-left: 1px solid var(--outline);
    margin-left: 8px;
    padding-top: 4px;
    padding-bottom: 4px;
    margin-bottom: var(--stack-sm);
}

.links-row {
    margin-top: 8px;
    display: flex;
    gap: 16px;
}
.links-row a {
    color: var(--command);
    text-decoration: none;
}
.links-row a:hover {
    color: var(--prompt);
    text-decoration: underline;
}

.ascii-table {
    white-space: pre;
    overflow-x: auto;
}

.projects-grid {
    display: grid;
    grid-template-columns: minmax(100px, max-content) 1fr;
    gap: 16px;
}
.project-title {
    color: var(--command);
}

.skills-flex {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.skill-tag {
    color: var(--highlight);
}

/* Active Prompt */
.active-prompt {
    display: flex;
    gap: 8px;
    margin-top: var(--stack-lg);
    align-items: center;
}
.prompt-text {
    color: var(--prompt);
}
.blinking-cursor {
    width: 10px;
    height: 18px;
    background-color: var(--text);
    animation: blinker 1s step-end infinite;
}

@keyframes blinker {
    50% { opacity: 0; }
}

.hidden {
    display: none !important;
}

/* Footer */
.window-footer {
    background-color: #0a0e14; /* surface-container-lowest */
    border-top: 1px solid var(--outline);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px var(--margin-page);
    flex-shrink: 0;
}
.footer-copyright {
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
}
.footer-links {
    display: flex;
    gap: 16px;
}
.footer-links a {
    color: var(--outline);
    text-decoration: none;
}
.footer-links a:hover {
    color: var(--prompt);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: var(--surface);
    border-left: 1px solid var(--outline);
}
::-webkit-scrollbar-thumb {
    background: var(--outline);
    border: 1px solid var(--surface);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--prompt);
}

/* Responsive Scaling */
@media (max-width: 600px) {
    .ascii-art { font-size: 12px; }
    .projects-grid { grid-template-columns: 1fr; gap: 4px; }
    .project-title { margin-top: 8px; }
}