Upload folder using huggingface_hub

frontend/src/app/dashboard/page.tsx

@@ -23,18 +23,18 @@ export default function Dashboard() {
   const { data, stream, status } = useTelemetry();
 
   return (
-    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white pb-16">
+    <main className="max-h-dvh bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white pb-16">
       {/* Top Nav (Mechanical) */}
 
       <motion.div 
         variants={staggerContainer}
         initial="hidden"
         animate="show"
-        className="max-w-[1400px] mx-auto w-full px-8 py-16 flex-1 flex flex-col"
+        className="max-w-350 mx-auto w-full px-8 py-16 flex-1 flex flex-col"
       >
         <motion.header variants={fadeUp} className="mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">
           <div>
-            <div className="text-[12px] text-hazard font-bold tracking-[0.1em] mb-4 flex items-center gap-2">
+            <div className="text-[12px] text-hazard font-bold tracking-widest mb-4 flex items-center gap-2">
               <motion.div 
                 animate={{ opacity: [1, 0.2, 1] }} 
                 transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
@@ -47,7 +47,7 @@ export default function Dashboard() {
             </h1>
           </div>
           <div className="text-right hidden md:block">
-            <div className={`text-[14px] font-bold uppercase tracking-[0.05em] border-2 border-ink px-4 py-2 text-canvas-cream ${status === 'reconnecting' ? 'bg-hazard animate-pulse' : 'bg-ink'}`}>
+            <div className={`text-[14px] font-bold uppercase tracking-wider border-2 border-ink px-4 py-2 text-canvas-cream ${status === 'reconnecting' ? 'bg-hazard animate-pulse' : 'bg-ink'}`}>
               STATUS: {status === 'reconnecting' ? "RECONNECTING..." : (data ? "CONNECTED" : "AWAITING SIGNAL")}
             </div>
           </div>
@@ -59,7 +59,7 @@ export default function Dashboard() {
           {/* Main Status Panel */}
           <motion.div variants={fadeUp} className="bg-canvas-cream flex flex-col">
             <div className="border-b-2 border-ink p-4 flex justify-between items-center bg-white">
-              <h2 className="text-[14px] font-bold tracking-[0.05em]">{'< LIVE_VITALS >'}</h2>
+              <h2 className="text-[14px] font-bold tracking-wider">{'< LIVE_VITALS >'}</h2>
               {data?.prediction ? (
                 (() => {
                   const getStatusStyles = (label: string) => {
@@ -77,14 +77,14 @@ export default function Dashboard() {
                       initial={{ scale: 0.95, opacity: 0 }}
                       animate={{ scale: 1, opacity: 1 }}
                       transition={{ type: "spring", stiffness: 300, damping: 20 }}
-                      className={`px-4 py-2 text-[14px] font-bold uppercase tracking-[0.05em] border-2 ${getStatusStyles(data.prediction.label)}`}
+                      className={`px-4 py-2 text-[14px] font-bold uppercase tracking-wider border-2 ${getStatusStyles(data.prediction.label)}`}
                     >
                       {data.prediction.is_at_risk ? '[!]' : '[OK]'} {data.prediction.label} ({(data.prediction.confidence * 100).toFixed(1)}%)
                     </motion.div>
                   );
                 })()
               ) : (
-                <div className="px-4 py-2 text-[14px] font-bold tracking-[0.05em] border-2 border-ink text-slate animate-pulse">
+                <div className="px-4 py-2 text-[14px] font-bold tracking-wider border-2 border-ink text-slate animate-pulse">
                   INITIALIZING...
                 </div>
               )}
@@ -98,18 +98,18 @@ export default function Dashboard() {
             </motion.div>
             
             {/* 2-Column Mini Graphs */}
-            <motion.div variants={fadeUp} className="grid grid-cols-1 lg:grid-cols-2 gap-px bg-ink border-b-2 border-ink h-[160px]">
-              <div className="bg-white p-3 flex flex-col group"><div className="text-[11px] font-bold text-slate tracking-[0.1em] mb-2 group-hover:text-hazard transition-colors">HR_STREAM</div><div className="flex-1 min-h-0 relative"><TelemetryGraph stream={stream.hr} min={60} max={150} color="var(--color-ink)" fill="rgba(5,5,5,0.05)" /></div></div>
-              <div className="bg-white p-3 flex flex-col group"><div className="text-[11px] font-bold text-slate tracking-[0.1em] mb-2 group-hover:text-hazard transition-colors">TEMP_STREAM</div><div className="flex-1 min-h-0 relative"><TelemetryGraph stream={stream.temp} min={36.0} max={39.0} color="var(--color-ink)" fill="rgba(5,5,5,0.05)" /></div></div>
+            <motion.div variants={fadeUp} className="grid grid-cols-1 lg:grid-cols-2 gap-px bg-ink border-b-2 border-ink h-40">
+              <div className="bg-white p-3 flex flex-col group"><div className="text-[11px] font-bold text-slate tracking-widest mb-2 group-hover:text-hazard transition-colors">HR_STREAM</div><div className="flex-1 min-h-0 relative"><TelemetryGraph stream={stream.hr} min={60} max={150} color="var(--color-ink)" fill="rgba(5,5,5,0.05)" /></div></div>
+              <div className="bg-white p-3 flex flex-col group"><div className="text-[11px] font-bold text-slate tracking-widest mb-2 group-hover:text-hazard transition-colors">TEMP_STREAM</div><div className="flex-1 min-h-0 relative"><TelemetryGraph stream={stream.temp} min={36.0} max={39.0} color="var(--color-ink)" fill="rgba(5,5,5,0.05)" /></div></div>
             </motion.div>
 
             {/* Diagnostic Probabilities */}
-            <motion.div variants={fadeUp} className="bg-white flex flex-col min-h-[280px]">
+            <motion.div variants={fadeUp} className="bg-white flex flex-col min-h-70">
               <div className="border-b-2 border-ink p-3 px-6 flex justify-between items-center bg-canvas-cream">
-                <h2 className="text-[12px] font-bold tracking-[0.1em] uppercase">{'< DIAGNOSTIC_PROBABILITIES >'}</h2>
-                <div className="text-[11px] font-bold tracking-[0.05em] text-hazard uppercase">CLASS / LIKELIHOOD</div>
+                <h2 className="text-[12px] font-bold tracking-widest uppercase">{'< DIAGNOSTIC_PROBABILITIES >'}</h2>
+                <div className="text-[11px] font-bold tracking-wider text-hazard uppercase">CLASS / LIKELIHOOD</div>
               </div>
-              <div className="flex-grow p-6 bg-white flex flex-col justify-center gap-6">
+              <div className="grow p-6 bg-white flex flex-col justify-center gap-6">
                 {data?.prediction?.disease_probs ? (
                    Object.entries(data.prediction.disease_probs)
                      .sort((a, b) => (b[1] as number) - (a[1] as number))
@@ -124,7 +124,7 @@ export default function Dashboard() {
                             transition={{ duration: 0.5, delay: i * 0.1, ease: easeFluid }}
                             className="flex flex-col gap-2"
                           >
-                            <div className="flex justify-between text-[12px] font-bold uppercase tracking-[0.1em]">
+                            <div className="flex justify-between text-[12px] font-bold uppercase tracking-widest">
                                <span className={isRisk ? "text-hazard drop-shadow-[0_0_2px_rgba(230,25,25,0.5)]" : "text-ink"}>{disease}</span>
                                <span className="tabular-nums">{pct}%</span>
                             </div>
@@ -142,7 +142,7 @@ export default function Dashboard() {
                         )
                      })
                 ) : (
-                  <div className="h-full flex items-center justify-center text-[12px] font-bold text-slate tracking-[0.1em] animate-pulse">
+                  <div className="h-full flex items-center justify-center text-[12px] font-bold text-slate tracking-widest animate-pulse">
                     AWAITING CLASSIFICATION DATA...
                   </div>
                 )}
@@ -159,7 +159,7 @@ export default function Dashboard() {
 function VitalCard({ label, value, unit }: { label: string, value: string | number | null | undefined, unit: string }) {
   return (
     <motion.div variants={fadeUp} className="bg-canvas-cream p-8 flex flex-col hover:bg-white transition-colors cursor-default overflow-hidden group">
-      <div className="text-[11px] font-bold text-slate tracking-[0.1em] border-b border-ink/20 pb-2 mb-4 group-hover:text-hazard transition-colors">
+      <div className="text-[11px] font-bold text-slate tracking-widest border-b border-ink/20 pb-2 mb-4 group-hover:text-hazard transition-colors">
         {label}
       </div>
       <div>
@@ -171,7 +171,7 @@ function VitalCard({ label, value, unit }: { label: string, value: string | numb
         >
           {value !== null && value !== undefined ? value : "---"}
         </motion.div>
-        <div className="text-[12px] font-bold tracking-[0.05em] text-hazard">
+        <div className="text-[12px] font-bold tracking-wider text-hazard">
           [{unit}]
         </div>
       </div>
@@ -195,9 +195,9 @@ function TelemetryGraph({ stream, min, max, color, fill }: { stream: number[], m
   const lastY = lastPoint ? lastPoint.split(',')[1] : 100;
 
   return (
-    <div className="w-full h-full absolute inset-0 border-2 border-ink overflow-hidden bg-white group relative">
+    <div className="w-full h-full relative inset-0 border-2 border-ink overflow-hidden bg-white group ">
       {/* Blueprint Grid lines */}
-      <div className="absolute inset-0 z-0 opacity-[0.1]" style={{ backgroundImage: 'linear-gradient(var(--ink-black) 1px, transparent 1px), linear-gradient(90deg, var(--ink-black) 1px, transparent 1px)', backgroundSize: '20px 20px' }}></div>
+      <div className="relative inset-0 z-0 opacity-[0.1]" style={{ backgroundImage: 'linear-gradient(var(--ink-black) 1px, transparent 1px), linear-gradient(90deg, var(--ink-black) 1px, transparent 1px)', backgroundSize: '20px 20px' }}></div>
       
       {/* Signal trace */}
       <div className="absolute inset-0 z-10 overflow-hidden">
@@ -232,7 +232,7 @@ function TelemetryGraph({ stream, min, max, color, fill }: { stream: number[], m
 
       {/* Sweeping Radar Line */}
       <motion.div 
-        className="absolute top-0 bottom-0 w-[2px] z-20 opacity-40 pointer-events-none"
+        className="relative top-0 bottom-0 w-0.5 z-20 opacity-40 pointer-events-none"
         style={{ backgroundColor: color, boxShadow: `0 0 12px 2px ${color}` }}
         initial={{ left: "0%" }}
         animate={{ left: "100%" }}
@@ -240,7 +240,7 @@ function TelemetryGraph({ stream, min, max, color, fill }: { stream: number[], m
       />
       
       {/* Terminal Scanline Overlay */}
-      <div className="absolute inset-0 pointer-events-none z-30 opacity-40 bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.2)_50%)] bg-[length:100%_4px]"></div>
+      <div className="relative inset-0 pointer-events-none z-30 opacity-40 bg-[linear-gradient(transparent_50%,rgba(0,0,0,0.2)_50%)] bg-size-[100%_4px]"></div>
     </div>
   );
 }

frontend/src/app/layout.tsx

@@ -16,7 +16,7 @@ const geistMono = Geist_Mono({
 import Link from "next/link";
 
 export const metadata: Metadata = {
-  title: "TinyML Heart Health",
+  title: "HEARTFLOW_OS",
   description: "Cardiovascular monitoring dashboard",
 };
 
@@ -30,11 +30,11 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <TelemetryProvider>
           {/* Universal Nav */}
           <nav className="flex items-center px-4 md:px-8 py-4 border-b-2 border-ink bg-canvas-cream sticky top-0 z-50 overflow-x-auto">
-            <div className="max-w-[1400px] mx-auto w-full flex flex-col md:flex-row justify-between items-center gap-4 md:gap-0">
+            <div className="max-w-350 mx-auto w-full flex flex-col md:flex-row justify-between items-center gap-4 md:gap-0">
               <Link href="/" className="font-sans text-[18px] font-black tracking-[-0.04em] uppercase hover:text-hazard transition-colors">
                 [ HEARTFLOW_OS ]
               </Link>
-              <div className="flex gap-4 md:gap-8 items-center text-[12px] md:text-[13px] font-bold tracking-[0.05em] uppercase flex-wrap justify-center">
+              <div className="flex gap-4 md:gap-8 items-center text-[12px] md:text-[13px] font-bold tracking-wider uppercase flex-wrap justify-center">
                 <Link href="/dashboard" className="text-ink hover:text-hazard transition-colors">SYS.MONITOR</Link>
                 <Link href="/simulator" className="text-ink hover:text-hazard transition-colors">AI.SIMULATOR</Link>
                 <Link href="/history" className="text-ink hover:text-hazard transition-colors">DATA.LOG</Link>
@@ -43,22 +43,22 @@ export default function RootLayout({ children }: { children: React.ReactNode })
               </div>
             </div>
           </nav>
-          
+
           <div className="flex-1 flex flex-col">
             {children}
           </div>
         </TelemetryProvider>
-        
+
         {/* Universal Footer */}
         <footer className="w-full border-t-2 border-ink bg-white py-6 px-8 mt-auto z-50">
-          <div className="max-w-[1400px] mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
-            <div className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink text-center md:text-left">
+          <div className="max-w-350 mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
+            <div className="text-[12px] font-bold tracking-wider uppercase text-ink text-center md:text-left">
               © 2026 HEARTFLOW_OS. TELEMETRY_SYS.
             </div>
             <div className="flex flex-wrap items-center justify-center gap-4 md:gap-8">
-              <Link href="/architecture" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">ARCHITECTURE.MD</Link>
-              <a href={`${process.env.NEXT_PUBLIC_API_URL || "https://idkhowtocodefr-tinyml-backend.hf.space"}/docs`} target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">API_DOCS</a>
-              <a href="https://github.com/IDKHowToCodeFR/HEARTFLOW_OS" target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-[0.05em] uppercase text-ink hover:text-hazard transition-colors">GITHUB_REPO</a>
+              <Link href="/architecture" className="text-[12px] font-bold tracking-wider uppercase text-ink hover:text-hazard transition-colors">ARCHITECTURE.MD</Link>
+              <a href={`${process.env.NEXT_PUBLIC_API_URL || "https://idkhowtocodefr-tinyml-backend.hf.space"}/docs`} target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-wider uppercase text-ink hover:text-hazard transition-colors">API_DOCS</a>
+              <a href="https://github.com/IDKHowToCodeFR/HEARTFLOW_OS" target="_blank" rel="noopener noreferrer" className="text-[12px] font-bold tracking-wider uppercase text-ink hover:text-hazard transition-colors">GITHUB_REPO</a>
             </div>
           </div>
         </footer>

frontend/src/app/mlops/page.tsx

@@ -27,7 +27,7 @@ export default function MLOps() {
   const handleUpload = async () => {
     if (!file) return;
     setStatus("uploading");
-    
+
     const formData = new FormData();
     formData.append("file", file);
 
@@ -37,7 +37,7 @@ export default function MLOps() {
         body: formData,
       });
       const data = await res.json();
-      
+
       if (data.error) {
         setStatus("error");
         setMessage(data.error);
@@ -52,18 +52,18 @@ export default function MLOps() {
   };
 
   return (
-    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
+    <main className="min-h-dvh bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
       {/* Top Nav (Mechanical) */}
 
-      <motion.div 
+      <motion.div
         variants={staggerContainer}
         initial="hidden"
         animate="show"
-        className="max-w-[1000px] mx-auto w-full px-8 py-16 flex-1 flex flex-col"
+        className="max-w-250 mx-auto w-full px-8 py-16 flex-1 flex flex-col"
       >
         <motion.header variants={fadeUp} className="mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">
           <div>
-            <div className="text-[12px] text-hazard font-bold tracking-[0.1em] mb-4">
+            <div className="text-[12px] text-hazard font-bold tracking-widest mb-4">
               /// PIPELINE_CONTROL
             </div>
             <h1 className="text-[clamp(3rem,6vw,6rem)]">
@@ -74,18 +74,18 @@ export default function MLOps() {
 
         <motion.div variants={fadeUp} className="border-2 border-ink bg-white p-8">
           <div className="border-b-2 border-ink pb-4 mb-8">
-            <h2 className="text-[16px] font-bold tracking-[0.05em] uppercase text-ink">{'< BATCH_RETRAIN >'}</h2>
+            <h2 className="text-[16px] font-bold tracking-wider uppercase text-ink">{'< BATCH_RETRAIN >'}</h2>
             <p className="text-[13px] text-slate uppercase mt-2">Append telemetry data and rebuild the edge ensemble.</p>
           </div>
 
           <div className="flex flex-col gap-6">
-            <label 
-              htmlFor="dropzone-file" 
+            <label
+              htmlFor="dropzone-file"
               className="flex flex-col items-center justify-center w-full h-48 border-2 border-dashed border-ink bg-canvas-cream hover:bg-hazard hover:text-white transition-colors cursor-pointer group relative overflow-hidden"
             >
-              <div className="absolute inset-0 pointer-events-none opacity-20 bg-[linear-gradient(45deg,var(--ink-black)_25%,transparent_25%,transparent_50%,var(--ink-black)_50%,var(--ink-black)_75%,transparent_75%,transparent)] bg-[length:20px_20px]" />
+              <div className="absolute inset-0 pointer-events-none opacity-20 bg-[linear-gradient(45deg,var(--ink-black)_25%,transparent_25%,transparent_50%,var(--ink-black)_50%,var(--ink-black)_75%,transparent_75%,transparent)] bg-size-[20px_20px]" />
               <div className="flex flex-col items-center justify-center pt-5 pb-6 relative z-10">
-                <motion.div 
+                <motion.div
                   initial={{ scale: 0.9, opacity: 0 }}
                   animate={{ scale: 1, opacity: 1 }}
                   key={file ? 'selected' : 'unselected'}
@@ -98,10 +98,10 @@ export default function MLOps() {
                 </p>
                 <p className="text-[12px] uppercase opacity-70">REQUIRES MATCHING SCHEMA</p>
               </div>
-              <input 
-                id="dropzone-file" 
-                type="file" 
-                className="sr-only" 
+              <input
+                id="dropzone-file"
+                type="file"
+                className="sr-only"
                 accept=".csv"
                 onChange={(e) => setFile(e.target.files?.[0] || null)}
                 aria-label="Upload CSV Dataset"
@@ -109,23 +109,23 @@ export default function MLOps() {
             </label>
 
             <div className="flex justify-between items-center border-t-2 border-ink pt-6 mt-2" aria-live="polite">
-              <motion.div 
+              <motion.div
                 key={status}
                 initial={{ opacity: 0, x: -10 }}
                 animate={{ opacity: 1, x: 0 }}
-                className="text-[13px] font-bold uppercase tracking-[0.05em]"
+                className="text-[13px] font-bold uppercase tracking-wider"
               >
                 {status === "uploading" && <span className="text-slate">PROCESSING...</span>}
                 {status === "error" && <span className="text-hazard">ERR: {message}</span>}
                 {status === "success" && <span className="text-ink bg-canvas-cream px-2 py-1 border border-ink">SYS: {message}</span>}
               </motion.div>
-              
-              <motion.button 
+
+              <motion.button
                 whileHover={{ scale: 1.02, backgroundColor: "var(--color-hazard)", borderColor: "var(--color-hazard)" }}
                 whileTap={{ scale: 0.98 }}
                 onClick={handleUpload}
                 disabled={!file || status === "uploading"}
-                className="inline-flex items-center justify-center h-12 px-8 bg-ink text-white text-[14px] font-bold uppercase tracking-[0.1em] border-2 border-ink disabled:opacity-50 disabled:pointer-events-none"
+                className="inline-flex items-center justify-center h-12 px-8 bg-ink text-white text-[14px] font-bold uppercase tracking-widest border-2 border-ink disabled:opacity-50 disabled:pointer-events-none"
               >
                 EXECUTE &gt;&gt;
               </motion.button>

frontend/src/app/page.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 
 export default function Home() {
   const easeFluid: [number, number, number, number] = [0.16, 1, 0.3, 1];
-  
+
   const staggerContainer = {
     hidden: { opacity: 0 },
     show: {
@@ -20,18 +20,18 @@ export default function Home() {
   };
 
   return (
-    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
+    <main className="min-h-dvh bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white">
       {/* Hero Section */}
-      <section className="max-w-[1400px] mx-auto w-full px-8 pt-16 md:pt-32 pb-24 grid grid-cols-1 lg:grid-cols-12 gap-16 flex-1 overflow-hidden">
-        <motion.div 
+      <section className="max-w-350 mx-auto w-full px-8 pt-16 md:pt-32 pb-24 grid grid-cols-1 lg:grid-cols-12 gap-16 flex-1 overflow-hidden">
+        <motion.div
           variants={staggerContainer}
           initial="hidden"
           animate="show"
           className="lg:col-span-7 flex flex-col justify-center"
         >
-          <motion.div variants={fadeUp} className="text-[12px] text-hazard font-bold tracking-[0.1em] mb-6 flex items-center gap-4">
-            <span>/// MODEL_V2.0</span>
-            <motion.span 
+          <motion.div variants={fadeUp} className="text-[12px] text-hazard font-bold tracking-widest mb-6 flex items-center gap-4">
+            <span>/// MODEL_V2.4 </span>
+            <motion.span
               initial={{ scaleX: 0 }}
               animate={{ scaleX: 1 }}
               transition={{ duration: 1, ease: easeFluid, delay: 0.4 }}
@@ -39,7 +39,7 @@ export default function Home() {
             ></motion.span>
             <span>INT8_QUANTIZED</span>
           </motion.div>
-          
+
           <motion.h1 variants={fadeUp} className="text-[clamp(3rem,8vw,8rem)] mb-8 leading-tight">
             CLINICAL<br />
             INFERENCE<br />
@@ -51,31 +51,31 @@ export default function Home() {
           </motion.p>
 
           <motion.div variants={fadeUp} className="flex flex-wrap items-center gap-4">
-            <Link href="/dashboard" passHref legacyBehavior>
-              <motion.a
+            <Link href="/dashboard" className="block w-full md:w-auto">
+              <motion.div
                 whileHover={{ scale: 1.02, backgroundColor: "var(--color-hazard)", borderColor: "var(--color-hazard)" }}
                 whileTap={{ scale: 0.98 }}
                 transition={{ duration: 0.2, ease: "easeOut" }}
-                className="inline-flex items-center justify-center h-12 px-8 bg-ink text-white text-[14px] font-bold uppercase tracking-[0.1em] border-2 border-ink w-full md:w-auto"
+                className="inline-flex items-center justify-center h-12 px-8 bg-ink text-white text-[14px] font-bold uppercase tracking-widest border-2 border-ink w-full"
               >
                 [ INITIATE_STREAM ]
-              </motion.a>
+              </motion.div>
             </Link>
-            <Link href="/edge" passHref legacyBehavior>
-              <motion.a
+            <Link href="/edge" className="block w-full md:w-auto mt-2 md:mt-0">
+              <motion.div
                 whileHover={{ scale: 1.02, backgroundColor: "var(--color-ink)", color: "var(--color-canvas-cream)" }}
                 whileTap={{ scale: 0.98 }}
                 transition={{ duration: 0.2, ease: "easeOut" }}
-                className="inline-flex items-center justify-center h-12 px-8 bg-transparent text-ink text-[14px] font-bold uppercase tracking-[0.1em] border-2 border-ink w-full md:w-auto mt-2 md:mt-0"
+                className="inline-flex items-center justify-center h-12 px-8 bg-transparent text-ink text-[14px] font-bold uppercase tracking-widest border-2 border-ink w-full"
               >
                 C_COMPILER &gt;&gt;
-              </motion.a>
+              </motion.div>
             </Link>
           </motion.div>
         </motion.div>
 
         {/* Feature Grid */}
-        <motion.div 
+        <motion.div
           variants={staggerContainer}
           initial="hidden"
           animate="show"

frontend/src/app/simulator/page.tsx

@@ -65,18 +65,18 @@ export default function Analysis() {
   };
 
   return (
-    <main className="min-h-[100dvh] bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white pb-16">
+    <main className="max-h-dvh bg-canvas-cream flex flex-col font-mono selection:bg-hazard selection:text-white pb-16">
       {/* Top Nav (Mechanical) */}
 
       <motion.div 
         variants={staggerContainer}
         initial="hidden"
         animate="show"
-        className="max-w-[1400px] mx-auto w-full px-8 py-16 flex-1 flex flex-col"
+        className="max-w-350 mx-auto w-full px-8 py-16 flex-1 flex flex-col"
       >
         <motion.header variants={fadeUp} className="mb-12 border-b-4 border-ink pb-8 flex justify-between items-end">
           <div>
-            <div className="text-[12px] text-hazard font-bold tracking-[0.1em] mb-4">
+            <div className="text-[12px] text-hazard font-bold tracking-widest mb-4">
               /// EXPLAINABLE_AI_MODULE
             </div>
             <h1 className="text-[clamp(3rem,6vw,6rem)]">
@@ -84,7 +84,7 @@ export default function Analysis() {
             </h1>
           </div>
           <div className="text-right hidden md:block max-w-sm">
-            <div className="text-[14px] font-bold uppercase tracking-[0.05em] border-2 border-ink px-4 py-2 bg-ink text-canvas-cream text-left">
+            <div className="text-[14px] font-bold uppercase tracking-wider border-2 border-ink px-4 py-2 bg-ink text-canvas-cream text-left">
               MANUAL OVERRIDE. INPUT CUSTOM TELEMETRY TO TEST ENSEMBLE CLASSIFIER AND VIEW SHAPLEY FEATURE IMPORTANCE VECTORS.
             </div>
           </div>
@@ -95,10 +95,10 @@ export default function Analysis() {
           {/* Input Panel */}
           <motion.div variants={fadeUp} className="lg:col-span-5 bg-canvas-cream flex flex-col">
             <div className="border-b-2 border-ink p-4 bg-white flex justify-between items-center">
-              <h2 className="text-[14px] font-bold tracking-[0.05em]">{'< MANUAL_INPUT_MATRIX >'}</h2>
+              <h2 className="text-[14px] font-bold tracking-wider">{'< MANUAL_INPUT_MATRIX >'}</h2>
             </div>
             
-            <div className="p-8 flex flex-col gap-8 flex-grow">
+            <div className="p-8 flex flex-col gap-8 grow">
               <InputControl label="HEART_RATE (BPM)" value={formData.Heart_Rate} min={40} max={200} onChange={(v: number) => setFormData({...formData, Heart_Rate: v})} />
               <InputControl label="SPO2_LEVEL (%)" value={formData.SpO2_Level} min={70} max={100} onChange={(v: number) => setFormData({...formData, SpO2_Level: v})} />
               <InputControl label="SYSTOLIC_BP (MMHG)" value={formData.Systolic_BP} min={80} max={220} onChange={(v: number) => setFormData({...formData, Systolic_BP: v})} />
@@ -117,14 +117,13 @@ export default function Analysis() {
               </motion.button>
 
               {/* Terminal Readout */}
-              <div className="mt-8 flex-grow border-[3px] border-ink bg-ink text-[#4AF626] p-0 flex flex-col min-h-[150px] shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] relative overflow-hidden group">
-                <div className="absolute inset-0 pointer-events-none opacity-10 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(255,255,255,0.1)_2px,rgba(255,255,255,0.1)_4px)] z-10" />
+                <div className="relative inset-0 pointer-events-none opacity-10 bg-[repeating-linear-gradient(0deg,transparent,transparent_2px,rgba(255,255,255,0.1)_2px,rgba(255,255,255,0.1)_4px)] z-10" />
                 <div className="text-[10px] font-bold tracking-[0.2em] text-ink bg-white border-b-[3px] border-ink px-4 py-3 flex justify-between uppercase">
                   <span>RAW_PAYLOAD_PREVIEW</span>
                   <span>{JSON.stringify(formData).length} BYTES // SYS_READY</span>
                 </div>
-                <div className="p-6 flex-grow flex flex-col relative z-0">
-                  <pre className="text-[12px] font-mono whitespace-pre-wrap flex-grow overflow-auto leading-relaxed">
+                <div className="p-6 grow flex flex-col relative z-0">
+                  <pre className="text-[12px] font-mono whitespace-pre-wrap grow overflow-auto leading-relaxed">
 {`{
   "Heart_Rate": ${formData.Heart_Rate},
   "SpO2_Level": ${formData.SpO2_Level},
@@ -136,16 +135,15 @@ export default function Analysis() {
                   </pre>
                 </div>
               </div>
-            </div>
           </motion.div>
 
           {/* Results Panel */}
           <motion.div variants={fadeUp} className="lg:col-span-7 bg-canvas-cream flex flex-col overflow-hidden">
             <div className="border-b-2 border-ink p-4 bg-white flex justify-between items-center">
-              <h2 className="text-[14px] font-bold tracking-[0.05em]">{'< INFERENCE_RESULTS_&_XAI >'}</h2>
+              <h2 className="text-[14px] font-bold tracking-wider">{'< INFERENCE_RESULTS_&_XAI >'}</h2>
             </div>
             
-            <div className="flex-grow flex flex-col relative bg-white">
+            <div className="grow flex flex-col relative bg-white">
               <div className="absolute inset-0 z-0 opacity-10 pointer-events-none" style={{ backgroundImage: 'linear-gradient(var(--ink-black) 1px, transparent 1px), linear-gradient(90deg, var(--ink-black) 1px, transparent 1px)', backgroundSize: '40px 40px' }}></div>
               
               <div className="z-10 p-8 flex flex-col h-full">
@@ -156,7 +154,7 @@ export default function Analysis() {
                     transition={{ duration: 0.6, ease: easeFluid }}
                   >
                     <div className="mb-12">
-                      <div className="text-[11px] font-bold text-slate tracking-[0.1em] mb-4">MODEL_OUTPUT</div>
+                      <div className="text-[11px] font-bold text-slate tracking-widest mb-4">MODEL_OUTPUT</div>
                       
                       {(() => {
                         const getStatusStyles = (label: string) => {
@@ -171,10 +169,10 @@ export default function Analysis() {
                         
                         return (
                           <div className={`border-2 p-6 flex flex-col mb-4 ${getStatusStyles(prediction.prediction ? prediction.prediction_label : 'Healthy')}`}>
-                            <div className="font-sans text-[clamp(28px,3vw,56px)] font-black tracking-tighter leading-none mb-2 uppercase break-words">
+                            <div className="font-sans text-[clamp(28px,3vw,56px)] font-black tracking-tighter leading-none mb-2 uppercase wrap-break-words">
                               {prediction.prediction ? `[!]_${prediction.prediction_label.replace(" ", "_")}` : 'NORMAL'}
                             </div>
-                            <div className="text-[14px] font-bold tracking-[0.1em]">
+                            <div className="text-[14px] font-bold tracking-widest">
                               CONFIDENCE: {(prediction.probability * 100).toFixed(1)}%
                             </div>
                           </div>
@@ -183,7 +181,7 @@ export default function Analysis() {
 
                       {/* Ensemble Diagnostics */}
                       {prediction.model_outputs && (
-                        <div className="border-2 border-ink bg-white flex flex-col text-[12px] font-bold uppercase tracking-[0.05em]">
+                        <div className="border-2 border-ink bg-white flex flex-col text-[12px] font-bold uppercase tracking-wider">
                           <div className="border-b-2 border-ink px-4 py-2 bg-ink text-canvas-cream flex justify-between">
                             <span>{'< ENSEMBLE_STACK_DIAGNOSTICS >'}</span>
                             <span className="text-hazard">WEIGHTED_VOTING</span>
@@ -214,8 +212,8 @@ export default function Analysis() {
                       )}
                     </div>
 
-                    <div className="flex-1 border-2 border-ink bg-white p-8 flex flex-col min-h-[300px]">
-                      <div className="text-[11px] font-bold text-slate tracking-[0.1em] mb-6 border-b-2 border-ink pb-2">SHAPLEY_ADDITIVE_EXPLANATIONS</div>
+                    <div className="flex-1 border-2 border-ink bg-white p-8 flex flex-col min-h-75">
+                      <div className="text-[11px] font-bold text-slate tracking-widest mb-6 border-b-2 border-ink pb-2">SHAPLEY_ADDITIVE_EXPLANATIONS</div>
                       <div className="flex-1">
                         <ShapChart patientData={submittedData} />
                       </div>
@@ -223,7 +221,7 @@ export default function Analysis() {
                   </motion.div>
                 ) : (
                   <div className="h-full flex items-center justify-center">
-                    <div className="text-slate text-[14px] font-bold tracking-[0.1em] uppercase border-2 border-slate px-6 py-4 animate-pulse">
+                    <div className="text-slate text-[14px] font-bold tracking-widest uppercase border-2 border-slate px-6 py-4 animate-pulse">
                       {loading ? 'CALCULATING_SHAP_VALUES...' : 'AWAITING_INPUT...'}
                     </div>
                   </div>
@@ -242,7 +240,7 @@ function InputControl({ label, value, min, max, step = 1, onChange }: any) {
   return (
     <div className="flex flex-col gap-3 group">
       <div className="flex justify-between items-end">
-        <label className="text-[13px] font-bold text-slate tracking-[0.1em] group-hover:text-ink transition-colors">{label}</label>
+        <label className="text-[13px] font-bold text-slate tracking-widest group-hover:text-ink transition-colors">{label}</label>
         <motion.span 
           key={value}
           initial={{ opacity: 0.5, y: -5 }}