Spaces:

superdatas
/

education

Running

App Files Files Community

miguelgargallo commited on Dec 12, 2025

Commit

3ae4a70

1 Parent(s): f6d9bed

Design Update

Browse files

Files changed (7) hide show

README.md +4 -56
assets/avoid.svg +7 -0
assets/correct.svg +4 -0
content.json +118 -0
index.html +25 -260
main.js +99 -0
styles.css +337 -0

README.md CHANGED Viewed

@@ -1,62 +1,10 @@
 ---
-title: License Restrictive
-emoji: 😻
-colorFrom: pink
-colorTo: pink
 sdk: static
 pinned: false
 license: other
 ---
-# PYLAR AI CREATIVE ML RESTRICTIVE LICENSE
-Note: The name of the license indicates that this license was written with AI assistance, not that the protected content is AI-generated.
-Version 1.1, Jul 14th 2025
-Permission is hereby granted, free of charge, to any person obtaining a copy of the Pylar AI software and associated documentation files (the "Software"), to visualize and use the Software solely for educational and informative purposes, subject to the following restrictions and conditions:
-## Redistribution and Use Limitations:
-        The Software may not be redistributed, sublicensed, sold, or otherwise transferred to any third party without prior written permission from the licensor.
-        The Software may not be used for any commercial purposes or for any purpose other than education, research, and personal learning.
-        The end user is strictly prohibited from using any part of the Software's source code, including but not limited to copying, modifying, or creating derivative works based on the code.
-## No Self-Hosting:
-        The end user may not host or make the Software available to others via any means, including but not limited to local servers, cloud services, or online platforms.
-## Visualizing and Educative Purpose:
-        The end user is granted the right to use the Software solely for visualizing the outputs and results generated by the Software.
-        The end user may use the Software to provide marks or feedback on the visualized outputs, solely for educational and informative purposes.
-## Intellectual Property:
-        All intellectual property rights in the Software, including but not limited to copyrights, trademarks, and patents, shall remain the exclusive property of the licensor.
-        The end user acknowledges that this license does not grant any ownership or rights to the Software, other than the limited rights expressly stated herein.
-## No Warranty:
-        The Software is provided "as is," without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement.
-        The licensor shall not be liable for any claim, damages, or other liability arising out of or in connection with the use or performance of the Software.
-By using the Software, the end user agrees to be bound by the terms and conditions of this license. If you do not agree to these terms, you are not authorized to use the Software.
-|               | ✅ Allowed                                | ❌ Not Allowed                                 |
-| ------------- | ---------------------------------------- | --------------------------------------------- |
-|               | Visualize educational and informative    | Redistribute, sublicense, sell or transfer    |
-|               | results generated by the Software.       | the Software without prior written permission |
-|               |                                          | from the licensor.                            |
-|               |                                          |                                               |
-|               | Use the Software only for educational,   | Use any part of the source code,              |
-|               | research and personal learning purposes. | including copying, modifying or creating      |
-|               |                                          | derivative works.                             |
-|               |                                          |                                               |
-|               | Provide marks or feedback on visualized  | Host or make the Software available to        |
-|               | results for educational and informative  | others on local servers, cloud or online      |
-|               | purposes.                                | platforms.                                    |
-|               |                                          |                                               |
-| ❌ Not Allowed | Use the Software for commercial or       | Claim intellectual property rights over       |
-|               | non-educational purposes.                | the Software, except for the limited rights   |
-|               |                                          | expressly stated in the license.              |
-|               |                                          |                                               |
-|               | Hold the licensor responsible for        |                                               |
-|               | claims, damages or other liabilities     |                                               |
-|               | arising from the use or performance      |                                               |
-|               | of the Software.                         |                                               |

 ---
+title: PYLAR AI CREATIVE ML RESTRICTIVE LICENSE
+emoji: 🏛️
+colorFrom: indigo
+colorTo: indigo
 sdk: static
 pinned: false
 license: other
 ---

assets/avoid.svg ADDED Viewed

assets/correct.svg ADDED Viewed

content.json ADDED Viewed

	@@ -0,0 +1,118 @@

