:root{--bg: #fafafa;--surface: #ffffff;--border: #eaeaea;--text: #171717;--text-muted: #6b6b6b;--accent: #0d9488;--accent-light: #ccfbf1;--accent-hover: #0f766e;--pastel: #ebe6e0;--pastel-mid: #ddd6ce;--pastel-text: #4a443c;--error: #dc2626;--radius: 8px;--radius-lg: 12px;--shadow: 0 1px 3px rgba(0, 0, 0, .04);--shadow-soft: 0 4px 12px rgba(0, 0, 0, .04);--font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--section-spacing: 3.5rem}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:var(--font);font-size:14px;line-height:1.5;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}#app{min-height:100vh}.intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:var(--bg)}.intro-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 80% 50% at 50% 50%,var(--accent-light) 0%,transparent 70%);opacity:.5}.intro-content{position:relative;text-align:center;padding:2rem}.intro-label{font-size:1.25rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 1.5rem;text-shadow:0 0 16px rgba(13,148,136,.5),0 0 32px rgba(13,148,136,.3)}.intro-sample{font-family:ui-monospace,SF Mono,Monaco,monospace;font-size:clamp(.875rem,2.2vw,1rem);line-height:1.7;text-align:left;margin:0 auto 1.5rem;padding:1.25rem 1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);max-width:360px;overflow:hidden}.intro-sample code{color:var(--text)}.intro-line{display:block;opacity:0;animation:intro-line-in .5s ease forwards}@keyframes intro-line-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.intro-tagline{font-size:.9375rem;color:var(--text-muted);margin:0}.intro-exit{animation:intro-zoom-out .6s ease forwards}.intro-exit .intro-content{animation:intro-scale-out .6s ease forwards}@keyframes intro-zoom-out{to{opacity:0}}@keyframes intro-scale-out{to{transform:scale(.96);opacity:0}}.layout{min-height:100vh;display:flex;flex-direction:column;padding:2rem 1.5rem 3rem;animation:layout-in .6s ease}@keyframes layout-in{0%{opacity:0}to{opacity:1}}.header{text-align:center;margin-bottom:var(--section-spacing)}.logo{font-size:2rem;font-weight:600;letter-spacing:-.03em;color:var(--text);margin:0 0 .5rem;text-shadow:0 0 20px rgba(13,148,136,.5),0 0 40px rgba(13,148,136,.3),0 0 60px rgba(204,251,241,.2),0 2px 4px rgba(0,0,0,.06)}.tagline{font-size:1rem;line-height:1.6;color:var(--text-muted);max-width:28ch;margin:0 auto}.header-downloads{margin:.75rem 0 0;font-size:.9375rem;font-weight:500;color:var(--pastel-text)}.mode-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:3px;box-shadow:var(--shadow)}.mode-btn{padding:.5rem 1rem;font-family:var(--font);font-size:.875rem;font-weight:500;color:var(--text-muted);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background .2s ease,color .2s ease}.mode-btn:hover{color:var(--text)}.mode-btn.active{background:var(--pastel);color:var(--pastel-text)}.mode-btn:focus-visible,.btn:focus-visible,.upload-label:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}.video-section{max-width:880px;margin:0 auto var(--section-spacing);width:100%;text-align:center}.video-wrap{position:relative;overflow:hidden;aspect-ratio:16 / 9;width:100%;border-radius:20px;background:var(--border)}.demo-video{display:block;width:100%;height:100%;object-fit:cover;border-radius:20px}.video-caption{margin:.75rem 0 0;font-size:.875rem;line-height:1.5;color:var(--text-muted);text-align:center}.video-section .mode-toggle{margin-top:1.25rem;margin-left:auto;margin-right:auto}.tool-section{text-align:center;margin-bottom:1.5rem}.tool-heading{font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--text);margin:0 0 .25rem}.tool-sub{font-size:.9375rem;line-height:1.5;color:var(--text-muted);margin:0}.main{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:1100px;margin:0 auto;width:100%;animation:section-in .5s ease .15s both}@keyframes section-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.layout{padding:1.5rem 1rem 2rem}.header,.video-section{margin-bottom:2rem}.tool-section{margin-bottom:1.25rem}.main{grid-template-columns:1fr;gap:1.25rem}.footer{margin-top:2rem}}.panel{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);overflow:hidden;transition:box-shadow .2s ease}.panel:focus-within{box-shadow:var(--shadow-soft),0 0 0 1px var(--border)}.panel-head{display:flex;align-items:center;justify-content:space-between;min-height:2.75rem;padding:0 1rem;border-bottom:1px solid var(--border);font-size:.8125rem;font-weight:500;color:var(--text-muted)}.panel-head span{line-height:2.75rem}.panel-head .upload-label,.panel-head .btn{flex-shrink:0;height:2rem;padding:0 .75rem;font-size:.875rem}.upload-label{display:inline-flex;align-items:center;justify-content:center;height:2rem;padding:0 .75rem;font-family:var(--font);font-size:.875rem;font-weight:500;color:var(--pastel-text);background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background .15s,color .15s}.upload-label:hover{background:var(--pastel);color:var(--pastel-text)}.upload-label input{position:absolute;width:0;height:0;opacity:0}.editor{flex:1;min-height:280px;margin:0;padding:1rem;font-family:ui-monospace,SF Mono,Monaco,monospace;font-size:13px;line-height:1.5;border:none;resize:vertical;background:var(--surface);color:var(--text)}.editor::placeholder{color:var(--text-muted)}.output-editor{resize:none;white-space:pre-wrap;word-break:break-all;color:var(--text)}.panel-actions{padding:.75rem 1rem;border-top:1px solid var(--border)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:.5rem 1rem;font-family:var(--font);font-size:.875rem;font-weight:500;border-radius:6px;border:none;cursor:pointer;transition:background .15s,color .15s}.btn-primary{background:var(--pastel);color:var(--pastel-text)}.btn-primary:hover{background:var(--pastel-mid);color:var(--pastel-text)}.btn-ghost{background:transparent;color:var(--pastel-text)}.btn-ghost:hover:not(:disabled){background:var(--pastel);color:var(--pastel-text)}.btn-ghost:disabled{opacity:.5;cursor:not-allowed}.error{margin:0;padding:.5rem 1rem;font-size:.8125rem;color:var(--error);display:none}.error.visible{display:block}.footer{margin-top:var(--section-spacing);padding-top:1.5rem;border-top:1px solid var(--border);text-align:center;font-size:.8125rem;color:var(--text-muted)}.footer-downloads{display:block;margin-top:.5rem;font-size:.75rem;color:var(--text-muted)}.footer a{color:var(--accent);text-decoration:none;margin:0 .75rem;text-shadow:0 0 12px rgba(13,148,136,.4),0 0 24px rgba(13,148,136,.2);transition:color .2s,text-shadow .2s}.footer a:hover{color:var(--accent-hover);text-decoration:underline;text-shadow:0 0 16px rgba(13,148,136,.5),0 0 32px rgba(13,148,136,.3),0 0 48px rgba(204,251,241,.2)}