feat(web): responsive layout for phone and tablet (header stack, padding scale, seed-row wrap)

web/src/components/LoadingBanner.tsx

@@ -3,7 +3,7 @@ type Props = { visible: boolean; message: string };
 export default function LoadingBanner({ visible, message }: Props) {
   if (!visible) return null;
   return (
-    <div className="border-b border-[hsl(var(--ember))]/30 bg-[hsl(var(--ember))]/10 px-8 py-2.5">
+    <div className="border-b border-[hsl(var(--ember))]/30 bg-[hsl(var(--ember))]/10 px-4 sm:px-8 py-2.5">
       <div className="flex items-center gap-3">
         <span className="size-1.5 rounded-full bg-[hsl(var(--ember))] animate-pulse-dot" />
         <span className="label-mono text-[hsl(var(--ember))]">{message}</span>

web/src/components/ParamsPanel.tsx

@@ -18,7 +18,7 @@ function renderControl(
     return (
       <div key={s.name} className="space-y-1.5">
         <label htmlFor={id} className="label-mono">{s.label}</label>
-        <div className="flex items-center gap-3">
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
           <input
             id={id}
             aria-label={s.label}
@@ -27,7 +27,7 @@ function renderControl(
             step={s.step ?? 1}
             value={v}
             onChange={(e) => set(s.name, Number(e.target.value))}
-            className="field-input !w-44 font-mono text-[12px] py-1"
+            className="field-input !w-40 sm:!w-44 font-mono text-[12px] py-1"
           />
           <button
             type="button"

web/src/components/ProgressBar.tsx

@@ -12,9 +12,9 @@ export default function ProgressBar() {
 
   if (state.phase === "error") {
     return (
-      <div className="sticky top-0 z-40 border-b border-red-900/40 bg-red-950/80 backdrop-blur-md px-8 py-2.5">
+      <div className="sticky top-0 z-40 border-b border-red-900/40 bg-red-950/80 backdrop-blur-md px-4 sm:px-8 py-2.5">
         <span className="label-mono text-red-400">progress error</span>
-        <span className="ml-3 text-sm text-red-300/90">{state.message}</span>
+        <span className="ml-3 text-sm text-red-300/90 break-words">{state.message}</span>
       </div>
     );
   }
@@ -37,12 +37,12 @@ export default function ProgressBar() {
       : `Generating · ${fmt(elapsedS)}`;
 
   return (
-    <div className="sticky top-0 z-40 border-b border-[hsl(var(--ember))]/30 bg-[hsl(var(--ember))]/15 backdrop-blur-md px-8 py-2">
-      <div className="flex items-center gap-4">
-        <span className="label-mono text-[hsl(var(--ember))] whitespace-nowrap">
+    <div className="sticky top-0 z-40 border-b border-[hsl(var(--ember))]/30 bg-[hsl(var(--ember))]/15 backdrop-blur-md px-4 sm:px-8 py-2">
+      <div className="flex items-center gap-3 sm:gap-4">
+        <span className="label-mono text-[hsl(var(--ember))] whitespace-nowrap text-[10px] sm:text-[10.5px]">
           {label}
         </span>
-        <div className="flex-1 h-1 bg-[hsl(var(--ember))]/20 rounded-sm overflow-hidden">
+        <div className="flex-1 min-w-0 h-1 bg-[hsl(var(--ember))]/20 rounded-sm overflow-hidden">
           {fill === null ? (
             <div className="h-full w-1/3 bg-[hsl(var(--ember))] animate-progress-stripe" />
           ) : (

web/src/pages/Studio.tsx

@@ -28,7 +28,7 @@ function SectionHeader({ num, title, hint }: { num: string; title: string; hint?
     <div className="space-y-1">
       <div className="flex items-baseline gap-3">
         <span className="marker-num">{num}</span>
-        <h2 className="display-serif text-[22px] leading-tight">{title}</h2>
+        <h2 className="display-serif text-[19px] sm:text-[22px] leading-tight">{title}</h2>
       </div>
       {hint && <p className="label-mono">{hint}</p>}
       <div className="rule-dotted mt-2" />
@@ -181,12 +181,12 @@ export default function Studio() {
   return (
     <div className="min-h-screen relative-z animate-fade-up">
       <header className="border-b border-border">
-        <div className="mx-auto max-w-[1280px] px-8 py-5 flex items-end justify-between">
-          <div className="flex items-end gap-4">
-            <span className="display-serif text-[34px] leading-none">Chatterbox</span>
-            <span className="label-mono pb-1">voice studio · v0.2</span>
+        <div className="mx-auto max-w-[1280px] px-4 sm:px-8 py-4 sm:py-5 flex flex-col lg:flex-row lg:items-end lg:justify-between gap-3 lg:gap-6">
+          <div className="flex items-end gap-3 sm:gap-4">
+            <span className="display-serif text-[26px] sm:text-[34px] leading-none">Chatterbox</span>
+            <span className="label-mono pb-0.5 sm:pb-1 whitespace-nowrap">voice studio · v0.2</span>
           </div>
-          <div className="flex items-center gap-6">
+          <div className="flex flex-wrap items-center gap-3 sm:gap-6">
             <ModeToggle mode={mode} onChange={setMode} />
             {mode === "single" && (
               <ModelPicker
@@ -207,13 +207,13 @@ export default function Studio() {
       />
       <ProgressBar />
       {err && (
-        <div className="border-b border-red-900/40 bg-red-950/30 px-8 py-2.5">
+        <div className="border-b border-red-900/40 bg-red-950/30 px-4 sm:px-8 py-2.5">
           <span className="label-mono text-red-400">error</span>
-          <span className="ml-3 text-sm text-red-300/90">{err}</span>
+          <span className="ml-3 text-sm text-red-300/90 break-words">{err}</span>
         </div>
       )}
 
-      <main className="mx-auto max-w-[1280px] px-8 py-10 grid lg:grid-cols-[minmax(0,1fr)_400px] gap-12">
+      <main className="mx-auto max-w-[1280px] px-4 sm:px-8 py-6 sm:py-10 grid lg:grid-cols-[minmax(0,1fr)_400px] gap-8 lg:gap-12">
         <section className="space-y-12">
           {mode === "single" ? (
             <>
@@ -355,10 +355,10 @@ export default function Studio() {
         </aside>
       </main>
 
-      <footer className="border-t border-border mt-16">
+      <footer className="border-t border-border mt-10 sm:mt-16">
         <MadeBy />
-        <div className="rule-dotted mx-8" />
-        <div className="mx-auto max-w-[1280px] px-8 py-6 flex items-center justify-between">
+        <div className="rule-dotted mx-4 sm:mx-8" />
+        <div className="mx-auto max-w-[1280px] px-4 sm:px-8 py-5 sm:py-6 flex flex-col sm:flex-row items-center sm:justify-between gap-2 sm:gap-0">
           <span className="label-mono">chatterbox · resemble ai</span>
           <span className="label-mono">stateless · browser-persisted</span>
         </div>