/* ---------------- glass color picker (colorpicker.js) ---------------- */
.pt-cpick {
  position: fixed; z-index: 200; width: 280px; box-sizing: border-box; padding: 12px;
  border-radius: 18px; background: var(--pt-glass); -webkit-backdrop-filter: var(--pt-blur-webkit); backdrop-filter: var(--pt-blur);
  border: 1px solid var(--pt-glass-brd-strong); box-shadow: var(--pt-shadow); color: var(--pt-text);
  opacity: 0; transform: translateY(-6px) scale(.97); filter: blur(4px);
  transition: opacity 140ms ease, transform 140ms cubic-bezier(.22,.61,.36,1), filter 140ms ease;
}
.pt-cpick.pt-open { opacity: 1; transform: none; filter: none; }
.pt-cpick[hidden] { display: none; }

/* saturation / brightness square */
.pt-cp-sv { position: relative; width: 100%; height: 152px; border-radius: 12px; overflow: hidden; cursor: crosshair; background: var(--hue, #f00); border: 1px solid var(--pt-glass-brd); outline: none; touch-action: none; }
.pt-cp-sv:focus-visible { box-shadow: 0 0 0 2px var(--pt-accent); }
.pt-cp-sv-sat, .pt-cp-sv-val { position: absolute; inset: 0; border-radius: inherit; }
.pt-cp-sv-sat { background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.pt-cp-sv-val { background: linear-gradient(to top, #000, rgba(0,0,0,0)); }
.pt-cp-sv-thumb { position: absolute; width: 16px; height: 16px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.5); pointer-events: none; }

/* hue + alpha sliders */
.pt-cp-sliders { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.pt-cp-sliders input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; margin: 0; padding: 0; border-radius: 999px; cursor: pointer; outline: none; }
/* selectors kept at least as specific as the base rule above, so the track gradients actually show */
.pt-cp-sliders input[type="range"].pt-cp-hue { background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%); box-shadow: inset 0 0 0 1px var(--pt-glass-brd); }
.pt-cp-sliders input[type="range"].pt-cp-alpha { position: relative;
  background:
    linear-gradient(to right, transparent, var(--stop, #000)),
    conic-gradient(var(--pt-check, rgba(0,0,0,.28)) 0 25%, transparent 0 50%, var(--pt-check, rgba(0,0,0,.28)) 0 75%, transparent 0) 0 0 / 10px 10px;
  box-shadow: inset 0 0 0 1px var(--pt-glass-brd);
}
.pt-cp-sliders input[type="range"].pt-no-alpha { display: none; }
.pt-cp-sliders input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.45); cursor: grab; }
.pt-cp-sliders input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.pt-cp-sliders input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.45); cursor: grab; }
.pt-cp-sliders input[type="range"]:focus-visible { box-shadow: 0 0 0 2px var(--pt-accent), inset 0 0 0 1px var(--pt-glass-brd); }
:root[data-pt-theme="light"] .pt-cp-alpha { --pt-check: rgba(0,0,0,.18); }

/* fields row: eyedropper · format select · value boxes · copy */
.pt-cp-fields { display: flex; align-items: flex-end; gap: 4px; }
.pt-cp-eyedrop, .pt-cp-copy { flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 0; border-radius: 8px; border: 1px solid var(--pt-glass-brd-strong); background: color-mix(in srgb, var(--pt-text) 9%, transparent); color: var(--pt-text); cursor: pointer; transition: border-color .12s, background .12s, transform .12s, color .12s; }
.pt-cp-eyedrop:hover, .pt-cp-copy:hover { border-color: var(--pt-accent); background: var(--pt-accent-soft); }
.pt-cp-eyedrop:active, .pt-cp-copy:active { transform: scale(.94); }
.pt-cp-eyedrop[hidden] { display: none; }
.pt-cp-copy.pt-copied { color: var(--pt-done); border-color: var(--pt-done); background: color-mix(in srgb, var(--pt-done) 18%, transparent); }
/* the extra .pt-cp-fields scope outranks the base .pt-fmt so the row's 30px / 8px win */
.pt-cp-fields .pt-cp-fmt { flex: none; height: 30px; border-radius: 8px; font-size: 10px; }
.pt-cp-boxes { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; gap: 4px; }
.pt-cp-f { flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pt-cp-f > span { font-size: 8.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--pt-text-faint); text-align: center; }
.pt-cp-f input { width: 100%; min-width: 0; box-sizing: border-box; height: 30px; padding: 0 3px; text-align: center; border-radius: 8px; border: 1px solid var(--pt-glass-brd-strong); background: color-mix(in srgb, var(--pt-text) 9%, transparent); color: var(--pt-text); font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; outline: none; }
.pt-cp-f input:focus { border-color: var(--pt-accent); }
.pt-cp-wide { flex: 2.2 1 0; }
.pt-cp-a { flex: 1.2 1 0; }

/* remembered swatches */
.pt-cp-recent { margin-top: 12px; }
.pt-cp-recent[hidden] { display: none; }
.pt-cp-recent-title { font-size: 9px; text-transform: uppercase; letter-spacing: .6px; color: var(--pt-text-dim); margin-bottom: 7px; }
.pt-cp-recent-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.pt-cp-sw { width: 100%; aspect-ratio: 1; padding: 0; border-radius: 6px; cursor: pointer; background: var(--sw); border: 1px solid var(--pt-glass-brd-strong); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); transition: transform .1s; }
.pt-cp-sw:hover { transform: scale(1.12); border-color: var(--pt-glass-brd-strong); }

