:root {
            --bg: #0d0d0d;
            --bg2: #111111;
            --panel: #141414;
            --border: #2a2a2a;
            --amber: #ffb300;
            --amber-dim: #c48a00;
            --amber-glow: rgba(255, 179, 0, 0.15);
            --amber-glow2: rgba(255, 179, 0, 0.06);
            --green: #00ff9d;
            --green-dim: #00c97e;
            --red: #ff4f4f;
            --text: #ffffff;
            --text-dim: #b8b0a0;
            --text-muted: #8a8276;
            --cursor: #ffb300;
            --scrollbar: #2a2a2a;
        }
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html, body {
            width: 100%;
            height: 100%;
            background: var(--bg);
            color: var(--text);
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            font-size: 14px;
            overflow: hidden;
            -webkit-overflow-scrolling: touch;
        }
        @media (max-width: 768px) {
            html, body {
                overflow: hidden;
            }
            .content-scroll::-webkit-scrollbar,
            .sidebar::-webkit-scrollbar,
            .tab-bar::-webkit-scrollbar {
                display: none;
            }
            .content-scroll,
            .sidebar,
            .tab-bar {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .nav-item, .tab {
                touch-action: manipulation;
            }
        }
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0,0,0,0.08) 2px,
                rgba(0,0,0,0.08) 4px
            );
            pointer-events: none;
            z-index: 9999;
        }
        body::after {
            content: '';
            position: fixed;
            inset: 0;
            background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%);
            pointer-events: none;
            z-index: 9998;
        }
        .os-shell {
            display: grid;
            grid-template-rows: 32px 1fr 26px;
            grid-template-columns: 240px 1fr;
            width: 100vw;
            height: 100vh;
        }
        .topbar {
            grid-column: 1 / -1;
            grid-row: 1;
            background: #0a0a0a;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            padding: 0 16px;
            gap: 12px;
            position: relative;
        }
        .topbar-dots {
            display: flex;
            gap: 7px;
        }
        .dot {
            width: 13px;
            height: 13px;
            border-radius: 50%;
            cursor: pointer;
            transition: filter 0.2s;
        }
        .dot:hover { filter: brightness(1.3); }
        .dot.red { background: #ff5f56; box-shadow: 0 0 6px rgba(255,95,86,0.4); }
        .dot.yellow { background: #ffbd2e; box-shadow: 0 0 6px rgba(255,189,46,0.4); }
        .dot.green { background: #27c93f; box-shadow: 0 0 6px rgba(39,201,63,0.4); }
        .topbar-title {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            color: var(--text-dim);
            font-size: 12px;
            letter-spacing: 0.05em;
        }
        .topbar-title .host { color: var(--amber); font-weight: 600; }
        .topbar-right {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 16px;
        }
        .topbar-clock {
            color: var(--text-dim);
            font-size: 12px;
            font-weight: 300;
            letter-spacing: 0.1em;
        }
        .theme-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-dim);
            font-family: inherit;
            font-size: 11px;
            padding: 2px 8px;
            cursor: pointer;
            transition: all 0.2s;
            letter-spacing: 0.08em;
        }
        .theme-btn:hover {
            border-color: var(--amber);
            color: var(--amber);
            box-shadow: 0 0 8px var(--amber-glow);
        }
        .sidebar {
            grid-column: 1;
            grid-row: 2;
            background: var(--panel);
            border-right: 1px solid var(--border);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .sidebar-section {
            padding: 20px 0 8px;
        }
        .sidebar-label {
            font-size: 10px;
            color: var(--text-muted);
            letter-spacing: 0.15em;
            text-transform: uppercase;
            padding: 0 18px;
            margin-bottom: 8px;
        }
        .nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 18px;
            cursor: pointer;
            color: var(--text-dim);
            font-size: 13px;
            transition: all 0.15s;
            border-left: 2px solid transparent;
            text-decoration: none;
            position: relative;
            overflow: hidden;
        }
        .nav-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--amber-glow2);
            opacity: 0;
            transition: opacity 0.2s;
        }
        .nav-item:hover::before,
        .nav-item.active::before {
            opacity: 1;
        }
        .nav-item:hover,
        .nav-item.active {
            color: var(--amber);
            border-left-color: var(--amber);
        }
        .nav-item.active {
            box-shadow: inset 0 0 20px rgba(255,179,0,0.04);
        }
        .nav-icon { font-size: 12px; color: var(--amber-dim); }
        .nav-cmd { color: var(--amber); font-weight: 500; font-size: 12px; }
        .sidebar-divider {
            height: 1px;
            background: var(--border);
            margin: 4px 0;
        }
        .sidebar-bottom {
            margin-top: auto;
            padding: 14px 18px;
            border-top: 1px solid var(--border);
        }
        .sidebar-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            color: var(--text-muted);
        }
        .status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--green);
            box-shadow: 0 0 6px var(--green);
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        .main {
            grid-column: 2;
            grid-row: 2;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }
        .tab-bar {
            display: flex;
            background: #0e0e0e;
            border-bottom: 1px solid var(--border);
            flex-shrink: 0;
        }
        .tab {
            padding: 8px 20px;
            font-size: 12px;
            color: var(--text-muted);
            cursor: pointer;
            border-right: 1px solid var(--border);
            transition: all 0.15s;
            position: relative;
            white-space: nowrap;
        }
        .tab::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--amber);
            transform: scaleX(0);
            transition: transform 0.2s;
        }
        .tab.active {
            color: var(--amber);
            background: var(--bg2);
        }
        .tab.active::after {
            transform: scaleX(1);
        }
        .tab:hover:not(.active) {
            color: var(--text);
            background: rgba(255,255,255,0.02);
        }
        .content-scroll {
            flex: 1;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0;
            scrollbar-width: thin;
            scrollbar-color: var(--scrollbar) transparent;
        }
        .content-scroll::-webkit-scrollbar {
            width: 4px;
        }
        .content-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        .content-scroll::-webkit-scrollbar-thumb {
            background: var(--scrollbar);
            border-radius: 2px;
        }
        .term-section {
            padding: 32px 48px;
            display: none;
            animation: fadeIn 0.3s ease;
        }
        .term-section.active {
            display: block;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .prompt-line {
            display: flex;
            align-items: center;
            gap: 0;
            margin-bottom: 20px;
            font-size: 14px;
        }
        .p-user { color: var(--amber); font-weight: 600; }
        .p-at { color: var(--text-dim); }
        .p-host { color: var(--amber); font-weight: 600; }
        .p-colon { color: var(--text-dim); }
        .p-path { color: var(--green-dim); }
        .p-dollar { color: var(--text-dim); margin: 0 6px; }
        .p-cmd { color: var(--text); }
        .welcome-section {
            padding: 40px 48px;
        }
        .welcome-ascii {
            font-size: 11px;
            line-height: 1.3;
            color: var(--amber-dim);
            margin-bottom: 32px;
            opacity: 0.7;
            letter-spacing: 0.05em;
        }
        .welcome-text {
            font-size: 15px;
            line-height: 1.8;
            color: var(--text);
            margin-bottom: 8px;
        }
        .welcome-text .hl { color: var(--amber); }
        .welcome-text .hl-green { color: var(--green); }
        .welcome-meta {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin: 32px 0;
        }
        .meta-card {
            background: var(--panel);
            border: 1px solid var(--border);
            padding: 16px;
            position: relative;
            overflow: hidden;
            transition: border-color 0.2s;
        }
        .meta-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--amber), transparent);
        }
        .meta-card:hover {
            border-color: var(--amber-dim);
        }
        .meta-card .label {
            font-size: 10px;
            color: var(--text-muted);
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin-bottom: 6px;
        }
        .meta-card .value {
            font-size: 13px;
            color: var(--amber);
            font-weight: 500;
        }
        .welcome-hint {
            color: var(--text-dim);
            font-size: 13px;
            border-left: 2px solid var(--amber-dim);
            padding-left: 14px;
            margin-top: 24px;
            line-height: 1.7;
        }
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
            margin-top: 8px;
        }
        .about-bio {
            line-height: 1.9;
            color: var(--text);
            font-size: 13.5px;
        }
        .about-bio p { margin-bottom: 14px; }
        .about-bio .hl { color: var(--amber); }
        .about-bio .comment { color: var(--text-dim); font-size: 12px; font-style: italic; }
        .stack-panel {
            background: var(--panel);
            border: 1px solid var(--border);
        }
        .stack-header {
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            color: var(--text-dim);
            letter-spacing: 0.1em;
        }
        .stack-header .dot-g {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--green);
            box-shadow: 0 0 6px var(--green);
        }
        .stack-body {
            padding: 16px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px 16px;
        }
        .stack-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 0;
            font-size: 12px;
            color: var(--text-dim);
            border-bottom: 1px solid var(--border);
            transition: color 0.15s;
        }
        .stack-item:hover { color: var(--amber); }
        .stack-item::before { content: '├──'; color: var(--border); }
        .stack-item:last-child::before { content: '└──'; }
        .projects-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 20px;
            margin-top: 8px;
        }
        .project-card {
            background: var(--panel);
            border: 1px solid var(--border);
            padding: 20px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
        }
        .project-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: var(--amber-glow2);
            opacity: 0;
            transition: opacity 0.3s;
        }
        .project-card:hover {
            border-color: var(--amber-dim);
            box-shadow: 0 0 20px rgba(255,179,0,0.06);
        }
        .project-card:hover::before { opacity: 1; }
        .project-tag {
            font-size: 10px;
            color: var(--amber-dim);
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin-bottom: 10px;
        }
        .project-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--amber);
            margin-bottom: 10px;
        }
        .project-desc {
            font-size: 12px;
            color: var(--text-dim);
            line-height: 1.7;
            margin-bottom: 16px;
        }
        .project-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid var(--border);
            padding-top: 12px;
        }
        .project-langs {
            display: flex;
            gap: 6px;
        }
        .lang-badge {
            font-size: 10px;
            padding: 2px 7px;
            border: 1px solid var(--border);
            color: var(--text-muted);
        }
        .project-link {
            color: var(--green);
            font-size: 11px;
            text-decoration: none;
            transition: color 0.15s;
            letter-spacing: 0.05em;
        }
        .project-link:hover { color: var(--amber); }
        .contact-layout {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 40px;
            margin-top: 8px;
        }
        .contact-links { }
        .contact-link-item {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 14px 0;
            border-bottom: 1px solid var(--border);
        }
        .contact-icon {
            color: var(--amber);
            font-size: 13px;
            width: 60px;
            flex-shrink: 0;
        }
        .contact-info .label {
            font-size: 10px;
            color: var(--text-muted);
            letter-spacing: 0.1em;
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .contact-info a {
            color: var(--text);
            text-decoration: none;
            font-size: 12px;
            transition: color 0.15s;
        }
        .contact-info a:hover { color: var(--amber); }
        .contact-form {
            background: var(--panel);
            border: 1px solid var(--border);
            padding: 24px;
        }
        .form-title {
            font-size: 11px;
            color: var(--text-dim);
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border);
        }
        .form-group {
            margin-bottom: 18px;
        }
        .form-group label {
            display: block;
            font-size: 11px;
            color: var(--amber-dim);
            letter-spacing: 0.1em;
            margin-bottom: 6px;
        }
        .form-group input,
        .form-group textarea {
            width: 100%;
            background: var(--bg);
            border: 1px solid var(--border);
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            color: var(--text);
            font-family: inherit;
            font-size: 13px;
            padding: 8px 4px;
            outline: none;
            transition: border-color 0.2s;
            resize: vertical;
        }
        .form-group input:focus,
        .form-group textarea:focus {
            border-bottom-color: var(--amber);
            background: rgba(255,179,0,0.02);
        }
        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: var(--text-muted);
        }
        .btn-send {
            width: 100%;
            background: transparent;
            border: 1px solid var(--amber-dim);
            color: var(--amber);
            font-family: inherit;
            font-size: 12px;
            padding: 10px;
            cursor: pointer;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }
        .btn-send::before {
            content: '';
            position: absolute;
            inset: 0;
            background: var(--amber-glow);
            opacity: 0;
            transition: opacity 0.2s;
        }
        .btn-send:hover {
            box-shadow: 0 0 20px rgba(255,179,0,0.15);
        }
        .btn-send:hover::before { opacity: 1; }
        .music-player {
            margin-top: 8px;
        }
        .now-playing {
            background: var(--panel);
            border: 1px solid var(--border);
            padding: 24px;
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .album-art {
            width: 72px;
            height: 72px;
            background: var(--bg);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            flex-shrink: 0;
            position: relative;
            overflow: hidden;
        }
        .album-art::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--amber-glow), transparent);
        }
        .np-info { flex: 1; }
        .np-status {
            font-size: 10px;
            color: var(--green);
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .np-status::before {
            content: '▶';
            font-size: 8px;
        }
        .np-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--amber);
            margin-bottom: 4px;
        }
        .np-artist {
            font-size: 12px;
            color: var(--text-dim);
        }
        .np-controls {
            display: flex;
            gap: 10px;
        }
        .ctrl-btn {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-dim);
            font-family: inherit;
            font-size: 13px;
            padding: 8px 14px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .ctrl-btn:hover {
            border-color: var(--amber);
            color: var(--amber);
            box-shadow: 0 0 10px var(--amber-glow);
        }
        .visualizer {
            display: flex;
            align-items: flex-end;
            gap: 3px;
            height: 32px;
        }
        .visualizer span {
            display: block;
            width: 3px;
            background: var(--amber);
            border-radius: 1px;
            animation: eq 0.8s ease infinite;
            opacity: 0.8;
        }
        .visualizer.paused span {
            animation-play-state: paused;
        }
        .visualizer span:nth-child(1)  { height: 40%; animation-delay: 0.0s; }
        .visualizer span:nth-child(2)  { height: 70%; animation-delay: 0.1s; }
        .visualizer span:nth-child(3)  { height: 55%; animation-delay: 0.05s; }
        .visualizer span:nth-child(4)  { height: 85%; animation-delay: 0.2s; }
        .visualizer span:nth-child(5)  { height: 45%; animation-delay: 0.15s; }
        .visualizer span:nth-child(6)  { height: 90%; animation-delay: 0.25s; }
        .visualizer span:nth-child(7)  { height: 60%; animation-delay: 0.08s; }
        .visualizer span:nth-child(8)  { height: 75%; animation-delay: 0.18s; }
        .visualizer span:nth-child(9)  { height: 50%; animation-delay: 0.12s; }
        .visualizer span:nth-child(10) { height: 65%; animation-delay: 0.22s; }
        .visualizer span:nth-child(11) { height: 40%; animation-delay: 0.07s; }
        .visualizer span:nth-child(12) { height: 80%; animation-delay: 0.17s; }
        .visualizer span:nth-child(13) { height: 55%; animation-delay: 0.03s; }
        .visualizer span:nth-child(14) { height: 70%; animation-delay: 0.13s; }
        .visualizer span:nth-child(15) { height: 45%; animation-delay: 0.09s; }
        @keyframes eq {
            0%, 100% { transform: scaleY(1); }
            50% { transform: scaleY(0.3); }
        }
        .playlist-title {
            font-size: 10px;
            color: var(--text-muted);
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin-bottom: 12px;
        }
        .playlist-links {
            display: flex;
            gap: 12px;
        }
        .playlist-link {
            background: var(--panel);
            border: 1px solid var(--border);
            padding: 12px 20px;
            text-decoration: none;
            color: var(--text-dim);
            font-size: 12px;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .playlist-link:hover {
            border-color: var(--amber-dim);
            color: var(--amber);
        }
        .statusbar {
            grid-column: 1 / -1;
            grid-row: 3;
            background: var(--amber);
            display: flex;
            align-items: center;
            padding: 0 16px;
            gap: 20px;
            overflow: hidden;
        }
        .sb-item {
            font-size: 11px;
            color: #0d0d0d;
            font-weight: 600;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
        }
        .sb-sep {
            color: rgba(0,0,0,0.3);
            font-size: 10px;
        }
        .sb-right {
            margin-left: auto;
        }
        body.light {
            --bg: #f5f2ec;
            --bg2: #ede9e0;
            --panel: #e8e4da;
            --border: #ccc5b0;
            --amber: #c17a00;
            --amber-dim: #9e6500;
            --amber-glow: rgba(193, 122, 0, 0.12);
            --amber-glow2: rgba(193, 122, 0, 0.05);
            --green: #1a7a50;
            --green-dim: #1d6b46;
            --red: #c0392b;
            --text: #1a1612;
            --text-dim: #6b5e4e;
            --text-muted: #9a8b7a;
            --cursor: #c17a00;
            --scrollbar: #ccc5b0;
        }
        .input-line {
            padding: 12px 48px;
            display: flex;
            align-items: center;
            border-top: 1px solid var(--border);
            background: var(--bg);
            flex-shrink: 0;
        }
        .input-prompt {
            white-space: nowrap;
            margin-right: 8px;
            font-size: 13px;
        }
        .input-field {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: var(--text);
            font-family: inherit;
            font-size: 13px;
            caret-color: var(--amber);
        }
        .typewriter {
            overflow: hidden;
            white-space: nowrap;
            border-right: 2px solid var(--amber);
            animation: blink 1s step-end infinite;
        }
        .typewriter.done {
            border-right: none;
            white-space: normal;
            overflow: visible;
        }
        @keyframes blink {
            50% { border-right-color: transparent; }
        }
        .cursor {
            display: inline-block;
            width: 9px;
            height: 15px;
            background: var(--amber);
            animation: blink 1s step-end infinite;
            vertical-align: middle;
            margin-left: 2px;
        }
        .hamburger {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 28px;
            height: 28px;
            background: transparent;
            border: 1px solid var(--border);
            cursor: pointer;
            padding: 4px;
            gap: 4px;
        }
        .hamburger span {
            display: block;
            width: 16px;
            height: 2px;
            background: var(--text-dim);
            transition: all 0.2s;
        }
        .hamburger:hover span {
            background: var(--amber);
        }
        .hamburger.active span:nth-child(1) {
            transform: translateY(6px) rotate(45deg);
        }
        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        .hamburger.active span:nth-child(3) {
            transform: translateY(-6px) rotate(-45deg);
        }
        .mobile-nav-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            z-index: 999;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .mobile-nav-overlay.active {
            display: block;
            opacity: 1;
        }
        .mobile-nav {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 260px;
            height: 100vh;
            background: var(--panel);
            border-right: 1px solid var(--border);
            z-index: 1000;
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            flex-direction: column;
            overflow-y: auto;
        }
        .mobile-nav.active {
            display: flex;
            transform: translateX(0);
        }
        .mobile-nav-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
        }
        .mobile-nav-title {
            font-size: 12px;
            color: var(--amber);
            font-weight: 600;
        }
        .mobile-nav-close {
            background: transparent;
            border: none;
            color: var(--text-dim);
            font-size: 24px;
            cursor: pointer;
            line-height: 1;
            padding: 0;
            transition: color 0.2s;
        }
        .mobile-nav-close:hover {
            color: var(--amber);
        }
        .mobile-nav-section {
            padding: 16px 0 8px;
        }
        .mobile-nav-divider {
            height: 1px;
            background: var(--border);
            margin: 4px 0;
        }
        .mobile-nav-footer {
            margin-top: auto;
            padding: 14px 16px;
            border-top: 1px solid var(--border);
        }
        .mobile-nav .nav-item {
            border-left: none;
            border-bottom: none;
        }
        .mobile-nav .nav-item:hover,
        .mobile-nav .nav-item.active {
            border-left-color: var(--amber);
            border-bottom-color: transparent;
            background: var(--amber-glow2);
        }

        @media (max-width: 900px) {
            .welcome-meta { grid-template-columns: 1fr 1fr; }
            .about-grid { grid-template-columns: 1fr; }
            .stack-body { grid-template-columns: 1fr; }
            .projects-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
            .contact-layout { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            .os-shell {
                grid-template-columns: 1fr;
                grid-template-rows: 40px 1fr auto 32px;
            }
            .topbar {
                padding: 0 12px;
                gap: 8px;
            }
            .topbar-dots {
                gap: 6px;
            }
            .dot {
                width: 11px;
                height: 11px;
            }
            .topbar-title {
                font-size: 10px;
                display: none;
            }
            .topbar-right {
                gap: 10px;
            }
            .topbar-clock {
                font-size: 10px;
            }
            .theme-btn {
                font-size: 9px;
                padding: 2px 6px;
            }
            .hamburger {
                display: flex;
            }
            .sidebar {
                display: none;
            }
            .main {
                grid-column: 1;
                grid-row: 2;
            }
            .statusbar {
                grid-row: 4;
                flex-wrap: wrap;
                gap: 8px;
                padding: 0 12px;
                min-height: 32px;
            }
            .sb-item {
                font-size: 9px;
            }
            .tab-bar {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .tab {
                padding: 6px 14px;
                font-size: 11px;
            }
            .term-section { padding: 20px 20px; }
            .welcome-section { padding: 20px 20px; }
            .welcome-ascii {
                font-size: 7px;
                overflow-x: auto;
            }
            .welcome-meta {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            .welcome-text { font-size: 13px; }
            .prompt-line { font-size: 11px; margin-bottom: 16px; }
            .input-line {
                padding: 10px 20px;
            }
            .input-prompt { font-size: 11px; }
            .input-field { font-size: 12px; }
            .contact-layout { grid-template-columns: 1fr; }
            .contact-form { padding: 16px; }
            .projects-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            .now-playing {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
                padding: 16px;
            }
            .visualizer { display: none; }
            .playlist-links { flex-wrap: wrap; }
            .playlist-link { padding: 10px 14px; font-size: 11px; }
            .proj-header-row { flex-direction: column; align-items: flex-start; gap: 12px; }
            .proj-detail-title { font-size: 22px; }
            .proj-image-placeholder { height: 200px; font-size: 11px; }
            .article-img-right, .article-img-left {
                float: none;
                width: 100%;
                margin: 16px 0;
                height: auto;
                min-height: 160px;
            }
            .article-img-full { height: 180px; }
            .article-layout h1 { font-size: 22px; }
            .article-layout h2 { font-size: 18px; }
            .article-layout p { font-size: 13px; }
        }

        @media (max-width: 480px) {
            html, body { font-size: 13px; }
            .os-shell {
                grid-template-rows: 40px 1fr auto 28px;
            }
            .term-section { padding: 16px 16px; }
            .welcome-section { padding: 16px 16px; }
            .welcome-ascii {
                font-size: 5px;
            }
            .welcome-meta {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            .meta-card { padding: 12px; }
            .meta-card .value { font-size: 12px; }
            .about-bio { font-size: 12.5px; }
            .about-bio p { margin-bottom: 10px; }
            .stack-body { padding: 12px; }
            .stack-item { font-size: 11px; }
            .project-card { padding: 14px; }
            .project-name { font-size: 13px; }
            .project-desc { font-size: 11px; }
            .welcome-hint { font-size: 12px; padding-left: 10px; }
            .contact-link-item { padding: 10px 0; }
            .contact-icon { width: 50px; font-size: 11px; }
            .sb-item { font-size: 8px; }
            .sb-sep { font-size: 8px; }
            .np-title { font-size: 14px; }
            .np-artist { font-size: 11px; }
            .article-layout h1 { font-size: 20px; }
            .article-layout p { font-size: 12px; }
            .article-layout ul, .article-layout ol { font-size: 12px; }
        }
        .project-card {
            transition: all 0.2s;
        }
        .project-card:hover {
            border-color: var(--amber);
            transform: translateY(-2px);
        }
        .proj-back-btn {
            display: inline-block;
            color: var(--text-dim);
            cursor: pointer;
            font-size: 13px;
            margin-bottom: 32px;
            text-decoration: none;
            transition: color 0.2s;
        }
        .proj-back-btn:hover {
            color: var(--amber);
        }
        .proj-header-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: 16px;
        }
        .proj-detail-title {
            color: var(--amber);
            font-size: 28px;
            font-weight: 700;
            margin: 0;
            letter-spacing: -0.5px;
        }
        .proj-source-btn {
            color: var(--amber);
            text-decoration: none;
            border: 1px dashed var(--amber);
            padding: 6px 14px;
            font-size: 13px;
            font-family: 'Fira Code', monospace;
            transition: background 0.2s, color 0.2s;
        }
        .proj-source-btn:hover {
            background: rgba(255, 202, 40, 0.1);
            color: var(--amber);
        }
        .proj-detail-meta {
            display: flex;
            gap: 12px;
            margin-bottom: 32px;
            padding-bottom: 24px;
            border-bottom: 1px dashed var(--border);
        }
        .proj-detail-content {
            max-width: 800px;
        }
        .proj-detail-text {
            color: var(--text);
            line-height: 1.8;
            font-size: 15px;
            margin-bottom: 32px;
        }
        .proj-image-placeholder {
            width: 100%;
            height: 360px;
            border: 1px dashed var(--text-muted);
            background: rgba(255, 202, 40, 0.03);
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--text-muted);
            font-family: 'Fira Code', monospace;
            font-size: 13px;
            margin-bottom: 40px;
            transition: all 0.2s;
        }
        .proj-image-placeholder:hover {
            border-color: var(--amber);
            color: var(--amber);
            background: rgba(255, 202, 40, 0.08);
        }
        @keyframes floatSaturn {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        /* --- Article View Styles for Long Case Studies --- */
        .article-layout {
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            line-height: 1.8;
            color: var(--text);
            padding: 10px 0;
            max-width: 900px;
        }
        
        .article-layout h1 {
            font-size: 28px;
            color: var(--amber);
            margin: 40px 0 20px;
            border-bottom: 1px dashed var(--border);
            padding-bottom: 10px;
        }
        
        .article-layout h1:first-child { margin-top: 0; }
        
        .article-layout h2 {
            font-size: 20px;
            color: var(--green);
            margin: 32px 0 16px;
        }
        
        .article-layout h3 {
            font-size: 16px;
            color: var(--amber-dim);
            margin: 24px 0 12px;
        }
        
        .article-layout p {
            margin-bottom: 20px;
            font-size: 14px;
            color: var(--text-dim);
        }
        
        .article-layout ul, .article-layout ol {
            margin: 0 0 20px 20px;
            color: var(--text-dim);
            font-size: 14px;
        }
        
        .article-layout li {
            margin-bottom: 8px;
        }
        
        .article-layout li::marker { color: var(--amber); }
        
        .article-img-right {
            float: right;
            margin: 0 0 24px 32px;
            width: 320px;
            height: 220px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px dashed var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            color: var(--text-muted);
            font-size: 12px;
            border-radius: 4px;
        }
        
        .article-img-left {
            float: left;
            margin: 0 32px 24px 0;
            width: 320px;
            height: 220px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px dashed var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            color: var(--text-muted);
            font-size: 12px;
            border-radius: 4px;
        }
        
        .article-img-full {
            width: 100%;
            height: 280px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px dashed var(--border);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 20px;
            color: var(--text-muted);
            font-size: 12px;
            margin: 32px 0;
            clear: both;
            border-radius: 4px;
        }
        
        .article-layout .clear-float {
            clear: both;
        }
        
        .article-table {
            width: 100%;
            border-collapse: collapse;
            margin: 24px 0;
            font-size: 13px;
            background: var(--panel);
        }
        
        .article-table th, .article-table td {
            border: 1px solid var(--border);
            padding: 12px;
            text-align: left;
            color: var(--text-dim);
        }
        
        .article-table th {
            background: rgba(255, 179, 0, 0.05);
            color: var(--amber);
            font-weight: 600;
        }
        
        .article-table tr:hover {
            background: rgba(255, 255, 255, 0.02);
        }