#canvas-wrapper {
        background: radial-gradient(circle at 50% 40%, #1a1f2e 0%, #0b0c10 70%);
        position: relative;
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }
    #c { width: 100%; height: 100%; display: block; cursor: grab; }
    #c:active { cursor: grabbing; }
    .panel {
        padding: 48px 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow-y: auto;
        background-image: url("/img/fds.png");
    }
    h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.5px; }
    .sub { font-size: 13px; color: #7a7a7a; margin: 6px 0 40px; }
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .cell {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.07);
        border-radius: 10px;
        padding: 14px 16px;
    }
    .k { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #7a7a7a; }
    .v { font-size: 15px; font-weight: 600; margin-top: 6px; }
    .section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: #7a7a7a; margin: 36px 0 12px; }
    .quads { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .quad { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 10px; text-align: center; font-size: 12px; }
    .hint { font-size: 11px; color: #555; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.05); line-height: 1.6; }
    @media (max-width: 900px) {
        #canvas-wrapper { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
        .panel { padding: 28px; }
    }