/* ===== v2026 · slide-in panel + content typography (cards/skills/timeline/contacts/node) ===== */

/* timeline accent tokens (used by .p-era and friends) */
:root {
    --tl-neon:     #6fd6ff;
    --tl-phosphor: #b9ff66;
}

/* ===== Slide-in panel ===== */
.panel {
    position: fixed;
    top: 76px;
    right: var(--pad);
    bottom: 50px;
    width: min(950px, 66vw);
    z-index: 35;
    background: var(--hud-bg-2);
    border: 1px solid var(--border-2);
    border-radius: 10px;
    box-shadow:
        0 0 0 1px rgba(111, 214, 255, 0.10),
        0 26px 60px rgba(3, 8, 30, 0.65),
        0 0 56px rgba(42, 92, 255, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex; flex-direction: column;
    opacity: 0;
    transform: translateX(40px);
    pointer-events: none;
    transition: opacity 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}
.panel[data-open="true"] {
    opacity: 1; transform: translateX(0); pointer-events: auto;
}

/* Fullscreen variant (labs) — covers the viewport like the old alice overlay. */
.panel.panel-full {
    top: 0; right: 0; bottom: 0; left: 0;
    width: auto;
    border-radius: 0;
    z-index: 60;
}
.panel.panel-full .lab-crt { height: min(900px, 64vh); }

/* ===== Labs — retro arcade stations (matches the pixel office vibe) ===== */
.lab-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
    margin-top: 20px;
}
@media (max-width: 980px) { .lab-grid { grid-template-columns: 1fr; } }
.lab-grid .lab-station { margin-top: 0; display: flex; flex-direction: column; }
.lab-grid .lab-crt  { flex: 1 1 auto; height: auto; min-height: min(560px, 58vh); }
.lab-grid .lab-term { flex: 1 1 auto; }

