Upload 20 files

dist/assets/index-3TxP28Hy.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-green-500:oklch(72.3% .219 149.579);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-2xl:42rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-light:300;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tighter:-.05em;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-widest:.1em;--leading-relaxed:1.625;--radius-sm:.25rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.top-1\/2{top:50%}.top-6{top:calc(var(--spacing) * 6)}.right-6{right:calc(var(--spacing) * 6)}.right-full{right:100%}.z-10{z-index:10}.mx-5{margin-inline:calc(var(--spacing) * 5)}.mx-auto{margin-inline:auto}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-5{margin-top:calc(var(--spacing) * 5)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mr-1{margin-right:calc(var(--spacing) * 1)}.mr-4{margin-right:calc(var(--spacing) * 4)}.ml-1{margin-left:calc(var(--spacing) * 1)}.flex{display:flex}.grid{display:grid}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-1{height:calc(var(--spacing) * 1)}.h-2{height:calc(var(--spacing) * 2)}.h-2\.5{height:calc(var(--spacing) * 2.5)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-20{height:calc(var(--spacing) * 20)}.h-28{height:calc(var(--spacing) * 28)}.h-full{height:100%}.min-h-\[40px\]{min-height:40px}.min-h-\[76px\]{min-height:76px}.min-h-\[min\(78vh\,720px\)\]{min-height:min(78vh,720px)}.min-h-screen{min-height:100vh}.w-2{width:calc(var(--spacing) * 2)}.w-2\.5{width:calc(var(--spacing) * 2.5)}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-20{width:calc(var(--spacing) * 20)}.w-28{width:calc(var(--spacing) * 28)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-md{max-width:var(--container-md)}.max-w-none{max-width:none}.flex-1{flex:1}.translate-x-2{--tw-translate-x:calc(var(--spacing) * 2);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-0{--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-4{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-full{--tw-translate-y:100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-help{cursor:help}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-12>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[1\.6rem\]{border-radius:1.6rem}.rounded-\[2rem\]{border-radius:2rem}.rounded-full{border-radius:3.40282e38px}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style:none;border-style:none}.bg-\[var\(--mistral-orange\)\]{background-color:var(--mistral-orange)}.bg-\[var\(--mistral-red\)\]{background-color:var(--mistral-red)}.bg-green-500{background-color:var(--color-green-500)}.bg-white{background-color:var(--color-white)}.bg-white\/18{background-color:#ffffff2e}@supports (color:color-mix(in lab, red, red)){.bg-white\/18{background-color:color-mix(in oklab, var(--color-white) 18%, transparent)}}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-white\/70{background-color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.bg-white\/70{background-color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.bg-white\/84{background-color:#ffffffd6}@supports (color:color-mix(in lab, red, red)){.bg-white\/84{background-color:color-mix(in oklab, var(--color-white) 84%, transparent)}}.bg-white\/90{background-color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.bg-white\/90{background-color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.p-10{padding:calc(var(--spacing) * 10)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-5{padding-block:calc(var(--spacing) * 5)}.py-10{padding-block:calc(var(--spacing) * 10)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-5{padding-bottom:calc(var(--spacing) * 5)}.text-center{text-align:center}.text-left{text-align:left}.align-middle{vertical-align:middle}.font-mono{font-family:var(--font-mono)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[10px\]{font-size:10px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.2em\]{--tw-tracking:.2em;letter-spacing:.2em}.tracking-\[0\.3em\]{--tw-tracking:.3em;letter-spacing:.3em}.tracking-\[0\.18em\]{--tw-tracking:.18em;letter-spacing:.18em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-tighter{--tw-tracking:var(--tracking-tighter);letter-spacing:var(--tracking-tighter)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-white{color:var(--color-white)}.uppercase{text-transform:uppercase}.italic{font-style:italic}.underline{text-decoration-line:underline}.decoration-2{text-decoration-thickness:2px}.underline-offset-4{text-underline-offset:4px}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-70{opacity:.7}.opacity-75{opacity:.75}.opacity-100{opacity:1}.opacity-\[0\.03\]{opacity:.03}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.delay-100{transition-delay:.1s}.delay-200{transition-delay:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.duration-700{--tw-duration:.7s;transition-duration:.7s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}@media (hover:hover){.group-hover\:translate-x-0:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-1:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:-translate-y-1:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-y-0:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\:-translate-y-0\.5:hover{--tw-translate-y:calc(var(--spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:bg-black:hover{background-color:var(--color-black)}.hover\:text-black:hover{color:var(--color-black)}.hover\:decoration-\[3px\]:hover{text-decoration-thickness:3px}.hover\:shadow-2xl:hover{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.active\:scale-95:active{--tw-scale-x:95%;--tw-scale-y:95%;--tw-scale-z:95%;scale:var(--tw-scale-x) var(--tw-scale-y)}@media (width>=48rem){.md\:h-32{height:calc(var(--spacing) * 32)}.md\:w-32{width:calc(var(--spacing) * 32)}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:p-5{padding:calc(var(--spacing) * 5)}.md\:p-12{padding:calc(var(--spacing) * 12)}.md\:px-6{padding-inline:calc(var(--spacing) * 6)}.md\:py-6{padding-block:calc(var(--spacing) * 6)}.md\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.md\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.md\:text-\[1\.4rem\]{font-size:1.4rem}}}:root{--mistral-red:#e10500;--mistral-orange-dark:#fa500f;--mistral-orange:#ff8205;--mistral-orange-light:#ffaf00;--mistral-yellow:#ffd800;--mistral-beige-light:#fffaeb;--mistral-beige-medium:#fff0c3;--mistral-beige-dark:#e9e2cb;--mistral-black:#000;--mistral-black-tinted:#1e1e1e;--mistral-white:#fff}body{background-color:var(--mistral-beige-light);color:var(--mistral-black);font-family:Arial,sans-serif}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.cursor-blink{animation:1s step-end infinite blink}.history-scroll::-webkit-scrollbar{width:6px}.history-scroll::-webkit-scrollbar-track{background:var(--mistral-beige-light)}.history-scroll::-webkit-scrollbar-thumb{background-color:var(--mistral-beige-dark);border-radius:4px}.history-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--mistral-orange)}@keyframes strip-move{0%{background-position:0 0}to{background-position:30px 0}}.progress-stripe{background-image:linear-gradient(45deg,#fff3 25%,#0000 25% 50%,#fff3 50% 75%,#0000 75%,#0000);background-size:30px 30px;animation:1s linear infinite strip-move}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-enter{animation:.5s cubic-bezier(.16,1,.3,1) forwards fadeUp}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}@keyframes meter-idle{0%,to{opacity:.55;transform:scaleY(.45)}50%{opacity:.8;transform:scaleY(.7)}}@keyframes meter-active{0%,to{transform:scaleY(.35)}25%{transform:scaleY(1)}50%{transform:scaleY(.55)}75%{transform:scaleY(.9)}}.voice-meter-bar{transform-origin:bottom;border-radius:999px;width:8px;height:40px;animation:1.6s ease-in-out infinite meter-idle}.voice-meter-bar.is-active{animation-name:meter-active;animation-duration:.9s}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}

dist/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💬</text></svg>"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Voxtral Realtime | WebGPU</title>
+    <script type="module" crossorigin src="/assets/index-XIg_GcZm.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-3TxP28Hy.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

eslint.config.js

@@ -0,0 +1,23 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import { defineConfig, globalIgnores } from "eslint/config";
+
+export default defineConfig([
+  globalIgnores(["dist"]),
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+]);

index.html

@@ -1,19 +1,16 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>💬</text></svg>"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Voxtral Realtime | WebGPU</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "voxtral-realtime-webgpu",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@huggingface/transformers": "4.0.0-next.7",
+    "@tailwindcss/vite": "^4.2.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.2.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^8.0.0-beta.13"
+  },
+  "overrides": {
+    "vite": "^8.0.0-beta.13"
+  }
+}

src/App.tsx

@@ -0,0 +1,29 @@
+import { useVoxtral } from "./components/VoxtralContext";
+import { VoxtralProvider } from "./components/VoxtralProvider";
+import { LandingPage } from "./components/LandingPage";
+import { LoadingPage } from "./components/LoadingPage";
+import { RunningPage } from "./components/RunningPage";
+
+const PAGE_BY_STATUS = {
+  idle: LandingPage,
+  loading: LoadingPage,
+  error: LoadingPage,
+  ready: RunningPage,
+  recording: RunningPage,
+} as const;
+
+const AppContent = () => {
+  const { status } = useVoxtral();
+  const Page = PAGE_BY_STATUS[status];
+  return <Page />;
+};
+
+const App = () => {
+  return (
+    <VoxtralProvider>
+      <AppContent />
+    </VoxtralProvider>
+  );
+};
+
+export default App;

src/components/LandingPage.tsx

@@ -0,0 +1,162 @@
+import { useVoxtral } from "./VoxtralContext";
+import { THEME } from "../constants";
+import {
+  AppGridBackground,
+  MicrophoneIcon,
+  useMountedTransition,
+} from "./SharedUI";
+
+const FEATURES = [
+  {
+    step: "1",
+    title: "Load Model",
+    description:
+      "This demo downloads and caches Voxtral-Mini-4B, a realtime transcription model optimized for in-browser inference (~2.8 GB).",
+  },
+  {
+    step: "2",
+    title: "Private & Local",
+    description:
+      "Your audio is processed locally and never sent to a server. All inference runs on-device with Transformers.js and WebGPU.",
+  },
+  {
+    step: "3",
+    title: "Real-time Streaming",
+    description:
+      "The model is capable of sub-500ms latency with support for 13 languages and a native streaming architecture.",
+  },
+] as const;
+
+export const LandingPage = () => {
+  const { loadModel } = useVoxtral();
+  const mounted = useMountedTransition();
+
+  return (
+    <AppGridBackground
+      className="min-h-screen flex items-center justify-center p-6 overflow-y-auto"
+      style={{ color: THEME.textBlack }}
+    >
+      <div
+        className={`relative max-w-4xl w-full backdrop-blur-sm p-10 md:p-12 rounded-sm border shadow-2xl transition-all duration-700 ${mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+        style={{
+          backgroundColor: `${THEME.beigeLight}F2`,
+          borderColor: THEME.beigeDark,
+        }}
+      >
+        <div className="absolute top-6 right-6 group cursor-help z-10">
+          <span className="absolute right-full mr-4 top-1/2 -translate-y-1/2 whitespace-nowrap text-xs font-mono uppercase tracking-widest text-gray-500 opacity-0 group-hover:opacity-100 transition-all duration-300 translate-x-2 group-hover:translate-x-0 pointer-events-none">
+            System Ready
+          </span>
+          <div className="relative flex h-3 w-3">
+            <span
+              className="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75"
+              style={{ backgroundColor: THEME.mistralOrange }}
+            />
+            <span
+              className="relative inline-flex rounded-sm h-3 w-3"
+              style={{ backgroundColor: THEME.mistralOrange }}
+            />
+          </div>
+        </div>
+
+        <div className="space-y-12">
+          <div className="text-center space-y-4 animate-enter">
+            <div className="flex flex-col items-center justify-center space-y-5">
+              <div
+                className="w-20 h-20 rounded-full flex items-center justify-center shadow-lg"
+                style={{ backgroundColor: `${THEME.mistralOrange}1A` }}
+              >
+                <MicrophoneIcon
+                  className="w-10 h-10"
+                  strokeWidth={1.5}
+                  style={{ color: THEME.mistralOrange }}
+                />
+              </div>
+
+              <h1
+                className="text-6xl md:text-7xl font-semibold tracking-tighter"
+                style={{ color: THEME.textBlack }}
+              >
+                Voxtral Realtime
+              </h1>
+            </div>
+
+            <p className="text-xl md:text-2xl text-gray-600 max-w-2xl mx-auto font-light leading-relaxed">
+              Real-time speech transcription, entirely in your browser.
+              <br />
+              Powered by{" "}
+              <a
+                href="https://huggingface.co/onnx-community/Voxtral-Mini-4B-Realtime-2602-ONNX"
+                className="font-medium underline decoration-2 underline-offset-4 transition-all hover:decoration-[3px]"
+                style={{
+                  color: THEME.mistralOrange,
+                  textDecorationColor: THEME.mistralOrange,
+                }}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Voxtral-Mini-4B
+              </a>
+            </p>
+          </div>
+
+          <div
+            className="grid grid-cols-1 md:grid-cols-3 gap-8 border-t border-b py-10 animate-enter delay-100"
+            style={{ borderColor: THEME.beigeDark }}
+          >
+            {FEATURES.map((feature) => (
+              <div key={feature.step} className="space-y-3 group">
+                <div
+                  className="w-10 h-10 flex items-center justify-center text-white font-bold text-lg shadow-sm transition-transform duration-300 group-hover:-translate-y-1"
+                  style={{ backgroundColor: THEME.mistralOrange }}
+                >
+                  {feature.step}
+                </div>
+                <h4
+                  className="font-semibold text-xl"
+                  style={{ color: THEME.textBlack }}
+                >
+                  {feature.title}
+                </h4>
+                <p className="text-gray-600 leading-relaxed">
+                  {feature.description}
+                </p>
+              </div>
+            ))}
+          </div>
+
+          <div className="flex flex-col items-center animate-enter delay-200">
+            <button
+              onClick={loadModel}
+              className="group relative px-8 py-5 text-white overflow-hidden transition-all hover:shadow-2xl hover:-translate-y-0.5 rounded-xl border-none cursor-pointer outline-none"
+              style={{ backgroundColor: THEME.mistralOrange }}
+            >
+              <div className="absolute inset-0 bg-white/20 translate-y-full group-hover:translate-y-0 transition-transform duration-300 ease-out" />
+              <span className="relative font-bold text-xl tracking-wide flex items-center gap-3">
+                START TRANSCRIPTION
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  strokeWidth={2.5}
+                  stroke="currentColor"
+                  className="w-5 h-5 transition-transform duration-300 group-hover:translate-x-1"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
+                  />
+                </svg>
+              </span>
+            </button>
+
+            <p className="text-xs text-gray-400 mt-4">
+              Requires a browser that supports WebGPU (w/ shader-f16)
+            </p>
+          </div>
+        </div>
+      </div>
+    </AppGridBackground>
+  );
+};

src/components/LoadingPage.tsx

@@ -0,0 +1,140 @@
+import { useVoxtral } from "./VoxtralContext";
+import { THEME } from "../constants";
+import {
+  AppGridBackground,
+  ErrorMessageBox,
+  useMountedTransition,
+} from "./SharedUI";
+
+export const LoadingPage = () => {
+  const { loadingProgress, loadingMessage, error } = useVoxtral();
+  const mounted = useMountedTransition();
+  const progressClamped = Math.min(100, Math.max(0, loadingProgress));
+  const isError = !!error;
+
+  return (
+    <AppGridBackground className="min-h-screen flex items-center justify-center p-8">
+      <div
+        className={`max-w-md w-full backdrop-blur-sm rounded-sm border shadow-xl transition-all duration-700 transform ${mounted ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`}
+        style={{
+          backgroundColor: `${THEME.beigeLight}F2`,
+          borderColor: THEME.beigeDark,
+        }}
+      >
+        <div
+          className={`h-1 w-full transition-colors duration-300 ${isError ? "bg-[var(--mistral-red)]" : "bg-[var(--mistral-orange)]"}`}
+        />
+
+        <div className="p-8 space-y-8">
+          <div className="flex justify-center">
+            {isError ? (
+              <div
+                className="w-20 h-20 rounded-full flex items-center justify-center border"
+                style={{
+                  backgroundColor: `${THEME.errorRed}1A`,
+                  borderColor: `${THEME.errorRed}33`,
+                }}
+              >
+                <svg
+                  className="w-10 h-10"
+                  style={{ color: THEME.errorRed }}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"
+                  />
+                </svg>
+              </div>
+            ) : (
+              <div className="relative">
+                <div
+                  className="w-20 h-20 border-4 rounded-full animate-spin"
+                  style={{
+                    borderColor: THEME.beigeDark,
+                    borderTopColor: THEME.mistralOrange,
+                  }}
+                />
+                <div className="absolute inset-0 flex items-center justify-center">
+                  <div
+                    className="w-2 h-2 rounded-full animate-pulse"
+                    style={{ backgroundColor: THEME.mistralOrange }}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className="text-center space-y-2">
+            <h2
+              className="text-2xl font-bold tracking-tight"
+              style={{ color: THEME.textBlack }}
+            >
+              {isError ? "Initialization Failed" : "Loading Model"}
+            </h2>
+            <p className="text-sm text-gray-500 font-mono uppercase tracking-widest">
+              {isError ? "Voxtral-Mini-4B-Realtime" : loadingMessage}
+            </p>
+          </div>
+
+          {!isError && (
+            <div className="space-y-4">
+              <div className="flex justify-between text-xs font-mono font-bold text-gray-500">
+                <span>PROGRESS</span>
+                <span>{Math.round(progressClamped)}%</span>
+              </div>
+
+              <div
+                className="w-full rounded-full h-4 overflow-hidden border"
+                style={{
+                  backgroundColor: `${THEME.beigeDark}80`,
+                  borderColor: THEME.beigeDark,
+                }}
+              >
+                <div
+                  className="h-full progress-stripe transition-all duration-500 ease-out"
+                  style={{
+                    width: `${progressClamped}%`,
+                    backgroundColor: THEME.mistralOrange,
+                  }}
+                />
+              </div>
+
+              <div
+                className="bg-white border p-3 rounded-sm"
+                style={{ borderColor: THEME.beigeDark }}
+              >
+                <div className="flex items-center space-x-2">
+                  <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                  <p className="font-mono text-xs text-gray-600 truncate">
+                    {`> ${loadingMessage}`}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {isError && (
+            <div className="space-y-4">
+              <ErrorMessageBox
+                className="border p-4 rounded text-left"
+                message={error}
+              />
+              <button
+                onClick={() => window.location.reload()}
+                className="w-full py-3 text-white font-bold transition-colors shadow-lg hover:bg-black cursor-pointer"
+                style={{ backgroundColor: THEME.textBlack }}
+              >
+                RELOAD APPLICATION
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </AppGridBackground>
+  );
+};

src/components/RunningPage.tsx

@@ -0,0 +1,288 @@
+import { useVoxtral } from "./VoxtralContext";
+import { THEME } from "../constants";
+import {
+  AppGridBackground,
+  ErrorMessageBox,
+  MicrophoneIcon,
+  VoiceMeter,
+} from "./SharedUI";
+
+export const RunningPage = () => {
+  const {
+    status,
+    transcript,
+    startRecording,
+    stopRecording,
+    resetSession,
+    error,
+  } = useVoxtral();
+  const isRecording = status === "recording";
+  const transcriptText = transcript.trimStart();
+  const hasTranscript = transcriptText.length > 0;
+
+  const statusConfig = error
+    ? {
+        bg: `${THEME.errorRed}0D`,
+        border: THEME.errorRed,
+        dot: THEME.errorRed,
+        label: "SYSTEM ERROR",
+      }
+    : isRecording
+      ? {
+          bg: `${THEME.mistralOrange}0D`,
+          border: THEME.mistralOrange,
+          dot: THEME.mistralOrange,
+          label: "LIVE TRANSCRIPTION",
+        }
+      : {
+          bg: "transparent",
+          border: THEME.beigeDark,
+          dot: "#9CA3AF",
+          label: "STANDBY",
+        };
+
+  const controlLabel = isRecording ? "Stop" : "Start";
+  const helperText = error
+    ? "Resolve the error and start again."
+    : isRecording
+      ? "Listening live. Tap stop when you're done."
+      : "Tap the microphone to begin.";
+
+  return (
+    <AppGridBackground
+      className="min-h-screen flex items-center justify-center px-4 py-4 md:px-6 md:py-6"
+      style={{ color: THEME.textBlack }}
+    >
+      <div
+        className="w-full max-w-4xl rounded-[2rem] border bg-white/84 p-4 shadow-2xl backdrop-blur-sm md:p-5"
+        style={{ borderColor: error ? `${THEME.errorRed}55` : THEME.beigeDark }}
+      >
+        <section
+          className="flex min-h-[min(78vh,720px)] flex-col overflow-hidden rounded-[1.6rem] border bg-white/90"
+          style={{
+            borderColor: error ? `${THEME.errorRed}55` : THEME.beigeDark,
+          }}
+        >
+          <div
+            className="flex min-h-[76px] items-center justify-between border-b px-5 py-4"
+            style={{ borderColor: THEME.beigeDark }}
+          >
+            <div className="flex min-h-[40px] flex-col justify-center">
+              <p className="text-xs font-mono uppercase tracking-[0.3em] text-gray-500">
+                Voxtral Realtime
+              </p>
+              <h1 className="mt-1 text-xl font-semibold leading-none tracking-tight md:text-2xl">
+                Real-time transcription
+              </h1>
+            </div>
+
+            <div
+              className="flex h-8 items-center gap-2 rounded-full border px-3 py-1.5"
+              style={{
+                backgroundColor: statusConfig.bg,
+                borderColor: `${statusConfig.border}4D`,
+              }}
+            >
+              <span className="relative flex h-2.5 w-2.5">
+                {isRecording && (
+                  <span
+                    className="absolute inline-flex h-full w-full animate-ping rounded-full opacity-75"
+                    style={{ backgroundColor: statusConfig.dot }}
+                  />
+                )}
+                <span
+                  className="relative inline-flex h-2.5 w-2.5 rounded-full"
+                  style={{ backgroundColor: statusConfig.dot }}
+                />
+              </span>
+              <span
+                className="text-[10px] font-bold tracking-[0.2em]"
+                style={{ color: statusConfig.dot }}
+              >
+                {statusConfig.label}
+              </span>
+            </div>
+          </div>
+
+          <div className="flex flex-1 flex-col">
+            {error && (
+              <ErrorMessageBox
+                className="mx-5 mt-5 rounded-2xl border px-4 py-3"
+                message={error}
+              />
+            )}
+
+            <div className="relative flex-1 overflow-hidden">
+              <div
+                className="absolute inset-0 opacity-[0.03] pointer-events-none"
+                style={{
+                  backgroundImage: `linear-gradient(${THEME.black} 1px, transparent 1px), linear-gradient(90deg, ${THEME.black} 1px, transparent 1px)`,
+                  backgroundSize: "20px 20px",
+                }}
+              />
+
+              <div
+                className={`relative z-10 flex h-full flex-col px-5 py-5 md:px-6 md:py-6 ${isRecording ? "justify-start" : "justify-center"}`}
+              >
+                {!isRecording && !transcriptText ? (
+                  <div className="mx-auto flex max-w-md flex-col items-center text-center">
+                    <div className="relative">
+                      <button
+                        onClick={startRecording}
+                        className="relative flex h-28 w-28 cursor-pointer items-center justify-center rounded-full border-none outline-none transition-all duration-300 hover:-translate-y-1 active:scale-95 md:h-32 md:w-32"
+                        style={{
+                          background: `linear-gradient(135deg, ${THEME.mistralOrange}, ${THEME.mistralOrangeLight})`,
+                          boxShadow: `0 22px 44px ${THEME.mistralOrange}30`,
+                        }}
+                        aria-label={controlLabel}
+                      >
+                        <span
+                          className="absolute inset-0 rounded-full opacity-25"
+                          style={{
+                            boxShadow: `0 0 0 14px ${THEME.mistralOrange}20`,
+                          }}
+                        />
+                        <MicrophoneIcon className="relative h-12 w-12 text-white" />
+                      </button>
+                    </div>
+
+                    <div className="mt-8 space-y-3">
+                      <p className="text-2xl font-semibold tracking-tight md:text-3xl">
+                        Start transcription
+                      </p>
+                      <p className="text-sm text-gray-500 md:text-base">
+                        {helperText}
+                      </p>
+                    </div>
+
+                    <div
+                      className="mt-8 w-full rounded-2xl border px-4 py-4"
+                      style={{
+                        backgroundColor: `${THEME.beigeLight}CC`,
+                        borderColor: THEME.beigeDark,
+                      }}
+                    >
+                      <VoiceMeter color={THEME.beigeDark} />
+                      <p className="mt-3 text-xs font-mono uppercase tracking-[0.18em] text-gray-500">
+                        Ready when you are
+                      </p>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <div className="flex items-center justify-between gap-3 pb-4">
+                      <div className="flex items-center space-x-2">
+                        <svg
+                          className="w-4 h-4 text-gray-400"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth={2}
+                            d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                          />
+                        </svg>
+                        <span className="text-xs font-bold text-gray-500 uppercase tracking-widest">
+                          Transcript
+                        </span>
+                      </div>
+
+                      <div
+                        className="rounded-full px-3 py-1 text-[10px] font-bold uppercase tracking-[0.2em]"
+                        style={{
+                          backgroundColor: `${THEME.beigeLight}`,
+                          color: THEME.textBlack,
+                        }}
+                      >
+                        {transcriptText ? "Live output" : "Waiting for speech"}
+                      </div>
+                    </div>
+
+                    <div className="history-scroll flex-1 overflow-y-auto">
+                      {transcriptText ? (
+                        <p
+                          className="max-w-none text-lg font-mono leading-relaxed break-words whitespace-pre-wrap md:text-[1.4rem]"
+                          style={{ color: THEME.textBlack }}
+                        >
+                          <span className="mr-1">{transcriptText}</span>
+                          {isRecording && (
+                            <span
+                              className="inline-block w-2.5 h-5 align-middle cursor-blink ml-1"
+                              style={{ backgroundColor: THEME.mistralOrange }}
+                            />
+                          )}
+                        </p>
+                      ) : (
+                        <div className="flex h-full flex-col items-center justify-center space-y-4 py-12 text-center opacity-70">
+                          <VoiceMeter color={THEME.mistralOrange} active />
+                          <div className="space-y-1">
+                            <p className="text-sm font-mono italic text-gray-500">
+                              Listening for speech...
+                            </p>
+                            <p className="text-xs font-mono uppercase tracking-[0.18em] text-gray-400">
+                              Local processing · realtime stream
+                            </p>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+
+            {(isRecording || hasTranscript) && (
+              <div className="flex justify-center gap-3 px-5 pb-5 pt-2">
+                {!isRecording && hasTranscript && (
+                  <button
+                    onClick={resetSession}
+                    className="rounded-full border px-4 py-2 text-sm font-semibold text-gray-600 transition-all duration-300 hover:-translate-y-0.5 hover:text-black active:scale-95"
+                    style={{
+                      borderColor: THEME.beigeDark,
+                      backgroundColor: `${THEME.beigeLight}`,
+                    }}
+                  >
+                    Reset
+                  </button>
+                )}
+
+                {isRecording && (
+                  <button
+                    onClick={stopRecording}
+                    className="group inline-flex items-center gap-3 rounded-full px-4 py-2 text-sm font-semibold text-white transition-all duration-300 hover:-translate-y-0.5 active:scale-95"
+                    style={{
+                      background: `linear-gradient(135deg, ${THEME.mistralOrangeDark}, ${THEME.mistralOrange})`,
+                      boxShadow: `0 12px 28px ${THEME.mistralOrange}30`,
+                    }}
+                  >
+                    <span className="flex h-8 w-8 items-center justify-center rounded-full bg-white/18">
+                      <svg
+                        className="h-4 w-4"
+                        fill="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <rect x="6" y="6" width="12" height="12" rx="2" />
+                      </svg>
+                    </span>
+                    Stop
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+
+          <div
+            className="flex items-center justify-between border-t bg-white/70 px-5 py-3 text-[10px] font-mono text-gray-400"
+            style={{ borderColor: THEME.beigeDark }}
+          >
+            <span>{isRecording ? "stream: live" : "stream: ready"}</span>
+            <span>{isRecording ? "mic: active" : "mic: idle"}</span>
+          </div>
+        </section>
+      </div>
+    </AppGridBackground>
+  );
+};

src/components/SharedUI.tsx

@@ -0,0 +1,113 @@
+import { useEffect, useState, type CSSProperties, type ReactNode } from "react";
+import { THEME } from "../constants";
+
+const ACTIVITY_BARS = [0, 1, 2, 3, 4];
+
+const GRID_BACKGROUND_STYLE: CSSProperties = {
+  backgroundColor: THEME.beigeLight,
+  backgroundImage: `
+    linear-gradient(${THEME.beigeDark} 1px, transparent 1px),
+    linear-gradient(90deg, ${THEME.beigeDark} 1px, transparent 1px)
+  `,
+  backgroundSize: "40px 40px",
+};
+
+export const AppGridBackground = ({
+  children,
+  className,
+  style,
+}: {
+  children: ReactNode;
+  className: string;
+  style?: CSSProperties;
+}) => (
+  <div className={className} style={{ ...GRID_BACKGROUND_STYLE, ...style }}>
+    {children}
+  </div>
+);
+
+export const MicrophoneIcon = ({
+  className,
+  strokeWidth = 2,
+  style,
+}: {
+  className: string;
+  strokeWidth?: number;
+  style?: CSSProperties;
+}) => (
+  <svg
+    className={className}
+    style={style}
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    strokeWidth={strokeWidth}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"
+    />
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M19 10v2a7 7 0 01-14 0v-2"
+    />
+    <line x1="12" y1="19" x2="12" y2="23" />
+    <line x1="8" y1="23" x2="16" y2="23" />
+  </svg>
+);
+
+export const VoiceMeter = ({
+  color,
+  active = false,
+}: {
+  color: string;
+  active?: boolean;
+}) => (
+  <div className="flex items-end justify-center gap-1.5">
+    {ACTIVITY_BARS.map((bar) => (
+      <span
+        key={bar}
+        className={`voice-meter-bar${active ? " is-active" : ""}`}
+        style={{
+          backgroundColor: color,
+          animationDelay: `${bar * 120}ms`,
+        }}
+      />
+    ))}
+  </div>
+);
+
+export const useMountedTransition = () => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted;
+};
+
+export const ErrorMessageBox = ({
+  message,
+  className,
+}: {
+  message: string;
+  className?: string;
+}) => (
+  <div
+    className={className}
+    style={{
+      backgroundColor: `${THEME.errorRed}0D`,
+      borderColor: `${THEME.errorRed}33`,
+    }}
+  >
+    <p
+      className="font-mono text-xs break-words"
+      style={{ color: THEME.errorRed }}
+    >
+      {`> Error: ${message}`}
+    </p>
+  </div>
+);

src/components/VoxtralContext.tsx

@@ -0,0 +1,27 @@
+import { createContext, useContext } from "react";
+
+export type AppStatus = "idle" | "loading" | "ready" | "recording" | "error";
+
+export interface VoxtralContextType {
+  status: AppStatus;
+  loadingProgress: number;
+  loadingMessage: string;
+  transcript: string;
+  error: string | null;
+  loadModel: () => void;
+  resetSession: () => void;
+  startRecording: () => void;
+  stopRecording: () => void;
+}
+
+export const VoxtralContext = createContext<VoxtralContextType | undefined>(
+  undefined,
+);
+
+export const useVoxtral = () => {
+  const context = useContext(VoxtralContext);
+  if (context === undefined) {
+    throw new Error("useVoxtral must be used within a VoxtralProvider");
+  }
+  return context;
+};

src/components/VoxtralProvider.tsx

@@ -0,0 +1,384 @@
+import { useState, useRef, useCallback } from "react";
+import {
+  BaseStreamer,
+  VoxtralRealtimeForConditionalGeneration,
+  VoxtralRealtimeProcessor,
+  type ProgressInfo,
+} from "@huggingface/transformers";
+import { VoxtralContext, type AppStatus } from "./VoxtralContext";
+
+import type { ReactNode } from "react";
+
+const MODEL_ID = "onnx-community/Voxtral-Mini-4B-Realtime-2602-ONNX";
+const SAMPLE_RATE = 16000;
+const MODEL_FILE_COUNT = 3;
+const CAPTURE_PROCESSOR_NAME = "capture-processor";
+const CAPTURE_WORKLET_SOURCE = `
+  class CaptureProcessor extends AudioWorkletProcessor {
+    process(inputs) {
+      const input = inputs[0];
+      if (input.length > 0 && input[0].length > 0) {
+        this.port.postMessage(input[0]);
+      }
+      return true;
+    }
+  }
+  registerProcessor("capture-processor", CaptureProcessor);
+`;
+
+function getErrorMessage(error: unknown, fallback: string) {
+  return error instanceof Error ? error.message : fallback;
+}
+
+export const VoxtralProvider = ({ children }: { children: ReactNode }) => {
+  const [status, setStatus] = useState<AppStatus>("idle");
+  const [loadingProgress, setLoadingProgress] = useState(0);
+  const [loadingMessage, setLoadingMessage] = useState("Ready to load model");
+  const [transcript, setTranscript] = useState("");
+  const [error, setError] = useState<string | null>(null);
+
+  const modelRef = useRef<any>(null);
+  const processorRef = useRef<any>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const mediaStreamRef = useRef<MediaStream | null>(null);
+  const workletNodeRef = useRef<AudioWorkletNode | null>(null);
+  const audioBufferRef = useRef<Float32Array>(new Float32Array(0));
+  const isRecordingRef = useRef(false);
+  const stopRequestedRef = useRef(false);
+
+  const cleanupAudio = useCallback(() => {
+    isRecordingRef.current = false;
+
+    workletNodeRef.current?.disconnect();
+    workletNodeRef.current = null;
+
+    mediaStreamRef.current?.getTracks().forEach((track) => track.stop());
+    mediaStreamRef.current = null;
+
+    void audioContextRef.current?.close();
+    audioContextRef.current = null;
+  }, []);
+
+  const appendAudio = useCallback((newSamples: Float32Array) => {
+    if (newSamples.length === 0) {
+      return;
+    }
+
+    const previousSamples = audioBufferRef.current;
+    const mergedSamples = new Float32Array(
+      previousSamples.length + newSamples.length,
+    );
+    mergedSamples.set(previousSamples);
+    mergedSamples.set(newSamples, previousSamples.length);
+    audioBufferRef.current = mergedSamples;
+  }, []);
+
+  const loadModel = useCallback(async () => {
+    if (status === "loading" || status === "ready") {
+      return;
+    }
+
+    setStatus("loading");
+    setLoadingProgress(0);
+    setLoadingMessage("Preparing model download...");
+    setError(null);
+
+    try {
+      const progressMap = new Map<string, number>();
+      const progressCallback = (info: ProgressInfo) => {
+        if (
+          info.status !== "progress" ||
+          !info.file.endsWith(".onnx_data") ||
+          info.total === 0
+        ) {
+          return;
+        }
+
+        progressMap.set(info.file, info.loaded / info.total);
+
+        const totalProgress = Array.from(progressMap.values()).reduce(
+          (sum, value) => sum + value,
+          0,
+        );
+
+        setLoadingMessage("Downloading model...");
+        setLoadingProgress(
+          Math.min((totalProgress / MODEL_FILE_COUNT) * 100, 100),
+        );
+      };
+
+      const model =
+        await VoxtralRealtimeForConditionalGeneration.from_pretrained(
+          MODEL_ID,
+          {
+            dtype: {
+              audio_encoder: "q4f16",
+              embed_tokens: "q4f16",
+              decoder_model_merged: "q4f16",
+            },
+            device: "webgpu",
+            progress_callback: progressCallback,
+          },
+        );
+
+      setLoadingMessage("Loading processor...");
+      const processor =
+        await VoxtralRealtimeProcessor.from_pretrained(MODEL_ID);
+
+      modelRef.current = model;
+      processorRef.current = processor;
+      setLoadingProgress(100);
+      setLoadingMessage("Model ready");
+      setStatus("ready");
+    } catch (error) {
+      console.error("Failed to load model:", error);
+      setError(getErrorMessage(error, "Failed to load model"));
+      setLoadingMessage("Initialization failed");
+      setStatus("error");
+    }
+  }, [status]);
+
+  const runTranscription = useCallback(
+    async (model: any, processor: any) => {
+      const runtimeProcessor = processor as any;
+      const audio = () => audioBufferRef.current;
+      const numSamplesFirst = runtimeProcessor.num_samples_first_audio_chunk;
+      await waitUntil(
+        () => audio().length >= numSamplesFirst || stopRequestedRef.current,
+      );
+
+      if (stopRequestedRef.current) {
+        cleanupAudio();
+        setStatus("ready");
+        return;
+      }
+
+      const firstChunkInputs = await runtimeProcessor(
+        audio().subarray(0, numSamplesFirst),
+        { is_streaming: true, is_first_audio_chunk: true },
+      );
+
+      const featureExtractor = runtimeProcessor.feature_extractor;
+      const { hop_length, n_fft } = featureExtractor.config;
+      const winHalf = Math.floor(n_fft / 2);
+      const samplesPerTok = runtimeProcessor.audio_length_per_tok * hop_length;
+
+      async function* inputFeaturesGenerator() {
+        yield firstChunkInputs.input_features;
+
+        let melFrameIdx = runtimeProcessor.num_mel_frames_first_audio_chunk;
+        let startIdx = melFrameIdx * hop_length - winHalf;
+
+        while (!stopRequestedRef.current) {
+          const endNeeded =
+            startIdx + runtimeProcessor.num_samples_per_audio_chunk;
+
+          await waitUntil(
+            () => audio().length >= endNeeded || stopRequestedRef.current,
+          );
+
+          if (stopRequestedRef.current) break;
+
+          const availableSamples = audio().length;
+          let batchEndSample = endNeeded;
+          while (batchEndSample + samplesPerTok <= availableSamples) {
+            batchEndSample += samplesPerTok;
+          }
+
+          const chunkInputs = await runtimeProcessor(
+            audio().slice(startIdx, batchEndSample),
+            { is_streaming: true, is_first_audio_chunk: false },
+          );
+
+          yield chunkInputs.input_features;
+
+          melFrameIdx += chunkInputs.input_features.dims[2];
+          startIdx = melFrameIdx * hop_length - winHalf;
+        }
+      }
+
+      const tokenizer = runtimeProcessor.tokenizer;
+      const specialIds = new Set(tokenizer.all_special_ids.map(BigInt));
+      let tokenCache: bigint[] = [];
+      let printLen = 0;
+      let isPrompt = true;
+
+      const flushDecodedText = () => {
+        if (tokenCache.length === 0) {
+          return;
+        }
+
+        const text = tokenizer.decode(tokenCache, {
+          skip_special_tokens: true,
+        });
+        const printableText = text.slice(printLen);
+        printLen = text.length;
+
+        if (printableText.length > 0) {
+          setTranscript((prev) => prev + printableText);
+        }
+      };
+
+      const streamer = new (class extends BaseStreamer {
+        put(value: bigint[][]) {
+          if (stopRequestedRef.current) {
+            return;
+          }
+
+          if (isPrompt) {
+            isPrompt = false;
+            return;
+          }
+
+          const tokens = value[0];
+
+          if (tokens.length === 1 && specialIds.has(tokens[0])) {
+            return;
+          }
+
+          tokenCache = tokenCache.concat(tokens);
+          flushDecodedText();
+        }
+
+        end() {
+          if (stopRequestedRef.current) {
+            tokenCache = [];
+            printLen = 0;
+            isPrompt = true;
+            return;
+          }
+
+          flushDecodedText();
+          tokenCache = [];
+          printLen = 0;
+          isPrompt = true;
+        }
+      })();
+
+      try {
+        await (model as any).generate({
+          input_ids: firstChunkInputs.input_ids,
+          input_features: inputFeaturesGenerator(),
+          max_new_tokens: 4096,
+          streamer: streamer as any,
+        });
+      } catch (error) {
+        if (!stopRequestedRef.current) {
+          console.error("Transcription error:", error);
+          setError(getErrorMessage(error, "Transcription failed"));
+        }
+      } finally {
+        cleanupAudio();
+        setStatus("ready");
+      }
+    },
+    [cleanupAudio],
+  );
+
+  const startRecording = useCallback(async () => {
+    const model = modelRef.current;
+    const processor = processorRef.current;
+
+    if (!model || !processor || isRecordingRef.current) {
+      return;
+    }
+
+    setTranscript("");
+    setError(null);
+    audioBufferRef.current = new Float32Array(0);
+    isRecordingRef.current = true;
+    stopRequestedRef.current = false;
+    setStatus("recording");
+
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          channelCount: 1,
+          sampleRate: SAMPLE_RATE,
+        },
+      });
+      mediaStreamRef.current = stream;
+
+      const audioContext = new AudioContext({ sampleRate: SAMPLE_RATE });
+      audioContextRef.current = audioContext;
+      await audioContext.resume();
+
+      const sourceNode = audioContext.createMediaStreamSource(stream);
+      const silentGainNode = audioContext.createGain();
+      silentGainNode.gain.value = 0;
+
+      const workletBlob = new Blob([CAPTURE_WORKLET_SOURCE], {
+        type: "application/javascript",
+      });
+      const workletUrl = URL.createObjectURL(workletBlob);
+      await audioContext.audioWorklet.addModule(workletUrl);
+      URL.revokeObjectURL(workletUrl);
+
+      const workletNode = new AudioWorkletNode(
+        audioContext,
+        CAPTURE_PROCESSOR_NAME,
+      );
+      workletNode.port.onmessage = (event: MessageEvent<Float32Array>) => {
+        if (isRecordingRef.current) {
+          appendAudio(new Float32Array(event.data));
+        }
+      };
+
+      sourceNode.connect(workletNode);
+      workletNode.connect(silentGainNode);
+      silentGainNode.connect(audioContext.destination);
+      workletNodeRef.current = workletNode;
+
+      await runTranscription(model, processor);
+    } catch (error) {
+      console.error("Recording error:", error);
+      setError(getErrorMessage(error, "Recording failed"));
+      cleanupAudio();
+      setStatus("ready");
+    }
+  }, [appendAudio, cleanupAudio, runTranscription]);
+
+  const stopRecording = useCallback(() => {
+    stopRequestedRef.current = true;
+    isRecordingRef.current = false;
+    cleanupAudio();
+  }, [cleanupAudio]);
+
+  const resetSession = useCallback(() => {
+    stopRequestedRef.current = false;
+    audioBufferRef.current = new Float32Array(0);
+    setTranscript("");
+    setError(null);
+    setStatus("ready");
+  }, []);
+
+  return (
+    <VoxtralContext.Provider
+      value={{
+        status,
+        loadingProgress,
+        loadingMessage,
+        transcript,
+        error,
+        loadModel,
+        resetSession,
+        startRecording,
+        stopRecording,
+      }}
+    >
+      {children}
+    </VoxtralContext.Provider>
+  );
+};
+
+function waitUntil(condition: () => boolean): Promise<void> {
+  return new Promise((resolve) => {
+    if (condition()) return resolve();
+    const interval = setInterval(() => {
+      if (condition()) {
+        clearInterval(interval);
+        resolve();
+      }
+    }, 50);
+  });
+}

src/constants.ts

@@ -0,0 +1,13 @@
+export const THEME = {
+  beigeLight: "#FFFAEB",
+  beigeMedium: "#FFF0C3",
+  beigeDark: "#E9E2CB",
+  mistralOrange: "#FF8205",
+  mistralOrangeDark: "#FA500F",
+  mistralOrangeLight: "#FFAF00",
+  mistralYellow: "#FFD800",
+  textBlack: "#1E1E1E",
+  black: "#000000",
+  white: "#FFFFFF",
+  errorRed: "#E10500",
+} as const;

src/index.css

@@ -0,0 +1,138 @@
+@import "tailwindcss";
+
+:root {
+  --mistral-red: #e10500;
+  --mistral-orange-dark: #fa500f;
+  --mistral-orange: #ff8205;
+  --mistral-orange-light: #ffaf00;
+  --mistral-yellow: #ffd800;
+
+  --mistral-beige-light: #fffaeb;
+  --mistral-beige-medium: #fff0c3;
+  --mistral-beige-dark: #e9e2cb;
+
+  --mistral-black: #000000;
+  --mistral-black-tinted: #1e1e1e;
+  --mistral-white: #ffffff;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: var(--mistral-beige-light);
+  color: var(--mistral-black);
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+.cursor-blink {
+  animation: blink 1s step-end infinite;
+}
+
+.history-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+.history-scroll::-webkit-scrollbar-track {
+  background: var(--mistral-beige-light);
+}
+.history-scroll::-webkit-scrollbar-thumb {
+  background-color: var(--mistral-beige-dark);
+  border-radius: 4px;
+}
+.history-scroll::-webkit-scrollbar-thumb:hover {
+  background-color: var(--mistral-orange);
+}
+
+@keyframes strip-move {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 30px 0;
+  }
+}
+.progress-stripe {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.2) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.2) 50%,
+    rgba(255, 255, 255, 0.2) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 30px 30px;
+  animation: strip-move 1s linear infinite;
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.animate-enter {
+  animation: fadeUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.delay-100 {
+  animation-delay: 0.1s;
+}
+.delay-200 {
+  animation-delay: 0.2s;
+}
+.delay-300 {
+  animation-delay: 0.3s;
+}
+
+@keyframes meter-idle {
+  0%,
+  100% {
+    transform: scaleY(0.45);
+    opacity: 0.55;
+  }
+  50% {
+    transform: scaleY(0.7);
+    opacity: 0.8;
+  }
+}
+
+@keyframes meter-active {
+  0%,
+  100% {
+    transform: scaleY(0.35);
+  }
+  25% {
+    transform: scaleY(1);
+  }
+  50% {
+    transform: scaleY(0.55);
+  }
+  75% {
+    transform: scaleY(0.9);
+  }
+}
+
+.voice-meter-bar {
+  width: 8px;
+  height: 40px;
+  border-radius: 999px;
+  transform-origin: bottom;
+  animation: meter-idle 1.6s ease-in-out infinite;
+}
+
+.voice-meter-bar.is-active {
+  animation-name: meter-active;
+  animation-duration: 0.9s;
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+});