Update demo/css.css

demo/css.css

@@ -1,157 +1,170 @@
-html {
-	font-family: Inter;
-	font-size: 16px;
-	font-weight: 400;
-	line-height: 1.5;
-	-webkit-text-size-adjust: 100%;
-	background: #323232;
-	color: #fff;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	text-rendering: optimizeLegibility;
-}
-
-:root {
-	--space: 1;
-	--vspace: calc(var(--space) * 1rem);
-	--vspace-0: calc(3 * var(--space) * 1rem);
-	--vspace-1: calc(2 * var(--space) * 1rem);
-	--vspace-2: calc(1.5 * var(--space) * 1rem);
-	--vspace-3: calc(0.5 * var(--space) * 1rem);
-}
-
-.app {
-	max-width: 748px !important;
-}
-
-.prose p {
-	margin: var(--vspace) 0;
-	line-height: var(--vspace * 2);
-	font-size: 1rem;
-}
-
-code {
-	font-family: "Inconsolata", sans-serif;
-	font-size: 16px;
-}
-
-h1,
-h1 code {
-	font-weight: 400;
-	line-height: calc(2.5 / var(--space) * var(--vspace));
-}
-
-h1 code {
-	background: none;
-	border: none;
-	letter-spacing: 0.05em;
-	padding-bottom: 5px;
-	position: relative;
-	padding: 0;
-}
-
-h2 {
-	margin: var(--vspace-1) 0 var(--vspace-2) 0;
-	line-height: 1em;
-}
-
-h3,
-h3 code {
-	margin: var(--vspace-1) 0 var(--vspace-2) 0;
-	line-height: 1em;
-}
-
-h4,
-h5,
-h6 {
-	margin: var(--vspace-3) 0 var(--vspace-3) 0;
-	line-height: var(--vspace);
-}
-
-.bigtitle,
-h1,
-h1 code {
-	font-size: calc(8px * 4.5);
-	word-break: break-word;
-}
-
-.title,
-h2,
-h2 code {
-	font-size: calc(8px * 3.375);
-	font-weight: lighter;
-	word-break: break-word;
-	border: none;
-	background: none;
-}
-
-.subheading1,
-h3,
-h3 code {
-	font-size: calc(8px * 1.8);
-	font-weight: 600;
-	border: none;
-	background: none;
-	letter-spacing: 0.1em;
-	text-transform: uppercase;
-}
-
-h2 code {
-	padding: 0;
-	position: relative;
-	letter-spacing: 0.05em;
-}
-
-blockquote {
-	font-size: calc(8px * 1.1667);
-	font-style: italic;
-	line-height: calc(1.1667 * var(--vspace));
-	margin: var(--vspace-2) var(--vspace-2);
-}
-
-.subheading2,
-h4 {
-	font-size: calc(8px * 1.4292);
-	text-transform: uppercase;
-	font-weight: 600;
-}
-
-.subheading3,
-h5 {
-	font-size: calc(8px * 1.2917);
-	line-height: calc(1.2917 * var(--vspace));
-
-	font-weight: lighter;
-	text-transform: uppercase;
-	letter-spacing: 0.15em;
-}
-
-h6 {
-	font-size: calc(8px * 1.1667);
-	font-size: 1.1667em;
-	font-weight: normal;
-	font-style: italic;
-	font-family: "le-monde-livre-classic-byol", serif !important;
-	letter-spacing: 0px !important;
-}
-
-#start .md > *:first-child {
-	margin-top: 0;
-}
-
-h2 + h3 {
-	margin-top: 0;
-}
-
-.md hr {
-	border: none;
-	border-top: 1px solid var(--block-border-color);
-	margin: var(--vspace-2) 0 var(--vspace-2) 0;
-}
-.prose ul {
-	margin: var(--vspace-2) 0 var(--vspace-1) 0;
-}
-
-.gap {
-	gap: 0;
+/* ────────────────────────────────────────────────────────────────
+   Laban Movement Analysis
+   Created: 2025-06-04
+   ---------------------------------------------------------------- */
+
+/* ------------------------ 1. CSS reset ------------------------ */
+*,*::before,*::after{box-sizing:border-box}html,body{margin:0;padding:0}
+body{font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
+
+:where(img,video){max-width:100%;display:block}
+
+/* --------------------- 2. Design tokens ----------------------- */
+:root{
+  /* Theme palette */
+  --brand-50:#e5f9f1;
+  --brand-100:#c6f2e1;
+  --brand-500:#29a37d;      /* primary */
+  --brand-600:#238c6c;
+  --brand-700:#1c745b;
+  --brand-900:#0e3b2f;
+  
+  --surface-0:#ffffff;
+  --surface-1:#f8f9fa;      /* cards */
+  --surface-glass:hsla(0,0%,100%,0.6);
+  
+  --text-strong:#101418;
+  --text-body:#323232;
+  --text-muted:#6b7280;
+  
+  /* Shadows */
+  --shadow-xs:0 1px 2px rgb(0 0 0 / .04);
+  --shadow-sm:0 1px 3px rgb(0 0 0 / .1);
+  --shadow-md:0 4px 8px rgb(0 0 0 / .12);
+  
+  /* Typography fluid scale */
+  --step--1:clamp(.8rem,.77rem + .15vw, .9rem);
+  --step-0 :clamp(1rem,.96rem + .20vw,1.125rem);
+  --step-1 :clamp(1.25rem,1.2rem + .25vw,1.5rem);
+  --step-2 :clamp(1.563rem,1.45rem + .28vw,1.875rem);
+  --step-3 :clamp(1.953rem,1.8rem + .35vw,2.25rem);
+  
+  /* Radius + spacing */
+  --radius:12px;
+  --gap:1rem;
+  
+  accent-color:var(--brand-500);
+}
+
+/* Automatic dark-mode switch */
+@media (prefers-color-scheme:dark){
+  :root{
+    --surface-0:#121212;
+    --surface-1:#1e1e1e;
+    --surface-glass:hsla(0,0%,15%,0.6);
+    --text-strong:#ffffff;
+    --text-body:#e2e2e2;
+    --text-muted:#9ca3af;
+  }
+}
+
+/* ---------------- 3. Layout helpers / utilities --------------- */
+.flow>*+*{margin-top:var(--gap)}
+.stack{display:flex;flex-direction:column;gap:var(--gap)}
+.row{display:flex;gap:var(--gap)}
+
+/* ------------------- 4. Global typography --------------------- */
+h1,h2,h3,h4,h5{font-weight:600;font-family:"Inter",-apple-system,sans-serif;margin:0}
+h1{font-size:var(--step-3);line-height:1.1}
+h2{font-size:var(--step-2);line-height:1.15}
+h3{font-size:var(--step-1);line-height:1.2}
+p{font-size:var(--step-0);line-height:1.6;color:var(--text-body);margin:0}
+
+/* ---------------- 5. Main Hero / Banner ----------------------- */
+.main-header{
+  padding:2.5rem 1rem;
+  text-align:center;
+  border-radius:var(--radius);
+  background:linear-gradient(135deg,var(--brand-600),var(--brand-700));
+  color:#fff;
+  box-shadow:var(--shadow-md);
+}
+@media(prefers-color-scheme:dark){
+  .main-header{background:linear-gradient(135deg,#146a52,#0e3b2f)}
+}
+.main-header h1{letter-spacing:-.5px;margin-bottom:.25em}
+
+/* ------------------ 6. Card & surfaces ------------------------ */
+.feature-card,
+.gr-Group,           /* Gradio group component */
+.card{
+  background:var(--surface-glass);
+  backdrop-filter:blur(12px) saturate(120%);
+  border:1px solid rgb(255 255 255 / .3);
+  border-radius:var(--radius);
+  padding:1rem;
+  box-shadow:var(--shadow-sm);
+}
+@media(prefers-color-scheme:dark){
+  .feature-card,
+  .gr-Group,
+  .card{
+    background:hsla(0,0%,25%,0.25);
+    border:1px solid rgb(255 255 255 / .05);
+  }
+}
+
+/* ------------------ 7. JSON output panel ---------------------- */
+.json-output{
+  max-height:500px;
+  overflow:auto;
+  font-family:Consolas,monospace;
+  font-size:.9rem;
+  background:var(--surface-1);
+  border-radius:var(--radius);
+  padding:.75rem;
+  box-shadow:var(--shadow-xs);
+}
+
+/* ------------------ 8. Tabs & interactive tweaks -------------- */
+.gradio-container .gr-tab-nav button{
+  font-weight:500;
+  padding:.6rem 1.2rem;
+  transition:all .2s ease;
+}
+.gradio-container .gr-tab-nav button[aria-selected="true"]{
+  color:var(--brand-700);
+  box-shadow:inset 0 -2px 0 0 var(--brand-500);
+}
+@media(prefers-color-scheme:dark){
+  .gradio-container .gr-tab-nav button[aria-selected="true"]{
+    color:var(--brand-50);
+    box-shadow:inset 0 -2px 0 0 var(--brand-500);
+  }
+}
+
+/* ------------------ 9. Form inputs ---------------------------- */
+.gradio-container input[type="range"]::-webkit-slider-thumb{
+  width:14px;height:14px;border-radius:50%;background:var(--brand-500);border:none
+}
+.gradio-container .gr-button{border-radius:var(--radius);font-weight:600}
+.gradio-container .gr-button.primary{
+  background:var(--brand-500);color:#fff;
+  transition:background .15s;
+}
+.gradio-container .gr-button.primary:hover{background:var(--brand-600)}
+
+/* ----------------- 10. Video preview tweaks ------------------- */
+.gradio-container video{
+  border-radius:var(--radius);
+  box-shadow:var(--shadow-xs)
+}
+
+/* ----------------- 11. Author / footer badge ------------------ */
+.author-info{
+  background:linear-gradient(135deg,var(--brand-600),var(--brand-700));
+  color:#fff;
+  border-radius:var(--radius);
+  padding:1rem;
+  font-size:var(--step--1);
+  text-align:center;
+  box-shadow:var(--shadow-sm);
+}
+.author-info a{color:#c7ffef;text-decoration:none}
+.author-info a:hover{text-decoration:underline}
+
+/* ----------------- 12. Dark-mode overrides -------------------- */
+@media(prefers-color-scheme:dark){
+  body{background:#0f0f0f}
+  .json-output{background:#1a1a1a;color:var(--text-body)}
 }