+{
+  "title": "PYLAR AI CREATIVE ML RESTRICTIVE LICENSE",
+  "version": "Version 1.1, Jul 14th 2025",
+  "subtitle": "License limited to visualization for educational purposes only, with strict no-redistribution, no-modification, and no-commercial-use restrictions.",
+  "meta": "SOFTWARE LICENSE AGREEMENT / RESTRICTIVE LICENSE",
+  "badge": "PYLAR AI RESTRICTIVE LICENSE",
+  "sectionLabel": "Overview",
+  "sourceUrl": "https://huggingface.co/spaces/superdatas/restrictive-license",
+  "sourceText": "Source:",
+  "sections": [
+    {
+      "title": "Note",
+      "content": "The name of the license indicates that this license was written with AI assistance, not that the protected content is AI-generated."
+    },
+    {
+      "title": "1. Permission",
+      "content": "Permission is hereby granted, free of charge, to any person obtaining a copy of the Pylar AI software and associated documentation files (the \"Software\"), to visualize and use the Software solely for educational and informative purposes, subject to the following restrictions and conditions."
+    },
+    {
+      "title": "2. Redistribution and Use Limitations",
+      "content": [
+        "The Software may not be redistributed, sublicensed, sold, or otherwise transferred to any third party without prior written permission from the licensor.",
+        "The Software may not be used for any commercial purposes or for any purpose other than education, research, and personal learning.",
+        "The end user is strictly prohibited from using any part of the Software's source code, including but not limited to copying, modifying, or creating derivative works based on the code."
+      ]
+    },
+    {
+      "title": "3. No Self-Hosting",
+      "content": "The end user may not host or make the Software available to others via any means, including but not limited to local servers, cloud services, or online platforms."
+    },
+    {
+      "title": "4. Visualizing and Educative Purpose",
+      "content": [
+        "The end user is granted the right to use the Software solely for visualizing the outputs and results generated by the Software.",
+        "The end user may use the Software to provide marks or feedback on the visualized outputs, solely for educational and informative purposes."
+      ]
+    },
+    {
+      "title": "5. Intellectual Property",
+      "content": [
+        "All intellectual property rights in the Software, including but not limited to copyrights, trademarks, and patents, shall remain the exclusive property of the licensor.",
+        "The end user acknowledges that this license does not grant any ownership or rights to the Software, other than the limited rights expressly stated herein."
+      ]
+    },
+    {
+      "title": "6. No Warranty",
+      "content": [
+        "The Software is provided \"as is,\" without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and non-infringement.",
+        "The licensor shall not be liable for any claim, damages, or other liability arising out of or in connection with the use or performance of the Software."
+      ]
+    },
+    {
+      "title": "7. Acceptance",
+      "content": "By using the Software, the end user agrees to be bound by the terms and conditions of this license. If you do not agree to these terms, you are not authorized to use the Software."
+    }
+  ],
+  "sidePanel": {
+    "pill": "✅ Visualize | ❌ No Code Use",
+    "principles": {
+      "title": "Allowed vs Prohibited",
+      "items": [
+        {
+          "type": "allow",
+          "text": "Visualize educational results"
+        },
+        {
+          "type": "allow",
+          "text": "Educational/research use only"
+        },
+        {
+          "type": "allow",
+          "text": "Provide feedback on outputs"
+        },
+        {
+          "type": "avoid",
+          "text": "Redistribute/sublicense/sell"
+        },
+        {
+          "type": "avoid",
+          "text": "Source code modification"
+        },
+        {
+          "type": "avoid",
+          "text": "Self-hosting platforms"
+        },
+        {
+          "type": "avoid",
+          "text": "Commercial use"
+        }
+      ]
+    },
+    "snapshot": {
+      "title": "License Snapshot",
+      "items": [
+        [
+          "Status",
+          "Active v1.1"
+        ],
+        [
+          "Scope",
+          "Educational Visualization"
+        ],
+        [
+          "Updated",
+          "July 14th 2025"
+        ],
+        [
+          "Jurisdiction",
+          "Global"
+        ]
+      ]
+    },
+    "hint": {
+      "title": "License Validity",
+      "text": "Always link to source URL below"
+    }
+  }
+}

index.html CHANGED Viewed

