@font-face{font-family:"PnP Numbers";font-style:normal;font-weight:100 1000;font-display:swap;
  src:url(../fonts/pnp/GoogleSansFlex-latin.woff2) format("woff2");unicode-range:U+0030-0039}

@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/pnp/PlusJakartaSans-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;
  src:url(../fonts/pnp/PlusJakartaSans-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* loader: the four pixels rise in turn, like the pixelandprofits.com preloader */
.pnp-px1,.pnp-px2,.pnp-px3,.pnp-px4{transform-box:fill-box;transform-origin:center;animation:pnp-px 1.6s cubic-bezier(.16,1,.3,1) infinite}
.pnp-px2{animation-delay:.12s}.pnp-px3{animation-delay:.24s}.pnp-px4{animation-delay:.36s}
@keyframes pnp-px{0%,100%{opacity:.35;transform:translateY(0) scale(.92)}35%{opacity:1;transform:translateY(-6%) scale(1)}}
@media (prefers-reduced-motion:reduce){.pnp-px1,.pnp-px2,.pnp-px3,.pnp-px4{animation:none}}

/* sign-in page: P&P panel instead of Penpot's illustration */
.main_ui_auth__login-illustration{position:relative;align-items:center;border-radius:24px;overflow:hidden;
  background:radial-gradient(120% 90% at 20% 10%,rgba(var(--ek-accent-rgb),.16),transparent 60%),#111;}
.main_ui_auth__login-illustration img{inline-size:100%;block-size:auto;max-block-size:100vh;object-fit:contain;
  animation:pnp-rise .8s cubic-bezier(.16,1,.3,1) both}
@keyframes pnp-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.main_ui_auth__login-illustration::after{content:"Measure. Trim. Reinvest.";position:absolute;inset-inline-start:2.5rem;inset-block-end:2.25rem;
  font:600 1.75rem/1.1 "PnP Numbers", "Plus Jakarta Sans",sans-serif;letter-spacing:-.03em;color:#fff;animation:pnp-rise .8s .15s cubic-bezier(.16,1,.3,1) both}
.main_ui_auth__logo{inline-size:10rem}

.main_ui_auth__login-illustration{flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:1.25rem;
  align-self:stretch;min-block-size:min(36rem,calc(100vh - 8rem));margin-block:4rem;padding:2.75rem;box-sizing:border-box;
  border:1px solid rgba(var(--ek-ink-rgb),.08);border-radius:24px;
  background:radial-gradient(90% 70% at 85% 0%,rgba(var(--ek-accent-rgb),.18),transparent 60%),
             radial-gradient(60% 50% at 0% 100%,rgba(var(--ek-accent-rgb),.08),transparent 70%),#151515}
.main_ui_auth__login-illustration img{display:none}
.main_ui_auth__login-illustration::before{content:"Design the ads.\AKeep the profit.";white-space:pre;display:block;
  font:600 clamp(2.25rem,3.4vw,3.75rem)/1.05 "PnP Numbers", "Plus Jakarta Sans",sans-serif;letter-spacing:-.035em;
  background:linear-gradient(to bottom,#fff 50%,var(--ek-accent) 50%);-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:pnp-rise .8s cubic-bezier(.16,1,.3,1) both}
.main_ui_auth__login-illustration::after{content:"Pixel & Profits design workspace";position:static;
  font:400 1rem/1.4 "PnP Numbers", "Plus Jakarta Sans",sans-serif;letter-spacing:0;color:rgba(var(--ek-ink-rgb),.56);
  animation:pnp-rise .8s .12s cubic-bezier(.16,1,.3,1) both}

/* Penpot menus: dashboard profile menu, editor main menu, settings sidebar */
#community-contributions,#about-penpot,
[data-testid="community-contributions"],[data-testid="about-penpot"],
[data-testid="release-notes"],[data-testid="settings-subscription"]{display:none!important}
/* links to Penpot, before the guard script runs */
a[href*="penpot.app"],a[href*="github.com/penpot"],a[href*="penpot.github.io"],a[href*="x.com/penpotapp"]{display:none!important}

/* ---------- motion layer ---------- */
:root{--pnp-ease:cubic-bezier(.16,1,.3,1);--pnp-fast:.16s;--pnp-mid:.28s;--pnp-slow:.52s}
/* translate/scale (not transform) so popups keep their own transform-based positioning */
@keyframes pnp-pop{from{opacity:0;translate:0 -4px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes pnp-fade{from{opacity:0}to{opacity:1}}
@keyframes pnp-dialog{from{opacity:0;translate:0 10px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@keyframes pnp-page{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
.pnp-pop{animation:pnp-pop var(--pnp-fast) var(--pnp-ease) backwards}
.pnp-overlay{animation:pnp-fade .2s ease-out backwards}
.pnp-dialog{animation:pnp-dialog var(--pnp-mid) var(--pnp-ease) backwards}
.pnp-page{animation:pnp-page var(--pnp-mid) var(--pnp-ease) backwards}
button,[role=button],a,li,[role=menuitem],[role=option],label{
  transition:background-color var(--pnp-fast) ease,color var(--pnp-fast) ease,border-color var(--pnp-fast) ease,
             opacity var(--pnp-fast) ease,box-shadow var(--pnp-mid) var(--pnp-ease),transform var(--pnp-fast) var(--pnp-ease)}
button:not(:disabled):active,[class*="ds_buttons_"]:not(:disabled):active{transform:scale(.97)}
[class*="switch-thumb"],[class*="switch-track"]{transition:transform var(--pnp-mid) var(--pnp-ease),background-color var(--pnp-mid) ease,left var(--pnp-mid) var(--pnp-ease),right var(--pnp-mid) var(--pnp-ease)}
.main_ui_dashboard_grid__grid-item-thumbnail{transition:transform var(--pnp-mid) var(--pnp-ease),box-shadow var(--pnp-mid) var(--pnp-ease),outline-color var(--pnp-fast) ease}
.main_ui_dashboard_grid__grid-item:hover .main_ui_dashboard_grid__grid-item-thumbnail{transform:translateY(-3px);box-shadow:0 10px 24px -12px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){
  .pnp-pop,.pnp-overlay,.pnp-dialog,.pnp-page{animation:none!important}
  button,[role=button],a,li,[role=menuitem],[role=option],label,[class*="switch-"],.main_ui_dashboard_grid__grid-item-thumbnail{transition:none!important}
  .main_ui_dashboard_grid__grid-item:hover .main_ui_dashboard_grid__grid-item-thumbnail{transform:none}
}

/* ---------- Connect an AI agent (Integrations) ---------- */
.pnp-connect{margin-top:24px;border:1px solid var(--color-background-quaternary,#262626);border-radius:12px;padding:20px;
  background:var(--color-background-tertiary,#1a1a1a);color:var(--color-foreground-primary,#fff);font-family:"PnP Numbers", "Plus Jakarta Sans",sans-serif;
  animation:pnp-page var(--pnp-slow) var(--pnp-ease) backwards}
.pnp-connect h3{margin:0 0 4px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.pnp-connect>p{margin:0 0 14px;color:var(--color-foreground-secondary,#aaa);font-size:13px;line-height:1.5}
.pnp-connect .pnp-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pnp-connect .pnp-tabs button{border:1px solid var(--color-background-quaternary,#333);background:transparent;color:var(--color-foreground-secondary,#aaa);
  border-radius:999px;padding:6px 12px;font:500 12px "PnP Numbers", "Plus Jakarta Sans",sans-serif;cursor:pointer}
.pnp-connect .pnp-tabs button[aria-selected=true]{background:var(--color-accent-primary,var(--ek-accent));border-color:var(--color-accent-primary,var(--ek-accent));color:#111}
.pnp-connect ol{margin:0;padding-left:20px;display:grid;gap:8px;font-size:13px;line-height:1.55;color:var(--color-foreground-primary,#fff)}
.pnp-connect ol b{font-weight:600}
.pnp-connect .pnp-chip{background:rgba(var(--ek-accent-rgb),.16);border-radius:6px;padding:1px 6px;white-space:nowrap}
.pnp-connect .pnp-code{position:relative;margin:6px 0 2px}
.pnp-connect pre{margin:0;padding:10px 74px 10px 12px;border-radius:8px;background:var(--color-background-secondary,#000);
  font:12px/1.55 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-all;color:var(--color-foreground-primary,#fff)}
.pnp-connect .pnp-copy{position:absolute;top:6px;right:6px;border:1px solid var(--color-background-quaternary,#333);background:var(--color-background-tertiary,#1a1a1a);
  color:var(--color-foreground-secondary,#aaa);border-radius:999px;padding:4px 10px;font:500 11px "PnP Numbers", "Plus Jakarta Sans",sans-serif;cursor:pointer}
.pnp-connect .pnp-copy.done{color:var(--color-accent-primary,var(--ek-accent));border-color:var(--color-accent-primary,var(--ek-accent))}
.pnp-connect .pnp-panel{display:none}.pnp-connect .pnp-panel.on{display:block;animation:pnp-pop var(--pnp-mid) var(--pnp-ease) backwards}
.pnp-connect .pnp-foot{margin-top:14px;font-size:12px;color:var(--color-foreground-secondary,#aaa)}
.pnp-connect .pnp-foot a{color:var(--color-accent-primary,var(--ek-accent))}

/* ---------- dashboard sidebar: same look as the help page nav ---------- */
.main_ui_dashboard_sidebar__sidebar-nav{display:grid;gap:2px}
.main_ui_dashboard_sidebar__sidebar-nav-item,
.main_ui_dashboard_sidebar__sidebar-nav-item.main_ui_dashboard_sidebar__current,
.main_ui_dashboard_sidebar__sidebar-nav-item:hover{margin:0 16px;border-radius:8px;background:transparent!important}
.main_ui_dashboard_sidebar__sidebar-nav-item .main_ui_dashboard_sidebar__sidebar-link{display:block;padding:7px 12px;border-radius:8px;
  transition:background-color var(--pnp-mid,.28s) var(--pnp-ease,ease),color var(--pnp-mid,.28s) var(--pnp-ease,ease)}
.main_ui_dashboard_sidebar__sidebar-nav-item .main_ui_dashboard_sidebar__element-title{font-size:14px;font-weight:400;
  color:var(--color-foreground-secondary,rgba(var(--ek-ink-rgb),.62))!important;transition:color var(--pnp-mid,.28s) var(--pnp-ease,ease)}
.main_ui_dashboard_sidebar__sidebar-nav-item:hover .main_ui_dashboard_sidebar__sidebar-link,
.main_ui_dashboard_sidebar__sidebar-nav-item.main_ui_dashboard_sidebar__current .main_ui_dashboard_sidebar__sidebar-link{background:rgba(var(--ek-accent-rgb),.14)}
.main_ui_dashboard_sidebar__sidebar-nav-item:hover .main_ui_dashboard_sidebar__element-title,
.main_ui_dashboard_sidebar__sidebar-nav-item.main_ui_dashboard_sidebar__current .main_ui_dashboard_sidebar__element-title{color:var(--color-foreground-primary,#fff)!important}
.main_ui_dashboard_sidebar__sidebar-nav-item .main_ui_dashboard_sidebar__sidebar-link:focus-visible{outline:2px solid rgba(var(--ek-accent-rgb),.6);outline-offset:-2px}
.main_ui_dashboard_sidebar__sidebar-section-title{padding:16px 28px 6px;font-size:11px;letter-spacing:.06em;color:var(--color-foreground-secondary,rgba(var(--ek-ink-rgb),.4));opacity:.75}
.main_ui_dashboard_sidebar__sidebar-empty-placeholder{padding:6px 28px}

/* ---------- PnP polish: toolbar at the bottom, even side padding, sentence case ---------- */

/* tools bar: bottom centre of the canvas, opening upwards */
.main_ui_workspace_top_toolbar__toolbar,
.main_ui_workspace_top_toolbar__toolbar.main_ui_workspace_top_toolbar__no-rulers{
  inset-block-start:auto!important;
  inset-block-end:calc(16px + var(--pnp-palette-h,0px) + var(--toolbar-offset-y,0px));
  transition:inset-block-end .28s cubic-bezier(.16,1,.3,1),block-size .28s cubic-bezier(.16,1,.3,1),opacity .28s}
.main_ui_workspace_top_toolbar__toolbar.main_ui_workspace_top_toolbar__hidden{
  --toolbar-offset-y:-20px;border-radius:.5rem .5rem 0 0;border-block-start:.125rem solid var(--menu-border-color);border-block-end:0}
.main_ui_workspace_top_toolbar__toolbar-handler{inset-block-end:auto;inset-block-start:0}
.main_ui_workspace_top_toolbar__toolbar-group-flyout{inset-block-start:auto;inset-block-end:140%;margin-block-start:0;margin-block-end:var(--sp-xxs)}
.main_ui_workspace_top_toolbar__toolbar-mcp-menu{top:auto;bottom:2.25rem}
/* lift it above the colour / text palette when one is open */
body:has(.main_ui_workspace_palette__palettes:not(.main_ui_workspace_palette__hidden-bts) .main_ui_workspace_palette__palette){--pnp-palette-h:84px}

/* dashboard sidebar: same gap on the right as on the left
   (its grids sized one column to the widest child, 312px in a 296px sidebar) */
.main_ui_dashboard_sidebar__sidebar-content,
.main_ui_dashboard_sidebar__sidebar-nav{grid-template-columns:minmax(0,1fr)!important}
.main_ui_dashboard_sidebar__sidebar-content-section,
.main_ui_dashboard_sidebar__sidebar-nav{width:100%!important;box-sizing:border-box}
.main_ui_dashboard_sidebar__sidebar-team-switch,
.main_ui_dashboard_sidebar__sidebar-search,
.main_ui_dashboard_sidebar__sidebar-nav-item{width:auto!important;margin-inline:16px!important;box-sizing:border-box}
.main_ui_dashboard_sidebar__sidebar-search .main_ui_dashboard_sidebar__input-text{width:100%;box-sizing:border-box}

/* workspace pages list: rounded rows inside the panel, even on both sides */
.main_ui_workspace_sidebar_sitemap__page-item{margin-inline:8px 0;border-radius:8px;width:auto!important;overflow:hidden}
.main_ui_workspace_sidebar_sitemap__page-item-icon{padding-inline-start:4px}
.main_ui_workspace_sidebar__left-sidebar .main_ui_components_title_bar__title-bar{padding-inline:12px 4px}

/* sidebar items one step heavier, like the rest of the app */
.main_ui_dashboard_sidebar__sidebar-nav-item .main_ui_dashboard_sidebar__element-title{font-weight:500}

/* small section labels keep their caps (like the help page nav) */
.main_ui_dashboard_sidebar__sidebar-section-title{text-transform:uppercase}

/* left panel: slides in when it opens, the small "open" button pops in when it closes
   (the slide-out is in pnp-guard.js: it plays before the panel is removed) */
@keyframes pnp-side-in{from{opacity:0;translate:-24px 0}to{opacity:1;translate:0 0}}
@keyframes pnp-chip-in{from{opacity:0;translate:-8px 0;scale:.85}to{opacity:1;translate:0 0;scale:1}}
.main_ui_workspace_sidebar__left-sidebar{animation:pnp-side-in .42s cubic-bezier(.16,1,.3,1) backwards}
.main_ui_workspace_sidebar__collapsed-sidebar{animation:pnp-chip-in .36s .08s cubic-bezier(.16,1,.3,1) backwards;
  border:1px solid var(--color-background-quaternary);transition:background-color .16s}
.main_ui_workspace_sidebar__collapsed-sidebar:hover{background:var(--color-background-tertiary)}
/* tab content (Layers / Assets / Tokens) fades up when you switch */
.main_ui_ds_layout_tab_switcher__tab-panel > *{animation:pnp-page .28s cubic-bezier(.16,1,.3,1) backwards}
.main_ui_ds_layout_tab_switcher__tab{transition:background-color .16s cubic-bezier(.16,1,.3,1),color .16s cubic-bezier(.16,1,.3,1)}

:root{--pnp-mark:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHN0eWxlPi5we3RyYW5zZm9ybS1ib3g6ZmlsbC1ib3g7dHJhbnNmb3JtLW9yaWdpbjpjZW50ZXI7YW5pbWF0aW9uOmEgMS42cyBjdWJpYy1iZXppZXIoLjE2LDEsLjMsMSkgaW5maW5pdGV9QGtleWZyYW1lcyBhezAlLDEwMCV7b3BhY2l0eTouMzU7dHJhbnNmb3JtOnRyYW5zbGF0ZVkoMCkgc2NhbGUoLjkpfTM1JXtvcGFjaXR5OjE7dHJhbnNmb3JtOnRyYW5zbGF0ZVkoLTglKSBzY2FsZSgxKX19QG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOnJlZHVjZSl7LnB7YW5pbWF0aW9uOm5vbmV9fTwvc3R5bGU+PGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjODNCMjcxIiBzdHJva2Utd2lkdGg9IjMuNiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgY2xhc3M9InAiIHN0eWxlPSJhbmltYXRpb24tZGVsYXk6MC4wMHMiIHg9IjYuOSIgeT0iMTIuMiIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0LjQiIHJ4PSIxLjMiLz48cmVjdCBjbGFzcz0icCIgc3R5bGU9ImFuaW1hdGlvbi1kZWxheTowLjEycyIgeD0iNi45IiB5PSIyNi41IiB3aWR0aD0iMTQiIGhlaWdodD0iMTQuNCIgcng9IjEuMyIvPjxyZWN0IGNsYXNzPSJwIiBzdHlsZT0iYW5pbWF0aW9uLWRlbGF5OjAuMjRzIiB4PSIyMC45IiB5PSIyNi41IiB3aWR0aD0iMTUuMSIgaGVpZ2h0PSIxNC40IiByeD0iMS4zIi8+PHJlY3QgY2xhc3M9InAiIHN0eWxlPSJhbmltYXRpb24tZGVsYXk6MC4zNnMiIHg9IjI2LjkiIHk9IjciIHdpZHRoPSIxNC4yIiBoZWlnaHQ9IjE0LjEiIHJ4PSIxLjMiLz48L2c+PC9zdmc+")}
/* ---------- PnP loader: P&P pixel mark instead of Penpot's pencil ---------- */
/* the app's own pencil svg stays in the page for screen readers, but is not drawn */
.main_ui_ds_product_loader__loader{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
.main_ui_ds_product_loader__wrapper{position:relative}
/* small loaders (buttons, lists, panels): a 20px animated mark */
.main_ui_ds_product_loader__wrapper:not(.main_ui_ds_product_loader__file-loading)::before{
  content:"";display:block;width:20px;height:20px;flex:none;background:var(--pnp-mark) center/contain no-repeat}
.main_ui_ds_product_loader__wrapper-overlay::before{justify-self:center}

/* file opening screen: spans the whole workspace grid (it sat in the 216px sidebar column) */
.main_ui_ds_product_loader__wrapper.main_ui_ds_product_loader__file-loading{grid-column:1 / -1;grid-row:1 / -1;min-width:0;box-sizing:border-box}
.main_ui_ds_product_loader__wrapper.main_ui_ds_product_loader__file-loading{
  background:radial-gradient(520px circle at 50% 42%,rgba(var(--ek-accent-rgb),.09),transparent 70%),var(--color-background-primary,#111)}
.main_ui_ds_product_loader__wrapper.main_ui_ds_product_loader__file-loading .main_ui_ds_product_loader__loader-content{
  gap:0;animation:pnp-load-rise .6s cubic-bezier(.16,1,.3,1) backwards}
.main_ui_ds_product_loader__file-loading .main_ui_ds_product_loader__loader-content::before{
  content:"";order:-3;width:64px;height:64px;background:var(--pnp-mark) center/contain no-repeat;
  filter:drop-shadow(0 0 18px rgba(var(--ek-accent-rgb),.35))}
/* thin bar with a light sweeping across it */
.main_ui_ds_product_loader__file-loading .main_ui_ds_product_loader__loader-content::after{
  content:"";order:-2;width:168px;height:3px;margin:28px 0 36px;border-radius:3px;
  background:linear-gradient(90deg,transparent 0,var(--ek-accent) 50%,transparent 100%) 0 0/60% 100% no-repeat,rgba(var(--ek-ink-rgb),.08);
  animation:pnp-load-sweep 1.4s cubic-bezier(.65,0,.35,1) infinite}
/* tip: no box, a small green "Did you know" label, fades up when it changes */
.main_ui_ds_product_loader__wrapper.main_ui_ds_product_loader__file-loading .main_ui_ds_product_loader__tips-container{
  order:0;min-width:0;max-width:420px;border:0;padding:0;gap:6px;
  animation:pnp-load-rise .5s cubic-bezier(.16,1,.3,1) backwards}
.main_ui_ds_product_loader__file-loading .main_ui_ds_product_loader__tips-container::before{
  content:"Did you know";font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ek-accent);margin-bottom:4px}
.main_ui_ds_product_loader__wrapper.main_ui_ds_product_loader__file-loading .main_ui_ds_product_loader__tips-container .main_ui_ds_product_loader__tip-title{
  font-size:16px;font-weight:600;letter-spacing:-.01em}
.main_ui_ds_product_loader__wrapper.main_ui_ds_product_loader__file-loading .main_ui_ds_product_loader__tips-container .main_ui_ds_product_loader__tip-message{
  font-size:14px;line-height:1.5}
.main_ui_ds_product_loader__tips-container.pnp-tip-swap{animation:pnp-load-rise .5s cubic-bezier(.16,1,.3,1) backwards}
@keyframes pnp-load-rise{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes pnp-load-sweep{0%{background-position:-120% 0,0 0}100%{background-position:220% 0,0 0}}
@media (prefers-reduced-motion:reduce){
  .main_ui_ds_product_loader__file-loading .main_ui_ds_product_loader__loader-content::after{animation:none}}

/* ---------- PnP polish 3 (patch11): quieter Assets button, even panel padding, palette box, motion gaps ---------- */

/* 1. Assets tab: "Add library" in the green tint with green text, not a full bright-green block;
      header gets the same 12px on both sides */
.main_ui_workspace_sidebar_assets__assets-header{padding-inline:12px 2px!important;width:100%!important;box-sizing:border-box}
.main_ui_workspace_sidebar_assets__add-library-button{
  background:rgba(var(--ek-accent-rgb),.12)!important;color:var(--ek-accent)!important;border:1px solid rgba(var(--ek-accent-rgb),.28)!important;
  font-weight:600;border-radius:8px;
  transition:background-color .2s cubic-bezier(.16,1,.3,1),border-color .2s cubic-bezier(.16,1,.3,1),color .2s}
.main_ui_workspace_sidebar_assets__add-library-button:hover{background:rgba(var(--ek-accent-rgb),.2)!important;border-color:rgba(var(--ek-accent-rgb),.5)!important}
.main_ui_workspace_sidebar_assets__add-library-button svg{stroke:currentColor}
.main_ui_workspace_sidebar_assets_file_library__tool-window{padding-inline:12px 2px!important;width:100%!important;box-sizing:border-box}
.main_ui_workspace_sidebar_assets_file_library__special-title::first-letter{text-transform:uppercase}

/* 2. Right panel: rows are a fixed 284px grid and the scrollbar keeps a 10px gutter, so the right side had 22px
      against 12px on the left; centre them (17px each side, the gutter counts on the right) */
.main_ui_workspace_sidebar_options__element-options{padding-inline:17px 7px!important}
/* inputs as heavy as the labels next to them */
.main_ui_workspace_sidebar__right-sidebar input,
.main_ui_workspace_sidebar__left-sidebar input{font-weight:500}

/* 3. Dashboard main area: title, tabs, project names and cards all start 24px in (the title and names have
      their own inner 12px / 8px), and the header buttons end 24px in */
.main_ui_dashboard_projects__dashboard-header,
.main_ui_dashboard_files__dashboard-header,
.main_ui_dashboard_libraries__dashboard-header,
.main_ui_dashboard_fonts__dashboard-header,
.main_ui_dashboard_team__dashboard-header,
.main_ui_settings__dashboard-header{padding-inline:12px 24px!important}
.main_ui_dashboard_projects__dashboard-project-row .main_ui_dashboard_projects__project{padding-inline:16px!important;width:100%!important;box-sizing:border-box}
.main_ui_dashboard_grid__grid-item-thumbnail{border-radius:10px;outline:1px solid rgba(var(--ek-ink-rgb),.06);outline-offset:-1px}
.main_ui_dashboard_grid__grid-item-title{font-weight:600}
/* cards fade up one after another when a project list opens */
@keyframes pnp-card-in{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.main_ui_dashboard_grid__grid-item{animation:pnp-card-in .42s cubic-bezier(.16,1,.3,1) backwards}
.main_ui_dashboard_grid__grid-item:nth-child(2){animation-delay:.04s}
.main_ui_dashboard_grid__grid-item:nth-child(3){animation-delay:.08s}
.main_ui_dashboard_grid__grid-item:nth-child(4){animation-delay:.12s}
.main_ui_dashboard_grid__grid-item:nth-child(n+5){animation-delay:.16s}

/* 4. Menus and dialogs: roomier rows, same 8px rhythm; settings sidebar like the dashboard sidebar */
.main_ui_workspace_main_menu__menu-item,
.main_ui_workspace_context_menu__menu-item,
.main_ui_dashboard_grid__menu li{min-height:32px;box-sizing:border-box}
.main_ui_workspace_main_menu__menu-item{padding:7px 10px!important}
.main_ui_settings_sidebar__settings-item{margin-inline:16px!important;padding:7px 12px!important;border-radius:8px;background:transparent!important;
  transition:background-color .28s cubic-bezier(.16,1,.3,1)}
.main_ui_settings_sidebar__settings-item:hover,
.main_ui_settings_sidebar__settings-item.main_ui_settings_sidebar__current{background:rgba(var(--ek-accent-rgb),.14)!important}
.main_ui_settings_sidebar__settings-item .main_ui_settings_sidebar__element-title{color:var(--color-foreground-secondary);transition:color .28s cubic-bezier(.16,1,.3,1)}
.main_ui_settings_sidebar__settings-item:hover .main_ui_settings_sidebar__element-title,
.main_ui_settings_sidebar__settings-item.main_ui_settings_sidebar__current .main_ui_settings_sidebar__element-title{color:var(--color-foreground-primary)}
.main_ui_settings_sidebar__sidebar-nav-settings{display:grid;gap:2px}
.main_ui_settings_sidebar__back-to-dashboard{margin-inline:16px;padding-inline:12px!important;border-radius:8px;width:calc(100% - 32px)}
.main_ui_settings_sidebar__back-to-dashboard:hover{background:rgba(var(--ek-ink-rgb),.04)}

/* 5. Bottom-left palette box: same 2px border, 8px radius, 60px height and 24px bottom gap as the tools bar,
      16px from the left panel */
.main_ui_workspace_palette__palette-wrapper{padding-block-end:24px!important}
.main_ui_workspace_palette__palettes{margin-inline-start:12px;box-sizing:border-box;
  transition:width .32s cubic-bezier(.16,1,.3,1),height .32s cubic-bezier(.16,1,.3,1),margin .32s cubic-bezier(.16,1,.3,1)}
.main_ui_workspace_palette__palettes:not(:has(.main_ui_workspace_palette__palette)){block-size:60px;padding:0 4px 0 12px!important;grid-template-rows:0 56px!important}
.main_ui_workspace_palette__palettes:not(:has(.main_ui_workspace_palette__palette)) .main_ui_workspace_palette__resize-area{visibility:hidden;block-size:0;overflow:hidden}
.main_ui_workspace_palette__handler{grid-row:2}
.main_ui_workspace_palette__palettes:not(:has(.main_ui_workspace_palette__palette)) .main_ui_workspace_palette__palette-btn-list,
.main_ui_workspace_palette__palettes:not(:has(.main_ui_workspace_palette__palette)) .main_ui_workspace_palette__palette-item,
.main_ui_workspace_palette__palettes:not(:has(.main_ui_workspace_palette__palette)) .main_ui_workspace_palette__handler{block-size:56px}

/* 6. Motion gaps */
@keyframes pnp-rise{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes pnp-drop{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@keyframes pnp-side-in-r{from{opacity:0;translate:24px 0}to{opacity:1;translate:0 0}}
/* right panel slides in when it comes back (after hiding the UI), its sections fade up on selection */
.main_ui_workspace_sidebar__right-sidebar{animation:pnp-side-in-r .42s cubic-bezier(.16,1,.3,1) backwards}
.main_ui_workspace_sidebar_options__element-options > *{animation:pnp-rise .3s cubic-bezier(.16,1,.3,1) backwards}
.main_ui_workspace_sidebar_options__element-options > :nth-child(2){animation-delay:.03s}
.main_ui_workspace_sidebar_options__element-options > :nth-child(3){animation-delay:.06s}
.main_ui_workspace_sidebar_options__element-options > :nth-child(n+4){animation-delay:.09s}
/* layers tree: children drop in when a group or board opens */
.main_ui_workspace_sidebar_layer_item__element-children{animation:pnp-drop .26s cubic-bezier(.16,1,.3,1) backwards}
/* colour / text palette slides up */
.main_ui_workspace_palette__palette,
.main_ui_workspace_text_palette__text-palette{animation:pnp-rise .32s cubic-bezier(.16,1,.3,1) backwards}
/* toasts and inline notices */
@keyframes pnp-toast{from{opacity:0;translate:0 12px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
.main_ui_ds_notifications_toast__toast,
.main_ui_notifications_context_notification__context-notification,
.main_ui_notifications_inline_notification__new-inline{animation:pnp-toast .36s cubic-bezier(.16,1,.3,1) backwards}
/* comments panel and threads */
.main_ui_workspace_comments__comments-section{animation:pnp-side-in-r .42s cubic-bezier(.16,1,.3,1) backwards}
.main_ui_workspace_comments__thread-groups > *{animation:pnp-rise .3s cubic-bezier(.16,1,.3,1) backwards}
/* history / versions entries */
.main_ui_workspace_sidebar_versions__version-entry-wrap,
.main_ui_workspace_sidebar_history__history-entry{animation:pnp-rise .3s cubic-bezier(.16,1,.3,1) backwards}
/* chevrons turn instead of flipping */
.main_ui_components_title_bar__icon-text-btn svg,
.main_ui_workspace_sidebar_layer_item__toggle-content svg,
[class*="__collapsabled-icon"] svg{transition:transform .24s cubic-bezier(.16,1,.3,1)}

@media (prefers-reduced-motion:reduce){
  .main_ui_dashboard_grid__grid-item,.main_ui_workspace_sidebar__right-sidebar,.main_ui_workspace_sidebar_options__element-options > *,
  .main_ui_workspace_sidebar_layer_item__element-children,.main_ui_workspace_palette__palette,.main_ui_workspace_text_palette__text-palette,
  .main_ui_ds_notifications_toast__toast,.main_ui_notifications_context_notification__context-notification,
  .main_ui_notifications_inline_notification__new-inline,.main_ui_workspace_comments__comments-section,
  .main_ui_workspace_comments__thread-groups > *,.main_ui_workspace_sidebar_versions__version-entry-wrap,
  .main_ui_workspace_sidebar_history__history-entry{animation:none!important}
}

/* ---------- PnP polish 4 (patch13): share dialog, team pages, open palette, empty thumbnails ---------- */

/* 1. Team pages (Members / Invitations / Settings): the content starts on the same 24px line as the title
      and ends 24px from the right, like the dashboard; tables use the full width instead of 1000px
      (Members was left, Invitations centred) */
.main_ui_dashboard_team__dashboard-container,.main_ui_dashboard_team__dashboard-team-invitations,.main_ui_dashboard_team__dashboard-team-settings{padding:24px 24px 40px 24px!important;box-sizing:border-box}
.main_ui_dashboard_team__dashboard-team-invitations{justify-content:flex-start!important;justify-items:start!important;align-items:flex-start!important}
.main_ui_dashboard_team__team-members,.main_ui_dashboard_team__invitations,.main_ui_dashboard_team__webhooks{
  max-inline-size:none!important;inline-size:100%!important;margin-inline:0!important}
.main_ui_dashboard_team__dashboard-container .main_ui_dashboard_team__table-header,
.main_ui_dashboard_team__dashboard-container .main_ui_dashboard_team__table-rows{max-inline-size:none!important;inline-size:100%!important}

/* header tabs: one quiet pill group, green tint on the open page */
.main_ui_dashboard_team__dashboard-header .main_ui_dashboard_team__dashboard-header-options{
  display:flex;gap:2px;padding:4px;border-radius:12px;background:var(--color-background-tertiary,#1a1a1a);height:auto!important}
.main_ui_dashboard_team__dashboard-header .main_ui_dashboard_team__dashboard-header-options li{height:auto!important}
.main_ui_dashboard_team__dashboard-header .main_ui_dashboard_team__dashboard-header-options li a{
  display:flex;align-items:center;height:32px;padding:0 16px!important;border-radius:8px;border:0!important;
  font-size:14px!important;font-weight:500!important;
  transition:background-color var(--pnp-mid,.28s) var(--pnp-ease,ease),color var(--pnp-fast,.16s) ease}
.main_ui_dashboard_team__dashboard-header .main_ui_dashboard_team__dashboard-header-options li a:hover{background:rgba(var(--ek-ink-rgb),.05)}
.main_ui_dashboard_team__dashboard-header .main_ui_dashboard_team__dashboard-header-options li.main_ui_dashboard_team__active a{
  background:rgba(var(--ek-accent-rgb),.14);color:var(--ek-accent)!important}

/* table rows: rounder, a hover tint, rise in one after another */
.main_ui_dashboard_team__table-row{border-radius:12px!important;border:1px solid transparent;
  transition:background-color var(--pnp-fast,.16s) ease,border-color var(--pnp-fast,.16s) ease;
  animation:pnp-rise .36s var(--pnp-ease,ease) backwards}
.main_ui_dashboard_team__table-row:hover{border-color:rgba(var(--ek-accent-rgb),.22)}
.main_ui_dashboard_team__table-rows > :nth-child(2) .main_ui_dashboard_team__table-row,
.main_ui_dashboard_team__table-rows > .main_ui_dashboard_team__table-row:nth-child(2){animation-delay:.04s}
.main_ui_dashboard_team__table-rows > :nth-child(3) .main_ui_dashboard_team__table-row,
.main_ui_dashboard_team__table-rows > .main_ui_dashboard_team__table-row:nth-child(3){animation-delay:.08s}
.main_ui_dashboard_team__table-rows > :nth-child(n+4) .main_ui_dashboard_team__table-row,
.main_ui_dashboard_team__table-rows > .main_ui_dashboard_team__table-row:nth-child(n+4){animation-delay:.12s}
.main_ui_dashboard_team__rol-selector{transition:background-color var(--pnp-fast,.16s) ease}
.main_ui_dashboard_team__rol-selector:hover{background:rgba(var(--ek-accent-rgb),.14)}

/* "No pending invitations" box: a dashed card, the first line as its title */
.main_ui_dashboard_team__empty-invitations{border:1px dashed rgba(var(--ek-ink-rgb),.12)!important;border-radius:12px!important;
  background:rgba(var(--ek-ink-rgb),.015);padding:36px 24px!important;font-size:14px;line-height:1.5;
  animation:pnp-rise .36s var(--pnp-ease,ease) backwards}
.main_ui_dashboard_team__empty-invitations > div:first-child{color:var(--color-foreground-primary,#fff);font-weight:600;font-size:15px}
.main_ui_dashboard_team__empty-invitations button{margin-top:16px}

/* Settings: one card on the same left line instead of a centred column */
.main_ui_dashboard_team__dashboard-team-settings{justify-content:flex-start!important;justify-items:start!important;align-items:flex-start!important}
.main_ui_dashboard_team__settings-container{margin-inline:0!important}
.main_ui_dashboard_team__settings-container{align-items:stretch!important;gap:0!important;inline-size:min(440px,100%);
  box-sizing:border-box;padding:24px;border-radius:16px;background:var(--color-background-tertiary,#1a1a1a);
  border:1px solid rgba(var(--ek-ink-rgb),.06);animation:pnp-rise .36s var(--pnp-ease,ease) backwards}
.main_ui_dashboard_team__settings-container > .main_ui_dashboard_team__block{padding:20px 0}
.main_ui_dashboard_team__settings-container > .main_ui_dashboard_team__block:first-child{padding-top:0}
.main_ui_dashboard_team__settings-container > .main_ui_dashboard_team__block:last-child{padding-bottom:0}
.main_ui_dashboard_team__settings-container > .main_ui_dashboard_team__block + .main_ui_dashboard_team__block{border-top:1px solid rgba(var(--ek-ink-rgb),.06)}
.main_ui_dashboard_team__team-icon{block-size:72px!important;inline-size:72px!important;padding:0!important;margin-block-end:16px!important}
.main_ui_dashboard_team__team-image,.main_ui_dashboard_team__update-overlay{inline-size:72px!important;block-size:72px!important;border-radius:50%!important}
.main_ui_dashboard_team__team-image{box-shadow:0 0 0 1px rgba(var(--ek-ink-rgb),.08)}
.main_ui_dashboard_team__update-overlay{transition:opacity var(--pnp-mid,.28s) var(--pnp-ease,ease)}
.main_ui_dashboard_team__block-text{font-size:15px}
.main_ui_dashboard_team__block-label{margin-bottom:4px}

/* 2. Share prototype dialog + invite dialog: 24px padding, rounder, title the size of other dialog titles,
      close button centred on the title, every row ends on the same right edge */
.main_ui_viewer_share_link__share-link-dialog,.main_ui_dashboard_team__modal-team-container{
  padding:24px!important;border-radius:16px!important;border:1px solid rgba(var(--ek-ink-rgb),.08)!important;
  box-shadow:0 24px 64px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);
  animation:pnp-dialog var(--pnp-mid,.28s) var(--pnp-ease,ease) backwards}
.main_ui_viewer_share_link__share-link-header{display:flex;align-items:center;min-height:32px;margin-bottom:20px!important;padding-right:36px}
.main_ui_viewer_share_link__share-link-title,.main_ui_dashboard_team__modal-team-container h2{
  font-size:16px!important;font-weight:600!important;line-height:1.3!important;text-transform:none!important;letter-spacing:0!important}
.main_ui_viewer_share_link__modal-close-button{top:24px!important;right:20px!important;width:32px!important;height:32px!important;
  display:flex;align-items:center;justify-content:center;padding:0!important}
.main_ui_viewer_share_link__modal-content{gap:20px!important}
.main_ui_viewer_share_link__hint{font-size:13px!important}
.main_ui_viewer_share_link__share-link-section input[type=button],.main_ui_viewer_share_link__share-link-section button{
  font-size:13px!important;font-weight:600!important;text-transform:none!important;border-radius:8px!important}
.main_ui_viewer_share_link__manage-permissions{font-size:13px!important;font-weight:600!important;text-transform:none!important;
  gap:6px;transition:color var(--pnp-fast,.16s) ease}
.main_ui_viewer_share_link__manage-permissions:hover{color:var(--color-foreground-primary,#fff)!important}
.main_ui_viewer_share_link__icon{transition:transform var(--pnp-mid,.28s) var(--pnp-ease,ease),rotate var(--pnp-mid,.28s) var(--pnp-ease,ease)}
.main_ui_viewer_share_link__view-mode,.main_ui_viewer_share_link__access-mode,.main_ui_viewer_share_link__inspect-mode{
  animation:pnp-rise .32s var(--pnp-ease,ease) backwards;scrollbar-gutter:auto!important}
.main_ui_viewer_share_link__access-mode{animation-delay:.04s}
.main_ui_viewer_share_link__inspect-mode{animation-delay:.08s}
.main_ui_viewer_share_link__subtitle{font-size:13px!important}
.main_ui_viewer_share_link__items{min-width:0}
.main_ui_viewer_share_link__checkbox-wrapper span:not([class]){color:var(--color-foreground-secondary,#8f9da3)}

/* 3. Open colour / text palette: 16px from both side panels (Penpot pads the right side 4px), 8px inside on
      both ends, swatches rise in when it opens and lift on hover */
.main_ui_workspace_palette__palettes.main_ui_workspace_palette__wide{inline-size:calc(100% - 24px)!important}
.main_ui_workspace_palette__palettes:has(.main_ui_workspace_palette__palette){padding-inline-end:8px!important}
.main_ui_workspace_color_palette__color-cell{transition:translate var(--pnp-fast,.16s) var(--pnp-ease,ease)}
.main_ui_workspace_color_palette__color-cell:hover{translate:0 -2px}
.main_ui_workspace_color_palette__color-palette-inside > *,.main_ui_workspace_text_palette__text-palette-inside > *{
  animation:pnp-rise .32s var(--pnp-ease,ease) backwards}
.main_ui_workspace_color_palette__color-palette-inside > :nth-child(2),.main_ui_workspace_text_palette__text-palette-inside > :nth-child(2){animation-delay:.02s}
.main_ui_workspace_color_palette__color-palette-inside > :nth-child(3),.main_ui_workspace_text_palette__text-palette-inside > :nth-child(3){animation-delay:.04s}
.main_ui_workspace_color_palette__color-palette-inside > :nth-child(4),.main_ui_workspace_text_palette__text-palette-inside > :nth-child(4){animation-delay:.06s}
.main_ui_workspace_color_palette__color-palette-inside > :nth-child(5),.main_ui_workspace_text_palette__text-palette-inside > :nth-child(5){animation-delay:.08s}
.main_ui_workspace_color_palette__color-palette-inside > :nth-child(6),.main_ui_workspace_text_palette__text-palette-inside > :nth-child(6){animation-delay:.10s}
.main_ui_workspace_color_palette__color-palette-inside > :nth-child(n+7),.main_ui_workspace_text_palette__text-palette-inside > :nth-child(n+7){animation-delay:.12s}
.main_ui_workspace_text_palette__typography-item{border-radius:8px;transition:background-color var(--pnp-fast,.16s) ease}

/* 4. Dashboard thumbnails of empty files saved before the dark canvas (one flat #E8E9EA picture):
      pnp-guard.js marks them, they show as a dark canvas with a faint dot grid instead */
.main_ui_dashboard_grid__grid-item-thumbnail.pnp-empty-thumb{
  background:#1c1c1c radial-gradient(rgba(var(--ek-ink-rgb),.07) 1px,transparent 1.2px) 0 0/16px 16px!important}
.main_ui_dashboard_grid__grid-item-thumbnail.pnp-empty-thumb img{opacity:0!important}

/* 5. Smooth dragging: Penpot rebuilds the right-panel sections when a drag starts and ends, so patch11's
      section fade-up replayed on every move and the panel flickered while you dragged. The panel still
      slides in when it opens; its sections now just appear (like Figma). */
.main_ui_workspace_sidebar_options__element-options > *{animation:none!important}

@media (prefers-reduced-motion:reduce){
  .main_ui_dashboard_team__table-row,.main_ui_dashboard_team__empty-invitations,.main_ui_dashboard_team__settings-container,
  .main_ui_viewer_share_link__share-link-dialog,.main_ui_dashboard_team__modal-team-container,
  .main_ui_viewer_share_link__view-mode,.main_ui_viewer_share_link__access-mode,.main_ui_viewer_share_link__inspect-mode,
  .main_ui_workspace_color_palette__color-palette-inside > *,.main_ui_workspace_text_palette__text-palette-inside > *{animation:none!important}
  .main_ui_workspace_color_palette__color-cell:hover{translate:none}
}

/* elkiya design step 14 (14 Nov 2026): the dark standard, shared with elkiya design.
   The app is always dark (patch14 forces the theme and hides the Theme setting).
   Colours come from the theme variables, so each brand keeps its own accent. */

/* danger buttons: white text on the red, never dark text on a dark-ish fill */
.default{--button-warning-foreground-color-rest:#fff;--modal-button-foreground-color-error:#fff}

/* empty Drafts / search cards: everything centred, balanced lines */
.main_ui_dashboard_placeholder__empty-project-card,.main_ui_dashboard_search__empty-project-card{
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:.25rem;text-align:center!important;padding:1rem!important;transition:background-color .18s cubic-bezier(.16,1,.3,1)}
.main_ui_dashboard_placeholder__empty-project-card-title,.main_ui_dashboard_search__empty-project-card-title{font-size:.8125rem;font-weight:600;text-wrap:balance}
.main_ui_dashboard_placeholder__empty-project-card-subtitle,.main_ui_dashboard_search__empty-project-card-subtitle{font-size:.75rem;text-wrap:balance}

/* sidebar tabs (Layers / Assets / Tokens, Design / Prototype / Inspect): plain text on a hairline,
   the active one in full white with a short accent bar that grows in; no grey box */
.main_ui_ds_layout_tab_switcher__tab-nav{background:transparent!important;padding:0!important;border-radius:0!important;
  border-bottom:1px solid rgba(var(--ek-ink-rgb),.08)}
.main_ui_ds_layout_tab_switcher__tab-list{gap:0!important;justify-content:start;grid-auto-columns:max-content}
.main_ui_ds_layout_tab_switcher__tab{--tabs-item-bg-color:transparent!important;background:transparent!important;
  position:relative;height:2.25rem!important;padding:0 .625rem!important;border-radius:0!important}
.main_ui_ds_layout_tab_switcher__tab::after{content:"";position:absolute;left:.625rem;right:.625rem;bottom:-1px;height:2px;
  border-radius:2px;background:var(--color-accent-primary);transform:scaleX(0);transition:transform .22s cubic-bezier(.16,1,.3,1)}
.main_ui_ds_layout_tab_switcher__selected{--tabs-item-fg-color:var(--color-foreground-primary)!important;
  --tabs-item-fg-color-hover:var(--color-foreground-primary)!important}
.main_ui_ds_layout_tab_switcher__selected::after{transform:scaleX(1)}
.main_ui_ds_layout_tab_switcher__tab-text{font-size:.75rem!important;font-weight:600!important}

/* file header: 24px mark, project name above the file name, quiet type */
.main_ui_workspace_left_header__workspace-header-left{padding:.75rem .75rem .5rem!important;gap:.5rem;min-height:3rem!important}
.main_ui_workspace_left_header__main-icon,.main_ui_workspace_left_header__main-icon svg{width:1.5rem!important;height:1.5rem!important;min-height:1.5rem!important}
.main_ui_workspace_left_header__main-icon{margin-right:0!important;border-radius:6px;overflow:hidden}
.main_ui_workspace_left_header__project-tree{height:auto!important;display:flex;flex-direction:column;justify-content:center;gap:1px}
.main_ui_workspace_left_header__project-name{font-size:.6875rem!important;font-weight:500!important;color:var(--color-foreground-secondary)!important}
.main_ui_workspace_left_header__file-name{font-size:.8125rem!important;font-weight:600!important;color:var(--color-foreground-primary)!important}

/* right header: same height as the left one, zoom as a small chip, soft hover on the icon buttons */
.main_ui_workspace_right_header__workspace-header-right{padding:.625rem .75rem .5rem!important;min-height:3rem}
.main_ui_workspace_right_header__zoom-widget{width:auto!important;max-width:none!important;padding:0 .5rem;border-radius:6px}
.main_ui_workspace_right_header__zoom-widget:hover,.main_ui_workspace_right_header__comments-btn:hover,
.main_ui_workspace_right_header__history-button:hover,.main_ui_workspace_right_header__viewer-btn:hover{background:rgba(var(--ek-ink-rgb),.06)!important}