:root {
  --brand: #134fff;
  --brand-hover: #0d43e6;
  --brand-soft: rgba(19, 79, 255, 0.12);
  --brand-medium: rgba(19, 79, 255, 0.24);
  --bg: #101114;
  --sidebar: #141519;
  --surface: #1a1b20;
  --surface-raised: #202126;
  --border: rgba(255, 255, 255, 0.08);
  --text: #f5f6f8;
  --text-secondary: rgba(245, 246, 248, 0.62);
  --text-muted: rgba(245, 246, 248, 0.38);
}

body.is-launching { overflow: hidden; }
.launch-loader {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fff;
  color: #111216;
  transform: translateY(0);
  will-change: transform;
}
.launch-loader-mark {
  display: flex;
  align-items: center;
  gap: 13px;
  perspective: 600px;
  transform: translateX(54px) translateY(8px);
  animation:
    launchMarkEnter .7s cubic-bezier(.22,1,.36,1) .08s both,
    launchMarkShift .27s cubic-bezier(.65,0,.35,1) 1.04s forwards;
}
.launch-loader-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  opacity: 0;
  transform: scale(4);
  animation: launchIconSequence 1.5s cubic-bezier(.65,0,.35,1) .08s forwards;
  transform-style: preserve-3d;
}
.launch-loader-icon > i {
  color: var(--brand);
  font-size: 27px;
  transform: none;
  filter: none;
}
.launch-loader-word {
  display: flex;
  padding: 3px 0;
  font-size: 24px;
  font-weight: 650;
  line-height: 30px;
  white-space: nowrap;
}
.launch-loader-word > span {
  display: block;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp .4s cubic-bezier(.25,.46,.45,.94) both;
}
.launch-loader-word > span:nth-child(1) { animation-delay: 1.04s; }
.launch-loader-word > span:nth-child(2) { animation-delay: 1.1s; }
.launch-loader-word > span:nth-child(3) { animation-delay: 1.16s; }
.launch-loader-word > span:nth-child(4) { animation-delay: 1.22s; }
.launch-loader-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  overflow: hidden;
  background: #e8e9ec;
}
.launch-loader-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  animation: launchProgress 2.65s cubic-bezier(.65,0,.35,1) .12s forwards;
}
.launch-loader.is-exiting {
  pointer-events: none;
  animation: launchLayerExit .82s cubic-bezier(.76,0,.24,1) forwards;
}
.launch-loader.is-exiting .launch-loader-mark {
  animation: launchMarkExit .62s cubic-bezier(.76,0,.24,1) forwards;
}
@keyframes launchMarkEnter {
  from { transform: translateX(54px) translateY(8px); }
  to { transform: translateX(54px) translateY(0); }
}
@keyframes launchMarkShift {
  from { transform: translateX(54px) translateY(0); }
  to { transform: translateX(0) translateY(0); }
}
@keyframes launchIconSequence {
  0% { opacity: 0; transform: scale(3.6); }
  12% { opacity: 1; transform: scale(4); }
  32% { opacity: 1; transform: scale(4); }
  64%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes launchProgress {
  0% { transform: scaleX(0); }
  72% { transform: scaleX(.76); }
  100% { transform: scaleX(1); }
}
@keyframes followMotionTrack {
  from { transform: translateX(48px); }
  to { transform: translateX(0); }
}
@keyframes followMotionLetter {
  from { opacity: 0; }
  to { opacity: 1; }
}
.follow-motion-track {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  will-change: transform;
}
.follow-motion-track > span {
  display: inline-block;
  will-change: transform, opacity;
}
@keyframes launchMarkExit {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-24px); }
}
@keyframes launchLayerExit {
  from { transform: translateY(0); }
  to { transform: translateY(-100%); }
}

*, *::before, *::after { letter-spacing: 0; }
body { background: var(--bg); color: var(--text); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; }
.sidebar { background: var(--sidebar); border-color: var(--border); }
.sidebar-brand { font-size: 18px; font-weight: 650; color: var(--text); border-color: var(--border); }
.sidebar-brand span { background: none; -webkit-text-fill-color: currentColor; color: var(--text); }
.sidebar-nav { padding: 14px 12px; }
.sidebar-nav li { height: 40px; margin: 2px 0; padding: 0 12px; color: var(--text-secondary); font-size: 14px; font-weight: 500; }
.sidebar-nav li:hover { background: rgba(255,255,255,.055); color: var(--text); }
.sidebar-nav li.active { background: var(--brand-soft); color: #8aa5ff; }
.sidebar-footer { color: var(--text-muted); border-color: var(--border); }
.theme-toggle { border-color: var(--border); background: rgba(255,255,255,.045); }
.theme-toggle:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.07); }
.theme-toggle .theme-thumb { background: var(--brand); }