.lab-station {
    margin-top: 20px;
    border: 2px solid #1d2f55;
    border-radius: 4px;
    background: #070b18;
    box-shadow: 0 0 0 1px rgba(111, 214, 255, 0.07), 0 10px 30px rgba(3, 8, 30, 0.5);
    overflow: hidden;
}
.lab-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase;
    color: #9fd8ff;
    border-bottom: 2px solid #1d2f55;
    background: linear-gradient(180deg, #0d1730, #0a1124);
}
.lab-bar-t { font-weight: 700; }
.lab-bar em { margin-left: auto; font-style: normal; color: #4d6da6; letter-spacing: 1px; text-transform: none; }
.lab-led {
    flex: 0 0 auto;
    width: 8px; height: 8px;            /* square = pixel LED */
    background: #41ff8b;
    box-shadow: 0 0 8px #41ff8b;
    animation: lab-led-blink 1.4s steps(2, end) infinite;
}
.lab-led-y { background: #ffe066; box-shadow: 0 0 8px #ffe066; animation-duration: 2.1s; }
@keyframes lab-led-blink { 50% { opacity: 0.25; box-shadow: none; } }

/* --- CRT (alice): off until clicked, then tube power-on + iframe --- */
.lab-crt {
    position: relative;
    height: min(480px, 50vh);
    background: #02040c;
    overflow: hidden;
    cursor: pointer;
}
.lab-crt::after {                       /* scanlines over everything */
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(160, 200, 255, 0.05) 0 1px, transparent 1px 3px);
    pointer-events: none;
    z-index: 3;
}
.lab-crt-off {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    z-index: 2;
    background: radial-gradient(ellipse at center, #0a1228 0%, #02040c 75%);
}
.lab-crt[data-on="true"] { cursor: default; animation: lab-crt-on 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lab-crt[data-on="true"] .lab-crt-off { display: none; }
@keyframes lab-crt-on {
    0%   { transform: scaleY(0.004) scaleX(0.55); filter: brightness(7); }
    35%  { transform: scaleY(0.02)  scaleX(1);    filter: brightness(4); }
    100% { transform: scale(1);                   filter: brightness(1); }
}
.lab-crt iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; background: #02040c;
    z-index: 1;
}
.lab-wave { display: flex; gap: 5px; height: 28px; align-items: flex-end; }
.lab-wave span {
    width: 6px; height: 6px;
    background: #6fd6ff;
    animation: lab-wave 0.9s steps(3, end) infinite;
}
.lab-wave span:nth-child(2n)  { animation-delay: 0.12s; background: #41ff8b; }
.lab-wave span:nth-child(3n)  { animation-delay: 0.24s; }
.lab-wave span:nth-child(4n)  { animation-delay: 0.36s; background: #ffe066; }
@keyframes lab-wave { 0%, 100% { height: 6px; } 50% { height: 26px; } }
.lab-press {
    font-family: "JetBrains Mono", monospace;
    font-size: 13px; font-weight: 700; letter-spacing: 3px;
    color: #ffe066;
    text-shadow: 0 0 12px rgba(255, 224, 102, 0.5);
    animation: lab-blink 1s steps(2, end) infinite;
}
@keyframes lab-blink { 50% { opacity: 0; } }
.lab-sub {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px; letter-spacing: 2px;
    color: #4d6da6;
}
.lab-crt:hover .lab-press { color: #fff3b0; }

/* --- terminal (llms.txt): lines type themselves in --- */
.lab-term {
    padding: 14px 16px 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px; line-height: 1.8;
    color: var(--tl-phosphor);
    background: #030710;
}
.lab-term .ln {
    display: block;
    max-width: 0;
    overflow: hidden; white-space: nowrap; text-overflow: clip;
    animation: lab-type 0.9s steps(36, end) forwards;
}
.lab-term .ln-cmd { color: #e8f1ff; }
.lab-term .ln:nth-child(1) { animation-delay: 0.15s; }
.lab-term .ln:nth-child(2) { animation-delay: 1.05s; }
.lab-term .ln:nth-child(3) { animation-delay: 1.95s; }
.lab-term .ln:nth-child(4) { animation-delay: 2.85s; }
@keyframes lab-type { from { max-width: 0; } to { max-width: 100%; } }
.lab-cursor {
    display: inline-block;
    width: 8px; height: 13px;
    margin-left: 3px; vertical-align: -2px;
    background: var(--tl-phosphor);
    animation: lab-blink 0.8s steps(2, end) infinite;
}
.lab-btn {
    display: block;
    padding: 11px 16px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11.5px; font-weight: 700; letter-spacing: 2px;
    color: #ffe066; text-decoration: none; text-align: center;
    border-top: 2px solid #1d2f55;
    background: #0a1124;
    transition: background 0.15s, color 0.15s;
}
.lab-btn:hover { background: #142251; color: #fff3b0; }

@media (prefers-reduced-motion: reduce) {
    .lab-led, .lab-press, .lab-wave span, .lab-cursor { animation: none; }
    .lab-term .ln { animation: none; max-width: 100%; }
    .lab-crt[data-on="true"] { animation: none; }
}
.panel-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-dim);
    background: rgba(7, 11, 24, 0.4);
}
.panel-no  {
    color: var(--accent);
    font-weight: 600;
    font-size: 13px;
}
.panel-tag { color: var(--fg); flex: 1; }
.panel-close {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg);
    width: 28px; height: 28px;
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.panel-close:hover {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.5);
    color: #fca5a5;
}
.panel-body {
    flex: 1 1 auto;
    /* Default flex-item min-height is `auto` (= content size) which makes the
       body grow to fit content and silently disables overflow scroll. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px 22px 26px;
}
.panel-body::-webkit-scrollbar { width: 8px; }
.panel-body::-webkit-scrollbar-thumb { background: rgba(111, 214, 255, 0.25); border-radius: 4px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }

/* Panel decorative corners */
.panel-corners span {
    position: absolute;
    width: 14px; height: 14px;
    border-color: var(--accent);
    border-style: solid;
    pointer-events: none;
    opacity: 0.7;
}
.panel-corners span:nth-child(1) { top: 6px;    left: 6px;    border-width: 1px 0 0 1px; }
.panel-corners span:nth-child(2) { top: 6px;    right: 6px;   border-width: 1px 1px 0 0; }
.panel-corners span:nth-child(3) { bottom: 6px; left: 6px;    border-width: 0 0 1px 1px; }
.panel-corners span:nth-child(4) { bottom: 6px; right: 6px;   border-width: 0 1px 1px 0; }

/* ===== Panel content typography ===== */
.p-title {
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 14px;
    color: var(--fg);
}
.p-lead {
    font-size: 14.5px;
    color: var(--fg);
    line-height: 1.65;
    margin-bottom: 18px;
}
.p-bullets { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.p-bullets li {
    position: relative;
    padding-left: 22px;
    font-size: 14px;
    color: var(--fg);
}
.p-bullets li::before {
    content: "";
    position: absolute; left: 0; top: 11px;
    width: 10px; height: 1px;
    background: var(--accent);
}

/* Panel · cards (open source) — arcade cartridges */
.p-cards {
    display: flex; flex-direction: column; gap: 14px;
    margin-top: 14px;
}
.p-card {
    display: block;
    padding: 0;
    background: #070b18;
    border: 2px solid #1d2f55;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 0 1px rgba(111, 214, 255, 0.07), 0 10px 30px rgba(3, 8, 30, 0.5);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.p-card::after {                        /* scanlines on hover — CRT feel */
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(160, 200, 255, 0.05) 0 1px, transparent 1px 3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.p-card:hover {
    border-color: rgba(111, 214, 255, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(111, 214, 255, 0.15), 0 14px 36px rgba(3, 8, 30, 0.6), 0 0 24px rgba(111, 214, 255, 0.12);
}
.p-card:hover::after { opacity: 1; }
.p-card-h {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px;
    border-bottom: 2px solid #1d2f55;
    background: linear-gradient(180deg, #0d1730, #0a1124);
}
.p-card-h span {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13.5px; font-weight: 700; letter-spacing: 1px;
    color: #9fd8ff;
}
.p-card-h span::before {                /* pixel LED, color cycles per card */
    content: '';
    width: 8px; height: 8px; flex: 0 0 auto;
    background: #41ff8b; box-shadow: 0 0 8px #41ff8b;
    animation: lab-led-blink 1.4s steps(2, end) infinite;
}
.p-cards .p-card:nth-child(2) .p-card-h span::before { background: #6fd6ff; box-shadow: 0 0 8px #6fd6ff; animation-duration: 1.8s; }
.p-cards .p-card:nth-child(3) .p-card-h span::before { background: #ffe066; box-shadow: 0 0 8px #ffe066; animation-duration: 2.1s; }
.p-card-h em {
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 10.5px;
    color: #4d6da6;
    letter-spacing: 1px;
}
.p-card p {
    font-size: 13.5px;
    color: var(--fg-dim);
    line-height: 1.6;
    margin: 0;
    padding: 12px 14px 10px;
}
.p-tags { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 14px 14px; }
.p-tags span {
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 3px 8px;
    border: 1px solid rgba(111, 214, 255, 0.32);
    border-radius: 3px;
    color: rgba(200, 232, 255, 0.92);
    background: rgba(7, 11, 24, 0.55);
    letter-spacing: 0.08em;
}

/* Panel · skills — cartridge slots */
.p-skillgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}
.p-skill {
    padding: 12px 14px;
    border: 2px solid #1d2f55;
    border-radius: 4px;
    background: #070b18;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.p-skill::before {                      /* power strip on the left edge */
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #41ff8b, rgba(65, 255, 139, 0.08));
    opacity: 0.55;
    transition: opacity 0.2s ease;
}
.p-skillgrid .p-skill:nth-child(2n)::before  { background: linear-gradient(180deg, #6fd6ff, rgba(111, 214, 255, 0.08)); }
.p-skillgrid .p-skill:nth-child(3n)::before  { background: linear-gradient(180deg, #ffe066, rgba(255, 224, 102, 0.08)); }
.p-skill:hover {
    border-color: rgba(111, 214, 255, 0.55);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(3, 8, 30, 0.55), 0 0 18px rgba(111, 214, 255, 0.10);
}
.p-skill:hover::before { opacity: 1; }
.p-skill h3 {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9fd8ff;
    margin-bottom: 6px;
}
.p-skill p {
    font-size: 13px;
    color: var(--fg-dim);
    line-height: 1.55;
}
.p-skill h3 em {
    font-style: normal;
    float: right;
    color: var(--fg-mute);
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    font-weight: 400;
}
.p-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
}
.p-pills span {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 4px 10px;
    border: 1px solid rgba(111, 214, 255, 0.32);
    border-radius: 3px;
    color: rgba(200, 232, 255, 0.92);
    background: rgba(7, 11, 24, 0.55);
    letter-spacing: 0.06em;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.p-pills span:hover {
    border-color: #ffe066;
    color: #fff3b0;
    background: #142251;
}

/* Panel · timeline (compact list) */
.p-timeline {
    list-style: none;
    display: flex; flex-direction: column;
    border-left: 1px solid var(--border);
    padding-left: 22px;
    margin: 6px 0 18px;
}
.p-timeline li {
    position: relative;
    padding: 10px 0;
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
}
.p-timeline li::before {
    content: "";
    position: absolute;
    left: -27px; top: 18px;
    width: 8px; height: 8px;            /* square = pixel marker */
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--bg), 0 0 10px var(--accent);
    animation: lab-led-blink 2.2s steps(2, end) infinite;
}
.p-timeline li:nth-child(2n)::before { background: var(--tl-phosphor); box-shadow: 0 0 0 4px var(--bg), 0 0 10px var(--tl-phosphor); animation-delay: 0.7s; }
.p-timeline strong {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--accent);
    letter-spacing: 0.06em;
}
.p-timeline span {
    font-size: 13.5px;
    color: var(--fg);
}

/* Panel · contacts — arcade high-score table (.lab-station chrome) */
.ct-station { margin-top: 6px; }
.ct-list { list-style: none; margin: 0; }
.ct-row {
    display: grid;
    grid-template-columns: 52px 110px 1fr auto;
    align-items: center; gap: 14px;
    padding: 14px 16px;
    font-family: "JetBrains Mono", monospace;
    border-bottom: 2px solid #101b38;
    text-decoration: none;
    transition: background 0.15s;
}
.ct-row:hover { background: #142251; }
.ct-rank {
    font-size: 12px; font-weight: 700; letter-spacing: 1px;
    color: #4d6da6;
}
.ct-list li:nth-child(1) .ct-rank { color: #ffe066; text-shadow: 0 0 10px rgba(255, 224, 102, 0.45); }
.ct-list li:nth-child(2) .ct-rank { color: #cfe2ff; }
.ct-list li:nth-child(3) .ct-rank { color: #ffb077; }
.ct-chan {
    font-size: 10.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: #9fd8ff;
}
.ct-handle {
    font-size: 13px; color: var(--fg);
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    transition: color 0.15s;
}
.ct-row:hover .ct-handle { color: #fff3b0; }
.ct-go {
    font-size: 13px; color: #4d6da6;
    transition: color 0.15s, transform 0.15s;
}
.ct-row:hover .ct-go { color: #ffe066; transform: translate(2px, -2px); }
.ct-term { border-top: 2px solid #1d2f55; }
@media (max-width: 640px) {
    .ct-row { grid-template-columns: 40px 1fr auto; gap: 10px; }
    .ct-chan { display: none; }
}

/* Panel · about — boot log (terminal lines that type themselves in) */
.ab-station { margin: 4px 0 18px; }
.ab-log {
    padding: 14px 16px 12px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12.5px; line-height: 2;
    background: #030710;
}
.ab-log .bl {
    display: flex; align-items: baseline; gap: 8px;
    color: var(--fg);
    opacity: 0;
    animation: p-rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.ab-log .bl b { color: #6fd6ff; font-weight: 700; flex: 0 0 auto; }
.ab-log .bl i {
    margin-left: auto; flex: 0 0 auto;
    font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: 2px;
    color: var(--tl-phosphor);
    text-shadow: 0 0 8px rgba(185, 255, 102, 0.4);
}
.ab-log .bl:last-child i { color: #ffe066; text-shadow: 0 0 8px rgba(255, 224, 102, 0.5); animation: lab-blink 1.2s steps(2, end) infinite; }
.ab-log .bl:nth-child(1) { animation-delay: 0.10s; }
.ab-log .bl:nth-child(2) { animation-delay: 0.28s; }
.ab-log .bl:nth-child(3) { animation-delay: 0.46s; }
.ab-log .bl:nth-child(4) { animation-delay: 0.64s; }
.ab-log .bl:nth-child(5) { animation-delay: 0.82s; }
.p-foot {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--fg-mute);
}

/* Panel · node detail */
.p-node-meta {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.p-node-layer {
    padding: 3px 8px;
    border: 1px solid currentColor;
    border-radius: 4px;
}
.p-node-layer[data-layer="edge"]    { color: var(--layer-edge); }
.p-node-layer[data-layer="net"]     { color: var(--layer-net); }
.p-node-layer[data-layer="orch"]    { color: var(--layer-orch); }
.p-node-layer[data-layer="compute"] { color: var(--layer-compute); }
.p-node-layer[data-layer="obs"]     { color: var(--layer-obs); }
.p-node-stack { color: var(--fg-dim); }
.p-node-title { font-size: clamp(24px, 2.4vw, 36px); }

/* Panel · node detail chips (since / era / autoral) */
.p-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 6px 0 14px;
}
.p-chip {
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 3px 9px;
    border: 1px solid var(--border-2);
    border-radius: 3px;
    color: var(--fg-dim);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: rgba(7, 11, 24, 0.55);
}
.p-chip-star {
    color: #0a0e0a;
    background: linear-gradient(135deg, #ffd66a, #ffb000);
    border-color: rgba(255, 176, 0, 0.7);
    font-weight: 700;
    letter-spacing: 0.08em;
}
.p-chip[data-era="edge"]  { color: var(--layer-edge);    border-color: rgba(122, 220, 255, 0.4); }
.p-chip[data-era="cloud"] { color: var(--layer-net);     border-color: rgba(155, 139, 255, 0.4); }
.p-chip[data-era="kube"]  { color: var(--layer-orch);    border-color: rgba(56, 189, 248, 0.4); }
.p-chip[data-era="ai"]    { color: var(--layer-compute); border-color: rgba(251, 146, 60, 0.45); }

/* Panel · timeline (cinematic 7-era cards from career slide) */
.p-tl-head {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    margin: 4px 0 14px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-mute);
}
.p-tl-eyebrow {
    padding: 3px 8px;
    border: 1px solid var(--border-2);
    border-radius: 3px;
    color: var(--tl-neon);
    border-color: rgba(111, 214, 255, 0.4);
}
.p-tl-live {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 8px;
    border: 1px solid rgba(185, 255, 102, 0.45);
    border-radius: 3px;
    color: var(--tl-phosphor);
}
.p-tl-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--tl-phosphor);
    box-shadow: 0 0 8px var(--tl-phosphor);
    animation: tl-pulse 1.6s ease-in-out infinite;
}
@keyframes tl-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.7); }
}
.p-tl-years { color: var(--fg-dim); }

.p-eras {
    list-style: none;
    display: flex; flex-direction: column;
    gap: 14px;
    margin: 18px 0 18px;
    position: relative;
}
.p-eras::before {
    content: "";
    position: absolute;
    left: 11px; top: 12px; bottom: 12px;
    width: 1px;
    background: linear-gradient(
        180deg,
        rgba(111, 214, 255, 0.0) 0%,
        rgba(111, 214, 255, 0.35) 12%,
        rgba(185, 255, 102, 0.35) 50%,
        rgba(111, 214, 255, 0.35) 88%,
        rgba(111, 214, 255, 0.0) 100%
    );
    pointer-events: none;
}

.p-era {
    position: relative;
    padding: 14px 16px 14px 38px;
    border: 2px solid #1d2f55;
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        rgba(11, 17, 32, 0.72) 0%,
        rgba(7, 11, 24, 0.85) 100%
    );
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.p-era::after {                          /* scanlines on hover */
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, rgba(160, 200, 255, 0.05) 0 1px, transparent 1px 3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}
.p-era:hover {
    transform: translateX(2px);
    border-color: rgba(111, 214, 255, 0.5);
    box-shadow: 0 8px 24px rgba(8, 22, 44, 0.55), 0 0 18px rgba(111, 214, 255, 0.10);
}
.p-era:hover::after { opacity: 1; }
.p-era::before {
    content: "";
    position: absolute;
    left: 6px; top: 18px;
    width: 10px; height: 10px;          /* square pixel marker */
    background: var(--tl-neon);
    box-shadow:
        0 0 0 3px rgba(7, 11, 24, 1),
        0 0 12px var(--tl-neon);
    animation: lab-led-blink 2.4s steps(2, end) infinite;
}
.p-era[data-accent="phosphor"]::before {
    background: var(--tl-phosphor);
    box-shadow:
        0 0 0 3px rgba(7, 11, 24, 1),
        0 0 12px var(--tl-phosphor);
}
.p-era[data-accent="phosphor"] .p-era-year { color: var(--tl-phosphor); }
.p-era[data-accent="phosphor"] .p-era-stack span {
    border-color: rgba(185, 255, 102, 0.35);
    color: rgba(220, 250, 200, 0.92);
}

.p-era-head {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}
.p-era-year {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--tl-neon);
    letter-spacing: 0.04em;
}
.p-era-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-mute);
}
.p-era-body {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--fg);
    margin: 4px 0 10px;
}
.p-era-body strong {
    color: var(--fg);
    font-weight: 600;
}
.p-era-stack {
    display: flex; flex-wrap: wrap; gap: 5px;
}
.p-era-stack span {
    font-family: var(--font-mono);
    font-size: 10.5px;
    padding: 3px 8px;
    border: 1px solid rgba(111, 214, 255, 0.32);
    border-radius: 3px;
    color: rgba(200, 232, 255, 0.92);
    letter-spacing: 0.08em;
    text-transform: lowercase;
    background: rgba(7, 11, 24, 0.55);
}

.p-era-now {
    border-color: rgba(185, 255, 102, 0.45);
    background: linear-gradient(
        180deg,
        rgba(20, 36, 18, 0.72) 0%,
        rgba(8, 14, 24, 0.92) 100%
    );
}

.p-tl-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-mute);
}
.p-tl-foot span:first-child { color: var(--tl-phosphor); }

/* Era cards collapse a touch on small screens — lives with the component */
@media (max-width: 640px) {
    .p-era { padding: 12px 12px 12px 32px; }
    .p-era::before { left: 4px; top: 16px; width: 10px; height: 10px; }
    .p-eras::before { left: 9px; }
    .p-era-year { font-size: 16px; }
    .p-era-body { font-size: 12.5px; }
    .p-era-stack span { font-size: 9.5px; padding: 2px 6px; }
}

.p-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.p-cta {
    display: inline-flex;
    align-items: center; gap: 8px;
    padding: 11px 18px;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    border: 1px solid rgba(111, 214, 255, 0.5);
    border-radius: 999px;
    color: #ffffff;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 8px 24px rgba(42, 92, 255, 0.35);
}
.p-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(42, 92, 255, 0.55);
}

/* Secondary CTA — outline style for "ver detalhes" docs link.
   Visually subordinate to the primary "abrir projeto" gradient pill. */
.p-cta-secondary {
    background: transparent;
    color: var(--accent);
    border-color: rgba(111, 214, 255, 0.35);
    box-shadow: none;
}
.p-cta-secondary:hover {
    background: rgba(111, 214, 255, 0.08);
    border-color: var(--accent);
    box-shadow: 0 6px 20px rgba(111, 214, 255, 0.22);
}

/* ===== Arcade reveal — panel content rises in, staggered. Replays on every
   open because openPanel() re-sets panelBody.innerHTML. ===== */
@keyframes p-rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.panel-body .p-title { animation: p-rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.panel-body .p-lead  { animation: p-rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0.08s backwards; }
:is(.p-cards, .p-skillgrid, .p-eras, .p-timeline, .ct-list, .lab-grid) > * {
    animation: p-rise 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
:is(.p-cards, .p-skillgrid, .p-eras, .p-timeline, .ct-list, .lab-grid) > :nth-child(1) { animation-delay: 0.06s; }
:is(.p-cards, .p-skillgrid, .p-eras, .p-timeline, .ct-list, .lab-grid) > :nth-child(2) { animation-delay: 0.14s; }
:is(.p-cards, .p-skillgrid, .p-eras, .p-timeline, .ct-list, .lab-grid) > :nth-child(3) { animation-delay: 0.22s; }
:is(.p-cards, .p-skillgrid, .p-eras, .p-timeline, .ct-list, .lab-grid) > :nth-child(4) { animation-delay: 0.30s; }
:is(.p-cards, .p-skillgrid, .p-eras, .p-timeline, .ct-list, .lab-grid) > :nth-child(5) { animation-delay: 0.38s; }
:is(.p-cards, .p-skillgrid, .p-eras, .p-timeline, .ct-list, .lab-grid) > :nth-child(6) { animation-delay: 0.46s; }
:is(.p-cards, .p-skillgrid, .p-eras, .p-timeline, .ct-list, .lab-grid) > :nth-child(7) { animation-delay: 0.54s; }
:is(.p-cards, .p-skillgrid, .p-eras, .p-timeline, .ct-list, .lab-grid) > :nth-child(8) { animation-delay: 0.62s; }
:is(.p-cards, .p-skillgrid, .p-eras, .p-timeline, .ct-list, .lab-grid) > :nth-child(9) { animation-delay: 0.70s; }

@media (prefers-reduced-motion: reduce) {
    .panel-body .p-title,
    .panel-body .p-lead,
    :is(.p-cards, .p-skillgrid, .p-eras, .p-timeline, .ct-list, .lab-grid) > *,
    .p-card-h span::before, .p-skill::before, .p-era::before,
    .p-timeline li::before, .p-tl-dot { animation: none; }
    .ab-log .bl { animation: none; opacity: 1; }
}

/* ===== OSI · layer explainer + node panels (arcade stations, --lc = layer
   color set inline by osi.js). Band click → .ly-station; chip → .nd-station. */
.ly-station .lab-bar-t,
.nd-station .lab-bar-t { color: var(--lc); text-shadow: 0 0 10px color-mix(in srgb, var(--lc) 45%, transparent); }
.ly-led {
    background: var(--lc);
    box-shadow: 0 0 8px var(--lc);
}
.panel-body > .lab-station { animation: p-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

/* --- two-column body: mini stack | info --- */
.ly-body {
    display: grid;
    grid-template-columns: 195px 1fr;
}
.ly-stack {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 10px;
    border-right: 2px solid #101b38;
    background: #050912;
}
.ly-row {
    display: flex; align-items: center; gap: 7px;
    padding: 4px 8px;
    border: 2px solid transparent;
    border-radius: 3px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; letter-spacing: 0.5px;
    color: #44598a;
    white-space: nowrap;
    animation: p-rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.ly-row:nth-child(1) { animation-delay: 0.05s; }
.ly-row:nth-child(2) { animation-delay: 0.10s; }
.ly-row:nth-child(3) { animation-delay: 0.15s; }
.ly-row:nth-child(4) { animation-delay: 0.20s; }
.ly-row:nth-child(5) { animation-delay: 0.25s; }
.ly-row:nth-child(6) { animation-delay: 0.30s; }
.ly-row:nth-child(7) { animation-delay: 0.35s; }
.ly-row b { color: var(--lc); font-weight: 700; min-width: 9px; }
.ly-row.is-here {
    flex-wrap: wrap;                     /* tag drops to its own line — never clips */
    border-color: var(--lc);
    color: #e8f1ff;
    background: color-mix(in srgb, var(--lc) 12%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--lc) 30%, transparent);
}
.ly-row.is-here i {
    flex: 1 0 100%;
    box-sizing: border-box;
    margin-top: 2px;
    padding-left: 16px;
    font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: 1px;
    color: var(--lc);
    animation: lab-blink 1.1s steps(2, end) infinite;
}

.ly-info { padding: 15px 16px 14px; }
.ly-desc {
    font-size: 14.5px; line-height: 1.65;
    color: #b9c8e8;
}

/* --- mini topology strip: lit boxes = devices that read this layer --- */
.ly-topo {
    display: flex; align-items: center;
    margin: 14px 0 12px;
}
.ly-tn {
    flex: 0 0 auto;
    padding: 5px 7px;
    border: 2px solid #16223f;
    border-radius: 3px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase;
    color: #3c5180;
    white-space: nowrap;
}
.ly-tn.on {
    border-color: var(--lc);
    color: var(--lc);
    box-shadow: 0 0 10px color-mix(in srgb, var(--lc) 35%, transparent);
    animation: ly-pulse 2.2s ease-in-out infinite;
}
.ly-tc { flex: 1 1 auto; height: 2px; background: #16223f; }
.ly-tc.on { background: color-mix(in srgb, var(--lc) 60%, transparent); }
@keyframes ly-pulse { 50% { opacity: 0.55; } }

.ly-scope {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px; line-height: 1.7;
    color: #7e93bd;
}
.ly-scope b {
    display: block;
    font-size: 10px; letter-spacing: 2px;
    color: var(--lc);
    margin-bottom: 4px;
}
.ly-protos {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 13px;
}
.ly-protos span,
.nd-tags span {
    padding: 4px 9px;
    border: 1px solid rgba(111, 214, 255, 0.32);
    border-radius: 3px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; letter-spacing: 0.5px;
    color: #9fd8ff;
}
.ly-term, .nd-term { border-top: 2px solid #1d2f55; font-size: 13px; }

/* --- nodes running at this layer (chips → node panel) --- */
.ly-nodes { margin-top: 16px; animation: p-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s backwards; }
.ly-nodes-t {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; letter-spacing: 2px;
    color: #4d6da6;
    margin-bottom: 10px;
}
.ly-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ly-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 12px;
    border: 2px solid #1d2f55;
    border-radius: 3px;
    background: #070b18;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px; letter-spacing: 0.5px;
    color: #9fd8ff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
    animation: p-rise 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}
.ly-chip:nth-child(1) { animation-delay: 0.20s; }
.ly-chip:nth-child(2) { animation-delay: 0.28s; }
.ly-chip:nth-child(3) { animation-delay: 0.36s; }
.ly-chip:nth-child(4) { animation-delay: 0.44s; }
.ly-chip .dot {
    width: 6px; height: 6px;            /* square pixel LED */
    background: #41ff8b;
    box-shadow: 0 0 6px #41ff8b;
    animation: lab-led-blink 1.6s steps(2, end) infinite;
}
.ly-chip:hover {
    background: #142251;
    border-color: rgba(111, 214, 255, 0.6);
    color: #fff3b0;
    transform: translateY(-1px);
}
.ly-chip.is-primary { border-color: rgba(255, 224, 102, 0.45); color: #ffe066; }
.ly-chip.is-primary .dot { background: #ffe066; box-shadow: 0 0 6px #ffe066; }
.ly-chip.is-primary:hover { border-color: #ffe066; color: #fff3b0; }

/* --- node (project) station --- */
.nd-body { padding: 16px; }
.nd-flag {
    display: inline-block;
    margin-bottom: 10px;
    font-family: "JetBrains Mono", monospace;
    font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
    color: #ffe066;
    text-shadow: 0 0 10px rgba(255, 224, 102, 0.45);
}
.nd-blurb {
    font-size: 15px; line-height: 1.7;
    color: #c3d2f0;
}
.nd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 13px; }
button.nd-layerbtn {
    width: 100%;
    border: 0; border-top: 2px solid #1d2f55;
    color: var(--lc);
    cursor: pointer;
}

@media (max-width: 640px) {
    .ly-body { grid-template-columns: 1fr; }
    .ly-stack {
        flex-direction: row; flex-wrap: wrap;
        border-right: 0;
        border-bottom: 2px solid #101b38;
    }
    .ly-row .ly-row-n { display: none; }
    .ly-row.is-here .ly-row-n { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    .panel-body > .lab-station, .ly-nodes, .ly-row, .ly-chip { animation: none; }
    .ly-tn.on, .ly-chip .dot, .ly-row.is-here i { animation: none; }
}

/* ===== Tráfego — Packet Highway (fullscreen, server rack do office) ===== */
.hw-station {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 150px);
}
.hw-frame {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    display: block;
    background: #05060a;
}