@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

  :root{
    --bg: #0a0d0e;
    --panel: #12171a;
    --panel-2: #0e1315;
    --border: #1f2b2e;
    --border-soft: #182124;
    --accent: #4ee8b0;
    --accent-dim: #2a5c48;
    --accent-glow: rgba(78,232,176,0.35);
    --amber: #ffb454;
    --text: #d7e4e0;
    --muted: #66807a;
    --muted-2: #435351;
    --danger: #ff6b6b;
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(78,232,176,0.06), transparent 60%),
      radial-gradient(900px 500px at 100% 10%, rgba(255,180,84,0.04), transparent 55%),
      var(--bg);
    color: var(--text);
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    min-height: 100vh;
    padding: 32px 20px 60px;
  }

  .wrap{ max-width: 1180px; margin: 0 auto; }

  header{ margin-bottom: 28px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent); border: 1px solid var(--accent-dim);
    background: rgba(78,232,176,0.06);
    padding: 4px 10px; border-radius: 3px; margin-bottom: 14px;
  }
  .eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
  h1{
    font-size: 30px; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em;
    color: #eafff5;
  }
  header p{ margin:0; color: var(--muted); font-size: 13.5px; max-width: 640px; line-height:1.6; }

  .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items:start; }
  @media (max-width: 900px){ .grid{ grid-template-columns: 1fr; } }

  .panel{
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    min-width: 0;
  }
  .panel-head{
    display:flex; align-items:center; justify-content:space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--border);
    background: var(--panel-2);
  }
  .panel-head h2{
    font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
    margin:0; color: var(--text); font-weight:600;
  }
  .panel-head .tag{ font-size:11px; color: var(--muted); }
  .panel-body{ padding: 16px; }

  .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
  .field{ display:flex; flex-direction:column; gap:4px; }
  .field label{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); }
  input[type=number], input[type=text], textarea, select{
    background: var(--panel-2); border: 1px solid var(--border-soft); color: var(--text);
    font-family: inherit; font-size: 13px; padding: 7px 9px; border-radius: 4px;
    outline: none; transition: border-color .15s;
  }
  input[type=number]{ width: 68px; }
  input[type=number]:focus, input[type=text]:focus, textarea:focus, select:focus{ border-color: var(--accent-dim); }

  button{
    font-family: inherit; font-size: 12px; letter-spacing:.03em; font-weight:600;
    background: var(--panel-2); color: var(--text); border: 1px solid var(--border-soft);
    padding: 8px 13px; border-radius: 4px; cursor: pointer; transition: all .15s;
  }
  button:hover{ border-color: var(--accent-dim); color: #eafff5; }
  button:active{ transform: translateY(1px); }
  button.primary{
    background: var(--accent); color: #06120d; border-color: var(--accent);
  }
  button.primary:hover{ box-shadow: 0 0 0 3px var(--accent-glow); }
  button.ghost{ background: transparent; }
  button.small{ padding: 5px 9px; font-size: 11px; }
  button.wide{ padding: 5px 9px; font-size: 11px; width:100%; }
  .btnrow{ display:flex; gap:8px; flex-wrap:wrap; }

  .presets{ display:flex; gap:6px; flex-wrap:wrap; }
  .presets button{ font-size: 11px; padding: 5px 8px; color:var(--muted); }
  .presets button.active{ color: var(--accent); border-color: var(--accent-dim); }

  canvas{ image-rendering: pixelated; display:block; }

  .canvas-wrap{
    display:flex; justify-content:center; align-items:center;
    background:
      linear-gradient(var(--border-soft) 1px, transparent 1px) 0 0/ 100% 100%,
      var(--panel-2);
    border: 1px solid var(--border-soft); border-radius: 4px;
    padding: 18px; overflow:auto;
    width: 100%; min-width: 0; box-sizing: border-box;
  }
  #drawCanvas{ background: var(--panel-2); border: 1px solid var(--border); cursor: crosshair; }
  #previewCanvas{ background: var(--panel-2); border: 1px solid var(--border); }

  .inspector{
    margin-top: 12px; padding: 10px 12px; background: var(--panel-2);
    border: 1px solid var(--border-soft); border-radius: 4px;
    display:flex; gap: 18px; flex-wrap:wrap; font-size: 11.5px; color: var(--muted);
  }
  .inspector b{ color: var(--accent); font-weight:600; }
  .inspector span{ white-space:nowrap; }

  textarea{ width:100%; min-height: 84px; resize: vertical; line-height:1.5; }
  #codeOut{ min-height: 150px; font-size: 12px; }

  .copybar{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
  .hint{ font-size: 11px; color: var(--muted-2); }
  .hint.err{ color: var(--danger); }
  .hint.ok{ color: var(--accent); }

  .divider{ height:1px; background: var(--border-soft); margin: 16px 0; }

  .switch-row{ display:flex; gap:6px; }
  .switch-row button{ padding: 6px 10px; font-size: 11px; }
  .switch-row button.active{ background: var(--accent-dim); border-color: var(--accent); color:#eafff5; }

  footer{ margin-top: 30px; text-align:center; color: var(--muted-2); font-size: 11px; }

  /* ---- tabs ---- */
  .tabbar{ display:flex; gap:6px; margin-bottom:22px; border-bottom: 1px solid var(--border); }
  .tabbtn{
    background:transparent; border:none; border-bottom: 2px solid transparent;
    color: var(--muted); font-family:inherit; font-size:12.5px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; padding: 10px 4px; margin-right:22px;
    cursor:pointer; border-radius:0;
  }
  .tabbtn:hover{ color: var(--text); border-color: transparent; }
  .tabbtn.active{ color: var(--accent); border-bottom-color: var(--accent); }
  .tabpanel{ display:none; }
  .tabpanel.active{ display:block; }

  /* ---- animation tab ---- */
  .anim-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:20px; align-items:start; }
  @media (max-width: 980px){ .anim-grid{ grid-template-columns:1fr; } }

  .frame-list{ display:flex; flex-wrap:wrap; gap:10px; max-height: 420px; overflow-y:auto; padding:2px; }
  .frame-item{
    position:relative; border: 1px solid var(--border-soft); border-radius:4px;
    padding: 6px; background: var(--panel-2); cursor:pointer; width: 92px;
    transition: border-color .15s;
  }
  .frame-item:hover{ border-color: var(--accent-dim); }
  .frame-item.selected{ border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .frame-item canvas{ width:100%; height:auto; display:block; background:var(--panel-2); border:1px solid var(--border-soft); }
  .frame-item .fidx{ font-size:10px; color:var(--muted); margin-top:4px; text-align:center; }
  .frame-item .fdel{
    position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%;
    background: var(--panel); border:1px solid var(--border); color: var(--danger);
    font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center;
    cursor:pointer; padding:0;
  }
  .frame-item .fdel:hover{ border-color: var(--danger); }
  .empty-note{ color: var(--muted-2); font-size:12px; padding: 20px 4px; }

  .playbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:12px; }
  .playbar .field{ min-width: 60px; }
  #playIndicator{ font-size:12px; color: var(--muted); min-width: 54px; }

  /* ---- header / settings ---- */
  .headbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 28px; position:relative; }
  .headbar h1{ margin:0; }
  .settings-wrap{ position:relative; }
  .settings-btn{
    display:flex; align-items:center; gap:7px; font-size:12px; padding: 8px 13px;
  }
  .settings-btn svg{ color: var(--muted); }
  .settings-panel{
    display:none; position:absolute; right:0; top: calc(100% + 8px); z-index:20;
    width: 208px; background: var(--panel); border: 1px solid var(--border);
    border-radius: 6px; padding: 14px; box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  }
  .settings-panel.open{ display:block; }
  .color-row{ display:flex; align-items:center; gap:8px; margin-top:10px; }

  .wheel-wrap{ position:relative; width:160px; height:160px; margin: 4px auto 0; }
  #colorWheel{ display:block; cursor: crosshair; border-radius:50%; }
  .wheel-cursor{
    position:absolute; width:12px; height:12px; border-radius:50%;
    border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.6), 0 0 4px rgba(0,0,0,0.5);
    transform: translate(-50%,-50%); pointer-events:none; top:8px; left:80px;
  }
  .value-slider{
    -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:4px;
    margin-top:12px; background: linear-gradient(to right, #000, var(--accent));
    outline:none; cursor:pointer;
  }
  .value-slider::-webkit-slider-thumb{
    -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
    background:#fff; border:2px solid var(--panel-2); box-shadow:0 0 0 1px rgba(0,0,0,0.5); cursor:pointer;
  }
  .value-slider::-moz-range-thumb{
    width:14px; height:14px; border-radius:50%; background:#fff;
    border:2px solid var(--panel-2); box-shadow:0 0 0 1px rgba(0,0,0,0.5); cursor:pointer;
  }
  .swatch{
    width: 26px; height:26px; border-radius:4px; flex:0 0 auto;
    border: 1px solid var(--border-soft); background: var(--accent);
  }
  .hexfield{ flex:1; width:100%; text-transform:lowercase; }

  .toggle-row{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
  .toggle-row label{ font-size:11px; letter-spacing:.04em; color: var(--text); text-transform:none; }
  .toggle{
    position:relative; width:36px; height:20px; flex:0 0 auto;
    background: var(--panel-2); border:1px solid var(--border-soft); border-radius:10px;
    cursor:pointer; transition: background .15s, border-color .15s;
  }
  .toggle .knob{
    position:absolute; top:1px; left:1px; width:16px; height:16px; border-radius:50%;
    background: var(--muted); transition: transform .15s, background .15s;
  }
  .toggle.on{ background: var(--accent-dim); border-color: var(--accent-dim); }
  .toggle.on .knob{ transform: translateX(16px); background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }