/* Pixambas v77 — capa visual global.
   Solo presentación: no cambia geometría del lienzo ni reglas de interacción de las herramientas. */
:root{
  --px-violet:#7868e8;
  --px-indigo:#4f46b8;
  --px-cyan:#64cfe0;
  --px-coral:#f1a08d;
  --px-sage:#83bca2;
  --px-glass:color-mix(in srgb,var(--ui-surface,#fff) 84%,transparent);
  --px-focus:0 0 0 3px color-mix(in srgb,var(--ui-accent,#7868e8) 22%,transparent);
  --px-card-shadow:0 12px 34px rgba(37,32,89,.07),0 2px 8px rgba(37,32,89,.035);
  --px-hover-shadow:0 20px 44px rgba(51,41,129,.13),0 4px 12px rgba(51,41,129,.06);
}

body.home-page,
body.privacy-page{
  background-color:var(--ui-bg,#f5f3ef);
  background-image:
    radial-gradient(ellipse at 7% 2%,color-mix(in srgb,var(--px-violet) 10%,transparent),transparent 34%),
    radial-gradient(ellipse at 94% 24%,color-mix(in srgb,var(--px-cyan) 9%,transparent),transparent 30%),
    radial-gradient(ellipse at 56% 96%,color-mix(in srgb,var(--px-coral) 7%,transparent),transparent 36%),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--ui-text,#222) 1.5%,transparent) 0 1px,transparent 1px 34px),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--ui-text,#222) 1.5%,transparent) 0 1px,transparent 1px 34px);
  background-attachment:fixed;
}
body.editor-page{
  background-image:
    radial-gradient(ellipse at 2% 0%,color-mix(in srgb,var(--ui-accent) 11%,transparent),transparent 31%),
    radial-gradient(ellipse at 100% 100%,color-mix(in srgb,var(--ui-sage) 8%,transparent),transparent 28%),
    linear-gradient(var(--ui-bg),var(--ui-bg));
  background-attachment:fixed;
}
body.guide-page{
  background-image:
    radial-gradient(ellipse at 8% 0%,color-mix(in srgb,var(--guide-accent) 15%,transparent),transparent 38%),
    radial-gradient(ellipse at 98% 35%,color-mix(in srgb,var(--px-cyan) 8%,transparent),transparent 30%),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--guide-text) 1.6%,transparent) 0 1px,transparent 1px 36px),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--guide-text) 1.6%,transparent) 0 1px,transparent 1px 36px),
    var(--guide-bg);
  background-attachment:fixed;
}

