/* Basis-Layout (neutral, responsive) */
  :root {
    /* Für 100×100: Zelle = kleinste Kante / 100 (mit etwas Puffer) */
    --gap: 0px; /* kein Abstand zwischen Zellen -> besseres Bild */
    --cell-size: min(
        calc((100vh - 24px) / 100),
        calc((100vw - 24px) / 100)
    );
    --border: #e5e7eb;
    --bg: #0b0c0f;
    --panel: #111318;
    --text: #e7e9ee;
    --muted: #9aa3b2;
    --accent: #3b82f6;
}

        * { box-sizing: border-box; }
        html, body { height: 100%; margin: 0; }
        body {
            font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
            background: radial-gradient(1200px 600px at 70% -10%, #111318 0%, #0b0c0f 40%, #090a0d 100%);
            color: var(--text);
            line-height: 1.45;
        }

        /* Container darf volle Breite nutzen */
        .container {
            max-width: 100vw; /* vorher 1024px */
            margin: 0 auto;
            padding: 12px; /* kompakter, damit Zellen größer werden */
        }

        header {
            text-align: center;
            margin-bottom: 24px;
        }

        h1 {
            font-size: clamp(22px, 3.4vw, 34px);
            margin: 0 0 8px;
            letter-spacing: -0.01em;
        }

        .subtitle {
            color: var(--muted);
            font-size: 15px;
        }

        .panel {
            background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px;
            padding: 16px;
            margin: 20px 0 28px;
            backdrop-filter: blur(6px);
        }

        form {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 12px;
            align-items: start;
        }

        textarea {
            width: 100%;
            min-height: 84px;
            resize: vertical;
            padding: 12px 12px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.08);
            background: #0e1116;
            color: var(--text);
            font-size: 15px;
            outline: none;
        }
        textarea::placeholder { color: var(--muted); }

        button {
            height: 42px;
            padding: 0 16px;
            border-radius: 10px;
            border: 1px solid rgba(255,255,255,0.08);
            background: linear-gradient(180deg, #1f6feb, #3166e6);
            color: #fff;
            font-weight: 600;
            cursor: pointer;
        }
        button:disabled {
            opacity: .6;
            cursor: not-allowed;
        }

        .legend {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            font-size: 13px;
            color: var(--muted);
            margin-top: 8px;
        }
        .legend .chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.08);
            background: #0e1116;
        }
        .legend .dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.15);
        }

        .grid-wrap {
            display: grid;
            place-items: center;
            margin-top: 10px;
        }

        /* Grid auf 100×100 umstellen, keine Schatten/Borders */
        .grid {
            display: grid;
            grid-template-columns: repeat(100, var(--cell-size));
            grid-template-rows: repeat(100, var(--cell-size));
            gap: var(--gap);
            padding: 0;
            background: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: none;
        }

        /* Zellen ohne Radius/Borders -> sauberes Pixelbild */
        .cell {
            width: var(--cell-size);
            height: var(--cell-size);
            border-radius: 0;
            border: 0;
            background: #111318; /* Fallback */
        }

        .status {
            margin-top: 12px;
            font-size: 14px;
            color: var(--muted);
        }

        .error {
            color: #ff8a8a;
        }

        footer {
            margin-top: 36px;
            text-align: center;
            color: var(--muted);
            font-size: 13px;
        }

        @media (max-width: 520px) {
            :root { --gap: 3px; }
        }
        /* Optional: Kopfbereich etwas kompakter für mehr Platz */
        header { margin-bottom: 12px; }