:root {
  --color-bg: #f6f6f4;
  --color-bg-elevated: #ffffff;
  --color-bg-panel: #ebebe8;
  --color-bg-hover: #eeeeeb;
  --color-bg-active: #e0e0dc;
  --color-bg-overlay: rgba(246,246,244,.92);
  --color-surface: #ffffff;
  --color-surface-hover: #eeeee9;
  --color-border: #111111;
  --color-border-subtle: #c8c8c4;
  --color-border-focus: #111111;
  --color-text-primary: #111111;
  --color-text-secondary: #3f3f3d;
  --color-text-muted: #747470;
  --color-accent: #111111;
  --color-accent-hover: #444440;
  --color-accent-glow: transparent;
  --shadow-accent-hover-glow: none;
  --font-family: Arial, Helvetica, sans-serif;
  --header-height: 60px;
  --letter-spacing-tight: .08em;
  --letter-spacing-brutalist: .16em;
}
body { font-family: var(--font-family); font-variation-settings: normal; }
.app-header {
  padding: 0 24px;
  border-bottom: 1px solid #111;
}
.app-header__logo { gap: 18px; }
.app-header__logo img {
  height: 31px;
  max-width: min(46vw, 230px);
  object-fit: contain;
}
.app-header__logo::after {
  content: "IMAGE LAB";
  display: inline-flex;
  align-items: center;
  height: 25px;
  border-left: 1px solid #111;
  padding-left: 18px;
  color: #111;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
  white-space: nowrap;
}
.sidebar-left,
.tool-flyout {
  background: #fff;
  border-color: #c8c8c4;
}
.sidebar-left__header,
.tool-flyout__header,
.about-section__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}
.sidebar-item,
.form-label,
.btn {
  letter-spacing: .04em;
}
.sidebar-left__section {
  border-color: #c8c8c4;
}
.canvas-area { background: #e9e9e6; }
.upload-overlay {
  background: #f6f6f4;
}
.upload-overlay__home {
  min-width: min(430px, 86vw);
  padding: 26px 34px;
  background: rgba(255,255,255,.89);
  border: 1px solid #111;
  box-shadow: 10px 10px 0 rgba(17,17,17,.11);
}
.upload-overlay__text {
  max-width: 360px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .16em;
}
.upload-overlay__about {
  background: rgba(255,255,255,.94);
  border: 1px solid #111;
  max-width: 520px;
  padding: 28px 32px;
}
.about-section__body {
  font-size: 13px;
  line-height: 1.55;
}
.btn--primary,
.btn--import {
  background: #111;
  color: #fff;
}
.btn--primary:hover,
.btn--import:hover {
  background: #444440;
  box-shadow: none;
}
.tool-flyout__header { border-color: #c8c8c4; }
@media (max-width: 768px) {
  :root { --header-height: 48px; }
  .app-header { padding: 0 12px; }
  .app-header__logo img { height: 24px; max-width: 156px; }
  .app-header__logo::after { display: none; }
  .upload-overlay__home { min-width: auto; padding: 20px; }
}

/* BIGOTESUCIO · LAB interface */
:root{--color-bg:#f3f2ed;--color-bg-panel:#f3f2ed;--color-bg-elevated:#f3f2ed;--color-bg-hover:#e7ff00;--color-bg-active:#e7ff00;--color-bg-overlay:rgba(243,242,237,.94);--color-surface:#f3f2ed;--color-surface-hover:#e7ff00;--color-border:#141414;--color-border-subtle:rgba(20,20,20,.16);--color-text-primary:#141414;--color-text-secondary:#40403c;--color-text-muted:#6f6f69;--color-accent:#141414;--font-family:"IBM Plex Mono","SFMono-Regular",Menlo,Monaco,"Courier New",monospace;--header-height:60px;--letter-spacing-tight:0;--letter-spacing-brutalist:.04em}
body{background:#f3f2ed;color:#141414}.app-header{background:#f3f2ed;border-bottom:1px solid rgba(20,20,20,.16);padding:0 20px}.app-header__logo img{height:auto;max-height:34px;max-width:min(39vw,160px);mix-blend-mode:multiply}.app-header__logo::after{content:"/ EFECTOS DE IMAGEN";font-size:11px;font-weight:400;letter-spacing:0;border-color:rgba(20,20,20,.16);color:#6f6f69}.lab-back{display:inline-flex;align-items:center;white-space:nowrap;padding:8px 10px;border:1px solid rgba(20,20,20,.16);color:#141414;text-decoration:none;font-size:11px;font-weight:400;letter-spacing:0}.lab-back:hover{background:#e7ff00;border-color:#141414}
.sidebar-left,.tool-flyout{background:#f3f2ed;border-color:rgba(20,20,20,.16)}.canvas-area{background:#e9e8e1}.sidebar-left__header,.tool-flyout__header,.about-section__label{font-weight:400;letter-spacing:.04em}.sidebar-item,.form-label,.btn{letter-spacing:0}.btn,.upload-overlay__home,.upload-overlay__about{border-radius:0}.btn--primary,.btn--import{background:#141414;color:#f3f2ed}.btn--primary:hover,.btn--import:hover{background:#e7ff00;color:#141414;box-shadow:none}.upload-overlay{background:#f3f2ed}.upload-overlay__home,.upload-overlay__about{background:#f3f2ed;border:1px solid rgba(20,20,20,.16);box-shadow:none}.upload-overlay__text{font-weight:400;letter-spacing:.04em}.tool-flyout__header,.sidebar-left__section{border-color:rgba(20,20,20,.16)}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #141414;outline-offset:2px}
@media(max-width:768px){.app-header{padding:0 10px}.app-header__logo img{max-width:115px}.app-header__logo::after{display:none}.lab-back{padding:6px;font-size:10px}}
