#panel-animation.active { display:flex;flex-direction:column;background:#080d16; }
.animation-toolbar { display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;flex:none;padding:8px 14px;background:var(--bg-raised);border-bottom:1px solid var(--line);font-size:12px;color:var(--ink); }
.animation-help { color:var(--ink-faint);font-size:10px; }
.animation-toolbar button,.animation-toolbar a { padding:6px 9px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--magma);font:11px var(--font-ui);text-decoration:none;cursor:pointer; }
.animation-toolbar button { margin-left:auto; }
#animationFrameHost { flex:1;min-height:0;min-width:0; }
#animationFrameHost iframe { display:block;width:100%;height:100%;border:0;background:#080d16; }
.animation-note { flex:none;margin:0;padding:5px 14px;background:var(--bg);color:var(--ink-faint);font-size:10px; }
/* Eight destinations: keep desktop navigation reachable and phone labels legible. */
@media(min-width:761px) {
 .shell { grid-template-columns:minmax(0,1fr); }
 .masthead { min-width:0; }
 .view-nav { min-width:0;overflow-x:auto;flex-shrink:1; }
 .view-tab { white-space:nowrap;flex-shrink:0; }
 .masthead-right { flex-shrink:0; }
}
@media(min-width:761px) and (max-width:1400px) { .brand-caption { display:none; }.view-tab { padding:0 8px;font-size:11px; }.masthead { gap:10px;padding:0 16px; } }
@media(max-width:760px) {
 .shell { padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
 .view-nav { grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,44px);height:calc(88px + env(safe-area-inset-bottom)); }
 .view-tab { font-size:10px; }
 .animation-toolbar { padding:7px 10px;gap:6px;font-size:11px; }
 .animation-help { display:none; }.animation-toolbar>span:first-child { width:100%; }
 .animation-toolbar button { margin-left:0; }
 .animation-note { font-size:9px;padding:5px 10px; }
}