/* Shared surface language: soft edges, thin color accents, deliberate depth. */
body.home-page main .home-hero,
body.home-page main .tutorial-library,
body.home-page main .guide-section,
body.privacy-page .privacy-section,
body.privacy-page .privacy-index,
body.guide-page .article-hero,
body.guide-page article.guide-article,
body.guide-page .contents,
body.guide-page .exercise{
  box-shadow:var(--px-card-shadow);
}
body.home-page main .home-hero{
  border-color:color-mix(in srgb,var(--px-violet) 24%,var(--ui-border));
  box-shadow:0 28px 78px rgba(73,61,157,.105),0 4px 12px rgba(49,43,95,.04);
}
body.home-page main .guide-kicker,
body.home-page main .home-eyebrow,
body.home-page main .tutorial-card-number{
  text-shadow:0 1px 0 color-mix(in srgb,var(--ui-surface) 35%,transparent);
}
body.home-page main .guide-section,
body.home-page main .tutorial-library{
  background:color-mix(in srgb,var(--ui-surface) 89%,transparent);
  border-color:color-mix(in srgb,var(--px-violet) 10%,var(--ui-border));
  backdrop-filter:blur(12px);
}
body.home-page main a.card{
  border-color:color-mix(in srgb,var(--px-violet) 17%,var(--ui-border));
  box-shadow:var(--px-card-shadow);
  transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease,background-color .24s ease;
}
body.home-page main a.card:hover{
  border-color:color-mix(in srgb,var(--px-violet) 44%,var(--ui-border));
  box-shadow:var(--px-hover-shadow);
  transform:translateY(-4px);
}
body.home-page main .tutorial-card{
  position:relative;
  overflow:hidden;
  border-color:color-mix(in srgb,var(--px-violet) 14%,var(--ui-border));
  box-shadow:0 9px 25px rgba(37,32,89,.045);
  transition:transform .26s cubic-bezier(.2,.8,.2,1),border-color .26s ease,box-shadow .26s ease,background-color .26s ease;
}
body.home-page main .tutorial-card::before{
  content:"";
  position:absolute;
  z-index:0;
  top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--px-violet),var(--px-cyan),var(--px-coral));
  opacity:.82;
  transform:scaleX(.32);
  transform-origin:left center;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .24s ease;
}
body.home-page main .tutorial-card>*{position:relative;z-index:1}
body.home-page main .tutorial-card:hover,
body.home-page main .tutorial-card:focus-visible{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--px-violet) 42%,var(--ui-border));
  box-shadow:var(--px-hover-shadow);
}
body.home-page main .tutorial-card:hover::before,
body.home-page main .tutorial-card:focus-visible::before{transform:scaleX(1);opacity:1}
body.home-page main .tutorial-pixel{background-image:linear-gradient(145deg,color-mix(in srgb,#8378f0 7%,var(--ui-surface)),var(--ui-surface))}
body.home-page main .tutorial-sprites{background-image:linear-gradient(145deg,color-mix(in srgb,#69bfd2 8%,var(--ui-surface)),var(--ui-surface))}
body.home-page main .tutorial-manga{background-image:linear-gradient(145deg,color-mix(in srgb,#e9a18c 9%,var(--ui-surface)),var(--ui-surface))}
body.home-page main .tutorial-animation{background-image:linear-gradient(145deg,color-mix(in srgb,#80b99e 9%,var(--ui-surface)),var(--ui-surface))}
body.home-page main .guide-tool-list li,
body.home-page main .guide-faq details{
  transition:border-color .22s ease,background-color .22s ease,box-shadow .22s ease;
}
body.home-page main .guide-tool-list li:hover,
body.home-page main .guide-faq details:hover{
  border-color:color-mix(in srgb,var(--px-violet) 35%,var(--ui-border));
  box-shadow:0 8px 22px rgba(51,41,129,.06);
}
body.home-page main .guide-toc a,
body.home-page main .guide-cta{
  transition:transform .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
body.home-page main .guide-toc a:hover,
body.home-page main .guide-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(62,49,147,.09)}

/* Tutorial articles: align them with the home page's lavender/cyan brand. */
body.guide-page .guide-top{border-bottom:1px solid color-mix(in srgb,var(--guide-line) 65%,transparent)}
body.guide-page .brand{letter-spacing:.13em}
body.guide-page .brand::before{
  content:"✦";display:inline-grid;place-items:center;width:25px;height:25px;margin-right:8px;
  border:1px solid color-mix(in srgb,var(--guide-accent) 34%,var(--guide-line));border-radius:8px;
  background:var(--guide-accent-soft);color:var(--guide-accent);font-size:13px;vertical-align:middle;
}
body.guide-page .top-links a{
  transition:transform .2s ease,border-color .2s ease,background-color .2s ease,box-shadow .2s ease;
}
body.guide-page .top-links a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--guide-accent) 48%,var(--guide-line));box-shadow:0 9px 22px rgba(55,44,125,.10);text-decoration:none}
body.guide-page .article-hero{
  border:1px solid rgba(255,255,255,.16);
  background:radial-gradient(ellipse at 88% 12%,rgba(113,218,231,.21),transparent 34%),linear-gradient(135deg,#171438 0%,#383077 53%,#69439a 100%);
}
body.guide-page .article-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.14;
  background-image:linear-gradient(rgba(255,255,255,.34) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.34) 1px,transparent 1px);
  background-size:30px 30px;mask-image:linear-gradient(130deg,#000,transparent 78%);
}
body.guide-page article.guide-article,
body.guide-page .contents{border-color:color-mix(in srgb,var(--guide-accent) 13%,var(--guide-line))}
body.guide-page .contents a{border-radius:7px;transition:color .18s ease,background-color .18s ease,padding-left .18s ease}
body.guide-page .contents a:hover{padding-left:6px;background:var(--guide-accent-soft);color:var(--guide-accent);text-decoration:none}
body.guide-page .article-cta a{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
body.guide-page .article-cta a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(58,43,142,.2);filter:saturate(1.06);text-decoration:none}
body.guide-page article.guide-article section h2{scroll-margin-top:22px}
body.guide-page .exercise{border-color:color-mix(in srgb,var(--guide-accent) 24%,var(--guide-line))}
body.guide-page footer a{transition:color .18s ease}

/* Privacy page uses the same refined surface and navigation language. */
body.privacy-page .privacy-index{backdrop-filter:blur(12px);border-color:color-mix(in srgb,var(--px-violet) 13%,var(--ui-border))}
body.privacy-page .privacy-index a{
  transition:transform .2s ease,border-color .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
body.privacy-page .privacy-index a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--px-violet) 38%,var(--ui-border))!important;box-shadow:0 8px 20px rgba(54,44,128,.08);text-decoration:none}
body.privacy-page .privacy-section{border-color:color-mix(in srgb,var(--px-violet) 11%,var(--ui-border));transition:border-color .24s ease,box-shadow .24s ease,background-color .24s ease}
body.privacy-page .privacy-section:hover{border-color:color-mix(in srgb,var(--px-violet) 31%,var(--ui-border));box-shadow:0 18px 42px rgba(42,35,106,.085)}
body.privacy-page .privacy-section h2{letter-spacing:-.025em}
body.privacy-page .privacy-channel-note{border-color:color-mix(in srgb,var(--px-cyan) 24%,var(--ui-border))}

/* Editor polish is restricted to color, shadow, and transition properties.
   No canvas size, grid, dimensions, pointer handling, or layout geometry is changed. */
body.editor-page #app>header{
  border-color:color-mix(in srgb,var(--ui-accent) 16%,var(--ui-border));
  box-shadow:0 9px 28px rgba(36,31,83,.065),0 1px 0 rgba(255,255,255,.45) inset;
  transition:border-color .22s ease,box-shadow .22s ease,background-color .22s ease;
}
body.editor-page #tools,
body.editor-page #side,
body.editor-page #tl{
  border-color:color-mix(in srgb,var(--ui-accent) 10%,var(--ui-border));
  box-shadow:0 16px 42px rgba(36,31,83,.075),0 2px 8px rgba(36,31,83,.025);
}
body.editor-page #stage{border-color:color-mix(in srgb,var(--ui-accent) 12%,var(--ui-border))}
body.editor-page #app>header button,
body.editor-page #app>header a,
body.editor-page #opts button{
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}
body.editor-page #app>header button:focus-visible,
body.editor-page #app>header a:focus-visible,
body.editor-page #opts button:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}

/* Reveal only editorial/marketing content, never the editor's interactive panels. */
.px-reveal{transition:opacity .62s ease,transform .68s cubic-bezier(.2,.75,.25,1),filter .62s ease}
html.px-motion-ready .px-reveal:not(.px-revealed){opacity:0;transform:translateY(18px);filter:blur(1px)}
html.px-motion-ready .px-reveal.px-revealed{opacity:1;transform:none;filter:none}
@keyframes px-nebula-drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-2%,2%,0) scale(1.06)}}
body.home-page main .home-hero::after{animation:px-nebula-drift 18s ease-in-out infinite alternate}
body.home-page main .home-eyebrow-dot{box-shadow:0 0 0 4px color-mix(in srgb,var(--px-sage) 14%,transparent),0 0 14px color-mix(in srgb,var(--px-sage) 42%,transparent)}

@media (hover:none), (pointer:coarse){
  body.home-page main a.card:hover,
  body.home-page main .tutorial-card:hover,
  body.home-page main .guide-toc a:hover,
  body.home-page main .guide-cta:hover,
  body.guide-page .top-links a:hover,
  body.guide-page .article-cta a:hover,
  body.privacy-page .privacy-index a:hover{transform:none;box-shadow:var(--px-card-shadow)}
}
@media (max-width:760px){
  body.home-page,body.privacy-page,body.guide-page,body.editor-page{background-attachment:scroll}
  body.home-page main .home-hero{box-shadow:0 17px 42px rgba(59,49,120,.085)}
  body.home-page main .tutorial-card{box-shadow:0 7px 19px rgba(37,32,89,.045)}
  body.guide-page .article-hero::before{background-size:23px 23px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .px-reveal,html.px-motion-ready .px-reveal:not(.px-revealed),html.px-motion-ready .px-reveal.px-revealed{opacity:1!important;transform:none!important;filter:none!important}
}


/* PIXAMBAS V78 — cohesive toolbar grouping. Styling/placement only; tool commands and IDs are unchanged. */
body.editor-page .app-header .header-cluster:not(.header-main){
  border:1px solid color-mix(in srgb,var(--ui-accent) 13%,var(--ui-border))!important;
  border-left:1px solid color-mix(in srgb,var(--ui-accent) 13%,var(--ui-border))!important;
  border-radius:12px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface-2) 94%,var(--ui-accent-soft)),color-mix(in srgb,var(--ui-surface) 96%,transparent))!important;
  box-shadow:0 3px 10px rgba(36,31,83,.035),0 1px 0 rgba(255,255,255,.38) inset;
  gap:5px!important;
  padding:3px 5px!important;
}
body.editor-page .app-header .header-cluster+.header-cluster{padding-left:5px!important}
body.editor-page .app-header .header-main{background:transparent!important;box-shadow:none!important}
body.editor-page .app-header .header-project button,
body.editor-page .app-header .header-history button,
body.editor-page .app-header .header-canvas-actions button,
body.editor-page .app-header .header-actions button,
body.editor-page .app-header .header-utilities button,
body.editor-page .app-header .header-utilities summary,
body.editor-page .app-header .header-view button,
body.editor-page .app-header .header-view select{
  border-radius:9px!important;
  transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,transform .14s ease;
}
body.editor-page .app-header .header-project button{box-shadow:none}
body.pixel-page .app-header #new,
body.dibujo-page .app-header #mn>summary{
  background:linear-gradient(135deg,var(--ui-accent),color-mix(in srgb,var(--ui-accent) 72%,#9c83ff))!important;
  border-color:color-mix(in srgb,var(--ui-accent) 78%,white)!important;
  color:#fff!important;
  font-weight:850;
  box-shadow:0 5px 13px color-mix(in srgb,var(--ui-accent) 20%,transparent)!important;
}
body.editor-page .app-header .header-history button{
  min-width:33px;
  width:33px;
  height:33px;
  min-height:33px!important;
  padding:0!important;
  font-size:16px!important;
  font-weight:800;
  background:color-mix(in srgb,var(--ui-surface) 90%,transparent);
}
body.editor-page .app-header .header-history button:hover,
body.editor-page .app-header .header-canvas-actions button:hover,
body.editor-page .app-header .header-utilities button:hover,
body.editor-page .app-header .toolbar-subgroup button:hover{
  border-color:color-mix(in srgb,var(--ui-accent) 38%,var(--ui-border))!important;
  box-shadow:0 4px 11px rgba(64,50,143,.09)!important;
}
body.pixel-page .app-header .header-view{gap:5px!important;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
body.pixel-page .app-header .toolbar-subgroup{
  display:flex;flex:0 0 auto;align-items:center;gap:4px;min-width:0;
  padding:3px;border:1px solid color-mix(in srgb,var(--ui-accent) 10%,var(--ui-border));
  border-radius:10px;background:color-mix(in srgb,var(--ui-surface) 78%,transparent);
}
body.pixel-page .app-header .toolbar-subgroup button,
body.pixel-page .app-header .toolbar-subgroup select{min-height:32px!important;height:32px!important;padding:4px 8px!important;font-size:11px!important}
body.pixel-page .app-header .toolbar-panels button{width:32px;min-width:32px;padding:0!important;font-size:15px!important}
body.pixel-page .app-header .toolbar-preferences #theme{width:32px;min-width:32px;padding:0!important;font-size:15px!important}
body.pixel-page .app-header .toolbar-help #help{width:32px;min-width:32px;padding:0!important;font-weight:900}
body.pixel-page .app-header .toolbar-help #don{padding-inline:9px!important;font-size:10px!important}
body.pixel-page .app-header .toolbar-primary #exp,
body.dibujo-page .app-header #webm{
  background:linear-gradient(135deg,var(--ui-accent),color-mix(in srgb,var(--ui-accent) 76%,#9c83ff))!important;
  border-color:color-mix(in srgb,var(--ui-accent) 76%,white)!important;color:#fff!important;font-weight:850;
  box-shadow:0 5px 14px color-mix(in srgb,var(--ui-accent) 18%,transparent)!important;
}
body.editor-page .app-header #theme,
body.editor-page .app-header #thm,
body.editor-page .app-header #help,
body.editor-page .app-header #hlp{width:32px;min-width:32px;padding:0!important;font-weight:850}
body.dibujo-page .app-header .header-canvas-actions{gap:4px!important}
body.dibujo-page .app-header .header-canvas-actions #ref{padding-inline:9px!important;font-size:11px!important}
body.dibujo-page .app-header .header-utilities{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:4px!important;white-space:nowrap}
body.dibujo-page .app-header .header-utilities #dlangsel{min-width:65px;width:68px;max-width:80px;padding:4px 6px!important;font-size:10px!important}
body.dibujo-page .app-header .header-utilities #don{padding-inline:8px!important;font-size:10px!important}
body.dibujo-page .app-header .header-utilities #mn{position:relative;z-index:920;flex:0 0 auto}
body.dibujo-page .app-header .header-utilities #mn>summary{display:flex;align-items:center;justify-content:center;gap:5px;min-height:32px;height:32px;padding:5px 9px!important;border-radius:9px!important;list-style:none;cursor:pointer;font-size:11px;font-weight:850;white-space:nowrap}
body.dibujo-page .app-header .header-utilities #mn>summary::-webkit-details-marker{display:none}
body.dibujo-page .app-header .header-utilities #mn>summary::marker{content:""}
body.dibujo-page .app-header .header-actions:empty{display:none!important}
body.dibujo-page .app-header .header-canvas:has(#szc[hidden]){display:none!important}
body.editor-page .app-header button:focus-visible,
body.editor-page .app-header a:focus-visible,
body.editor-page .app-header select:focus-visible,
body.editor-page .app-header summary:focus-visible{outline:2px solid var(--ui-accent)!important;outline-offset:2px!important}
@media (max-width:1180px){
  body.editor-page .app-header .header-cluster:not(.header-main){box-shadow:none}
  body.editor-page .app-header .header-view{max-width:none!important;overflow:visible!important}
  body.pixel-page .app-header .header-view{flex-wrap:wrap!important;align-content:center}
  body.pixel-page .app-header .toolbar-subgroup{gap:3px;padding:2px}
  body.pixel-page .app-header .toolbar-subgroup button,body.pixel-page .app-header .toolbar-subgroup select{min-height:32px!important;height:32px!important;padding:4px 6px!important;font-size:10px!important}
  body.pixel-page .app-header .toolbar-panels button{width:31px;min-width:31px}
  body.dibujo-page .app-header .header-utilities{flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;min-width:0;white-space:normal}
  body.dibujo-page .app-header .header-utilities #mn{order:5}
}
@media (max-width:700px){
  body.editor-page .app-header .header-cluster:not(.header-main){border-radius:10px!important;padding:2px 3px!important;gap:3px!important}
  body.pixel-page .app-header .header-view{gap:4px!important}
  body.pixel-page .app-header .toolbar-subgroup{border-radius:9px;padding:2px!important}
  body.pixel-page .app-header .toolbar-subgroup button,body.pixel-page .app-header .toolbar-subgroup select{min-height:31px!important;height:31px!important;padding:3px 5px!important;font-size:10px!important}
  body.pixel-page .app-header .toolbar-panels button,body.pixel-page .app-header .toolbar-preferences #theme,body.pixel-page .app-header .toolbar-help #help{width:30px;min-width:30px}
  body.pixel-page .app-header .toolbar-help #don{padding-inline:7px!important;font-size:9px!important}
  body.dibujo-page .app-header .header-history button{min-width:30px;width:30px;height:31px;min-height:31px!important}
  body.dibujo-page .app-header .header-canvas-actions #ref{padding-inline:7px!important;font-size:10px!important}
  body.dibujo-page .app-header .header-utilities{width:auto;flex:1 1 100%;justify-content:flex-start;gap:4px!important}
  body.dibujo-page .app-header .header-utilities #mn>summary{min-height:31px;height:31px;padding:4px 7px!important;font-size:10px}
}
@media (prefers-reduced-motion:reduce){body.editor-page .app-header .header-cluster,body.editor-page .app-header button{transition:none!important}}


/* PIXAMBAS V79 — fix the Fit button sizing without changing editor behavior.
   V78 applied the same 33px width to every history button; the text label
   "Ajustar" overflowed its button and visually covered neighboring controls. */
body.dibujo-page .app-header .header-history{
  display:flex;align-items:center;gap:5px!important;flex:0 0 auto;
}
body.dibujo-page .app-header .header-history #un,
body.dibujo-page .app-header .header-history #re{
  flex:0 0 33px!important;width:33px!important;min-width:33px!important;max-width:33px!important;
  padding:0!important;text-align:center;white-space:nowrap;
}
body.dibujo-page .app-header .header-history #fit{
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto!important;width:auto!important;min-width:62px!important;max-width:none!important;
  padding:0 10px!important;white-space:nowrap!important;font-size:11px!important;
}
@media(max-width:700px){
  body.dibujo-page .app-header .header-history{gap:4px!important}
  body.dibujo-page .app-header .header-history #un,
  body.dibujo-page .app-header .header-history #re{flex-basis:30px!important;width:30px!important;min-width:30px!important;max-width:30px!important}
  body.dibujo-page .app-header .header-history #fit{min-width:56px!important;padding-inline:7px!important;font-size:10px!important}
}

/* =====================================================================
   PIXAMBAS V80 — pixel-atmosphere + clearer, rounded editor controls.
   Visual-only layer: no canvas dimensions, tool IDs, handlers, or event logic
   are changed by these rules. Theme colors inherit the current light/dark UI.
   ===================================================================== */
:root{
  --px-radius-panel:21px;
  --px-radius-control:999px;
  --px-pixel-grid:color-mix(in srgb,var(--ui-accent) 5%,transparent);
  --px-pixel-violet:color-mix(in srgb,var(--px-violet) 15%,transparent);
  --px-pixel-cyan:color-mix(in srgb,var(--px-cyan) 13%,transparent);
  --px-pixel-coral:color-mix(in srgb,var(--px-coral) 12%,transparent);
  --px-panel-outline:color-mix(in srgb,var(--ui-accent) 17%,var(--ui-border));
}

/* Calm pixel-grid atmosphere stays behind the app; the canvas itself is untouched. */
body.editor-page{position:relative;isolation:isolate;background-attachment:fixed}
body.editor-page::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(ellipse at 8% 4%,color-mix(in srgb,var(--px-violet) 11%,transparent),transparent 34%),
    radial-gradient(ellipse at 94% 18%,color-mix(in srgb,var(--px-cyan) 9%,transparent),transparent 31%),
    radial-gradient(ellipse at 68% 100%,color-mix(in srgb,var(--px-coral) 7%,transparent),transparent 34%),
    linear-gradient(90deg,var(--px-pixel-grid) 1px,transparent 1px),
    linear-gradient(var(--px-pixel-grid) 1px,transparent 1px),
    linear-gradient(var(--px-pixel-violet) 0 0),
    linear-gradient(var(--px-pixel-cyan) 0 0),
    linear-gradient(var(--px-pixel-coral) 0 0);
  background-size:auto,auto,auto,32px 32px,32px 32px,11px 11px,7px 7px,9px 9px;
  background-position:center,center,center,center,center,7% 19%,92% 37%,84% 79%;
  background-repeat:no-repeat,no-repeat,no-repeat,repeat,repeat,no-repeat,no-repeat,no-repeat;
}
body.editor-page #app{position:relative;z-index:1}
body.editor-page .canvas-ad-slot{position:relative;z-index:1}

/* Editor chrome: richer surfaces and round corners without resizing any panel. */
body.editor-page #app>header,
body.editor-page #opts,
body.editor-page #tl,
body.editor-page .timeline-bar,
body.editor-page #tools,
body.editor-page #side,
body.editor-page #stage{
  border-radius:var(--px-radius-panel)!important;
  border-color:var(--px-panel-outline);
}
body.editor-page #app>header{
  background:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 95%,var(--px-violet) 5%),color-mix(in srgb,var(--ui-surface) 97%,transparent));
  box-shadow:0 12px 32px rgba(35,31,82,.075),0 1px 0 color-mix(in srgb,white 35%,transparent) inset;
}
body.editor-page #opts,
body.editor-page #tl,
body.editor-page .timeline-bar{
  background:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 96%,var(--px-cyan) 4%),color-mix(in srgb,var(--ui-surface-2) 92%,transparent));
  box-shadow:0 8px 24px rgba(35,31,82,.045),0 1px 0 color-mix(in srgb,white 26%,transparent) inset;
}
body.editor-page #tools,
body.editor-page #side{
  background:linear-gradient(160deg,color-mix(in srgb,var(--ui-surface) 97%,var(--px-violet) 3%),color-mix(in srgb,var(--ui-surface-2) 94%,var(--px-cyan) 6%));
  box-shadow:0 16px 38px rgba(35,31,82,.07),0 1px 0 color-mix(in srgb,white 23%,transparent) inset;
}
body.editor-page #stage{
  background:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 97%,var(--px-violet) 3%),color-mix(in srgb,var(--ui-surface-2) 97%,transparent));
  box-shadow:0 13px 32px rgba(35,31,82,.065),0 1px 0 color-mix(in srgb,white 22%,transparent) inset;
}

