/* Pixambas v57 — mirror pointer isolation */
/* Pixambas — Calm Studio UI
   Visual-only system: preserves existing DOM, tools and editor geometry. */
:root{
  --ui-bg:#f3f1ed;
  --ui-surface:#ffffff;
  --ui-surface-2:#f8f7f4;
  --ui-surface-3:#efeee9;
  --ui-border:#dedbd4;
  --ui-border-strong:#cbc6bc;
  --ui-text:#25262a;
  --ui-muted:#77746d;
  --ui-accent:#7b6fe8;
  --ui-accent-strong:#675bd6;
  --ui-accent-soft:rgba(123,111,232,.12);
  --ui-sage:#7eaa93;
  --ui-warm:#d99a7d;
  --ui-danger:#d97d7d;
  --ui-shadow:0 18px 50px rgba(48,49,55,.08),0 3px 12px rgba(48,49,55,.05);
  --ui-shadow-sm:0 8px 24px rgba(48,49,55,.06);
  --ui-radius:18px;
  --ui-radius-sm:12px;
  --ui-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui-display:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ui-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ui-safe-top:env(safe-area-inset-top,0px);
  --ui-safe-bottom:env(safe-area-inset-bottom,0px);
  --tools-w:280px;
  --side-w:300px;
  --bg:var(--ui-bg);
  --panel:var(--ui-surface);
  --ink:var(--ui-text);
  --mute:var(--ui-muted);
  --line:var(--ui-border);
  --acc:var(--ui-accent);
  --accink:#fff;
  --gold:#b28a37;
  --mint:#4e9b79;
  --cell:#e6e4df;
  --cell2:#f8f7f4;
  --px:var(--ui-display);
  color-scheme:light;
}

:root[data-theme="dark"]{
  --ui-bg:#15171b;
  --ui-surface:#1b1e23;
  --ui-surface-2:#20242a;
  --ui-surface-3:#272b32;
  --ui-border:#30353d;
  --ui-border-strong:#414750;
  --ui-text:#f2f0eb;
  --ui-muted:#9b9a95;
  --ui-accent:#9688f0;
  --ui-accent-strong:#8577e1;
  --ui-accent-soft:rgba(150,136,240,.16);
  --ui-sage:#8ab39b;
  --ui-warm:#e0a487;
  --ui-danger:#e28e8e;
  --ui-shadow:0 20px 60px rgba(0,0,0,.26),0 4px 16px rgba(0,0,0,.18);
  --ui-shadow-sm:0 10px 28px rgba(0,0,0,.20);
  --bg:var(--ui-bg);
  --panel:var(--ui-surface);
  --ink:var(--ui-text);
  --mute:var(--ui-muted);
  --line:var(--ui-border);
  --acc:var(--ui-accent);
  --gold:#d1ae64;
  --mint:#77bd9f;
  --cell:#30343a;
  --cell2:#24282d;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth;scroll-padding-top:var(--ui-safe-top)}
body{margin:0;min-height:100%;font-family:var(--ui-font);background:
  radial-gradient(circle at 12% 0%,rgba(123,111,232,.10),transparent 28%),
  radial-gradient(circle at 100% 100%,rgba(126,170,147,.08),transparent 26%),
  var(--ui-bg);color:var(--ui-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

::selection{background:var(--ui-accent);color:#fff}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ui-muted) 28%,transparent);border:2px solid transparent;background-clip:padding-box;border-radius:999px}
::-webkit-scrollbar-track{background:transparent}

button,input,select,textarea{font:inherit;color:inherit}
button,.btn{appearance:none;border:1px solid var(--ui-border);background:var(--ui-surface);color:var(--ui-text);border-radius:var(--ui-radius-sm);padding:8px 12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.1;box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 1px 2px rgba(0,0,0,.03);transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease,color .16s ease}
button:hover,.btn:hover{background:var(--ui-surface-2);border-color:var(--ui-border-strong);box-shadow:var(--ui-shadow-sm);transform:translateY(-1px)}
button:active,.btn:active{transform:translateY(0);box-shadow:none}
button.on{background:var(--ui-accent);border-color:var(--ui-accent);color:#fff;box-shadow:0 8px 20px rgba(123,111,232,.22)}
button:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid color-mix(in srgb,var(--ui-accent) 72%,white);outline-offset:2px}
input[type=text],input[type=search],input[type=number],select,textarea{background:var(--ui-surface-2);border:1px solid var(--ui-border);border-radius:var(--ui-radius-sm);padding:8px 10px;min-height:36px}
input::placeholder,textarea::placeholder{color:var(--ui-muted)}
input[type=range]{accent-color:var(--ui-accent)}
input[type=checkbox]{accent-color:var(--ui-accent)}

/* ===== Pixambas Studio — editor shell ===== */
#app{height:100dvh;min-height:100%;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:10px;padding:12px}
body.dibujo-page #app{grid-template-rows:auto auto minmax(0,1fr)}
header{display:flex;align-items:center;gap:8px;min-height:58px;padding:9px 12px;background:color-mix(in srgb,var(--ui-surface) 92%,transparent);border:1px solid var(--ui-border);border-radius:16px;box-shadow:var(--ui-shadow-sm);backdrop-filter:blur(18px);position:relative;z-index:600;flex-wrap:nowrap;overflow:auto;scrollbar-width:none}
header::-webkit-scrollbar{display:none}
header>*{flex:none}.sp{flex:1;min-width:12px}.row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui-display);font-weight:900;letter-spacing:.08em;color:var(--ui-text);white-space:nowrap}.home{color:var(--ui-muted)}
#ver{color:var(--ui-muted)!important;border:1px solid var(--ui-border)!important;border-radius:999px!important;padding:4px 7px!important;background:var(--ui-surface-2)!important}
#opts{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:14px;box-shadow:var(--ui-shadow-sm);flex-wrap:nowrap;overflow-x:auto;font-size:12px;scrollbar-width:thin;white-space:nowrap}
#opts>*{flex:none}.tn{font-weight:900;color:var(--ui-accent);min-width:92px}
main{display:grid;grid-template-columns:minmax(220px,var(--tools-w,252px)) minmax(0,1fr) minmax(240px,var(--side-w,290px));gap:10px;min-height:0;position:relative;isolation:isolate}
#tools,#side,#tl,#stage{min-width:0}
#tools{width:auto;scrollbar-gutter:stable;background:linear-gradient(180deg,color-mix(in srgb,var(--ui-surface) 98%,transparent),color-mix(in srgb,var(--ui-surface-2) 96%,transparent));border:1px solid var(--ui-border);border-radius:18px;box-shadow:var(--ui-shadow);padding:12px 10px 14px;display:flex;flex-direction:column;gap:8px;overflow:auto;position:relative;align-self:stretch;min-width:0;scrollbar-width:thin}
#tools button{width:100%;min-height:40px;padding:7px 8px;font-size:15px;border-radius:11px}
#tools button:hover{transform:translateY(-1px)}
#tools button.on,#tools button.sel{background:var(--ui-accent-soft);border-color:color-mix(in srgb,var(--ui-accent) 34%,var(--ui-border));color:var(--ui-accent-strong);box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-accent) 18%,transparent)}
.tool-brand{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:6px;padding:6px 7px 10px;margin:0 0 1px;background:color-mix(in srgb,var(--ui-surface) 96%,transparent);border-bottom:1px solid var(--ui-border);color:var(--ui-text);font-weight:900;font-size:11px;letter-spacing:.12em}
.tool-brand b{font-size:12px;background:linear-gradient(100deg,var(--ui-accent-strong),var(--ui-sage),var(--ui-accent-strong));background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pxBrand 6s ease-in-out infinite}.tool-brand i{font-style:normal;color:var(--ui-muted);font-size:9px;letter-spacing:.06em;animation:pxBreath 3.8s ease-in-out infinite}
.tool-active{padding:9px 11px;min-height:36px;display:flex;align-items:center;border:1px solid color-mix(in srgb,var(--ui-accent) 24%,var(--ui-border));background:var(--ui-accent-soft);border-radius:11px;color:var(--ui-accent-strong);font-size:10px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;order:-4}
.tgrp{margin:0;min-width:0;border-radius:13px}.tgrp-h{width:100%;display:grid!important;grid-template-columns:28px minmax(0,1fr) 18px;align-items:center;gap:7px;padding:8px 10px!important;min-height:42px;border:1px solid transparent;background:transparent;border-radius:11px;color:var(--ui-muted);box-shadow:none;text-align:left}
.tgrp-h:hover{background:var(--ui-surface-2);border-color:var(--ui-border)}.tgrp.open>.tgrp-h{background:var(--ui-surface-2);border-color:var(--ui-border);color:var(--ui-text)}
.tgrp-h .tg-ic{font-size:17px;line-height:1;text-align:center}.tgrp-h .tg-nm{font-size:10px;letter-spacing:.08em;font-weight:850;color:inherit;line-height:1.2;text-align:left}.tgrp-h .tg-ch{font-size:11px;color:var(--ui-muted);font-style:normal;text-align:center}
.tgrp-b{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:8px;margin-top:5px;background:var(--ui-surface-2);border:1px solid var(--ui-border);border-radius:12px}.tgrp.open .tgrp-b{display:grid}
.tgrp-b button{min-height:58px;height:auto;aspect-ratio:1;font-size:19px;background:var(--ui-surface);border-color:var(--ui-border);box-shadow:none;position:relative;flex-direction:column;padding:6px 4px 15px!important;gap:2px}.tgrp-b button::after{content:attr(aria-label);position:absolute;left:4px;right:4px;bottom:5px;font-size:7.5px;line-height:1;color:var(--ui-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.tgrp-b button.on::after{color:var(--ui-accent-strong);font-weight:800}.tgrp-b button.on{background:linear-gradient(180deg,var(--ui-accent-soft),color-mix(in srgb,var(--ui-surface) 94%,transparent));border-color:color-mix(in srgb,var(--ui-accent) 42%,var(--ui-border));box-shadow:0 4px 12px rgba(123,111,232,.12)}
#stage{position:relative;overflow:hidden;touch-action:none;cursor:crosshair;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.86),transparent 58%),var(--ui-surface-3);border:1px solid var(--ui-border);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.68),var(--ui-shadow);display:flex;align-items:center;justify-content:center}
:root[data-theme="dark"] #stage{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.035),transparent 58%),#22262c;box-shadow:inset 0 1px 0 rgba(255,255,255,.03),var(--ui-shadow)}
#wrap{position:absolute;left:0;top:0;transform-origin:0 0;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 14px 36px rgba(32,35,40,.10)}#wrap canvas{position:absolute;left:0;top:0;display:block;pointer-events:none}#wrap canvas,#cv{image-rendering:auto}.dibujo-page #v,.dibujo-page #o{image-rendering:auto}
.pixel-page #wrap{background:repeating-conic-gradient(var(--cell) 0 25%,var(--cell2) 0 50%) 0/16px 16px;box-shadow:0 0 0 1px rgba(0,0,0,.09),0 16px 40px rgba(36,38,43,.14)}.pixel-page #wrap canvas,.pixel-page #cv,.pixel-page #on{image-rendering:pixelated}.dibujo-page #wrap canvas{image-rendering:auto}
.pixel-page #on{position:absolute;inset:0;pointer-events:none;display:block}#grid{position:absolute;inset:0;pointer-events:none}#sbox{position:absolute;display:block;border:1.5px dashed var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 8%,transparent);box-shadow:0 0 0 1px rgba(255,255,255,.75) inset;pointer-events:none}#sbox[hidden]{display:none}
.pixel-page #tgrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;padding:4px;align-content:start}.pixel-page #tgrid .tp{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-width:0;padding:8px;background:var(--ui-surface-2);border:1px solid var(--ui-border);border-radius:12px;color:var(--ui-text);font-size:10px;line-height:1.2;cursor:pointer;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}.pixel-page #tgrid .tp:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--ui-accent) 42%,var(--ui-border));box-shadow:var(--ui-shadow-sm)}.pixel-page #tgrid .tp canvas{width:62px;height:62px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:8px;image-rendering:pixelated;object-fit:contain}
#side{position:relative;background:color-mix(in srgb,var(--ui-surface) 97%,transparent);border:1px solid var(--ui-border);border-radius:18px;box-shadow:var(--ui-shadow);padding:10px;overflow:auto;display:flex;flex-direction:column;gap:9px;min-width:0;scrollbar-width:thin}
#side>div,#side details{background:var(--ui-surface-2);border:1px solid var(--ui-border);border-radius:13px;padding:11px;margin:0}#side h3,#side summary,#side .grp>h4{margin:0 0 9px;color:var(--ui-text);border:0;padding:0;font-size:10px;font-weight:850;letter-spacing:.11em;text-transform:uppercase}#side summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}#side details[open] summary{margin-bottom:10px}#side summary::-webkit-details-marker{display:none}#side summary::after{content:'⌄';font-size:12px;color:var(--ui-muted);transition:transform .16s ease}#side details[open] summary::after{transform:rotate(180deg)}#side label{display:block;color:var(--ui-muted);font-size:11px;line-height:1.5}#side input[type=range]{width:100%;margin:6px 0}
#side .layer{display:flex;align-items:center;gap:6px;padding:6px;border:1px solid transparent;border-radius:10px;background:transparent;margin:2px 0;cursor:pointer;color:var(--ui-text)}#side .layer:hover{background:var(--ui-surface-3);border-color:var(--ui-border)}#side .layer.sel{background:var(--ui-accent-soft);border-color:color-mix(in srgb,var(--ui-accent) 34%,var(--ui-border))}#side .layer span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}#side .layer button{padding:5px 7px;min-height:30px;background:transparent;border-color:transparent;box-shadow:none}
/* Docked settings and color controls */
.tool-props{margin-top:2px;order:-3;position:relative;z-index:5;display:grid;gap:8px;padding:9px;background:color-mix(in srgb,var(--ui-surface-2) 96%,transparent);border:1px solid var(--ui-border);border-radius:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.45);backdrop-filter:blur(14px);max-height:min(42dvh,360px);overflow:auto;scrollbar-width:thin}.tool-props-title{font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--ui-muted)}.tool-props label{display:grid;gap:4px;font-size:10px;color:var(--ui-muted)}.tool-props input[type=range]{width:100%;margin:0}.tool-props input[type=number],.tool-props select{width:100%;min-width:0;min-height:32px;padding:6px 8px;font-size:10px}.tool-props details{background:transparent;border:0;padding:0;margin:0}.tool-native-settings h3{font-size:9px!important;margin-bottom:6px!important}.dock-size{background:var(--ui-surface);padding:8px;border:1px solid var(--ui-border);border-radius:11px}.tool-value{font:800 9px var(--ui-mono);color:var(--ui-accent);float:right}
.shape-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.shape-picker button{min-height:34px!important;padding:4px!important;font-size:15px!important;border-radius:9px!important;background:var(--ui-surface)!important}.shape-picker button.on{background:var(--ui-accent-soft)!important;color:var(--ui-accent-strong)!important;border-color:color-mix(in srgb,var(--ui-accent) 42%,var(--ui-border))!important;box-shadow:none!important}.shape-picker span{font-size:8px;color:var(--ui-muted);text-align:center;line-height:1.1}.dock-size,.dock-effect{background:var(--ui-surface);padding:8px;border:1px solid var(--ui-border);border-radius:11px}.dock-size input[type=range],.dock-effect input[type=range]{margin-top:5px}
@keyframes pxBrand{0%,100%{background-position:0% 50%;filter:saturate(.95)}50%{background-position:100% 50%;filter:saturate(1.15)}}

.color-editor{display:grid;grid-template-columns:54px 1fr;align-items:center;gap:10px;margin:3px 0 9px}.color-swatch{position:relative;width:54px;height:54px;border-radius:14px;overflow:hidden;border:1px solid var(--ui-border);background:var(--ui-surface-3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 5px 14px rgba(0,0,0,.06);display:block;cursor:pointer}.color-swatch span{position:absolute;inset:0;background:var(--active-color,#14102a)}.color-swatch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.color-meta{display:flex;flex-direction:column;gap:3px}.color-meta strong{font-size:12px}.color-meta small{font-size:10px;color:var(--ui-muted)}
.pal{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;align-items:center;width:100%}.sw{appearance:none;-webkit-appearance:none;width:100%;aspect-ratio:1;height:auto;min-width:0;min-height:0;padding:0;margin:0;border:1px solid rgba(20,25,38,.14)!important;border-radius:8px!important;box-shadow:0 1px 2px rgba(20,25,38,.10),inset 0 0 0 1px rgba(255,255,255,.22)!important;background:var(--swatch-color,#fff)!important;background-image:none!important;display:block;cursor:pointer;position:relative;overflow:hidden}.sw:hover{transform:translateY(-1px)}.sw.sel{outline:2px solid var(--ui-accent)!important;outline-offset:2px!important}
/* Timeline */
#tl{background:linear-gradient(180deg,color-mix(in srgb,var(--ui-surface) 99%,transparent),color-mix(in srgb,var(--ui-surface-2) 96%,transparent));border:1px solid var(--ui-border);border-radius:16px;box-shadow:var(--ui-shadow-sm);padding:8px 12px;display:flex;align-items:center;gap:10px;overflow-x:auto;min-height:82px;max-height:94px;position:relative;z-index:30;scrollbar-width:thin;scrollbar-gutter:stable}#tl strong,#tl .tn{font-size:9px;font-weight:850;letter-spacing:.11em;color:var(--ui-muted);flex:none;white-space:nowrap}#frames{display:flex;gap:6px;align-items:center} .fr{border:1px solid var(--ui-border);border-radius:10px;padding:3px;text-align:center;font-size:9px;cursor:pointer;flex:none;background:var(--ui-surface-2);color:var(--ui-muted)}.fr:hover{border-color:var(--ui-border-strong)}.fr.sel{border-color:var(--ui-accent);box-shadow:0 0 0 2px var(--ui-accent-soft);background:var(--ui-surface)}.fr canvas{display:block;width:54px;height:54px;object-fit:contain;background:var(--cell2);image-rendering:pixelated;border-radius:7px}#tl .row{flex:none}
/* Resizers: one visible grip per panel */
.hide-tools #tools{display:none!important}.hide-side #side{display:none!important}.hide-tl #tl{display:none!important}.hide-tools main{grid-template-columns:minmax(0,1fr) var(--side-w)}.hide-side main{grid-template-columns:var(--tools-w) minmax(0,1fr)}.hide-tools.hide-side main{grid-template-columns:minmax(0,1fr)}
.panel-resizer{position:absolute;top:8px;bottom:8px;width:18px;margin:0;z-index:55;cursor:col-resize;touch-action:none;border-radius:999px;display:flex;align-items:center;justify-content:center;background:transparent}.tools-resizer{left:calc(var(--tools-w) - 8px)}.side-resizer{right:calc(var(--side-w) - 8px)}.hide-tools .tools-resizer,.hide-side .side-resizer{display:none}.panel-resizer::before{content:"";width:3px;height:64px;border-radius:999px;background:var(--ui-border);transition:all .16s ease}.panel-resizer:hover::before,.panel-resizer.dragging::before{background:var(--ui-accent);height:92px;box-shadow:0 0 0 3px var(--ui-accent-soft)}
/* Floating tools on touch devices */
#toolsfab,#sidefab{position:fixed;z-index:850;width:50px;height:50px;border-radius:50%;background:var(--ui-surface);color:var(--ui-accent-strong);border:1px solid var(--ui-border);box-shadow:0 14px 30px rgba(72,65,145,.18);display:none;font-weight:900}#toolsfab{left:14px;bottom:calc(76px + var(--ui-safe-bottom))}#sidefab{right:14px;bottom:calc(76px + var(--ui-safe-bottom))}
#fly,#mp{position:fixed;z-index:800;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:14px;padding:7px;display:flex;flex-direction:column;gap:5px;box-shadow:var(--ui-shadow)}#fly[hidden],#mp[hidden]{display:none}#fly button{text-align:left;justify-content:flex-start}#mp{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;max-width:min(340px,90vw);padding:12px}.mp label{font-size:11px;color:var(--ui-muted)}
#txbar,#selbar{position:fixed;left:50%;transform:translateX(-50%);z-index:700;display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;max-width:96vw;padding:9px 12px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:13px;box-shadow:var(--ui-shadow-sm);font-size:12px}#txbar[hidden],#selbar[hidden]{display:none}
#gd{position:absolute;inset:0;pointer-events:none;display:none;border-radius:14px;background:linear-gradient(90deg,transparent 33.2%,rgba(123,111,232,.35) 33.3%,transparent 33.5%,transparent 66.5%,rgba(123,111,232,.35) 66.6%,transparent 66.8%),linear-gradient(0deg,transparent 33.2%,rgba(123,111,232,.35) 33.3%,transparent 33.5%,transparent 66.5%,rgba(123,111,232,.35) 66.6%,transparent 66.8%),linear-gradient(90deg,transparent 49.9%,rgba(217,154,125,.35) 50%,transparent 50.1%)}
#refp{background:var(--ui-surface);border:1px solid var(--ui-border)!important;border-radius:15px!important;box-shadow:var(--ui-shadow)!important}.ad{border:1px dashed var(--ui-border);border-radius:11px;padding:10px;text-align:center;color:var(--ui-muted);font-size:11px;margin:8px 0;min-height:54px;background:transparent}.ad small{opacity:.75}
/* Helpers, popovers and dialogs */
.tpd{width:min(920px,94vw);max-width:none;padding:0;background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.20)}.tpd::backdrop,dialog::backdrop{background:rgba(20,22,26,.42);backdrop-filter:blur(4px)}dialog{border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-surface);color:var(--ui-text);box-shadow:0 24px 70px rgba(0,0,0,.20);padding:22px;max-width:620px}.tph{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ui-border);background:var(--ui-surface-2)}.chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px 0}.tpn{margin:8px 16px;color:var(--ui-muted);font-size:12px;line-height:1.5}.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:10px;padding:4px 16px 16px;max-height:62dvh;overflow:auto}
/* ===== Responsive editor layout — single source of truth ===== */
@media(max-width:1180px){
  :root{--tools-w:270px;--side-w:294px}
  header{gap:7px}
  #opts{gap:7px}
}
@media(max-width:1000px){
  :root{--tools-w:248px;--side-w:280px}
  main{gap:8px}
}
@media(max-width:900px){
  #app{padding:8px;gap:8px}
  header{min-height:54px;border-radius:14px;padding:7px 8px;overflow-x:auto;scrollbar-width:none}
  header::-webkit-scrollbar{display:none}
  header>*{flex:none!important}
  header button,header select{min-height:38px;padding:7px 9px;font-size:12px}
  #opts{padding:7px 8px;border-radius:12px;gap:8px}
  .editor-page main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);gap:8px}
  .editor-page #stage{order:1;min-height:0;padding:4px;border-radius:15px}
  .editor-page #tl{order:0;min-height:66px;max-height:88px;border-radius:13px;padding:6px 7px}
  .pixel-page #tl{grid-row:2;order:initial}
  .pixel-page #opts{grid-row:3;order:initial}
  .pixel-page main{grid-row:4}
  .dibujo-page #tl{grid-row:2}
  .dibujo-page main{grid-row:3}
  #tools{position:fixed!important;left:10px;top:calc(132px + var(--ui-safe-top));bottom:10px;width:min(320px,calc(100vw - 20px));z-index:880;border-radius:18px;padding:9px;display:none!important;box-shadow:0 18px 45px rgba(0,0,0,.20)}
  body.tools-open #tools{display:flex!important}
  #side{position:fixed!important;right:10px;top:calc(132px + var(--ui-safe-top));bottom:10px;width:min(320px,calc(100vw - 20px));z-index:870;border-radius:18px;display:none!important;box-shadow:0 18px 45px rgba(0,0,0,.20)}
  body.side-open #side{display:flex!important}
  #toolsfab,#sidefab{display:flex!important;align-items:center;justify-content:center}
  .panel-resizer{display:none!important}
  #txbar,#selbar{top:136px!important;max-width:calc(100vw - 20px);overflow:auto}
  .pal{gap:8px}
  #frames{gap:6px}.fr canvas{width:50px;height:50px}
  body.home-page main{padding:46px 16px 36px}
  body.home-page main .sel{grid-template-columns:1fr}
  .info{grid-template-columns:1fr}
  body.privacy-page main{padding:42px 16px 56px}
  .mascot{width:34px;height:34px}
  .editor-page header #save{max-width:120px}
  .tool-props{max-height:310px!important;flex:none}
}
@media(max-width:560px){
  #opts{font-size:11px}
  .tn{min-width:70px}
  .tgrp-b{grid-template-columns:repeat(3,minmax(0,1fr))}
  .color-editor{grid-template-columns:48px 1fr}
  .color-swatch{width:48px;height:48px}
  .pal{grid-template-columns:repeat(6,minmax(0,1fr))}
  #tl{flex-wrap:nowrap;overflow-x:auto}
  .fr canvas{width:46px;height:46px}
  #tools,#side{width:min(320px,calc(100vw - 16px));left:8px;right:8px}
  #side{left:auto}
  body.home-page main h1{font-size:clamp(34px,13vw,60px)}
  body.home-page main .tag{font-size:16px}
  .art{height:160px}
}
@media(pointer:coarse){
  button{min-height:44px}
  #tools button{min-height:46px}
  .panel-resizer{width:24px!important}
  input[type=range]{min-height:40px}
  select{min-height:42px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}
}


