.description {
            max-width: 1200px;
            margin: 0 auto;
        }

        h2 { 
            color: #333; 
            margin-bottom: 10px;
            text-align: center;
        }

        h3 { 
            margin: 0 0 5px 0; 
            font-size: 14px; 
            color: #666; 
            text-transform: uppercase; 
            letter-spacing: 1px; 
            text-align: left;
        }

        .main-layout { 
            display: flex; 
            flex-direction: row; 
            gap: 20px; 
            max-width: 1200px; 
            margin: 0 auto; 
            height: 800px; 
            box-sizing: border-box;
            padding-bottom: 10px;
        }
        
        .left-col { 
            flex: 2.5; 
            display: flex;
            flex-direction: column;
            height: 100%; 
        }

        .right-col { 
            flex: 0.8; 
            display: flex;
            flex-direction: column;
            height: 100%; 
            gap: 15px; 
        }

        .game-container { 
            background: white; 
            border: 1px solid #ddd; 
            border-radius: 8px; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
            padding: 5px; 
            box-sizing: border-box; 
            display: flex;
            align-items: center; 
            justify-content: center;
            overflow: hidden;
            position: relative;
            width: 100%;
            transition: all 0.3s ease;
        }

        .large-interactive {
            flex: 1; 
            min-height: 0; 
        }

        .small-graph-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        .small-graph {
            flex: 1; 
            width: 100%;
        }

        .label-overlay {
            position: absolute;
            top: 5px;
            left: 10px;
            font-size: 12px;
            font-weight: bold;
            color: #888;
            background: rgba(255,255,255,0.95);
            padding: 4px 8px;
            border-radius: 4px;
            pointer-events: none;
            border: 1px solid #eee;
            z-index: 10;
            transition: color 0.3s ease;
        }

        svg { display: block; width: 100%; height: 100%; user-select: none; }

        /* FASG Styles */
        .edge { stroke: #666666; stroke-width: 1.5px; fill: none; }
        .edge-blue { stroke: #0044ff; stroke-width: 2.5px; fill: none; }
        .edge-blue-bold { stroke: #0044ff; stroke-width: 5px; fill: none; }
        .node-circle { cursor: pointer; stroke: #333; stroke-width: 2px; transition: all 0.2s ease; }
        .node-heavy { stroke-width: 5px; stroke: #000; }
        .node-heavy:hover { stroke-width: 7px; }
        .node-light { stroke-width: 3px; stroke: #000; }
        .node-light:hover { stroke-width: 4.5px; }
        .node-circle:not(.node-heavy):not(.node-light):hover { stroke-width: 4px; }
        .node-text { font-size: 14px; font-weight: bold; fill: #fff; pointer-events: none; text-shadow: 0 0 3px rgba(0,0,0,0.7); }
        .selected { stroke: #000; stroke-width: 4px; stroke-dasharray: 4 2; }
        .gadget-bg { fill: #f9f9f9; stroke: #e0e0e0; stroke-width: 1px; }
        .gadget-label { font-family: 'Times New Roman', serif; font-style: italic; font-size: 20px; fill: #999; font-weight: bold; pointer-events: none; }

        /* NCL Styles */
        .ncl-node { fill: #fff; stroke: #000; stroke-width: 2px; }
        .ncl-text { font-size: 18px; font-weight: bold; font-family: 'Times New Roman', serif; fill: #000; pointer-events: none; }
        .ncl-label { font-size: 14px; font-weight: bold; font-style: italic; fill: #000; }
        .ncl-edge-base { fill: none; transition: stroke 0.3s ease; }

        /* --- INFO BOX --- */
        #info { 
            margin-top: 10px; 
            font-size: 16px; 
            font-weight: bold; 
            color: #444; 
            height: 25px; 
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* --- LEFT LEGEND (Swap Graph) --- */
        .legend-container {
            margin-top: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #fff;
            padding: 8px;
            border-radius: 8px;
            border: 1px solid #eee;
        }
        .legend-title { font-size: 12px; color: #777; margin-bottom: 5px; font-weight: bold; text-transform: uppercase; }
        .swap-chain { display: flex; align-items: center; }
        .swap-node {
            width: 25px; height: 25px; border-radius: 50%; border: 2px solid #333;
            color: white; font-weight: bold; font-size: 14px;
            display: flex; align-items: center; justify-content: center;
            text-shadow: 0 0 2px rgba(0,0,0,0.8); position: relative; z-index: 2;
        }
        .swap-line {
            width: 30px; height: 3px; background-color: #555; margin: 0 -2px; z-index: 1;
        }

        /* --- RIGHT LEGEND (NCL Status) --- */
        .ncl-legend {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 5px;
            font-size: 11px;
            font-weight: 600;
            color: #666;
            background: #f9f9f9;
            padding: 4px 10px;
            border-radius: 4px;
            border: 1px solid #eee;
        }
        .ncl-legend-item { display: flex; align-items: center; gap: 5px; }
        .ncl-dot { min-width: 10px; min-height: 10px; border-radius: 50%; display: inline-block; }
        
        @media (max-width: 1000px) {
            .main-layout { flex-wrap: wrap; height: auto; }
            .left-col, .right-col { flex: 100%; width: 100%; height: auto; }
            .large-interactive { height: 600px; }
            .right-col { height: auto; }
            .small-graph-wrapper { height: 250px; }
        }