trasforma tutte queste fonti in un sito web con molteplici pagine di anatomia e biomeccanica con parti del corpo inerenti agli appunti da studiare, in 3d con la possibilità di rotearli e con info puntati su ognuna di queste parti, fallo anche per la parte di allenamento e con i vari collegamenti tra esercizio e muscoli coinvolti: Calisthenics

Il Calisthenics affonda le sue radici nell’antica Grecia, dove veniva praticato dai guerrieri spartani come forma di allenamento fisico e mentale. Il termine deriva dalle parole greche kalós (bello) e sthénos (forza), a indicare l’armonia tra potenza, controllo e bellezza del corpo. Questo metodo si basa su esercizi a corpo libero volti a sviluppare forza, equilibrio, coordinazione e consapevolezza motoria.
Nel nostro percorso studieremo le skill fondamentali e le relative propedeutiche, per poi approfondire l’anatomia umana, con particolare attenzione al sistema scheletrico, muscolare e alle fibre. Questo ci permetterà di comprendere come adattare ogni esercizio alla struttura individuale, ottimizzando tecnica e progressione.
Il Calisthenics è una disciplina incentrata sulla forza relativa, cioè la capacità di esprimere potenza in rapporto al proprio peso corporeo. Si basa sull’utilizzo del solo peso del corpo, ma può integrare zavorre e attrezzature per migliorare il ROM (Range of Motion delle articolazioni e potenziare i muscoli di stabilizzazione)
Per progredire in modo sicuro ed efficace è necessario sviluppare una maturità muscolare adeguata, rinforzando le muscolature target responsabili della stabilità e della propulsione nei movimenti complessi.
Riconoscimento e Validità dei Diplomi
La tua professionalità si fonda anche su un solido inquadramento normativo. Assicurati di operare sempre nel rispetto delle leggi vigenti. In Italia, la validità dei titoli è regolata da enti specifici:
Enti Riconosciuti: ACCADEMIA ITALIANA FITNESS (AIF) opera come scuola nazionale di MSP ITALIA e ASI, enti di promozione sportiva riconosciuti dal CONI e dal Ministero dell'Interno.
Validità Nazionale: I diplomi e i tesserini tecnici rilasciati al termine dei percorsi formativi AIF hanno validità su tutto il territorio nazionale.
Responsabilità Legale: Secondo l'articolo 8 della Legge sulla Tutela della salute dei praticanti, sei definito "istruttore specifico di disciplina" in quanto in possesso di abilitazione rilasciata da enti riconosciuti dal CONI. Questa qualifica ti rende legalmente responsabile della corretta applicazione dei programmi e delle attività svolte all'interno della struttura sportiva.
1.3. Il Sistema SNaQ e le Competenze dell'Istruttore
Il Sistema Nazionale delle Qualifiche (SNaQ)
Lo SNaQ (Sistema Nazionale delle Qualifiche dei Tecnici Sportivi) è il modello di riferimento per le qualifiche degli operatori sportivi in Italia, allineato al quadro europeo. Il suo focus non è sulla mera durata di un corso, ma sulla coerenza tra le competenze che acquisisci e i profili professionali richiesti. L'efficacia della tua formazione risiede nella capacità di tradurre le conoscenze in strumenti pratici e applicabili sul campo.
Secondo il glossario ufficiale dello SNaQ, la competenza che devi dimostrare è:
“la capacità dimostrata di utilizzare le conoscenze, le abilità e le attitudini personali, sociali e/o metodologiche, in situazioni reali di lavoro e nello sviluppo professionale e/o personale”.




2.0 Fondamenti Scientifici del Movimento Umano
2.1. Terminologia di Base: Piani e Assi Corporei
I movimenti del corpo umano avvengono su tre piani e attorno a tre assi, con una relazione di perpendicolarità tra ogni piano e il suo asse corrispondente.

Piano Corporeo
Asse Corrispondente (⊥)
Movimenti (Condensati)
Sagittale (Destra/Sinistra) Verticalmente
Trasversale (Lato-Lato) Perpendicolare al S.


Flessione / Estensione (Avanti-Indietro), Anteposizione / Retroposizione.
Frontale (Anteriore/Posteriore) Verticalmente
Sagittale (Avanti-Dietro) Perpendicolare al F.
Abduzione / Adduzione (Laterale), Inclinazione Laterale.
Trasversale (Superiore/Inferiore) Orizzontalmente
Longitudinale (Verticale) Perpendicolare al T.
Rotazione (Torsione), Supinazione / Pronazione, Intrarotazione / Extrarotazione.



















