New Design

content.json

@@ -0,0 +1,87 @@
+{
+  "title": "PylarAI 3rd Party License",
+  "version": "Version 1.0 December 2025",
+  "subtitle": "Software License Agreement focused on strict third-party compliance, transparent attribution, and responsible integration of external components in any derived project or deliverable.",
+  "meta": "SOFTWARE LICENSE AGREEMENT / THIRD-PARTY COMPLIANCE",
+  "badge": "PYLARAI 3RD PARTY LICENSE",
+  "sectionLabel": "Overview",
+  "sourceUrl": "https://huggingface.co/spaces/superdatas/pylarai3rdpartylicense",
+  "sourceText": "Source:",
+  "sections": [
+    {
+      "title": "1. Definitions",
+      "content": [
+        "<strong>Software</strong>: Refers to the program, application, component, script, or any digital material licensed under this agreement.",
+        "<strong>Third-Party Components</strong>: Includes any code, library, plugin, module, content, or technology developed by an entity other than the Licensor.",
+        "<strong>Project Deliverables</strong>: Any derivative content, result, modification, or integration involving the use of the Software or any third-party component.",
+        "<strong>End User</strong>: Any individual or legal entity that uses, distributes, or adapts the Software within the boundaries defined by this license."
+      ]
+    },
+    {
+      "title": "2. Grant of Rights",
+      "content": "The Licensor grants the End User a non-exclusive, non-transferable, and revocable authorization to use the Software solely for development, testing, or integration purposes, provided that these conditions are fully respected."
+    },
+    {
+      "title": "3. Third-Party Respect and Compliance",
+      "content": [
+        "Any third-party component, resource, or technology included or referenced within a derivative project must retain its original license, notices, and restrictions without alteration.",
+        "The End User is responsible for verifying the applicable license terms of every third-party component used before distributing or modifying any of its contents.",
+        "The Software may not be used to bypass, modify, or violate third-party license terms, nor to reassign credit, ownership, or intellectual property rights belonging to others.",
+        "When redistributing or delivering a Project Deliverable that integrates third-party software, the provenance, version, and license of each component must be explicitly documented."
+      ]
+    },
+    {
+      "title": "4. Modifications and Derivative Work",
+      "content": [
+        "Any modification, extension, integration, or plugin created based on the Software must respect the dependencies and third-party components embedded in its original structure.",
+        "Removal, suppression, or replacement of trademarks, credits, or identifiers belonging to third-party entities integrated by the original author or supplier is strictly prohibited."
+      ]
+    },
+    {
+      "title": "5. Liability and Warranty Disclaimer",
+      "content": [
+        "The Software and its components are provided \"as is,\" without any express or implied warranties, including but not limited to merchantability, fitness for a particular purpose, or non-infringement of third-party rights.",
+        "The Licensor shall not be held liable for any claim, damage, or loss arising from the use of third-party components or from non-compliance with their license terms."
+      ]
+    },
+    {
+      "title": "6. Acceptance of Terms",
+      "content": [
+        "By using the Software, the End User acknowledges and accepts all terms and conditions stated herein.",
+        "If the End User does not agree to these terms, they are not authorized to install, use, modify, or distribute the Software."
+      ]
+    }
+  ],
+  "sidePanel": {
+    "pill": "Third-Party First",
+    "principles": {
+      "title": "Design Principles",
+      "text": "Minimal surface, maximum clarity: the focus stays on the legal text, with a layout optimized for reading and section scanning across devices."
+    },
+    "snapshot": {
+      "title": "License Snapshot",
+      "items": [
+        [
+          "Status",
+          "Active v1.0"
+        ],
+        [
+          "Scope",
+          "Third-Party Compliance"
+        ],
+        [
+          "Updated",
+          "December 2025"
+        ],
+        [
+          "Jurisdiction",
+          "Global Use"
+        ]
+      ]
+    },
+    "hint": {
+      "title": "Implementation Hint",
+      "text": "Include this license alongside your model or application documentation and reference it explicitly in your project's README or Terms section for transparency."
+    }
+  }
+}

index.html