/* toast */
#pt-confirm { position: fixed; inset: 0; z-index: 190; display: grid; place-items: center; background: rgba(0, 0, 0, 0.28); }
#pt-confirm[hidden] { display: none; }
.pt-confirm-card { min-width: 260px; max-width: 360px; padding: 16px 16px 10px; border-radius: 18px; background: var(--pt-glass); -webkit-backdrop-filter: var(--pt-blur-webkit); backdrop-filter: var(--pt-blur); border: 1px solid var(--pt-glass-brd-strong); box-shadow: var(--pt-shadow); color: var(--pt-text); }
.pt-confirm-card p { margin: 0; font: 500 13.5px/1.45 var(--pt-font); }
.pt-confirm-card .pt-ctx-actions { padding: 14px 0 0; }
.pt-confirm-card .pt-mini.pt-danger { color: var(--pt-danger); border-color: var(--pt-danger); }
/* shortcuts button (floats under the stage) + list */
#pt-keys-btn { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 120; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%;
  background: var(--pt-text); color: var(--pt-ground); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }   /* solid ink dot: stands out on any page */
#pt-keys-btn:hover { transform: translateX(-50%); background: var(--pt-text); filter: brightness(1.1); }
#pt-keys-btn svg { width: 10px; height: 10px; }
.pt-keys-pop { min-width: 300px; padding: 8px 6px 6px; }
.pt-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 4px 6px 6px; align-items: center; }
.pt-keys dt { margin: 0; display: flex; gap: 3px; justify-content: flex-end; }
.pt-keys dd { margin: 0; font-size: 12.5px; color: var(--pt-text-dim); }
.pt-key { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; font: 600 11px var(--pt-font); color: var(--pt-text); background: color-mix(in srgb, var(--pt-text) 10%, transparent); border: 1px solid var(--pt-glass-brd-strong); box-shadow: inset 0 -1px 0 var(--pt-glass-brd); white-space: nowrap; }

