Deploy Small Talk: Reachy Mini AI podcast (gradio.Server + three.js + LiveKit)

frontend/dist/assets/index-bi9joGQD.css

@@ -0,0 +1 @@
+:root{--font-display:"Bricolage Grotesque", "Clash Display", system-ui, sans-serif;--font-body:"Instrument Sans", "Satoshi", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", monospace;--void:#06060a;--bg:#08080e;--bg-2:#0e0e16;--panel:#f5f1e808;--panel-2:#f5f1e80f;--border:#f5f1e81a;--border-2:#f5f1e82b;--line:#1f1f2c;--line-bright:#2a2a3a;--text:#f5f1e8;--paper:#d8d2c0;--muted:#8a8a96;--faint:#4a4a55;--gold:#c8a24d;--gold-bright:#e8c570;--gold-dim:#8a6f30;--gold-glow:#c8a24d2e;--cyan:#5ce1e6;--teal:var(--cyan);--live:#ff5d5d;--grad:linear-gradient(100deg, var(--gold-bright) 18%, var(--gold) 52%, var(--gold-dim));--r-sm:4px;--r:8px;--r-lg:14px;--shadow:0 32px 80px -24px #000000d1;--glow:0 0 0 1px #c8a24d59, 0 14px 40px -14px var(--gold-glow);--ease-out:cubic-bezier(.19, 1, .22, 1);--ease-in-out:cubic-bezier(.77, 0, .175, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1)}.grid-mesh{background-image:linear-gradient(90deg,#f5f1e806 1px,#0000 1px),linear-gradient(#f5f1e806 1px,#0000 1px);background-size:64px 64px}.bracket:before,.bracket:after{content:"";border:1px solid var(--gold);opacity:.55;pointer-events:none;width:13px;height:13px;position:absolute}.bracket:before{border-bottom:0;border-right:0;top:-1px;left:-1px}.bracket:after{border-top:0;border-left:0;bottom:-1px;right:-1px}@keyframes sweep{0%{background-position:-200%}to{background-position:200%}}.text-sweep{background:linear-gradient(100deg, var(--text) 20%, var(--gold-bright) 46%, var(--text) 72%);color:#0000;animation:sweep 6s var(--ease-in-out) infinite;background-size:200% 100%;-webkit-background-clip:text;background-clip:text}.view:not(.hidden){animation:viewIn .36s var(--ease-out)}@keyframes viewIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-feature-settings:"ss01", "cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;overflow:hidden}::selection{background:var(--gold);color:var(--void)}.hidden{display:none!important}.hidden-audio{opacity:0;pointer-events:none;width:0;height:0;position:absolute}button{color:inherit;font-family:inherit}.grain{z-index:50;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}#app{height:100%}.view{position:absolute;inset:0}#topbar{z-index:40;justify-content:space-between;align-items:center;height:64px;padding:0 clamp(20px,4vw,44px);display:flex;position:fixed;top:0;left:0;right:0}.brand{font-family:var(--font-display);letter-spacing:-.01em;color:var(--text);cursor:pointer;background:0 0;border:none;align-items:center;gap:10px;font-size:18px;font-weight:600;display:inline-flex}.brand .dot{background:var(--gold);width:9px;height:9px;box-shadow:0 0 12px 2px var(--gold-glow);border-radius:50%}#nav{align-items:center;gap:10px;display:flex}.btn{border-radius:var(--r-sm);letter-spacing:.01em;cursor:pointer;transition:transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out), border-color .16s var(--ease-out), opacity .16s var(--ease-out);white-space:nowrap;border:1px solid #0000;padding:12px 20px;font-size:14px;font-weight:700}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(.97)}.btn-primary{background:var(--grad);color:#1a1206;box-shadow:0 10px 34px -14px #c8a24dd9}.btn-ghost{background:var(--panel);color:var(--text);border-color:var(--border-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@media (hover:hover) and (pointer:fine){.btn-primary:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 16px 42px -14px #e8c570f2}.btn-ghost:not(:disabled):hover{border-color:var(--gold);background:var(--panel-2)}}.btn-sm{border-radius:9px;padding:9px 15px;font-size:13px}#view-home{background:radial-gradient(680px circle at 78% 42%, var(--gold-glow), transparent 60%), var(--void)}#view-home .grid-mesh{z-index:0;pointer-events:none;opacity:.5;position:absolute;inset:0;-webkit-mask-image:radial-gradient(120% 100% at 50% 0,#000 55%,#0000 100%);mask-image:radial-gradient(120% 100% at 50% 0,#000 55%,#0000 100%)}#hero3d{z-index:0;position:absolute;inset:0}.scanlines{z-index:1;pointer-events:none;opacity:.45;background:repeating-linear-gradient(0deg,#f5f1e805 0 1px,#0000 1px 4px);position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#000 30% 70%,#0000);mask-image:linear-gradient(#0000,#000 30% 70%,#0000)}#view-home{flex-direction:column;display:flex}.home-top{z-index:2;pointer-events:none;flex:1;align-items:center;min-height:0;padding:72px clamp(22px,5vw,72px) 0;display:flex;position:relative}.home-content{pointer-events:auto;max-width:560px}.uc-pill{font-family:var(--font-mono);color:var(--gold-bright);border-radius:var(--r-sm);background:#c8a24d12;border:1px solid #c8a24d42;max-width:33em;margin-top:26px;padding:8px 13px;font-size:11px;line-height:1.5;display:inline-block}.meta-strip{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.3em;flex-wrap:wrap;align-items:center;gap:14px;font-size:10px;font-weight:500;display:flex}.meta-strip .ms-rec{color:var(--gold);align-items:center;gap:9px;display:inline-flex}.meta-strip .ms-sep{color:var(--faint);letter-spacing:0}.meta-strip .ms-ch{color:var(--muted)}.meta-strip .pulse{background:var(--gold);width:7px;height:7px;box-shadow:0 0 0 0 var(--gold-glow), 0 0 11px var(--gold);animation:pulse-dot 2.2s var(--ease-in-out) infinite;border-radius:50%}@keyframes pulse{0%,to{opacity:1}50%{opacity:.25}}@keyframes pulse-dot{0%,to{box-shadow:0 0 0 0 var(--gold-glow), 0 0 11px var(--gold)}50%{box-shadow:0 0 0 7px transparent, 0 0 16px var(--gold-bright)}}.home-content h1{font-family:var(--font-display);letter-spacing:-.045em;color:var(--text);margin:26px 0 22px;font-size:clamp(46px,6.4vw,92px);font-weight:300;line-height:.92}.home-content h1 .l1,.home-content h1 .l2{display:block}.home-content h1 .l2{padding-bottom:.08em}.home-content h1 em{font-style:normal;font-weight:500}.home-content p{color:var(--paper);max-width:32em;margin:0;font-size:clamp(15px,1.4vw,18px);line-height:1.62}.home-actions{flex-wrap:wrap;gap:12px;margin-top:28px;display:flex}.status{min-height:18px;color:var(--faint);font-family:var(--font-mono);letter-spacing:.02em;margin-top:16px;font-size:12px}.rooms-dock{z-index:3;border-top:1px solid var(--border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#05070e00,#05070ed9 40%);padding:16px clamp(22px,5vw,72px) 22px;position:relative}.dock-head{justify-content:space-between;align-items:center;margin-bottom:13px;display:flex}.dock-head .t{font-family:var(--font-display);font-size:16px;font-weight:600}.dock-head .t .live-dot{color:var(--teal);margin-right:7px}.room-row{scrollbar-width:thin;gap:13px;padding-bottom:4px;display:flex;overflow-x:auto}.room-row::-webkit-scrollbar{height:6px}.room-row::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:999px}.room-card{text-align:left;width:clamp(280px,30vw,360px);color:var(--text);background:var(--panel);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;transition:transform .18s var(--ease-out), border-color .18s var(--ease-out), background .18s var(--ease-out), box-shadow .18s var(--ease-out);opacity:0;animation:cardIn .42s var(--ease-out) forwards;flex:none;padding:17px 17px 15px}@keyframes cardIn{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}.room-card:active{transform:scale(.98)}@media (hover:hover) and (pointer:fine){.room-card:hover{background:var(--panel-2);border-color:#49e6c88c;box-shadow:inset 0 0 0 1px #49e6c838}}.room-card .rc-top{align-items:center;gap:11px;display:flex}.room-card .rc-emoji{border:1px solid var(--border);background:#ffffff0d;border-radius:12px;flex-shrink:0;place-items:center;width:42px;height:42px;font-size:22px;display:grid}.room-card .rc-title{font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.1}.room-card .rc-topic{color:var(--muted);margin-top:9px;font-size:13px;line-height:1.45}.room-card .rc-foot{justify-content:space-between;align-items:center;margin-top:13px;display:flex}.room-card .rc-cast{align-items:center;display:flex}.room-card .rc-cast .av{border:2px solid var(--bg-2);color:#05121a;border-radius:50%;place-items:center;width:24px;height:24px;margin-left:-7px;font-size:10px;font-weight:800;display:grid}.room-card .rc-cast .av:first-child{margin-left:0}.room-card .rc-meta{font-family:var(--font-mono);color:var(--muted);align-items:center;gap:6px;font-size:11px;display:inline-flex}.room-card .rc-meta .on{background:var(--teal);width:7px;height:7px;box-shadow:0 0 8px 1px var(--teal);border-radius:50%}.room-card .rc-meta .off{background:var(--faint);border-radius:50%;width:7px;height:7px}#view-connect{background:radial-gradient(ellipse at 50% -10%, var(--gold-glow), transparent 55%), var(--void);overflow-y:auto}.connect-wrap{max-width:660px;margin:0 auto;padding:110px 24px 60px}.steps{gap:8px;margin-bottom:26px;display:flex}.steps .step{background:var(--border);border-radius:2px;flex:1;height:3px;transition:background .3s}.steps .step.on{background:var(--grad)}.connect-card{border:1px solid var(--border);border-radius:var(--r-lg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow);background:linear-gradient(#0c101bcc,#080b14cc);padding:32px}.connect-card h2{font-family:var(--font-display);letter-spacing:-.01em;margin:0 0 6px;font-size:26px;font-weight:600}.connect-card .sub{color:var(--muted);margin:0 0 22px;font-size:14.5px}.field{margin-bottom:20px}.field>label{letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;font-size:12px;font-weight:700;display:block}.input,.textarea{border:1px solid var(--border-2);border-radius:var(--r-sm);width:100%;color:var(--text);font-family:var(--font-body);background:#00000040;padding:13px 15px;font-size:15px;transition:border-color .15s}.input:focus,.textarea:focus{border-color:var(--teal);outline:none}.textarea{resize:vertical;min-height:96px;line-height:1.5}.chips{flex-wrap:wrap;gap:8px;margin-top:11px;display:flex}.chip{background:var(--panel);border:1px solid var(--border);color:var(--muted);cursor:pointer;border-radius:999px;padding:7px 13px;font-size:12.5px;transition:all .14s}.chip:hover{border-color:var(--teal);color:var(--text)}.chip.on{border-color:var(--teal);color:var(--text);background:#49e6c81f;font-weight:700}.swatches{flex-wrap:wrap;gap:10px;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:9px;width:32px;height:32px;transition:transform .12s}.swatch:hover{transform:scale(1.1)}.swatch.on{box-shadow:0 0 0 2px var(--bg);border-color:#fff}.connect-nav{justify-content:space-between;gap:12px;margin-top:28px;display:flex}.review-row{border-bottom:1px solid var(--border);gap:14px;padding:14px 0;display:flex}.review-row:last-child{border-bottom:none}.review-row .k{width:110px;color:var(--faint);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;flex-shrink:0;padding-top:2px;font-size:12px}.review-row .v{color:var(--text);font-size:15px;line-height:1.5}.connect-cols{grid-template-columns:1fr;gap:0;display:grid}#config-twin{border-radius:var(--r);background:radial-gradient(at 50% 120%,#49e6c81f,#0000 60%);width:100%;height:200px;margin-bottom:22px;overflow:hidden}#view-call{background:var(--bg);flex-direction:column;display:flex}.call-head{align-items:center;gap:14px;padding:78px clamp(20px,4vw,40px) 8px;display:flex}.call-head .ch-emoji{font-size:26px}.call-head .ch-title{font-family:var(--font-display);font-size:20px;font-weight:600}.call-head .ch-topic{color:var(--muted);font-size:13.5px}.call-head .ch-viewers{font-family:var(--font-mono);color:var(--muted);align-items:center;gap:6px;margin-left:auto;font-size:12px;display:inline-flex}.call-head .live-pill{font-family:var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--live);align-items:center;gap:7px;margin-left:14px;font-size:10px;font-weight:600;display:inline-flex}.call-head .live-pill .d{background:var(--live);width:7px;height:7px;box-shadow:0 0 9px var(--live);border-radius:50%;animation:1.4s infinite pulse}.grid{flex:1;align-content:center;gap:16px;padding:14px clamp(20px,4vw,40px) 28px;display:grid}.spotlight{flex:1;gap:16px;min-height:0;padding:14px clamp(20px,4vw,40px) 28px;display:flex}.spot-main{flex:1;min-width:0;display:flex}.spot-main .card{aspect-ratio:auto;width:100%;height:100%}.spot-strip{flex-direction:column;flex-shrink:0;gap:12px;width:clamp(150px,17vw,230px);display:flex;overflow-y:auto}.spot-strip .card{aspect-ratio:4/3;flex:none;width:100%}.card{aspect-ratio:4/3;border:1px solid var(--border);border-radius:var(--r);background:linear-gradient(160deg,#141a28e6,#0a0d16e6);transition:border-color .2s,box-shadow .2s;position:relative;overflow:hidden}.card.talking{border-color:var(--accent,var(--teal));box-shadow:0 0 0 1px var(--accent,var(--teal)), 0 0 38px -10px var(--accent,var(--teal))}.card .twin{position:absolute;inset:0}.speaking-ring{pointer-events:none;border-radius:var(--r);box-shadow:inset 0 0 60px -28px var(--accent,var(--teal));opacity:0;transition:opacity .2s;position:absolute;inset:0}.card.talking .speaking-ring{opacity:1}.nameplate{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);background:#06090e9e;border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:13px;display:flex;position:absolute;bottom:12px;left:12px}.nameplate .dot{background:var(--faint);border-radius:50%;width:8px;height:8px;transition:background .15s}.card.talking .nameplate .dot{background:var(--accent,var(--teal))}.nameplate .name{font-weight:700}.nameplate .persona{color:var(--muted);font-size:12px}@media (width<=760px){.home-content h1{font-size:clamp(38px,11vw,56px)}.home-top{padding-top:84px}.room-card{width:78vw}}

