*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a0f;--bg-panel: #14141e;--bg-card: #1c1c2a;--border: #2a2a3e;--text: #e0e0e8;--text-dim: #888899;--accent: #f97316;--accent-hover: #fb923c;--blue: #3b82f6;--red: #ef4444;--green: #22c55e;--radius: 8px;--font: system-ui, -apple-system, "Segoe UI", sans-serif;--mono: "JetBrains Mono", "Fira Code", monospace}html,body,#root{width:100%;height:100%;font-family:var(--font);background:var(--bg);color:var(--text)}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-header{padding:12px 20px;border-bottom:1px solid var(--border);background:var(--bg-panel)}.app-header h1{font-size:1.25rem;font-weight:600;color:var(--accent)}.subtitle{font-size:.8rem;color:var(--text-dim);margin-top:2px}.viewer-container{flex:1;position:relative;min-height:0}.viewer-canvas{width:100%;height:100%}.viewer-canvas canvas{display:block}.energy-profile{position:absolute;top:12px;right:12px;background:#14141ed9;border:1px solid var(--border);border-radius:var(--radius);padding:8px;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.reaction-info{position:absolute;bottom:12px;left:12px;max-width:340px;background:#14141ed9;border:1px solid var(--border);border-radius:var(--radius);padding:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.reaction-info h3{font-size:.95rem;color:var(--accent);margin-bottom:4px}.reaction-info p{font-size:.78rem;color:var(--text-dim);line-height:1.4;margin-bottom:6px}.smirks{display:block;font-family:var(--mono);font-size:.72rem;color:var(--green);background:#0000004d;padding:4px 8px;border-radius:4px;word-break:break-all}.control-panel{background:var(--bg-panel);border-top:1px solid var(--border);padding:12px 20px;display:flex;flex-direction:column;gap:10px}.control-group{display:flex;flex-direction:column;gap:4px}.control-group label{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);font-weight:600}.control-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}.reaction-tabs{display:flex;gap:4px;flex-wrap:wrap}.tab{padding:6px 14px;font-size:.78rem;font-weight:500;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);color:var(--text-dim);cursor:pointer;transition:all .15s}.tab:hover{border-color:var(--accent);color:var(--text)}.tab.active{background:var(--accent);color:#000;border-color:var(--accent);font-weight:600}select{background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:6px 10px;font-size:.82rem;cursor:pointer;outline:none}select:focus{border-color:var(--accent)}.btn{padding:6px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-card);color:var(--text);font-size:.82rem;cursor:pointer;transition:all .15s;white-space:nowrap}.btn:hover{border-color:var(--accent);color:var(--accent)}.btn-accent{background:var(--accent);color:#000;border-color:var(--accent);font-weight:600}.btn-accent:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#000}.btn-play{width:40px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--accent);color:#000;border-color:var(--accent)}.btn-play:hover{background:var(--accent-hover)}.playback{align-items:center}.frame-slider{flex:1;min-width:120px;accent-color:var(--accent);cursor:pointer}.frame-label{font-family:var(--mono);font-size:.78rem;color:var(--text-dim);min-width:60px;text-align:right}@media(max-width:640px){.control-panel{padding:10px 12px}.reaction-info{max-width:220px;font-size:.7rem}.tab{padding:5px 10px;font-size:.72rem}}