:root{color-scheme:dark;--font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;--font-display: "Syne", var(--font-sans);--font-mono: "DM Mono", ui-monospace, monospace;--bg-base: #080c12;--bg-deep: #050810;--bg-surface: rgba(12, 17, 28, .82);--bg-inset: rgba(6, 10, 20, .75);--bg-hover: rgba(255, 255, 255, .04);--border: rgba(255, 255, 255, .08);--border-focus: rgba(251, 191, 36, .5);--border-hover: rgba(255, 255, 255, .15);--text: #e8edf5;--text-muted: #6b7a90;--text-dim: #3d4a5c;--amber: #fbbf24;--amber-dim: rgba(251, 191, 36, .18);--amber-glow: rgba(251, 191, 36, .08);--ice: #93c5fd;--ice-dim: rgba(147, 197, 253, .15);--ice-glow: rgba(147, 197, 253, .06);--green: #34d399;--red: #f87171;--orange: #fb923c;--violet: #a78bfa;--radius-xl: 28px;--radius-lg: 20px;--radius-md: 12px;--radius-sm: 8px;--radius-pill: 999px;--shadow-lg: 0 24px 64px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .25);--shadow-sm: 0 4px 16px rgba(0, 0, 0, .25)}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-width:320px;font-family:var(--font-sans);background-color:var(--bg-base);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(251,191,36,.07) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 80% 80%,rgba(147,197,253,.05) 0%,transparent 55%);pointer-events:none;z-index:0}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0}button,select,textarea,input{font:inherit;color:inherit}.shell{position:relative;z-index:1;width:min(780px,calc(100vw - 24px));margin:0 auto;padding:40px 0 80px;display:grid;gap:14px}@media(max-width:480px){.shell{padding:20px 0 64px;gap:10px}}.panel{position:relative;border:1px solid var(--border);background:var(--bg-surface);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border-radius:var(--radius-xl);padding:28px;box-shadow:var(--shadow-lg);overflow:hidden}.panel:before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}@media(max-width:480px){.panel{padding:20px 18px;border-radius:var(--radius-lg)}}.hero{padding:32px 36px;background:radial-gradient(ellipse 70% 80% at 95% 50%,rgba(251,191,36,.06) 0%,transparent 60%),var(--bg-surface)}.hero h1{margin:8px 0 0;font-family:var(--font-display);font-size:clamp(1.8rem,5.5vw,2.8rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;background:linear-gradient(135deg,#fff 0%,var(--amber) 55%,var(--ice) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.eyebrow{margin:0;font-family:var(--font-mono);color:var(--amber);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:500;opacity:.9}.subtitle{margin:12px 0 0;color:var(--text-muted);line-height:1.7;font-size:.92rem;max-width:520px}.hero-inner{display:flex;align-items:flex-start;gap:18px}.hero-icon{flex-shrink:0;margin-top:4px}.recorder-panel{display:flex;flex-direction:column;align-items:center;gap:20px;padding-top:32px;padding-bottom:32px}.recorder-panel--floating{min-height:100vh;border-radius:0;border:none;box-shadow:none;background:radial-gradient(circle at top,rgba(251,191,36,.1),transparent 45%),linear-gradient(180deg,#080c12fa,#050810fa);justify-content:center;padding:24px 22px 28px}.recorder-panel--placeholder{align-items:stretch}.recorder-panel__header{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.recorder-panel__eyebrow{margin:0 0 4px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:500;opacity:.8}.recorder-panel__title{margin:0;font-family:var(--font-display);font-size:1.1rem;font-weight:700;letter-spacing:-.02em}.floating-note,.floating-tip{margin:0;font-size:.78rem;color:var(--text-muted);text-align:center;line-height:1.55}.floating-note{align-self:center}.floating-status{display:grid;gap:10px}.floating-status__text{margin:0}.lang-row{align-self:stretch}.field{display:flex;align-items:center;gap:14px}.field-label{color:var(--text-muted);font-size:.82rem;white-space:nowrap;font-weight:500}.field select{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-inset);color:var(--text);padding:.5rem .85rem;font-size:.85rem;outline:none;flex:1;transition:border-color .15s;cursor:pointer}.field select:focus{border-color:var(--border-focus)}.waveform-area{position:relative;width:220px;height:220px;display:flex;align-items:center;justify-content:center;flex-shrink:0}@media(max-width:360px){.waveform-area{width:175px;height:175px}}.waveform-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border-radius:50%;opacity:0;transition:opacity .4s ease}.waveform-canvas--active{opacity:1}.waveform-btn-wrap{position:relative;z-index:1}.record-timer{position:absolute;bottom:-4px;left:50%;transform:translate(-50%);font-family:var(--font-mono);font-size:.82rem;font-weight:500;color:var(--amber);letter-spacing:.08em;z-index:2;background:#080c12cc;padding:3px 12px;border-radius:var(--radius-pill);border:1px solid rgba(251,191,36,.2)}.btn-record{width:80px;height:80px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s;outline:none}.btn-record:focus-visible{box-shadow:0 0 0 3px #fbbf2480}.btn-record--idle{background:linear-gradient(145deg,var(--amber),#f59e0b);color:#0c0f14;box-shadow:0 0 #fbbf2459,0 8px 32px #fbbf2440;animation:pulse-idle 2.8s ease-in-out infinite}.btn-record--idle:hover{transform:scale(1.08);box-shadow:0 0 #fbbf2459,0 12px 40px #fbbf2459}.btn-record--stop{background:linear-gradient(145deg,#f87171,#ef4444);color:#fff;box-shadow:0 0 #f8717166,0 8px 32px #f8717140;animation:pulse-rec 1.4s ease-in-out infinite}.btn-record--stop:hover{transform:scale(1.08)}.btn-record--uploading{background:#0f1624e6;border:2px solid rgba(251,191,36,.3);color:var(--amber);cursor:default}@keyframes pulse-idle{0%,to{box-shadow:0 0 #fbbf244d,0 8px 32px #fbbf2433}50%{box-shadow:0 0 0 16px #fbbf2400,0 8px 32px #fbbf2433}}@keyframes pulse-rec{0%,to{box-shadow:0 0 #f8717166,0 8px 24px #f8717133}50%{box-shadow:0 0 0 20px #f8717100,0 8px 24px #f8717133}}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.phase-label{margin:0;font-size:.85rem;color:var(--text-muted);text-align:center;letter-spacing:.01em}.secondary-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.btn-ghost{border:1px solid var(--border);border-radius:var(--radius-pill);padding:.52rem 1.2rem;background:transparent;color:var(--text-muted);cursor:pointer;font-size:.83rem;font-weight:500;transition:border-color .15s,color .15s,background .15s;letter-spacing:.01em}.btn-ghost:hover{border-color:#fbbf2459;color:var(--amber);background:var(--amber-glow)}.btn-ghost input[type=file]{display:none}.btn-ghost--sm{font-size:.76rem;padding:.32rem .8rem}.pip-body{margin:0;font-family:var(--font-sans);min-width:320px;min-height:100vh;background:radial-gradient(ellipse at top,rgba(251,191,36,.08),transparent 50%),linear-gradient(180deg,#080c12,#050810);color:var(--text);-webkit-font-smoothing:antialiased}.pip-root{min-height:100vh}.error-box{margin:0;padding:12px 16px;border-radius:var(--radius-md);background:#7f1d1d4d;color:#fca5a5;border:1px solid rgba(248,113,113,.22);font-size:.85rem;align-self:stretch;text-align:center;line-height:1.5}.output{display:grid;gap:16px}.output-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.output-header h2{margin:0;font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:-.01em}.btn-copy{border:none;border-radius:var(--radius-pill);padding:.48rem 1.2rem;background:linear-gradient(135deg,var(--amber),#f59e0b);color:#0c0f14;font-weight:700;font-size:.82rem;cursor:pointer;transition:opacity .15s,transform .15s,box-shadow .15s;letter-spacing:.01em}.btn-copy:hover:not(:disabled){transform:scale(1.04);box-shadow:0 4px 20px #fbbf244d}.btn-copy:disabled{opacity:.3;cursor:not-allowed}textarea{width:100%;min-height:200px;resize:vertical;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-inset);color:var(--text);padding:16px 18px;line-height:1.7;font-size:.93rem;outline:none;transition:border-color .15s,box-shadow .15s;font-family:var(--font-sans)}textarea:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px #fbbf2414}textarea::placeholder{color:var(--text-dim)}.usage-panel{display:grid;gap:16px}.usage-header{display:flex;align-items:center;justify-content:space-between}.usage-header h2{margin:0;font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:-.01em}.usage-placeholder{margin:0;font-size:.85rem;color:var(--text-muted)}.usage-note{margin:0;font-family:var(--font-mono);font-size:.72rem;color:var(--text-dim);line-height:1.6}.usage-body{display:grid;gap:14px}.usage-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}@media(max-width:380px){.usage-stats{grid-template-columns:repeat(2,1fr)}}.usage-stat{display:flex;flex-direction:column;gap:5px;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px;transition:border-color .15s}.usage-stat:hover{border-color:var(--border-hover)}.usage-stat__val{font-family:var(--font-mono);font-size:1.3rem;font-weight:500;line-height:1.1;color:var(--text);letter-spacing:-.02em}.usage-stat__val--warn{color:var(--orange)}.usage-stat__label{font-size:.7rem;color:var(--text-muted);letter-spacing:.03em;text-transform:uppercase}.usage-bar-wrap{height:4px;background:#ffffff0f;border-radius:var(--radius-pill);overflow:hidden}.usage-bar{height:100%;border-radius:var(--radius-pill);background:linear-gradient(90deg,#f59e0b,var(--amber));transition:width .6s cubic-bezier(.4,0,.2,1);min-width:4px}.usage-bar--over{background:linear-gradient(90deg,var(--orange),var(--red))}.usage-bar-label{margin:0;font-family:var(--font-mono);font-size:.72rem;color:var(--text-muted);letter-spacing:.02em}.history h2{margin:0 0 16px;font-family:var(--font-display);font-size:1rem;font-weight:700;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-pill);background:#fbbf2426;color:var(--amber);font-size:.7rem;font-weight:700;font-family:var(--font-mono)}.history-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.history-item{border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-inset);padding:14px 16px;display:grid;gap:10px;transition:border-color .15s}.history-item:hover{border-color:var(--border-hover)}.history-item--failed{border-color:#f8717138;background:#7f1d1d1a}.history-item--transcribing{border-color:#93c5fd38}.history-item__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.history-status{border-radius:var(--radius-pill);padding:2px 10px;font-size:.72rem;font-weight:600;font-family:var(--font-mono);letter-spacing:.02em}.history-status--pending{background:#94a3b81f;color:#7a8a9c}.history-status--transcribing{background:#93c5fd24;color:var(--ice)}.history-status--done{background:#34d39921;color:var(--green)}.history-status--failed{background:#f8717124;color:var(--red)}.history-time,.history-lang{font-family:var(--font-mono);font-size:.7rem;color:var(--text-dim);background:#ffffff0a;padding:2px 9px;border-radius:var(--radius-pill);border:1px solid var(--border)}.history-error{margin:0;font-size:.82rem;color:#fca5a5;line-height:1.5}.history-transcript{margin:0;font-size:.86rem;color:#e8edf5bf;line-height:1.6;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.history-item__actions{display:flex;flex-wrap:wrap;gap:7px}.btn-sm{border:none;border-radius:var(--radius-pill);padding:.36rem .9rem;font-size:.76rem;font-weight:600;cursor:pointer;color:#0c0f14;background:linear-gradient(135deg,var(--amber),#f59e0b);transition:opacity .15s,transform .12s;letter-spacing:.01em}.btn-sm:hover:not(:disabled){transform:scale(1.03)}.btn-sm:disabled{opacity:.35;cursor:not-allowed}.btn-sm--danger{background:linear-gradient(135deg,#f8717133,#ef444433);color:var(--red);border:1px solid rgba(248,113,113,.25)}.btn-sm--danger:hover:not(:disabled){background:linear-gradient(135deg,#f871714d,#ef44444d)}.pip-output{align-self:stretch;display:grid;gap:10px;background:var(--bg-inset);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 16px}.pip-output__header{display:flex;align-items:center;justify-content:space-between;gap:8px}.pip-output__label{font-size:.78rem;font-weight:600;color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;font-family:var(--font-mono)}.pip-output__text{font-size:.88rem;line-height:1.65;color:var(--text);white-space:pre-wrap;word-break:break-word;max-height:150px;overflow-y:auto}.pip-output__placeholder{color:var(--text-dim);font-style:italic}.v2-shell{position:relative;z-index:1;width:min(780px,calc(100vw - 24px));margin:0 auto;padding:40px 0 80px;display:flex;flex-direction:column;gap:14px;min-height:100vh}@media(max-width:480px){.v2-shell{padding:20px 0 64px;gap:10px}}.v2-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px solid var(--border);background:var(--bg-surface);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border-radius:var(--radius-xl);padding:22px 28px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.v2-header:before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}.v2-header__left{display:flex;flex-direction:column;gap:5px}.v2-title{margin:0;font-family:var(--font-display);font-size:clamp(1.4rem,4vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1;background:linear-gradient(135deg,#fff 0%,var(--amber) 55%,var(--ice) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.v2-header__right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.v2-lang-select select{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-inset);color:var(--text-muted);padding:.44rem .8rem;font-size:.82rem;outline:none;transition:border-color .15s;cursor:pointer}.v2-lang-select select:focus{border-color:var(--border-focus)}.v2-btn-undo,.v2-btn-clear{border:1px solid var(--border);border-radius:var(--radius-pill);padding:.44rem 1rem;background:transparent;color:var(--text-muted);cursor:pointer;font-size:.8rem;font-weight:500;transition:border-color .15s,color .15s,background .15s;letter-spacing:.01em}.v2-btn-undo:hover:not(:disabled){border-color:#93c5fd59;color:var(--ice);background:var(--ice-glow)}.v2-btn-undo:disabled{opacity:.3;cursor:not-allowed}.v2-btn-clear:hover:not(:disabled){border-color:#f8717159;color:var(--red);background:#f871710f}.v2-btn-clear:disabled{opacity:.3;cursor:not-allowed}.v2-btn-copy{border:none;border-radius:var(--radius-pill);padding:.44rem 1.1rem;background:linear-gradient(135deg,var(--amber),#f59e0b);color:#0c0f14;font-weight:700;font-size:.8rem;cursor:pointer;transition:opacity .15s,transform .15s,box-shadow .15s;letter-spacing:.01em}.v2-btn-copy:hover:not(:disabled){transform:scale(1.04);box-shadow:0 4px 20px #fbbf244d}.v2-btn-copy:disabled{opacity:.3;cursor:not-allowed}.v2-editor-section{display:flex;flex-direction:column;gap:10px;border:1px solid var(--border);background:var(--bg-surface);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border-radius:var(--radius-xl);padding:22px 28px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.v2-editor-section:before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}.v2-editor{width:100%;min-height:280px;resize:vertical;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-inset);color:var(--text);padding:18px 20px;line-height:1.75;font-size:.95rem;outline:none;transition:border-color .15s,box-shadow .15s;font-family:var(--font-sans)}.v2-editor:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px #fbbf2412}.v2-editor::placeholder{color:var(--text-dim);font-style:italic}.v2-editor:disabled{opacity:.55;cursor:not-allowed}.v2-last-instruction{margin:0;font-size:.78rem;color:var(--text-muted);line-height:1.55;padding:0 4px}.v2-last-instruction__label{color:var(--amber);font-weight:600;margin-right:4px}.v2-recorder{display:flex;flex-direction:column;align-items:center;gap:16px;border:1px solid var(--border);background:var(--bg-surface);backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);border-radius:var(--radius-xl);padding:32px 28px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.v2-recorder:before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}.v2-btn-pair{display:flex;align-items:center;gap:44px}.v2-btn-pair-divider{color:var(--text-dim);font-size:1.5rem;font-weight:300;line-height:1;margin-bottom:18px}.rb-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}.rb-btn{position:relative;z-index:2;width:60px;height:60px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:none;transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .15s,box-shadow .2s;flex-shrink:0}.rb-btn:hover:not(:disabled){transform:scale(1.1)}.rb-btn:active:not(:disabled){transform:scale(.93)}.rb-btn:disabled{opacity:.3;cursor:not-allowed}.rb-btn:focus-visible{box-shadow:0 0 0 3px #fbbf2466}.rb--input .rb-btn{background:linear-gradient(145deg,var(--amber),#f59e0b);color:#0c0f14;box-shadow:0 6px 24px #fbbf2438}.rb--command .rb-btn{background:linear-gradient(145deg,#a78bfa,#7c3aed);color:#fff;box-shadow:0 6px 24px #a78bfa38}.rb-btn--active{transform:scale(1.08)}.rb-btn--active:hover{transform:scale(1.15)}.rb-inner{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1}.rb-timer{font-family:var(--font-mono);font-size:.6rem;font-weight:500;letter-spacing:.04em;color:inherit;opacity:.9}.rb-label{font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:2;font-family:var(--font-mono)}.rb--input .rb-label{color:var(--amber)}.rb--command .rb-label{color:var(--violet)}.v2-processing-row{display:flex;align-items:center;gap:10px}.v2-spinner{color:var(--amber);display:flex;align-items:center}.v2-phase-label{margin:0;font-size:.85rem;color:var(--text-muted);text-align:center;letter-spacing:.01em}.v2-mode-hint{font-weight:700}.v2-mode-hint--input{color:var(--amber)}.v2-mode-hint--command,.v2-last-instruction__label--command{color:var(--violet)}.v2-footer-link{text-align:center;margin:0}.v2-footer-link a{font-size:.78rem;color:var(--text-dim);text-decoration:none;transition:color .15s;letter-spacing:.01em}.v2-footer-link a:hover{color:var(--amber)}
