/* Font Inter, który pasuje do stylu Tailwind CSS*/
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6;
            min-height: 100vh; 
            display: flex;
            flex-direction: column;
        }
        
        /* GŁÓWNY KONTENER: Ograniczona i wyśrodkowana szerokość */
        .main-container {
            max-width: 1280px; /* STAŁA MAX SZEROKOŚĆ */
            margin: 0 auto;
            width: 100%;
            padding: 5px 10px; 
            display: flex;
            flex-direction: column;
            flex-grow: 1; 
        }
        
        /* Styl dla pełnego ekranu */
        .main-container:fullscreen {
            max-width: 100%;
            width: 100%;
            height: 100vh;
            padding: 0;
            background-color: #f3f4f6;
        }
        .main-container:-webkit-full-screen {
            max-width: 100%;
            width: 100%;
            height: 100vh;
            padding: 0;
            background-color: #f3f4f6;
        }

        /* SEKCJA GÓRNA: Dzieli się na 3 kolumny (Lewa-Środek-Prawa) */
        .top-section {
            display: flex;
            gap: 10px; 
            flex-grow: 1; 
            margin-bottom: 5px; 
            flex-direction: column; 
            align-items: stretch; 
        }
        @media (min-width: 1024px) { /* breakpoint lg */
            .top-section {
                flex-direction: row;
                align-items: stretch;
            }
        }

        /* Panele boczne (Lewy i Prawy): Stała szerokość na dużych ekranach */
        .side-panel {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
            flex-shrink: 0;
            width: 100%;
            padding: 0; 
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        /* WEWNĘTRZNY KONTENER NA TREŚĆ (zapewnia padding) */
        .side-panel-content {
            padding: 12px; 
            padding-top: 20px; 
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        @media (min-width: 1024px) {
            .side-panel {
                width: 230px; 
            }
        }
        
        /* PANEL CENTRALNY (Obrazek) - KOREKTA: ZWIĘKSZENIE GÓRNEGO PADDINGU */
        .center-image-panel {
            background-color: #ffffff;
            border-radius: 10px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
            padding: 8px; 
            padding-top: 20px; /* ZWIĘKSZONY padding-top, aby zrobić miejsce na tytuł */
            flex-grow: 1; 
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center; 
        }

        /* Styl dla obrazka */
        #key-image {
            max-width: 90%; 
            max-height: 60vh; 
            height: auto;
            object-fit: contain; 
            border-radius: 6px; 
            margin-bottom: 5px; 
            transition: opacity 0.3s;
        }

        /* Styl dla elementu wyświetlającego opis */
        #constellation-description {
            text-align: center;
            font-size: 1.2em; 
            font-weight: 700;
            color: #333;
            max-width: 100%;
            line-height: 1.4;
            min-height: 25px; 
            padding-bottom: 5px;
        }

        /* Styl dla sekcji Canvas (klawiatury) - WYŚRODKOWANIE I DOPASOWANIE SZEROKOŚCI */
        #piano-container {
            width: 100%;
            max-width: calc(1280px - 20px); 
            margin-left: auto;
            margin-right: auto;
            height: 130px; 
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
            border-radius: 10px; 
            overflow: hidden; 
            background-color: #ddd;
            flex-shrink: 0; 
            margin-top: 5px; 
        }
        
        @media (min-width: 1024px) {
             #piano-container {
                max-width: calc(100% - 20px); 
            }
        }


        canvas {
            display: block;
            width: 100%;
            height: 100%;
        }

        /* Dodatkowy styl dla elementów muzycznych/kontrolnych */
        .data-block {
            padding: 10px 0; 
            border-bottom: 1px solid #eee;
        }
        .data-block:last-child {
            border-bottom: none;
        }
        
        /* Minimalistyczny przycisk pełnego ekranu */
        .fullscreen-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 15px;
            padding: 8px 12px;
            background-color: #f9fafb; 
            color: #6b7280; 
            border: 1px solid #e5e7eb; 
            border-radius: 6px;
            font-weight: 600;
            transition: all 0.2s ease;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            cursor: pointer;
        }
        .fullscreen-btn:hover {
            background-color: #ede9fe; 
            color: #8b5cf6; 
            border-color: #8b5cf6;
            box-shadow: 0 4px 8px rgba(139, 92, 246, 0.2);
        }

        .text-6xl { font-size: 4rem; } 
        .text-xl { font-size: 1.25rem; } 
        .text-2xl { font-size: 3rem; }