@@ -1,499 +1,123 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <title>PylarAI 3rd Party License</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <style>
-      :root {
-        --bg: #050608;
-        --card-bg: #0d0f14;
-        --accent: #e63946;
-        --accent-soft: rgba(230, 57, 70, 0.18);
-        --text-main: #f5f5f7;
-        --text-muted: #9ea3b5;
-        --border-soft: rgba(255, 255, 255, 0.06);
-        --code-bg: #11141c;
-        --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.6);
-        --radius-lg: 18px;
-        --radius-sm: 8px;
-        --font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
-          "Segoe UI", sans-serif;
-      }
-
-      * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-      }
-
-      html,
-      body {
-        height: 100%;
-        background: radial-gradient(circle at top, #151824 0, #050608 55%);
-        color: var(--text-main);
-        font-family: var(--font-main);
-        -webkit-font-smoothing: antialiased;
-      }
-
-      body {
-        /* Antes: align-items:center; ahora arriba para que no se corte */
-        display: flex;
-        justify-content: center;
-        padding: 24px 12px;
-        overflow-y: auto;
-      }
-
-      .page {
-        width: 100%;
-        max-width: 960px;
-      }
-
-      .frame {
-        background: linear-gradient(
-          135deg,
-          rgba(230, 57, 70, 0.08),
-          transparent
-        );
-        border-radius: 24px;
-        padding: 1px;
-        box-shadow: var(--shadow-soft);
-      }
-
-      .card {
-        background: radial-gradient(circle at top left, #151926 0, #050609 60%);
-        border-radius: 22px;
-        padding: 24px 20px 22px;
-        border: 1px solid var(--border-soft);
-        backdrop-filter: blur(16px);
-      }
-
-      header {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        margin-bottom: 20px;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-        padding-bottom: 16px;
-      }
-
-      .badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 11px;
-        letter-spacing: 0.14em;
-        text-transform: uppercase;
-        color: var(--text-muted);
-      }
-
-      .badge-dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 999px;
-        background: var(--accent);
-        box-shadow: 0 0 12px var(--accent);
-      }
-
-      h1 {
-        font-size: 22px;
-        font-weight: 630;
-        letter-spacing: 0.03em;
-        text-transform: uppercase;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: 8px;
-      }
-
-      h1 span {
-        font-size: 12px;
-        font-weight: 400;
-        color: var(--accent);
-        padding: 3px 9px;
-        border-radius: 999px;
-        background: var(--accent-soft);
-        border: 1px solid rgba(230, 57, 70, 0.45);
-      }
 
-      .subtitle {
-        font-size: 13px;
-        color: var(--text-muted);
-        max-width: 580px;
-        line-height: 1.5;
-      }
-
-      .meta {
-        font-size: 10px;
-        color: var(--text-muted);
-        text-transform: uppercase;
-        letter-spacing: 0.16em;
-        margin-top: 2px;
-      }
-
-      main {
-        display: grid;
-        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
-        gap: 20px;
-      }
-
-      /* Mejoras responsive */
-      @media (max-width: 900px) {
-        body {
-          padding: 16px 10px;
-        }
-        .card {
-          padding: 20px 16px 18px;
-        }
-        main {
-          grid-template-columns: minmax(0, 1fr);
-        }
-      }
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title data-title>PylarAI 3rd Party License</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <div class="page">
+    <div class="frame">
+      <div class="card">
+        <header>
+          <div class="badge" data-badge>PYLARAI 3RD PARTY LICENSE</div>
+          <h1 data-title>
+            PylarAI 3rd Party License
+            <span data-version>Version 1.0 December 2025</span>
+          </h1>
+          <p class="subtitle" data-subtitle></p>
+          <p class="meta" data-meta>
+            SOFTWARE LICENSE AGREEMENT / THIRD-PARTY COMPLIANCE
+          </p>
+        </header>
+        <main>
+          <section class="license-content" data-sections></section>
+
+          <aside class="side-panel" data-sidepanel></aside>
+        </main>
+
+        <div class="source-block" data-source>
+          <strong data-source-text>Source:</strong>
+          <a data-source-url href="#" target="_blank" rel="noreferrer"></a>
+        </div>
+      </div>
+    </div>
 
