.feature-group.glass-surface > summary {
  margin: -15px;
  padding: 15px;
  min-height: 18px;
}
.feature-group.glass-surface[open] > summary {
  margin-bottom: 0;
}
.app {
  background:
    radial-gradient(
      ellipse at 96% 3%,
      rgba(var(--user-rgb), .105),
      transparent 38%),
    radial-gradient(
      ellipse at 4% 75%,
      rgba(var(--user-rgb), .035),
      transparent 50%),
    var(--user-bg);
}
main {
  padding: 4px 8px 20px 5px;
  margin: 0 -5px;
}
.layer-actions {
  grid-gap: 12px;
  gap: 12px;
}
.compose-group {
  grid-gap: 12px;
  gap: 12px;
}
.create-group {
  grid-gap: 12px;
  gap: 12px;
}
.tool.glass-surface,
.compose-group > .tool.glass-surface,
.feature-group.glass-surface {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(218, 234, 255, .12);
  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, .055),
      rgba(255, 255, 255, .012) 50%,
      rgba(var(--user-rgb), .035)),
    linear-gradient(
      110deg,
      rgba(var(--user-rgb), .018),
      rgba(0, 0, 0, .16));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(255, 255, 255, .025),
    0 5px 10px rgba(0, 0, 0, .18),
    0 1px 2px rgba(0, 0, 0, .22);
  transform: perspective(650px) translateY(0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-origin: center;
  transition:
    transform .24s cubic-bezier(.2, .75, .25, 1),
    box-shadow .28s,
    border-color .28s;
}
.tool.glass-surface.spotlit,
.compose-group > .tool.glass-surface.spotlit,
.feature-group.glass-surface.spotlit {
  transform: perspective(650px) translateY(-2px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  border-color: rgba(216, 236, 255, .26);
  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, .07),
      rgba(255, 255, 255, .015) 50%,
      rgba(var(--user-rgb), .05)),
    linear-gradient(
      110deg,
      rgba(var(--user-rgb), .025),
      rgba(0, 0, 0, .15));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .21),
    inset 0 -1px 0 rgba(var(--user-rgb), .07),
    var(--sx,0px) var(--sy,12px) 22px rgba(0, 0, 0, .30),
    0 2px 4px rgba(0, 0, 0, .2);
}
.tool.glass-surface:before,
.tool.glass-surface:after {
  background: none;
}
.tool.glass-surface:before {
  display: none;
}
.glass-surface > span.glass-shine,
.glass-surface > span.glass-edge {
  display: block !important;
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0 !important;
  pointer-events: none;
  border-radius: inherit;
  margin: 0;
  padding: 0;
  transform: none;
}
.glass-surface > span.glass-shine {
  background:
    radial-gradient(
      ellipse 135px 100px at var(--mx,50%) var(--my,0%),
      rgba(255, 255, 255, .16),
      rgba(var(--user-rgb), .065) 38%,
      transparent 78%),
    linear-gradient(
      var(--sheen-angle,120deg),
      transparent 18%,
      rgba(255, 255, 255, .028) 44%,
      rgba(255, 255, 255, .075) 47%,
      transparent 65%);
  opacity: 0;
  transition: opacity .3s;
}
.glass-surface > span.glass-edge {
  padding: 1px;
  background:
    radial-gradient(
      ellipse 155px 110px at var(--mx,50%) var(--my,0%),
      rgba(242, 251, 255, .8),
      rgba(var(--user-rgb), .15) 50%,
      transparent 85%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s;
}
.glass-surface.spotlit > span.glass-shine,
.glass-surface.spotlit > span.glass-edge {
  opacity: 1;
}
.glass-surface > *:not(.glass-shine):not(.glass-edge) {
  position: relative;
  z-index: 1;
}
.tool.glass-surface svg {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .22));
  color: var(--user-accent);
}
.feature-group.glass-surface[open] {
  transform: none !important;
}
.feature-group.glass-surface > summary {
  min-height: 18px;
}
.tool.glass-surface:active:not(:disabled) {
  transform: perspective(650px) translateY(0) scale(.985) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition-duration: .09s;
  box-shadow: inset 0 1px rgba(255, 255, 255, .1), 0 2px 5px rgba(0, 0, 0, .2);
}
.feature-group.glass-surface[open] > span.glass-shine,
.feature-group.glass-surface[open] > span.glass-edge {
  display: none !important;
}
.create-group > .tool.glass-surface {
  min-height: 96px;
}
.compose-group > .tool.glass-surface {
  min-height: 60px;
}
.compose-group > .tool.glass-surface > span:not(.glass-shine):not(.glass-edge) {
  flex: 1;
}
.compose-group > .tool.glass-surface:after {
  position: relative;
  z-index: 1;
  color: #b3c6dd;
}
body.motion-off .glass-surface,
body.motion-off .glass-surface.spotlit {
  transform: none !important;
}
body.motion-off .glass-shine,
body.motion-off .glass-edge {
  opacity: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .glass-surface,
  .glass-surface.spotlit {
    transform: none !important;
  }
  .glass-shine,
  .glass-edge {
    opacity: 0 !important;
  }
}
.feature-group.glass-surface,
.feature-group.glass-surface.spotlit {
  transform: none !important;
}
#session-clock {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--user-muted);
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: .2px;
}
#session-clock[hidden] {
  display: none;
}
#comp-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context {
  grid-gap: 7px;
  gap: 7px;
}
#selection-count {
  white-space: nowrap;
  flex-shrink: 0;
}
.compose-group > .tool.glass-surface {
  min-height: 52px;
}
.create-group > .tool.glass-surface {
  min-height: 82px;
}
.feature-group.glass-surface > summary {
  font-weight: 500;
}
.primary {
  font-weight: 650;
  box-shadow: inset 0 1px rgba(255, 255, 255, .333), 0 4px 15px rgba(var(--user-rgb), .16);
}
.text-button {
  color: var(--user-muted);
}
body[data-glass=subtle] .glass-surface.spotlit > .glass-shine,
body[data-glass=subtle] .glass-surface.spotlit > .glass-edge {
  opacity: .4;
}
body[data-glass=pronounced] .glass-surface.spotlit > .glass-shine {
  filter: brightness(1.45);
}
body[data-glass=subtle] .glass-surface.spotlit {
  box-shadow: inset 0 1px rgba(255, 255, 255, .125), 0 6px 12px rgba(0, 0, 0, .2);
}
.tool-shelf {
  margin: 0 0 16px;
}
.shelf-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--user-muted);
  font-size: 10px;
  margin-bottom: 7px;
}
.shelf-heading button {
  padding: 2px 6px;
  font-size: 10px;
}
#shelf-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 6px;
  gap: 6px;
}
.shelf-slot {
  display: flex;
  min-width: 0;
  grid-gap: 3px;
  gap: 3px;
}
.shelf-slot > button {
  font-size: 10px;
  border-radius: 10px;
  padding: 9px 6px;
  flex: 1;
  min-width: 0;
  background: rgba(var(--user-rgb), .05);
  border: 1px solid rgba(var(--user-rgb), .1);
}
.shelf-slot > select {
  width: 0;
  flex: 1;
  min-width: 0;
  font-size: 10px;
}
.shelf-slot > select ~ button {
  flex: 0;
  padding: 4px;
}
.shelf-command:active {
  cursor: grabbing;
}
.rename-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 12px;
  gap: 12px;
  border-bottom: 1px solid #ffffff0c;
  padding: 7px 0;
  font-size: 11px;
}
.rename-row > * {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rename-row > span {
  color: var(--user-muted);
}
#rename-results {
  max-height: 200px;
  overflow: auto;
  margin-top: 10px;
}
#alternate-options[hidden] {
  display: none;
}
#hover-motion {
  position: fixed;
  width: 152px;
  padding: 7px;
  z-index: 100;
  pointer-events: none;
  border: 1px solid #d4e9ff33;
  background: rgba(16, 24, 36, .96);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  backdrop-filter: blur(14px);
}
#hover-motion[hidden] {
  display: none;
}
#hover-motion small {
  display: block;
  font-size: 9px;
  text-align: center;
  color: #a9bbd0;
  margin-top: 4px;
}
.mini-stage {
  height: 61px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse,
      rgba(var(--user-rgb), .12),
      transparent);
  border-radius: 8px;
}
.mini-stage span {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, .533),
      rgba(var(--user-rgb), .4));
  border: 1px solid rgba(var(--user-rgb), .6);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .267);
}
body.working #status:before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border: 1px solid #ffffff33;
  border-top-color: var(--user-accent);
  border-radius: 50%;
  animation: status-spin .8s linear infinite;
}
body.action-complete:not(.working) #status:not(.error):before {
  content: "✓";
  color: #9ddcc8;
  margin-right: 7px;
}
@keyframes status-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  body.working #status:before {
    animation: none;
  }
}
body.motion-off.working #status:before {
  animation: none;
}
#presets.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 270px;
  grid-gap: 9px;
  gap: 9px;
}
#presets > .effects-toolbar {
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--user-bg);
  padding-bottom: 3px;
}
#presets .effects-toolbar > .view-title {
  margin: 0 0 8px;
  justify-content: flex-end;
}
#presets .effects-toolbar h2 {
  display: none;
}
#presets .effects-toolbar .segmented {
  margin-bottom: 9px;
}
#presets .effects-toolbar .search {
  margin-bottom: 7px;
}
#presets #preset-list {
  flex: 1;
  min-height: 100px;
  height: auto;
  max-height: none;
  overscroll-behavior: contain;
}
#presets .preset-row {
  min-height: 46px;
}
#presets .preset-select {
  padding: 9px 8px;
  min-width: 0;
}
#presets .preset-select strong {
  font-size: 11px;
}
#presets .preset-select small {
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.apply-one {
  flex-shrink: 0;
  width: 30px;
  padding: 4px;
  background: transparent;
  border: 0;
  color: var(--user-accent);
  font-size: 17px;
}
.apply-one:hover:not(:disabled) {
  background: rgba(var(--user-rgb), .12);
  border-radius: 9px;
}
.quick-placement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  color: var(--user-muted);
  grid-gap: 10px;
  gap: 10px;
}
.quick-placement select {
  padding: 5px 8px;
  font-size: 11px;
}
#effects-batch {
  margin-top: 8px;
}
#effects-batch[hidden] {
  display: none;
}
#effects-batch #apply-preset {
  width: 100%;
  margin: 0;
  min-height: 34px;
  font-size: 11px;
}
#effects-stack {
  margin-top: 6px;
}
#effects-stack > summary,
#effects-manage > summary,
.shelf-fold > summary {
  font-size: 11px;
  color: var(--user-muted);
  padding: 7px 0;
  cursor: pointer;
}
#effects-stack[open] {
  max-height: 240px;
  overflow: auto;
}
#effects-manage {
  flex-shrink: 0;
  margin: 0;
}
#effects-manage[open] {
  max-height: 240px;
  overflow: auto;
}
#effects-manage .feature-group {
  margin-top: 8px;
}
.shelf-fold {
  margin-bottom: 12px;
}
.shelf-fold .tool-shelf {
  margin-bottom: 0;
}
.shelf-fold > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.shelf-fold > summary:after {
  content: "+";
}
.shelf-fold[open] > summary:after {
  content: "−";
}
.tool[data-action=adjustment].glass-surface {
  background:
    linear-gradient(
      135deg,
      rgba(168, 118, 230, .18),
      rgba(111, 89, 160, .045) 65%),
    linear-gradient(
      110deg,
      rgba(255, 255, 255, .02),
      rgba(0, 0, 0, .133));
  border-color: rgba(178, 143, 236, .23);
}
.tool[data-action=adjustment].glass-surface svg {
  color: #c5a1ef;
}
.tool[data-action=null].glass-surface {
  background:
    linear-gradient(
      135deg,
      rgba(91, 166, 194, .12),
      transparent 70%),
    linear-gradient(
      110deg,
      rgba(255, 255, 255, .02),
      rgba(0, 0, 0, .133));
}
.compose-group > .tool.glass-surface {
  background:
    linear-gradient(
      115deg,
      rgba(106, 138, 185, .06),
      transparent 65%),
    linear-gradient(
      110deg,
      rgba(255, 255, 255, .016),
      rgba(0, 0, 0, .133));
}
#effects-batch {
  height: 68px;
  position: relative;
}
#effects-batch[hidden] {
  display: block;
  visibility: hidden;
}
#effects-stack {
  position: absolute;
  top: 34px;
  left: 0;
  right: 0;
  z-index: 5;
}
#effects-stack[open] {
  background: var(--user-panel);
  border: 1px solid rgba(var(--user-rgb), .2);
  border-radius: 10px;
  padding: 0 8px 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .333);
}
#effects-batch[hidden] {
  display: block !important;
  visibility: hidden;
}
#effects-batch {
  height: 36px;
  display: flex;
  align-items: flex-start;
  grid-gap: 8px;
  gap: 8px;
}
#effects-batch #apply-preset {
  width: 58%;
  flex-shrink: 0;
}
#effects-stack {
  top: 0;
  left: 60%;
  right: 0;
  margin: 0;
}
#effects-stack > summary {
  white-space: nowrap;
  font-size: 10px;
}
#effects-stack[open] {
  left: 0;
  top: 36px;
}
.effects-guide {
  position: absolute;
  left: 4px;
  bottom: 12px;
  font-size: 9px;
  color: var(--user-muted);
  pointer-events: none;
}
.effects-toolbar.has-selection .effects-guide {
  display: none;
}
#tools .layer-actions {
  display: flex;
  grid-gap: 10px;
  gap: 10px;
}
#tools .create-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
#tools .compose-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
}
#tools .layer-actions .tool.glass-surface {
  --tool-rgb:125,167,222;
  background:
    radial-gradient(
      ellipse at 8% 0%,
      rgba(var(--tool-rgb), .23),
      transparent 76%),
    linear-gradient(
      135deg,
      rgba(var(--tool-rgb), .065),
      rgba(0, 0, 0, .14));
  border: 1px solid rgba(var(--tool-rgb), .23);
  border-radius: 17px;
  padding: 14px;
  grid-gap: 10px;
  gap: 10px;
  min-width: 0;
  transition:
    transform .24s cubic-bezier(.2, .75, .25, 1),
    box-shadow .28s,
    border-color .28s,
    background-color .28s;
}
#tools .layer-actions .tool.glass-surface.spotlit {
  background-color: rgba(var(--tool-rgb), .075);
  border-color: rgba(var(--tool-rgb), .45);
}
#tools .layer-actions .tool.glass-surface svg {
  color: rgb(var(--tool-rgb));
  filter: drop-shadow(0 2px 6px rgba(var(--tool-rgb), .18));
}
#tools .layer-actions .tool[data-action=adjustment] {
  --tool-rgb:191,148,239;
}
#tools .layer-actions .tool[data-action=null] {
  --tool-rgb:120,208,191;
}
#tools .layer-actions .tool[data-action=precompose] {
  --tool-rgb:126,177,235;
}
#tools .layer-actions .tool[data-action=unprecompose] {
  --tool-rgb:135,192,221;
}
#tools .layer-actions .tool[data-action=nullPrecompose] {
  --tool-rgb:162,165,234;
}
#tools .layer-actions .tool[data-action=organize] {
  --tool-rgb:218,185,129;
}
#tools .create-group > .tool.glass-surface {
  min-height: 91px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}
