.twk-panel,.twk-reopen{
    --bg:oklch(0.98 0.00 106 / .8);--text:oklch(0.22 0.01 56);--bd:oklch(0.22 0.01 56 / .1);
    --label:oklch(0.22 0.01 56 / .7);--val:oklch(0.22 0.01 56 / .5);
    --sect:var(--val);
    --fld-bd:oklch(0.22 0.01 56 / .15);--fld-bdf:oklch(0.22 0.01 56 / .35);--fld-surf:oklch(0.22 0.01 56 / .05);
    --pg-border:var(--fld-bd);--pg-surface:var(--fld-surf);--pg-border-focus:var(--fld-bdf);
    --scroll:var(--fld-bd);--scroll-h:var(--fld-bdf);
    --track:var(--fld-bd);--seg:var(--fld-bd);
    --tog-off:oklch(0.22 0.01 56 / .3);--tog-handle:oklch(0.98 0.00 106);
    --btn:oklch(0.22 0.01 56 / .85);--btn-t:oklch(0.98 0.00 106);--btn-h:oklch(0.22 0.01 56 / .8);
    --sec:oklch(0.22 0.01 56 / .15);--sec-h:oklch(0.22 0.01 56 / .13);
    --bar-fill:oklch(0.22 0.01 56 / .85);--bar-val:oklch(0.98 0.00 106);
  }
  html[data-theme="dark"] .twk-panel,
  html[data-theme="dark"] .twk-reopen{background:oklch(0.27 0.01 34 / 0.6);box-shadow:rgba(0,0,0,0.2) 0px 6px 24px 0px, rgba(255,255,255,0.1) 0px 0px 0px 1px;}
  html[data-theme="dark"] .twk-cpick{background:oklch(0.27 0.01 34 / 0.6);box-shadow:rgba(0,0,0,0.2) 0px 6px 24px 0px, rgba(255,255,255,0.1) 0px 0px 0px 1px;}
  html[data-theme="dark"] .twk-panel,
  html[data-theme="dark"] .twk-reopen{
    --bg:oklch(0.27 0.01 34 / .8);--text:oklch(0.98 0.00 106);--bd:oklch(0.98 0.00 106 / .1);
    --label:oklch(0.98 0.00 106 / .7);--val:oklch(0.98 0.00 106 / .5);
    --fld-bd:oklch(0.98 0.00 106 / .15);--fld-bdf:oklch(0.98 0.00 106 / .35);--fld-surf:oklch(0.98 0.00 106 / .05);
    --pg-border:var(--fld-bd);--pg-surface:var(--fld-surf);--pg-border-focus:var(--fld-bdf);
    --tog-off:oklch(0.98 0.00 106 / .3);
    --btn:oklch(0.98 0.00 106 / .85);--btn-t:oklch(0.22 0.01 56);--btn-h:oklch(0.98 0.00 106 / .8);
    --sec:oklch(0.98 0.00 106 / .15);--sec-h:oklch(0.98 0.00 106 / .13);
    --bar-fill:oklch(0.98 0.00 106 / .85);--bar-val:oklch(0.22 0.01 56);
  }

  @keyframes twk-in  { from { opacity:0; translate:16px 0; } to { opacity:1; translate:0 0; } }
  @keyframes twk-out { from { opacity:1; translate:0 0; } to { opacity:0; translate:16px 0; } }

  .twk-panel{position:fixed;right:16px;top:calc(var(--header-h,0px) + 16px);
    z-index:var(--z-panel);width:320px;
    max-height:calc(100dvh - var(--header-h,0px) - 32px);display:flex;flex-direction:column;
    transform:scale(var(--dc-inv-zoom,1));transform-origin:top right;
    background:rgba(255,255,255,0.6);color:var(--text);
    backdrop-filter:blur(20px) saturate(180%);
    border:none;border-radius:var(--radius-sm);corner-shape:superellipse(1.7);
    box-shadow:rgba(0,0,0,0.05) 0px 6px 24px 0px, rgba(0,0,0,0.06) 0px 0px 0px 1px;
    font:12px/1.4 'Inter',ui-sans-serif,system-ui,sans-serif;overflow:hidden}
  .twk-panel.twk-opening{animation:twk-in .5s cubic-bezier(.16,1,.3,1) both;}
  .twk-panel.twk-closing{animation:twk-out .2s cubic-bezier(.4,0,1,1) both;pointer-events:none;}
  .twk-hd{display:flex;align-items:center;justify-content:space-between;
    padding:8px 8px 0 16px;}
  .twk-hd b{font-size:15px;font-weight:500;letter-spacing:.01em;line-height:20px}
  .twk-hd-spacer{width:36px;height:36px;flex-shrink:0;}
  .twk-x{appearance:none;border:0;background:transparent;color:oklch(0.22 0.01 56 / .8);
    width:36px;height:36px;border-radius:12px;cursor:pointer;font-size:13px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    position:absolute;top:8px;right:8px;}
  .twk-x:hover{color:var(--text)}
  html[data-theme="dark"] .twk-x{color:oklch(0.98 0.00 106 / .8)}
  html[data-theme="dark"] .twk-x:hover{color:oklch(0.98 0.00 106)}
  .twk-body{padding:4px 16px 16px;display:flex;flex-direction:column;gap:8px;
    overflow-y:auto;overflow-x:hidden;min-height:0;scroll-padding-top:4px;
    scrollbar-width:thin;scrollbar-color:var(--scroll) transparent}
  .twk-body::-webkit-scrollbar{width:8px}
  .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
  .twk-body::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:6px;
    border:2px solid transparent;background-clip:content-box}
  .twk-body::-webkit-scrollbar-thumb:hover{background:var(--scroll-h);
    border:2px solid transparent;background-clip:content-box}
  .twk-row{display:flex;flex-direction:column;gap:5px}
  .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;min-height:26px}
  .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
    color:var(--label)}
  .twk-lbl>span:first-child{font-weight:500}
  .twk-val{color:var(--val);font-variant-numeric:tabular-nums}

  .twk-sect{font-size:11px;line-height:14px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
    color:var(--sect);margin-top:-8px}
  .twk-sect:first-child{margin-top:0}
  .twk-sect::before{content:'';display:block;border-top:1px solid var(--bd);margin:16px 0}
  .twk-sect:first-child::before{display:none}

  .pg-input{width:100%;min-width:0;color:inherit;font:inherit}
  select.pg-input{padding-right:22px;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
    background-repeat:no-repeat;background-position:right 8px center}

  .twk-bar-row{display:flex;align-items:center;gap:8px}
  .twk-bar-lbl{font-weight:500;color:var(--label);white-space:nowrap;flex:1;min-width:0}
  .twk-bar:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:8px;}
  .twk-bar{position:relative;width:180px;flex-shrink:0;height:26px;border-radius:8px;background:var(--track);
    cursor:grab;overflow:hidden;user-select:none;touch-action:pan-y}
  .twk-bar-fill{position:absolute;top:0;left:0;bottom:0;background:var(--bar-fill);
    border-radius:8px 0 0 8px;pointer-events:none;min-width:8px}
  .twk-bar-val{position:absolute;inset:0;display:flex;align-items:center;
    justify-content:center;font-size:11px;font-variant-numeric:tabular-nums;
    pointer-events:none;font-weight:500}
  .twk-bar-val--fill{color:var(--bar-val)}
  .twk-bar-val--track{color:var(--text)}

  .twk-seg{position:relative;display:flex;border-radius:10px;
    background:var(--seg);user-select:none;box-sizing:border-box;height:32px;padding:3px}
  .twk-seg-thumb{position:absolute;top:3px;bottom:3px;border-radius:8px;
    background:var(--bar-fill);box-shadow:0 1px 2px rgba(0,0,0,.12);
    transition:left .4s cubic-bezier(.4,0,.2,1),width .4s cubic-bezier(.4,0,.2,1)}
  .twk-seg.dragging .twk-seg-thumb{transition:none}
  .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
    background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
    border-radius:8px;cursor:pointer;padding:4px 6px;line-height:1.2;
    overflow-wrap:anywhere;transition:color .2s ease}
  .twk-seg button[aria-checked="true"]{color:var(--bar-val);transition-delay:.1s}
  @starting-style{.twk-seg button[aria-checked="true"]{color:var(--bar-val)}}

  .twk-toggle{position:relative;width:44px;height:24px;border:0;border-radius:999px;
    background:var(--tog-off);transition:background .25s;cursor:pointer;padding:0}
  .twk-toggle[data-on="1"]{background:#34c759}
  .twk-toggle i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
    background:var(--tog-handle);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
  .twk-toggle[data-on="1"] i{transform:translateX(20px)}

.twk-reopen{position:fixed;right:16px;top:calc(var(--header-h,0px) + 16px);z-index:var(--z-panel);width:36px;height:36px;
    border:none;border-radius:12px;cursor:pointer;padding:0;
    background:rgba(255,255,255,0.6);
    backdrop-filter:blur(20px) saturate(180%);
    box-shadow:rgba(0,0,0,0.05) 0px 6px 24px 0px, rgba(0,0,0,0.06) 0px 0px 0px 1px;
    display:flex;align-items:center;justify-content:center;color:oklch(0.22 0.01 56 / .8)}
  .twk-reopen:hover{color:var(--text)}
  html[data-theme="dark"] .twk-reopen{color:oklch(0.98 0.00 106 / .8)}
  html[data-theme="dark"] .twk-reopen:hover{color:oklch(0.98 0.00 106 / 1)}

  .twk-btn{appearance:none;flex:1;height:26px;padding:0 12px;border:0;border-radius:8px;
    background:var(--btn);color:var(--btn-t);font:inherit;font-weight:500;cursor:pointer}
  .twk-btn:hover{background:var(--btn-h)}
  .twk-btn:disabled{opacity:.35;cursor:default;pointer-events:none}
  html[data-theme="dark"] .twk-panel .twk-btn:disabled{opacity:.25}
  .twk-btn.secondary{background:var(--sec);color:inherit}
  .twk-btn.secondary:hover{background:var(--sec-h)}

  .twk-swatch{appearance:none;-webkit-appearance:none;width:36px;height:26px;
    border:.5px solid var(--fld-bd);border-radius:8px;padding:0;cursor:pointer;
    background:transparent;flex-shrink:0}
  .twk-swatch::-webkit-color-swatch-wrapper{padding:0}
  .twk-swatch::-webkit-color-swatch{border:0;border-radius:7.5px}
  .twk-swatch::-moz-color-swatch{border:0;border-radius:7.5px}

  .twk-color-row{display:flex;align-items:center;gap:6px}
  .twk-bar-row .twk-color-row{width:180px;flex-shrink:0}
  .twk-color-main{display:flex;align-items:center;flex:1;min-width:0;height:26px;
    border:1px solid var(--fld-bd);border-radius:0 8px 8px 0;background:var(--fld-surf);box-sizing:border-box}
  .twk-color-preview{flex-shrink:0;cursor:pointer;
    width:26px;height:26px;border-radius:8px 0 0 8px;
    margin-right:-6px;position:relative;z-index:1;
    box-shadow:inset 1px 0 0 var(--fld-bd),inset 0 1px 0 var(--fld-bd),inset 0 -1px 0 var(--fld-bd)}
  .twk-color-hex{flex:1;min-width:0;border:0;background:transparent;color:inherit;
    font:inherit;font-size:12px;padding:0 6px;outline:none}
  .twk-color-main:focus-within{border-color:var(--fld-bdf)}
  .twk-color-opacity{height:26px;padding:0 6px;border:1px solid var(--fld-bd);border-radius:8px;box-sizing:border-box;
    background:var(--fld-surf);font-size:12px;display:flex;align-items:center;gap:1px;
    white-space:nowrap;flex-shrink:0}
  .twk-color-opacity:focus-within{border-color:var(--fld-bdf)}
  .twk-color-opacity-input{width:20px;border:0;background:transparent;color:inherit;
    font:inherit;font-size:12px;text-align:right;padding:0;outline:none;-moz-appearance:textfield}
  .twk-color-opacity-input::-webkit-inner-spin-button,.twk-color-opacity-input::-webkit-outer-spin-button{-webkit-appearance:none}
  .twk-color-opacity-pct{color:inherit;font-size:11px}
  .twk-color-pick{appearance:none;width:26px;height:26px;border:0;
    border-radius:8px;background:transparent;color:var(--label);cursor:pointer;
    display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;box-sizing:border-box}
  .twk-color-pick:hover{color:var(--text)}
  .twk-cpick-fmt{display:flex;align-items:center;gap:6px;margin-top:6px;}
  .twk-cpick-fmt-tag{font-size:10px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
    padding:3px 7px;border-radius:5px;background:var(--sec);border:0;color:var(--label);cursor:pointer;flex-shrink:0;}
  .twk-cpick-fmt-tag:hover{background:var(--sec-h);}
  .twk-cpick-fmt-val{flex:1;min-width:0;font-size:11px;color:var(--label);cursor:copy;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:transparent;border:0;padding:0;font-family:inherit;text-align:left;}
  .twk-cpick-fmt-val:hover{color:var(--text);}

  .twk-chips{display:flex;gap:6px}
  .twk-chip{position:relative;appearance:none;flex:1;min-width:0;height:46px;
    padding:0;border:0;border-radius:8px;overflow:hidden;cursor:pointer;
    box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);
    transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s}
  .twk-chip:hover{transform:translateY(-1px);
    box-shadow:0 0 0 .5px rgba(0,0,0,.18)}
  .twk-chip[data-on="1"]{border-radius:8px;box-shadow:0 0 0 1.5px rgba(0,0,0,.85),
    0 2px 6px rgba(0,0,0,.15)}
  .twk-chip>span{position:absolute;top:0;bottom:0;right:0;width:34%;
    display:flex;flex-direction:column;box-shadow:-1px 0 0 rgba(0,0,0,.1)}
  .twk-chip>span>i{flex:1;box-shadow:0 -1px 0 rgba(0,0,0,.1)}
  .twk-chip>span>i:first-child{box-shadow:none}
  .twk-chip svg{position:absolute;top:6px;left:6px;width:13px;height:13px;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}

  .twk-cpick{position:fixed;z-index:var(--z-picker);width:212px;
    background:rgba(255,255,255,0.6);backdrop-filter:blur(20px) saturate(180%);
    border:none;border-radius:12px;padding:12px;
    box-shadow:rgba(0,0,0,0.05) 0px 6px 24px 0px, rgba(0,0,0,0.06) 0px 0px 0px 1px;
    display:flex;flex-direction:column;gap:8px}
  .twk-cpick-sv{position:relative;width:100%;height:140px;
    border-radius:8px;overflow:hidden;cursor:crosshair;flex-shrink:0}
  .twk-cpick-sv-white{position:absolute;inset:0;
    background:linear-gradient(to right,#fff,transparent)}
  .twk-cpick-sv-black{position:absolute;inset:0;
    background:linear-gradient(to top,#000,transparent)}
  .twk-cpick-sv-thumb{position:absolute;width:12px;height:12px;border-radius:50%;
    border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);
    transform:translate(-50%,-50%);pointer-events:none}
  .twk-cpick-hue{position:relative;height:10px;border-radius:5px;cursor:ew-resize;
    background:linear-gradient(to right,hsl(0,100%,50%),hsl(60,100%,50%),hsl(120,100%,50%),hsl(180,100%,50%),hsl(240,100%,50%),hsl(300,100%,50%),hsl(360,100%,50%))}
  .twk-cpick-hue-thumb{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;
    background:#fff;border:1.5px solid rgba(0,0,0,.2);box-shadow:0 1px 3px rgba(0,0,0,.2);
    transform:translate(-50%,-50%);pointer-events:none}

  .twk-footer{display:none;flex-shrink:0;padding:12px 16px;gap:8px;border-top:1px solid var(--bd);}
  .twk-footer .twk-btn,.twk-cpick .twk-btn{height:36px;border-radius:12px;font-size:14px;}
  .twk-desktop-only{}
  .twk-mobile-only{display:none;}
  .twk-backdrop{display:none;}
  @media (max-width:639px){
    .twk-color-pick{display:none!important;}
    .twk-footer{display:flex;padding-bottom:max(12px,env(safe-area-inset-bottom));}
    .twk-desktop-only{display:none!important;}
    .twk-mobile-only{display:flex;}
    /* Scrim as a gradient (a background-IMAGE), so the element's background-COLOR
       stays transparent. iOS Safari samples fixed elements' background-color to
       tint the address bar and never re-samples when they're removed, so a solid
       dark scrim tints the bar and the tint sticks after the sheet closes. With
       background-color transparent, Safari falls through to the light page bg;
       that's what actually prevents the tint. Clear at BOTH ends so neither the
       top nor the bottom toolbar gets a dark sample: transparent through the top
       safe zone (safe-area + 8px), ramp down to the --twk-scrim peak, then fade
       back to transparent before the bottom. Dark in the middle, clear at the
       edges; the theme only swaps the peak alpha. */
    .twk-backdrop{display:block;position:fixed;inset:0;z-index:var(--z-modal);
      --twk-scrim:rgba(0,0,0,.4);
      background:linear-gradient(to bottom,
        rgba(0,0,0,0) calc(env(safe-area-inset-top,0px) + 8px),
        var(--twk-scrim) 80%,
        rgba(0,0,0,0) 90%);
      animation:twk-backdrop-in .5s cubic-bezier(.16,1,.3,1) both;}
    html[data-theme="dark"] .twk-backdrop{--twk-scrim:rgba(0,0,0,.5);}
    .twk-panel{z-index:calc(var(--z-modal) + 1)!important;}
    .twk-hd{position:relative;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab;}
    .twk-hd:active{cursor:grabbing;}
    .twk-dragging,.twk-dragging *{cursor:grabbing!important;}
    .twk-hd::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:36px;height:3px;border-radius:1.5px;background:oklch(0.22 0.01 56 / .2);}
    html[data-theme="dark"] .twk-hd::before{background:oklch(0.98 0.00 106 / .25);}
  }

  @keyframes twk-in-mob  { from { opacity:0; translate:0 40px; } to { opacity:1; translate:0 0; } }
  @keyframes twk-out-mob { from { opacity:1; translate:0 0; } to { opacity:0; translate:0 40px; } }
  @keyframes twk-backdrop-in { from { opacity:0; } to { opacity:1; } }

  .twk-fab{
    display:none;position:fixed;
    bottom:calc(16px + env(safe-area-inset-bottom, 0px));left:50%;transform:translateX(-50%);
    z-index:var(--z-panel);height:36px;padding:0 16px 0 12px;gap:8px;
    background:rgba(255,255,255,0.6);backdrop-filter:blur(10px);
    border:none;border-radius:12px;
    box-shadow:rgba(0,0,0,0.05) 0px 6px 24px 0px, rgba(0,0,0,0.06) 0px 0px 0px 1px;
    color:oklch(0.22 0.01 56 / .8);
    font:500 14px/1 'Inter',ui-sans-serif,system-ui,sans-serif;
    cursor:pointer;align-items:center;white-space:nowrap;touch-action:manipulation;
  }
  html[data-theme="dark"] .twk-fab{
    background:oklch(0.27 0.01 34 / 0.6);color:oklch(0.98 0.00 106 / .8);box-shadow:rgba(0,0,0,0.2) 0px 6px 24px 0px, rgba(255,255,255,0.1) 0px 0px 0px 1px;
  }
  /* Reopen/FAB: the transition lives on the visible state, so showing eases in
     (opacity 0→1 after the panel is gone) while hiding is instant (the hidden
     state cancels the transition) — no flash over the panel as it opens. */
  .twk-fab,.twk-reopen{opacity:1;transition:opacity .28s ease}
  .twk-fab[data-hidden="1"],.twk-reopen[data-hidden="1"]{opacity:0;visibility:hidden;pointer-events:none;transition:none}

  @media (max-width:639px){
    .twk-reopen{display:none!important;}
    .twk-fab{display:flex;}
    .twk-panel{
      right:auto!important;top:auto!important;
      left:50%!important;bottom:-200px!important;
      transform:translateX(-50%)!important;transform-origin:bottom center!important;
      width:100%!important;max-width:480px!important;
      box-sizing:border-box!important;
      max-height:calc(100dvh - 64px + 200px)!important;
      padding-bottom:200px!important;
      border-radius:var(--radius-sm) var(--radius-sm) 0 0!important;corner-shape:superellipse(1.7)!important;
    }
    .twk-footer{position:sticky!important;bottom:0!important;}
    .twk-panel.twk-opening{animation:twk-in-mob .5s cubic-bezier(.16,1,.3,1) both!important;}
    .twk-panel.twk-closing{animation:twk-out-mob .2s cubic-bezier(.4,0,1,1) both!important;}
    .twk-cpick{left:50%!important;top:50%!important;bottom:auto!important;right:auto!important;transform:translate(-50%,-50%)!important;width:calc(100% - 32px)!important;max-width:320px!important;max-height:none!important;padding-bottom:12px!important;border-radius:var(--radius-sm)!important;corner-shape:superellipse(1.7)!important;}
    .twk-cpick .twk-cpick-sv{height:240px!important;}
    .twk-cpick-overlay{animation:none!important;z-index:calc(var(--z-modal) + 2)!important;background:rgba(0,0,0,.4)!important;}
    .twk-cpick{z-index:calc(var(--z-modal) + 3)!important;}
    .twk-color-opacity-input{width:30px;}
  }

  @media (pointer: coarse) {
    .twk-panel .pg-input { height: 32px; border-radius: 12px; padding: 0 12px; font-size: 16px; }
    .twk-panel select.pg-input { padding-right: 22px; }
  }