/* Header clusters read as related capsules rather than a row of unrelated buttons. */
body.editor-page .app-header{gap:6px}
body.editor-page .app-header .header-cluster:not(.header-main){
  border:1px solid color-mix(in srgb,var(--ui-accent) 16%,var(--ui-border))!important;
  border-left:1px solid color-mix(in srgb,var(--ui-accent) 16%,var(--ui-border))!important;
  border-radius:16px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 89%,var(--px-violet) 11%),color-mix(in srgb,var(--ui-surface-2) 94%,transparent))!important;
  box-shadow:0 2px 7px rgba(42,35,106,.035),0 1px 0 color-mix(in srgb,white 25%,transparent) inset;
}
body.editor-page .app-header .header-main{border-radius:16px!important}
body.editor-page .app-header .header-project{border-top-color:color-mix(in srgb,var(--px-cyan) 44%,var(--ui-border))!important}
body.editor-page .app-header .header-history{border-top-color:color-mix(in srgb,var(--px-violet) 48%,var(--ui-border))!important}
body.editor-page .app-header .header-canvas,
body.editor-page .app-header .header-canvas-actions{border-top-color:color-mix(in srgb,var(--px-cyan) 42%,var(--ui-border))!important}
body.editor-page .app-header .header-utilities,
body.editor-page .app-header .header-view{border-top-color:color-mix(in srgb,var(--px-violet) 42%,var(--ui-border))!important}
body.editor-page .app-header .header-actions{border-top-color:color-mix(in srgb,var(--px-sage) 48%,var(--ui-border))!important}

