/* Page-specific styles extracted from pixel.html. */

.subsystem-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 16px;
        }

        .subsystem-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }

        .subsystem-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--purple), var(--cyan));
            opacity: 0.7;
        }

        .subsystem-icon {
            font-size: 22px;
            margin-bottom: 8px;
        }

        .subsystem-title {
            font-family: var(--font-head);
            font-size: 11px;
            letter-spacing: 2px;
            color: var(--white);
            text-transform: uppercase;
            margin-bottom: 12px;
        }

        .subsystem-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .subsystem-list li {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.5;
            padding-left: 12px;
            position: relative;
        }

        .subsystem-list li::before {
            content: '›';
            position: absolute;
            left: 0;
            color: var(--purple);
        }

        .subsystem-list li strong {
            color: var(--text-main);
            font-weight: normal;
        }

        .flow-block {
            background: #08080d;
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }

        .flow-label {
            font-family: var(--font-head);
            font-size: 9px;
            letter-spacing: 2px;
            color: var(--text-muted);
            padding: 10px 16px;
            border-bottom: 1px solid var(--border);
            background: #0D0D12;
        }

        .flow-body {
            font-family: monospace;
            font-size: 11px;
            color: var(--text-muted);
            line-height: 2;
            padding: 20px 24px;
        }

        .flow-body .hl  { color: var(--cyan); }
        .flow-body .hlp { color: var(--purple); }
        .flow-body .hlg { color: #00ff88; }

        .screens-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }

        .screens-table th {
            font-family: var(--font-head);
            font-size: 9px;
            letter-spacing: 1px;
            color: var(--text-muted);
            text-transform: uppercase;
            padding: 8px 14px;
            border-bottom: 1px solid var(--border);
            text-align: left;
        }

        .screens-table td {
            padding: 8px 14px;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            color: var(--text-muted);
        }

        .screens-table tr:last-child td { border-bottom: none; }

        .screens-table .screen-name {
            color: var(--cyan);
            font-family: var(--font-head);
            font-size: 10px;
            letter-spacing: 1px;
            white-space: nowrap;
        }

        .design-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1px;
            background: var(--border);
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }

        .design-item {
            background: var(--bg-card);
            padding: 18px;
        }

        .design-title {
            font-family: var(--font-head);
            font-size: 10px;
            letter-spacing: 1px;
            color: var(--white);
            text-transform: uppercase;
            margin-bottom: 6px;
        }

        .design-desc {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.6;
        }