*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#030712;color:#f3f4f6;min-height:100vh}.layout{display:flex;flex-direction:column;height:100vh}.header{justify-content:space-between;padding:.75rem 1.5rem;border-bottom:1px solid #1f2937;flex-shrink:0}.header,.header-left{display:flex;align-items:center}.header-left{gap:.75rem}.header-title{font-size:1.125rem;font-weight:600}.header-badge{font-size:.75rem;color:#6b7280}.header-links{display:flex;align-items:center;gap:.75rem}.header-link{font-size:.875rem;color:#9ca3af;text-decoration:none;transition:color .15s}.header-link:hover{color:#e5e7eb}.main{display:flex;flex:1 1;overflow:hidden}.panel-left{border-right:1px solid #1f2937}.panel-left,.panel-right{display:flex;flex-direction:column;width:50%}.panel-header{padding:.5rem 1rem;border-bottom:1px solid #1f2937;display:flex;align-items:center;justify-content:space-between}.panel-label{font-size:.875rem;color:#9ca3af}.convert-btn{padding:.375rem 1rem;background-color:#2563eb;color:#fff;font-size:.875rem;font-weight:500;border:none;border-radius:.375rem;cursor:pointer;transition:background-color .15s}.convert-btn:hover{background-color:#3b82f6}.convert-btn:disabled{background-color:#1e3a5f;color:#9ca3af;cursor:not-allowed}.editor{flex:1 1;background:transparent;padding:1rem;font-family:SF Mono,Fira Code,Fira Mono,Menlo,monospace;font-size:.875rem;color:#f3f4f6;border:none;resize:none;outline:none}.placeholders-section{border-top:1px solid #1f2937}.placeholders-editor{width:100%;height:7rem;background:transparent;padding:1rem;font-family:SF Mono,Fira Code,Fira Mono,Menlo,monospace;font-size:.875rem;color:#f3f4f6;border:none;resize:none;outline:none}.tabs{display:flex;align-items:center;gap:.5rem}.tab{font-size:.875rem;padding:.125rem .5rem;border-radius:.25rem;border:none;cursor:pointer;transition:color .15s,background-color .15s;background:transparent;color:#6b7280}.tab:hover{color:#d1d5db}.tab-active{background-color:#1f2937;color:#e5e7eb}.output{flex:1 1;padding:1rem;font-family:SF Mono,Fira Code,Fira Mono,Menlo,monospace;font-size:.875rem;overflow:auto;white-space:pre-wrap}.output-placeholder{color:#4b5563}.preview-frame{width:100%;height:100%;border:0}.preview-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#9ca3af}.error-box{margin:.75rem 1rem;padding:.75rem;background-color:rgba(127,29,29,.4);border:1px solid #991b1b;border-radius:.375rem;font-size:.875rem;color:#fca5a5}