/* Landing page */
body.home-page{background:
  radial-gradient(circle at 10% 5%,rgba(123,111,232,.12),transparent 27%),
  radial-gradient(circle at 90% 90%,rgba(126,170,147,.10),transparent 24%),
  var(--ui-bg)}
body.home-page main{max-width:1120px;margin:0 auto;padding:52px 24px 40px;text-align:center;display:block;min-height:100vh}
body.home-page main h1{font:800 clamp(42px,8vw,88px)/1 var(--ui-display);letter-spacing:-.055em;color:var(--ui-text);margin:0 0 14px}
body.home-page main .tag{margin:0 auto 14px;color:var(--ui-muted);font-size:18px;line-height:1.6}.tag b{color:var(--ui-accent);font-weight:800}
body.home-page main .start{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 13px;border-radius:999px;background:var(--ui-accent-soft);color:var(--ui-accent);font-size:11px;font-weight:800;letter-spacing:.11em;animation:none}
body.home-page main .sel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:34px 0 26px;text-align:left}
body.home-page main .card{position:relative;display:block;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:22px;box-shadow:var(--ui-shadow);padding:18px;color:var(--ui-text);text-decoration:none;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.card:hover{transform:translateY(-3px);box-shadow:0 24px 50px rgba(48,49,55,.12);border-color:color-mix(in srgb,var(--ui-accent) 34%,var(--ui-border))}
body.home-page main .card h2{font:800 21px/1.25 var(--ui-display);letter-spacing:-.02em;color:var(--ui-text);margin:16px 0 7px}.card p{color:var(--ui-muted);line-height:1.55;margin:0 0 16px}.card .go{display:inline-flex;align-items:center;gap:6px;color:var(--ui-accent);font-weight:800;font-size:12px}.art{height:190px;border:1px solid var(--ui-border);border-radius:16px;background:linear-gradient(135deg,var(--ui-surface-3),var(--ui-surface-2));display:grid;place-items:center;overflow:hidden}.art canvas{width:148px;height:148px;image-rendering:pixelated}
body.home-page main .lock{opacity:.56;border-style:dashed}.info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:16px 0 18px;text-align:left}.box{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:16px;box-shadow:var(--ui-shadow-sm);padding:16px}.box h3{font:800 12px/1.4 var(--ui-display);color:var(--ui-text);margin:0 0 9px}.box ul{margin:0;padding-left:18px;color:var(--ui-muted);line-height:1.65;font-size:13px}.free{background:linear-gradient(135deg,var(--ui-accent-soft),rgba(126,170,147,.10));border:1px solid color-mix(in srgb,var(--ui-accent) 28%,var(--ui-border));box-shadow:none;text-align:center;margin:0 0 22px;padding:18px!important;border-radius:16px}.free h2{font:800 14px var(--ui-display);color:var(--ui-text);margin:0 0 7px}.free p{margin:0;color:var(--ui-muted);line-height:1.6}footer{color:var(--ui-muted);font-size:12px;line-height:1.6}
#thm{position:fixed;top:14px;right:14px;z-index:950;width:42px;height:42px;border-radius:50%;padding:0;background:var(--ui-surface);border:1px solid var(--ui-border);color:var(--ui-text);box-shadow:var(--ui-shadow-sm)}

/* Privacy */
body.privacy-page main{max-width:820px;margin:0 auto;padding:52px 22px 70px;min-height:100vh}
body.privacy-page h1{font:800 clamp(32px,5vw,54px)/1.08 var(--ui-display);letter-spacing:-.04em;color:var(--ui-text);margin:0 0 10px}
body.privacy-page .sub{color:var(--ui-muted);margin:0 0 30px;font-size:13px}body.privacy-page .back{display:inline-flex;align-items:center;margin:0 0 24px;color:var(--ui-accent);font-weight:800;text-decoration:none}
body.privacy-page .card{background:var(--ui-surface);border:1px solid var(--ui-border);box-shadow:var(--ui-shadow-sm);border-radius:18px;padding:20px 22px;margin:0 0 14px}body.privacy-page .card h2{font:800 14px/1.35 var(--ui-display);color:var(--ui-text);margin:0 0 10px}body.privacy-page .card p,body.privacy-page .card li{line-height:1.75;color:var(--ui-muted)}body.privacy-page .card a{color:var(--ui-accent)!important}


/* Tool dock refinements consolidated above. */

/* Dibujo: idioma/tema permanecen dentro de la cabecera y nunca flotan sobre el lienzo. */
body.dibujo-page #thm{position:static;inset:auto;width:38px;height:38px;border-radius:11px;padding:0;flex:none}
body.dibujo-page #dlangsel{min-height:38px;height:38px;padding:7px 9px;border-radius:11px;background:var(--ui-surface-2);border:1px solid var(--ui-border);color:var(--ui-text);flex:none}

/* V46 timeline order: keep animation controls between header and editor without covering header actions. */
.pixel-page #tl{grid-row:2}.pixel-page #opts{grid-row:3}.pixel-page main{grid-row:4}
.dibujo-page #tl{grid-row:2}.dibujo-page main{grid-row:3}
.pixel-page #tl,.dibujo-page #tl{align-self:start}
@media(max-width:900px){.pixel-page #tl,.dibujo-page #tl{min-height:72px;max-height:92px}.tgrp-b{grid-template-columns:repeat(3,minmax(0,1fr))}}

.panel-resizer:focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}

.mascot{width:42px;height:42px;flex:none;display:block}.editor-page header #save{display:block;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ui-muted);font-size:11px}


/* =====================================================================
   PIXAMBAS V47 — calm studio editor UI
   This section is the single visual source for the editor shell.
   No tool logic is changed here; existing IDs remain intact.
   ===================================================================== */
:root{
  --ui-bg:#f2f0ed;
  --ui-surface:#ffffff;
  --ui-surface-2:#faf9f7;
  --ui-surface-3:#eeece8;
  --ui-border:#e1ddd7;
  --ui-border-strong:#cbc5bd;
  --ui-text:#28272a;
  --ui-muted:#77736e;
  --ui-accent:#7a6ee8;
  --ui-accent-strong:#6659d6;
  --ui-accent-soft:rgba(122,110,232,.115);
  --ui-sage:#80a996;
  --ui-warm:#d69c82;
  --ui-danger:#cf7777;
  --ui-shadow:0 16px 42px rgba(53,50,57,.08),0 3px 12px rgba(53,50,57,.05);
  --ui-shadow-sm:0 7px 22px rgba(53,50,57,.055);
  --tools-w:304px;
  --side-w:316px;
}
:root[data-theme="dark"]{
  --ui-bg:#17191d;
  --ui-surface:#1d2025;
  --ui-surface-2:#23272d;
  --ui-surface-3:#292d34;
  --ui-border:#343941;
  --ui-border-strong:#4a505a;
  --ui-text:#f2f0ec;
  --ui-muted:#a2a09a;
  --ui-accent:#9688f1;
  --ui-accent-strong:#aa9ff5;
  --ui-accent-soft:rgba(150,136,241,.17);
  --ui-sage:#87b59d;
  --ui-warm:#dfa48a;
  --ui-shadow:0 18px 56px rgba(0,0,0,.26),0 4px 16px rgba(0,0,0,.18);
  --ui-shadow-sm:0 10px 28px rgba(0,0,0,.20);
}

body.editor-page{position:relative;overflow:hidden;background:
 radial-gradient(circle at 8% 0%,rgba(122,110,232,.11),transparent 28%),
 radial-gradient(circle at 94% 100%,rgba(128,169,150,.10),transparent 26%),
 var(--ui-bg)}
body.editor-page::before,body.editor-page::after{content:"";position:fixed;pointer-events:none;border-radius:999px;filter:blur(4px);opacity:.35;z-index:0}
body.editor-page::before{width:240px;height:240px;left:-120px;top:18%;background:radial-gradient(circle,rgba(122,110,232,.18),transparent 70%);animation:pxFloatA 18s ease-in-out infinite}
body.editor-page::after{width:220px;height:220px;right:-120px;bottom:8%;background:radial-gradient(circle,rgba(128,169,150,.16),transparent 70%);animation:pxFloatB 22s ease-in-out infinite}
@keyframes pxFloatA{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(28px,-18px,0)}}
@keyframes pxFloatB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-24px,16px,0)}}

#app{position:relative;z-index:1;height:100dvh;min-height:100%;display:grid;grid-template-rows:58px 104px 58px minmax(0,1fr);gap:10px;padding:10px}
body.dibujo-page #app{grid-template-rows:58px 104px minmax(0,1fr)}
.app-header{display:flex;align-items:center;gap:8px;min-width:0;min-height:58px;padding:8px 10px;background:color-mix(in srgb,var(--ui-surface) 94%,transparent);border:1px solid var(--ui-border);border-radius:17px;box-shadow:var(--ui-shadow-sm);backdrop-filter:blur(18px);position:relative;z-index:600;overflow:hidden}
.header-cluster{display:flex;align-items:center;gap:7px;min-width:0;padding:3px 5px;border-radius:12px}
.header-cluster + .header-cluster{border-left:1px solid var(--ui-border);padding-left:10px}
.header-main{padding-left:2px}.header-main .home{white-space:nowrap}.header-main .logo{padding:0 5px}
.header-project,.header-history,.header-view,.header-canvas,.header-canvas-actions,.header-actions{background:color-mix(in srgb,var(--ui-surface-2) 72%,transparent)}
.header-view{overflow:auto;scrollbar-width:none}.header-view::-webkit-scrollbar{display:none}.header-state{padding-inline:8px}
.sp{flex:1 1 auto;min-width:12px}.logo{display:inline-flex;align-items:center;gap:8px;font-weight:900;letter-spacing:.08em;white-space:nowrap}.logo span,.logo{color:var(--ui-text)}
.logo span,.header-main .logo:not(:has(svg)){background:linear-gradient(100deg,var(--ui-accent-strong),var(--ui-sage),var(--ui-warm),var(--ui-accent-strong));background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pxBrand47 7s ease-in-out infinite}
.logo .mascot{filter:drop-shadow(0 4px 10px rgba(122,110,232,.18))}.mascot{width:38px;height:38px;flex:none;display:block}
@keyframes pxBrand47{0%,100%{background-position:0 50%;}50%{background-position:100% 50%;}}
#pname{width:132px;min-width:108px;min-height:34px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:10px;padding:7px 10px}
#save{white-space:nowrap;font-size:11px;color:var(--ui-muted);font-weight:750}
header button,header .btn,header select{min-height:36px;border-radius:10px;padding:7px 10px;font-size:12px;white-space:nowrap}
header .icon-btn{width:36px;padding:0}.home{font-weight:750}
#ver{font-size:9px!important;color:var(--ui-muted)!important;border:1px solid var(--ui-border)!important;border-radius:999px!important;padding:4px 7px!important;margin-left:0!important;background:var(--ui-surface-2)!important}
#theme{width:38px;padding:0}

.context-bar{display:flex;align-items:center;gap:9px;min-width:0;padding:7px 10px;background:color-mix(in srgb,var(--ui-surface) 96%,transparent);border:1px solid var(--ui-border);border-radius:15px;box-shadow:var(--ui-shadow-sm);overflow:auto;scrollbar-width:thin}
.opts-group{display:flex;align-items:center;gap:8px;min-width:0;padding:4px 8px;border-radius:11px;background:var(--ui-surface-2);border:1px solid var(--ui-border)}
.opts-group label{display:flex;align-items:center;gap:5px;color:var(--ui-muted);font-size:11px;white-space:nowrap}.opts-group input[type=number],.opts-group select{min-height:32px;padding:6px 8px;font-size:11px}
.opts-tool .tn{color:var(--ui-accent-strong);font-size:11px;font-weight:900;letter-spacing:.04em;min-width:auto}
.opts-view{margin-left:auto}.tile-preview{display:none;width:38px;height:38px;image-rendering:pixelated;border:1px solid var(--ui-border);border-radius:8px}

main{display:grid;grid-template-columns:minmax(260px,var(--tools-w)) minmax(0,1fr) minmax(260px,var(--side-w));gap:10px;min-height:0;position:relative;isolation:isolate}
#tools,#side,#stage,#tl{min-width:0}
#tools{width:auto;background:linear-gradient(180deg,color-mix(in srgb,var(--ui-surface) 98%,transparent),color-mix(in srgb,var(--ui-surface-2) 92%,transparent));border:1px solid var(--ui-border);border-radius:18px;box-shadow:var(--ui-shadow);padding:10px;display:flex;flex-direction:column;gap:7px;overflow:auto;position:relative;min-width:0;scrollbar-width:thin}
#tools::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--ui-accent),var(--ui-sage),var(--ui-warm));opacity:.55}
.tool-brand{position:sticky;top:0;z-index:10;display:flex;align-items:baseline;gap:6px;padding:7px 8px 9px;margin:-2px 0 0;background:color-mix(in srgb,var(--ui-surface) 94%,transparent);border-bottom:1px solid var(--ui-border)}
.tool-brand b{font-size:13px;letter-spacing:.12em;background:linear-gradient(100deg,var(--ui-accent-strong),var(--ui-sage),var(--ui-warm),var(--ui-accent-strong));background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pxBrand47 7s ease-in-out infinite}.tool-brand i{font-size:9px;color:var(--ui-muted);font-style:normal;letter-spacing:.08em}
.tool-active{display:flex;align-items:center;min-height:38px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--ui-accent) 25%,var(--ui-border));background:var(--ui-accent-soft);border-radius:11px;color:var(--ui-accent-strong);font-size:10px;font-weight:850;order:-10;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tgrp{border-radius:12px}.tgrp-h{width:100%;display:grid!important;grid-template-columns:30px minmax(0,1fr) 18px;align-items:center;gap:8px;min-height:40px;padding:7px 9px!important;background:transparent;border:1px solid transparent;border-radius:10px;color:var(--ui-muted);text-align:left;box-shadow:none}
.tgrp-h:hover{background:var(--ui-surface-2);border-color:var(--ui-border)}.tgrp.open>.tgrp-h{background:var(--ui-surface-2);border-color:var(--ui-border);color:var(--ui-text)}
.tgrp-h .tg-ic{font-size:17px;text-align:center}.tgrp-h .tg-nm{font-size:9px;font-weight:900;letter-spacing:.1em}.tgrp-h .tg-ch{font-style:normal;color:var(--ui-muted);font-size:10px}
.tgrp-b{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:7px;background:var(--ui-surface-2);border:1px solid var(--ui-border);border-radius:12px;margin:5px 0}
.tgrp.open .tgrp-b{display:grid}.tgrp-b button{min-height:60px!important;aspect-ratio:1;background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:10px!important;padding:7px 4px 15px!important;font-size:19px!important;position:relative;box-shadow:none!important;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.tgrp-b button::after{content:attr(aria-label);position:absolute;left:3px;right:3px;bottom:5px;color:var(--ui-muted);font-size:8px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.tgrp-b button.on{background:linear-gradient(180deg,var(--ui-accent-soft),var(--ui-surface))!important;border-color:color-mix(in srgb,var(--ui-accent) 45%,var(--ui-border))!important;box-shadow:0 6px 16px rgba(122,110,232,.12)!important}.tgrp-b button.on::after{color:var(--ui-accent-strong);font-weight:900}
.tool-props{order:-5;display:grid;gap:8px;padding:9px;background:var(--ui-surface-2);border:1px solid var(--ui-border);border-radius:14px;box-shadow:var(--ui-shadow-sm);max-height:min(54dvh,500px);overflow:auto;scrollbar-width:thin}
.tool-props-title{font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--ui-muted);text-transform:uppercase}.tool-props label{display:grid;gap:5px;font-size:10px;color:var(--ui-muted)}.tool-props input[type=range]{width:100%;margin:0}.tool-props input[type=number],.tool-props select{width:100%;min-height:34px;font-size:11px;padding:6px 8px}

.dock-size,.dock-effect{display:grid;gap:5px;background:var(--ui-surface);padding:9px;border:1px solid var(--ui-border);border-radius:11px}.tool-value{float:right;font:800 10px var(--ui-mono);color:var(--ui-accent-strong)}
.shape-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.shape-picker button{min-height:36px!important;padding:4px!important;font-size:15px!important;border-radius:9px!important}.shape-picker button.on{background:var(--ui-accent-soft)!important;border-color:color-mix(in srgb,var(--ui-accent) 40%,var(--ui-border))!important;color:var(--ui-accent-strong)!important}

#side{position:relative;background:color-mix(in srgb,var(--ui-surface) 97%,transparent);border:1px solid var(--ui-border);border-radius:18px;box-shadow:var(--ui-shadow);padding:10px;overflow:auto;display:flex;flex-direction:column;gap:9px;scrollbar-width:thin}
#side>div,#side details{background:var(--ui-surface-2);border:1px solid var(--ui-border);border-radius:13px;padding:11px;margin:0}#side h3,#side summary{margin:0 0 8px;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--ui-text)}#side summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}#side summary::-webkit-details-marker{display:none}#side summary::after{content:"⌄";color:var(--ui-muted);transition:transform .18s ease}#side details[open] summary::after{transform:rotate(180deg)}#side details[open] summary{margin-bottom:10px}#side label{font-size:11px;color:var(--ui-muted);line-height:1.45}#side input[type=range]{width:100%}
#side .layer{display:flex;align-items:center;gap:6px;padding:7px;border:1px solid transparent;border-radius:10px;background:transparent;color:var(--ui-text)}#side .layer.sel{background:var(--ui-accent-soft);border-color:color-mix(in srgb,var(--ui-accent) 32%,var(--ui-border))}#side .layer:hover{background:var(--ui-surface-3)}

/* Color cards: intentionally large and readable. */
.color-editor{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px;margin:4px 0 10px}.color-swatch{position:relative;width:76px;height:76px;border-radius:16px;overflow:hidden;border:1px solid var(--ui-border-strong);background:var(--ui-surface-3);display:block;cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22),0 8px 18px rgba(35,30,50,.08)}.color-swatch span{position:absolute;inset:0;background:var(--active-color,#14102a)}.color-swatch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.color-meta{display:flex;flex-direction:column;gap:5px}.color-meta strong{font-size:12px}.color-meta small{font-size:10px;color:var(--ui-muted)}.panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.panel-title h3{margin:0!important}.panel-title span{font:800 10px var(--ui-mono);color:var(--ui-accent-strong);background:var(--ui-accent-soft);border-radius:999px;padding:4px 7px}
.pal{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;align-items:center;width:100%}.sw{appearance:none!important;-webkit-appearance:none!important;width:100%;aspect-ratio:1;height:auto;min-width:0;min-height:0!important;padding:0!important;margin:0!important;border:1px solid rgba(25,25,35,.16)!important;border-radius:9px!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 2px 4px rgba(20,20,30,.08)!important;background:var(--swatch-color,#fff)!important;background-image:none!important;display:block!important;cursor:pointer;position:relative;overflow:hidden}.sw:hover{transform:translateY(-1px) scale(1.02)}.sw.sel{outline:2px solid var(--ui-accent)!important;outline-offset:2px!important}

/* Timeline: separated groups prevent the previous "wall of buttons". */
.timeline-bar{background:linear-gradient(180deg,color-mix(in srgb,var(--ui-surface) 98%,transparent),color-mix(in srgb,var(--ui-surface-2) 95%,transparent));border:1px solid var(--ui-border);border-radius:16px;box-shadow:var(--ui-shadow-sm);padding:8px 10px;display:grid;align-items:center;gap:8px;overflow:hidden;position:relative;z-index:40}
.pixel-page .timeline-bar{grid-template-columns:auto auto minmax(0,1fr) auto auto}.dibujo-page .timeline-bar{grid-template-columns:auto auto minmax(0,1fr) auto}
.tl-brand{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:96px;padding:0 6px}.tl-brand strong{font-size:10px;letter-spacing:.12em;color:var(--ui-text)}.tl-caption{font-size:9px;color:var(--ui-muted)}
.tl-transport,.tl-actions,.tl-settings{background:var(--ui-surface-2);border:1px solid var(--ui-border);border-radius:11px;padding:4px;display:flex;align-items:center;gap:5px;min-width:0}.tl-transport button,.tl-actions button{width:34px;height:34px;min-height:34px;padding:0;border-radius:9px}.tl-transport #play,.tl-transport #pl{background:var(--ui-accent);border-color:var(--ui-accent);color:#fff;box-shadow:0 6px 16px rgba(122,110,232,.22)}
.tl-frames{display:flex;align-items:center;gap:7px;min-width:0;overflow-x:auto;overflow-y:hidden;padding:1px 2px;scrollbar-width:thin}.fr{border:1px solid var(--ui-border);border-radius:10px;padding:3px;text-align:center;font-size:9px;cursor:pointer;flex:none;background:var(--ui-surface-2);color:var(--ui-muted)}.fr.sel{border-color:var(--ui-accent);background:var(--ui-accent-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-accent) 14%,transparent)}.fr canvas{display:block;width:62px;height:62px;object-fit:contain;background:var(--ui-surface-3);image-rendering:pixelated;border-radius:7px}
.tl-settings{padding:6px 8px;white-space:nowrap}.tl-settings label{display:flex;align-items:center;gap:6px;color:var(--ui-muted);font-size:10px}.tl-settings select{min-height:31px;padding:5px 7px;font-size:10px}.tl-settings input[type=range]{width:72px}.loop-toggle{white-space:nowrap}

/* Pixel Art side effects/overlay selectors are scoped so Dibujo's #on select is never styled as an overlay. */
.pixel-page #on{position:absolute;inset:0;pointer-events:none;display:block;opacity:1}.dibujo-page #on{position:static;inset:auto;display:inline-block;width:auto;pointer-events:auto;opacity:1}
.pixel-page #grid,.pixel-page #sbox{position:absolute;inset:0;pointer-events:none}.dibujo-page #grid,.dibujo-page #sbox{position:static}

.panel-resizer{position:absolute;top:7px;bottom:7px;width:22px;margin:0;z-index:60;cursor:col-resize;touch-action:none;border-radius:999px;display:flex;align-items:center;justify-content:center}.tools-resizer{left:calc(var(--tools-w) - 11px)}.side-resizer{right:calc(var(--side-w) - 11px)}.panel-resizer::before{content:"";width:4px;height:56px;border-radius:99px;background:var(--ui-border-strong);opacity:.8;box-shadow:0 10px 0 -1px var(--ui-border-strong),0 -10px 0 -1px var(--ui-border-strong);transition:.18s ease}.panel-resizer:hover::before,.panel-resizer.dragging::before{height:80px;background:var(--ui-accent);box-shadow:0 14px 0 -1px var(--ui-accent),0 -14px 0 -1px var(--ui-accent)}
.hide-tools #tools{display:none!important}.hide-side #side{display:none!important}.hide-tl #tl{display:none!important}.hide-tools main{grid-template-columns:minmax(0,1fr) var(--side-w)}.hide-side main{grid-template-columns:var(--tools-w) minmax(0,1fr)}.hide-tools.hide-side main{grid-template-columns:minmax(0,1fr)}
#toolsfab,#sidefab{position:fixed;z-index:850;width:48px;height:48px;border-radius:50%;background:var(--ui-surface);color:var(--ui-accent-strong);border:1px solid var(--ui-border);box-shadow:var(--ui-shadow);display:none;font-weight:900}
#toolsfab{left:14px;bottom:calc(74px + var(--ui-safe-bottom))}#sidefab{right:14px;bottom:calc(74px + var(--ui-safe-bottom))}

/* Advanced popovers/dialogs */
#txbar,#selbar{position:fixed;left:50%;transform:translateX(-50%);z-index:700;display:flex;flex-wrap:wrap;gap:7px 10px;align-items:center;max-width:95vw;padding:9px 11px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:12px;box-shadow:var(--ui-shadow);font-size:11px}#txbar[hidden],#selbar[hidden]{display:none}
#gd{position:absolute;inset:0;pointer-events:none;display:none;border-radius:14px;background:linear-gradient(90deg,transparent 33.2%,rgba(122,110,232,.34) 33.3%,transparent 33.5%,transparent 66.5%,rgba(122,110,232,.34) 66.6%,transparent 66.8%),linear-gradient(0deg,transparent 33.2%,rgba(122,110,232,.34) 33.3%,transparent 33.5%,transparent 66.5%,rgba(122,110,232,.34) 66.6%,transparent 66.8%),linear-gradient(90deg,transparent 49.9%,rgba(214,156,130,.34) 50%,transparent 50.1%)}
#refp{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:15px!important;box-shadow:var(--ui-shadow)!important}
.tpd{width:min(920px,94vw);max-width:none;padding:0;background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:18px;overflow:hidden;box-shadow:var(--ui-shadow)}.tpd::backdrop,dialog::backdrop{background:rgba(24,25,29,.42);backdrop-filter:blur(5px)}dialog{border:1px solid var(--ui-border);border-radius:16px;background:var(--ui-surface);color:var(--ui-text);box-shadow:var(--ui-shadow);padding:22px;max-width:620px}.tph{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ui-border);background:var(--ui-surface-2)}.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:10px;padding:4px 16px 16px;max-height:62dvh;overflow:auto}

/* Landing motion + privacy polish */
.home-ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}.home-ambient span{position:absolute;border-radius:50%;filter:blur(2px);opacity:.5}.home-ambient span:nth-child(1){width:280px;height:280px;left:-110px;top:10%;background:radial-gradient(circle,rgba(122,110,232,.16),transparent 68%);animation:pxHome1 17s ease-in-out infinite}.home-ambient span:nth-child(2){width:220px;height:220px;right:7%;top:6%;background:radial-gradient(circle,rgba(214,156,130,.13),transparent 70%);animation:pxHome2 20s ease-in-out infinite}.home-ambient span:nth-child(3){width:300px;height:300px;right:-120px;bottom:-80px;background:radial-gradient(circle,rgba(128,169,150,.16),transparent 70%);animation:pxHome3 23s ease-in-out infinite}@keyframes pxHome1{50%{transform:translate(30px,-18px)}}@keyframes pxHome2{50%{transform:translate(-26px,20px)}}@keyframes pxHome3{50%{transform:translate(-24px,-18px)}}
body.privacy-page{background:radial-gradient(circle at 12% 0%,rgba(122,110,232,.10),transparent 28%),radial-gradient(circle at 100% 100%,rgba(128,169,150,.10),transparent 28%),var(--ui-bg)}
body.privacy-page main{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:48px 22px 70px}
body.privacy-page::before{content:"";position:fixed;width:300px;height:300px;border-radius:50%;left:-160px;top:12%;background:radial-gradient(circle,rgba(122,110,232,.12),transparent 68%);animation:pxFloatA 20s ease-in-out infinite;pointer-events:none}
body.privacy-page .card{background:color-mix(in srgb,var(--ui-surface) 96%,transparent);border:1px solid var(--ui-border);box-shadow:var(--ui-shadow-sm);border-radius:18px;padding:22px 24px;margin:0 0 14px;backdrop-filter:blur(8px)}
body.privacy-page .card h2{font-size:14px;line-height:1.35;color:var(--ui-text);margin:0 0 10px}body.privacy-page .card p,body.privacy-page .card li{line-height:1.75;color:var(--ui-muted)}
.privacy-cookies-card{background:linear-gradient(135deg,var(--ui-accent-soft),rgba(128,169,150,.08))!important;border-color:color-mix(in srgb,var(--ui-accent) 28%,var(--ui-border))!important}.privacy-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.privacy-actions .btn,.privacy-actions button{min-height:40px}.privacy-note{font-size:11px;margin:10px 0 0;padding:9px 10px;border-radius:10px;background:var(--ui-surface-3);border:1px solid var(--ui-border)}.privacy-footer{display:flex;gap:8px;justify-content:center;align-items:center;margin:20px 0;color:var(--ui-muted);font-size:11px}.privacy-footer a{color:var(--ui-accent);text-decoration:none}