@@ -2,277 +2,42 @@
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>PYLAR AI CREATIVE ML RESTRICTIVE LICENSE</title>
-    <style>
-        :root {
-            --primary: #4361ee;
-            --secondary: #3a0ca3;
-            --accent: #f72585;
-            --allowed: #4cc9f0;
-            --prohibited: #f72585;
-            --light: #f8f9fa;
-            --dark: #212529;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            line-height: 1.6;
-            color: var(--dark);
-            background-color: var(--light);
-            padding: 2rem;
-        }
-        .container {
-            max-width: 900px;
-            margin: 0 auto;
-            background-color: white;
-            border-radius: 12px;
-            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
-            overflow: hidden;
-        }
-        header {
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            color: white;
-            padding: 2.5rem 2rem;
-            text-align: center;
-        }
-        h1 {
-            font-size: 2.2rem;
-            margin-bottom: 0.5rem;
-            font-weight: 800;
-        }
-        .version {
-            display: inline-block;
-            background-color: rgba(255, 255, 255, 0.2);
-            padding: 0.3rem 0.8rem;
-            border-radius: 20px;
-            font-size: 0.9rem;
-        }
-        .content {
-            padding: 2rem;
-        }
-        .intro {
-            margin-bottom: 2rem;
-            font-size: 1.1rem;
-            line-height: 1.7;
-        }
-        .section {
-            margin-bottom: 1.8rem;
-        }
-        h2 {
-            font-size: 1.4rem;
-            color: var(--secondary);
-            margin-bottom: 0.8rem;
-            border-bottom: 2px solid rgba(67, 97, 238, 0.2);
-            padding-bottom: 0.5rem;
-        }
-        ul {
-            padding-left: 1.5rem;
-            margin-bottom: 1rem;
-        }
-        li {
-            margin-bottom: 0.5rem;
-        }
-        .table-container {
-            margin: 2rem 0;
-            overflow-x: auto;
-        }
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            border-radius: 8px;
-            overflow: hidden;
-        }
-        th,
-        td {
-            padding: 1rem;
-            text-align: left;
-            border: 1px solid #e9ecef;
-        }
-        th {
-            background-color: var(--secondary);
-            color: white;
-        }
-        tr:nth-child(even) {
-            background-color: #f8f9fa;
-        }
-        .allowed {
-            color: var(--allowed);
-            font-weight: bold;
-        }
-        .prohibited {
-            color: var(--prohibited);
-            font-weight: bold;
-        }
-        @media (max-width: 768px) {
-            body {
-                padding: 1rem;
-            }
-            header {
-                padding: 1.5rem 1rem;
-            }
-            h1 {
-                font-size: 1.8rem;
-            }
-            .content {
-                padding: 1.5rem;
-            }
-            th,
-            td {
-                padding: 0.8rem;
-                font-size: 0.9rem;
-            }
-        }
-    </style>
 </head>
 <body>
-    <div class="container">
         <header>
-            <h1>PYLAR AI CREATIVE ML RESTRICTIVE LICENSE</h1>
-            <div class="version">Version 1.1, Jul 14th 2025</div>
-        </header>
-        <div class="content">
-            <p class="clarification">
-                Note: The name of the license indicates that this license was written with AI assistance, not that the protected content is AI-generated.
-            </p>
-            <p class="intro">
-                Permission is hereby granted, free of charge, to any person obtaining a copy of the Pylar AI software
-                and associated documentation files (the "Software"), to visualize and use the Software solely for
-                educational and informative purposes, subject to the following restrictions and conditions:
-            </p>
-            <div class="section">
-                <h2>Redistribution and Use Limitations</h2>
-                <ul>
-                    <li>The Software may not be redistributed, sublicensed, sold, or otherwise transferred to any third
-                        party without prior written permission from the licensor.</li>
-                    <li>The Software may not be used for any commercial purposes or for any purpose other than
-                        education, research, and personal learning.</li>
-                    <li>The end user is strictly prohibited from using any part of the Software's source code, including
-                        but not limited to copying, modifying, or creating derivative works based on the code.</li>
-                </ul>
-            </div>
-            <div class="section">
-                <h2>No Self-Hosting</h2>
-                <ul>
-                    <li>The end user may not host or make the Software available to others via any means, including but
-                        not limited to local servers, cloud services, or online platforms.</li>
-                </ul>
-            </div>
-            <div class="section">
-                <h2>Visualizing and Educative Purpose</h2>
-                <ul>
-                    <li>The end user is granted the right to use the Software solely for visualizing the outputs and
-                        results generated by the Software.</li>
-                    <li>The end user may use the Software to provide marks or feedback on the visualized outputs, solely
-                        for educational and informative purposes.</li>
-                </ul>
-            </div>
-            <div class="section">
-                <h2>Intellectual Property</h2>
-                <ul>
-                    <li>All intellectual property rights in the Software, including but not limited to copyrights,
-                        trademarks, and patents, shall remain the exclusive property of the licensor.</li>
-                    <li>The end user acknowledges that this license does not grant any ownership or rights to the
-                        Software, other than the limited rights expressly stated herein.</li>
-                </ul>
-            </div>
-            <div class="section">
-                <h2>No Warranty</h2>
-                <ul>
-                    <li>The Software is provided "as is," without warranty of any kind, express or implied, including
-                        but not limited to the warranties of merchantability, fitness for a particular purpose, and
-                        non-infringement.</li>
-                    <li>The licensor shall not be liable for any claim, damages, or other liability arising out of or in
-                        connection with the use or performance of the Software.</li>
-                </ul>
-            </div>
-            <p>By using the Software, the end user agrees to be bound by the terms and conditions of this license. If
-                you do not agree to these terms, you are not authorized to use the Software.</p>
-            <div class="table-container">
-                <table>
-                    <thead>
-                        <tr>
-                            <th></th>
-                            <th>✅ Allowed</th>
-                            <th>❌ Not Allowed</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td></td>
-                            <td>View educational and informative results generated by the Software.</td>
-                            <td>Redistribute, sublicense, sell, or transfer the Software without prior written
-                                permission from the licensor.</td>
-                        </tr>
-                        <tr>
-                            <td></td>
-                            <td>Use the Software only for educational purposes, research, and personal learning.</td>
-                            <td>Use any part of the source code, including copying, modifying, or creating derivative
-                                works.</td>
-                        </tr>
-                        <tr>
-                            <td></td>
-                            <td>Provide marks or feedback on visualized results for educational and informative
-                                purposes.</td>
-                            <td>Host or make the Software available to others via local servers, cloud services, or
-                                online platforms.</td>
-                        </tr>
-                        <tr>
-                            <td>❌ Not Allowed</td>
-                            <td>Use the Software for commercial or non-educational purposes.</td>
-                            <td>Claim intellectual property rights to the Software, except for the limited rights
-                                expressly stated in the license.</td>
-                        </tr>
-                        <tr>
-                            <td></td>
-                            <td>Hold the licensor liable for claims, damages, or other liabilities arising from the use
-                                or performance of the Software.</td>
-                            <td></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
         </div>
     </div>
 </body>
 </html>

 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title data-title></title>