/* Rounded controls, clear active state and high-contrast keyboard focus. */
body.editor-page .app-header button,
body.editor-page .app-header .btn,
body.editor-page .app-header select,
body.editor-page .app-header summary,
body.editor-page #opts button,
body.editor-page #opts select,
body.editor-page #opts input,
body.editor-page .timeline-bar button,
body.editor-page .timeline-bar select,
body.editor-page #toolsfab,
body.editor-page #sidefab{
  border-radius:var(--px-radius-control)!important;
}
body.editor-page .app-header button,
body.editor-page .app-header select,
body.editor-page #opts button,
body.editor-page #opts select,
body.editor-page .timeline-bar button,
body.editor-page .timeline-bar select{
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease,transform .16s ease;
}
body.editor-page .app-header button:hover,
body.editor-page #opts button:hover,
body.editor-page .timeline-bar button:hover{
  border-color:color-mix(in srgb,var(--ui-accent) 42%,var(--ui-border));
  box-shadow:0 5px 13px color-mix(in srgb,var(--ui-accent) 13%,transparent);
}
body.editor-page .app-header button:active,
body.editor-page #opts button:active,
body.editor-page .timeline-bar button:active{transform:scale(.97)}
body.editor-page .app-header .on,
body.editor-page #opts button.on,
body.editor-page .timeline-bar button.on{
  box-shadow:0 5px 15px color-mix(in srgb,var(--ui-accent) 20%,transparent),0 1px 0 rgba(255,255,255,.25) inset;
}

