*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--navy: #1f243a;--card-bg: #2a3052;--divider: #3a4070;--cyan: #00b4e6;--muted: #9aa3c2;--soft-white: #e7eaf3;--white: #ffffff;--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}html,body{height:100%}body{background:var(--navy);color:var(--soft-white);font-family:var(--font);font-size:14px;line-height:1.5}.app{display:grid;grid-template-rows:auto 1fr auto;min-height:100vh;max-width:1200px;margin:0 auto;padding:24px;gap:20px}.controls-panel{background:var(--card-bg);border:1px solid var(--divider);border-radius:12px;padding:20px}.controls-title{font-size:18px;font-weight:700;color:var(--white);margin-bottom:16px}.controls-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px}.control-group label{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}.control-group input,.control-group select{width:100%;padding:8px 12px;background:var(--navy);border:1px solid var(--divider);border-radius:6px;color:var(--soft-white);font-size:14px;font-family:var(--font);outline:none;transition:border-color .15s}.control-group input:focus,.control-group select:focus{border-color:var(--cyan)}.controls-actions{display:flex;gap:8px}.btn{padding:8px 16px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--font);transition:opacity .15s}.btn:hover{opacity:.9}.btn-primary{background:var(--cyan);color:var(--navy)}.btn-secondary{background:var(--divider);color:var(--soft-white)}.btn-sm{padding:4px 10px;font-size:12px;background:var(--divider);color:var(--muted)}.btn-trigger{background:var(--cyan);color:var(--navy);padding:12px 24px;font-size:16px;margin-top:16px}.preview-area{background:var(--card-bg);border:1px solid var(--divider);border-radius:12px;padding:20px;overflow:hidden}.preview-title{font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.preview-content{background:var(--white);color:#333;border-radius:8px;padding:40px;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.preview-placeholder{color:#999;font-size:14px}.event-log{background:var(--card-bg);border:1px solid var(--divider);border-radius:12px;padding:16px;max-height:280px;display:flex;flex-direction:column}.log-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.log-title{font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}.log-entries{flex:1;overflow-y:auto;font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:12px;line-height:1.6}.log-entry{padding:2px 0;border-bottom:1px solid rgba(58,64,112,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.log-info{color:var(--muted)}.log-success{color:#4ade80}.log-warn{color:#f5b301}.log-error{color:#f87171}.log-track{color:var(--cyan)}@media(max-width:768px){.controls-grid{grid-template-columns:1fr}.app{padding:12px}}