.network-container {
            background: white;
            border: 2px solid #ddd;
            border-radius: 0;
            padding: 2px;
            min-height: 590px;
            position: relative;
            overflow: visible;
        }

        .network-node {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 2px dotted #333;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 10px;
            cursor: pointer;
            transition: all 0.2s ease;
            background:
                linear-gradient(0deg, #e0e0e0 1px, transparent 1px),
                linear-gradient(90deg, #e0e0e0 1px, transparent 1px),
                white;
            background-size: 10px 10px;
            background-position: center center;
            font-family: monospace;
            z-index: 10;
            padding: 2px;
            overflow: hidden;
        }

        .network-node:hover {
            transform: scale(1.1);
            border-width: 2px;
        }

        .network-node.input {
            color: #1976d2;
            background: white;
            border-color: #1976d2 !important;
        }

        .network-node.hidden {
            color: #7b1fa2;
            border-color: #7b1fa2 !important;
        }

        .network-node.output {
            color: #388e3c;
            background: white;
            border-color: #ff9800 !important;
        }

        .network-edge {
            position: absolute;
            height: 3px;
            background: #666;
            transform-origin: left center;
            pointer-events: auto;
            opacity: 1;
            transition: opacity 0.2s ease, background-color 0.2s ease, height 0.2s ease;
            z-index: 1;
            cursor: pointer;
        }

        .network-edge:hover {
            height: 5px;
            z-index: 3;
        }

        .weight-label {
            position: absolute;
            font-size: 11px;
            font-weight: bold;
            font-family: monospace;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid #ccc;
            border-radius: 0;
            padding: 3px 5px;
            color: #333;
            pointer-events: none;
            z-index: 15;
            max-width: 80px;
            text-align: center;
        }

        .gradient-label {
            position: absolute;
            font-size: 10px;
            font-weight: bold;
            font-family: monospace;
            background: rgba(255, 248, 220, 0.95);
            border: 1px solid #ffa500;
            border-radius: 0;
            padding: 2px 4px;
            color: #ff6600;
            pointer-events: none;
            z-index: 15;
            max-width: 100px;
            text-align: center;
        }

        .network-layer-label-vertical {
            position: absolute;
            font-weight: bold;
            color: #666;
            font-size: 13px;
            text-align: center;
            white-space: nowrap;
            transform: rotate(-90deg);
            transform-origin: center center;
            pointer-events: none;
        }

        .activation-icon {
            width: 80%;
            height: 28px;
            position: relative;
            background: transparent;
            border-radius: 3px;
            padding: 3px;
            margin: 0 auto;
        }

        .activation-icon svg {
            width: 100%;
            height: 100%;
        }

        .node-output-label {
            position: absolute;
            font-size: 11px;
            font-weight: bold;
            font-family: monospace;
            color: #333;
            pointer-events: none;
            text-align: center;
            z-index: 5;
            background: white;
            border: 1px solid #ddd;
            padding: 2px 0;
            border-radius: 3px;
            width: 60px;
        }

        .loss-display {
            background: #f8f9fa;
            border: 2px solid #dee2e6;
            border-radius: 0;
            padding: 15px;
            margin-bottom: 20px;
            text-align: center;
        }

        .loss-value {
            font-size: 24px;
            font-weight: bold;
            color: #dc3545;
            font-family: monospace;
        }

        .step-info {
            font-size: 16px;
            color: #6c757d;
            margin-top: 5px;
        }

        .input-controls {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 20px;
        }

        .input-group {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .input-group label {
            width: 100px;
            font-weight: bold;
        }

        .optimization-controls {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 0;
            margin-bottom: 20px;
        }

        /* Button styles using phoebe.css conventions */
        .auto-btn {
            padding: 10px 15px;
            font-size: 14px;
            font-weight: bold;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background: #28a745;
            color: white;
            transition: background 0.2s ease;
        }

        .auto-btn:hover {
            background: #218838;
        }

        .auto-btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }

        .loss-graph {
            background: white;
            border: 2px solid #ddd;
            border-radius: 0;
            padding: 15px;
            height: 100%;
            position: relative;
        }

        .graph-title {
            text-align: center;
            font-weight: bold;
            margin-bottom: 15px;
            color: #666;
        }


        .right-panel-tables {
            margin-top: 15px;
        }

        .right-panel-tables h3 {
            color: #495057;
            margin-bottom: 10px;
            text-align: center;
            font-size: 16px;
        }

        .gradients-table {
            margin-top: 15px;
        }

        .weights-table, .gradients-table {
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 0;
            padding: 12px;
        }

        .weights-table h4, .gradients-table h4 {
            margin: 0 0 10px 0;
            text-align: center;
            color: #495057;
            font-size: 14px;
        }

        .table-content {
            font-family: monospace;
            font-size: 11px;
            line-height: 1.4;
        }

        .layer-section {
            margin-bottom: 20px;
            border: 1px solid #e9ecef;
            border-radius: 0;
            padding: 10px;
        }

        .layer-title {
            font-weight: bold;
            color: #495057;
            margin-bottom: 8px;
            font-size: 12px;
        }

        .connection-row {
            display: flex;
            justify-content: space-between;
            padding: 2px 5px;
            border-radius: 0;
            margin-bottom: 2px;
        }

        .connection-row:nth-child(even) {
            background: #f8f9fa;
        }

        .connection-label {
            color: #6c757d;
        }

        .connection-value {
            font-weight: bold;
        }

        .positive-value {
            color: #28a745;
        }

        .negative-value {
            color: #dc3545;
        }


        .weights-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 8px;
            margin-bottom: 10px;
        }

        .column-header {
            font-weight: bold;
            color: #495057;
            padding: 4px;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            font-size: 13px;
            border-radius: 0;
            text-align: center;
        }

        .column-data {
            padding: 4px;
            border: 1px solid #e9ecef;
            border-radius: 0;
            background: white;
        }

        .weight-row, .gradient-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 5px;
            margin-bottom: 1px;
            font-size: 15px;
            transition: background-color 0.2s ease, border-left 0.2s ease, transform 0.2s ease;
        }

        .weight-row:nth-child(even), .gradient-row:nth-child(even) {
            background: #f8f9fa;
        }

        .weight-row:hover, .gradient-row:hover {
            background: #e3f2fd !important;
            border-left: 3px solid #1976d2;
            border-radius: 0;
            font-weight: bold;
        }

        .weight-row:hover .connection-value,
        .gradient-row:hover .connection-value {
            font-weight: bold;
            transform: scale(1.05);
        }

        @media (prefers-reduced-motion: reduce) {
            .step-btn,
            .reset-btn,
            .weight-row,
            .gradient-row {
                transition: none;
            }

            .step-btn:hover:not(:disabled),
            .reset-btn:hover,
            .weight-row:hover,
            .gradient-row:hover,
            .weight-row:hover .connection-value,
            .gradient-row:hover .connection-value {
                transform: none;
            }
        }

        .edge-tooltip {
            position: absolute;
            background: white;
            border: 2px solid #333;
            border-radius: 4px;
            padding: 8px 12px;
            font-size: 12px;
            font-family: monospace;
            z-index: 1000;
            display: none;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }

        .edge-tooltip div {
            margin: 2px 0;
        }

        .node-tooltip {
            position: absolute;
            background: white;
            border: 2px solid #333;
            border-radius: 4px;
            padding: 10px 14px;
            font-size: 12px;
            font-family: monospace;
            z-index: 1000;
            display: none;
            pointer-events: none;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            max-width: 300px;
        }

        .node-tooltip div {
            line-height: 1.4;
        }