.header { background: var(--bg); border-color: var(--border); padding-left: 28px; padding-right: 28px; }
.header h2 { font-size: 18px; font-weight: 650; }
.header #demoCounter { color: var(--text-muted); background: rgba(255,255,255,.055); font-variant-numeric: tabular-nums; }
.demo-grid { padding-top: 18px; }
.motion-group { border-color: rgba(255,255,255,.055); padding-bottom: 20px; margin-bottom: 12px; }
.group-header { height: 44px; color: var(--text); }
.group-title { font-size: 14px; font-weight: 600; }
.group-count { font-size: 12px; color: var(--text-muted); }
.group-drag, .group-toggle, .group-more { color: var(--text-muted); }
.motion-group.drag-over { border-top-color: var(--brand); }
.motion-group.card-drop-target { outline-color: rgba(19,79,255,.65); background: rgba(19,79,255,.04); }

.demo-card { background: var(--surface); border-color: var(--border); box-shadow: none; }
.demo-card:hover { border-color: rgba(255,255,255,.14); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.demo-preview { border-color: rgba(255,255,255,.055); }
.demo-badge { color: var(--text-muted); background: rgba(255,255,255,.05); }
.demo-name { font-size: 14px; font-weight: 600; }
.demo-info { padding: 15px 16px 18px; }
.demo-params { font-size: 12px; color: var(--text-secondary); background: rgba(255,255,255,.035); }

.tab-indicator { background: var(--brand-medium); }
.fade-pane, .scale-pane, .blur-pane { background: var(--brand-soft); }
.fade-dot.active, .uline-indicator, .effect-dot { background: var(--brand); }
.effect-dot { box-shadow: 0 0 0 3px var(--brand-soft); }
.liquid-shape, .card-visual, .grad-flow-btn { background: linear-gradient(135deg, var(--brand), #6f91ff); }
.ripple-btn { background: var(--brand-soft); border-color: var(--brand-medium); color: #8aa5ff; }
.ripple-effect { background: var(--brand-medium); }
.btn-copy.copy-success, .curve-help-list b, .curve-help-name, .share-motion-link i, .exit-option-label i { color: #8aa5ff; }
.btn-copy.copy-success { border-color: rgba(19,79,255,.4); }
.share-motion-copy, .exit-switch.active { background: var(--brand); }
@keyframes sharePopoverDirectionalIn {
  from { opacity: 0; transform: translate(var(--share-x), var(--share-y)) scale(.8); }
  to { opacity: 1; transform: translate(0, 0) scale(1); }
}
@keyframes sharePopoverDirectionalOut {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--share-x), var(--share-y)) scale(.8); }
}
.share-motion-demo {
  align-items: center;
  justify-content: center;
}
.share-motion-popover {
  cursor: pointer;
  box-shadow: none;
  transform-origin: var(--share-origin-x, 100%) var(--share-origin-y, 0%);
}

.editor-overlay { background: rgba(5,6,8,.68); }
.editor-panel, .help-panel { background: var(--surface); border-color: var(--border); box-shadow: 0 24px 64px rgba(0,0,0,.42); }
.editor-header { border-color: var(--border); }
.editor-header h3, .help-header h3 { color: var(--text); }
.editor-group label, .editor-section-label { color: var(--text-secondary); font-size: 12px; font-weight: 600; text-transform: none; }
.editor-input, .editor-dur-input-wrap input[type=number] { background: rgba(255,255,255,.045); border-color: var(--border); color: var(--text); }
.editor-input:focus, .editor-dur-input-wrap input[type=number]:focus { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 3px rgba(19,79,255,.1); }
.editor-slider-row input[type=range]::-webkit-slider-thumb { background: var(--brand); }
.editor-slider-row input[type=range]::-moz-range-thumb { background: var(--brand); }
.editor-presets button.active { background: var(--brand-soft); border-color: var(--brand); color: #8aa5ff; }
.btn-editor-close, .btn-editor-done, .btn-add-submit {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.btn-editor-close:hover, .btn-editor-done:hover, .btn-add-submit:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: #fff;
}
.editor-live-stage { background: rgba(255,255,255,.025); border-color: var(--border); }
.direction-needle { background: #6f91ff; }
.direction-presets button.active { background: var(--brand-soft); color: #8aa5ff; }
.motion-upload:hover, .motion-upload.drag-over { border-color: var(--brand); background: var(--brand-soft); }
.action-menu, .curve-help-popover, .share-motion-popover { background: var(--surface-raised); border-color: var(--border); box-shadow: 0 16px 36px rgba(0,0,0,.3); }
.action-menu i { color: #8aa5ff; }
.curve-help-popover::before { background: var(--surface-raised); }

/* Dynamic previews still contain legacy inline colors, so these selectors normalize them. */
.t-grad { background: linear-gradient(90deg,#134fff,#6f91ff,#134fff) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; }
.t-type { border-right-color: var(--brand) !important; }
.css-tag { color: #6f91ff !important; background: var(--brand-soft) !important; }
.glow-border-btn:hover { border-color: var(--brand) !important; }
.card-visual[style] { background: linear-gradient(135deg,#134fff,#6f91ff) !important; }

body.light-theme {
  --bg: #f3f3f5;
  --sidebar: #fff;
  --surface: #fff;
  --surface-raised: #fff;
  --border: rgba(15,16,20,.1);
  --text: #17181c;
  --text-secondary: rgba(23,24,28,.6);
  --text-muted: rgba(23,24,28,.4);
  background: var(--bg);
  color: var(--text);
}
body.light-theme .sidebar, body.light-theme .header { background: var(--sidebar); border-color: var(--border); }
body.light-theme .header { background: var(--bg); }
body.light-theme .sidebar-brand span { color: var(--text); }
body.light-theme .sidebar-nav li { color: var(--text-secondary); }
body.light-theme .sidebar-nav li:hover { background: rgba(15,16,20,.05); color: var(--text); }
body.light-theme .sidebar-nav li.active { background: var(--brand-soft); color: var(--brand); }
body.light-theme .theme-toggle { border-color: rgba(15,16,20,.12); background: rgba(15,16,20,.035); }
body.light-theme .theme-toggle:hover { border-color: rgba(15,16,20,.18); background: rgba(15,16,20,.06); }
body.light-theme .demo-card { background: var(--surface); border-color: var(--border); box-shadow: none; }
body.light-theme .demo-card:hover { border-color: rgba(15,16,20,.16); box-shadow: 0 10px 26px rgba(15,16,20,.07); }
body.light-theme .demo-preview { background: #fafafb; border-color: rgba(15,16,20,.07); }
body.light-theme .demo-name { color: var(--text); }
body.light-theme .demo-params { background: #f6f6f8; color: var(--text-secondary); }
body.light-theme .tab-indicator { background: var(--brand-soft); }
body.light-theme .tab-bar .tab-item.active { color: var(--brand); }
body.light-theme .fade-pane, body.light-theme .scale-pane, body.light-theme .blur-pane { background: #eef2ff; border-color: rgba(19,79,255,.14); color: #173aa8; }
body.light-theme .ripple-btn { background: #eef2ff; border-color: rgba(19,79,255,.22); color: #173aa8; }
body.light-theme .editor-panel, body.light-theme .help-panel { background: #fff; border-color: var(--border); box-shadow: 0 24px 64px rgba(15,16,20,.14); }
body.light-theme .editor-input:focus, body.light-theme .editor-dur-input-wrap input[type=number]:focus { border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(19,79,255,.1); }
body.light-theme .editor-slider-row input[type=range]::-webkit-slider-thumb,
body.light-theme .editor-slider-row input[type=range]::-moz-range-thumb { background: var(--brand); }
body.light-theme .editor-presets button.active { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
body.light-theme .btn-editor-default.saved { border-color: var(--brand); color: var(--brand); }
body.light-theme .exit-switch.active { background: var(--brand); }
body.light-theme .curve-help-popover::before { background: #fff; }

@media (max-width: 720px) {
  .launch-loader-word { font-size: 21px; line-height: 28px; }
  .launch-loader-icon { width: 30px; height: 30px; }
  .launch-loader-icon > i { font-size: 23px; }
  .header { padding-left: 16px; padding-right: 16px; }
  .sidebar-nav { padding-left: 8px; padding-right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .launch-loader-icon,
  .launch-loader-word > span,
  .launch-loader-mark,
  .launch-loader-progress span { animation-duration: .01ms; animation-delay: 0ms; }
  .launch-loader.is-exiting { animation-duration: .2s; }
}

/* 2026 refined visual language */
:root {
  --bg: #090d0c;
  --sidebar: rgba(16, 22, 20, .82);
  --surface: rgba(28, 36, 33, .72);
  --surface-raised: rgba(38, 47, 44, .92);
  --surface-subtle: rgba(255, 255, 255, .035);
  --border: rgba(226, 237, 233, .1);
  --border-strong: rgba(226, 237, 233, .16);
  --text: #f3f6f4;
  --text-secondary: rgba(243, 246, 244, .64);
  --text-muted: rgba(243, 246, 244, .4);
  --glass-blur: blur(20px) saturate(118%);
  --shadow-float: 0 20px 48px rgba(0, 0, 0, .3);
}

html, body { color-scheme: dark; }
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.app { background: var(--bg); }
.sidebar,
.header {
  background: var(--sidebar);
  border-color: var(--border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .025);
}
.sidebar { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .025); }
.sidebar-brand { height: 61px; padding: 0 20px; gap: 10px; }
.sidebar-nav { padding: 16px 12px; }
.sidebar-nav li {
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  transition: background-color .2s ease, color .2s ease;
}
.sidebar-nav li:hover { background: rgba(255, 255, 255, .055); }
.sidebar-nav li.active { background: rgba(19, 79, 255, .16); color: #a9bbff; }
.theme-control { padding-top: 15px; border-color: var(--border); }
.theme-toggle { box-shadow: none !important; }
.sidebar-footer { font-size: 12px; }

.header { padding: 0 28px; }
.header h2 { line-height: 1.3; }
.header-actions { gap: 10px; }
.header #demoCounter {
  min-height: 28px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  display: inline-flex;
  align-items: center;
  font-size: 12px;
}
.main { background: var(--bg); }
.demo-grid { padding: 18px 28px 40px; }
.motion-group { margin-bottom: 14px; padding-bottom: 22px; border-color: var(--border); }
.group-header { height: 46px; gap: 8px; }
.group-title { line-height: 20px; }
.group-count { line-height: 20px; }
.group-drag, .group-toggle, .group-more {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  transition: color .2s ease, background-color .2s ease;
}
.group-drag:hover, .group-toggle:hover, .group-more:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .055);
}

.demo-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  backdrop-filter: blur(16px) saturate(112%);
  -webkit-backdrop-filter: blur(16px) saturate(112%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
  transition: border-color .22s ease, background-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.demo-card:hover {
  border-color: var(--border-strong);
  background: rgba(33, 42, 39, .82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 14px 32px rgba(0,0,0,.18);
  transform: translateY(-2px);
}
.demo-preview {
  margin: 8px 8px 0;
  overflow: hidden;
  border: 1px solid rgba(226, 237, 233, .075);
  border-radius: 11px;
  background: rgba(5, 9, 8, .24);
}
.demo-badge { border: 1px solid var(--border); border-radius: 999px; font-size: 11px; }
.demo-info { padding: 13px 16px 16px; }
.demo-name { line-height: 20px; }
.demo-params { border: 1px solid rgba(226,237,233,.06); border-radius: 10px; }

button,
.btn-copy,
.editor-presets button,
.direction-presets button,
.editor-unit-btn,
.btn-editor-export,
.btn-editor-default,
.btn-editor-reset,
.btn-editor-done,
.btn-add-cancel,
.btn-add-submit,
.delete-confirm-cancel,
.delete-confirm-submit { border-radius: 999px; font-family: inherit; }
.action-menu {
  padding: 6px;
  border-radius: 14px;
}
.action-menu button { min-height: 34px; border-radius: 9px; }

.editor-overlay, .help-overlay { background: rgba(2, 5, 4, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.editor-panel, .help-panel {
  overflow: visible;
  border-radius: 24px;
  background: rgba(25, 33, 30, .9);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-float);
}
.editor-header, .help-header { min-height: 60px; padding-left: 22px; padding-right: 18px; }
.editor-header h3, .help-header h3 { font-size: 16px; font-weight: 650; }
.editor-body { padding: 20px 22px; }
.editor-footer { padding: 16px 22px 20px; border-color: var(--border); }
.editor-layout-panel .editor-footer {
  margin-right: 22px;
  margin-left: 22px;
  padding-right: 0;
  padding-left: 0;
}
.editor-input, .editor-dur-input-wrap input[type=number] {
  border-radius: 11px;
  background: rgba(255,255,255,.045);
}
.editor-live-stage, .direction-control {
  border-radius: 14px;
  background: rgba(5, 9, 8, .3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.editor-css-box, .motion-upload { border-radius: 14px; }
.curve-help-popover, .share-motion-popover {
  border-radius: 14px;
  background: var(--surface-raised);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

body.light-theme {
  color-scheme: light;
  --bg: #f1f1f3;
  --sidebar: rgba(255, 255, 255, .88);
  --surface: #ffffff;
  --surface-raised: rgba(255, 255, 255, .96);
  --surface-subtle: #f7f7f8;
  --border: rgba(18, 20, 24, .085);
  --border-strong: rgba(18, 20, 24, .15);
  --text: #161719;
  --text-secondary: rgba(22, 23, 25, .58);
  --text-muted: rgba(22, 23, 25, .4);
  --shadow-float: 0 22px 54px rgba(18, 20, 24, .13);
}
body.light-theme .sidebar,
body.light-theme .header { background: rgba(255,255,255,.86); box-shadow: none; }
body.light-theme .header { background: rgba(241,241,243,.88); }
body.light-theme .sidebar-nav li:hover { background: rgba(18,20,24,.045); }
body.light-theme .sidebar-nav li.active { background: rgba(19,79,255,.1); color: var(--brand); }
body.light-theme .header #demoCounter { background: rgba(255,255,255,.72); }
body.light-theme .group-drag:hover,
body.light-theme .group-toggle:hover,
body.light-theme .group-more:hover { background: rgba(18,20,24,.05); }
body.light-theme .demo-card {
  background: #fff;
  box-shadow: 0 1px 2px rgba(18,20,24,.025);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.light-theme .demo-card:hover {
  background: #fff;
  border-color: var(--border-strong);
  box-shadow: 0 12px 28px rgba(18,20,24,.075);
}
body.light-theme .demo-preview { background: #f5f5f7; border-color: rgba(18,20,24,.065); }
body.light-theme .demo-params { background: #f7f7f8; border-color: rgba(18,20,24,.055); }
body.light-theme .editor-overlay,
body.light-theme .help-overlay { background: rgba(22,23,25,.32); }
body.light-theme .editor-panel,
body.light-theme .help-panel {
  background: rgba(255,255,255,.96);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--shadow-float);
}
body.light-theme .editor-live-stage,
body.light-theme .direction-control { background: #f4f4f6; }
body.light-theme .editor-input,
body.light-theme .editor-dur-input-wrap input[type=number] { background: #f7f7f8; }

@media (max-width: 720px) {
  .demo-grid { padding: 14px 16px 32px; }
  .demo-card { border-radius: 14px; }
  .demo-preview { margin: 7px 7px 0; }
}

/* Larger geometry and shared alignment baselines */
.sidebar-nav li { border-radius: 14px; }
.demo-card { border-radius: 24px; }
.demo-preview {
  margin: 8px 8px 0;
  border-radius: 16px;
}
.demo-badge { left: 12px; }
.demo-preview-tab {
  min-height: 128px;
  padding-top: 38px;
  padding-bottom: 18px;
}
.demo-preview-card {
  min-height: 150px;
  padding-top: 40px;
  padding-bottom: 18px;
}
.demo-info {
  padding: 13px 8px 8px;
}
.demo-name {
  padding: 0 12px;
}
.demo-params {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 16px;
}
.action-menu,
.curve-help-popover,
.share-motion-popover { border-radius: 18px; box-shadow: none; }
body.light-theme .share-motion-popover { box-shadow: none; }
.editor-live-stage,
.direction-control,
.editor-css-box,
.motion-upload { border-radius: 18px; }
.editor-input,
.editor-dur-input-wrap input[type=number] { border-radius: 14px; }
.exit-option-row,
.editor-css-box { border-radius: 14px; }
.editor-header,
.help-header {
  min-height: 60px;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 0 0 14px;
}

@media (max-width: 720px) {
  .demo-card { border-radius: 20px; }
  .demo-preview { border-radius: 13px; }
  .demo-preview-tab { min-height: 122px; }
  .demo-preview-card { min-height: 142px; }
}