@media(max-width:1180px){:root{--tools-w:288px;--side-w:300px}.header-cluster + .header-cluster{padding-left:7px}.header-view{max-width:43vw}}
@media(max-width:1000px){:root{--tools-w:272px;--side-w:292px}.app-header{gap:6px}.header-project{display:none}.header-canvas{max-width:44vw}.header-view{max-width:40vw}}
@media(max-width:900px){
  body.editor-page{overflow:hidden}
  #app{padding:8px;gap:8px;grid-template-rows:54px 86px 54px minmax(0,1fr)}body.dibujo-page #app{grid-template-rows:54px 86px minmax(0,1fr)}
  .app-header{min-height:54px;border-radius:14px;padding:6px 7px}.header-main .home span{display:none}.header-main .logo{font-size:11px}.header-view{max-width:52vw}.header-view .icon-btn{display:none}
  .context-bar{min-height:54px;border-radius:13px}.opts-view{margin-left:0}.opts-group{padding:3px 6px}
  .timeline-bar{min-height:86px;max-height:86px;padding:6px 7px;border-radius:13px}.pixel-page .timeline-bar{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"brand transport settings" "brand frames settings"}.dibujo-page .timeline-bar{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"brand transport settings" "brand frames settings"}.tl-brand{grid-area:brand;min-width:78px}.tl-transport{grid-area:transport}.tl-frames{grid-area:frames}.tl-actions{position:absolute;right:8px;bottom:7px;display:flex;transform:scale(.88);transform-origin:right bottom}.pixel-page .tl-settings,.dibujo-page .tl-settings{grid-area:settings;justify-self:end}.fr canvas{width:52px;height:52px}
  main{grid-template-columns:1fr!important;grid-template-rows:minmax(0,1fr);gap:8px}.editor-page #stage{order:1;min-height:0;border-radius:15px}.panel-resizer{display:none!important}
  #tools{position:fixed!important;left:8px;top:calc(122px + var(--ui-safe-top));bottom:8px;width:min(340px,calc(100vw - 16px));z-index:880;display:none!important;border-radius:16px;box-shadow:0 18px 48px rgba(45,40,60,.22)}body.tools-open #tools{display:flex!important}
  #side{position:fixed!important;right:8px;top:calc(122px + var(--ui-safe-top));bottom:8px;width:min(340px,calc(100vw - 16px));z-index:870;display:none!important;border-radius:16px;box-shadow:0 18px 48px rgba(45,40,60,.22)}body.side-open #side{display:flex!important}
  #toolsfab,#sidefab{display:flex!important;align-items:center;justify-content:center}.tool-props{max-height:none}.color-editor{grid-template-columns:72px 1fr}.color-swatch{width:72px;height:72px}.pal{grid-template-columns:repeat(7,minmax(0,1fr))}.sw{border-radius:8px!important}
}
@media(max-width:560px){
  #app{grid-template-rows:52px 82px 50px minmax(0,1fr)}body.dibujo-page #app{grid-template-rows:52px 82px minmax(0,1fr)}
  .header-state{display:none}.header-view{max-width:none}.header-view #help,.header-view #don{display:none}.header-view select{min-width:74px}
  .context-bar{overflow-x:auto}.opts-tool{min-width:max-content}.opts-selection{display:none}
  .timeline-bar{min-height:82px;max-height:82px}.tl-brand{min-width:66px}.tl-brand strong{font-size:8px}.tl-caption{display:none}.tl-transport button,.tl-actions button{width:30px;height:30px;min-height:30px}.fr canvas{width:46px;height:46px}
  #tools,#side{width:min(330px,calc(100vw - 12px));left:6px;right:6px}.tgrp-b{grid-template-columns:repeat(3,minmax(0,1fr))}.color-editor{grid-template-columns:64px 1fr}.color-swatch{width:64px;height:64px}.pal{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
  body.home-page main{padding:44px 14px 34px}.info{grid-template-columns:1fr}body.privacy-page main{padding:40px 14px 50px}.privacy-actions{flex-direction:column}.privacy-actions .btn,.privacy-actions button{width:100%}
}
@media(prefers-reduced-motion:reduce){body.editor-page::before,body.editor-page::after,body.privacy-page::before,.home-ambient span{animation:none!important}.logo span,.tool-brand b{animation:none!important}}

/* =====================================================================
   PIXAMBAS V48 — final editor polish
   Purpose: keep controls legible, prevent cross-editor ID collisions,
   and make the timeline/tool dock feel calm and intentional.
   ===================================================================== */
#tl.timeline-bar{
  display:grid;
  align-items:center;
  gap:10px;
  min-height:100px;
  max-height:108px;
  overflow:hidden;
  grid-template-columns:auto auto minmax(190px,1fr) auto auto;
  grid-template-areas:"brand transport frames actions settings";
}
.pixel-page #tl.timeline-bar{grid-template-columns:auto auto minmax(180px,1fr) auto auto;grid-template-areas:"brand transport frames actions settings"}
.dibujo-page #tl.timeline-bar{grid-template-columns:auto auto minmax(180px,1fr) auto;grid-template-areas:"brand transport frames settings"}
.tl-brand{grid-area:brand;min-width:86px}.tl-transport{grid-area:transport;display:flex;gap:5px;align-items:center}.tl-frames{grid-area:frames;display:flex;gap:6px;align-items:center;overflow:auto;min-width:0;padding:2px 3px;scrollbar-width:thin}.tl-actions{grid-area:actions;display:flex;align-items:center;gap:5px}.tl-settings{grid-area:settings;display:flex;align-items:center;gap:7px;min-width:0}
#tl .tl-brand strong,#tl .tl-caption{display:block}.tl-brand strong{font-size:9px;letter-spacing:.12em}.tl-caption{font-size:9px;color:var(--ui-muted);margin-top:3px}
#tl button{width:34px;height:34px;min-width:34px;min-height:34px;padding:0;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;flex:none}
#tl .tl-primary{background:var(--ui-accent);color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(122,110,232,.22)}
#tl .tl-actions button{background:var(--ui-surface-2)}
#tl .tl-settings label{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--ui-muted);white-space:nowrap}
#tl .tl-settings select{min-height:34px;width:auto;min-width:58px;padding:5px 7px;font-size:10px}
#tl input[type=range]{width:76px}
#tl input[type=checkbox]{accent-color:var(--ui-accent)}
#tl #frames{overflow:auto;min-width:0;flex:1}

/* Large, readable color controls inside the dock. */
.pixel-page #tools .tool-props #sv{display:block;width:100%!important;height:auto!important;min-height:188px;aspect-ratio:1.62/1;max-width:none;border-radius:12px;cursor:crosshair;background:var(--ui-surface-3);border:1px solid var(--ui-border)}
.pixel-page #tools .tool-props #hue,.pixel-page #tools .tool-props #alp{width:100%;height:18px;margin:6px 0}
.pixel-page #tools .tool-props #hex{width:100%;min-height:36px;padding:7px 9px;border-radius:9px;font:800 12px var(--ui-mono);letter-spacing:.04em}
.pixel-page #tools .tool-props .rgbr{display:grid;grid-template-columns:14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr);align-items:center;gap:5px;font-size:9px;color:var(--ui-muted)}
.pixel-page #tools .tool-props .rgbr input{width:100%;min-width:0;min-height:30px;padding:5px 6px;border-radius:8px}
.dibujo-page #tools .tool-props .color-editor{grid-template-columns:88px minmax(0,1fr);gap:12px;margin:0 0 10px}
.dibujo-page #tools .tool-props .color-swatch{width:88px;height:88px;border-radius:16px}
.dibujo-page #tools .tool-props .color-meta strong{font-size:13px}.dibujo-page #tools .tool-props .color-meta small{font-size:11px}
.dibujo-page #tools .tool-props .pal{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.tool-props input[type=range]{min-width:0;height:28px;accent-color:var(--ui-accent);cursor:pointer}
.tool-props input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:var(--ui-surface-3)}
.tool-props input[type=range]::-webkit-slider-thumb{margin-top:-5px;width:18px;height:18px;border-radius:50%;background:var(--ui-accent);border:2px solid var(--ui-surface);box-shadow:0 2px 8px rgba(45,40,75,.18)}

/* Tool groups: readable one-open accordion, never a tall wall of buttons. */
#tools .tgrp-b{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#tools .tgrp.open .tgrp-b{animation:toolReveal .16s ease-out}
@keyframes toolReveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
#tools .tgrp-h .tg-ch{transition:transform .15s ease}
#tools .tool-props{max-height:min(46dvh,430px)}
#tools .tool-active{position:sticky;top:0;z-index:6}

/* The Dibujo onion-skin selector must never inherit Pixel Art's canvas overlay CSS. */
.dibujo-page #on{position:static!important;inset:auto!important;display:inline-block!important;width:auto!important;height:auto!important;min-height:34px!important;pointer-events:auto!important;opacity:1!important;transform:none!important;z-index:auto!important}
.pixel-page #on{position:absolute!important;inset:0!important;width:auto!important;height:auto!important;pointer-events:none!important;display:block!important}

/* Panel resizing: visible, comfortable hit target on desktop. */
@media(min-width:901px){
  .panel-resizer{width:28px!important}
  .tools-resizer{left:calc(var(--tools-w) - 14px)!important}
  .side-resizer{right:calc(var(--side-w) - 14px)!important}
  .panel-resizer::before{width:4px;height:74px}
  .panel-resizer:hover::before,.panel-resizer.dragging::before{height:104px}
}

@media(max-width:900px){
  #tl.timeline-bar{min-height:86px;max-height:86px;grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"brand transport settings" "brand frames settings"}
  .tl-actions{display:none}
  .tl-settings{justify-self:end}
  .tl-settings input[type=range]{width:60px}
  .pixel-page #tools .tool-props #sv{min-height:172px}
}
@media(max-width:560px){
  #tl.timeline-bar{min-height:82px;max-height:82px}
  #tl button{width:30px;height:30px;min-width:30px;min-height:30px;border-radius:9px}
  .dibujo-page #tools .tool-props .color-editor{grid-template-columns:72px 1fr}.dibujo-page #tools .tool-props .color-swatch{width:72px;height:72px}
  .pixel-page #tools .tool-props #sv{min-height:156px}
}

/* V48 compact context bar: hide empty/conditional controls without removing their logic. */
#opts [hidden]{display:none!important}
#opts .opts-selection:has(> #selact[hidden]){display:none!important}
#opts .opts-group{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
#opts .opts-tool{flex:0 1 auto}.context-bar .opts-view{flex:0 1 auto;margin-left:auto}
#opts .opts-view{gap:6px}.context-bar .opts-view button{min-height:32px;padding:6px 9px;font-size:11px}
#opts .opts-tool label{font-size:10px}.context-bar .opts-tool input[type=number]{width:64px;text-align:center}.context-bar .opts-tool select{min-width:92px}
.pixel-page #tools .tool-props .dock-color-panel>summary{position:sticky;top:-1px;z-index:2;background:var(--ui-surface);padding:2px 0 6px}
.pixel-page #tools .tool-props .dock-color-panel[open]{display:block}
.pixel-page #tools .tool-props .dock-color-panel #pal{margin-top:7px}
.pixel-page #tools .tool-props .dock-color-panel:first-of-type #sv{margin-top:4px}
@media(max-width:900px){#opts .opts-view{margin-left:0}}
/* Final polish: conditional rows stay contained instead of pushing the whole editor sideways. */
#opts .opts-selection{max-width:min(60vw,820px);min-width:0;overflow:auto;scrollbar-width:thin}
#opts #selact,#opts #txo{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:max-content}
#opts #selact[hidden],#opts #txo[hidden]{display:none!important}
#opts #selact input[type=number]{width:58px;min-height:30px}
#opts #txo select{min-width:150px}
#opts #txo input[type=number]{width:60px}
#opts .opts-view{white-space:nowrap}
#tl .tl-actions{padding:4px 5px;border:1px solid var(--ui-border);border-radius:11px;background:var(--ui-surface-2)}
#tl .tl-transport{padding:3px 4px;border:1px solid var(--ui-border);border-radius:11px;background:var(--ui-surface-2)}
#tl .tl-settings{padding:4px 6px;border:1px solid var(--ui-border);border-radius:11px;background:var(--ui-surface-2)}


/* =====================================================================
   PIXAMBAS V50 — clean tool dock, usable color drawer, calmer policy page
   ===================================================================== */
#tools{overflow:auto;scrollbar-gutter:stable both-edges}
#tools .tool-active{order:-5;margin-bottom:2px}
#tools .tool-color-dock{order:-4;flex:none}
#tools .tool-color-dock .tgrp-h{min-height:44px}
#tools .tool-color-body{display:none;padding:10px;background:var(--ui-surface-2);border:1px solid var(--ui-border);border-top:0;border-radius:0 0 13px 13px;max-height:min(52dvh,520px);overflow:auto}
#tools .tool-color-dock.open .tool-color-body{display:block}
#tools .tool-color-body > details{margin:0 0 8px;padding:10px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:12px}
#tools .tool-color-body > details:last-child{margin-bottom:0}
#tools .tool-color-body > .dock-color-panel{margin:0;padding:10px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:12px}
#tools .tool-color-body .color-editor{grid-template-columns:84px minmax(0,1fr);gap:12px;margin:2px 0 12px}
#tools .tool-color-body .color-swatch{width:84px;height:84px;border-radius:16px}
#tools .tool-color-body .color-meta{min-width:0}
#tools .tool-color-body .color-meta input{width:100%;min-width:0;min-height:34px;margin-top:2px;font:800 12px var(--ui-mono);text-transform:uppercase}
#tools .tool-color-body .pal{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
#tools .tool-color-body .sw{min-height:34px}
#tools .tool-color-body #sv{width:100%;height:auto;min-height:180px;aspect-ratio:1.6/1;display:block;border-radius:12px;background:var(--ui-surface-3);border:1px solid var(--ui-border);cursor:crosshair}
#tools .tool-color-body #hue,#tools .tool-color-body #alp{width:100%;height:20px;margin:7px 0}
#tools .tool-color-body #hex{width:100%;min-height:38px;font:800 12px var(--ui-mono)}
#tools .tool-color-body .rgbr{display:grid;grid-template-columns:14px minmax(0,1fr) 14px minmax(0,1fr) 14px minmax(0,1fr);gap:5px;align-items:center}
#tools .tool-props{order:50;margin-top:4px;max-height:none}
#tools .tool-props .tool-props-title{margin-top:2px}
#tools .tool-props .tool-native-settings{order:0}
#tools .tgrp{flex:none}
#tools .tgrp-b{min-width:0}

/* The timeline collapses its grid row when hidden, so the workspace actually moves up. */
.pixel-page #app.hide-tl{grid-template-rows:58px 58px minmax(0,1fr)}
.pixel-page #app.hide-tl #tl{display:none!important}
.pixel-page #app.hide-tl #opts{grid-row:2}
.pixel-page #app.hide-tl main{grid-row:3}
.dibujo-page #app.hide-tl{grid-template-rows:58px minmax(0,1fr)}
.dibujo-page #app.hide-tl #tl{display:none!important}
.dibujo-page #app.hide-tl main{grid-row:2}

/* Pixel Art canvas: it can scroll/pan at any zoom, while staying centered when it fits. */
.pixel-page #stage{overflow:auto;justify-content:flex-start;align-items:flex-start;scrollbar-width:thin}
.pixel-page #wrap{min-width:1px;min-height:1px}
.pixel-page #stage::-webkit-scrollbar{width:9px;height:9px}
.pixel-page #stage::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ui-muted) 22%,transparent);border-radius:999px}

/* Privacy: less dense, more editorial, with breathing room between sections. */
body.privacy-page main{max-width:780px;padding:68px 24px 90px}
body.privacy-page h1{max-width:720px;margin-bottom:14px}
body.privacy-page .sub{margin-bottom:34px}
body.privacy-page .privacy-index{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:38px}
body.privacy-page .privacy-section{padding:28px 30px;margin-bottom:22px;scroll-margin-top:36px}
body.privacy-page .privacy-section h2{font-size:16px;margin-bottom:14px}
body.privacy-page .privacy-section p,body.privacy-page .privacy-section li{font-size:13.5px;line-height:1.9}
body.privacy-page .privacy-section ul{margin:12px 0 14px;padding-left:22px}
body.privacy-page .privacy-section:nth-of-type(3n+1){transform-origin:center top}
body.privacy-page .privacy-channel-note{display:flex;gap:10px;align-items:flex-start;margin-top:18px;padding:14px 15px;border:1px solid var(--ui-border);border-radius:12px;background:var(--ui-surface-2)}
body.privacy-page .privacy-channel-note>span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:var(--ui-accent-soft);color:var(--ui-accent-strong);font-weight:900}
body.privacy-page .privacy-channel-note strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em}
body.privacy-page .privacy-channel-note small{display:block;margin-top:3px;color:var(--ui-muted);line-height:1.6}
body.privacy-page .privacy-cookie-status{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:11px;background:var(--ui-surface-2);border:1px solid var(--ui-border);font-size:11px;color:var(--ui-muted)}
body.privacy-page .privacy-status-dot{width:8px;height:8px;border-radius:50%;background:var(--ui-sage);box-shadow:0 0 0 4px color-mix(in srgb,var(--ui-sage) 16%,transparent);flex:none}
@media(max-width:700px){
  body.privacy-page main{padding:44px 16px 64px}
  body.privacy-page .privacy-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.privacy-page .privacy-section{padding:22px 20px;margin-bottom:18px}
  #tools .tool-color-body .color-editor{grid-template-columns:72px minmax(0,1fr)}
  #tools .tool-color-body .color-swatch{width:72px;height:72px}
}