/* Pixel-inspired tool tiles: softened corners, not circular buttons that lose their labels. */
body.editor-page #tools .tgrp,
body.editor-page #tools .tgrp-h,
body.editor-page #tools .tgrp-b,
body.editor-page #tools .tool-props,
body.editor-page #side>div,
body.editor-page #side details,
body.editor-page #side .panel-card{border-radius:16px!important}
body.editor-page #tools .tgrp-b button,
body.editor-page #tools .shape-picker button,
body.editor-page #tools .size-presets button{
  border-radius:14px!important;
  transition:background-color .17s ease,border-color .17s ease,box-shadow .17s ease,transform .16s ease;
}
body.editor-page #tools .tgrp-b button.on,
body.editor-page #tools .shape-picker button.on,
body.editor-page #tools .size-presets button.on{
  box-shadow:0 6px 15px color-mix(in srgb,var(--ui-accent) 15%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--ui-accent) 32%,transparent)!important;
}
body.editor-page #tools .tgrp-b button:focus-visible,
body.editor-page #tools .shape-picker button:focus-visible,
body.editor-page #side button:focus-visible,
body.editor-page .timeline-bar button:focus-visible,
body.editor-page #opts button:focus-visible{outline:2px solid var(--ui-accent)!important;outline-offset:2px!important}
body.editor-page #side .layer{border-radius:13px!important;transition:background-color .17s ease,border-color .17s ease,box-shadow .17s ease}
body.editor-page #side .layer.sel{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-accent) 24%,transparent)}
body.editor-page #side .pal .sw,
body.editor-page #tools .pal .sw,
body.editor-page #tools .tool-color-body .sw{border-radius:9px!important}
body.editor-page #toolsfab,
body.editor-page #sidefab{box-shadow:0 8px 22px rgba(33,28,79,.17),0 1px 0 rgba(255,255,255,.25) inset}

