add

README.md

@@ -5,6 +5,7 @@ colorFrom: purple
 colorTo: gray
 sdk: static
 pinned: false
+short_description: '--'
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

style.css

@@ -1,28 +1,308 @@
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+html {
+	scroll-behavior: smooth;
+}
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
+	line-height: 1.7;
+	color: #3d3d3a;
+	background: #f9f8f5;
+}
+
+@media (prefers-color-scheme: dark) {
+	body {
+		background: #1a1a18;
+		color: #c2c0b6;
+	}
+}
+
+.container {
+	max-width: 1200px;
+	margin: 0 auto;
+	padding: 0 24px;
+}
+
+header {
+	background: linear-gradient(135deg, #e6f1fb 0%, #eaedfe 100%);
+	padding: 60px 0;
+	margin-bottom: 40px;
+	border-bottom: 1px solid #ddd;
+}
+
+@media (prefers-color-scheme: dark) {
+	header {
+		background: linear-gradient(135deg, #0c3a5c 0%, #2a1d4a 100%);
+		border-bottom-color: #444;
+	}
 }
 
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+	font-size: 32px;
+	font-weight: 600;
+	margin-bottom: 12px;
+	line-height: 1.2;
+}
+
+.subtitle {
+	font-size: 18px;
+	color: #666;
+	margin-bottom: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+	.subtitle {
+		color: #999;
+	}
+}
+
+.tagline {
+	font-size: 14px;
+	color: #999;
+	margin-top: 16px;
+}
+
+@media (prefers-color-scheme: dark) {
+	.tagline {
+		color: #666;
+	}
+}
+
+h2 {
+	font-size: 24px;
+	font-weight: 600;
+	margin: 48px 0 20px 0;
+	padding-top: 24px;
+	border-top: 1px solid #ddd;
+}
+
+@media (prefers-color-scheme: dark) {
+	h2 {
+		border-top-color: #444;
+	}
+}
+
+h3 {
+	font-size: 18px;
+	font-weight: 600;
+	margin: 32px 0 16px 0;
 }
 
 p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+	margin-bottom: 16px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
+ul,
+ol {
+	margin-bottom: 16px;
+	margin-left: 24px;
+}
+
+li {
+	margin-bottom: 8px;
+}
+
+code {
+	background: #f0ede5;
+	padding: 2px 6px;
+	border-radius: 4px;
+	font-family: "Courier New", monospace;
+	font-size: 14px;
+}
+
+@media (prefers-color-scheme: dark) {
+	code {
+		background: #2a2a28;
+	}
+}
+
+pre {
+	background: #f0ede5;
+	padding: 16px;
+	border-radius: 8px;
+	overflow-x: auto;
+	margin-bottom: 16px;
+	font-size: 13px;
+	line-height: 1.5;
+}
+
+@media (prefers-color-scheme: dark) {
+	pre {
+		background: #2a2a28;
+	}
+}
+
+.diagram {
+	background: var(--color-bg, #fff);
+	border: 1px solid #ddd;
+	border-radius: 8px;
+	padding: 24px;
+	margin: 24px 0;
+	overflow-x: auto;
+}
+
+@media (prefers-color-scheme: dark) {
+	.diagram {
+		background: #242423;
+		border-color: #444;
+	}
+}
+
+table {
+	width: 100%;
+	border-collapse: collapse;
+	margin: 24px 0;
+	font-size: 14px;
+}
+
+th,
+td {
+	padding: 12px;
+	text-align: left;
+	border-bottom: 1px solid #ddd;
+}
+
+@media (prefers-color-scheme: dark) {
+
+	th,
+	td {
+		border-bottom-color: #444;
+	}
+}
+
+th {
+	background: #f5f3f0;
+	font-weight: 600;
+}
+
+@media (prefers-color-scheme: dark) {
+	th {
+		background: #2a2a28;
+	}
+}
+
+.callout {
+	background: #f9f8f5;
+	border-left: 4px solid #534ab7;
 	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+	margin: 24px 0;
+	border-radius: 4px;
+}
+
+@media (prefers-color-scheme: dark) {
+	.callout {
+		background: #2a2a28;
+	}
+}
+
+.toc {
+	background: #f5f3f0;
+	padding: 24px;
+	border-radius: 8px;
+	margin: 32px 0;
+}
+
+@media (prefers-color-scheme: dark) {
+	.toc {
+		background: #242423;
+	}
+}
+
+.toc ol {
+	margin-left: 20px;
+}
+
+.toc a {
+	color: #185fa5;
+	text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+	.toc a {
+		color: #85b7eb;
+	}
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+.toc a:hover {
+	text-decoration: underline;
 }
+
+.section {
+	margin-bottom: 40px;
+}
+
+a {
+	color: #185fa5;
+}
+
+@media (prefers-color-scheme: dark) {
+	a {
+		color: #85b7eb;
+	}
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+footer {
+	text-align: center;
+	padding: 40px 0;
+	border-top: 1px solid #ddd;
+	color: #999;
+	font-size: 13px;
+	margin-top: 60px;
+}
+
+@media (prefers-color-scheme: dark) {
+	footer {
+		border-top-color: #444;
+		color: #666;
+	}
+}
+
+.grid-2 {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 24px;
+	margin: 24px 0;
+}
+
+@media (max-width: 680px) {
+	.grid-2 {
+		grid-template-columns: 1fr;
+	}
+}
+
+.box {
+	background: #fafaf8;
+	padding: 16px;
+	border: 1px solid #ddd;
+	border-radius: 8px;
+}
+
+@media (prefers-color-scheme: dark) {
+	.box {
+		background: #2a2a28;
+		border-color: #444;
+	}
+}
+
+.box-title {
+	font-weight: 600;
+	margin-bottom: 8px;
+	font-size: 14px;
+}
+
+em {
+	font-style: italic;
+}
+
+strong {
+	font-weight: 600;
+}