:root{--bg: #0b1020;--panel: #121a2e;--panel-2: #0f1626;--border: #1f2a44;--text: #e6ebf5;--muted: #8b98b5;--accent: #4f8cff;--accent-2: #7aa5ff;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,sans-serif;font-size:14px}#app{display:flex;height:100vh;overflow:hidden}#sidebar{width:320px;min-width:320px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px;gap:14px;overflow-y:auto}.brand h1{margin:0;font-size:26px;letter-spacing:.5px;background:linear-gradient(90deg,#4f8cff,#9a6bff);-webkit-background-clip:text;background-clip:text;color:transparent}.brand p{margin:4px 0 0;color:var(--muted);font-size:12.5px}.panel{display:flex;flex-direction:column;gap:8px}.panel.grow{flex:1;min-height:120px}.panel-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}.search-row{display:flex;gap:8px}#search-input{flex:1;padding:9px 10px;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;color:var(--text);outline:none}#search-input:focus{border-color:var(--accent)}.btn{padding:9px 14px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#061027;font-weight:600}.btn.primary:hover{background:var(--accent-2)}.btn-group{display:flex;flex-wrap:wrap;gap:6px}.btn-group .btn{padding:6px 10px;font-size:12.5px}.btn-group .btn.active{background:var(--accent);border-color:var(--accent);color:#061027;font-weight:600}.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{padding:6px 10px;background:var(--panel-2);border:1px solid var(--border);border-radius:999px;font-size:12.5px;cursor:pointer;transition:background .15s,border-color .15s}.chip:hover{border-color:var(--accent)}.latest-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;overflow-y:auto}.latest-list li{padding:7px 8px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;gap:2px}.latest-list li:hover{background:var(--panel-2)}.latest-list .id{font-weight:600;font-size:13px}.latest-list .title{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hint{color:var(--muted);font-size:11px;line-height:1.4;border-top:1px solid var(--border);padding-top:10px}#viewer-wrap{position:relative;flex:1;background:var(--bg)}#viewer{position:absolute;inset:0}#menu-btn{position:absolute;top:14px;left:14px;z-index:10;width:42px;height:42px;border:1px solid var(--border);border-radius:10px;background:#0b1020d9;color:var(--text);font-size:20px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#menu-btn:hover{border-color:var(--accent)}#sidebar.collapsed{display:none}#legend{position:absolute;top:14px;right:14px;z-index:10;min-width:170px;max-width:230px;max-height:72vh;overflow-y:auto;background:#0b1020e6;border:1px solid var(--border);border-radius:10px;padding:10px 12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:12px}#legend-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:8px}.legend-item{display:flex;align-items:center;gap:8px;padding:2px 0}.legend-swatch{width:14px;height:14px;border-radius:4px;border:1px solid rgba(255,255,255,.25);flex-shrink:0}.legend-label{color:var(--text);white-space:nowrap}.legend-note{color:var(--muted);font-size:11px;line-height:1.4;margin:6px 0 2px}.gradient-bar{height:10px;border-radius:5px;margin:4px 0}.anim-row{display:flex;align-items:center;gap:8px}#frame-slider{flex:1;accent-color:var(--accent)}#status{position:absolute;left:14px;bottom:14px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:8px 12px;background:#0b1020d9;border:1px solid var(--border);border-radius:8px;font-size:12.5px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}#status-meta{color:var(--muted);font-size:11px;max-width:440px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#status-rust{color:#7ee787;font-size:11px;max-width:440px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#status-atoms{color:var(--accent-2);font-weight:600}@media(max-width:720px){#app{flex-direction:column}#sidebar{width:100%;min-width:0;max-height:45vh}}