/* Large desktop: preserve one-row geometry but never let flex compression overlap controls.
   If a narrow desktop cannot fit every group, the header itself scrolls horizontally. */
@media (min-width:1181px){
  body.editor-page .app-header{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none;overscroll-behavior-x:contain}
  body.editor-page .app-header::-webkit-scrollbar{display:none}
  body.editor-page .app-header>.header-cluster{flex:0 0 auto;min-width:max-content}
  body.editor-page .app-header>.header-main{flex:0 1 auto;min-width:0;max-width:36vw}
  body.editor-page .app-header>.header-main .logo{min-width:0;overflow:hidden;text-overflow:ellipsis}
  body.editor-page .app-header>.header-canvas{flex:0 1 170px;min-width:120px;max-width:190px}
  body.editor-page .app-header>.header-canvas select{max-width:100%;min-width:0}
  body.editor-page .app-header>.sp{flex:1 1 8px;min-width:8px}
  body.pixel-page .app-header .header-view{flex:0 0 auto;max-width:none!important;overflow:visible!important}
  body.dibujo-page .app-header .header-utilities{flex:0 0 auto;white-space:nowrap}
}

/* Tablet/phone: maintain the existing responsive rows, add breathing room only. */
@media (max-width:1180px), (pointer:coarse) and (max-width:1180px){
  body.editor-page .app-header .header-cluster:not(.header-main){border-radius:15px!important}
  body.editor-page .app-header button,
  body.editor-page .app-header .btn,
  body.editor-page .app-header select,
  body.editor-page .app-header summary{border-radius:999px!important}
  body.editor-page #tools .tgrp-b button,
  body.editor-page #tools .shape-picker button{border-radius:13px!important}
  body.editor-page #tools,
  body.editor-page #side,
  body.editor-page #stage{box-shadow:0 9px 23px rgba(35,31,82,.055)}
}
@media (hover:hover) and (pointer:fine){
  body.editor-page #tools .tgrp-b button:hover,
  body.editor-page #tools .shape-picker button:hover,
  body.editor-page #side .layer:hover{transform:translateY(-1px)}
}
@media (hover:none), (pointer:coarse){
  body.editor-page .app-header button:hover,
  body.editor-page #opts button:hover,
  body.editor-page .timeline-bar button:hover,
  body.editor-page #tools .tgrp-b button:hover,
  body.editor-page #tools .shape-picker button:hover,
  body.editor-page #side .layer:hover{transform:none;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  body.editor-page .app-header button,
  body.editor-page #opts button,
  body.editor-page .timeline-bar button,
  body.editor-page #tools .tgrp-b button,
  body.editor-page #tools .shape-picker button,
  body.editor-page #side .layer{transition:none!important}
}


/* =====================================================================
   PIXAMBAS V81 — visual treatment made visible, still presentation-only.
   Do not style canvas pixels or alter editor geometry/event handlers.
   ===================================================================== */
:root{
  --px-v81-rad:20px;
  --px-v81-line:color-mix(in srgb,var(--ui-accent) 34%,var(--ui-border));
  --px-v81-violet-wash:color-mix(in srgb,var(--px-violet) 11%,var(--ui-surface));
  --px-v81-cyan-wash:color-mix(in srgb,var(--px-cyan) 9%,var(--ui-surface));
  --px-v81-sage-wash:color-mix(in srgb,var(--px-sage) 9%,var(--ui-surface));
}

/* Make the pixel atmosphere visible in the gaps around panels, not over tools. */
body.editor-page #app{
  background-image:
    radial-gradient(ellipse at 7% 6%,color-mix(in srgb,var(--px-violet) 13%,transparent),transparent 36%),
    radial-gradient(ellipse at 94% 88%,color-mix(in srgb,var(--px-cyan) 10%,transparent),transparent 32%),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--ui-accent) 7%,transparent) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--ui-accent) 7%,transparent) 0 1px,transparent 1px 28px);
  background-size:auto,auto,28px 28px,28px 28px;
  background-attachment:fixed;
}