A. Movimenti sul Piano Sagittale (Asse Trasversale)

Movimento
Definizione Semplificata
Giustificazione Biomeccanica e Fisiologica
Flessione
Diminuzione dell'angolo articolare (segmento che si accorcia).
È il passaggio di un segmento corporeo da un atteggiamento lungo a uno breve.
Realizzata dalla contrazione degli agonisti (es. Bicipite Brachiale). Il muscolo, accorciandosi, avvicina inserzione e origine. Nel caso del bicipite brachiale, la sua azione flessoria sul gomito è massima quando il gomito è flesso a 80-90°.
Il bicipite brachiale(bi), non solo flette e supina il gomito, ma interviene anche nei movimenti di adduzione, abduzione e rotazione interna, stabilizzando l'articolazione scapolo-omerale.
Estensione
Aumento dell'angolo articolare (segmento che si allunga), opposto alla flessione.
Realizzata dai muscoli estensori (es. Tricipite Brachiale). Riporta l'angolo alla condizione di riposo o allungamento. è il muscolo estensore più grosso dell'arto superiore e tramite i suoi tre capi, è responsabile dell'estensione del gomito. Il capo lungo, in particolare, partecipa anche alla retroversione della scapola e all'adduzione della spalla.
Piegamento
Flessione in Catena Cinetica Chiusa (arto in appoggio).
L’'azione su un arto che sostiene il peso. Implica un lavoro complesso che richiede forte attivazione degli stabilizzatori (es. Pettorali, Deltoidi Anteriori, Tricipiti).
Anteposizione / Retroposizione
Spostamento di un segmento in avanti / indietro.
Protrazione / Retrazione della scapola: Cruciali nel Calisthenics per la stabilità: la protrazione (es. Gran Dentato) è vitale nella Planche; la retrazione (es. Romboidi, Gran Dorsale) è essenziale nelle trazioni.
Iperestensione
Movimento oltre l'escursione articolare normale.
Importanza Biomeccanica: L'eccessivo allungamento (es. della spalla nel Back Lever) è stressante. Richiede specifica mobilità propedeutica (German Hang) per prevenire infortuni.


B. Movimenti sul Piano Frontale (Asse Sagittale)
Movimento
Definizione Semplificata
Giustificazione Biomeccanica e Fisiologica
Abduzione
Allontanamento di un arto dalla linea mediana del corpo.
Richiede attivazione di muscoli come Deltoide e Sovraspinato (importante stabilizzatore e motore nei primi gradi).
Adduzione
Avvicinamento di un arto alla linea mediana del corpo.
Coinvolge muscoli potenti (es. Gran Dorsale, Gran Pettorale), fondamentali negli esercizi di tirata e spinta.
Inclinazione Laterale
Movimento laterale (lateroflessione) del tronco.
Essenziale per la mobilità del busto. Coinvolge i muscoli del tronco e il Quadrato dei Lombi. Parametro chiave per la postura.










C. Movimenti sul Piano Trasversale (Asse Longitudinale)
Movimento
Definizione Semplificata
Giustificazione Biomeccanica e Fisiologica
Rotazione / Torsione
Movimento attorno all'Asse Longitudinale.
Permette la rotazione del tronco. La capacità di resistere alla torsione (anti-rotazione, es. nella Human Flag) è cruciale e dipende dalla forza del Core (soprattutto i muscoli obliqui).
Intrarotazione / Extrarotazione
Rotazione interna / esterna di un segmento.
Vitale per la salute della spalla. Intrarotatori (es. Sottoscapolare) e Extrarotatori (es. Sottospinato, Piccolo Rotondo) sono essenziali per la stabilizzazione dinamica della scapolo-omerale.
Supinazione / Pronazione
Rotazione dell'avambraccio (palmo in alto / in basso).
Definisce il tipo di presa. La presa Supina (Chin-ups) recluta maggiormente il Bicipite Brachiale. La presa Prona (Pull-ups) isola maggiormente il Gran Dorsale.
Antiversione / Retroversione
Movimento del bacino sul Piano Sagittale.
Retroversione (o Hollow Body Position) è fondamentale per le skill isometriche (Planche, Front Lever, Handstand) per prevenire l'iperlordosi lombare e mantenere l'integrità strutturale del corpo.








