Upload styles.css with huggingface_hub

styles.css

@@ -0,0 +1,319 @@
+:root {
+  --bg: #f5f1e8;
+  --panel: rgba(255, 252, 246, 0.88);
+  --ink: #13211c;
+  --muted: #53635c;
+  --line: rgba(19, 33, 28, 0.14);
+  --accent: #1e7a5e;
+  --accent-2: #b56b2d;
+  --science: #1e7a5e;
+  --entrepreneurship: #b56b2d;
+  --technology: #244f8f;
+  --shadow: 0 20px 50px rgba(19, 33, 28, 0.08);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at top left, rgba(30, 122, 94, 0.14), transparent 26%),
+    radial-gradient(circle at top right, rgba(181, 107, 45, 0.14), transparent 24%),
+    linear-gradient(180deg, #faf7f1 0%, var(--bg) 100%);
+  font-family: "Segoe UI", "Inter", sans-serif;
+}
+
+.page {
+  width: min(1180px, calc(100vw - 32px));
+  margin: 0 auto;
+  padding: 32px 0 56px;
+}
+
+.hero,
+.controls,
+.registry {
+  background: var(--panel);
+  backdrop-filter: blur(10px);
+  border: 1px solid var(--line);
+  border-radius: 28px;
+  box-shadow: var(--shadow);
+}
+
+.hero {
+  padding: 32px;
+}
+
+.eyebrow {
+  margin: 0 0 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  font-size: 12px;
+  color: var(--accent);
+  font-weight: 700;
+}
+
+.hero h1 {
+  margin: 0;
+  font-size: clamp(34px, 5vw, 56px);
+  line-height: 0.95;
+}
+
+.lede {
+  max-width: 760px;
+  color: var(--muted);
+  font-size: 18px;
+  line-height: 1.55;
+}
+
+.sublede {
+  max-width: 760px;
+  margin-top: 14px;
+  color: var(--ink);
+  line-height: 1.55;
+}
+
+.hero-links {
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  margin-top: 24px;
+}
+
+.hero-links a,
+.links a {
+  text-decoration: none;
+  border: 1px solid var(--line);
+  color: var(--ink);
+  background: #fff;
+  padding: 10px 14px;
+  border-radius: 999px;
+  font-weight: 600;
+}
+
+.controls {
+  margin-top: 18px;
+  padding: 20px;
+  display: grid;
+  grid-template-columns: 2fr repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.controls label {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.controls input,
+.controls select {
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  padding: 12px 14px;
+  font-size: 15px;
+  background: #fffdfa;
+  color: var(--ink);
+}
+
+.stats {
+  margin: 18px 0;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.stat {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  padding: 18px;
+  box-shadow: var(--shadow);
+}
+
+.stat.science {
+  border-color: rgba(30, 122, 94, 0.2);
+}
+
+.stat.entrepreneurship {
+  border-color: rgba(181, 107, 45, 0.2);
+}
+
+.stat.technology {
+  border-color: rgba(36, 79, 143, 0.2);
+}
+
+.stat.hybrid {
+  border-color: rgba(101, 63, 153, 0.2);
+}
+
+.stat-value {
+  font-size: 30px;
+  font-weight: 700;
+}
+
+.stat-label {
+  margin-top: 6px;
+  color: var(--muted);
+  font-size: 14px;
+}
+
+.registry {
+  padding: 24px;
+}
+
+.registry-header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 20px;
+}
+
+.registry-header h2 {
+  margin: 0;
+}
+
+.registry-note {
+  margin: 0 0 20px;
+  color: var(--muted);
+  line-height: 1.5;
+}
+
+.registry-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.card {
+  background: #fffdfa;
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.card-top {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.badge {
+  border-radius: 999px;
+  padding: 6px 10px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.badge.status {
+  background: rgba(19, 33, 28, 0.08);
+}
+
+.badge.combo {
+  background: rgba(101, 63, 153, 0.12);
+  color: #653f99;
+}
+
+.badge.science {
+  background: rgba(30, 122, 94, 0.12);
+  color: var(--science);
+}
+
+.badge.entrepreneurship {
+  background: rgba(181, 107, 45, 0.14);
+  color: var(--entrepreneurship);
+}
+
+.badge.technology {
+  background: rgba(36, 79, 143, 0.12);
+  color: var(--technology);
+}
+
+.badge.combo-s-t {
+  background: rgba(36, 79, 143, 0.1);
+  color: #244f8f;
+}
+
+.badge.combo-s-e {
+  background: rgba(181, 107, 45, 0.12);
+  color: #8c4f16;
+}
+
+.badge.combo-e-t {
+  background: rgba(91, 84, 173, 0.12);
+  color: #4b45a5;
+}
+
+.badge.combo-s-e-t {
+  background: rgba(118, 67, 111, 0.12);
+  color: #6b3564;
+}
+
+.title {
+  margin: 0;
+  font-size: 22px;
+}
+
+.summary {
+  margin: 0;
+  color: var(--muted);
+  line-height: 1.55;
+}
+
+.meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin: 0;
+}
+
+.meta div {
+  display: grid;
+  gap: 2px;
+}
+
+.meta dt {
+  color: var(--muted);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.meta dd {
+  margin: 0;
+}
+
+.links {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: auto;
+}
+
+.empty {
+  border: 1px dashed var(--line);
+  border-radius: 20px;
+  padding: 28px;
+  text-align: center;
+  color: var(--muted);
+  background: rgba(255, 255, 255, 0.5);
+}
+
+@media (max-width: 980px) {
+  .controls,
+  .stats,
+  .registry-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .meta {
+    grid-template-columns: 1fr;
+  }
+}