/* Stronger, calm color signatures for each main editor surface. */
body.editor-page #app>header{
  border:1px solid color-mix(in srgb,var(--px-violet) 47%,var(--ui-border))!important;
  border-radius:22px!important;
  background:linear-gradient(112deg,color-mix(in srgb,var(--ui-surface) 86%,var(--px-violet) 14%),color-mix(in srgb,var(--ui-surface) 96%,var(--px-cyan) 4%))!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--px-violet) 13%,transparent),inset 0 1px 0 color-mix(in srgb,white 18%,transparent)!important;
}
body.editor-page #opts,
body.editor-page #tl,
body.editor-page .timeline-bar{
  border:1px solid color-mix(in srgb,var(--px-cyan) 39%,var(--ui-border))!important;
  border-radius:21px!important;
  background-image:
    radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--px-cyan) 11%,transparent),transparent 52%),
    linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 94%,var(--px-cyan) 6%),color-mix(in srgb,var(--ui-surface-2) 94%,var(--px-violet) 6%))!important;
  box-shadow:0 8px 24px rgba(20,25,55,.12),inset 0 1px 0 color-mix(in srgb,white 18%,transparent)!important;
}
body.editor-page #tools{
  border:1px solid color-mix(in srgb,var(--px-violet) 43%,var(--ui-border))!important;
  border-radius:22px!important;
  background-image:
    radial-gradient(ellipse at 0% 0%,color-mix(in srgb,var(--px-violet) 13%,transparent),transparent 48%),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--px-violet) 4.5%,transparent) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--px-violet) 4.5%,transparent) 0 1px,transparent 1px 26px),
    linear-gradient(155deg,color-mix(in srgb,var(--ui-surface) 93%,var(--px-violet) 7%),color-mix(in srgb,var(--ui-surface-2) 94%,var(--px-cyan) 6%))!important;
  box-shadow:0 14px 34px rgba(20,25,55,.14),inset 0 1px 0 color-mix(in srgb,white 17%,transparent)!important;
}
body.editor-page #side{
  border:1px solid color-mix(in srgb,var(--px-cyan) 39%,var(--ui-border))!important;
  border-radius:22px!important;
  background-image:
    radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--px-cyan) 12%,transparent),transparent 48%),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--px-cyan) 3.5%,transparent) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--px-cyan) 3.5%,transparent) 0 1px,transparent 1px 28px),
    linear-gradient(155deg,color-mix(in srgb,var(--ui-surface) 94%,var(--px-cyan) 6%),color-mix(in srgb,var(--ui-surface-2) 94%,var(--px-sage) 6%))!important;
  box-shadow:0 14px 34px rgba(20,25,55,.13),inset 0 1px 0 color-mix(in srgb,white 17%,transparent)!important;
}
/* The stage frame gets the pixel atmosphere; actual canvas elements remain untouched. */
body.editor-page #stage{
  border:1px solid color-mix(in srgb,var(--px-violet) 47%,var(--ui-border))!important;
  border-radius:24px!important;
  background-image:
    radial-gradient(ellipse at 12% 14%,color-mix(in srgb,var(--px-violet) 15%,transparent),transparent 45%),
    radial-gradient(ellipse at 88% 88%,color-mix(in srgb,var(--px-cyan) 11%,transparent),transparent 43%),
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--px-cyan) 5%,transparent) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(90deg,color-mix(in srgb,var(--px-violet) 5%,transparent) 0 1px,transparent 1px 28px),
    linear-gradient(145deg,color-mix(in srgb,var(--ui-surface-3) 91%,var(--px-violet) 9%),color-mix(in srgb,var(--ui-surface-3) 94%,var(--px-cyan) 6%))!important;
  box-shadow:0 16px 38px rgba(20,25,55,.16),inset 0 1px 0 color-mix(in srgb,white 20%,transparent)!important;
}

/* Header clusters have distinct but related accents; no elements are moved. */
body.editor-page .app-header .header-main,
body.editor-page .app-header .header-project,
body.editor-page .app-header .header-history,
body.editor-page .app-header .header-view,
body.editor-page .app-header .header-canvas,
body.editor-page .app-header .header-canvas-actions,
body.editor-page .app-header .header-utilities,
body.editor-page .app-header .header-actions,
body.editor-page .app-header .header-state{
  border:1px solid color-mix(in srgb,var(--ui-accent) 31%,var(--ui-border))!important;
  border-radius:17px!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,white 13%,transparent)!important;
}
body.editor-page .app-header .header-main{background:linear-gradient(140deg,color-mix(in srgb,var(--ui-surface) 82%,var(--px-violet) 18%),color-mix(in srgb,var(--ui-surface) 94%,transparent))!important}
body.editor-page .app-header .header-project,
body.editor-page .app-header .header-canvas{background:linear-gradient(140deg,color-mix(in srgb,var(--ui-surface-2) 84%,var(--px-cyan) 16%),color-mix(in srgb,var(--ui-surface-2) 95%,transparent))!important;border-color:color-mix(in srgb,var(--px-cyan) 42%,var(--ui-border))!important}
body.editor-page .app-header .header-history{background:linear-gradient(140deg,color-mix(in srgb,var(--ui-surface-2) 83%,var(--px-violet) 17%),color-mix(in srgb,var(--ui-surface-2) 94%,transparent))!important;border-color:color-mix(in srgb,var(--px-violet) 43%,var(--ui-border))!important}
body.editor-page .app-header .header-view,
body.editor-page .app-header .header-utilities,
body.editor-page .app-header .header-actions{background:linear-gradient(140deg,color-mix(in srgb,var(--ui-surface-2) 86%,var(--px-sage) 14%),color-mix(in srgb,var(--ui-surface-2) 95%,transparent))!important;border-color:color-mix(in srgb,var(--px-sage) 38%,var(--ui-border))!important}
body.editor-page .app-header button,
body.editor-page .app-header .btn,
body.editor-page .app-header select,
body.editor-page .app-header summary,
body.editor-page #opts button,
body.editor-page #opts select,
body.editor-page .timeline-bar button,
body.editor-page .timeline-bar select{
  border:1px solid color-mix(in srgb,var(--ui-accent) 26%,var(--ui-border))!important;
  background-image:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 90%,var(--ui-accent) 10%),color-mix(in srgb,var(--ui-surface-2) 96%,transparent))!important;
  border-radius:999px!important;
}
body.editor-page .app-header button:hover,
body.editor-page #opts button:hover,
body.editor-page .timeline-bar button:hover{
  border-color:color-mix(in srgb,var(--ui-accent) 62%,var(--ui-border))!important;
  background-image:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 80%,var(--ui-accent) 20%),color-mix(in srgb,var(--ui-surface-2) 91%,var(--px-cyan) 9%))!important;
  box-shadow:0 5px 16px color-mix(in srgb,var(--ui-accent) 18%,transparent)!important;
}
body.editor-page .app-header button.on,
body.editor-page .app-header button[aria-pressed="true"],
body.editor-page #opts button.on,
body.editor-page #opts button[aria-pressed="true"],
body.editor-page .timeline-bar button.on,
body.editor-page .timeline-bar button[aria-pressed="true"]{
  background-image:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 42%,var(--ui-surface)),color-mix(in srgb,var(--px-violet) 25%,var(--ui-surface)))!important;
  border-color:color-mix(in srgb,var(--ui-accent) 70%,var(--ui-border))!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-accent) 18%,transparent),0 6px 16px color-mix(in srgb,var(--ui-accent) 17%,transparent)!important;
}