#tools .tool-color-dock .tg-ic{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--ui-accent-soft)}
#tools .tool-color-dock .color-card .panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
#tools .tool-color-dock .color-card .panel-title h3{margin:0}

/* =====================================================================
   PIXAMBAS V50.1 — calm color drawer + clean current-tool header
   ===================================================================== */
#tools .tool-brand{min-height:42px;padding-right:6px}
#tools .tool-brand-current{margin-left:auto;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 8px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface-2);color:var(--ui-muted);font-size:9px;font-weight:800;letter-spacing:.01em}
#tools .tool-active{display:none!important}
#tools .tool-color-dock .tgrp-h{grid-template-columns:30px minmax(0,1fr) auto 18px;min-height:46px}
#tools .tool-color-dock .tg-nm{letter-spacing:.12em}
#tools .color-head-meta{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--ui-muted);font:800 9px var(--ui-mono);letter-spacing:.02em}
#tools .color-head-dot{width:18px;height:18px;display:block;flex:none;border-radius:6px;background:var(--active-color,#14102a);border:1px solid var(--ui-border-strong);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
#tools .tool-color-body{max-height:min(62dvh,620px);padding:10px}
#tools .tool-color-body .dock-color-panel{display:block!important}
#tools .tool-color-body .dock-color-panel>summary{font-size:10px;margin-bottom:10px}
#tools .tool-color-body .dock-color-panel .panel-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
#tools .tool-color-body .dock-color-panel .panel-title h3{margin:0}
#tools .tool-color-body .dock-color-panel .pal{min-width:0}
#tools .tool-color-body .sw{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
#tools .tool-color-body .sw:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(35,30,50,.10)}
#tools .tool-color-body .color-swatch{flex:none}
#tools .tool-color-body input[type=range]{cursor:pointer}
@media(max-width:900px){
  .pixel-page #app.hide-tl{grid-template-rows:54px 54px minmax(0,1fr)}
  .dibujo-page #app.hide-tl{grid-template-rows:54px minmax(0,1fr)}
  #tools .tool-brand-current{max-width:54%}
}
@media(max-width:560px){
  .pixel-page #app.hide-tl{grid-template-rows:52px 50px minmax(0,1fr)}
  .dibujo-page #app.hide-tl{grid-template-rows:52px minmax(0,1fr)}
  #tools .tool-color-dock .tgrp-h{grid-template-columns:28px minmax(0,1fr) auto 16px}
  #tools .color-head-dot{width:16px;height:16px}
  #tools .color-head-meta{font-size:8px}
}


/* Canvas navigation affordance: right-drag/middle-drag/space-drag is intentional. */
.pixel-page #stage{cursor:crosshair}
.pixel-page #stage:active{cursor:grabbing}
.pixel-page #stage #wrap{will-change:scroll-position}


/* =====================================================================
   PIXAMBAS V51 — independent size drawer + robust color swatches + logo
   ===================================================================== */
#tools .tool-size-dock{flex:none;margin:0;border-radius:13px}
#tools .tool-size-dock .tgrp-h{grid-template-columns:30px minmax(0,1fr) auto 18px;min-height:46px}
#tools .size-head-meta{font:800 9px var(--ui-mono);color:var(--ui-accent-strong);background:var(--ui-accent-soft);padding:4px 7px;border-radius:999px;white-space:nowrap}
#tools .tool-size-body{display:block!important;padding:12px;background:var(--ui-surface-2);border:1px solid var(--ui-border);border-top:0;border-radius:0 0 13px 13px}
#tools .tool-size-dock:not(.open) .tool-size-body{display:none!important}
#tools .tool-size-dock.open .tgrp-h{background:var(--ui-surface-2);border-color:var(--ui-border);color:var(--ui-text)}
#tools .size-main{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:8px;align-items:center}
#tools .size-readout{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border:1px solid var(--ui-border);border-radius:11px;background:var(--ui-surface);}
#tools .size-readout b{font:900 16px var(--ui-mono);color:var(--ui-accent-strong)}
#tools .size-readout span{font-size:9px;color:var(--ui-muted);font-weight:800}
#tools #dock-size-range,#tools #draw-dock-size-range{width:100%;height:28px;grid-column:1/-1}
#tools #dock-size-number,#tools #draw-dock-size-number{width:100%;min-width:0;min-height:36px;text-align:center;font:900 11px var(--ui-mono)}
#tools .size-presets{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#tools .size-presets button{min-height:30px!important;height:30px!important;aspect-ratio:auto!important;font:800 9px var(--ui-mono);padding:4px!important;background:var(--ui-surface);border:1px solid var(--ui-border)}
#tools .shape-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:7px}
#tools .shape-picker button{min-height:38px!important;height:38px!important;aspect-ratio:auto!important;font-size:16px!important;padding:4px!important;background:var(--ui-surface);border:1px solid var(--ui-border)}
#tools .shape-picker button.on{background:var(--ui-accent);border-color:var(--ui-accent);color:#fff}
#tools .tool-props{gap:7px}
#tools .tool-native-settings .native-size-hidden{display:none!important}
#tools .tool-native-settings{background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important;margin:0!important}
#tools .tool-native-settings h3{margin-top:0!important}
/* Never let generic button backgrounds erase a swatch's real color. */
#tools .sw,.sw{background-image:none!important;background-color:var(--swatch-color,#ffffff)!important;color:transparent!important;text-shadow:none!important}
#tools .sw::after,.sw::after{color:transparent!important;background:none!important}
#tools .sw:hover,.sw:hover{filter:saturate(1.06)}
#tools .color-head-dot{background-color:var(--active-color,#14102a)!important;background-image:none!important}

/* Landing logo: pixel-like, soft, and reactive to hover/scroll. */
body.home-page main .home-logo{position:relative;display:inline-block;font-family:'Press Start 2P',var(--ui-mono)!important;font-size:clamp(34px,7vw,78px)!important;line-height:1.12!important;letter-spacing:.035em!important;margin:0 0 16px!important;color:transparent!important;background:linear-gradient(120deg,var(--ui-accent-strong) 8%,var(--ui-accent) 36%,var(--ui-sage) 58%,var(--ui-warm) 86%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-stroke:1px color-mix(in srgb,var(--ui-accent) 28%,transparent);filter:drop-shadow(0 10px 24px rgba(88,76,190,.10));animation:homeLogoShift 7s ease-in-out infinite;transition:transform .3s ease,filter .3s ease,text-shadow .3s ease}
body.home-page main .home-logo::before{content:"";position:absolute;width:7px;height:7px;right:-14px;top:14%;background:var(--ui-warm);box-shadow:-18px 24px 0 var(--ui-sage),-10px 44px 0 var(--ui-accent);opacity:.72;border-radius:1px;animation:homePixelBlink 3.4s ease-in-out infinite;pointer-events:none}
body.home-page main .home-logo::after{content:"";position:absolute;left:6%;right:6%;bottom:-8px;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--ui-accent),var(--ui-sage),transparent);opacity:.32;transform:scaleX(.7);transition:transform .35s ease,opacity .35s ease}
body.home-page main .home-logo:hover,body.home-page main .home-logo.logo-hover,body.home-page.logo-glow main .home-logo{transform:translateY(-2px) scale(1.012);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--ui-accent) 30%,transparent)) drop-shadow(0 18px 36px rgba(88,76,190,.16))}
body.home-page main .home-logo:hover::after,body.home-page main .home-logo.logo-hover::after,body.home-page.logo-glow main .home-logo::after{transform:scaleX(1);opacity:.7}
@keyframes homeLogoShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes homePixelBlink{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(4px);opacity:.9}}
@media(prefers-reduced-motion:reduce){body.home-page main .home-logo{animation:none!important}body.home-page main .home-logo::before{animation:none!important}}

/* V51.1 — keep the old Pixel Art top size field out of the way; size now lives in TAMAÑO. */
:root{--tools-w:300px}
.pixel-page #opts .opts-tool label:first-of-type{display:none!important}
.pixel-page #opts .opts-tool{gap:8px}
#tools .tool-size-dock .tg-ic{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--ui-accent-soft);color:var(--ui-accent-strong)}
#tools .tool-size-dock.open .tg-ic{background:color-mix(in srgb,var(--ui-accent) 16%,var(--ui-surface-2))}
#tools .tool-size-dock .tgrp-h:hover .size-head-meta{filter:saturate(1.08)}


/* =====================================================================
   PIXAMBAS V52 — final control sizing / no orphan props / robust swatches
   ===================================================================== */
#tools{min-width:0;overflow:auto}
#tools .tool-props{display:none!important}
#tools .tool-size-dock{order:-2;flex:none}
#tools .tool-size-body{display:none!important;gap:10px}
#tools .tool-size-dock.open .tool-size-body{display:grid!important}
#tools .tool-size-body{grid-template-columns:1fr;min-width:0}
#tools .size-main{grid-template-columns:minmax(0,1fr) 88px;gap:9px}
#tools .size-readout{min-height:48px;padding:10px 11px}
#tools .size-readout b{font-size:17px}
#tools .size-readout span{font-size:10px}
#tools .size-main input[type=range],#tools .size-control input[type=range]{min-height:38px;height:38px}
#tools .size-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:center;padding:9px 10px;border:1px solid var(--ui-border);border-radius:11px;background:var(--ui-surface)}
#tools .size-control input[type=range]{grid-column:1/-1;width:100%}
#tools .size-check{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--ui-border);border-radius:11px;background:var(--ui-surface);font-size:11px;color:var(--ui-text)}
#tools .size-check input{margin:0}
#tools .size-section-title{font-size:9px;font-weight:900;letter-spacing:.11em;color:var(--ui-muted);margin-top:2px}
#tools .size-presets{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
#tools .size-presets button{min-height:34px!important;height:34px!important;font-size:10px!important;border-radius:9px!important}
#tools .shape-picker{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
#tools .shape-picker button{min-height:40px!important;height:40px!important;font-size:17px!important}
#tools .tool-color-body{max-height:min(68dvh,680px);overflow:auto}
#tools .tool-color-body .pal{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
#tools .tool-color-body .sw{position:relative;display:block;aspect-ratio:1;min-height:38px!important;background:transparent!important;border:1px solid var(--ui-border-strong)!important}
#tools .sw .sw-fill,.sw-fill{position:absolute;inset:2px;display:block;border-radius:7px;background:var(--swatch-color)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
#tools .sw{background:transparent!important;background-image:none!important;forced-color-adjust:none;-webkit-appearance:none!important;appearance:none!important}
#tools .sw:hover .sw-fill{filter:saturate(1.08);transform:scale(1.03)}
#tools .sw.sel .sw-fill{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6),0 0 0 1px var(--ui-accent)}
/* Prevent legacy sidebar size/brush cards from creating duplicate controls in Dibujo. */
.dibujo-page #side > div:has(#bs) label:first-of-type{display:none!important}
.dibujo-page #side > div:has(#bs){padding-top:6px;padding-bottom:6px}
.dibujo-page #side > div:has(#bs) h3{display:none!important}
/* Canvas pan remains scrollable, while right-drag has enough visual affordance. */
.pixel-page #stage{overflow:auto!important;cursor:crosshair;scrollbar-width:thin;}
.pixel-page #stage:has(#wrap:hover){cursor:crosshair}
/* Privacy page: one readable column; staggered cards reveal on scroll. */
body.privacy-page main{display:block!important;width:min(900px,calc(100% - 32px))!important;max-width:900px!important;margin:0 auto!important;padding:72px 0 80px!important}
body.privacy-page .privacy-index{display:flex!important;flex-wrap:wrap!important;gap:8px!important;margin:28px 0 30px!important;padding:10px!important;background:var(--ui-surface-2)!important;border:1px solid var(--ui-border)!important;border-radius:16px!important}
body.privacy-page .privacy-index a{flex:1 1 180px!important;padding:9px 11px!important;border:1px solid transparent!important;border-radius:10px!important;background:var(--ui-surface)!important;color:var(--ui-accent-strong)!important;line-height:1.35!important;white-space:normal!important}
body.privacy-page .privacy-section{display:block!important;width:100%!important;margin:0 0 22px!important;padding:28px 30px!important;border-radius:18px!important;min-height:0!important;transform:translateY(18px)!important;opacity:0!important;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease!important;box-shadow:var(--ui-shadow-sm)!important}
body.privacy-page .privacy-section.is-visible{opacity:1!important;transform:none!important}
body.privacy-page .privacy-section:nth-of-type(even){transform:translateY(18px) translateX(10px)!important}
body.privacy-page .privacy-section:nth-of-type(even).is-visible{transform:none!important}
body.privacy-page .privacy-section h2{font-size:clamp(18px,2vw,22px)!important;line-height:1.25!important;margin:0 0 14px!important}
body.privacy-page .privacy-section p,body.privacy-page .privacy-section li{font-size:15px!important;line-height:1.8!important}
body.privacy-page .privacy-section ul,body.privacy-page .privacy-section ol{padding-left:23px!important}
body.privacy-page .privacy-actions{display:flex!important;gap:10px!important;flex-wrap:wrap!important;margin-top:15px!important}
@media(max-width:700px){
  body.privacy-page main{width:min(100% - 20px,900px)!important;padding:44px 0 56px!important}
  body.privacy-page .privacy-index{gap:6px!important}
  body.privacy-page .privacy-index a{flex-basis:100%!important}
  body.privacy-page .privacy-section{padding:22px 20px!important;margin-bottom:16px!important}
  body.privacy-page .privacy-section p,body.privacy-page .privacy-section li{font-size:14px!important;line-height:1.72!important}
}
@media(prefers-reduced-motion:reduce){body.privacy-page .privacy-section{transition:none!important;transform:none!important;opacity:1!important}}


/* =====================================================================
   PIXAMBAS V53 — FINAL PANEL POLISH
   Goals: no orphan size cards, readable controls, calm spacing, clear hierarchy.
   ===================================================================== */
:root{--tools-w:320px}

/* The active-tool badge is useful as state, but it must never become a second tool card. */
#tools .tool-brand-current{display:none!important}
#tools .tool-brand{min-height:38px!important;padding:7px 8px 8px!important}

/* Do not let legacy native brush/size cards create the small stacked bars seen in the editor. */
.dibujo-page #side > div:has(#bs){display:none!important}
#tools .tool-props{display:none!important;height:0!important;min-height:0!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important}

/* Strong, predictable sizing for every accordion header and tool control. */
#tools .tgrp{margin:0!important;border-radius:14px!important}
#tools .tgrp-h{min-height:48px!important;padding:9px 11px!important;gap:8px!important;border-radius:13px!important;font-size:10px!important}
#tools .tgrp-b{padding:9px!important;gap:7px!important}
#tools .tgrp-b > button:not(.tgrp-h){min-height:42px!important;border-radius:11px!important}
#tools .tgrp-b > .row{gap:8px!important}

/* The dedicated size drawer is the single source of truth for brush/eraser/pixel size. */
#tools .tool-size-dock{order:-2!important;width:100%!important}
#tools .tool-size-dock .tgrp-h{min-height:50px!important}
#tools .tool-size-body{gap:11px!important;padding:13px!important}
#tools .size-main{gap:10px!important}
#tools .size-readout{min-height:52px!important;padding:11px 12px!important;border-radius:12px!important}
#tools .size-readout b{font-size:18px!important}
#tools .size-readout span{font-size:10px!important}
#tools .size-main input[type=range],#tools .size-control input[type=range]{height:40px!important;min-height:40px!important}
#tools .size-main input[type=number],#tools #dock-size-number,#tools #draw-dock-size-number{min-height:40px!important;height:40px!important}
#tools .size-presets{gap:7px!important}
#tools .size-presets button{min-height:38px!important;height:38px!important;font-size:10px!important;border-radius:10px!important}
#tools .shape-picker{gap:7px!important}
#tools .shape-picker button{min-height:44px!important;height:44px!important;border-radius:11px!important;font-size:18px!important}
#tools .size-control{min-height:54px!important;padding:10px 11px!important;border-radius:12px!important}
#tools .size-check{min-height:46px!important;padding:10px 11px!important;border-radius:12px!important}
#tools .size-section-title{margin:3px 2px 0!important;padding-top:3px!important;font-size:9px!important}

/* Color is its own roomy tool: picker, sliders, exact value and palette get breathing room. */
#tools .tool-color-dock{order:-1!important;width:100%!important}
#tools .tool-color-dock .tgrp-h{min-height:50px!important}
#tools .tool-color-body{padding:13px!important;max-height:min(70dvh,720px)!important;overflow:auto!important}
#tools .tool-color-body .dock-color-panel{margin:0 0 12px!important;padding:10px!important;border-radius:12px!important}
#tools .tool-color-body .dock-color-panel:last-child{margin-bottom:0!important}
#tools .tool-color-body #sv{display:block!important;width:100%!important;height:150px!important;min-height:150px!important;border-radius:12px!important}
#tools .tool-color-body #hue,#tools .tool-color-body #alp{height:28px!important;min-height:28px!important;margin:9px 0!important}
#tools .tool-color-body .swp{min-height:54px!important}
#tools .tool-color-body #hex{min-height:42px!important;height:42px!important;font-size:12px!important;border-radius:10px!important}
#tools .tool-color-body .rgbr input{min-height:38px!important;height:38px!important}
#tools .tool-color-body .pal{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:9px!important}
#tools .tool-color-body .sw{min-height:42px!important;height:42px!important;aspect-ratio:1!important;border-radius:10px!important;padding:0!important}
#tools .sw .sw-fill,.sw-fill{inset:2px!important;border-radius:8px!important}

/* Remove the tiny native drawing brush settings visually; drawer keeps values synchronized. */
.dibujo-page #side > div:has(#bs),.dibujo-page #side .brush-panel{display:none!important}

/* Timeline: clear transport/action/settings zones instead of one long button ribbon. */
.timeline-bar{grid-template-columns:auto auto minmax(120px,1fr) auto!important;gap:10px!important;padding:9px 12px!important;min-height:82px!important}
.timeline-bar .tl-transport,.timeline-bar .tl-actions,.timeline-bar .tl-settings{gap:6px!important}
.timeline-bar button{min-width:36px!important;height:36px!important;border-radius:10px!important}
.timeline-bar .tl-frames{min-width:0!important;overflow-x:auto!important;scrollbar-width:thin!important;padding-bottom:2px!important}
.timeline-bar .tl-settings{justify-content:flex-end!important;flex-wrap:wrap!important}
.timeline-bar .tl-settings label{min-height:36px!important;padding:5px 8px!important;border-radius:10px!important;background:var(--ui-surface-2)!important;border:1px solid var(--ui-border)!important}

/* Calm responsive layout. */
@media(max-width:1180px){:root{--tools-w:300px}}
@media(max-width:980px){:root{--tools-w:286px}}
@media(max-width:700px){
  :root{--tools-w:280px}
  #tools .tool-brand-current{max-width:42%;font-size:7.5px!important}
  #tools .tool-color-body #sv{height:145px!important;min-height:145px!important}
  #tools .tool-color-body .pal{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .timeline-bar{grid-template-columns:auto minmax(0,1fr) auto!important;grid-template-areas:'brand transport settings' 'frames frames frames';min-height:112px!important}
  .timeline-bar .tl-brand{grid-area:brand}.timeline-bar .tl-transport{grid-area:transport}.timeline-bar .tl-settings{grid-area:settings}.timeline-bar .tl-frames{grid-area:frames}
}

/* Privacy/legal page: editorial cards with large spacing and readable measure. */
body.privacy-page main{width:min(920px,calc(100% - 40px))!important;max-width:920px!important;padding:76px 0 96px!important}
body.privacy-page .privacy-index{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important;padding:10px!important;margin:30px 0 42px!important;border-radius:18px!important}
body.privacy-page .privacy-index a{min-height:44px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;padding:9px 12px!important;border-radius:11px!important;font-size:11px!important;line-height:1.35!important}
body.privacy-page .privacy-section{width:100%!important;margin:0 0 28px!important;padding:30px 34px!important;border-radius:20px!important;min-height:180px!important}
body.privacy-page .privacy-section h2{font-size:clamp(20px,2.2vw,25px)!important;line-height:1.28!important;margin:0 0 16px!important}
body.privacy-page .privacy-section p,body.privacy-page .privacy-section li{font-size:15px!important;line-height:1.9!important;max-width:76ch!important}
body.privacy-page .privacy-section ul,body.privacy-page .privacy-section ol{margin:14px 0 18px!important}
body.privacy-page .privacy-section:nth-of-type(even){transform:translateY(18px) translateX(14px)!important}
body.privacy-page .privacy-section:nth-of-type(odd){transform:translateY(18px) translateX(-6px)!important}
body.privacy-page .privacy-section.is-visible{transform:none!important}
body.privacy-page .privacy-actions{margin-top:20px!important;padding-top:16px!important;border-top:1px solid var(--ui-border)!important}
body.privacy-page .privacy-cookie-status{margin-top:20px!important;min-height:48px!important}
body.privacy-page .privacy-footer{margin-top:44px!important;padding-top:22px!important;border-top:1px solid var(--ui-border)!important;gap:12px!important}
@media(max-width:700px){
 body.privacy-page main{width:min(100% - 24px,920px)!important;padding:48px 0 64px!important}
 body.privacy-page .privacy-index{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-bottom:28px!important}
 body.privacy-page .privacy-section{padding:23px 20px!important;margin-bottom:20px!important;min-height:0!important}
 body.privacy-page .privacy-section:nth-of-type(even),body.privacy-page .privacy-section:nth-of-type(odd){transform:translateY(16px)!important}
 body.privacy-page .privacy-section p,body.privacy-page .privacy-section li{font-size:14px!important;line-height:1.8!important}
}


