.animation-mode-switch { --tab-r:12px; --tab-glass:#2a2a2a; position:relative; display:flex; align-items:flex-end; gap:var(--tab-r); width:calc(100% + 28px); height:auto; margin:-8px -14px -8px; padding:0 14px 0; box-sizing:border-box; border:0; background:var(--chrome-well, #000); box-shadow:none; overflow:visible; }
.animation-mode-stroke { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:4; overflow:visible; }
.animation-mode-stroke path { fill:none; stroke:var(--tab-glass); stroke-width:1; stroke-linejoin:round; stroke-linecap:butt; }
.animation-mode-switch [role="tab"] { position:relative; flex:1; display:flex; gap:6px; align-items:center; justify-content:center; height:36px; min-width:0; padding:0 10px; border:0; border-radius:var(--tab-r) var(--tab-r) 0 0; background:rgba(255,255,255,.01); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 1px 0 0 rgba(255,255,255,.03), inset -1px 0 0 rgba(255,255,255,.03); color:var(--text-secondary); font:inherit; font-size:13px; font-weight:500; cursor:pointer; z-index:0; }
.animation-mode-switch [role="tab"]:hover { color:#f2f2f0; background:rgba(255,255,255,.03); }
.animation-mode-switch [role="tab"].active,
.animation-mode-switch [role="tab"][aria-selected="true"] { color:var(--text); background:var(--bg); box-shadow:none; z-index:3; }
.animation-mode-switch [role="tab"].active:hover,
.animation-mode-switch [role="tab"][aria-selected="true"]:hover { color:var(--text); background:var(--bg); }
.animation-mode-switch [role="tab"].active::before,
.animation-mode-switch [role="tab"].active::after,
.animation-mode-switch [role="tab"][aria-selected="true"]::before,
.animation-mode-switch [role="tab"][aria-selected="true"]::after { content:""; position:absolute; bottom:0; width:var(--tab-r); height:var(--tab-r); pointer-events:none; background:transparent; }
.animation-mode-switch [role="tab"].active::before,
.animation-mode-switch [role="tab"][aria-selected="true"]::before { left:calc(var(--tab-r) * -1); border-bottom-right-radius:var(--tab-r); box-shadow:6px 6px 0 6px var(--bg); }
.animation-mode-switch [role="tab"].active::after,
.animation-mode-switch [role="tab"][aria-selected="true"]::after { right:calc(var(--tab-r) * -1); border-bottom-left-radius:var(--tab-r); box-shadow:-6px 6px 0 6px var(--bg); }
.animation-mode-switch + .panel,
.animation-mode-switch ~ .panel { border-top:0; }
.animation-mode-switch .material-icons { font-size:16px; }
#animationPanel { display:flex; flex-direction:column; gap:8px; padding:0 14px; border:0; }
#colorFlowSection { padding-top:14px; }
.sidebar #animationPanel.panel:first-of-type { border-top:0; }
#animationPanel > .panel { border-top:0; background:transparent; }
#animationPanel[hidden], .animation-toolbar[hidden] { display:none !important; }
body.animation-active .sidebar .shell > .panel:not(#animationPanel),
body.animation-active #xCurveCanvas, body.animation-active #yCurveCanvas,
body.animation-active .floating-curves:not(.animation-toolbar), body.animation-active .floating-randomize,
body.animation-active #undoBtn, body.animation-active #redoBtn,
body.animation-active #exportCountDisplay { display:none !important; }

#animationPanel .animation-color-flow h3,
#animationPanel .animation-curves h3,
#animationPanel .animation-distortion h3,
#animationPanel .animation-glitter h3 { margin-bottom:0; }
#animationPanel > .panel.collapsible > .controls { margin-top:14px; }
body.animation-active.animation-curves-ghost-x #xCurveCanvas,
body.animation-active.animation-curves-ghost-y #yCurveCanvas {
  display:block !important;
  pointer-events:none !important;
}
#animationPanel .animation-preset-field { margin:0 -14px; padding:14px; gap:8px; border-bottom:1px solid var(--separator); }
.animation-preset-picker { display:flex; align-items:center; gap:8px; width:100%; }
.animation-preset-picker .blend-btn { flex-shrink:0; width:32px; height:32px; padding:0; }
.animation-preset-picker .blend-btn .material-icons { font-size:18px; }
.animation-preset-select-wrap { flex:1; position:relative; min-width:0; }
#curvesNoise { width:100%; padding:8px 32px; border-radius:6px; border:1px solid var(--input-border); background:var(--input-bg); color:var(--text); font-size:12px; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Cpath fill=%22%23ffffff%22 d=%22M6 9L1 4h10z%22/%3E%3C/svg%3E'); background-repeat:no-repeat; background-position:right 12px center; }
#curvesNoiseIcon { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:18px; pointer-events:none; color:var(--text); }
.animation-field { display:flex; flex-direction:column; gap:10px; margin:18px 0; font-size:12px; color:var(--text-secondary); }
.animation-field .slider-with-input { display:flex; align-items:center; gap:8px; width:100%; }
.animation-field input[type="number"] { width:60px; flex-shrink:0; padding:4px 6px; font-size:12px; }
.animation-loop { display:flex; justify-content:space-between; align-items:center; margin:18px 0; font-size:12px; color:var(--text-secondary); }
.animation-loop .ios-switch { margin:0; }
#colorFlowSection .controls > label:has(#colorFlowDirection) { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:8px; width:100%; }
#colorFlowDirection { display:flex; width:100%; min-width:0; }
#colorFlowDirection .curve-toggle { flex:1; display:flex; align-items:center; justify-content:center; padding:6px 12px; }
#colorFlowDirection .curve-toggle .material-icons { font-size:18px; }
#curvesMotionSection .controls > label:has(.curves-axis-row),
#curvesMotionSection .controls > label:has(.animation-preset-picker) { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:8px; width:100%; }
#curvesAxes { display:flex; gap:8px; width:100%; min-width:0; }
#curvesAxes .curve-toggle { flex:1; display:flex; align-items:center; justify-content:center; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.16); }
#curvesAxes .curve-toggle:hover { background:rgba(255,255,255,.06); }
#curvesAxes .curve-toggle.active { background:#f5f5f5; color:#1a1a1a; }
#curvesAxes .curve-toggle.active:hover { background:#e8e8e8; color:#1a1a1a; }
#distortionMotionSection .controls > label:has(.slider-with-input),
#distortionMotionSection .controls > label:has(.curve-toggle-group),
#distortionMotionSection .controls > label:has(.distortion-travel-pad) { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:8px; width:100%; }
#distortionMotionSection .controls > label:has(.distortion-travel-pad) { align-items:center; }
#distortionMotionSection .curve-toggle-group { display:flex; width:100%; min-width:0; }
.distortion-travel-pad { display:flex; flex-direction:column; gap:4px; width:100%; min-width:0; padding:0; background:transparent; box-shadow:none; overflow:visible; border:0; }
.distortion-travel-row { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:4px; width:100%; }
.distortion-travel-mid { grid-template-columns:28px minmax(0,1fr) 28px; }
.distortion-travel-pad button { width:100%; height:28px; padding:0; border:0; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.16); color:#f2f2f0; cursor:pointer; }
.distortion-travel-pad [data-evolution] { padding:0 8px; font-size:12px; font-weight:500; }
.distortion-travel-pad button:hover { background:rgba(255,255,255,.06); }
.distortion-travel-pad button.active { background:#f5f5f5; color:#1a1a1a; }
.distortion-travel-pad button.active:hover { background:#e8e8e8; }
.distortion-travel-pad .material-icons { font-size:16px; }
#glitterMotionSection .controls > label:has(.slider-with-input) { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:8px; width:100%; }
body.animation-active .ui-islands-container { flex-wrap:nowrap; }
body.animation-active .floating-export { margin-left:auto; flex:0 0 auto; }
body.animation-active .animation-toolbar { flex:0 0 auto; min-width:0; justify-content:flex-start; }
.animation-toolbar #motionPlay { min-width:88px; }
.animation-timeline-track { flex:1; min-width:20px; height:24px; display:flex; align-items:center; border-radius:4px; background:linear-gradient(to right, transparent 0%, transparent max(0%, calc(var(--timeline-progress, 0%) - 10%)), #6b1010 var(--timeline-progress, 0%), transparent var(--timeline-progress, 0%)), repeating-linear-gradient(to right, transparent 0 9px, rgba(255,255,255,.13) 9px 10px); background-size:100% 100%, 10px 12px; background-repeat:no-repeat,repeat-x; background-position:center; }
.animation-dialog { width:min(420px, calc(100vw - 40px)); box-sizing:border-box; border:1px solid var(--stroke); border-radius:18px; background:var(--panel); color:var(--text); padding:26px; box-shadow:0 20px 100px #0008; }
.animation-dialog::backdrop { background:#0008; backdrop-filter:blur(6px); }
.animation-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 8px; }
.animation-dialog h2 { font-size:18px; margin:0; }
.animation-dialog-close { display:flex; align-items:center; justify-content:center; width:32px; height:32px; margin:-6px -6px -6px 0; padding:0; border:0; border-radius:999px; background:transparent; color:var(--text-secondary); cursor:pointer; }
.animation-dialog-close:hover { background:rgba(255,255,255,.06); color:var(--text); }
.animation-dialog-close .material-icons { font-size:20px; }
.animation-dialog fieldset { border:0; padding:0; margin:0; }
.animation-dialog label { display:flex; flex-direction:column; gap:8px; margin:16px 0; font-size:12px; }
.animation-dialog select { width:100%; padding:10px 32px 10px 14px; border-radius:6px; border:none; color:#f2f2f0; background-color:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 1px 0 rgba(255,255,255,.16); appearance:none; -webkit-appearance:none; background-repeat:no-repeat; background-position:right 12px center; }
.animation-dialog select:hover { background-color:rgba(255,255,255,.06); }
.animation-dialog-actions { display:flex; margin-top:20px; }
.animation-dialog #videoStart {
  position: relative;
  width: 100%;
  height: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: #A2D729;
  color: #1a1a1a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), inset 0 1px 0 rgba(255,255,255,.4), 0 4px 12px rgba(162, 215, 41, 0.25);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.animation-dialog #videoStartLabel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.animation-dialog #videoStart .export-icon {
  font-size: 16px;
  width: 16px;
  flex-shrink: 0;
  color: #1a1a1a;
}
.animation-dialog label:has(> .slider-with-input) { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:8px; margin:16px 0; font-size:12px; }
.animation-dialog label:has(> .slider-with-input) > .slider-with-input { display:grid !important; grid-template-columns:minmax(0,1fr) max-content; gap:8px; min-width:0; width:100%; align-items:center; container-type:normal; }
.animation-export-seconds { display:flex; align-items:center; gap:4px; height:36px; padding:0 8px; box-sizing:border-box; border:1px solid #252525; border-radius:6px; background:#0d0d0d; color:var(--text-secondary); font-size:12px; font-weight:500; }
.animation-dialog label:has(> .slider-with-input) .slider-with-input input[type="number"] { width:2ch !important; min-width:2ch; height:auto !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none; font-size:14px !important; text-align:right; color:var(--text); }
.animation-dialog label:has(> .slider-with-input) .slider-with-input .range-slider-wrap { width:100%; min-width:0; overflow:visible; min-height:22px; }
.animation-dialog label:has(> .slider-with-input) .slider-with-input input[type="range"] { width:calc(100% - 18px) !important; max-width:none !important; margin:0 9px; }
.animation-dialog input[type="range"]::-webkit-slider-thumb {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(26, 26, 26, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.45);
}
.animation-dialog input[type="range"]::-moz-range-thumb {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(26, 26, 26, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.45);
}
#videoProgress { display:none; position:absolute; inset:8px 12px; pointer-events:none; }
.animation-export-progress-track { background:linear-gradient(to right, transparent 0%, transparent max(0%, calc(var(--timeline-progress, 0%) - 10%)), rgba(255,255,255,.45) var(--timeline-progress, 0%), transparent var(--timeline-progress, 0%)), repeating-linear-gradient(to right, transparent 0 9px, rgba(255,255,255,.13) 9px 10px); background-size:100% 100%, 10px 12px; background-repeat:no-repeat,repeat-x; background-position:center; }
.animation-export-progress-track::after { content:""; position:absolute; top:50%; left:var(--timeline-progress, 0%); width:4px; height:24px; margin-top:-12px; margin-left:-2px; border-radius:2px; background:#fff; box-shadow:0 0 8px rgba(255,255,255,.55); }
#videoProgressPercent { display:none; position:absolute; inset:0; align-items:center; justify-content:center; z-index:1; font-size:12px; font-variant-numeric:tabular-nums; color:#fff; pointer-events:none; }
.animation-dialog-actions.exporting #videoStart { background:rgba(255,255,255,.035); color:transparent; box-shadow:inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.16); }
.animation-dialog-actions.exporting #videoStart:hover { background:rgba(255,255,255,.035); color:transparent; }
.animation-dialog-actions.exporting #videoStartLabel { visibility:hidden; }
.animation-dialog-actions.exporting #videoProgress { display:flex; }
.animation-dialog-actions.exporting #videoProgressPercent { display:flex; }
#videoSizeEstimate { margin:4px 0 0; }
.animation-dialog .animation-status { margin:12px 0 0; }
.animation-dialog .animation-status:empty { display:none; }
.animation-note, .animation-status { font-size:12px; line-height:1.5; color:var(--text-secondary); white-space:pre-line; }
.animation-dialog button:disabled { opacity:.5; cursor:default; }
.animation-dialog-actions.exporting #videoStart:disabled { opacity:1; }
.animation-mode-switch button:focus-visible, .animation-preset-picker .blend-btn:focus-visible, #curvesNoise:focus-visible { outline:2px solid #f5f5f5; outline-offset:-2px; }
/* Design's narrow-screen export island floats over the canvas; animation has room in the toolbar. */
body.animation-active .floating-export { position:relative; top:auto; right:auto; padding:0; border:0; border-radius:0; background:transparent; }
.sidebar .shell > header { margin:-12px -14px 0; padding:12px 14px 10px; border:0; background:var(--chrome-well, #000); }

.animation-export-field { display:flex; flex-direction:column; gap:8px; margin:16px 0; color:var(--text-secondary); font-size:12px; }
.animation-dialog .slider-with-input { display:flex; align-items:center; gap:8px; width:100%; }
.animation-dialog .slider-with-input input[type="number"] { width:60px; flex-shrink:0; padding:4px 6px; font-size:12px; }
.animation-export-options { display:flex; height:40px; padding:0; overflow:hidden; border:0; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 1px 0 rgba(255,255,255,.16); }
.animation-export-options .curve-toggle { flex:1; border:0; border-radius:0; background:transparent; color:#f2f2f0; }
.animation-export-options .curve-toggle:hover { background:rgba(255,255,255,.06); }
.animation-export-options .curve-toggle.active { background:#f5f5f5; color:#1a1a1a; }
.animation-export-options .curve-toggle.active:hover { background:#e8e8e8; }
.animation-dialog .btn { height:40px; padding:0 16px; border:0; border-radius:999px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.11),inset 0 1px 0 rgba(255,255,255,.16); color:#f2f2f0; }
.animation-dialog .btn:hover { background:rgba(255,255,255,.06); color:#f2f2f0; }
.animation-dialog #videoStart { width:100%; }
.animation-dialog #videoStart:hover { background:#F5F5F0; color:#1a1a1a; box-shadow:inset 0 0 0 1px rgba(26,26,26,.12), inset 0 1px 0 rgba(255,255,255,.55), 0 4px 12px rgba(162, 215, 41, 0.2); }
.animation-dialog #videoStart.exporting,
.animation-dialog #videoStart.exporting:hover,
.animation-dialog #videoStart.exporting:disabled {
  background:rgba(255,255,255,.035);
  color:transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.16);
  opacity:1;
}
#animationPanel .animation-status { margin:0; }
#animationPanel .animation-status:empty { display:none; }
#patternsMotionSection .controls > label { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:center; gap:8px; width:100%; }
#patternsMotionSection .curve-toggle-group { display:flex; width:100%; min-width:0; }
#patternsMotionSection .curve-toggle { flex:1; display:flex; align-items:center; justify-content:center; padding:6px 8px; }
#patternsMotionSection .curve-toggle .material-icons { font-size:18px; }
#patternsMotionSection h3 { cursor:pointer; }
#patternsNoise { width:100%; padding:8px 32px; border-radius:6px; border:1px solid var(--input-border); background-color:var(--input-bg); color:var(--text); font-size:12px; cursor:pointer; appearance:none; background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22%3E%3Cpath fill=%22%23ffffff%22 d=%22M6 9L1 4h10z%22/%3E%3C/svg%3E'); background-repeat:no-repeat; background-position:right 12px center; }
#patternsNoiseIcon { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:18px; pointer-events:none; color:var(--text); }