/* sheets: setup + doctor */
.pt-sheet { position: fixed; inset: 0; z-index: 185; display: grid; place-items: center; background: rgba(0, 0, 0, 0.32); }
.pt-sheet[hidden] { display: none; }
.pt-sheet-card { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 18px 18px 12px; border-radius: 18px; background: var(--pt-glass); -webkit-backdrop-filter: var(--pt-blur-webkit); backdrop-filter: var(--pt-blur); border: 1px solid var(--pt-glass-brd-strong); box-shadow: var(--pt-shadow); color: var(--pt-text); }
.pt-sheet-card h2 { margin: 0 0 4px; font: 700 16px var(--pt-font); }
.pt-sheet-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--pt-text-dim); }
.pt-sheet-note { margin: 4px 0 0; font-size: 11.5px; color: var(--pt-text-dim); line-height: 1.45; }
.pt-sheet-note code { font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.pt-field { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; color: var(--pt-text-dim); }
.pt-field > span:first-child { width: 96px; flex: none; }
.pt-field input[type="text"] { flex: 1; min-width: 0; height: 30px; padding: 0 9px; border-radius: 9px; border: 1px solid var(--pt-glass-brd-strong); background: color-mix(in srgb, var(--pt-text) 9%, transparent); color: var(--pt-text); font: 12.5px var(--pt-font); outline: none; }
.pt-field input[type="text"]:focus { border-color: var(--pt-accent); }
.pt-field-color { flex: 1; display: flex; align-items: center; gap: 8px; }
.pt-field-color input[type="text"] { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.pt-seg-text { flex: 1; height: 32px; }
.pt-seg-text button { font: 600 12px var(--pt-font); color: var(--pt-text); padding: 0 10px; }
.pt-doc-list { list-style: none; margin: 8px 0 0; padding: 0; }
.pt-doc-list li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--pt-glass-brd); font-size: 12.5px; }
.pt-doc-list li:first-child { border-top: none; }
.pt-doc-ico { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font: 700 11px/1 var(--pt-font); }
.pt-doc-ok .pt-doc-ico { background: var(--pt-done); color: #08130c; }
.pt-doc-warn .pt-doc-ico { background: var(--pt-open); color: #1a1400; }
.pt-doc-fail .pt-doc-ico { background: var(--pt-danger); color: #fff; }
.pt-doc-name { font-weight: 600; }
.pt-doc-detail { color: var(--pt-text-dim); }
#pt-toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--pt-glass); -webkit-backdrop-filter: var(--pt-blur-webkit); backdrop-filter: var(--pt-blur); border: 1px solid var(--pt-glass-brd-strong); color: var(--pt-text); padding: 9px 15px; border-radius: 999px; font-size: 12.5px; font-weight: 500; box-shadow: var(--pt-shadow); opacity: 0; pointer-events: none; transition: opacity 160ms, transform 160ms; z-index: 140; }
#pt-toast.pt-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ======================================================================================
   Liquid glass — after Vadim Matveev's "Liquid Glass Switcher" (codepen.io/fooontic/pen/KwpRaGr)
   Surfaces are barely tinted; legibility comes from blur + saturation and a stack of inset
   light/dark "reflex" edges. Reflex strength flips per theme. Kept at the end so it overrides
   the per-element defaults above.
   ====================================================================================== */
:root {
  /* default tint is per theme: dark glass in the dark, the pen's #bbbbbc in the light
     (a picked Tint color overrides both — and is re-lit for the other theme by JS) */
  --c-glass: #2a2d36; --c-light: #fff; --c-dark: #000;
  --glass-reflex-dark: 2; --glass-reflex-light: 0.3;   /* dark theme */
  --saturation: 150%;
  --glass-tint: 14%; --glass-tint-2: 36%;
  --pt-glass:   color-mix(in srgb, var(--c-glass) var(--glass-tint), transparent);   /* surfaces: bar, menus, modals */
  --pt-glass-2: color-mix(in srgb, var(--c-glass) var(--glass-tint-2), transparent); /* controls: buttons, pill, input */
  --glass-blur: 8px;
  --pt-blur: blur(var(--glass-blur)) saturate(var(--saturation));
  --pt-blur-webkit: blur(var(--glass-blur)) saturate(var(--saturation));
  /* spring easing (jh3y's liquid toggle): overshoots, then settles */
  --pt-spring: linear(0 0%, 0.6091 3.69%, 1.0259 7.24%, 1.1733 9.05%, 1.283 10.92%, 1.3562 12.87%, 1.3948 14.95%, 1.4014 16.03%, 1.3999 17.16%, 1.3731 19.64%, 1.3202 22.27%, 1.1394 29.39%, 1.0582 33.17%, 0.9943 37.45%, 0.9734 39.64%, 0.9593 41.92%, 0.9505 45.08%, 0.9517 48.7%, 0.9924 63.02%, 1.0046 71.2%, 1.0061 78.24%, 1 100%);
}
:root[data-pt-theme="light"] {
  --c-glass: #bbbbbc;
  --glass-reflex-dark: 1; --glass-reflex-light: 1;
  --pt-glass:   color-mix(in srgb, var(--c-glass) var(--glass-tint), transparent);
  --pt-glass-2: color-mix(in srgb, var(--c-glass) var(--glass-tint-2), transparent);
}

/* surface reflex stack (the pen's .switcher) */
#pt-bar, .pt-dim-pop, .pt-omni-results, .pt-menu-pop, #pt-ctx, .pt-modal, #pt-toast, #pt-tip, .pt-confirm-card, .pt-sheet-card, .pt-cpick, .cvm-getapp-cta, .cvm-coach, .cvm-ask, .cvm-ask-reply, .cvm-ask-connect {
  /* Shine + Shadow (a directional light/dark the angle points) over the Backing (a solid legibility layer under the tint) */
  background-image:
    linear-gradient(calc(var(--glass-light-angle, 145) * 1deg + 180deg), color-mix(in srgb, var(--c-light) calc(var(--glass-shine, 0) * 0.85%), transparent) 0%, color-mix(in srgb, var(--c-light) calc(var(--glass-shine, 0) * 0.28%), transparent) 26%, transparent 55%),
    linear-gradient(calc(var(--glass-light-angle, 145) * 1deg), color-mix(in srgb, var(--c-dark) calc(var(--glass-shade, 0) * 0.85%), transparent) 0%, color-mix(in srgb, var(--c-dark) calc(var(--glass-shade, 0) * 0.22%), transparent) 26%, transparent 55%),
    linear-gradient(color-mix(in srgb, var(--glass-backing-color, #000) var(--glass-backing, 35%), transparent), color-mix(in srgb, var(--glass-backing-color, #000) var(--glass-backing, 35%), transparent));
  border-color: transparent;
  box-shadow:
    inset 0 0 0 1px       color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 3px 4px -2px   color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0 1px 5px 0            color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0 6px 16px 0           color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent),
    0 14px 36px -6px       color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 16%), transparent);   /* so the Shadow dial reads on dark grounds too */
}
/* Corner radius: the glass panels round to taste (the toolbar keeps its concentric radius) */
.pt-menu-pop, #pt-ctx, .pt-dim-pop, .pt-omni-results, .pt-modal, .pt-confirm-card, .pt-sheet-card, .pt-cpick { border-radius: var(--glass-radius, 40px); }
/* the color picker is a glass surface like the rest: Padding dial inside, every inner corner concentric */
.pt-cpick { padding: max(6px, var(--glass-pad, 8px)); }
.pt-cp-sv, .pt-cp-eyedrop, .pt-cp-copy, .pt-cp-fields .pt-cp-fmt, .pt-cp-f input { border-radius: var(--glass-inner-r); }
/* the square's white/black gradient layers must take the square's exact corner — radius AND squircle shape —
   or the hue underneath peeks out at the corners */
.pt-cp-sv-sat, .pt-cp-sv-val { border-radius: inherit; corner-shape: inherit; }

/* control reflex stack (the pen's inner pill) */
.pt-rbtn, .pt-dim-trigger, .pt-omni input {
  border-color: transparent;
  box-shadow:
    inset 0 0 0 1px       color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 2px 1px 0 -1px   color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0 -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 -4px 1px -2px  color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0 3px 6px 0            color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
}
.pt-rbtn:hover, .pt-dim-trigger:hover { border-color: transparent; }
.pt-omni input:focus { border-color: transparent; }

/* menus, popovers, the info box and note modals come in "liquid": scale + blur settling with a
   spring, and go out with a quick shrink/fade (JS keeps the node around for the out-animation) */
@keyframes pt-liquid-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.9); filter: blur(6px); }
  55%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes pt-liquid-out { to { opacity: 0; transform: translateY(-6px) scale(0.94); filter: blur(4px); } }