/* v54: primary/secondary color slots and stable tool geometry */
.dual-colors{display:grid;grid-template-columns:1fr 1fr 42px;gap:8px;align-items:stretch;margin:10px 0 2px}
.mini-color{min-height:48px!important;height:48px!important;display:grid!important;grid-template-columns:30px 1fr!important;align-items:center!important;gap:8px!important;padding:6px 8px!important;border:1px solid var(--ui-border)!important;border-radius:11px!important;background:var(--ui-surface)!important;color:var(--ui-text)!important;text-align:left!important;font-size:10px!important}
.mini-color>span{width:28px;height:28px;border-radius:8px;background:var(--draw-color,#fff)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 0 0 1px rgba(0,0,0,.08);display:block}
.mini-color.active{border-color:var(--ui-accent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--ui-accent) 20%,transparent)}
#draw-swap{min-height:48px!important;height:48px!important;border-radius:11px!important}
.pixel-page #tools .tool-size-body{grid-template-columns:1fr!important}
.pixel-page #tools .tool-size-body .size-main{grid-template-columns:minmax(0,1fr) 92px!important}
.pixel-page #tools .tool-size-body .size-presets{grid-template-columns:repeat(5,minmax(0,1fr))!important}
@media (max-width:560px){.dual-colors{grid-template-columns:1fr 1fr 40px;gap:6px}.mini-color{grid-template-columns:24px 1fr!important;gap:6px!important;padding:5px!important}.mini-color>span{width:24px;height:24px}}
/* v54 follow-up: Color/Size drawers remain independent and readable. */
.pixel-page #tools .tool-size-body .size-section-title{margin-top:4px!important}
.pixel-page #tools .tool-size-body .size-control{min-height:54px!important}
.pixel-page #tools .tool-color-body .color-editor{grid-template-columns:68px minmax(0,1fr)!important;gap:10px!important}
.pixel-page #tools .tool-color-body .color-swatch{width:68px!important;height:68px!important}
.pixel-page #tools .tool-color-body .pal{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.dibujo-page #tools .tool-color-body .dual-colors{display:none}

/* v55 compact color surfaces */
.pixel-page #tools .tool-color-body #sv{height:118px!important;min-height:118px!important}
.pixel-page #tools .tool-color-body .color-editor{grid-template-columns:56px minmax(0,1fr)!important;gap:8px!important}
.pixel-page #tools .tool-color-body .color-swatch{width:56px!important;height:56px!important}
.pixel-page #tools .tool-color-body .pal{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:6px!important}
.pixel-page #tools .tool-color-body .sw{min-height:34px!important;height:34px!important;border-radius:8px!important}
.dibujo-page #tools .tool-color-body #asst{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.dibujo-page #tools .tool-color-body .sw{min-height:34px!important;height:34px!important;border-radius:8px!important}


/* v55: stabilize color/size geometry and prevent inherited button rules from flattening swatches */
.pixel-page #tools .tool-color-body #sv{height:108px!important;min-height:108px!important}
.pixel-page #tools .tool-color-body .color-editor{grid-template-columns:52px minmax(0,1fr)!important;gap:8px!important}
.pixel-page #tools .tool-color-body .color-swatch{width:52px!important;height:52px!important;border-radius:12px!important}
.pixel-page #tools .tool-color-body #hue,.pixel-page #tools .tool-color-body #alp{height:22px!important;min-height:22px!important;margin:6px 0!important}
.pixel-page #tools .tool-color-body .pal{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:6px!important}
.pixel-page #tools .tool-color-body .sw{min-height:32px!important;height:32px!important;border-radius:8px!important}
.pixel-page #tools .tool-color-body .sw .sw-fill{background:var(--swatch-color)!important;opacity:1!important}
#tools .tool-size-body .size-control input[type=range]{min-width:0!important;width:100%!important}
#tools .tool-size-body .tool-value{font-variant-numeric:tabular-nums;min-width:42px;text-align:right}
.dibujo-page #tools .color-assistant-panel{background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;border-radius:12px!important;padding:10px!important}
.dibujo-page #tools .color-assistant-panel .pal{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important}
.dibujo-page #tools .color-assistant-panel .sw{min-height:34px!important;height:34px!important}

/* v56 mirror responsive */
#tools .mirror-tool-group{order:9!important}
#tools .mirror-tool-group .mirror-status{font-size:12px;font-weight:800;padding:7px 9px;margin-bottom:7px;border-radius:9px;background:var(--ui-surface);border:1px solid var(--ui-border);color:var(--ui-text)}
#tools .mirror-tool-group .mirror-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#tools .mirror-tool-group .mirror-grid button{min-height:34px!important;height:34px!important;border-radius:9px!important;font-size:10px!important}
#tools .mirror-tool-group .mirror-hint{font-size:9px;line-height:1.45;overflow-wrap:anywhere;color:var(--ui-muted)}
.pixel-page #stage,.dibujo-page #stage{touch-action:none;overscroll-behavior:contain}
@media(max-width:980px){#tools{max-width:min(88vw,320px)!important}}
@media(max-width:700px){#tools{width:min(84vw,300px)!important;max-width:min(84vw,300px)!important}#tools .tool-color-body,#tools .tool-size-body{max-height:62dvh!important;overflow:auto!important}#tools .mirror-tool-group .mirror-grid{grid-template-columns:1fr 1fr!important}#tools .mirror-tool-group .mirror-grid button{min-height:40px!important;height:40px!important}}
@media(max-width:420px){#tools{width:280px!important;max-width:280px!important}#tools .mirror-tool-group .mirror-grid{grid-template-columns:1fr!important}}


/* =====================================================================
   PIXAMBAS V61 — RESPONSIVE + AUDIT FIXES
   Dedicated touch-first layout for Pixel Art and Dibujo/Animación.
   Kept as the final CSS layer so responsive behavior is deterministic.
   ===================================================================== */
@media (max-width: 900px), (pointer: coarse) and (max-width: 1180px){
  :root{--mobile-sheet-radius:22px;--mobile-tool-gap:8px;--mobile-nav-h:58px}
  body.editor-page{overflow:hidden}
  #app{height:100dvh;min-height:100dvh;grid-template-rows:minmax(92px,auto) minmax(66px,auto) minmax(0,1fr)!important;gap:7px;padding:7px}
  .pixel-page #app{grid-template-rows:minmax(92px,auto) minmax(66px,auto) minmax(38px,auto) minmax(0,1fr)!important}
  .dibujo-page #app{grid-template-rows:minmax(92px,auto) minmax(66px,auto) minmax(0,1fr)!important}

  /* Compact, two-row header: never require horizontal scrolling to reach core actions. */
  .editor-page header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "main view"
      "project actions";
    align-items:center;
    gap:6px;
    min-height:0!important;
    padding:7px!important;
    overflow:hidden!important;
  }
  .editor-page header .header-main{grid-area:main;min-width:0;padding:0!important;border:0!important;background:transparent!important}
  .editor-page header .header-view{grid-area:view;min-width:0;padding:0!important;border:0!important;background:transparent!important;justify-content:flex-end;max-width:54vw!important}
  .editor-page header .header-project{grid-area:project;min-width:0;padding:0!important;border:0!important;background:transparent!important;overflow:hidden}
  /* Pixel Art project actions remain available on touch layouts. */
  .pixel-page header .header-project{display:flex!important;flex-wrap:nowrap;gap:4px;min-width:0}
  .pixel-page header .header-project button{flex:1 1 0;min-width:0!important;white-space:nowrap;padding:5px 4px!important;font-size:clamp(8px,2.5vw,10px)!important}
  .editor-page header .header-history{grid-area:actions;padding:0!important;border:0!important;background:transparent!important}
  .editor-page header .header-state,.editor-page header .header-canvas-actions,.editor-page header .header-canvas-actions + .sp,.editor-page header .header-actions{border:0!important}
  .editor-page header .header-state{display:none!important}
  .dibujo-page header .header-canvas-actions{display:none!important}
  .editor-page header .sp{display:none!important}
  .editor-page .header-main .logo{font-size:10px;white-space:nowrap}
  .editor-page #pname{width:min(42vw,168px);min-width:88px;height:38px}
  .editor-page header button,.editor-page header .btn,.editor-page header select{min-height:38px!important;height:38px!important;padding:7px 9px!important;font-size:11px!important}
  .editor-page header .header-project button{font-size:10px!important}
  .editor-page header .header-view{gap:5px;max-width:52vw}
  .editor-page header .header-view #lang,.editor-page header .header-view #don{display:none!important}
  .editor-page header .header-view #theme,.editor-page header .header-view #help{display:inline-flex!important}
  .dibujo-page header .header-main .logo{max-width:42vw;overflow:hidden;text-overflow:ellipsis}
  .dibujo-page header .header-canvas{grid-area:project;min-width:0;padding:0!important;border:0!important;background:transparent!important}
  .dibujo-page header .header-canvas select{width:min(100%,270px);max-width:52vw}
  .dibujo-page header .header-history{grid-area:actions}
  .dibujo-page header .header-actions{grid-area:view;padding:0!important;border:0!important;background:transparent!important;justify-content:flex-end;}
  .dibujo-page header #webm{display:inline-flex!important;min-width:0!important;padding:5px 6px!important;font-size:9px!important;white-space:nowrap}
  .dibujo-page header .header-actions{gap:4px!important;min-width:0}
  .dibujo-page header .header-actions #tg3{display:inline-flex!important;justify-content:center;min-width:34px!important;width:34px!important;padding:4px!important}

  /* Pixel quick options become a slim strip; detailed settings live in the mobile tool sheet. */
  .pixel-page #opts{min-height:42px;padding:5px 7px!important;border-radius:13px!important;gap:6px!important;font-size:10px!important}
  /* Keep Pixel Art symmetry reachable while moving native brush size into the tool dock. */
  .pixel-page #opts .opts-tool{display:contents!important}
  .pixel-page #opts .opts-tool .tn{display:none!important}
  .pixel-page #opts .opts-tool label:nth-of-type(2){display:flex!important;align-items:center;gap:4px;flex:0 1 auto;min-width:0;white-space:nowrap;font-size:9px!important}
  .pixel-page #opts .opts-tool label:nth-of-type(2) select{min-width:70px!important;max-width:86px!important;width:auto!important;min-height:30px!important;height:30px!important;padding:3px 5px!important;font-size:9px!important}
  .pixel-page #opts .opts-selection{max-width:none;flex:1 1 auto;min-width:0}
  .pixel-page #opts .opts-view{margin-left:auto!important;gap:5px!important}
  .pixel-page #opts .opts-view #tilepv{width:32px!important;height:32px!important}
  .pixel-page #opts .opts-view button{min-height:32px!important;padding:5px 8px!important}

  /* Canvas: remove card-like bulk and let it dominate the viewport. */
  .editor-page main{grid-template-columns:1fr!important;gap:7px!important;min-height:0!important}
  .panel-resizer{display:none!important}
  .editor-page #stage{padding:3px!important;border-radius:16px!important;min-height:0!important}
  .pixel-page main{grid-row:4!important}
  .dibujo-page main{grid-row:3!important}

  /* Tablet: side sheets preserve the generous canvas while remaining thumb-friendly. */
  #tools,#side{
    position:fixed!important;
    top:78px!important;
    bottom:72px!important;
    width:min(360px,46vw)!important;
    max-height:none!important;
    margin:0!important;
    z-index:960!important;
    padding:10px!important;
    border-radius:20px!important;
    background:color-mix(in srgb,var(--ui-surface) 97%,transparent)!important;
    box-shadow:0 24px 65px rgba(0,0,0,.24)!important;
    backdrop-filter:blur(22px)!important;
    overscroll-behavior:contain!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    transform:translateX(-18px)!important;
    transition:opacity .18s ease,transform .20s ease,visibility 0s linear .20s!important;
  }
  #tools{left:8px!important;right:auto!important}
  #side{right:8px!important;left:auto!important;transform:translateX(18px)!important}
  body.tools-open #tools,body.side-open #side{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    transform:none!important;
    transition-delay:0s!important;
  }
  body.tools-open::before,body.side-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:930;
    background:rgba(15,17,21,.22);
    backdrop-filter:blur(2px);
  }

  #toolsfab,#sidefab{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    width:calc(50% - 18px)!important;
    max-width:180px!important;
    height:46px!important;
    bottom:calc(12px + var(--ui-safe-bottom))!important;
    border-radius:15px!important;
    z-index:980!important;
    font-size:11px!important;
    font-weight:900!important;
    letter-spacing:.01em!important;
    background:var(--ui-surface)!important;
    box-shadow:0 14px 36px rgba(39,41,48,.18)!important;
  }
  #toolsfab{left:10px!important}
  #sidefab{right:10px!important;left:auto!important}
  #toolsfab:hover,#sidefab:hover{transform:translateY(-1px)!important}

  /* Sheet content: dedicated touch targets and readable tool names. */
  #tools .tool-brand{position:sticky!important;top:-10px!important;z-index:12!important;min-height:44px!important;padding:8px 9px 9px!important;margin:-10px -10px 2px!important;border-radius:20px 20px 0 0!important;background:color-mix(in srgb,var(--ui-surface) 98%,transparent)!important;backdrop-filter:blur(18px)!important}
  #tools .tool-brand b{font-size:11px!important}
  #tools .tool-brand i{font-size:8px!important}
  #tools .tool-brand-current{display:block!important;margin-left:auto;max-width:44%;font-size:8px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #tools .tgrp{width:100%!important;flex:none!important}
  #tools .tgrp-h{min-height:48px!important;height:48px!important;border-radius:13px!important;padding:8px 10px!important}
  #tools .tgrp-b{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;padding:9px!important;border-radius:14px!important}
  #tools .tgrp-b button{min-height:64px!important;height:64px!important;aspect-ratio:auto!important;border-radius:12px!important;font-size:22px!important;padding:6px 5px 16px!important}
  #tools .tgrp-b button::after{font-size:9px!important;bottom:5px!important}
  #tools .tool-color-body .pal{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important}
  #tools .tool-color-body .sw{min-height:40px!important;height:40px!important}
  #tools .tool-color-body #sv{height:132px!important;min-height:132px!important}
  #tools .tool-size-body{gap:10px!important}
  #tools .size-main{grid-template-columns:minmax(0,1fr) 82px!important}
  #tools .size-main input[type=range],#tools .size-control input[type=range]{height:42px!important;min-height:42px!important}
  #tools .shape-picker{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important}
  #tools .shape-picker button{min-height:46px!important;height:46px!important}
  #tools .mirror-tool-group .mirror-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #tools .mirror-tool-group .mirror-grid button{min-height:46px!important}

  /* Layers/properties sheet. */
  #side{overflow:auto!important;scrollbar-width:thin}
  #side>div,#side details{border-radius:14px!important;padding:11px!important}
  #side .layer{min-height:46px!important;padding:7px!important;border-radius:11px!important}
  #side .layer button{min-height:38px!important;min-width:38px!important}
  #side input[type=range]{height:40px!important;min-height:40px!important}
  #side select,#side input[type=number]{min-height:40px!important}

  /* Timeline: compact, scrollable, no giant empty ribbon. */
  #tl{min-height:66px!important;max-height:78px!important;border-radius:14px!important;padding:6px 7px!important;gap:6px!important}
  #tl .tl-brand{min-width:82px!important;padding:0 4px!important}
  #tl .tl-brand strong{font-size:8px!important}
  #tl .tl-caption{font-size:8px!important}
  #tl .tl-transport,#tl .tl-actions,#tl .tl-settings{gap:4px!important;padding:3px!important}
  #tl .tl-transport button,#tl .tl-actions button{width:32px!important;height:32px!important;min-height:32px!important}
  #tl .fr canvas{width:44px!important;height:44px!important}
  #tl .fr{font-size:8px!important}
  #tl .tl-settings label{min-height:32px!important;padding:4px 6px!important}
  #tl .tl-settings input[type=range]{width:58px!important}

  /* Contextual bars cannot cover the main canvas on touch devices. */
  #txbar,#selbar{top:74px!important;max-width:calc(100vw - 18px)!important;max-height:42dvh!important;overflow:auto!important}
}

/* Phone: bottom-sheet controls + two-column tool palette. */
@media (max-width: 700px){
  :root{--mobile-nav-h:56px}
  #app{padding:5px;gap:5px}
  .editor-page header{grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"main view" "project actions"!important;border-radius:14px!important;padding:6px!important}
  .editor-page header .header-main .home{padding:7px 8px!important}
  .editor-page header .header-main .home span{display:none!important}
  .editor-page .header-main .logo{max-width:46vw;font-size:9px!important}
  .editor-page #pname{width:min(44vw,150px)!important;min-width:82px!important;font-size:11px!important}
  .editor-page header button,.editor-page header .btn,.editor-page header select{min-height:36px!important;height:36px!important;font-size:10px!important;padding:6px 8px!important}
  .editor-page header .header-view{max-width:48vw!important;gap:4px!important}
  .editor-page header #exp{font-size:10px!important}
  .dibujo-page header .header-canvas select{max-width:52vw!important;font-size:9px!important}
  .dibujo-page header .header-main .logo{font-size:9px!important}

  .pixel-page #opts{min-height:38px!important;border-radius:12px!important;padding:4px 6px!important}
  .pixel-page #opts .opts-view{gap:4px!important}
  .pixel-page #opts .opts-view #zl{min-width:42px;text-align:center;font-size:10px}
  .pixel-page #opts .opts-view #fitb{display:inline-flex!important}
  .pixel-page #opts .opts-view #tilepv{display:none!important}
  .pixel-page #opts .opts-view button{min-height:30px!important;height:30px!important;font-size:9px!important;padding:5px 7px!important}

  /* Bottom sheet instead of tall left/right drawers. */
  #tools,#side{
    left:6px!important;right:6px!important;top:auto!important;bottom:calc(66px + var(--ui-safe-bottom))!important;
    width:auto!important;max-height:min(72dvh,690px)!important;
    border-radius:22px!important;
    transform:translateY(calc(100% + 22px))!important;
    padding:9px!important;
    transition:opacity .16s ease,transform .20s cubic-bezier(.2,.82,.2,1),visibility 0s linear .20s!important;
  }
  #tools{transform:translateY(calc(100% + 22px))!important}
  #side{transform:translateY(calc(100% + 22px))!important}
  body.tools-open #tools,body.side-open #side{transform:none!important}
  #tools .tool-brand{top:-9px!important;margin:-9px -9px 2px!important;border-radius:22px 22px 0 0!important}
  #tools .tgrp-b{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  #tools .tgrp-b button{min-height:68px!important;height:68px!important;font-size:23px!important}
  #tools .tgrp-b button::after{font-size:10px!important;bottom:6px!important}
  #tools .tool-color-body .pal{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
  #tools .tool-color-body .sw{min-height:44px!important;height:44px!important}
  #tools .tool-color-body #sv{height:124px!important;min-height:124px!important}
  #tools .size-presets{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  #tools .size-presets button{min-height:40px!important;height:40px!important}
  #tools .shape-picker{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  #tools .shape-picker button{min-height:48px!important;height:48px!important}
  #tools .mirror-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #tools .mirror-grid button{min-height:48px!important}

  #toolsfab,#sidefab{width:calc(50% - 9px)!important;max-width:none!important;height:50px!important;bottom:calc(7px + var(--ui-safe-bottom))!important;border-radius:16px!important;font-size:11px!important}
  #toolsfab{left:6px!important}#sidefab{right:6px!important;left:auto!important}

  #side{bottom:calc(66px + var(--ui-safe-bottom))!important;max-height:min(66dvh,620px)!important}
  #side .layer{min-height:50px!important}
  #side .layer button{min-height:40px!important;min-width:40px!important}

  #tl{min-height:60px!important;max-height:70px!important;padding:5px 6px!important}
  #tl .tl-brand{min-width:72px!important}
  #tl .tl-brand strong{font-size:7px!important}
  #tl .tl-transport button,#tl .tl-actions button{width:30px!important;height:30px!important;min-height:30px!important}
  #tl .fr canvas{width:40px!important;height:40px!important}
  #tl .fr{padding:2px!important;font-size:7px!important}
  #tl .tl-settings label{font-size:8px!important;min-height:30px!important}

  /* Drawing canvas gets the same touch-first feel while keeping the large artwork visible. */
  .dibujo-page #stage{border-radius:14px!important}
  .dibujo-page #wrap canvas{image-rendering:auto}
}

/* Small phones: reduce chrome, never make touch targets smaller. */
@media (max-width: 440px){
  .editor-page header .header-view #help{display:none!important}
  .editor-page header .header-view #theme{display:inline-flex!important}
  .editor-page header #exp{padding-inline:7px!important}
  .pixel-page #opts .opts-view #gridb{display:none!important}
  .pixel-page #opts .opts-view #tileb{display:none!important}
  .pixel-page #opts .opts-view #fitb{display:inline-flex!important}
  #tools .tgrp-h{min-height:46px!important;height:46px!important;font-size:9px!important}
  #tools .tgrp-b button{min-height:64px!important;height:64px!important}
  #tools .tool-color-body #sv{height:112px!important;min-height:112px!important}
  #toolsfab,#sidefab{font-size:10px!important}
}

/* v65: timeline controls are deliberately grouped for compact layouts.
   display:contents keeps the original desktop grid; touch layouts opt into rows below. */
.tl-controls{display:contents}

@media (min-width:701px) and (max-width:900px), (pointer:coarse) and (min-width:701px) and (max-width:1180px){
  .editor-page #tl.timeline-bar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:"controls settings" "frames frames"!important;
    align-items:center!important;
    gap:6px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:8px!important;
    overflow:hidden!important;
  }
  .editor-page #tl .tl-brand{display:none!important}
  .editor-page #tl .tl-controls{
    display:flex!important;grid-area:controls!important;align-items:center!important;justify-content:flex-start!important;
    gap:5px!important;min-width:0!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;
    padding:2px!important;scrollbar-width:thin!important;overscroll-behavior-x:contain;
  }
  .editor-page #tl .tl-transport,.editor-page #tl .tl-actions{
    display:flex!important;position:static!important;transform:none!important;flex:0 0 auto!important;gap:3px!important;padding:2px!important;min-width:max-content!important;
  }
  .editor-page #tl .tl-transport button,.editor-page #tl .tl-actions button{
    width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;flex:0 0 32px!important;
  }
  .editor-page #tl .tl-settings{
    grid-area:settings!important;justify-self:end!important;min-width:0!important;max-width:100%!important;flex-wrap:nowrap!important;
    gap:4px!important;padding:2px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin!important;
  }
  .editor-page #tl .tl-settings label{flex:0 0 auto!important;min-height:32px!important;padding:4px 6px!important;font-size:9px!important}
  .editor-page #tl .tl-frames{grid-area:frames!important;width:100%!important;min-width:0!important;min-height:0!important;height:52px!important;overflow-x:auto!important;overflow-y:hidden!important;gap:5px!important;padding:2px!important}
  .editor-page #tl .tl-frames .fr canvas{width:44px!important;height:44px!important}
}

@media (max-width:700px){
  .editor-page #tl.timeline-bar{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    grid-template-areas:"controls" "frames" "settings"!important;
    align-items:center!important;
    gap:5px!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:7px!important;
    overflow:hidden!important;
    border-radius:14px!important;
  }
  .editor-page #tl .tl-brand{display:none!important}
  .editor-page #tl .tl-controls{
    display:flex!important;grid-area:controls!important;align-items:center!important;justify-content:flex-start!important;
    width:100%!important;max-width:100%!important;min-width:0!important;gap:5px!important;overflow:visible!important;padding:0!important;
  }
  .pixel-page #tl .tl-controls{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:4px!important}
  .pixel-page #tl .tl-controls>.tl-transport,.pixel-page #tl .tl-controls>.tl-actions{grid-area:auto!important}
  .editor-page #tl .tl-transport,.editor-page #tl .tl-actions{
    display:flex!important;position:static!important;transform:none!important;flex:0 1 auto!important;align-items:center!important;justify-content:flex-start!important;
    width:max-content!important;max-width:100%!important;min-width:0!important;gap:3px!important;padding:2px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin!important;
  }
  .editor-page #tl .tl-transport button,.editor-page #tl .tl-actions button{
    width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;flex:0 0 30px!important;padding:0!important;border-radius:9px!important;
  }
  .editor-page #tl .tl-frames{
    grid-area:frames!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;
    width:100%!important;min-width:0!important;height:48px!important;min-height:48px!important;max-height:48px!important;
    gap:5px!important;padding:2px!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin!important;overscroll-behavior-x:contain;
  }
  .editor-page #tl .tl-frames .fr{flex:0 0 auto!important;padding:2px!important;font-size:8px!important}
  .editor-page #tl .tl-frames .fr canvas{width:40px!important;height:40px!important}
  .editor-page #tl .tl-settings{
    grid-area:settings!important;display:flex!important;align-items:center!important;justify-self:stretch!important;align-self:stretch!important;
    width:100%!important;min-width:0!important;max-width:100%!important;gap:5px!important;padding:2px!important;
    flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin!important;overscroll-behavior-x:contain;
  }
  .editor-page #tl .tl-settings label{
    display:flex!important;align-items:center!important;gap:4px!important;flex:0 0 auto!important;min-width:max-content!important;
    min-height:30px!important;padding:3px 6px!important;font-size:9px!important;white-space:nowrap!important;
    border-radius:9px!important;background:var(--ui-surface-2)!important;border:1px solid var(--ui-border)!important;
  }
  .editor-page #tl .tl-settings select{min-height:28px!important;height:28px!important;padding:3px 5px!important;font-size:10px!important}
  .editor-page #tl .tl-settings input[type=range]{width:56px!important;min-width:50px!important;height:24px!important}
  .pixel-page #tl .tl-settings{justify-content:flex-end!important;width:max-content!important;max-width:100%!important;justify-self:end!important;overflow-x:auto!important}
  .pixel-page #tl .tl-settings #fps{min-width:48px!important}
  .dibujo-page #tl .tl-settings{justify-content:flex-start!important}
}