Analisi dei Tessuti Corporei: Il corpo umano è composto da quattro tipologie principali di tessuto, ognuna con funzioni specializzate.
Tessuto Connettivo: È il tessuto più vasto e svolge funzioni di supporto strutturale e metabolico, oltre che di protezione. La sua organizzazione interna determina la sua funzione. Si distingue in:
Tessuto Lasso: Facilmente penetrabile, ha una funzione trofica (nutrimento), di trasporto e di difesa.
Tessuto Denso: Svolge un ruolo di contenimento e sostegno, agendo come una barriera. Altri tipi di tessuto connettivo includono il Tessuto connettivo mucoso e il Tessuto connettivo propriamente detto (o adiposo).
Tessuto Epiteliale: Ricopre la superficie esterna del corpo (pelle) e il rivestimento delle cavità interne. Le sue funzioni principali sono protezione, secrezione, assorbimento e filtrazione.
Tessuto Muscolare: Responsabile del movimento, si suddivide in tre tipi:
Scheletrico: Tessuto volontario che, contraendosi, genera il movimento delle parti scheletriche.
Organi Cavi (Liscio): Tessuto involontario che riveste gli organi interni e i vasi sanguigni.
Cardiaco: Tessuto muscolare involontario specifico del cuore.
Tessuto Nervoso: Composto da cellule specializzate nel ricevere stimoli e trasmettere impulsi da e verso tutte le parti del corpo, coordinando le risposte dell'organismo.
Struttura dei Sistemi e Apparati: Nel corpo umano, organi con funzioni simili si raggruppano in strutture più complesse, definite "sistemi" o "apparati".
Un sistema è formato da organi con la stessa funzione e struttura tissutale.
Un apparato è composto da organi con compiti simili ma formati da tessuti differenti.
I principali sistemi e apparati includono: Cardiocircolatorio, Respiratorio, Digestivo, Escretore, Nervoso, Endocrino, Riproduttivo, Muscoloscheletrico e Immunitario.
Sistema Digestivo
Componenti: Bocca, esofago, stomaco, intestino tenue, colon, fegato e pancreas.
Funzione Principale: Fornire nutrimento a tutto il corpo attraverso la digestione, l'assorbimento e l'assimilazione del cibo per produrre energia.
Sistema Nervoso: Questo sistema regola le risposte del corpo agli stimoli intern

README.md

@@ -1,10 +1,13 @@
 ---