.pt-dim-pop.pt-open, .pt-omni-results.pt-open, .pt-menu-pop.pt-open, #pt-ctx:not([hidden]), #pt-selbox:not([hidden]), .pt-modal, #pt-confirm:not([hidden]) .pt-confirm-card, .pt-sheet:not([hidden]) .pt-sheet-card {
  animation: pt-liquid-in 520ms var(--pt-spring);
  transform-origin: top center;
}
.pt-closing { animation: pt-liquid-out 180ms ease-in forwards !important; pointer-events: none !important; }
#pt-tip:not([hidden]) { animation: pt-liquid-in 260ms var(--pt-spring); }

/* Apple-style continuous curvature on the rectangular surfaces (Chromium; ignored elsewhere).
   Round buttons stay true circles. */
.pt-dim-pop, .pt-omni-results, .pt-menu-pop, #pt-ctx, .pt-modal, #pt-selbox, #pt-tip, .pt-cpick, .pt-cp-sv,
.pt-dim-row, .pt-omni-item, .pt-menu-item, .pt-ctx-item, .pt-mnote textarea, .pt-mini, .pt-foot-btn, .pt-state-select, .pt-dim-inputs input {
  corner-shape: squircle;
}

/* hover states ease in and out instead of snapping */
.pt-mini, .pt-foot-btn, .pt-menu-item, .pt-ctx-item, .pt-dim-row, .pt-omni-item, .pt-sb-btns button, .pt-mh-btn,
.pt-dim-val, .pt-chev, .pt-omni-clear, .pt-guide, .pt-handle, .pt-selbox-btn, .pt-omni input, .pt-mnote textarea, .pt-ctx-color input, .pt-dim-inputs input, .pt-state-chip {
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease, transform 160ms ease;
}

