:root{--bg-color: #050505;--accent-color: #00f2ff;--accent-soft: rgba(0, 242, 255, .1);--text-primary: #ffffff;--text-secondary: #a0a0a0;--card-bg: rgba(255, 255, 255, .03);--border-color: rgba(255, 255, 255, .1);--font-main: "Outfit", sans-serif;--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-main);overflow-x:hidden;line-height:1.6}#app{min-height:100vh;display:flex;flex-direction:column}.container{max-width:1200px;margin:0 auto;padding:2rem;width:100%}header{padding:4rem 0 2rem;text-align:center}h1{font-size:3.5rem;font-weight:600;background:linear-gradient(135deg,#fff,#00f2ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:1rem}p.subtitle{color:var(--text-secondary);font-size:1.2rem;max-width:600px;margin:0 auto 3rem}.playground{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2rem}@media(max-width:900px){.playground{grid-template-columns:1fr}}.editor-pane{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;height:500px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px #00000080;transition:border-color .3s ease}.editor-pane:focus-within{border-color:var(--accent-color)}.pane-header{padding:.75rem 1.5rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--text-secondary)}.header-left{display:flex;align-items:center;gap:.5rem}.action-btn{background:#ffffff1a;border:1px solid var(--border-color);color:var(--text-primary);padding:.25rem .75rem;border-radius:6px;cursor:pointer;font-size:.8rem;font-family:var(--font-main);transition:all .2s}.action-btn:hover{background:var(--accent-color);color:#000;border-color:var(--accent-color)}select{background:#ffffff0d;border:1px solid var(--border-color);color:var(--text-primary);padding:.25rem 2rem .25rem .75rem;border-radius:6px;cursor:pointer;font-size:.8rem;font-family:var(--font-main);transition:all .2s;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a0a0a0' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - .75rem) center}select:hover{border-color:var(--accent-color);background-color:#ffffff1a}select option{background-color:#1a1a1a;color:var(--text-primary)}.label{font-weight:500;letter-spacing:.05em;text-transform:uppercase}textarea,.output-viewer{flex:1;background:transparent;border:none;color:var(--text-primary);font-family:var(--font-mono);font-size:.95rem;padding:1.5rem;resize:none;outline:none;white-space:pre-wrap;word-break:break-all;overflow-y:auto}.output-viewer.error{color:#ff4d4d}.stats-container{margin-top:3rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.stat-card{background:var(--card-bg);border:1px solid var(--border-color);padding:1.5rem;border-radius:12px;text-align:center}.stat-value{font-size:2rem;font-weight:600;color:var(--accent-color);margin-bottom:.25rem}.stat-label{color:var(--text-secondary);font-size:.9rem}footer{margin-top:auto;padding:4rem 2rem 2rem;text-align:center;color:var(--text-secondary);font-size:.9rem}footer a{color:var(--accent-color);text-decoration:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.container>*{animation:fadeIn .8s ease-out forwards}header{animation-delay:.1s}.playground{animation-delay:.3s}.stats-container{animation-delay:.5s}