+  <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
+  <div class="page">
+    <div class="frame">
+      <div class="card">
         <header>
+          <h1 class="htitle" data-badge></h1>
+          <hpill>
+            <span class="title-version" data-version></span>
+          </hpill>
+          <p class="subtitle" data-subtitle></p>
+          <p class="meta" data-meta></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></strong>
+          <a data-source-url href="#" target="_blank" rel="noreferrer"></a>
         </div>
+      </div>
     </div>
+  </div>
+  <script src="main.js"></script>
 </body>
 </html>

main.js ADDED Viewed

	@@ -0,0 +1,99 @@

+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
+    const sourceUrlEl = document.querySelector("[data-source-url]");
+    sourceUrlEl.href = content.sourceUrl;
+    sourceUrlEl.textContent = content.sourceUrl || "No source available";
+    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.className = "section";
+      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>
+        <div class="principles-list" data-principles></div>
+      </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>
+    `;
+    // Render principles with SVG icons
+    const principlesList = document.querySelector("[data-principles]");
+    if (content.sidePanel.principles.items) {
+      const items = content.sidePanel.principles.items;
+      const allowedItems = items.filter(item => item.type === 'allow');
+      const avoidItems = items.filter(item => item.type === 'avoid');
+      principlesList.innerHTML = `
+        <div class="permissions-group">
+          ${allowedItems.map(item => `
+            <div class="permission-item">
+              <img src="assets/correct.svg" width="16" height="16" alt="Allowed" />
+              <span>${item.text}</span>
+            </div>
+          `).join('')}
+        </div>
+        <div class="permissions-group avoid">
+          ${avoidItems.map(item => `
+            <div class="permission-item">
+              <img src="assets/avoid.svg" width="16" height="16" alt="Prohibited" />
+              <span>${item.text}</span>
+            </div>
+          `).join('')}
+        </div>
+      `;
+    }
+  } catch (error) {
+    console.error("Error loading content:", error);
+    document.body.innerHTML = "<h1>Error loading license content</h1>";
+  }
+}
+loadContent();

styles.css ADDED Viewed

	@@ -0,0 +1,337 @@

+: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 styles */
+header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 20px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  padding-bottom: 16px;
+}
+.htitle {
+  font-size: 22px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+hpill {
+  font-size: 22px;
+  font-weight: 650;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.title-version {
+  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 content */
+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;
+}
+/* Side panel */
+.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;
+}
+/* Permissions list */
+.permissions-group {
+  margin-bottom: 12px;
+}
+.permissions-group:last-child {
+  margin-bottom: 0;
+}
+.permissions-group.avoid {
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+.permission-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-family: monospace;
+  font-size: 13px;
+}
+.permission-item span {
+  color: var(--text-muted);
+}
+.permissions-group.avoid .permission-item span {
+  color: #fca5a5;
+}
+.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 (min-width: 900px) {
+  .htitle {
+    font-size: 28px;
+  }
+}
+@media (max-width: 900px) {
+  body {
+    padding: 16px 10px;
+  }
+  .card {
+    padding: 20px 16px 18px;
+  }
+  main {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+@media (max-width: 600px) {
+  .htitle {
+    font-size: 18px;
+  }
+  .subtitle {
+    font-size: 12px;
+  }
+  .license-content {
+    font-size: 13px;
+  }
+}