:root{--color-bg: #000000;--color-surface: #111111;--color-surface-alt: #1a1a1a;--color-border: #2a2a2a;--color-text: #ffffff;--color-text-dim: #888888;--color-text-muted: #555555;--color-accent: #ff3b30;--color-accent-glow: rgba(255, 59, 48, .15);--font-family: "Roboto Flex", "Roboto", system-ui, -apple-system, sans-serif;--font-size-title: 1.5rem;--font-size-body: 1rem;--font-size-timer: 3rem;--font-size-small: .875rem;--font-weight-normal: 400;--font-weight-bold: 700;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-full: 50%;--duration-fast: .15s;--duration-normal: .25s;--duration-slow: .3s;--easing: cubic-bezier(.4, 0, .2, 1);--record-btn-size: 96px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{height:100%;-webkit-text-size-adjust:100%}body{height:100%;font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-normal);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior:none;user-select:none;-webkit-user-select:none}#app{height:100%}.app{display:flex;flex-direction:column;height:100%;height:100dvh;padding:env(safe-area-inset-top) var(--space-lg) env(safe-area-inset-bottom)}.app__header{flex:0 0 auto;padding:var(--space-lg) 0 var(--space-md);text-align:center}.app__title{font-size:var(--font-size-title);font-weight:var(--font-weight-bold);letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-dim)}.app__main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2xl)}.record-btn{width:var(--record-btn-size);height:var(--record-btn-size);border-radius:var(--radius-full);border:3px solid var(--color-text);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color var(--duration-normal) var(--easing),box-shadow var(--duration-normal) var(--easing);-webkit-tap-highlight-color:transparent;touch-action:manipulation;position:relative}.record-btn:active:not(.record-btn--disabled){transform:scale(.95)}.record-btn--active{border-color:var(--color-accent);box-shadow:0 0 0 8px var(--color-accent-glow)}.record-btn--disabled{opacity:.3;cursor:not-allowed}.record-btn__inner{width:36px;height:36px;border-radius:var(--radius-full);background:var(--color-text);transition:background var(--duration-normal) var(--easing),border-radius var(--duration-normal) var(--easing),width var(--duration-normal) var(--easing),height var(--duration-normal) var(--easing)}.record-btn__inner--recording{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--color-accent);animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.status{text-align:center;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-md)}.status--idle{color:var(--color-text-muted);font-size:var(--font-size-body);letter-spacing:.03em}.status--recording{color:var(--color-accent)}.status--processing{color:var(--color-text-dim)}.status--done{max-width:100%}.status--error{color:var(--color-accent)}.status__label{font-size:var(--font-size-small);color:var(--color-text-dim);letter-spacing:.05em;text-transform:uppercase}.status__text{max-width:320px;max-height:200px;overflow-y:auto;padding:var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-body);line-height:1.5;color:var(--color-text);user-select:text;-webkit-user-select:text;text-align:left}.status__error-message{max-width:300px;font-size:var(--font-size-small);line-height:1.5}.timer{font-size:var(--font-size-timer);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;letter-spacing:.05em}.spinner{width:24px;height:24px;border:3px solid var(--color-border);border-top-color:var(--color-text);border-radius:var(--radius-full);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:var(--space-sm) var(--space-lg);border:none;border-radius:var(--radius-lg);font-family:var(--font-family);font-size:var(--font-size-body);font-weight:var(--font-weight-bold);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--duration-fast) var(--easing),opacity var(--duration-fast) var(--easing)}.btn--ghost{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}.btn--ghost:active{background:var(--color-surface-alt)}.handler-selector{display:flex;gap:var(--space-xs);justify-content:center;margin-top:var(--space-sm)}.handler-selector--disabled{opacity:.4;pointer-events:none}.handler-selector__btn{padding:var(--space-xs) var(--space-sm);min-height:36px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:transparent;color:var(--color-text-dim);font-family:var(--font-family);font-size:var(--font-size-small);font-weight:var(--font-weight-normal);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--duration-fast) var(--easing),color var(--duration-fast) var(--easing),border-color var(--duration-fast) var(--easing)}.handler-selector__btn--active{background:var(--color-surface-alt);color:var(--color-text);border-color:var(--color-text-muted)}.handler-selector__btn:active:not(:disabled){background:var(--color-surface-alt)}.status__hint{font-size:var(--font-size-small);color:var(--color-text-muted);letter-spacing:.03em}