/* segmented picker — fooontic's "Liquid Glass Switcher": glass track, 36% inner pill that slides
   with the pen's easing and squishes on change, icons that scale up + take the accent on hover.
   concentric: full-radius track, 3px inset → full-radius segments */
.pt-seg {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  height: 40px; padding: 3px; margin: 2px 4px 6px; border-radius: 99em; box-sizing: border-box;
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  -webkit-backdrop-filter: var(--pt-blur-webkit); backdrop-filter: var(--pt-blur);
  box-shadow:
    inset 0 0 0 1px       color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0 -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2.5px 0 -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 3px 4px -2px   color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0 1px 5px 0            color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0 6px 16px 0           color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
  transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}
.pt-seg button { position: relative; z-index: 1; height: 100%; border: 0; background: none; color: var(--pt-text); border-radius: 99em; display: grid; place-items: center; cursor: pointer; transition: color 160ms; }
.pt-seg button:hover { color: var(--pt-accent); }
.pt-seg button[aria-checked="true"] { color: var(--pt-text); cursor: default; }
.pt-seg button svg { width: 17px; height: 17px; transition: scale 200ms cubic-bezier(0.5, 0, 0, 1); }
.pt-seg button:hover svg { scale: 1.2; }
.pt-seg button[aria-checked="true"] svg { scale: 1; }
.pt-seg-ind {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px - 3 * 2px) / 4); border-radius: 99em; z-index: 0;
  background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
  box-shadow:
    inset 0 0 0 1px       color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 2px 1px 0 -1px   color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0 -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0 -4px 1px -2px  color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0 3px 6px 0            color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
  translate: calc(var(--i, 0) * (100% + 2px)) 0;
  transition: translate 400ms cubic-bezier(1, 0, 0.4, 1), background-color 400ms cubic-bezier(1, 0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}
@keyframes pt-seg-squish { 0% { scale: 1 1; } 50% { scale: 1.15 1; } 100% { scale: 1 1; } }
.pt-seg-ind.pt-squish { animation: pt-seg-squish 440ms ease; }

.pt-seg-text { grid-template-columns: repeat(2, 1fr); margin: 0; height: 32px; }
.pt-seg-text .pt-seg-ind { width: calc((100% - 6px - 2px) / 2); }

/* Colors header with the format picker */
.pt-ctx-title-row { display: flex; align-items: center; justify-content: space-between; padding-right: 6px; }
.pt-fmt { -webkit-appearance: none; appearance: none; height: 22px; padding: 0 20px 0 8px; border-radius: 11px; border: 1px solid var(--pt-glass-brd-strong); background: var(--pt-glass-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center / 10px; color: var(--pt-text); font: 700 10px var(--pt-font); letter-spacing: .5px; cursor: pointer; text-transform: none; }
.pt-fmt:hover { border-color: var(--pt-accent); }