:root {
      --bgstart: #f3f6fb;
      --bgend: #fff;
      --accent: #2563eb;
      --space: 0.4rem;
      --border-radius: 1.6rem;
      --input-bg: #eee;
      
      --chip-final-delay: 1s;
      --chip-bg: #eee;
      --chip-bg-active: #e8f0fe;
      --chip-text: #2563eb;
      --chip-border: #e6e9ef;
      --toolbar-border-radius: 1.6rem;
      --toolbar-space: 0.4rem;
      --toolbar-font-size: 0.8rem;
      
      --sidebar-w: 72px;
      --sidebar-bg: #eee;
      --sidebar-border: #e6e9ef;
      --sidebar-border-radius: 2.6rem;
      --sidebar-space: 0.4rem;
      --sidebar-font-size: 0.8rem;
      --sidebar-final-delay: 0.6s;
      
  }
  
  * {
      transition: all 0.2s;
      box-sizing: border-box;
  }
  
  html,
  body {
      height: 100%;
      margin: 0;
      font-family: Inter, system-ui, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow: hidden;
  }
  
  .app {
      display: flex;
      height: 100vh;
      overflow: hidden;
      touch-action: none;
  }
  
  canvas {
      flex: 1;
      display: block;
      background: linear-gradient(180deg, var(--bgstart), var(--bgend));
      touch-action: none;
      overflow: hidden;
  }
  
  #editor {
      position: absolute;
      display: none;
      box-sizing: border-box;
      min-width: 120px;
      min-height: 60px;
      padding: 8px;
      border-radius: 8px;
      font: 14px/1.2 Inter, system-ui, Arial;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
      background: #fff9c4;
      border: 1px solid rgba(0, 0, 0, 0.04);
      outline: none;
      resize: none;
      overflow: auto;
      z-index: 1000;
      -webkit-user-modify: read-write-plaintext-only;
  }
  
  #editor-tray {
      display: flex;
      align-items: center;
      gap: var(--space);
      padding: var(--space);
      background: red;
      border-radius: var(--border-radius);
      
  }
  
  
  /* transition: transform 0.25s ease, opacity 0.25s ease; */
  #name,
  #name-input {
      transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55),
          opacity 0.25s ease;
      border-radius: var(--border-radius);
      transform-origin: center;
  }
  
  #name {
      max-width: 150px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
  }
  
  #name-input {
      outline: 2px solid var(--accent);
      padding: calc(var(--space) / 2);
      border: none;
  }
  
  
  .hidden {
      opacity: 0;
      transform: scale(0.8);
      pointer-events: none;
      position: absolute;
  }
  
  select, input{
      padding: calc(var(--space) / 2);
      border-radius: var(--border-radius);

  }
  
  
  /*
  #bottomBar:focus-within .header-chip,
  #bottomBar:focus-within .zoom-tag,
  #bottomBar:focus-within .color-picker {
      display: none !important;
  }
  */