/* Tool groups are clearer, with a visible pixel-grid inset and stronger selection. */
body.editor-page #tools .tgrp{border:1px solid color-mix(in srgb,var(--px-violet) 23%,var(--ui-border))!important;border-radius:18px!important;background:color-mix(in srgb,var(--ui-surface) 91%,var(--px-violet) 9%)!important}
body.editor-page #tools .tgrp-h{border-radius:999px!important;border-color:color-mix(in srgb,var(--ui-accent) 27%,var(--ui-border))!important;background:linear-gradient(120deg,color-mix(in srgb,var(--ui-surface-2) 84%,var(--px-violet) 16%),color-mix(in srgb,var(--ui-surface-2) 96%,transparent))!important}
body.editor-page #tools .tgrp.open>.tgrp-h{border-color:color-mix(in srgb,var(--ui-accent) 55%,var(--ui-border))!important;background:linear-gradient(120deg,color-mix(in srgb,var(--ui-accent) 19%,var(--ui-surface-2)),color-mix(in srgb,var(--px-cyan) 9%,var(--ui-surface-2)))!important}
body.editor-page #tools .tgrp-b{border-color:color-mix(in srgb,var(--px-violet) 27%,var(--ui-border))!important;border-radius:17px!important;background-image:repeating-linear-gradient(0deg,color-mix(in srgb,var(--px-violet) 4.5%,transparent) 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,color-mix(in srgb,var(--px-violet) 4.5%,transparent) 0 1px,transparent 1px 24px),linear-gradient(140deg,color-mix(in srgb,var(--ui-surface-2) 91%,var(--px-violet) 9%),color-mix(in srgb,var(--ui-surface-2) 95%,var(--px-cyan) 5%))!important}
body.editor-page #tools .tgrp-b button,
body.editor-page #tools .shape-picker button,
body.editor-page #tools .size-presets button{border-radius:15px!important;border-color:color-mix(in srgb,var(--ui-accent) 25%,var(--ui-border))!important;background:linear-gradient(150deg,color-mix(in srgb,var(--ui-surface) 89%,var(--px-violet) 11%),color-mix(in srgb,var(--ui-surface-2) 96%,transparent))!important}
body.editor-page #tools .tgrp-b button.on,
body.editor-page #tools .shape-picker button.on,
body.editor-page #tools .size-presets button.on{background:linear-gradient(145deg,color-mix(in srgb,var(--ui-accent) 30%,var(--ui-surface)),color-mix(in srgb,var(--px-cyan) 13%,var(--ui-surface)))!important;border-color:color-mix(in srgb,var(--ui-accent) 72%,var(--ui-border))!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-accent) 18%,transparent),0 6px 15px color-mix(in srgb,var(--ui-accent) 17%,transparent)!important}
body.editor-page #side>div,
body.editor-page #side details,
body.editor-page #side .panel-card{border-radius:17px!important;border-color:color-mix(in srgb,var(--px-cyan) 24%,var(--ui-border))!important;background:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface-2) 91%,var(--px-cyan) 9%),color-mix(in srgb,var(--ui-surface-2) 97%,var(--px-violet) 3%))!important}
body.editor-page #side .layer{border-radius:14px!important;border-color:color-mix(in srgb,var(--ui-border) 72%,transparent)!important;background:color-mix(in srgb,var(--ui-surface-2) 88%,var(--px-cyan) 12%)!important}
body.editor-page #side .layer.sel{border-color:color-mix(in srgb,var(--ui-accent) 69%,var(--ui-border))!important;background:linear-gradient(120deg,color-mix(in srgb,var(--ui-accent) 23%,var(--ui-surface-2)),color-mix(in srgb,var(--px-cyan) 11%,var(--ui-surface-2)))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-accent) 24%,transparent),0 5px 14px color-mix(in srgb,var(--ui-accent) 10%,transparent)!important}

/* Touch devices keep the same layout; only soften effects so they don't interfere with taps. */
@media (hover:none),(pointer:coarse){
 body.editor-page .app-header button:hover,body.editor-page #opts button:hover,body.editor-page .timeline-bar button:hover,body.editor-page #tools .tgrp-b button:hover,body.editor-page #tools .shape-picker button:hover,body.editor-page #side .layer:hover{transform:none}
 body.editor-page .app-header button,body.editor-page #opts button,body.editor-page .timeline-bar button{transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
}
@media (prefers-reduced-motion:reduce){
 body.editor-page #app,body.editor-page #app *,body.editor-page::before,body.editor-page::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}