-title: Calianatomy 3d Explorer
-emoji: 📈
-colorFrom: blue
-colorTo: green
+title: CaliAnatomy 3D Explorer  💪
+colorFrom: red
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,78 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background-color: #111827;
+                    color: #f3f4f6;
+                    padding: 3rem 1rem;
+                }
+                
+                .footer-container {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+                    gap: 2rem;
+                }
+                
+                .footer-logo {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: white;
+                    margin-bottom: 1rem;
+                    display: flex;
+                    align-items: center;
+                }
+                
+                .footer-logo-icon {
+                    margin-right: 0.5rem;
+                }
+                
+                .footer-description {
+                    color: #9ca3af;
+                    margin-bottom: 1.5rem;
+                }
+                
+                .footer-heading {
+                    font-size: 1.125rem;
+                    font-weight: 600;
+                    color: white;
+                    margin-bottom: 1rem;
+                }
+                
+                .footer-links {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.75rem;
+                }
+                
+                .footer-link {
+                    color: #9ca3af;
+                    text-decoration: none;
+                    transition: color 0.2s;
+                }
+                
+                .footer-link:hover {
+                    color: #f87171;
+                }
+                
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                    margin-top: 1rem;
+                }
+                
+                .social-link {
+                    color: #9ca3af;
+                    transition: color 0.2s;
+                }
+                
+                .social-link:hover {
+                    color: #f87171;
+                }
+                
+                .copyright {
+                    margin-top:

components/navbar.js

@@ -0,0 +1,114 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    position: sticky;
+                    top: 0;
+                    z-index: 50;
+                    background-color: white;
+                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+                }
+                
+                nav {
+                    max-width: 1280px;
+                    margin: 0 auto;
+                    padding: 1rem 2rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                
+                .logo {
+                    font-weight: 700;
+                    font-size: 1.5rem;
+                    color: #dc2626;
+                    text-decoration: none;
+                    display: flex;
+                    align-items: center;
+                }
+                
+                .logo-icon {
+                    margin-right: 0.5rem;
+                }
+                
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                }
+                
+                .nav-link {
+                    color: #4b5563;
+                    font-weight: 500;
+                    text-decoration: none;
+                    transition: color 0.2s;
+                }
+                
+                .nav-link:hover {
+                    color: #dc2626;
+                }
+                
+                .mobile-menu-button {
+                    display: none;
+                    background: none;
+                    border: none;
+                    cursor: pointer;
+                }
+                
+                .mobile-menu {
+                    display: none;
+                    flex-direction: column;
+                    gap: 1rem;
+                    padding: 1rem;
+                    background-color: white;
+                }
+                
+                @media (max-width: 768px) {
+                    .nav-links {
+                        display: none;
+                    }
+                    
+                    .mobile-menu-button {
+                        display: block;
+                    }
+                    
+                    .mobile-menu.active {
+                        display: flex;
+                    }
+                }
+            </style>
+            
+            <nav>
+                <a href="index.html" class="logo">
+                    <i data-feather="activity" class="logo-icon"></i>
+                    CaliAnatomy
+                </a>
+                
+                <div class="nav-links">
+                    <a href="muscles.html" class="nav-link">Muscles</a>
+                    <a href="skeleton.html" class="nav-link">Skeleton</a>
+                    <a href="exercises.html" class="nav-link">Exercises</a>
+                    <a href="biomechanics.html" class="nav-link">Biomechanics</a>
+                    <a href="training.html" class="nav-link">Training</a>
+                </div>
+                
+                <button class="mobile-menu-button" onclick="toggleMobileMenu()">
+                    <i data-feather="menu"></i>
+                </button>
+            </nav>
+            
+            <div id="mobile-menu" class="mobile-menu hidden">
+                <a href="muscles.html" class="nav-link">Muscles</a>
+                <a href="skeleton.html" class="nav-link">Skeleton</a>
+                <a href="exercises.html" class="nav-link">Exercises</a>
+                <a href="biomechanics.html" class="nav-link">Biomechanics</a>
+                <a href="training.html" class="nav-link">Training</a>
+            </div>
+        `;
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,135 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CaliAnatomy 3D Explorer | Home</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
+</head>
+<body class="bg-gray-50">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <section class="mb-16">
+            <div class="text-center mb-12">
+                <h1 class="text-4xl md:text-5xl font-bold text-red-600 mb-4">CaliAnatomy 3D Explorer</h1>
+                <p class="text-xl text-gray-700 max-w-3xl mx-auto">Interactive 3D models to master calisthenics anatomy and biomechanics</p>
+            </div>
+
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105">
+                    <div class="h-48 bg-red-100 flex items-center justify-center">
+                        <i data-feather="activity" class="w-16 h-16 text-red-600"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">Muscle System</h3>
+                        <p class="text-gray-600 mb-4">Explore all muscle groups involved in calisthenics movements</p>
+                        <a href="muscles.html" class="inline-flex items-center text-red-600 font-medium">
+                            Explore <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105">
+                    <div class="h-48 bg-red-100 flex items-center justify-center">
+                        <i data-feather="bone" class="w-16 h-16 text-red-600"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">Skeletal System</h3>
+                        <p class="text-gray-600 mb-4">Understand bone structures and joint mechanics</p>
+                        <a href="skeleton.html" class="inline-flex items-center text-red-600 font-medium">
+                            Explore <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105">
+                    <div class="h-48 bg-red-100 flex items-center justify-center">
+                        <i data-feather="target" class="w-16 h-16 text-red-600"></i>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-2">Exercises Library</h3>
+                        <p class="text-gray-600 mb-4">See which muscles work in each calisthenics exercise</p>
+                        <a href="exercises.html" class="inline-flex items-center text-red-600 font-medium">
+                            Explore <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <section class="py-12 bg-white rounded-xl shadow-lg px-6">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl font-bold text-gray-800 mb-6">Master Calisthenics Biomechanics</h2>
+                <p class="text-lg text-gray-600 mb-8">
+                    Our interactive 3D models help you visualize muscle activation, joint angles, and movement patterns 
+                    in all fundamental calisthenics skills from pull-ups to planches.
+                </p>
+                <div id="home-3d-container" class="h-96 w-full bg-gray-100 rounded-lg mb-8">
+                    <!-- 3D model will be loaded here -->
+                </div>
+                <a href="biomechanics.html" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition-colors">
+                    Explore Biomechanics
+                </a>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        
+        // Simple 3D model for homepage
+        document.addEventListener('DOMContentLoaded', function() {
+            const container = document.getElementById('home-3d-container');
+            const scene = new THREE.Scene();
+            const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
+            const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+            renderer.setSize(container.clientWidth, container.clientHeight);
+            container.appendChild(renderer.domElement);
+
+            // Add lights
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(1, 1, 1);
+            scene.add(directionalLight);
+
+            // Create a simple human figure
+            const bodyGeometry = new THREE.SphereGeometry(1, 32, 32);
+            const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0xff6b6b });
+            const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
+            scene.add(body);
+
+            // Position camera
+            camera.position.z = 5;
+
+            // Animation loop
+            function animate() {
+                requestAnimationFrame(animate);
+                body.rotation.y += 0.01;
+                renderer.render(scene, camera);
+            }
+
+            // Handle window resize
+            window.addEventListener('resize', function() {
+                camera.aspect = container.clientWidth / container.clientHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(container.clientWidth, container.clientHeight);
+            });
+
+            animate();
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,101 @@
+// Shared functions across pages
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    const tooltips = document.querySelectorAll('[data-tooltip]');
+    tooltips.forEach(tooltip => {
+        tooltip.addEventListener('mouseenter', function() {
+            const tooltipText = this.getAttribute('data-tooltip');
+            const tooltipElement = document.createElement('div');
+            tooltipElement.className = 'absolute z-50 bg-black text-white text-sm px-3 py-1 rounded-md';
+            tooltipElement.textContent = tooltipText;
+            this.appendChild(tooltipElement);
+            
+            this.addEventListener('mouseleave', function() {
+                tooltipElement.remove();
+            });
+        });
+    });
+
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+
+    // Mobile menu toggle (will be used by navbar component)
+    window.toggleMobileMenu = function() {
+        const menu = document.getElementById('mobile-menu');
+        menu.classList.toggle('hidden');
+    };
+});
+
+// Function to load 3D model (used across multiple pages)
+function load3DModel(containerId, modelConfig) {
+    const container = document.getElementById(containerId);
+    if (!container) return;
+
+    // Basic Three.js setup
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    renderer.setSize(container.clientWidth, container.clientHeight);
+    container.innerHTML = '';
+    container.appendChild(renderer.domElement);
+
+    // Add lights
+    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+    scene.add(ambientLight);
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+    directionalLight.position.set(1, 1, 1);
+    scene.add(directionalLight);
+
+    // Controls
+    const controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.05;
+
+    // Add model based on config
+    if (modelConfig.type === 'muscle') {
+        // Simplified muscle model
+        const geometry = new THREE.SphereGeometry(1, 32, 32);
+        const material = new THREE.MeshPhongMaterial({ 
+            color: 0xff6b6b,
+            transparent: true,
+            opacity: 0.8
+        });
+        const sphere = new THREE.Mesh(geometry, material);
+        scene.add(sphere);
+    } else if (modelConfig.type === 'skeleton') {
+        // Simplified skeleton model
+        const geometry = new THREE.BoxGeometry(1, 2, 1);
+        const material = new THREE.MeshPhongMaterial({ 
+            color: 0xf5f5f5,
+            wireframe: false
+        });
+        const bone = new THREE.Mesh(geometry, material);
+        scene.add(bone);
+    }
+
+    // Position camera
+    camera.position.z = modelConfig.cameraDistance || 5;
+
+    // Animation loop
+    function animate() {
+        requestAnimationFrame(animate);
+        controls.update();
+        renderer.render(scene, camera);
+    }
+
+    // Handle window resize
+    window.addEventListener('resize', function() {
+        camera.aspect = container.clientWidth / container.clientHeight;
+        camera.updateProjectionMatrix();
+        renderer.setSize(container.clientWidth, container.clientHeight);
+    });
+
+    animate();
+}

style.css

@@ -1,28 +1,71 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #dc2626;
+    border-radius: 4px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #b91c1c;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Animation classes */
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.rotate-3d {
+    transform-style: preserve-3d;
+    transition: transform 0.5s ease;
 }
+
+.rotate-3d:hover {
+    transform: rotateY(15deg);
+}
+
+/* Tooltip styles */
+.tooltip {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip .tooltip-text {
+    visibility: hidden;
+    width: 200px;
+    background-color: #333;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 8px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%);
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.tooltip:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}