/* =====================================================================
   PIXAMBAS V66 — PHONE-ONLY UI REPAIR
   Tablet (701px and wider) and desktop keep their existing layout.
   ===================================================================== */
@media (max-width:700px){
  /* A single, predictable scroll area for each bottom sheet. */
  #tools,#side{
    max-height:min(62dvh,560px)!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    padding:11px!important;
    gap:9px!important;
    scrollbar-width:thin!important;
  }
  #tools{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  #tools .tool-brand{
    order:-10!important;position:sticky!important;top:0!important;z-index:25!important;
    min-height:44px!important;height:auto!important;margin:0 0 3px!important;
    padding:9px 10px!important;border-radius:13px!important;
    background:var(--ui-surface)!important;border:1px solid var(--ui-border)!important;
  }
  #tools .tool-brand-current{display:block!important;max-width:48%!important;font-size:9px!important}
  #tools .tgrp:not(.tool-color-dock):not(.tool-size-dock){order:0!important;flex:0 0 auto!important}
  #tools .tgrp:not(.tool-color-dock):not(.tool-size-dock):has(>.tgrp-b button.on){order:-5!important}
  #tools .tool-size-dock{order:10!important;width:100%!important;flex:0 0 auto!important}
  #tools .tool-color-dock{order:11!important;width:100%!important;flex:0 0 auto!important}
  #tools .tgrp{
    border:1px solid var(--ui-border)!important;
    border-radius:14px!important;
    background:color-mix(in srgb,var(--ui-surface) 96%,transparent)!important;
    padding:4px!important;
  }
  #tools .tgrp-h{
    display:grid!important;grid-template-columns:28px minmax(0,1fr) 18px!important;
    min-height:46px!important;height:auto!important;padding:9px 10px!important;
    border-radius:11px!important;text-align:left!important;white-space:normal!important;
  }
  #tools .tgrp-h .tg-nm{font-size:10px!important;line-height:1.25!important;letter-spacing:.045em!important}
  #tools .tgrp-b{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-rows:minmax(70px,auto)!important;
    gap:8px!important;padding:8px!important;margin:5px 0 0!important;
    border-radius:11px!important;
  }
  #tools .tgrp-b button{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:5px!important;min-width:0!important;min-height:70px!important;height:auto!important;
    aspect-ratio:auto!important;padding:8px 7px!important;border-radius:11px!important;
    white-space:normal!important;overflow:visible!important;font-size:22px!important;line-height:1.1!important;
  }
  #tools .tgrp-b button::after{
    position:static!important;display:block!important;inset:auto!important;width:100%!important;
    min-height:2.2em!important;overflow:visible!important;white-space:normal!important;
    overflow-wrap:anywhere!important;text-overflow:clip!important;text-align:center!important;
    font-size:10px!important;line-height:1.15!important;order:1!important;
  }
  #tools .tgrp-b button.on::after{color:var(--ui-accent-strong)!important}
  #tools .tool-color-body{max-height:none!important;overflow:visible!important;padding:10px!important}
  #tools .tool-color-body .dock-color-panel{margin:0 0 9px!important;padding:10px!important;border-radius:12px!important}
  #tools .tool-color-body .dock-color-panel:last-child{margin-bottom:0!important}
  #tools .tool-color-body .pal{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
  #tools .tool-color-body .sw{min-height:40px!important;height:40px!important}
  #tools .tool-color-body #sv{height:124px!important;min-height:124px!important}
  #tools .tool-color-body #hue,#tools .tool-color-body #alp{height:32px!important;min-height:32px!important}
  #tools .tool-size-body{display:grid!important;gap:11px!important;padding:10px!important}
  #tools .size-main{grid-template-columns:minmax(0,1fr) 76px!important;gap:9px!important}
  #tools .size-readout{min-width:0!important}
  #tools .size-presets{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important}
  #tools .size-presets button{min-height:40px!important;height:40px!important}

  /* Layer/property sections are cards, not a compressed continuous block. */
  #side{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  #side>div,#side details{
    flex:0 0 auto!important;width:100%!important;min-width:0!important;
    margin:0!important;padding:12px!important;border-radius:14px!important;
  }
  #side summary{min-height:38px!important;gap:8px!important;line-height:1.25!important}
  #side label{min-width:0!important;line-height:1.45!important}
  #side input[type=range]{width:100%!important;min-width:0!important;height:34px!important}
  #side select,#side input[type=number],#side input[type=text]{max-width:100%!important;min-width:0!important;min-height:38px!important}
  #side .row{display:flex!important;flex-wrap:wrap!important;gap:7px!important;align-items:center!important}
  #side .row>*{min-width:0!important;max-width:100%!important}
  #side .pal{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important}
  #side .layer{gap:6px!important;min-width:0!important;flex-wrap:nowrap!important}
  #side .layer span{min-width:0!important}

  /* Keep the quick-options strip scrollable rather than squeezing controls together. */
  .pixel-page #opts{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:7px!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:thin!important;overscroll-behavior-x:contain!important}
  .pixel-page #opts .opts-view{display:flex!important;flex:0 0 auto!important;gap:5px!important;white-space:nowrap!important}
  .pixel-page #opts .opts-view #zl{min-width:44px!important}
  .pixel-page #opts .opts-view button{flex:0 0 auto!important}

  /* Compact single-row transport controls, then frames, then horizontally scrollable settings. */
  .editor-page #tl.timeline-bar{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    grid-template-areas:"controls" "frames" "settings"!important;
    gap:5px!important;padding:7px!important;overflow:hidden!important;
  }
  .editor-page #tl .tl-controls,.pixel-page #tl .tl-controls{
    display:flex!important;grid-area:controls!important;flex-flow:row nowrap!important;align-items:center!important;
    width:100%!important;min-width:0!important;max-width:100%!important;gap:4px!important;
    overflow-x:auto!important;overflow-y:hidden!important;padding:1px!important;scrollbar-width:thin!important;
    overscroll-behavior-x:contain!important;
  }
  .editor-page #tl .tl-transport,.editor-page #tl .tl-actions{
    display:flex!important;flex:0 0 auto!important;flex-flow:row nowrap!important;position:static!important;
    width:max-content!important;max-width:none!important;min-width:max-content!important;gap:3px!important;
    padding:1px!important;overflow:visible!important;transform:none!important;
  }
  .editor-page #tl .tl-transport button,.editor-page #tl .tl-actions button{
    flex:0 0 28px!important;width:28px!important;min-width:28px!important;height:30px!important;min-height:30px!important;
    padding:0!important;border-radius:8px!important;font-size:13px!important;
  }
  .editor-page #tl .tl-frames{
    grid-area:frames!important;width:100%!important;min-width:0!important;height:46px!important;min-height:46px!important;max-height:46px!important;
    gap:5px!important;padding:2px!important;overflow-x:auto!important;overflow-y:hidden!important;justify-content:flex-start!important;
  }
  .editor-page #tl .tl-frames .fr canvas{width:38px!important;height:38px!important}
  .editor-page #tl .tl-settings{
    grid-area:settings!important;display:flex!important;flex-flow:row nowrap!important;align-items:center!important;
    justify-self:stretch!important;width:100%!important;min-width:0!important;max-width:100%!important;
    gap:5px!important;overflow-x:auto!important;overflow-y:hidden!important;flex-wrap:nowrap!important;
  }
  .editor-page #tl .tl-settings label{flex:0 0 auto!important;min-height:30px!important;padding:3px 6px!important;font-size:9px!important}
  .editor-page #tl .tl-settings select{height:27px!important;min-height:27px!important;font-size:10px!important}
  .editor-page #tl .tl-settings input[type=range]{width:52px!important;min-width:48px!important}
}


/* =====================================================================
   PIXAMBAS V67 — phone panel interaction / stacking fix
   Only <=700px; tablet and desktop declarations are not modified.
   ===================================================================== */
@media (max-width:700px){
  /* The backdrop must never become the hit target. Phone panels are portaled
     to body and placed above it, while the app itself stays unchanged. */
  body.tools-open::before,body.side-open::before{pointer-events:none!important}

  #tools,#side{
    position:fixed!important;
    left:6px!important;right:6px!important;top:auto!important;
    bottom:calc(66px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    height:min(62dvh,560px,calc(100dvh - 245px))!important;
    min-height:150px!important;
    max-height:calc(100dvh - 245px)!important;
    box-sizing:border-box!important;
    z-index:1010!important;
    margin:0!important;
    overflow-x:hidden!important;overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    touch-action:pan-y!important;
    scrollbar-width:thin!important;
    isolation:isolate!important;
  }
  #tools{display:none!important;flex-direction:column!important;align-items:stretch!important}
  #side{display:none!important;flex-direction:column!important;align-items:stretch!important}
  body.tools-open #tools,body.side-open #side{
    display:flex!important;visibility:visible!important;opacity:1!important;
    pointer-events:auto!important;transform:none!important;
  }
  /* Don't let older phone/tablet drawer rules clip or translate an open panel. */
  #tools{transform:translateY(calc(100% + 22px))!important}
  #side{transform:translateY(calc(100% + 22px))!important}
  body.tools-open #tools,body.side-open #side{transform:none!important}

  /* The color picker is a 2-D pointer surface; it must capture both axes. */
  #tools #sv,#side #sv,#tools .tool-color-body #sv{touch-action:none!important;pointer-events:auto!important}
  #tools input[type=range],#side input[type=range],
  #tools input[type=color],#side input[type=color],
  #tools select,#side select,#tools button,#side button{pointer-events:auto!important}

  /* Keep the reference-image window usable on small phones too. */
  body.dibujo-page #dref{
    left:8px!important;right:8px!important;top:max(8px,env(safe-area-inset-top,0px))!important;
    width:auto!important;max-width:none!important;
    max-height:calc(100dvh - 120px)!important;
    box-sizing:border-box!important;z-index:995!important;
  }
  body.dibujo-page #drefb{min-height:0!important;max-height:calc(100dvh - 200px)!important;overflow:auto!important;overscroll-behavior:contain!important}
  body.dibujo-page #refwrap{min-height:80px!important;max-height:30dvh!important}
  body.dibujo-page #refcv{max-width:100%!important}
}


/* Pixambas v69 — practical, accessible homepage guide. Scoped to the landing page only. */
body.home-page main .home-intro{max-width:850px;margin:0 auto 20px;color:var(--ui-muted);font-size:clamp(15px,1.65vw,18px);line-height:1.8;text-wrap:pretty}
body.home-page main .guide-toc{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 22px}
body.home-page main .guide-toc a,body.home-page main .guide-cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 13px;border:1px solid var(--ui-border);border-radius:999px;background:var(--ui-surface);color:var(--ui-accent-strong);font-size:12px;font-weight:800;text-decoration:none;line-height:1.35}
body.home-page main .guide-toc a:hover,body.home-page main .guide-cta:hover{border-color:var(--ui-accent);background:var(--ui-accent-soft)}
body.home-page main .tool-guide{margin:28px 0 28px;text-align:left}
body.home-page main .guide-heading{text-align:center;max-width:840px;margin:0 auto 24px}
body.home-page main .guide-kicker{display:inline-block;margin:0 0 9px;color:var(--ui-accent-strong);font-size:10px;font-weight:900;letter-spacing:.15em;line-height:1.4}
body.home-page main .guide-heading h2,body.home-page main .guide-section h2{font:800 clamp(24px,4vw,35px)/1.2 var(--ui-display);letter-spacing:-.035em;color:var(--ui-text);margin:0 0 12px;text-wrap:balance}
body.home-page main .guide-heading p,body.home-page main .guide-section>p{max-width:900px;margin:0 auto 15px;color:var(--ui-muted);font-size:15px;line-height:1.8;text-wrap:pretty}
body.home-page main .guide-section{scroll-margin-top:24px;margin:24px 0 0;padding:clamp(17px,3vw,28px);border:1px solid var(--ui-border);border-radius:22px;background:color-mix(in srgb,var(--ui-surface) 94%,transparent);box-shadow:var(--ui-shadow-sm)}
body.home-page main .guide-section>h2{margin-bottom:12px}
body.home-page main .guide-section h3{font:800 16px/1.4 var(--ui-display);color:var(--ui-text);margin:24px 0 12px}
body.home-page main .guide-tool-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 12px;list-style:none;padding:0;margin:0}
body.home-page main .guide-tool-list li{min-width:0;padding:12px 13px;border:1px solid var(--ui-border);border-radius:13px;background:var(--ui-surface-2);color:var(--ui-muted);font-size:13px;line-height:1.7;overflow-wrap:anywhere}
body.home-page main .guide-tool-list strong{display:block;margin:0 0 4px;color:var(--ui-text);font-size:13px;line-height:1.4}
body.home-page main .guide-tip{margin:18px 0;padding:14px 16px;border-left:3px solid var(--ui-sage);border-radius:0 12px 12px 0;background:color-mix(in srgb,var(--ui-sage) 11%,var(--ui-surface));color:var(--ui-muted);font-size:13px;line-height:1.75}
body.home-page main .guide-tip strong{color:var(--ui-text)}
body.home-page main .guide-cta{margin:6px 0 0;border-color:color-mix(in srgb,var(--ui-accent) 34%,var(--ui-border));background:var(--ui-accent-soft)}
body.home-page main .guide-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.home-page main .guide-faq details{min-width:0;padding:13px 15px;border:1px solid var(--ui-border);border-radius:13px;background:var(--ui-surface-2)}
body.home-page main .guide-faq summary{cursor:pointer;color:var(--ui-text);font-size:13px;font-weight:800;line-height:1.55}
body.home-page main .guide-faq p{margin:10px 0 0;color:var(--ui-muted);font-size:13px;line-height:1.75}
body.home-page main .guide-section a:not(.guide-cta){color:var(--ui-accent-strong);font-weight:750}
@media(max-width:900px){body.home-page main .home-intro{font-size:15px;line-height:1.75}.guide-toc{gap:7px!important}.guide-toc a{font-size:11px!important}.tool-guide{margin-top:20px!important}.guide-tool-list{grid-template-columns:1fr!important}.guide-faq{grid-template-columns:1fr!important}.guide-heading p,.guide-section>p{font-size:14px!important}}
@media(prefers-reduced-motion:reduce){body.home-page main .guide-toc a,body.home-page main .guide-cta{transition:none!important}}


/* v69: tablet touch panels share the same input rules as phone sheets. */
@media (max-width:900px), (pointer:coarse) and (max-width:1180px){
  #tools,#side{pointer-events:auto}
  #tools #sv,#side #sv,#tools .tool-color-body #sv,#side .tool-color-body #sv{touch-action:none!important;pointer-events:auto!important}
  #tools input[type=range],#side input[type=range],#tools input[type=color],#side input[type=color],#tools select,#side select,#tools button,#side button,#tools .sw,#side .sw{pointer-events:auto!important}
}


/* =====================================================================
   PIXAMBAS V70 — expressive landing page + compact touch drawers.
   Homepage styling is strictly scoped to .home-page. Editor drawer sizing
   applies only to the existing phone/tablet touch breakpoints.
   ===================================================================== */
body.home-page main{
  position:relative;isolation:isolate;max-width:1160px;
  padding:clamp(24px,4.5vw,54px) clamp(14px,2.5vw,28px) 64px;
}
body.home-page main>*{position:relative;z-index:1}
body.home-page .home-ambient{z-index:0}
body.home-page main .home-hero{
  position:relative;isolation:isolate;overflow:hidden;
  margin:0 0 26px;padding:clamp(27px,4.5vw,54px) clamp(16px,4vw,52px) 24px;
  border:1px solid color-mix(in srgb,var(--ui-accent) 18%,var(--ui-border));
  border-radius:clamp(22px,3vw,34px);
  background:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 96%,var(--ui-accent-soft)),color-mix(in srgb,var(--ui-surface) 92%,var(--ui-sage)));
  box-shadow:0 26px 70px rgba(59,49,120,.08),0 2px 8px rgba(46,42,70,.035);
}
body.home-page .home-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background-image:linear-gradient(color-mix(in srgb,var(--ui-accent) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ui-accent) 7%,transparent) 1px,transparent 1px);
  background-size:26px 26px;mask-image:linear-gradient(135deg,#000 0%,transparent 72%);
}
body.home-page .home-hero::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;width:min(50vw,520px);aspect-ratio:1;right:-15%;top:-48%;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--ui-accent) 13%,transparent),transparent 68%);
}
body.home-page .home-eyebrow{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  margin:0 auto 18px;padding:8px 12px;border:1px solid var(--ui-border);
  border-radius:999px;background:color-mix(in srgb,var(--ui-surface) 83%,transparent);
  color:var(--ui-muted);font-size:10px;font-weight:900;letter-spacing:.15em;line-height:1.4;
}
body.home-page .home-eyebrow-dot{width:7px;height:7px;flex:0 0 7px;border-radius:2px;background:linear-gradient(135deg,var(--ui-accent),var(--ui-sage));box-shadow:0 0 0 4px var(--ui-accent-soft)}
body.home-page main .home-logo{font-size:clamp(36px,7.2vw,76px)!important;letter-spacing:.015em!important;margin-bottom:18px!important;text-shadow:0 14px 35px rgba(88,76,190,.08)}
body.home-page main .home-logo::before{right:-17px;top:9%;width:8px;height:8px;box-shadow:-17px 23px 0 var(--ui-sage),-7px 43px 0 var(--ui-accent)}
body.home-page main .tag{max-width:760px;font-size:clamp(15px,2vw,20px);font-weight:650;line-height:1.55;margin-bottom:13px}
body.home-page main .tag b{background:linear-gradient(100deg,var(--ui-accent-strong),var(--ui-sage));-webkit-background-clip:text;background-clip:text;color:transparent}
body.home-page main .home-intro{max-width:770px;margin:0 auto 19px;font-size:clamp(14px,1.35vw,16px);line-height:1.8}
body.home-page main .home-highlights{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:20px 0 22px}
body.home-page main .home-highlights>span{display:flex;align-items:center;gap:7px;min-height:36px;padding:6px 11px;border:1px solid var(--ui-border);border-radius:999px;background:color-mix(in srgb,var(--ui-surface) 84%,transparent);color:var(--ui-muted);font-size:9px;font-weight:850;letter-spacing:.07em}
body.home-page main .home-highlights b{color:var(--ui-accent-strong);font-size:12px;font-weight:950;font-variant-numeric:tabular-nums}
body.home-page main .home-highlights small{font-size:9px;font-weight:850;line-height:1.25}
body.home-page main .start{gap:8px;min-height:38px;padding:0 15px;border:1px solid color-mix(in srgb,var(--ui-accent) 22%,transparent);box-shadow:0 5px 16px color-mix(in srgb,var(--ui-accent) 10%,transparent);letter-spacing:.13em}
body.home-page main .start>span{font-size:15px}
body.home-page main .sel{gap:16px;margin:25px 0 0;text-align:left}
body.home-page main .card{
  padding:13px;border-radius:24px;border-color:color-mix(in srgb,var(--ui-border) 88%,var(--ui-accent));
  background:linear-gradient(155deg,var(--ui-surface),color-mix(in srgb,var(--ui-surface-2) 72%,var(--ui-surface)));
  box-shadow:0 14px 34px rgba(48,49,55,.06);transform:translateY(0);
}
body.home-page main .card:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(54,47,99,.13);border-color:color-mix(in srgb,var(--ui-accent) 44%,var(--ui-border))}
body.home-page main .card .art{position:relative;isolation:isolate;height:clamp(142px,19vw,218px);border-radius:17px;border-color:color-mix(in srgb,var(--ui-border) 70%,transparent);transition:border-radius .2s ease}
body.home-page main .card .art::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.78}
body.home-page main .sel .card:first-child .art{background:linear-gradient(140deg,#eeebff,#f7f5ff 56%,#e6f4ed)}
body.home-page main .sel .card:first-child .art::before{background-image:linear-gradient(rgba(111,91,214,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(111,91,214,.10) 1px,transparent 1px),radial-gradient(circle at 50% 50%,rgba(123,111,232,.13),transparent 62%);background-size:16px 16px,16px 16px,auto}
body.home-page main .sel .card:nth-child(2) .art{background:linear-gradient(135deg,#fceee8,#f5eeff 58%,#eaf4f0)}
body.home-page main .sel .card:nth-child(2) .art::before{background:radial-gradient(ellipse at 22% 80%,rgba(224,164,135,.25),transparent 45%),radial-gradient(ellipse at 82% 14%,rgba(123,111,232,.18),transparent 52%)}
body.home-page main .card .art canvas{position:relative;z-index:1;width:clamp(112px,13vw,154px);height:clamp(112px,13vw,154px);filter:drop-shadow(0 9px 15px rgba(67,48,130,.12))}
body.home-page main .card .art svg{position:relative;z-index:1;max-width:80%;filter:drop-shadow(0 8px 15px rgba(90,58,120,.12))}
body.home-page main .home-card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:15px 4px 1px}
body.home-page main .home-card-kicker{color:var(--ui-accent-strong);font-size:9px;font-weight:950;letter-spacing:.13em;line-height:1.5}
body.home-page main .home-card-index{display:grid;place-items:center;width:25px;height:25px;flex:0 0 25px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface-2);color:var(--ui-muted);font-size:9px;font-weight:900}
body.home-page main .card h2{font-size:clamp(19px,2.1vw,24px);margin:9px 4px 7px;line-height:1.22}
body.home-page main .card p{margin:0 4px 17px;max-width:50ch;font-size:14px;line-height:1.7}
body.home-page main .card .go{min-height:35px;margin:0 4px 4px;padding:0 12px;border:1px solid color-mix(in srgb,var(--ui-accent) 24%,var(--ui-border));border-radius:999px;background:var(--ui-accent-soft);font-size:10px;letter-spacing:.08em}
body.home-page main .free{margin-top:6px;padding:21px clamp(15px,3vw,28px)!important;border-radius:20px;background:linear-gradient(115deg,color-mix(in srgb,var(--ui-accent-soft) 78%,var(--ui-surface)),color-mix(in srgb,var(--ui-sage) 11%,var(--ui-surface)));border-color:color-mix(in srgb,var(--ui-accent) 18%,var(--ui-border))}
body.home-page main .free h2{font-size:clamp(12px,1.4vw,15px);letter-spacing:.04em}
body.home-page main .free p{max-width:900px;margin:0 auto;font-size:14px;line-height:1.8}
body.home-page main .guide-toc{margin:16px 0 26px;gap:9px}
body.home-page main .guide-toc a{min-height:42px;padding:10px 15px;background:var(--ui-surface);box-shadow:0 4px 14px rgba(43,40,66,.035);transition:transform .18s ease,background .18s ease,border-color .18s ease}
body.home-page main .guide-toc a:hover{transform:translateY(-2px)}
body.home-page main .guide-heading{margin-bottom:28px}
body.home-page main .guide-heading h2{font-size:clamp(27px,4vw,39px)}
body.home-page main .guide-section{margin-top:18px;padding:clamp(18px,3.3vw,34px);border-radius:25px;background:linear-gradient(150deg,var(--ui-surface),color-mix(in srgb,var(--ui-surface-2) 75%,var(--ui-surface)));box-shadow:0 12px 36px rgba(48,49,55,.045)}
body.home-page main .guide-section h3{display:flex;align-items:center;gap:9px;margin-top:28px;padding-bottom:9px;border-bottom:1px solid var(--ui-border);font-size:15px}
body.home-page main .guide-tool-list{gap:10px}
body.home-page main .guide-tool-list li{padding:13px 15px;border-radius:15px;background:color-mix(in srgb,var(--ui-surface-2) 84%,var(--ui-surface));transition:border-color .18s ease,transform .18s ease}
body.home-page main .guide-tool-list li:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--ui-accent) 35%,var(--ui-border))}
body.home-page main .guide-tool-list strong{font-size:13px}
body.home-page main .guide-tip{border-radius:0 15px 15px 0;padding:15px 17px;background:linear-gradient(90deg,color-mix(in srgb,var(--ui-sage) 13%,var(--ui-surface)),transparent)}
body.home-page main .guide-faq details{padding:15px 17px;border-radius:15px;transition:border-color .18s ease}
body.home-page main .guide-faq details[open]{border-color:color-mix(in srgb,var(--ui-accent) 35%,var(--ui-border))}
body.home-page main footer{padding:20px 8px 0;border-top:1px solid var(--ui-border);margin-top:28px}
body.home-page #langsel{min-height:38px!important;height:38px!important;border:1px solid var(--ui-border)!important;background:var(--ui-surface)!important;color:var(--ui-text)!important;box-shadow:var(--ui-shadow-sm);font-weight:800}
body.home-page #thm{border-radius:13px}
@media(max-width:900px){
 body.home-page main{padding:34px 15px 48px}
 body.home-page main .home-hero{padding:28px 16px 18px;border-radius:25px}
 body.home-page main .sel{gap:12px;margin-top:22px}
 body.home-page main .card{padding:10px;border-radius:20px}
 body.home-page main .card .art{height:155px}
 body.home-page main .home-card-meta{margin:12px 3px 1px}
 body.home-page main .home-card-kicker{font-size:8px;letter-spacing:.08em}
 body.home-page main .card h2{font-size:19px}
 body.home-page main .card p{font-size:13px}
 body.home-page main .guide-tool-list{grid-template-columns:1fr}
}
@media(max-width:560px){
 body.home-page main{padding:74px 11px 36px}
 body.home-page main .home-hero{padding:24px 12px 14px;border-radius:21px}
 body.home-page .home-eyebrow{font-size:8px;letter-spacing:.10em;padding:7px 10px;margin-bottom:17px}
 body.home-page main .home-logo{font-size:clamp(30px,8.3vw,46px)!important;letter-spacing:0!important}
 body.home-page main .tag{font-size:15px;line-height:1.55}
 body.home-page main .home-intro{font-size:14px;line-height:1.75}
 body.home-page main .home-highlights{gap:6px;margin:16px 0 19px}
 body.home-page main .home-highlights>span{min-height:32px;padding:5px 8px;gap:5px;font-size:8px}
 body.home-page main .home-highlights b{font-size:11px}
 body.home-page main .home-highlights small{font-size:8px}
 body.home-page main .sel{grid-template-columns:1fr;gap:11px;margin-top:20px}
 body.home-page main .card{padding:10px}
 body.home-page main .card .art{height:145px}
 body.home-page main .card .art canvas{width:112px;height:112px}
 body.home-page main .home-card-kicker{font-size:8px}
 body.home-page main .card h2{font-size:20px}
 body.home-page main .card p{font-size:13px;margin-bottom:12px}
 body.home-page main .guide-toc{align-items:stretch;display:grid;grid-template-columns:1fr;margin:13px 0 20px}
 body.home-page main .guide-toc a{width:100%;justify-content:center}
 body.home-page main .guide-section{padding:17px 13px;border-radius:19px}
 body.home-page main .guide-section h2{font-size:24px}
 body.home-page main .guide-tool-list li{padding:12px 13px}
 body.home-page #langsel{top:12px!important;right:61px!important;min-height:35px!important;height:35px!important;padding:7px!important}
 body.home-page #thm{top:11px!important;right:12px!important;width:37px!important;height:37px!important}
}
@media(prefers-reduced-motion:reduce){body.home-page main .card,body.home-page main .guide-toc a,body.home-page main .guide-tool-list li{transition:none!important}}