-      @media (max-width: 600px) {
-        h1 {
-          font-size: 18px;
-        }
-        .subtitle {
-          font-size: 12px;
+    <script>
+      async function loadContent() {
+        try {
+          const response = await fetch("content.json");
+          const content = await response.json();
+
+          // Header
+          document.querySelector("[data-title]").textContent = content.title;
+          document.querySelector("[data-version]").textContent =
+            content.version;
+          document.querySelector("[data-subtitle]").textContent =
+            content.subtitle;
+          document.querySelector("[data-meta]").textContent = content.meta;
+          document.querySelector("[data-badge]").textContent = content.badge;
+          document.title = content.title;
+
+          // Source
+          document.querySelector("[data-source-url]").href = content.sourceUrl;
+          document.querySelector("[data-source-url]").textContent =
+            content.sourceUrl;
+          document.querySelector("[data-source-text]").textContent =
+            content.sourceText;
+
+          // Sections
+          const sectionsContainer = document.querySelector("[data-sections]");
+          content.sections.forEach((section) => {
+            const sectionEl = document.createElement("div");
+            sectionEl.innerHTML = `
+                        <div class="section-label">${content.sectionLabel}</div>
+                        <h2>${section.title}</h2>
+                        ${Array.isArray(section.content)
+                ? `<ul>${section.content
+                  .map((item) => `<li>${item}</li>`)
+                  .join("")}</ul>`
+                : `<p>${section.content}</p>`
+              }
+                    `;
+            sectionsContainer.appendChild(sectionEl);
+          });
+
+          // Side panel
+          const sidePanel = document.querySelector("[data-sidepanel]");
+          sidePanel.innerHTML = `
+                    <div class="side-card">
+                        <div class="pill">
+                            <span class="pill-dot"></span>
+                            ${content.sidePanel.pill}
+                        </div>
+                        <h3 class="side-title">${content.sidePanel.principles.title
+            }</h3>
+                        <p class="side-text">${content.sidePanel.principles.text
+            }</p>
+                    </div>
+                    <div class="side-card">
+                        <h3 class="side-title">${content.sidePanel.snapshot.title
+            }</h3>
+                        <div class="meta-grid">
+                            ${content.sidePanel.snapshot.items
+              .map(
+                ([key, value]) => `
+                                <div class="meta-item">
+                                    <span>${key}</span>
+                                    <span>${value}</span>
+                                </div>
+                            `
+              )
+              .join("")}
+                        </div>
+                    </div>
+                    <div class="side-card">
+                        <h3 class="side-title">${content.sidePanel.hint.title
+            }</h3>
+                        <p class="side-text">${content.sidePanel.hint.text}</p>
+                    </div>
+                `;
+        } catch (error) {
+          console.error("Error loading content:", error);
         }
-        .license-content {
-          font-size: 13px;
-        }
-      }
-
-      .license-content {
-        font-size: 14px;
-        line-height: 1.7;
-        color: var(--text-main);
-      }
-
-      .license-content h2 {
-        font-size: 15px;
-        font-weight: 600;
-        margin: 16px 0 8px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .license-content h2::before {
-        content: "";
-        width: 18px;
-        height: 1px;
-        background: linear-gradient(90deg, var(--accent), transparent);
-      }
-
-      .license-content p {
-        margin-bottom: 10px;
-        color: var(--text-main);
-      }
-
-      .license-content ul {
-        margin: 6px 0 12px 18px;
-        list-style: none;
-      }
-
-      .license-content li {
-        position: relative;
-        margin-bottom: 6px;
-        color: var(--text-muted);
-      }
-
-      .license-content li::before {
-        content: "•";
-        position: absolute;
-        left: -14px;
-        color: var(--accent);
-      }
-
-      .section-label {
-        font-size: 11px;
-        text-transform: uppercase;
-        letter-spacing: 0.18em;
-        color: var(--text-muted);
-        margin-bottom: 2px;
       }
 
-      .pill {
-        display: inline-flex;
-        align-items: center;
-        gap: 6px;
-        font-size: 11px;
-        color: var(--accent);
-        background: rgba(230, 57, 70, 0.08);
-        border-radius: 999px;
-        padding: 4px 10px;
-        border: 1px solid rgba(230, 57, 70, 0.3);
-        margin-bottom: 8px;
-      }
-
-      .pill-dot {
-        width: 6px;
-        height: 6px;
-        border-radius: 999px;
-        background: var(--accent);
-      }
+      loadContent();
+    </script>
+</body>
 
-      .side-panel {
-        border-radius: 16px;
-        padding: 14px 14px 12px;
-        background: linear-gradient(
-          145deg,
-          rgba(255, 255, 255, 0.02),
-          rgba(0, 0, 0, 0.4)
-        );
-        border: 1px solid var(--border-soft);
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-      }
-
-      .side-card {
-        padding: 10px 10px 9px;
-        border-radius: 13px;
-        background: rgba(5, 7, 12, 0.9);
-        border: 1px solid rgba(255, 255, 255, 0.04);
-      }
-
-      .side-title {
-        font-size: 12px;
-        font-weight: 600;
-        margin-bottom: 4px;
-      }
-
-      .side-text {
-        font-size: 12px;
-        color: var(--text-muted);
-        line-height: 1.5;
-      }
-
-      .meta-grid {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 8px;
-        margin-top: 6px;
-      }
-
-      .meta-item {
-        font-size: 11px;
-        color: var(--text-muted);
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-      }
-
-      .meta-item span:first-child {
-        text-transform: uppercase;
-        letter-spacing: 0.16em;
-        font-size: 10px;
-        color: rgba(158, 163, 181, 0.75);
-      }
-
-      a {
-        color: var(--accent);
-        text-decoration: none;
-        border-bottom: 1px solid rgba(230, 57, 70, 0.4);
-      }
-
-      a:hover {
-        border-bottom-color: var(--accent);
-      }
-
-      .source-block {
-        margin-top: 10px;
-        font-size: 12px;
-        padding: 8px 10px;
-        border-radius: var(--radius-sm);
-        background: var(--code-bg);
-        border: 1px solid rgba(255, 255, 255, 0.04);
-        color: var(--text-muted);
-        word-break: break-all;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="page">
-      <div class="frame">
-        <div class="card">
-          <header>
-            <div class="badge">
-              <span class="badge-dot"></span>
-              PYLARAI 3RD PARTY LICENSE
-            </div>
-            <h1>
-              PylarAI 3rd Party License
-              <span>Version 1.0 – December 2025</span>
-            </h1>
-            <p class="subtitle">
-              Software License Agreement focused on strict third-party
-              compliance, transparent attribution, and responsible integration
-              of external components in any derived project or deliverable.
-            </p>
-            <p class="meta">
-              SOFTWARE LICENSE AGREEMENT · THIRD‑PARTY COMPLIANCE
-            </p>
-          </header>
-
-          <main>
-            <section class="license-content">
-              <div class="section-label">Overview</div>
-              <p>Software License Agreement - Third-Party Compliance</p>
-
-              <h2>1. Definitions</h2>
-              <ul>
-                <li>
-                  <strong>Software</strong>: Refers to the program, application,
-                  component, script, or any digital material licensed under this
-                  agreement.
-                </li>
-                <li>
-                  <strong>Third-Party Components</strong>: Includes any code,
-                  library, plugin, module, content, or technology developed by
-                  an entity other than the Licensor.
-                </li>
-                <li>
-                  <strong>Project Deliverable</strong>: Any derivative content,
-                  result, modification, or integration involving the use of the
-                  Software or any third-party component.
-                </li>
-                <li>
-                  <strong>End User</strong>: Any individual or legal entity that
-                  uses, distributes, or adapts the Software within the
-                  boundaries defined by this license.
-                </li>
-              </ul>
-
-              <h2>2. Grant of Rights</h2>
-              <p>
-                The Licensor grants the End User a non-exclusive,
-                non-transferable, and revocable authorization to use the
-                Software solely for development, testing, or integration
-                purposes, provided that these conditions are fully respected.
-              </p>
-
-              <h2>3. Third-Party Respect and Compliance</h2>
-              <ul>
-                <li>
-                  Any third-party component, resource, or technology included or
-                  referenced within a derivative project must retain its
-                  original license, notices, and restrictions without
-                  alteration.
-                </li>
-                <li>
-                  The End User is responsible for verifying the applicable
-                  license terms of every third-party component used before
-                  distributing or modifying any of its contents.
-                </li>
-                <li>
-                  The Software may not be used to bypass, modify, or violate
-                  third-party license terms, nor to reassign credit, ownership,
-                  or intellectual property rights belonging to others.
-                </li>
-                <li>
-                  When redistributing or delivering a Project Deliverable that
-                  integrates third-party software, the provenance, version, and
-                  license of each component must be explicitly documented.
-                </li>
-              </ul>
-
-              <h2>4. Modifications and Derivative Work</h2>
-              <ul>
-                <li>
-                  Any modification, extension, integration, or plugin created
-                  based on the Software must respect the dependencies and
-                  third-party components embedded in its original structure.
-                </li>
-                <li>
-                  Removal, suppression, or replacement of trademarks, credits,
-                  or identifiers belonging to third-party entities integrated by
-                  the original author or supplier is strictly prohibited.
-                </li>
-              </ul>
-
-              <h2>5. Liability and Warranty Disclaimer</h2>
-              <p>
-                The Software and its components are provided “as is,” without
-                any express or implied warranties, including but not limited to
-                merchantability, fitness for a particular purpose, or
-                non-infringement of third-party rights.
-              </p>
-              <p>
-                The Licensor shall not be held liable for any claim, damage, or
-                loss arising from the use of third-party components or from
-                non-compliance with their license terms.
-              </p>
-
-              <h2>6. Acceptance of Terms</h2>
-              <p>
-                By using the Software, the End User acknowledges and accepts all
-                terms and conditions stated herein.
-              </p>
-              <p>
-                If the End User does not agree to these terms, they are not
-                authorized to install, use, modify, or distribute the Software.
-              </p>
-
-              <div class="source-block">
-                Source:
-                <a
-                  href="https://huggingface.co/spaces/superdatas/pylarai3rdpartylicense"
-                  target="_blank"
-                  rel="noreferrer"
-                >
-                  https://huggingface.co/spaces/superdatas/pylarai3rdpartylicense
-                </a>
-              </div>
-            </section>
-
-            <aside class="side-panel">
-              <div class="side-card">
-                <div class="pill">
-                  <span class="pill-dot"></span>
-                  Third-Party First
-                </div>
-                <h3 class="side-title">Design Principles</h3>
-                <p class="side-text">
-                  Minimal surface, maximum clarity: the focus stays on the legal
-                  text, with a layout optimized for reading and section scanning
-                  across devices.
-                </p>
-              </div>
-
-              <div class="side-card">
-                <h3 class="side-title">License Snapshot</h3>
-                <div class="meta-grid">
-                  <div class="meta-item">
-                    <span>Status</span>
-                    <span>Active · v1.0</span>
-                  </div>
-                  <div class="meta-item">
-                    <span>Scope</span>
-                    <span>Third-Party Compliance</span>
-                  </div>
-                  <div class="meta-item">
-                    <span>Updated</span>
-                    <span>December 2025</span>
-                  </div>
-                  <div class="meta-item">
-                    <span>Jurisdiction</span>
-                    <span>Global Use</span>
-                  </div>
-                </div>
-              </div>
-
-              <div class="side-card">
-                <h3 class="side-title">Implementation Hint</h3>
-                <p class="side-text">
-                  Include this license alongside your model or application
-                  documentation and reference it explicitly in your project’s
-                  README or Terms section for transparency.
-                </p>
-              </div>
-            </aside>
-          </main>
-        </div>
-      </div>
-    </div>
-  </body>
 </html>

styles.css

@@ -0,0 +1,304 @@
+:root {
+  --bg: #050608;
+  --card-bg: #0d0f14;
+  --accent: #e63946;
+  --accent-soft: rgba(230, 57, 70, 0.18);
+  --text-main: #f5f5f7;
+  --text-muted: #9ea3b5;
+  --border-soft: rgba(255, 255, 255, 0.06);
+  --code-bg: #11141c;
+  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.6);
+  --radius-lg: 18px;
+  --radius-sm: 8px;
+  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
+    Segoe UI, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body {
+  height: 100%;
+  background: radial-gradient(circle at top, #151824 0%, #050608 55%);
+  color: var(--text-main);
+  font-family: var(--font-main);
+  -webkit-font-smoothing: antialiased;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  padding: 24px 12px;
+  overflow-y: auto;
+}
+
+.page {
+  width: 100%;
+  max-width: 960px;
+}
+
+.frame {
+  background: linear-gradient(135deg, rgba(230, 57, 70, 0.08), transparent);
+  border-radius: 24px;
+  padding: 1px;
+  box-shadow: var(--shadow-soft);
+}
+
+.card {
+  background: radial-gradient(circle at top left, #151926 0%, #050609 60%);
+  border-radius: 22px;
+  padding: 24px 20px 22px;
+  border: 1px solid var(--border-soft);
+  backdrop-filter: blur(16px);
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  padding-bottom: 16px;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 11px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+.badge-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--accent);
+  box-shadow: 0 0 12px var(--accent);
+}
+
+h1 {
+  font-size: 22px;
+  font-weight: 630;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+h1 span {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--accent);
+  padding: 3px 9px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+  border: 1px solid rgba(230, 57, 70, 0.45);
+}
+
+.subtitle {
+  font-size: 13px;
+  color: var(--text-muted);
+  max-width: 580px;
+  line-height: 1.5;
+}
+
+.meta {
+  font-size: 10px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  margin-top: 2px;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
+  gap: 20px;
+}
+
+.license-content {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--text-main);
+}
+
+.license-content h2 {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 16px 0 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.license-content h2::before {
+  content: "";
+  width: 18px;
+  height: 1px;
+  background: linear-gradient(90deg, var(--accent), transparent);
+}
+
+.license-content p {
+  margin-bottom: 10px;
+  color: var(--text-main);
+}
+
+.license-content ul {
+  margin: 6px 0 12px 18px;
+  list-style: none;
+}
+
+.license-content li {
+  position: relative;
+  margin-bottom: 6px;
+  color: var(--text-muted);
+}
+
+.license-content li::before {
+  content: "→";
+  position: absolute;
+  left: -14px;
+  color: var(--accent);
+}
+
+.section-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--text-muted);
+  margin-bottom: 2px;
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--accent);
+  background: rgba(230, 57, 70, 0.08);
+  border-radius: 999px;
+  padding: 4px 10px;
+  border: 1px solid rgba(230, 57, 70, 0.3);
+  margin-bottom: 8px;
+}
+
+.pill-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--accent);
+}
+
+.side-panel {
+  border-radius: 16px;
+  padding: 14px 14px 12px;
+  background: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, 0.02),
+    rgba(0, 0, 0, 0.4)
+  );
+  border: 1px solid var(--border-soft);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.side-card {
+  padding: 10px 10px 9px;
+  border-radius: 13px;
+  background: rgba(5, 7, 12, 0.9);
+  border: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+.side-title {
+  font-size: 12px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.side-text {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.5;
+}
+
+.meta-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 6px;
+}
+
+.meta-item {
+  font-size: 11px;
+  color: var(--text-muted);
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.meta-item span:first-child {
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  font-size: 10px;
+  color: rgba(158, 163, 181, 0.75);
+}
+
+a {
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 1px solid rgba(230, 57, 70, 0.4);
+}
+
+a:hover {
+  border-bottom-color: var(--accent);
+}
+
+.source-block {
+  margin-top: 10px;
+  font-size: 12px;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm);
+  background: var(--code-bg);
+  border: 1px solid rgba(255, 255, 255, 0.04);
+  color: var(--text-muted);
+  word-break: break-all;
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+  body {
+    padding: 16px 10px;
+  }
+
+  .card {
+    padding: 20px 16px 18px;
+  }
+
+  main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  h1 {
+    font-size: 18px;
+  }
+
+  .subtitle {
+    font-size: 12px;
+  }
+
+  .license-content {
+    font-size: 13px;
+  }
+}