.optaziano-container {
            font-family: 'Georgia', serif;
            max-width: 1000px;
            margin: 30px auto;
            padding: 20px;
            background-color: #f9f7f0;
            color: #333;
        }
        .optaziano-container h1 {
            text-align: center;
            color: #8b4513;
            margin-bottom: 10px;
            font-size: 28px;
        }
        .optaziano-container h2 {
            text-align: center;
            color: #a0522d;
            margin-bottom: 30px;
            font-size: 18px;
            font-style: italic;
        }
        .paradigma-box {
            background: #ffe4b5;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
            border-left: 4px solid #8b4513;
        }
        .paradigma-box h3 {
            margin-top: 0;
            color: #8b4513;
        }
        .verse-line {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 8px;
            font-style: italic;
        }
        .controls-box {
            background: white;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        .control-group {
            margin-bottom: 20px;
        }
        .control-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #8b4513;
        }
        .control-group input[type="number"] {
            width: 100px;
            padding: 8px;
            font-size: 16px;
            border: 2px solid #8b4513;
            border-radius: 4px;
        }
        .control-group input[type="checkbox"],
        .control-group input[type="radio"] {
            cursor: pointer;
            margin-right: 8px;
        }
        .radio-group {
            margin-left: 10px;
        }
        .radio-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: normal;
        }
        .naturalness-controls {
            margin-left: 25px;
            margin-top: 10px;
        }
        .button-group {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 20px;
        }
        .btn {
            background-color: #8b4513;
            color: white;
            padding: 12px 24px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .btn:hover {
            background-color: #a0522d;
        }
        .btn-secondary {
            background-color: #d2691e;
        }
        .btn-secondary:hover {
            background-color: #cd853f;
        }
        .output-box {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            min-height: 100px;
        }
        .generated-verse {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 15px;
            font-style: italic;
            border-left: 3px solid #8b4513;
            padding-left: 15px;
        }
        .verse-schema {
            font-size: 12px;
            color: #666;
            font-style: normal;
            margin-top: 5px;
        }
        .word-origin {
            display: inline-block;
            padding: 2px 6px;
            margin: 0 2px;
            border-radius: 3px;
            font-size: 11px;
        }
        .from-v1 { background-color: #ffebee; }
        .from-v2 { background-color: #e3f2fd; }
        .from-v3 { background-color: #e8f5e9; }
        .from-v4 { background-color: #fff3e0; }
        .lacuna-box {
            background: #fff9c4;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
            border-left: 4px solid #f57c00;
        }
        .lacuna-verse {
            margin-bottom: 20px;
            padding: 15px;
            background: white;
            border-radius: 4px;
        }
        .lacuna-text {
            font-style: italic;
            color: #d32f2f;
            margin-bottom: 10px;
        }
        .lacuna-solutions {
            margin-top: 10px;
            font-size: 14px;
        }
        .lacuna-solution {
            padding: 8px;
            margin: 5px 0;
            background: #f5f5f5;
            border-left: 3px solid #4caf50;
            border-radius: 3px;
            cursor: pointer;
        }
        .lacuna-solution:hover {
            background: #e8f5e9;
        }
        .stats-box {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="optaziano-container">
        <h1>🏛️ Un'Edizione Dinamica di Optaziano 🏛️</h1>
        <h2>Generatore di Versi Combinatori</h2>
        
        <div class="paradigma-box">
            <h3>I Quattro Versi Paradigma:</h3>
            <div class="verse-line">ardua componunt felices carmina Musae</div>
            <div class="verse-line">dissona conectunt diuersis uincula metris</div>
            <div class="verse-line">scrupea pangentes torquentes pectora uatis</div>
            <div class="verse-line">undique confusis constabunt singula uerbis</div>
        </div>

        <div class="controls-box">
            <div class="control-group">
                <label>Modalità di Generazione:</label>
                <div class="radio-group">
                    <label>
                        <input type="radio" name="mode" value="attestati" checked>
                        Solo versi attestati (gli 80 versi del testo: 4 paradigma + 76 generati)
                    </label>
                    <label>
                        <input type="radio" name="mode" value="nuovi">
                        Genera nuovi versi con vincoli (14.336 combinazioni teoriche possibili)
                    </label>
                </div>
                <div style="font-size: 13px; color: #666; margin-top: 8px; margin-left: 10px;">
                    <strong>Nota:</strong> Entrambe le modalità rispettano le stesse regole (pos5 fissa, pos1/4 da pos1/4, pos2/3 da pos2/3, nessuna ripetizione consecutiva). 
                    La differenza è che "attestati" usa solo i versi scritti da Optaziano, mentre "nuovi" genera combinazioni inedite.
                    <br><strong>Curiosità:</strong> Lo scolio tardo promette 72 versi generabili, ma il testo ne contiene 80 (4 paradigma + 76 generati).
                </div>
            </div>