/* Compact editor side-sheets: keep header, timeline and bottom quick-buttons clear. */
@media (max-width:900px), (pointer:coarse) and (max-width:1180px){
  #tools,#side{
    position:fixed!important;top:auto!important;bottom:calc(122px + var(--ui-safe-bottom))!important;
    width:min(320px,calc(100vw - 24px))!important;height:min(44dvh,420px)!important;
    max-height:calc(100dvh - 235px)!important;min-height:185px!important;
    margin:0!important;padding:8px!important;border-radius:17px!important;
    overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;touch-action:pan-y!important;
  }
  #tools{left:8px!important;right:auto!important}
  #side{right:8px!important;left:auto!important}
  #tools .tool-brand{min-height:38px!important;padding:6px 8px!important;margin:-8px -8px 1px!important;border-radius:16px 16px 0 0!important}
  #tools .tgrp-h{min-height:39px!important;height:auto!important;padding:6px 8px!important;gap:6px!important}
  #tools .tgrp-h .tg-ic{font-size:15px!important}
  #tools .tgrp-h .tg-nm{font-size:9px!important;letter-spacing:.035em!important}
  #tools .tgrp-b{gap:5px!important;padding:6px!important;margin-top:4px!important}
  #tools .tgrp-b button{min-height:52px!important;height:auto!important;padding:5px 4px 13px!important;border-radius:9px!important;font-size:18px!important}
  #tools .tgrp-b button::after{font-size:8px!important;bottom:4px!important}
  #tools .tool-size-dock .tgrp-h,#tools .tool-color-dock .tgrp-h{min-height:40px!important}
  #tools .tool-size-body{gap:7px!important;padding:8px!important}
  #tools .size-main{grid-template-columns:minmax(0,1fr) 64px!important;gap:7px!important}
  #tools .size-readout{min-height:40px!important;padding:6px 8px!important}
  #tools .size-readout b{font-size:15px!important}
  #tools .size-main input[type=range],#tools .size-control input[type=range]{height:32px!important;min-height:32px!important}
  #tools .size-presets{gap:5px!important}
  #tools .size-presets button{height:32px!important;min-height:32px!important;padding:4px!important}
  #tools .tool-color-body{padding:8px!important;max-height:none!important;overflow:visible!important}
  #tools .tool-color-body .dock-color-panel{margin-bottom:7px!important;padding:7px!important}
  #tools .tool-color-body #sv{height:92px!important;min-height:92px!important}
  #tools .tool-color-body .pal{grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:5px!important}
  #tools .tool-color-body .sw{height:31px!important;min-height:31px!important}
  #tools .tool-color-body #hue,#tools .tool-color-body #alp{height:24px!important;min-height:24px!important;margin:5px 0!important}
  #tools .shape-picker{gap:5px!important}
  #tools .shape-picker button{height:35px!important;min-height:35px!important;font-size:15px!important}
  #tools .mirror-tool-group .mirror-grid button{height:35px!important;min-height:35px!important}
  #side>div,#side details{padding:8px!important;border-radius:11px!important}
  #side summary{min-height:32px!important;gap:6px!important;font-size:11px!important}
  #side label{font-size:10px!important;line-height:1.3!important}
  #side input[type=range]{height:28px!important;min-height:28px!important}
  #side select,#side input[type=number],#side input[type=text]{min-height:32px!important;height:32px!important;padding:4px 7px!important;font-size:11px!important}
  #side .row{gap:5px!important}
  #side .pal{gap:5px!important;grid-template-columns:repeat(6,minmax(0,1fr))!important}
  #side .layer{min-height:38px!important;padding:5px!important;gap:5px!important}
  #side .layer button{width:30px!important;min-width:30px!important;height:30px!important;min-height:30px!important;padding:3px!important}
  #toolsfab,#sidefab{height:40px!important;min-height:40px!important;bottom:calc(7px + var(--ui-safe-bottom))!important;border-radius:12px!important;font-size:10px!important}
}
@media(max-width:700px){
  #tools,#side{width:min(320px,calc(100vw - 20px))!important;height:min(40dvh,300px)!important;max-height:calc(100dvh - 225px)!important;min-height:180px!important;bottom:calc(116px + var(--ui-safe-bottom))!important}
  #tools .tgrp-b{grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:minmax(50px,auto)!important}
  #tools .tgrp-b button{min-height:50px!important;font-size:17px!important}
  #tools .tgrp-b button::after{font-size:7.5px!important;min-height:1.8em!important;overflow-wrap:anywhere!important}
  #tools .tool-color-body .pal{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  #toolsfab,#sidefab{width:calc(50% - 14px)!important;max-width:165px!important;height:38px!important;min-height:38px!important}
}


/* =====================================================================
   PIXAMBAS V71 — mobile/tablet toolbar + landing polish
   Scope: home page and editor controls only up to 900px / small coarse devices.
   Desktop layout and drawing/event logic intentionally remain unchanged.
   ===================================================================== */
@media (max-width:900px), (pointer:coarse) and (max-width:1180px){
  /* Landing: keep two tool cards side-by-side on tablet instead of one long stack. */
  body.home-page main{max-width:980px;padding:56px 20px 42px}
  body.home-page main .home-hero{padding:clamp(24px,4vw,38px);border:1px solid color-mix(in srgb,var(--ui-accent) 15%,var(--ui-border));box-shadow:0 20px 54px rgba(54,48,88,.075);background:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 97%,var(--ui-accent-soft)),var(--ui-surface))}
  body.home-page main .home-intro{max-width:68ch;margin-inline:auto;font-size:clamp(14px,1.8vw,16px);line-height:1.8}
  body.home-page main .home-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:650px;margin:22px auto 25px}
  body.home-page main .home-highlights>span{display:flex;min-width:0;min-height:58px;flex-direction:column;justify-content:center;gap:5px;padding:10px;border:1px solid var(--ui-border);border-radius:13px;background:color-mix(in srgb,var(--ui-surface) 92%,var(--ui-accent-soft))}
  body.home-page main .home-highlights b{font-size:clamp(15px,2.4vw,20px)}
  body.home-page main .home-highlights small{font-size:9px;letter-spacing:.04em;line-height:1.35}
  body.home-page main .sel{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:15px;margin-top:24px}
  body.home-page main .card{display:flex;min-width:0;flex-direction:column;padding:13px;border-radius:20px}
  body.home-page main .card .art{height:clamp(120px,19vw,170px);flex:none}
  body.home-page main .home-card-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:12px 3px 1px}
  body.home-page main .home-card-kicker{font-size:clamp(7px,.95vw,9px);letter-spacing:.07em;overflow-wrap:anywhere}
  body.home-page main .card h2{font-size:clamp(17px,2.2vw,22px);margin:10px 3px 7px}
  body.home-page main .card p{font-size:13px;line-height:1.65;margin:0 3px 14px}
  body.home-page main .card .go{margin-top:auto;align-self:flex-start}
  body.home-page main .guide-toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  body.home-page main .guide-toc a{justify-content:center;text-align:center;padding:10px 9px;font-size:11px;line-height:1.35}
  body.home-page main .guide-section{border-radius:21px}

  /* Editor header: convert the crowded single line into readable, wrapping rows. */
  body.editor-page #app{grid-template-rows:auto 56px 82px minmax(0,1fr)!important;gap:7px!important}
  body.editor-page.dibujo-page #app{grid-template-rows:auto 82px minmax(0,1fr)!important}
  body.editor-page .app-header{display:flex!important;flex-wrap:wrap!important;align-content:center;align-items:center;gap:4px 6px!important;row-gap:5px!important;min-height:0!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:6px 7px!important;border-radius:14px!important;z-index:900!important}
  body.editor-page .app-header .header-main{display:flex;flex:1 1 100%!important;width:100%;min-width:0;align-items:center;gap:6px;padding:2px 2px 6px!important;border-left:0!important;border-bottom:1px solid var(--ui-border);border-radius:0}
  body.editor-page .app-header .header-main .home{display:inline-flex;align-items:center;min-height:32px;padding:5px 8px;font-size:11px}
  body.editor-page .app-header .header-main .home span{display:inline!important}
  body.editor-page .app-header .header-main .logo{font-size:clamp(9px,1.5vw,12px);letter-spacing:.045em;gap:5px;padding:0 2px;min-width:0;white-space:nowrap}
  body.editor-page .app-header .header-main .mascot{width:27px;height:27px}
  body.editor-page .app-header .header-main #pname{flex:1 1 76px;width:auto;min-width:76px;max-width:180px;min-height:32px;padding:5px 7px;font-size:11px}
  body.editor-page .app-header .header-cluster{min-width:0;gap:4px;padding:2px 3px!important;border-left:0!important;border-radius:9px}
  body.editor-page .app-header .header-cluster+.header-cluster{padding-left:3px!important}
  body.editor-page .app-header .header-project{display:flex!important;flex:0 1 auto!important;flex-wrap:wrap;background:transparent}
  body.editor-page .app-header .header-project button{min-height:34px;padding:5px 8px;font-size:11px}
  body.editor-page .app-header .header-history{display:flex;flex:0 0 auto;background:transparent}
  body.editor-page .app-header .header-history button{min-width:34px;min-height:34px;padding:5px 8px;font-size:14px}
  body.editor-page .app-header .header-state{display:none!important}
  body.editor-page .app-header .sp{display:none!important}
  body.editor-page .app-header .header-view{display:flex!important;flex:1 1 100%!important;flex-wrap:wrap;align-items:center;gap:5px!important;max-width:none!important;max-height:none!important;overflow:visible!important;padding:3px!important;border:0!important;background:transparent!important}
  body.editor-page .app-header .header-view button,body.editor-page .app-header .header-view select{min-width:32px;min-height:34px;height:34px;padding:5px 8px;font-size:11px;border-radius:9px}
  body.editor-page .app-header .header-view .icon-btn{display:inline-flex!important;width:34px;justify-content:center;padding:0}
  body.editor-page .app-header .header-view #help,body.editor-page .app-header .header-view #don{display:inline-flex!important}
  body.editor-page .app-header .header-view #lang{min-width:70px;max-width:90px}

  /* Dibujo has dynamically-added File, Help, language and theme controls. */
  body.dibujo-page .app-header .header-canvas{display:flex;flex:1 1 100%;max-width:none!important;background:transparent;border:0;padding:2px 3px!important}
  body.dibujo-page .app-header .header-canvas select{width:100%;max-width:100%;min-width:0;min-height:34px;height:34px;padding:5px 8px;font-size:11px}
  body.dibujo-page .app-header .header-canvas-actions{display:flex;flex:0 0 auto;background:transparent}
  body.dibujo-page .app-header .header-actions{display:flex;flex:0 1 auto;background:transparent}
  body.dibujo-page .app-header #hlp,body.dibujo-page .app-header #thm,body.dibujo-page .app-header #dlangsel,body.dibujo-page .app-header #mn{flex:0 0 auto;min-width:32px;min-height:34px;height:34px;font-size:11px}
  body.dibujo-page .app-header #hlp{width:34px;padding:0;border-radius:9px}
  body.dibujo-page .app-header #thm{width:34px!important;height:34px!important;min-height:34px!important;border-radius:9px!important}
  body.dibujo-page .app-header #dlangsel{width:68px;max-width:78px;padding:4px 5px;border-radius:9px}
  body.dibujo-page .app-header #mn{position:relative;z-index:920}
  body.dibujo-page .app-header #mn>summary{display:flex;align-items:center;min-height:32px;padding:4px 7px!important;font-size:11px}
  body.dibujo-page .app-header #mp{max-width:min(280px,calc(100vw - 24px));max-height:55dvh;overflow:auto;z-index:980}
  body.dibujo-page .app-header #szc{display:flex;flex-wrap:wrap;gap:4px;max-width:100%}
  body.dibujo-page .app-header #szc input{width:64px;min-width:50px;min-height:30px}
  body.editor-page .context-bar{min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
  body.editor-page .context-bar .opts-group{flex:0 0 auto;min-width:max-content}
  body.editor-page .timeline-bar{min-width:0}
}

@media (max-width:560px){
  body.home-page main{padding:68px 11px 30px}
  body.home-page main .home-hero{padding:22px 12px 16px;border-radius:19px;text-align:left}
  body.home-page .home-eyebrow{display:inline-flex;max-width:100%;font-size:7px;line-height:1.5;letter-spacing:.07em;padding:7px 9px;margin-bottom:16px;white-space:normal}
  body.home-page main .home-logo{font-size:clamp(25px,7.2vw,34px)!important;letter-spacing:-.025em!important;line-height:1.25!important;overflow-wrap:anywhere}
  body.home-page main .home-logo::before{right:-7px;top:10%;width:5px;height:5px;box-shadow:-12px 17px 0 var(--ui-sage),-7px 31px 0 var(--ui-accent)}
  body.home-page main .tag{font-size:14px;line-height:1.55;margin:0 0 11px}
  body.home-page main .home-intro{font-size:13px;line-height:1.72;margin:0 0 15px}
  body.home-page main .home-highlights{gap:5px;margin:16px 0 20px}
  body.home-page main .home-highlights>span{min-height:54px;gap:4px;padding:7px 4px;border-radius:10px}
  body.home-page main .home-highlights b{font-size:14px}
  body.home-page main .home-highlights small{font-size:7px;letter-spacing:0;overflow-wrap:anywhere}
  body.home-page main .start{font-size:9px;letter-spacing:.07em;min-height:33px}
  body.home-page main .sel{grid-template-columns:minmax(0,1fr)!important;gap:11px;margin:16px 0 19px}
  body.home-page main .card{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto auto 1fr auto;column-gap:12px;align-items:start;padding:11px;border-radius:17px}
  body.home-page main .card .art{grid-column:1;grid-row:1/5;width:96px;height:112px;border-radius:12px;align-self:stretch}
  body.home-page main .card .art canvas{width:82px;height:82px}
  body.home-page main .card .art svg{width:84px;height:72px}
  body.home-page main .home-card-meta{grid-column:2;grid-row:1;margin:1px 0 4px;gap:5px;align-items:start}
  body.home-page main .home-card-kicker{font-size:7px;line-height:1.4;letter-spacing:.035em}
  body.home-page main .home-card-index{width:21px;height:21px;flex-basis:21px;font-size:8px;border-radius:6px}
  body.home-page main .card h2{grid-column:2;grid-row:2;font-size:16px;margin:2px 0 5px;overflow-wrap:anywhere}
  body.home-page main .card p{grid-column:2;grid-row:3;font-size:11px;line-height:1.5;margin:0 0 7px}
  body.home-page main .card .go{grid-column:2;grid-row:4;align-self:end;min-height:28px;padding:0 9px;margin:0;font-size:9px}
  body.home-page main .guide-toc{grid-template-columns:1fr;gap:7px;margin:13px 0 19px}
  body.home-page main .guide-toc a{min-height:38px;padding:9px 10px;font-size:11px}
  body.home-page main .free{padding:17px 13px!important}
  body.home-page main .free h2{font-size:11px;line-height:1.5}
  body.home-page main .free p{font-size:12px;line-height:1.7}
  body.home-page main .guide-heading h2{font-size:23px;line-height:1.25}
  body.home-page main .guide-heading p{font-size:13px;line-height:1.7}
  body.home-page main .guide-section{padding:15px 11px;border-radius:17px}
  body.home-page main .guide-section h2{font-size:20px;line-height:1.3}
  body.home-page main .guide-section h3{font-size:13px;margin-top:22px}
  body.home-page main .guide-tool-list li{padding:11px;border-radius:12px;font-size:12px;line-height:1.6}
  body.home-page #langsel{top:9px!important;right:53px!important;width:43px;min-width:43px;min-height:34px!important;height:34px!important;padding:5px!important;font-size:11px!important}
  body.home-page #thm{top:8px!important;right:10px!important;width:35px!important;min-height:35px;height:35px!important}

  /* Compact, touch-readable toolbar on phones. */
  body.editor-page #app{grid-template-rows:auto 52px 80px minmax(0,1fr)!important;gap:6px!important;padding:6px!important}
  body.editor-page.dibujo-page #app{grid-template-rows:auto 80px minmax(0,1fr)!important}
  body.editor-page .app-header{padding:5px!important;gap:3px 4px!important;row-gap:5px!important;border-radius:12px!important}
  body.editor-page .app-header .header-main{gap:4px;padding-bottom:5px!important}
  body.editor-page .app-header .header-main .home{min-height:31px;padding:4px 6px;font-size:10px}
  body.editor-page .app-header .header-main .logo{font-size:9px;letter-spacing:.025em;gap:3px;max-width:38vw;overflow:hidden;text-overflow:ellipsis}
  body.editor-page .app-header .header-main .mascot{width:22px;height:22px}
  body.editor-page .app-header .header-main #pname{min-width:58px;max-width:102px;min-height:30px;padding:4px 5px;font-size:10px}
  body.editor-page .app-header .header-project{flex:1 1 auto!important;gap:3px!important}
  body.editor-page .app-header .header-project button{min-height:32px;padding:4px 6px;font-size:10px}
  body.editor-page .app-header .header-history{gap:3px!important}
  body.editor-page .app-header .header-history button{min-width:31px;min-height:32px;padding:4px 6px}
  body.editor-page .app-header .header-view{gap:4px!important;padding:2px 1px!important;justify-content:flex-start}
  body.editor-page .app-header .header-view button,body.editor-page .app-header .header-view select{min-height:32px;height:32px;padding:4px 6px;font-size:10px}
  body.editor-page .app-header .header-view .icon-btn{width:32px;min-width:32px}
  body.editor-page .app-header .header-view #don{padding-inline:7px;font-size:9px}
  body.editor-page .app-header .header-view #lang{min-width:62px;width:65px}
  body.dibujo-page .app-header .header-canvas{padding:1px 2px!important}
  body.dibujo-page .app-header .header-canvas select{height:32px;min-height:32px;font-size:10px}
  body.dibujo-page .app-header .header-canvas-actions,body.dibujo-page .app-header .header-actions{gap:3px!important}
  body.dibujo-page .app-header .header-actions button{min-height:32px;padding:4px 7px;font-size:10px}
  body.dibujo-page .app-header #hlp,body.dibujo-page .app-header #thm,body.dibujo-page .app-header #dlangsel,body.dibujo-page .app-header #mn{min-height:32px;height:32px;font-size:10px}
  body.dibujo-page .app-header #hlp,body.dibujo-page .app-header #thm{width:32px!important}
  body.dibujo-page .app-header #dlangsel{width:58px;max-width:64px;padding:3px}
  body.dibujo-page .app-header #mn>summary{min-height:30px;padding:3px 6px!important;font-size:10px}
  body.editor-page #opts{height:52px;min-height:52px;max-height:52px;padding:4px 6px;border-radius:11px}
  body.editor-page .context-bar .opts-group{gap:5px;padding:3px 5px;font-size:10px}
  body.editor-page .context-bar button,body.editor-page .context-bar select,body.editor-page .context-bar input{min-height:30px;font-size:10px}
  body.editor-page .timeline-bar{min-height:80px;max-height:80px;height:80px;padding:5px;border-radius:11px;gap:5px}
  body.editor-page .timeline-bar .tl-brand{min-width:56px}
  body.editor-page .timeline-bar .tl-brand strong{font-size:7px;letter-spacing:.04em}
  body.editor-page .timeline-bar .tl-transport button,body.editor-page .timeline-bar .tl-actions button{width:28px;height:29px;min-width:28px;min-height:29px;padding:2px;font-size:11px}
  body.editor-page .timeline-bar .tl-settings{gap:3px;font-size:9px}
  body.editor-page .timeline-bar .tl-settings select{min-height:27px;height:27px;padding:2px 3px;font-size:9px}
  body.editor-page .timeline-bar .fr canvas{width:40px;height:40px}
  body.editor-page #toolsfab,body.editor-page #sidefab{max-width:145px;width:calc(50% - 12px);height:35px;min-height:35px;font-size:9px}
}

