:root{--bg-deep: #0A0A0F;--bg-surface: #0F0F1A;--bg-card: rgba(20, 20, 35, .7);--bg-card-hover: rgba(30, 30, 50, .85);--bg-editor: #0C0C16;--glass-border: rgba(255, 255, 255, .08);--glass-border-hover: rgba(0, 200, 200, .3);--teal: #00C8C8;--teal-dim: #009999;--purple: #8B5CF6;--pink: #FF2D78;--coral: #FF6B6B;--gold: #FBBF24;--green: #34D399;--text-primary: #F8FAFC;--text-secondary: #94A3B8;--text-dim: #64748B;--text-error: #F87171;--font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--transition: .2s cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased}.jazzcup-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}.jazzcup-bg svg{width:100%;height:100%}.app-container{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:32px 24px;display:flex;flex-direction:column;gap:20px;min-height:100vh}.app-header{text-align:center;padding:24px 0 8px}.logo-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px}.logo-chip{font-size:1.8rem;background:linear-gradient(135deg,var(--teal),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-title{font-size:2rem;font-weight:300;letter-spacing:-1px}.title-thin{font-weight:300;color:var(--text-secondary)}.title-arrow{color:var(--teal);font-weight:300;margin:0 4px}.title-bold{font-weight:800;background:linear-gradient(135deg,var(--teal),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-subtitle{color:var(--text-dim);font-size:.9rem;font-family:var(--font-mono);margin-bottom:12px}.badge-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:100px;font-size:.75rem;font-family:var(--font-mono);background:var(--bg-card);border:1px solid var(--glass-border);color:var(--text-secondary);text-decoration:none;transition:all var(--transition)}.badge:hover{border-color:var(--teal);color:var(--teal)}.badge-alt{color:var(--purple);border-color:#8b5cf64d}.badge-brand{color:var(--pink);border-color:#ff2d7833}.badge-brand:hover{border-color:var(--pink);color:var(--pink)}.target-selector{display:flex;gap:8px;justify-content:center;background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.target-btn{flex:1;max-width:200px;padding:10px 20px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-dim);font-family:var(--font-body);font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:8px;justify-content:center}.target-btn:hover{color:var(--text-primary);background:#ffffff08}.target-btn.active{background:#00c8c81a;border-color:#00c8c84d;color:var(--teal)}.target-icon{font-family:var(--font-mono);font-size:.75rem;font-weight:700;padding:2px 6px;border-radius:4px;background:#ffffff0d;letter-spacing:.5px}.target-btn.active .target-icon{background:#00c8c826}.options-bar{display:flex;gap:16px;align-items:center;justify-content:center;flex-wrap:wrap}.option-item{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-dim);cursor:pointer}.option-input{width:100px;padding:4px 8px;border:1px solid var(--glass-border);border-radius:6px;background:var(--bg-editor);color:var(--text-primary);font-family:var(--font-mono);font-size:.8rem;outline:none;transition:border var(--transition)}.option-input:focus{border-color:var(--teal)}.option-item input[type=checkbox]{accent-color:var(--teal)}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:400px}.editor-panel{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--radius-md);overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color var(--transition)}.editor-panel:focus-within{border-color:var(--glass-border-hover)}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--glass-border);background:#0003}.panel-label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);font-family:var(--font-mono)}.panel-actions{display:flex;gap:6px}.action-btn{padding:4px 12px;border:1px solid var(--glass-border);border-radius:6px;background:transparent;color:var(--text-dim);font-family:var(--font-mono);font-size:.75rem;cursor:pointer;transition:all var(--transition)}.action-btn:hover{border-color:var(--teal);color:var(--teal)}.action-copy{border-color:#00c8c84d;color:var(--teal)}.action-copy:hover{background:#00c8c81a}.action-copy.copied{border-color:var(--green);color:var(--green);background:#34d3991a}.action-clear:hover{border-color:var(--pink);color:var(--pink)}.code-editor{flex:1;width:100%;padding:16px;border:none;background:var(--bg-editor);color:var(--text-primary);font-family:var(--font-mono);font-size:.85rem;line-height:1.6;resize:none;outline:none;-moz-tab-size:2;tab-size:2}.code-editor::placeholder{color:var(--text-dim);opacity:.5}.output-editor{color:var(--teal)}.error-bar{display:flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--radius-sm);background:#f8717114;border:1px solid rgba(248,113,113,.2);color:var(--text-error);font-family:var(--font-mono);font-size:.8rem;animation:fadeInUp .3s ease}.error-icon{width:20px;height:20px;border-radius:50%;background:#f8717133;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.7rem;flex-shrink:0}.app-footer{text-align:center;padding:16px 0;color:var(--text-dim);font-size:.75rem}.footer-links{margin-top:4px}.footer-links a{color:var(--text-dim);text-decoration:none;transition:color var(--transition)}.footer-links a:hover{color:var(--teal)}.dot{margin:0 6px;opacity:.4}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.editor-grid{grid-template-columns:1fr;min-height:600px}.target-selector{flex-direction:column}.target-btn{max-width:100%}.app-title{font-size:1.5rem}.options-bar{flex-direction:column;gap:8px}}.code-editor::-webkit-scrollbar{width:6px;height:6px}.code-editor::-webkit-scrollbar-track{background:transparent}.code-editor::-webkit-scrollbar-thumb{background:var(--text-dim);border-radius:3px}.code-editor::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.option-divider{width:1px;height:20px;background:var(--glass-border);margin:0 4px}.sample-row{display:flex;align-items:center;gap:6px}.sample-label{font-size:.75rem;color:var(--text-dim);font-family:var(--font-mono)}.sample-btn{padding:3px 10px;border:1px solid var(--glass-border);border-radius:100px;background:transparent;color:var(--text-dim);font-family:var(--font-mono);font-size:.7rem;cursor:pointer;transition:all var(--transition)}.sample-btn:hover{border-color:var(--purple);color:var(--purple);background:#8b5cf60f}.sample-btn.sample-active{border-color:var(--green);color:var(--green);background:#34d39914}.panel-footer{display:flex;justify-content:space-between;align-items:center;padding:4px 16px;border-top:1px solid var(--glass-border);background:#00000026;min-height:24px}.stats{font-family:var(--font-mono);font-size:.65rem;color:var(--text-dim);opacity:.7}.shortcut-hint{font-family:var(--font-mono);font-size:.6rem;color:var(--text-dim);opacity:.4}@media(max-width:768px){.sample-row,.option-divider,.shortcut-hint{display:none}}