diff --git a/honda-vin-data.json b/honda-vin-data.json
new file mode 100644
index 0000000..c5e9271
--- /dev/null
+++ b/honda-vin-data.json
@@ -0,0 +1,278 @@
+{
+ "1973-1980": {
+ "type": "chassisNumber",
+ "positions1_2": {
+ "title": "Car Line & Engine",
+ "description": "Refers to chassis code list"
+ },
+ "position3": {
+ "title": "Body Type & Transmission",
+ "codes": {
+ "A": "2 Door, 4 Speed Manual",
+ "B": "2 Door, 2 Speed Automatic",
+ "C": "3 Door, 4 Speed Manual",
+ "D": "3 Door, 2 Speed Automatic",
+ "E": "3 Door, 5 Speed Manual",
+ "F": "2 Door, 5 Speed Manual",
+ "G": "3 Door LX, 2 Speed Automatic",
+ "H": "3 Door LX, 5 Speed Manual",
+ "J": "4 Door, 5 Speed Manual",
+ "K": "4 Door, 2 Speed Automatic"
+ }
+ },
+ "position4": {
+ "title": "Generation Year",
+ "codes": {
+ "1": "First",
+ "2": "Second",
+ "3": "Third",
+ "4": "Fourth",
+ "5": "Fifth",
+ "6": "Sixth",
+ "7": "Seventh"
+ }
+ },
+ "positions5_10": {
+ "title": "Serial Number",
+ "description": "Sequential starting from 000001"
+ }
+ },
+ "1981-present": {
+ "type": "vin",
+ "wmiMethods": {
+ "method1": {
+ "position1": {
+ "title": "Nation of Origin",
+ "codes": {
+ "1": "USA",
+ "2": "Canada",
+ "3": ["Mexico", "Costa Rica", "Cayman Islands"],
+ "4": "USA",
+ "5": "USA",
+ "6": "Australia",
+ "7": "New Zealand",
+ "8": ["Argentina", "Chile", "Ecuador", "Peru", "Venezuela"],
+ "9": ["Brazil", "Colombia", "Paraguay", "Uruguay", "Trinidad & Tobago"],
+ "A": ["South Africa", "Ivory Coast"],
+ "B": ["Angola", "Kenya", "Tanzania"],
+ "C": ["Benin", "Madagascar", "Tunisia"],
+ "D": ["Egypt", "Morocco", "Zambia"],
+ "E": ["Ethiopia", "Mozambique"],
+ "F": ["Ghana", "Nigeria"],
+ "J": "Japan",
+ "K": ["Sri Lanka", "Israel", "South Korea"],
+ "L": "China",
+ "M": ["India", "Indonesia", "Thailand"],
+ "N": ["Pakistan", "Turkey"],
+ "P": ["Philippines", "Singapore", "Malaysia"],
+ "R": ["United Arab Emirates", "Taiwan", "Vietnam"],
+ "S": ["Great Britain", "Germany", "Poland"],
+ "T": ["Switzerland", "Czech Republic", "Hungary", "Portugal"],
+ "U": ["Denmark", "Ireland", "Romania", "Slovakia"],
+ "V": ["Austria", "France", "Spain", "Yugoslavia", "Croatia", "Estonia"],
+ "W": "Germany",
+ "X": ["Bulgaria", "Greece", "Netherlands", "Russia", "Luxembourg"],
+ "Y": ["Belgium", "Finland", "Malta", "Sweden", "Norway", "Belarus", "Ukraine"],
+ "Z": ["Italy", "Slovenia", "Lithuania"]
+ }
+ },
+ "position2": {
+ "title": "Manufacturer",
+ "codes": {
+ "H": "Honda"
+ }
+ },
+ "position3": {
+ "title": "Vehicle Type",
+ "codes": {
+ "F": "Honda Motorcycle, Built in USA",
+ "G": "Honda Passenger Vehicle, Built in USA/Canada/Mexico/China",
+ "H": ["Acura Passenger Vehicle, Built in Canada", "Honda Passenger Vehicle, Built in UK"],
+ "J": "Honda Light Duty Truck, Built in Canada",
+ "K": "Honda Multi-purpose passenger vehicle, Built in Canada",
+ "L": "Honda Multi-purpose passenger vehicle, Built in Japan",
+ "M": "Honda Passenger Vehicle, Built in Japan",
+ "N": ["Honda Multi-purpose passenger vehicle, Built in USA", "Acura Multi-purpose passenger vehicle, Built in Canada"],
+ "P": "Honda Light Duty Truck, Built in USA",
+ "R": "Honda Passenger Vehicle, Built in Indonesia",
+ "S": "Honda Passenger Vehicle, Built in UK",
+ "1": "Honda Motorcycle, Built in Mexico",
+ "2": "Honda Motorcycle, Built in Japan",
+ "3": "Honda ATV, Built in Japan",
+ "4": "Acura Passenger Vehicle, Built in Japan"
+ }
+ }
+ },
+ "method2": {
+ "positions1_3": {
+ "title": "Complete WMI Codes",
+ "codes": {
+ "LUC": "Honda Automobile (China)",
+ "MRH": "Honda Automobile (Thailand)",
+ "RKT": "Honda Automobile (Taiwan)",
+ "VTM": "Honda Motorcycle (Spain)",
+ "YC1": "Honda Motorcycle (Belgium)",
+ "ZDC": "Honda Motorcycle (Italy)",
+ "19U": "Acura CL & TL (1999+)",
+ "478": "Honda ATV (USA)",
+ "4S6": "Honda Passport (All)",
+ "5FN": "Honda Odyssey (2002+) & Pilot (2005+)",
+ "5FP": "Honda Ridgeline (2009+)",
+ "5J6": "Honda Element (All) and Honda CR-V",
+ "5J8": "Acura RDX (All)",
+ "93H": "Honda Automobile (Brazil)",
+ "9C2": "Honda Motorcycle (Brazil)"
+ }
+ }
+ }
+ },
+ "vds": {
+ "1981-1986": {
+ "positions4_5": {
+ "title": "Car Line & Engine",
+ "description": "Refers to chassis code list"
+ },
+ "position6": {
+ "title": "Transmission Type",
+ "codes": {
+ "2": "Semi-Hondamatic",
+ "3": "3 Speed Automatic",
+ "4": "4 Speed Manual",
+ "5": "5 Speed Manual",
+ "6": "6 Speed Manual (5 Speed Manual w/ Super Low Gear)",
+ "7": "4 Speed Automatic"
+ }
+ },
+ "position7": {
+ "title": "Body Type",
+ "codes": {
+ "2": "2-door Coupe",
+ "3": "3-door Hatchback",
+ "4": "4-door Sedan",
+ "5": "5-door Wagon"
+ }
+ }
+ },
+ "1987-2009": {
+ "positions4_6": {
+ "title": "Car Line & Engine",
+ "description": "Combined chassis code"
+ },
+ "position7": {
+ "title": "Body Type & Transmission",
+ "codes": {
+ "1": ["2 Door Convertible, Manual", "2 Door Coupe, Manual"],
+ "2": "2 Door Coupe, Automatic or CVT",
+ "3": "3 Door Hatchback, Manual",
+ "4": "3 Door Hatchback, Automatic or CVT",
+ "5": "4 Door Sedan, Manual",
+ "6": ["4 Door Sedan, Automatic or CVT", "4 Door Truck, Automatic or CVT"],
+ "7": ["5 Door Wagon, Manual", "5 Door SUV, Manual"],
+ "8": ["5 Door Wagon, Automatic or CVT", "5 Door Minivan, Automatic or CVT", "5 Door SUV, Automatic or CVT"]
+ }
+ }
+ },
+ "2010-present": {
+ "positions4_6": {
+ "title": "Car Line & Engine",
+ "description": "Combined chassis code"
+ },
+ "position7": {
+ "title": "Body Type & Transmission",
+ "codes": {
+ "A": ["2 Door Convertible, Manual", "2 Door Coupe, Manual"],
+ "B": "2 Door Coupe, Automatic or CVT",
+ "C": "3 Door Hatchback, Manual",
+ "D": "3 Door Hatchback, Automatic or CVT",
+ "E": "4 Door Sedan, Manual",
+ "F": ["4 Door Sedan, Automatic or CVT", "4 Door Truck, Automatic or CVT"],
+ "G": ["5 Door Wagon, Manual", "5 Door SUV, Manual"],
+ "H": ["5 Door Wagon, Automatic or CVT", "5 Door Minivan, Automatic or CVT", "5 Door SUV, Automatic or CVT"]
+ }
+ }
+ }
+ },
+ "position8": {
+ "title": "Grade - Trim Level"
+ },
+ "position9": {
+ "title": "Check Digit"
+ },
+ "vis": {
+ "position10": {
+ "title": "Model Year",
+ "note": "I, O, Q, U, Z, and 0 are not used",
+ "codes": {
+ "A": ["1980", "2010"],
+ "B": "1981",
+ "C": "1982",
+ "D": "1983",
+ "E": "1984",
+ "F": "1985",
+ "G": "1986",
+ "H": "1987",
+ "J": "1988",
+ "K": "1989",
+ "L": "1990",
+ "M": "1991",
+ "N": "1992",
+ "P": "1993",
+ "R": "1994",
+ "S": "1995",
+ "T": "1996",
+ "V": "1997",
+ "W": "1998",
+ "X": "1999",
+ "Y": "2000",
+ "1": "2001",
+ "2": "2002",
+ "3": "2003",
+ "4": "2004",
+ "5": "2005",
+ "6": "2006",
+ "7": "2007",
+ "8": "2008",
+ "9": "2009"
+ }
+ },
+ "position11": {
+ "title": "Assembly Plant",
+ "codes": {
+ "A": "Marysville, Ohio, USA",
+ "B": ["Lincoln, Alabama, USA", "Aalst, Belgium"],
+ "C": ["Alliston, Ontario, Canada", "Saitama or Sayama, Japan"],
+ "D": "Guadalajara, Mexico",
+ "E": ["Greensburg, Indiana, USA", "Montesa, Spain"],
+ "F": ["Atessa, Italy", "Ping Tung Factory, Taiwan"],
+ "H": "Alliston, Ontario, Canada",
+ "J": "Karawang Factory, Indonesia",
+ "K": "Kumamoto, Japan",
+ "L": "East Liberty, Ohio, USA",
+ "M": "Hamamatsu, Japan",
+ "P": "Ayutthaya Factory, Thailand",
+ "R": "Manaus, Brazil",
+ "S": "Suzuka, Japan",
+ "T": "Tochigi, Japan",
+ "U": "Swindon, England",
+ "X": "El Salto, Mexico",
+ "Z": "Sao Paulo, Brazil",
+ "1": "Manaus, Brazil",
+ "2": "Guangzhou Factory, China",
+ "3": "Huangpu Guangzhou Factory, China",
+ "4": "Timmonsville, South Carolina, USA"
+ }
+ },
+ "positions12_17": {
+ "title": "Production Sequence Number",
+ "description": "Sequential starting from 000001",
+ "notes": [
+ "Position 12 can vary based on market",
+ "CDM Preludes 1997-2001 start with 8",
+ "Canadian models start at 800000",
+ "Position 12 can be letter or number in US",
+ "Positions 13-17 must be numbers"
+ ]
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fdfdd7a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,95 @@
+
+
+
+
+ Honda VIN/Chassis Decoder | Hondatabase
+ Honda VIN/Chassis Decoder
+
+
+
Just as every person has unique fingerprints, every vehicle carries its own distinctive identifier - the
+ Vehicle Information Number, commonly known as VIN.
+
+
This unique sequence serves as your vehicle's DNA, revealing crucial details about its origins: from its
+ manufacturing location and year of production to specific features like body type and trim specifications.
+
+
+
Understanding how to decode this vital information helps ensure accuracy when searching for compatible parts
+ or researching vehicle history.
+
+ Where to find your VIN?
+
+
+ Driver's side doorjamb
+
+
+ Driver's side windshield base
+
+
The VIN can be found in one of these two locations:
+
+ On a sticker in the driver's side doorjamb
+ Stamped at the base of the windshield on the driver's side
+
+ Images from Honda VIN Decoding and Chassis Codes by Honda-Tech
+
+
+
+ Load Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..ec7ee14
--- /dev/null
+++ b/script.js
@@ -0,0 +1,142 @@
+let vinData = null;
+const VIN_DEMO = 'JHMCB7559NC000001';
+const CHASSIS_DEMO = 'SJ30012345';
+
+const displayVIN = vin => {
+ const display = document.getElementById('vinDisplay');
+ display.innerHTML = '';
+
+ const sections =
+ vin.length === 17
+ ? {
+ wmi: ['Country', 'Manufacturer', 'Type'],
+ vds: ['Series', 'Series', 'Series', 'Body/Trans', 'Grade', 'Check'],
+ vis: ['Year', 'Plant', 'Serial', 'Serial', 'Serial', 'Serial', 'Serial', 'Serial'],
+ }
+ : {
+ pre: ['Car Line', 'Engine', 'Body/Trans', 'Generation'],
+ serial: ['#', '#', '#', '#', '#', '#'],
+ };
+
+ let currentIndex = 0;
+ Object.entries(sections).forEach(([section, types]) => {
+ types.forEach(type => {
+ const cell = document.createElement('div');
+ cell.className = 'cell';
+ cell.setAttribute('data-section', section);
+ cell.setAttribute('data-type', type);
+ if (vin.length === 17 && type === 'Year') cell.setAttribute('title', vinData['1981-present'].vis.position10.note);
+ if (vin.length === 17 && type === 'Serial') cell.setAttribute('title', vinData['1981-present'].vis.positions12_17.notes.join('\n'));
+ cell.textContent = vin[currentIndex] || ' ';
+ display.appendChild(cell);
+ currentIndex++;
+ });
+ });
+
+ // Update legend visibility
+ document.querySelector('.legend-17').classList.toggle('visible-17', vin.length === 17);
+ document.querySelector('.legend-10').classList.toggle('visible-10', vin.length === 10);
+};
+
+const decode = () => {
+ if (!vinData) return;
+ const input = document.getElementById('vinInput');
+ const vin = input.value.toUpperCase();
+ input.value = vin;
+ displayVIN(vin);
+
+ const result = document.getElementById('result');
+ result.innerHTML = '';
+
+ if (vin.length !== 17 && vin.length !== 10) {
+ result.innerHTML = 'Invalid length. Enter a 17-character VIN or 10-character chassis number.
';
+ return;
+ }
+
+ const info = document.createElement('div');
+ info.className = 'info';
+
+ if (vin.length === 10) {
+ const data = vinData['1973-1980'];
+ info.innerHTML = `
+ Chassis Number (1973-1980)
+ ${vin.slice(0, 2)} (${data.positions1_2.description})
+ ${data.position3.codes[vin[2]] || 'Unknown'}
+ ${data.position4.codes[vin[3]] || 'Unknown'}
+ ${vin.slice(4)} (${data.positions5_10.description})
+ `;
+ } else {
+ const data = vinData['1981-present'];
+ const wmi = vin.slice(0, 3);
+ const yearChar = vin[9];
+ const plant = vin[10];
+ const year = data.vis.position10.codes[yearChar];
+ const plantInfo = data.vis.position11.codes[plant];
+
+ info.innerHTML = `VIN (1981-present) `;
+
+ // WMI Section
+ const method2Match = data.wmiMethods.method2.positions1_3.codes[wmi];
+ if (method2Match) {
+ info.innerHTML += `${method2Match}
`;
+ } else {
+ const countryCode = data.wmiMethods.method1.position1.codes[vin[0]];
+ const manufacturer = data.wmiMethods.method1.position2.codes[vin[1]];
+ const vehicleType = data.wmiMethods.method1.position3.codes[vin[2]];
+
+ info.innerHTML += `
+ ${Array.isArray(countryCode) ? countryCode.join(', ') : countryCode || 'Unknown'}
+ ${manufacturer || 'Unknown'}
+ ${Array.isArray(vehicleType) ? vehicleType.join(', ') : vehicleType || 'Unknown'}
+ `;
+ }
+
+ // VDS Section
+ const vdsData = yearChar && parseInt(year) < 2010 ? (parseInt(year) < 1987 ? data.vds['1981-1986'] : data.vds['1987-2009']) : data.vds['2010-present'];
+
+ if (vdsData) {
+ const bodyTransCode = vin[6];
+ const bodyTrans = vdsData.position7?.codes[bodyTransCode];
+ const positions4_6Title = vdsData.positions4_6?.title || 'Car Line & Engine';
+ const position7Title = vdsData.position7?.title || 'Body & Transmission';
+
+ info.innerHTML += `
+ ${vin.slice(3, 6)} (${vdsData.positions4_6?.description || ''})
+ ${Array.isArray(bodyTrans) ? bodyTrans.join(' or ') : bodyTrans || 'Unknown'}
+ ${vin[7]}
+ ${vin[8]}
+ `;
+ }
+
+ // VIS Section
+ info.innerHTML += `
+ ${Array.isArray(year) ? year.join(' or ') : year || 'Unknown'}
+ ${Array.isArray(plantInfo) ? plantInfo.join(' or ') : plantInfo || 'Unknown'}
+ ${vin.slice(11)}
+ ${data.vis.positions12_17.notes.join('
+ `;
+ }
+
+ result.appendChild(info);
+};
+
+const loadDemo = () => {
+ const input = document.getElementById('vinInput');
+ const currentValue = input.value.toUpperCase();
+ let isVin = true;
+
+ if (currentValue === VIN_DEMO) isVin = false;
+ else if (currentValue === CHASSIS_DEMO) isVin = true;
+ else isVin = Math.random() < 0.5;
+
+ input.value = isVin ? VIN_DEMO : CHASSIS_DEMO;
+ document.getElementById('demoButton').textContent = `Load ${isVin ? 'Chassis' : 'VIN'} Demo`;
+ decode();
+};
+
+(async () => {
+ const response = await fetch('honda-vin-data.json');
+ vinData = await response.json();
+ document.getElementById('vinInput').addEventListener('input', decode);
+ loadDemo();
+})();
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..2c82725
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,326 @@
+:root {
+ --primary: #e31837;
+ --bg: #f8f9fa;
+ --text: #212529;
+ --border: #dee2e6;
+}
+
+body {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+ max-width: 1000px;
+ margin: 0 auto;
+ padding: 2rem;
+ background: var(--bg);
+ color: var(--text);
+ line-height: 1.5;
+}
+
+h1 {
+ color: var(--primary);
+ font-size: 2.5rem;
+ margin-bottom: 2rem;
+}
+
+#input-group {
+ display: flex;
+ gap: 1rem;
+ margin-bottom: 2rem;
+}
+
+input {
+ flex: 1;
+ padding: 0.75rem;
+ font-size: 1rem;
+ border: 2px solid var(--border);
+ border-radius: 0.5rem;
+ transition: border-color 0.2s;
+}
+
+input:focus {
+ outline: none;
+ border-color: var(--primary);
+}
+
+button {
+ padding: 0.75rem 1.5rem;
+ font-size: 1rem;
+ color: white;
+ background: var(--primary);
+ border: none;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ transition: opacity 0.2s;
+}
+
+button:hover {
+ opacity: 0.9;
+}
+
+#vinDisplay {
+ display: grid;
+ grid-template-columns: repeat(17, 1fr);
+ gap: 4px;
+ margin: 2rem 0;
+ background: white;
+ padding: 2rem 1rem 3rem;
+ border-radius: 0.5rem;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+}
+
+.cell {
+ aspect-ratio: 1;
+ border: 2px solid var(--border);
+ border-radius: 0.25rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1.2rem;
+ font-weight: 500;
+ background: white;
+ position: relative;
+}
+
+.cell::after {
+ content: attr(data-type);
+ position: absolute;
+ top: calc(100% + 0.5rem);
+ left: 50%;
+ transform: translateX(-50%) rotate(-45deg);
+ transform-origin: 0 0;
+ font-size: 0.65rem;
+ color: var(--text);
+ width: max-content;
+}
+
+.cell[data-section="wmi"] {
+ background: #e3f2fd;
+}
+
+.cell[data-section="vds"] {
+ background: #f3e5f5;
+}
+
+.cell[data-section="vis"] {
+ background: #e8f5e9;
+}
+
+.info {
+ background: white;
+ padding: 1.5rem;
+ border-radius: 0.5rem;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.info h3 {
+ color: var(--primary);
+ margin-top: 0;
+}
+
+.info p {
+ margin: 0.5rem 0;
+ display: grid;
+ grid-template-columns: 180px 1fr;
+ gap: 1rem;
+}
+
+.info p::before {
+ content: attr(data-label);
+ font-weight: 500;
+}
+
+.error {
+ color: var(--primary);
+ background: #fff5f5;
+ padding: 1rem;
+ border-radius: 0.5rem;
+ margin-top: 1rem;
+}
+
+.notes {
+ background: var(--bg);
+ padding: 1rem;
+ border-radius: 0.25rem;
+ margin-top: 1rem;
+ grid-template-columns: 1fr !important;
+}
+
+.notes::before {
+ display: none;
+}
+
+.notes small {
+ color: #666;
+ line-height: 1.6;
+}
+
+footer {
+ margin-top: 3rem;
+ padding-top: 2rem;
+ border-top: 1px solid var(--border);
+ text-align: center;
+ color: #666;
+}
+
+footer p {
+ margin: 0.5rem 0;
+}
+
+footer a {
+ color: var(--primary);
+ text-decoration: none;
+}
+
+footer a:hover {
+ text-decoration: underline;
+}
+
+.legend {
+ display: none;
+}
+
+#intro {
+ margin-bottom: 2rem;
+}
+
+#vin-location {
+ background: white;
+ border-radius: 0.5rem;
+ padding: 0.5rem 1rem;
+ margin-bottom: 2rem;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+#vin-location summary {
+ cursor: pointer;
+ padding: 0.5rem 0;
+ font-weight: 500;
+ color: var(--primary);
+}
+
+#vin-location summary:hover {
+ opacity: 0.9;
+}
+
+#attribution {
+ display: block;
+ text-align: center;
+ color: #666;
+ margin-top: 1rem;
+ font-style: italic;
+}
+
+#attribution a {
+ color: var(--primary);
+ text-decoration: none;
+}
+
+#attribution a:hover {
+ text-decoration: underline;
+}
+
+#image-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ margin: 1rem 0;
+}
+
+#image-grid figure {
+ margin: 0;
+}
+
+#image-grid img {
+ width: 100%;
+ border-radius: 0.5rem;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+#image-grid figcaption {
+ text-align: center;
+ margin-top: 0.5rem;
+ color: #666;
+}
+
+@media (max-width: 768px) {
+ body {
+ padding: 1rem;
+ }
+
+ #vinDisplay {
+ grid-template-columns: repeat(9, 1fr);
+ padding: 1rem 0.5rem 2rem;
+ }
+
+ .cell {
+ font-size: 1rem;
+ }
+
+ .cell::after {
+ display: none;
+ }
+
+ .legend {
+ display: none;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 0.5rem;
+ margin-top: 1rem;
+ font-size: 0.8rem;
+ }
+
+ .legend-17.visible-17 {
+ display: grid;
+ margin-bottom: 2rem;
+ }
+
+ .legend-10.visible-10 {
+ display: grid;
+ margin-bottom: 2rem;
+ }
+
+ .legend-item {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ .legend-item span {
+ width: 20px;
+ height: 20px;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ }
+
+ .legend-item[data-section="wmi"] span {
+ background: #e3f2fd;
+ }
+
+ .legend-item[data-section="vds"] span {
+ background: #f3e5f5;
+ }
+
+ .legend-item[data-section="vis"] span {
+ background: #e8f5e9;
+ }
+
+ .info p {
+ grid-template-columns: 1fr;
+ }
+
+ #input-group {
+ flex-direction: column;
+ }
+
+ button {
+ width: 100%;
+ }
+
+ footer {
+ margin-top: 2rem;
+ padding-top: 1.5rem;
+ }
+
+ #image-grid {
+ grid-template-columns: 1fr;
+ }
+}
\ No newline at end of file
+ 
+