/* PathPilot editor
   Workspace layout:
     ┌──────────── bar ────────────┐
     │ paths │ canvas      │ props │
     │       │ timeline    │       │
     └─────────────────────────────┘
   Landing page styles live in global.css. */

:root{
  --editor-page:#f1f2f3;
  --editor-icon:var(--icon-on-light);
  --editor-panel:#ffffff;
  --editor-module:#f2f3f4;
  --editor-control:#f6f7f8;
  --editor-line:#dfe2e4;
  --editor-line-strong:#d4d7da;
  --editor-text:#0a0a0a;
  --editor-muted:var(--muted-strong);
  --editor-radius-panel:24px;
  --editor-radius-module:16px;
  --editor-gap:12px;
  --editor-radius-control:10px;
}

/* Primitives: kicker, icon button, presets */
.panel-kicker{
  display:block;
  color:var(--editor-muted);
  font-size:11px;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.icon-button{
  width:38px;
  height:38px;
  padding:0;
  display:grid;
  place-items:center;
  border:1px solid rgba(10,10,10,.1);
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  transition:transform .2s var(--ease),background .2s var(--ease),color .2s var(--ease);
}
.icon-button:hover{
  transform:translateY(-1px);
  background:var(--ink);
  color:var(--on-ink);
}
.icon-button svg{width:17px;height:17px}
.side-preset{
  min-width:0;
  min-height:48px;
  padding:5px;
  border:1px solid var(--editor-line);
  border-radius:10px;
  background:#fff;
  color:#6f706c;
  font-size:10px;
  text-transform:capitalize;
}
.side-preset-preview{
  height:24px;
  margin-bottom:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1px;
  overflow:hidden;
  border-radius:7px;
  background:#efefed;
}
.side-preset-preview i{
  width:4px;
  height:13px;
  background:#0a0a0a;
  transform:skew(-15deg);
}
.side-preset--blueprint .side-preset-preview,
.side-preset--dark .side-preset-preview{background:#101211}
.side-preset--blueprint .side-preset-preview i{background:#63d9db}
.side-preset--dark .side-preset-preview i{background:#fff}
.side-preset--color .side-preset-preview{background:#c9edff}
.side-preset--color .side-preset-preview i:nth-child(1){background:#ab8cf6}
.side-preset--color .side-preset-preview i:nth-child(2){background:#70ddda}
.side-preset--color .side-preset-preview i:nth-child(3){background:#8fe46c}
/* Soft tag palettes */
.side-preset--sky .side-preset-preview{background:#e3edfb}
.side-preset--sky .side-preset-preview i{background:#3f7ae0}
.side-preset--mint .side-preset-preview{background:#e2f6e8}
.side-preset--mint .side-preset-preview i{background:#36b265}
.side-preset--lavender .side-preset-preview{background:#efe8fd}
.side-preset--lavender .side-preset-preview i{background:#8a63f0}
.side-preset--graphite .side-preset-preview{background:#e6e6e6}
.side-preset--graphite .side-preset-preview i{background:#2a2a2a}
.side-preset--coral .side-preset-preview{background:#fbe4e1}
.side-preset--coral .side-preset-preview i{background:#e2483d}
.side-preset.is-active{
  border-color:#0a0a0a;
  background:#0a0a0a;
  color:#fff;
}

/* Control sections */
/* -------------------------------------------------------------------------- */

.side-group{
  min-width:0;
  padding:16px 2px;
  background:#fff;
}
.side-group+.side-group{border-top:1px solid #e2e4e6}

.side-group-head{
  margin-bottom:12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.side-group-head strong{
  color:var(--editor-text);
  font-size:13px;
  font-weight:500;
  line-height:1.2;
}
.side-group-head small{
  color:var(--editor-muted);
  font-size:10px;
  line-height:1.35;
  text-align:right;
}

.side-group-body{min-width:0;overflow:visible}

.side-toggle-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:8px;
  padding:8px;
  border-radius:14px;
  background:var(--editor-module);
}

.fig-toggle-item{
  min-width:0;
  min-height:42px;
  padding:0 9px 0 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  border:1px solid var(--editor-line);
  border-radius:11px;
  background:#fff;
  color:#666762;
  text-align:left;
}
.fig-toggle-item.is-on{
  border-color:rgba(185,154,248,.5);
  background:#fbfaff;
  color:var(--ink);
}
.fig-toggle-label{
  min-width:0;
  overflow:hidden;
  color:inherit;
  font-size:11px;
  font-weight:500;
  text-overflow:ellipsis;
}
.fig-toggle-switch{
  position:relative;
  width:32px;
  height:20px;
  flex:0 0 32px;
  border-radius:999px;
  background:#dfe2e4;
}
.fig-toggle-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#a7abad;
  transition:transform .14s cubic-bezier(.34,1.4,.64,1),background .14s var(--ease);
}
.fig-toggle-item.is-on .fig-toggle-switch{background:rgba(185,154,248,.18)}
.fig-toggle-item.is-on .fig-toggle-thumb{
  transform:translateX(12px);
  background:var(--violet);
}

/* Slider: one rounded field, grey fill with a handle line at its edge,
   label on the left, value on the right, optional step dots. */
.fig-slider-row{
  min-width:0;
  margin:8px 0;
  display:flex;
  align-items:center;
  gap:8px;
}
.fig-slider-track{
  /* The fill always covers the label; the value range runs over the rest. */
  --slider-progress:0;
  --slider-label:64px;
  --slider-run:calc(100% - var(--slider-label) - 72px);
  position:relative;
  min-width:0;
  height:44px;
  flex:1 1 auto;
  overflow:hidden;
  display:flex;
  align-items:center;
  border:1px solid #ececee;
  border-radius:14px;
  background:#f4f4f5;
  transition:border-color .2s var(--ease);
}
.fig-slider-track:hover{border-color:#e0e0e3}
.fig-slider-track:focus-within{border-color:var(--violet)}
.fig-slider-fill{
  position:absolute;
  inset:0 auto 0 0;
  z-index:1;
  width:calc(var(--slider-label) + var(--slider-run) * var(--slider-progress));
  border-radius:13px;
  background:#e4e4e7;
  pointer-events:none;
  transition:background .2s var(--ease);
}
.fig-slider-fill::after{
  content:"";
  position:absolute;
  top:50%;
  right:10px;
  width:3px;
  height:18px;
  transform:translateY(-50%);
  border-radius:2px;
  background:#9c9ca1;
}
.fig-slider-track:hover .fig-slider-fill{background:#dddde1}
.fig-slider-tick{
  position:absolute;
  top:50%;
  left:calc(var(--slider-label) - 11px + var(--slider-run) * var(--tick));
  width:3px;
  height:3px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#b4b4b9;
  pointer-events:none;
}
.fig-slider-label,.fig-slider-value{
  position:absolute;
  z-index:2;
  font-size:13px;
  pointer-events:none;
  white-space:nowrap;
}
.fig-slider-label{left:14px;color:var(--editor-muted)}
.fig-slider-value{right:14px;color:var(--editor-text);font-weight:500;font-variant-numeric:tabular-nums}
.fig-native-range{
  position:absolute;
  inset:0 0 0 calc(var(--slider-label) - 20px);
  z-index:3;
  width:calc(var(--slider-run) + 40px);
  height:100%;
  margin:0;
  opacity:0;
  cursor:ew-resize;
}

.side-mini-label{
  margin:10px 0 7px;
  color:var(--editor-muted);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.side-swatches{
  width:100%;
  margin:0 -4px;
  padding:4px 4px 6px;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:8px;
  overflow:visible;
}
.side-swatch{
  position:relative;
  width:28px;
  height:28px;
  flex:0 0 28px;
  padding:0;
  overflow:visible;
  border:1px solid rgba(10,10,10,.12);
  border-radius:50%;
  background-clip:padding-box;
}
.side-swatch::after{
  content:"";
  position:absolute;
  inset:-4px;
  border:2px solid transparent;
  border-radius:999px;
  pointer-events:none;
}
.side-swatch.is-active::after{border-color:#0a0a0a}
.side-swatch--custom{
  display:grid;
  place-items:center;
  background:#fff!important;
  color:var(--editor-muted);
  font-size:14px;
}
.side-swatch--custom input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
}

.side-grid-types{
  margin-bottom:10px;
  padding:8px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  border-radius:14px;
  background:var(--editor-module);
}
.side-grid-types button{
  min-height:58px;
  padding:6px;
  border:1px solid var(--editor-line);
  border-radius:10px;
  background:#fff;
  color:var(--editor-muted);
}
.side-grid-types button.is-active{
  border-color:#0a0a0a;
  color:#0a0a0a;
}
.side-grid-types small{
  display:block;
  margin-top:4px;
  font-size:9px;
  text-transform:capitalize;
}
.grid-glyph{
  display:block;
  width:28px;
  height:20px;
  margin:auto;
  opacity:.65;
  background-image:
    linear-gradient(rgba(10,10,10,.35) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,10,10,.35) 1px,transparent 1px);
  background-size:7px 7px;
}
.grid-glyph--radial{
  border:1px solid currentColor;
  border-radius:50%;
  background-image:
    linear-gradient(90deg,transparent 48%,currentColor 49%,currentColor 51%,transparent 52%),
    linear-gradient(transparent 48%,currentColor 49%,currentColor 51%,transparent 52%);
}
.grid-glyph--diamond{transform:rotate(45deg) scale(.72)}

.side-segmented,
.side-theme-switch{
  min-height:44px;
  padding:4px;
  display:grid;
  gap:4px;
  border-radius:12px;
  background:#eceeef;
}
.side-segmented{grid-template-columns:repeat(4,1fr)}
.side-theme-switch{grid-template-columns:repeat(2,1fr)}
.side-segmented button,
.side-theme-switch button{
  min-height:36px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--editor-muted);
  font-size:11px;
  text-transform:capitalize;
}
.side-segmented button.is-active,
.side-theme-switch button.is-active{
  background:#fff;
  color:#0a0a0a;
  box-shadow:inset 0 0 0 1px #ddd;
}

.side-select{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:var(--editor-muted);
  font-size:11px;
}
.side-select select{
  min-width:120px;
  height:36px;
  padding:0 10px;
  border:1px solid var(--editor-line);
  border-radius:10px;
  background:var(--editor-control);
  font-size:11px;
}

.side-primary-action{
  width:100%;
  min-height:42px;
  margin-top:10px;
  border:0;
  border-radius:11px;
  background:#0a0a0a;
  color:#fff;
  font-size:11px;
}

.side-export-stack{display:grid;gap:8px;padding-top:10px}
.side-export-stack button{
  min-height:60px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--editor-line);
  border-radius:12px;
  background:#fff;
  color:#0a0a0a;
  text-align:left;
}
.side-export-stack button>span{display:grid;gap:2px}
.side-export-stack strong{font-size:11px;font-weight:500}
.side-export-stack small{color:var(--editor-muted);font-size:9px}
.side-export-stack button.is-primary{
  border-color:#0a0a0a;
  background:#0a0a0a;
  color:#fff;
}


/* Canvas internals */
.canvas-viewport{
  position:relative;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.canvas-viewport.is-pannable{cursor:grab}
.canvas-viewport.is-pannable:active{cursor:grabbing}
.canvas-viewport{touch-action:none}
/* Wheel zoom and drag follow the pointer directly. */
.canvas-viewport.is-interacting .svg-artboard,.canvas-viewport.is-interacting .canvas-frame{transition:none}

.canvas-grid{
  position:absolute;
  inset:0;
  opacity:.25;
  background-image:
    linear-gradient(rgba(10,10,10,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(10,10,10,.04) 1px,transparent 1px);
  background-size:20px 20px;
}

.canvas-artwork{
  position:absolute;
  inset:18px 28px 28px;
  z-index:1;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.canvas-artwork .svg-artboard{
  position:relative;
  width:100%;
  height:100%;
  transition:transform .22s var(--ease);
  transform-origin:50% 50%;
  will-change:transform;
}
.canvas-artwork .svg-source,
.canvas-artwork .svg-source svg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

.svg-source.source-solid svg :is(path,rect,circle,ellipse,polygon,polyline,text){
  fill:var(--source-fill)!important;
  stroke:none!important;
  opacity:var(--source-opacity)!important;
}
.svg-source.source-solid svg line{
  stroke:var(--source-fill)!important;
  opacity:var(--source-opacity)!important;
}
.svg-source.source-outline svg :is(path,rect,circle,ellipse,polygon,polyline,line,text){
  fill:none!important;
  stroke:var(--source-stroke)!important;
  stroke-width:var(--source-stroke-width)!important;
  vector-effect:non-scaling-stroke;
  opacity:var(--source-opacity)!important;
}

.canvas-caption--compact{
  position:absolute;
  z-index:2;
  left:16px;
  right:16px;
  bottom:13px;
  display:flex;
  justify-content:space-between;
  color:var(--editor-muted);
  font-size:9px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.canvas-wrap--dark{background:#0f1110}
.canvas-wrap--dark .canvas-grid{
  opacity:.34;
  background-image:
    linear-gradient(rgba(99,217,219,.22) 1px,transparent 1px),
    linear-gradient(90deg,rgba(99,217,219,.22) 1px,transparent 1px);
}
.canvas-wrap--dark .canvas-toolbar--icons{
  border-color:rgba(255,255,255,.08);
  background:rgba(20,20,20,.72);
}
.canvas-wrap--dark .canvas-toolbar--icons button,
.canvas-wrap--dark .canvas-toolbar--icons span{color:#aeb0aa}
.canvas-wrap--dark .canvas-toolbar--icons button.is-active{background:#fff;color:#0a0a0a}

.compare-layout{
  position:absolute;
  inset:8px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.compare-pane{
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid var(--editor-line);
  border-radius:18px;
  background:rgba(255,255,255,.5);
}
.compare-label{
  position:absolute;
  z-index:3;
  top:10px;
  left:12px;
  color:var(--editor-muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.compare-pane .canvas-artwork{inset:34px 16px 16px}

/* Timeline tracks */
.timeline-tracks{
  min-height:0;
  overflow:auto;
  padding:0 2px 2px;
  display:grid;
  align-content:start;
  gap:5px;
  scrollbar-width:thin;
}
.timeline-track{
  min-height:30px;
  height:30px;
  padding:5px 8px;
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  align-items:center;
  gap:10px;
  border:1px solid var(--editor-line);
  border-radius:10px;
  background:#fff;
}
.timeline-track-name{color:var(--editor-muted);font-size:10px}
.timeline-track-line{
  position:relative;
  min-width:0;
  height:12px;
  border-radius:6px;
  background:#f0f1f2;
}
.timeline-track-line::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:rgba(10,10,10,.09);
}
.timeline-keyframe{
  position:absolute;
  z-index:2;
  top:50%;
  width:8px;
  height:8px;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid #ab8cf6;
  border-radius:1px;
  background:#fff;
}

.timeline-track{
  grid-template-columns:92px minmax(0,1fr);
}
.timeline-track-toggle{
  min-width:0;
  height:22px;
  padding:0;
  display:flex;
  align-items:center;
  gap:6px;
  border:0;
  background:transparent;
  color:var(--editor-muted);
  text-align:left;
}
.timeline-track-dot{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--violet);
}
.timeline-track.is-disabled{
  opacity:.42;
}
.timeline-track.is-disabled .timeline-track-dot{
  background:#b9bbbd;
}
.timeline-track-active{
  position:absolute;
  top:50%;
  height:4px;
  transform:translateY(-50%);
  border-radius:999px;
  background:rgba(185,154,248,.32);
  pointer-events:none;
}
.timeline-keyframe{
  appearance:none;
  padding:0;
  cursor:ew-resize;
  touch-action:none;
}
.timeline-keyframe:focus-visible{
  outline:2px solid var(--violet);
  outline-offset:3px;
}
.timeline-keyframe--start{background:#fff}
.timeline-keyframe--end{background:var(--violet)}



/* Empty canvas */

.empty-canvas-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--editor-line);
  border-radius:12px;
  background:#fff;
}
.empty-editor-note strong,
.empty-source-copy strong{font-size:13px;font-weight:500}
.empty-editor-note small,
.empty-source-copy span{
  color:var(--editor-muted);
  font-size:11px;
  line-height:1.45;
}
.empty-canvas-message{
  position:absolute;
  z-index:2;
  inset:0;
  width:min(420px,calc(100% - 48px));
  height:max-content;
  margin:auto;
  padding:26px;
  display:grid;
  justify-items:start;
  gap:10px;
  border:1px solid var(--editor-line);
  border-radius:20px;
  background:rgba(255,255,255,.94);
}
.empty-canvas-message strong{
  margin-top:4px;
  font-size:20px;
  font-weight:500;
  letter-spacing:-.03em;
}
.empty-canvas-message>span:not(.empty-canvas-icon){
  color:var(--editor-muted);
  font-size:12px;
  line-height:1.5;
}
.empty-canvas-upload{margin-top:4px}

/* ========================================================================== */
/* Workspace layout                                                            */
/* ========================================================================== */

.ed{
  --ed-left:280px;
  --ed-right:340px;
  height:calc(100dvh - 116px);
  min-height:640px;
  padding:12px 3vw 16px;
  display:grid;
  grid-template-columns:var(--ed-left) minmax(0,1fr) var(--ed-right);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:
    "bar    bar      bar"
    "layers canvas   props"
    "layers timeline props";
  gap:var(--editor-gap);
  background:transparent;
}

.ed-panel{
  min-width:0;
  min-height:0;
  border:1px solid var(--editor-line);
  border-radius:var(--editor-radius-panel);
  background:var(--editor-panel);
  box-shadow:0 10px 28px rgba(20,24,28,.035);
}
.ed-panel-scroll{
  min-height:0;
  flex:1;
  overflow:auto;
  scrollbar-width:thin;
}
.ed-panel-head{
  min-height:52px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--editor-line);
}
.ed-panel-head strong{font-size:14px;font-weight:500;letter-spacing:-.02em}

/* Buttons shared by bar, timeline and panels -------------------------------- */
.ed-btn{
  height:36px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  flex-shrink:0;
  border:1px solid var(--editor-line);
  border-radius:999px;
  background:#fff;
  color:var(--editor-text);
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.ed-btn svg{width:15px;height:15px}
.ed-btn:hover:not(:disabled){background:var(--editor-module)}
.ed-btn--primary{border-color:#0a0a0a;background:#0a0a0a;color:#fff}
.ed-btn--primary:hover:not(:disabled){background:#2a2b2c}
.ed-btn:disabled{opacity:.45;cursor:default}
.ed-btn:focus-visible,.ed-link:focus-visible,.ed-tabs button:focus-visible,.ed-path-list button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

.ed-link{
  padding:4px 0;
  border:0;
  background:none;
  color:var(--editor-muted);
  font-size:12px;
  cursor:pointer;
}
.ed-link:not(:disabled){color:var(--editor-text);text-decoration:underline;text-underline-offset:3px}
.ed-link:disabled{cursor:default}

/* Top bar ------------------------------------------------------------------- */
.ed-bar{
  grid-area:bar;
  min-height:64px;
  padding:10px 12px 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-radius:20px;
}
.ed-file{min-width:0;display:flex;align-items:center;gap:12px}
.ed-file-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  flex-shrink:0;
  border-radius:12px;
  background:var(--editor-module);
}
.ed-file-icon svg{width:18px;height:18px}
.ed-file-copy{min-width:0;display:grid;gap:2px;margin-right:4px}
.ed-file-copy .panel-kicker{font-size:10px}
.ed-file-copy strong{
  overflow:hidden;
  font-size:15px;
  font-weight:500;
  letter-spacing:-.02em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ed-bar-actions{display:flex;align-items:center;gap:8px}

.ed-export{position:relative}
.ed-export summary{list-style:none}
.ed-export summary::-webkit-details-marker{display:none}
.ed-export-menu{
  position:absolute;
  z-index:40;
  top:calc(100% + 8px);
  right:0;
  width:260px;
  padding:8px;
  border:1px solid var(--editor-line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 18px 40px rgba(20,24,28,.12);
}

/* Layers (paths) ------------------------------------------------------------ */
.ed-layers{grid-area:layers;display:flex;flex-direction:column;overflow:hidden}
.ed-path-list{margin:0;padding:8px;list-style:none;display:grid;gap:2px}
.ed-path-list button{
  width:100%;
  min-height:38px;
  padding:0 10px;
  display:grid;
  grid-template-columns:22px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  border:1px solid transparent;
  border-radius:var(--editor-radius-control);
  background:transparent;
  color:var(--editor-text);
  font-size:12px;
  text-align:left;
  cursor:pointer;
}
.ed-path-list button:hover{background:var(--editor-control)}
.ed-path-list button.is-selected{border-color:rgba(185,154,248,.55);background:#f8f5ff}
.ed-path-index{color:var(--editor-muted);font-size:10px;font-variant-numeric:tabular-nums}
.ed-path-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ed-path-meta{color:var(--editor-muted);font-size:10px;white-space:nowrap}
.ed-empty-note{margin:0;padding:16px;color:var(--editor-muted);font-size:12px;line-height:1.5}

.ed-stats{
  margin:0;
  padding:12px 16px 14px;
  display:grid;
  gap:6px;
  border-top:1px solid var(--editor-line);
  background:var(--editor-control);
}
.ed-stats div{display:flex;justify-content:space-between;font-size:11px}
.ed-stats dt{color:var(--editor-muted)}
.ed-stats dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}

/* Canvas -------------------------------------------------------------------- */
.ed-canvas{
  grid-area:canvas;
  position:relative;
  overflow:hidden;
  background:#f8f9fa;
}
.ed-canvas .canvas-viewport{position:absolute;inset:0}
.ed-canvas .canvas-artwork{inset:52px 40px 84px}
.ed-canvas-tools{
  position:absolute;
  z-index:20;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
}
.ed-canvas-tools button:disabled{opacity:.4;cursor:default}
.ed-canvas-caption{
  position:absolute;
  z-index:2;
  top:14px;
  left:18px;
  right:18px;
  display:flex;
  justify-content:space-between;
  color:var(--editor-muted);
  font-size:10px;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
}
.ed-canvas.canvas-wrap--dark{background:#0f1110}
.ed-canvas.canvas-wrap--dark .ed-canvas-caption{color:#8d908a}

/* Canvas toolbar */
.canvas-toolbar--icons{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border:1px solid var(--editor-line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 16px rgba(20,24,28,.035);
}
.canvas-toolbar--icons button{
  width:30px;
  min-width:30px;
  height:30px;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--editor-muted);
}
.canvas-toolbar--icons button:hover{background:#f2f3f4;color:#0a0a0a}
.canvas-toolbar--icons button.is-active{background:#0a0a0a;color:#fff}
.canvas-toolbar--icons svg{width:14px;height:14px;stroke-width:1.55}
.canvas-toolbar--icons .zoom-value{
  min-width:44px;
  height:30px;
  padding:0 6px;
  display:grid;
  place-items:center;
  color:#5f615d;
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.toolbar-divider{
  width:1px;
  height:16px;
  margin:0 4px;
  background:var(--editor-line-strong);
}

.canvas-wrap--dark .canvas-toolbar--icons{border-color:rgba(255,255,255,.08);background:rgba(20,20,20,.72)}
.canvas-wrap--dark .canvas-toolbar--icons button,.canvas-wrap--dark .canvas-toolbar--icons span{color:#aeb0aa}
.canvas-wrap--dark .canvas-toolbar--icons button.is-active{background:#fff;color:#0a0a0a}

/* Timeline ------------------------------------------------------------------ */
.ed-timeline-slot{grid-area:timeline;min-width:0}
.ed-timeline{display:grid;gap:8px}

.ed-field{
  height:36px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid var(--editor-line);
  border-radius:var(--editor-radius-control);
  background:var(--editor-control);
  color:var(--editor-muted);
  font-size:11px;
}
.ed-field svg{width:16px;height:16px;color:#303236}
.ed-field input,.ed-field select{
  width:44px;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  color:var(--editor-text);
  font:inherit;
  font-size:12px;
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.ed-field select{width:auto;text-align:left;cursor:pointer}
.ed-field:focus-within{border-color:var(--violet)}
.ed-field input:focus,.ed-field select:focus{outline:none}

.timeline-ruler{
  height:24px;
  padding:0 8px 0 100px;
  display:grid;
  grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr auto;
  align-items:center;
  gap:5px;
  color:var(--editor-muted);
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.timeline-ruler i{height:1px;background:rgba(10,10,10,.08)}
.ed-timeline .timeline-tracks{overflow:visible;gap:4px}
.ed-timeline .timeline-track{height:26px;min-height:26px;padding-block:3px}
.ed--empty .ed-timeline-slot,.ed--empty .ed-props-slot{opacity:.45;pointer-events:none}

/* Properties ---------------------------------------------------------------- */
.ed-props-slot{grid-area:props;min-width:0;min-height:0;display:flex}
.ed-props{flex:1;display:flex;flex-direction:column;overflow:hidden}
.ed-tabs{
  margin:10px 10px 0;
  padding:4px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  border-radius:var(--editor-radius-module);
  background:var(--editor-module);
}
.ed-tabs button{
  height:46px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:3px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--editor-muted);
  font-size:11px;
  cursor:pointer;
}
.ed-tabs button svg{width:16px;height:16px}
.ed-tabs button:hover{color:var(--editor-text)}
.ed-tabs button.is-active{background:#0a0a0a;color:#fff}
.ed-props .ed-panel-scroll{padding:4px 16px 16px}
.ed-props-slot{flex-direction:column;gap:var(--editor-gap)}
.ed-props{min-height:0}
.ed-presets{flex-shrink:0;padding:12px 12px 12px;border-radius:20px}
.ed-presets-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px 10px}
.ed-presets-head strong{font-size:14px;font-weight:500;letter-spacing:-.02em}
.ed-presets-head span{color:var(--editor-muted);font-size:11px;text-transform:capitalize}
.ed-presets .side-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ed-presets .side-preset{cursor:pointer}

/* Modes ---------------------------------------------------------------------- */
.ed--design{
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:
    "bar    bar    bar"
    "layers canvas props";
}
.ed-mode{
  padding:4px;
  display:inline-flex;
  gap:4px;
  border-radius:999px;
  background:var(--editor-module);
}
.ed-mode button{
  height:40px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:var(--editor-muted);
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
.ed-mode button svg{box-sizing:border-box;flex:none;width:28px;height:28px;padding:6px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px rgba(20,9,46,.07)}
.ed-mode button.is-active svg{background:rgba(255,255,255,.72)}
.ed-mode button:hover{color:var(--editor-text)}
.ed-mode button.is-active{background:var(--violet);color:#14092e}
.ed-mode button.is-active:hover{color:#14092e}
.ed-mode button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.ed-bar>.ed-file,.ed-bar>.ed-bar-actions{flex:1}
.ed-bar-actions{justify-content:flex-end}

.ed-panel-hint{color:var(--editor-muted);font-size:11px}
.ed-timeline{padding:0 12px 12px}
.ed-timeline>.ed-panel-head{margin:0 -12px 8px;padding-inline:16px}

.ed-btn--block{width:100%}

/* Editor pages sit close to the footer. */
.app-shell.is-editor .site-footer{margin-top:24px}

/* Responsive ---------------------------------------------------------------- */
@media(max-width:1280px){
  .ed{--ed-left:260px;--ed-right:310px}
}

@media(max-width:1100px){
  .ed{
    height:auto;
    min-height:0;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto minmax(440px,58vh) auto auto;
    grid-template-areas:
      "bar      bar"
      "canvas   canvas"
      "timeline timeline"
      "layers   props";
    align-items:start;
  }
  .ed--design{grid-template-rows:auto minmax(440px,58vh) auto;grid-template-areas:"bar bar" "canvas canvas" "layers props"}
  .ed-canvas{align-self:stretch;min-height:440px}
  .ed-layers,.ed-props-slot{max-height:640px;height:100%}
}

@media(max-width:760px){
  .ed{
    padding:10px 12px 12px;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(380px,56vh) auto auto auto;
    grid-template-areas:"bar" "canvas" "timeline" "props" "layers";
  }
  .ed-bar{flex-wrap:wrap}
  .ed-bar>.ed-file,.ed-bar>.ed-bar-actions{flex:1 1 100%}
  .ed-bar-actions>*{flex:1}
  .ed-bar-actions .ed-btn{width:100%}
  .ed--design{grid-template-rows:auto minmax(380px,56vh) auto auto;grid-template-areas:"bar" "canvas" "props" "layers"}
  .ed-mode{order:3;width:100%}
  .ed-mode button{flex:1;min-width:0;justify-content:center;padding:0 8px;gap:6px;font-size:12px}
  .ed-mode button svg{width:26px;height:26px;padding:5px}
  .ed-canvas{min-height:380px}
  .ed-props-slot{max-height:none}
  .ed-layers{max-height:420px}
  .ed-timeline .timeline-ruler{padding-left:84px}
  .timeline-track{grid-template-columns:76px minmax(0,1fr)}
  .side-toggle-grid{grid-template-columns:1fr}
  .ed-export-menu{left:0;right:auto;width:min(260px,calc(100vw - 48px))}
}
.ed--empty .ed-canvas-tools{display:none}

/* Shape keyframes ------------------------------------------------------------ */
.shape-layer{position:absolute;inset:0;transform-origin:50% 50%}
.ed-btn--small{height:30px;padding:0 10px;font-size:11px;gap:5px}
.ed-btn--small svg{width:13px;height:13px}
.ed-timeline-actions{display:flex;align-items:center;gap:6px}
.ed-timeline-actions .ed-panel-hint{min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.ed-help{margin:0;color:var(--editor-muted);font-size:12px;line-height:1.55}
.ed-help strong{color:var(--editor-text);font-weight:500}

.ed-timeline .timeline-ruler{padding:0;height:24px}
.timeline-track--ruler{border-color:transparent;background:transparent}
.timeline-track--ruler>.timeline-track-name{padding-left:12px}
.timeline-scrub{position:relative;height:100%;cursor:ew-resize;touch-action:none;border-radius:6px}
.timeline-scrub:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.timeline-playhead-knob{
  position:absolute;
  top:50%;
  width:10px;
  height:18px;
  transform:translate(-50%,-50%);
  border-radius:4px;
  background:#0a0a0a;
  box-shadow:0 0 0 2px #fff;
  pointer-events:none;
}
.timeline-playhead{
  position:absolute;
  top:-6px;
  bottom:-6px;
  z-index:1;
  width:1px;
  transform:translateX(-50%);
  background:rgba(10,10,10,.5);
  pointer-events:none;
}
.timeline-track--shape{border-color:rgba(185,154,248,.55);background:#fbf9ff}
.timeline-track--shape .timeline-track-name{color:var(--editor-text);font-weight:500}
.timeline-keyframe--shape{
  width:12px;
  height:12px;
  border-color:#0a0a0a;
  background:#fff;
  cursor:grab;
}
.timeline-keyframe--shape.is-selected{background:var(--violet);border-color:#0a0a0a;box-shadow:0 0 0 3px rgba(185,154,248,.35)}

/* Point editor overlay: on top of every guide, only the handles take pointer input. */
.point-editor{position:absolute;inset:0;z-index:30;width:100%;height:100%;overflow:visible;pointer-events:none}
.point-editor-outline{fill:none;stroke:var(--violet);stroke-width:1.5;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.point-editor-arm{stroke:var(--violet);stroke-width:1;vector-effect:non-scaling-stroke}
.point-editor-anchor,.point-editor-handle{pointer-events:none;cursor:move;stroke-width:1.5;vector-effect:non-scaling-stroke}
.point-editor-anchor{fill:#fff;stroke:#0a0a0a}
.point-editor-handle{fill:var(--violet);stroke:#fff}
.point-editor-hit{fill:transparent;stroke:none;pointer-events:all;cursor:move;touch-action:none}
.ed-motion .side-group-body>.fig-toggle-item{width:100%}

/* Grey canvas (Minimal preset) */
.ed-canvas.canvas-wrap--grey{background:#efefef}
.canvas-wrap--grey .canvas-grid{opacity:.4}
/* Minimal preset thumbnail mirrors the grey wireframe it applies. */
.side-preset--minimal .side-preset-preview{background:#efefef}
.side-preset--minimal .side-preset-preview i{background:#888888}
.side-theme-switch{grid-template-columns:repeat(3,1fr)}
/* Dark preset: inverse of Minimal. */
.ed-canvas.canvas-wrap--dark{background:#101010}
.side-preset--dark .side-preset-preview{background:#101010}
.side-preset--dark .side-preset-preview i{background:#777777}
/* Fill + stroke artwork mode (Minimal / Dark presets); fill follows Fill mode. */
.svg-source.source-filled svg :is(path,rect,circle,ellipse,polygon,polyline,text){
  fill:var(--source-fill-paint,var(--source-fill))!important;
  stroke:var(--source-stroke)!important;
  stroke-width:var(--source-stroke-width)!important;
  vector-effect:non-scaling-stroke;
  opacity:var(--source-opacity)!important;
}
.svg-source.source-filled svg line{
  stroke:var(--source-stroke)!important;
  stroke-width:var(--source-stroke-width)!important;
  vector-effect:non-scaling-stroke;
  opacity:var(--source-opacity)!important;
}
.side-preset--minimal .side-preset-preview i{background:#fff;box-shadow:0 0 0 1px #888}
.side-preset--dark .side-preset-preview i{background:#000;box-shadow:0 0 0 1px #777}

/* Inspect feature cards -------------------------------------------------------- */
.feature-label{margin:16px 2px 8px;font-weight:500;color:var(--editor-muted)}
.feature-label:first-child{margin-top:12px}
.feature-card{
  padding:4px 14px 10px;
  border:1px solid var(--editor-line);
  border-radius:var(--editor-radius-module);
  background:var(--editor-control);
}
.feature-card-head{
  width:100%;
  min-height:52px;
  padding:0;
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  border:0;
  background:none;
  color:var(--editor-text);
  text-align:left;
  cursor:pointer;
}
.feature-card-head svg{color:var(--editor-muted)}
.feature-card-head strong{font-size:14px;font-weight:500;letter-spacing:-.01em}
.feature-card-head:focus-visible{outline:2px solid var(--violet);outline-offset:4px;border-radius:8px}
.feature-card-head .fig-toggle-switch{width:40px;height:24px;flex-basis:40px}
.feature-card-head .fig-toggle-thumb{top:4px;left:4px;width:16px;height:16px}
.fig-toggle-switch.is-on{background:var(--violet)}
.fig-toggle-switch.is-on .fig-toggle-thumb{transform:translateX(16px);background:#fff}
.feature-card-body{display:grid;gap:4px;padding-top:4px;border-top:1px solid var(--editor-line)}
.feature-card.is-off .feature-card-body{opacity:1}

.value-row{display:flex;align-items:center;gap:8px}
.value-row>.fig-slider-row{flex:1;min-width:0;margin:6px 0}
.value-row-color{position:relative;cursor:pointer}
.value-row-color input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* Fill mode */
.fill-patterns{position:absolute;width:0;height:0;overflow:hidden}
.feature-card--plain{padding:10px 14px 10px}
.feature-card--plain .feature-card-body{margin-top:8px}
.fill-mode-switch button{text-transform:uppercase;letter-spacing:.06em;font-size:11px}
.feature-card-body.is-muted{opacity:1}

/* Colours, backgrounds and separators follow the 6cae757 look: white sections
   split by hairlines, grey tracks with a lavender fill. Shapes stay as above. */
.fig-slider-track{border-color:transparent;background:#eceeef}
.fig-slider-track:hover{border-color:transparent}
.fig-slider-track:focus-within{border-color:var(--violet)}
.fig-slider-fill,.fig-slider-track:hover .fig-slider-fill{background:rgba(185,154,248,.28)}
.fig-slider-track:hover .fig-slider-fill{background:rgba(185,154,248,.36)}
.fig-slider-fill::after{background:var(--violet)}
.fig-slider-tick{background:#c4c6c8}
.fig-slider-label{color:#5f615d;font-size:12px;font-weight:500}
.fig-slider-value{font-size:12px}

.feature-card,.feature-card--plain{
  padding:16px 2px;
  border:0;
  border-radius:0;
  background:#fff;
}
.feature-card+.feature-card,.feature-card+.side-group{border-top:1px solid #e2e4e6}
.feature-card-head{min-height:0;margin-bottom:10px}
.feature-card-head strong{font-size:13px}
.feature-card-head--static{display:grid;cursor:default}
.feature-card-body{padding-top:0;border-top:0}
.feature-card--plain .feature-card-body{margin-top:4px}
.value-row>.fig-slider-row{margin:4px 0}

/* Colour beside a slider: a circle like every other swatch, in a fixed slot. */
.value-row .value-row-color{
  width:44px;height:44px;flex:0 0 44px;
  display:grid;place-items:center;
  border:0;border-radius:50%;background:none;overflow:visible;
}
.value-row-color>span{width:30px;height:30px;border:1px solid rgba(10,10,10,.12);border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--editor-line)}
.value-row-color:focus-within{outline:none}
.value-row-color:focus-within>span{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--violet)}
.value-row-color--empty{cursor:default}
/* Slider fill: neutral grey like the reference; only the handle line keeps the violet accent. */
.fig-slider-fill{background:#eceeef}
.fig-slider-track:hover .fig-slider-fill{background:#e6e8e9}
.fig-slider-label{color:var(--editor-muted)}

/* Typed value: sits above the drag surface, reads as plain text until focused. */
input.fig-slider-value{
  z-index:4;
  width:68px;
  padding:4px 6px;
  border:0;
  border-radius:8px;
  background:transparent;
  font:inherit;
  font-size:12px;
  font-weight:500;
  text-align:right;
  pointer-events:auto;
  cursor:text;
}
input.fig-slider-value:hover{background:rgba(255,255,255,.6)}
input.fig-slider-value:focus{outline:none;background:#fff;box-shadow:0 0 0 1px var(--violet)}
.fig-slider-value{right:8px}
.fig-slider-track{background:#f7f8f9}

/* Canvas theme switch sits where the stats used to, at the foot of Paths. */
.ed-theme{padding:12px 12px 14px;border-top:1px solid var(--editor-line);background:var(--editor-control)}
.ed-theme-label{display:block;margin:0 4px 8px;color:var(--editor-muted);font-size:11px}
.ed-theme .side-theme-switch{grid-template-columns:repeat(3,1fr);min-height:0;background:#fff}
.ed-theme .side-theme-switch button{min-height:32px;text-transform:capitalize}
.ed-canvas-caption{gap:16px}
.ed-canvas-caption>span:last-child{text-align:right;letter-spacing:.04em}
/* Original mode keeps the artwork's own paint but still honours Opacity.
   The compare view's untouched copy (source-reference) is left alone. */
.svg-source.source-original svg{opacity:var(--source-opacity)}
/* Outline switch for Original / Solid: a stroke over the artwork's own fill. */
.svg-source.source-outlined:is(.source-original,.source-solid) svg :is(path,rect,circle,ellipse,polygon,polyline,line,text){
  stroke:var(--source-stroke)!important;
  stroke-width:var(--source-stroke-width)!important;
  vector-effect:non-scaling-stroke;
}
.ed-props .side-group-body>.fig-toggle-item{width:100%;margin-top:8px}

/* Timeline as layers (After Effects style) ----------------------------------- */
.tl{
  --tl-label:200px;
  --p:0;
  display:grid;
  gap:0;
  margin:0 -12px -12px;
}
.tl-row{
  min-height:30px;
  display:grid;
  grid-template-columns:var(--tl-label) minmax(0,1fr);
  align-items:center;
  border-bottom:1px solid #eef0f1;
}
.tl-row--ruler{min-height:34px;border-bottom:1px solid var(--editor-line);background:var(--editor-control)}
.tl-name{
  min-width:0;
  height:100%;
  padding:0 10px 0 14px;
  display:flex;
  align-items:center;
  gap:8px;
  border:0;
  border-right:1px solid #eef0f1;
  background:none;
  color:var(--editor-text);
  font:inherit;
  font-size:12px;
  text-align:left;
}
.tl-name small{margin-left:auto;color:var(--editor-muted);font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-name>span:not(.tl-tag):not(.tl-twirl){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-time{font-size:13px;font-weight:500;font-variant-numeric:tabular-nums}
.tl-time small{margin-left:2px}
.tl-lane{position:relative;height:100%;min-width:0;margin:0 16px}
.tl-row--ruler .tl-lane{display:flex;align-items:center}
.tl-row--ruler .timeline-ruler{flex:1;padding:0}

.tl-body{position:relative}
.tl-playhead{
  position:absolute;
  top:0;
  bottom:0;
  z-index:5;
  left:calc(var(--tl-label) + 16px + (100% - var(--tl-label) - 32px) * var(--p));
  width:1px;
  background:#0a0a0a;
  pointer-events:none;
}

.tl-layer{background:#fff}
.tl-layer:hover{background:#fafbfb}
.tl-layer .tl-lane .timeline-keyframe{top:50%}
.tl-tag{width:10px;height:10px;flex:0 0 10px;border-radius:3px;background:var(--violet)}
.tl-tag--path{background:#0a0a0a}
.tl-tag--anchors{background:#63d9db}
.tl-tag--handles{background:#a9e1f7}
.tl-tag--construction{background:#8fe46c}
.tl-tag--measurements{background:#f2b36b}
.tl-tag--grid{background:#c7c9cc}

.tl-layer--shape{background:#fbf9ff}
.tl-layer--shape .tl-name{cursor:pointer}
.tl-layer--shape .tl-name strong{font-weight:500}
.tl-twirl{width:10px;color:var(--editor-muted);font-size:10px;transition:transform .15s var(--ease)}
.tl-layer--shape.is-open .tl-twirl{transform:rotate(90deg)}
.tl-layer .tl-name:focus-visible,.tl-eye:focus-visible{outline:2px solid var(--violet);outline-offset:-2px}

.tl-eye{
  width:22px;height:22px;flex:0 0 22px;padding:0;
  display:grid;place-items:center;
  border:0;border-radius:6px;background:none;color:var(--editor-text);cursor:pointer;
}
.tl-eye:hover{background:var(--editor-module)}
.tl-layer.is-disabled .tl-eye{color:#c1c3c5}
.tl-layer.is-disabled .tl-name>span:not(.tl-tag),.tl-layer.is-disabled .tl-lane{opacity:.4}

.tl-bar{height:8px!important;border-radius:4px!important;background:rgba(185,154,248,.35)!important}
.tl-bar--path{background:rgba(10,10,10,.18)!important}
.tl-bar--anchors{background:rgba(99,217,219,.45)!important}
.tl-bar--handles{background:rgba(169,225,247,.7)!important}
.tl-bar--construction{background:rgba(143,228,108,.5)!important}
.tl-bar--measurements{background:rgba(242,179,107,.5)!important}
.tl-bar--grid{background:rgba(160,163,166,.35)!important}

/* Animated property rows under the Shape layer. */
.tl-prop{min-height:26px;background:#fdfcff}
.tl-prop .tl-name{padding-left:34px;gap:6px;color:#4f5255;font-size:11px}
.tl-prop .tl-name svg{color:var(--violet);flex:0 0 auto}
.tl-prop .tl-name output{margin-left:auto;color:var(--editor-text);font-size:11px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-prop-span{position:absolute;top:50%;height:2px;transform:translateY(-50%);background:rgba(185,154,248,.45)}
.tl-prop-key{
  position:absolute;top:50%;width:8px;height:8px;padding:0;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid #0a0a0a;border-radius:1px;background:#fff;cursor:pointer;
}
.tl-prop-key.is-selected{background:var(--violet)}
.tl-prop--empty .tl-name span{color:var(--editor-muted);font-style:italic}
.tl-hint{position:absolute;top:50%;transform:translateY(-50%);color:var(--editor-muted);font-size:11px;white-space:nowrap}

@media(max-width:760px){.tl{--tl-label:140px}.tl-name small,.tl-prop .tl-name output{display:none}}

/* Keyboard shortcuts popover */
.ed-shortcuts{position:relative}
.ed-btn--icon{width:36px;padding:0;font-size:14px}
.ed-shortcuts-menu{
  position:absolute;z-index:45;top:calc(100% + 8px);right:0;
  width:300px;max-height:min(70vh,520px);overflow:auto;padding:14px 16px;
  border:1px solid var(--editor-line);border-radius:18px;background:#fff;
  box-shadow:0 18px 40px rgba(20,24,28,.12);
}
.ed-shortcuts-menu>strong{display:block;margin-bottom:6px;font-size:13px;font-weight:500}
.ed-shortcuts-menu section{padding:8px 0;border-top:1px solid #eef0f1}
.ed-shortcuts-menu section>span{display:block;margin-bottom:6px;color:var(--editor-muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.ed-shortcuts-menu dl{margin:0;display:grid;gap:5px}
.ed-shortcuts-menu dl>div{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ed-shortcuts-menu dt{display:flex;gap:4px}
.ed-shortcuts-menu dd{margin:0;color:#4f5255;font-size:12px;text-align:right}
.ed-shortcuts-menu kbd{
  min-width:22px;height:22px;padding:0 6px;display:inline-grid;place-items:center;
  border:1px solid var(--editor-line);border-bottom-width:2px;border-radius:6px;
  background:var(--editor-control);color:var(--editor-text);font:inherit;font-size:11px;
}

/* Timeline header: play, interpolation assistants, graph toggle */
.ed-timeline-head{gap:10px;padding-block:8px}
.ed-timeline-head .tl-interp{margin-left:auto}
.ed-timeline-title{display:flex;align-items:center;gap:10px}
.ed-btn--play{width:34px;height:34px;padding:0}
.ed-btn--play svg{width:14px;height:14px}
.tl-interp{display:flex;align-items:center;gap:2px;padding:3px;border-radius:12px;background:var(--editor-module)}
.tl-interp button{
  height:28px;padding:0 8px;display:inline-flex;align-items:center;gap:5px;
  border:0;border-radius:9px;background:none;color:#4f5255;font-size:11px;white-space:nowrap;cursor:pointer;
}
.tl-interp button:hover:not(:disabled){background:#fff;color:var(--editor-text)}
.tl-interp button.is-active{background:#0a0a0a;color:#fff}
.tl-interp button:disabled{opacity:.4;cursor:default}
.tl-interp button:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
.tl-interp-sep{width:1px;height:18px;margin:0 4px;background:var(--editor-line-strong)}

/* Keyframe shapes follow After Effects: diamond linear/auto, circle easy ease,
   half-rounded ease in/out, square hold. */
.timeline-keyframe--shape.key--easy-ease,.tl-prop-key.key--easy-ease{border-radius:50%}
.timeline-keyframe--shape.key--ease-in,.tl-prop-key.key--ease-in{border-radius:50% 1px 1px 50%}
.timeline-keyframe--shape.key--ease-out,.tl-prop-key.key--ease-out{border-radius:1px 50% 50% 1px}
.timeline-keyframe--shape.key--hold,.tl-prop-key.key--hold{transform:translate(-50%,-50%);border-radius:2px}
.timeline-keyframe--shape.key--custom,.tl-prop-key.key--custom{border-radius:40% 2px}

/* Graph editor row */
.tl-graph{min-height:150px;align-items:stretch;background:#fcfcfd}
.tl-graph-name{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.tl-graph-name small{margin-left:0}
.tl-graph-lane{margin-block:14px}
.tl-graph-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tl-graph-axis{stroke:#eef0f1;stroke-width:1;vector-effect:non-scaling-stroke}
.tl-graph-curve{fill:none;stroke:#b8babd;stroke-width:2;vector-effect:non-scaling-stroke}
.tl-graph-curve.is-hold{stroke-dasharray:4 3}
.is-active>.tl-graph-curve{stroke:var(--violet)}
.tl-graph-arm{stroke:#d4d6d8;stroke-width:1;vector-effect:non-scaling-stroke}
.is-active>.tl-graph-arm{stroke:rgba(185,154,248,.7)}
.tl-graph-handle{
  position:absolute;z-index:6;width:12px;height:12px;padding:0;
  transform:translate(-50%,-50%);
  border:2px solid #fff;border-radius:50%;background:#b8babd;
  box-shadow:0 1px 3px rgba(20,24,28,.25);cursor:grab;touch-action:none;
}
.tl-graph-handle.is-active{background:var(--violet)}
.tl-graph-handle:active{cursor:grabbing}
.tl-graph-handle:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.tl-kbd{margin-left:2px;padding:0 4px;border:1px solid var(--editor-line);border-radius:4px;color:var(--editor-muted);font:inherit;font-size:9px;line-height:14px}
.tl-graph-name select{max-width:100%;height:28px;padding:0 6px;border:1px solid var(--editor-line);border-radius:8px;background:#fff;font:inherit;font-size:12px}
.tl-graph-scale{font-variant-numeric:tabular-nums}
.tl-graph-curve{stroke:var(--violet)}
.tl-graph-curve.is-secondary{stroke:#63d9db}
.tl-graph-key{position:absolute;z-index:5;width:8px;height:8px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid #0a0a0a;background:#fff;pointer-events:none}
.tl-graph-key.is-active{background:var(--violet)}

/* Timeline: bounded height, its own scroll, ruler pinned on top. */
.ed-timeline{display:flex;flex-direction:column;max-height:min(46vh,440px)}
.ed-timeline>.ed-panel-head{flex:0 0 auto}
.tl{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;border-radius:0 0 var(--editor-radius-panel) var(--editor-radius-panel)}
.tl-row--ruler{position:sticky;top:0;z-index:7}

/* Twirl: a clear chevron that turns when the layer is open. */
.tl-twirl{
  width:22px;height:22px;flex:0 0 22px;padding:0;
  display:grid;place-items:center;
  border:0;border-radius:6px;background:none;color:var(--editor-text);cursor:pointer;
  transition:transform .18s var(--ease),background .18s var(--ease);
}
button.tl-twirl:hover{background:var(--editor-module)}
.tl-layer.is-open .tl-twirl,.tl-layer--shape.is-open .tl-twirl{transform:rotate(90deg)}
.tl-layer--shape .tl-twirl{width:22px;font-size:inherit;color:var(--editor-text)}
.tl-layer-name{padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.tl-layer-name:hover{text-decoration:underline;text-underline-offset:3px}
.tl-info .tl-name{padding-left:58px}
.tl-info .tl-name output{margin-left:auto;color:var(--editor-text);font-size:11px;font-weight:500;text-transform:capitalize}
.tl-info-span{position:absolute;top:50%;height:4px;transform:translateY(-50%);border-radius:2px;opacity:.8}

/* Inline value fields on property rows (auto-key). */
.tl-fields{margin-left:auto;display:flex;gap:4px}
.tl-field{display:inline-flex;align-items:center;gap:2px;height:22px;padding:0 6px;border:1px solid transparent;border-radius:6px;background:var(--editor-control)}
.tl-field:hover{border-color:var(--editor-line)}
.tl-field:focus-within{border-color:var(--violet);background:#fff}
.tl-field input{width:42px;padding:0;border:0;background:none;color:var(--editor-text);font:inherit;font-size:11px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.tl-field input::-webkit-inner-spin-button,.tl-field input::-webkit-outer-spin-button{appearance:none;margin:0}
.tl-field input:focus{outline:none}
.tl-field small{color:var(--editor-muted);font-size:10px}

/* Timeline header: transport + timing, one interpolation menu, Graph. */
.ed-timeline-head{flex-wrap:wrap;row-gap:8px}
.tl-transport{display:flex;align-items:center;gap:4px;padding:3px;border-radius:12px;background:var(--editor-module)}
.tl-icon-btn{
  width:28px;height:28px;padding:0;display:grid;place-items:center;
  border:0;border-radius:9px;background:none;color:#4f5255;cursor:pointer;
}
.tl-icon-btn:hover{background:#fff;color:var(--editor-text)}
.tl-icon-btn.is-active{background:#0a0a0a;color:#fff}
.tl-icon-btn:focus-visible{outline:2px solid var(--violet);outline-offset:1px}
.tl-mini{
  height:28px;padding:0 8px;display:inline-flex;align-items:center;gap:5px;
  border-radius:9px;background:#fff;color:#4f5255;font-size:11px;
}
.tl-mini input{width:46px;padding:0;border:0;background:none;color:var(--editor-text);font:inherit;font-size:12px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
.tl-mini select{max-width:100px;padding:0;border:0;background:none;color:var(--editor-text);font:inherit;font-size:12px;cursor:pointer}
.tl-mini :is(input,select):focus{outline:none}
.tl-mini:focus-within{box-shadow:0 0 0 1px var(--violet)}
.tl-mini small{color:var(--editor-muted);font-size:10px}

.tl-interp-menu{position:relative}
.tl-interp-menu summary{
  height:28px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;list-style:none;
  border-radius:9px;color:var(--editor-text);font-size:11px;font-weight:500;white-space:nowrap;cursor:pointer;
}
.tl-interp-menu summary::-webkit-details-marker{display:none}
.tl-interp-menu summary:hover{background:#fff}
.tl-interp-menu summary.is-disabled{color:var(--editor-muted)}
.tl-interp-menu summary svg{transform:rotate(90deg);transition:transform .15s var(--ease)}
.tl-interp-menu[open] summary svg{transform:rotate(-90deg)}
.tl-interp-list{
  position:absolute;z-index:45;top:calc(100% + 6px);right:0;width:250px;padding:6px;
  display:grid;gap:2px;border:1px solid var(--editor-line);border-radius:14px;background:#fff;
  box-shadow:0 18px 40px rgba(20,24,28,.12);
}
.tl-interp-list button{
  height:auto;padding:8px 10px;display:grid;gap:2px;justify-items:start;
  border:0;border-radius:9px;background:none;text-align:start;cursor:pointer;
}
.tl-interp-list button strong{font-size:12px;font-weight:500;color:var(--editor-text)}
.tl-interp-list button small{font-size:10px;color:var(--editor-muted)}
.tl-interp-list button:hover:not(:disabled){background:var(--editor-control)}
.tl-interp-list button.is-active{background:#f6f2ff}
.tl-interp-list button:disabled{opacity:.45;cursor:default}
html[dir="rtl"] .tl-interp-list{right:auto;left:0}

/* Point editing (Morph): an unmistakable mode. */
.ed-edit-banner{
  position:absolute;z-index:25;top:12px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;
  border-radius:999px;background:#0a0a0a;color:#fff;font-size:12px;white-space:nowrap;
  box-shadow:0 10px 26px rgba(20,24,28,.18);
}
.ed-edit-banner svg{color:var(--violet)}
.ed-edit-banner button{height:26px;padding:0 12px;border:0;border-radius:999px;background:#fff;color:#0a0a0a;font:inherit;font-size:12px;font-weight:500;cursor:pointer}
.ed-canvas.is-editing-points .ed-canvas-caption{visibility:hidden}
/* The regular anchors and handles step aside so the editable ones are the only ones. */
.ed-canvas.is-editing-points svg.analysis-overlay [data-motion-track="anchors"],
.ed-canvas.is-editing-points svg.analysis-overlay [data-motion-track="handles"]{display:none}
.point-editor-outline{stroke:var(--violet);stroke-width:1;stroke-dasharray:none}
.point-editor-arm{stroke:var(--violet);stroke-width:.8}
.point-editor-anchor{fill:var(--violet);stroke:#fff;stroke-width:1.25}
.point-editor-handle{fill:#fff;stroke:var(--violet);stroke-width:1.25}
.point-editor-hit:hover + :is(.point-editor-anchor,.point-editor-handle){stroke:var(--violet);stroke-width:2}

/* Motion presets: one scrolling row. */
.motion-preset-row{display:flex;gap:6px;overflow-x:auto;scrollbar-width:thin;padding-bottom:4px;scroll-snap-type:x proximity}
.motion-preset{
  flex:0 0 64px;min-height:68px;padding:6px 4px;
  display:grid;justify-items:center;align-content:center;gap:4px;
  border:1px solid var(--editor-line);border-radius:12px;background:#fff;color:#6f706c;font-size:10px;cursor:pointer;
  scroll-snap-align:start;
}
.motion-preset:hover{border-color:#cfd2d4}
.motion-preset.is-active{border-color:#0a0a0a;background:#0a0a0a;color:#fff}
.motion-preset:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.motion-preset svg{width:34px;height:34px;overflow:visible}
.mp-shape{fill:rgba(185,154,248,.35);stroke:currentColor;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:0}
.mp-dot{fill:currentColor;transform-box:fill-box;transform-origin:center}
.motion-preset.is-active .mp-shape{fill:rgba(185,154,248,.55)}
/* Hover previews the preset's motion. */
.motion-preset:hover .mp-shape,.motion-preset:focus-visible .mp-shape{animation:mp-draw 1.4s var(--ease) infinite}
.motion-preset--static:hover .mp-shape{animation:none}
.motion-preset--pop:hover svg{animation:mp-pop 1.2s var(--ease) infinite}
.motion-preset--spin:hover svg{animation:mp-spin 1.4s var(--ease) infinite}
.motion-preset--rise:hover svg{animation:mp-rise 1.2s var(--ease) infinite}
.motion-preset--pulse:hover svg{animation:mp-pulse 1s ease-in-out infinite}
:is(.motion-preset--pop,.motion-preset--spin,.motion-preset--rise,.motion-preset--pulse):hover .mp-shape{animation:none}
.motion-preset:hover .mp-dot{animation:mp-dot 1.4s var(--ease) infinite}
.motion-preset--static:hover .mp-dot{animation:none}
@keyframes mp-draw{0%{stroke-dashoffset:1;fill-opacity:0}60%{stroke-dashoffset:0;fill-opacity:0}100%{stroke-dashoffset:0;fill-opacity:1}}
@keyframes mp-dot{0%,45%{transform:scale(0)}65%{transform:scale(1.25)}80%,100%{transform:scale(1)}}
@keyframes mp-pop{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.1);opacity:1}80%,100%{transform:scale(1)}}
@keyframes mp-spin{0%{transform:rotate(-120deg) scale(.5);opacity:0}80%,100%{transform:none;opacity:1}}
@keyframes mp-rise{0%{transform:translateY(8px);opacity:0}70%,100%{transform:none;opacity:1}}
@keyframes mp-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* Timeline: remove a reveal layer, add one from "+ Layer". */
.tl-remove{color:var(--editor-muted)}
.tl-remove:hover{color:#d14b4b;background:#fff1f1}
.tl-add{min-height:34px;background:#fff}
.tl-add-menu{position:relative}
.tl-add-menu summary{height:24px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;list-style:none;border:1px dashed var(--editor-line-strong);border-radius:999px;color:#4f5255;font-size:11px;cursor:pointer}
.tl-add-menu summary::-webkit-details-marker{display:none}
.tl-add-menu summary:hover{border-style:solid;color:var(--editor-text)}
.tl-add-list{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:170px;padding:5px;display:grid;gap:2px;border:1px solid var(--editor-line);border-radius:12px;background:#fff;box-shadow:0 14px 32px rgba(20,24,28,.12)}
.tl-add-list button{height:30px;padding:0 9px;display:flex;align-items:center;gap:8px;border:0;border-radius:8px;background:none;color:var(--editor-text);font:inherit;font-size:12px;text-align:start;cursor:pointer}
.tl-add-list button:hover{background:var(--editor-control)}

/* Templates */
.ed-canvas.has-template .canvas-grid{display:none}
.ed-canvas.has-template .ed-canvas-caption{color:rgba(29,42,16,.6)}
.tpl-reveal{position:absolute;inset:0;z-index:15;pointer-events:none;visibility:hidden;clip-path:inset(0 50% 0 50%)}
.tpl-reveal .svg-artboard{transition:none}
.template-card{
  flex:0 0 132px;padding:6px;display:grid;gap:6px;
  border:1px solid var(--editor-line);border-radius:12px;background:#fff;color:#6f706c;font-size:10px;text-align:start;cursor:pointer;
}
.template-card:hover{border-color:#cfd2d4}
.template-card.is-active{border-color:#0a0a0a;box-shadow:0 0 0 1px #0a0a0a}
.template-card:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.template-card>span:last-child{padding:0 2px;color:var(--editor-text);font-size:11px;font-weight:500}
.template-thumb{position:relative;height:64px;overflow:hidden;display:grid;place-items:center;border-radius:8px}
.template-thumb svg{width:84%;height:auto}
.template-wipe{position:absolute;inset:0;clip-path:inset(0 50%)}
.template-card:hover .template-wipe{animation:tpl-thumb 1.8s var(--ease) infinite}
@keyframes tpl-thumb{0%,30%{clip-path:inset(0 50%)}45%{clip-path:inset(0 38%)}70%{clip-path:inset(0 10%)}85%,100%{clip-path:inset(0 0)}}
.tpl-scanline{position:absolute;top:0;bottom:0;z-index:16;width:2px;margin-left:-1px;pointer-events:none;visibility:hidden;box-shadow:0 0 14px currentColor}
.template-wipe--bookend{clip-path:inset(0 0 100% 0)}
.template-card:hover .template-wipe--bookend{animation-name:tpl-thumb-bookend}
@keyframes tpl-thumb-bookend{0%,15%{clip-path:inset(0)}20%,75%{clip-path:inset(0 0 100% 0)}80%,100%{clip-path:inset(0)}}
.template-wipe--iris{clip-path:circle(0 at 50% 50%)}
.template-card:hover .template-wipe--iris{animation-name:tpl-thumb-iris}
@keyframes tpl-thumb-iris{0%,30%{clip-path:circle(0 at 50% 50%)}85%,100%{clip-path:circle(75% at 50% 50%)}}
.template-wipe--scan{clip-path:inset(0 100% 0 0)}
.template-card:hover .template-wipe--scan{animation-name:tpl-thumb-scan}
@keyframes tpl-thumb-scan{0%,30%{clip-path:inset(0 100% 0 0)}85%,100%{clip-path:inset(0 0 0 0)}}
.template-wipe--none{display:none}

/* Templates tab -------------------------------------------------------------- */
.tpl-panel{flex:1 1 auto;padding:12px;display:flex;flex-direction:column;gap:12px;overflow:auto}
.tpl-panel .ed-presets-head{padding:0 2px}
.tpl-player{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;align-items:center;gap:10px;padding:8px;border:1px solid var(--editor-line);border-radius:12px;background:var(--editor-control)}
.tpl-player.is-idle{opacity:1}
.tpl-play,.tpl-replay{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer}
.tpl-play{background:#0a0a0a;color:#fff}
.tpl-replay{background:transparent;color:var(--editor-text)}
.tpl-replay:hover{background:#fff}
.tpl-play:disabled,.tpl-replay:disabled{cursor:default}
.tpl-progress{position:relative;height:6px;border-radius:999px;background:#e3e5e7;cursor:pointer;touch-action:none}
.tpl-progress::before{content:"";position:absolute;inset:-8px 0}
.tpl-progress i{position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--p,0) * 100%);border-radius:inherit;background:var(--violet)}
.tpl-time{min-width:58px;color:var(--editor-muted);font-size:11px;font-variant-numeric:tabular-nums;text-align:end}
.tpl-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tpl-gallery .template-card{flex:none;padding:8px;gap:4px}
.tpl-gallery .template-thumb{height:86px}
.tpl-name{padding:2px 2px 0;color:var(--editor-text);font-size:12px;font-weight:600}
.tpl-gallery .template-card>span.tpl-hint{padding:0 2px;color:var(--editor-muted);font-size:10.5px;font-weight:400;line-height:1.35}
.tpl-dur{position:absolute;inset-block-end:6px;inset-inline-end:6px;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.85);color:#0a0a0a;font-size:10px;font-style:normal;font-weight:500}
.tpl-note{margin:0;padding:0 2px;color:var(--editor-muted);font-size:11px}
/* Camera close-ups zoom the layer several times; keep the artwork vector-sharp. */
.has-template .canvas-artwork .svg-artboard{will-change:auto}

/* Brand preset + palette ------------------------------------------------------ */
.ed-presets .side-presets.side-presets--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.side-preset-preview--brand{background:#f7f8f9;gap:0;overflow:hidden;padding:0}
.side-preset-preview--brand i{flex:1;width:auto;height:100%;transform:none;border-radius:0}
.palette{margin-top:10px;padding-top:10px;border-top:1px solid var(--editor-line);display:grid;gap:8px}
.palette-head{display:flex;align-items:center;justify-content:space-between;color:var(--editor-muted);font-size:11px}
.palette-extract{border:1px solid var(--editor-line);border-radius:999px;background:#fff;padding:3px 10px;font-size:11px;color:var(--editor-text);cursor:pointer}
.palette-extract:hover{border-color:#cfd2d4}
.palette-row{display:flex;flex-wrap:wrap;gap:10px}
.palette-swatch{position:relative;display:grid;justify-items:center;gap:3px;width:40px}
.palette-swatch label{width:34px;height:34px;border-radius:50%;border:1px solid rgba(10,10,10,.14);box-shadow:inset 0 0 0 2px #fff;cursor:pointer;overflow:hidden}
.palette-swatch input{opacity:0;width:100%;height:100%;cursor:pointer}
.palette-swatch small{max-width:44px;overflow:hidden;color:var(--editor-muted);font-size:9.5px;text-overflow:ellipsis;white-space:nowrap}
.palette-remove{position:absolute;top:-4px;inset-inline-end:-2px;width:16px;height:16px;display:none;place-items:center;border:1px solid var(--editor-line);border-radius:50%;background:#fff;color:var(--editor-text);font-size:11px;line-height:1;cursor:pointer;padding:0}
.palette-swatch:hover .palette-remove,.palette-swatch:focus-within .palette-remove{display:grid}
.palette-add{width:34px;height:34px;border:1px dashed #c7cacc;border-radius:50%;background:transparent;color:var(--editor-muted);font-size:16px;cursor:pointer}
.palette-add:hover{border-color:#0a0a0a;color:#0a0a0a}
/* Marks on the artwork's edge (anchors, handles) stay whole; the canvas panel clips. */
.ed-canvas .canvas-artwork,.ed-canvas .canvas-artwork svg{overflow:visible}
.tpl-kind{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--editor-module)}
.tpl-kind button{display:grid;grid-template-columns:24px max-content;align-items:center;justify-content:center;gap:8px;min-width:0;height:36px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:var(--editor-muted);font-size:12px;font-weight:500;line-height:1;cursor:pointer}
.tpl-kind button span{white-space:nowrap;line-height:1}
.tpl-kind button.is-active{background:#0a0a0a;color:#fff}
.tpl-kind svg{box-sizing:border-box;display:block;width:24px;height:24px;padding:5px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1px rgba(20,9,46,.07)}
.tpl-kind button.is-active svg{background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.tpl-kind button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.design-thumb svg{width:78%}
.design-thumb .dt-guides{stroke-dasharray:2 2}
.tpl-replay.is-active{background:#0a0a0a;color:#fff}
.tpl-player-slot{display:flex;justify-content:center}
.tpl-player-slot .tpl-player{width:min(100%,560px);border-radius:999px;background:#fff;padding:6px 8px}
/* The bar sits above the panels so the Export menu is never covered. */
.ed-bar{position:relative;z-index:30}
.ed-presets .side-presets.design-colors{grid-template-columns:repeat(10,minmax(0,1fr))}
.ed-presets .side-presets.design-colors>:nth-child(-n+2){grid-column:span 5}
.ed-presets .side-presets.design-colors>:nth-child(n+3){grid-column:span 2}
/* Export: clear hover / open states, and a confirmation after each action. */
.ed-export-toggle[aria-expanded="true"]{background:#2a2b2c;box-shadow:0 0 0 3px rgba(185,154,248,.35)}
.ed-export-menu button{cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease)}
.ed-export-menu button:hover{border-color:#0a0a0a;background:var(--editor-control)}
.ed-export-menu button.is-primary:hover{background:#2a2b2c}
.ed-export-menu button:active{transform:scale(.98)}
.ed-export-menu button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.ed-export-toast{position:absolute;z-index:41;top:calc(100% + 8px);right:0;width:max-content;max-width:300px;padding:9px 14px;border-radius:12px;background:#0a0a0a;color:#fff;font-size:12px;box-shadow:0 12px 30px rgba(20,24,28,.18);animation:ed-toast .2s var(--ease)}
@keyframes ed-toast{from{opacity:0;transform:translateY(-4px)}}
/* Template galleries: three per row, title only (the description is the tooltip). */
.tpl-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.tpl-gallery .template-card{padding:5px;gap:4px}
.tpl-gallery .template-thumb{height:64px}
.tpl-gallery .tpl-name{padding:0 2px 2px;font-size:11px;font-weight:500;line-height:1.25}
.tpl-gallery .tpl-dur{inset-block-end:4px;inset-inline-end:4px;padding:0 5px;font-size:9px}
/* Template layer in the left panel, with its parts' colour and size. */
.tpl-layer{margin:8px 8px 4px;border:1px solid var(--editor-line);border-radius:12px;background:#fff;overflow:hidden}
.tpl-layer-head{width:100%;min-height:40px;padding:0 10px;display:grid;grid-template-columns:16px minmax(0,1fr) 14px;align-items:center;gap:8px;border:0;background:transparent;color:var(--editor-text);font-size:12px;font-weight:500;text-align:start;cursor:pointer}
.tpl-layer-head:hover{background:var(--editor-control)}
.tpl-layer-head svg{width:14px;height:14px}
.tpl-layer-head svg:last-child{transition:transform .2s var(--ease);color:var(--editor-muted)}
.tpl-layer-head.is-open svg:last-child{transform:rotate(90deg)}
.tpl-elements{padding:8px;display:grid;gap:6px;border-top:1px solid var(--editor-line)}
/* Template parts: compact slider (name + value, track with a line thumb) and colour chip. */
.tpl-row{display:flex;align-items:center;gap:8px}
.tpl-slider{flex:1;min-width:0;display:grid;gap:8px;padding:9px 12px 11px;border-radius:12px;background:#f4f4f6;cursor:pointer}
.tpl-slider-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tpl-slider-name{color:#6f706c;font-size:12px}
.tpl-slider-value{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.tpl-slider-value b{color:#0a0a0a;font-size:12.5px;font-weight:600}
.tpl-slider-value i{color:var(--editor-muted);font-size:11px;font-style:normal}
.tpl-slider input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:14px;margin:0;background:transparent;cursor:pointer;
}
.tpl-slider input[type=range]::-webkit-slider-runnable-track{
  height:4px;border-radius:999px;
  background:linear-gradient(to right,var(--violet) 0 calc(var(--p) * 100%),#e2e3e5 calc(var(--p) * 100%) 100%);
}
.tpl-slider input[type=range]::-moz-range-track{height:4px;border-radius:999px;background:#e2e3e5}
.tpl-slider input[type=range]::-moz-range-progress{height:4px;border-radius:999px;background:var(--violet)}
.tpl-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:4px;height:14px;margin-top:-5px;border:0;border-radius:3px;background:var(--violet);
}
.tpl-slider input[type=range]::-moz-range-thumb{width:4px;height:14px;border:0;border-radius:3px;background:var(--violet)}
.tpl-slider input[type=range]:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:4px}
.tpl-row-color{position:relative;flex:0 0 30px;width:30px;height:30px;display:grid;place-items:center;cursor:pointer}
.tpl-row-color>span{width:22px;height:22px;border:1px solid rgba(10,10,10,.12);border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--editor-line)}
.tpl-row-color input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
/* Metric bands tint behind the letters (multiply keeps the ink solid). */
.type-metrics{mix-blend-mode:multiply}
/* Type metrics: room on the left for the line names. */
/* (Room for metric labels comes from the measured guide reach.) */
.unit-grid{mix-blend-mode:multiply}
.editor-view{mix-blend-mode:multiply}

/* Logo evolution: the morph stands in for the artwork while it plays. */
.is-evolving .shape-layer .svg-source{opacity:0}
.evolution-morph{pointer-events:none}
.tpl-upload{display:flex;align-items:center;gap:8px;width:100%;margin:10px 0 2px;justify-content:center;cursor:pointer}

/* Logo check */
.health-card .feature-card-head{position:relative}
.health-title{display:inline-flex;align-items:center;gap:8px}
.health-count{min-width:22px;height:22px;padding:0 7px;border-radius:11px;display:inline-grid;place-items:center;font-size:12px;font-weight:600}
.health-count.is-warn{background:#fbe4e1;color:#c2362c}
.health-count.is-ok{background:#efe8fd;color:#5b3fc4}
.health-empty{margin:4px 0 2px;font-size:12px;color:var(--editor-muted);line-height:1.5}
.health-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
.health-item{width:100%;display:flex;gap:10px;align-items:flex-start;padding:9px 10px;border:1px solid #ececee;border-radius:12px;background:#fff;text-align:start;font:inherit;font-size:12px;line-height:1.45;color:var(--editor-text);cursor:default}
.health-item:hover,.health-item:focus-visible{border-color:var(--violet);outline:none}
.health-item b{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:11px}
.health-item.is-warn b{background:#e2483d}
.health-item.is-info b{background:#8a63f0}
.health-list li{display:flex;gap:6px;align-items:stretch}
.health-list li .health-item{flex:1;min-width:0}
.health-fix{flex:none;padding:0 11px;border:1px solid #e3d8fd;border-radius:12px;background:#f6f2ff;color:#5b3fc4;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.health-fix:hover,.health-fix:focus-visible{background:#b99af8;border-color:#b99af8;color:#1d1d1f;outline:none}
.health-actions{display:flex;gap:6px;margin:2px 0 4px}
.health-fix-all{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:34px;border:0;border-radius:12px;background:#b99af8;color:#1d1d1f;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.health-fix-all b{min-width:20px;height:20px;padding:0 6px;border-radius:10px;display:inline-grid;place-items:center;background:rgba(255,255,255,.55);font-size:11px}
.health-fix-all:hover,.health-fix-all:focus-visible{background:#a984f5;outline:none}
.health-undo{flex:none;height:34px;padding:0 14px;border:1px solid #ececee;border-radius:12px;background:#fff;color:var(--editor-text);font:inherit;font-size:12.5px;cursor:pointer}
.health-undo:hover,.health-undo:focus-visible{border-color:var(--violet);outline:none}
.health-note{margin:8px 0 0;font-size:11.5px;color:var(--editor-muted);line-height:1.5}
.health-overlay{pointer-events:none}

/* Export menu: groups, the video/GIF panel, and the progress / success card */
.ed-export-group{margin:8px 10px 4px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--editor-muted)}
.ed-export-menu .has-more{position:relative}
.ed-export-menu .has-more>i{margin-inline-start:auto;font-style:normal;font-size:18px;color:var(--editor-muted)}
.ed-export-panel{width:340px;padding:12px}
.ed-export-panel-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.ed-export-back{width:28px;height:28px;border:0;border-radius:8px;background:#f2f2f4;font-size:18px;line-height:1;cursor:pointer}
html[dir="rtl"] .ed-export-back{transform:scaleX(-1)}
.ed-size-glyph{display:block;border:1.5px solid currentColor;border-radius:3px;color:#6b6b72;margin-bottom:2px}
.ed-size-glyph--original{width:22px;height:13px;border-style:dashed}
.ed-size-glyph--square{width:16px;height:16px}
.ed-size-glyph--post{width:14px;height:17px}
.ed-size-glyph--story{width:11px;height:19px}
.ed-size-glyph--landscape{width:22px;height:13px}
.ed-export-seg{width:100%}
.ed-export-seg button[disabled]{opacity:.4;cursor:not-allowed}
.ed-export-go{width:100%;justify-content:center;margin-top:12px}
.ed-export-card{position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:40;width:300px;padding:14px;border:1px solid #ececee;border-radius:16px;background:#fff;box-shadow:0 18px 40px rgba(16,12,40,.14);display:grid;gap:8px;animation:ed-card-in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes ed-card-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ed-export-card{animation:none}}
.ed-export-card strong{font-size:13px}
.ed-export-card small{font-size:12px;color:var(--editor-muted)}
.ed-export-bar{height:6px;border-radius:3px;background:#efe8fd;overflow:hidden}
.ed-export-bar span{display:block;height:100%;border-radius:3px;background:var(--violet);transition:width .2s linear}
.ed-export-card-head{display:flex;align-items:center;gap:8px}
.ed-export-check{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#8fe46c;color:#14301a;font-size:13px;font-weight:700}
.ed-export-x{margin-inline-start:auto;width:24px;height:24px;border:0;border-radius:6px;background:transparent;font-size:18px;line-height:1;color:var(--editor-muted);cursor:pointer}
.ed-export-file{word-break:break-all}
.ed-export-actions{display:flex;gap:8px}
.ed-export-actions .ed-btn{flex:1;justify-content:center;text-decoration:none}
.ed-export-card.is-failed .ed-export-card-head strong{color:#c2362c}

/* Logo evolution card in the Paths panel: old logo upload above the new logo. */
.evo-layer{display:grid;gap:10px;padding:12px}
.evo-row{display:grid;gap:6px}
.evo-row small{font-size:11px;color:var(--muted,#8a8a8a);text-transform:uppercase;letter-spacing:.06em}
.evo-row strong{font-size:13px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evo-layer{min-width:0}
.evo-row{min-width:0}
.evo-layer .tpl-upload{width:100%;max-width:100%;min-width:0;box-sizing:border-box;justify-content:flex-start;margin:0;overflow:hidden}
.evo-layer .tpl-upload svg{flex:none}
.evo-hint{font-size:11px;color:var(--muted,#8a8a8a)}
.evo-layer .tpl-upload span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Frame: the finished picture's shape on the canvas ----------------------------- */
.ed-canvas.is-framed .canvas-grid{display:none}
.canvas-artwork.is-framed{container-type:size}
.canvas-frame{
  position:relative;flex:none;
  width:min(100cqw,calc(100cqh * var(--frame-ratio)));
  height:min(100cqh,calc(100cqw / var(--frame-ratio)));
  overflow:hidden;border-radius:2px;
  box-shadow:0 1px 2px rgba(10,10,10,.06),0 10px 30px rgba(20,24,28,.14);
  transform-origin:50% 50%;transition:transform .22s var(--ease);
}
.canvas-artwork .canvas-frame>.svg-artboard,.canvas-frame .tpl-reveal .svg-artboard{position:absolute;transform:none}
.canvas-frame .tpl-reveal{position:absolute;inset:0}
.ed-canvas .canvas-frame .canvas-artwork{inset:0;display:block}
/* The frame picker is its own violet group, so it reads as the picture's size, not a tool. */
.ed-frame-pick{display:flex;align-items:center;gap:2px;padding:2px;border-radius:11px;background:#f3eefe}
.canvas-toolbar--icons .ed-frame-pick button{display:grid;place-items:center;color:#8b6ee8}
.ed-frame-pick .ed-size-glyph{margin:0;transform:scale(.82);color:inherit}
.canvas-toolbar--icons .ed-frame-pick button:hover{background:#e6dcfd;color:#5b3fc4}
.canvas-toolbar--icons .ed-frame-pick button.is-active{background:#b99af8;color:var(--editor-icon)}
.canvas-wrap--dark .canvas-toolbar--icons .ed-frame-pick button.is-active{background:#b99af8;color:var(--editor-icon)}
.ed-export-frame{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;padding:10px 12px;border:1px solid var(--editor-line);border-radius:12px;background:var(--editor-control)}
.ed-export-frame .ed-size-glyph{margin:0}
.ed-export-frame strong{font-size:12.5px;font-weight:600}
.ed-export-frame small{color:var(--editor-muted);font-size:11px}
.ed-export-frame .ed-export-frame-note{grid-column:2}
/* Phones: the toolbar keeps to the canvas width (zoom stays on the buttons and pinch). */
@media (max-width:560px){
  .ed-canvas-tools{max-width:calc(100% - 16px);gap:2px}
  .ed-canvas-tools .zoom-value{display:none}
  .canvas-toolbar--icons button{width:27px;min-width:27px}
}
.canvas-wrap--dark .ed-frame-pick{background:rgba(185,154,248,.16)}
.canvas-wrap--dark .canvas-toolbar--icons .ed-frame-pick button{color:#c9b2fb}
.canvas-wrap--dark .canvas-toolbar--icons .ed-frame-pick button:hover{background:rgba(185,154,248,.28);color:#e4d8fd}
.canvas-toolbar--icons .ed-frame-pick span.ed-size-glyph,.canvas-wrap--dark .canvas-toolbar--icons .ed-frame-pick span.ed-size-glyph{color:inherit}
/* Shape in frame: sliders in the left panel while a frame is on. */
.ed-frame-controls{display:grid;gap:8px;margin:0 12px 10px;padding:10px 12px;border:1px solid #e6dcfd;border-radius:14px;background:#faf7ff}
.ed-frame-controls-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:start;font:inherit;min-height:0}
.ed-frame-controls-head:hover .ed-frame-chevron{opacity:.8}
.ed-frame-controls-head strong{font-size:13px;font-weight:600;color:#1d1d1f}
.ed-frame-controls-head span{color:var(--editor-icon);font-size:11px}
/* chevron arrow */
.ed-frame-chevron{display:inline-block;width:14px;height:14px;flex-shrink:0;margin-left:auto;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%238b6ee8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .18s}
.ed-frame-controls.is-open .ed-frame-chevron{transform:rotate(180deg)}
.ed-frame-auto{height:32px;border:1px solid #e6dcfd;border-radius:10px;background:#fff;color:#5b3fc4;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.ed-frame-auto:hover:not(:disabled){background:#b99af8;border-color:#b99af8;color:#1d1d1f}
.ed-frame-auto:disabled{opacity:.45;cursor:default}
/* The frame is centred by position, not by the grid, so every browser centres it. */
.canvas-artwork.is-framed{display:block}
.canvas-artwork.is-framed>.canvas-frame{position:absolute;inset:0;margin:auto}
.ed-frame-controls fieldset{display:grid;gap:8px;margin:0;padding:0;border:0;min-width:0}
.ed-frame-controls fieldset:disabled{opacity:.42}
.ed-frame-controls-pick{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:3px;border-radius:11px;background:#f3eefe}
.ed-frame-controls-pick button{height:32px;display:grid;place-items:center;border:0;border-radius:9px;background:transparent;color:var(--editor-icon);cursor:pointer}
.ed-frame-controls-pick button:hover{background:#e6dcfd;color:#5b3fc4}
.ed-frame-controls-pick button.is-active{background:#b99af8;color:var(--editor-icon)}
.ed-frame-controls-pick .ed-size-glyph{margin:0;color:inherit;transform:scale(.82)}
.ed-frame-controls-note{margin:0;color:var(--editor-muted);font-size:11.5px;line-height:1.45}
/* Left panel: frame and template controls first, then the paths list, in one scroll. */
.ed-side-scroll{padding-top:10px}
.ed-side-scroll .ed-frame-controls{margin:0 10px 10px}
.ed-side-scroll .tpl-layer{margin:0 10px 10px}
.ed-paths-head{position:sticky;top:-10px;z-index:1;background:#fff;border-top:1px solid var(--editor-line)}
/* Design morph: two numbered steps, each with its file and its own button. */
.evo-layer{gap:8px}
.evo-step{display:flex;align-items:center;gap:10px}
.evo-num{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#b99af8;color:#1d1d1f;font-size:11.5px;font-weight:700}
.evo-step-text{display:grid;line-height:1.25}
.evo-step-text strong{font-size:13px;font-weight:600}
.evo-step-text small{color:var(--editor-muted);font-size:11px}
.evo-drop{display:grid;justify-items:center;gap:4px;padding:16px 10px;border:1.5px dashed #c9b2fb;border-radius:12px;background:#faf7ff;text-align:center;cursor:pointer;transition:background .15s,border-color .15s}
.evo-drop:hover,.evo-drop.is-over{background:#f3eefe;border-color:#b99af8}
.evo-drop.is-busy{cursor:progress;opacity:.75}
.evo-drop-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#b99af8;color:var(--editor-icon)}
.evo-drop-icon svg{width:16px;height:16px}
.evo-drop strong{font-size:12.5px;font-weight:600;color:#5b3fc4}
.evo-drop small{font-size:11px;color:var(--editor-muted)}
.evo-file{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:8px;padding:6px;border:1px solid var(--editor-line);border-radius:12px;background:#fff}
.evo-thumb{width:44px;height:44px;display:grid;place-items:center;padding:5px;border-radius:8px;background:var(--editor-control);overflow:hidden}
.evo-thumb svg{width:100%;height:100%;display:block}
.evo-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:500}
.evo-btn{height:26px;padding:0 10px;display:inline-grid;place-items:center;border:1px solid #e3d8fd;border-radius:9px;background:#f6f2ff;color:#5b3fc4;font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.evo-btn:hover{background:#b99af8;border-color:#b99af8;color:#1d1d1f}
.evo-meta{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;min-width:0}
.evo-actions{display:flex;flex-wrap:wrap;gap:6px;min-width:0;max-width:100%}
.evo-btn--quiet{background:#fff;border-color:var(--editor-line);color:var(--editor-muted)}
.evo-btn--quiet:hover{background:var(--editor-control);border-color:var(--editor-line);color:var(--editor-text)}
.evo-arrow{justify-self:center;color:#b99af8;font-size:15px;line-height:1}
.evo-error{margin:0;color:#c2362c;font-size:11.5px}

/* Optional correspondence links use the existing evolution controls. */
.evo-guides{border-top:1px solid var(--editor-line);padding-top:10px;min-width:0}
.evo-guides summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--editor-text)}
.evo-guides p{margin:8px 0;font-size:11px;line-height:1.5;color:var(--editor-muted)}
.evo-guide-previews{display:grid;gap:10px;min-width:0}
.evo-guide-previews strong{font-size:11px;color:var(--editor-muted)}
.evo-guide-previews svg{display:block;width:100%;height:126px;padding:8px;margin-top:4px;border:1px solid var(--editor-line);border-radius:10px;background:#f6f2ff;cursor:crosshair;touch-action:manipulation}
.evo-guide-previews svg:focus-visible,.evo-guides button:focus-visible,.evo-guides summary:focus-visible{outline:2px solid #5b3fc4;outline-offset:3px}
.evo-guide-previews svg[aria-disabled="true"]{cursor:default}
.evo-guides .evo-guide-status{color:var(--editor-text)}
.evo-guides .evo-error{color:#c2362c}
.evo-guide-list{display:grid;gap:5px;padding:0;margin:8px 0;list-style:none}
.evo-guide-list li{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:11.5px}

/* Template paper is independent of the editor's canvas theme. */
.ed-template-paper{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;min-width:0}
.ed-template-paper label{display:flex;align-items:center;gap:7px;min-width:0;font-size:11px;color:var(--editor-muted)}
.ed-template-paper input{box-sizing:border-box;width:28px;height:28px;padding:2px;border:1px solid var(--editor-line);border-radius:8px;background:#fff;cursor:pointer}
.ed-template-paper button{font-size:11px;white-space:nowrap}
.ed-template-paper input:focus-visible{outline:2px solid var(--violet);outline-offset:2px}

.template-details{position:absolute;inset:0;pointer-events:none}

.tpl-measure-note{margin:0 4px 6px;color:var(--editor-muted);font-size:11px;line-height:1.5}

.template-details [data-template-detail-hidden]{display:none!important}

/* Quiet, consistent feedback across editor controls and cards. */
.ed{
  --ui-feedback:160ms;
  --ui-enter:220ms;
  --ui-ease:cubic-bezier(.2,.75,.25,1);
}
.ed :is(button,summary,[role="button"],input[type="range"],input[type="color"],select){
  transition:background-color var(--ui-feedback) var(--ui-ease),color var(--ui-feedback) var(--ui-ease),border-color var(--ui-feedback) var(--ui-ease),box-shadow var(--ui-feedback) var(--ui-ease),opacity var(--ui-feedback) var(--ui-ease),scale var(--ui-feedback) var(--ui-ease),translate var(--ui-feedback) var(--ui-ease);
}
.ed :is(button,summary,[role="button"]):active:not(:disabled){scale:.97}
.ed :is(button,[role="button"]):focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.ed :is(.template-card,.side-preset,.motion-preset,.feature-card,.tpl-slider,.tpl-row-color>span){
  transition:background-color var(--ui-feedback) var(--ui-ease),border-color var(--ui-feedback) var(--ui-ease),box-shadow var(--ui-feedback) var(--ui-ease),scale var(--ui-feedback) var(--ui-ease),translate var(--ui-feedback) var(--ui-ease);
}
@media(hover:hover){
  .ed :is(button,summary,[role="button"]):hover:not(:disabled){translate:0 -1px}
  .ed :is(.template-card,.side-preset,.motion-preset):hover:not(:disabled){translate:0 -2px}
  .ed .tpl-slider:hover{background-color:#efebf7}
}
.ed :is([role="tabpanel"],.tpl-gallery,.tpl-elements,.ed-props,.ed-timeline,.ed-frame-controls fieldset){animation:ui-panel-in var(--ui-enter) var(--ui-ease) both}
.ed :is([role="menu"],[role="dialog"],.ed-shortcuts-menu,.ed-export-menu,.ed-export-card,.tl-ease-menu){animation:ui-popover-in var(--ui-enter) var(--ui-ease) both;transform-origin:top right}
@keyframes ui-panel-in{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes ui-popover-in{from{opacity:0;translate:0 -4px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@media(prefers-reduced-motion:reduce){
  .ed :is(button,summary,[role="button"],input,select,.template-card,.side-preset,.motion-preset,.feature-card,.tpl-slider,.tpl-row-color>span){transition:none;translate:none;scale:none}
  .ed :is([role="tabpanel"],.tpl-gallery,.tpl-elements,.ed-props,.ed-timeline,.ed-frame-controls fieldset,[role="menu"],[role="dialog"],.ed-shortcuts-menu,.ed-export-menu,.ed-export-card,.tl-ease-menu,.template-wipe),.ed .motion-preset svg,.ed .motion-preset svg *{animation:none!important}
}

/* Shared interface icons use violet on light surfaces and white on dark controls.
   This targets EditorIcon only, never SVG artwork or template previews. */
.ed .ed-icon{color:var(--editor-icon)}
.ed :is(.primary-button,.icon-button,.side-primary-action,.side-export-stack .is-primary,.ed-btn--primary,.ed-tabs button.is-active,.canvas-toolbar--icons button.is-active,.tl-interp button.is-active,.tl-icon-btn.is-active,.motion-preset.is-active,.tpl-play,.tpl-kind button.is-active,.tpl-replay.is-active) .ed-icon{color:#fff}
.ed .canvas-wrap--dark .canvas-toolbar--icons .ed-icon{color:#d9ccfb}
.ed .canvas-wrap--dark .canvas-toolbar--icons button.is-active .ed-icon{color:var(--editor-icon)}

/* Compact point-editing control follows the surrounding panel's radius system. */
.ed-edit-points,
.ed-edit-points.is-on{min-height:30px;gap:6px;padding:0 8px;border-color:var(--editor-line);border-radius:var(--editor-radius-control);background:var(--editor-control);color:var(--editor-text)}
.ed-edit-points .fig-toggle-label{font-size:11px;white-space:nowrap}
.ed-edit-points .fig-toggle-icon{display:grid;place-items:center;flex:none;width:18px;height:18px}
.ed .ed-edit-points .ed-icon{width:14px;height:14px;color:var(--editor-icon)}
.ed-edit-points .fig-toggle-switch{width:28px;height:16px;flex-basis:28px;background:var(--editor-line-strong)}
.ed-edit-points .fig-toggle-thumb{width:10px;height:10px;background:var(--editor-panel)}
.ed-edit-points.is-on .fig-toggle-switch{background:var(--violet)}
.ed-edit-points.is-on .fig-toggle-thumb{background:var(--editor-panel)}

/* Muted does not mean disabled: labels and values remain readable. */
.ed :is(button,summary,[role="button"],input,select):focus-visible{outline-color:var(--editor-icon)}
.ed .ed-edit-banner>.ed-icon{color:var(--violet)}
.ed :is(.fig-toggle-switch,.fig-slider-tick){box-shadow:inset 0 0 0 1px var(--editor-muted)}
.ed .fig-toggle-thumb{box-shadow:0 0 0 1px var(--editor-muted)}

.ed .tpl-slider input[type=range]::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--editor-muted)}
.ed .tpl-slider input[type=range]::-moz-range-thumb{box-shadow:0 0 0 1px var(--editor-muted)}
/* Morph templates sit in their own group under the motion templates. */
.tpl-group{display:grid;gap:8px}
.tpl-group--morph{padding:10px;border:1px solid var(--editor-line);border-radius:16px;background:var(--editor-control)}
.tpl-group-title{display:flex;align-items:center;gap:6px;margin:0;padding:0 2px;color:var(--editor-text);font-size:12px;font-weight:600;letter-spacing:-.01em}
.tpl-group-title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--violet)}