#privacyPrefsMsg.privacy-preferences-status{display:block;max-width:72ch;margin:12px auto 0;padding:10px 12px;border:1px solid var(--ui-border);border-radius:11px;background:var(--ui-surface);color:var(--ui-muted);font-size:11px;line-height:1.55;text-align:left}
#privacyPrefsMsg[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){
  body.home-page main .home-hero,body.home-page main .home-logo,body.home-page main .card{animation:none!important;transition:none!important}
}


/* Pixambas v72: touch File menu portal and deliberately destructive clear action. */
#mp .clear-all-work{margin-top:5px;border-color:color-mix(in srgb,var(--ui-danger) 48%,var(--ui-border));background:color-mix(in srgb,var(--ui-danger) 9%,var(--ui-surface));color:color-mix(in srgb,var(--ui-danger) 88%,var(--ui-text));font-weight:850}
#mp .clear-all-work:hover{border-color:var(--ui-danger);background:color-mix(in srgb,var(--ui-danger) 16%,var(--ui-surface));color:var(--ui-danger)}
#mp.px-file-menu-portal{display:flex;position:fixed;z-index:2000;min-width:0;max-width:calc(100vw - 20px);padding:10px;gap:6px;overscroll-behavior:contain;box-shadow:0 20px 60px rgba(20,18,40,.25)}
#mp.px-file-menu-portal button,#mp.px-file-menu-portal select{width:100%;min-width:0;min-height:40px;justify-content:flex-start;text-align:left;white-space:normal}
#mp.px-file-menu-portal label{padding:4px 2px 0}


/* =====================================================================
   PIXAMBAS V73 — responsive polish + reserved ad area below the canvas.
   Keep desktop editor layout stable; use compact controls only on touch layouts.
   ===================================================================== */
.editor-page main > .canvas-workspace{
  grid-column:2;
  grid-row:1;
  display:flex;
  flex-direction:column;
  gap:9px;
  min-width:0;
  min-height:0;
  width:100%;
  overflow:hidden;
}
.editor-page .canvas-workspace > #stage{
  order:0!important;
  flex:1 1 0;
  width:100%;
  min-width:0;
  min-height:0;
}
.editor-page .canvas-action-strip{order:1;display:none;flex:0 0 0;height:0;min-height:0}
.editor-page .canvas-ad-slot-label{font-size:9px;line-height:1.3;font-weight:900;letter-spacing:.14em}
.editor-page .canvas-ad-slot small{font-size:10px;line-height:1.35;opacity:.78}
.editor-page .canvas-ad-slot.has-ad{border:0;background:transparent;padding:0}
.editor-page .canvas-ad-slot.has-ad .canvas-ad-slot-label,.editor-page .canvas-ad-slot.has-ad small{display:none}

/* Home page: tablet layout — balanced cards and clear typography. */
@media (min-width:561px) and (max-width:900px){
  body.home-page main{
    width:100%;max-width:900px;margin:0 auto;
    padding:78px clamp(18px,3.2vw,30px) 48px;
  }
  body.home-page main .home-hero{
    padding:clamp(26px,4vw,40px) clamp(22px,4vw,38px) 26px;
    margin-bottom:22px;border-radius:26px;text-align:center;
  }
  body.home-page main .home-logo{font-size:clamp(42px,7.2vw,62px)!important;line-height:1.12!important;overflow-wrap:normal}
  body.home-page main .tag{font-size:clamp(16px,2.2vw,19px);max-width:620px;margin-inline:auto}
  body.home-page main .home-intro{max-width:680px;font-size:15px;line-height:1.75}
  body.home-page main .home-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-width:570px;margin:20px auto 22px}
  body.home-page main .home-highlights>span{justify-content:center;min-width:0;min-height:48px;padding:8px 6px;gap:6px}
  body.home-page main .home-highlights small{font-size:8px;letter-spacing:.035em}
  body.home-page main .sel{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px;margin:22px 0 20px}
  body.home-page main .card{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:12px;border-radius:19px}
  body.home-page main .card .art{width:100%;height:clamp(132px,21vw,184px);flex:none;border-radius:14px}
  body.home-page main .card .art canvas{width:clamp(94px,14vw,132px);height:clamp(94px,14vw,132px)}
  body.home-page main .home-card-meta{margin:12px 3px 3px;gap:7px}
  body.home-page main .home-card-kicker{font-size:8px;letter-spacing:.07em;line-height:1.4}
  body.home-page main .home-card-index{width:24px;height:24px;flex-basis:24px}
  body.home-page main .card h2{font-size:clamp(18px,2.3vw,22px);margin:6px 3px;overflow-wrap:normal}
  body.home-page main .card p{font-size:13px;line-height:1.6;margin:0 3px 13px}
  body.home-page main .card .go{align-self:flex-start;margin:0 3px 3px;min-height:36px;font-size:10px}
  body.home-page main .guide-toc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:17px 0 23px}
  body.home-page main .guide-toc a{min-width:0;min-height:44px;padding:9px 8px;text-align:center;font-size:11px;line-height:1.35}
  body.home-page main .guide-tool-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
  body.home-page main .guide-faq{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.home-page main .guide-section{padding:clamp(18px,3vw,26px);border-radius:21px}
}

/* Home page: phone layout — cards become readable vertical panels, never cramped rows. */
@media (max-width:560px){
  body.home-page main{width:100%;max-width:560px;margin:0 auto;padding:70px 12px 34px}
  body.home-page main .home-hero{padding:23px 15px 18px;margin-bottom:17px;border-radius:20px;text-align:center}
  body.home-page .home-eyebrow{max-width:100%;font-size:8px;letter-spacing:.075em;line-height:1.45;padding:7px 9px;margin-bottom:13px;white-space:normal}
  body.home-page main .home-logo{font-size:clamp(34px,10vw,44px)!important;letter-spacing:.005em!important;line-height:1.12!important;margin:0 0 11px!important;overflow-wrap:normal}
  body.home-page main .home-logo::before{right:-7px;top:8%;width:5px;height:5px;box-shadow:-12px 17px 0 var(--ui-sage),-7px 29px 0 var(--ui-accent)}
  body.home-page main .tag{font-size:14px;line-height:1.48;margin:0 0 10px}
  body.home-page main .home-intro{font-size:13px;line-height:1.68;margin:0 auto 13px}
  body.home-page main .home-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:15px 0 17px}
  body.home-page main .home-highlights>span{display:flex;flex-direction:column;justify-content:center;gap:3px;min-width:0;min-height:54px;padding:6px 3px;border-radius:12px;text-align:center}
  body.home-page main .home-highlights b{font-size:13px}
  body.home-page main .home-highlights small{font-size:7px;letter-spacing:0;line-height:1.25;overflow-wrap:anywhere}
  body.home-page main .start{display:flex;width:100%;min-height:36px;padding:0 10px;font-size:9px;justify-content:center;letter-spacing:.09em}
  body.home-page main .sel{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px;margin:17px 0 20px;text-align:left}
  body.home-page main .card{display:flex!important;flex-direction:column;align-items:stretch;gap:0;min-width:0;padding:11px;border-radius:18px}
  body.home-page main .card .art{display:grid;place-items:center;width:100%;height:116px;min-height:116px;max-height:116px;margin:0;border-radius:13px;flex:none}
  body.home-page main .card .art canvas{width:88px;height:88px}
  body.home-page main .card .art svg{width:112px;height:83px}
  body.home-page main .home-card-meta{display:flex;align-items:center;justify-content:space-between;margin:11px 2px 2px;gap:8px}
  body.home-page main .home-card-kicker{font-size:8px;letter-spacing:.055em;line-height:1.4}
  body.home-page main .home-card-index{width:23px;height:23px;flex:0 0 23px;font-size:8px}
  body.home-page main .card h2{font-size:19px;line-height:1.25;margin:5px 2px 7px;overflow-wrap:normal}
  body.home-page main .card p{font-size:12px;line-height:1.62;margin:0 2px 12px;max-width:none}
  body.home-page main .card .go{display:flex;align-self:stretch;justify-content:center;min-height:36px;margin:0 2px 2px;padding:8px 10px;font-size:10px;letter-spacing:.07em}
  body.home-page main .guide-toc{display:grid;grid-template-columns:minmax(0,1fr);gap:7px;margin:12px 0 18px}
  body.home-page main .guide-toc a{display:flex;justify-content:space-between;width:100%;min-height:42px;padding:10px 12px;font-size:11px;line-height:1.4;text-align:left}
  body.home-page main .free{padding:16px 13px!important;border-radius:16px}
  body.home-page main .free h2{font-size:11px;line-height:1.5}
  body.home-page main .free p{font-size:12px;line-height:1.65}
  body.home-page main .tool-guide{margin:21px 0}
  body.home-page main .guide-heading{margin-bottom:16px}
  body.home-page main .guide-heading h2{font-size:clamp(23px,7vw,29px);line-height:1.2}
  body.home-page main .guide-heading p,body.home-page main .guide-section>p{font-size:13px;line-height:1.7}
  body.home-page main .guide-section{margin-top:14px;padding:15px 12px;border-radius:17px}
  body.home-page main .guide-section h2{font-size:21px;line-height:1.28}
  body.home-page main .guide-section h3{font-size:13px;line-height:1.4;margin-top:21px}
  body.home-page main .guide-tool-list{grid-template-columns:minmax(0,1fr)!important;gap:8px}
  body.home-page main .guide-tool-list li{padding:11px 12px;border-radius:12px;font-size:12px;line-height:1.6}
  body.home-page main .guide-faq{grid-template-columns:minmax(0,1fr)!important;gap:8px}
  body.home-page main .guide-faq details{padding:12px;border-radius:12px}
  body.home-page main .guide-faq summary{font-size:12px;line-height:1.5}
  body.home-page main footer{margin-top:22px;padding:16px 4px 0;font-size:11px;line-height:1.7}
  body.home-page #langsel{top:9px!important;right:53px!important;width:43px;min-width:43px;min-height:34px!important;height:34px!important;padding:5px!important;font-size:11px!important}
  body.home-page #thm{top:8px!important;right:10px!important;width:35px!important;min-height:35px;height:35px!important}
}

/* Compact touch palettes while preserving comfortable touch targets (>=44px where needed). */
@media (max-width:900px), (pointer:coarse) and (max-width:1180px){
  .editor-page main>.canvas-workspace{grid-column:1!important;grid-row:1!important;gap:6px;min-height:0;height:100%}
  .editor-page .canvas-action-strip{display:block;flex:0 0 50px;height:50px;min-height:50px}
  .editor-page #tools .tgrp-h{min-height:44px!important;height:44px!important;padding:6px 8px!important;gap:6px!important;border-radius:10px!important}
  .editor-page #tools .tgrp-h .tg-ic{font-size:15px!important}
  .editor-page #tools .tgrp-h .tg-nm{font-size:9px!important;letter-spacing:.055em!important}
  .editor-page #tools .tgrp-b{gap:8px!important;padding:7px!important;margin-top:4px!important}
  .editor-page #tools .tgrp-b button{min-height:52px!important;height:52px!important;aspect-ratio:auto!important;padding:5px 4px 14px!important;font-size:18px!important;border-radius:10px!important}
  .editor-page #tools .tgrp-b button::after{left:3px!important;right:3px!important;bottom:4px!important;font-size:8px!important}
  .editor-page #tools .tool-color-body .pal{gap:7px!important}
  .editor-page #tools .tool-color-body .sw{min-height:38px!important}
  .editor-page #tools .shape-picker{gap:7px!important}
  .editor-page #tools .shape-picker button{min-height:42px!important;height:42px!important}
  .editor-page #tools .size-presets{gap:6px!important}
  .editor-page #tools .size-presets button{min-height:36px!important;height:36px!important}
  .editor-page #side>div,.editor-page #side details{padding:9px!important;border-radius:12px!important}
  .editor-page #side .layer{min-height:44px!important;padding:5px 6px!important;gap:5px!important}
  .editor-page #side .layer button{min-height:34px!important;min-width:34px!important;padding:4px!important}
  .editor-page #side input[type=range]{min-height:34px!important;height:34px!important}
  .editor-page #side select,.editor-page #side input[type=number]{min-height:34px!important;padding:5px 7px!important}
  .editor-page .app-header{gap:5px 6px!important}
  .editor-page .app-header button,.editor-page .app-header .btn,.editor-page .app-header select{min-height:34px!important;height:34px!important;padding:5px 7px!important;font-size:10px!important}
  .editor-page #toolsfab,.editor-page #sidefab{bottom:calc(70px + 6px + var(--ui-safe-bottom))!important;width:calc(50% - 16px)!important;max-width:176px!important;height:46px!important;min-height:46px!important;font-size:10px!important;border-radius:13px!important}
  .editor-page #toolsfab{left:9px!important}
  .editor-page #sidefab{right:9px!important;left:auto!important}
}
@media (max-width:700px){
  .editor-page main>.canvas-workspace{gap:4px}
  .editor-page .canvas-action-strip{flex-basis:44px;height:44px;min-height:44px}
  .editor-page #tools .tgrp-h{min-height:42px!important;height:42px!important;padding:5px 7px!important}
  .editor-page #tools .tgrp-b{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;padding:7px!important}
  .editor-page #tools .tgrp-b button{min-height:50px!important;height:50px!important;padding:4px 3px 13px!important;font-size:18px!important}
  .editor-page #tools .tgrp-b button::after{font-size:8px!important;bottom:4px!important}
  .editor-page #tools .tool-color-body .pal{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:7px!important}
  .editor-page #tools .tool-color-body .sw{min-height:36px!important}
  .editor-page #tools .shape-picker{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}
  .editor-page #side .layer{min-height:44px!important}
  .editor-page #toolsfab,.editor-page #sidefab{bottom:calc(54px + 5px + var(--ui-safe-bottom))!important;width:calc(50% - 12px)!important;max-width:170px!important;height:40px!important;min-height:40px!important;font-size:10px!important;border-radius:12px!important}
  .editor-page #toolsfab{left:6px!important}
  .editor-page #sidefab{right:6px!important;left:auto!important}
}
@media(prefers-reduced-motion:reduce){
  body.home-page main .home-hero,body.home-page main .home-logo,body.home-page main .card,
  body.home-page main .guide-toc a,body.home-page main .guide-tool-list li{animation:none!important;transition:none!important}
}


/* =====================================================================
   PIXAMBAS V74 — ad outside the editor viewport.
   The editor keeps its original viewport height; the ad enters view only
   when the page scrolls, so it cannot consume canvas space.
   ===================================================================== */
body.editor-page{overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:auto}
body.editor-page>#app{flex:none;height:100dvh;min-height:100dvh}
.editor-page>.canvas-ad-slot{
  order:initial;flex:none;width:min(calc(100% - 32px),1000px);
  height:auto;min-height:90px;max-height:none;margin:16px auto 26px;padding:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px dashed color-mix(in srgb,var(--ui-border-strong) 86%,var(--ui-accent));
  border-radius:13px;background:color-mix(in srgb,var(--ui-surface-2) 78%,transparent);
  color:var(--ui-muted);text-align:center;overflow:hidden;scroll-margin-top:14px;
}
.editor-page>.canvas-ad-slot.has-ad{border:0;background:transparent;padding:0}
.editor-page>.canvas-ad-slot.has-ad .canvas-ad-slot-label,.editor-page>.canvas-ad-slot.has-ad small{display:none}
.editor-page .canvas-ad-slot-label{font-size:9px;line-height:1.3;font-weight:900;letter-spacing:.14em}
.editor-page .canvas-ad-slot small{font-size:10px;line-height:1.35;opacity:.78}
.editor-page .canvas-action-strip{order:1;display:none;flex:0 0 0;height:0;min-height:0}
.editor-page .canvas-ad-jump{min-height:32px;padding:6px 12px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.02em;background:var(--ui-surface);border-color:var(--ui-border);color:var(--ui-muted);box-shadow:none}
.editor-page .canvas-ad-jump:focus-visible{outline-offset:3px}
body.editor-page.editor-app-offscreen #tools,body.editor-page.editor-app-offscreen #side,
body.editor-page.editor-app-offscreen #toolsfab,body.editor-page.editor-app-offscreen #sidefab,
body.editor-page.editor-app-offscreen #fly,body.editor-page.editor-app-offscreen #txbar,body.editor-page.editor-app-offscreen #selbar{
  display:none!important;visibility:hidden!important;pointer-events:none!important;
}
@media(max-width:900px),(pointer:coarse) and (max-width:1180px){
  .editor-page .canvas-action-strip{display:flex;flex:0 0 50px;height:50px;min-height:50px;align-items:center;justify-content:center;order:1}
  .editor-page>.canvas-ad-slot{width:calc(100% - 24px);min-height:72px;margin:12px auto 22px;padding:8px 10px;border-radius:11px}
  .editor-page .canvas-ad-slot-label{font-size:8px;letter-spacing:.12em}
  .editor-page .canvas-ad-slot small{font-size:9px}
}
@media(max-width:700px){
  .editor-page .canvas-action-strip{flex-basis:44px;height:44px;min-height:44px}
  .editor-page>.canvas-ad-slot{width:calc(100% - 20px);min-height:58px;margin:10px auto 18px;padding:6px 8px;border-radius:10px}
  .editor-page .canvas-ad-slot-label{font-size:7px;letter-spacing:.11em}
  .editor-page .canvas-ad-slot small{font-size:8px}
  .editor-page .canvas-ad-jump{min-height:30px;padding:5px 10px;font-size:9px}
}


/* Pixambas v75 — Archivo: cierre fiable y menú fuera del header con overflow. */
#mp.px-file-menu-portal[hidden]{display:none!important}
#mp.px-file-menu-portal .mp-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 2px 8px;margin-bottom:3px;border-bottom:1px solid var(--ui-border);color:var(--ui-text)}
#mp.px-file-menu-portal .mp-header strong{font-size:12px;font-weight:850;letter-spacing:.02em}
#mp.px-file-menu-portal .mp-header button{display:inline-flex;align-items:center;justify-content:center;width:32px!important;min-width:32px!important;min-height:32px!important;height:32px;padding:0!important;flex:0 0 32px;background:var(--ui-surface-2);border:1px solid var(--ui-border);border-radius:9px;font-size:20px;line-height:1;color:var(--ui-text)}
#mp.px-file-menu-portal .mp-header button:hover{background:var(--ui-surface-3);border-color:var(--ui-border-strong)}
@media (max-width:900px),(pointer:coarse) and (max-width:1180px){
  body.dibujo-page .app-header #mn>summary{min-height:34px;padding:5px 8px!important;font-size:11px}
  #mp.px-file-menu-portal{border-radius:14px;padding:10px;gap:6px}
  #mp.px-file-menu-portal .mp-header strong{font-size:11px}
}


/* v76 SEO: compact page-topic headings in the existing editor header; no canvas/layout sizing changes. */
body.editor-page .app-header .seo-compact-h1{margin:0;padding:3px 7px;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface-2);color:var(--ui-muted);font:750 10px/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;}
@media(max-width:700px){body.editor-page .app-header .seo-compact-h1{max-width:88px;padding:3px 4px;font-size:9px;border-radius:6px;}}
/* v76 SEO: tutorial cards only exist on the home page; they cannot style editor controls. */
body.home-page main .tutorial-library{margin:28px 0;padding:clamp(18px,3vw,30px);border:1px solid var(--ui-border);border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--ui-surface) 94%,var(--ui-accent-soft)),var(--ui-surface));box-shadow:var(--ui-shadow-sm);}
body.home-page main .tutorial-library-heading{max-width:800px;margin:0 auto 22px;text-align:center;}
body.home-page main .tutorial-library-heading h2{font:850 clamp(24px,4vw,35px)/1.2 var(--ui-display);letter-spacing:-.035em;margin:7px 0 10px;color:var(--ui-text);}
body.home-page main .tutorial-library-heading p{color:var(--ui-muted);font-size:15px;line-height:1.75;margin:0 auto;max-width:750px;}
body.home-page main .tutorial-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;}
body.home-page main .tutorial-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:205px;padding:20px;border:1px solid var(--ui-border);border-radius:17px;background:var(--ui-surface);color:var(--ui-text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
body.home-page main .tutorial-card:hover{transform:translateY(-2px);border-color:var(--ui-accent);box-shadow:0 12px 28px rgba(56,48,112,.09);text-decoration:none;}
body.home-page main .tutorial-card-number{font:800 10px/1.4 var(--ui-display);letter-spacing:.06em;color:var(--ui-accent-strong);}
body.home-page main .tutorial-card h3{font:800 18px/1.3 var(--ui-display);letter-spacing:-.02em;color:var(--ui-text);margin:12px 0 8px;}
body.home-page main .tutorial-card p{font-size:13px;line-height:1.65;color:var(--ui-muted);margin:0 0 16px;}
body.home-page main .tutorial-card-link{margin-top:auto;font-size:12px;font-weight:850;color:var(--ui-accent-strong);}
body.home-page main .tutorial-card:focus-visible{outline:3px solid var(--ui-accent);outline-offset:3px;}
@media(max-width:640px){body.home-page main .tutorial-card-grid{grid-template-columns:1fr;gap:10px;}body.home-page main .tutorial-card{min-height:0;padding:17px;}body.home-page main .tutorial-library{padding:17px 13px;border-radius:19px;}body.home-page main .tutorial-library-heading p{font-size:14px;}}

/* v88: encabezado descriptivo independiente del logotipo. */
body.home-page .home-hero .home-seo-title{font:750 clamp(18px,2.4vw,27px)/1.35 system-ui,sans-serif!important;letter-spacing:-.025em!important;margin:7px 0 14px!important;color:var(--ui-text)!important;text-align:center;max-width:900px}