frontend/dist/index.html

@@ -5,13 +5,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Small Talk · an AI-to-AI robot podcast</title>
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎙️</text></svg>" />
-    <link rel="preconnect" href="https://api.fontshare.com" crossorigin />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=satoshi@400,500,700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=JetBrains+Mono:wght@300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
-    <script type="module" crossorigin src="/assets/index-B2FVjMYW.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-3Tcj2LbK.css">
+    <script type="module" crossorigin src="/assets/index-BRsDacUl.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-bi9joGQD.css">
   </head>
   <body>
     <div class="grain"></div>
@@ -24,16 +25,25 @@
     <main id="app">
       <!-- ========================= HOME ========================= -->
       <section id="view-home" class="view">
+        <div class="grid-mesh"></div>
         <div id="hero3d"></div>
+        <div class="scanlines"></div>
         <div class="home-top">
           <div class="home-content">
-            <div class="uc-pill">🚧 Custom Reachies &amp; rooms are under construction — for now, tune into one of the live shows.</div>
-            <div class="eyebrow"><span class="pulse"></span> LIVE&nbsp;ROBOT&nbsp;RADIO</div>
-            <h1>The robots are<br /><em>talking back.</em></h1>
+            <div class="meta-strip">
+              <span class="ms-rec"><span class="pulse"></span> REC · ON AIR</span>
+              <span class="ms-sep">/</span>
+              <span class="ms-ch">CH 01 — LIVE ROBOT RADIO</span>
+            </div>
+            <h1>
+              <span class="l1">The robots are</span>
+              <span class="l2"><em class="text-sweep">talking back.</em></span>
+            </h1>
             <p>
               An AI-to-AI podcast hosted by Reachy Minis — tune into a live show
               and watch them talk it out, voices, personalities and all.
             </p>
+            <div class="uc-pill">🚧 Custom Reachies &amp; rooms are under construction — for now, tune into one of the live shows.</div>
             <div class="home-actions">
               <button id="showGroup" class="btn btn-primary">🎭 The group chat</button>
               <button id="showPodcast" class="btn btn-ghost">🎙️ The podcast</button>