#tools .compose-group > .tool.glass-surface {
  min-height: 76px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 11px;
}
#tools .compose-group > .tool.glass-surface > span:not(.glass-shine):not(.glass-edge) {
  flex: 0;
}
#tools .compose-group > .tool:after {
  display: none;
}
#tools .compose-group > .tool.glass-surface svg {
  width: 17px;
  height: 17px;
}
#tools > .feature-group {
  margin: 10px 0;
  background:
    linear-gradient(
      105deg,
      rgba(var(--user-rgb), .045),
      transparent 75%),
    rgba(255, 255, 255, .013);
  border-color: rgba(209, 227, 255, .10);
  box-shadow: inset 0 1px rgba(255, 255, 255, .027), 0 3px 10px rgba(0, 0, 0, .067);
}
#tools > .feature-group > summary {
  font-size: 11px;
  padding-top: 13px;
  padding-bottom: 13px;
}
#tools > .shelf-fold {
  margin-top: 16px;
  padding-top: 4px;
  border-top: 1px solid #ffffff0d;
}
#tools > .view-title {
  margin-bottom: 12px;
}
@media (min-width: 650px) {
  #tools .compose-group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  #tools .create-group > .tool.glass-surface {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 68px;
  }
}
#presets .preset-select {
  padding-left: 31px;
}
#presets .preset-select:before {
  left: 10px;
  top: 15px;
  width: 11px;
  height: 11px;
  pointer-events: none;
}
#curves #curve-studio .curve-graph {
  height: 185px;
  width: 100%;
  touch-action: none;
  background:
    radial-gradient(
      ellipse at 50% 100%,
      rgba(var(--user-rgb), .07),
      transparent),
    rgba(9, 14, 22, .333);
  border-radius: 15px;
}
#curves .curve-presets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
  margin: 10px 0;
}
#curves .curve-presets button {
  padding: 7px 3px;
  font-size: 9px;
  border-radius: 10px;
  min-width: 0;
}
#curves .curve-presets svg {
  display: block;
  width: 100%;
  height: 26px;
  margin-bottom: 4px;
}
#curves .curve-presets path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.curve-motion-preview {
  display: flex;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 14px 2px;
}
.ball-track {
  flex: 1;
  min-width: 0;
  height: 24px;
  position: relative;
}
.ball-track:before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  top: 11px;
  height: 1px;
  background: rgba(var(--user-rgb), .2);
}
.preview-ball {
  display: block;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 30% 25%,
      #eff8ff,
      var(--user-accent) 45%,
      #253a5a);
  box-shadow: 0 0 14px rgba(var(--user-rgb), .22);
}
#curve-play {
  font-size: 10px;
}
.curve-slide-actions {
  display: flex;
  grid-gap: 7px;
  gap: 7px;
  margin: 8px 0 16px;
}
.curve-slide-actions button {
  flex: 1;
  font-size: 10px;
  padding: 8px 3px;
  background: rgba(var(--user-rgb), .05);
  border-radius: 10px;
}
#custom-curves > .save-row {
  margin-top: 10px;
}
#curves .saved-row {
  flex-wrap: wrap;
}
#curves .row-actions {
  flex-wrap: wrap;
}
#curves .curve-values {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
#curves .curve-values input {
  min-width: 0;
  width: 100%;
}
@media (max-width: 310px) {
  nav .tab {
    font-size: 8px;
  }
  #curves #curve-studio .curve-graph {
    height: 160px;
  }
}
.saved-curve-thumb {
  width: 42px;
  height: 28px;
  flex-shrink: 0;
}
.saved-curve-thumb path {
  fill: none;
  stroke: var(--user-accent);
  stroke-width: 1.7;
}
.saved-row > .saved-curve-thumb + strong {
  flex: 1;
  min-width: 60px;
}
.collection-controls {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin: 10px 0;
  font-size: 11px;
}
.collection-controls > label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
}
.collection-controls select {
  max-width: 58%;
  min-width: 0;
}
.collection-controls .details > summary {
  font-size: 10px;
  color: var(--user-muted);
}
.curve-move {
  font-size: 10px;
  max-width: 130px;
  margin-left: auto;
}
.saved-row[hidden] {
  display: none !important;
}
body[data-workspace=studio] #curves #curve-studio .curve-graph {
  height: 255px;
}
body[data-workspace=studio] .preset-row {
  min-height: 58px;
}
body[data-workspace=studio] .fields {
  grid-gap: 15px;
  gap: 15px;
}
body[data-workspace=compact] #curves #curve-studio .curve-graph {
  height: 165px;
}
body[data-workspace=compact] #tools .compose-group > .tool.glass-surface {
  min-height: 70px;
}
#hover-help-tip {
  position: fixed;
  z-index: 150;
  pointer-events: none;
  max-width: min(260px, calc(100vw - 16px));
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(var(--user-rgb), .22);
  background: rgba(16, 23, 33, .96);
  color: #dce6f3;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .333);
  backdrop-filter: blur(14px);
}
.startup-reveal .brand-mark {
  animation: brand-arrive .8s cubic-bezier(.2, .7, .2, 1);
}
.startup-reveal .wordmark h1 {
  animation: wordmark-arrive .65s ease-out;
}
@keyframes brand-arrive {
  from {
    opacity: .1;
    transform: scale(.82) rotate(-7deg);
    filter: brightness(2.5);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes wordmark-arrive {
  from {
    opacity: .2;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.account-design {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  background: rgba(8, 13, 22, .85);
  backdrop-filter: blur(18px);
  display: grid;
  place-items: center;
  padding: 15px;
}
.account-card {
  width: 100%;
  max-width: 340px;
  max-height: calc(100vh - 30px);
  overflow: auto;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid #c2d9ff26;
  background:
    radial-gradient(
      ellipse at top left,
      #86baff14,
      transparent 70%),
    var(--user-bg);
  box-shadow: 0 20px 70px rgba(0, 0, 0, .333);
}
.account-card p {
  font-size: 11px;
  color: var(--user-muted);
  line-height: 1.6;
}
.account-card label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin: 16px 0;
  font-size: 11px;
}
.account-card input {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid #ffffff15;
}
.design-badge {
  font-size: 8px;
  letter-spacing: .8px;
  color: var(--user-accent);
}
.account-card h2 {
  margin-top: 12px;
}
.profile-example {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 12px 0;
  border-block: 1px solid #ffffff12;
}
.profile-example small {
  display: block;
  color: var(--user-muted);
  font-size: 9px;
  margin-top: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .startup-reveal .brand-mark,
  .startup-reveal .wordmark h1 {
    animation: none !important;
  }
}
.account-card .account-screen-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  grid-gap: 8px;
  gap: 8px;
  margin: 15px 0 24px;
  font-size: 10px;
  color: var(--user-muted);
}
.account-screen-label select {
  max-width: 58%;
}
.account-card .code-example {
  letter-spacing: 10px;
  font-size: 20px;
  text-align: center;
}
.brand-mark svg,
.identity-loading svg {
  overflow: visible;
}
.brand-mark svg:not(.prism-logo) path,
.identity-loading svg:not(.prism-logo) path {
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
}
.brand-mark svg circle,
.identity-loading circle {
  fill: currentColor;
  stroke: none;
}
.identity-echo {
  opacity: .3;
}
.identity-lockup {
  display: flex;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  margin: 18px 0;
}
.identity-lockup small {
  display: block;
  font-size: 10px;
  color: var(--user-muted);
  margin-top: 5px;
}
.identity-loading {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--user-accent);
}
body.working .identity-loading {
  display: inline-block;
  animation: identity-breathe 1.1s ease-in-out infinite;
}
body.working #status:before {
  display: none;
}
.startup-reveal .identity-trace {
  stroke-dasharray: 50;
  animation: identity-draw .8s ease-out;
}
.wordmark h1 span {
  letter-spacing: .5px;
  text-transform: none;
}
footer:has(.identity-loading) {
  grid-gap: 6px;
  gap: 6px;
}
@keyframes identity-draw {
  from {
    stroke-dashoffset: 50;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes identity-breathe {
  50% {
    opacity: .35;
    transform: scale(.9);
  }
}
.advanced-options {
  margin: 10px 0;
  border-top: 1px solid rgba(var(--user-rgb), .1);
  padding-top: 9px;
}
.advanced-options > summary {
  font-size: 11px;
  cursor: pointer;
  color: var(--user-muted);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
}
.advanced-options > summary:after {
  content: "+";
  font-size: 15px;
  color: var(--user-accent);
}
.advanced-options[open] > summary:after {
  content: "−";
}
.advanced-options > summary::-webkit-details-marker {
  display: none;
}
.advanced-options > .curve-values {
  margin-top: 10px;
}
.advanced-options .curve-slide-actions {
  margin-bottom: 4px;
}
#effects-stack.advanced-options {
  border: 0;
  padding: 0;
  margin: 0;
}
#motion-advanced .offset-row {
  margin: 12px 0;
}
#curve-compare {
  margin: 14px 0;
}
#curve-compare > summary {
  min-height: 28px;
  font-size: 11px;
  cursor: pointer;
}
.compare-pickers {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 10px;
}
.compare-pickers label {
  display: flex;
  align-items: center;
  grid-gap: 7px;
  gap: 7px;
}
.compare-pickers select {
  flex: 1;
  min-width: 0;
  width: 0;
}
.compare-pickers button {
  font-size: 10px;
  padding: 7px;
}
.compare-label {
  font-size: 11px;
  font-weight: 600;
  min-width: 12px;
}
.slot-0 {
  color: var(--user-accent);
}
.slot-1 {
  color: #efbe8c;
}
.compare-graph {
  width: 100%;
  height: 130px;
  margin: 10px 0;
  background: rgba(8, 13, 22, .2);
  border-radius: 12px;
}
.compare-graph path {
  fill: none;
  stroke-width: 2;
}
.compare-grid {
  stroke: rgba(255, 255, 255, .047) !important;
  stroke-width: 1 !important;
}
#compare-path-0 {
  stroke: var(--user-accent);
}
#compare-path-1 {
  stroke: #efbe8c;
  stroke-dasharray: 5 3;
}
.compare-lane {
  display: flex;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  margin: 10px 0;
}
.compare-track {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 18px;
}
.compare-track:before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  height: 1px;
  background: rgba(255, 255, 255, .07);
}
.compare-ball {
  position: relative;
  display: block;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 30% 25%,
      #fff,
      currentColor 65%);
  box-shadow: 0 0 12px rgba(255, 255, 255, .04);
}
.compare-actions {
  display: flex;
  grid-gap: 6px;
  gap: 6px;
  margin-top: 15px;
}
.compare-actions button {
  font-size: 10px;
  padding: 9px 6px;
  flex: 1;
  min-width: 0;
}
body.motion-off .identity-loading,
body.motion-off .identity-trace {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .identity-loading,
  .identity-trace {
    animation: none !important;
  }
}
.brand-mark {
  color: var(--user-accent);
}
.identity-loading {
  vertical-align: middle;
  margin-right: 5px;
}
#effects-stack.advanced-options[open] {
  padding: 0 8px 8px;
  border: 1px solid rgba(var(--user-rgb), .2);
}
#effects-stack.advanced-options > summary {
  font-size: 9px;
  grid-gap: 4px;
  gap: 4px;
}
#curve-studio > .curve-values {
  margin: 10px 0 12px;
}
.curve-apply-row {
  display: flex;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  margin: 8px 0;
}
.curve-apply-row > .curve-motion-preview {
  flex: 1;
  min-width: 0;
  padding: 10px 0;
  grid-gap: 5px;
  gap: 5px;
}
.curve-apply-row > #curve-apply {
  width: auto;
  min-width: 70px;
  margin: 0;
  padding: 10px 14px;
}
.curve-apply-row #curve-play {
  font-size: 9px;
  padding: 4px;
}
.effect-workflow {
  font-size: 11px;
  margin: 8px 0;
}
body:not(.build-stack) #effects-batch {
  display: none !important;
}
body:not(.build-stack) .preset-select:before {
  display: none;
}
body:not(.build-stack) #presets .preset-select {
  padding-left: 10px !important;
}
body:not(.build-stack) .preset-row.chosen {
  background: transparent;
}
#effects-stack > summary {
  font-size: 10px !important;
}
footer {
  min-height: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
footer > div {
  display: none !important;
}
footer #status {
  display: none;
}
body.feedback-visible footer,
body.working footer {
  padding: 7px 0 !important;
}
body.feedback-visible #status,
body.working #status {
  display: inline;
}
#visible-tabs {
  padding-top: 8px;
}
.settings-card > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  min-height: 28px;
}
.settings-card .save-row select {
  min-width: 0;
  flex: 1;
  width: 0;
}
.first-hint {
  display: flex;
  grid-gap: 9px;
  gap: 9px;
  align-items: center;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(var(--user-rgb), .15);
  border-radius: 12px;
  font-size: 10px;
  color: var(--user-muted);
  background: rgba(var(--user-rgb), .04);
}
.first-hint span {
  flex: 1;
}
.first-hint button {
  font-size: 9px;
  flex-shrink: 0;
  padding: 5px 7px;
}
.pack-curve {
  display: flex;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  font-size: 11px;
  padding: 5px;
}
.pack-curve svg {
  width: 45px;
  height: 25px;
  stroke: var(--user-accent);
  fill: none;
}
.pack-curve span {
  overflow-wrap: anywhere;
}
#pack-preview {
  max-height: 320px;
  overflow: auto;
  margin: 12px 0;
  padding: 8px;
  border: 1px solid rgba(var(--user-rgb), .15);
  border-radius: 12px;
}
#pack-preview button {
  margin: 4px;
  font-size: 10px;
}
.missing-preset {
  display: flex;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  margin: 9px 0;
}
.missing-preset span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 10px;
  flex: 1;
}
.missing-preset button {
  font-size: 10px;
  flex-shrink: 0;
}
#report-text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--user-panel);
  color: var(--text);
  border: 1px solid rgba(var(--user-rgb), .2);
  border-radius: 10px;
  margin: 10px 0;
  padding: 10px;
  resize: vertical;
  font: 11px/1.6 "Segoe UI", sans-serif;
}
#presets > .effects-toolbar {
  position: relative;
}
body.build-stack #effects-batch {
  height: auto;
  display: block;
}
body.build-stack #effects-batch #apply-preset {
  width: 100%;
}
body.build-stack #effects-stack {
  position: relative;
  inset: auto;
  width: 100%;
  margin-top: 5px;
}
body.build-stack #effects-stack[open] {
  position: relative;
  inset: auto;
  max-height: 180px;
}
#presets .first-hint {
  flex-shrink: 0;
}
body.build-stack #effects-stack[open] {
  height: 180px;
}
body.build-stack #effects-batch[hidden] {
  visibility: visible;
}
#recover-preset {
  font-size: 10px;
  margin-left: 7px;
}
.effects-guide,
.effects-toolbar.has-selection .effects-guide {
  position: static;
  display: block;
  margin-top: 8px;
  line-height: 1.4;
}
#presets .effects-toolbar > .view-title {
  margin-bottom: 5px;
}
#presets > .first-hint {
  margin-bottom: 2px;
}
.feature-group.glass-surface:not([open]) {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.feature-group.glass-surface > summary {
  position: relative;
  isolation: isolate;
}
.feature-group.glass-surface:not([open]) > summary:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 18px;
  border: 1px solid #e6edf324;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .07),
      rgba(255, 255, 255, .016) 46%,
      rgba(0, 0, 0, .094));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .133),
    inset 0 -1px rgba(255, 255, 255, .024),
    0 5px 12px rgba(0, 0, 0, .267);
  transform: perspective(650px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .24s cubic-bezier(.2, .75, .25, 1), box-shadow .28s;
}
.feature-group.glass-surface.spotlit:not([open]) > summary:before {
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .26),
    inset 0 -1px rgba(255, 255, 255, .04),
    var(--sx,0px) var(--sy,12px) 22px rgba(0, 0, 0, .333);
  transform: perspective(650px) translateY(-1px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
}
.feature-group.glass-surface > summary > .glass-shine,
.feature-group.glass-surface > summary > .glass-edge {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 18px;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transform: perspective(650px) translateY(-1px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform .24s cubic-bezier(.2, .75, .25, 1), opacity .25s;
}
.feature-group.glass-surface > summary > .glass-shine {
  background:
    radial-gradient(
      ellipse 140px 85px at var(--mx,50%) var(--my,0%),
      #ffffff2b,
      transparent 80%),
    linear-gradient(
      var(--sheen-angle,120deg),
      transparent 20%,
      #ffffff06 43%,
      #ffffff14 48%,
      transparent 68%);
}
.feature-group.glass-surface > summary > .glass-edge {
  padding: 1px;
  background:
    radial-gradient(
      ellipse 160px 90px at var(--mx,50%) var(--my,0%),
      #ffffffad,
      transparent 85%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.feature-group.glass-surface.spotlit:not([open]) > summary > .glass-shine,
.feature-group.glass-surface.spotlit:not([open]) > summary > .glass-edge {
  opacity: 1;
}
body.motion-off .feature-group > summary:before,
body.motion-off .feature-group > summary > .glass-shine,
body.motion-off .feature-group > summary > .glass-edge {
  transform: none !important;
}
body.motion-off .feature-group > summary > .glass-shine,
body.motion-off .feature-group > summary > .glass-edge {
  opacity: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  .feature-group > summary:before,
  .feature-group > summary > .glass-shine,
  .feature-group > summary > .glass-edge {
    transform: none !important;
  }
  .feature-group > summary > .glass-shine,
  .feature-group > summary > .glass-edge {
    opacity: 0 !important;
  }
}
#update-slides {
  margin-top: 9px;
  font-size: 11px;
  min-height: 37px;
}
#slides .slide-settings,
#slides .curve-card,
#keys > .card,
.settings-card {
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid rgba(var(--user-rgb), .1) !important;
}
.settings-card {
  margin: 0 0 12px;
}
#slides .curve-grid {
  grid-gap: 20px;
  gap: 20px;
}
.curve-edit-state {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 30px;
  margin: -8px 0 8px;
  color: var(--user-muted);
  font-size: 10px;
}
.curve-edit-state button {
  padding: 4px 7px;
  font-size: 10px;
}
.preset-select:focus-visible {
  outline: 1px solid var(--user-accent);
  outline-offset: -2px;
  background: rgba(var(--user-rgb), .08);
}
#batch-progress {
  flex-shrink: 0;
  padding: 8px 0;
  font-size: 10px;
  color: var(--user-muted);
  min-height: 38px;
}
#progress-meter {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 6px;
  accent-color: var(--user-accent);
}
button,
input,
select {
  transition:
    background-color .12s,
    border-color .12s,
    color .12s;
}
.view.active {
  animation-duration: .18s;
}
.nav-marker {
  transition-duration: .18s;
}
.glass-surface,
.glass-surface > summary:before {
  transition-duration: .2s;
}
.button-pressed {
  animation-duration: .12s;
}
#batch-progress {
  position: absolute;
  bottom: 30px;
  left: 16px;
  right: 16px;
  z-index: 30;
  border-radius: 10px;
  background: var(--user-panel);
  padding: 9px 12px;
  pointer-events: none;
}
.app {
  position: relative;
}
.brand-mark svg.prism-logo {
  width: 35px;
  height: 35px;
  stroke: none;
  filter: drop-shadow(0 2px 3px #0004);
}
.identity-loading svg.prism-logo {
  width: 16px;
  height: 16px;
  stroke: none;
}
.brand-mark svg.prism-logo path,
.identity-loading svg.prism-logo path {
  stroke: none;
}
.app {
  background:
    radial-gradient(
      ellipse at 96% 0%,
      rgba(var(--user-rgb), .055),
      transparent 42%),
    var(--user-bg);
}
#tools .layer-actions .tool[data-action=adjustment] {
  --tool-rgb:174,95,255;
}
#tools .layer-actions .tool[data-action=null] {
  --tool-rgb:45,216,176;
}
#tools .layer-actions .tool[data-action=precompose] {
  --tool-rgb:64,151,255;
}
#tools .layer-actions .tool[data-action=unprecompose] {
  --tool-rgb:45,193,228;
}
#tools .layer-actions .tool[data-action=nullPrecompose] {
  --tool-rgb:128,112,255;
}
#tools .layer-actions .tool[data-action=organize] {
  --tool-rgb:232,163,57;
}
#tools .layer-actions .tool.glass-surface {
  background:
    radial-gradient(
      ellipse at 0% 0%,
      rgba(var(--tool-rgb), .18),
      transparent 72%),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .008),
      rgba(0, 0, 0, .25)),
    var(--user-bg);
  border-color: rgba(var(--tool-rgb), .24);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .047),
    inset 0 -1px rgba(0, 0, 0, .333),
    0 4px 12px rgba(0, 0, 0, .19);
}
#tools .layer-actions .tool.glass-surface.spotlit {
  background-color: var(--user-bg);
  border-color: rgba(var(--tool-rgb), .52);
  box-shadow: inset 0 1px rgba(var(--tool-rgb), .20), var(--sx,0px) var(--sy,10px) 20px rgba(0, 0, 0, .333);
}
#tools .layer-actions .tool.glass-surface > .glass-shine {
  background:
    radial-gradient(
      ellipse 145px 105px at var(--mx,50%) var(--my,0%),
      rgba(var(--tool-rgb), .17),
      transparent 80%),
    linear-gradient(
      var(--sheen-angle,120deg),
      transparent 26%,
      #ffffff06 47%,
      transparent 67%);
}
.feature-group.glass-surface:not([open]) > summary:before {
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .035),
      rgba(255, 255, 255, .008) 46%,
      rgba(0, 0, 0, .157));
  border-color: rgba(220, 231, 240, .106);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .07),
    inset 0 -1px rgba(255, 255, 255, .01),
    0 5px 12px rgba(0, 0, 0, .267);
}
nav {
  background: rgba(0, 0, 0, .133);
  border-color: rgba(255, 255, 255, .05);
}
.tab.active {
  background:
    linear-gradient(
      145deg,
      rgba(var(--user-rgb), .12),
      rgba(var(--user-rgb), .035));
  border-color: rgba(var(--user-rgb), .20);
  box-shadow: inset 0 1px rgba(255, 255, 255, .035), 0 2px 5px rgba(0, 0, 0, .2);
}
.context,
.first-hint {
  background: rgba(var(--user-rgb), .018);
  border-color: rgba(var(--user-rgb), .11);
}
@media (hover: hover) {
  .preset-row .apply-one,
  .preset-row .favorite {
    opacity: 0;
    transition: opacity .12s, background-color .12s;
  }
  .preset-row:hover .apply-one,
  .preset-row:hover .favorite,
  .preset-row:focus-within .apply-one,
  .preset-row:focus-within .favorite,
  .preset-row .favorite.saved {
    opacity: 1;
  }
}
.preset-select strong {
  font-weight: 600;
  letter-spacing: .05px;
}
.preset-select small {
  opacity: .75;
}
#saved-curves .saved-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  grid-gap: 9px 12px;
  gap: 9px 12px;
  padding: 12px 0;
  align-items: center;
}
#saved-curves .saved-curve-thumb {
  width: 88px;
  height: 52px;
  grid-column: 1;
  grid-row: 1/3;
  padding: 7px;
  background:
    linear-gradient(
      145deg,
      rgba(var(--user-rgb), .09),
      rgba(0, 0, 0, .133));
  border: 1px solid rgba(var(--user-rgb), .16);
  border-radius: 10px;
  stroke: var(--user-accent);
  fill: none;
}
#saved-curves .saved-curve-thumb path {
  stroke-width: 1.8;
  stroke-linecap: round;
}
#saved-curves .saved-row > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
#saved-curves .row-actions {
  grid-column: 2;
  display: flex;
  grid-gap: 4px;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0;
}
#saved-curves .curve-move {
  grid-column: 2;
  width: 100%;
  max-width: none;
  margin: 0;
}
#saved-curves .row-actions button {
  padding: 5px 7px;
}
input.scrubbable {
  cursor: ew-resize;
  touch-action: pan-y;
}
input.scrubbable[data-typing=true] {
  cursor: text;
}
input.scrubbing {
  border-color: var(--user-accent);
  box-shadow: 0 0 0 2px rgba(var(--user-rgb), .12);
  user-select: none;
}
.view.active {
  animation: none;
}
@media (max-width: 310px) {
  #saved-curves .saved-row {
    grid-template-columns: 66px minmax(0, 1fr);
    grid-gap: 8px;
    gap: 8px;
  }
  #saved-curves .saved-curve-thumb {
    width: 66px;
    height: 46px;
  }
}