body {
    height: 100dvh;
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "tabs tabs"
        "sidebar content"
        "status status";
}

body:has(.is-open),
body:has(.is-open) .chrome-content,
body:has(.is-open) .chrome-sidebar {
    overflow: hidden;
}

.chrome-tabs {
    grid-area: tabs;
    border-bottom: 1px solid var(--border);
    background: var(--bg-chrome);
    display: flex;
    align-items: stretch;
}

.chrome-tabs__menu {
    display: none;
    flex: 0 0 auto;
    width: 44px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--border);
    color: var(--fg-muted);
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    transition: color 120ms ease, background-color 120ms ease;
}

.chrome-tabs__menu:hover { color: var(--fg); background: rgba(255, 255, 255, 0.04); }
.chrome-tabs__menu span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform 180ms ease, opacity 180ms ease;
}
.chrome-tabs__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.chrome-tabs__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.chrome-tabs__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.chrome-sidebar__backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 998;
}
.chrome-sidebar__backdrop.is-open { display: block; }

.chrome-sidebar {
    grid-area: sidebar;
    border-right: 1px solid var(--border);
    background: var(--bg-sidebar);
    overflow-y: auto;
}

.chrome-content {
    grid-area: content;
    min-width: 0;
    overflow: auto;
    background: var(--bg);
}

.chrome-status {
    grid-area: status;
    border-top: 1px solid var(--border);
    background: var(--bg-chrome);
}

.chrome-tabs__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0 var(--space-3);
    gap: 0;
    overflow-x: auto;
    flex: 1 1 auto;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.chrome-tabs__list::-webkit-scrollbar { display: none; }

.chrome-tabs__list a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    text-decoration: none;
    color: var(--fg-mute2);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
}

.chrome-tabs__list a:hover { color: var(--fg); }

.chrome-tabs__list a.is-active {
    color: var(--fg);
    border-bottom-color: var(--accent);
}

.chrome-tabs__list a.is-active::before {
    content: '●';
    color: var(--accent);
    font-size: 0.6em;
}

.chrome-sidebar__section {
    padding: var(--space-4) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}

.chrome-sidebar__section + .chrome-sidebar__section {
    border-top: 1px solid var(--border);
}

.chrome-sidebar__label {
    color: var(--fg-mute3);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
    font-size: 10px;
}

.chrome-sidebar__folder {
    color: var(--fg-muted);
    margin-bottom: var(--space-1);
}

.chrome-sidebar__tree {
    list-style: none;
    margin: 0;
    padding-left: var(--space-2);
    color: var(--fg-mute2);
}

.chrome-sidebar__tree a,
.chrome-sidebar__tree button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    padding: 1px 4px;
    margin: 0 -4px;
    border-radius: 2px;
    text-align: left;
    font: inherit;
    display: block;
    text-decoration: none;
    width: calc(100% + 8px);
    transition: color 120ms ease, background-color 120ms ease;
}

.chrome-sidebar__tree a:hover,
.chrome-sidebar__tree button:hover {
    color: var(--fg);
    background: rgba(255, 255, 255, 0.04);
}

.chrome-sidebar__tree a.is-active {
    color: var(--accent);
}

.chrome-sidebar__socials {
    display: flex;
    gap: var(--space-3);
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
}

.chrome-sidebar__socials a {
    opacity: 0.7;
    transition: opacity 150ms ease;
}

.chrome-sidebar__socials a:hover { opacity: 1; }

.chrome-sidebar__socials img {
    height: 1.2rem;
    display: block;
}

.chrome-content > article[data-tab] {
    display: none;
    padding: var(--space-8) var(--space-6);
    max-width: 960px;
}

.chrome-content > article[data-tab][data-active] {
    display: block;
}

.chrome-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1) var(--space-4);
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--fg-mute2);
}

.chrome-status__left,
.chrome-status__right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.chrome-status .status-branch { color: var(--ok); }

.chrome-status__copyright {
    color: var(--fg-mute3);
    margin-left: var(--space-3);
}

@media (max-width: 1023px) {
    body {
        grid-template-columns: 1fr;
        grid-template-areas:
            "tabs"
            "content"
            "status";
    }
    .chrome-tabs__menu { display: flex; }
    .chrome-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(280px, 80vw);
        z-index: 999;
        transform: translateX(-100%);
        transition: transform 220ms ease;
        box-shadow: 6px 0 24px rgba(0, 0, 0, 0.4);
    }
    .chrome-sidebar.is-open { transform: translateX(0); }
    .chrome-content > article[data-tab] { padding: var(--space-6) var(--space-4); }
}

@media (max-width: 640px) {
    .chrome-tabs__list { padding: 0 var(--space-2); }
    .chrome-tabs__list a {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
        gap: var(--space-1);
    }
    .chrome-content > article[data-tab] { padding: var(--space-4) var(--space-3); }
    .chrome-status { padding: var(--space-1) var(--space-2); font-size: 10px; gap: var(--space-2); }
    .chrome-status__copyright { display: none; }
}

@media (hover: none) and (pointer: coarse) {
    .chrome-sidebar__tree a,
    .chrome-sidebar__tree button { padding: 6px 4px; }
    .chrome-sidebar__socials img { height: 1.6rem; }
}

.tok-key     { color: var(--key); }
.tok-string  { color: var(--string); }
.tok-ok      { color: var(--ok); }
.tok-comment { color: var(--comment); }
.tok-punct   { color: var(--fg-mute2); }
.tok-accent  { color: var(--accent); }
.tok-link    { text-decoration: underline dotted var(--accent); cursor: pointer; }
.tok-link:hover { color: var(--accent); }

.tab-file-header {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--comment);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-6);
}

.tab-json {
    font-family: var(--font-mono);
    font-size: clamp(13px, 2.6vw, var(--text-xl));
    line-height: var(--line-relax);
    padding: var(--space-6) 0;
    color: var(--fg-muted);
    white-space: pre-wrap;
    word-break: break-word;
}

.tab-json__cta { margin-top: var(--space-6); }

.terminal-cursor {
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    background: var(--accent);
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: terminalBlink 1s steps(2) infinite;
}

.terminal-cursor--thin {
    width: 0.3em;
    height: 1em;
    margin-left: 4px;
}

@keyframes terminalBlink {
    0%, 50%       { opacity: 1; }
    50.01%, 100%  { opacity: 0; }
}

@media (max-width: 1023px) {
    .chrome-content > article[data-tab="portfolio.json"],
    .chrome-content > article[data-tab="about.txt"] {
        min-height: calc(100vh - 80px);
        display: none;
        place-content: center;
    }
    .chrome-content > article[data-tab="portfolio.json"][data-active],
    .chrome-content > article[data-tab="about.txt"][data-active] {
        display: grid;
    }
}